cja-phoenix 1.2.39 → 1.2.41

package/dist/runtime/components/form/ToggleInput.vue

@@ -0,0 +1,119 @@
+<template>
+  <FormStructureContainer layout="vertical">
+    <label
+      class="input-wrapper"
+      :class="[`size-${size}`, { 'disabled': disabled, 'full-width': fullWidth }]"
+    >
+      <div class="text-container">
+        <slot v-if="$slots.default" />
+        <Scaffold v-else>
+          {{ label }}
+        </Scaffold>
+      </div>
+      <input
+        v-model="model"
+        type="checkbox"
+        v-bind="{ value, disabled, name }"
+        :aria-label="label"
+      >
+      <div class="switch">
+        <div class="thumb" />
+      </div>
+    </label>
+
+    <FormStructureError
+      v-if="errorMessage && errorDisplay"
+      v-bind="{ size, errorMessage }"
+    />
+  </FormStructureContainer>
+</template>
+
+<script setup>
+import { useField } from "vee-validate";
+const props = defineProps({
+  size: { type: String, required: false, default: "md" },
+  value: { type: null, required: false },
+  disabled: { type: null, required: false },
+  name: { type: null, required: false },
+  label: { type: String, required: false },
+  fullWidth: { type: Boolean, required: false, default: true },
+  validation: { type: Object, required: false },
+  errorDisplay: { type: Boolean, required: false, default: true },
+  validationMode: { type: String, required: false, default: "change" }
+});
+const model = defineModel({
+  required: true
+});
+const { errorMessage, meta, validate } = useField("input", props.validation, {
+  validateOnValueUpdate: props.validationMode == "change",
+  syncVModel: true
+});
+defineExpose({ errorMessage, meta, validate });
+</script>
+
+<style lang="scss" scoped>
+.input-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  gap: 12px;
+  @include input-title;
+
+  &.disabled {
+    cursor: auto;
+  }
+
+  &.full-width {
+    .text-container {
+      flex-grow: 1;
+    }
+  }
+
+  .text-container {
+    user-select: none;
+  }
+
+  input {
+    display: none;
+  }
+
+  .switch {
+    position: relative;
+    width: 36px;
+    height: 14px;
+    border-radius: 7px;
+    background-color: $light-grey;
+    transition: all 0.2s ease-in-out;
+
+    .thumb {
+      position: absolute;
+      top: -3px;
+      left: 0;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: $dark-grey;
+      box-shadow: $box-shadow-s;
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  input:checked + .switch {
+    background-color: $light-blue;
+
+    .thumb {
+      background-color: $main-blue;
+      left: 16px;
+    }
+  }
+
+  input:disabled + .switch {
+    background-color: $disabled-grey;
+
+    .thumb {
+      background-color: $blue-grey;
+    }
+  }
+}
+</style>

package/dist/runtime/components/form/ToggleInput.vue.d.ts

@@ -0,0 +1,43 @@
+import type { InputHTMLAttributes } from 'vue';
+import type { Lazy, Schema } from 'yup';
+type __VLS_Props = {
+    size?: 'sm' | 'md' | 'lg';
+    value?: InputHTMLAttributes['value'];
+    disabled?: InputHTMLAttributes['disabled'];
+    name?: InputHTMLAttributes['name'];
+    label?: string;
+    fullWidth?: boolean;
+    validation?: Schema | Lazy<any>;
+    errorDisplay?: boolean;
+    validationMode?: 'change' | 'none';
+};
+type __VLS_ModelProps = {
+    modelValue: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    errorMessage: import("vue").Ref<string | undefined, string | undefined>;
+    meta: import("vee-validate").FieldMeta<unknown>;
+    validate: import("vee-validate").FieldValidator<unknown>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    errorDisplay: boolean;
+    validationMode: "change" | "none";
+    fullWidth: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/structure/Container.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    layout?: 'vertical' | 'horizontal';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/structure/Container.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="input-container"
+    :class="[layout]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  layout: { type: String, required: false }
+});
+</script>
+
+<style lang="scss" scoped>
+.input-container {
+  display: flex;
+
+  &.vertical {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &.horizontal {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+  }
+}
+</style>

package/dist/runtime/components/form/structure/Container.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    layout?: 'vertical' | 'horizontal';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/structure/Description.d.vue.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes } from 'vue';
+type __VLS_Props = {
+    description: string;
+    size: 'sm' | 'md' | 'lg';
+    disabled: InputHTMLAttributes['disabled'];
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/structure/Description.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="input-description"
+    :class="[`size-${size}`, { disabled }]"
+    v-html="description"
+  />
+</template>
+
+<script setup>
+defineProps({
+  description: { type: String, required: true },
+  size: { type: String, required: true },
+  disabled: { type: null, required: true }
+});
+</script>
+
+<style lang="scss" scoped>
+.input-description {
+  font-size: 14px;
+  line-height: 18px;
+
+  &.disabled {
+    color: $light-grey;
+  }
+}
+</style>

package/dist/runtime/components/form/structure/Description.vue.d.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes } from 'vue';
+type __VLS_Props = {
+    description: string;
+    size: 'sm' | 'md' | 'lg';
+    disabled: InputHTMLAttributes['disabled'];
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/structure/Error.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    errorMessage: string;
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/structure/Error.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="input-error"
+    :class="`size-${size}`"
+  >
+    {{ errorMessage }}
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  errorMessage: { type: String, required: true },
+  size: { type: String, required: false, default: "md" }
+});
+</script>
+
+<style lang="scss" scoped>
+.input-error {
+  color: $alert-red;
+  font-size: 13px;
+  line-height: 17px;
+}
+</style>

package/dist/runtime/components/form/structure/Error.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    errorMessage: string;
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/structure/Title.d.vue.ts

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes } from "vue";
+type __VLS_Props = {
+    title: string;
+    tooltip?: string;
+    disabled?: InputHTMLAttributes["disabled"];
+    size?: "sm" | "md" | "lg";
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/structure/Title.vue

@@ -0,0 +1,43 @@
+<template>
+  <div v-if="title" class="input-title" :class="[`size-${size}`, { disabled }]">
+    <span>{{ title }}</span>
+    <span
+      v-if="tooltip"
+      v-tippy="{ content: tooltip }"
+      class="tooltip m-cgg-icon--question"
+    />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  tooltip: { type: String, required: false },
+  disabled: { type: null, required: false },
+  size: { type: String, required: false, default: "md" }
+});
+</script>
+
+<style lang="scss" scoped>
+.input-title {
+  @include input-title;
+
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-weight: 700;
+
+  .tooltip {
+    font-size: 18px;
+    color: $main-blue;
+
+    @include screen-md-min {
+      font-size: 20px;
+    }
+  }
+
+  &.disabled {
+    color: $light-grey;
+  }
+}
+</style>

package/dist/runtime/components/form/structure/Title.vue.d.ts

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes } from "vue";
+type __VLS_Props = {
+    title: string;
+    tooltip?: string;
+    disabled?: InputHTMLAttributes["disabled"];
+    size?: "sm" | "md" | "lg";
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    tooltip?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,62 @@
+<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 || $slots.description">
+      <slot name="description" v-if="$slots.description" />
+      <scaffold v-else>
+        {{ description }}
+      </scaffold>
+    </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 {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 32px;
+  text-align: center;
+
+  .header-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+
+    .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;
+
+    @include screen-lg-min {
+      font-size: 24px;
+      line-height: 30px;
+    }
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    tooltip?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: 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>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,19 @@
+import type { JourneyLocation, VerticalCode } from '../types/JourneyConfig.js';
+export declare const useCjaGtm: (vertical: VerticalCode, source: JourneyLocation | {
+    formType: string;
+    location: string;
+}) => {
+    trackStepEvent: (options: {
+        stepName: string;
+        stepNumber: number;
+        stepDetails?: any;
+        action?: string;
+    }) => void;
+    trackPurchase: (options: {
+        source: string;
+        product: any;
+        label: string;
+        listing?: string;
+        index?: number;
+    }) => void;
+};

package/dist/runtime/composables/useCjaGtm.js

@@ -0,0 +1,164 @@
+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";
+      case "CC":
+        return "credit-card";
+    }
+  })();
+  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: `${location} Step`,
+      eventDetails: {
+        category,
+        value: options.stepName,
+        noninteraction: false,
+        location,
+        action: options.action,
+        properties: {
+          stepName: options.stepName,
+          stepNumber: options.stepNumber,
+          stepDetails: options.stepDetails,
+          formType
+        }
+      }
+    });
+  };
+  const trackPurchase = (options) => {
+    const {
+      source: source2,
+      product,
+      label,
+      listing,
+      index
+    } = options;
+    gtm?.trackEvent({
+      event: "purchase",
+      eventDetails: {
+        source: `Conversion - ${source2}`,
+        action: "Results Purchase",
+        label,
+        category,
+        location,
+        properties: {
+          list: listing
+        }
+      },
+      ecommerce: {
+        purchase: {
+          actionField: {
+            id: Math.floor(
+              Math.random() * (999999999999 - Math.pow(10, 11)) + Math.pow(10, 11)
+            ),
+            revenue: "5.00",
+            action: "purchase"
+          },
+          products: (() => {
+            switch (category) {
+              case "energy":
+                return [
+                  {
+                    name: label,
+                    id: product.productId,
+                    brand: product.provider,
+                    position: product.index + 1,
+                    dimension3: source2,
+                    category,
+                    list: listing,
+                    price: "5.00",
+                    quantity: 1
+                  }
+                ];
+              case "mortgage":
+                return [
+                  {
+                    name: product.name,
+                    id: product.cggId,
+                    brand: product.provider.name,
+                    position: index,
+                    scoreValue: null,
+                    approvalRate: "unavailable",
+                    dimension3: source2,
+                    dimension6: `apr:${product.attributes.taeg}, totalRepayment:${product.attributes.mtic}, monthlyRepayment:${product.attributes.installment}`,
+                    category,
+                    list: listing,
+                    price: "5.00",
+                    quantity: 1
+                  }
+                ];
+              case "broadband":
+                return [
+                  {
+                    name: product.description,
+                    id: product.cggId,
+                    brand: product.name,
+                    position: index,
+                    dimension3: source2,
+                    dimension4: product.banner.bannerType,
+                    dimension5: product.showCTALeadCapture,
+                    dimension6: `service: ${product.offer.service}, noOfChannels: ${product.tv.noOfChannels}, maxSpeedDownload: ${product.speed.maxSpeedDownload}, publicPrice: ${product.fee.publicPrice}`,
+                    category,
+                    list: listing,
+                    price: "5.00",
+                    quantity: 1
+                  }
+                ];
+              case "credit-card":
+                return [
+                  {
+                    name: product.description,
+                    id: product.cggId,
+                    brand: product.name,
+                    position: index,
+                    approvalRate: product.approvalRate,
+                    dimension3: source2,
+                    dimension4: product.banner.bannerType,
+                    dimension5: product.showCTALeadCapture,
+                    dimension6: `annualFee: ${product.fee.annualFee}, basicAPR: ${product.fee.taeg}, basic: ${product.fee.tan}`,
+                    category: "credit-card",
+                    list: listing,
+                    price: "5.00",
+                    quantity: 1
+                  }
+                ];
+              default:
+                console.error(
+                  `Unrecognized category ${category}, implement vertical specific gtm product`
+                );
+                return [{}];
+            }
+          })()
+        }
+      }
+    });
+  };
+  return {
+    trackStepEvent,
+    trackPurchase
+  };
+};