Files
David Stone a815fdf179 Prep Plugin for release on WordPress.org
Escape everything that should be escaped.
Add nonce checks where needed.
Sanitize all inputs.
Apply Code style changes across the codebase.
Correct many deprecation notices.
Optimize load order of many filters.
2025-04-07 09:15:21 -06:00

324 lines
10 KiB
PHP

<?php
/**
* Steps view.
*
* @since 2.0.0
*/
?>
<div id="wu-checkout-editor-app">
<!-- Add new Step Section -->
<div id="wp-ultimo-list-table-add-new-1" class="postbox wu-mb-0" v-cloak>
<div class="wu-bg-white wu-px-4 wu-py-3 wu-flex wu-items-center">
<div class="wu-w-1/2">
<span class="wu-text-gray-600 wu-my-1 wu-text-2xs wu-uppercase wu-font-semibold">
<?php echo esc_html(sprintf(__('%1$s steps and %2$s fields', 'wp-multisite-waas'), '{{ steps.length }}', '{{ field_count }}')); ?>
</span>
</div>
<div class="wu-w-1/2 wu-text-right">
<ul class="wu-m-0 wu-overflow-hidden wu-flex wu-justify-end">
<li class="wu-m-0 wu-ml-4">
<a
title="<?php esc_attr_e('Preview', 'wp-multisite-waas'); ?>"
href="#"
type="button"
class="wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-text-gray-600 hover:wu-text-gray-800"
@click.prevent="get_preview()"
>
<span class="dashicons-wu-eye wu-align-middle"></span>
<span v-show="!preview"><?php esc_html_e('Preview', 'wp-multisite-waas'); ?></span>
<span v-cloak v-show="preview"><?php esc_html_e('Editor', 'wp-multisite-waas'); ?></span>
</a>
</li>
<li class="wu-m-0 wu-ml-4" v-show="!preview">
<a
title="<?php esc_attr_e('Add new Checkout Step', 'wp-multisite-waas'); ?>"
href="<?php echo esc_url(wu_get_form_url('add_new_form_step', array('checkout_form' => $checkout_form))); ?>"
type="button"
class="wubox wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-text-gray-600 hover:wu-text-gray-800"
>
<span class="dashicons-wu-circle-with-plus wu-align-middle"></span>
<?php esc_html_e('Add new Checkout Step', 'wp-multisite-waas'); ?>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Add new Step Section -->
<!-- Editor -->
<div
v-cloak
class="wu-px-4 wu-py-1 wu-bg-gray-200 wu-border wu-border-solid wu-border-gray-400 wu-border-t-0 wu-border-b-0"
:class="dragging ? 'is-dragging' : ''"
>
<!-- Editor Proper -->
<draggable
:list="steps"
:tag="'div'"
group="step"
handle=".hndle"
ghost-class="wu-draggable-ghost"
drag-class="wu-hide-inside"
@start="dragging = true"
@end="dragging = false"
v-show="!preview"
>
<div
:id="'wp-ultimo-list-table-' + step.id"
class="postbox wu-my-4"
v-cloak
v-for="(step, idx) in steps"
>
<div class="postbox-header">
<h2 class="hndle ui-sortable-handle">
<span class="wu-text-gray-700 ">
<span class="wu-text-2xs wu-font-mono wu-uppercase wu-mr-4"><?php printf(esc_html__('Step %s', 'wp-multisite-waas'), '{{ idx + 1 }}'); ?></span> {{ step.name }}
</span>
</h2>
</div>
<div class="inside" style="margin-top: 0 !important;">
<!-- Visibility -->
<div v-if="step.logged && step.logged !== 'always'" class="wu-py-2 wu-px-4 wu--mx-3 wu-bg-blue-100 wu-text-blue-600 wu-border-solid wu-border-0 wu-border-b wu-border-gray-400">
<span class="dashicons-wu-eye wu-mr-1 wu-align-middle"></span>
<span v-if="step.logged == 'guests_only'">
<?php echo wp_kses_post(__('This step is only visible for <strong>guests</strong>', 'wp-multisite-waas')); ?>
</span>
<span v-else>
<?php echo wp_kses_post(__('This step is only visible for <strong>logged-in users</strong>', 'wp-multisite-waas')); ?>
</span>
</div>
<!-- Visibility - End -->
<div class="wu-advanced-filters wu-widget-list-table wu--mx-3 wu--mb-3">
<div id="wu-checkout_form_section_list_table" class="wu-list-table wu-mode-list">
<wu-draggable-table
:list="step.fields"
:headers="headers"
:step_name="step.id"
></wu-draggable-table>
</div>
</div>
<div
class="wu-bg-gray-100 wu-px-4 wu-py-3 wu--m-3 wu-mt-3 wu-border-t wu-border-l-0 wu-border-r-0 wu-border-b-0 wu-border-gray-400 wu-border-solid wu-text-right">
<ul class="wu-m-0 wu-overflow-hidden md:wu-flex wu-w-full md:wu-w-auto wu-justify-end">
<li class="wu-m-0 md:wu-ml-4 wu-text-center">
<a
v-show="delete_step_id !== step.id"
v-on:click.prevent="delete_step_id = step.id"
title="<?php esc_html_e('Delete', 'wp-multisite-waas'); ?>"
href="#"
class="wu-text-red-500 wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-p-4 md:wu-p-0 wu-inline-block"
>
<?php esc_html_e('Delete Step', 'wp-multisite-waas'); ?>
</a>
<a
v-show="delete_step_id === step.id"
v-on:click.prevent="remove_step(step.id)"
title="<?php esc_html_e('Delete', 'wp-multisite-waas'); ?>"
href="#"
class="wu-text-red-700 wu-uppercase wu-text-2xs wu-font-bold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-p-4 md:wu-p-0 wu-inline-block"
>
<?php esc_html_e('Confirm?', 'wp-multisite-waas'); ?>
</a>
</li>
<li class="wu-m-0 md:wu-ml-4 wu-text-center">
<a title="<?php esc_html_e('Edit Section', 'wp-multisite-waas'); ?>"
:href="'
<?php
echo wu_get_form_url(
'add_new_form_step',
[
'checkout_form' => $checkout_form,
'step' => '',
]
);
?>
=' + step.id"
type="button"
class="wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-text-gray-600 hover:wu-text-gray-800 wubox wu-p-4 md:wu-p-0 wu-inline-block"
>
<?php esc_html_e('Edit Section', 'wp-multisite-waas'); ?>
</a>
</li>
<li class="wu-m-0 md:wu-ml-4 wu-text-center">
<a title="<?php esc_html_e('Add new Field', 'wp-multisite-waas'); ?>"
:href="'
<?php
echo wu_get_form_url(
'add_new_form_field',
[
'checkout_form' => $checkout_form,
'width' => 600,
'step' => '',
]
);
?>
=' + step.id"
type="button" class="wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-text-gray-600 hover:wu-text-gray-800 wubox wu-p-4 md:wu-p-0 wu-inline-block">
<span class="dashicons-wu-circle-with-plus wu-align-text-bottom"></span>
<?php esc_html_e('Add new Field', 'wp-multisite-waas'); ?>
</a>
</li>
</ul>
</div>
</div>
</div>
</draggable>
<!-- /Editor Proper -->
<!-- Preview Block -->
<div v-show="preview">
<div v-show="!loading_preview && !preview_error" class="wu-text-center wu-mt-3">
<a @click.prevent="get_preview('user')" href="#" class="wu-m-2 wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-text-gray-600 hover:wu-text-gray-800">
<?php esc_html_e('See as existing user', 'wp-multisite-waas'); ?>
</a>
<a @click.prevent="get_preview('visitor')" href="#" class="wu-m-2 wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-text-gray-600 hover:wu-text-gray-800">
<?php esc_html_e('See as visitor', 'wp-multisite-waas'); ?>
</a>
</div>
<!-- Preview Loading -->
<div v-show="loading_preview" class="wu-block wu-p-4 wu-py-8 wu-bg-white wu-text-center wu-my-4 wu-border wu-border-solid wu-rounded wu-border-gray-400">
<span class="wu-blinking-animation wu-text-gray-600 wu-my-1 wu-text-2xs wu-uppercase wu-font-semibold">
<?php esc_html_e('Loading Preview...', 'wp-multisite-waas'); ?>
</span>
</div>
<!-- /Preview Loading -->
<!-- Error -->
<div v-show="preview_error" class="wu-block wu-p-4 wu-py-8 wu-bg-white wu-text-center wu-my-4 wu-border wu-border-solid wu-rounded wu-border-gray-400">
<span class="wu-text-red-600 wu-my-1 wu-text-2xs wu-uppercase wu-font-semibold">
<?php esc_html_e('Something wrong happened along the way =(', 'wp-multisite-waas'); ?>
</span>
</div>
<!-- /Error -->
<!-- Preview Proper -->
<!-- <div v-show="!loading_preview && !preview_error" class="wu-block wu-p-8 wu-bg-white wu-my-4 wu-border wu-border-solid wu-rounded wu-border-gray-400" v-html="preview_content"></div> -->
<div v-show="!loading_preview && !preview_error" id="wu-iframe-content" class="wu-w-full wu-relative">
<iframe id="wp-ultimo-checkout-preview" v-bind:src="iframe_preview_url" class="wu-w-full wu-h-full wu-m-0 wu-mt-4 wu-mb-2 wu-p-0 wu-overflow-hidden wu-border-radius wu-border wu-border-solid wu-rounded wu-border-gray-400">
<?php esc_html_e('Your browser doesn\'t support iframes', 'wp-multisite-waas'); ?>
</iframe>
</div>
<!-- /Preview Proper -->
</div>
<!-- /Preview Block -->
</div>
<!-- /Editor -->
<!-- Add new Step Section -->
<div id="wp-ultimo-list-table-add-new-2" class="postbox" v-cloak>
<div class="wu-bg-white wu-px-4 wu-py-3 wu-flex wu-items-center">
<div class="wu-w-1/2">
<span class="wu-text-gray-600 wu-my-1 wu-text-2xs wu-uppercase wu-font-semibold">
<?php echo esc_html(sprintf(__('%1$s steps and %2$s fields', 'wp-multisite-waas'), '{{ steps.length }}', '{{ field_count }}')); ?>
</span>
</div>
<div class="wu-w-1/2 wu-text-right">
<ul class="wu-m-0 wu-overflow-hidden wu-flex wu-justify-end">
<li class="wu-m-0 wu-ml-4">
<a
title="<?php esc_attr_e('Preview', 'wp-multisite-waas'); ?>"
href="#"
type="button"
class="wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-text-gray-600 hover:wu-text-gray-800"
@click.prevent="get_preview('user')"
>
<span class="dashicons-wu-eye wu-align-middle"></span>
<span v-show="!preview"><?php esc_html_e('Preview', 'wp-multisite-waas'); ?></span>
<span v-cloak v-show="preview"><?php esc_html_e('Editor', 'wp-multisite-waas'); ?></span>
</a>
</li>
<li class="wu-m-0 wu-ml-4" v-show="!preview">
<a
title="<?php esc_attr_e('Add new Checkout Step', 'wp-multisite-waas'); ?>"
href="<?php echo esc_url(wu_get_form_url('add_new_form_step', array('checkout_form' => $checkout_form))); ?>"
type="button"
class="wubox wu-uppercase wu-text-2xs wu-font-semibold wu-no-underline wu-outline-none hover:wu-shadow-none focus:wu-shadow-none wu-text-gray-600 hover:wu-text-gray-800"
>
<span class="dashicons-wu-circle-with-plus wu-align-middle"></span>
<?php esc_html_e('Add new Checkout Step', 'wp-multisite-waas'); ?>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Add new Step Section -->
<textarea class="wu-hidden" v-cloak name="_settings" v-html="JSON.stringify(steps)"></textarea>
</div>