floranet/src/hooks/useCheckoutForm.js

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,
    },
  };
}