@monkeyplus/payscope 1.0.0

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

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

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

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

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { inject, ref } from 'vue';
+import { useSession } from '../../../../../auth';
+import { useCheckoutStore } from '../../../../../stores';
+import { usePayment } from '../composable';
+import { usePagomedios } from './composable';
+
+const checkout = useCheckoutStore();
+
+const { transactionId, provider, paymentPending } = usePayment();
+const { user } = useSession();
+
+const { onPrepare } = usePagomedios({
+  transactionId,
+  provider,
+});
+const srcdoc = ref('');
+const loading = ref(false);
+// const route = useRoute()
+const getExtras = inject('payExtras', () => undefined);
+async function sendPay(): Promise<void> {
+  try {
+    if (!checkout?.billing?.id) {
+      // eslint-disable-next-line no-alert
+      alert('Por favor ingresa los datos de facturación');
+      return;
+    }
+    if (!checkout?.address?.id) {
+      // eslint-disable-next-line no-alert
+      alert('Por favor ingresa los datos de envio');
+      return;
+    }
+    document.getElementById('buy-page')?.classList.add('opacity-40');
+    loading.value = true;
+    const { iframe } = await onPrepare({
+      user: user.value,
+      customer: user.value,
+      extras: getExtras(),
+    });
+    location.href = iframe as any;
+  }
+  catch (error) {
+    // eslint-disable-next-line no-alert
+    alert('Error al procesar el pago, por favor intente nuevamente. Revisa que esten ingresados los datos de envio y facturación correctamente.');
+  }
+  finally {
+    loading.value = false;
+  }
+
+  // srcdoc.value = iframe;
+  // loading.value = false;
+}
+</script>
+
+<template>
+  <div class="pt-3">
+    <div class="px-5 py-10 rounded-lg bg-gray-50">
+      <div class="text-center">
+        <div class="max-w-360px mx-auto py-6">
+          <div class="text-lg">
+            Este método de pago cuenta con el respaldo de <a href="https://pagomedios.com/" target="_blank" class="underline">
+              Pagomedios
+            </a>
+          </div>
+          <div class="flex space-x-3 justify-center py-6 text-gray-700 text-4xl">
+            <i-fa-brands-cc-mastercard />
+            <i-cib-visa />
+            <i-fa-brands-cc-amex />
+            <i-fa-brands-cc-diners-club />
+            <i-fa-brands-cc-discover />
+          </div>
+        </div>
+        <div v-if="transactionId && srcdoc" :key="srcdoc" class="py-3 h-470px">
+          <iframe class="w-full h-full" :src="srcdoc" frameborder="0" />
+        </div>
+        <DialogQuestions>
+          <template #active="{ onActive }">
+            <EButton @click="onActive">
+              Preguntas frecuentes
+            </EButton>
+          </template>
+        </DialogQuestions>
+
+        <div />
+      </div>
+    </div>
+    <div class="pt-3 text-center">
+      <UButton :loading="paymentPending || loading" type="primary" class="h-12 bg-eprimary text-econtrast px-5 rounded-lg shadow" @click="sendPay">
+        Continuar y Pagar
+      </UButton>
+    </div>
+  </div>
+</template>

package/storefront/checkout/pages/Pay/Providers/Pagomedios/composable.ts

@@ -0,0 +1,23 @@
+import { ofetch } from 'ofetch';
+import { useLinkPayment } from '../composable';
+
+export function usePagomedios({ endpointPrepare, provider, transactionId }: DatafastOptions) {
+  //
+
+  // console.log(identifyState);
+  const { basePath } = useLinkPayment();
+
+  const onPrepare = async (body: any): Promise<any> => {
+    const data = await ofetch(endpointPrepare || `/${basePath}/prepare/pagomedios`, {
+      method: 'POST',
+      body: {
+        ...body,
+      },
+
+    });
+    transactionId.value = data.uid;
+    provider.value = 'pagomedios';
+    return data;
+  };
+  return { onPrepare };
+}

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

@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import { computed, inject, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useSession } from '../../../../../auth';
+import { useCheckoutStore } from '../../../../../stores';
+import { usePayment } from '../composable';
+import { usePaypal } from './composable';
+
+;
+
+const { checkout } = useCheckoutStore();
+const { user } = useSession();
+const route = useRoute();
+const omitBilling = inject('omitBilling', false);
+
+// const { payments } = useConfigs();
+const payments = {
+  paypal: {
+    iframe: true,
+    currency: 'BOB',
+    intent: 'CAPTURE',
+    brandName: 'E-Monkey',
+    locale: 'es_BO',
+  },
+};
+const paypalOptions = computed(() => payments?.paypay || {});
+
+const { transactionId, provider, paymentPending } = usePayment();
+const { onPrepare, sendPay } = usePaypal({
+  transactionId,
+  provider,
+});
+
+const loading = ref(false);
+const capturing = ref(false);
+const iframeUrl = ref('');
+
+const usingIframe = computed(() => !!paypalOptions.value?.iframe);
+
+function getCurrentCallbackUrl(): string {
+  return `${location.origin}${location.pathname}`;
+}
+
+function buildStatusUrl(uid: string, id?: string): string {
+  const params = new URLSearchParams();
+  params.set('provider', 'paypal');
+  params.set('uid', uid);
+  if (id)
+    params.set('id', id);
+
+  return `${location.pathname}?${params.toString()}`;
+}
+
+async function captureFromReturn(token: string, payerId?: string): Promise<void> {
+  if (!transactionId.value || capturing.value)
+    return;
+
+  capturing.value = true;
+  try {
+    const response = await sendPay(transactionId.value, {
+      orderID: token,
+      payerID: payerId,
+    });
+
+    location.replace(buildStatusUrl(transactionId.value, response?.id || token));
+  }
+  catch (error) {
+    console.error(error);
+    // eslint-disable-next-line no-alert
+    alert('No fue posible confirmar el pago con PayPal. Intenta nuevamente.');
+  }
+  finally {
+    capturing.value = false;
+  }
+}
+
+async function startPay(): Promise<void> {
+  if (!checkout?.billing?.id && !omitBilling)
+    return alert('Debes seleccionar unos datos de facturacion.');
+
+  document.getElementById('buy-page')?.classList.add('opacity-40');
+  loading.value = true;
+  try {
+    const callbackUrl = getCurrentCallbackUrl();
+    const data = await onPrepare({
+      user: user.value,
+      customer: user.value,
+      returnUrl: callbackUrl,
+      cancelUrl: callbackUrl,
+      currency: paypalOptions.value?.currency,
+      intent: paypalOptions.value?.intent,
+      brandName: paypalOptions.value?.brandName,
+      locale: paypalOptions.value?.locale,
+    });
+
+    const approveUrl = data?.iframe?.approveUrl || data?.approveUrl;
+    if (!approveUrl) {
+      // eslint-disable-next-line no-alert
+      alert('PayPal no devolvio una URL de aprobacion.');
+      return;
+    }
+
+    if (usingIframe.value) {
+      iframeUrl.value = approveUrl;
+      return;
+    }
+
+    location.href = approveUrl;
+  }
+  catch (error) {
+    // eslint-disable-next-line no-alert
+    alert('No fue posible iniciar PayPal. Intenta nuevamente.');
+  }
+  finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  const token = `${route.query.token || ''}`;
+  const payerId = `${route.query.PayerID || route.query.payerId || ''}`;
+
+  if (token && transactionId.value)
+    captureFromReturn(token, payerId || undefined);
+});
+</script>
+
+<template>
+  <div class="pt-3">
+    <div class="px-5 py-10 rounded-lg bg-gray-50">
+      <div class="text-center">
+        <div class="max-w-420px mx-auto py-6">
+          <div class="text-lg">
+            Paga de forma segura con PayPal.
+          </div>
+          <div class="flex space-x-3 justify-center py-6 text-[#003087] text-4xl">
+            <i-fa-brands-paypal />
+            <i-cib-cc-paypal />
+          </div>
+          <p class="text-sm text-gray-600">
+            Al continuar seras redirigido para aprobar el pago en PayPal y luego volver al checkout.
+          </p>
+        </div>
+
+        <div v-if="iframeUrl" class="py-3 h-[640px] border rounded-lg overflow-hidden bg-white">
+          <iframe class="w-full h-full" :src="iframeUrl" frameborder="0" />
+        </div>
+
+        <!--  -->
+      </div>
+    </div>
+
+    <div class="pt-3 text-center space-y-2">
+      <UButton
+        :disabled="paymentPending || loading || capturing"
+        :loading="loading || capturing"
+        size="xl"
+
+        @click="startPay"
+      >
+        Continuar con PayPal
+      </UButton>
+      <a v-if="iframeUrl" :href="iframeUrl" class="text-sm underline text-eprimary" target="_blank" rel="noopener noreferrer">
+        Abrir PayPal en una nueva ventana
+      </a>
+    </div>
+  </div>
+</template>

package/storefront/checkout/pages/Pay/Providers/Paypal/composable.ts

@@ -0,0 +1,33 @@
+import { ofetch } from 'ofetch';
+import { useLinkPayment } from '../composable';
+
+export function usePaypal({ endpointPrepare, provider, transactionId }: DatafastOptions) {
+//   const extra = inject('extraPrepare', {}) as any;
+//   const identifyState = inject('authorizer-state', {}) as AuthorizerState;
+  const { basePath } = useLinkPayment();
+
+  const onPrepare = async (body: any): Promise<any> => {
+    const data = await ofetch(endpointPrepare || `/${basePath}/prepare/paypal`, {
+      method: 'POST',
+      body: {
+        ...body,
+      },
+    });
+    transactionId.value = data.uid;
+    provider.value = 'paypal';
+    return data;
+  };
+
+  const sendPay = async (uid: string, body: any = {}) => {
+    const data = await ofetch(`/${basePath}/pay/paypal?uid=${uid}&redirect=0`, {
+      method: 'POST',
+      body: {
+        ...body,
+      },
+
+    });
+    return data;
+  };
+
+  return { onPrepare, sendPay };
+}

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

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

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

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

package/storefront/checkout/pages/Pay/Providers/composable.ts

@@ -0,0 +1,30 @@
+import type { Ref } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
+import { ofetch } from 'ofetch';
+import { inject } from 'vue';
+
+export function useLinkPayment() {
+  // const isLinkPayment = inject('isLinkPayment', false);
+  const storePath = inject('storePath', '');
+  const basePath = `payment${storePath}`;
+  return { basePath };
+}
+export function usePayment() {
+  const transactionId = useLocalStorage('eTransaction', '');
+  const provider = useLocalStorage('ePayment', '');
+  const { basePath } = useLinkPayment();
+
+  const getState = async (namespace?: string) => {
+    const data = await ofetch(`/${basePath}/verify/${provider.value}`, {
+      method: 'POST',
+      body: {
+        uid: transactionId.value,
+        namespace,
+      },
+      params: { override: true },
+    });
+    return data;
+  };
+  const paymentPending = inject('paymentPending', undefined) as unknown as Ref<boolean> | undefined;
+  return { getState, transactionId, provider, paymentPending };
+}

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

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { onBeforeMount } from 'vue';
+import { useState } from './composable';
+import PaymentStatus from './PaymentStatus.vue';
+
+const { getState, status, response, uid, provider } = useState();
+
+onBeforeMount(() => {
+  getState();
+});
+</script>
+
+<template>
+  <div>
+    <PaymentStatus
+      :status="status" :response="(response as any)" :uid="uid!"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import AppStatus from './PaymentStatusDetail.vue';
+
+defineProps({
+  status: {
+    type: String,
+    default: 'loading',
+  },
+  uid: {
+    type: String,
+  },
+  response: Object,
+  loading: Boolean,
+});
+function onBack(): void {
+  // history.replaceState()
+  sessionStorage.removeItem('ePayment');
+  sessionStorage.removeItem('eQuery');
+  localStorage.removeItem('ePayment');
+  localStorage.removeItem('eQuery');
+  history.go(-1);
+}
+function onEnd() {
+  //
+  sessionStorage.removeItem('eCustomer');
+  sessionStorage.removeItem('eQuery');
+  sessionStorage.removeItem('ePayment');
+  localStorage.removeItem('eCustomer');
+  localStorage.removeItem('eQuery');
+  localStorage.removeItem('ePayment');
+  // location.replace('/profile/');
+  const el = document.createElement('a');
+
+  el.href = '/storefront/checkout/end';
+  el.click();
+}
+</script>
+
+<template>
+  <div class="w-full min-h-[60vh] flex items-center justify-center py-6 px-4">
+    <div class="w-full max-w-xl text-center">
+      
+      <!-- 1. ESTADO: LOADING / VERIFICANDO PAGO -->
+      <div v-if="status === 'loading'" class="flex flex-col items-center py-8">
+        <div class="relative flex items-center justify-center mb-8">
+          <!-- Anillos pulsantes en color Indigo -->
+          <div class="absolute inset-0 rounded-full bg-indigo-500/20 animate-ping" style="animation-duration: 2.5s;"></div>
+          <div class="absolute inset-[-1.5rem] rounded-full bg-indigo-500/10 animate-pulse" style="animation-duration: 3s;"></div>
+          
+          <!-- Icono central -->
+          <div class="relative z-10 w-24 h-24 bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-full flex items-center justify-center shadow-lg shadow-indigo-500/30">
+            <i-mdi-clock-outline class="text-white text-5xl" />
+          </div>
+        </div>
+        
+        <h2 class="text-2xl font-bold text-gray-800 tracking-tight mb-2">
+          Verificando tu pago
+        </h2>
+        <p class="text-sm text-gray-500 max-w-sm mx-auto mb-8 leading-relaxed">
+          Estamos confirmando la transacción con tu entidad bancaria. Por favor, no cierres ni recargues esta página.
+        </p>
+
+        <!-- Barra de progreso -->
+        <div class="w-64 h-1.5 bg-gray-100 rounded-full overflow-hidden relative border border-gray-200/30">
+          <div class="absolute top-0 left-0 h-full bg-gradient-to-r from-indigo-400 to-indigo-600 rounded-full animate-progress"></div>
+        </div>
+      </div>
+
+      <!-- 2. ESTADO: PENDING / PAGO EN PROCESO -->
+      <div v-else-if="status === 'pending'" class="flex flex-col items-center py-8">
+        <div class="relative flex items-center justify-center mb-8">
+          <!-- Anillos pulsantes en color Ámbar -->
+          <div class="absolute inset-0 rounded-full bg-amber-500/20 animate-ping" style="animation-duration: 2.5s;"></div>
+          <div class="absolute inset-[-1.5rem] rounded-full bg-amber-500/10 animate-pulse" style="animation-duration: 3s;"></div>
+          
+          <!-- Icono central -->
+          <div class="relative z-10 w-24 h-24 bg-gradient-to-br from-amber-400 to-amber-600 rounded-full flex items-center justify-center shadow-lg shadow-amber-500/30 animate-pulse">
+            <i-mdi-clock-outline class="text-white text-5xl animate-spin-slow" />
+          </div>
+        </div>
+        
+        <h2 class="text-2xl font-bold text-gray-800 tracking-tight mb-2">
+          Pago en proceso
+        </h2>
+        <p class="text-sm text-gray-500 max-w-sm mx-auto mb-6 leading-relaxed">
+          Tu pago está siendo procesado por el proveedor de servicios. Esto puede tomar unos segundos.
+        </p>
+
+        <AppStatus :uid="uid!" :response="response" />
+      </div>
+
+      <!-- 3. ESTADO: SUCCESS / COMPRA CONFIRMADA -->
+      <div v-else-if="status === 'success'" class="flex flex-col items-center py-8">
+        <div class="relative flex items-center justify-center mb-8">
+          <!-- Anillos pulsantes en color Esmeralda -->
+          <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 -->
+          <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-check-circle class="text-white text-5xl" />
+          </div>
+        </div>
+
+        <span class="text-xs font-bold px-4 py-1.5 bg-emerald-50 text-emerald-600 border border-emerald-100 rounded-full uppercase tracking-wider mb-3">
+          Compra Confirmada
+        </span>
+        
+        <h2 class="text-3xl font-extrabold text-gray-900 tracking-tight mb-2">
+          ¡Gracias por tu compra!
+        </h2>
+        <p class="text-sm text-gray-500 max-w-sm mx-auto mb-6 leading-relaxed">
+          Tu transacción se completó con éxito. Hemos enviado un correo con el comprobante de pago.
+        </p>
+
+        <AppStatus :uid="uid!" :response="response" />
+
+        <div class="pt-8">
+          <button
+            class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white font-bold px-8 py-3.5 rounded-xl uppercase tracking-wider text-xs shadow-lg shadow-emerald-500/20 hover:shadow-xl hover:shadow-emerald-500/30 transition-all duration-300 transform hover:-translate-y-0.5 active:translate-y-0"
+            @click="onEnd"
+          >
+            Finalizar
+          </button>
+        </div>
+      </div>
+
+      <!-- 4. ESTADO: FAILURE / PAGO RECHAZADO -->
+      <div v-else-if="status === 'failure'" class="flex flex-col items-center py-8">
+        <div class="relative flex items-center justify-center mb-8">
+          <!-- 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>
+          <div class="absolute inset-[-1.5rem] rounded-full bg-rose-500/10 animate-pulse" style="animation-duration: 3s;"></div>
+          
+          <!-- 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">
+          Pago Rechazado
+        </span>
+        
+        <h2 class="text-2xl font-bold text-gray-800 tracking-tight mb-2">
+          Inconveniente con tu pago
+        </h2>
+        <p class="text-sm text-gray-500 max-w-sm mx-auto mb-6 leading-relaxed">
+          Tuvimos un inconveniente al procesar tu método de pago. Por favor, verifica tus datos e inténtalo nuevamente.
+        </p>
+
+        <AppStatus :uid="uid!" :response="response" />
+
+        <div class="pt-8">
+          <button
+            class="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="onBack"
+          >
+            Reintentar Pago
+          </button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-progress {
+  width: 40%;
+  animation: progress-bar 1.5s ease-in-out infinite alternate;
+}
+
+.animate-spin-slow {
+  animation: spin 8s linear infinite;
+}
+
+@keyframes progress-bar {
+  0% { transform: translateX(-50%); }
+  100% { transform: translateX(200%); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>

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

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  uid: null,
+  response: {
+    type: Object,
+  },
+});
+
+const details = computed(() => {
+  return {
+    message: props.response?.details?.messages?.es,
+    code: props.response?.details?.code,
+    description: props.response?.details?.description,
+  };
+});
+</script>
+
+<template>
+  <div class="w-full max-w-md mx-auto px-4 mt-6">
+    <div 
+      class="bg-white/80 backdrop-blur-md border border-gray-100 shadow-xl shadow-slate-100/50 rounded-2xl p-5 text-left transition-all duration-300 hover:shadow-2xl hover:shadow-slate-100/80"
+    >
+      <!-- Header de la tarjeta de transacción -->
+      <div class="flex items-center space-x-2 pb-4 mb-4 border-b border-gray-100">
+        <i-mdi-receipt-text-outline class="text-gray-400 text-xl" />
+        <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+          Detalles de la Transacción
+        </span>
+      </div>
+
+      <!-- Filas de datos -->
+      <div class="space-y-4">
+        <!-- Transacción ID -->
+        <div v-if="uid" class="flex justify-between items-center text-sm">
+          <span class="text-gray-500 font-medium">Transacción ID</span>
+          <span class="font-mono text-gray-800 bg-gray-50 px-2.5 py-1 rounded-md border border-gray-100 text-xs font-semibold select-all">
+            #{{ uid }}
+          </span>
+        </div>
+
+        <!-- Referencia de Pago -->
+        <div v-if="response?.id" class="flex justify-between items-center text-sm">
+          <span class="text-gray-500 font-medium">Referencia de Pago</span>
+          <span class="font-mono text-gray-800 bg-gray-50 px-2.5 py-1 rounded-md border border-gray-100 text-xs font-semibold select-all">
+            {{ response.id }}
+          </span>
+        </div>
+
+        <!-- Mensaje / Detalles del Proveedor -->
+        <div 
+          v-if="details.message || details.description" 
+          class="pt-3 mt-3 border-t border-dashed border-gray-100 space-y-1.5"
+        >
+          <div v-if="details.message" class="text-sm font-semibold text-gray-700">
+            {{ details.message }}
+          </div>
+          <div v-if="details.description" class="text-xs text-gray-400 leading-relaxed max-w-sm">
+            {{ details.description }}
+          </div>
+        </div>
+
+        <!-- Código de Respuesta / Razón -->
+        <div 
+          v-if="details.code" 
+          class="flex items-center space-x-1.5 bg-amber-50/50 border border-amber-100/50 rounded-lg p-2.5 mt-2"
+        >
+          <i-mdi-information-outline class="text-amber-500 text-base flex-shrink-0" />
+          <span class="text-xs text-amber-800 font-medium">
+            Razón del estado: <code class="font-bold select-all">{{ details.code }}</code>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>