https://victoriabeckhambeauty.com/cdn/shop/t/1091/assets/subscript…?v=114691334195435838301790901502

1customElements.get("subscriptions-widget")||customElements.define("subscriptions-widget",class extends HTMLElement{connectedCallback(){this.assignData(),this.cacheElements(),this.attachEventListeners(),this.bindFormVariantChange(),this.alternateButtonToggle=this.querySelector(".alternate-button-toggle"),this.alternateButtonToggle&&this.alternateButtonToggle.addEventListener("click",()=>{this.classList.toggle("subscription-widget__alternate-style")})}assignData(){const jsonScript=this.querySelector("script.variant-json");if(!jsonScript){console.error("No JSON script tag found"),this.remove();return}if(this.sellingPlan=JSON.parse(jsonScript.textContent||"null"),!this.sellingPlan){console.error("Selling plan data is empty or invalid"),this.remove();return}}cacheElements(){this.trigger=this.querySelector(".custom-select-trigger"),this.optionsContainer=this.querySelector(".custom-options"),this.sellingPlanRadios=this.querySelectorAll('input[name="selling_plan"]'),this.customOptionRadios=this.querySelectorAll('input[name="delivery-frequency"]'),this.oneTimePrice=this.querySelector(".one-time-price"),this.subscriptionPrice=this.querySelector(".subscription__price"),this.oneTimeLabel=this.querySelector(".option--one-time"),this.subscribeLabel=this.querySelector(".option--subscribe"),this.subscribeInput=this.querySelector("#subscribe-save"),this.reactivePrice=this.closest("vbb-product-form-reactive")?.querySelectorAll("vbb-reactive-price")??null}attachEventListeners(){this.trigger.addEventListener("click",()=>{const isHidden=this.optionsContainer.classList.toggle("hidden");if(this.trigger.setAttribute("aria-expanded",!isHidden),!isHidden){const firstLabel=[...this.optionsContainer.querySelectorAll("label")].find(label=>getComputedStyle(label).display!=="none");firstLabel&&firstLabel.focus()}}),this.sellingPlanRadios.forEach(radio=>{radio.addEventListener("change",()=>{const isSubscription=radio.id==="subscribe-save"||radio.name==="delivery-frequency";this.oneTimeLabel.setAttribute("aria-checked",!isSubscription),this.subscribeLabel.setAttribute("aria-checked",isSubscription),this.handleRadioChange(radio)})}),this.customOptionRadios.forEach(radio=>{radio.addEventListener("change",()=>{const label=this.querySelector(`label[for="${radio.id}"]`);this.querySelector(".custom-select-trigger__text").textContent=label.textContent,radio.checked=!0,this.optionsContainer.classList.add("hidden"),this.trigger.setAttribute("aria-expanded","false"),this.subscribeInput.value=radio.value,this.subscribeInput.checked=!0,this.subscribeInput.dispatchEvent(new Event("change",{bubbles:!0})),this.handleRadioChange(radio)})}),this.querySelectorAll(".option--one-time, .option--subscribe").forEach(label=>{label.addEventListener("keydown",e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),label.click())})}),document.addEventListener("click",e=>{this.contains(e.target)||(this.optionsContainer.classList.add("hidden"),this.trigger.setAttribute("aria-expanded","false"))}),this.optionsContainer.addEventListener("keydown",e=>{if(e.key==="Escape"){this.optionsContainer.classList.add("hidden"),this.trigger.setAttribute("aria-expanded","false"),this.trigger.focus();return}if(e.key==="Enter"||e.key===" "){e.preventDefault(),document.activeElement.tagName==="LABEL"&&document.activeElement.click();return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){e.preventDefault();const arrowOptions=[...this.optionsContainer.querySelectorAll("label")].filter(label=>getComputedStyle(label).display!=="none"),arrowIndex=arrowOptions.indexOf(document.activeElement),nextArrowIndex=e.key==="ArrowDown"?(arrowIndex+1)%arrowOptions.length:(arrowIndex-1+arrowOptions.length)%arrowOptions.length;arrowOptions[nextArrowIndex].focus();return}if(e.key!=="Tab")return;e.preventDefault();const options=[...this.optionsContainer.querySelectorAll("label")].filter(label=>getComputedStyle(label).display!=="none"),currentIndex=options.indexOf(document.activeElement),nextIndex=e.shiftKey?(currentIndex-1+options.length)%options.length:(currentIndex+1)%options.length;options[nextIndex].focus()})}handleRadioChange(radio){const activeVariantId=this.dataset.activeVariantId,sellingPlanPrice=this.sellingPlan[activeVariantId].allocations[radio.value]?.price,variantPrice=this.sellingPlan[activeVariantId].price,isSubscription=radio.id==="subscribe-save"||radio.name==="delivery-frequency";if(!activeVariantId){console.error("No active variant ID found");return}if(!activeVariantId||!this.sellingPlan[activeVariantId]){console.error("No selling plan data found");return}const pricesdiffer=sellingPlanPrice&&variantPrice&&sellingPlanPrice!==variantPrice;if(this.reactivePrice?.length>0){pricesdiffer&&this.reactivePrice.forEach(el=>{el.priceOveride(sellingPlanPrice,variantPrice)});const reactivePrice=this.closest("form").querySelector("vbb-reactive-cta")?.querySelector(".reactive-price");reactivePrice&&(reactivePrice.dataset.defaultText||(reactivePrice.dataset.defaultText=reactivePrice.textContent.trim()),reactivePrice.innerHTML=isSubscription?window.variantStrings.subscribe:reactivePrice.dataset.defaultText)}else{const priceElements=document.querySelectorAll(".vbb-product-details__buybox__details__price");if(!priceElements){console.error("No price elements found");return}let priceHtml=variantPrice;pricesdiffer&&(priceHtml=`<s class="yotpo-strikethrough">${variantPrice}</s> ${sellingPlanPrice}

1`),priceElements.forEach(item=>item.innerHTML=priceHtml);const atcButton=this.closest("form").querySelector('button[type="submit"]');atcButton&&(atcButton.innerHTML=isSubscription?window.variantStrings.subscribe:`${priceHtml} - ${window.variantStrings.addToBag}`)}}bindFormVariantChange(){this.productForm=this.closest("vbb-product-form-reactive"),this.productForm&&this.productForm.addEventListener("variant:changed",event=>{const activeVariantId=event.detail.variantId;this.setActiveSellingPlan(activeVariantId)})}setActiveSellingPlan(activeVariantId){this.dataset.activeVariantId=activeVariantId,this.resetWidget(activeVariantId)}resetWidget(activeVariantId){const defaultRadio=this.querySelector('.custom-options input[type="radio"]');defaultRadio&&(defaultRadio.checked=!0,defaultRadio.dispatchEvent(new Event("change",{bubbles:!0})));const oneTimeRadio=this.querySelector("#one-time");oneTimeRadio&&(oneTimeRadio.checked=!0,oneTimeRadio.dispatchEvent(new Event("change",{bubbles:!0})),this.oneTimeLabel.setAttribute("aria-checked","true"),this.subscribeLabel.setAttribute("aria-checked","false"));const subscriptionPriceEl=this.querySelector(".subscription__price span");subscriptionPriceEl&&(subscriptionPriceEl.textContent=this.sellingPlan[activeVariantId].allocations[this.subscribeInput.value].price)}});
2//# sourceMappingURL=/cdn/shop/t/1091/assets/subscriptions-widget.js.map?v=114691334195435838301790901502