407 lines
17 KiB
PHP
407 lines
17 KiB
PHP
<?php
|
||
/**
|
||
* Onboarding modal.
|
||
*
|
||
* @since 3.1
|
||
* @package WP_Smush
|
||
*
|
||
* @var $cta_url string CTA URL.
|
||
*/
|
||
|
||
use Smush\Core\Helper;
|
||
use Smush\Core\Array_Utils;
|
||
use Smush\Core\Hub_Connector;
|
||
use Smush\Core\Media\Media_Item_Query;
|
||
use Smush\Core\Membership\Membership;
|
||
use Smush\Core\Settings;
|
||
|
||
if ( ! defined( 'WPINC' ) ) {
|
||
die;
|
||
}
|
||
|
||
$array_utils = new Array_Utils();
|
||
$setup_steps = array(
|
||
'tracking' => array(
|
||
'heading' => __( 'Ready To Speed Up Your Site?', 'wp-smushit' ),
|
||
'description' => __( 'Let’s scan your Media Library to find the hefty images slowing things down, so Smush can work its optimizing magic.', 'wp-smushit' ),
|
||
'fields' => array(
|
||
'usage' => array(
|
||
'label' => __( 'Help us make Smush better for everyone', 'wp-smushit' ),
|
||
'default' => false,
|
||
'tooltip' => __( 'Enable anonymous tracking to boost plugin performance. No personal data collected.', 'wp-smushit' ),
|
||
),
|
||
),
|
||
),
|
||
'scan_completed' => array(
|
||
'heading' => __( 'Yup, Your Site Could Definitely Be Faster', 'wp-smushit' ),
|
||
'description' => __( 'Based on the scan results, we can potentially reduce file sizes and improve the site speed.', 'wp-smushit' ),
|
||
'fields' => array(),
|
||
),
|
||
'configure' => array(
|
||
'heading' => __( 'First, Let’s Check Your Settings', 'wp-smushit' ),
|
||
'description' => __( 'We recommend enabling these features for best performance.', 'wp-smushit' ),
|
||
'fields' => array(
|
||
'lossy' => array(
|
||
'label' => __( 'Super Smush', 'wp-smushit' ),
|
||
'default' => true,
|
||
'tooltip' => __( 'Compress images up to 2x more than regular smush with multi-pass lossy compression.', 'wp-smushit' ),
|
||
),
|
||
'auto' => array(
|
||
'label' => __( 'Automatic Compression', 'wp-smushit' ),
|
||
'default' => true,
|
||
'tooltip' => __( 'Automatically optimize and compress images you upload to your site.', 'wp-smushit' ),
|
||
),
|
||
'lazy_load' => array(
|
||
'label' => __( 'Lazy Load', 'wp-smushit' ),
|
||
'default' => true,
|
||
'tooltip' => __( 'Delay loading off-screen images until visitors scroll to them. Make your page load faster, use less bandwidth, and fix "Defer offscreen images" Google PSI audit.', 'wp-smushit' ),
|
||
),
|
||
'compress_backup' => array(
|
||
'label' => __( 'Compress & Backup my Original Images', 'wp-smushit' ),
|
||
'default' => true,
|
||
'tooltip' => __( 'Smush compresses your original images — helpful if your theme serves full-size images.', 'wp-smushit' ),
|
||
),
|
||
'ultra' => array(
|
||
'label' => __( '5x Compression with Ultra', 'wp-smushit' ),
|
||
'is_pro_feature' => true,
|
||
'tooltip' => __( '5x image compression for faster-loading pages.', 'wp-smushit' ),
|
||
),
|
||
'nextgen_cdn' => array(
|
||
'label' => __( 'Next-Gen Conversion & Global Edge CDN', 'wp-smushit' ),
|
||
'is_pro_feature' => true,
|
||
'tooltip' => __( 'One-click WebP and AVIF conversion for superior performance, plus a global CDN with 119 locations for instant worldwide delivery.', 'wp-smushit' ),
|
||
),
|
||
),
|
||
),
|
||
'finish' => array(
|
||
'heading' => __( 'You’re Almost There!', 'wp-smushit' ),
|
||
'description' => __( 'To start smushing your images, create a free WPMU DEV account — quick and easy, no credit card required & no fiddly API key copy-pasting involved.', 'wp-smushit' ),
|
||
'fields' => array(),
|
||
),
|
||
);
|
||
|
||
if ( Membership::get_instance()->has_access_to_hub() ) {
|
||
unset( $setup_steps['finish'] );
|
||
}
|
||
|
||
/**
|
||
* Body content for tracking slide.
|
||
*
|
||
* @param Array_Utils $array_utils.
|
||
* @param mixed $setup_steps Array of setup_steps.
|
||
* @return void
|
||
*/
|
||
function smush_onboarding_tracking_body( $array_utils, $setup_steps ) {
|
||
$should_show_tracking_confirmation = ! is_multisite();
|
||
?>
|
||
<?php if ( $should_show_tracking_confirmation ) : ?>
|
||
<div class="smush-onboarding-tracking-box">
|
||
<label for="usage" class="sui-toggle" style="display:inline-block;width:auto;">
|
||
<input type="checkbox" id="usage" aria-labelledby="usage-label" <# if ( data.fields.usage ) { #>checked<# } #>/>
|
||
<span class="sui-toggle-slider" aria-hidden="true"> </span>
|
||
<strong id="usage-label" class="sui-toggle-label" style="text-align: left;">
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'tracking', 'fields', 'usage', 'label' ) ) ); ?>
|
||
</strong>
|
||
</label>
|
||
<span style="position:relative;top:3px;" class="sui-tooltip sui-tooltip-top-right sui-tooltip-constrained" data-tooltip="<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'tracking', 'fields', 'usage', 'tooltip' ) ) ); ?>">
|
||
<span class="sui-icon-info" aria-hidden="true"></span>
|
||
</span>
|
||
</div>
|
||
<?php endif; ?>
|
||
<a class="sui-button sui-button-blue sui-button-icon-right next" onclick="WP_Smush.onboarding.next(this);" >
|
||
<?php esc_html_e( 'Start Scan', 'wp-smushit' ); ?>
|
||
<i class="sui-icon-chevron-right" aria-hidden="true"> </i>
|
||
</a>
|
||
<?php
|
||
}
|
||
|
||
/**
|
||
* Body content for scan slide.
|
||
*/
|
||
function smush_onboarding_scan_completed_body() {
|
||
$media_item_query = new Media_Item_Query();
|
||
$attachment_count = (int) $media_item_query->get_image_attachment_count();
|
||
$smushed_count = (int) $media_item_query->get_smushed_count();
|
||
$remaining_count = $attachment_count - $smushed_count;
|
||
?>
|
||
<div class="smush-onboarding-scan" style="max-width:360px;margin:-15px auto 0;">
|
||
<div class="smush-onboarding-scan-content">
|
||
<div class="progress-bar-wrapper">
|
||
<div class="sui-progress">
|
||
<span class="sui-progress-icon" aria-hidden="true">
|
||
<span class="sui-icon-loader sui-loading"></span>
|
||
</span>
|
||
<span class="sui-progress-text" aria-live="polite">0%</span>
|
||
<div class="sui-progress-bar" aria-hidden="true">
|
||
<span style="width:0%"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="scan-stats sui-hidden">
|
||
<div class="sui-description">
|
||
<?php
|
||
if ( $remaining_count ) {
|
||
/* translators: %s - seconds remaining */
|
||
printf( esc_html__( 'Smush found %s image attachments that can be optimized to reduce file size and improve site speed.', 'wp-smushit' ), (int) $remaining_count );
|
||
} else {
|
||
esc_html_e( 'Smush found 0 image attachments that can be optimized.', 'wp-smushit' );
|
||
}
|
||
?>
|
||
</div>
|
||
<ul>
|
||
<li><span class="sui-icon-check" aria-hidden="true"></span><?php esc_html_e( 'Save up to 30% in file size with zero quality loss.', 'wp-smushit' ); ?></li>
|
||
<li><span class="sui-icon-check" aria-hidden="true"></span><?php esc_html_e( 'Boost Core Web Vitals (LCP & CLS).', 'wp-smushit' ); ?></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<a class="sui-button sui-button-blue next" onclick="WP_Smush.onboarding.next(this)" >
|
||
<?php esc_html_e( 'Configure Smush', 'wp-smushit' ); ?>
|
||
</a>
|
||
</div>
|
||
<?php
|
||
}
|
||
|
||
|
||
/**
|
||
* Body content for configure slide.
|
||
*
|
||
* @param Array_Utils $array_utils.
|
||
* @param mixed $setup_steps Array of setup_steps.
|
||
* @return void
|
||
*/
|
||
function smush_onboarding_configure_body( $array_utils, $setup_steps ) {
|
||
$fields = $array_utils->get_array_value( $setup_steps, array( 'configure', 'fields' ), array() );
|
||
$upsell_url = Helper::get_utm_link(
|
||
array(
|
||
'utm_campaign' => 'smush_wizard',
|
||
'utm_content' => 'view_plans_wizard',
|
||
)
|
||
);
|
||
?>
|
||
<div class="smush-onboarding-configure">
|
||
<div class="sui-field-list">
|
||
<div class="sui-field-list-body">
|
||
<?php
|
||
foreach ( $fields as $name => $field ) :
|
||
$is_checked = ! empty( $field['default'] );
|
||
$is_pro_feature = ! empty( $field['is_pro_feature'] );
|
||
?>
|
||
<div class="sui-field-list-item">
|
||
<label
|
||
class="sui-field-list-item-label"
|
||
for="<?php echo esc_attr( $name ); ?>"
|
||
>
|
||
<?php echo esc_html( $field['label'] ); ?>
|
||
<button class="sui-button-icon sui-tooltip sui-tooltip-top-center sui-tooltip-constrained" data-tooltip="<?php echo esc_html( $field['tooltip'] ); ?>">
|
||
<span class="sui-icon-info" aria-hidden="true"></span>
|
||
</button>
|
||
</label>
|
||
<?php if ( $is_pro_feature ) : ?>
|
||
<span class="sui-tag sui-tag-pro" data-pro-feature="<?php echo esc_attr( $name ); ?>"><?php esc_html_e( 'Pro', 'wp-smushit' ); ?></span>
|
||
<?php else : ?>
|
||
<label class="sui-toggle">
|
||
<input type="checkbox" id="<?php echo esc_attr( $name ); ?>" name="<?php echo esc_attr( $name ); ?>" <# if ( data.fields.<?php echo esc_attr( $name ); ?> ) { #>checked<# } #> />
|
||
<span class="sui-toggle-slider"></span>
|
||
</label>
|
||
<?php endif; ?>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
</div>
|
||
<div class="smush-onboarding-buttons">
|
||
<div>
|
||
<?php if ( Membership::get_instance()->has_access_to_hub() ) : ?>
|
||
<?php if ( Settings::get_instance()->has_bulk_smush_page() ) : ?>
|
||
<button type="submit" class="sui-button sui-button-blue next" style="width:100%">
|
||
<?php $cta_label = is_network_admin() ? __( 'Go To Bulk Smush', 'wp-smushit' ) : __( 'Bulk Smush Now', 'wp-smushit' ); ?>
|
||
<span class="sui-button-text-default">
|
||
<?php echo esc_html( $cta_label ); ?>
|
||
</span>
|
||
|
||
<span class="sui-button-text-onload">
|
||
<span
|
||
class="sui-icon-loader sui-loading"
|
||
aria-hidden="true"
|
||
></span>
|
||
<?php echo esc_html( $cta_label ); ?>
|
||
</span>
|
||
</button>
|
||
<?php endif; ?>
|
||
<?php else : ?>
|
||
<a class="sui-button sui-button-blue next" style="width:100%;" onclick="WP_Smush.onboarding.next(this)" >
|
||
<?php esc_html_e( 'SET UP MY FREE ACCOUNT', 'wp-smushit' ); ?>
|
||
</a>
|
||
<?php endif; ?>
|
||
</div>
|
||
<a class="smush-upsell-link smush-btn-pro-upsell" style="font-size:11px" target="_blank" href="<?php echo esc_url( $upsell_url ); ?>">
|
||
<?php
|
||
/* translators: %s: plugin discount */
|
||
esc_html_e( 'What can I get with Smush Pro?', 'wp-smushit' );
|
||
?>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<?php
|
||
}
|
||
|
||
/**
|
||
* Body content for finish slide.
|
||
*/
|
||
function smush_onboarding_finish_body() {
|
||
?>
|
||
<div class="smush-onboarding-finish" style="max-width:400px;margin:0 auto;">
|
||
<div class="smush-onboarding-finish-content">
|
||
<h3><?php esc_html_e( 'When you connect, you’ll get:', 'wp-smushit' ); ?></h3>
|
||
<ul>
|
||
<li><span class="sui-icon-check-tick" aria-hidden="true"></span><?php esc_html_e( 'Instant access to Bulk Smush API.', 'wp-smushit' ); ?></li>
|
||
<li><span class="sui-icon-check-tick" aria-hidden="true"></span><?php esc_html_e( 'Unlimited bulk smushing.', 'wp-smushit' ); ?></li>
|
||
<li><span class="sui-icon-check-tick" aria-hidden="true"></span><?php esc_html_e( 'Directory Smush.', 'wp-smushit' ); ?></li>
|
||
<li><span class="sui-icon-check-tick" aria-hidden="true"></span><?php esc_html_e( 'Auto smushing on upload.', 'wp-smushit' ); ?></li>
|
||
</ul>
|
||
</div>
|
||
<button class="sui-button sui-button-blue smush-button-dark-blue next" type="submit" >
|
||
<span class="sui-button-text-default">
|
||
<?php esc_html_e( 'CONNECT MY SITE', 'wp-smushit' ); ?>
|
||
</span>
|
||
|
||
<span class="sui-button-text-onload">
|
||
<span
|
||
class="sui-icon-loader sui-loading"
|
||
aria-hidden="true"
|
||
></span>
|
||
<?php esc_html_e( 'CONNECT MY SITE', 'wp-smushit' ); ?>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<?php
|
||
}
|
||
|
||
$onboarding_slide_keys = array_keys( $setup_steps );
|
||
$onboarding_slide_fields = array_reduce(
|
||
$setup_steps,
|
||
function ( $fields, $step ) {
|
||
if ( isset( $step['fields'] ) && is_array( $step['fields'] ) ) {
|
||
foreach ( $step['fields'] as $key => $field ) {
|
||
if ( ! empty( $field['is_pro_feature'] ) ) {
|
||
continue;
|
||
}
|
||
$fields[ $key ] = ! empty( $field['default'] );
|
||
}
|
||
}
|
||
return $fields;
|
||
},
|
||
array()
|
||
);
|
||
?>
|
||
<script>
|
||
var onBoardingData = {
|
||
slideKeys: <?php echo wp_json_encode( $onboarding_slide_keys ); ?>,
|
||
slideFields: <?php echo wp_json_encode( $onboarding_slide_fields ); ?>,
|
||
connectSiteUrl: <?php echo wp_json_encode( Hub_Connector::get_connect_site_url( 'smush-bulk', 'smush_wizard_connect' ) ); ?>,
|
||
startBulkSmushURL: <?php echo wp_json_encode( $this->get_url( 'smush-bulk&smush-action=start-bulk-smush' ) ); ?>,
|
||
isSiteConnected: <?php echo Membership::get_instance()->has_access_to_hub() ? 'true' : 'false'; ?>
|
||
};
|
||
</script>
|
||
|
||
<script type="text/template" id="smush-onboarding-free" data-cta-url="<?php echo esc_js( $cta_url ); ?>">
|
||
<div class="sui-box-header sui-flatten sui-content-center sui-spacing-sides--90">
|
||
<?php if ( ! apply_filters( 'wpmudev_branding_hide_branding', false ) ) : ?>
|
||
<figure class="sui-box-banner" aria-hidden="true">
|
||
<img src="<?php echo esc_url( WP_SMUSH_URL . 'app/assets/images/onboarding-free/graphic-onboarding-' ); ?>{{{ data.slide }}}.png"
|
||
srcset="<?php echo esc_url( WP_SMUSH_URL . 'app/assets/images/onboarding-free/graphic-onboarding-' ); ?>{{{ data.slide }}}.png 1x, <?php echo esc_url( WP_SMUSH_URL . 'app/assets/images/onboarding-free/graphic-onboarding-' ); ?>{{{ data.slide }}}@2x.png 2x"
|
||
alt="<?php esc_attr_e( 'Smush Onboarding Modal', 'wp-smushit' ); ?>" class="sui-image sui-image-center"
|
||
>
|
||
</figure>
|
||
<?php endif; ?>
|
||
<!-- Heading -->
|
||
<h3 class="sui-box-title sui-lg" id="smush-title-onboarding-dialog" style="white-space: normal;">
|
||
<# if ( 'tracking' === data.slide ) { #>
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'tracking', 'heading' ) ) ); ?>
|
||
<# } else if ( 'scan_completed' === data.slide ) { #>
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'scan_completed', 'heading' ) ) ); ?>
|
||
<# } else if ( 'configure' === data.slide ) { #>
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'configure', 'heading' ) ) ); ?>
|
||
<# } else if ( 'finish' === data.slide ) { #>
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'finish', 'heading' ) ) ); ?>
|
||
<# } #>
|
||
</h3>
|
||
<!-- End Heading -->
|
||
<!-- Description -->
|
||
<p class="sui-description" id="smush-description-onboarding-dialog">
|
||
<# if ( 'tracking' === data.slide ) { #>
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'tracking', 'description' ) ) ); ?>
|
||
<# } else if ( 'scan_completed' === data.slide ) { #>
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'scan_completed', 'description' ) ) ); ?>
|
||
<# } else if ( 'configure' === data.slide ) { #>
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'configure', 'description' ) ) ); ?>
|
||
<# } else if ( 'finish' === data.slide ) { #>
|
||
<?php echo esc_html( $array_utils->get_array_value( $setup_steps, array( 'finish', 'description' ) ) ); ?>
|
||
<# } #>
|
||
</p>
|
||
<!-- End Description -->
|
||
</div>
|
||
|
||
<!-- Main body -->
|
||
<div class="sui-box-body sui-content-center sui-spacing-sides--0">
|
||
<# if ( 'tracking' === data.slide ) { #>
|
||
<?php smush_onboarding_tracking_body( $array_utils, $setup_steps ); ?>
|
||
<# } else if( 'scan_completed' === data.slide ) { #>
|
||
<?php smush_onboarding_scan_completed_body(); ?>
|
||
<# } else if( 'configure' === data.slide ) { #>
|
||
<?php smush_onboarding_configure_body( $array_utils, $setup_steps ); ?>
|
||
<# } else if( 'finish' === data.slide ) { #>
|
||
<?php smush_onboarding_finish_body( $array_utils, $setup_steps ); ?>
|
||
<# } #>
|
||
|
||
<div class="smush-onboarding-arrows">
|
||
<a href="#" class="previous <# if ( data.first ) { #>sui-hidden<# } #>" onclick="WP_Smush.onboarding.next(this)">
|
||
<i class="sui-icon-chevron-left" aria-hidden="true"> </i>
|
||
</a>
|
||
<a href="#" class="next <# if ( data.last ) { #>sui-hidden<# } #>" onclick="WP_Smush.onboarding.next(this)">
|
||
<i class="sui-icon-chevron-right" aria-hidden="true"> </i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Main body -->
|
||
|
||
<!-- Footer -->
|
||
<div class="sui-box-footer sui-flatten sui-content-center">
|
||
<div class="sui-box-steps sui-sm">
|
||
<button onclick="WP_Smush.onboarding.goTo('tracking')" class="<# if ( 'tracking' === data.slide ) { #>sui-current<# } #>" <# if ( 'tracking' === data.slide ) { #>disabled<# } #>>
|
||
<?php esc_html_e( 'First step', 'wp-smushit' ); ?>
|
||
</button>
|
||
<button onclick="WP_Smush.onboarding.goTo('scan_completed')" class="<# if ( 'scan_completed' === data.slide ) { #>sui-current<# } #>" <# if ( 'scan_completed' === data.slide ) { #>disabled<# } #>>
|
||
<?php esc_html_e( 'Scan_completed', 'wp-smushit' ); ?>
|
||
</button>
|
||
<button onclick="WP_Smush.onboarding.goTo('configure')" class="<# if ( 'configure' === data.slide ) { #>sui-current<# } #>" <# if ( 'configure' === data.slide ) { #>disabled<# } #>>
|
||
<?php esc_html_e( 'Configure', 'wp-smushit' ); ?>
|
||
</button>
|
||
<?php if ( isset( $setup_steps['finish'] ) ) : ?>
|
||
<button onclick="WP_Smush.onboarding.goTo('finish')" class="<# if ( 'finish' === data.slide ) { #>sui-current<# } #>" <# if ( 'finish' === data.slide ) { #>disabled<# } #>>
|
||
<?php esc_html_e( 'Finish', 'wp-smushit' ); ?>
|
||
</button>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
<!-- End Footer -->
|
||
</script>
|
||
|
||
<div class="sui-modal sui-modal-md">
|
||
<div
|
||
role="dialog"
|
||
id="smush-onboarding-dialog"
|
||
class="sui-modal-content smush-onboarding-dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="smush-title-onboarding-dialog"
|
||
aria-describedby="smush-description-onboarding-dialog"
|
||
>
|
||
<div class="sui-box">
|
||
<div id="smush-onboarding-content" aria-live="polite"></div>
|
||
<input type="hidden" id="smush_quick_setup_nonce" name="_wpnonce" value="<?php echo esc_attr( wp_create_nonce( 'smush_quick_setup' ) ); ?>">
|
||
</div>
|
||
<button class="sui-modal-skip smush-onboarding-skip-link">
|
||
<?php esc_html_e( 'Skip this, I’ll set it up later', 'wp-smushit' ); ?>
|
||
</button>
|
||
</div>
|
||
</div>
|