@monkeyplus/payscope 1.0.0

package/storefront/profile/pages/Addresses/AddressesForm.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui';
+import * as v from 'valibot';
+import { reactive } from 'vue';
+import { useAccountStore } from '../../../stores';
+
+const { data } = defineProps<{ data?: any }>();
+const schema = v.object({
+  address1: v.pipe(v.string(), v.minLength(10, 'Debe contener al menos 10 caracteres')),
+  address2: v.pipe(v.string(), v.minLength(3, 'Debe contener al menos 3 caracteres')),
+  city: v.pipe(v.string(), v.minLength(3, 'Debe contener al menos 3 caracteres')),
+  country: v.pipe(v.string(), v.minLength(2, 'Debe contener al menos 2 caracteres')),
+  firstName: v.pipe(v.string(), v.minLength(3, 'Debe contener al menos 3 caracteres')),
+  lastName: v.pipe(v.string(), v.minLength(3, 'Debe contener al menos 3 caracteres')),
+  // identification: v.pipe(v.string(), v.minLength(10, 'Debe contener al menos 10 caracteres')),
+  phone: v.pipe(v.string(), v.minLength(10, 'Debe contener al menos 10 caracteres')),
+  state: v.pipe(v.string(), v.minLength(3, 'Debe contener al menos 3 caracteres')),
+  zip: v.pipe(v.string(), v.minLength(5, 'Debe contener al menos 5 caracteres')),
+
+});
+const account = useAccountStore();
+type Schema = v.InferOutput<typeof schema>;
+
+const state = reactive({
+  address1: 'Carcelen BAjo',
+  address2: 'N90',
+  city: '4 ESQUINAS',
+  country: 'EC',
+  firstName: 'Andrés',
+  lastName: 'Barbery',
+  phone: '0999208762',
+  state: 'bolivar',
+  zip: '170302',
+  ...data,
+});
+
+// const toast = useToast();
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  // // console.log('errer');
+  console.log(event.data);
+  if (data) {
+    await account.mutate('update', 'addresses', state);
+  }
+  else {
+    await account.mutate('create', 'addresses', state);
+  }
+  // toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' });
+  // // console.log(event.data);
+}
+</script>
+
+<template>
+  <div class="max-w-xl mx-auto">
+    <UForm
+      :schema="schema" :state="state" class="space-y-2 grid grid-cols-2 gap-3"
+      @submit="onSubmit"
+    >
+      <UFormField label="Nombre" name="firstName">
+        <UInput v-model="state.firstName" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Apellido" name="lastName">
+        <UInput v-model="state.lastName" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Pais" name="country">
+        <UInput v-model="state.country" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Provincia" name="state">
+        <UInput v-model="state.state" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Ciudad" name="city">
+        <UInput v-model="state.city" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Codigo postal" name="zip">
+        <UInput v-model="state.zip" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Dirección" name="address1" class="col-span-2">
+        <UInput v-model="state.address1" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Apartamento, local, etc." name="address2" class="col-span-2">
+        <UInput v-model="state.address2" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Teléfono" name="phone" class="col-span-2">
+        <UInput v-model="state.phone" class="w-full" size="lg" />
+      </UFormField>
+      <div class="col-span-2">
+        <UButton
+          type="submit" class="mt-3" size="xl" block
+          :loading="account.loadingMutation"
+        >
+          Guardar
+        </UButton>
+      </div>
+    </UForm>
+  </div>
+</template>

package/storefront/profile/pages/Addresses/AddressesModal.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useAccountStore } from '../../../stores';
+import AddressesForm from './AddressesForm.vue';
+
+defineProps<{
+  title: string
+  data?: any
+}>();
+
+const emit = defineEmits<{ close: [boolean] }>();
+const account = useAccountStore();
+</script>
+
+<template>
+  <UModal
+    :dismissible="!account.loadingMutation"
+    :close="{ onClick: () => emit('close', false) }"
+    :title="title"
+  >
+    <template #body>
+      <AddressesForm :data="data" />
+    </template>
+  </UModal>
+</template>

package/storefront/profile/pages/Buys/Buys.vue

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

package/storefront/profile/pages/Me/Me.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import MeBilling from './MeBilling.vue';
+import MeInfo from './MeInfo.vue';
+import MePassword from './MePassword.vue';
+import MeSubscriptions from './MeSubscriptions.vue';
+</script>
+
+<template>
+  <div class="pb-12">
+    <MeInfo />
+    <MeBilling />
+    <MePassword />
+    <MeSubscriptions />
+  </div>
+</template>

package/storefront/profile/pages/Me/MeBilling.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useAsyncState } from '@vueuse/core';
+import { ref } from 'vue';
+import { useAccountStore } from '../../../stores';
+import MeBillingModal from './MeBillingModal.vue';
+
+const billings = ref([] as any[]);
+
+const account = useAccountStore();
+const {
+  executeImmediate: saveBilling,
+  isLoading: loadingBilling,
+} = useAsyncState(async (action: string, data: any) => {
+
+}, null, { immediate: false });
+const overlay = useOverlay();
+
+const modal = overlay.create(MeBillingModal);
+async function newBilling() {
+  const instance = modal.open({
+    title: 'Agregar datos de facturación',
+  });
+  const shouldIncrement = await instance.result;
+  console.log('shoultIncrement', shouldIncrement);
+}
+async function editBilling(item: any) {
+  const instance = modal.open({
+    title: 'Editar datos de facturación',
+    data: item,
+  });
+  const shouldIncrement = await instance.result;
+  console.log('shoultIncrement', shouldIncrement);
+}
+</script>
+
+<template>
+  <div class="max-w-lg mx-auto py-6">
+    <div class="text-center text-xl font-light pb-2 dark:text-white dark:font-medium">
+      Datos de facturación
+    </div>
+    <div>
+      <div class="pb-2 space-y-1">
+        <!--  -->
+        <div v-for="item in account.billings" :key="item.id" class="border px-2 rounded py-3 bg-white flex items-center border-gray-300">
+          <div class="flex-1 text-sm text-gray-700">
+            {{ item.formatted }}
+          </div>
+          <div class="space-x-3">
+            <button class="hover:underline" @click="editBilling(item)">
+              Editar
+            </button>
+            <div class="inline-block">
+              |
+            </div>
+            <button class="hover:underline" @click="saveBilling('delete', item)">
+              Quitar
+            </button>
+          </div>
+        </div>
+      </div>
+      <!--  -->
+      <div class="text-center">
+        <UButton
+          :loading="loadingBilling"
+          block
+          size="xl"
+          variant="outline"
+          class="border-dashed border"
+
+          color="neutral"
+          @click="newBilling()"
+        >
+          Nuevos datos de facturación
+        </UButton>
+      </div>
+    </div>
+    <!-- <FormPassword :initial-values="selected" @submit="onSave" /> -->
+  </div>
+</template>

package/storefront/profile/pages/Me/MeBillingForm.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui';
+import * as v from 'valibot';
+import { reactive } from 'vue';
+import { useAccountStore } from '../../../stores';
+
+const { data } = defineProps<{ data?: any }>();
+const schema = v.object({
+  email: v.pipe(v.string(), v.email('Debe ser un correo electronico valido')),
+  identification: v.pipe(v.string(), v.minLength(10, 'Debe contener al menos 10 caracteres')),
+});
+const account = useAccountStore();
+type Schema = v.InferOutput<typeof schema>;
+
+const state = reactive({
+  fullname: '',
+  identification: '',
+  email: '',
+  phone: '',
+  address: '',
+  ...data,
+});
+
+// const toast = useToast();
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  // // console.log('errer');
+  console.log(event.data);
+  if (data) {
+    await account.mutate('update', 'billings', state);
+  }
+  else {
+    await account.mutate('create', 'billings', state);
+  }
+  // toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' });
+  // // console.log(event.data);
+}
+</script>
+
+<template>
+  <div class="max-w-xl mx-auto">
+    <UForm :schema="schema" :state="state" class="space-y-2" @submit="onSubmit">
+      <UFormField label="Nombre completo" name="name">
+        <UInput v-model="state.fullname" class="w-full" size="lg" />
+      </UFormField>
+
+      <UFormField label="Cedula o Ruc" name="identification">
+        <UInput v-model="state.identification" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Correo electronico" name="email">
+        <UInput v-model="state.email" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Numero de telefono" name="birthday">
+        <UInput v-model="state.phone" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Dirección" name="address">
+        <UInput v-model="state.address" class="w-full" size="lg" />
+      </UFormField>
+      <UButton
+        type="submit" class="mt-3" size="xl" block
+        :loading="account.loadingMutation"
+      >
+        Guardar
+      </UButton>
+    </UForm>
+  </div>
+</template>

package/storefront/profile/pages/Me/MeBillingModal.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useAccountStore } from '../../../stores';
+import MeBillingForm from './MeBillingForm.vue';
+
+defineProps<{
+  title: string
+  data?: any
+}>();
+
+const emit = defineEmits<{ close: [boolean] }>();
+const account = useAccountStore();
+</script>
+
+<template>
+  <UModal
+    :dismissible="!account.loadingMutation"
+    :close="{ onClick: () => emit('close', false) }"
+    :title="title"
+  >
+    <template #body>
+      <MeBillingForm :data="data" />
+    </template>
+  </UModal>
+</template>

package/storefront/profile/pages/Me/MeInfo.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui';
+import { CalendarDate } from '@internationalized/date';
+// import { watch } from 'node:fs';
+import * as v from 'valibot';
+import { ref, watch } from 'vue';
+import { authClient, useSession } from '../../../auth';
+
+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')),
+  name: v.string(),
+  phone: v.string(),
+  birthday: v.instance(CalendarDate),
+
+});
+
+type Schema = v.InferOutput<typeof schema>;
+const { user } = useSession();
+// console.log(user.value);
+const state = ref({
+  name: '',
+  phone: '',
+  email: '',
+  birthday: new CalendarDate(2022, 2, 3),
+  // ...user.value,
+});
+watch(user, (nv?: any) => {
+  state.value = { ...nv, birthday: new CalendarDate(new Date(nv.birthday || '').getFullYear(), new Date(nv.birthday || '').getMonth() + 1, new Date(nv.birthday || '').getDate() + 1),
+  } as any;
+});
+
+const toast = useToast();
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  // console.log('errer', event.data);
+
+  const birthday = event.data.birthday.toString();
+  await authClient.updateUser({
+    // name: state.value.name,
+    ...event.data,
+    birthday,
+  } as any);
+  toast.add({
+    title: 'Success',
+    description: 'The form has been submitted.',
+    color: 'success',
+  });
+  // console.log(event.data);
+}
+</script>
+
+<template>
+  <div class="max-w-lg mx-auto">
+    <UForm :schema="schema" :state="state" class="space-y-2" @submit="onSubmit">
+      <UFormField label="Nombre" name="name">
+        <UInput v-model="state.name" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Celular" name="phone">
+        <UInput v-model="state.phone" class="w-full" size="lg" />
+      </UFormField>
+      <UFormField label="Correo electronico" name="email">
+        <UInput v-model="state.email" class="w-full" size="lg" disabled />
+      </UFormField>
+      <UFormField label="Fecha de nacimiento" name="birthday">
+        <UInputDate v-model="state.birthday" class="w-full" size="lg" />
+      </UFormField>
+      <UButton
+        type="submit" class="mt-3 bg-e-primary hover:bg-e-primary/90 text-e-primary-contrast" size="xl"
+        block
+      >
+        Guardar cambios
+      </UButton>
+    </UForm>
+  </div>
+</template>

package/storefront/profile/pages/Me/MePassword.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from '@nuxt/ui';
+import * as v from 'valibot';
+import { reactive } from 'vue';
+
+const schema = v.pipe(v.object({
+  oldPassword: v.pipe(v.string(), v.minLength(8, 'Must be at least 8 characters')),
+  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'],
+));
+const state = reactive({
+  password: '',
+  confirmPassword: '',
+  oldPassword: '',
+});
+const toast = useToast();
+type Schema = v.InferOutput<typeof schema>;
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+//   toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' });
+//   console.log(event.data);
+}
+</script>
+
+<template>
+  <div class="max-w-lg mx-auto">
+    <div class="text-center text-xl font-light pb-2 dark:text-white dark:font-medium">
+      Modificar contraseña
+    </div>
+
+    <UForm :schema="schema" :state="state" @submit="onSubmit">
+      <UFormField label="Contraseña actual" name="oldPassword">
+        <UInput v-model="state.oldPassword" size="lg" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Nueva contraseña" name="password">
+        <UInput v-model="state.password" type="password" size="lg" class="w-full" />
+      </UFormField>
+
+      <UFormField label="Repetir contraseña" name="confirmPassword">
+        <UInput v-model="state.password" type="password" size="lg" class="w-full" />
+      </UFormField>
+
+      <UButton type="submit">
+        Submit
+      </UButton>
+    </UForm>
+  </div>
+</template>

package/storefront/profile/pages/Me/MeSubscriptions.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="max-w-lg mx-auto">
+    <div class="text-center text-xl font-light pb-2 dark:text-white dark:font-medium">
+      Mis subscripciones
+    </div>
+
+    <UCheckbox label="Check me" description="This is a checkbox." />
+    <UCheckbox label="Check me" description="This is a checkbox." />
+    <UCheckbox label="Check me" description="This is a checkbox." />
+  </div>
+</template>

package/storefront/profile/pages/Returns/Returns.vue

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

package/storefront/profile/pages/Whislist/Whislist.vue

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

package/storefront/profile/router.ts

@@ -0,0 +1,32 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'me',
+      component: () => import('./pages/Me/Me.vue'),
+    },
+    {
+      path: '/buys',
+      name: 'orders',
+      component: () => import('./pages/Buys/Buys.vue'),
+    },
+    {
+      path: '/address',
+      name: 'address',
+      component: () => import('./pages/Addresses/Addresses.vue'),
+    },
+    {
+      path: '/returns',
+      name: 'returns',
+      component: () => import('./pages/Returns/Returns.vue'),
+    },
+    {
+      path: '/wishes',
+      name: 'wishes',
+      component: () => import('./pages/Whislist/Whislist.vue'),
+    },
+  ],
+});