Notify.create({
+ message,
+ color: "info",
+ position: "top",
+ icon: "info",
+ timeout,
+ }),
+ default: () => {
+ console.error(`Type is invalid! TYPE: ${type}`)
+ }
};
if (type) {
- return obj[type]() || console.error(`Type is invalid! TYPE: ${type}`);
+ return obj[type]() || obj['default']();
}
console.error("Type is required, success, warning or erro");
}
diff --git a/src/hooks/useCheckoutForm.js b/src/hooks/useCheckoutForm.js
new file mode 100644
index 0000000..2244fdb
--- /dev/null
+++ b/src/hooks/useCheckoutForm.js
@@ -0,0 +1,192 @@
+import { toTypedSchema } from "@vee-validate/zod";
+import { useForm } from "vee-validate";
+import { computed, reactive, ref } from "vue";
+
+import { useFormStore } from "src/stores/forms";
+import { checkoutSchema } from "src/utils/zod/schemas";
+import { useRouter } from "vue-router";
+import { useLocalStorage } from "./useLocalStorage";
+
+export function useCheckoutForm() {
+ const { getItem } = useLocalStorage();
+ const { push } = useRouter()
+
+ const formStore = useFormStore();
+ const { handleCheckoutData } = formStore;
+ const { meta, errors, handleSubmit, defineField, resetForm } = useForm({
+ validationSchema: toTypedSchema(checkoutSchema),
+ initialValues: {
+ paymentMethod: "stripe",
+ terms: false,
+ },
+ });
+
+ const [name, nameAttrs] = defineField("name");
+ const [surname, surnameAttrs] = defineField("surname");
+ const [address, addressAttrs] = defineField("address");
+ const [postalCode, postalCodeAttrs] = defineField("postalCode");
+ const [phone, phoneAttrs] = defineField("phone");
+ const [city, cityAttrs] = defineField("city");
+ const [province, provinceAttrs] = defineField("province");
+ const [senderName, senderNameAttrs] = defineField("senderName");
+ const [senderCifNif, senderCifNifAttrs] = defineField("senderCifNif");
+ const [senderEmail, senderEmailAttrs] = defineField("senderEmail");
+ const [senderPhone, senderPhoneAttrs] = defineField("senderPhone");
+ const [senderNotes, senderNotesAttrs] = defineField("senderNotes");
+ const [paymentMethod, paymentMethodAttrs] = defineField("paymentMethod");
+ const [terms, termsAttrs] = defineField("terms");
+
+ 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" },
+ ]);
+
+ const stepActive = reactive({ data: 1 });
+ const stepList = reactive({
+ data: [
+ {
+ value: 1,
+ name: "Paso 1",
+ description: "Datos de facturación",
+ active: true,
+ },
+ {
+ value: 2,
+ name: "Paso 2",
+ description: "Confirmación",
+ active: false,
+ },
+ {
+ value: 3,
+ name: "Paso 3",
+ description: "Pago",
+ active: false,
+ },
+ ],
+ });
+ const stepsFormated = computed(() => {
+ return stepList["data"].map((step) => {
+ if (step.value === stepActive["data"]) {
+ return { ...step, active: true };
+ }
+ return step;
+ });
+ });
+
+ const handleClickStep = (value) => {
+ stepActive["data"] = value;
+ };
+
+ const checkoutBlock = ref(true);
+ const onSubmit = handleSubmit((values) => {
+ handleCheckoutData(values);
+ stepList.data[2].active = true;
+ checkoutBlock.value = false;
+ resetForm();
+ });
+
+ const cart = getItem("cart");
+ const totalPrice = ref(0)
+ totalPrice.value = cart?.reduce((acc, { price }) => {
+ if (price) {
+ const priceWithoutLetter = price?.replace("€", "");
+ return +priceWithoutLetter + acc;
+ }
+ }, 0);
+
+ return {
+ handleClickStep,
+ provinceOptions,
+ stepsFormated,
+ stepList,
+ checkoutBlock,
+ cart,
+ totalPrice,
+ formState: {
+ meta,
+ errors,
+ onSubmit,
+ submitLoading: ref(false),
+ },
+ fields: {
+ name,
+ nameAttrs,
+ surname,
+ surnameAttrs,
+ address,
+ addressAttrs,
+ postalCode,
+ postalCodeAttrs,
+ phone,
+ phoneAttrs,
+ city,
+ cityAttrs,
+ province,
+ provinceAttrs,
+ senderName,
+ senderNameAttrs,
+ senderCifNif,
+ senderCifNifAttrs,
+ senderEmail,
+ senderEmailAttrs,
+ senderPhone,
+ senderPhoneAttrs,
+ senderNotes,
+ senderNotesAttrs,
+ paymentMethod,
+ paymentMethodAttrs,
+ terms,
+ termsAttrs,
+ },
+ };
+}
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
new file mode 100644
index 0000000..68a4fdf
--- /dev/null
+++ b/src/hooks/useLocalStorage.js
@@ -0,0 +1,25 @@
+import { LocalStorage } from "quasar";
+
+export function useLocalStorage() {
+ const addItem = (key, value) => {
+ LocalStorage.set(`@${key}`, value);
+ };
+
+ const getItem = (key) => {
+ const data = JSON.parse(LocalStorage.getItem(`@${key}`));
+
+
+ return (data || []);
+ };
+
+ const removeItem = (key) => {
+ LocalStorage.remove(`@${key}`);
+ };
+
+
+ return {
+ addItem,
+ getItem,
+ removeItem,
+ };
+}
diff --git a/src/hooks/usePostalCalendar.js b/src/hooks/usePostalCalendar.js
index e51fffe..b498b4e 100644
--- a/src/hooks/usePostalCalendar.js
+++ b/src/hooks/usePostalCalendar.js
@@ -1,10 +1,10 @@
import { toTypedSchema } from "@vee-validate/zod";
import { storeToRefs } from "pinia";
import { useForm } from "vee-validate";
-import { watch } from "vue";
-import { useRouter } from "vue-router";
+import { ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
-import { apiBack } from "src/boot/axios";
+import { invertDate } from "src/functions/invertDate";
import { quasarNotify } from "src/functions/quasarNotify";
import { useCartStore } from "src/stores/cart";
import { useFormStore } from "src/stores/forms";
@@ -13,38 +13,50 @@ import { useRangePriceStore } from "src/stores/rangePrice";
import { availabilitySchema } from "src/utils/zod/schemas";
import { rangePriceSchema } from "src/utils/zod/schemas/rangePriceSchema";
+/**
+ * Custom hook for managing the postal and calendar functionality.
+ *
+ * @param {Object} options - The options for the hook.
+ * @param {string} options.modalItem - The modal item isOpenAvailability || isOpenFilters.
+ * @param {string} options.type - The type of the hook. home || product || availability || filter
+ * @returns {Object} - The hook functions and data.
+ */
export function usePostalCalendar({ modalItem = "", type = "home" }) {
- const { push } = useRouter();
+ const route = useRoute();
+ const { push } = useRouter()
const rangePriceStore = useRangePriceStore();
const { rangeValue } = storeToRefs(rangePriceStore);
const modalStore = useModalStore();
- const { isOpenAvailability } = storeToRefs(modalStore);
+ const { openModal } = modalStore
const formStore = useFormStore();
- const { availability, sortProductFilters } = storeToRefs(formStore);
+ const { sortProductFilters } = storeToRefs(formStore);
const cartStore = useCartStore();
const { addToCart, getProducts } = cartStore;
- const { currentProduct, products } = storeToRefs(cartStore);
+ const { products, homeSection } = storeToRefs(cartStore);
const min = 0;
const max = 200;
+ const category = ref(route.path.split("/")[2])
- const { handleSubmit, handleReset, defineField, errors } = useForm({
- validationSchema: toTypedSchema(
- type !== "filter" ? availabilitySchema : rangePriceSchema
- ),
- initialValues: {
- range: {
- min,
- max,
+ const { handleSubmit, handleReset, defineField, errors, setValues } = useForm(
+ {
+ validationSchema: toTypedSchema(
+ type !== "filter" ? availabilitySchema : rangePriceSchema
+ ),
+ initialValues: {
+ range: {
+ min,
+ max,
+ },
+ postalCode: "",
+ date: "",
},
- postalCode: "",
- date: "",
- },
- });
+ }
+ );
const [calendar, calendarAttrs] = defineField("date");
const [postalCode, postalCodeAttrs] = defineField("postalCode");
const [priceRange, priceRangeAttrs] = defineField("range");
@@ -56,6 +68,8 @@ export function usePostalCalendar({ modalItem = "", type = "home" }) {
quasarNotify({ message: newErrors.postalCode, type: "erro" }),
date: () => quasarNotify({ message: newErrors.date, type: "erro" }),
range: () => quasarNotify({ message: newErrors.range, type: "erro" }),
+ dedication: () =>
+ quasarNotify({ message: newErrors.dedication, type: "erro" }),
};
const keys = Object.keys(newErrors);
keys.forEach((key) => {
@@ -63,47 +77,73 @@ export function usePostalCalendar({ modalItem = "", type = "home" }) {
});
});
+ watch(
+ [() => route.path, () => sortProductFilters.value],
+ ([newPath]) => {
+ const categoryPath = newPath.split("/")[2];
+ category.value = categoryPath;
+ }
+ );
+
const onSubmit = handleSubmit((values) => {
const postalAndDateParams = {
postalCode: values.postalCode,
- dateExpired: values.date,
+ dateExpired: invertDate(values.date),
+ };
+
+ const categoryObj = {
+ plantas: "Floranet Plantas",
+ ramos: "Floranet Ramos",
};
const objVal = {
home: async () => {
console.log(type);
- getProducts(
+ await getProducts(
{
- itens: 30,
- category: 1,
postalCode: values.postalCode,
- dateExpired: values.date,
+ dateExpired: invertDate(values.date),
},
- () => push("/categoria/ramos")
+ () => homeSection.value.scrollIntoView()
);
},
product: async () => {
console.log(type);
- try {
- const {
- data: { data },
- } = await apiBack.get(`products/slug/${currentProduct.value.id}`, {
- params: postalAndDateParams,
- });
- } catch (error) {
- console.error(error);
- push("/");
+ await getProducts(postalAndDateParams);
+
+ const hasProduct = products.value.data.some((item) => {
+ const date = new Date(item.dateExpired);
+ const day = date.getDate();
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
+ const year = date.getFullYear();
+ const dateExpired = `${day}/${month}/${year}`;
+
+ const id = +route.path.split('/')[2];
+
+ return item.postalCode === values.postalCode && item.id === id && values.date <= dateExpired
+ });
+
+ if (!hasProduct) {
+ push('/categoria/ramos')
+ quasarNotify({ message: 'Seleccione una nueva fecha y un nuevo código postal.', type: 'warning' })
+
+ setTimeout(() => {
+ openModal({ modal: 'availability' })
+ }, 2000)
+
+ return
}
+
+ addToCart(products.value.current, dedication)
},
availability: async () => {
console.log(type);
- getProducts({
- itens: 20,
+ await getProducts({
postalCode: values.postalCode,
- dateExpired: values.date,
+ dateExpired: invertDate(values.date),
});
},
filter: async () => {
@@ -112,26 +152,21 @@ export function usePostalCalendar({ modalItem = "", type = "home" }) {
rangeValue.value.max = values.range.max;
rangeValue.value.min = values.range.min;
- const category = sortProductFilters.value.category;
- const categoryObj = {
- plantas: 1,
- ramos: 2,
- };
-
const params = {
- itens: 20,
- category: categoryObj[category],
+ type: categoryObj[category.value],
minPrice: values.range.min,
maxPrice: values.range.max,
};
- getProducts(params);
+ await getProducts(params);
+ },
+ default: () => {
+ console.error(
+ `INVALID TYPE! TYPE: ${type}, ONLY HOME, PRODUCT AND FILTER ARE VALID!`
+ );
},
};
- objVal[type]() ||
- console.error(
- `INVALID TYPE! TYPE: ${type}, ONLY HOME, PRODUCT AND FILTER ARE VALID!`
- );
+ objVal[type]() || objVal["default"]();
if (modalItem) {
modalStore[modalItem] = false;
@@ -141,6 +176,7 @@ export function usePostalCalendar({ modalItem = "", type = "home" }) {
return {
onSubmit,
+ setValues,
modalStore,
fields: {
calendar,
diff --git a/src/hooks/useProductPage.js b/src/hooks/useProductPage.js
new file mode 100644
index 0000000..e720b35
--- /dev/null
+++ b/src/hooks/useProductPage.js
@@ -0,0 +1,51 @@
+import { storeToRefs } from "pinia";
+import { useCartStore } from "src/stores/cart";
+import { useModalStore } from "src/stores/modalStore";
+import { watch } from "vue";
+import { useRoute } from "vue-router";
+import { usePostalCalendar } from "./usePostalCalendar";
+
+export function useProductPage() {
+ const route = useRoute();
+
+ const {
+ fields: { dedication, dedicationAttrs },
+ } = usePostalCalendar({ modalItem: "isOpenAvailability" });
+
+ const modalStore = useModalStore();
+ const { openModal } = modalStore;
+
+ const cartStore = useCartStore();
+ const { getProduct, getProducts } = cartStore;
+ const { products, featuredProducts, addCartLoadingBtn } =
+ storeToRefs(cartStore);
+
+ watch(
+ () => products.value.current?.type,
+ (newCategory) => {
+ getProducts({
+ // type: newCategory,
+ });
+ }
+ );
+
+ watch(
+ () => route.params.id,
+ (newId) => {
+ getProduct(newId);
+ }
+ );
+
+ const checkImageValidity = (imageLink) => {
+ const validExtensions = [".jpg", ".jpeg", ".png"];
+
+ if (imageLink) {
+ const extension = imageLink.substring(imageLink.lastIndexOf("."));
+ return validExtensions.includes(extension.toLowerCase());
+ }
+
+ return true;
+ };
+
+ return { checkImageValidity, openModal }
+}
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 7d31a69..8b2376d 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -27,9 +27,11 @@ export default defineComponent({
-
-
-
+
+
+
+
+
diff --git a/src/mock/cards.js b/src/mock/cards.js
index 62776e2..e64c41b 100644
--- a/src/mock/cards.js
+++ b/src/mock/cards.js
@@ -26,7 +26,7 @@ export function mockGenerator({ length }) {
slug: fakerES.commerce.isbn({ separator: "-", variant: 13 }),
category: fakerES.number.int({ min: 1, max: 2 }),
postalCode: "12345",
- dateExpired: "30/01/2024",
+ dateExpired: "2024-01-30",
images: Array.from(
{ length: fakerES.number.int({ min: 2, max: 6 }) },
() => fakerES.image.urlPicsumPhotos()
diff --git a/src/pages/CategoryPage.vue b/src/pages/CategoryPage.vue
index ef6167d..5efc813 100644
--- a/src/pages/CategoryPage.vue
+++ b/src/pages/CategoryPage.vue
@@ -12,8 +12,10 @@ import DudasSection from "src/components/sections/DudasSection.vue";
import Card from "src/components/ui/Card.vue";
import Container from "src/components/ui/Container.vue";
import Modal from "src/components/ui/Modal.vue";
+
import { useCartStore } from "src/stores/cart";
import { useFormStore } from "src/stores/forms";
+import { useMobileStore } from "src/stores/mobileNav";
import { useModalStore } from "src/stores/modalStore";
export default defineComponent({
@@ -32,6 +34,9 @@ export default defineComponent({
setup() {
const route = useRoute();
+ const mobileStore = useMobileStore();
+ const { screenWidth } = storeToRefs(mobileStore);
+
const modalStore = useModalStore();
const { openModal } = modalStore;
@@ -66,8 +71,8 @@ export default defineComponent({
latest: "más recientes",
};
const categoryObj = {
- plantas: 1,
- ramos: 2,
+ plantas: "Floranet Plantas",
+ ramos: "Floranet Ramos",
};
watch(availability, (newDate) => {
@@ -83,14 +88,13 @@ export default defineComponent({
sortProductFilters.value.category = categoryPath;
const params = {
- category: categoryObj[categoryPath],
- itens: window.screen.width <= 445 ? 16 : 20,
+ type: categoryObj[categoryPath],
};
const paramsObj = {
"lowest-price": () => (params.lowPrice = 1),
"highest-price": () => (params.bigPrice = 1),
latest: () => (params.isNew = 1),
- // recommended: () => params.featured = 1,
+ recommended: () => (params.recommend = 1),
};
if (newOrder) {
paramsObj[newOrder]();
@@ -104,8 +108,7 @@ export default defineComponent({
const categoryPath = route.path.split("/")[2];
await getProducts({
- category: categoryObj[categoryPath],
- itens: window.screen.width <= 445 ? 16 : 20,
+ type: categoryObj[categoryPath],
});
});
@@ -122,11 +125,12 @@ export default defineComponent({
}
return {
- sortProductFilters,
openOrderFilter,
openModal,
+ sortProductFilters,
availability,
isOpenOrder,
+ screenWidth,
modalStore,
orderText,
products,
@@ -145,9 +149,6 @@ export default defineComponent({
{{ sortProductFilters.category }} para obsequiar
@@ -218,25 +219,14 @@ export default defineComponent({
-
+
diff --git a/src/pages/CheckoutPage.vue b/src/pages/CheckoutPage.vue
index b29b772..9793ca3 100644
--- a/src/pages/CheckoutPage.vue
+++ b/src/pages/CheckoutPage.vue
@@ -1,14 +1,9 @@