enhance: subscription design followups

assets/css/admin.css

@@ -781,7 +781,6 @@ h3.tooltip-header {
 }
 .wpuf-subscription-pack-settings nav ul .wpuf-pro-field-tooltip ul li,
 .wpuf-pro-field-tooltip ul li {
-  font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 400;
   margin-bottom: 6px;

assets/js/components/Header.vue

@@ -3,15 +3,15 @@ import { __ } from '@wordpress/i18n';
 import {inject} from 'vue';
 
 const wpufSubscriptions = inject( 'wpufSubscriptions' );
-const logoUrl = wpufSubscriptions.assetUrl + '/images/icon-128x128.png';
+const logoUrl = wpufSubscriptions.assetUrl + '/images/wpuf-icon-circle.svg';
 </script>
 
 <template>
-    <div class="header wpuf-flex wpuf-flex-row wpuf-mt-4 wpuf-justify-between wpuf-items-center">
+    <div class="wpuf-w-[calc(100%+40px)] wpuf-ml-[-20px] wpuf-px-[20px] wpuf-flex wpuf-mt-4 wpuf-justify-between wpuf-items-center wpuf-border-b-2 wpuf-border-gray-100 wpuf-pb-4">
         <div class="wpuf-flex wpuf-justify-start wpuf-items-center">
             <img :src="logoUrl" alt="WPUF Icon" class="wpuf-w-12 wpuf-mr-4">
             <h2>{{ __( 'WP User Frontend', 'wp-user-frontend' ) }}</h2>
-            <span class="wpuf-ml-2 wpuf-inline-flex wpuf-items-center wpuf-rounded-full wpuf-bg-green-100 wpuf-px-2 wpuf-py-1 wpuf-text-xs wpuf-font-medium wpuf-text-green-700 wpuf-ring-1 wpuf-ring-inset wpuf-ring-green-600/20">V{{ wpufSubscriptions.version }}</span>
+            <span class="wpuf-ml-2 wpuf-inline-flex wpuf-items-center wpuf-rounded-full wpuf-bg-green-100 wpuf-px-2 wpuf-py-1 wpuf-text-xs wpuf-font-medium wpuf-text-green-700 wpuf-ring-1 wpuf-ring-inset wpuf-ring-green-600/20">v{{ wpufSubscriptions.version }}</span>
             <a
                 v-if="!wpufSubscriptions.isProActive"
                 :href="wpufSubscriptions.upgradeUrl"
@@ -22,13 +22,13 @@ const logoUrl = wpufSubscriptions.assetUrl + '/images/icon-128x128.png';
                 <span class="dashicons dashicons-superhero-alt"></span>
             </a>
         </div>
-        <div class="wpuf-align-right wpuf-flex wpuf-items-center wpuf-justify-between wpuf-w-1/4">
+        <div class="wpuf-flex wpuf-justify-end wpuf-items-center wpuf-w-2/4">
             <span
                 id="wpuf-headway-icon"
-                class="wpuf-rounded-full wpuf-p-1 wpuf-shadow-sm hover:wpuf-bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                class="wpuf-border wpuf-border-gray-100 wpuf-mr-[16px] wpuf-rounded-full wpuf-p-1 wpuf-shadow-sm hover:wpuf-bg-slate-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
             ></span>
             <a
-                class="wpuf-canny-link wpuf-text-center wpuf-rounded-md wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-font-semibold wpuf-shadow-sm hover:wpuf-bg-slate-100 focus:wpuf-bg-slate-100"
+                class="wpuf-border wpuf-border-gray-100 wpuf-mr-[16px] wpuf-canny-link wpuf-text-center wpuf-rounded-md wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-font-semibold wpuf-shadow-sm hover:wpuf-bg-slate-100 focus:wpuf-bg-slate-100"
                 target="_blank"
                 href="https://wpuf.canny.io/ideas">💡 {{ __( 'Submit Ideas', 'wp-user-frontend' ) }}</a>
             <a

assets/js/components/Subscriptions.vue

@@ -17,6 +17,7 @@ import Notice from './subscriptions/Notice.vue';
 import {useSubscriptionStore} from '../stores/subscription';
 import Unsaved from './subscriptions/Unsaved.vue';
 import {useNoticeStore} from '../stores/notice';
+import ContentHeader from './subscriptions/ContentHeader.vue';
 
 const componentStore = useComponentStore();
 const subscriptionStore = useSubscriptionStore();
@@ -58,6 +59,7 @@ const checkIsDirty = ( subscriptionStatus = 'all' ) => {
         componentStore.setCurrentComponent( 'List' );
         subscriptionStore.setCurrentSubscription(null);
         subscriptionStore.getSubscriptionCount();
+        subscriptionStore.currentPageNumber = 1;
     }
 };
 
@@ -68,6 +70,7 @@ const goToList = () => {
     subscriptionStore.setSubscriptionsByStatus( tempSubscriptionStatus.value );
     componentStore.setCurrentComponent( 'List' );
     subscriptionStore.setCurrentSubscription(null);
+    subscriptionStore.currentPageNumber = 1;
 };
 
 const removeNotice = ( index ) => {
@@ -110,23 +113,24 @@ watch(
     </div>
     <div
         v-if="quickEditStore.isQuickEdit"
-        @click="quickEditStore.isQuickEdit = false"
+        @click="[quickEditStore.setQuickEditStatus(false), subscriptionStore.errors = {}]"
         class="wpuf-absolute wpuf-w-full wpuf-h-screen wpuf-z-10 wpuf-left-[-20px]"></div>
     <template v-if="quickEditStore.isQuickEdit">
         <QuickEdit />
     </template>
+    <ContentHeader />
     <div
         v-if="!subscriptionStore.isSubscriptionLoading"
         :class="quickEditStore.isQuickEdit ? 'wpuf-blur' : ''"
-        class="wpuf-flex wpuf-flex-row wpuf-mt-12 wpuf-bg-white wpuf-py-8">
-        <div class="wpuf-basis-1/5 wpuf-border-r-2 wpuf-border-gray-200 wpuf-100vh">
+        class="wpuf-flex wpuf-pt-[40px] wpuf-pr-[20px] wpuf-pl-[20px]">
+        <div class="wpuf-basis-1/5 wpuf-border-r-2 wpuf-border-gray-200">
             <keep-alive>
                 <SidebarMenu @check-is-dirty="checkIsDirty" />
             </keep-alive>
         </div>
         <div
             class="wpuf-basis-4/5">
-            <component :key="componentKey" :is="component" @go-to-list="goToList" />
+            <component :key="componentKey" :is="component" @go-to-list="goToList" @check-is-dirty="checkIsDirty" />
         </div>
         <Unsaved v-if="subscriptionStore.isUnsavedPopupOpen" @close-popup="subscriptionStore.isUnsavedPopupOpen = false" @goToList="goToList" />
     </div>

assets/js/components/subscriptions/ContentHeader.vue

@@ -0,0 +1,33 @@
+<script setup>
+import {computed} from 'vue';
+import {__} from '@wordpress/i18n';
+import {useComponentStore} from '../../stores/component';
+import {useSubscriptionStore} from '../../stores/subscription';
+
+const componentStore = useComponentStore();
+const subscriptionStore = useSubscriptionStore();
+
+const shouldShowButton = computed( () => {
+    return !( subscriptionStore.currentSubscriptionStatus === 'trash' || ( subscriptionStore.currentSubscriptionStatus === 'all' && subscriptionStore.allCount.all === 0 ) );
+} );
+</script>
+<template>
+    <div class="wpuf-flex wpuf-items-center wpuf-justify-between wpuf-mt-[32px] wpuf-leading-none wpuf-px-[20px]">
+        <h3 class="wpuf-text-[24px] wpuf-font-semibold wpuf-my-0">{{ __('Subscriptions', 'wp-user-frontend') }}</h3>
+
+        <div class="wpuf-flex wpuf-justify-end wpuf-h-max">
+            <button
+                v-if="shouldShowButton"
+                @click="componentStore.setCurrentComponent( 'New' )"
+                type="button"
+                class="wpuf-flex wpuf-items-center wpuf-rounded-md wpuf-bg-indigo-600 hover:wpuf-bg-indigo-500 wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-font-semibold wpuf-text-white wpuf-shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                <span class="wpuf-mr-2">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.3019 21.6 12C21.6 6.69807 17.3019 2.4 12 2.4C6.69806 2.4 2.39999 6.69807 2.39999 12C2.39999 17.3019 6.69806 21.6 12 21.6ZM13.2 8.4C13.2 7.73726 12.6627 7.2 12 7.2C11.3372 7.2 10.8 7.73726 10.8 8.4V10.8H8.39999C7.73725 10.8 7.19999 11.3373 7.19999 12C7.19999 12.6627 7.73725 13.2 8.39999 13.2H10.8V15.6C10.8 16.2627 11.3372 16.8 12 16.8C12.6627 16.8 13.2 16.2627 13.2 15.6V13.2H15.6C16.2627 13.2 16.8 12.6627 16.8 12C16.8 11.3373 16.2627 10.8 15.6 10.8H13.2V8.4Z" fill="#FFF"/>
+                    </svg>
+                </span>
+                {{ __('Add Subscription', 'wp-user-frontend') }}
+            </button>
+        </div>
+    </div>
+</template>

assets/js/components/subscriptions/Edit.vue

@@ -5,11 +5,14 @@ import SubscriptionsDetails from './SubscriptionsDetails.vue';
 import {useSubscriptionStore} from '../../stores/subscription';
 import UpdateButton from './UpdateButton.vue';
 import {useNoticeStore} from '../../stores/notice';
+import {useComponentStore} from '../../stores/component';
+import {defineEmits} from '../../../vendor/vue-3/vue.esm-browser';
 
 const subscriptionStore = useSubscriptionStore();
 const noticeStore = useNoticeStore();
+const componentStore = useComponentStore();
 
-const emit = defineEmits( ['go-to-list'] );
+const emit = defineEmits( ['go-to-list', 'checkIsDirty'] );
 
 const updateSubscription = () => {
     subscriptionStore.resetErrors();
@@ -50,6 +53,15 @@ const updateSubscription = () => {
     });
 };
 
+const goToList = () => {
+    subscriptionStore.isDirty = false;
+    subscriptionStore.isUnsavedPopupOpen = false;
+
+    subscriptionStore.setSubscriptionsByStatus( tempSubscriptionStatus.value );
+    componentStore.setCurrentComponent( 'List' );
+    subscriptionStore.setCurrentSubscription(null);
+};
+
 </script>
 <template>
     <div
@@ -58,9 +70,15 @@ const updateSubscription = () => {
         <h3 class="wpuf-text-lg wpuf-font-bold wpuf-mb-0">{{ __( 'Edit Subscription', 'wp-user-frontend' ) }}</h3>
         <InfoCard />
         <SubscriptionsDetails />
-        <div class="wpuf-mt-8 wpuf-text-end">
+        <div class="wpuf-flex wpuf-flex-row-reverse wpuf-mt-8 wpuf-text-end">
             <UpdateButton
                 @update-subscription="updateSubscription" />
+            <button
+                @click="$emit('checkIsDirty', subscriptionStore.currentSubscriptionStatus)"
+                type="button"
+                class="wpuf-mr-[10px] wpuf-rounded-md wpuf-bg-white wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-font-semibold wpuf-text-gray-900 wpuf-shadow-sm wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 hover:wpuf-bg-gray-50">
+                {{ __( 'Cancel', 'wp-user-frontend' ) }}
+            </button>
         </div>
     </div>
 </template>

assets/js/components/subscriptions/Empty.vue

@@ -15,17 +15,19 @@ const props = defineProps( {
 </script>
 
 <template>
-    <div class="wpuf-flex wpuf-items-center wpuf-justify-center wpuf-h-[50vh] wpuf-justify-center">
-        <div class="wpuf-text-center">
+    <div class="wpuf-h-[50vh] wpuf-flex wpuf-items-center wpuf-justify-center">
+        <div class="wpuf-w-3/4 wpuf-text-center">
             <svg
                 v-if="subscriptionStore.currentSubscriptionStatus === 'all'"
                 class="wpuf-mx-auto wpuf-h-12 wpuf-w-12 wpuf-text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                 <path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
             </svg>
             <h3
                 v-if="subscriptionStore.currentSubscriptionStatus === 'all'"
-                class="wpuf-text-3xl wpuf-text-gray-900">{{ __( 'No Subscription created yet!', 'wp-user-frontend' ) }}</h3>
-            <p class="wpuf-text-sm wpuf-text-gray-500 wpuf-text-center">
+                class="wpuf-text-3xl wpuf-text-gray-900">
+                {{ __( 'No Subscription created yet!', 'wp-user-frontend' ) }}
+            </h3>
+            <p class="wpuf-text-sm wpuf-text-gray-500 wpuf-text-center wpuf-mt-8">
                 {{ props.message }}
             </p>
             <div

assets/js/components/subscriptions/InfoCard.vue

@@ -14,9 +14,10 @@ const getBillingAmountText = computed(() => {
     if (parseFloat( currentSubscription.meta_value.billing_amount ) === 0) {
         return __( 'Free', 'wp-user-frontend' );
     } else {
-        if ( isRecurring ) {
+        if ( isRecurring.value ) {
             const cyclePeriod = currentSubscription.meta_value.cycle_period === '' ? __( 'day', 'wp-user-frontend' ) : currentSubscription.meta_value.cycle_period;
             const expireAfter = currentSubscription.meta_value._billing_cycle_number !== '0' ? ' ' + currentSubscription.meta_value._billing_cycle_number + ' ' : '';
+
             return wpufSubscriptions.currencySymbol + currentSubscription.meta_value.billing_amount + ' <span class="wpuf-text-sm wpuf-text-gray-500">per ' + expireAfter + ' ' + cyclePeriod + '(s)</span>';
         }
 
@@ -41,7 +42,7 @@ const billingAmount = getBillingAmountText;
                 <dt class="wpuf-text-sm wpuf-font-medium wpuf-leading-6 wpuf-text-gray-500">
                     {{ __( 'Payment', 'wp-user-frontend' )}}
                 </dt>
-                <dd class="wpuf-w-full wpuf-flex-none wpuf-text-2xl wpuf-leading-10 wpuf-tracking-tight wpuf-text-gray-900" v-html="billingAmount"></dd>
+                <dd class="wpuf-w-full wpuf-flex-none wpuf-text-2xl wpuf-leading-10 wpuf-tracking-tight wpuf-text-gray-900" v-html="subscriptionStore.getReadableBillingAmount(currentSubscription, true)"></dd>
             </div>
             <div v-if="isRecurring" class="wpuf-flex wpuf-flex-wrap wpuf-items-baseline wpuf-justify-between wpuf-px-4 wpuf-py-5">
                 <dt class="wpuf-text-sm wpuf-italic wpuf-font-medium wpuf-leading-6 wpuf-text-gray-500 wpuf-flex wpuf-items-center wpuf-justify-center">

assets/js/components/subscriptions/List.vue

@@ -12,17 +12,20 @@ import {__} from '@wordpress/i18n';
 const subscriptionStore = useSubscriptionStore();
 const subscriptions = storeToRefs( subscriptionStore ).subscriptionList;
 const count = ref( subscriptionStore.allCount.all );
-const currentPage = ref( 1 );
+const currentPage = storeToRefs( subscriptionStore ).currentPageNumber;
 const perPage = parseInt( wpufSubscriptions.perPage );
 const totalPages = ref( Math.ceil( count.value / wpufSubscriptions.perPage ) );
+const maxVisibleButtons = ref( 3 );
+const paginationKey = ref( 0 );
 const changePageTo = ( page ) => {
     const offset = ( page - 1 ) * parseInt( wpufSubscriptions.perPage );
+    subscriptionStore.setSubscriptionsByStatus( subscriptionStore.currentSubscriptionStatus, offset );
+
     currentPage.value = page;
 
-    subscriptionStore.setSubscriptionsByStatus( subscriptionStore.currentSubscriptionStatus, offset );
+    // refresh the pagination component
+    paginationKey.value += 1;
 };
-const maxVisibleButtons = ref( 3 );
-const paginationKey = ref( 0 );
 
 const emptyMessages = {
     all: __( 'Powerful Subscription Features for Monetizing Your Content. Unlock a World of Possibilities with WPUF\'s Subscription Features – From Charging Users for Posting to Exclusive Content Access.',
@@ -79,13 +82,13 @@ watch(
         />
     </div>
     <div v-if="!subscriptionStore.isSubscriptionLoading">
-        <div v-if="!count" class="wpuf-px-8 wpuf-pb-8">
+        <div v-if="!count" class="wpuf-pl-[48px]">
             <ListHeader :message="headerMessage[subscriptionStore.currentSubscriptionStatus]" />
             <Empty :message="emptyMessages[subscriptionStore.currentSubscriptionStatus]"/>
         </div>
-        <div v-else class="wpuf-px-8 wpuf-pb-8">
+        <div v-else class="wpuf-pl-[48px]">
             <ListHeader :message="headerMessage[subscriptionStore.currentSubscriptionStatus]" />
-            <div class="wpuf-grid wpuf-grid-cols-3 wpuf-gap-4 wpuf-mt-4">
+            <div class="wpuf-grid wpuf-grid-cols-3 wpuf-gap-4 wpuf-mt-[40px]">
                 <SubscriptionBox
                     v-for="subscription in subscriptions"
                     :subscription=subscription

assets/js/components/subscriptions/ListHeader.vue

@@ -2,7 +2,7 @@
 import {__} from '@wordpress/i18n';
 import {storeToRefs} from 'pinia';
 import {useComponentStore} from '../../stores/component';
-import {computed, ref} from 'vue';
+import {computed} from 'vue';
 import {useSubscriptionStore} from '../../stores/subscription';
 
 const componentStore = useComponentStore();
@@ -32,30 +32,8 @@ const title = computed(() => {
     }
 });
 
-const shouldShowButton = computed( () => {
-    return !( subscriptionStore.currentSubscriptionStatus === 'trash' || ( subscriptionStore.currentSubscriptionStatus === 'all' && subscriptionStore.allCount.all === 0 ) );
-} );
-
 </script>
 <template>
-    <div class="wpuf-flex wpuf-justify-between">
-        <div class="wpuf-w-3/5">
-            <h3 class="wpuf-text-lg wpuf-font-bold wpuf-m-0">{{ title }}</h3>
-            <p class="wpuf-text-sm wpuf-text-gray-500">{{ props.message }}</p>
-        </div>
-        <div class="wpuf-w-1/5">
-            <button
-                v-if="shouldShowButton"
-                @click="componentStore.setCurrentComponent( 'New' )"
-                type="button"
-                class="wpuf-flex wpuf-items-center wpuf-rounded-md wpuf-bg-indigo-600 hover:wpuf-bg-indigo-500 wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-font-semibold wpuf-text-white wpuf-shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
-                    <span class="wpuf-mr-2">
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.3019 21.6 12C21.6 6.69807 17.3019 2.4 12 2.4C6.69806 2.4 2.39999 6.69807 2.39999 12C2.39999 17.3019 6.69806 21.6 12 21.6ZM13.2 8.4C13.2 7.73726 12.6627 7.2 12 7.2C11.3372 7.2 10.8 7.73726 10.8 8.4V10.8H8.39999C7.73725 10.8 7.19999 11.3373 7.19999 12C7.19999 12.6627 7.73725 13.2 8.39999 13.2H10.8V15.6C10.8 16.2627 11.3372 16.8 12 16.8C12.6627 16.8 13.2 16.2627 13.2 15.6V13.2H15.6C16.2627 13.2 16.8 12.6627 16.8 12C16.8 11.3373 16.2627 10.8 15.6 10.8H13.2V8.4Z" fill="#FFF"/>
-                        </svg>
-                    </span>
-                {{ __('Add Subscription', 'wp-user-frontend') }}
-            </button>
-        </div>
-    </div>
+    <h3 class="wpuf-text-lg wpuf-font-bold wpuf-m-0">{{ title }}</h3>
+    <p class="wpuf-text-sm wpuf-text-gray-500 wpuf-mb-0">{{ props.message }}</p>
 </template>

assets/js/components/subscriptions/New.vue

@@ -59,13 +59,21 @@ const updateSubscription = () => {
 
 </script>
 <template>
-    <div class="wpuf-px-12">
+    <div
+        :class="subscriptionStore.isUnsavedPopupOpen ? 'wpuf-blur' : ''"
+        class="wpuf-px-12">
         <h3 class="wpuf-text-lg wpuf-font-bold wpuf-mb-0">{{ __( 'New Subscription', 'wp-user-frontend' ) }}</h3>
         <SubscriptionsDetails />
-        <div class="wpuf-mt-8 wpuf-text-end">
+        <div class="wpuf-flex wpuf-flex-row-reverse wpuf-mt-8 wpuf-text-end">
             <UpdateButton
                 buttonText="Save"
                 @update-subscription="updateSubscription" />
+            <button
+                @click="$emit('checkIsDirty', subscriptionStore.currentSubscriptionStatus)"
+                type="button"
+                class="wpuf-mr-[10px] wpuf-rounded-md wpuf-bg-white wpuf-px-3 wpuf-py-2 wpuf-text-sm wpuf-font-semibold wpuf-text-gray-900 wpuf-shadow-sm wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 hover:wpuf-bg-gray-50">
+                {{ __( 'Cancel', 'wp-user-frontend' ) }}
+            </button>
         </div>
     </div>
 </template>

assets/js/components/subscriptions/Pagination.vue

@@ -91,7 +91,7 @@ watch( () => subscriptionStore.currentSubscriptionStatus, ( newValue ) => {
 
 </script>
 <template>
-    <div class="wpuf-flex wpuf-items-center wpuf-justify-between wpuf-border-t wpuf-border-gray-200 wpuf-bg-white wpuf-py-3 wpuf-px-6">
+    <div class="wpuf-flex wpuf-items-center wpuf-justify-between wpuf-border-t wpuf-border-gray-200 wpuf-bg-white wpuf-py-3 wpuf-px-6 wpuf-mt-16">
         <div class="wpuf-flex wpuf-flex-1 wpuf-items-center wpuf-justify-between">
             <div>
                 <p class="wpuf-text-sm wpuf-text-gray-700">