https://www.drinktrade.com/cdn/shop/t/2106/assets/onboarding-progress-bar.js?v=42016083795943363171789670861

1import{getAllPossiblePaths}from"onboarding-step-tree";import{getCurrentStepState}from"onboarding-storage-utils";import{WINDOW_STORAGE_KEYS,ONBOARDING_STORAGE_KEYS}from"onboarding-step-constants";import{createBannerManager,interpolateDiscount,interpolateFreeBags,shouldHideDiscountBanner,shouldHideFreeBagsBanner}from"onboarding-banner-utils";import{initializeDynamicBanner}from"onboarding-dynamic-banner";class OnboardingProgressCalculator{constructor(e,t="ease-out",n=2){this.namespace=e,this.calculationType=t,this.easingScale=n,this.lastValidProgress=0}calculateProgress(e){const t=Object.values(window[WINDOW_STORAGE_KEYS.ONBOARDING_BLOCK_SETTINGS]||{}).find((t=>t.namespace===this.namespace&&t.stepId===e));if(t?.excludeFromProgress)return this.lastValidProgress;const n=this.getTraversedStepKeys(),s=this.getCurrentStepKey(e),r=this.calculateCurrentStepPosition(n,s),i=getAllPossiblePaths(this.namespace,"1"),a=this.findRelevantPaths(i,s),o=this.calculateAverageProgress(r,a),d=this.applyEasing(o);return this.lastValidProgress=d,d}getTraversedStepKeys(){const e=ONBOARDING_STORAGE_KEYS.STEP_DATA;if(window[WINDOW_STORAGE_KEYS.STEP_TREES]&&window[WINDOW_STORAGE_KEYS.STEP_TREES][this.namespace]&&window[WINDOW_STORAGE_KEYS.STEP_TREES][this.namespace][e]&&window[WINDOW_STORAGE_KEYS.STEP_TREES][this.namespace][e].traversed){const t=window[WINDOW_STORAGE_KEYS.STEP_TREES][this.namespace][e].traversed;return Array.from(t).filter((e=>{const t=e.split("_")[0],n=Object.values(window[WINDOW_STORAGE_KEYS.ONBOARDING_BLOCK_SETTINGS]||{}).find((e=>e.namespace===this.namespace&&e.stepId===t));return!n?.excludeFromProgress}))}return[]}getCurrentStepKey(e){let t=null;if(window[WINDOW_STORAGE_KEYS.ONBOARDING_BLOCK_SETTINGS]){const n=Object.entries(window[WINDOW_STORAGE_KEYS.ONBOARDING_BLOCK_SETTINGS]).find((([,t])=>t.namespace===this.namespace&&t.stepId===e));n&&(t=n[0])}return t?`${e}_${t}`:`${e}_unknown`}calculateCurrentStepPosition(e,t){const n=e.filter((e=>e!==t)),s=t.split("_")[0],r=Object.values(window[WINDOW_STORAGE_KEYS.ONBOARDING_BLOCK_SETTINGS]||{}).find((e=>e.namespace===this.namespace&&e.stepId===s)),i=r?.excludeFromProgress;return i?n.length:n.length+1}findRelevantPaths(e,t){const n=this.getTraversedStepKeys();return e.filter((e=>{if(!e.includes(t))return!1;const s=e.indexOf(t);for(const r of n){if(r===t)continue;const n=e.indexOf(r);if(-1===n)return!1;if(n>s)return!1}return!0}))}calculateAverageProgress(e,t){if(0===t.length)return 0;let n=0;t.forEach((t=>{const s=t.length;n+=e/s}));return n/t.length}applyEasing(e){let t;switch(this.calculationType){case"ease-out":t=1-Math.pow(1-e,this.easingScale);break;case"ease-in":t=Math.pow(e,this.easingScale);break;default:t=e}return t}calculateProgressWithBranching(e){return this.calculateProgress(e)}}class OnboardingProgressBar{constructor(e,t){this.sectionId=e,this.settings=t,this.namespace=t.namespace,this.calculator=new OnboardingProgressCalculator(this.namespace,t.progressCalculationType,t.easingScale),this.bannerManager=createBannerManager(this.namespace),this.dynamicBannerManager=null,this.progressFill=document.getElementById(`progress-fill-${e}`),this.backButton=document.getElementById(`progress-back-${e}`),this.progressBar=document.querySelector(`[data-section-id="${e}"] .onboarding-progress-bar[role="progressbar"]`),this.progressIndicatorWrapper=document.getElementById(`progress-indicator-wrapper-${e}`),this.progressBarSection=document.getElementById(`progress-bar-section-${e}`),this.announceRegion=document.getElementById(`progress-announcements-${e}`),this.banner=document.getElementById(`onboarding-banner-${e}`),this.bannerTitle=document.getElementById(`banner-title-${e}`),this.progressSection=document.querySelector(`[data-section-id="${e}"]`),this.init()}init(){if(this.eventListeners=[],this.backButton){const e=()=>this.handleBackClick();this.backButton.addEventListener("click",e),this.eventListeners.push({element:this.backButton,event:"click",handler:e})}const e=e=>

1this.handleStepChange(e);document.addEventListener(`${this.namespace}:currentStepUpdated`,e),this.eventListeners.push({element:document,event:`${this.namespace}:currentStepUpdated`,handler:e});const t=()=>{this.updateProgress(),this.updateBackButtonState(),this.updateBanner(),this.updateVisibility()};document.addEventListener(`${this.namespace}:stepData`,t),this.eventListeners.push({element:document,event:`${this.namespace}:stepData`,handler:t});const n=()=>{this.updateBanner(),this.updateVisibility()};document.addEventListener(`${this.namespace}:bannerState`,n),this.eventListeners.push({element:document,event:`${this.namespace}:bannerState`,handler:n});const s=()=>{this.updateBanner(),this.updateVisibility()};document.addEventListener(`${this.namespace}:dynamicBannerUpdate`,s),this.eventListeners.push({element:document,event:`${this.namespace}:dynamicBannerUpdate`,handler:s}),this.dynamicBannerManager=initializeDynamicBanner(this.namespace,this),setTimeout((()=>{this.updateProgress(),this.updateBackButtonState(),this.updateBanner(),this.updateVisibility()}),200),setTimeout((()=>{this.updateBanner(),this.updateVisibility()}),1e3);const r=()=>{setTimeout((()=>{this.updateProgress(),this.updateBackButtonState(),this.updateBanner(),this.updateVisibility()}),100)};document.addEventListener("onboarding:navigateToStep",r),this.eventListeners.push({element:document,event:"onboarding:navigateToStep",handler:r})}destroy(){this.eventListeners&&(this.eventListeners.forEach((({element:e,event:t,handler:n})=>{e.removeEventListener(t,n)}

1)),this.eventListeners=[]),this.dynamicBannerManager&&this.dynamicBannerManager.destroy&&this.dynamicBannerManager.destroy()}handleBackClick(){const e=getCurrentStepState(this.namespace),t=e&&("1"===e.currentStepId||1===e.currentStepId);e&&e.previousStepId&&!t&&window.history.back()}handleStepChange(){this.updateProgress(),this.updateBackButtonState(),this.updateBanner(),this.updateVisibility()}updateBackButtonState(){if(!this.backButton)return;const e=getCurrentStepState(this.namespace),t=e&&("1"===e.currentStepId||1===e.currentStepId);e&&e.previousStepId&&!t?(this.backButton.disabled=!1,this.backButton.classList.remove("disabled"),this.backButton.setAttribute("aria-label",`Go back to step ${e.previousStepId}`),this.backButton.removeAttribute("aria-disabled")):(this.backButton.disabled=!0,this.backButton.classList.add("disabled"),this.backButton.setAttribute("aria-label","Back button disabled - currently on first step"),this.backButton.setAttribute("aria-disabled","true"))}updateVisibility(){const e=getCurrentStepState(this.namespace);let t,n=e?.currentStepId;if(n)t=Object.values(window[WINDOW_STORAGE_KEYS.ONBOARDING_BLOCK_SETTINGS]||{}).find((e=>e.namespace===this.namespace&&e.stepId===n));else{const e=Object.values(window[WINDOW_STORAGE_KEYS.ONBOARDING_BLOCK_SETTINGS]||{}).find((e=>e.namespace===this.namespace&&"1"===e.stepId));e&&(e.bannerTitle||"#530C18"!==e.bannerBackgroundColor||"#FFFFFF"!==e.bannerTextColor)&&(t=e,n="1")}if(!this.progressSection)return;const s=t?.sectionSettings.background_color||"red";this.progressSection.style.backgroundColor=s;const r=t&&!t.hideProgressBar&&!this.settings.hideProgressBarOnly,i=this.shouldShowBanner();if(r||i){this.progressSection.style.display="block",this.progressSection.removeAttribute("aria-hidden");const e=this.progressSection.querySelector(".onboarding-progress-bar-section");if(e&&(r?(e.style.display="block",e.removeAttribute("aria-hidden")):(e.style.display="none",e.setAttribute("aria-hidden","true"))),this.progressIndicatorWrapper){const e=t?.hideProgressIndicator||!1,n="true"===this.progressSection?.getAttribute("data-rebrand");e?(this.progressIndicatorWrapper.style.display="none",this.progressIndicatorWrapper.setAttribute("aria-hidden","true"),this.progressBarSection&&!n&&(this.progressBarSection.classList.remove("border-b"),this.progressBarSection.classList.remove("border-[rgba(37,37,37,0.15)]"))):(this.progressIndicatorWrapper.style.display="block",this.progressIndicatorWrapper.removeAttribute("aria-hidden"),this.progressBarSection&&!n&&(this.progressBarSection.classList.add("border-b"),this.progressBarSection.classList.add("border-[rgba(37,37,37,0.15)]")))}this.updateBodyPadding(i,r),this.updateBodyClasses(i,r)}else this.progressSection.style.display="none",this.progressSection.setAttribute("aria-hidden","true"),this.updateBodyPadding(!1,!1),this.updateBodyClasses(!1,!1)}shouldShowBanner(){const e=this.bannerManager.getEffectiveBannerState();return e&&e.hasConfiguration&&!e.hidden&&e.title&&""!==e.title.trim()}updateBodyClasses(e,t){const n=document.body;e?n.classList.add("onboarding-banner-visible"):n.classList.remove("onboarding-banner-visible"),t?n.classList.add("onboarding-progress-visible"):n.classList.remove("onboarding-progress-visible")}updateBanner(){const e=getCurrentStepState(this.namespace),t=this.isDynamicBannerActive();e?.currentStepId&&!t&&this.bannerManager.updateBannerState(e.currentStepId);const n=this.bannerManager.getEffectiveBannerState();if(!this.banner||!this.bannerTitle)return;if(!n||!n.hasConfiguration)return this.banner.style.display="none",this.banner.setAttribute("aria-hidden","true"),void this.updateHeaderPositioning(!1);if(n.hidden)return this.banner.style.display="none",this.banner.setAttribute("aria-hidden","true"),void this.updateHeaderPositioning(!1);if(shouldHideFreeBagsBanner(n.title||"",this.namespace)||shouldHideDiscountBanner(n.title||"",this.namespace))return this.banner.style.display="none",this.banner.setAttribute("aria-hidden","true"),void this.updateHeaderPositioning(!1);this.banner.style.display="block",this.banner.removeAttribute("aria-hidden"),this.updateHeaderPositioning(!0),this.banner.style.setProperty("--banner-bg-color",n.backgroundColor||"#530C18"),this.banner.style.setProperty("--banner-text-color",n.textColor||"#FFFFFF");let s=interpolateDiscount(n.title||"",this.namespace);s=interpolateFreeBags(s,this.namespace),this.bannerTitle.textContent=s,n.isDynamic?(this.banner.setAttribute("data-dynamic-banner","true"),this.banner.setAttribute("data-dynamic-step",n.dynamicStepId||"")):(this.banner.removeAttribute("data-dynamic-banner"),this.banner.removeAttribute("data-dynamic-step"))}isDynamicBannerActive(){const e=!!this.dynamicBannerManager,t=this.dynamicBannerManager?.isScrollingMode,n=this.dynamicBannerManager?.isInitialized;return e&&t&&n}updateHeaderPositioning(e){if(this.isDynamicBannerActive())return;const t=document.getElementById("shopify-section-header");t&&(t.style.top=e?"41px":"0px")}updateBodyPadding(e,t=null){const n=document.body,s=window.innerWidth<=768;if(null===t){const e=this.progressSection?.querySelector(".onboarding-progress-bar-section");t=e&&"none"!==e.style.display&&!e.hasAttribute("aria-hidden")}n.style.paddingTop=e&&t?s?"108px":"110px":e?s?"48px":"56px":t?s?"56px":"64px":"0px"}updateProgress(){const e=getCurrentStepState(this.namespace);if(!e||!e.currentStepId)return this.setProgressPercentage(0),void this.announceProgress(0,null);const t=100*this.calculator.calculateProgressWithBranching(e.currentStepId);this.setProgressPercentage(t),this.announceProgress(t,e.currentStepId)}setProgressPercentage(e){const t=Math.min(Math.max(e,0),100);this.progressFill&&(this.progressFill.style.width=`${t}%`),this.progressBar&&(this.progressBar.setAttribute("aria-valuenow",Math.round(t)),this.progressBar.setAttribute("aria-valuetext",`${Math.round(t)}% complete`))}announceProgress(e,t){if(!this.announceRegion)return;const n=Math.round(e);if(t){let e="";const s=window.onboardingBlockSettings;if(s)for(const[,n]of Object.entries(s))if(n.stepId===t&&n.namespace===this.namespace){const t=n.blockSettings?.find((e=>"text"===e._type&&"title"===e.key))||n.blockSettings?.find((e=>"title"===e._type));t&&t.title?e=` - ${t.title}`:t&&t.value&&(e=` - ${t.value}`);break}this.announceRegion.textContent=`Step ${t}${e}. ${n}% complete.`}else this.announceRegion.textContent=`Onboarding ${n}% complete.`}}export function initializeOnboardingProgressBar(e,t){return new OnboardingProgressBar(e,t)}export{OnboardingProgressCalculator,OnboardingProgressBar};