Cambio de localstorage a session y click solo cuando hay fechas disponibles

src/components/@inputs/PostalCode.vue

@@ -53,15 +53,15 @@ export default defineComponent({
           return formattedDate;
         });
 
-
-        postalCodeValid.value.isValid = true;
         if(!dates.length) {
           quasarNotify({
             type: "erro",
             message: `No tenemos fechas de entrega posibles para este código postal`,
           });
           setFieldError("postalCode", M.fiveLength);
-        postalCodeValid.value.isValid = false;
+          postalCodeValid.value.isValid = false;
+        } else {
+          postalCodeValid.value.isValid = true;
         }
 
         postalCodeValid.value.dataOptions = dates;

src/components/quasar-components/carousel/VerticalCarouselImgs.vue

@@ -44,8 +44,8 @@ export default defineComponent({
     const { navPos, screenWidth, slide, target } = useVerticalCarouselImgs();
 
     const formStore = useFormStore();
-    const { getItem } = useLocalStorage();
+    const { getItemSession } = useLocalStorage();
-    const localValues = getItem("availability");
+    const localValues = getItemSession("availability");
     const lengthCp = 5;
 
     const { postalCodeValid } = storeToRefs(formStore);
@@ -63,7 +63,7 @@ export default defineComponent({
         if (e.target.value.length === lengthCp && isEventKeyActive) {
           if (e.key === 'Enter') {
             e.preventDefault();
-            modalDate.click();
+            if(postalCodeValid.value.isValid) modalDate.click();
             isEventKeyActive = false;
           }
         }

src/hooks/useCheckoutForm.js

@@ -11,7 +11,7 @@ import { checkoutSchema } from "src/utils/zod/schemas";
 import { useLocalStorage } from "./useLocalStorage";
 
 export function useCheckoutForm() {
-  const { addItem, getItem, removeItem } = useLocalStorage();
+  const { addItem, getItem, getItemSession, removeItem } = useLocalStorage();
 
   //! Elements ref
   const postalCodeRef = ref(null);
@@ -26,7 +26,7 @@ export function useCheckoutForm() {
   const { handleCheckoutData } = formStore;
 
   const availability =
-    availabilityForm.value.dateExpired || getItem("availability");
+    availabilityForm.value.dateExpired || getItemSession("availability");
 
   const phoneData = ref({
     country: {

src/hooks/useLocalStorage.js

@@ -1,4 +1,4 @@
-import { LocalStorage } from "quasar";
+import { LocalStorage, SessionStorage } from "quasar";
 
 export function useLocalStorage() {
   /**
@@ -12,6 +12,15 @@ export function useLocalStorage() {
     LocalStorage.set(`@${key}`, stringifyValue);
   };
 
+    /**
+   * Adds an item to SessionStorage.
+   * @param {string} key - The key of the item to be added.
+   * @param {*} value - The value of the item to be added.
+   */
+  const addItemSession = (key, value) => {
+    SessionStorage.set(`@${key}`, stringifyValue);
+  }
+
   /**
    * Retrieves an item from the local storage based on the provided key.
    *
@@ -25,6 +34,19 @@ export function useLocalStorage() {
     return data || [];
   };
 
+  /**
+   * Retrieves an item from the local storage based on the provided key.
+   *
+   * @param {string} key - The key of the item to retrieve.
+   * @returns {Object|Array} - The retrieved item from the local storage. If the key is "availability", it returns an object, otherwise it returns an array.
+   */
+  const getItemSession = (key) => {
+    const data = JSON.parse(SessionStorage.getItem(`@${key}`));
+
+    if (key === "availability") return data || {};
+    return data || [];
+  };
+
   /**
    * Remove an item from local storage.
    *
@@ -38,5 +60,7 @@ export function useLocalStorage() {
     addItem,
     getItem,
     removeItem,
+    addItemSession,
+    getItemSession
   };
 }

src/hooks/usePostalCalendar.js

@@ -26,7 +26,7 @@ import { useLocalStorage } from "./useLocalStorage";
 export function usePostalCalendar({ modalItem = "", type = "home" }) {
   const route = useRoute();
   const { push } = useRouter();
-  const { addItem, getItem, removeItem } = useLocalStorage();
+  const { addItem, getItemSession, removeItem } = useLocalStorage();
 
   const modalStore = useModalStore();
 
@@ -48,7 +48,7 @@ export function usePostalCalendar({ modalItem = "", type = "home" }) {
     plantas: "Floranet Plantas",
     ramos: "Floranet Ramos",
   };
-  const availability = ref(getItem("availability"));
+  const availability = ref(getItemSession("availability"));
 
   const availabilityFormKeys = computed(() => {
     return Object.fromEntries(

src/pages/CategoryPage.vue

@@ -37,7 +37,7 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const { push } = useRouter();
-    const { getItem } = useLocalStorage();
+    const { getItemSession } = useLocalStorage();
     const { isAvailabilityEmpty } = usePostalCalendar({});
 
     const mobileStore = useMobileStore();
@@ -54,7 +54,7 @@ export default defineComponent({
     const { getProducts } = cartStore;
 
     const isOpenOrder = ref(false);
-    const availabilityStoraged = ref(getItem("availability"));
+    const availabilityStoraged = ref(getItemSession("availability"));
     const isNotAllCategory = computed(() => {
       return route.path.split("/")[2] !== "all";
     });

src/pages/ProductPage.vue

@@ -43,12 +43,12 @@ export default defineComponent({
   },
   setup() {
     const route = useRoute();
-    const { getItem } = useLocalStorage();
+    const { getItemSession } = useLocalStorage();
 
     const formStore = useFormStore();
     const { availability: availabilityForm } = storeToRefs(formStore);
 
-    const availability = ref(getItem("availability"));
+    const availability = ref(getItemSession("availability"));
     const availabilityFormKeys = computed(() => {
       return Object.fromEntries(
         Object.entries(availabilityForm.value).filter(

src/stores/cart.js

@@ -9,7 +9,7 @@ import { useFormStore } from "./forms";
 
 export const useCartStore = defineStore("cart", () => {
   const { push } = useRouter();
-  const { addItem, getItem } = useLocalStorage();
+  const { addItem, getItem, getItemSession } = useLocalStorage();
 
   const formStore = useFormStore();
   const { availability: availabilityForm } = storeToRefs(formStore);
@@ -36,7 +36,7 @@ export const useCartStore = defineStore("cart", () => {
 
   //! Variables
   const cart = ref(getItem("cart"));
-  const availability = ref(getItem("availability"));
+  const availability = ref(getItemSession("availability"));
 
   const addCartLoadingBtn = ref(false);
   const routeId = ref(null);