lau-ecom-design-system 1.0.19 → 1.0.21

package/src/components/LauEcomTyPage/LauEcomTyPage.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
+import LauEcomSummaryItem from "./LauEcomSummaryItem.vue";
+import { SummaryData } from "./types";
+
+interface Props {
+  summaryData: SummaryData;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  summaryData: () => {
+    return {
+      nroTransaccion: "1231233",
+      detallesCurso: {
+        inicio: "25 de Noviembre",
+        duracion: "6 semanas",
+        horario: "Lunes y Jueves",
+      },
+      resumenCompra: {
+        fechaCompra: "12/23",
+        nroTransaccion: "1231233",
+        nroOperacion: "1231233",
+        metodoPago: "tarjeta de credito",
+        nroTarjeta: "xxxxxxxxxxxx1234",
+        cuotas: "1",
+      },
+      subtotal: 1400,
+      dsct: 30,
+      total: 1380,
+    };
+  },
+});
+
+const dsctoMount = computed(() => {
+  return (props.summaryData.subtotal! * props.summaryData.dsct!) / 100;
+});
+
+const emit = defineEmits(["onGoHomePage"]);
+
+const handleGoHomePage = () => {
+  emit("onGoHomePage");
+};
+</script>
+
+<template>
+  <div class="dsEcom-flex dsEcom-flex-col dsEcom-w-fit">
+    <p
+      class="core-font-body-reg-04-16px dsEcom-text-secondary-60 dsEcom-text-center"
+    >
+      Nro de transacción: {{ summaryData.nroTransaccion }}
+    </p>
+    <br />
+    <p class="button-bold-03-28px dsEcom-text-secondary-60 dsEcom-text-center">
+      ¡Excelente decisión!
+    </p>
+    <p
+      class="core-font-body-reg-04-16px dsEcom-text-neutral-100 dsEcom-text-center"
+    >
+      Hemos registrado tu solicitud.
+    </p>
+    <p class="body-reg-05-14px dsEcom-text-neutral-100 dsEcom-my-4">
+      En breve recibirás un correo con el comprobante de compra y los próximos
+      pasos.
+    </p>
+    <hr class="dsEcom-bg-neutral-40 dsEcom-mb-6" />
+    <img src="../../assets/images/blockhain.png" />
+    <p
+      class="upc-epg-font-heading-06-24px dsEcom-text-secondary-60 dsEcom-mt-6 dsEcom-mb-5"
+    >
+      Legislacion Laboral
+    </p>
+    <hr class="dsEcom-bg-neutral-40 dsEcom-mb-4" />
+    <p class="button-bold-05-20px dsEcom-text-secondary-60 dsEcom-mb-4">
+      Detalles del curso
+    </p>
+    <ul>
+      <LauEcomSummaryItem
+        v-if="summaryData.detallesCurso?.inicio"
+        title="Inicio"
+        :content="summaryData.detallesCurso.inicio"
+      />
+      <LauEcomSummaryItem
+        title="Duracion"
+        :content="summaryData.detallesCurso?.duracion"
+      />
+      <LauEcomSummaryItem
+        v-if="summaryData.detallesCurso?.horario"
+        title="Horario"
+        :content="summaryData.detallesCurso.horario"
+      />
+    </ul>
+    <hr class="dsEcom-bg-neutral-40 dsEcom-mb-4" />
+    <p class="button-bold-05-20px dsEcom-text-secondary-60 dsEcom-mb-4">
+      Resumen de compra
+    </p>
+    <ul>
+      <LauEcomSummaryItem
+        title="Fecha de compra"
+        :content="summaryData.resumenCompra?.fechaCompra"
+      />
+      <LauEcomSummaryItem
+        title="Nro. de transacción"
+        :content="summaryData.resumenCompra?.nroTransaccion"
+      />
+      <LauEcomSummaryItem
+        title="Nro. de operación Niubiz"
+        :content="summaryData.resumenCompra?.nroOperacion"
+      />
+      <LauEcomSummaryItem
+        title="Método de pago"
+        :content="summaryData.resumenCompra?.metodoPago"
+      />
+      <LauEcomSummaryItem
+        title="Nro. de Tarjeta"
+        :content="summaryData.resumenCompra?.nroTarjeta"
+      />
+      <LauEcomSummaryItem
+        title="Cuotas"
+        :content="summaryData.resumenCompra?.cuotas"
+      />
+    </ul>
+    <hr class="dsEcom-bg-neutral-40 dsEcom-my-4" />
+    <div class="dsEcom-flex dsEcom-justify-between dsEcom-mb-4">
+      <p>Subtotal</p>
+      <p class="button-bold-06-16px dsEcom-text-neutral-100">
+        S/{{ summaryData.subtotal }}
+      </p>
+    </div>
+    <div class="dsEcom-flex dsEcom-justify-between dsEcom-mb-4">
+      <p>Cupon (-%{{ summaryData.dsct }})</p>
+      <p class="button-bold-06-16px dsEcom-text-primary-60">
+        S/{{ dsctoMount }}
+      </p>
+    </div>
+    <hr class="dsEcom-bg-neutral-40 dsEcom-mb-4" />
+    <div class="dsEcom-flex dsEcom-justify-between dsEcom-mb-10">
+      <p class="button-bold-05-20px">Total</p>
+      <p class="button-bold-06-16px dsEcom-text-neutral-100">
+        S/{{ summaryData.total }}
+      </p>
+    </div>
+    <LauEcomButton @on-click="handleGoHomePage">
+      Ir a la pagina de inicio
+    </LauEcomButton>
+  </div>
+</template>
+
+<style scoped></style>