@monkeyplus/payscope 1.0.2 → 1.0.3

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+const props = defineProps<{
+  step: number;
+  isActive: boolean;
+}>();
+
+const emit = defineEmits(['next', 'edit']);
+
+const form = reactive({
+  street: '',
+  city: '',
+  zip: '',
+  state: '',
+  country: 'México',
+  reference: ''
+});
+
+const isComplete = ref(false);
+
+function submit() {
+  if (form.street && form.city && form.zip) {
+    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">
+          Dirección de Envío
+        </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 @submit.prevent="submit" class="space-y-4">
+          <UFormField label="Calle y Número" required>
+            <UInput v-model="form.street" placeholder="Ej. Av. Principal 123" />
+          </UFormField>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Ciudad" required>
+              <UInput v-model="form.city" placeholder="Ciudad" />
+            </UFormField>
+            <UFormField label="Estado / Provincia" required>
+              <UInput v-model="form.state" placeholder="Estado" />
+            </UFormField>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <UFormField label="Código Postal" required>
+              <UInput v-model="form.zip" placeholder="12345" />
+            </UFormField>
+            <UFormField label="País">
+              <UInput v-model="form.country" placeholder="País" />
+            </UFormField>
+          </div>
+          <UFormField label="Referencia (Opcional)">
+            <UInput v-model="form.reference" placeholder="Ej. Casa de dos pisos con reja blanca" />
+          </UFormField>
+          
+          <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.street }}</p>
+        <p>{{ form.city }}, {{ form.state }}, {{ form.zip }}</p>
+        <p>{{ form.country }}</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/BasicSummary.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useCheckoutStore } from '../../../stores.ts';
+
+const checkout = useCheckoutStore();
+</script>
+
+<template>
+  <div class="bg-gray-50 p-6 rounded-xl border border-gray-100 shadow-sm">
+    <h3 class="text-xl font-bold mb-4 text-gray-800">
+      Resumen de tu pedido
+    </h3>
+    <div class="space-y-4 mb-6">
+      <div v-for="item in checkout.items" :key="item.id" class="flex gap-4">
+        <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="item.image" class="w-full h-full object-cover">
+          <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="flex-1 flex justify-between">
+          <div>
+            <div class="font-medium text-gray-800 text-sm leading-tight">
+              {{ item.title }}
+            </div>
+            <div v-if="item.subtitle" class="text-xs text-gray-500 mt-1">
+              {{ item.subtitle }}
+            </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>
+    </div>
+    <hr class="border-gray-200 mb-4">
+    <div class="space-y-2 text-sm">
+      <div class="flex justify-between">
+        <span class="text-gray-500">Subtotal</span>
+        <span class="font-medium">${{ checkout.totals.subtotal }}</span>
+      </div>
+      <div v-if="Number(checkout.totals.discount) > 0" class="flex justify-between">
+        <span class="text-gray-500">Descuentos</span>
+        <span class="font-medium text-emerald-600">-${{ checkout.totals.discount }}</span>
+      </div>
+      <div class="flex justify-between">
+        <span class="text-gray-500">Impuestos</span>
+        <span class="font-medium">${{ checkout.totals.totalTax }}</span>
+      </div>
+      <div class="flex justify-between">
+        <span class="text-gray-500">Envío</span>
+        <span class="font-medium">${{ checkout.totals.shipping }}</span>
+      </div>
+    </div>
+    <hr class="border-gray-200 my-4">
+    <div class="flex justify-between items-center text-lg font-bold">
+      <span class="text-gray-800">Total</span>
+      <span class="text-gray-900">${{ checkout.totals.total }}</span>
+    </div>
+  </div>
+</template>

package/storefront/checkout/pages/Basic.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useCheckoutStore } from '../../stores.ts';
+import BasicBillingForm from './Basic/BasicBillingForm.vue';
+import BasicCustomerForm from './Basic/BasicCustomerForm.vue';
+import BasicShippingForm from './Basic/BasicShippingForm.vue';
+import BasicSummary from './Basic/BasicSummary.vue';
+import PaymentForms from './Pay/PayForms.vue';
+
+const checkout = useCheckoutStore();
+
+const activeStep = ref(1);
+
+const requiresShipping = computed(() => {
+  if (!checkout.checkout?.lineItems?.length)
+    return false;
+  return true;
+});
+
+// Dinamical step calculation
+const customerStep = 1;
+const shippingStep = computed(() => requiresShipping.value ? 2 : -1);
+const billingStep = computed(() => requiresShipping.value ? 3 : 2);
+const paymentStep = computed(() => requiresShipping.value ? 4 : 3);
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto mt-6 px-4 pb-12">
+    <!-- Header -->
+    <div class="mb-8 border-b border-gray-100 pb-4">
+      <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">
+        Checkout
+      </h1>
+      <p class="text-gray-500 mt-1">
+        Completa tu información para finalizar la compra
+      </p>
+    </div>
+
+    <!-- Left Column: Forms Flow -->
+    <div class="lg:col-span-7 xl:col-span-8 space-y-6">
+      <!-- Paso 1: Info de Contacto -->
+      <BasicCustomerForm
+        :step="customerStep"
+        :is-active="activeStep === customerStep"
+        @next="activeStep = shippingStep !== -1 ? shippingStep : billingStep"
+        @edit="activeStep = customerStep"
+      />
+
+      <!-- Paso 2: Envío (Condicional) -->
+      <BasicShippingForm
+        v-if="requiresShipping"
+        :step="shippingStep"
+        :is-active="activeStep === shippingStep"
+        @next="activeStep = billingStep"
+        @edit="activeStep = shippingStep"
+      />
+
+      <!-- Paso 3: Facturación -->
+      <BasicBillingForm
+        :step="billingStep"
+        :is-active="activeStep === billingStep"
+        @next="activeStep = paymentStep"
+        @edit="activeStep = billingStep"
+      />
+
+      <!-- Paso 4: Pago -->
+      <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm transition-opacity duration-300" :class="{ 'opacity-50 pointer-events-none': activeStep !== paymentStep }">
+        <div class="flex items-center space-x-3 mb-2">
+          <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors duration-300" :class="activeStep === paymentStep ? 'bg-primary text-white' : 'bg-slate-100 text-slate-600'">
+            {{ paymentStep }}
+          </div>
+          <h3 class="text-xl font-bold text-gray-800">
+            Método de Pago
+          </h3>
+        </div>
+        <div v-if="activeStep === paymentStep" class="pl-11">
+          <PaymentForms />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/storefront/checkout/pages/Pay/Pay.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { TabsItem } from '@nuxt/ui';
 import { computed, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
 import { useAccountStore, useCheckoutStore } from '../../../stores.ts';
 import { useNavigation } from '../../composables.ts';
 import StepInfo from '../StepInfo.vue';
+import PayForms from './PayForms.vue';
 
 const account = useAccountStore();
 const checkout = useCheckoutStore();
@@ -31,45 +30,6 @@ watch(select, (v) => {
   const _a = account.billings.find((a: any) => a.id === v);
   checkout.setBilling(_a);
 });
-const tabs = ref<TabsItem[]>([
-  {
-    label: 'Paypal',
-    value: 'paypal',
-  },
-  {
-    label: 'Placetopay',
-    value: 'placetopay',
-  },
-  {
-    label: 'Pagomedios',
-    value: 'placetopay',
-
-  },
-  {
-    label: 'Datafast',
-    value: 'placetopay',
-
-  },
-  {
-    label: 'Cybersource',
-    value: 'placetopay',
-
-  },
-]);
-const route = useRoute();
-const router = useRouter();
-
-const tabPay = 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,
-    });
-  },
-});
 </script>
 
 <template>
@@ -90,15 +50,8 @@ const tabPay = computed({
         :items="items"
       />
     </div>
-    <div class="text-2xl font-bold leading-0 pt-3">
-      Formas de pago
-    </div>
-    <div>
-      <UTabs v-model="tabPay" variant="pill" :content="false" :items="tabs" class="w-full" />
-    </div>
-    <div>
-      <router-view />
-    </div>
+    <PayForms />
+
     <div class="flex items-center pt-4">
       <!--  -->
       <div class="flex-auto" />

package/storefront/checkout/pages/Pay/PayForms.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { TabsItem } from '@nuxt/ui';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+const tabs = ref<TabsItem[]>([
+  {
+    label: 'Paypal',
+    value: 'paypal',
+  },
+  {
+    label: 'Placetopay',
+    value: 'placetopay',
+  },
+  {
+    label: 'Pagomedios',
+    value: 'placetopay',
+
+  },
+  {
+    label: 'Datafast',
+    value: 'placetopay',
+
+  },
+  {
+    label: 'Cybersource',
+    value: 'placetopay',
+
+  },
+]);
+const tabPay = 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,
+    });
+  },
+});
+</script>
+
+<template>
+  <div class="text-2xl font-bold  pt-3">
+    Formas de pago
+  </div>
+  <div>
+    <UTabs v-model="tabPay" variant="pill" :content="false" :items="tabs" class="w-full" />
+  </div>
+  <div>
+    <router-view />
+  </div>
+</template>

package/storefront/checkout/pages/Payment/Payment.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onBeforeMount } from 'vue';
-import { useState } from './composable';
+import { useState } from './composable.ts';
 import PaymentStatus from './PaymentStatus.vue';
 
 const { getState, status, response, uid, provider } = useState();

package/storefront/checkout/router.ts

@@ -1,59 +1,69 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
 console.log('createCheckout');
+const payMethods = [
+  {
+    path: 'paypal',
+    component: () => import('./pages/Pay/Providers/Paypal/Paypal.vue'),
+    name: 'paypal',
+  },
+  {
+    path: 'placetopay',
+    component: () => import('./pages/Pay/Providers/Placetopay/Placetopay.vue'),
+    name: 'placetopay',
+  },
+  {
+    path: 'pagomedios',
+    component: () => import('./pages/Pay/Providers/Pagomedios/Pagomedios.vue'),
+    name: 'pagomedios',
+  },
+  {
+    path: 'datafast',
+    component: () => import('./pages/Pay/Providers/Datafast/Datafast.vue'),
+    name: 'datafast',
+  },
+  {
+    path: 'cybersource',
+    component: () => import('./pages/Pay/Providers/Cybersource/Cybersource.vue'),
+    name: 'cybersource',
+  },
+];
 export const router = createRouter({
   history: createWebHistory('/checkout'),
   routes: [
     {
-      path: '/',
-      redirect: '/address',
-    },
-    {
-      path: '/address',
-      name: 'address',
-      component: () => import('./pages/Address/Address.vue'),
-    },
-    {
-      path: '/shipping',
-      name: 'shipping',
-      component: () => import('./pages/Shipping/Shipping.vue'),
-    },
-    {
-      path: '/payment',
-      name: 'payment',
-      component: () => import('./pages/Payment/Payment.vue'),
-    },
-    {
-      path: '/pay',
-      component: () => import('./pages/Pay/Pay.vue'),
-      name: 'pay',
+      path: '/auth',
+      // redirect: '/address',
+      component: () => import('./pages/Auth.vue'),
       children: [
         {
-          path: 'paypal',
-          component: () => import('./pages/Pay/Providers/Paypal/Paypal.vue'),
-          name: 'paypal',
-        },
-        {
-          path: 'placetopay',
-          component: () => import('./pages/Pay/Providers/Placetopay/Placetopay.vue'),
-          name: 'placetopay',
+          path: 'address',
+          name: 'address',
+          component: () => import('./pages/Address/Address.vue'),
         },
         {
-          path: 'pagomedios',
-          component: () => import('./pages/Pay/Providers/Pagomedios/Pagomedios.vue'),
-          name: 'pagomedios',
+          path: 'shipping',
+          name: 'shipping',
+          component: () => import('./pages/Shipping/Shipping.vue'),
         },
         {
-          path: 'datafast',
-          component: () => import('./pages/Pay/Providers/Datafast/Datafast.vue'),
-          name: 'datafast',
+          path: 'payment',
+          name: 'payment',
+          component: () => import('./pages/Payment/Payment.vue'),
         },
         {
-          path: 'cybersource',
-          component: () => import('./pages/Pay/Providers/Cybersource/Cybersource.vue'),
-          name: 'cybersource',
+          path: 'pay',
+          component: () => import('./pages/Pay/Pay.vue'),
+          name: 'pay',
+          children: payMethods,
         },
       ],
     },
+    {
+      path: '/basic',
+      component: () => import('./pages/Basic.vue'),
+      children: payMethods,
+    },
+
   ],
 });