src/pages/Ecomerce/CheckoutView.vue

@@ -18,22 +18,12 @@ const appStore = useAppStore();
 
 const stepperRef = ref(null);
 
-const steps = {
-    AGENCY: [
-        { name: 'method' },
-        { name: 'date' },
-        { name: 'address' },
-        { name: 'agency' },
-        { name: 'confirm-delivery' }
-    ],
-    PICKUP: []
-};
 const loading = ref(false);
 const today = ref(null);
 const addresses = ref([]);
 const agencies = ref([]);
-const currentStep = ref(1);
-const lastStep = 5;
+const currentStep = ref('method');
+// const lastStep = 'confirm';
 const id = route.params.id;
 const orderForm = ref({
     method: '',
@@ -42,6 +32,81 @@ const orderForm = ref({
     agency: ''
 });
 
+const steps = {
+    AGENCY: [
+        {
+            name: 'method',
+            stepDone: false,
+
+            validateStep: () => {
+                const validation = !!orderForm.value.method;
+                console.log('validation:', validation);
+                if (!validation) {
+                    notify(t('pleaseSelectADate'), 'negative');
+                }
+                return validation;
+            }
+        },
+        {
+            name: 'date',
+            stepDone: false,
+            validateStep: () => {
+                const validation = !!orderForm.value.date;
+                console.log('validation:', validation);
+                if (!validation) {
+                    notify(t('pleaseSelectAnOption'), 'negative');
+                }
+                return validation;
+            }
+        },
+        {
+            name: 'address',
+            validateStep: () => {
+                const validation = !!orderForm.value.address;
+                if (!validation) {
+                    notify(t('pleaseSelectAnAddress'), 'negative');
+                }
+                return validation;
+            }
+        },
+        {
+            name: 'agency',
+            onStepMounted: async () => {
+                await getAgencies();
+            },
+            validateStep: () => {
+                const validation = !!orderForm.value.agency;
+                if (!validation) {
+                    notify(t('pleaseSelectAnAgency'), 'negative');
+                }
+                return validation;
+            }
+        },
+        {
+            name: 'confirm',
+            onBeforeNextStep: async () => {
+                await submit();
+            }
+        }
+    ],
+    PICKUP: [
+        {
+            name: 'method'
+            // validateStep: () => {
+            //     const validation = orderForm.value.method !== '';
+            //     if (!validation) {
+            //         notify('Please select a method', 'negative');
+            //     }
+            //     return validation;
+            // }
+        },
+        { name: 'date' },
+        { name: 'address' },
+        { name: 'pickup' },
+        { name: 'confirm' }
+    ]
+};
+
 const confirmArrivalText = computed(() => {
     if (!orderForm.value.agency) return '';
     return `${t('arrival')} ${formatDateTitle(orderForm.value.date)}`;
@@ -96,30 +161,57 @@ const getAgencies = async () => {
             }
         );
         agencies.value = results[1].data;
-        console.log('agencies:', agencies.value);
+        console.log('AGENCIES:', agencies.value);
     } catch (error) {
         console.error('Error getting agencies:', error);
     }
 };
 
-const onAddressSelected = id => {
-    orderForm.value.address = id;
-    stepperRef.value.next();
+const onNextStep = async stepIndex => {
+    console.log('on next step');
+    const currentStep = steps[orderForm.value.method][stepIndex];
+    console.log('currentStep:', currentStep);
+    if (currentStep.onBeforeNextStep) {
+        await currentStep.onBeforeNextStep();
+    }
+
+    if (currentStep.validateStep && !currentStep.validateStep()) {
+        return;
+    }
+
+    currentStep.stepDone = true;
+    await stepperRef.value.next();
+
+    const nextStep = steps[orderForm.value.method][stepIndex + 1];
+    console.log('nextStep:', nextStep);
+    if (nextStep && nextStep.onStepMounted) {
+        await nextStep.onStepMounted();
+    }
 };
 
-const onStepChange = async step => {
-    console.log('step:', step);
-    if (step === 4) {
-        await getAgencies();
-    } else if (step === lastStep) {
-        submit();
+const onPreviousStep = async stepIndex => {
+    console.log('on previous step');
+    const currentStep = steps[orderForm.value.method][stepIndex];
+    console.log('step:', currentStep);
+
+    await stepperRef.value.previous();
+
+    const previousStep = steps[orderForm.value.method][stepIndex - 1];
+
+    if (previousStep.onStepMounted) {
+        await previousStep.onStepMounted();
     }
-    // console.log('event:', event);
+};
+
+const getDefaultValues = async () => {
+    return await jApi.query(
+        `SELECT deliveryMethod, agencyModeFk, addressFk, defaultAgencyFk
+        FROM myBasketDefaults`
+    );
 };
 
 const submit = async () => {
     loading.value = true;
-    // const id = route.params.id;
     let query =
         'CALL myOrder_create(@orderId, #date, #method, #agency, #address); SELECT @orderId;';
     if (id) {
@@ -179,8 +271,12 @@ const submit = async () => {
 onMounted(async () => {
     today.value = Date.vnNew();
     today.value.setHours(0, 0, 0, 0);
-    // if (id) {
-    // }
+
+    const [defaultValues] = await getDefaultValues();
+    console.log('defaultValues:', defaultValues);
+    if (defaultValues) {
+        orderForm.value.method = defaultValues.deliveryMethod;
+    }
     getAddresses();
 });
 </script>
@@ -188,15 +284,24 @@ onMounted(async () => {
 <template>
     <QPage class="vn-w-sm">
         <QStepper
+            v-if="steps[orderForm.method] && steps[orderForm.method].length"
             v-model="currentStep"
             ref="stepperRef"
             animated
             keep-alive
             class="default-radius"
-            @update:model-value="onStepChange"
         >
-            <QStep name="1" :done="currentStep > 1" done-color="accent">
-                <div class="column justify-center items-center">
+            <QStep
+                v-for="(step, stepIndex) in steps[orderForm.method]"
+                :key="stepIndex"
+                :name="step.name"
+                :done="step.stepDone"
+                done-color="accent"
+            >
+                <div
+                    v-if="step.name === 'method'"
+                    class="column justify-center items-center"
+                >
                     <span class="text-h6 text-bold tex q-mb-md text-center">
                         {{ t('receiveOrPickOrder') }}
                     </span>
@@ -213,11 +318,12 @@ onMounted(async () => {
                         />
                     </div>
                 </div>
-            </QStep>
-            <QStep :name="2" :done="currentStep > 2" done-color="accent">
-                <div class="flex justify-center items-center">
+                <div
+                    v-if="step.name === 'date'"
+                    class="flex justify-center items-center"
+                >
                     <span class="text-h6 text-bold tex q-mb-md text-center">
-                        {{ t('receiveOrPickOrder') }}
+                        {{ t('orderDateDelivery') }}
                     </span>
                     <QDate
                         v-model="orderForm.date"
@@ -225,31 +331,34 @@ onMounted(async () => {
                         color="accent"
                     />
                 </div>
-            </QStep>
-            <QStep :name="3" :done="currentStep > 3" done-color="accent">
                 <QList
-                    v-if="orderForm.method === 'AGENCY'"
+                    v-if="step.name === 'address'"
                     class="vn-w-xs q-gutter-y-sm"
                 >
                     <QItem
                         v-for="(address, index) in addresses"
                         :key="index"
-                        class="column"
-                        clickable
+                        tag="label"
                         v-ripple
-                        @click="onAddressSelected(address.id)"
                     >
-                        <QItemLabel class="text-bold text-subtitle1">
-                            {{ address.nickname }}
-                        </QItemLabel>
-                        <QItemLabel class="text-subtitle1">
-                            {{ address.street }}
-                        </QItemLabel>
+                        <QItemSection avatar>
+                            <QRadio
+                                v-model="orderForm.address"
+                                :val="address.id"
+                            />
+                        </QItemSection>
+                        <QItemSection>
+                            <QItemLabel>{{ address.nickname }}</QItemLabel>
+                            <QItemLabel caption>
+                                {{ address.street }}
+                            </QItemLabel>
+                        </QItemSection>
                     </QItem>
                 </QList>
-            </QStep>
-            <QStep :name="4" :done="currentStep > 4" done-color="accent">
-                <div class="flex justify-center items-center">
+                <div
+                    v-if="step.name === 'agency'"
+                    class="flex justify-center items-center"
+                >
                     <span class="text-h6 text-bold tex q-mb-md text-center">
                         {{ t('orderDateDelivery') }}
                     </span>
@@ -258,12 +367,12 @@ onMounted(async () => {
                         option-label="description"
                         option-value="id"
                         :options="agencies"
-                        @update:model-value="stepperRef.next()"
                     />
                 </div>
-            </QStep>
-            <QStep :name="5" :done="currentStep > 5" done-color="accent">
-                <div class="flex column justify-center items-center">
+                <div
+                    v-if="step.name === 'confirm'"
+                    class="flex column justify-center items-center"
+                >
                     <span class="text-h6 text-bold tex q-mb-md text-center">
                         {{ t('confirmData') }}
                     </span>
@@ -273,24 +382,22 @@ onMounted(async () => {
                         <span>{{ confirmAgencyText }}</span>
                     </div>
                 </div>
-            </QStep>
-            <template #navigation>
                 <QStepperNavigation class="flex justify-between">
                     <QBtn
                         flat
                         color="primary"
-                        @click="stepperRef.previous()"
+                        @click="onPreviousStep(stepIndex)"
                         label="Back"
                         class="q-ml-sm"
                         :class="{ invisible: currentStep === 1 }"
                     />
                     <QBtn
-                        @click="stepperRef.next()"
+                        @click="onNextStep(stepIndex)"
                         color="primary"
                         label="next"
                     />
                 </QStepperNavigation>
-            </template>
+            </QStep>
         </QStepper>
         <pre>{{ orderForm }}</pre>
     </QPage>
@@ -308,6 +415,10 @@ en-US:
     confirmData: Confirm data
     arrival: Arrival
     orderUpdated: Order updated
+    pleaseSelectAnOption: Please select an option
+    pleaseSelectADate: Please select a date
+    pleaseSelectAnAddress: Please select an address
+    pleaseSelectAnAgency: Please select an agency
 es-ES:
     receiveOrPickOrder: ¿Quieres recibir o recoger el pedido?
     receiveOrder: Recibir en mi tienda
@@ -317,6 +428,10 @@ es-ES:
     confirmData: Confirma los datos
     arrival: Llegada
     orderUpdated: Pedido actualizado
+    pleaseSelectAnOption: Por favor, selecciona una opción
+    pleaseSelectADate: Por favor, selecciona una fecha
+    pleaseSelectAnAddress: Por favor, selecciona una dirección
+    pleaseSelectAnAgency: Por favor, selecciona una agencia
 ca-ES:
     receiveOrPickOrder: Vols rebre o recollir la comanda?
     receiveOrder: Rebre en mi tenda
@@ -326,6 +441,10 @@ ca-ES:
     confirmData: Confirma les dades
     arrival: Arribada
     orderUpdated: Comanda actualitzada
+    pleaseSelectAnOption: Si us plau tria una opció
+    pleaseSelectADate: Si us plau tria una data
+    pleaseSelectAnAddress: Si us plau tria una adreça
+    pleaseSelectAnAgency: Si us plau tria una agència
 fr-FR:
     receiveOrPickOrder: Voulez-vous recevoir ou récuperer l'ordre?
     receiveOrder: Livraison à la boutique
@@ -335,6 +454,10 @@ fr-FR:
     confirmData: Confirmez les coordonnées
     arrival: Arrivée
     orderUpdated: Mise à jour commande
+    pleaseSelectAnOption: Veuillez choisir une option
+    pleaseSelectADate: Veuillez choisir une date
+    pleaseSelectAnAddress: Veuillez choisir une adresse
+    pleaseSelectAnAgency: Veuillez choisir une agence
 pt-PT:
     receiveOrPickOrder: Queres receber ou levantar a encomenda?
     receiveOrder: Receber na minha loja
@@ -343,4 +466,8 @@ pt-PT:
     confirmData: Confirme os dados
     arrival: Chegada
     orderUpdated: Encomenda actualizada
+    pleaseSelectAnOption: Por favor, escolha uma opção
+    pleaseSelectADate: Por favor, escolha uma data
+    pleaseSelectAnAddress: Por favor, escolha um endereço
+    pleaseSelectAnAgency: Por favor, escolha uma agência
 </i18n>