@monkeyplus/payscope 1.0.0

package/storefront/checkout/pages/Payment/composable.ts

@@ -0,0 +1,81 @@
+import { ofetch } from 'ofetch';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+export interface StatusPay {
+  status: string
+  customer: {
+    raw: any
+    body: any
+  }
+  transaction: {
+    responseTasks: {
+      nafinity: any
+    }
+    payloadTasks: {
+      success: { sign: string }[]
+    }
+  }
+}
+
+export function useState() {
+  //
+  const query = new URLSearchParams(location.search);
+  const provider = query.get('provider') || '';
+  const uid = query.get('uid');
+
+  if (sessionStorage.getItem('eQuery') && !location.pathname.startsWith('/checkout/payment')) {
+    const p = `${sessionStorage.getItem('ePath') || '/checkout/payment'}${sessionStorage.getItem('eQuery')}`;
+    // console.log(p);
+
+    location.replace(p);
+  }
+
+  if (provider && uid) {
+    sessionStorage.setItem('eQuery', location.search || '');
+    sessionStorage.setItem('ePath', location.pathname || '');
+  }
+  //
+
+  // const namespace = query.get('namespace');
+  const response = ref({} as StatusPay);
+  // const id = ref('');
+  const status = ref('loading');
+  const cleanStorage = () => {
+    sessionStorage.removeItem('eTransaction');
+    localStorage.removeItem('eTransaction');
+  };
+  const route = useRoute();
+
+  const getState = async () => {
+    if (!uid || !provider)
+      return undefined;
+
+    const storeId = route.params.store || '';
+
+    const storePath = storeId ? `/${storeId}` : '';
+
+    const data = await ofetch(`/payment${storePath}/verify/${provider}`, {
+      body: { uid },
+      method: 'POST',
+      params: {
+        // namespace,
+        override: true,
+      },
+    });
+    status.value = data.status;
+    response.value = data;
+    // sendToGtag(uid, data.transaction);
+    if (status.value === 'pending')
+      runSonda();
+    else
+      cleanStorage();
+    return true;
+  };
+  function runSonda() {
+    setTimeout(() => {
+      getState();
+    }, 1000 * 12);
+  }
+  return { getState, status, response, uid, runSonda, provider };
+}

package/storefront/checkout/pages/Shipping/Shipping.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useCheckoutStore } from '../../../stores.ts';
+import { useNavigation } from '../../composables.ts';
+import StepInfo from '../StepInfo.vue';
+
+const checkout = useCheckoutStore();
+checkout.getShippings();
+
+const { toNext } = useNavigation();
+
+const items = computed(() => {
+  return checkout.shippings.map((item: any) => {
+    return {
+      label: item.name,
+      value: item.id,
+      description: item.price,
+    };
+  });
+});
+function onNext() {
+  toNext();
+}
+
+const select = ref(checkout.shipping.id || 0);
+
+watch(select, (v) => {
+  const _a = checkout.shippings.find((a: any) => a.id === v);
+  checkout.setShipping(_a);
+});
+</script>
+
+<template>
+  <div class="space-y-5 mx-auto min-w-xl mt-6">
+    <div class="pt-3">
+      <StepInfo />
+    </div>
+    <div class="text-2xl font-bold leading-0 pt-3">
+      Información de envio
+    </div>
+    <div>
+      Selecciona un tipo de envio
+    </div>
+    <div>
+      <URadioGroup
+        v-model="select"
+        color="primary"
+        variant="table"
+        default-value="pro"
+        :items="items"
+      />
+    </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/StepInfo.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useSession } from '../../auth';
+import { useCheckoutStore } from '../../stores';
+
+const { user } = useSession();
+const checkout = useCheckoutStore();
+</script>
+
+<template>
+  <div class="rounded border-1 px-2 text-sm border">
+    <div class="text-gray-800 border-b-1 border-b p-3">
+      <span class="text-gray-500 mr-4 w-16 inline-block"> Contacto </span>
+      {{ user?.name }}
+      <span class="text-xs">
+        ({{ user?.email }})
+      </span>
+    </div>
+    <div v-if="checkout.address?.id" class="text-gray-800 p-3 flex">
+      <div class="text-gray-500 mr-4 w-16 inline-block">
+        Enviar a
+      </div>
+      <div>
+        {{ checkout.address.formatted }}
+        <!-- <span v-if="checkout.customer.shippingIdentification">
+          <br>
+          Cedula:
+          {{ checkout.customer.shippingIdentification }}
+        </span> -->
+      </div>
+    </div>
+    <!-- <div v-if="isPay" class="text-gray-800 p-3">
+      <span class="text-gray-500 mr-4 w-16 inline-block"> Tipo envio </span>
+      {{ checkout?.customer?.shippingType?.name }} -
+      {{ checkout?.customer?.shippingType?.price }}
+    </div> -->
+  </div>
+</template>

package/storefront/checkout/router.ts

@@ -0,0 +1,59 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+console.log('createCheckout');
+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',
+      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: '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',
+        },
+      ],
+    },
+  ],
+});

package/storefront/index.ts

@@ -0,0 +1,3 @@
+export { registerCheckoutApp } from './checkout/main';
+export { registerLoginApp } from './login/main';
+export { registerProfileApp } from './profile/main';

package/storefront/login/App.vue

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

package/storefront/login/main.ts

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

package/storefront/login/pages/SignIn/Login.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import { useAsyncState } from '@vueuse/core';
+import * as v from 'valibot';
+import { authClient } from '../../../auth';
+
+const toast = useToast();
+
+const fields: AuthFormField[] = [{
+  name: 'email',
+  type: 'email',
+  label: 'Email',
+  placeholder: 'Enter your email',
+  required: true,
+}, {
+  name: 'password',
+  label: 'Password',
+  type: 'password',
+  placeholder: 'Enter your password',
+  required: true,
+}, {
+  name: 'remember',
+  label: 'Remember me',
+  type: 'checkbox',
+}];
+
+const providers = [
+  {
+    label: 'Google',
+    icon: 'i-simple-icons-google',
+    onClick: () => {
+      toast.add({ title: 'Google', description: 'Login with Google' });
+    },
+  },
+  {
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    onClick: () => {
+      toast.add({ title: 'GitHub', description: 'Login with GitHub' });
+    },
+  },
+];
+
+const schema = v.object({
+  email: v.pipe(v.string(), v.email('Invalid email')),
+  password: v.pipe(v.string(), v.minLength(8, 'Must be at least 8 characters')),
+});
+
+// type Schema = v.output<typeof schema>;
+
+const { execute, isLoading } = useAsyncState(async (payload: any) => {
+  await authClient.signIn.email({
+    email: payload.data.email,
+    password: payload.data.password,
+  });
+}, null, {
+  onSuccess() {
+    location.href = '/profile';
+  },
+  immediate: false,
+});
+async function onSubmit(payload: FormSubmitEvent<any>) {
+  await execute(0, payload);
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-4 p-4">
+    <UPageCard class="w-full max-w-md">
+      <UAuthForm
+        :schema="schema"
+        title="Iniciar sesión"
+        description="Ingresa tus credenciales para acceder a tu cuenta"
+        icon="i-lucide-user"
+        :fields="fields"
+        :providers="providers"
+        :loading="isLoading"
+        @submit="onSubmit"
+      />
+    </UPageCard>
+  </div>
+</template>

package/storefront/login/pages/SignUp/SignUp.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui';
+import * as v from 'valibot';
+import { authClient } from '../../../auth';
+
+const toast = useToast();
+
+const fields: AuthFormField[] = [
+  {
+    name: 'name',
+    type: 'name',
+    label: 'Nombre',
+    placeholder: 'Ingresa tu nombre',
+    required: true,
+  },
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    placeholder: 'Ingresa tu email',
+    required: true,
+  },
+  {
+    name: 'password',
+    label: 'Contraseña',
+    type: 'password',
+    placeholder: 'Ingresa tu contraseña',
+    required: true,
+  },
+  {
+    name: 'confirmPassword',
+    label: 'Confirmar Contraseña',
+    type: 'password',
+    placeholder: 'Confirma tu contraseña',
+    required: true,
+  },
+  {
+    name: 'acceptTerms',
+    label: 'Acepto los términos y condiciones',
+    type: 'checkbox',
+  },
+];
+
+const providers = [
+  {
+    label: 'Google',
+    icon: 'i-simple-icons-google',
+    onClick: () => {
+      toast.add({ title: 'Google', description: 'Login with Google' });
+    },
+  },
+  {
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    onClick: () => {
+      toast.add({ title: 'GitHub', description: 'Login with GitHub' });
+    },
+  },
+];
+
+const schema = v.pipe(v.object({
+  name: v.string('Name is required'),
+  email: v.pipe(v.string(), v.email('Invalid email')),
+  password: v.pipe(v.string(), v.minLength(8, 'Must be at least 8 characters')),
+  confirmPassword: v.string(),
+
+}), v.forward(
+  v.partialCheck([['password'], ['confirmPassword']], input => input.password === input.confirmPassword, 'Passwords do not match'),
+  ['confirmPassword'],
+));
+
+// type Schema = v.output<typeof schema>;
+
+async function onSubmit(payload: FormSubmitEvent<any>) {
+  console.log('Submitted', payload.data);
+  // authClient.signUp({})
+  await authClient.signUp.email({
+    email: payload.data.email,
+    password: payload.data.password,
+    name: payload.data.name,
+  });
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-4 p-4">
+    <UPageCard class="w-full max-w-md">
+      <UAuthForm
+        :schema="schema"
+        title="Registrarse"
+        description="Crea una nueva cuenta"
+        icon="i-lucide-user"
+        :fields="fields"
+        :providers="providers"
+        @submit="onSubmit"
+      />
+    </UPageCard>
+  </div>
+</template>

package/storefront/login/router.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      component: () => import('./pages/SignIn/Login.vue'),
+    },
+    {
+      path: '/sign-up',
+      component: () => import('./pages/SignUp/SignUp.vue'),
+    },
+  ],
+});