cja-phoenix 0.6.0 → 0.6.2

package/src/components/composite/CheckoutCrossSell.vue

@@ -0,0 +1,478 @@
+<template>
+  <div
+    class="cross-sell-container"
+    v-if="activeViewport.lg && !loading.messages"
+  >
+    <Transition>
+      <div class="cross-sell-wrapper" v-if="step == 1">
+        <h2>{{ t("xsell.checkout.title") }}</h2>
+        <p v-html="t('xsell.checkout.description')"></p>
+
+        <div class="options-container">
+          <TileCheckboxInput
+            v-for="vert in crossSellOptions"
+            :class="[`checkbox-${vert.class}`]"
+            :image="vert.image"
+            :label="vert.label"
+            :description="vert.description"
+            :model-value="crossSellData[vert.value]"
+            @update:model-value="(v) => (crossSellData[vert.value] = v)"
+          />
+        </div>
+
+        <div class="btn-container">
+          <CjaButton :color="'orange'" :size="'lg'" @click="submit">
+            {{ t("xsell.checkout.btn.submit") }}
+          </CjaButton>
+        </div>
+      </div>
+      <div class="cross-sell-wrapper" v-else>
+        <div class="icon-wrapper">
+          <div class="success-icon m-cgg-icon--check2"></div>
+        </div>
+        <h2>{{ t("xsell.checkout.success.title") }}</h2>
+        <p>{{ t("xsell.checkout.success.description") }}</p>
+      </div>
+    </Transition>
+  </div>
+  <Scaffold v-else-if="!loading.messages && mobileBannerActive">
+    <Teleport to="body">
+      <div class="cross-sell-spacer" ref="spacerEl"></div>
+      <div class="cross-sell-banner" ref="bannerEl">
+        <div class="banner-header">
+          <span v-html="t('xsell.checkout.banner.title')"></span>
+          <button
+            class="btn-close m-cgg-icon--cross2"
+            @click="mobileBannerActive = false"
+          ></button>
+        </div>
+        <div class="banner-description">
+          <span class="m-cgg-icon--comparaja">
+            <span class="path1"></span>
+            <span class="path2"></span>
+          </span>
+          <span v-html="t('xsell.checkout.banner.description')"></span>
+        </div>
+        <div class="btn-container">
+          <CjaButton @click="openModal">
+            {{ t("xsell.checkout.banner.btn") }}
+          </CjaButton>
+        </div>
+      </div>
+    </Teleport>
+    <Modal ref="modalEl">
+      <template v-slot:body>
+        <div class="cross-sell-modal-content" v-if="step == 1">
+          <h3>{{ t("xsell.checkout.modal.body.title") }}</h3>
+          <p>{{ t("xsell.checkout.modal.body.description") }}</p>
+          <div class="options-container">
+            <TileCheckboxInput
+              v-for="vert in crossSellOptions"
+              :class="[`checkbox-${vert.class}`]"
+              :image="vert.image"
+              :label="vert.label"
+              :description="vert.description"
+              :model-value="crossSellData[vert.value]"
+              @update:model-value="(v) => (crossSellData[vert.value] = v)"
+            />
+          </div>
+        </div>
+        <div class="cross-sell-modal-content" v-else>
+          <div class="icon-wrapper">
+            <div class="success-icon m-cgg-icon--check2"></div>
+          </div>
+          <div class="success-text">
+            <h3>{{ t("xsell.checkout.success.title") }}</h3>
+            <p>{{ t("xsell.checkout.success.description") }}</p>
+          </div>
+        </div>
+      </template>
+      <template v-slot:footer>
+        <div class="modal-btn-container">
+          <CjaButton @click="submit">
+            {{ t("xsell.checkout.modal.footer.btn") }}
+          </CjaButton>
+        </div>
+      </template>
+    </Modal>
+  </Scaffold>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onBeforeMount, computed } from "vue";
+import { I18nOptions, useI18n } from "vue-i18n";
+import TileCheckboxInput from "../forms/TileCheckboxInput.vue";
+import Scaffold from "../structural/Scaffold.vue";
+import Modal from "../structural/Modal.vue";
+import CjaButton from "../structural/CjaButton.vue";
+import { useViewportDetector, useGlobalProperties } from "../../utils";
+
+const props = defineProps<{
+  activeVertical?: string;
+  journeyId: string | undefined;
+  data: {
+    name: string | undefined;
+    phone: string | undefined;
+    email: string | undefined;
+    marketingOptIn: boolean | undefined;
+  };
+}>();
+
+const loading = ref({
+  messages: true,
+});
+const { activeViewport } = useViewportDetector();
+const spacerEl = ref();
+const bannerEl = ref();
+const { imageURL, apiURL } = useGlobalProperties();
+
+const { t, setLocaleMessage } = useI18n({
+  legacy: false,
+  locale: "PT",
+  fallbackLocale: "PT",
+  messages: {},
+  missingWarn: false,
+  warnHtmlMessage: false,
+  useScope: "local",
+});
+
+const step = ref(1);
+
+const crossSellOptions = computed(() =>
+  [
+    {
+      class: "all",
+      value: "all",
+      image: imageURL + "xsell-checkout-cpj.svg",
+      label: t("xsell.checkout.input.all.title"),
+      description: t("xsell.checkout.input.all.description"),
+    },
+    {
+      class: "hl",
+      value: "mg",
+      image: imageURL + "xsell-checkout-hl.svg",
+      label: t("xsell.checkout.input.hl.title"),
+      description: t("xsell.checkout.input.hl.description"),
+    },
+    {
+      class: "pl",
+      value: "pl",
+      image: imageURL + "xsell-checkout-pl.svg",
+      label: t("xsell.checkout.input.pl.title"),
+      description: t("xsell.checkout.input.pl.description"),
+    },
+    {
+      class: "cc",
+      value: "cc",
+      image: imageURL + "xsell-checkout-cc.svg",
+      label: t("xsell.checkout.input.cc.title"),
+      description: t("xsell.checkout.input.cc.description"),
+    },
+    {
+      class: "pl",
+      value: "csc",
+      image: imageURL + "xsell-checkout-csc.svg",
+      label: t("xsell.checkout.input.csc.title"),
+      description: t("xsell.checkout.input.csc.description"),
+    },
+    {
+      class: "ci",
+      value: "ci",
+      image: imageURL + "xsell-checkout-in.svg",
+      label: t("xsell.checkout.input.ci.title"),
+      description: t("xsell.checkout.input.ci.description"),
+    },
+  ].filter((o) => o.value != props.activeVertical)
+);
+
+const crossSellData = ref({
+  all: true,
+  mg: false,
+  pl: false,
+  cc: false,
+  csc: false,
+  ci: false,
+});
+
+const modalEl = ref();
+const mobileBannerActive = ref(true);
+
+onBeforeMount(() => {
+  fetch("/Internationalization?contains=xsell.checkout")
+    .then((response) => response.json())
+    .then((data: I18nOptions["messages"]) => {
+      if (data) {
+        loading.value.messages = false;
+        setLocaleMessage("PT", data);
+      }
+    });
+});
+
+watch(
+  () => loading.value.messages,
+  () => {
+    window.requestAnimationFrame(() => {
+      if (!activeViewport.value.lg && spacerEl.value) {
+        spacerEl.value.style.height = `${bannerEl.value.offsetHeight}px`;
+      }
+    });
+  }
+);
+
+watch(
+  () => Object.entries(crossSellData.value),
+  (newVal, oldVal) => {
+    const newObj = Object.fromEntries(newVal);
+    const oldObj = Object.fromEntries(oldVal);
+
+    if (newObj.all && !oldObj.all) {
+      for (const v in crossSellData.value) {
+        if (v != "all") {
+          crossSellData.value[v] = false;
+        }
+      }
+    } else if (newVal.filter((v) => v[0] != "all" && v[1]).length) {
+      crossSellData.value.all = false;
+    }
+  }
+);
+
+const openModal = () => {
+  step.value = 1;
+  crossSellData.value = {
+    all: true,
+    mg: false,
+    pl: false,
+    cc: false,
+    csc: false,
+    ci: false,
+  };
+  modalEl.value.openModal();
+};
+
+const submit = () => {
+  const payload = Object.entries(crossSellData.value)
+    .filter((v) => v[1])
+    .map((v) => {
+      switch (v[0]) {
+        case "csc":
+          return "PL";
+        case "all":
+          return "BLOG";
+        default:
+          return v[0].toUpperCase();
+      }
+    });
+
+  fetch(new URL("/core/apis/data/updateForm", apiURL), {
+    method: "PUT",
+    body: JSON.stringify({
+      journeyId: props.journeyId,
+      eventType: "LEAD_CAPTURE",
+      isActionEvent: true,
+      stepName: "LEAD_CAPTURE",
+      isCompleted: true,
+      sentToDialer: false,
+      lastStepNumber: 0,
+      lastStepType: "LEAD_CAPTURE",
+      lastStepUrl:
+        window.location.pathname +
+        window.location.search +
+        window.location.hash,
+      data: JSON.stringify({ verticalCodeSelector: payload }),
+    }),
+  });
+
+  fetch(new URL("/core/apis/data/captureLead", apiURL), {
+    method: "POST",
+    body: JSON.stringify({
+      name: props.data.name,
+      phone: props.data.phone,
+      email: props.data.email,
+      verticalCode: payload.length == 1 ? payload[0] : "BLOG",
+      utmSource: "RESULTS_PAGE",
+      verticalCodeSelector: payload,
+      sentToSalesforce: props.data.marketingOptIn,
+      sentToDialer: false,
+      fromBlog: true,
+      xSell: true,
+    }),
+  });
+
+  step.value = 2;
+
+  if (!activeViewport.value.lg) {
+    setTimeout(() => {
+      modalEl.value.closeModal();
+      mobileBannerActive.value = false;
+    }, 3000);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
+.cross-sell-container {
+  .cross-sell-wrapper {
+    max-width: 1050px;
+    margin: 0 auto;
+  }
+
+  h2 {
+    margin: 0 0 25px;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 27px;
+    text-align: center;
+    color: #155072;
+  }
+
+  p {
+    margin: 0 0 30px;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+  }
+
+  .btn-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 40px;
+  }
+}
+
+.options-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  @media screen and (min-width: 992px) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 30px;
+  }
+
+  [class*="checkbox-"] {
+    @media screen and (min-width: 992px) {
+      flex-basis: 225px;
+    }
+  }
+
+  .checkbox-hl:not(.checked) {
+    background: linear-gradient(75.75deg, #f1f7ee 1.02%, #ffffff 100%);
+  }
+
+  .checkbox-pl:not(.checked) {
+    background: linear-gradient(80.77deg, #f4f9fc 1.02%, #ffffff 100%), #ffffff;
+  }
+
+  .checkbox-cc:not(.checked) {
+    background: linear-gradient(80.77deg, #fff7ff 1.02%, #ffffff 100%), #ffffff;
+  }
+
+  .checkbox-ci:not(.checked) {
+    background: linear-gradient(80.77deg, #f6f4ff 1.02%, #ffffff 100%), #ffffff;
+  }
+}
+
+.cross-sell-banner {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 18px 16px;
+  background-color: #fff;
+  box-shadow: 0px -4px 13px rgba(0, 0, 0, 0.1);
+
+  .banner-header {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    font-size: 16px;
+    line-height: 16px;
+    margin-bottom: 15px;
+
+    span {
+      flex-basis: 360px;
+    }
+
+    .btn-close {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      padding: 0;
+      border: none;
+      outline: none;
+      font-size: 24px;
+    }
+  }
+
+  .banner-description {
+    max-width: 360px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    font-size: 14px;
+    line-height: 21px;
+    margin-bottom: 20px;
+
+    .m-cgg-icon--comparaja {
+      font-size: 30px;
+    }
+  }
+
+  .btn-container {
+    display: grid;
+    max-width: 360px;
+    margin: 0 auto;
+  }
+}
+
+.cross-sell-modal-content {
+  h3 {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 29px;
+    margin: 10px 0 15px;
+  }
+
+  p {
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0 0 25px;
+  }
+
+  .success-text {
+    text-align: center;
+  }
+}
+
+.modal-btn-container {
+  display: grid;
+}
+
+.icon-wrapper {
+  margin: 0 auto;
+
+  .success-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    color: #fff;
+    font-weight: 700;
+    user-select: none;
+    background-color: #77aa43;
+    height: 80px;
+    width: 80px;
+    margin: 0 auto 30px;
+    font-size: 60px;
+  }
+}
+</style>

package/src/components/composite/CheckoutLayout.vue

@@ -0,0 +1,59 @@
+<template>
+  <GridContainer class="checkout-container">
+    <GridItem
+      class="checkout-wrapper"
+      :size-sm="2"
+      :size-md="4"
+      :size-lg="$slots.sidebar ? 8 : 12"
+    >
+      <slot name="content"></slot>
+    </GridItem>
+    <GridItem
+      class="checkout-sidebar"
+      v-if="$slots.sidebar"
+      :size-sm="2"
+      :size-md="4"
+      :size-lg="4"
+      :style="{ background: activeViewport.lg ? sidebarBackground : '' }"
+    >
+      <slot name="sidebar"></slot>
+    </GridItem>
+  </GridContainer>
+</template>
+
+<script lang="ts" setup>
+import GridContainer from "../structural/GridContainer.vue";
+import GridItem from "../structural/GridItem.vue";
+import { useViewportDetector } from "../../utils";
+
+const { activeViewport } = useViewportDetector();
+
+defineProps<{
+  sidebarBackground: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.checkout-container {
+  .checkout-wrapper {
+    max-width: 750px;
+    padding: 32px 0;
+    margin: 0 auto;
+
+    @media screen and (min-width: 1024px) {
+      padding: 56px 0;
+    }
+  }
+
+  .checkout-sidebar {
+    padding: 32px 0;
+    border-top: 1px solid #dedede;
+
+    @media screen and (min-width: 992px) {
+      padding: 56px 0 56px 24px;
+      box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
+      border-top: none;
+    }
+  }
+}
+</style>

package/src/components/composite/CheckoutMilestones.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="checkout-milestones">
+    <ul>
+      <li
+        v-for="(milestone, i) in milestones"
+        :class="[`milestone-${milestone.status}`]"
+      >
+        <span
+          class="step-icon"
+          :class="{ 'm-cgg-icon--check2': milestone.status == 'past' }"
+        >
+          {{ milestone.status != "past" ? i + 1 : "" }}
+        </span>
+        <div class="text-container">
+          <div class="title">
+            {{ milestone.title }}
+          </div>
+          <div class="description" v-if="milestone.description">
+            {{ milestone.description }}
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { CheckoutMilestone } from "../../types";
+
+defineProps<{
+  milestones: CheckoutMilestone[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
+.checkout-milestones {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+
+    li {
+      position: relative;
+      display: flex;
+      gap: 15px;
+      padding: 0 16px;
+
+      $step-icon-size: 25px;
+
+      .step-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: $step-icon-size;
+        height: $step-icon-size;
+        border-radius: 50%;
+        color: #fff;
+        font-weight: 700;
+        font-size: 12px;
+        line-height: 13px;
+        flex-shrink: 0;
+      }
+
+      .text-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .title {
+          font-size: 16px;
+          line-height: 20px;
+          font-weight: 700;
+
+          @media screen and (min-width: $break-md-min) {
+            font-size: 20px;
+            line-height: 24px;
+          }
+        }
+
+        .description {
+          font-size: 14px;
+          line-height: 17px;
+
+          @media screen and (min-width: $break-md-min) {
+            font-size: 16px;
+            line-height: 19px;
+          }
+        }
+      }
+
+      &.milestone-past,
+      &.milestone-future {
+        &::before,
+        &::after {
+          position: absolute;
+          left: 27px;
+          width: 3px;
+        }
+      }
+
+      &.milestone-past {
+        &::after {
+          content: "";
+          top: $step-icon-size;
+          background-color: #77aa43;
+          height: calc(100% - $step-icon-size + 35px);
+        }
+
+        .step-icon {
+          background-color: #77aa43;
+        }
+      }
+
+      &.milestone-future {
+        &::before,
+        &::after {
+          content: "";
+          background-color: #9fabbc;
+        }
+
+        &::before {
+          top: -35px;
+          height: 35px;
+        }
+
+        &:not(:last-child)::after {
+          top: $step-icon-size;
+          height: calc(100% - $step-icon-size);
+        }
+
+        .step-icon {
+          background-color: #9fabbc;
+        }
+      }
+
+      &.milestone-current {
+        padding: 15px;
+        background: #ffffff;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+        border: 1px solid #dedede;
+        border-radius: 16px;
+        color: #076b9c;
+
+        .step-icon {
+          background-color: #076b9c;
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>