@monkeyplus/payscope 1.0.0

package/storefront/product/AddProduct.vue

@@ -0,0 +1,303 @@
+<!-- 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 { 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
+  hideWhistlist?: boolean
+  maxQuantity?: number
+  messageMax?: string
+  product: ProductStore
+}>();
+const emit = defineEmits(['stock']);
+
+const { product } = props;
+
+// const product = useTheProduct();
+// const { store } = useShoppingCart();
+const settings = reactive({
+  omitStock: props.omitStock || product.noVariants,
+  hideWhistlist: props.hideWhistlist,
+  to: props.to,
+});
+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 firstVariant = variants[0];
+const initValues = firstVariant.selectedOptions.reduce((acc, current) => {
+  return {
+    ...acc,
+    [current.name]: current.value,
+  };
+}, {} as Selections);
+
+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;
+  }
+}
+
+if (!settings.omitStock)
+  verifyStock();
+// console.log(selections.value);
+
+const selected = computed(() => {
+  return variants.find((variant) => {
+    // console.log(variant.selectedOptions);
+
+    return variant.selectedOptions.every(el => selections.value[el.name] === el.value);
+  });
+});
+const loadingAdd = ref(false);
+const loadingWhislist = ref(false);
+
+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 (!props.to)
+      busCart.emit({ action: 'toogle' });
+    else
+      location.href = `${props.to}${props.to.includes('?') ? '&' : '?'}items=${el?.lineItems?.length}`;
+  }
+  catch (error) {
+    console.warn(error);
+    alert('Error agregando');
+  }
+  finally {
+    loadingAdd.value = false;
+  }
+}
+async function addToWhislist() {
+  // if (!state.isAuth)
+  //   return alert('Debes iniciar sesión para agregar a deseos');
+
+  // loadingWhislist.value = true;
+  // try {
+  //   await whislist.crud.create({
+  //     productId: id,
+  //     data: selected.value,
+  //     storeId: product.store?.id,
+  //     customerId: userId.value,
+  //   });
+  //   alert('Producto agregado a deseos');
+  // }
+  // catch (error) {
+  //   alert('Error agregando');
+  // }
+  // finally {
+  //   loadingWhislist.value = false;
+  // }
+}
+function changeSelect(data: any): void {
+  selections.value = { ...selections.value, ...data };
+  quantity.value = 1;
+  busImages.emit(selections.value);
+}
+
+const teleports = reactive({
+  price: false,
+});
+onMounted(() => {
+  teleports.price = document.getElementById('price') !== null;
+});
+const thePrice = computed(() => {
+  return (+(selected.value?.price || price)).toFixed(2);
+});
+
+const variantStock = computed(() => {
+  if (settings.omitStock) {
+    return {
+      group: true,
+      item: true,
+      itemStock: 8,
+    };
+  }
+  const key = options[0].name;
+  const value = selections.value[key];
+
+  const variantId = options.map(el => selections.value[el.name]).join('/');
+
+  const item = stock.value?.stocks?.find((el: any) => el.variant === variantId)?.quantity;
+
+  return {
+    group: !!stock.value?.firstOption?.[value],
+    item: !!item,
+    itemStock: item || 8,
+  };
+});
+
+const isMax = computed(() => {
+  if (!props.maxQuantity)
+    return false;
+  return quantity.value > props.maxQuantity;
+});
+// const disabledSelect = computed(() => {
+//   return !variantStock.item || !selected || loadingAdd;
+// });
+</script>
+
+<template>
+  <div
+    class="relative z-0" :class="{
+      'opacity-80 animate-pulse': loading,
+    }"
+  >
+    <div v-if="loading" class="absolute animate-pulse w-full h-full cursor-wait z-10 flex items-center justify-center">
+      <div class="w-full h-full flex items-center justify-center">
+        <i-mdi-loading class="text-4xl animate-spin" />
+      </div>
+    </div>
+    <teleport v-if="teleports.price" to="#price">
+      <!-- {{ selected?. }} -->
+      {{ thePrice }}
+    </teleport>
+    <div v-if="!product.noVariants" class="mb-2 space-y-1">
+      <div
+        v-for="(option, group) in options"
+        :key="option.id"
+        class=" pb-4 "
+      >
+        <div class="font-medium pb-1 capitalize">
+          {{ option.name }}: <span class="font-bold">
+            {{ selections[option.name] }}
+          </span>
+        </div>
+        <div class="flex space-x-3 items-center flex-wrap">
+          <div v-for="(item, index) in option.values" :key="`${option.id + index}e`">
+            <AddProductVariant
+              :selections="selections"
+              :group="group"
+              :option="{ value: item, name: option.name }"
+              :stock="group === 0 ? stock?.firstOption : {}"
+              :disable="group === 0 ? false : !variantStock.group"
+              @change="changeSelect"
+            />
+          </div>
+        </div>
+      </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"
+        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 "
+          :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>
+    </div>
+    <div v-if="messageMax && isMax" class="mt-2 text-sm text-red-600">
+      {{ messageMax }}
+    </div>
+    <slot :id="id" :quantity="quantity" :sku="sku" />
+  </div>
+</template>

package/storefront/product/AddProductNumber.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+    required: true,
+  },
+  min: {
+    type: Number,
+    default: 0,
+  },
+  max: {
+    type: Number,
+    default: 10000,
+  },
+  small: Boolean,
+  light: Boolean,
+
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+function setValue(nValue: number) {
+  emit('update:modelValue', nValue);
+  emit('change', nValue);
+}
+function update(value: number) {
+  const nValue = props.modelValue + value;
+  if (value < 0 && nValue >= props.min)
+    setValue(nValue);
+  if (value > 0 && nValue <= props.max)
+    setValue(nValue);
+}
+</script>
+
+<template>
+  <div class="flex items-center *:justify-center border rounded overflow-hidden">
+    <button
+      class="w-[2.5rem] h-[2.5rem] flex items-center justify-center border-r bg-gray-50 text-gray-600 hover:text-gray-950 text-lg"
+      :class="{ 'cursor-not-allowed children:opacity-50': modelValue === min }"
+      @click="update(-1)"
+    >
+      <i-mdi-minus />
+    </button>
+    <div
+      class="h-8 min-w-10 flex-1 flex items-center justify-center text-xl "
+      :class="{
+        'dark:text-slate-50': !light,
+      }"
+    >
+      {{ modelValue }}
+    </div>
+    <button
+      class="w-[2.5rem] h-[2.5rem] flex items-center justify-center border-l bg-gray-50 text-gray-600 hover:text-gray-950 text-lg"
+      :class="{ 'cursor-not-allowed children:opacity-50': modelValue === max }"
+
+      @click="update(1)"
+    >
+      <i-mdi-plus />
+    </button>
+  </div>
+</template>

package/storefront/product/AddProductVariant.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+// import type { PVariant } from '@monkeyplus/e-schema/storefront/objects';
+import { computed } from 'vue';
+
+const props = defineProps({
+  group: {
+    type: Number,
+    required: true,
+  },
+  option: {
+    type: Object,
+    required: true,
+  },
+  selections: {
+    type: Object,
+    required: true,
+  },
+  stock: {
+    type: Object,
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+
+});
+const emit = defineEmits(['change']);
+
+function emitChange(): void {
+  emit('change', { [props.option.name]: props.option.value }, props.group);
+}
+const active = computed(() => {
+  const isActive = props.selections[props.option.name] === props.option.value;
+  return {
+    class: isActive ? '!border border-4 border-eprimary pr-5  dark:border-white' : '!border border-1 !border-dashed border-gray-400',
+    isActive,
+  };
+});
+const disabled = computed(() => {
+  if (!props.stock)
+    return false;
+  if (props.disable)
+    return true;
+
+  return props.stock[props.option.value] === 0;
+});
+</script>
+
+<template>
+  <div>
+    <button
+      :disabled="disabled"
+      class="py-3 px-4 rounded cursor-pointer text-center relative disabled:opacity-50 disabled:cursor-not-allowed disabled:border-dashed"
+
+      :class="[active.class]"
+      @click="emitChange"
+    >
+      <div class="inline-block text-10px absolute right-1 top-1 opacity-80 text-eprimary dark:text-gray-50">
+        <i-mdi-check-circle v-if="active.isActive" />
+      </div>
+      <span class="dark:text-gray-50">
+        {{ option.value }}
+      </span>
+    </button>
+  </div>
+</template>

package/storefront/profile/App.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui';
+import { computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useAccountStore } from '../stores';
+
+const accountStore = useAccountStore();
+const items = ref<TabsItem[]>([
+  {
+    label: 'Información personal',
+    icon: 'i-lucide-user',
+    value: 'me',
+  },
+  {
+    label: 'Direcciones',
+    icon: 'i-lucide-lock',
+    value: 'address',
+  },
+  {
+    label: 'Historial de pedidos',
+    icon: 'i-lucide-lock',
+    value: 'orders',
+  },
+  {
+    label: 'Devoluciones',
+    icon: 'i-lucide-lock',
+    value: 'returns',
+  },
+  {
+    label: 'Mis deseos',
+    icon: 'i-lucide-lock',
+    value: 'wishes',
+  },
+]);
+const route = useRoute();
+const router = useRouter();
+const active = computed({
+  get() {
+    return (route.name as string) || 'me';
+  },
+  set(tab) {
+    // Hash is specified here to prevent the page from scrolling to the top
+    router.push({
+      name: tab,
+    });
+  },
+});
+const open = ref(true);
+</script>
+
+<template>
+  <UApp>
+    <div class="container mx-auto p-3 rounded-xl  border-gray-200 m-3 contain-paint flex">
+      <!--  -->
+      <div class="lg:w-64">
+        <u-sidebar
+          v-model:open="open"
+        >
+          <ul class="space-y-[2px]">
+            <li v-for="item in items" :key="item.value" class="bg-e-primary text-e-primary-contrast p-4 ">
+              <button>
+                <!--  -->
+                {{ item.label }}
+              </button>
+            </li>
+            <li class="mt-6">
+              <button class="bg-e-secondary text-e-secondary-contrast p-4 w-full font-bold">
+                Cerrar sesión
+              </button>
+            </li>
+          </ul>
+        </u-sidebar>
+      </div>
+      <div class="flex-1">
+        <router-view />
+      </div>
+    </div>
+    <button
+
+      class="fixed h-12 w-12 bottom-4 left-4 flex items-center justify-center bg-e-primary rounded-full text-e-primary-contrast lg:hidden"
+      @click="open = !open"
+    >
+      <u-icon
+        name="mdi-menu"
+      />
+    </button>
+  </UApp>
+</template>

package/storefront/profile/main.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import { router } from './router';
+
+export function registerProfileApp() {
+  const app = createApp(App);
+  app.use(router);
+
+  app.mount('#app');
+}

package/storefront/profile/pages/Addresses/Addresses.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useAccountStore } from '../../../stores';
+import AddressesModal from './AddressesModal.vue';
+
+const account = useAccountStore();
+
+const overlay = useOverlay();
+
+const modal = overlay.create(AddressesModal);
+async function onAdd() {
+  const instance = modal.open({
+    title: 'Agregar datos de envio',
+  });
+  const shouldIncrement = await instance.result;
+  console.log('shoultIncrement', shouldIncrement);
+}
+async function onEdit(item: any) {
+  const instance = modal.open({
+    title: 'Editar datos de envio',
+    data: item,
+  });
+  const shouldIncrement = await instance.result;
+  console.log('shoultIncrement', shouldIncrement);
+}
+function onRemove(data: any) {
+//
+}
+</script>
+
+<template>
+  <div class="max-w-lg mx-auto py-6">
+    <!-- <div class="text-center text-xl font-light pb-2 dark:text-white dark:font-medium">
+      Datos de facturación
+    </div> -->
+    <div>
+      <div class="pb-2 space-y-1">
+        <!--  -->
+        <div v-for="item in account.addresses" :key="item.id" class="border px-2 rounded py-3 bg-white  items-center border-gray-300">
+          <div class="flex-1 text-sm text-gray-700">
+            <div class="text-lg font-bold">
+              {{ item.name }}
+            </div>
+            <div class="text-base">
+              {{ item.formatted }}
+            </div>
+            <div>
+              Número de teléfono: {{ item.phone }}
+            </div>
+          </div>
+          <div class="space-x-3 mt-3">
+            <button class="hover:underline" @click="onEdit(item)">
+              Editar
+            </button>
+            <div class="inline-block">
+              |
+            </div>
+            <button class="hover:underline" @click="onRemove(item)">
+              Quitar
+            </button>
+          </div>
+        </div>
+      </div>
+      <!--  -->
+      <div class="text-center">
+        <UButton
+          block
+          size="xl"
+          variant="outline"
+          class="border-dashed border"
+          color="secondary"
+          @click="onAdd()"
+        >
+          Agregar nueva dirección
+        </UButton>
+      </div>
+    </div>
+    <!-- <FormPassword :initial-values="selected" @submit="onSave" /> -->
+  </div>
+</template>