{"version":3,"file":"MHHPromotionPopUp-Bjezy2Dp.js","sources":["../../src/aem-components/mhh/MHHPromotionPopUp.vue"],"sourcesContent":["<script>\nexport default {\n\tname: 'MHHPromotionPopUp',\n\tinheritAttrs: false,\n};\n</script>\n\n<script setup>\nimport { Teleport } from 'vue';\nimport dayjs from 'dayjs';\nimport { useGlobalAEMState } from '~/logic/aem/global-aem-state.js';\nimport useDisableScroll from '~composables/useDisableScroll.js';\nimport { useFocusTrap } from '@vueuse/integrations/useFocusTrap';\nimport { getCookie, setCookie, deleteCookie } from '~/logic/helpers/cookies.js';\nimport CTAButton from '~/aem-components/CTAButton.vue';\nimport { sleep } from '~/logic/helpers/utils.js';\nimport { isMobileViewport } from '~/logic/composables/breakpoints.js';\nimport usePersistencyWithExpiry from '~/logic/composables/usePersistencyWithExpiry';\n\n\nconst props = defineProps({\n\tisHideInDesktop: { type: Boolean, default: false },\n\tisHideInMobile: { type: Boolean, default: false },\n\timage: { type: String, default: '' },\n\timageAltText: { type: String, default: '' },\n\tpromotionBody: { type: String, default: '' },\n\tctaButton1Label: { type: String, default: '' },\n\tctaButton1Path: { type: String, default: '#' },\n\tctaButton2Label: { type: String, default: '' },\n\tstartDateTime: { type: String, default: null },\n\tendDateTime: { type: String, default: null },\n\thiddenDuration: { type: String, default: 'next' }, // '0' | '30' | '60' | '180' | '360' | '720' | 'next'  <-- numbers are in minutes\n\tpromotionPopUpTitle: { type: String, default: 'PROMOTION_POPUP_VISIBILITY' },\n});\n\nconst COOKIE_ID = props.promotionPopUpTitle.replaceAll(' ', '_');\nconst { isEditorMode } = useGlobalAEMState();\n\nconst rootEl = ref(null);\nconst hasUserDismissed = ref(false);\nconst hasHiddenCookie = ref(false);\nconst hasUserDecidedSettings = ref(false);\n\n\nconst { hasFocus, activate: activeFocusTrap, deactivate: deactivateFocusTrap } = useFocusTrap(rootEl);\n\nconst { retrieveLocalStorage } = usePersistencyWithExpiry('cookies-notification:settings-decided');\n\nconst handleRootElOnMounted = async () => {\n\trootEl.value?.focus();\n\tawait nextTick(); // oddly enough, we have to use nextTick in order for focus trap to work 🤔\n\tactiveFocusTrap();\n};\nconst handleRootElBeforeUnmount = () => {\n\tdeactivateFocusTrap();\n\tclearInterval(checkValidityInterval);\n\tclearInterval(checkVisibilityByConsent);\n};\n\n\nconst getPopupExpiryDayjs = () => {\n\tif (props.hiddenDuration === 'once') {\n\t\treturn dayjs().add(1, 'year');\n\t}\n\n\tif (props.hiddenDuration === 'next') {\n\t\treturn dayjs().endOf('day');\n\t}\n\n\tconst durationInMinutes = parseInt(props.hiddenDuration, 10);\n\treturn durationInMinutes && dayjs().add(durationInMinutes, 'minute');\n};\n\nconst dismissOverlayByUser = () => {\n\thasUserDismissed.value = true;\n\n\tif (getPopupExpiryDayjs()) {\n\t\tconst expiryDateString = getPopupExpiryDayjs().toDate().toUTCString();\n\t\tsetCookie(COOKIE_ID, 'hidden', expiryDateString);\n\t}\n};\n\nif (getCookie(COOKIE_ID)) {\n\thasHiddenCookie.value = true;\n\t\n\t// Delete promo-popup-cookie when props.hiddenDuration is set as 0\n\tif (parseInt(props.hiddenDuration, 10) === 0) {\n\t\tdeleteCookie(COOKIE_ID);\n\t\thasHiddenCookie.value = false;\n\t}\n}\n\n\n// ------------------------------------ Timing Logic ------------------------------------\n/* Compute validity and visibility by comparing against props.startDateTime & props.endDateTime */\nconst isNowValidPromoTime = ref(dayjs().isBetween(\n\tdayjs(props.startDateTime),\n\tdayjs(props.endDateTime),\n\t'second',\n\t'[]',\n));\nconst checkValidityInterval = setInterval(() => {\n\tisNowValidPromoTime.value = dayjs().isBetween(\n\t\tdayjs(props.startDateTime),\n\t\tdayjs(props.endDateTime),\n\t\t'second',\n\t\t'[]',\n\t);\n}, 1000);\nif (dayjs().isSameOrAfter(props.endDateTime, 'second')) {\n\t// no chance of this pop-up ever showing\n\tclearInterval(checkValidityInterval);\n}\n// ------------------------------------ END Timing Logic ------------------------------------\n\nconst checkVisibilityByConsent = setInterval(() => {\n\tif (!hasUserDecidedSettings.value) {\n\t\thasUserDecidedSettings.value = retrieveLocalStorage()?.hasUserDecidedSettings ?? false;\n\t}\n}, 1000);\n\nif (hasUserDecidedSettings.value) {\n\tclearInterval(checkVisibilityByConsent);\n}\n\n// stop check the popup visibility when cookie consent has been decided.\nwatch(hasUserDecidedSettings, (newValue) => {\n\tif (newValue) {\n\t\tclearInterval(checkVisibilityByConsent);\n\t}\n});\n\n\n\nconst isPopUpVisibleComputed = computed(() => {\n\tif (isEditorMode.value) return true;\n\tif (hasUserDismissed.value) return false;\n\t\n\tconst authorConfiguredHidden = isMobileViewport.value ? (props.isHideInMobile) : (props.isHideInDesktop);\n\t\n\treturn (\n\t\tauthorConfiguredHidden === false &&\n\t\thasHiddenCookie.value === false &&\n\t\tisNowValidPromoTime.value &&\n\t\thasUserDecidedSettings.value\n\t);\n});\n\nif (!isEditorMode.value) {\n\t// due to multiple 'useDisableScroll' is in the page, it messes up with the scrollbar\n\tonMounted(async () => {\n\t\tawait sleep(500); // <-- this is a workaround / hack to force the below 'useDisableScroll' statement to take effect later\n\t\tuseDisableScroll(isPopUpVisibleComputed);\n\t});\n}\n\n</script>\n\n\n\n<template>\n<template v-if=\"isEditorMode && (props.isHideInDesktop || props.isHideInMobile)\">\n\t<div class=\"generic-container py-10 text-center\">\n\t\t<p>Hidden in: {{ [\n\t\t\t(props.isHideInDesktop ? 'Desktop' : null),\n\t\t\t(props.isHideInMobile ? 'Mobile' : null),\n\t\t].filter(Boolean).join(', ') }}</p>\n\t</div>\n</template>\n\n<component\n\t:is=\"isEditorMode ? 'div' : Teleport\"\n\tto=\"body\"\n>\n\t<Transition\n\t\tname=\"overlay-fade-and-zoom\"\n\t\tappear\n\t>\n\t\t<div\n\t\t\tv-if=\"isPopUpVisibleComputed\"\n\t\t\tref=\"rootEl\"\n\t\t\tclass=\"MHHPromotionPopUp backdrop\"\n\t\t\t:class=\"{\n\t\t\t\t'!relative': isEditorMode,\n\t\t\t}\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\ttabindex=\"-1\"\n\t\t\t@keydown.esc.capture=\"dismissOverlayByUser\"\n\t\t\t@vue:mounted=\"handleRootElOnMounted\"\n\t\t\t@vue:beforeUnmount=\"handleRootElBeforeUnmount\"\n\t\t\t@click.self=\"dismissOverlayByUser\"\n\t\t>\n\t\t\t<div class=\"overlay-container\">\n\t\t\t\t<div class=\"overlay-header\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"absolute top-4 right-4\"\n\t\t\t\t\t\taria-label=\"Popup close button\"\n\t\t\t\t\t\t@click=\"dismissOverlayByUser\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<icon-far-xmark class=\"w-6 h-6\" />\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"overlay-header-image w-full\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclass=\"w-full h-full object-center object-cover\"\n\t\t\t\t\t\t\t:src=\"props.image\"\n\t\t\t\t\t\t\t:alt=\"props.imageAltText\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"overlay-body px-6 mt-4\">\n\t\t\t\t\t<div v-html-sanitize=\"props.promotionBody\" class=\"author-html-container line-clamp-5\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"overlay-footer px-6 mt-6 mb-10\">\n\t\t\t\t\t<AppHyperlink\n\t\t\t\t\t\t:href=\"props.ctaButton1Path\"\n\t\t\t\t\t\tclass=\"flex-grow basis-0 hover:no-underline\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<CTAButton\n\t\t\t\t\t\t\t:ctaText=\"props.ctaButton1Label\"\n\t\t\t\t\t\t\tsizeType=\"small\"\n\t\t\t\t\t\t\tctaSizing=\"fluid\"\n\t\t\t\t\t\t\tstyleType=\"primary\"\n\t\t\t\t\t\t\tcontainerClass=\"w-full\"\n\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</AppHyperlink>\n\t\t\t\t\t<CTAButton\n\t\t\t\t\t\t:ctaText=\"props.ctaButton2Label\"\n\t\t\t\t\t\tsizeType=\"small\"\n\t\t\t\t\t\tctaSizing=\"fluid\"\n\t\t\t\t\t\tstyleType=\"secondary\"\n\t\t\t\t\t\tcontainerClass=\"flex-grow basis-0\"\n\t\t\t\t\t\t@click=\"dismissOverlayByUser\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</Transition>\n</component>\n</template>\n\n\n\n<style scoped lang=\"scss\">\n@use 'sass:color';\n@use '~/styles/partials/_var.scss';\n\n.MHHPromotionPopUp {\n\t&[mhhpromopopupstyle='style2'] {\n\t\t.overlay-container {\n\t\t\tmax-width: 588px;\n\t\t}\n\t}\n}\n\n.backdrop {\n\tposition: fixed;\n\tz-index: 10000;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: color.change(black, $alpha: 0.8);\n\t\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\ttransition: opacity 0.45s ease;\n}\n\n.overlay-container {\n\tbackground-color: var(--overlay-container-bg-color, white);\n\tmax-width: 408px;\n\twidth: 100%;\n\tmargin: auto;\n\toverflow: hidden;\n\t@apply rounded-3xl;\n}\n\n.overlay-header {\n\tposition: relative;\n}\n.overlay-header-image {\n\taspect-ratio: 3/2;\n}\n\n.overlay-body {\n\t\n}\n\n.overlay-footer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\t@apply gap-5;\n\t\n\t@media #{var.$query-max-md} {\n\t\tflex-direction: column;\n\t\t@apply gap-4;\n\t}\n}\n\n// animations\n.overlay-fade-and-zoom-enter-from,\n.overlay-fade-and-zoom-leave-to {\n\topacity: 0;\n}\n\n.overlay-fade-and-zoom-enter-active,\n.overlay-fade-and-zoom-leave-active {\n\ttransition: opacity 200ms;\n}\n\n.overlay-fade-and-zoom-enter-from,\n.overlay-fade-and-zoom-leave-to {\n\t.overlay-container {\n\t\ttransform: scale(1.2);\n\t}\n}\n\n.overlay-fade-and-zoom-enter-active,\n.overlay-fade-and-zoom-leave-active {\n\t.overlay-container {\n\t\ttransition: transform 200ms;\n\t}\n}\n\n</style>\n"],"names":["__default__","props","__props","COOKIE_ID","isEditorMode","useGlobalAEMState","rootEl","ref","hasUserDismissed","hasHiddenCookie","hasUserDecidedSettings","hasFocus","activeFocusTrap","deactivateFocusTrap","useFocusTrap","retrieveLocalStorage","usePersistencyWithExpiry","handleRootElOnMounted","_a","nextTick","handleRootElBeforeUnmount","checkValidityInterval","checkVisibilityByConsent","getPopupExpiryDayjs","dayjs","durationInMinutes","dismissOverlayByUser","expiryDateString","setCookie","getCookie","deleteCookie","isNowValidPromoTime","watch","newValue","isPopUpVisibleComputed","computed","isMobileViewport","onMounted","sleep","useDisableScroll","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_openBlock","_createElementBlock","_Fragment","$setup","_hoisted_1","_createElementVNode","_toDisplayString","_createCommentVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createVNode","_Transition","_mergeProps","_ctx","_withKeys","_withModifiers","_component_icon_far_xmark","_withDirectives","_directive_html_sanitize","_component_AppHyperlink"],"mappings":"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"}