@monkeyplus/payscope 1.0.0

package/storefront/stores.ts

@@ -0,0 +1,320 @@
+import { useAsyncState } from '@vueuse/core';
+import { ofetch } from 'ofetch';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+export const useCartStore = defineStore('cart', () => {
+  const { state: items, isLoading: loadingInit } = useAsyncState(async () => {
+    const r = await ofetch('/storefront/cart');
+    return r.lineItems as any[];
+  }, [] as any[]);
+
+  const { executeImmediate: addToCart, isLoading: loadingAdd } = useAsyncState(
+    async (body: { id: any, quantity: number }) => {
+      const r = await ofetch('/storefront/cart', {
+        method: 'POST',
+        body,
+      });
+      items.value = r.lineItems || [];
+      return {} as any;
+    },
+    null,
+    {
+      immediate: false,
+    },
+  );
+
+  const total = computed(() => {
+    return items.value.reduce((acc: number, item: any) => acc + (item.variant?.price * item.quantity), 0).toFixed(2);
+  });
+  const drawer = ref(false);
+  const loading = computed(() => {
+    return loadingInit.value || loadingAdd.value;
+  });
+  return {
+    addToCart,
+    items,
+    drawer,
+    total,
+    loading,
+  };
+});
+
+interface Checkout {
+  lineItems: any[]
+  invoice: {
+    total: number
+    base: number
+    discounts: any[]
+    discount: number
+    totalTax: number
+    shipping: number
+    lineItemsSubtotalPrice: number
+    totalDiscount: number
+  }
+  address: {
+    id: number
+    formatted: string
+  }
+  billing: {
+    id: number
+    formatted: string
+  }
+  shipping: {
+    id: any
+  }
+}
+export const useCheckoutStore = defineStore('checkout', () => {
+  const isReady = ref(false);
+  const { execute, state: checkout, executeImmediate: getCheckout } = useAsyncState(async () => {
+    const r = await ofetch<Checkout>('/storefront/checkout');
+    return r;
+  }, {
+    invoice: {
+      total: 0,
+      base: 0,
+      discounts: [],
+      shipping: 0,
+      discount: 0,
+      totalTax: 0,
+      lineItemsSubtotalPrice: 0,
+      totalDiscount: 0,
+    },
+    lineItems: [],
+    address: {
+      id: 0,
+      formatted: '',
+    },
+    billing: {
+      id: 0,
+      formatted: '',
+    },
+    shipping: {
+      id: 0,
+    },
+  }, {
+    immediate: false,
+    resetOnExecute: false,
+    onSuccess() {
+      isReady.value = true;
+    },
+
+  });
+  execute(800);
+
+  const items = computed(() => {
+    return (checkout.value.lineItems || []).map((v) => {
+      return {
+        id: v.id,
+        title: v.title,
+        subtitle: v.variant,
+        image: v.variant?.image?.src,
+        quantity: v.quantity,
+        options: v.variant?.selectedOptions?.map((option: any) => {
+          return option;
+        }) as { name: string, value: string }[],
+        total: (v.quantity * v.variant?.price).toFixed(2),
+      };
+    });
+  });
+  const invoice = computed(() => {
+    return checkout.value.invoice;
+  });
+
+  const totals = computed(() => {
+    return {
+      subtotal: Number(checkout.value.invoice.lineItemsSubtotalPrice).toFixed(2),
+      total: Number(checkout.value.invoice.total).toFixed(2),
+      base: Number(checkout.value.invoice.base).toFixed(2),
+      totalTax: Number(checkout.value.invoice.totalTax).toFixed(2),
+      shipping: Number(checkout.value.invoice.shipping).toFixed(2),
+      discount: Number(checkout.value.invoice.totalDiscount).toFixed(2),
+    };
+  });
+
+  const toast = useToast();
+  const { isLoading: loadingDiscount, executeImmediate: applyDiscount } = useAsyncState(async (coupon: string) => {
+    if (!coupon) {
+      return;
+    }
+    await ofetch<Checkout>('/storefront/checkout/discount', {
+      method: 'POST',
+      body: { coupon },
+    });
+    await getCheckout();
+  }, null, {
+    immediate: false,
+    onSuccess() {
+      toast.add({
+        title: 'Código de descuento aplicado',
+        description: 'El código de descuento ha sido aplicado a tu pedido',
+      });
+    },
+    onError(e: any) {
+      console.error(e);
+      toast.add({
+        title: 'Error al aplicar el código de descuento',
+        description: 'El código de descuento no es válido',
+        color: 'error',
+      });
+    },
+  });
+
+  const { isLoading: loadingAddress, executeImmediate: setAddress } = useAsyncState(async (address: any) => {
+    await ofetch<Checkout>('/storefront/checkout/address', {
+      method: 'POST',
+      body: address,
+    });
+    await getCheckout();
+  }, null, {
+    immediate: false,
+    onSuccess() {
+      // toast.add({
+      //   title: 'Código de descuento aplicado',
+      //   description: 'El código de descuento ha sido aplicado a tu pedido',
+      // });
+    },
+    onError(e: any) {
+      console.error(e);
+      // toast.add({
+      //   title: 'Error al aplicar el código de descuento',
+      //   description: 'El código de descuento no es válido',
+      //   color: 'error',
+      // });
+    },
+  });
+  const address = computed(() => {
+    return checkout.value.address;
+  });
+  const billing = computed(() => {
+    return checkout.value.billing;
+  });
+  const shipping = computed(() => {
+    return checkout.value.shipping;
+  });
+
+  const { isLoading: loadingShipping, executeImmediate: getShippings, state: shippings } = useAsyncState(async () => {
+    const r = await ofetch<any>('/storefront/checkout/shippings');
+    return r.items as any[];
+  }, [] as any[], {
+    immediate: false,
+  });
+
+  const { isLoading: loadingSetShipping, executeImmediate: setShipping } = useAsyncState(async (body: any) => {
+    await ofetch<Checkout>('/storefront/checkout/shippings', {
+      method: 'POST',
+      body,
+    });
+    await getCheckout();
+  }, null, {
+    immediate: false,
+    onSuccess() {
+      // toast.add({
+      //   title: 'Código de descuento aplicado',
+      //   description: 'El código de descuento ha sido aplicado a tu pedido',
+      // });
+    },
+    onError(e: any) {
+      console.error(e);
+      // toast.add({
+      //   title: 'Error al aplicar el código de descuento',
+      //   description: 'El código de descuento no es válido',
+      //   color: 'error',
+      // });
+    },
+  });
+  const { isLoading: loadingSetBilling, executeImmediate: setBilling } = useAsyncState(async (body: any) => {
+    await ofetch<Checkout>('/storefront/checkout/billing', {
+      method: 'POST',
+      body,
+    });
+    await getCheckout();
+  }, null, {
+    immediate: false,
+    onSuccess() {
+      // toast.add({
+      //   title: 'Código de descuento aplicado',
+      //   description: 'El código de descuento ha sido aplicado a tu pedido',
+      // });
+    },
+    onError(e: any) {
+      console.error(e);
+      // toast.add({
+      //   title: 'Error al aplicar el código de descuento',
+      //   description: 'El código de descuento no es válido',
+      //   color: 'error',
+      // });
+    },
+  });
+  return {
+    address,
+    billing,
+    checkout,
+    items,
+    invoice,
+    totals,
+    applyDiscount,
+    loadingDiscount,
+    loadingSetBilling,
+    setAddress,
+    setBilling,
+    loadingAddress,
+    isReady,
+    getShippings,
+    shippings,
+    loadingShipping,
+    loadingSetShipping,
+    setShipping,
+    shipping,
+  };
+});
+
+export const useAccountStore = defineStore('account', () => {
+  const { state: billings, isLoading: loadingGetBilling, executeImmediate: getBillings } = useAsyncState(async () => {
+    const r = await ofetch('/storefront/account/billings');
+    return r;
+  }, [] as any[]);
+  const { state: addresses, isLoading: loadingGetAddress, executeImmediate: getAddress } = useAsyncState(async () => {
+    const r = await ofetch('/storefront/account/addresses');
+    return r;
+  }, [] as any[]);
+
+  const { executeImmediate: mutate, isLoading: loadingMutation } = useAsyncState(async (type: 'create' | 'update' | 'delete', method: 'addresses' | 'billings', body: any) => {
+    if (type === 'create') {
+      await ofetch(`/storefront/account/${method}`, {
+        method: 'POST',
+        body,
+      });
+    }
+    if (type === 'update') {
+      await ofetch(`/storefront/account/${method}/${body.id}`, {
+        method: 'PATCH',
+        body,
+      });
+    }
+    if (type === 'delete') {
+      await ofetch(`/storefront/account/${method}/${body.id}`, {
+        method: 'DELETE',
+      });
+    }
+    return method;
+  }, null, {
+    onSuccess(method) {
+      if (method === 'addresses') {
+        getAddress();
+      }
+      if (method === 'billings') {
+        getBillings();
+      }
+    },
+  });
+  return {
+    billings,
+    addresses,
+    loadingMutation,
+    mutate,
+    loadingGetAddress,
+    loadingGetBilling,
+
+  };
+});