2024-01-11 06:20:29 +00:00
7 changed files with 93 additions and 195 deletions
--- a/src/components/quasar-components/carousel/HorizontalCarousel.vue
+++ b/src/components/quasar-components/carousel/HorizontalCarousel.vue
@ -1,87 +0,0 @@
-<template>
-  <Swiper
-    :space-between="screenWidth > 1024 ? 56 : 25"
-    :slides-per-view="'auto'"
-    :centered-slides="true"
-    :modules="modules"
-    :grabCursor="true"
-    :loop="true"
-    :pagination="{
-      dynamicBullets: true,
-      clickable: true,
-    }"
-    :keyboard="{
-      enabled: true,
-    }"
-    @swiper="onSwiper"
-  >
-    <slot></slot>
-  </Swiper>
-</template>
-
-<script lang="ts">
-import { storeToRefs } from 'pinia';
-import { Autoplay, Keyboard, Navigation, Pagination } from 'swiper/modules';
-import type { Swiper as SwiperTypes } from 'swiper/types';
-import { Swiper } from 'swiper/vue';
-import { defineComponent } from 'vue';
-
-import { useMobileStore } from 'src/stores/mobileNav';
-import { useSwiperStore } from 'src/stores/swiper';
-
-export default defineComponent({
-  components: {
-    Swiper,
-  },
-  setup() {
-    const swiperStore = useSwiperStore();
-    const { swiperCtx } = storeToRefs(swiperStore);
-    function onSwiper(swiper: SwiperTypes) {
-      swiperCtx.value = swiper;
-    }
-
-    const mobileStore = useMobileStore();
-    const { screenWidth } = storeToRefs(mobileStore);
-
-    return {
-      onSwiper,
-      screenWidth,
-      modules: [Navigation, Pagination, Keyboard, Autoplay],
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-.swiper {
-  height: 100%;
-  width: 100%;
-  & .swiper-wrapper .swiper-slide {
-    width: 360px !important;
-  }
-
-  & .swiper-button-prev,
-  & .swiper-button-next {
-    background-repeat: no-repeat;
-    background-position: center;
-    &::after,
-    &::before {
-      display: none;
-    }
-  }
-
-  & .swiper-button-prev {
-    background-image: url('../../icons/svg/ArrowCircleFilledLeft.svg');
-  }
-
-  & .swiper-button-next {
-    background-image: url('../../icons/svg/ArrowCircleFilledRight.svg');
-  }
-
-  & .swiper-pagination {
-    & .swiper-pagination-bullet.swiper-pagination-bullet-active {
-      background-color: $primary;
-    }
-  }
-}
-</style>
--- a/src/components/ui/QuestionForm.vue
+++ b/src/components/ui/QuestionForm.vue
@ -9,7 +9,7 @@
        bg-color="white"
        label="Nombre"
        class="name"
-        standout
+        outlined
      />
      <q-input
        v-model="secondName"
@ -19,7 +19,7 @@
        bg-color="white"
        label="Apellidos"
        class="nickname"
-        standout
+        outlined
      />
      <q-input
        v-model="email"
@ -30,7 +30,7 @@
        type="email"
        label="Email"
        class="email"
-        standout
+        outlined
      />
      <q-input
        v-model="phone"
@ -42,7 +42,7 @@
        label="Teléfono"
        class="telephone"
        mask="(##) ##### ####"
-        standout
+        outlined
      />
      <q-input
        v-model="query"
@ -52,7 +52,7 @@
        bg-color="white"
        label="Motivo de consulta"
        class="consult"
-        standout
+        outlined
      />
      <q-input
        v-model="message"
@ -64,7 +64,7 @@
        class="message"
        type="textarea"
        autogrow
-        standout
+        outlined
      />
      <q-checkbox
        v-model="terms"
--- a/src/pages/CheckoutPage.vue
+++ b/src/pages/CheckoutPage.vue
@ -125,24 +125,6 @@
                      />
                    </div>

-                    <div class="field-control field-select">
-                      <q-select
-                        name="city"
-                        v-model="city"
-                        v-bind:="cityAttrs"
-                        :error="!!errors.city"
-                        :error-message="errors.city"
-                        :options="optionsCity.data"
-                        :label="
-                          formPersonalData.data.city.length
-                            ? formPersonalData.data.city
-                            : 'Ciudad*'
-                        "
-                        stack-label
-                        outlined
-                      />
-                    </div>
-
                    <div class="field-control field-select">
                      <q-select
                        name="province"
@ -150,13 +132,30 @@
                        v-bind:="provinceAttrs"
                        :error="!!errors.province"
                        :error-message="errors.province"
-                        :options="optionsProvince.data"
+                        :options="provinceOptions"
+                        option-value="code"
+                        option-label="name"
                        :label="
-                          formPersonalData.data.province
-                            ? formPersonalData.data.province
+                          !province
+                            ? 'Complete la dirección y el código postal'
                            : 'Provincia*'
                        "
                        stack-label
+                        map-options
+                        emit-value
+                        outlined
+                      />
+                    </div>
+
+                    <div class="field-control field-select">
+                      <q-input
+                        placeholder="Ciudade*"
+                        name="city"
+                        type="text"
+                        v-model="city"
+                        v-bind:="cityAttrs"
+                        :error="!!errors.city"
+                        :error-message="errors.city"
                        outlined
                      />
                    </div>
@ -413,14 +412,9 @@ interface StepsProps {
  active: boolean;
 }

-interface FormPersonalData {
+interface ProvinceOptions {
+  code: string | number;
  name: string;
-  surname: string;
-  address: string;
-  postalCode: string;
-  phone: string;
-  city: string;
-  province: string;
 }

 export default defineComponent({
@ -482,13 +476,11 @@ export default defineComponent({
      ],
    });
    const checkoutBlock = ref(true);
-    // const successblock = document.querySelector('#success-block');

    const onSubmit = handleSubmit((values) => {
      handleCheckoutData(values);
      stepList.data[2].active = true;
      checkoutBlock.value = false;
-      // successblock?.scrollIntoView({ behavior: 'smooth' });
      resetForm();
    });

@ -505,79 +497,66 @@ export default defineComponent({
      });
    };

-    const optionsCity = reactive<{ data: string[] }>({
-      data: ['Complete la dirección y el código postal'],
-    });
-
-    const optionsProvince = reactive<{ data: string[] }>({
-      data: ['Complete la dirección, código postal y seleccione la ciudad'],
-    });
-
-    const formPersonalData = reactive<{ data: FormPersonalData }>({
-      data: {
-        name: '',
-        surname: '',
-        address: '',
-        postalCode: '',
-        phone: '',
-        city: '',
-        province: '',
-      },
-    });
-    /* watch(
-      () => formPersonalData.data.postalCode,
-      () => {
-        if (
-          formPersonalData.data.postalCode.length > 0 &&
-          formPersonalData.data.address.length > 0
-        ) {
-          return (optionsCity.data = [
-            'Sevilha',
-            'Málaga',
-            'Granada',
-            'Santiago de Compostela',
-            'Bilbao',
-          ]);
-        }
-        optionsCity.data = ['Complete la dirección y el código postal'];
-        formPersonalData.data.city = '';
-      }
-    );
-
-    watch(
-      () => formPersonalData.data.city,
-      () => {
-        if (
-          formPersonalData.data.postalCode.length > 0 &&
-          formPersonalData.data.address.length > 0 &&
-          formPersonalData.data.city.length > 0
-        ) {
-          return (optionsProvince.data = [
-            'Barcelona',
-            'Valência',
-            'Málaga',
-            'Alicante',
-            'Sevilha',
-          ]);
-        }
-        optionsProvince.data = [
-          'Complete la dirección, código postal y seleccione la ciudad',
-        ];
-        formPersonalData.data.postalCode = '';
-      }
-    );
-
-    function onSubmitPersonalData(_e: Event) {
-      console.log(formPersonalData.data);
-    } */
+    const provinceOptions = ref<ProvinceOptions[]>([
+      { code: '01', name: 'Araba/Álava' },
+      { code: '02', name: 'Albacete' },
+      { code: '03', name: 'Alicante/Alacant' },
+      { code: '04', name: 'Almería' },
+      { code: '05', name: 'Ávila' },
+      { code: '06', name: 'Badajoz' },
+      { code: '07', name: 'Balears, Illes' },
+      { code: '08', name: 'Barcelona' },
+      { code: '09', name: 'Burgos' },
+      { code: '10', name: 'Cáceres' },
+      { code: '11', name: 'Cádiz' },
+      { code: '12', name: 'Castellón/Castelló' },
+      { code: '13', name: 'Ciudad Real' },
+      { code: '14', name: 'Córdoba' },
+      { code: '15', name: 'Coruña, A' },
+      { code: '16', name: 'Cuenca' },
+      { code: '17', name: 'Girona' },
+      { code: '18', name: 'Granada' },
+      { code: '19', name: 'Guadalajara' },
+      { code: '20', name: 'Gipuzkoa' },
+      { code: '21', name: 'Huelva' },
+      { code: '22', name: 'Huesca' },
+      { code: '23', name: 'Jaén' },
+      { code: '24', name: 'León' },
+      { code: '25', name: 'Lleida' },
+      { code: '26', name: 'Rioja, La' },
+      { code: '27', name: 'Lugo' },
+      { code: '28', name: 'Madrid' },
+      { code: '29', name: 'Málaga' },
+      { code: '30', name: 'Murcia' },
+      { code: '31', name: 'Navarra' },
+      { code: '32', name: 'Ourense' },
+      { code: '33', name: 'Asturias' },
+      { code: '34', name: 'Palencia' },
+      { code: '35', name: 'Palmas, Las' },
+      { code: '36', name: 'Pontevedra' },
+      { code: '37', name: 'Salamanca' },
+      { code: '38', name: 'Santa Cruz de Tenerife' },
+      { code: '39', name: 'Cantabria' },
+      { code: '40', name: 'Segovia' },
+      { code: '41', name: 'Sevilla' },
+      { code: '42', name: 'Soria' },
+      { code: '43', name: 'Tarragona' },
+      { code: '44', name: 'Teruel' },
+      { code: '45', name: 'Toledo' },
+      { code: '46', name: 'Valencia/València' },
+      { code: '47', name: 'Valladolid' },
+      { code: '48', name: 'Bizkaia' },
+      { code: '49', name: 'Zamora' },
+      { code: '50', name: 'Zaragoza' },
+      { code: '51', name: 'Ceuta' },
+      { code: '52', name: 'Melilla' },
+    ]);

    return {
      handleClickStep,
      stepsFormated,
-      formPersonalData,
-      optionsProvince,
-      optionsCity,
      stepList,
+      provinceOptions,

      step: ref(1),
      checkoutBlock,
--- a/src/pages/ProductPage.vue
+++ b/src/pages/ProductPage.vue
@ -67,8 +67,8 @@
                <q-input
                  v-model="dedication"
                  bg-color="white"
-                  standout
                  color="primary"
+                  outlined
                />
              </div>
            </div>
--- a/src/utils/zod/messages.ts
+++ b/src/utils/zod/messages.ts
@ -2,6 +2,8 @@ export const nameMessage =
  'Sólo se aceptan una palabra y caracteres no numéricos';
 export const phoneMessage =
  'El número de teléfono debe contener 11 caracteres numéricos válidos';
+export const onlyMinimumTwoCharacters = 'Añade al menos dos caracteres';
+export const onlyTextMessage = 'Sólo son válidas las letras';
 export const requiredMessage = 'Campo obligatorio';
 export const emailMessage =
  'Introduzca una dirección de correo electrónico válida.';
--- a/src/utils/zod/regex.ts
+++ b/src/utils/zod/regex.ts
@ -1 +1,2 @@
 export const justOneWord = /^[A-Za-z]+$/;
+export const justLetters = /^[A-Za-z ]+$/;
--- a/src/utils/zod/schemas/checkoutSchema.ts
+++ b/src/utils/zod/schemas/checkoutSchema.ts
@ -2,7 +2,7 @@ import { z } from 'zod';

 import { handlePhoneVal } from '../functions';
 import { postalCode } from '../globalProperties';
-import { justOneWord } from '../regex';
+import { justLetters, justOneWord } from '../regex';

 import * as M from '../messages';

@ -15,8 +15,11 @@ const checkoutObjVal = {
    .regex(justOneWord, M.nameMessage),
  address: z.string({ required_error: M.requiredMessage }),
  postalCode,
-  city: z.string({ required_error: M.requiredMessage }).min(3),
-  province: z.string({ required_error: M.requiredMessage }).min(3),
+  city: z
+    .string({ required_error: M.requiredMessage })
+    .min(2, M.onlyMinimumTwoCharacters)
+    .regex(justLetters, M.onlyTextMessage),
+  province: z.string({ required_error: M.requiredMessage }),
  phone: z
    .string({ required_error: M.requiredMessage })
    .refine(handlePhoneVal, M.phoneMessage),