cja-phoenix 0.6.0 → 0.6.2

package/src/utils/findScrollAncestor.ts

@@ -0,0 +1,16 @@
+export const findScrollAncestor = (element) => {
+  if (!element) {
+    return undefined;
+  }
+
+  let parent = element.parentElement;
+  while (parent) {
+    const { overflowY } = window.getComputedStyle(parent);
+    if (overflowY === "auto" || overflowY === "scroll") {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+
+  return document.documentElement;
+};

package/src/utils/formValidations.ts

@@ -0,0 +1,192 @@
+import * as yup from "yup";
+
+export const stringRequired = (
+  messages: { required: string; minLength?: string; maxLength?: string },
+  options?: { minLength?: number; maxLength?: number }
+) => {
+  let validation = yup
+    .string()
+    .typeError(messages.required)
+    .required(messages.required);
+
+  if (options?.minLength && messages.minLength) {
+    validation = validation.min(options.minLength, messages.minLength);
+  }
+
+  if (options?.maxLength && messages.maxLength) {
+    validation = validation.min(options.maxLength, messages.maxLength);
+  }
+
+  return validation;
+};
+
+export const booleanRequired = (
+  messages: { required: string; strictValue?: string },
+  options?: { strictValue?: boolean }
+) => {
+  let validation = yup
+    .boolean()
+    .typeError(messages.required)
+    .required(messages.required);
+
+  if (options?.strictValue && messages.strictValue) {
+    validation = validation.oneOf([options.strictValue], messages.strictValue);
+  }
+
+  return validation;
+};
+
+export const emailRequired = (messages: { required: string; email: string }) =>
+  yup
+    .string()
+    .typeError(messages.required)
+    .required(messages.required)
+    .email(messages.email);
+
+export const numberRequired = (
+  messages: { required: string; min?: string; max?: string },
+  options?: {
+    min?: number;
+    max?: number;
+  }
+) => {
+  let validation = yup
+    .number()
+    .typeError(messages.required)
+    .required(messages.required);
+
+  if (options?.min && messages.min) {
+    validation = validation.min(options.min, messages.min);
+  }
+
+  if (options?.max && messages.max) {
+    validation = validation.max(options.max, messages.max);
+  }
+
+  return validation;
+};
+
+export const phoneRequired = (messages: { required: string; phone: string }) =>
+  yup
+    .string()
+    .typeError(messages.required)
+    .required(messages.required)
+    .min(9, messages.phone);
+
+export const postalCodeRequired = (messages: {
+  required: string;
+  postalCode: string;
+}) =>
+  yup
+    .string()
+    .typeError(messages.required)
+    .required(messages.required)
+    .min(8, messages.postalCode);
+
+export const fileDocumentRequired = (
+  messages: {
+    required: string;
+    extension: string;
+  },
+  options?: {
+    validExtensions?: RegExp;
+  }
+) =>
+  yup.object({
+    name: yup.string(),
+    extension: yup
+      .string()
+      .matches(
+        options?.validExtensions || /(png|jpg|pdf)/g,
+        messages.extension
+      ),
+    file: yup.lazy(() => yup.mixed().required(messages.required)),
+  });
+
+export const dateRequired = (
+  messages: {
+    required: string;
+    invalid: string;
+    minDate?: string;
+    maxDate?: string;
+  },
+  options?: {
+    format?: "mm/yyyy" | "dd/mm/yyyy";
+    maxDate?: Date;
+    minDate?: Date;
+  }
+) => {
+  const totalSplitLength = options?.format == "mm/yyyy" ? 2 : 3;
+  const yearPosition = options?.format == "mm/yyyy" ? 1 : 2;
+
+  let validation = yup
+    .date()
+    .transform((v, ogV) =>
+      !(ogV instanceof Date) &&
+      ogV.split("/").length == 3 &&
+      ogV.split("/")[2].length == 4
+        ? new Date(ogV.split("/").reverse().join("-"))
+        : v
+    )
+    .typeError(messages.invalid)
+    .required(messages.required)
+    .test(
+      "dateTest",
+      messages.invalid,
+      (v, context) =>
+        context.originalValue.split("/").length == totalSplitLength &&
+        context.originalValue.split("/")[yearPosition].length == 4
+    );
+
+  if (options?.minDate && messages.minDate) {
+    validation = validation.min(options.minDate, messages.minDate);
+  }
+
+  if (options?.maxDate && messages.maxDate) {
+    validation = validation.max(options.maxDate, messages.maxDate);
+  }
+
+  return validation;
+};
+
+export const nifRequired = (messages: { required: string; invalid: string }) =>
+  yup
+    .string()
+    .typeError(messages.required)
+    .required(messages.required)
+    .min(9, messages.invalid)
+    .test("nifTest", messages.invalid, (v) => {
+      if (!v) return false;
+      var nif = v!.toString().split("");
+      var mod =
+        (Number(nif[7]) * 2 +
+          Number(nif[6]) * 3 +
+          Number(nif[5]) * 4 +
+          Number(nif[4]) * 5 +
+          Number(nif[3]) * 6 +
+          Number(nif[2]) * 7 +
+          Number(nif[1]) * 8 +
+          Number(nif[0]) * 9) %
+        11;
+      return Number(nif[8]) == (mod == 0 || mod == 1 ? 0 : 11 - mod);
+    });
+
+export const arrayRequired = (
+  messages: { required: string; minLength?: string; maxLength?: string },
+  options?: { minLength?: number; maxLength?: number }
+) => {
+  let validation = yup
+    .array()
+    .typeError(messages.required)
+    .min(1, messages.required);
+
+  if (options?.minLength && messages.minLength) {
+    validation = validation.min(options.minLength, messages.minLength);
+  }
+
+  if (options?.maxLength && messages.maxLength) {
+    validation = validation.min(options.maxLength, messages.maxLength);
+  }
+
+  return validation;
+};

package/src/utils/generateRoutes.ts

@@ -0,0 +1,36 @@
+import { RouteRecordRaw } from "vue-router";
+
+export const generateRoutes = (routes: any[]) => {
+  let assembledRoutes: RouteRecordRaw[] = [
+    {
+      path: "/",
+      redirect: "/step1",
+      name: "Redirect",
+    },
+  ];
+
+  let step = 1;
+  let stepDisplay = 1;
+  const routesNavLength = routes.filter((r) => !r.redirect).length;
+
+  routes.forEach((route) => {
+    if (!route.redirect) {
+      assembledRoutes.push({
+        ...route,
+        path: `/step${stepDisplay}`,
+        meta: {
+          ...route.meta,
+          step: step,
+          displayStep: stepDisplay,
+          displayTotalSteps: routesNavLength,
+        },
+      });
+
+      step++, stepDisplay++;
+    } else {
+      assembledRoutes.push(route);
+    }
+  });
+
+  return assembledRoutes;
+};

package/src/utils/getFromUrl.ts

@@ -0,0 +1,25 @@
+export const getFromUrl = (searchParam: string, removeFromUrl?: boolean) => {
+  const url = new URL(window.location.href);
+
+  return url.searchParams.has(searchParam)
+    ? (() => {
+        const param = url.searchParams
+          .getAll(searchParam)
+          .map((p) => decodeURIComponent(p));
+
+        if (removeFromUrl) {
+          url.searchParams.delete(searchParam);
+          history.replaceState(history.state, "", url.toString());
+        }
+
+        switch (param.length) {
+          case 0:
+            return undefined;
+          case 1:
+            return param[0];
+          default:
+            return param;
+        }
+      })()
+    : undefined;
+};

package/src/utils/getMessages.ts

@@ -0,0 +1,23 @@
+import { I18nOptions, createI18n } from "vue-i18n";
+import { useGlobalProperties } from "./useGlobalProperties";
+
+export const getI18nMessages = async (queryMessages: string) => {
+  const i18n = createI18n({
+    locale: "PT",
+    fallbackLocale: "PT",
+    messages: undefined,
+    legacy: false,
+    missingWarn: false,
+    fallbackWarn: false,
+    warnHtmlMessage: false,
+  });
+  const { apiURL } = useGlobalProperties();
+
+  await fetch(`${apiURL}/Internationalization?contains=${queryMessages}`)
+    .then((response) => response.json())
+    .then((data: I18nOptions["messages"]) =>
+      i18n.global.setLocaleMessage("PT", data || {})
+    );
+
+  return i18n;
+};

package/src/utils/gtm.ts

@@ -0,0 +1,158 @@
+import { GtmSupport, useGtm } from "@gtm-support/vue-gtm";
+
+export const useCjaGtm = (
+  gtm: GtmSupport | undefined,
+  gtmOptions: {
+    category: string;
+    formType: string;
+    location: string;
+  }
+) => {
+  if (gtm === undefined) {
+    console.error("GTM instance is undefined");
+  }
+
+  const trackStepEvent = (options: {
+    stepName: string;
+    stepNumber: number;
+    stepDetails?: any;
+    action?: string;
+  }) => {
+    gtm?.trackEvent({
+      event: `${gtmOptions.location} Step`,
+      eventDetails: {
+        category: gtmOptions.category,
+        value: options.stepName,
+        noninteraction: false,
+        location: gtmOptions.location,
+        action: options.action,
+        properties: {
+          stepName: options.stepName,
+          stepNumber: options.stepNumber,
+          stepDetails: options.stepDetails,
+          formType: gtmOptions.formType,
+        },
+      },
+    });
+  };
+
+  const trackResultsLoad = (options: {
+    time: number;
+    products: any[];
+    listing: string | undefined;
+  }) => {
+    gtm?.trackEvent({
+      event: "Impressions",
+      eventDetails: {
+        category: gtmOptions.category,
+        location: gtmOptions.location,
+        action: "Results Impressions",
+        loadTime: options.time || 0,
+        properties: {
+          list: options.listing,
+        },
+        ecommerce: {
+          impressions: options.products.map((p: any, i: number) => ({
+            name: p.cardTitle,
+            id: p.productId,
+            brand: p.provider,
+            position: i + 1,
+            category: gtmOptions.category,
+            list: options.listing,
+            price: "5.00",
+            quantity: 1,
+          })),
+        },
+      },
+    });
+  };
+
+  const trackPurchase = (options: {
+    source: string;
+    product: any;
+    listing: string | undefined;
+  }) => {
+    gtm?.trackEvent({
+      event: "purchase",
+      eventDetails: {
+        label: options.product.cardTitle,
+        source: `Conversion - ${options.source}`,
+        category: gtmOptions.category,
+        location: gtmOptions.location,
+        action: "Results Purchase",
+        properties: {
+          list: options.listing,
+        },
+        ecommerce: {
+          purchase: {
+            actionField: {
+              id: Math.floor(
+                Math.random() * (999999999999 - Math.pow(10, 11)) +
+                  Math.pow(10, 11)
+              ),
+              revenue: "5.00",
+              action: "purchase",
+            },
+            products: [
+              {
+                name: options.product.cardTitle,
+                id: options.product.productId,
+                brand: options.product.provider,
+                position: options.product.index + 1,
+                dimension3: options.source,
+                category: "energy",
+                list: options.listing,
+                price: "5.00",
+                quantity: 1,
+              },
+            ],
+          },
+        },
+      },
+    });
+  };
+
+  const trackDetail = (options: {
+    product: any;
+    listing: string | undefined;
+  }) => {
+    gtm?.trackEvent({
+      event: "productDetail",
+      eventDetails: {
+        category: gtmOptions.category,
+        location: gtmOptions.location,
+        action: "Results Detail",
+        properties: {
+          list: options.listing,
+        },
+        ecommerce: {
+          detail: {
+            actionField: {
+              list: options.listing,
+              action: "detail",
+            },
+            products: [
+              {
+                name: options.product.cardTitle,
+                id: options.product.productId,
+                brand: options.product.provider,
+                position: options.product.index + 1,
+                category: gtmOptions.category,
+                list: options.listing,
+                price: "5.00",
+                quantity: 1,
+              },
+            ],
+          },
+        },
+      },
+    });
+  };
+
+  return {
+    trackStepEvent,
+    trackResultsLoad,
+    trackPurchase,
+    trackDetail,
+  };
+};

package/src/utils/index.ts

@@ -0,0 +1,31 @@
+import * as formValidation from "./formValidations";
+import { generateRoutes } from "./generateRoutes";
+import { useViewportDetector } from "./useViewportDetector";
+import { useGlobalProperties } from "./useGlobalProperties";
+import { jsonReviver } from "./jsonReviver";
+import { getI18nMessages } from "./getMessages";
+import { findScrollAncestor } from "./findScrollAncestor";
+import { updateForm } from "./updateForm";
+import { getFromUrl } from "./getFromUrl";
+import { uploadFile } from "./uploadFile";
+import { useCjaGtm } from "./gtm";
+import { getCjaRouter } from "./cjaRouter";
+import { getCjaStore } from "./cjaStore";
+import { getStoryblokUrl } from "./storyblokLink";
+
+export {
+  formValidation,
+  generateRoutes,
+  useViewportDetector,
+  useGlobalProperties,
+  jsonReviver,
+  getI18nMessages,
+  findScrollAncestor,
+  updateForm,
+  getFromUrl,
+  uploadFile,
+  useCjaGtm,
+  getCjaRouter,
+  getCjaStore,
+  getStoryblokUrl,
+};

package/src/utils/jsonReviver.ts

@@ -0,0 +1,20 @@
+export const jsonReviver = (data: any) =>
+  JSON.parse(data, (k, v) => {
+    if (v === "true" || v === "false") {
+      return v === "true";
+    }
+
+    if (Number(v) || v === "0") {
+      return Number(v);
+    }
+
+    if (v === "undefined") {
+      return undefined;
+    }
+
+    if (v === "null") {
+      return null;
+    }
+
+    return v;
+  });

package/src/utils/storyblokLink.ts

@@ -0,0 +1,4 @@
+import { StoryLink } from "../types/Storyblok";
+
+export const getStoryblokUrl = (link: StoryLink) =>
+  link.linktype == "story" ? `/${link.story?.url}` : link.url;

package/src/utils/updateForm.ts

@@ -0,0 +1,40 @@
+import { useGlobalProperties } from "./useGlobalProperties";
+
+export const updateForm = (options: {
+  journeyId: string | undefined;
+  step: number;
+  payload: any;
+  stepName: string;
+  isCompleted?: boolean;
+  sentToDialer?: boolean;
+  eventType?: string;
+  formType: string;
+}) => {
+  const { apiURL } = useGlobalProperties();
+
+  return fetch(`${apiURL}/core/apis/data/updateForm`, {
+    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/src/utils/uploadFile.ts

@@ -0,0 +1,25 @@
+import { useGlobalProperties } from "./useGlobalProperties";
+
+export const uploadFile = (options: {
+  basePath: string;
+  journeyId: string;
+  file: any;
+  fileName: string;
+  extension: string;
+  bucketName: string;
+}) => {
+  const data = new FormData();
+  const { apiURL } = useGlobalProperties();
+
+  data.append(
+    "path",
+    `${options.basePath}/${options.journeyId}/${options.fileName}.${options.extension}`
+  );
+  data.append("file", options.file);
+  data.append("bucketName", options.bucketName);
+
+  return fetch(`${apiURL}/core/apis/data/saveFileToS3`, {
+    method: "POST",
+    body: data,
+  });
+};

package/src/utils/useGlobalProperties.ts

@@ -0,0 +1,11 @@
+import { getCurrentInstance } from "vue";
+
+export const useGlobalProperties = () => {
+  const props = getCurrentInstance()?.appContext.config.globalProperties;
+
+  return {
+    apiURL: props?.apiURL,
+    imageURL: props?.imageURL,
+    providerImageURL: props?.providerImageURL,
+  };
+};

package/src/utils/useViewportDetector.ts

@@ -0,0 +1,35 @@
+import { createSharedComposable } from "@vueuse/core";
+import { onMounted, onUnmounted, ref } from "vue";
+
+const viewportDetector = (
+  breakpoints: Record<string, number> = {
+    xs: 0,
+    sm: 420,
+    md: 768,
+    lg: 1024,
+    xl: 1200,
+  }
+) => {
+  const activeViewport = ref<Record<string, boolean>>({});
+
+  const setViewports = () => {
+    for (const key in breakpoints) {
+      activeViewport.value[key] = window
+        ? window.matchMedia(`(min-width: ${breakpoints[key]}px)`).matches
+        : false;
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener("resize", setViewports);
+    setViewports();
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("resize", setViewports);
+  });
+
+  return { activeViewport };
+};
+
+export const useViewportDetector = createSharedComposable(viewportDetector);