<?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>