@monkeyplus/payscope 1.0.2 → 1.0.3

package/dist/server/taxes.d.mts

@@ -0,0 +1,131 @@
+interface TypeTax {
+  /**
+   * Codigo del typo de impuesto
+   * ej.
+   */
+  code: string;
+  /**
+   * Nombre del impuesto
+   * ej. IVA,ICE
+   */
+  name: string;
+}
+interface TaxItem {
+  /**
+   * Valor de impuesto en porcentaje
+   */
+  value: string | number;
+  /**
+   * Codigo de impuesto
+   */
+  code: string;
+  /**
+   * Descripcion del impuesto
+   */
+  description: string;
+  /**
+   * Impuesto incluido
+   */
+  included: boolean;
+  /**
+   * Calcular impuesto antes de descuento
+   */
+  beforeTaxes?: boolean;
+  /**
+   *
+   */
+  excludeDiscount?: boolean;
+  /**
+   * Tipo de impuesto
+   */
+  type: TypeTax;
+}
+interface TaxItemFull extends TaxItem {
+  amount: number;
+  totalAmount: number;
+  base: number;
+  totalBase: number;
+}
+type Discount = {
+  percent: string | number;
+} | {
+  amount: string | number;
+};
+interface ItemTable {
+  id: any;
+  title: string;
+  taxes: TaxItem[];
+  taxIncluded: boolean;
+  quantity: string | number;
+  price: string | number;
+  /**
+   * Valor del descuento en porcentaje
+   */
+  discount: Discount;
+  product?: any;
+  productId?: any;
+  variant?: any;
+  discountAllocations?: any[];
+}
+interface ItemDiscount {
+  amount: number;
+  percent?: number;
+}
+interface Amount {
+  price: number;
+  unitAmount: number;
+  unitBase: number;
+  discounts: {
+    itemDiscount: ItemDiscount;
+    parentDiscount: ItemDiscount;
+  };
+  total?: number;
+}
+interface Item {
+  id: any;
+  title: string;
+  taxIncluded: boolean;
+  item: Amount;
+  taxes: TaxItemFull[];
+  variant: {
+    id: any;
+    [key: string]: any;
+  };
+  product: {
+    id: any;
+    [key: string]: any;
+  };
+  discountAllocations?: any[];
+  quantity: number;
+  productId?: any;
+  category?: string;
+}
+interface Invoice {
+  total: number;
+  base: number;
+  items: Item[];
+  lineItemsSubtotalPrice: number;
+  shipping: number;
+  totalTax: number;
+  totalDiscount: number;
+  taxes: {
+    /**
+     * Codigo de tipo de impuesto
+     */
+    type: string;
+    /**
+     * Codigo de impuesto
+     */
+    code: string;
+    base: number;
+    value: number;
+    rate: number;
+    title?: string;
+  }[];
+}
+declare function calcAmount(_itemDiscount: Discount, _parentDiscount: Discount, taxIncluded?: boolean): (price: number) => Amount;
+declare function calcSingleItem(parentDiscount?: Discount): (item: ItemTable) => Item;
+declare function calcItems(items: ItemTable[], parentDiscount?: Discount): Item[];
+declare function buildInvoice(items: Item[]): Invoice;
+declare function calculateFormula(expression: string, variables: Record<string, number>): number;
+export { Amount, Discount, Invoice, Item, ItemDiscount, ItemTable, TaxItem, TaxItemFull, TypeTax, buildInvoice, calcAmount, calcItems, calcSingleItem, calculateFormula };

package/dist/server/taxes.mjs

@@ -0,0 +1,2 @@
+import { buildInvoice, calcAmount, calcItems, calcSingleItem, calculateFormula } from "../_chunks/taxes.mjs";
+export { buildInvoice, calcAmount, calcItems, calcSingleItem, calculateFormula };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@monkeyplus/payscope",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "packageManager": "pnpm@10.8.1",
   "author": "",
   "keywords": [],

package/storefront/cart/ShoppinCart.vue

@@ -3,24 +3,15 @@ import { ref } from 'vue';
 import { useCartStore } from '../stores';
 import ShoppinCartItem from './ShoppinCartItem.vue';
 
-const toast = useToast();
+// const toast = useToast();
 const cart = useCartStore();
 const loading = ref(false);
-function onOpen() {
-  console.log('toast');
-  cart.drawer = !cart.drawer;
-  //   toast.add({
-  //     title: 'Event added to calendar',
-  //     description: `This event is scheduled.`,
-  //     icon: 'i-lucide-calendar-days',
-  //   });
-}
 </script>
 
 <template>
   <!-- <UApp> -->
-  <UDrawer direction="right">
-    <UButton icon="i-bytesize-cart" size="xl" variant="ghost" class="mx-3" @click="onOpen" />
+  <UDrawer v-model:open="cart.open" direction="right">
+    <UButton icon="i-bytesize-cart" size="xl" variant="ghost" class="mx-3" />
 
     <template #content>
       <div

package/storefront/cart/ShoppinCartItem.vue

@@ -55,17 +55,19 @@ function onUpdate(id: string): void {
           {{ item?.variant?.price }}
         </div>
       </div>
-      <template
-        v-for="(option) in item?.variant?.selectedOptions || []"
-        :key="option.name"
-      >
-        <div v-show="option.name !== 'x'" class="text-gray-900">
-          <span class="font-bold"> {{ option.name }}: </span>
-          <span>
-            {{ option.value }}
-          </span>
-        </div>
-      </template>
+      <div v-if="!item?.noVariants">
+        <template
+          v-for="(option) in item?.variant?.selectedOptions || []"
+          :key="option.name"
+        >
+          <div v-show="option.name !== 'x'" class="text-gray-900">
+            <span class="font-bold"> {{ option.name }}: </span>
+            <span>
+              {{ option.value }}
+            </span>
+          </div>
+        </template>
+      </div>
       <div class="flex-auto" />
       <div class="text-gray-800 pt-1">
         <div v-show="item.variant?.available">

package/storefront/checkout/App.vue

@@ -11,7 +11,7 @@ const open = ref(true);
 
 <template>
   <UApp>
-    <div class=" mx-auto h-screen flex flex-col ">
+    <div class=" mx-auto min-h-screen flex flex-col ">
       <div class="border-b border-gray-300">
         Header {{ checkout.isReady }}
       </div>

package/storefront/checkout/AppCart.vue

@@ -15,23 +15,21 @@ const checkout = useCheckoutStore();
 
 <template>
   <div>
-    <div v-for="item in checkout.items" :key="item.id" class="flex items-center w-full">
-      <div
-        class="
-              border-1
-              rounded
-              border-gray-200
-              overflow-hidden overflow-visible
-            "
-      >
+    <h3 class="text-xl font-bold mb-4 text-gray-800">
+      Resumen de tu pedido
+    </h3>
+    <div v-for="item in checkout.items" :key="item.id" class="flex items-center w-full gap-4">
+      <div>
         <div class="relative">
-          <div
-            class=" h-[4.5rem] w-[4.5rem] min-w-[4.5rem] bg-gray-50 flex justify-center items-center"
-          >
+          <div class="w-16 h-16 rounded-md overflow-hidden bg-white border border-gray-200 flex-shrink-0">
             <img
+              v-if="item?.image?.src"
               :src="item?.image?.src"
               alt="h-full w-full object-containt"
             >
+            <div v-else class="w-full h-full flex items-center justify-center text-gray-400">
+              <i-mdi-image-outline class="text-2xl" />
+            </div>
           </div>
           <div
             class="
@@ -50,20 +48,29 @@ const checkout = useCheckoutStore();
           </div>
         </div>
       </div>
-      <div class="flex-auto px-3">
-        {{ item.title }}
-        <div
-          v-for="(option) in item.options"
-          :key="option.name"
-          class="text-xs"
-        >
-          <span class="font-bold"> {{ option.name }}: </span>
-          <span>
-            {{ option.value }}
-          </span>
+      <div class="flex-1 flex justify-between">
+        <div>
+          <div class="font-medium text-gray-800 text-sm leading-tight">
+            {{ item.title }}
+          </div>
+          <div
+            v-for="(option) in item.options"
+            :key="option.name"
+            class="text-xs text-gray-500 mt-1"
+          >
+            <span class="font-bold"> {{ option.name }}: </span>
+            <span>
+              {{ option.value }}
+            </span>
+          </div>
+          <div class="text-xs text-gray-400 mt-1">
+            Cant: {{ item.quantity }}
+          </div>
+        </div>
+        <div class="font-bold text-gray-800 text-sm">
+          $ {{ item.total }}
         </div>
       </div>
-      <div>$ {{ item.total }}</div>
     </div>
     <div class="h-[2px] bg-gray-200 my-8" />
     <AppCartDiscount />

package/storefront/checkout/AppCartTotals.vue

@@ -11,7 +11,7 @@ const taxIncluded = ref(false);
     <div class="pt-3 space-y-1">
       <div v-if="checkout.invoice?.discount || checkout.invoice?.discounts?.length" class="border-b mb-2 pb-1">
         <div class="flex">
-          <div>
+          <div class="text-gray-500">
             Total
             <span class="text-xs">(Sin descuentos)</span>
           </div>
@@ -27,45 +27,49 @@ const taxIncluded = ref(false);
         </div>
       </div>
       <div class="flex">
-        <div>Subtotal</div>
+        <div class="text-gray-500 text-sm">
+          Subtotal
+        </div>
         <div class="flex-auto" />
-        <div>
-          {{ checkout.totals.base }}
+        <div class="font-medium">
+          ${{ checkout.totals.base }}
         </div>
       </div>
       <div class="flex">
-        <div>
+        <div class="text-gray-500 text-sm">
           Impuestos
         </div>
         <div class="flex-auto" />
-        <div v-if="!taxIncluded">
-          {{ checkout.totals.totalTax }}
+        <div v-if="!taxIncluded" class="font-medium">
+          ${{ checkout.totals.totalTax }}
         </div>
         <div v-else class="italic text-sm">
           Ya incluidos
         </div>
       </div>
       <div class="flex">
-        <div>Envio</div>
+        <div class="text-gray-500 text-sm">
+          Envio
+        </div>
         <div class="flex-auto" />
-        <div>
-          {{ checkout.totals.shipping }}
+        <div class="font-medium">
+          ${{ checkout.totals.shipping }}
         </div>
       </div>
     </div>
     <div class="border-b-1 border-black opacity-10 my-4 border" />
-    <div class="flex">
+    <div class="flex items-center font-bold">
       <div>
-        <div class="text-lg text-gray-700">
+        <div class=" text-gray-800">
           Total
         </div>
       </div>
       <div class="flex-auto" />
-      <div class="text-2xl text-gray-800">
-        <span class="text-sm">
+      <div class="text-xl text-gray-900">
+        <span class="text-sm text-gray-500">
           USD
         </span>
-        {{ checkout.totals.total }} $
+        ${{ checkout.totals.total }}
       </div>
     </div>
   </div>

package/storefront/checkout/pages/Auth.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>

package/storefront/checkout/pages/Basic/BasicBillingForm.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+const props = defineProps<{
+  step: number;
+  isActive: boolean;
+}>();
+
+const emit = defineEmits(['next', 'edit']);
+
+const requireBilling = ref(false);
+
+const form = reactive({
+  rfc: '',
+  name: '',
+  address: ''
+});
+
+const isComplete = ref(false);
+
+function submit() {
+  if (!requireBilling.value) {
+    isComplete.value = true;
+    emit('next');
+    return;
+  }
+  if (form.rfc && form.name) {
+    isComplete.value = true;
+    emit('next');
+  }
+}
+</script>
+
+<template>
+  <div class="bg-white p-6 rounded-xl border shadow-sm transition-colors duration-300" :class="isActive ? 'border-primary' : 'border-gray-100'">
+    <div class="flex items-center justify-between mb-2">
+      <div class="flex items-center space-x-3">
+        <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors" :class="isActive ? 'bg-primary text-white' : (isComplete ? 'bg-green-500 text-white' : 'bg-slate-100 text-slate-600')">
+          <i-mdi-check v-if="!isActive && isComplete" class="text-lg" />
+          <span v-else>{{ step }}</span>
+        </div>
+        <h3 class="text-xl font-bold text-gray-800">
+          Datos de Facturación
+        </h3>
+      </div>
+      <div class="flex items-center space-x-2" v-if="isActive">
+        <span class="text-sm text-gray-500 font-medium">Requerir factura</span>
+        <UToggle v-model="requireBilling" color="primary" />
+      </div>
+      <UButton v-else-if="isComplete" variant="ghost" color="gray" icon="i-heroicons-pencil-square" size="sm" @click="$emit('edit')">Editar</UButton>
+    </div>
+
+    <div class="pl-11 pt-2 transition-all">
+      <div v-if="isActive" class="animate-fade-in">
+        <form @submit.prevent="submit" class="space-y-4">
+          <div v-if="requireBilling" class="animate-fade-in space-y-4 mt-2">
+            <UFormField label="RFC / Identificación" required>
+              <UInput v-model="form.rfc" placeholder="Ej. XAXX010101000" />
+            </UFormField>
+            <UFormField label="Razón Social / Nombre" required>
+              <UInput v-model="form.name" placeholder="Razón Social" />
+            </UFormField>
+            <UFormField label="Dirección Fiscal">
+              <UInput v-model="form.address" placeholder="Dirección completa" />
+            </UFormField>
+          </div>
+          <div v-else class="text-sm text-gray-500 italic mb-4 mt-2">
+            Has seleccionado que no requieres factura.
+          </div>
+          <div class="pt-4 flex justify-end">
+            <UButton type="submit" size="lg">Guardar y Continuar</UButton>
+          </div>
+        </form>
+      </div>
+      <div v-else-if="isComplete" class="text-sm text-gray-600 space-y-1 animate-fade-in">
+        <template v-if="requireBilling">
+          <p class="font-medium text-gray-900">{{ form.name }}</p>
+          <p>RFC: {{ form.rfc }}</p>
+          <p v-if="form.address">{{ form.address }}</p>
+        </template>
+        <p v-else class="italic">No se requiere factura</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>

package/storefront/checkout/pages/Basic/BasicCustomerForm.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { useAsyncState } from '@vueuse/core';
+import { vMaska } from 'maska/vue';
+import { ofetch } from 'ofetch';
+import { computed, reactive, ref, watch } from 'vue';
+
+defineProps<{
+  step: number
+  isActive: boolean
+}>();
+
+const emit = defineEmits(['next', 'edit']);
+
+const form = reactive({
+  firstName: '',
+  lastName: '',
+  email: '',
+  phone: '',
+});
+
+interface PhoneCode {
+  name: string
+  code: string
+  emoji: string
+  dialCode: string
+  mask: string
+}
+
+const countryCode = ref('EC'); // Default country (Example: Mexico or US)
+
+// Adapted from useLazyFetch to useAsyncState since we are in a Vue3/Vite env
+const { state: phoneCodes, isLoading: statusPending, execute } = useAsyncState(async () => {
+  return await ofetch<PhoneCode[]>('/api/phone-codes.json').catch(() => {
+    // Fallback data in case the endpoint doesn't exist
+    return [
+      { name: 'United States', code: 'US', emoji: '🇺🇸', dialCode: '+1', mask: '(###) ###-####' },
+      { name: 'Mexico', code: 'MX', emoji: '🇲🇽', dialCode: '+52', mask: '## #### ####' },
+      { name: 'Spain', code: 'ES', emoji: '🇪🇸', dialCode: '+34', mask: '### ### ###' },
+      { name: 'Colombia', code: 'CO', emoji: '🇨🇴', dialCode: '+57', mask: '### ### ####' },
+      { name: 'Argentina', code: 'AR', emoji: '🇦🇷', dialCode: '+54', mask: '## #### ####' },
+      { name: 'Ecuador', code: 'EC', emoji: '🇪🇨', dialCode: '+593', mask: '### ### ###' },
+    ];
+  });
+}, [], {
+  immediate: false,
+});
+
+const country = computed(() => phoneCodes.value?.find(c => c.code === countryCode.value));
+const dialCode = computed(() => country.value?.dialCode || '+52');
+const mask = computed(() => country.value?.mask || '## #### ####');
+
+function onOpen() {
+  if (!phoneCodes.value?.length) {
+    execute();
+  }
+}
+
+watch(countryCode, () => {
+  form.phone = '';
+});
+
+const isComplete = ref(false);
+
+function submit() {
+  if (form.firstName && form.email) {
+    isComplete.value = true;
+    // Here you would normally commit this info to the store
+    emit('next');
+  }
+}
+</script>
+
+<template>
+  <div class="bg-white p-6 rounded-xl border shadow-sm transition-colors duration-300" :class="isActive ? 'border-primary' : 'border-gray-100'">
+    <div class="flex items-center justify-between mb-2">
+      <div class="flex items-center space-x-3">
+        <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors" :class="isActive ? 'bg-primary text-white' : (isComplete ? 'bg-green-500 text-white' : 'bg-slate-100 text-slate-600')">
+          <i-mdi-check v-if="!isActive && isComplete" class="text-lg" />
+          <span v-else>{{ step }}</span>
+        </div>
+        <h3 class="text-xl font-bold text-gray-800">
+          Información de Contacto
+        </h3>
+      </div>
+      <UButton v-if="!isActive && isComplete" variant="ghost" color="gray" icon="i-heroicons-pencil-square" size="sm" @click="$emit('edit')">
+        Editar
+      </UButton>
+    </div>
+
+    <div class="pl-11 pt-2 transition-all">
+      <div v-if="isActive" class="animate-fade-in">
+        <form class="space-y-4" @submit.prevent="submit">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Nombre" required>
+              <UInput v-model="form.firstName" placeholder="Tu nombre" />
+            </UFormField>
+            <UFormField label="Apellido">
+              <UInput v-model="form.lastName" placeholder="Tu apellido" />
+            </UFormField>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Correo Electrónico" required>
+              <UInput v-model="form.email" type="email" placeholder="correo@ejemplo.com" />
+            </UFormField>
+            <UFormField label="Teléfono">
+              <div class="flex">
+                <USelectMenu
+                  v-model="countryCode"
+                  :items="phoneCodes"
+                  value-key="code"
+                  :search-input="{
+                    placeholder: 'Search country...',
+                    icon: 'i-lucide-search',
+                    loading: statusPending,
+                  }"
+                  :filter-fields="['name', 'code', 'dialCode']"
+                  :content="{ align: 'start' }"
+                  :ui="{
+                    base: 'pe-8 rounded-r-none border-r-0 focus:z-10 bg-gray-50',
+                    content: 'w-48',
+                    placeholder: 'hidden',
+                    trailingIcon: 'size-4',
+                  }"
+                  trailing-icon="i-lucide-chevrons-up-down"
+                  @update:open="onOpen"
+                >
+                  <span class="size-5 flex items-center text-lg">
+                    {{ country?.emoji || '\u{1F1FA}\u{1F1F8}' }}
+                  </span>
+
+                  <template #item-leading="{ item }">
+                    <span class="size-5 flex items-center text-lg">
+                      {{ item.emoji }}
+                    </span>
+                  </template>
+
+                  <template #item-label="{ item }">
+                    {{ item.name }} ({{ item.dialCode }})
+                  </template>
+                </USelectMenu>
+
+                <UInput
+                  v-model="form.phone"
+                  v-maska="mask"
+                  class="flex-1"
+                  :placeholder="mask.replaceAll('#', '_')"
+                  :style="{ '--dial-code-length': `${dialCode.length + 1.5}ch` }"
+                  :ui="{
+                    base: 'ps-[var(--dial-code-length)] rounded-l-none',
+                    leading: 'pointer-events-none text-base md:text-sm text-gray-400 font-medium',
+                  }"
+                >
+                  <template #leading>
+                    {{ dialCode }}
+                  </template>
+                </UInput>
+              </div>
+            </UFormField>
+          </div>
+          <div class="pt-4 flex justify-end">
+            <UButton type="submit" size="lg">
+              Guardar y Continuar
+            </UButton>
+          </div>
+        </form>
+      </div>
+      <div v-else-if="isComplete" class="text-sm text-gray-600 space-y-1 animate-fade-in">
+        <p class="font-medium text-gray-900">
+          {{ form.firstName }} {{ form.lastName }}
+        </p>
+        <p>{{ form.email }}</p>
+        <p v-if="form.phone">
+          {{ form.phone }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+</style>