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>

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"

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

src/pages/ProductPage.vue

@@ -67,8 +67,8 @@
                 <q-input
                   v-model="dedication"
                   bg-color="white"
-                  standout
                   color="primary"
+                  outlined
                 />
               </div>
             </div>

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.';

src/utils/zod/regex.ts

@@ -1 +1,2 @@
 export const justOneWord = /^[A-Za-z]+$/;
+export const justLetters = /^[A-Za-z ]+$/;

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),
+  city: z
-  province: z.string({ required_error: M.requiredMessage }).min(3),
+    .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),