@monkeyplus/payscope 1.0.0

package/storefront/checkout/AppCart.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { useEventBus } from '@vueuse/core';
+import { ofetch } from 'ofetch';
+import { computed, inject, onBeforeMount, ref, watch } from 'vue';
+import { useCheckoutStore } from '../stores.ts';
+import AppCartDiscount from './AppCartDiscount.vue';
+import AppCartTotals from './AppCartTotals.vue';
+
+defineProps({
+  isPayLink: Boolean,
+});
+
+const checkout = useCheckoutStore();
+</script>
+
+<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
+            "
+      >
+        <div class="relative">
+          <div
+            class=" h-[4.5rem] w-[4.5rem] min-w-[4.5rem] bg-gray-50 flex justify-center items-center"
+          >
+            <img
+              :src="item?.image?.src"
+              alt="h-full w-full object-containt"
+            >
+          </div>
+          <div
+            class="
+                  h-6
+                  w-6
+                  absolute
+                  -top-2
+                  -right-2
+                  rounded-full
+                  bg-gray-500
+                  flex items-center justify-center
+                  text-sm text-center text-white
+                "
+          >
+            {{ item.quantity }}
+          </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>
+      </div>
+      <div>$ {{ item.total }}</div>
+    </div>
+    <div class="h-[2px] bg-gray-200 my-8" />
+    <AppCartDiscount />
+    <AppCartTotals />
+  </div>
+</template>

package/storefront/checkout/AppCartDiscount.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useCheckoutStore } from '../stores';
+
+const loading = ref(false);
+const discountCode = ref('');
+const messageDiscount = ref('');
+const checkout = useCheckoutStore();
+
+function sendDiscount() {
+  checkout.applyDiscount(discountCode.value);
+}
+function removeDiscount() {
+//
+}
+</script>
+
+<template>
+  <div class="relative">
+    <div v-if="loading" class="absolute w-full h-full top-0 left-0 flex items-center justify-center z-20 bg-eprimary bg-opacity-80 all:text-white">
+      <UButton :loading="loading" text-loading="Aplicando" />
+    </div>
+    <div v-if="true" class="flex space-x-3 mb-2">
+      <div class="flex-auto">
+        <input
+          v-model="discountCode"
+          class="
+                w-full
+                px-4
+                py-2
+                border border-gray-200
+                focus:ring-yellow-300 focus:border-yellow-300
+                rounded-md
+              "
+          name="name"
+          placeholder="Codigo de descuento"
+        >
+      </div>
+      <div>
+        <UButton
+          size="xl"
+          :disabled="discountCode.length < 3"
+          @click="sendDiscount"
+        >
+          Usar
+        </UButton>
+      </div>
+    </div>
+    <div v-if="messageDiscount" class="bg-red-400 text-center shadow-md text-gray-950 rounded px-3 py-2 flex items-center">
+      {{ messageDiscount }}
+    </div>
+    <template v-for="(discount, ix) in checkout?.invoice?.discounts">
+      <div v-if="discount" :key="ix" class="border text-econtrast rounded px-3 py-2 flex items-center">
+        <div class="left-3">
+          <div class="text-sm">
+            Descuento aplicado:
+          </div>
+          <span class="text-xl font-bold">
+            {{ discount?.title || discount?.code || discount?.value }}
+          </span>
+        </div>
+
+        <div class="flex-1" />
+        <button
+          v-if="discount?.code || discount?.value"
+          class="underline"
+          @click="removeDiscount"
+        >
+          Quitar
+        </button>
+      </div>
+    </template>
+  </div>
+</template>

package/storefront/checkout/AppCartTotals.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useCheckoutStore } from '../stores';
+
+const checkout = useCheckoutStore();
+const taxIncluded = ref(false);
+</script>
+
+<template>
+  <div>
+    <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>
+            Total
+            <span class="text-xs">(Sin descuentos)</span>
+          </div>
+          <div class="flex-auto" />
+          <div>
+            {{ checkout.totals.subtotal }}
+          </div>
+        </div>
+        <div v-if="checkout.invoice?.discount || checkout.invoice?.discounts?.length" class="flex items-center">
+          <div>Descuento</div>
+          <div class="flex-auto" />
+          <div>- {{ checkout.totals.discount }}</div>
+        </div>
+      </div>
+      <div class="flex">
+        <div>Subtotal</div>
+        <div class="flex-auto" />
+        <div>
+          {{ checkout.totals.base }}
+        </div>
+      </div>
+      <div class="flex">
+        <div>
+          Impuestos
+        </div>
+        <div class="flex-auto" />
+        <div v-if="!taxIncluded">
+          {{ checkout.totals.totalTax }}
+        </div>
+        <div v-else class="italic text-sm">
+          Ya incluidos
+        </div>
+      </div>
+      <div class="flex">
+        <div>Envio</div>
+        <div class="flex-auto" />
+        <div>
+          {{ checkout.totals.shipping }}
+        </div>
+      </div>
+    </div>
+    <div class="border-b-1 border-black opacity-10 my-4 border" />
+    <div class="flex">
+      <div>
+        <div class="text-lg text-gray-700">
+          Total
+        </div>
+      </div>
+      <div class="flex-auto" />
+      <div class="text-2xl text-gray-800">
+        <span class="text-sm">
+          USD
+        </span>
+        {{ checkout.totals.total }} $
+      </div>
+    </div>
+  </div>
+</template>

package/storefront/checkout/AppLoading.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// Pantalla de carga con enfoque en seguridad
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col items-center justify-center min-h-[70vh] text-center px-4">
+    <div class="relative flex items-center justify-center mb-8">
+      <!-- Anillos pulsantes para efecto de escaneo/seguridad -->
+      <div class="absolute inset-0 rounded-full bg-emerald-500/20 animate-ping" style="animation-duration: 2.5s;"></div>
+      <div class="absolute inset-[-1.5rem] rounded-full bg-emerald-500/10 animate-pulse" style="animation-duration: 3s;"></div>
+      
+      <!-- Icono central de escudo/candado -->
+      <div class="relative z-10 w-24 h-24 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-full flex items-center justify-center shadow-lg shadow-emerald-500/30">
+        <i-mdi-shield-lock-outline class="text-white text-5xl" />
+      </div>
+    </div>
+    
+    <h2 class="text-2xl font-semibold text-gray-800 mb-2">
+      Estableciendo conexión segura
+    </h2>
+    
+    <p class="text-gray-500 max-w-md mx-auto mb-8">
+      Estamos preparando tu entorno de pago. Toda tu información viajará encriptada de extremo a extremo.
+    </p>
+
+    <!-- Barra de progreso indeterminada -->
+    <div class="w-64 h-1.5 bg-gray-200 rounded-full overflow-hidden relative">
+      <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-emerald-400 to-emerald-600 rounded-full animate-progress"></div>
+    </div>
+    
+    <!-- Badges de confianza -->
+    <div class="mt-8 flex items-center space-x-4 text-sm font-medium text-gray-500">
+      <div class="flex items-center space-x-1 bg-gray-50 px-3 py-1.5 rounded-full border border-gray-100">
+        <i-mdi-lock-outline class="text-emerald-500" />
+        <span>SSL 256-bit</span>
+      </div>
+      <div class="flex items-center space-x-1 bg-gray-50 px-3 py-1.5 rounded-full border border-gray-100">
+        <i-mdi-check-decagram class="text-emerald-500" />
+        <span>Pago Seguro</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-progress {
+  width: 40%;
+  animation: progress-bar 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes progress-bar {
+  0% { transform: translateX(-50%); }
+  100% { transform: translateX(200%); }
+}
+</style>

package/storefront/checkout/composables.ts

@@ -0,0 +1,28 @@
+import type { InjectionKey } from 'vue';
+// type Pages = 'info' | 'address' | 'shipping' | 'pay';
+import { inject } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+export const PAGES = Symbol('pages') as InjectionKey<string[]>;
+
+export function useNavigation() {
+  const pages = inject(PAGES, ['address', 'shipping', 'pay']);
+
+  const route = useRoute();
+  const router = useRouter();
+  const getCurrentPage = () => {
+    return route.name as string;
+  };
+
+  const toNext = () => {
+    const currentPage = getCurrentPage();
+    const index = pages.indexOf(currentPage);
+    if (index < pages.length - 1) {
+      router.push({ name: pages[index + 1] });
+    }
+  };
+  return {
+    pages,
+    toNext,
+  };
+}

package/storefront/checkout/main.ts

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

package/storefront/checkout/pages/Address/Address.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { RadioGroupItem } from '@nuxt/ui';
+import { computed, inject, ref, watch } from 'vue';
+import { useAccountStore, useCheckoutStore } from '../../../stores.ts';
+import { useNavigation } from '../../composables.ts';
+import InfoUser from '../Info/InfoUser.vue';
+
+const title = 'Dirección de envio';
+const subtitle = 'Selecciona una dirección de envio';
+
+const account = useAccountStore();
+const checkout = useCheckoutStore();
+const requireIdentification = inject('requireIdentification', false);
+const requireUserInfo = inject('requireUserInfo', false);
+const validInfoUser = inject('validInfoUser', false);
+// const router = us
+const { toNext } = useNavigation();
+function onNext() {
+  toNext();
+}
+
+const items = computed(() => {
+  return account.addresses.map((address: any) => {
+    return {
+      label: address.name,
+      value: address.id,
+      description: address.formatted,
+    };
+  });
+});
+const address = ref(checkout.address.id || 0);
+
+watch(address, (v) => {
+  const _a = account.addresses.find((a: any) => a.id === v);
+  checkout.setAddress(_a);
+});
+</script>
+
+<template>
+  <div class="space-y-5 mx-auto min-w-xl mt-6">
+    <div>
+      <div class="text-2xl font-bold">
+        Información de contacto
+      </div>
+      <div class="pt-3">
+        <InfoUser />
+        <div v-if="requireUserInfo && !validInfoUser" class="pt-2">
+          <div class="text-sm text-red-500">
+            * Por favor completa tu información personal
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="text-2xl font-bold">
+        {{ title }}
+      </div>
+      <div>
+        {{ subtitle }}
+      </div>
+      <div class="w-full pt-4">
+        <div class="w-full max-w-lg px-1">
+          <URadioGroup
+            v-model="address"
+            color="primary"
+            variant="table"
+            default-value="pro"
+            :items="items"
+          />
+
+          <!-- TODO: include aditional Fields -->
+          <div class="flex items-center pt-4">
+            <div class="flex justify-end items-center space-x-2" @click="onAdd">
+              <button class=" p-3 rounded-full shadow hover:shadow-lg w-12 h-12 flex items-center justify-center cursor-pointer bg-secondary text-white">
+                <i-mdi-plus class="text-xl" />
+              </button>
+              <div class="font-bold text-gray-600 text-sm">
+                Agregar dirección
+              </div>
+            </div>
+            <div class="flex-auto" />
+
+            <UButton
+              size="lg"
+              :disabled="!checkout.address?.id"
+              @click="onNext"
+            >
+              Continuar
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/storefront/checkout/pages/Info/Info.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { RadioGroupItem } from '@nuxt/ui';
+import { computed, inject, ref } from 'vue';
+import { useAccountStore } from '../../../stores.ts';
+import InfoUser from './InfoUser.vue';
+
+const title = 'Dirección de envio';
+const subtitle = 'Selecciona una dirección de envio';
+
+const account = useAccountStore();
+const requireIdentification = inject('requireIdentification', false);
+const requireUserInfo = inject('requireUserInfo', false);
+
+function toNext() {
+
+}
+
+const items = computed(() => {
+  return account.addresses.map((address: any) => {
+    return {
+      label: address.name,
+      value: address.id,
+      description: address.formatted,
+    };
+  });
+});
+</script>
+
+<template>
+  <div class="space-y-5">
+    <div>
+      <div class="text-2xl font-bold">
+        Información de contacto
+      </div>
+      <div class="pt-3">
+        <InfoUser />
+        <div v-if="requireUserInfo && !validInfoUser" class="pt-2">
+          <div class="text-sm text-red-500">
+            * Por favor completa tu información personal
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="text-2xl font-bold">
+        {{ title }}
+      </div>
+      <div>
+        {{ subtitle }}
+      </div>
+      <div class="w-full pt-4">
+        <div class="w-full max-w-lg px-1">
+          <URadioGroup color="primary" variant="table" default-value="pro" :items="items" />
+          <!-- <RadioOptions :items="checkout.state.addresses" option-description="formatted" :initial-value="checkout.customer.shippingAddress?.id" @edit="onEdit" @change="onChange(0, $event)" /> -->
+          <!-- <div v-if="requireIdentification" class="pt-3">
+            <div class="text-sm">
+              Cedula de quien recibira el pedido
+            </div>
+            <input
+              v-model="celuda"
+              class="
+                w-full
+                px-4
+                py-2
+                border border-gray-200
+                focus:ring-yellow-300 focus:border-yellow-300
+                rounded-md
+              "
+              name="name"
+            >
+          </div> -->
+          <div class="flex items-center pt-4">
+            <div class="flex justify-end items-center space-x-2" @click="onAdd">
+              <button class=" p-3 rounded-full shadow hover:shadow-lg w-12 h-12 flex items-center justify-center cursor-pointer bg-secondary text-white">
+                <i-mdi-plus class="text-xl" />
+              </button>
+              <div class="font-bold text-gray-600 text-sm">
+                Agregar dirección
+              </div>
+            </div>
+            <div class="flex-auto" />
+
+            <UButton
+              :disabled="!isValid || !validInfoUser" :loading="loadingNext"
+              @click="toNext"
+            >
+              Continuar
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/storefront/checkout/pages/Info/InfoUser.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useSession } from '../../../auth';
+
+const { user } = useSession();
+function onEdit() {
+
+}
+</script>
+
+<template>
+  <div class="bg-gray-50 p-4 rounded-lg inline-flex space-x-4 items-center">
+    <!-- <el-avatar :src="user?.picture" /> -->
+    <div class="bg-gray-200 h-14 w-14 border rounded-full flex items-center justify-center">
+      <span class="capitalize">
+        {{ user?.name?.at(0) }}
+      </span>
+    </div>
+    <div class="leading-4 pr-5 ">
+      <div class="text-base ">
+        {{ user?.name }}
+      </div>
+      <div class="text-[0.8rem] pb-1">
+        {{ user?.email }} |
+        <span v-if="user?.phone">
+          {{ user?.phone }}
+        </span>
+      </div>
+      <div class="text-[0.8rem]">
+        <!-- {{ user?.picture }} -->
+      </div>
+    </div>
+    <div>
+      <button class="underline" @click="onEdit">
+        Editar
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,115 @@
+<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';
+
+const account = useAccountStore();
+const checkout = useCheckoutStore();
+checkout.getShippings();
+
+const { toNext } = useNavigation();
+
+const items = computed(() => {
+  return account.billings.map((item: any) => {
+    return {
+      label: item.formatted,
+      value: item.id,
+      // description: item.price,
+    };
+  });
+});
+function onNext() {
+  toNext();
+}
+
+const select = ref(checkout.billing.id || 0);
+
+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>
+  <div class="space-y-5 mx-auto lg:min-w-xl mt-6">
+    <div class="pt-3">
+      <StepInfo />
+    </div>
+    <div class="text-2xl font-bold leading-0 pt-3">
+      Datos de facturación
+    </div>
+
+    <div>
+      <URadioGroup
+        v-model="select"
+        color="primary"
+        variant="table"
+        default-value="pro"
+        :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>
+    <div class="flex items-center pt-4">
+      <!--  -->
+      <div class="flex-auto" />
+
+      <UButton
+        size="lg"
+        :disabled="!checkout.shipping?.id"
+        @click="onNext"
+      >
+        Continuar
+      </UButton>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    Pago
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    Pago
+  </div>
+</template>