enhance: subscription design followups

assets/js/components/Header.vue

@@ -3,11 +3,11 @@ 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>
@@ -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/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

@@ -62,10 +62,16 @@ const updateSubscription = () => {
     <div 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/QuickEdit.vue

@@ -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/SectionInputField.vue

@@ -205,7 +205,7 @@ onMounted(() => {
                  :data-tip="field.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"
-                          stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                          stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                 </svg>
             </span>
             &nbsp;&nbsp;
@@ -239,7 +239,7 @@ onMounted(() => {
                 :placeholder="field.placeholder ? field.placeholder : ''"
                 @input="[modifySubscription($event), processInput($event)]"
                 :class="subscriptionStore.errors[fieldId] ? '!wpuf-border-red-500' : '!wpuf-border-gray-300'"
-                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">
+                class="placeholder:wpuf-text-gray-400 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">
             <input
                 v-if="field.type === 'input-number'"
                 type="number"
@@ -249,7 +249,7 @@ onMounted(() => {
                 :placeholder="field.placeholder ? field.placeholder : ''"
                 @input="[modifySubscription($event), processInput($event)]"
                 :class="subscriptionStore.errors[fieldId] ? '!wpuf-border-red-500' : '!wpuf-border-gray-300'"
-                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">
+                class="placeholder:wpuf-text-gray-400 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">
             <textarea
                 v-if="field.type === 'textarea'"
                 :name="field.name"
@@ -258,7 +258,7 @@ onMounted(() => {
                 rows="3"
                 @input="[modifySubscription($event), processInput($event)]"
                 :class="subscriptionStore.errors[fieldId] ? '!wpuf-border-red-500' : '!wpuf-border-gray-300'"
-                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">{{ value }}</textarea>
+                class="placeholder:wpuf-text-gray-400 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">{{ value }}</textarea>
             <button
                 v-if="field.type === 'switcher'"
                 @click="[toggleOnOff(), $emit('toggleDependentFields', fieldId, switchStatus)]"
@@ -267,7 +267,7 @@ onMounted(() => {
                 :name="field.name"
                 :id="field.name"
                 :class="switchStatus ? 'wpuf-bg-indigo-600' : 'wpuf-bg-gray-200'"
-                class="wpuf-bg-gray-200 wpuf-relative wpuf-inline-flex wpuf-h-6 wpuf-w-11 wpuf-flex-shrink-0 wpuf-cursor-pointer wpuf-rounded-full wpuf-border-2 wpuf-border-transparent wpuf-transition-colors wpuf-duration-200 wpuf-ease-in-out"
+                class="placeholder:wpuf-text-gray-400 wpuf-bg-gray-200 wpuf-relative wpuf-inline-flex wpuf-h-6 wpuf-w-11 wpuf-flex-shrink-0 wpuf-cursor-pointer wpuf-rounded-full wpuf-border-2 wpuf-border-transparent wpuf-transition-colors wpuf-duration-200 wpuf-ease-in-out"
                 role="switch">
                 <span
                     aria-hidden="true"