Skip to content

Commit

Permalink
feat: adds upgrade box and notice to upgrade when the user is close t…
Browse files Browse the repository at this point in the history 
…o the limit
  • Loading branch information
@selul
selul committed Feb 1, 2019
1 parent 60613b9 commit 62b216a
Show file tree
Hide file tree
Showing 6 changed files with 263 additions and 124 deletions.
164 changes: 100 additions & 64 deletions assets/js/bundle.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions assets/js/bundle.min.js
View file

Large diffs are not rendered by default.

9 changes: 6 additions & 3 deletions assets/vue/components/app-header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@

<div class="level-left">
<a class="logo level-item" href="https://optimole.com" target="_blank">
<figure class="media">
<img :src="logo" :alt="strings.optimole + ' ' + strings.service_details" width="75" height="75">
<figure class="image is-96x96 is-hidden-touch">
<img :src="logo" :alt="strings.optimole + ' ' + strings.service_details" >
</figure>
<figure class="image is-48x48 is-hidden-desktop">
<img :src="logo" :alt="strings.optimole + ' ' + strings.service_details" >
</figure>
</a>
<h3 class="has-text-centered has-text-grey-dark is-size-4 level-item">
<h3 class="has-text-centered has-text-grey-dark is-size-5 is-size-4-widescreen is-size-6-touch level-item">
<span class="has-text-weight-semibold">
OptiMole - {{strings.service_details}}
</span>
Expand Down
136 changes: 83 additions & 53 deletions assets/vue/components/main.vue
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,87 @@
<template>
<div class="card">
<app-header></app-header>
<div class="card-content">
<div class="content">
<connect-layout v-if="! this.$store.state.connected"></connect-layout>
<transition name="fade" mode="out-in">
<div v-if="this.$store.state.connected">
<div class="tabs is-left is-boxed is-medium">
<ul class="is-marginless">
<li :class="tab === 'dashboard' ? 'is-active' : ''">
<a @click="changeTab('dashboard')" class="is-size-6-mobile">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-admin-home"></span>
<span class="is-size-6-mobile is-size-6-touch ">{{strings.dashboard_menu_item}}</span>
</a>
</li>
<div class="columns is-desktop">

<div class="column ">
<div class="card">
<app-header></app-header>
<div class="card-content">
<div class="content">
<connect-layout v-if="! this.$store.state.connected"></connect-layout>
<transition name="fade" mode="out-in">
<div v-if="this.$store.state.connected">
<div class="tabs is-left is-boxed is-medium">
<ul class="is-marginless">
<li :class="tab === 'dashboard' ? 'is-active' : ''">
<a @click="changeTab('dashboard')" class="is-size-6-mobile">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-admin-home"></span>
<span class="is-size-6-mobile is-size-6-touch ">{{strings.dashboard_menu_item}}</span>
</a>
</li>

<li :class="tab === 'settings' ? 'is-active' : ''">
<a @click="changeTab('settings')" class="is-size-6-mobile ">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-admin-settings"></span>
<span class="is-size-6-mobile is-size-6-touch">{{strings.settings_menu_item}}</span>
</a>
</li>
<li :class="tab === 'watermarks' ? 'is-active' : ''">
<a @click="changeTab('watermarks')" class="is-size-6-mobile">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-tag"></span>
<span class="is-size-6-mobile is-size-6-touch">{{strings.watermarks_menu_item}}</span>
</a>
</li>
</ul>
</div>

<li :class="tab === 'settings' ? 'is-active' : ''">
<a @click="changeTab('settings')" class="is-size-6-mobile ">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-admin-settings"></span>
<span class="is-size-6-mobile is-size-6-touch" >{{strings.settings_menu_item}}</span>
</a>
</li>
<li :class="tab === 'watermarks' ? 'is-active' : ''" >
<a @click="changeTab('watermarks')" class="is-size-6-mobile">
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-tag"></span>
<span class="is-size-6-mobile is-size-6-touch">{{strings.watermarks_menu_item}}</span>
</a>
</li>
</ul>
</div>

<div class="is-tab" v-if="tab === 'dashboard' ">
<div class="notification is-success" v-if="strings.notice_just_activated.length > 0" v-html="strings.notice_just_activated"></div>
<api-key-form></api-key-form>
<cdn-details v-if="this.$store.state.userData"></cdn-details>
<hr/>
<last-images :status="fetchStatus"></last-images>
</div>
<div class="is-tab" v-if=" tab === 'settings'">
<options></options>
</div>
<div class="is-tab" v-if=" tab === 'watermarks'" >
<watermarks></watermarks>
</div>
<div class="is-tab" v-if="tab === 'dashboard' ">
<div class="notification is-success" v-if="strings.notice_just_activated.length > 0"
v-html="strings.notice_just_activated"></div>
<api-key-form></api-key-form>
<cdn-details v-if="this.$store.state.userData"></cdn-details>
<hr/>
<last-images :status="fetchStatus"></last-images>
</div>
<div class="is-tab" v-if=" tab === 'settings'">
<options></options>
</div>
<div class="is-tab" v-if=" tab === 'watermarks'">
<watermarks></watermarks>
</div>
</div>
</transition>
</div>
</transition>
</div>

<div class="level-right">
<p class="level-item"><a href="https://optimole.com" target="_blank">Optimole
v{{strings.version}}</a></p>
<p class="level-item"><a href="https://optimole.com/terms/"
target="_blank">{{strings.terms_menu}}</a></p>
<p class="level-item"><a href="https://optimole.com/privacy-policy/" target="_blank">{{strings.privacy_menu}}</a>
</p>
<p class="level-item"><a :href="'https://speedtest.optimole.com/?url=' + home " target="_blank">{{strings.testdrive_menu}}</a>
</p>
</div>
</div>
</div>

<div class="level-right">
<p class="level-item"><a href="https://optimole.com" target="_blank">Optimole v{{strings.version}}</a></p>
<p class="level-item"><a href="https://optimole.com/terms/" target="_blank">{{strings.terms_menu}}</a></p>
<p class="level-item"><a href="https://optimole.com/privacy-policy/" target="_blank">{{strings.privacy_menu}}</a>
</p>
<p class="level-item"><a :href="'https://speedtest.optimole.com/?url=' + home " target="_blank">{{strings.testdrive_menu}}</a>
</p>
<div v-if="this.$store.state.connected && this.$store.state.userData.plan === 'free' " class="column is-narrow is-hidden-desktop-only is-hidden-tablet-only is-hidden-mobile">
<div class="card optml-upgrade">
<div class="card-header">
<h3 class="is-size-5 card-header-title"><span class="dashicons dashicons-chart-line"></span> {{strings.upgrade.title}}</h3>
</div>
<div class="card-content">
<ul>
<li><span class="dashicons dashicons-yes"></span>{{strings.upgrade.reason_1}}</li>
<li><span class="dashicons dashicons-yes"></span>{{strings.upgrade.reason_2}}</li>
<li><span class="dashicons dashicons-yes"></span>{{strings.upgrade.reason_3}}</li>
</ul>
</div>
<div class="card-footer ">
<div class="card-footer-item">
<a href="https://optimole.com#pricing" target="_blank" class="button is-centered is-small is-success"><span class="dashicons dashicons-external"></span>{{strings.upgrade.cta}}</a>
</div>
</div>
</div>
</div>
</div>
</template>
Expand All @@ -75,7 +102,6 @@
strings: optimoleDashboardApp.strings,
home: optimoleDashboardApp.home_url,
fetchStatus: false,
tab: 'dashboard'
}
},
Expand Down Expand Up @@ -111,6 +137,10 @@
margin-bottom: -4px;
}
#optimole-app .optml-upgrade {
min-width: 200px;
}
#optimole-app .is-tab {
min-height: 700px;
}
Expand Down
7 changes: 5 additions & 2 deletions assets/vue/components/watermarks.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@
</a>
</p>
<p class="control ">
<input v-model="watermarkX" class="input is-small" type="number">
<input v-model="watermarkX" class="input is-tiny is-small" type="number">
</p>
</div>
<div class="field column is-narrow has-addons">
Expand All @@ -204,7 +204,7 @@
</a>
</p>
<p class="control ">
<input v-model="watermarkY" class="input is-small" type="number">
<input v-model="watermarkY" class="input is-small is-tiny" type="number">
</p>
</div>
</div>
Expand Down Expand Up @@ -431,4 +431,7 @@
width: 200px;
}
#optimole-app .input.is-small.is-tiny{
width:60px;
}
</style>
67 changes: 67 additions & 0 deletions inc/admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ public function __construct() {
add_action( 'admin_menu', array( $this, 'add_dashboard_page' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue' ), PHP_INT_MIN );
add_action( 'admin_notices', array( $this, 'add_notice' ) );
add_action( 'admin_notices', array( $this, 'add_notice_upgrade' ) );
add_filter( 'admin_body_class', array( $this, 'add_body_class' ) );

add_action( 'wp_enqueue_scripts', array( $this, 'frontend_scripts' ) );
Expand Down Expand Up @@ -182,6 +183,61 @@ public function should_show_notice() {
return true;
}

/**
* Show upgrade notice.
*/
public function add_notice_upgrade() {
if ( ! $this->should_show_upgrade() ) {
return;
}
?>
<div class="notice notice-warning optml-notice-optin">
<p> <?php printf( __( 'It seems your are close to the %1$s1GB%2$s limit of images optimized with %3$sOptiMole%4$s for this month. You might want to check the upgrade plans for a larger quota. %5$s %6$s What happens if i exceed the quota ?%7$s We will need to deliver back your %8$sun-optimized%9$s images which might decrease your site speed perfomance.', 'optimole-wp' ), '<strong>', '</strong>', '<strong>', '</strong>', '<br/><br/>', '<i>', '</i >', '<strong>', '</strong>' ); ?></p>
<p>
<a href="https://optimole.com/#pricing" target="_blank" class="button button-primary"><span
class="dashicons dashicons-external"></span><?php _e( 'Check upgrade plans', 'optimole-wp' ); ?>
</a>
<a class="button"
href="<?php echo wp_nonce_url( add_query_arg( array( 'optml_hide_upg' => 'yes' ) ), 'hide_nonce', 'optml_nonce' ); ?>"><?php _e( 'I\'ve done this', 'optimole-wp' ); ?></a>
</p>
</div>
<?php
}

/**
* Check if we should show the upgrade notice to users.
*
* @return bool Should we show it?
*/
public function should_show_upgrade() {
$current_screen = get_current_screen();
if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) ||
is_network_admin() ||
! current_user_can( 'manage_options' ) ||
! $this->settings->is_connected() ||
empty( $current_screen )
) {
return false;
}
if ( get_option( 'optml_notice_hide_upg', 'no' ) === 'yes' ) {
return false;
}
if ( isset( $current_screen->base ) && $current_screen->base !== 'upload' ) {
return false;
}
$service_data = $this->settings->get( 'service_data' );
if ( ! isset( $service_data['plan'] ) ) {
return false;
}
if ( $service_data['plan'] !== 'free' ) {
return false;
}
if ( $service_data['usage'] < 800 ) {
return false;
}

return true;
}

/**
* Adds opt in notice.
Expand Down Expand Up @@ -225,6 +281,10 @@ public function maybe_redirect() {
update_option( 'optml_notice_optin', 'yes' );
}

if ( isset( $_GET['optml_nonce'] ) && isset( $_GET['optml_hide_upg'] ) && $_GET['optml_hide_upg'] === 'yes' && wp_verify_nonce( $_GET['optml_nonce'], 'hide_nonce' ) ) {
update_option( 'optml_notice_hide_upg', 'yes' );
}

if ( ! get_transient( 'optml_fresh_install' ) ) {
return;
}
Expand Down Expand Up @@ -447,6 +507,13 @@ private function get_dashboard_strings() {
'dashboard_menu_item' => __( 'Dashboard', 'optimole-wp' ),
'settings_menu_item' => __( 'General Settings', 'optimole-wp' ),
'watermarks_menu_item' => __( 'Watermark options', 'optimole-wp' ),
'upgrade' => array(
'title' => __( 'Upgrade to Pro', 'optimole-wp' ),
'reason_1' => __( 'Faster CDN ( 130+ locations )', 'optimole-wp' ),
'reason_2' => __( 'Larger traffic bandwidth', 'optimole-wp' ),
'reason_3' => __( 'Optimize more images', 'optimole-wp' ),
'cta' => __( 'View plans', 'optimole-wp' ),
),
'options_strings' => array(
'toggle_ab_item' => __( 'Admin bar status', 'optimole-wp' ),
'toggle_lazyload' => __( 'Javascript replacement & Lazy load', 'optimole-wp' ),
Expand Down

0 comments on commit 62b216a

Please sign in to comment.