cja-phoenix 0.2.3 → 0.2.4

package/src/assets/iconia/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'CGG-icomoon';
-  src:  url('fonts/CGG-icomoon.eot?cjnnpy');
-  src:  url('fonts/CGG-icomoon.eot?cjnnpy#iefix') format('embedded-opentype'),
-    url('fonts/CGG-icomoon.ttf?cjnnpy') format('truetype'),
-    url('fonts/CGG-icomoon.woff?cjnnpy') format('woff'),
-    url('fonts/CGG-icomoon.svg?cjnnpy#CGG-icomoon') format('svg');
+  src:  url('fonts/CGG-icomoon.eot?4aj4fi');
+  src:  url('fonts/CGG-icomoon.eot?4aj4fi#iefix') format('embedded-opentype'),
+    url('fonts/CGG-icomoon.ttf?4aj4fi') format('truetype'),
+    url('fonts/CGG-icomoon.woff?4aj4fi') format('woff'),
+    url('fonts/CGG-icomoon.svg?4aj4fi#CGG-icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.m-cgg-icon--macro-step-contact:before {
+  content: "\ea24";
+}
+.m-cgg-icon--macro-step-checkout:before {
+  content: "\ea2e";
+}
+.m-cgg-icon--macro-step-results:before {
+  content: "\ea2f";
+}
+.m-cgg-icon--macro-step-funnel:before {
+  content: "\ea30";
+}
 .m-cgg-icon--affiliates-add:before {
   content: "\e900";
 }

package/src/assets/iconia/style.scss

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?cjnnpy');
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?cjnnpy#iefix') format('embedded-opentype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?cjnnpy') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?cjnnpy') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?cjnnpy##{$icomoon-font-family}') format('svg');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4aj4fi');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4aj4fi#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?4aj4fi') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?4aj4fi') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?4aj4fi##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -27,6 +27,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.m-cgg-icon--macro-step-contact {
+  &:before {
+    content: $m-cgg-icon--macro-step-contact; 
+  }
+}
+.m-cgg-icon--macro-step-checkout {
+  &:before {
+    content: $m-cgg-icon--macro-step-checkout; 
+  }
+}
+.m-cgg-icon--macro-step-results {
+  &:before {
+    content: $m-cgg-icon--macro-step-results; 
+  }
+}
+.m-cgg-icon--macro-step-funnel {
+  &:before {
+    content: $m-cgg-icon--macro-step-funnel; 
+  }
+}
 .m-cgg-icon--affiliates-add {
   &:before {
     content: $m-cgg-icon--affiliates-add; 

package/src/assets/iconia/variables.scss

@@ -1,6 +1,10 @@
 $icomoon-font-family: "CGG-icomoon" !default;
 $icomoon-font-path: "fonts" !default;
 
+$m-cgg-icon--macro-step-contact: "\ea24";
+$m-cgg-icon--macro-step-checkout: "\ea2e";
+$m-cgg-icon--macro-step-results: "\ea2f";
+$m-cgg-icon--macro-step-funnel: "\ea30";
 $m-cgg-icon--affiliates-add: "\e900";
 $m-cgg-icon--affiliates-dashboard: "\ea2a";
 $m-cgg-icon--affiliates-home: "\ea2b";

package/src/components/composite/CjaMenuBar.vue

@@ -0,0 +1,166 @@
+<template>
+  <header class="main-header-container" id="page-header">
+    <div class="main-header">
+      <div class="logo-container">
+        <div class="log-wrapper">
+          <a href="/" v-if="homeNavigationEnabled">
+            <img :src="baseImgUrl + 'CPJ-logo-header.svg'" />
+          </a>
+          <img :src="baseImgUrl + 'CPJ-logo-header.svg'" v-else />
+        </div>
+      </div>
+      <div
+        class="content-container macro-steps"
+        v-if="activeViewport.lg && $slots['macro-steps']"
+      >
+        <slot name="macro-steps"></slot>
+      </div>
+      <div class="side-info" v-if="sideInfo">
+        <slot name="side">
+          <div class="contact-container">
+            <a class="contact" href="tel:211165765">
+              <span class="m-cgg-icon--phone"></span>
+              <span class="number">211 165 765</span>
+            </a>
+            <div class="time">Seg - Sex: 10h às 19h</div>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div
+      class="content-container macro-steps"
+      v-if="!activeViewport.lg && $slots['macro-steps']"
+    >
+      <slot name="macro-steps"></slot>
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+import { inject } from "vue";
+
+const activeViewport: any = inject("activeViewport");
+withDefaults(
+  defineProps<{
+    homeNavigationEnabled?: boolean;
+    sideInfo?: boolean;
+  }>(),
+  {
+    homeNavigationEnabled: true,
+    sideInfo: true,
+  }
+);
+
+const baseImgUrl = process.env.VUE_APP_IMG_URL;
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
+header.main-header-container {
+  .main-header {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    background-color: #fff;
+    padding: 20px;
+    box-shadow: $box-shadow-m;
+
+    @media screen and (min-width: 1024px) {
+      gap: 10px;
+    }
+
+    @media screen and (min-width: 1200px) {
+      gap: 30px;
+      padding: 20px 35px;
+    }
+
+    .logo-container {
+      user-select: none;
+
+      a,
+      img {
+        display: block;
+        width: 125px;
+      }
+    }
+
+    .side-info {
+      @media screen and (min-width: 1024px) {
+        display: flex;
+        align-items: center;
+      }
+
+      .contact-container {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+
+        .contact {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-weight: 700;
+          font-size: 14px;
+          line-height: 17px;
+          color: inherit;
+
+          &:hover {
+            text-decoration: none;
+          }
+
+          .m-cgg-icon--phone {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #076b9c;
+            color: #fff;
+            font-size: 10px;
+          }
+
+          .number {
+            display: none;
+
+            @media screen and (min-width: 768px) {
+              display: block;
+            }
+          }
+        }
+
+        .time {
+          display: none;
+
+          @media screen and (min-width: 768px) {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  .content-container {
+    background: #fff;
+    padding: 20px;
+
+    &.macro-steps {
+      border-bottom: 1px solid #dedede;
+
+      @media screen and (min-width: 1024px) {
+        border-bottom: none;
+      }
+    }
+
+    @media screen and (min-width: 1024px) {
+      padding: 0;
+      flex-grow: 1;
+    }
+  }
+}
+</style>

package/src/components/composite/FunnelLayout.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="funnel-container">
+    <GridContainer>
+      <GridItem
+        class="content-container"
+        :sizeSm="2"
+        :sizeMd="4"
+        :sizeLg="$slots.sidebar ? 8 : 12"
+      >
+        <div class="content-wrapper">
+          <div class="progress-container">
+            <div class="back-container">
+              <button
+                v-if="meta.displayStep && meta.displayStep > 1"
+                class="back-button"
+                @click="$emit('btn:previous')"
+              >
+                <em class="m-cgg-icon--chevron-left"></em>
+                Voltar
+              </button>
+            </div>
+            <div class="progress-bar">
+              <div class="progress" :style="{ width: progressWidth }"></div>
+            </div>
+            <div class="progress-details">
+              Passo {{ meta.displayStep }} de {{ meta.displayTotalSteps }}
+            </div>
+          </div>
+          <transition
+            :name="
+              meta.animation === 'slide-left' ? 'slide-left' : 'slide-right'
+            "
+            mode="out-in"
+          >
+            <div class="funnel-content" :key="path">
+              <slot name="content"></slot>
+            </div>
+          </transition>
+        </div>
+      </GridItem>
+      <GridItem v-if="activeViewport.lg && $slots.sidebar" :sizeLg="4">
+        <slot name="sidebar"></slot>
+      </GridItem>
+    </GridContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import GridContainer from "../structural/GridContainer.vue";
+import GridItem from "../structural/GridItem.vue";
+
+const activeViewport: any = inject("activeViewport");
+
+const props = defineProps<{
+  path: string;
+  meta: {
+    displayStep?: number;
+    displayTotalSteps?: number;
+    animation?: string;
+  };
+}>();
+
+const progressWidth = computed(() =>
+  props.meta.displayStep && props.meta.displayTotalSteps
+    ? `${(100 / props.meta.displayTotalSteps) * props.meta.displayStep}%`
+    : 0
+);
+
+defineEmits(["btn:previous"]);
+</script>
+
+<style lang="scss" scoped>
+.funnel-container {
+  padding-bottom: 100px;
+
+  @media screen and (min-width: 1024px) {
+    padding-top: 40px;
+    padding-bottom: 40px;
+  }
+
+  .funnel-content {
+    transition: all 0.3s linear;
+
+    &.slide-right-enter-from,
+    &.slide-left-leave-to {
+      opacity: 0;
+      transform: translate(20%, 0);
+    }
+
+    &.slide-right-leave-to,
+    &.slide-left-enter-from {
+      opacity: 0;
+      transform: translate(-20%, 0);
+    }
+
+    &.slide-left-enter-to,
+    &.slide-right-enter-to {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  }
+
+  .content-wrapper {
+    background: #ffffff;
+    padding: 20px 0;
+    overflow: hidden;
+
+    @media screen and (min-width: 768px) {
+      padding: 30px 0;
+    }
+
+    @media screen and (min-width: 1024px) {
+      border: 1px solid #dedede;
+      box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.15);
+      border-radius: 32px;
+      padding: 30px;
+    }
+  }
+}
+
+.progress-container {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  margin-bottom: 30px;
+
+  @media screen and (min-width: 768px) {
+    gap: 20px;
+    grid-template-columns: 90px 1fr 90px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #dedede;
+  }
+
+  .back-container {
+    grid-area: 2 / 1 / 3 / 2;
+
+    @media screen and (min-width: 768px) {
+      grid-area: 1 / 1 / 2 / 2;
+    }
+
+    .back-button {
+      color: #155072;
+      font-size: 16px;
+      line-height: 16px;
+      font-weight: 700;
+      padding: 0;
+      border: 0;
+      outline: none;
+      background-color: transparent;
+
+      em {
+        vertical-align: -2px;
+        margin-left: -6px;
+        font-weight: 700;
+      }
+    }
+  }
+
+  .progress-bar {
+    grid-area: 1 / 1 / 2 / 3;
+    background-color: #f4f9fc;
+    height: 16px;
+    border-radius: 30px;
+
+    @media screen and (min-width: 768px) {
+      grid-area: 1 / 2 / 2 / 3;
+    }
+
+    .progress {
+      background: linear-gradient(218.56deg, #56924b 5.04%, #076b9c 62.92%);
+      height: 16px;
+      border-radius: 30px;
+      width: 0;
+      transition: width 0.5s;
+      -webkit-transition: width 0.5s;
+    }
+  }
+
+  .progress-details {
+    grid-area: 2 / 2 / 3 / 3;
+    text-align: right;
+    margin-left: auto;
+    font-size: 14px;
+    line-height: 14px;
+    color: #155072;
+
+    @media screen and (min-width: 768px) {
+      grid-area: 1 / 3 / 2 / 4;
+    }
+  }
+}
+</style>

package/src/components/composite/FunnelSubmit.vue

@@ -1,19 +1,24 @@
 <template>
-  <div class="button-container">
-    <CjaButton
-      :color="'orange'"
-      :size="'lg'"
-      :loading="loading"
-      @click="$emit('btn:click')"
-    >
-      <slot>Continuar</slot>
-    </CjaButton>
-  </div>
+  <Teleport to="body" :disabled="activeViewport.lg">
+    <div class="button-container">
+      <CjaButton
+        :color="'orange'"
+        :size="'lg'"
+        :loading="loading"
+        @click="$emit('btn:click')"
+      >
+        <slot>Continuar</slot>
+      </CjaButton>
+    </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
+import { inject } from "vue";
 import CjaButton from "../structural/CjaButton.vue";
 
+const activeViewport: any = inject("activeViewport");
+
 defineProps<{
   loading?: boolean;
 }>();
@@ -22,6 +27,8 @@ defineEmits(["btn:click"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
 .button-container {
   position: fixed;
   bottom: 0;
@@ -32,11 +39,13 @@ defineEmits(["btn:click"]);
   display: flex;
   flex-direction: row;
   justify-content: center;
+  box-shadow: $box-shadow-m;
 
-  @media screen and (min-width: 1200px) {
+  @media screen and (min-width: 1024px) {
     position: static;
     margin: 30px 0 0;
     padding: 0;
+    box-shadow: none;
   }
 }
 </style>

package/src/components/composite/FunnelSummary.vue

@@ -3,13 +3,7 @@
     <div class="summary-wrapper">
       <div class="title-container">
         <h3>{{ title }}</h3>
-        <button
-          @click="
-            editMode = true;
-            formLock = false;
-            $emit('btn:edit');
-          "
-        >
+        <button @click="toggleEdit">
           <span class="m-cgg-icon--edit"></span>
           <span>{{ customText.edit }}</span>
         </button>
@@ -60,7 +54,7 @@ const props = withDefaults(
       value: any;
       control: string;
     }[];
-    validateForm: () => boolean;
+    validateForm?: () => boolean;
   }>(),
   {
     title: "O seu resumo",
@@ -72,16 +66,24 @@ const props = withDefaults(
   }
 );
 
+const toggleEdit = () => {
+  editMode.value = true;
+  formLock.value = false;
+
+  emit("btn:edit");
+};
+
 const cancelEdit = () => {
   if (!formLock.value) {
     formLock.value = true;
     editMode.value = false;
+
     emit("btn:cancel");
   }
 };
 
 const saveEdit = () => {
-  if (props.validateForm() && !formLock.value) {
+  if ((props.validateForm ? props.validateForm() : true) && !formLock.value) {
     formLock.value = true;
     editMode.value = false;
 
@@ -89,15 +91,19 @@ const saveEdit = () => {
   }
 };
 
+defineExpose({ editMode });
+
 const emit = defineEmits(["btn:cancel", "btn:save", "btn:edit"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/shadows.scss";
+
 .summary-container {
   .summary-wrapper {
     background: #ffffff;
     border: 1px solid #dedede;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+    box-shadow: $box-shadow-m;
     border-radius: 16px;
     padding: 20px 30px;
 

package/src/components/composite/JourneyMacroSteps.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="macro-steps-container">
+    <div
+      class="macro-step"
+      :class="[`step-status-${step.status}`]"
+      v-for="(step, i) in stepList"
+    >
+      <span :class="step.icon"></span>
+      <span class="step-label">{{ step.label }}</span>
+      <span
+        class="m-cgg-icon--chevron-right"
+        v-if="i < stepList.length - 1"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { MacroStep } from "../../types/MacroStep";
+
+defineProps<{
+  stepList: MacroStep[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.macro-steps-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 0 10px;
+
+  .macro-step {
+    display: flex;
+    align-items: center;
+
+    .step-label {
+      margin-left: 10px;
+      font-size: 14px;
+      line-height: 17px;
+      text-transform: uppercase;
+      display: none;
+
+      @media screen and (min-width: 1024px) {
+        font-size: 16px;
+        line-height: 19px;
+      }
+
+      @media screen and (min-width: 1200px) {
+        display: block;
+      }
+    }
+
+    .m-cgg-icon--chevron-right {
+      margin-left: 10px;
+    }
+
+    &.step-status-future {
+      color: #9fabbc;
+    }
+
+    &.step-status-current {
+      color: #076b9c;
+      font-weight: 700;
+
+      .step-label {
+        display: block;
+      }
+    }
+  }
+}
+</style>

package/src/components/composite/ProductDetails.vue

@@ -53,6 +53,8 @@ defineExpose({ openDetails, closeDetails });
 </script>
 
 <style scoped lang="scss">
+@import "../../assets/shadows.scss";
+
 .overlay {
   position: fixed;
   bottom: 0;
@@ -86,7 +88,7 @@ defineExpose({ openDetails, closeDetails });
       align-items: center;
       background-color: #fff;
       padding: 15px;
-      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+      box-shadow: $box-shadow-m;
 
       @media screen and (min-width: 992px) {
         padding: 20px 50px;
@@ -118,7 +120,7 @@ defineExpose({ openDetails, closeDetails });
 
     .details-footer {
       padding: 15px;
-      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+      box-shadow: $box-shadow-m;
 
       @media screen and (min-width: 992px) {
         padding: 20px 50px;