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