cja-phoenix 0.2.6 → 0.2.8

package/src/components/composite/ResultsSidebar.vue

@@ -0,0 +1,100 @@
+<template>
+  <FixedContainer
+    ref="fixedContainer"
+    :scrollThreshold="-16"
+    :position="{ top: '16px', bottom: '16px' }"
+  >
+    <div
+      ref="sidebarContainer"
+      class="sidebar-container"
+      :class="{ 'position-fixed': fixedContainer?.positionFixed }"
+      :style="{
+        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>
+      </div>
+    </div>
+  </FixedContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { onMounted } from "vue";
+import { onUnmounted } from "vue";
+import FixedContainer from "../structural/FixedContainer.vue";
+
+const fixedContainer = ref();
+const sidebarContainer = ref();
+const sidebarMaxHeight = ref();
+
+withDefaults(
+  defineProps<{
+    title?: string;
+  }>(),
+  {
+    title: "Filtros",
+  }
+);
+
+const setSidebarHeight = () => {
+  sidebarMaxHeight.value = `${
+    window.innerHeight - sidebarContainer.value.offsetTop - 24 + window.scrollY
+  }px`;
+};
+
+onMounted(() => {
+  setSidebarHeight();
+  window.addEventListener("scroll", setSidebarHeight);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", setSidebarHeight);
+});
+</script>
+
+<style lang="scss" scoped>
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px 16px;
+  background: #ffffff;
+  border: 1px solid #dedede;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+
+  &.position-fixed {
+    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;
+    flex-grow: 1;
+  }
+}
+</style>

package/src/components/forms/FileInput.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import Scaffold from "../structural/Scaffold.vue";
 import InputContainer from "./structure/InputContainer.vue";
 import InputError from "./structure/InputError.vue";

package/src/components/index.ts

@@ -26,6 +26,9 @@ import FunnelSubmit from "./composite/FunnelSubmit.vue";
 import FunnelSummary from "./composite/FunnelSummary.vue";
 import FunnelTitle from "./composite/FunnelTitle.vue";
 import ResultsLayout from "./composite/ResultsLayout.vue";
+import CheckoutCrossSell from "./composite/CheckoutCrossSell.vue";
+import CheckoutLayout from "./composite/CheckoutLayout.vue";
+import CheckoutMilestones from "./composite/CheckoutMilestones.vue";
 import ProductDetails from "./composite/ProductDetails.vue";
 import CjaMenuBar from "./composite/CjaMenuBar.vue";
 
@@ -53,9 +56,12 @@ export {
   FunnelSubmit,
   FunnelSummary,
   FunnelTitle,
+  ResultsLayout,
+  CheckoutCrossSell,
+  CheckoutLayout,
+  CheckoutMilestones,
   JourneyMacroSteps,
   CjaMenuBar,
   FixedContainer,
-  ResultsLayout,
   InfoMessage,
 };

package/src/components/structural/CollapseContainer.vue

@@ -6,18 +6,12 @@
       </div>
       <span class="m-cgg-icon--chevron-down"></span>
     </div>
-    <Transition
-      name="slide"
-      @before-enter="setHeightZero"
-      @enter="setHeightSize"
-      @after-enter="clearHeight"
-      @leave="setHeightZero"
-    >
+    <Transition name="slide" @enter="slideEnter" @leave="slideLeave">
       <div
         v-show="active"
         ref="contentContainer"
         class="content-container"
-        :style="{ height: containerHeight, overflow: containerOverflow }"
+        :style="{ height: containerHeight }"
       >
         <div ref="contentWrapper" class="content-wrapper">
           <slot name="content"></slot>
@@ -41,13 +35,18 @@ const active = ref(props.defaultActive);
 const contentContainer = ref();
 const contentWrapper = ref();
 const containerHeight = ref();
-const containerOverflow = ref();
 
-const setHeightSize = () => {
+const slideEnter = () => {
+  containerHeight.value = "0";
+
   requestAnimationFrame(() => {
     if (contentContainer.value && contentWrapper.value) {
       containerHeight.value = `${contentWrapper.value.clientHeight}px`;
 
+      setTimeout(() => {
+        containerHeight.value = "";
+      }, 200);
+
       if (active.value && props.scrollToContent) {
         setTimeout(() => {
           props.scrollToContent?.element.scrollTo({
@@ -61,31 +60,13 @@ const setHeightSize = () => {
   });
 };
 
-const setHeightZero = () => {
+const slideLeave = () => {
   containerHeight.value = `${contentWrapper.value.clientHeight}px`;
 
   requestAnimationFrame(() => {
     containerHeight.value = "0";
-    containerOverflow.value = "";
   });
 };
-
-const clearHeight = () => {
-  containerHeight.value = "";
-  containerOverflow.value = "visible";
-};
-
-onMounted(() => {
-  if (props.defaultActive) {
-    setHeightSize();
-  }
-
-  window.addEventListener("resize", setHeightSize);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", setHeightSize);
-});
 </script>
 
 <style lang="scss" scoped>
@@ -104,9 +85,12 @@ onUnmounted(() => {
   }
 
   .content-container {
-    box-sizing: border-box;
-    overflow: hidden;
     transition: all 0.2s linear;
+
+    &.slide-leave-active,
+    &.slide-enter-active {
+      overflow: hidden;
+    }
   }
 
   &.active {
@@ -114,5 +98,11 @@ onUnmounted(() => {
       transform: rotate(180deg);
     }
   }
+
+  &:not(.active) {
+    .content-container {
+      overflow: hidden;
+    }
+  }
 }
 </style>

package/src/components/structural/FixedContainer.vue

@@ -7,7 +7,7 @@
     <div
       class="fixed-wrapper"
       :class="{ 'position-fixed': positionFixed }"
-      :style="{ ...size, ...position }"
+      :style="{ ...size, ...position, maxWidth: fixedWrapperWidth }"
       ref="fixedWrapper"
     >
       <slot></slot>
@@ -16,11 +16,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted } from "vue";
+import { onUnmounted, onMounted, watch } from "vue";
 import { ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
+    active?: boolean;
     scrollThreshold?: number;
     fixWidth?: boolean;
     size?: {
@@ -35,6 +36,7 @@ const props = withDefaults(
     };
   }>(),
   {
+    active: true,
     scrollThreshold: 0,
     fixWidth: true,
   }
@@ -44,22 +46,38 @@ const positionFixed = ref(false);
 const fixedContainer = ref();
 const fixedContainerHeight = ref("");
 const fixedWrapper = ref();
+const fixedWrapperWidth = ref("");
 
 const fixPosition = () => {
-  if (fixedContainer.value) {
+  if (fixedContainer.value && props.active) {
     positionFixed.value =
       window.scrollY > fixedContainer.value.offsetTop + props.scrollThreshold;
 
     fixedContainerHeight.value = positionFixed.value
       ? `${fixedWrapper.value.clientHeight}px`
       : "";
+  } else {
+    positionFixed.value = false;
+    fixedContainerHeight.value = "";
   }
 };
 
 const setWidth = () => {
-  fixedWrapper.value.style.maxWidth = `${fixedContainer.value.offsetWidth}px`;
+  fixedWrapperWidth.value =
+    props.active && fixedContainer.value
+      ? `${fixedContainer.value.offsetWidth}px`
+      : "";
 };
 
+watch(
+  () => props.active,
+  () => {
+    if (props.fixWidth) {
+      setWidth();
+    }
+  }
+);
+
 onMounted(() => {
   window.addEventListener("scroll", fixPosition);
   fixPosition();

package/src/components/structural/GridContainer.vue

@@ -38,6 +38,11 @@ withDefaults(
     column-gap: $grid-column-gap-lg;
     padding-left: $grid-side-padding-lg;
     padding-right: $grid-side-padding-lg;
+  }
+
+  @media screen and (min-width: 1200px) {
+    padding-left: $grid-side-padding-xl;
+    padding-right: $grid-side-padding-xl;
     max-width: 1440px;
     margin-left: auto;
     margin-right: auto;

package/src/index.ts

@@ -4,7 +4,6 @@ import VueTippy from "vue-tippy";
 
 function install(app: App) {
   for (const key in components) {
-    // @ts-expect-error
     app.component(key, components[key]);
   }
 

package/src/types/CheckoutMilestone.ts

@@ -0,0 +1,5 @@
+export interface CheckoutMilestone {
+  status: "past" | "current" | "future";
+  title: string;
+  description?: string;
+}

package/src/types/index.ts

@@ -2,5 +2,6 @@ import { MacroStep } from "./MacroStep";
 import { Tab } from "./Tab";
 import { SelectOption } from "./SelectOption";
 import { TileOption } from "./TileOption";
+import { CheckoutMilestone } from "./CheckoutMilestone";
 
-export type { MacroStep, Tab, SelectOption, TileOption };
+export type { MacroStep, Tab, SelectOption, TileOption, CheckoutMilestone };

package/src/utils/JsonReviver.ts

@@ -0,0 +1,20 @@
+export const JsonReviver = (data: any) =>
+  JSON.parse(data, (k, v) => {
+    if (v === "true" || v === "false") {
+      return v === "true";
+    }
+
+    if (Number(v) || v === "0") {
+      return Number(v);
+    }
+
+    if (v === "undefined") {
+      return undefined;
+    }
+
+    if (v === "null") {
+      return null;
+    }
+
+    return v;
+  });

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 import { generateRoutes } from "./RouteGenerator";
 import { useViewportDetector } from "./ViewportDetector";
+import { JsonReviver } from "./JsonReviver";
 
-export { generateRoutes, useViewportDetector };
+export { generateRoutes, useViewportDetector, JsonReviver };