cja-phoenix 1.0.11 → 1.0.12

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "cja-phoenix",
   "configKey": "cja-phoenix",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -5,7 +5,7 @@ const module = defineNuxtModule({
     name: "cja-phoenix",
     configKey: "cja-phoenix"
   },
-  setup(_options, _nuxt) {
+  async setup(_options, _nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const nuxtOptions = _nuxt.options;
     nuxtOptions.vite.css ||= {};
@@ -18,6 +18,7 @@ const module = defineNuxtModule({
     `;
     nuxtOptions.css.push(resolve("./runtime/assets/scss/tippy.scss"));
     nuxtOptions.css.push(resolve("./runtime/assets/iconia/style.css"));
+    addImportsDir(resolve("./runtime/composables"));
     addImportsDir(resolve("./runtime/utils"));
     addImportsDir(resolve("./runtime/types"));
     addComponentsDir({

package/dist/runtime/components/StickyContainer.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import { useHeaderHeight } from "../utils/useHeaderHeight";
+import { useHeaderHeight } from "#imports";
 import { onMounted, ref } from "vue";
 const { top, bottom, left, right } = defineProps({
   top: { type: Number, required: false },

package/dist/runtime/components/funnel/Header.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="funnel-header">
+    <div class="header-container">
+      <h2>{{ title }}</h2>
+      <span
+        v-if="tooltip"
+        v-tippy="tooltip"
+        class="m-cgg-icon--question"
+      />
+    </div>
+    <p v-if="description">
+      {{ description }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  tooltip: { type: String, required: false }
+});
+</script>
+
+<style lang="scss" scoped>
+.funnel-header {
+  text-align: center;
+  margin: 0 0 32px;
+
+  .header-container {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    align-items: center;
+
+    .m-cgg-icon--question {
+      color: $main-blue;
+      font-size: 24px;
+    }
+  }
+
+  h2 {
+    color: $main-blue;
+    font-size: 20px;
+    line-height: 26px;
+    font-weight: 700;
+    margin: 0;
+
+    @media screen and (min-width: $break-lg-min) {
+      font-size: 24px;
+      line-height: 30px;
+    }
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 18px;
+    margin: 24px 0 0;
+
+    @media screen and (min-width: $break-lg-min) {
+      font-size: 16px;
+      line-height: 20px;
+    }
+  }
+}
+</style>

package/dist/runtime/components/funnel/Header.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    tooltip?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/funnel/Submit.vue

@@ -0,0 +1,68 @@
+<template>
+  <Teleport
+    to="body"
+    :disabled="viewport.isGreaterOrEquals('lg')"
+  >
+    <div class="btn-container">
+      <CjaButton
+        color="orange"
+        :loading="loading"
+        :icon-right="icon"
+        @click="$emit('btn:click')"
+      >
+        <slot>{{ t("btn.submit") }}</slot>
+      </CjaButton>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+const { t } = useI18n();
+const viewport = useViewport();
+defineProps({
+  loading: { type: Boolean, required: false },
+  icon: { type: null, required: false }
+});
+defineEmits(["btn:click"]);
+</script>
+
+<style lang="scss" scoped>
+.btn-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 20px 15px;
+  background-color: $white;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  box-shadow: $box-shadow-m;
+  z-index: 2;
+
+  @media screen and (min-width: $break-lg-min) {
+    position: static;
+    margin: 32px 0 0;
+    padding: 0;
+    box-shadow: none;
+  }
+
+  .cja-btn {
+    width: 100%;
+
+    @media screen and (min-width: $break-xs-min) {
+      max-width: 200px;
+    }
+  }
+}
+</style>
+
+<i18n lang="json">
+{
+  "pt": {
+    "btn": {
+      "submit": "Continuar"
+    }
+  }
+}
+</i18n>

package/dist/runtime/components/funnel/Submit.vue.d.ts

@@ -0,0 +1,21 @@
+import type { Icon } from '#imports';
+type __VLS_Props = {
+    loading?: boolean;
+    icon?: Icon;
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "btn:click": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onBtn:click"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/{utils/gtm.d.ts → composables/useCjaGtm.d.ts}

@@ -1,6 +1,5 @@
-import type { GtmSupport } from '@gtm-support/vue-gtm';
-export declare const useCjaGtm: (gtm: GtmSupport | undefined, gtmOptions: {
-    category: string;
+import type { JourneyLocation, VerticalCode } from '../types/JourneyConfig.js';
+export declare const useCjaGtm: (vertical: VerticalCode, source: JourneyLocation | {
     formType: string;
     location: string;
 }) => {

package/dist/runtime/{utils/gtm.js → composables/useCjaGtm.js}

@@ -1,18 +1,48 @@
-export const useCjaGtm = (gtm, gtmOptions) => {
+import { useGtm } from "@gtm-support/vue-gtm";
+export const useCjaGtm = (vertical, source) => {
+  const gtm = useGtm();
+  const category = (() => {
+    switch (vertical) {
+      case "HL":
+        return "mortgage";
+      case "PL":
+        return "personal-loan new-funnel";
+      case "EN":
+        return "energy";
+      case "BB":
+        return "broadband";
+      case "CI":
+        return "car-insurance-funnel";
+    }
+  })();
+  const { formType, location } = (() => {
+    switch (source) {
+      case "funnel":
+        return { formType: "FUNNEL", location: "Funnel" };
+      case "results":
+        return { formType: "RESULTS", location: "Results" };
+      case "checkout":
+        return { formType: "CHECKOUT", location: "Checkout" };
+      case "contact":
+        return { formType: "CONTACT", location: "Contact" };
+      default:
+        return source;
+    }
+  })();
   const trackStepEvent = (options) => {
     gtm?.trackEvent({
-      event: `${gtmOptions.location} Step`,
+      event: `${location} Step`,
       eventDetails: {
-        category: gtmOptions.category,
+        category,
         value: options.stepName,
         noninteraction: false,
-        location: gtmOptions.location,
+        location,
         action: options.action,
         properties: {
           stepName: options.stepName,
           stepNumber: options.stepNumber,
           stepDetails: options.stepDetails,
-          formType: gtmOptions.formType
+          formType
         }
       }
     });
@@ -21,8 +51,8 @@ export const useCjaGtm = (gtm, gtmOptions) => {
     gtm?.trackEvent({
       event: "Impressions",
       eventDetails: {
-        category: gtmOptions.category,
-        location: gtmOptions.location,
+        category,
+        location,
         action: "Results Impressions",
         loadTime: options.time || 0,
         properties: {
@@ -34,7 +64,7 @@ export const useCjaGtm = (gtm, gtmOptions) => {
             id: p.productId,
             brand: p.provider,
             position: i + 1,
-            category: gtmOptions.category,
+            category,
             list: options.listing,
             price: "5.00",
             quantity: 1
@@ -49,8 +79,8 @@ export const useCjaGtm = (gtm, gtmOptions) => {
       eventDetails: {
         label: options.product.cardTitle,
         source: `Conversion - ${options.source}`,
-        category: gtmOptions.category,
-        location: gtmOptions.location,
+        category,
+        location,
         action: "Results Purchase",
         properties: {
           list: options.listing
@@ -65,7 +95,7 @@ export const useCjaGtm = (gtm, gtmOptions) => {
               action: "purchase"
             },
             products: (() => {
-              switch (gtmOptions.category) {
+              switch (category) {
                 case "energy":
                   return [
                     {
@@ -74,7 +104,7 @@ export const useCjaGtm = (gtm, gtmOptions) => {
                       brand: options.product.provider,
                       position: options.product.index + 1,
                       dimension3: options.source,
-                      category: gtmOptions.category,
+                      category,
                       list: options.listing,
                       price: "5.00",
                       quantity: 1
@@ -91,7 +121,7 @@ export const useCjaGtm = (gtm, gtmOptions) => {
                       approvalRate: "unavailable",
                       dimension3: options.source,
                       dimension6: `apr:${options.product.attributes.taeg}, totalRepayment:${options.product.attributes.mtic}, monthlyRepayment:${options.product.attributes.installment}`,
-                      category: gtmOptions.category,
+                      category,
                       list: options.listing,
                       price: "5.00",
                       quantity: 1
@@ -99,7 +129,7 @@ export const useCjaGtm = (gtm, gtmOptions) => {
                   ];
                 default:
                   console.error(
-                    `Unrecognized category ${gtmOptions.category}, implement vertical specific gtm product`
+                    `Unrecognized category ${category}, implement vertical specific gtm product`
                   );
                   return [{}];
               }
@@ -113,8 +143,8 @@ export const useCjaGtm = (gtm, gtmOptions) => {
     gtm?.trackEvent({
       event: "productDetail",
       eventDetails: {
-        category: gtmOptions.category,
-        location: gtmOptions.location,
+        category,
+        location,
         action: "Results Detail",
         properties: {
           list: options.listing
@@ -131,7 +161,7 @@ export const useCjaGtm = (gtm, gtmOptions) => {
                 id: options.product.productId,
                 brand: options.product.provider,
                 position: options.product.index + 1,
-                category: gtmOptions.category,
+                category,
                 list: options.listing,
                 price: "5.00",
                 quantity: 1

package/dist/runtime/composables/useFunnelConfig.d.ts

@@ -0,0 +1,10 @@
+import { type ComputedRef } from 'vue';
+import type { StepData } from '../types/JourneyConfig.js';
+export declare const useFunnelConfig: (structure: ComputedRef<Map<string, string[]>>) => {
+    steps: ComputedRef<string[]>;
+    currentStep: ComputedRef<StepData>;
+    totalSteps: ComputedRef<number>;
+    getStep: (step: string | number | undefined) => StepData | undefined;
+    goNextStep: () => Promise<void>;
+    goPrevStep: () => Promise<void>;
+};

package/dist/runtime/composables/useFunnelConfig.js

@@ -0,0 +1,50 @@
+import { navigateTo, useRoute, useRouter } from "#app";
+import { computed } from "vue";
+export const useFunnelConfig = (structure) => {
+  const route = useRouter().currentRoute;
+  const steps = computed(() => Array.from(structure.value.keys()));
+  const currentStep = computed(() => getStep(route.value.path.split("/").reverse()[0]) || currentStep.value);
+  const totalSteps = computed(() => structure.value.size);
+  const getStep = (step) => {
+    if (step === void 0) return;
+    const stepName = typeof step == "string" ? step : steps.value[step];
+    const stepFields = stepName && structure.value.get(stepName);
+    return stepName && stepFields ? {
+      index: steps.value.indexOf(stepName),
+      number: steps.value.indexOf(stepName) + 1,
+      name: stepName,
+      path: route.value.path.replace(/[^/]+(?=\/$|$)/g, stepName),
+      fields: stepFields
+    } : void 0;
+  };
+  const goNextStep = async () => {
+    if (currentStep.value) {
+      const nextStep = getStep(currentStep.value.index + 1);
+      if (nextStep) {
+        await navigateTo({
+          path: nextStep.path,
+          query: useRoute().query
+        });
+      }
+    }
+  };
+  const goPrevStep = async () => {
+    if (currentStep.value) {
+      const nextStep = getStep(currentStep.value.index - 1);
+      if (nextStep) {
+        await navigateTo({
+          path: nextStep.path,
+          query: useRoute().query
+        });
+      }
+    }
+  };
+  return {
+    steps,
+    currentStep,
+    totalSteps,
+    getStep,
+    goNextStep,
+    goPrevStep
+  };
+};

package/dist/runtime/composables/useJourneyConfig.d.ts

@@ -0,0 +1,11 @@
+import type { JourneyLocation } from '../types/JourneyConfig.js';
+export declare const useJourneyConfig: (location: JourneyLocation, options: {
+    locations: JourneyLocation[];
+    initialStep: string;
+    lastUrls: Map<JourneyLocation, string>;
+}) => {
+    locations: JourneyLocation[];
+    initialStep: string;
+    lastUrls: Map<JourneyLocation, string>;
+    previousUrl: string | undefined;
+};

package/dist/runtime/composables/useJourneyConfig.js

@@ -0,0 +1,13 @@
+export const useJourneyConfig = (location, options) => {
+  const {
+    locations,
+    initialStep,
+    lastUrls
+  } = options;
+  return {
+    locations,
+    initialStep,
+    lastUrls,
+    previousUrl: lastUrls.get(locations[locations.indexOf(location) - 1])
+  };
+};

package/dist/runtime/types/JourneyConfig.d.ts

@@ -0,0 +1,9 @@
+export type VerticalCode = 'HL' | 'PL' | 'EN' | 'BB' | 'CI';
+export type JourneyLocation = 'funnel' | 'results' | 'checkout' | 'contact';
+export type StepData = {
+    index: number;
+    number: number;
+    name: string;
+    path: string;
+    fields: string[];
+};

package/dist/runtime/utils/applyProductData.d.ts

@@ -1,8 +1,8 @@
-export declare const applyProductData: (origin: string, options: {
+export declare const applyProductData: (options: {
     journeyId: string | undefined;
     index: number;
     path: string;
     productName: string;
     productId: string;
     providerId: string;
-}) => Promise<Response>;
+}) => void;

package/dist/runtime/utils/applyProductData.js

@@ -1,14 +1,18 @@
-export const applyProductData = (origin, options) => fetch(new URL("/core/apis/data/applyProductData", origin), {
-  method: "POST",
-  body: JSON.stringify({
-    action: "OPEN_APPLICATION_FORM",
-    intent: "apply",
-    journeyId: options.journeyId,
-    path: options.path,
-    position: options.index,
-    offerSelected: options.productName,
-    cggId: options.productId,
-    providerCggId: options.providerId,
-    has_been_clicked: true
-  })
-});
+import { useRuntimeConfig } from "#imports";
+export const applyProductData = (options) => {
+  const { apiURL } = useRuntimeConfig().public;
+  fetch(new URL("/core/apis/data/applyProductData", apiURL), {
+    method: "POST",
+    body: JSON.stringify({
+      action: "OPEN_APPLICATION_FORM",
+      intent: "apply",
+      journeyId: options.journeyId,
+      path: options.path,
+      position: options.index,
+      offerSelected: options.productName,
+      cggId: options.productId,
+      providerCggId: options.providerId,
+      has_been_clicked: true
+    })
+  });
+};

package/dist/runtime/utils/updateForm.d.ts

@@ -1,4 +1,4 @@
-export declare const updateForm: (origin: string, options: {
+export declare const updateForm: (options: {
     journeyId: string | undefined;
     step: number;
     payload: object;

package/dist/runtime/utils/updateForm.js

@@ -1,22 +1,26 @@
-export const updateForm = (origin, options) => fetch(new URL("/core/apis/data/updateForm", origin), {
-  method: "PUT",
-  body: JSON.stringify(
-    Object.fromEntries(
-      Object.entries({
-        eventType: options.eventType || "STEP_CHANGED",
-        isActionEvent: true,
-        journeyId: options.journeyId,
-        stepName: options.stepName,
-        isCompleted: options.isCompleted || false,
-        sentToDialer: options.sentToDialer || true,
-        lastStepNumber: options.step,
-        lastStepType: options.formType,
-        lastStepUrl: window.location.pathname + window.location.search + window.location.hash,
-        data: JSON.stringify({
-          ...options.payload,
-          formType: options.formType
-        })
-      }).filter(([_, v]) => v != null)
+import { useRuntimeConfig } from "#imports";
+export const updateForm = (options) => {
+  const { apiURL } = useRuntimeConfig().public;
+  return fetch(new URL("/core/apis/data/updateForm", apiURL), {
+    method: "PUT",
+    body: JSON.stringify(
+      Object.fromEntries(
+        Object.entries({
+          eventType: options.eventType || "STEP_CHANGED",
+          isActionEvent: true,
+          journeyId: options.journeyId,
+          stepName: options.stepName,
+          isCompleted: options.isCompleted || false,
+          sentToDialer: options.sentToDialer || true,
+          lastStepNumber: options.step,
+          lastStepType: options.formType,
+          lastStepUrl: window.location.pathname + window.location.search + window.location.hash,
+          data: JSON.stringify({
+            ...options.payload,
+            formType: options.formType
+          })
+        }).filter(([_, v]) => v != null)
+      )
     )
-  )
-});
+  });
+};

package/dist/runtime/utils/updateMarketingConsent.d.ts

@@ -1,4 +1,4 @@
-export declare const updateMarketingConsent: (apiUrl: string, options: {
+export declare const updateMarketingConsent: (options: {
     email: string;
     journeyId?: string;
 }) => Promise<Response>;

package/dist/runtime/utils/updateMarketingConsent.js

@@ -1,8 +1,12 @@
-export const updateMarketingConsent = (apiUrl, options) => fetch(new URL("/core/apis/data/verifyConsent", apiUrl), {
-  method: "POST",
-  body: JSON.stringify({
-    email: options.email,
-    currentPageUrl: location.origin + location.pathname,
-    journeyId: options.journeyId
-  })
-});
+import { useRuntimeConfig } from "#imports";
+export const updateMarketingConsent = (options) => {
+  const { apiURL } = useRuntimeConfig().public;
+  return fetch(new URL("/core/apis/data/verifyConsent", apiURL), {
+    method: "POST",
+    body: JSON.stringify({
+      email: options.email,
+      currentPageUrl: location.origin + location.pathname,
+      journeyId: options.journeyId
+    })
+  });
+};

package/dist/runtime/utils/uploadFile.d.ts

@@ -5,5 +5,4 @@ export declare const uploadFile: (options: {
     fileName: string;
     extension: string;
     bucketName: string;
-    apiUrl: string;
 }) => Promise<Response>;

package/dist/runtime/utils/uploadFile.js

@@ -1,4 +1,6 @@
+import { useRuntimeConfig } from "#imports";
 export const uploadFile = (options) => {
+  const { apiURL } = useRuntimeConfig().public;
   const data = new FormData();
   data.append(
     "path",
@@ -6,7 +8,7 @@ export const uploadFile = (options) => {
   );
   data.append("file", options.file);
   data.append("bucketName", options.bucketName);
-  return fetch(`${options.apiUrl}/core/apis/data/saveFileToS3`, {
+  return fetch(new URL("/core/apis/data/saveFileToS3", apiURL), {
     method: "POST",
     body: data
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cja-phoenix",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Phoenix utility",
   "repository": "comparaja/phoenix",
   "license": "MIT",
@@ -35,8 +35,10 @@
   },
   "dependencies": {
     "@nuxt/kit": "^4.0.3",
+    "@nuxtjs/i18n": "^9.5.6",
     "@popperjs/core": "^2.11.8",
     "maska": "^3.0.4",
+    "nuxt-viewport": "^2.3.1",
     "v-calendar": "^3.1.2",
     "vee-validate": "^4.14.7",
     "vue-tippy": "^6.5.0",

package/dist/runtime/types/funnelConfig.d.ts

@@ -1,12 +0,0 @@
-export type FunnelStepBase = Record<string, {
-    component: any;
-    fields?: string[] | ((loanType: string) => string[]);
-}>;
-export type FunnelStepConfig = {
-    step: {
-        current: number;
-        max: number;
-    };
-    component: any;
-    fields: string[];
-};

package/dist/runtime/utils/index.d.ts

@@ -1 +0,0 @@
-export * from './mediaBreakpoints.js';

package/dist/runtime/utils/index.js

@@ -1 +0,0 @@
-export * from "./mediaBreakpoints.js";