import{Segment}from"@dna/analytics";import{RespondToViewport,WithProfiler}from"@dna/mixins";import*as paths from"@dna/paths";import{storefrontClient}from"@dna/storefront";import styles from"@dna/styles";import{addToCart,getCategoryFromTags,getLineItemProperties,minorToMajorUnit,renderPrice,splitProductName}from"@dna/utils";import{LitElement,classMap,createRef,css,html,nothing,ref,repeat,when}from"@lit";import{Task,TaskStatus}from"@lit/task";class DNAMiniCartUpsell extends WithProfiler(RespondToViewport(LitElement)){static properties={items:{type:Array,state:!0},title:{type:String}};constructor(){super(),this.items=[],this.addedItems=[],this.filteredItems=[],this.addingProduct=null,this.hasUpsell=!1,this.upsellProducts=[],this.$carousel=createRef(),document.addEventListener("dna:cart:open",this._handleOpenCart)}updated(changedProperties){if(super.updated(changedProperties),changedProperties.has("items")&&(this.addedItems=this.addedItems.filter(addedItem=>this.items.find(item=>item.product_id===addedItem)),this.filteredItems=this.items.filter(item=>!this.addedItems.includes(item.product_id)),this.addingProduct=null),changedProperties.has("filteredItems")||changedProperties.has("items")){const latestItem=this.filteredItems?.[0],isOldItem=latestItem&&this.latestItem&&latestItem?.id===this.latestItem?.id;(!latestItem||!isOldItem)&&(this.latestItem=latestItem,this._recommendationsTask.run()),this.requestUpdate()}}_handleOpenCart=()=>{window.setTimeout(()=>{this.$carousel.value.initializeSlides()})};_showNavigation(count){return count>1&&!this.isMobile}get productID(){return this.latestItem?.product_id}get cartItemsIds(){return this.items.map(item=>item.product_id)}_recommendationsTask=new Task(this,{task:async([productID])=>{if(!productID)return;const data=await(await fetch(`/recommendations/products.json?product_id=${productID}&intent=complementary`)).json();return data?.products?this.hasUpsell=!0:this.hasUpsell=!1,this.upsellProducts=data?.products||[],this.upsellProducts},args:()=>[this.productID]});get filteredProducts(){return this.upsellProducts.filter(product=>!this.cartItemsIds.includes(product.id)&&!this.addedItems.includes(product.id)&&product.variants?.length<=1)}async _getProperties(item,variantID){const product=await storefrontClient.getProductByHandle(item.handle),variant=product.variants.find(variant2=>variant2.id===variantID);return getLineItemProperties(product,variant)}_handleAddToCart=async product=>{const variant_id=product?.variants?.[0]?.id,properties=await this._getProperties(product,variant_id);this.addingProduct=product.id,this.addedItems.push(product.id);const productCard=this.shadowRoot.querySelector(`[data-product-id="${product.id}"]`);productCard&&productCard.classList.add("is-adding"),addToCart({id:variant_id,quantity:1,properties}),Segment.protect(()=>{const{style,color}=splitProductName(product.title);Segment.track(Segment.CONSTANTS.EVENTS.CART_ADDON_CTA_CLICKED,{category:style,name:color,price:Number(minorToMajorUnit(product.price)),product_category:product.tags?getCategoryFromTags(product.tags):void 0,product_id:product.id,quantity:1,shopify_product_id:product.variants[0].id})})};_handleProductClick=product=>{const{style,color}=splitProductName(product.title);Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.CART_ADDON_CLICKED,{category:style,name:color,price:Number(minorToMajorUnit(product.price)),product_category:product.tags?getCategoryFromTags(product.tags):void 0,product_id:product.id,quantity:1,shopify_product_id:product.variants[0].id})})};_getProductUrl(product){return`${Shopify.routes.root}products/${product.handle}`}_renderProduct(product){const{style,color}=splitProductName(product.title),showCompareAtPrice=product?.compare_at_price&&product.compare_at_price>0&&product.compare_at_price>product.price;return html`
      <div class=${classMap({"product-card":!0,flex:!0})}>
        <a href=${this._getProductUrl(product)} @click=${()=>this._handleProductClick(product)} class="image">
          <dna-image
            aspectRatio="1"
            src=${product.featured_image}
            alt=${product.title}
            width="120px"
            loading="eager"
            sizes="(max-width: 768px) 200px, (min-width: 768px) 400px">
            </dna-image>
        </a>
        <div class="product-info">
          <div class="content">
            <a href=${this._getProductUrl(product)} @click=${()=>this._handleProductClick(product)}>
              <h4>${style}</h4>
              <p class="p3">${color}</p>
            </a>
          </div>
          <div class="price">
          ${when(showCompareAtPrice,()=>html`
              <p class="compare-at-price">
                <s>
                  ${renderPrice(product.compare_at_price)}
                </s>
              </p>
            `)}
          <p class=${showCompareAtPrice?"price--markdown":nothing}>
            ${renderPrice(product.price)}
          </p>
          </div>
          <div class="buttons">
          <button
            class="add-to-cart"
            @click=${()=>this._handleAddToCart(product)}>
              ${paths.addToBag}
              <span>Add to cart</span>
          </button>
          </div>
        </div>
      </div>
    `}render(){if(!this.latestItem||this._recommendationsTask.status===TaskStatus.ERROR||this.upsellProducts.length===0)return nothing;if(this._recommendationsTask.status===TaskStatus.PENDING&&!this.hasUpsell)return nothing;if(!this.filteredProducts.length)return nothing;const showNavigation=this._showNavigation(this.filteredProducts.length);return html`
      <div class="upsell">
        <h3 class="title">${this.title}</h3>
        <sl-carousel ${ref(this.$carousel)} navigation=${showNavigation||nothing}>
          <span slot='previous-icon'>
            ${paths.arrowLeft2}
          </span>
          <span slot='next-icon'>
            ${paths.arrowRight2}
          </span>
        ${repeat(this.filteredProducts,product=>product.id,product=>html`
            <sl-carousel-item class=${classMap({"is-adding":product.id===this.addingProduct})}  data-product-id=${product.id}>
              ${this._renderProduct(product)}
            </sl-carousel-item>
          `)}
        </sl-carousel>
      </div>
  `}static styles=[styles.reset,styles.flex,styles.typography,styles.shoelace,css`
      :host {
        display: block;
      }

      .upsell {
        margin-top: 24px;
        margin-bottom: 0;
      }

      .title {
        font-family: var(--dna-label-s-font);
        font-weight: 500;
        line-height: 12px;
        letter-spacing: 2px;
        margin-left: 16px;
        text-align: left;
        text-transform: uppercase;
        color: var(--dna-color-midnight);
      }
      
      @media screen and (max-width: 768px) {
        .title {
          font: var(--dna-label-s-font);
        }
      }

      sl-carousel {
        --aspect-ratio: 9 / 3; 
        --scroll-hint: 16px; 
        --slide-gap: 0;
      }

      sl-carousel::part(base) {
        gap: 0;
        margin-bottom: 24px;
      }

      .price--markdown {
        color: var(--dna-utility-attention);
      }

      /* breakpoint-tablet */
      @media screen and (min-width: 768px) {
        .title {
          margin-left: 40px;
          font-family: var(--dna-font-sans-medium);
          font-size: 10px;
        }

        sl-carousel {
          --aspect-ratio: 12 / 3; 
          --scroll-hint: 40px; 
          --slide-gap: 0;
        }

        sl-carousel::part(base) {
          gap: 0;
          margin-bottom: 0;
          padding-bottom: 36px;
        }

        .upsell {
          margin-top: 24px;
          margin-bottom: 18px;
        }

        .price {
          font-size: 12px;
        }

        .compare-at-price {
          font-size: 12px;
        }
      }

      sl-carousel::part(scroll-container) {
        --slide-gap: 0px;
        border-radius: 0;
      }

      sl-carousel::part(navigation) {
        display: flex;
        gap: 32px;
        position: absolute;
        bottom: 0;
        right: 24px;
      }
      sl-carousel::part(navigation-button) {
        color: var(--dna-color-midnight);
        padding: 0;
      }

      .image {
        min-width: 90px;
        height: 100%;
        overflow: hidden;
        position: relative;
        display: block;
      }
      .image dna-image {
        position: absolute;
        height: 100%;
        width: 100%;
        left: -100%;
        transform: translateX(80%);
        object-fit: cover;
      }

      .product-card {
        border: 1px solid var(--dna-color-light-grey);
        height: 120px;
        min-width: 320px;
        width: 100%;
      }

      .is-adding {
        animation: fade-out 1s ease forwards;
        opacity: 1;
      }

      @keyframes fade-out {
        50% {
          opacity: 0;
          width: 100%;
          margin-left: 0;
        }

        100% {
          opacity: 0;
          width: 0;
          overflow: hidden;
          margin-left: 100%;
        }
      }


      sl-carousel-item:not(:last-child) .product-card {
        border-right: none;
      }

      .carousel-skeleton {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        height: 120px;
        width: 100%;
      }

      .product-info {
        padding: 16px;
        flex: 1;
        display: grid;
        grid-template-areas:
          "content price"
          "spacer spacer"
          "buttons buttons";
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr auto;
      }

      .content {
        grid-area: content;
      }

      .price {
        grid-area: price;
        display: flex;
        justify-content: flex-start;
        text-align: right;
        flex-direction: column;
        font-size: 14px;
      }

      .compare-at-price {
        font-weight: 300;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.5px;
        text-align: right;
      }

      .buttons {
        grid-area: buttons;
        display: flex;
        justify-content: flex-end;
      }

      .product-info h4 {
        margin: 0;
        font-weight: 400;
        font-size: 14px;
      }

      .product-info p {
        margin: 0;
      }

      .add-to-cart {
        display: flex;
        gap: 7px;
        text-decoration: underline;
        cursor: pointer;
        font-family: var(--dna-font-sans-medium);
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 2px;
      }
    `]}customElements.define("dna-mini-cart-upsell",DNAMiniCartUpsell);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-mini-cart-upsell.js.map?v=139614004181279493401760566295