show field errors

assets/js/components/Subscriptions.vue

@@ -16,15 +16,19 @@ import {useQuickEditStore} from '../stores/quickEdit';
 import Notice from './subscriptions/Notice.vue';
 import {useSubscriptionStore} from '../stores/subscription';
 import Unsaved from './subscriptions/Unsaved.vue';
+import {useNoticeStore} from '../stores/notice';
 
 const componentStore = useComponentStore();
 const subscriptionStore = useSubscriptionStore();
 const quickEditStore = useQuickEditStore();
-const { currentComponent } = storeToRefs(componentStore);
+const noticeStore = useNoticeStore();
+const {currentComponent} = storeToRefs( componentStore );
+const {notices} = storeToRefs( noticeStore );
 
 const component = ref( null );
 const tempSubscriptionStatus = ref( 'all' );
 const componentKey = ref( 0 );
+const noticeKey = ref( 0 );
 
 provide( 'wpufSubscriptions', wpufSubscriptions );
 
@@ -66,9 +70,14 @@ const goToList = () => {
     subscriptionStore.setCurrentSubscription(null);
 };
 
+const removeNotice = ( index ) => {
+    noticeStore.removeNotice( index );
+    noticeKey.value += 1;
+};
+
 watch(
     () => componentStore.currentComponent,
-    (newComponent) => {
+    ( newComponent ) => {
         switch ( newComponent ) {
             case 'List':
                 component.value = List;
@@ -82,14 +91,16 @@ watch(
             default:
                 component.value = Empty;
         }
+
+        subscriptionStore.resetErrors();
     }
 );
 
 </script>
 
 <template>
     <Header/>
-    <div v-if="subscriptionStore.isUpdating || component === null" class="wpuf-flex wpuf-h-svh wpuf-items-center wpuf-justify-center">
+    <div v-if="subscriptionStore.isSubscriptionLoading || component === null" class="wpuf-flex wpuf-h-svh wpuf-items-center wpuf-justify-center">
         <hollow-dots-spinner
             :animation-duration="1000"
             :dot-size="20"
@@ -105,7 +116,7 @@ watch(
         <QuickEdit />
     </template>
     <div
-        v-if="!subscriptionStore.isUpdating"
+        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">
@@ -119,5 +130,15 @@ watch(
         </div>
         <Unsaved v-if="subscriptionStore.isUnsavedPopupOpen" @close-popup="subscriptionStore.isUnsavedPopupOpen = false" @goToList="goToList" />
     </div>
-    <Notice />
+    <div class="wpuf-fixed wpuf-top-20 wpuf-right-8 wpuf-z-10">
+        <Notice
+            v-if="noticeStore.display"
+            v-for="(notice, index) in notices"
+            :key="noticeKey"
+            :index="index"
+            :type="notice.type"
+            :message="notice.message"
+            @removeNotice="removeNotice(index)"
+        />
+    </div>
 </template>

assets/js/components/subscriptions/Edit.vue

@@ -20,7 +20,7 @@ const updateSubscription = () => {
         return;
     }
 
-    subscriptionStore.isSubscriptionLoading = true;
+    subscriptionStore.isUpdating = true;
 
     const promiseResult = subscriptionStore.updateSubscription();
 
@@ -40,15 +40,13 @@ const updateSubscription = () => {
             noticeStore.message = result.message;
         }
 
-        subscriptionStore.isUpdating = false;
-
         setTimeout(() => {
             noticeStore.display = false;
             noticeStore.type = '';
             noticeStore.message = '';
         }, 3000);
     }).finally(() => {
-        subscriptionStore.isSubscriptionLoading = false;
+        subscriptionStore.isUpdating = false;
     });
 };
 

assets/js/components/subscriptions/Notice.vue

@@ -1,33 +1,46 @@
 <script setup>
-import {useNoticeStore} from '../../stores/notice';
-
-const noticeStore = useNoticeStore();
-const id = 'toast-' + noticeStore.type;
+const props = defineProps({
+    type: {
+        type: String,
+        required: true,
+    },
+    message: {
+        type: String,
+        required: true,
+    },
+    index: {
+        type: Number,
+        required: true,
+    },
+});
+const type = props.type;
+const message = props.message;
+const id = 'toast-' + type;
 const classes = {
     success: 'wpuf-text-green-500 wpuf-bg-green-100',
     danger: 'wpuf-text-red-500 wpuf-bg-red-100',
 };
-
 </script>
 <template>
     <div
-        v-if="noticeStore.display"
         :id="id"
-        class="wpuf-fixed wpuf-top-20 wpuf-right-8 wpuf-z-10 wpuf-flex wpuf-justify-between wpuf-items-center wpuf-w-full wpuf-max-w-xs wpuf-p-4 wpuf-mb-4 wpuf-text-gray-500 wpuf-bg-white wpuf-rounded-lg wpuf-shadow" role="alert">
+        class="wpuf-flex wpuf-justify-between wpuf-items-center wpuf-w-full wpuf-max-w-xs wpuf-p-4 wpuf-mb-4 wpuf-text-gray-500 wpuf-bg-white wpuf-rounded-lg wpuf-shadow" role="alert">
         <div class="wpuf-flex wpuf-items-center wpuf-justify-between">
             <div
-                :class="classes[noticeStore.type]"
+                :class="classes[type]"
                 class="wpuf-mr-2 wpuf-rounded-lg wpuf-flex wpuf-items-center wpuf-justify-center wpuf-w-8 wpuf-h-8">
-                <svg v-if="noticeStore.type === 'success'" class="wpuf-w-5 wpuf-h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <svg v-if="type === 'success'" class="wpuf-w-5 wpuf-h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
                 </svg>
-                <svg v-if="noticeStore.type === 'danger'" class="wpuf-w-5 wpuf-h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <svg v-if="type === 'danger'" class="wpuf-w-5 wpuf-h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
                 </svg>
             </div>
-            <div class="ms-3 wpuf-text-sm wpuf-font-normal">{{ noticeStore.message }}</div>
+            <div class="ms-3 wpuf-text-sm wpuf-font-normal">{{ message }}</div>
         </div>
-        <button @click="noticeStore.display = false" type="button" class="ms-auto wpuf--mx-1.5 wpuf--my-1.5 wpuf-bg-white wpuf-text-gray-400 hover:wpuf-text-gray-900 wpuf-rounded-lg focus:wpuf-ring-2 focus:wpuf-ring-gray-300 wpuf-p-1.5 hover:wpuf-bg-gray-100 wpuf-inline-flex wpuf-items-center wpuf-justify-center wpuf-h-8 wpuf-w-8" data-dismiss-target="#toast-success" aria-label="Close">
+        <button
+            @click="$emit('removeNotice', index)"
+            type="button" class="ms-auto wpuf--mx-1.5 wpuf--my-1.5 wpuf-bg-white wpuf-text-gray-400 hover:wpuf-text-gray-900 wpuf-rounded-lg focus:wpuf-ring-2 focus:wpuf-ring-gray-300 wpuf-p-1.5 hover:wpuf-bg-gray-100 wpuf-inline-flex wpuf-items-center wpuf-justify-center wpuf-h-8 wpuf-w-8" data-dismiss-target="#toast-success" aria-label="Close">
             <span class="wpuf-sr-only">Close</span>
             <svg class="wpuf-w-3 wpuf-h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>

assets/js/components/subscriptions/SectionInputField.vue

@@ -7,6 +7,7 @@ import {useFieldDependencyStore} from '../../stores/fieldDependency';
 import {__} from '@wordpress/i18n';
 import ProBadge from '../ProBadge.vue';
 import ProTooltip from '../ProTooltip.vue';
+import {storeToRefs} from 'pinia';
 
 const emit = defineEmits(['toggleDependentFields']);
 
@@ -25,6 +26,7 @@ const props = defineProps( {
 
 const dependencyStore = useFieldDependencyStore();
 const subscription = subscriptionStore.currentSubscription;
+const errors = storeToRefs( subscriptionStore.errors );
 
 const { field, fieldId } = toRefs( props );
 
@@ -236,7 +238,8 @@ onMounted(() => {
                 :id="field.name"
                 :placeholder="field.placeholder ? field.placeholder : ''"
                 @input="[modifySubscription($event), processInput($event)]"
-                class="wpuf-w-full wpuf-rounded-md !wpuf-border-gray-300 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="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">
             <input
                 v-if="field.type === 'input-number'"
                 type="number"
@@ -245,15 +248,17 @@ onMounted(() => {
                 :id="field.name"
                 :placeholder="field.placeholder ? field.placeholder : ''"
                 @input="[modifySubscription($event), processInput($event)]"
-                class="wpuf-w-full wpuf-rounded-md !wpuf-border-gray-300 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="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">
             <textarea
                 v-if="field.type === 'textarea'"
                 :name="field.name"
                 :id="field.name"
                 :placeholder="field.placeholder ? field.placeholder : ''"
                 rows="3"
                 @input="[modifySubscription($event), processInput($event)]"
-                class="wpuf-w-full wpuf-rounded-md wpuf-border-gray-300 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="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>
             <button
                 v-if="field.type === 'switcher'"
                 @click="[toggleOnOff(), $emit('toggleDependentFields', fieldId, switchStatus)]"
@@ -281,7 +286,8 @@ onMounted(() => {
             <select v-if="field.type === 'select'"
                     :name="field.name"
                     :id="field.name"
-                    class="wpuf-w-full !wpuf-max-w-full wpuf-rounded-md !wpuf-border-gray-300 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="subscriptionStore.errors[fieldId] ? '!wpuf-border-red-500' : '!wpuf-border-gray-300'"
+                    class="wpuf-w-full !wpuf-max-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="[modifySubscription($event), processInput($event)]">
                 <option
                     v-for="(item, key) in field.options"
@@ -313,6 +319,11 @@ onMounted(() => {
                 class="label">
                 <span class="label-text-alt">{{ field.description }}</span>
             </div>
+            <div
+                v-if="subscriptionStore.errors[fieldId]"
+                class="label">
+                <span class="label-text-alt wpuf-text-red-500">{{ subscriptionStore.errors[fieldId].message }}</span>
+            </div>
         </div>
     </div>
 </template>

assets/js/components/subscriptions/UpdateButton.vue

@@ -17,6 +17,8 @@ const buttonText = ref( props.buttonText );
 <template>
     <div class="wpuf-relative">
         <button
+            :disabled="subscriptionStore.isUpdating"
+            :class="subscriptionStore.isUpdating ? 'wpuf-cursor-not-allowed wpuf-bg-gray-50' : ''"
             class="wpuf-peer wpuf-inline-flex wpuf-justify-between wpuf-items-center wpuf-cursor-pointer wpuf-bg-indigo-600 hover:wpuf-bg-indigo-800 wpuf-text-white wpuf-font-medium wpuf-text-base wpuf-py-2 wpuf-px-5 wpuf-rounded-md min-w-[122px]">
             {{ buttonText }}
             <svg class="wpuf-rotate-180 wpuf-w-3 wpuf-h-3 shrink-0 wpuf-ml-4"
@@ -31,11 +33,13 @@ const buttonText = ref( props.buttonText );
         >
         <span
             @click="() => {subscriptionStore.currentSubscription.post_status = 'publish'; $emit('updateSubscription'); }"
+            :class="subscriptionStore.isUpdating ? 'wpuf-cursor-not-allowed wpuf-bg-gray-50' : ''"
             class="wpuf-flex wpuf-py-3 wpuf-items-center wpuf-px-4 wpuf-text-sm wpuf-font-medium wpuf-text-gray-700 hover:wpuf-bg-indigo-700 hover:wpuf-text-white wpuf-rounded-t-md">
             {{ __( 'Publish', 'wp-user-frontend' ) }}
         </span>
         <span
             @click="() => {subscriptionStore.currentSubscription.post_status = 'draft'; $emit('updateSubscription');}"
+            :class="subscriptionStore.isUpdating ? 'wpuf-cursor-not-allowed wpuf-bg-gray-50' : ''"
             class="wpuf-flex wpuf-py-3 wpuf-items-center wpuf-px-4 wpuf-text-sm wpuf-font-medium wpuf-text-gray-700 hover:wpuf-bg-indigo-700 hover:wpuf-text-white wpuf-rounded-b-md">
             {{ __( 'Draft', 'wp-user-frontend' ) }}
         </span>

assets/js/stores/notice.js

@@ -3,7 +3,14 @@ import {defineStore} from 'pinia';
 export const useNoticeStore = defineStore( 'notice', {
     state: () => ( {
         display: false,
-        type: '',
-        message: '',
-    } )
+        notices: [],
+    } ),
+    actions: {
+        addNotice( notice ) {
+            this.notices.push( notice );
+        },
+        removeNotice( index ) {
+            this.notices.splice( index, 1 );
+        },
+    },
 } );

assets/js/stores/subscription.js

@@ -116,11 +116,13 @@ export const useSubscriptionStore = defineStore( 'subscription', {
                     return '';
             }
         },
-        updateSubscription() {
+        async updateSubscription() {
             if (this.currentSubscription === null) {
                 return false;
             }
 
+            this.isUpdating = true;
+
             let allTaxonomies = [];
 
             for (const [key, taxonomy] of Object.entries( this.taxonomyRestriction )) {
@@ -156,6 +158,8 @@ export const useSubscriptionStore = defineStore( 'subscription', {
             .then( ( response ) => response.json() )
             .catch( ( error ) => {
                 console.log( error );
+            } ).finally( () => {
+                this.isUpdating = false;
             } );
         },
         modifyCurrentSubscription( key, value, serializeKey = null ) {
@@ -272,8 +276,13 @@ export const useSubscriptionStore = defineStore( 'subscription', {
                                 break;
                         }
 
+                        // error if plan name contains #. PayPal doesn't allow # in package name
+                        if ( fieldData.id === 'plan-name' && value.includes( '#' )) {
+                            this.setError( field, __( '# is not supported in plan name', 'wp-user-frontend' ) );
+                        }
+
                         if (fieldData.is_required && value === '') {
-                            this.setError( field, __( 'This field is required', 'wp-user-frontend' ) );
+                            this.setError( field, __( fieldData.label + ' is required', 'wp-user-frontend' ) );
                         }
                     }
                 }
@@ -342,7 +351,7 @@ export const useSubscriptionStore = defineStore( 'subscription', {
                 this.isSubscriptionLoading = false;
             });
         },
-        getSubscriptionCount( status = 'all' ) {
+        async getSubscriptionCount( status = 'all' ) {
             let path = '/wp-json/wpuf/v1/wpuf_subscription/count';
 
             if (status !== 'all') {