cja-phoenix 0.2.9 → 0.2.11

package/src/components/composite/CheckoutLayout.vue

@@ -10,9 +10,11 @@
     </GridItem>
     <GridItem
       class="checkout-sidebar"
-      v-if="activeViewport.lg && $slots.sidebar"
+      v-if="$slots.sidebar"
+      :size-sm="2"
+      :size-md="4"
       :size-lg="4"
-      :style="{ background: sidebarBackground }"
+      :style="{ background: activeViewport.lg ? sidebarBackground : '' }"
     >
       <slot name="sidebar"></slot>
     </GridItem>
@@ -35,7 +37,7 @@ defineProps<{
 .checkout-container {
   .checkout-wrapper {
     max-width: 750px;
-    padding: 32px 16px;
+    padding: 32px 0;
     margin: 0 auto;
 
     @media screen and (min-width: 1024px) {
@@ -44,7 +46,7 @@ defineProps<{
   }
 
   .checkout-sidebar {
-    padding: 32px 16px;
+    padding: 32px 0;
     border-top: 1px solid #dedede;
 
     @media screen and (min-width: 992px) {

package/src/components/composite/CheckoutMilestones.vue

@@ -49,14 +49,14 @@ defineProps<{
       gap: 15px;
       padding: 0 16px;
 
+      $step-icon-size: 25px;
+
       .step-icon {
-        position: relative;
-        z-index: 1;
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 25px;
-        height: 25px;
+        width: $step-icon-size;
+        height: $step-icon-size;
         border-radius: 50%;
         color: #fff;
         font-weight: 700;
@@ -95,9 +95,9 @@ defineProps<{
       &.milestone-past {
         &::after {
           content: "";
-          top: 0;
+          top: $step-icon-size;
           background-color: #77aa43;
-          height: calc(100% + 35px);
+          height: calc(100% - $step-icon-size + 35px);
         }
 
         .step-icon {
@@ -118,8 +118,8 @@ defineProps<{
         }
 
         &:not(:last-child)::after {
-          top: 0;
-          height: 100%;
+          top: $step-icon-size;
+          height: calc(100% - $step-icon-size);
         }
 
         .step-icon {

package/src/components/composite/InfoShowcase.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="info-showcase">
+    <h2>{{ title }}</h2>
+    <div class="showcase-list">
+      <div class="showcase-item" v-for="item in items">
+        <div class="image-container">
+          <img :src="item.image" />
+        </div>
+        <div class="text-container">
+          <div class="title">
+            {{ item.title }}
+          </div>
+          <div class="description">
+            {{ item.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title: string;
+  items: {
+    title: string;
+    description: string;
+    image: string;
+  }[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.info-showcase {
+  padding: 24px 36px;
+  background: #fff;
+  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.15);
+
+  h2 {
+    text-align: center;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 29px;
+    margin: 0 0 30px;
+  }
+
+  .showcase-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 56px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .showcase-item {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 80px 1fr;
+    gap: 24px;
+
+    .image-container {
+      img {
+        display: block;
+        max-width: 100%;
+      }
+    }
+
+    .text-container {
+      .title {
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 22px;
+        margin-bottom: 10px;
+      }
+
+      .description {
+        font-size: 14px;
+        line-height: 17px;
+      }
+    }
+  }
+}
+</style>

package/src/components/composite/ResultsSidebar.vue

@@ -12,14 +12,8 @@
         maxHeight: !fixedContainer?.positionFixed ? sidebarMaxHeight : '',
       }"
     >
-      <div class="sidebar-title">
-        <span class="m-cgg-icon--filtros"></span>
-        <span>{{ title }}</span>
-      </div>
       <div class="sidebar-body">
-        <div class="sidebar-body-wrapper">
-          <slot></slot>
-        </div>
+        <slot></slot>
       </div>
     </div>
   </FixedContainer>
@@ -35,15 +29,6 @@ const fixedContainer = ref();
 const sidebarContainer = ref();
 const sidebarMaxHeight = ref();
 
-withDefaults(
-  defineProps<{
-    title?: string;
-  }>(),
-  {
-    title: "Filtros",
-  }
-);
-
 const setSidebarHeight = () => {
   sidebarMaxHeight.value = `${
     window.innerHeight - sidebarContainer.value.offsetTop - 16 + window.scrollY
@@ -64,7 +49,6 @@ onUnmounted(() => {
 .sidebar-container {
   display: flex;
   flex-direction: column;
-  gap: 16px;
   padding: 24px 16px;
   background: #ffffff;
   border: 1px solid #dedede;
@@ -75,22 +59,6 @@ onUnmounted(() => {
     max-height: 100%;
   }
 
-  .sidebar-title {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    border-bottom: 1px solid #dedede;
-    padding-bottom: 16px;
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 22px;
-
-    .m-cgg-icon--filtros {
-      color: #076b9c;
-      font-weight: 700;
-    }
-  }
-
   .sidebar-body {
     overflow-y: auto;
     overflow-x: hidden;

package/src/components/forms/SelectInput.vue

@@ -66,7 +66,6 @@ import { useField } from "vee-validate";
 import {
   ref,
   computed,
-  watch,
   onMounted,
   onUnmounted,
   InputHTMLAttributes,
@@ -76,6 +75,7 @@ import { SelectHTMLAttributes } from "vue";
 import { SelectOption } from "../../types/SelectOption";
 import InputError from "./structure/InputError.vue";
 import InputContainer from "./structure/InputContainer.vue";
+import { findScrollAncestor } from "../../utils";
 
 const props = withDefaults(
   defineProps<{
@@ -190,9 +190,17 @@ const toggleCollapse = () => {
       }, 300);
       window.removeEventListener("click", closeSelectOutside);
       window.removeEventListener("scroll", closeSelectOutside);
+      findScrollAncestor(inputEl.value).removeEventListener(
+        "scroll",
+        closeSelectOutside
+      );
     } else {
       window.addEventListener("click", closeSelectOutside);
       window.addEventListener("scroll", closeSelectOutside);
+      findScrollAncestor(inputEl.value).addEventListener(
+        "scroll",
+        closeSelectOutside
+      );
     }
   }
 };

package/src/components/index.ts

@@ -31,6 +31,7 @@ import CheckoutLayout from "./composite/CheckoutLayout.vue";
 import CheckoutMilestones from "./composite/CheckoutMilestones.vue";
 import ProductDetails from "./composite/ProductDetails.vue";
 import CjaMenuBar from "./composite/CjaMenuBar.vue";
+import InfoShowcase from "./composite/InfoShowcase.vue";
 
 export {
   Modal,
@@ -64,4 +65,5 @@ export {
   CjaMenuBar,
   FixedContainer,
   InfoMessage,
+  InfoShowcase,
 };

package/src/components/structural/InfoMessage.vue

@@ -3,10 +3,10 @@
     class="info-message"
     :class="[
       `color-${color}`,
-      { 'has-icon': $slots.icon, 'has-toggle': toggle },
+      { 'has-icon': $slots.icon && activeViewport.m, 'has-toggle': toggle },
     ]"
   >
-    <div class="icon-container" v-if="$slots.icon">
+    <div class="icon-container" v-if="$slots.icon && activeViewport.m">
       <slot name="icon"></slot>
     </div>
     <div class="text-container">
@@ -20,6 +20,8 @@
 </template>
 
 <script lang="ts" setup>
+import { inject } from "vue";
+
 defineProps<{
   title?: string;
   description?: string;
@@ -27,6 +29,8 @@ defineProps<{
   color: "blue" | "green";
 }>();
 
+const activeViewport: any = inject("activeViewport");
+
 defineEmits(["btn:close"]);
 </script>
 
@@ -35,12 +39,18 @@ defineEmits(["btn:close"]);
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
-  padding: 16px 24px;
+  padding: 8px 16px;
   border: 2px solid #000;
   border-radius: 16px;
 
+  @media screen and (min-width: 768px) {
+    padding: 16px 24px;
+  }
+
   &.has-icon {
-    grid-template-columns: auto 1fr;
+    @media screen and (min-width: 768px) {
+      grid-template-columns: auto 1fr;
+    }
   }
 
   &.has-toggle {
@@ -48,7 +58,9 @@ defineEmits(["btn:close"]);
   }
 
   &.has-icon.has-toggle {
-    grid-template-columns: auto 1fr 18px;
+    @media screen and (min-width: 768px) {
+      grid-template-columns: auto 1fr 18px;
+    }
   }
 
   &.color-green {

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/getFromUrl.ts

@@ -0,0 +1,16 @@
+export const getFromUrl = (param: string, removeFromUrl?: boolean) => {
+  const url = new URL(window.location.href);
+
+  if (url.searchParams.has(param)) {
+    const returnParam = url.searchParams.get(param);
+
+    if (removeFromUrl) {
+      url.searchParams.delete(param);
+      history.replaceState(history.state, "", url.toString());
+    }
+
+    return returnParam;
+  } else {
+    return undefined;
+  }
+};

package/src/utils/getI18nMessages.ts

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

package/src/utils/index.ts

@@ -1,5 +1,19 @@
-import { generateRoutes } from "./RouteGenerator";
-import { useViewportDetector } from "./ViewportDetector";
-import { JsonReviver } from "./JsonReviver";
+import { generateRoutes } from "./generateRoutes";
+import { useViewportDetector } from "./useViewportDetector";
+import { jsonReviver } from "./jsonReviver";
+import { getI18nMessages } from "./getI18nMessages";
+import { findScrollAncestor } from "./findScrollAncestor";
+import { updateForm } from "./updateForm";
+import { getFromUrl } from "./getFromUrl";
+import { uploadFile } from "./uploadFile";
 
-export { generateRoutes, useViewportDetector, JsonReviver };
+export {
+  generateRoutes,
+  useViewportDetector,
+  jsonReviver,
+  getI18nMessages,
+  findScrollAncestor,
+  updateForm,
+  getFromUrl,
+  uploadFile,
+};

package/src/utils/{JsonReviver.ts → jsonReviver.ts}

@@ -1,4 +1,4 @@
-export const JsonReviver = (data: any) =>
+export const jsonReviver = (data: any) =>
   JSON.parse(data, (k, v) => {
     if (v === "true" || v === "false") {
       return v === "true";

package/src/utils/updateForm.ts

@@ -0,0 +1,35 @@
+export const updateForm = (options: {
+  journeyId: string | undefined;
+  step: number;
+  payload: any;
+  stepName: string;
+  isCompleted?: boolean;
+  sentToDialer?: boolean;
+  eventType?: string;
+  formType: string;
+}) =>
+  fetch(`${process.env.VUE_APP_API_URL}/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,22 @@
+export const uploadFile = (options: {
+  basePath: string;
+  journeyId: string;
+  file: any;
+  fileName: string;
+  extension: string;
+  bucketName: string;
+}) => {
+  const data = new FormData();
+
+  data.append(
+    "path",
+    `${options.basePath}/${options.journeyId}/${options.fileName}.${options.extension}`
+  );
+  data.append("file", options.file);
+  data.append("bucketName", options.bucketName);
+
+  return fetch(`${process.env.VUE_APP_API_URL}/core/apis/data/saveFileToS3`, {
+    method: "POST",
+    body: data,
+  });
+};

package/dist/types/utils/JsonReviver.d.ts

@@ -1 +0,0 @@
-export declare const JsonReviver: (data: any) => any;