Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
0.00%
0 / 118
0.00%
0 / 4
 CRAP
n/a
0 / 0
Automattic\Jetpack\Extensions\Calendly\render
0.00%
0 / 68
0.00%
0 / 1
 132
Automattic\Jetpack\Extensions\Calendly\get_attribute
0.00%
0 / 12
0.00%
0 / 1
 12
Automattic\Jetpack\Extensions\Calendly\enqueue_calendly_js
0.00%
0 / 12
0.00%
0 / 1
 2
Automattic\Jetpack\Extensions\Calendly\deprecated_render_button_v1
0.00%
0 / 24
0.00%
0 / 1
 42
1<?php
2/**
3 * Calendly block render implementation.
4 *
5 * Loaded lazily from calendly.php only when the block is rendered, to keep the
6 * render body out of the eager front-end PHP/opcache footprint.
7 *
8 * @package automattic/jetpack
9 */
10
11namespace Automattic\Jetpack\Extensions\Calendly;
12
13use Automattic\Jetpack\Blocks;
14use Jetpack_Gutenberg;
15
16if ( ! defined( 'ABSPATH' ) ) {
17    exit( 0 );
18}
19
20/**
21 * Calendly block registration/dependency declaration.
22 *
23 * @param array  $attr    Array containing the Calendly block attributes.
24 * @param string $content String containing the Calendly block content.
25 *
26 * @return string
27 */
28function render( $attr, $content ) {
29
30    if ( is_admin() ) {
31        return;
32    }
33    $url = Jetpack_Gutenberg::validate_block_embed_url(
34        get_attribute( $attr, 'url' ),
35        array( 'calendly.com' )
36    );
37    if ( empty( $url ) ) {
38        return;
39    }
40
41    /*
42     * Enqueue necessary scripts and styles.
43     */
44    Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
45
46    $style                   = get_attribute( $attr, 'style' );
47    $hide_event_type_details = get_attribute( $attr, 'hideEventTypeDetails' );
48    $background_color        = get_attribute( $attr, 'backgroundColor' );
49    $text_color              = get_attribute( $attr, 'textColor' );
50    $primary_color           = get_attribute( $attr, 'primaryColor' );
51    $classes                 = Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attr, array( 'calendly-style-' . $style ) );
52    $block_id                = wp_unique_id( 'calendly-block-' );
53    $is_amp_request          = Blocks::is_amp_request();
54
55    if ( ! wp_script_is( 'jetpack-calendly-external-js' ) && ! $is_amp_request ) {
56        enqueue_calendly_js();
57    }
58
59    $base_url = $url;
60    $url      = add_query_arg(
61        array(
62            'hide_event_type_details' => (int) $hide_event_type_details,
63            'background_color'        => sanitize_hex_color_no_hash( $background_color ),
64            'text_color'              => sanitize_hex_color_no_hash( $text_color ),
65            'primary_color'           => sanitize_hex_color_no_hash( $primary_color ),
66        ),
67        $url
68    );
69
70    if ( 'link' === $style ) {
71        if ( ! wp_style_is( 'jetpack-calendly-external-css' ) ) {
72            wp_enqueue_style( 'jetpack-calendly-external-css', 'https://assets.calendly.com/assets/external/widget.css', null, JETPACK__VERSION );
73        }
74
75        // Render deprecated version of Calendly block if needed. New markup block button class before rendering here.
76        if ( ! str_contains( $content, 'wp-block-jetpack-button' ) ) {
77            $content = deprecated_render_button_v1( $attr, $block_id, $classes, $url );
78        } else {
79            $content = str_replace( 'calendly-widget-id', esc_attr( $block_id ), $content );
80            $content = str_replace( $base_url, $url, $content );
81        }
82
83        if ( ! $is_amp_request ) {
84            wp_add_inline_script(
85                'jetpack-calendly-external-js',
86                sprintf( 'calendly_attach_link_events( %s )', wp_json_encode( $block_id, JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP ) )
87            );
88        }
89    } elseif ( $is_amp_request ) { // Inline style.
90        $content = sprintf(
91            '<div class="%1$s" id="%2$s"><a href="%3$s" role="button" target="_blank">%4$s</a></div>',
92            esc_attr( Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attr ) ),
93            esc_attr( $block_id ),
94            esc_attr( $url ),
95            wp_kses_post( get_attribute( $attr, 'submitButtonText' ) )
96        );
97    } else {
98        $content           = sprintf(
99            '<div class="%1$s" id="%2$s"></div>',
100            esc_attr( $classes ),
101            esc_attr( $block_id )
102        );
103        $script            = <<<'JS_END'
104jetpackInitCalendly( %s, %s );
105JS_END;
106        $json_encode_flags = JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP;
107        if ( get_option( 'blog_charset' ) === 'UTF-8' ) {
108            $json_encode_flags |= JSON_UNESCAPED_UNICODE;
109        }
110        wp_add_inline_script(
111            'jetpack-calendly-external-js',
112            sprintf(
113                $script,
114                wp_json_encode( esc_url_raw( $url ), $json_encode_flags ),
115                wp_json_encode( $block_id, $json_encode_flags )
116            )
117        );
118    }
119
120    return $content;
121}
122
123/**
124 * Get filtered attributes.
125 *
126 * @param array  $attributes     Array containing the Calendly block attributes.
127 * @param string $attribute_name String containing the attribute name to get.
128 *
129 * @return string
130 */
131function get_attribute( $attributes, $attribute_name ) {
132    if ( isset( $attributes[ $attribute_name ] ) ) {
133        return $attributes[ $attribute_name ];
134    }
135
136    $default_attributes = array(
137        'style'                => 'inline',
138        'submitButtonText'     => esc_html__( 'Schedule time with me', 'jetpack' ),
139        'backgroundColor'      => 'ffffff',
140        'textColor'            => '4D5055',
141        'primaryColor'         => '00A2FF',
142        'hideEventTypeDetails' => false,
143    );
144
145    if ( isset( $default_attributes[ $attribute_name ] ) ) {
146        return $default_attributes[ $attribute_name ];
147    }
148}
149
150/**
151 * Enqueues the Calendly JS library and inline function to attach event
152 * handlers to the button.
153 *
154 * @return void
155 */
156function enqueue_calendly_js() {
157    wp_enqueue_script(
158        'jetpack-calendly-external-js',
159        'https://assets.calendly.com/assets/external/widget.js',
160        null,
161        JETPACK__VERSION,
162        false
163    );
164
165    wp_add_inline_script(
166        'jetpack-calendly-external-js',
167        "function jetpackInitCalendly( url, elementId ) {
168            function initCalendlyWidget() {
169                if ( ! document.getElementById( elementId ) ) {
170                    return;
171                }
172                Calendly.initInlineWidget({
173                    url: url,
174                    parentElement: document.getElementById( elementId ),
175                    inlineStyles: false,
176                });
177            };
178            // For P2s only: wait until after o2 has
179            // replaced main#content to initialize widget.
180            if ( window.jQuery && window.o2 ) {
181                jQuery( 'body' ).on( 'ready_o2', function() { initCalendlyWidget() } );
182            // Else initialize widget without waiting.
183            } else {
184                document.addEventListener('DOMContentLoaded', function() {
185                    initCalendlyWidget();
186                });
187            }
188        };
189
190        function calendly_attach_link_events( elementId ) {
191            var widget = document.getElementById( elementId );
192            if ( widget ) {
193                widget.addEventListener( 'click', function( event ) {
194                    event.preventDefault();
195                    Calendly.initPopupWidget( { url: event.target.href } );
196                } );
197                widget.addEventListener( 'keydown', function( event ) {
198                    // Enter and space keys.
199                    if ( event.keyCode === 13 || event.keyCode === 32 ) {
200                        event.preventDefault();
201                        event.target && event.target.click();
202                    }
203                } );
204            }
205        }"
206    );
207}
208
209/**
210 * Renders a deprecated legacy version of the button HTML.
211 *
212 * @param array  $attributes Array containing the Calendly block attributes.
213 * @param string $block_id  The value for the ID attribute of the link.
214 * @param string $classes   The CSS classes for the wrapper div.
215 * @param string $url       Calendly URL for the link HREF.
216 *
217 * @return string
218 */
219function deprecated_render_button_v1( $attributes, $block_id, $classes, $url ) {
220    // This is the legacy version, so create the full link content.
221    $submit_button_text             = get_attribute( $attributes, 'submitButtonText' );
222    $submit_button_classes          = get_attribute( $attributes, 'submitButtonClasses' );
223    $submit_button_text_color       = get_attribute( $attributes, 'customTextButtonColor' );
224    $submit_button_background_color = get_attribute( $attributes, 'customBackgroundButtonColor' );
225
226    /*
227     * If we have some additional styles from the editor
228     * (a custom text color, custom bg color, or both )
229     * Let's add that CSS inline.
230     */
231    if ( ! empty( $submit_button_text_color ) || ! empty( $submit_button_background_color ) ) {
232        $inline_styles = sprintf(
233            '#%1$s{%2$s%3$s}',
234            esc_attr( $block_id ),
235            ! empty( $submit_button_text_color )
236                ? 'color:#' . sanitize_hex_color_no_hash( $submit_button_text_color ) . ';'
237                : '',
238            ! empty( $submit_button_background_color )
239                ? 'background-color:#' . sanitize_hex_color_no_hash( $submit_button_background_color ) . ';'
240                : ''
241        );
242        wp_add_inline_style( 'jetpack-calendly-external-css', $inline_styles );
243    }
244
245    return sprintf(
246        '<div class="wp-block-button %1$s"><a id="%2$s" class="%3$s" href="%4$s" role="button">%5$s</a></div>',
247        esc_attr( $classes ),
248        esc_attr( $block_id ),
249        ! empty( $submit_button_classes ) ? esc_attr( $submit_button_classes ) : 'wp-block-button__link',
250        esc_attr( $url ),
251        wp_kses_post( $submit_button_text )
252    );
253}