Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
99.46%
183 / 184
n/a
0 / 0
 CRAP
n/a
0 / 0
1<?php
2/**
3 * Cookie Consent Banner Template
4 *
5 * @package automattic/jetpack-cookie-consent
6 */
7
8if ( ! defined( 'ABSPATH' ) ) {
9    exit;
10}
11
12// $config (and normally $copy/$categories) are supplied by Cookie_Consent::render_banner()
13// when this template is included. $copy/$categories fall back to get_copy( $config ) /
14// get_consent_categories( $config ) so the template can also be included directly with just a
15// raw $config (tests, Storybook).
16$config              = isset( $config ) && is_array( $config ) ? $config : array();
17$copy                = isset( $copy ) && is_array( $copy ) ? $copy : \Automattic\Jetpack\CookieConsent\Cookie_Consent::get_copy( $config );
18$categories          = isset( $categories ) && is_array( $categories ) ? $categories : \Automattic\Jetpack\CookieConsent\Cookie_Consent::get_consent_categories( $config );
19$category_context    = \Automattic\Jetpack\CookieConsent\Cookie_Consent::get_category_context( $categories );
20$banner_context      = array(
21    'showBanner'   => false,
22    'showModal'    => false,
23    'categories'   => $category_context,
24    'textExpanded' => false,
25    'gpcNotice'    => false,
26);
27$banner_context_json = wp_json_encode( $banner_context, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT );
28$links               = isset( $config['links'] ) && is_array( $config['links'] ) ? $config['links'] : array();
29$cookie_policy_url   = array_key_exists( 'cookie_policy_url', $links ) && is_scalar( $links['cookie_policy_url'] )
30    ? trim( (string) $links['cookie_policy_url'] )
31    : '';
32$privacy_policy_url  = (string) get_privacy_policy_url();
33?>
34
35<div
36    data-wp-interactive="jetpack/cookie-consent"
37    data-wp-context="<?php echo esc_attr( $banner_context_json ); ?>"
38    data-wp-init="callbacks.init"
39    class="jetpack-cookie-consent"
40>
41    <!-- Banner -->
42    <div
43        class="jetpack-cookie-consent__banner"
44        data-wp-class--jetpack-cookie-consent__banner--visible="state.showBanner"
45        role="dialog"
46        aria-labelledby="cookie-consent-title"
47        aria-describedby="cookie-consent-description"
48    >
49        <div class="jetpack-cookie-consent__banner-inner">
50
51            <div class="jetpack-cookie-consent__banner-content">
52                <h2 id="cookie-consent-title" class="jetpack-cookie-consent__banner-title">
53                    <?php echo esc_html( $copy['banner_title'] ); ?>
54                </h2>
55                <p id="cookie-consent-description" class="jetpack-cookie-consent__banner-description">
56                    <?php echo esc_html( $copy['banner_description'] ); ?>
57                </p>
58                <p class="jetpack-cookie-consent__gpc-notice" role="status" data-wp-bind--hidden="!context.gpcNotice" hidden>
59                    <?php echo esc_html( $copy['gpc_notice'] ); ?>
60                </p>
61            </div>
62            <div class="jetpack-cookie-consent__banner-actions">
63                <button
64                    type="button"
65                    class="wp-element-button jetpack-cookie-consent__button jetpack-cookie-consent__button--primary"
66                    data-wp-on--click="actions.acceptAll"
67                >
68                    <?php echo esc_html( $copy['banner_accept_button'] ); ?>
69                </button>
70                <button
71                    type="button"
72                    class="wp-element-button jetpack-cookie-consent__button jetpack-cookie-consent__button--primary"
73                    data-wp-on--click="actions.rejectAll"
74                >
75                    <?php echo esc_html( $copy['banner_reject_button'] ); ?>
76                </button>
77                <button
78                    type="button"
79                    class="jetpack-cookie-consent__button jetpack-cookie-consent__button--secondary"
80                    data-wp-on--click="actions.openModal"
81                >
82                    <?php echo esc_html( $copy['banner_customize_button'] ); ?>
83                </button>
84            </div>
85        </div>
86    </div>
87
88    <!-- Modal Overlay-->
89    <div
90        class="jetpack-cookie-consent__modal-overlay"
91        data-wp-bind--hidden="!state.showModal"
92        data-wp-on--click="actions.closeModal"
93        role="presentation"
94    ></div>
95    <div
96        class="jetpack-cookie-consent__modal"
97        data-wp-bind--hidden="!state.showModal"
98        data-wp-class--jetpack-cookie-consent__modal--visible="state.showModal"
99        data-wp-on--keydown="actions.onModalKeyDown"
100        role="dialog"
101        aria-labelledby="cookie-consent-modal-title"
102        data-wp-bind--aria-describedby="state.modalGpcNoticeId"
103        aria-modal="true"
104    >
105        <div class="jetpack-cookie-consent__modal-header">
106            <h3 id="cookie-consent-modal-title" class="jetpack-cookie-consent__modal-title">
107                <?php echo esc_html( $copy['modal_title'] ); ?>
108            </h3>
109            <button
110                type="button"
111                class="jetpack-cookie-consent__modal-close"
112                data-wp-on--click="actions.closeModal"
113                aria-label="<?php echo esc_attr( $copy['modal_close_label'] ); ?>"
114            >
115                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
116                    <path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
117                </svg>
118            </button>
119        </div>
120        <div class="jetpack-cookie-consent__modal-content">
121            <div class="jetpack-cookie-consent__modal-body">
122                <p class="jetpack-cookie-consent__modal-description">
123                    <?php
124                    echo esc_html( $copy['modal_description'] );
125
126                    // Only link policies that are actually configured, so we never render a
127                    // dead href="" link (e.g. when the site has no Privacy Policy page set).
128                    $policy_links = array();
129                    if ( '' !== $privacy_policy_url ) {
130                        $policy_links[] = sprintf(
131                            '<a href="%s" class="jetpack-cookie-consent__link">%s</a>',
132                            esc_url( $privacy_policy_url ),
133                            esc_html( $copy['privacy_policy_link'] )
134                        );
135                    }
136                    if ( '' !== $cookie_policy_url ) {
137                        $policy_links[] = sprintf(
138                            '<a href="%s" class="jetpack-cookie-consent__link">%s</a>',
139                            esc_url( $cookie_policy_url ),
140                            esc_html( $copy['cookie_policy_link'] )
141                        );
142                    }
143                    // Append the "Learn more in our <links>." clause only when at least one
144                    // policy link exists, so the description never ends with a dangling lead-in.
145                    if ( $policy_links ) {
146                        // Each link is already escaped above; join them with the conjunction.
147                        echo ' ' . esc_html( $copy['modal_links_lead'] ) . ' '
148                            . wp_kses_post( implode( ' ' . esc_html( $copy['modal_links_conjunction'] ) . ' ', $policy_links ) )
149                            . '.';
150                    }
151                    ?>
152                </p>
153
154                <p id="cookie-consent-modal-gpc-notice" class="jetpack-cookie-consent__gpc-notice" role="status" data-wp-bind--hidden="!context.gpcNotice" hidden>
155                    <?php echo esc_html( $copy['gpc_notice'] ); ?>
156                </p>
157
158                <div class="jetpack-cookie-consent__category-controls">
159                    <button
160                        type="button"
161                        class="jetpack-cookie-consent__description-toggle"
162                        data-wp-class--jetpack-cookie-consent__description-toggle--expanded="context.textExpanded"
163                        data-wp-on--click="actions.toggleDescription"
164                        aria-label="<?php echo esc_attr( $copy['category_toggle_label'] ); ?>"
165                    >
166                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
167                            <path d="M18 12.5319L12.5 16.9319L7 12.5319L7.9 11.3319L12.5 14.9319L17 11.3319L18 12.5319Z" fill="#1E1E1E"/>
168                        </svg>
169                    </button>
170
171                    <?php foreach ( $categories as $category ) : ?>
172                        <?php
173                        $preference_key  = \Automattic\Jetpack\CookieConsent\Cookie_Consent::get_category_preference_key( $category['key'] );
174                        $input_id        = 'cookie-' . sanitize_html_class( $preference_key );
175                        $checkbox_class  = 'jetpack-cookie-consent__category-checkbox';
176                        $checkbox_class .= $category['required'] ? ' jetpack-cookie-consent__category-checkbox--disabled' : '';
177                        ?>
178                        <div class="jetpack-cookie-consent__category">
179                            <div class="jetpack-cookie-consent__category-header">
180                                <div class="<?php echo esc_attr( $checkbox_class ); ?>">
181                                    <input
182                                        type="checkbox"
183                                        id="<?php echo esc_attr( $input_id ); ?>"
184                                        data-consent-category="<?php echo esc_attr( $preference_key ); ?>"
185                                        data-wp-bind--checked="context.categories.<?php echo esc_attr( $preference_key ); ?>"
186                                        <?php if ( ! $category['required'] ) : ?>
187                                            data-wp-on--change="actions.toggleCategory"
188                                        <?php endif; ?>
189                                        <?php checked( $category_context[ $preference_key ] ); ?>
190                                        <?php disabled( $category['required'] ); ?>
191                                    />
192                                    <label for="<?php echo esc_attr( $input_id ); ?>">
193                                        <span class="jetpack-cookie-consent__category-checkbox-icon"></span>
194                                        <span class="jetpack-cookie-consent__category-label-text">
195                                            <?php echo esc_html( $category['label'] ); ?>
196                                            <?php if ( $category['required'] ) : ?>
197                                                <span class="jetpack-cookie-consent__category-badge">
198                                                    <?php echo esc_html( $copy['always_active_label'] ); ?>
199                                                </span>
200                                            <?php endif; ?>
201                                        </span>
202                                    </label>
203                                </div>
204                            </div>
205                            <div class="jetpack-cookie-consent__category-content">
206                                <?php if ( $category['required'] ) : ?>
207                                    <p data-wp-bind--hidden="context.textExpanded" class="jetpack-cookie-consent__category-text">
208                                        <?php echo esc_html( wp_trim_words( $category['description'], 25 ) ); ?>
209                                    </p>
210                                    <p data-wp-bind--hidden="!context.textExpanded" class="jetpack-cookie-consent__category-text">
211                                        <?php echo esc_html( $category['description'] ); ?>
212                                    </p>
213                                <?php else : ?>
214                                    <p class="jetpack-cookie-consent__category-text">
215                                        <?php echo esc_html( $category['description'] ); ?>
216                                    </p>
217                                <?php endif; ?>
218                            </div>
219                        </div>
220                    <?php endforeach; ?>
221                </div>
222            </div>
223            <div class="jetpack-cookie-consent__modal-footer">
224                <button
225                    type="button"
226                    class="wp-element-button jetpack-cookie-consent__button jetpack-cookie-consent__button--primary"
227                    data-wp-on--click="actions.savePreferences"
228                >
229                    <?php echo esc_html( $copy['save_preferences_button'] ); ?>
230                </button>
231                <button
232                    type="button"
233                    class="jetpack-cookie-consent__button jetpack-cookie-consent__button--secondary"
234                    data-wp-on--click="actions.acceptAll"
235                >
236                    <?php echo esc_html( $copy['accept_all_button'] ); ?>
237                </button>
238                <button
239                    type="button"
240                    class="jetpack-cookie-consent__button jetpack-cookie-consent__button--secondary"
241                    data-wp-on--click="actions.rejectAll"
242                >
243                    <?php echo esc_html( $copy['reject_all_button'] ); ?>
244                </button>
245            </div>
246        </div>
247    </div>
248</div>