| 1 |
<?php |
| 2 |
/** |
| 3 |
* Modular Setup Wizard Appearance editor. |
| 4 |
* |
| 5 |
* @package Booking Calendar |
| 6 |
* @var array<string,mixed> $template_context Authorized step context. |
| 7 |
*/ |
| 8 |
|
| 9 |
if ( ! defined( 'ABSPATH' ) ) { |
| 10 |
exit; |
| 11 |
} |
| 12 |
|
| 13 |
$step_data = isset( $template_context['step_data'] ) && is_array( $template_context['step_data'] ) ? $template_context['step_data'] : array(); |
| 14 |
$values = isset( $step_data['values'] ) && is_array( $step_data['values'] ) ? $step_data['values'] : array(); |
| 15 |
$starting_styles = isset( $step_data['starting_styles'] ) && is_array( $step_data['starting_styles'] ) ? $step_data['starting_styles'] : array(); |
| 16 |
$accent_colors = isset( $step_data['accent_colors'] ) && is_array( $step_data['accent_colors'] ) ? $step_data['accent_colors'] : array(); |
| 17 |
$calendar_skins = isset( $step_data['calendar_skins'] ) && is_array( $step_data['calendar_skins'] ) ? $step_data['calendar_skins'] : array(); |
| 18 |
$selected_style = isset( $values['booking_form_style'] ) ? (string) $values['booking_form_style'] : ''; |
| 19 |
$selected_accent = isset( $values['booking_form_accent_color'] ) ? strtoupper( (string) $values['booking_form_accent_color'] ) : '#315EFB'; |
| 20 |
$selected_skin = isset( $values['booking_skin'] ) ? (string) $values['booking_skin'] : ''; |
| 21 |
$selected_time_mode = isset( $values['booking_timeslot_picker'] ) ? (string) $values['booking_timeslot_picker'] : 'Off'; |
| 22 |
$template_slug = isset( $step_data['template_slug'] ) ? (string) $step_data['template_slug'] : ''; |
| 23 |
$booking_form_usage = isset( $step_data['booking_form_usage'] ) ? sanitize_key( (string) $step_data['booking_form_usage'] ) : ''; |
| 24 |
$preview_html = isset( $step_data['preview_html'] ) && is_string( $step_data['preview_html'] ) ? $step_data['preview_html'] : ''; |
| 25 |
$preview_error = isset( $step_data['preview_error'] ) && is_string( $step_data['preview_error'] ) ? $step_data['preview_error'] : ''; |
| 26 |
?> |
| 27 |
<section class="wpbc_setup_wizard__step-content wpbc_setup_wizard__appearance-step" aria-labelledby="wpbc-setup-wizard-step-title"> |
| 28 |
<header class="wpbc_setup_wizard__step-heading"> |
| 29 |
<h1 id="wpbc-setup-wizard-step-title"><?php esc_html_e( 'Choose your booking appearance', 'booking' ); ?></h1> |
| 30 |
<p class="wpbc_setup_wizard__lead"><?php esc_html_e( 'Select a starting style and fine-tune the booking experience.', 'booking' ); ?></p> |
| 31 |
</header> |
| 32 |
<?php |
| 33 |
$template_context['templates']->render( |
| 34 |
'settings-hint', |
| 35 |
array( 'settings_hint' => $template_context['settings_hint'] ) |
| 36 |
); |
| 37 |
?> |
| 38 |
|
| 39 |
<form id="wpbc-setup-wizard-step-form" novalidate> |
| 40 |
<div |
| 41 |
class="wpbc_setup_wizard__appearance-editor" |
| 42 |
data-wpbc-appearance-editor |
| 43 |
data-template-slug="<?php echo esc_attr( $template_slug ); ?>" |
| 44 |
data-booking-form-usage="<?php echo esc_attr( $booking_form_usage ); ?>" |
| 45 |
> |
| 46 |
<section class="wpbc_setup_wizard__appearance-panel wpbc_setup_wizard__appearance-starting" aria-labelledby="wpbc-appearance-starting-title"> |
| 47 |
<h2 id="wpbc-appearance-starting-title"><?php esc_html_e( 'Starting style', 'booking' ); ?></h2> |
| 48 |
<div class="wpbc_setup_wizard__appearance-style-grid"> |
| 49 |
<?php foreach ( $starting_styles as $style ) : ?> |
| 50 |
<?php |
| 51 |
$style_id = isset( $style['id'] ) ? sanitize_key( (string) $style['id'] ) : ''; |
| 52 |
$style_label = isset( $style['label'] ) ? (string) $style['label'] : ''; |
| 53 |
$style_description = isset( $style['description'] ) ? (string) $style['description'] : ''; |
| 54 |
$is_selected = $selected_style === $style_id; |
| 55 |
?> |
| 56 |
<label class="wpbc_setup_wizard__appearance-style-card wpbc_setup_wizard__appearance-style-card--<?php echo esc_attr( $style_id ); ?><?php echo $is_selected ? ' is-selected' : ''; ?>"> |
| 57 |
<span class="wpbc_setup_wizard__appearance-style-copy"> |
| 58 |
<input |
| 59 |
type="radio" |
| 60 |
name="booking_form_style" |
| 61 |
value="<?php echo esc_attr( $style_id ); ?>" |
| 62 |
required |
| 63 |
data-wpbc-setup-wizard-field |
| 64 |
data-wpbc-appearance-style |
| 65 |
<?php checked( $is_selected ); ?> |
| 66 |
> |
| 67 |
<span> |
| 68 |
<strong><?php echo esc_html( $style_label ); ?></strong> |
| 69 |
<small><?php echo esc_html( $style_description ); ?></small> |
| 70 |
</span> |
| 71 |
</span> |
| 72 |
<span class="wpbc_setup_wizard__appearance-style-preview" aria-hidden="true"> |
| 73 |
<span class="wpbc_setup_wizard__appearance-mini-calendar"> |
| 74 |
<span class="wpbc_setup_wizard__appearance-mini-calendar-grid"> |
| 75 |
<?php for ( $calendar_index = 0; $calendar_index < 28; $calendar_index++ ) : ?> |
| 76 |
<span></span> |
| 77 |
<?php endfor; ?> |
| 78 |
</span> |
| 79 |
</span> |
| 80 |
<i class="wpbc_setup_wizard__appearance-mini-fields"><b></b><b></b><b></b></i> |
| 81 |
</span> |
| 82 |
</label> |
| 83 |
<?php endforeach; ?> |
| 84 |
</div> |
| 85 |
<span class="wpbc_setup_wizard__field-error wpbc_setup_wizard__field-error--group" data-wpbc-setup-wizard-error-for="booking_form_style"></span> |
| 86 |
</section> |
| 87 |
|
| 88 |
<section class="wpbc_setup_wizard__appearance-panel wpbc_setup_wizard__appearance-controls" aria-label="<?php esc_attr_e( 'Booking appearance controls', 'booking' ); ?>"> |
| 89 |
<div class="wpbc_setup_wizard__appearance-control" data-wpbc-appearance-accent-control> |
| 90 |
<label for="wpbc-setup-wizard-appearance-accent"> |
| 91 |
<strong><?php esc_html_e( 'Accent color', 'booking' ); ?></strong> |
| 92 |
<span><?php esc_html_e( 'Choose a color that matches your brand.', 'booking' ); ?></span> |
| 93 |
</label> |
| 94 |
<div class="wpbc_setup_wizard__appearance-accent-options"> |
| 95 |
<div class="wpbc_setup_wizard__appearance-accent-swatches" role="group" aria-label="<?php esc_attr_e( 'Preset accent colors', 'booking' ); ?>"> |
| 96 |
<?php foreach ( $accent_colors as $accent_color ) : ?> |
| 97 |
<?php |
| 98 |
$accent_value = isset( $accent_color['value'] ) ? strtoupper( (string) $accent_color['value'] ) : ''; |
| 99 |
$accent_label = isset( $accent_color['label'] ) ? (string) $accent_color['label'] : ''; |
| 100 |
if ( ! preg_match( '/^#[0-9A-F]{6}$/', $accent_value ) || '' === $accent_label ) { |
| 101 |
continue; |
| 102 |
} |
| 103 |
$is_accent_selected = $selected_accent === $accent_value; |
| 104 |
?> |
| 105 |
<button |
| 106 |
type="button" |
| 107 |
class="wpbc_setup_wizard__appearance-accent-swatch<?php echo $is_accent_selected ? ' is-selected' : ''; ?>" |
| 108 |
style="--wpbc-appearance-accent: <?php echo esc_attr( $accent_value ); ?>;" |
| 109 |
data-wpbc-appearance-accent-swatch="<?php echo esc_attr( $accent_value ); ?>" |
| 110 |
aria-label="<?php echo esc_attr( sprintf( __( 'Use %s accent color', 'booking' ), $accent_label ) ); ?>" |
| 111 |
aria-pressed="<?php echo $is_accent_selected ? 'true' : 'false'; ?>" |
| 112 |
></button> |
| 113 |
<?php endforeach; ?> |
| 114 |
</div> |
| 115 |
<input |
| 116 |
type="text" |
| 117 |
id="wpbc-setup-wizard-appearance-accent" |
| 118 |
name="booking_form_accent_color" |
| 119 |
value="<?php echo esc_attr( $selected_accent ); ?>" |
| 120 |
class="wpbc_setup_wizard__appearance-coloris" |
| 121 |
data-coloris |
| 122 |
autocomplete="off" |
| 123 |
pattern="^#[0-9A-Fa-f]{6}$" |
| 124 |
required |
| 125 |
data-wpbc-setup-wizard-field |
| 126 |
data-wpbc-appearance-accent-value |
| 127 |
> |
| 128 |
</div> |
| 129 |
<span class="wpbc_setup_wizard__field-error" data-wpbc-setup-wizard-error-for="booking_form_accent_color"></span> |
| 130 |
</div> |
| 131 |
|
| 132 |
<div class="wpbc_setup_wizard__appearance-control"> |
| 133 |
<label for="wpbc-setup-wizard-appearance-skin"> |
| 134 |
<strong><?php esc_html_e( 'Calendar skin', 'booking' ); ?></strong> |
| 135 |
<span><?php esc_html_e( 'Choose the calendar appearance used in the booking form.', 'booking' ); ?></span> |
| 136 |
</label> |
| 137 |
<select id="wpbc-setup-wizard-appearance-skin" name="booking_skin" required data-wpbc-setup-wizard-field data-wpbc-appearance-preview-field> |
| 138 |
<?php foreach ( $calendar_skins as $skin_group ) : ?> |
| 139 |
<optgroup label="<?php echo esc_attr( isset( $skin_group['label'] ) ? (string) $skin_group['label'] : '' ); ?>"> |
| 140 |
<?php foreach ( $skin_group['options'] as $skin_option ) : ?> |
| 141 |
<option value="<?php echo esc_attr( (string) $skin_option['value'] ); ?>" data-wpbc-calendar-skin-url="<?php echo esc_url( isset( $skin_option['url'] ) ? (string) $skin_option['url'] : '' ); ?>" <?php selected( $selected_skin, (string) $skin_option['value'] ); ?>><?php echo esc_html( (string) $skin_option['label'] ); ?></option> |
| 142 |
<?php endforeach; ?> |
| 143 |
</optgroup> |
| 144 |
<?php endforeach; ?> |
| 145 |
</select> |
| 146 |
<span class="wpbc_setup_wizard__field-error" data-wpbc-setup-wizard-error-for="booking_skin"></span> |
| 147 |
</div> |
| 148 |
|
| 149 |
<fieldset class="wpbc_setup_wizard__appearance-control wpbc_setup_wizard__appearance-time-control"> |
| 150 |
<legend><?php esc_html_e( 'Time selection', 'booking' ); ?></legend> |
| 151 |
<p><?php esc_html_e( 'Choose how time slots are shown in the booking form.', 'booking' ); ?></p> |
| 152 |
<div> |
| 153 |
<label class="<?php echo 'Off' === $selected_time_mode ? 'is-selected' : ''; ?>"> |
| 154 |
<input type="radio" name="booking_timeslot_picker" value="Off" required data-wpbc-setup-wizard-field data-wpbc-appearance-time-mode <?php checked( $selected_time_mode, 'Off' ); ?>> |
| 155 |
<span><?php esc_html_e( 'Select box', 'booking' ); ?></span> |
| 156 |
</label> |
| 157 |
<label class="<?php echo 'On' === $selected_time_mode ? 'is-selected' : ''; ?>"> |
| 158 |
<input type="radio" name="booking_timeslot_picker" value="On" required data-wpbc-setup-wizard-field data-wpbc-appearance-time-mode <?php checked( $selected_time_mode, 'On' ); ?>> |
| 159 |
<span><?php esc_html_e( 'Time picker', 'booking' ); ?></span> |
| 160 |
</label> |
| 161 |
</div> |
| 162 |
<span class="wpbc_setup_wizard__field-error wpbc_setup_wizard__field-error--group" data-wpbc-setup-wizard-error-for="booking_timeslot_picker"></span> |
| 163 |
</fieldset> |
| 164 |
</section> |
| 165 |
|
| 166 |
<section class="wpbc_setup_wizard__appearance-preview-panel" aria-labelledby="wpbc-setup-wizard-appearance-preview-title"> |
| 167 |
<header class="wpbc_setup_wizard__appearance-preview-toolbar"> |
| 168 |
<div> |
| 169 |
<h2 id="wpbc-setup-wizard-appearance-preview-title"><?php esc_html_e( 'Live preview', 'booking' ); ?></h2> |
| 170 |
<span><i aria-hidden="true"></i><?php esc_html_e( 'Updates instantly', 'booking' ); ?></span> |
| 171 |
</div> |
| 172 |
</header> |
| 173 |
<div class="wpbc_setup_wizard__appearance-preview-stage" data-wpbc-appearance-preview-stage> |
| 174 |
<div class="wpbc_theme_preview wpbc_theme_preview_mode_form" data-wpbc-theme-preview="1" data-wpbc-appearance-inline-preview data-wpbc-inline-booking-preview="1"> |
| 175 |
<div class="wpbc_theme_real_preview" data-wpbc-theme-calendar-panel="1"> |
| 176 |
<?php echo $preview_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- generated by the shared Form Builder renderer after registry resolution and preview sanitization. ?> |
| 177 |
</div> |
| 178 |
</div> |
| 179 |
<div class="wpbc_setup_wizard__appearance-preview-error" role="alert" <?php echo '' === $preview_error ? 'hidden' : ''; ?> data-wpbc-appearance-preview-error> |
| 180 |
<i class="menu_icon icon-1x wpbc_icn_error_outline" aria-hidden="true"></i> |
| 181 |
<span><?php echo esc_html( $preview_error ); ?></span> |
| 182 |
</div> |
| 183 |
</div> |
| 184 |
<p class="wpbc_setup_wizard__appearance-preview-note wpbc_setup_wizard__message wpbc_setup_wizard__message--info"> |
| 185 |
<i class="menu_icon icon-1x wpbc_icn_info_outline" aria-hidden="true"></i> |
| 186 |
<span><?php esc_html_e( 'This request-local preview uses the booking form template selected in the previous step. Appearance changes are shown immediately and do not change any live Booking Calendar setting. Calculated date, time, capacity, and cost summaries are marked Preview only, and final booking submission is disabled.', 'booking' ); ?></span> |
| 187 |
</p> |
| 188 |
</section> |
| 189 |
</div> |
| 190 |
</form> |
| 191 |
</section> |
| 192 |
|
