{"version":3,"file":"D87oOF54.js","sources":["../../../../layouts/default.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useQueryClient } from '@tanstack/vue-query'\n  const { companyId } = storeToRefs(useStoreApp())\n  const { extractTypography } = useBrandingTypography()\n  const { company } = storeToRefs(useStoreCompany())\n\n  useStoreBranding().fetchBrandings(companyId.value)\n  const { brandings } = storeToRefs(useStoreBranding())\n  useFontsCssCompanySet()\n\n  const headerBranding = computed(() => {\n    const brandingHeader = brandings.value?.branding_header\n\n    if (!brandingHeader) return\n\n    const { id, section_color, img_mobile, img_desktop, layout, display } = brandingHeader\n\n    return {\n      id,\n      backgroundColor: section_color,\n      backgroundImageDesktopUrl: img_desktop,\n      backgroundImageMobileUrl: img_mobile,\n      sectionDescription: extractTypography('branding_header', 'description', 'secondary'),\n      sectionTitle: extractTypography('branding_header', 'title', 'primary'),\n      contentAlignment: getContentAlignment(layout),\n      display\n    }\n  })\n\n  const postMainPageHeight = () => {\n    const { body, documentElement } = document\n\n    let height = Math.max(body.scrollHeight, body.offsetHeight, documentElement.offsetHeight)\n    const header = document.getElementsByClassName('section-header')[0]\n    const sections = document.getElementById('container-sections')\n    if (header && sections) {\n      height = header.scrollHeight + Math.max(sections.scrollHeight, sections.offsetHeight)\n    }\n    window.parent.postMessage({ height, isWeWiink: true }, '*')\n  }\n\n  const postNewHeightMessage = async () => {\n    const countModalOnScreen = document.querySelectorAll('.lds-modal__container').length\n\n    useStoreApp().domModalsCount = countModalOnScreen\n\n    await nextTick()\n\n    if (countModalOnScreen === 0) {\n      postMainPageHeight()\n    } else {\n      const allModals = document.querySelectorAll('.lds-modal__mask')\n      const count = allModals.length\n      if (count > 1 && useStoreApp().isModalFullPage) {\n        for (let i = 0; i < count - 1; i++) {\n          const modal = allModals[i] as HTMLElement\n          modal.style.display = 'none'\n        }\n      } else if (count === 1) {\n        const modal = allModals[0] as HTMLElement\n        modal.style.display = 'inherit'\n      }\n      const lastModalOnScreen = document.querySelectorAll('.lds-modal__container')[count - 1] as HTMLElement\n      await nextTick()\n\n      if (!lastModalOnScreen) {\n        postMainPageHeight()\n        return\n      }\n\n      const height = Math.max(lastModalOnScreen.scrollHeight, lastModalOnScreen.offsetHeight)\n      if ((!useStoreApp().isModalFullPage || count > 1) && useStoreApp().isMobile) {\n        window.parent.postMessage({ fullheight: true, isWeWiink: true }, '*')\n      } else {\n        window.parent.postMessage({ height, isWeWiink: true }, '*')\n      }\n    }\n    setAppWidth()\n  }\n\n  let readyToScroll = false\n  const queryClient = useQueryClient()\n  const scrollToAnchorWhenReady = () => {\n    setTimeout(() => {\n      if (queryClient.isFetching() > 0 && !document.URL.includes('shopify/embedded')) {\n        // API calls started to populate the page\n        readyToScroll = true\n      }\n      if (queryClient.isFetching() === 0 && readyToScroll) {\n        // all API calls finished, page has final size\n        scrollToAnchor()\n      } else {\n        scrollToAnchorWhenReady() // Page not ready yet to scroll, retry\n      }\n    }, 100)\n  }\n\n  const scrollToAnchor = () => {\n    let hash: string | undefined | null\n    if (useEmbedded().isEmbedded.value) {\n      hash = new URL(document.URL).searchParams.get('anchorHash')\n    } else {\n      return\n    }\n\n    const isModalAnchor = hash?.includes('-')\n    // if url hash is like #challenge-1 navigate to section as well as open the modal\n    if (isModalAnchor) {\n      hash = hash!.split('-')[0].replace('#', '') // #challenge-1 => challenge (anchor id)\n    }\n\n    const item = document.getElementById(hash || '')\n    if (item)\n      nextTick(() => {\n        // do not scroll to anchor if it is a modal anchor in a mobile context\n        if (useEmbedded().isEmbedded.value && useStoreApp().isMobile && !isModalAnchor) {\n          const top = item.getBoundingClientRect().top + useStoreStore().offset\n          window.parent.postMessage({ scrollTo: { top, behavior: 'smooth' }, isWeWiink: true }, '*')\n          return\n        }\n\n        item.scrollIntoView({ behavior: 'smooth' })\n      })\n  }\n\n  watch(brandings, () => {\n    if (brandings) {\n      scrollToAnchorWhenReady()\n    }\n  })\n\n  const observer = ref<MutationObserver | null>(null)\n  const observerResize = ref<ResizeObserver | null>(null)\n\n  const setAppWidth = () => {\n    const { body, documentElement } = document\n    useStoreApp().appWidth = Math.max(body.scrollWidth, body.offsetWidth, documentElement.offsetWidth)\n  }\n\n  onMounted(() => {\n    observer.value = new MutationObserver(postNewHeightMessage)\n    observer.value.observe(document.body, { childList: true, subtree: true })\n    observerResize.value = new ResizeObserver(setAppWidth)\n    observerResize.value.observe(document.body)\n  })\n\n  onUnmounted(() => {\n    observer.value?.disconnect()\n    observerResize.value?.disconnect()\n  })\n</script>\n\n<template>\n  <div\n    v-if=\"headerBranding\"\n    v-show=\"useStoreApp().domModalsCount === 0\"\n    class=\"default-layout\"\n  >\n    <SectionHeader\n      v-if=\"headerBranding.display\"\n      :id=\"headerBranding.id\"\n      class=\"section-header\"\n      :section-title=\"headerBranding.sectionTitle\"\n      :section-description=\"headerBranding.sectionDescription\"\n      :background-color=\"headerBranding.backgroundColor\"\n      :background-image-desktop-url=\"headerBranding.backgroundImageDesktopUrl\"\n      :background-image-mobile-url=\"headerBranding.backgroundImageMobileUrl\"\n      :content-alignment=\"headerBranding.contentAlignment\"\n      :powered-by-text=\"$t('SectionHeader.poweredBy')\"\n      powered-by-link=\"https://loyoly.io/\"\n      :show-powered-by=\"company?.settings.features.white_label\"\n    >\n      <template #background-image-desktop=\"{ imageUrl }\">\n        <NuxtImg\n          :src=\"imageUrl\"\n          alt=\"Banner of the loyalty program\"\n          fetch-priority=\"high\"\n          format=\"webp\"\n        />\n      </template>\n      <template #background-image-mobile=\"{ imageUrl }\">\n        <NuxtImg\n          :src=\"imageUrl\"\n          alt=\"Banner of the loyalty program\"\n          fetch-priority=\"high\"\n          format=\"webp\"\n        />\n      </template>\n      <template #title>\n        {{ headerBranding.sectionTitle.text }}\n      </template>\n      <template #description>\n        {{ headerBranding.sectionDescription.text }}\n      </template>\n      <div id=\"header-buttons\" />\n    </SectionHeader>\n\n    <slot />\n  </div>\n  <div\n    v-else\n    class=\"loader\"\n  />\n</template>\n\n<style scoped>\n  .default-layout {\n    width: 100%;\n    box-sizing: border-box;\n\n    #header-buttons {\n      display: flex;\n      gap: 10px;\n      flex-direction: column;\n\n      @media (min-width: 768px) {\n        gap: 20px;\n        flex-direction: row;\n      }\n    }\n  }\n\n  .loader {\n    display: block;\n    position: fixed;\n    z-index: 1031;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 64px;\n    height: 64px;\n    box-sizing: border-box;\n    border: solid 4px transparent;\n    border-top-color: #000;\n    border-left-color: #000;\n    border-bottom-color: #efefef;\n    border-right-color: #efefef;\n    border-radius: 50%;\n    -webkit-animation: loader 400ms linear infinite;\n    animation: loader 400ms linear infinite;\n  }\n\n  @keyframes loader {\n    0% {\n      transform: translate(-50%, -50%) rotate(0deg);\n    }\n    100% {\n      transform: translate(-50%, -50%) rotate(360deg);\n    }\n  }\n</style>\n"],"names":["companyId","storeToRefs","useStoreApp","extractTypography","useBrandingTypography","company","useStoreCompany","useStoreBranding","brandings","useFontsCssCompanySet","headerBranding","computed","brandingHeader","_a","id","section_color","img_mobile","img_desktop","layout","display","getContentAlignment","postMainPageHeight","body","documentElement","height","header","sections","postNewHeightMessage","countModalOnScreen","nextTick","allModals","count","modal","lastModalOnScreen","setAppWidth","readyToScroll","queryClient","useQueryClient","scrollToAnchorWhenReady","scrollToAnchor","hash","useEmbedded","isModalAnchor","item","top","useStoreStore","watch","observer","ref","observerResize","onMounted","onUnmounted","_b"],"mappings":"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"}