import{Segment}from"@dna/analytics";import{WithProfiler}from"@dna/mixins";import*as paths from"@dna/paths";import{storefrontClient}from"@dna/storefront";import styles from"@dna/styles";import{getLineItemProperties,getMasterSku,igGetExperimentControl,igReady,renderPrice,splitProductName,t}from"@dna/utils";import{LitElement,classMap,createRef,css,html,nothing,ref,repeat,styleMap,unsafeHTML,when}from"@lit";class DNAMiniCart extends WithProfiler(LitElement){static properties={initialItems:{type:Array},items:{type:Array,state:!0},translations:{type:Object},meta:{type:Object},itemLimit:{type:Number},cartItemsExpanded:{type:Boolean,state:!0},applyTest1348:{type:Boolean,state:!0}};get subtotal(){return this.items.reduce((acc,current)=>acc+Number.parseFloat(current.final_price)*current.quantity,0)}get formattedSubtotal(){return renderPrice(this.subtotal)}get originalPriceTotal(){return this.items.reduce((acc,current)=>acc+Number.parseFloat(current.original_price)*current.quantity,0)}get estimatedTotal(){const shippingPrice=this.shippingValue!=="FREE"?this.meta?.shipping?.charge*100:0;return this.originalPriceTotal-this.totalSavings+shippingPrice}get formattedEstimatedTotal(){return renderPrice(this.estimatedTotal)}get orderDiscount(){let totalOrderDiscount=0;for(const discount of this.meta.cart_level_discount_applications)totalOrderDiscount=totalOrderDiscount+Number(discount?.total_allocated_amount||0);return totalOrderDiscount}get totalSavings(){const orderDiscount=this.orderDiscount;return this.originalPriceTotal-this.subtotal+orderDiscount}get formattedTotalSavings(){return renderPrice(this.totalSavings)}get formattedShipping(){return renderPrice((this.meta?.shipping?.charge||0)*100)}get enableUpsell(){return window.Shopify?.country!=="US"&&this.meta?.enable_upsell||!1}get isShippingOverThreshold(){return this.meta.shipping.isFree||this.subtotal>=this.meta.shipping.threshold}get shippingBar(){if(!this.meta)return{current:0,remaining:0,remainingFormatted:0,threshold:0};const threshold=(this.meta.shipping.threshold||0)*100,remaining=threshold-this.subtotal,renderedPrice=renderPrice(remaining);return{current:this.subtotal/threshold*100,remaining:remaining<0?0:remaining,remainingFormatted:remaining<0?0:renderedPrice,threshold}}get shippingValue(){const freeShippingValue=this.translations.shipping_amount_free||"FREE";if(this.meta.shipping.isFree)return freeShippingValue;const shippingThreshold=this.meta.shipping.threshold*100;return this.subtotal<shippingThreshold?this.formattedShipping:freeShippingValue}get count(){return this.items.reduce((acc,current)=>acc+Number.parseInt(current.quantity),0)}$cartDrawer=createRef();constructor(){super(),this.initialItems=[],this.items=[],this.translations={},this.itemLimit=3,this.cartItemsExpanded=!1}connectedCallback(){super.connectedCallback(),document.addEventListener("dna:cart:open",this._handleOpenCart),document.addEventListener("dna:cart:close",this._handleCloseCart),document.addEventListener("dna:cart:refresh",this.refresh),window.addEventListener("pageshow",this._onPageShow),this.applyTest1348=!1,igReady.then(async()=>{await igGetExperimentControl({staging:"84da1d8f-7bb6-4841-aa53-3afc829ed78e",production:"e546bc40-b12a-4f76-9a24-6a520ba76709"})||(this.applyTest1348=!0)})}disconnectedCallback(){document.removeEventListener("dna:cart:open",this._handleOpenCart),document.removeEventListener("dna:cart:close",this._handleCloseCart),document.removeEventListener("dna:cart:refresh",this.refresh),window.removeEventListener("pageshow",this._onPageShow)}willUpdate(changedProperties){changedProperties.has("initialItems")&&(this.items=this._normalizeCartItemsData(this.initialItems)),changedProperties.has("items")&&document.dispatchEvent(new CustomEvent("dna:cart:items-count",{detail:{count:this.count}}))}_onPageShow=event=>{event.persisted&&this.refresh()};_normalizeCartItemsData(items){const filteredItems=items.filter(item=>item.quantity>0),itemQuantities=filteredItems.reduce((acc,item)=>(acc[item.id]=(acc[item.id]||0)+Number(item.quantity),acc),{});return filteredItems.map(item=>({...item,original_price:item.original_price,final_price:item.final_price,discounts:item.line_level_discount_allocations?.map(discount=>({title:discount.discount_application?.title||"",amount:Number(discount.amount)}))||[],max_ordered:this.isLimitExceeded(itemQuantities[item.id],item?.properties?._limit)}))}isLimitExceeded(quantity,limit){return this.itemLimit=this.meta.global_limit?limit||this.meta.global_limit:quantity+1,quantity>=this.itemLimit}_handleOpenCart=()=>{document.dispatchEvent(new CustomEvent("dna:search-bar:close")),this.$cartDrawer.value.show(),this._trackCartView()};_handleCloseCart=()=>{this.$cartDrawer.value.hide()};_toggleMiniCartExpand=()=>{this.cartItemsExpanded=!this.cartItemsExpanded};_trackCartView=()=>{Segment.protect(()=>{const analyticsData={cart_id:Segment.cartToken};analyticsData.products=this.items.map(item=>({brand:Segment.CONSTANTS.BRAND,category:splitProductName(item.product_title).style,currency:Segment.presentmentCurrency,image_url:item.image,name:splitProductName(item.product_title).color,price:Number(item.final_price/100),product_category:item.properties._storefront_category,product_id:item.id.toString(),quantity:Number(item.quantity),shopify_product_id:item.product_id.toString(),shopify_variant_id:item.variant_id.toString(),sku:item.sku,sku_short:getMasterSku(item.sku),url:`${window.location.origin}${item.url}`,variant:item.variant_title})),Segment.track(Segment.CONSTANTS.EVENTS.CART_VIEWED,analyticsData)})};_trackCheckoutButtonClick=()=>{Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.CART_CHECKOUT_BUTTON_CLICKED)})};refresh=async event=>{let newItems,cartDiscount;if(event?.detail?.token){cartDiscount=event?.detail?.cart_level_discount_applications,newItems=event?.detail?.items||[];for(const item of newItems){const[lineItemProduct,lineItemVariant]=await Promise.all([storefrontClient.getProductById(item.product_id),storefrontClient.getVariantById(item.variant_id)]);item.properties=getLineItemProperties(lineItemProduct,lineItemVariant)}}else try{const response=await fetch(`${window.Shopify.routes.root}cart.js`);if(!response.ok)throw new Error("Error fetching cart");const data=await response.json();newItems=data.items,cartDiscount=data.cart_level_discount_applications}catch{console.error("Error fetching cart")}this.items=this._normalizeCartItemsData(newItems),this.meta.cart_level_discount_applications=cartDiscount.map(item=>item?.discount_application||item)};_renderEmptyState=()=>html`
      <div class="empty-state">
        <slot name="empty-state"></slot>
      </div>
    `;_renderItems=()=>{const hasGiftCard=!!this.items.find(item=>item.product_type==="Virtual Gift Cards"),count=this.items.length;return html`
      ${when(this.meta?.enable_promo_message||this.applyTest1348,this._renderPromoMessage,()=>nothing)}
      <div>
        ${repeat(this.items,item=>item.key,item=>html`
            <dna-cart-item
              @dna-change=${this.refresh}
              .item=${item}
              .finalSaleTooltip=${this.translations.final_sale_tooptip}
              .preorder=${this.translations.preorder}
              .backorder=${this.translations.backorder}
              .comingSoon=${this.translations.coming_soon}
              .estimatedShipDate=${this.translations.estimated_ship_date}
              .maximumAdded=${this.translations.maximum_added}
              .quantityOutOfStock=${this.translations.quantity_out_of_stock}
              .orderDiscount=${this.orderDiscount}
              .itemLimit=${this.itemLimit}
            ></dna-cart-item>
          `)}
      </div>
      ${when(this.enableUpsell,()=>html`
        <dna-mini-cart-upsell
        .title=${this.translations.upsell_section_title}
        .items=${this.items}
      ></dna-mini-cart-upsell>
      `,()=>nothing)}

      <div class="breakdown">
        <div class="breakdown__prices">
          <p class="summary__total p2">
            <span>${this.translations.subtotal||"Subtotal"}</span>
            <span>${this.formattedSubtotal}</span>
          </p>
          ${when(this.orderDiscount>0,()=>html`
            <p class="summary__total p2">${this.translations.order_discount||"Order Discount"}</p>
            <div class="summary__total-discount">
              ${repeat(this.meta.cart_level_discount_applications,discount=>discount,discount=>html`
                  ${paths.discountTag}
                  <span class="discount-title"><strong>${discount.title}<strong></span>
                  <span class="discount-amount"><strong>-${renderPrice(discount.total_allocated_amount)}</strong></span>
                `)}
            </div>
            `,()=>nothing)}
          <p class="summary__total p2">
            <span>${this.translations.shipping||"Shipping"}</span>
            <span>${this.shippingValue}</span>
          </p>
          ${when(this.meta.tax!=="",()=>html`
              <p class="summary__total p2">
                <span>${this.translations.taxes||"Taxes"}</span>
                <span>${this.meta.tax}</span>
              </p>
            `,()=>nothing)}
          ${when(this.totalSavings>0,()=>html`
            <p class="summary__total summary__total-savings p2">
                ${paths.discountTag}
                <span class="discount-title"><strong>${this.translations.total_savings||"Total Savings"}</strong></span>
                <span class="discount-amount"><strong>${this.formattedTotalSavings}</strong></span>
              </p>
              `,()=>nothing)}
        </div>
        <div class="breakdown__payment-methods js-breakdown-payment-icons hidden">
          <div class="breakdown__payment-methods-title">Payment Methods</div>
          <div class="breakdown__payment-methods-icons">
            <img src="${this.meta?.payment_icons}" alt="Payment Methods" width="300" loading="lazy"/>
          </div>
        </div>
      </div>
      <div slot="footer" class="summary ${this.cartItemsExpanded?"hidden":""}">
        <div class="summary__content">
          <div class="summary__bottom">
            <p class="summary__total p2">
              <strong>${this.translations.estimated_total||"Estimated Total"}</strong>
              <strong>
                ${when(window.Shopify.currency.active!=="USD",()=>html`${window.Shopify.currency.active} `,()=>nothing)}
              <strong>${this.formattedEstimatedTotal}</strong>
              </strong>
            </p>
            <slot name="checkout-button">
              <!-- 
                Ensure to override this default slot content if you need a button
                that 3rd party apps can access via light DOM.
              -->
              <sl-button
                href='${window.Shopify.routes.root}checkout'
                variant="primary"
                @click=${this._trackCheckoutButtonClick}
              >
              ${this.translations.checkout_button}
              </sl-button>
            </slot>
            ${when(this.meta?.shipping?.has_final_line,this._renderShippingTerms,()=>nothing)}
          </div>
        </div>
      </div>
    `};_renderShippingMessage=()=>{const shippingMessage=t("cart.general.free_shipping_unlocked"),updatedShippingText=document.createElement("textarea");return updatedShippingText.innerHTML=shippingMessage,html`
      <div class="shipping-message">
        ${when(this.shippingBar?.remaining<=0,()=>html`
            <p class="p1 shipping-congrats">
              ${paths.checkMark}
              ${unsafeHTML(updatedShippingText.value)}
            </p>
          `,()=>html`
            <div>
              <p class="p1">
                <strong>
                  Add ${this.shippingBar?.remainingFormatted}
                </strong>
                to Receive
                <strong> Free Shipping!</strong>
              </p>
            </div>
          `)}
        <div class="shipping-progress">
          <span
            class="shipping-progress__bar"
            style=${styleMap({width:`${this.shippingBar?.current}%`})}
          ></span>
        </div>
        <p></p>
      </div>
    `};_renderPromoMessage=()=>html`
      <div class="cart-promo">
        <div class="cart-promo-message">${this.translations.promo_message}</div>
      </div>
    `;_renderShippingTerms=()=>html`
      <p class="summary__terms">
        <slot name="final-line"></slot>
      </p>
    `;render(){return html`
      <sl-drawer
        label="My Cart"
        class=${classMap({drawer:!0,"cart--empty":this.count===0})}
        ${ref(this.$cartDrawer)}
      >
        <div slot="label">
          <button aria-label=${this.translations.expand_accessible_message} aria-expanded=${this.cartItemsExpanded} class="drawer__expand" @click=${this._toggleMiniCartExpand}>
            <span class="${this.cartItemsExpanded?"hidden":""}">${paths.hamburger}</span>
            <span class="${this.cartItemsExpanded?"":"hidden"}">${paths.close}</span>
          </button>
          <p class="h4 drawer__label">
            ${this.translations.cart_title}
            ${when(this.count>0,()=>html`
                <span class="badge">
                  (${this.count}<span class="sr-only">${this.count>1?this.translations.cart_count.other:this.translations.cart_count.one}</span>)
                </span>
              `,()=>nothing)}
          </p>
        </div>
        <div slot="header-actions" class="header-actions-child">
          ${when(this.meta?.shipping?.isFree||this.count===0,()=>nothing,this._renderShippingMessage)}
        </div>
        ${when(!this.items.length,this._renderEmptyState,this._renderItems)}
      </sl-drawer>
    `}static styles=[styles.a11y,styles.flex,styles.typography,styles.shoelace,css`
      :host {
        display: block;
      }

      sl-drawer:not(:defined) {
         display: none;
      }

      .drawer {
        --size: 100%;
      }
      .drawer::part(overlay) {
        fill: var(--dna-utility-overlay, rgba(0, 0, 0, 0.5));
      }
      .drawer::part(header) {
        align-items: baseline;
        display: grid;
        place-items: center;
      }
      .drawer::part(title) {
        text-align: center;
        padding-top: 32px;
        padding-bottom: 16px;
        line-height: 1em;
      }
      .drawer::part(header-actions) {
        border-bottom: 1px solid var(--dna-color-light-grey);
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .drawer [slot="label"] .summary__terms {
        margin-bottom: 0;
      }
      .cart--empty.drawer::part(header-actions) {
        border-bottom: none;
      }
      .header-actions-child {
        width: 100%;
      }
      .drawer__label {
        margin: 0;
      }
      @media screen and (max-width: 768px) {
        .drawer__label {
         font-size: 32px;
        }
        .drawer__label .badge {
          font-size: 14px;
        }
      }
      .drawer__expand {
        display: none;
      }
      @media (min-width: 300px) and (max-width: 700px) and (min-height: 150px) and (max-height: 400px) {
        .drawer__expand {
          left: 50px;
          position: absolute;
          height: 36px;
          width: 36px;
          display: block;
          color: var(--dna-color-midnight);
          background-color: transparent;
          border: none;
          cursor: pointer;
        }
      }
      .drawer::part(body) {
        padding: 0;
        display: flex;
        flex-direction: column;
      }
      .drawer::part(close-button) {
        cursor: pointer;
        height: calc(var(--dna-space-6) + var(--dna-space-5));
        width: calc(var(--dna-space-6) + var(--dna-space-5));
        position: absolute;
        top: var(--dna-space-3);
        right: var(--dna-space-3);
      }
      .drawer::part(close-button__base) {
        color: black;
        width: var(--dna-space-6);
        height: var(--dna-space-6);
        font-size: var(--dna-space-6);
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .drawer::part(footer) {
        padding: 0;
      }
      .empty-state {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
      .empty-state p {
        font-size: 14px;
      }
      sl-button::part(base) {
        background-color: #000;
        color: #fff;
        height: var(--dna-button-height);
        width: 150px;
        border: none;
        font-weight: 600;
      }
      .breakdown {
        padding: 0;
      }
      .summary {
        padding: 0;
      }
      .breakdown__prices {
        padding: 0 16px 24px 16px;
      }
      .breakdown__payment-methods {
        text-align: center;
        padding-bottom: 20px;
      }
      .breakdown__payment-methods-title {
        font-size: 12px;
        margin-bottom: 8px;
        line-height: 18px;
        letter-spacing: 0.5px;
        color: var(--dna-color-midnight);
      }
      .summary__content {
        padding: 0 16px 12px 16px;
        border-top: 0.5px solid var(--dna-color-light-grey);
      }
      /* breakpoint-tablet */
      @media screen and (min-width: 768px) {
        .drawer {
          --size: 488px;
        }
        .drawer::part(title) {
          padding-top: 40px;
          padding-bottom: 17px;
        }
        .breakdown__prices {
          padding: 0 40px 16px 40px;
        }
        .summary__content {
          padding: 0 40px 16px 40px;
        }
        .breakdown .summary__total:first-of-type {
        margin-top: 32px;
        }
      }
      .summary__total {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding-top: 12px;
        padding-bottom: 12px;
        border-top: 0.5px solid var(--dna-color-light-grey);
      }
      .breakdown .summary__total:first-of-type {
        margin-top: 40px;
      }
      .breakdown .summary__total:last-of-type {
        border-bottom: 0.5px solid var(--dna-color-light-grey);
      }
      .summary__bottom .summary__total {
        border: none;
      }
      .summary__total-savings {
        justify-content: flex-start;
        align-items: center;
      }
      .summary__total-discount {
        display: flex;
        padding-top: 8px;
      }
      .discount-title {
        font: var(--dna-body-p2-font);
        margin-left: 4px;
        margin-right: 4px;
      }
      .discount-amount {
        font: var(--dna-body-p2-font);
        line-height: 12px;
      }
      .summary__total-discount .discount-amount {
        margin-left: auto;
      }
      .summary__terms {
        color: var(--dna-color-midnight, #808080);
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* 16.8px */
      }
      dna-cart-item {
        border-bottom: 1px solid var(--dna-color-light-grey);
      }
      .shipping-progress {
        background-color: var(--dna-color-sandstone);
        height: 4px;
        width: 100%;
        position: relative;
        overflow: hidden;
      }
      .shipping-progress__bar {
        background-color: var(--dna-brand-primary);
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        transition: width 0.3s;
      }
      .shipping-congrats {
        display: flex;
        align-items: center;
        gap: var(--dna-space-1);
      }
      .shipping-congrats svg {
        padding-right: var(--dna-space-2);
      }
      .shipping-message {
        flex: 1;
        width: 100%;
      }
      ::slotted([slot='checkout-button']) {
        width: 100%;
      }
      .cart-promo {
        border-bottom: 1px solid var(--dna-color-light-grey);
      }
      .cart-promo-message {
        text-align: center;
        border: 1px solid var(--dna-color-light-grey);
        font-size: 14px;
        margin: 16px 24px;
        padding-top: 11px;
        padding-bottom: 11px;
      }
    `]}customElements.define("dna-mini-cart",DNAMiniCart);
//# sourceMappingURL=/cdn/shop/t/1163/assets/component-mini-cart.js.map?v=84901416306199767581760566296