src/pages/Customer/Card/CustomerMandates.vue

@@ -1,11 +1,135 @@
 <script setup>
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { toDateHour } from 'src/filters';
+
+import FetchData from 'components/FetchData.vue';
 
 const { t } = useI18n();
+const route = useRoute();
+
+const rows = ref([]);
+
+const filter = {
+    include: [
+        { relation: 'mandateType', scope: { fields: ['id', 'name'] } },
+        { relation: 'company', scope: { fields: ['id', 'code'] } },
+    ],
+    where: { clientFk: route.params.id },
+    order: ['created DESC'],
+    limit: 20,
+};
+
+const tableColumnComponents = {
+    id: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    company: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    type: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    registerDate: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    endDate: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'id',
+        label: t('Id'),
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: (row) => row.company.code,
+        label: t('Company'),
+        name: 'company',
+    },
+    {
+        align: 'left',
+        field: (row) => row.mandateType.name,
+        label: t('Type'),
+        name: 'type',
+    },
+    {
+        align: 'left',
+        field: 'created',
+        label: t('Register date'),
+        name: 'registerDate',
+        format: (value) => toDateHour(value),
+    },
+    {
+        align: 'left',
+        field: 'finished',
+        label: t('End date'),
+        name: 'endDate',
+        format: (value) => (value ? toDateHour(value) : '-'),
+    },
+]);
 </script>
 
 <template>
-    <h5 class="flex justify-center color-vn-label">
-        {{ t('globals.noResults') }}
-    </h5>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        url="Mandates"
+    />
+
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                            class="rounded-borders q-pa-sm"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                        >
+                            {{ props.value }}
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <h5 class="flex justify-center label-color" v-else>
+            {{ t('globals.noResults') }}
+        </h5>
+    </QPage>
 </template>
+
+<i18n>
+es:
+    Id: Id
+    Company: Empresa
+    Type: Tipo
+    Register date: Fecha alta
+    End date: Fecha baja
+</i18n>

src/pages/Customer/Card/CustomerWebPayment.vue

@@ -1,11 +1,144 @@
 <script setup>
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { toCurrency, toDateHour } from 'src/filters';
+
+import FetchData from 'components/FetchData.vue';
+import CustomerCloseIconTooltip from '../components/CustomerCloseIconTooltip.vue';
+import CustomerCheckIconTooltip from '../components/CustomerCheckIconTooltip.vue';
 
 const { t } = useI18n();
+const route = useRoute();
+
+const clientsTransactionsRef = ref(null);
+const rows = ref([]);
+
+const filter = {
+    include: [
+        { relation: 'mandateType', scope: { fields: ['id', 'name'] } },
+        { relation: 'company', scope: { fields: ['id', 'code'] } },
+    ],
+    where: { clientFk: route.params.id },
+    order: ['created DESC'],
+    limit: 20,
+};
+
+const tableColumnComponents = {
+    state: {
+        component: CustomerCloseIconTooltip,
+        props: ({ row }) => ({ transaction: row }),
+        event: () => {},
+    },
+    id: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    date: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    validate: {
+        component: CustomerCheckIconTooltip,
+        props: ({ row }) => ({
+            transaction: row,
+            promise: refreshData,
+        }),
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: '',
+        label: t('State'),
+        name: 'state',
+    },
+    {
+        align: 'left',
+        field: 'id',
+        label: t('Id'),
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: 'created',
+        label: t('Date'),
+        name: 'date',
+        format: (value) => toDateHour(value),
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Amount'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+    {
+        align: 'left',
+        field: '',
+        name: 'validate',
+    },
+]);
+
+const refreshData = () => {
+    clientsTransactionsRef.value.fetch();
+};
 </script>
 
 <template>
-    <h5 class="flex justify-center color-vn-label">
-        {{ t('globals.noResults') }}
-    </h5>
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        ref="clientsTransactionsRef"
+        url="clients/transactions"
+    />
+
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                            class="rounded-borders q-pa-sm"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                        >
+                            {{ props.value }}
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <h5 class="flex justify-center label-color" v-else>
+            {{ t('globals.noResults') }}
+        </h5>
+    </QPage>
 </template>
+
+<i18n>
+es:
+    State: Estado
+    Id: Id
+    Date: Fecha
+    Amount: Importe
+</i18n>

src/pages/Customer/components/CustomerCheckIconTooltip.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+
+const $props = defineProps({
+    transaction: {
+        type: Object,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
+
+const setClientsConfirmTransaction = async () => {
+    try {
+        const payload = { id: $props.transaction.id };
+        await axios.post('Clients/confirmTransaction', payload);
+        $props.promise();
+    } catch (error) {
+        return error;
+    }
+};
+</script>
+
+<template>
+    <div v-if="!$props?.transaction?.isConfirmed">
+        <QIcon
+            @click.stop="setClientsConfirmTransaction"
+            class="cursor-pointer"
+            color="primary"
+            name="check"
+            size="sm"
+        >
+            <QTooltip>{{ t('Confirm transaction') }}</QTooltip>
+        </QIcon>
+    </div>
+</template>
+
+<i18n>
+es:
+    Confirm transaction: Transacción confirmada
+</i18n>

src/pages/Customer/components/CustomerCloseIconTooltip.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const tooltip = ref('');
+
+const $props = defineProps({
+    transaction: {
+        type: Object,
+        required: true,
+    },
+});
+
+onBeforeMount(() => {
+    const errorMessage = $props.transaction.errorMessage
+        ? $props.transaction.errorMessage
+        : '';
+    const responseMessage = $props.transaction.responseMessage
+        ? $props.transaction.responseMessage
+        : '';
+    tooltip.value = `${errorMessage} ${responseMessage}`;
+});
+</script>
+
+<template>
+    <div
+        v-if="
+            ($props.transaction.errorMessage || $props.transaction.responseMessage) &&
+            !$props.transaction.isConfirmed
+        "
+    >
+        <QIcon class="cursor-pointer" color="negative" name="close" size="sm">
+            <QTooltip>{{ tooltip }}</QTooltip>
+        </QIcon>
+    </div>
+    <div v-if="$props.transaction.isConfirmed">
+        <QIcon class="cursor-pointer" color="positive" name="check" size="sm">
+            <QTooltip>{{ t('Confirmed') }}</QTooltip>
+        </QIcon>
+    </div>
+</template>
+
+<i18n>
+es:
+    Confirmed: Confirmada
+</i18n>

src/pages/Customer/components/CustomerSamplesCreate.vue

@@ -27,7 +27,7 @@ const optionsEmailUsers = ref([]);
 const optionsClientsAddressess = ref([]);
 const optionsCompanies = ref([]);
 const optionsSamplesVisible = ref([]);
-const sampleType = ref(0);
+const sampleType = ref({ hasPreview: false });
 
 const filterEmailUsers = { where: { userFk: user.value.id } };
 const filterClientsAddresses = {
@@ -55,7 +55,6 @@ const initialData = reactive({});
 onBeforeMount(async () => {
     const { companyFk } = user.value;
     const { data } = await axios.get(`Clients/1/getCard`);
-    initialData.addressId = data.defaultAddressFk;
     initialData.clientFk = route.params.id;
     initialData.companyFk = companyFk;
     initialData.companyId = companyFk;
@@ -68,6 +67,11 @@ const setEmailUser = (data) => {
     initialData.replyTo = data[0]?.email;
 };
 
+const setClientsAddresses = (data) => {
+    initialData.addressId = data[0].id;
+    optionsClientsAddressess.value = data;
+};
+
 const setSampleType = (sampleId) => {
     sampleType.value = optionsSamplesVisible.value.find(
         (option) => option.id === sampleId
@@ -130,7 +134,7 @@ const getPreview = async () => {
     <fetch-data
         :filter="filterClientsAddresses"
         :url="`Clients/${route.params.id}/addresses`"
-        @on-fetch="(data) => (optionsClientsAddressess = data)"
+        @on-fetch="setClientsAddresses"
         auto-load
     />
     <fetch-data
@@ -244,6 +248,11 @@ const getPreview = async () => {
                                 </QItemSection>
                             </QItem>
                         </template>
+                        <template #append>
+                            <QIcon name="edit" class="cursor-pointer">
+                                <QTooltip>{{ t('Edit address') }}</QTooltip>
+                            </QIcon>
+                        </template>
                     </VnSelectFilter>
                 </div>
             </VnRow>
@@ -270,7 +279,7 @@ const getPreview = async () => {
                     v-close-popup
                 />
                 <QBtn
-                    :disabled="isLoading"
+                    :disabled="isLoading || !sampleType.hasPreview"
                     :label="t('Preview')"
                     :loading="isLoading"
                     @click.stop="getPreview()"
@@ -278,7 +287,7 @@ const getPreview = async () => {
                     color="primary"
                 />
                 <QBtn
-                    :disabled="isLoading || canChangePassword"
+                    :disabled="isLoading"
                     :label="t('globals.save')"
                     :loading="isLoading"
                     color="primary"
@@ -299,5 +308,6 @@ es:
     Since: Desde
     Its only used when sample is sent: Se utiliza únicamente cuando se envía la plantilla
     To who should the recipient replay?: ¿A quien debería responder el destinatario?
+    Edit address: Editar dirección
     Preview: Vista previa
 </i18n>