enhance: subscription design followups

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

@@ -58,6 +58,7 @@ const checkIsDirty = ( subscriptionStatus = 'all' ) => {
         componentStore.setCurrentComponent( 'List' );
         subscriptionStore.setCurrentSubscription(null);
         subscriptionStore.getSubscriptionCount();
+        subscriptionStore.currentPageNumber = 1;
     }
 };
 
@@ -68,6 +69,7 @@ const goToList = () => {
     subscriptionStore.setSubscriptionsByStatus( tempSubscriptionStatus.value );
     componentStore.setCurrentComponent( 'List' );
     subscriptionStore.setCurrentSubscription(null);
+    subscriptionStore.currentPageNumber = 1;
 };
 
 const removeNotice = ( index ) => {
@@ -110,23 +112,23 @@ 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>
     <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">
+        class="wpuf-flex wpuf-flex-row wpuf-bg-white wpuf-pt-[32px] wpuf-pr-[20px] wpuf-pl-[20px]">
         <div class="wpuf-basis-1/5 wpuf-border-r-2 wpuf-border-gray-200 wpuf-100vh">
             <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/Edit.vue

@@ -5,11 +5,13 @@ 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';
 
 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 +52,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 +69,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/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>';
         }
 

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

@@ -38,24 +38,24 @@ const shouldShowButton = computed( () => {
 
 </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">
+    <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>
+            {{ __('Add Subscription', 'wp-user-frontend') }}
+        </button>
+    </div>
+    <div class="wpuf-flex wpuf-justify-between wpuf-mt-[20px]">
+        <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 wpuf-mb-0">{{ props.message }}</p>
         </div>
     </div>
 </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">

assets/js/components/subscriptions/Popup.vue

@@ -17,7 +17,7 @@ const info = computed( () => {
         default:
             return {
                 title: __( 'Trash Subscription', 'wp-user-frontend' ),
-                message: __( 'This subscription will moved to trash. Are you sure?', 'wp-user-frontend' ),
+                message: __( 'This subscription will be moved to the trash. Are you sure?', 'wp-user-frontend' ),
                 actionText: __( 'Trash', 'wp-user-frontend' ),
             }
     }

assets/js/components/subscriptions/QuickEdit.vue

@@ -86,9 +86,9 @@ const updateSubscription = () => {
     --dp-primary-disabled-color: none;
     --dp-primary-text-color: none;
     --dp-secondary-color: none;
-    --dp-border-color: none;
-    --dp-menu-border-color: none;
-    --dp-border-color-hover: none;
+    --dp-border-color: #8c8f94;
+    --dp-menu-border-color: #8c8f94;
+    --dp-border-color-hover: #8c8f94;
     --dp-disabled-color: none;
     --dp-scroll-bar-background: none;
     --dp-scroll-bar-color: none;
@@ -102,7 +102,7 @@ const updateSubscription = () => {
     --dp-highlight-color: none;
     --dp-range-between-dates-background-color: none;
     --dp-range-between-dates-text-color: none;
-    --dp-range-between-border-color: none;
+    --dp-range-between-border-color: #8c8f94;
 }
 .dp__input_valid {
     box-shadow: none;
@@ -117,8 +117,8 @@ const updateSubscription = () => {
                     type="text"
                     name="plan-name"
                     id="plan-name"
-                    :class="errors.planName ? 'wpuf-ring-red-300 placeholder:wpuf-text-red-300 !wpuf-text-red-900 focus:wpuf-ring-red-500' : ''"
-                    class="wpuf-block wpuf-w-full wpuf-rounded-md !wpuf-border-hidden wpuf-py-1.5 wpuf-pr-10 wpuf-ring-1 wpuf-ring-inset focus:wpuf-ring-2 focus:wpuf-ring-inset wpuf-text-sm wpuf-leading-6 !wpuf-shadow-none"
+                    :class="errors.planName ? '!wpuf-border-red-500 wpuf-ring-red-300 placeholder:wpuf-text-red-300 !wpuf-text-red-900 focus:wpuf-ring-red-500' : ''"
+                    class="wpuf-w-full wpuf-rounded-md wpuf-bg-white wpuf-py-1 wpuf-pl-3 wpuf-pr-10 wpuf-text-left wpuf-shadow-sm focus:!wpuf-border-indigo-500 focus:wpuf-outline-none focus:wpuf-ring-1 focus:wpuf-ring-indigo-500 sm:wpuf-text-sm"
                     aria-invalid="true"
                     aria-describedby="plan-name-error"
                     @change="title = $event.target.value"
@@ -153,7 +153,7 @@ const updateSubscription = () => {
             <UpdateButton
                 @update-subscription="updateSubscription" />
             <button
-                @click="[quickEditStore.setQuickEditStatus(false)]"
+                @click="[quickEditStore.setQuickEditStatus(false), subscriptionStore.errors = {}]"
                 :disabled="subscriptionStore.isUpdating"
                 type="button"
                 :class="subscriptionStore.isUpdating ? 'wpuf-cursor-not-allowed wpuf-bg-gray-50' : ''"

assets/js/components/subscriptions/SectionInnerField.vue

@@ -27,7 +27,7 @@ const showField = computed(() => {
             {{ parentField.label }}
             <div
                 v-if="parentField.tooltip"
-                class="wpuf-tooltip wpuf-cursor-pointer wpuf-ml-2 wpuf-z-[9999]"
+                class="wpuf-tooltip wpuf-cursor-pointer wpuf-ml-2 wpuf-z-10"
                 :data-tip="parentField.tooltip">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
                     <path d="M9.833 12.333H9V9h-.833M9 5.667h.008M16.5 9a7.5 7.5 0 1 1-15 0 7.5 7.5 0 1 1 15 0z"