diff --git a/src/components/quasar-components/carousel/HorizontalCarousel.vue b/src/components/quasar-components/carousel/HorizontalCarousel.vue
deleted file mode 100644
index 611ae6a..0000000
--- a/src/components/quasar-components/carousel/HorizontalCarousel.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/components/ui/QuestionForm.vue b/src/components/ui/QuestionForm.vue
index 304205b..724590b 100644
--- 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
/>
-
-
-
-
+
+
+
+
@@ -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([
+ { 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,
diff --git a/src/pages/ProductPage.vue b/src/pages/ProductPage.vue
index 4f80fba..6cfe61d 100644
--- a/src/pages/ProductPage.vue
+++ b/src/pages/ProductPage.vue
@@ -67,8 +67,8 @@
diff --git a/src/utils/zod/messages.ts b/src/utils/zod/messages.ts
index c32bf8f..6dd1f5c 100644
--- 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.';
diff --git a/src/utils/zod/regex.ts b/src/utils/zod/regex.ts
index 0be5755..b641ee9 100644
--- 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 ]+$/;
diff --git a/src/utils/zod/schemas/checkoutSchema.ts b/src/utils/zod/schemas/checkoutSchema.ts
index b1dd3e4..0d971fd 100644
--- 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),