cja-phoenix 0.7.2 → 0.7.4

package/src/components/composite/CjaMenuBar.vue

@@ -2,24 +2,13 @@
   <header
     class="main-header-container"
     :class="{
-      'sidebar-active':
-        sidebarActive || (callModal?.active && activeViewport.md),
+      'overlay-active': callModal?.active && activeViewport.md,
     }"
     id="page-header"
     ref="headerEl"
   >
     <FixedContainer :active="activeViewport.lg" :size="{ width: '100%' }">
-      <div
-        class="main-header"
-        :class="{ 'has-categories': categories?.length }"
-      >
-        <div class="btn-sidebar-container" v-if="categories?.length">
-          <button
-            class="btn-sidebar m-cgg-icon--tlist"
-            @click="sidebarActive = !sidebarActive"
-          ></button>
-        </div>
-
+      <div class="main-header">
         <div class="logo-container">
           <component
             :is="homeNavigationEnabled ? 'a' : 'div'"
@@ -39,38 +28,10 @@
             :stepList="macroStepList"
             v-if="activeViewport.lg && macroStepList"
           />
-
-          <nav class="categories-container" v-else-if="categories?.length">
-            <div class="menu-category" v-for="category in categories">
-              <component
-                :is="category.link ? 'a' : 'div'"
-                class="category-label"
-                :href="category.link ? getStoryblokUrl(category.link) : ''"
-              >
-                {{ category.text }}
-                <span
-                  v-if="category.subLinks"
-                  class="m-cgg-icon--chevron-down"
-                ></span>
-              </component>
-              <Transition name="fade">
-                <div class="category-links-container" v-if="category.subLinks">
-                  <ul>
-                    <li v-for="menuLink in category.subLinks">
-                      <a :href="getStoryblokUrl(menuLink.link)">
-                        {{ menuLink.text }}
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </Transition>
-            </div>
-          </nav>
-
           <slot name="content" v-else-if="$slots.content"></slot>
         </div>
 
-        <div class="side-info" v-if="hasSideInfo">
+        <div class="side-info" v-if="$slots.side || hasContact">
           <slot name="side"></slot>
           <button
             class="contact m-cgg-icon--phone"
@@ -114,75 +75,25 @@
       </div>
     </template>
   </Modal>
-
-  <Teleport to="body" v-if="categories?.length">
-    <Transition name="slide">
-      <nav class="categories-sidebar" v-if="sidebarActive">
-        <div class="menu-category" v-for="category in categories">
-          <CollapseContainer v-if="category.subLinks">
-            <template #header>
-              <div class="menu-category-link">
-                {{ category.text }}
-              </div>
-            </template>
-            <template #content>
-              <ul class="category-links-container" v-if="category.subLinks">
-                <li v-if="category.link">
-                  <a class="menu-link" :href="getStoryblokUrl(category.link)">
-                    {{ category.text }}
-                  </a>
-                </li>
-                <li v-for="menuLink in category.subLinks">
-                  <a class="menu-link" :href="getStoryblokUrl(menuLink.link)">
-                    {{ menuLink.text }}
-                  </a>
-                </li>
-              </ul>
-            </template>
-          </CollapseContainer>
-          <a
-            class="menu-category-link menu-link"
-            :href="getStoryblokUrl(category.link)"
-            v-else-if="category.link"
-          >
-            {{ category.text }}
-          </a>
-        </div>
-      </nav>
-    </Transition>
-    <Transition name="fade">
-      <div
-        class="categories-backdrop"
-        @click="sidebarActive = false"
-        v-if="sidebarActive"
-      ></div>
-    </Transition>
-  </Teleport>
 </template>
 
 <script lang="ts" setup>
 import FixedContainer from "../structural/FixedContainer.vue";
-import CollapseContainer from "../structural/CollapseContainer.vue";
 import CjaButton from "../structural/CjaButton.vue";
-import { MacroStep, MenuCategory } from "../../types";
+import { MacroStep } from "../../types";
 import JourneyMacroSteps from "./JourneyMacroSteps.vue";
 import Modal from "../structural/Modal.vue";
 import { ref } from "vue";
-import { getStoryblokUrl } from "../../utils";
-import { watch } from "vue";
 import { useViewportDetector, useGlobalProperties } from "../../utils";
 
 withDefaults(
   defineProps<{
     homeNavigationEnabled?: boolean;
-    hasSideInfo?: boolean;
     macroStepList?: MacroStep[];
-    categories?: MenuCategory[];
     hasContact?: boolean;
   }>(),
   {
     homeNavigationEnabled: true,
-    hasSideInfo: true,
     hasContact: true,
   }
 );
@@ -190,29 +101,10 @@ withDefaults(
 const { activeViewport } = useViewportDetector();
 const { imageURL } = useGlobalProperties();
 const callModal = ref();
-const sidebarActive = ref(false);
 
 const callContact = () => {
   window.open("tel:211165765", "_self");
 };
-
-watch(
-  () => sidebarActive.value,
-  (newVal) => {
-    if (newVal && callModal.value.active) {
-      callModal.value.closeModal();
-    }
-  }
-);
-
-watch(
-  () => callModal.value?.active,
-  (newVal) => {
-    if (callModal.value && newVal && sidebarActive.value) {
-      sidebarActive.value = false;
-    }
-  }
-);
 </script>
 
 <style lang="scss" scoped>
@@ -225,7 +117,7 @@ header.main-header-container {
   z-index: 100;
   transition: z-index 0s linear 0.4s;
 
-  &.sidebar-active {
+  &.overlay-active {
     z-index: 1002;
     transition: z-index 0s linear;
   }
@@ -251,12 +143,6 @@ header.main-header-container {
       gap: 24px;
     }
 
-    &.has-categories {
-      @media screen and (max-width: $break-md-max) {
-        grid-template-columns: auto auto 1fr auto;
-      }
-    }
-
     .logo-container {
       user-select: none;
 
@@ -359,185 +245,4 @@ header.main-header-container {
     }
   }
 }
-
-.categories-container {
-  display: none;
-
-  @media screen and (min-width: $break-lg-min) {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    gap: 16px;
-  }
-
-  .menu-category {
-    position: relative;
-    padding-bottom: 28px;
-    margin-bottom: -28px;
-
-    .category-label {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 5px;
-      font-size: 12px;
-      line-height: 18px;
-      font-weight: 700;
-
-      @media screen and (min-width: $break-xl-min) {
-        font-size: 16px;
-      }
-    }
-
-    a.category-label {
-      color: inherit;
-      text-decoration: none;
-      transition: all 0.3s ease-in-out;
-
-      &:hover {
-        color: #076b9c;
-      }
-    }
-
-    .category-links-container {
-      position: absolute;
-      opacity: 0;
-      transition: opacity 0.3s ease-in-out, transform 0s linear 0.3s;
-      top: 100%;
-      left: 50%;
-      transform: scale(0);
-      padding: 16px;
-      background: #fff;
-      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-
-      ul {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-
-        a {
-          font-size: 16px;
-          line-height: 18px;
-          font-weight: 700;
-          color: inherit;
-          text-decoration: none;
-          transition: all 0.3s ease-in-out;
-          white-space: nowrap;
-
-          &:hover {
-            color: #076b9c;
-          }
-        }
-      }
-    }
-
-    &:hover {
-      .category-links-container {
-        opacity: 1;
-        transform: translateX(-50%);
-        transition: opacity 0.3s ease-in-out, transform 0s linear;
-      }
-    }
-  }
-}
-
-.btn-sidebar-container {
-  @media screen and (min-width: $break-lg-min) {
-    display: none;
-  }
-
-  .btn-sidebar {
-    display: block;
-    background: none;
-    border: none;
-    padding: 0;
-    width: 25px;
-    height: 25px;
-    font-size: 25px;
-    line-height: 25px;
-  }
-}
-
-.categories-sidebar {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  height: calc(100% - 60px);
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  width: 100%;
-  background: #fff;
-  z-index: 1001;
-  padding: 16px 24px;
-
-  @media screen and (min-width: $break-sm-min) {
-    width: 300px;
-  }
-
-  &.slide-enter-active,
-  &.slide-leave-active {
-    transition: all 0.4s ease-in-out;
-  }
-
-  &.slide-enter-from,
-  &.slide-leave-to {
-    transform: translateX(-100%);
-  }
-
-  &.slide-enter-to,
-  &.slide-leave-from {
-    transform: translateX(0);
-  }
-
-  .category-links-container {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    list-style: none;
-    margin: 0;
-    padding: 0 0 16px;
-    font-size: 16px;
-    line-height: 18px;
-  }
-
-  .menu-link {
-    color: inherit;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  .menu-category-link {
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 18px;
-  }
-}
-
-.categories-backdrop {
-  @include backdrop;
-
-  &.fade-enter-active,
-  &.fade-leave-active {
-    transition: all 0.4s ease-in-out;
-  }
-
-  &.fade-enter-from,
-  &.fade-leave-to {
-    opacity: 0;
-  }
-
-  &.fade-enter-to,
-  &.fade-leave-from {
-    opacity: 1;
-  }
-}
 </style>

package/src/components/index.ts

@@ -33,7 +33,6 @@ 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 CjaFooter from "./composite/CjaFooter.vue";
 import InfoShowcase from "./composite/InfoShowcase.vue";
 
 export {
@@ -68,7 +67,6 @@ export {
   CheckoutMilestones,
   JourneyMacroSteps,
   CjaMenuBar,
-  CjaFooter,
   FixedContainer,
   InfoMessage,
   InfoShowcase,

package/src/components/structural/CjaButton.vue

@@ -1,8 +1,8 @@
 <template>
   <component
     class="cja-btn"
-    :is="href ? 'a' : 'button'"
-    :href="href"
+    :is="href || to ? altAnchor || 'a' : 'button'"
+    :href="href || to"
     :target="target"
     :class="[
       `btn-${type}`,
@@ -33,7 +33,9 @@ withDefaults(
     iconPosition?: "left" | "right";
     loading?: boolean;
     href?: AnchorHTMLAttributes["href"];
+    to?: AnchorHTMLAttributes["href"];
     target?: AnchorHTMLAttributes["target"];
+    altAnchor?: any;
   }>(),
   {
     type: "primary",

package/src/components/structural/Drawer.vue

@@ -109,7 +109,7 @@ defineExpose({ active, openDrawer, closeDrawer, toggleDrawer });
   position: fixed;
   z-index: 1000;
   width: 100%;
-  transition: all 0.3s ease-in-out;
+  transition: all 0.6s ease-in-out;
 
   @media screen and (min-width: $break-md-min) {
     max-width: var(--md-max-width);
@@ -132,7 +132,8 @@ defineExpose({ active, openDrawer, closeDrawer, toggleDrawer });
       transform: translateY(-100%);
     }
 
-    &.active &.slide-enter-to,
+    &.active,
+    &.slide-enter-to,
     &.slide-leave-from {
       top: 0;
       transform: translateY(0);
@@ -142,13 +143,13 @@ defineExpose({ active, openDrawer, closeDrawer, toggleDrawer });
   &.drawer-vertical-bottom {
     bottom: -100%;
 
-    &.active,
     &.slide-enter-from,
     &.slide-leave-to {
       bottom: -100%;
       transform: translateY(100%);
     }
 
+    &.active,
     &.slide-enter-to,
     &.slide-leave-from {
       bottom: 0;

package/src/types/Menu.ts

@@ -1,19 +1,6 @@
-import { StoryLink } from "./Storyblok";
-
 export interface MacroStep {
   label: string;
   icon: string;
   status: "past" | "current" | "future";
   navigationUrl?: string;
 }
-
-export interface MenuLink {
-  text: string;
-  link: StoryLink;
-}
-
-export interface MenuCategory {
-  text: string;
-  link?: StoryLink;
-  subLinks?: MenuLink[];
-}

package/src/types/index.ts

@@ -1,5 +1,4 @@
-import { MacroStep, MenuLink, MenuCategory } from "./Menu";
-import { FooterCategory, SocialLink } from "./Footer";
+import { MacroStep } from "./Menu";
 import { SelectOption } from "./SelectOption";
 import { TileOption } from "./TileOption";
 import { CheckoutMilestone } from "./CheckoutMilestone";
@@ -7,13 +6,9 @@ import { StoreData, StoreDataValue } from "./StoreDataValue";
 
 export type {
   MacroStep,
-  MenuCategory,
-  MenuLink,
   SelectOption,
   TileOption,
   CheckoutMilestone,
   StoreData,
   StoreDataValue,
-  FooterCategory,
-  SocialLink,
 };

package/src/utils/getCalendarUrl.ts

@@ -0,0 +1,43 @@
+export const getCalendarUrl = (options: {
+  title: string;
+  description?: string;
+  location?: string;
+  dateStart: Date;
+  dateEnd: Date;
+  allDay?: boolean;
+}) => {
+  const url = new URL("calendar/render", "https://www.google.com");
+
+  const formatText = (text: string) => text.trim();
+  const formatDate = (date: Date) => {
+    const targetDate = new Date(date)
+      .toISOString()
+      .replaceAll(/:/g, "")
+      .replaceAll(/-/g, "")
+      .replaceAll(/\.\d{3}(?=Z)/g, "");
+
+    if (options.allDay) {
+      targetDate.replaceAll(/T\d{6}(?=Z)/g, "");
+    }
+
+    return targetDate;
+  };
+
+  url.searchParams.set("action", "TEMPLATE");
+  url.searchParams.set("text", formatText(options.title));
+
+  if (options.description) {
+    url.searchParams.set("details", formatText(options.description));
+  }
+
+  if (options.location) {
+    url.searchParams.set("location", formatText(options.location));
+  }
+
+  url.searchParams.set(
+    "dates",
+    `${formatDate(options.dateStart)}/${formatDate(options.dateEnd)}`
+  );
+
+  return url.toString();
+};

package/src/utils/index.ts

@@ -3,6 +3,7 @@ import { generateRoutes } from "./generateRoutes";
 import { useViewportDetector } from "./useViewportDetector";
 import { useGlobalProperties } from "./useGlobalProperties";
 import { jsonReviver } from "./jsonReviver";
+import { getCalendarUrl } from "./getCalendarUrl";
 import { getI18nMessages } from "./getMessages";
 import { findScrollAncestor } from "./findScrollAncestor";
 import { updateForm } from "./updateForm";
@@ -11,7 +12,6 @@ import { uploadFile } from "./uploadFile";
 import { useCjaGtm } from "./gtm";
 import { getCjaRouter } from "./cjaRouter";
 import { getCjaStore } from "./cjaStore";
-import { getStoryblokUrl } from "./storyblokLink";
 
 export {
   formValidation,
@@ -20,6 +20,7 @@ export {
   useGlobalProperties,
   jsonReviver,
   getI18nMessages,
+  getCalendarUrl,
   findScrollAncestor,
   updateForm,
   getFromUrl,
@@ -27,5 +28,4 @@ export {
   useCjaGtm,
   getCjaRouter,
   getCjaStore,
-  getStoryblokUrl,
 };

package/dist/types/components/composite/CjaFooter.vue.d.ts

@@ -1,34 +0,0 @@
-import { FooterCategory, SocialLink } from "../../types/Footer";
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    navGroups: FooterCategory[][];
-    socialLinksTitle?: string | undefined;
-    socialLinks?: SocialLink[] | undefined;
-}>, {
-    socialLinksTitle: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    navGroups: FooterCategory[][];
-    socialLinksTitle?: string | undefined;
-    socialLinks?: SocialLink[] | undefined;
-}>, {
-    socialLinksTitle: string;
-}>>>, {
-    socialLinksTitle: string;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/types/types/Footer.d.ts

@@ -1,15 +0,0 @@
-import { StoryLink } from "./Storyblok";
-interface FooterLink {
-    text: string;
-    link: StoryLink;
-}
-export interface FooterCategory {
-    text: string;
-    link?: StoryLink;
-    subLinks?: FooterLink[];
-}
-export interface SocialLink {
-    socialNetwork: string;
-    link: StoryLink;
-}
-export {};

package/dist/types/types/Storyblok.d.ts

@@ -1,10 +0,0 @@
-export interface StoryLink {
-    linktype: "url" | "story" | "asset" | "email";
-    url?: string;
-    target?: HTMLAnchorElement["target"];
-    story?: {
-        url: string;
-        slug: string;
-        full_slug: string;
-    };
-}

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

@@ -1,2 +0,0 @@
-import { StoryLink } from "../types/Storyblok";
-export declare const getStoryblokUrl: (link: StoryLink) => string | undefined;