https://teaforte.com/cdn/shop/t/1460/assets/component-form-select-teas.js?v=119147208272806362901789415127

1import{utils,LitElement,html,broadcastReceiver}from"@hh/global.js";const{addToCart,reRenderShopifySections}=utils;class HHFormSelectTeas extends LitElement{static properties={collectionHandle:{type:String,attribute:"collection-handle"},greetingCardHandle:{type:String,attribute:"greeting-card-handle"},maxProductLayer:{type:Number,attribute:"max-product-layer"},activeVariant:{type:Number,attribute:"active-variant"},showMiniCartAfterSubmission:{type:Boolean,attribute:"show-mini-cart"}};constructor(){super(),this.modal=document.querySelector("#js-product-select-teas-modal"),this.collectionHandle="",this.maxProductLayer=0,this.activeVariant=0,this.remainingProduct=0,this.quantityValue=0,this.collectionJson={},this.greetingCardJson={},this.productCards=[...this.querySelectorAll(".js-product-select-card")],this.greetingCards=[...this.querySelectorAll('.js-product-select-card[data-product-collection="greeting-card"]')],this.addProductBtns=[...this.querySelectorAll(".product-select-teas__card-add-btn")],this.selectedProducts=[],this.selectedGreetingCard={}

1,this.emptyGreetingCard={id:"0",title:"No Card",price:0},this.alreadyOnReview=!1,this.selectionStep=this.querySelector('.form-select-teas__step-item[data-step="selection"]'),this.greetingStep=this?.querySelector('.form-select-teas__step-item[data-step="greeting"]'),this.reviewStep=this.querySelector('.form-select-teas__step-item[data-step="review"]')}connectedCallback(){super.connectedCallback(),this.fetchCollectionJson(),this.remainingProduct=this.maxProductLayer,this.productCards.forEach(product=>{product.addEventListener("click",this.onClickProductCard.bind(this))}),this.addProductBtns.forEach(btn=>{btn.addEventListener("click",this.addProduct.bind(this))}),this.receiver=broadcastReceiver("quantity",(...args)=>{this.getDataFromBroadCast(...args)}),this.selectedGreetingCard=this.emptyGreetingCard}disconnectedCallback(){super.disconnectedCallback(),this.receiver?.disconnect()}getDataFromBroadCast(data){if(data.isTea){this.quantityValue=data.value,this.remainingProduct=this.remainingProduct-this.quantityValue,this.updateMaxInput(data.key,this.remainingProduct);const maxLayerLabelElem=this.querySelector('.js-select-layer-label[data-step="selection"] .label');maxLayerLabelElem.textContent=this.maxProductLayer-this.remainingProduct,this.isFull(this.remainingProduct),this.toggleProduct(data.key)}else{const maxLayerLabelElem=this.querySelector('.js-select-layer-label[data-step="greeting"] .label');maxLayerLabelElem.textContent=data.value==1?"Card":"None",this.disableOtherGiftCards(data.key),this.toggleGreetingProduct(data.key)}}fetchCollectionJson(){fetch(`/collections/${this.collectionHandle}?view=json`).then(response=>response.json()).then(data=>{this.collectionJson=data}),this.greetingCardHandle&&fetch(`/collections/${this.greetingCardHandle}?view=json`).then(response=>response.json()).then(data=>{this.greetingCardJson=data})}removeActiveClass(){this.productCards.forEach(product=>{product.classList.remove("active")})}onClickProductCard(event){if(event.currentTarget.classList.contains("active"))return;this.removeActiveClass(),event.currentTarget.classList.add("active");const productHandle=event.currentTarget.dataset.productHandle,productCollection=event.currentTarget.dataset.productCollection;if(productCollection=="teas"){const productObj=this.collectionJson.find(product=>product.handle===productHandle);this.updateFeaturedProduct(productObj,"teas")}else if(productCollection=="greeting-card"){const productObj=this.greetingCardJson.find(product=>product.handle===productHandle);this.updateFeaturedProduct(productObj,"greeting-card")}}updateFeaturedProduct(product,collection){const featuredUrl=this.querySelector(`.js-featured-product-url--${collection}`),featuredTitle=this.querySelector(`.js-featured-product-title--${collection}`),featuredImage=this.querySelector(`.js-featured-product-image--${collection}`),featuredDescription=this.querySelector(`.js-featured-product-description--${collection}`),featuredTags=this.querySelector(`.js-featured-product-tags--${collection}`);if(featuredTitle.textContent=product.title,product?.images[1]?.src!=null){let image=`<img srcset="${this.generateImgSrcset(product.images[1])}" src="${product.images[1].src}" loading="lazy" alt="${product.title}" width="${product.images[1].width}" height="${product.images[1].height}" class="product-media">`;featuredImage.innerHTML=image}else if(product?.images[0]?.src!=null){let image=`<img srcset="${this.generateImgSrcset(product.images[0])}" src="${product.images[0].src}" loading="lazy" alt="${product.title}" width="${product.images[0].width}" height="${product.images[0].height}" class="product-media">`;featuredImage.innerHTML=image}featuredDescription.textContent=product?.tea_chest_customizer?.description||product?.description.entry||product?.description.default;let tagContainer="";product?.tea_chest_customizer?.tags.forEach(tag=>{tagContainer+=`<p class="mb0">${tag}</p>`}),featuredTags&&(featuredTags.innerHTML=tagContainer),product?.pdp_tf_select?.url!=null?featuredUrl&&featuredUrl.setAttribute("href",product?.pdp_tf_select?.url):featuredUrl&&featuredUrl.setAttribute("href",product.url||"#")}generateImgSrcset(imgObj){const imageWidth=imgObj.width,imageSrc=imgObj.src,widths=[160,240,320,480,640,768,1024,1280,1366,1440,1600,1920,2560];let srcset="";return widths.forEach(width=>{imageWidth>width&&(srcset+=`${imageSrc}&amp;width=${width} ${width}w,`)}),srcset}formatPrice(num,fraction=2){return"$"+(Number(num)/100).toFixed(2).toLocaleStr

1ing("en-EN",{minimumFractionDigits:fraction})}updateMaxInput(input,max){this.productCards.forEach(elem=>{const quantitySelector=elem.querySelector("hh-quantity-selector");elem.getAttribute("is-added")=="true"||elem.getAttribute("is-tea")=="false"||(quantitySelector.setAttribute("max",max),this.remainingProduct==0?quantitySelector.setAttribute("is-full","true"):quantitySelector.setAttribute("is-full","false"))})}disableOtherGiftCards(input){this.greetingCards.forEach(elem=>{const quantitySelector=elem.querySelector("hh-quantity-selector");elem.getAttribute("product-id")!=input&&(elem.setAttribute("is-added","false"),quantitySelector.setAttribute("is-added","false"))})}isFull(remaining){const iconCheck=this.querySelector('.js-select-layer-label[data-step="selection"] .icon-check'),btnNext=this.querySelector(".select-teas-btn__next");remaining==0?(iconCheck.classList.add("is-full"),btnNext.setAttribute("aria-disabled","false"),btnNext.removeAttribute("disabled")):(iconCheck.classList.remove("is-full"),btnNext.setAttribute("aria-disabled","true"),btnNext.setAttribute("disabled","true"),this.greetingCardHandle&&(this.greetingStep.classList.remove("active"),this.greetingStep.querySelector(".step-counter").setAttribute("disabled","true"),this.greetingStep.querySelector(".step-counter").setAttribute("aria-disabled","true")),this.reviewStep.classList.remove("active"),this.reviewStep.querySelector(".step-counter").setAttribute("disabled","true"),this.reviewStep.querySelector(".step-counter").setAttribute("aria-disabled","true"))}toggleProduct(id){const product=this.collectionJson.find(product2=>product2.id===id);this.selectedProducts.some(item=>item.id===product.id)?this.selectedProducts=this.selectedProducts.filter(item=>item.id!==product.id):(product.quantity=parseInt(this.quantityValue),this.selectedProducts=[...this.selectedProducts,product])}toggleGreetingProduct(id){const product=this.greetingCardJson.find(product2=>product2.id===id);product.id===this.selectedGreetingCard.id?this.selectedGreetingCard=this.emptyGreetingCard:(this.selectedGreetingCard={},this.selectedGreetingCard=product)}goToNextStep(event){event.target.getAttribute("next-step")=="greeting"?this.goToGreeting(event):this.goToReview(event)}goToSelection(event){const step=event.target.getAttribute("step");this.setAttribute("current-step",step),this.selectionStep.classList.remove("completed"),this.selectionStep.classList.add("active"),this.greetingCardHandle&&this.greetingStep.classList.remove("active","completed"),this.reviewStep.classList.remove("active")}goToGreeting(event){const step=event.target.getAttribute("step");this.setAttribute("current-step",step),this.selectionStep.classList.remove("active"),this.selectionStep.classList.add("completed"),this.alreadyOnReview||(this.selectionStep.querySelector(".step-counter").removeAttribute("disabled"),this.selectionStep.querySelector(".step-counter").setAttribute("aria-disabled","false")),this.greetingStep.classList.add("active"),this.greetingStep.querySelector(".step-counter").removeAttribute("disabled"),this.greetingStep.querySelector(".step-counter").setAttribute("aria-disabled","false"),this.greetingStep.classList.add("active"),this.reviewStep.classList.remove("active")}goToReview(event){this.alreadyOnReview=!0;const step=event.target.getAttribute("step");this.setAttribute("current-step",step),this.selectionStep.classList.add("completed"),this.selectionStep.querySelector(".step-counter").removeAttribute("disabled"),this.selectionStep.querySelector(".step-counter").setAttribute("aria-disabled","false"),this.greetingCardHandle&&(this.greetingStep.classList.add("completed"),this.greetingStep.classList.remove("active")),this.reviewStep.classList.add("active"),this.reviewStep.querySelector(".step-counter").removeAttribute("disabled"),this.reviewStep.querySelector(".step-counter").setAttribute("aria-disabled","false"),this.generateBoxedProducts(),this.greetingCardHandle&&this.generateGreetingCard()}boxedProducts(){return["top"].reduce((acc,curLayer)=>{const layerItems=[];return this.selectedProducts.forEach(item=>

1{[...Array(item.quantity)].forEach(()=>{layerItems.push(item)})}),{...acc,[curLayer]:layerItems}},{})}generateBoxedProducts(){const layerItems=this.boxedProducts(),boxedProductWrapper=this.querySelector(".js-review-box-wrapper"),boxedProductWrapper2=this.querySelector(".js-review-box-wrapper-2");let topLayer="",bottomLayer="";layerItems.top.forEach((item,index)=>{const srcset=this.generateImgSrcset(item.images[2]),srcsetHover=this.generateImgSrcset(item.images[1]);index<4?topLayer+=`<div class="form-select-teas__reviews__product-box">
2          <div class="form-select-teas__reviews__product-box-base">
3            <span>${index+1}</span>
4            <div class="chest-preview">
5              <img srcset="${srcset}" src="${item.images[2].src}" loading="lazy" alt="${item.title}" width="${item.images[2].width}" height="${item.images[2].height}">
6            </div>
7            <div class="chest-preview-hover">
8              <img srcset="${srcsetHover}" src="${item.images[1].src}" loading="lazy" alt="${item.title}" width="${item.images[1].width}" height="${item.images[1].height}">
9            </div>
10          </div>
11        </div>`:bottomLayer+=`<div class="form-select-teas__reviews__product-box">
12          <div class="form-select-teas__reviews__product-box-base">
13            <span>${index+1}</span>
14            <div class="chest-preview">
15              <img srcset="${srcset}" src="${item.images[2].src}" loading="lazy" alt="${item.title}" width="${item.images[2].width}" height="${item.images[2].height}">
16            </div>
17            <div class="chest-preview-hover">
18              <img srcset="${srcsetHover}" src="${item.images[1].src}" loading="lazy" alt="${item.title}" width="${item.images[1].width}" height="${item.images[1].height}">
19            </div>
20          </div>
21        </div>`}),boxedProductWrapper.innerHTML=topLayer,bottomLayer&&(boxedProductWrapper2.innerHTML=bottomLayer)}generateGreetingCard(){const giftCardSelectedLabel=this.querySelector(".js-selected-gift-card"),html2=`${this.selectedGreetingCard?.title} Selected - ${this.formatPrice(this.selectedGreetingCard?.price)}`;giftCardSelectedLabel.innerHTML=html2}generateBundle(){const pairValues=this.selectedProducts.reduce((acc,cur)=>{const{[cur.id]:id=0,...rest}=acc;return{...rest,[cur.id]:id+cur.quantity}},{});return Object.entries(pairValues).map(([key,value])=>`${key}x${value}`).join("|")}generateBundleNames(){const pairValues=this.selectedProducts.reduce((acc,cur)=>{const{[cur.id]:id,...rest}=acc,prevCount=id?.count||0;return{...rest,[cur.id]:{title:cur?.title,count:prevCount+cur.quantity}}},{});return Object.values(pairValues).map(({title})=>`${title}`).join(", ")}async addToBag(){const timestamp=`${Date.now()}`,bundle=this.generateBundle(),bundleNames=this.generateBundleNames(),bundledProducts=this.selectedProducts.map(item=>({id:parseInt(item.variants[0].id),quantity:item.quantity,properties:{_group:timestamp,_bundle:bundle,_bundle_item:!0}})),greetingCard=this.selectedGreetingCard?.id&&this.selectedGreetingCard?.id!=="0"?{id:this.selectedGreetingCard.variants[0].id,quantity:this.selectedGreetingCard.quantity,properties:{_group:timestamp}}:null,productItems={items:[{id:this.activeVariant,quantity:1,properties:{_group:timestamp,_bundle:bundle,_bundle_items:bundleNames}},...bundledProducts]};greetingCard&&productItems.items.push(greetingCard);const response=await addToCart(productItems);reRenderShopifySections(response),this.showMiniCartAfterSubmission&&utils.toggle(document.body,["mini-cart-is-active"]),this.dispatchEvent(new CustomEvent("productAdded",{bubbles:!0,composed:!0,detail:{id:"cart-notification"}})),this.modal.setAttribute("open","false")}render(){return html`<slot
22      @goToNextStep="${this.goToNextStep}"
23      @goToSelection="${this.goToSelection}"
24      @goToGreeting="${this.goToGreeting}"
25      @goToReview="${this.goToReview}"
26      @addToBag="${this.addToBag}"
27    ></slot>`}}customElements.define("hh-form-select-teas",HHFormSelectTeas);
28//# sourceMappingURL=/cdn/shop/t/1460/assets/component-form-select-teas.js.map?v=119147208272806362901789415127