cja-phoenix 0.3.7 → 0.4.0

package/src/components/composite/CheckoutMilestones.vue

@@ -33,6 +33,8 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .checkout-milestones {
   ul {
     list-style: none;
@@ -75,7 +77,7 @@ defineProps<{
           line-height: 20px;
           font-weight: 700;
 
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: $break-md-min) {
             font-size: 20px;
             line-height: 24px;
           }
@@ -85,7 +87,7 @@ defineProps<{
           font-size: 14px;
           line-height: 17px;
 
-          @media screen and (min-width: 768px) {
+          @media screen and (min-width: $break-md-min) {
             font-size: 16px;
             line-height: 19px;
           }

package/src/components/composite/CjaMenuBar.vue

@@ -19,16 +19,13 @@
           <slot name="content" v-else-if="$slots.content"></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 class="side-info" v-if="hasSideInfo">
+          <slot name="side"></slot>
+          <button
+            class="contact m-cgg-icon--phone"
+            v-if="hasContact"
+            @click="callModal.openModal()"
+          ></button>
         </div>
       </div>
       <FixedContainer
@@ -40,6 +37,32 @@
       </FixedContainer>
     </FixedContainer>
   </header>
+
+  <Modal
+    ref="callModal"
+    v-if="hasContact"
+    :maxWidth="{ md: '470px', lg: '470px', xl: '470px' }"
+  >
+    <template #header>Precisa de ajuda?</template>
+    <template #body>
+      <div class="call-modal-body">
+        <div class="call-info">
+          <a class="phone-link" href="tel:211165765">
+            <span class="m-cgg-icon--phone"></span>
+            <span>211 165 765</span>
+          </a>
+          <div class="hours-wrapper">Seg - Sex: 10h às 19h</div>
+        </div>
+        <div class="call-cost">Custo de chamada para a rede fixa nacional</div>
+        <div class="btn-container">
+          <CjaButton :type="'secondary'" @click="callModal.closeModal()">
+            Voltar
+          </CjaButton>
+          <CjaButton @click="callContact">Ligar</CjaButton>
+        </div>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script lang="ts" setup>
@@ -47,23 +70,31 @@ import { inject } from "vue";
 import FixedContainer from "../structural/FixedContainer.vue";
 import { MacroStep } from "../../types";
 import JourneyMacroSteps from "./JourneyMacroSteps.vue";
+import Modal from "../structural/Modal.vue";
 import { ref } from "vue";
-import { onMounted } from "vue";
-import { provide } from "vue";
+import { CjaButton } from "..";
 
 const activeViewport: any = inject("activeViewport");
 withDefaults(
   defineProps<{
     homeNavigationEnabled?: boolean;
-    sideInfo?: boolean;
+    hasSideInfo?: boolean;
     macroStepList?: MacroStep[];
+    hasContact?: boolean;
   }>(),
   {
     homeNavigationEnabled: true,
-    sideInfo: true,
+    hasSideInfo: true,
+    hasContact: true,
   }
 );
 
+const callModal = ref();
+
+const callContact = () => {
+  window.open("tel:211165765", "_self");
+};
+
 const baseImgUrl = process.env.VUE_APP_IMG_URL;
 </script>
 
@@ -77,10 +108,9 @@ header.main-header-container {
   .main-header {
     position: relative;
     z-index: 1;
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: auto 1fr 265px;
     align-items: center;
-    justify-content: space-between;
     gap: 16px;
     background-color: #fff;
     padding: 20px;
@@ -110,57 +140,93 @@ header.main-header-container {
     }
 
     .side-info {
-      @media screen and (min-width: 1024px) {
-        display: flex;
-        align-items: center;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      .contact {
+        background: #076b9c;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        padding: 0;
+        border: none;
+        outline: none;
+        gap: 8px;
+        font-weight: 700;
+        font-size: 10px;
+        color: #fff;
       }
+    }
+  }
+}
+
+.call-modal-body {
+  max-width: 400px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  font-size: 14px;
+  line-height: 18px;
+
+  @media screen and (min-width: 420px) {
+    font-size: 16px;
+    line-height: 20px;
+  }
 
-      .contact-container {
+  .call-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    white-space: nowrap;
+
+    a {
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+      align-items: center;
+      color: inherit;
+
+      .m-cgg-icon--phone {
+        background-color: #076b9c;
+        height: 20px;
+        width: 20px;
         display: flex;
+        flex-direction: row;
         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;
-          }
-        }
+        justify-content: center;
+        color: #fff;
+        border-radius: 50%;
+        font-size: 9px;
+      }
+    }
+
+    .hours-wrapper {
+      padding-left: 10px;
+      margin-left: 10px;
+      border-left: 1px solid #dedede;
+
+      @media screen and (min-width: 420px) {
+        padding-left: 15px;
+        margin-left: 15px;
+      }
+    }
+  }
+
+  .call-cost {
+    text-align: center;
+  }
+
+  .btn-container {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+
+    .btn-cancel {
+      @media screen and (max-width: 419px) {
+        display: none;
       }
     }
   }

package/src/components/composite/FunnelLayout.vue

@@ -71,6 +71,8 @@ defineEmits(["btn:previous"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .funnel-container {
   padding-bottom: 100px;
 
@@ -106,7 +108,7 @@ defineEmits(["btn:previous"]);
     padding: 20px 0;
     overflow: hidden;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       padding: 30px 0;
     }
 
@@ -126,7 +128,7 @@ defineEmits(["btn:previous"]);
   align-items: center;
   margin-bottom: 30px;
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: $break-md-min) {
     gap: 20px;
     grid-template-columns: 90px 1fr 90px;
     padding-bottom: 20px;
@@ -136,7 +138,7 @@ defineEmits(["btn:previous"]);
   .back-container {
     grid-area: 2 / 1 / 3 / 2;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-area: 1 / 1 / 2 / 2;
     }
 
@@ -164,7 +166,7 @@ defineEmits(["btn:previous"]);
     height: 16px;
     border-radius: 30px;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-area: 1 / 2 / 2 / 3;
     }
 
@@ -186,7 +188,7 @@ defineEmits(["btn:previous"]);
     line-height: 14px;
     color: #155072;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-area: 1 / 3 / 2 / 4;
     }
   }

package/src/components/composite/FunnelTitle.vue

@@ -21,6 +21,8 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .title-container {
   text-align: center;
   margin-bottom: 25px;
@@ -36,7 +38,7 @@ defineProps<{
     margin-bottom: 20px;
     color: #076b9c;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       font-size: 26px;
       line-height: 30px;
     }

package/src/components/forms/TextInput.vue

@@ -17,6 +17,8 @@
         :placeholder="placeholder && placeholder"
         :type="type"
         :value="value"
+        :min="min"
+        :max="max"
         @input="
           emit('update:modelValue', (<HTMLInputElement>$event.target).value)
         "
@@ -59,6 +61,8 @@ const props = withDefaults(
     type?: InputHTMLAttributes["type"];
     autocomplete?: InputHTMLAttributes["autocomplete"];
     suffix?: string;
+    min?: InputHTMLAttributes["min"];
+    max?: InputHTMLAttributes["max"];
   }>(),
   {
     layout: "vertical",
@@ -106,6 +110,18 @@ const emit = defineEmits(["update:modelValue"]);
         color: #0d2745;
       }
     }
+
+    &[type="number"] {
+      /* Firefox */
+      -moz-appearance: textfield;
+
+      /* Chrome, Safari, Edge, Opera */
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
   }
 
   &.error {

package/src/components/forms/structure/InputError.vue

@@ -11,12 +11,14 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../../assets/breakpoints.scss";
+
 .input-error {
   color: #ff533f;
   font-size: 14px;
   line-height: 16px;
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: $break-md-min) {
     font-size: 16px;
     line-height: 18px;
   }

package/src/components/forms/structure/InputTitle.vue

@@ -18,6 +18,7 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../../assets/breakpoints.scss";
 @import "../../../assets/forms.scss";
 
 .input-title {
@@ -32,7 +33,7 @@ defineProps<{
     font-size: 18px;
     color: #076b9c;
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       font-size: 20px;
     }
   }

package/src/components/structural/CjaButton.vue

@@ -1,6 +1,7 @@
 <template>
-  <button
+  <component
     class="cja-btn"
+    :is="href ? 'a' : 'button'"
     :class="[
       `btn-${type}`,
       `btn-size-${size}`,
@@ -10,11 +11,11 @@
     ]"
   >
     <Scaffold v-if="!loading">
-      <span v-if="$slots.default"><slot></slot></span>
-      <span v-if="icon" :class="icon"></span>
+      <slot></slot>
+      <span v-if="icon" class="icon" :class="icon"></span>
     </Scaffold>
     <div class="spinner" v-else></div>
-  </button>
+  </component>
 </template>
 
 <script lang="ts" setup>
@@ -28,6 +29,7 @@ withDefaults(
     icon?: string;
     iconPosition?: "left" | "right";
     loading?: boolean;
+    href?: string;
   }>(),
   {
     type: "primary",
@@ -42,11 +44,7 @@ withDefaults(
 @import "../../assets/shadows.scss";
 
 .cja-btn {
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
+  display: inline-block;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
@@ -63,15 +61,27 @@ withDefaults(
     box-shadow: none;
   }
 
+  span {
+    vertical-align: middle;
+  }
+
   &.btn-size-sm {
     font-size: 14px;
     line-height: 18px;
     padding: 8px 12px;
     border-radius: 8px;
 
+    &.icon-left:not(.btn-icon-only) span {
+      margin-right: 8px;
+    }
+
+    &.icon-right:not(.btn-icon-only) span {
+      margin-left: 8px;
+    }
+
     &.btn-icon-only,
     &.btn-loading {
-      padding: 4px;
+      padding: 4px 10px;
     }
 
     &.btn-loading .spinner {
@@ -86,9 +96,17 @@ withDefaults(
     padding: 8px 24px;
     border-radius: 8px;
 
+    &.icon-left:not(.btn-icon-only) span {
+      margin-right: 8px;
+    }
+
+    &.icon-right:not(.btn-icon-only) span {
+      margin-left: 8px;
+    }
+
     &.btn-icon-only,
     &.btn-loading {
-      padding: 8px;
+      padding: 8px 12px;
     }
 
     &.btn-loading .spinner {
@@ -103,6 +121,14 @@ withDefaults(
     padding: 16px 32px;
     border-radius: 8px;
 
+    &.icon-left:not(.btn-icon-only) span {
+      margin-right: 12px;
+    }
+
+    &.icon-right:not(.btn-icon-only) span {
+      margin-left: 12px;
+    }
+
     &.btn-icon-only,
     &.btn-loading {
       padding: 16px;
@@ -291,10 +317,6 @@ withDefaults(
     }
   }
 
-  &.icon-left {
-    flex-direction: row-reverse;
-  }
-
   &.btn-loading {
     cursor: auto;
 

package/src/components/structural/GridContainer.vue

@@ -16,6 +16,7 @@ withDefaults(
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
 @import "../../assets/grid.scss";
 
 .grid-container-1,
@@ -26,7 +27,7 @@ withDefaults(
   padding-left: $grid-side-padding-sm;
   padding-right: $grid-side-padding-sm;
 
-  @media screen and (min-width: 768px) and (max-width: 1023px) {
+  @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
     grid-template-columns: $grid-columns-md;
     column-gap: $grid-column-gap-md;
     padding-left: $grid-side-padding-md;

package/src/components/structural/GridItem.vue

@@ -19,6 +19,8 @@ defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 @for $i from 0 to 4 {
   .grid-item-sm-#{$i + 1} {
     @media screen and (max-width: 767px) {
@@ -29,7 +31,7 @@ defineProps<{
 
 @for $i from 0 to 4 {
   .grid-item-md-#{$i + 1} {
-    @media screen and (min-width: 768px) and (max-width: 1023px) {
+    @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {
       grid-column: span #{$i + 1};
     }
   }

package/src/components/structural/InfoMessage.vue

@@ -35,6 +35,8 @@ defineEmits(["btn:close"]);
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/breakpoints.scss";
+
 .info-message {
   display: grid;
   grid-template-columns: 1fr;
@@ -43,12 +45,12 @@ defineEmits(["btn:close"]);
   border: 2px solid #000;
   border-radius: 16px;
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: $break-md-min) {
     padding: 16px 24px;
   }
 
   &.has-icon {
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-template-columns: auto 1fr;
     }
   }
@@ -58,7 +60,7 @@ defineEmits(["btn:close"]);
   }
 
   &.has-icon.has-toggle {
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: $break-md-min) {
       grid-template-columns: auto 1fr 18px;
     }
   }