@monkeyplus/payscope 1.0.1 → 1.0.3

package/storefront/product/AddProduct.vue

@@ -1,34 +1,13 @@
 <!-- eslint-disable ts/ban-ts-comment -->
 <script lang="ts" setup>
 import type { ProductStore, ProductStoreStocks } from '@monkeyplus/e-schema/models';
-import { useEventBus } from '@vueuse/core';
+import { useAsyncState, useEventBus } from '@vueuse/core';
 import { ofetch } from 'ofetch';
 import { computed, inject, onMounted, reactive, ref } from 'vue';
 import { useCartStore } from '../stores.ts';
 import AddProductNumber from './AddProductNumber.vue';
-// import { useCrud, useShoppingCart, useTheProduct } from '../../helpers';
-// import { EButton, InputNumber } from '../shared/exports';
 import AddProductVariant from './AddProductVariant.vue';
-// const props = defineProps({
-//   to: {
-//     type: String,
-//   },
-//   omitStock: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   hideWhistlist: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   maxQuantity: {
-//     type: Number,
-//   },
-//   messageMax: {
-//     type: String,
-//   },
-//   product:
-// });
+
 const props = defineProps<{
   to?: string
   omitStock?: boolean
@@ -41,8 +20,6 @@ const emit = defineEmits(['stock']);
 
 const { product } = props;
 
-// const product = useTheProduct();
-// const { store } = useShoppingCart();
 const settings = reactive({
   omitStock: props.omitStock || product.noVariants,
   hideWhistlist: props.hideWhistlist,
@@ -52,19 +29,9 @@ type Selections = Record<string, string>;
 
 const busImages = useEventBus('busGalleryImages');
 const busCart = useEventBus('busCart');
-// const { crud: CrudCart } = useCrud('cart');
 const cartStore = useCartStore();
-const loading = ref(false);
-const { options, variants, id, uid, price, sku } = product;
-
-// const { state, uid: userId, user } = useIdentify();
-
-// const {} = useCustomer();
-// const whislist = useCrud('account/wishlist');
-
-// const addToCart = ()=>{
+const { options, variants, id, price, sku } = product;
 
-// }
 const firstVariant = variants[0];
 const initValues = firstVariant.selectedOptions.reduce((acc, current) => {
   return {
@@ -75,28 +42,23 @@ const initValues = firstVariant.selectedOptions.reduce((acc, current) => {
 
 const quantity = ref(1);
 const selections = ref<Selections>(initValues);
-const stock = ref({} as ProductStoreStocks);
-// Initial images
 busImages.emit(selections.value);
 
-async function verifyStock() {
-  try {
-    loading.value = true;
-    const stocks = await ofetch<ProductStoreStocks>(`/storefront/cache/products/${product.id}/stock`);
-    stock.value = stocks;
-    emit('stock', stocks);
-  }
-  catch (error) {
-    console.warn(error);
-  }
-  finally {
-    loading.value = false;
-  }
-}
+const { state: stock, isLoading: loading, executeImmediate: verifyStock } = useAsyncState(async () => {
+  //  loading.value = true;
+  const stocks = await ofetch<ProductStoreStocks>(`/storefront/cache/products/${product.id}/stock`);
+  // stock.value = stocks;
+  emit('stock', stocks);
+  return stocks;
+}, {} as ProductStoreStocks, {
+  immediate: false,
+  onError(e) {
+    console.error(e);
+  },
+});
 
 if (!settings.omitStock)
   verifyStock();
-// console.log(selections.value);
 
 const selected = computed(() => {
   return variants.find((variant) => {
@@ -105,46 +67,46 @@ const selected = computed(() => {
     return variant.selectedOptions.every(el => selections.value[el.name] === el.value);
   });
 });
-const loadingAdd = ref(false);
 const loadingWhislist = ref(false);
 
+const alertModal = reactive({
+  isOpen: false,
+  title: '',
+  description: '',
+});
+
+function showAlert(title: string, description: string) {
+  alertModal.title = title;
+  alertModal.description = description;
+  alertModal.isOpen = true;
+}
+
 const addToCartOmit = inject('addToCartOmit', (_id: any, _selected: any, _items: any) => true);
 // const verify
 async function addToCart(): Promise<void> {
-  loadingAdd.value = true;
-
-  try {
-    if (!addToCartOmit(`${id}:${selected.value?.id}`, selected.value, cartStore.items)) {
-      return;
-    }
-    // console.log(selected.value);
-    if (!settings.omitStock) {
-      const r = await ofetch(`/storefront/cache/products/${encodeURIComponent(`${uid! || product.id}`)}/verify?selectedOptions=${JSON.stringify(selected.value?.selectedOptions || {})}`, {
-      });
-
-      if (!r.ok)
-        return alert('Sin stock disponible');
-    }
-    const el = await cartStore.addToCart({
-      id: `${id}:${selected.value?.id}`,
-      quantity: quantity.value,
-    });
-    busCart.emit({
-      action: 'create',
-      payload: { ...el, product },
-    });
+  if (!addToCartOmit(`${id}:${selected.value?.id}`, selected.value, cartStore.items)) {
+    return;
+  }
 
-    if (!props.to)
-      busCart.emit({ action: 'toogle' });
-    else
-      location.href = `${props.to}${props.to.includes('?') ? '&' : '?'}items=${el?.lineItems?.length}`;
+  const el = await cartStore.addToCart({
+    id: `${id}:${selected.value?.id}`,
+    quantity: quantity.value,
+  });
+  if (el.error && el.error === 'stock') {
+    showAlert('Aviso', 'Sin stock disponible');
+    return;
   }
-  catch (error) {
-    console.warn(error);
-    alert('Error agregando');
+  busCart.emit({
+    action: 'create',
+    payload: { ...el, product },
+  });
+
+  if (!props.to) {
+    cartStore.open = true;
+    // console.log({ cartStore });
   }
-  finally {
-    loadingAdd.value = false;
+  else {
+    location.href = `${props.to}${props.to.includes('?') ? '&' : '?'}items=${el?.lineItems?.length}`;
   }
 }
 async function addToWhislist() {
@@ -211,9 +173,6 @@ const isMax = computed(() => {
     return false;
   return quantity.value > props.maxQuantity;
 });
-// const disabledSelect = computed(() => {
-//   return !variantStock.item || !selected || loadingAdd;
-// });
 </script>
 
 <template>
@@ -228,7 +187,6 @@ const isMax = computed(() => {
       </div>
     </div>
     <teleport v-if="teleports.price" to="#price">
-      <!-- {{ selected?. }} -->
       {{ thePrice }}
     </teleport>
     <div v-if="!product.noVariants" class="mb-2 space-y-1">
@@ -257,40 +215,29 @@ const isMax = computed(() => {
       </div>
     </div>
     <div class=" space-y-3">
-      <!-- <el-input-number
-        v-model="quantity"
-        :min="1"
-        :max="8"
-        size="medium"
-        class="w-32"
-      /> -->
       <div class="p-1px">
         <AddProductNumber v-model="quantity" :min="1" :max="variantStock.itemStock" size="large" class="w-[8rem]" />
       </div>
       <UButton
-
-        :disabled="!variantStock.item || !selected || loadingAdd || isMax"
-        :loading="loadingAdd"
+        :disabled="!variantStock.item || !selected || cartStore.loadingAdd || isMax"
+        :loading="cartStore.loadingAdd"
         icon="i-bytesize-cart"
         size="xl"
         block
         @click="addToCart"
       >
-        <!-- <i-bytesize-cart class="relative -left-3 text-xl dark:text-white" /> -->
         <span class="text-white font-medium uppercase "> {{ !variantStock.item ? 'Sin existencias' : 'Agregar al carrito' }} </span>
       </UButton>
       <div v-if="!settings.hideWhistlist">
         <UButton
-          :disabled=" !selected || loadingAdd || loadingWhislist "
+          :disabled=" !selected || cartStore.loadingAdd || loadingWhislist "
           :loading="loadingWhislist"
           icon="i-mdi-heart-outline"
           size="lg"
           variant="subtle"
           @click="addToWhislist"
         >
-          <!-- <i-mdi-heart-outline class="relative -left-3 text-xl" /> -->
           <span class=" font-medium uppercase"> Añadir a deseos
-          <!-- {{ state.isAuth }}   -->
           </span>
         </UButton>
       </div>
@@ -299,5 +246,42 @@ const isMax = computed(() => {
       {{ messageMax }}
     </div>
     <slot :id="id" :quantity="quantity" :sku="sku" />
+
+    <UModal v-model:open="alertModal.isOpen">
+      <template #content>
+        <div class="p-6 flex flex-col items-center text-center">
+          <div class="relative flex items-center justify-center mb-8 mt-4">
+            <!-- Anillos pulsantes en color Rojo/Rosa -->
+            <div class="absolute inset-0 rounded-full bg-rose-500/20 animate-ping" style="animation-duration: 2.5s;" />
+            <div class="absolute inset-[-1.5rem] rounded-full bg-rose-500/10 animate-pulse" style="animation-duration: 3s;" />
+
+            <!-- Icono central -->
+            <div class="relative z-10 w-24 h-24 bg-gradient-to-br from-rose-400 to-rose-600 rounded-full flex items-center justify-center shadow-lg shadow-rose-500/30">
+              <i-mdi-close-circle class="text-white text-5xl" />
+            </div>
+          </div>
+
+          <span class="text-xs font-bold px-4 py-1.5 bg-rose-50 text-rose-600 border border-rose-100 rounded-full uppercase tracking-wider mb-3">
+            Aviso
+          </span>
+
+          <h2 class="text-2xl font-bold text-gray-800 tracking-tight mb-2">
+            {{ alertModal.title }}
+          </h2>
+          <p class="text-sm text-gray-500 max-w-sm mx-auto mb-6 leading-relaxed">
+            {{ alertModal.description }}
+          </p>
+
+          <div class="pt-4 w-full">
+            <button
+              class="w-full bg-gradient-to-r from-slate-800 to-slate-900 hover:from-slate-900 hover:to-slate-950 text-white font-bold px-8 py-3.5 rounded-xl uppercase tracking-wider text-xs shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5 active:translate-y-0"
+              @click="alertModal.isOpen = false"
+            >
+              Cerrar
+            </button>
+          </div>
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>

package/storefront/stores.ts

@@ -3,9 +3,12 @@ import { ofetch } from 'ofetch';
 import { createPinia, defineStore } from 'pinia';
 import { type App, computed, ref } from 'vue';
 
+if (typeof window !== 'undefined' && !(window as any)?.sharedPinia) {
+  (window as any).sharedPinia = createPinia();
+}
 export function registerPinia(app: App) {
-  if (!(window as any)?.sharedPinia) {
-    (window as any).sharedPinia = createPinia();
+  if (typeof window === 'undefined') {
+    return;
   }
   app.use((window as any).sharedPinia);
 }
@@ -15,8 +18,26 @@ export const useCartStore = defineStore('cart', () => {
     return r.lineItems as any[];
   }, [] as any[]);
 
+  interface ProductAdd {
+
+    id: any
+    quantity: number
+    verifyStock?: boolean
+    selectedOptions?: any
+
+  }
   const { executeImmediate: addToCart, isLoading: loadingAdd } = useAsyncState(
-    async (body: { id: any, quantity: number }) => {
+    async (body: ProductAdd) => {
+      if (body.verifyStock) {
+        const stock = await ofetch(`/storefront/cache/products/${encodeURIComponent(`${body.id}`)}/verify?selectedOptions=${JSON.stringify(body.selectedOptions)}`, {
+        });
+
+        if (!stock.ok) {
+          return {
+            error: 'stock',
+          };
+        }
+      }
       const r = await ofetch('/storefront/cart', {
         method: 'POST',
         body,
@@ -33,16 +54,17 @@ export const useCartStore = defineStore('cart', () => {
   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 open = ref(false);
   const loading = computed(() => {
     return loadingInit.value || loadingAdd.value;
   });
   return {
     addToCart,
     items,
-    drawer,
+    open,
     total,
     loading,
+    loadingAdd,
   };
 });