https://www.paulmitchell.com/cdn/shop/t/424/assets/component-free-…?v=146018267625435166911783361503

1import{LitElement,css,html,nothing}from"@lit";import styles from"@nova/styles";import{formatPrice}from"@nova/utils";class NovaFreeShippingThreshold extends LitElement{static properties={freeShippingData:{type:Object,attribute:"free-shipping-data"},cartSubtotal:{type:Number,state:!0},percentageValue:{type:Number,state:!0},freeShippingThreshold:{type:Number,state:!0},gwpThreshold:{type:Number,state:!0},status:{type:Number,state:!0}};get caseType(){const hasFreeShipping=!!this.freeShippingThreshold,hasGWP=!!this.gwpThreshold;return hasFreeShipping&&hasGWP?this.freeShippingThreshold>this.gwpThreshold?"freeShippingLarger":this.gwpThreshold>this.freeShippingThreshold?"gwpLarger":"equalThreshold":hasFreeShipping?"freeShippingOnly":hasGWP?"gwpOnly":"none"}get largerThreshold(){switch(this.caseType){case"gwpLarger":case"gwpOnly":case"equalThreshold":return this.gwpThreshold;case"freeShippingLarger":case"freeShippingOnly":return this.freeShippingThreshold;default:return this.cartSubtotal||1}}get smallerThreshold(){switch(this.caseType){case"gwpLarger":case"gwpOnly":case"equalThreshold":return this.freeShippingThreshold;case"freeShippingLarger":case"freeShippingOnly":return this.gwpThreshold;default:return 0}}get percentageValue(){const threshold=this.largerThreshold;return Math.min(this.cartSubtotal/threshold*100,100)}get percentageValueFreeShipping(){return this.caseType==="gwpLarger"?this.freeShippingThreshold/this.gwpThreshold*100:this.gwpThreshold/this.freeShippingThreshold*100}constructor(){super(),document.addEventListener("nova:changeQuantityFinished",this._handleUpdateProgressBar),this.status=0,this.cartSubtotal=0}connectedCallback(){super.connectedCallback(),this._initializeThresholds(),this._asyncUpdateCart()}_initializeThresholds(){typeof __NOVA_GLOBAL__<"u"?(this.freeShippingThreshold=__NOVA_GLOBAL__.freeShippingThreshold||0,this.gwpThreshold=__NOVA_GLOBAL__.gwpThreshold||0):(this.freeShippingThreshold=0,this.gwpThreshold=0)}updated(changedProperties){changedProperties.has("freeShippingData")&&this.freeShippingData&&(this.freeShippingData.freeShippingThreshold&&(this.freeShippingThreshold=this.freeShippingData.freeShippingThreshold),this.freeShippingData.gwpThreshold&&(this.gwpThreshold=this.freeShippingData.gwpThreshold))}_asyncUpdateCart=async()=>{try{const response=await fetch("/cart.js");if(!response.ok)throw new Error("Error fetching cart");const data=await response.json();this.cartSubtotal=data.items_subtotal_price/100}catch{console.error("Error fetching cart")}};_handleUpdateProgressBar=()=>{this._asyncUpdateCart()};_calculateFreeShippingRemaining(){return formatPrice((this.freeShippingThreshold-this.cartSubtotal)*100)}_calculateGWPRemaining(){return formatPrice((this.gwpThreshold-this.cartSubtotal)*100)}_displayMessage(){const STATE={FULL:"full",PARTIAL:"partial",ORIGINAL:"original"},STATUS_MAP={[STATE.FULL]:2,[STATE.PARTIAL]:1,[STATE.ORIGINAL]:0},messageTemplates={[STATE.FULL]:{gwpLarger:__NOVA_GLOBAL__.threshold_full_state,freeShippingLarger:__NOVA_GLOBAL__.threshold_full_state,equalThreshold:__NOVA_GLOBAL__.threshold_full_state,gwpOnly:__NOVA_GLOBAL__.threshold_full_state_gwp_only,freeShippingOnly:__NOVA_GLOBAL__.threshold_full_state_free_shipping_only},[STATE.PARTIAL]:{gwpLarger:__NOVA_GLOBAL__.threshold_partial_state_shipping_full,freeShippingLarger:__NOVA_GLOBAL__.threshold_partial_state_gwp_full},[STATE.ORIGINAL]:{gwpLarger:__NOVA_GLOBAL__.threshold_original_state,freeShippingLarger:__NOVA_GLOBAL__.threshold_original_state,equalThreshold:__NOVA_GLOBAL__.threshold_original_state,gwpOnly:__NOVA_GLOBAL__.threshold_original_state_gwp_only,freeShippingOnly:__NOVA_GLOBAL__.threshold_original_state_free_shipping_only}},currentState=this.cartSubtotal>=this.largerThreshold?STATE.FULL:this.cartSubtotal>=this.smallerThreshold&&(this.caseType==="gwpLarger"||this.caseType==="freeShippingLarger")?STATE.PARTIAL:STATE.ORIGINAL;this.status=STATUS_MAP[currentState];let message=messageTemplates[currentState][this.caseType]||"";return message=message.replace("{{ free_shipping_more }}",this._calculateFreeShippingRemaining()).replace("{{ gwp_more }}",this._calculateGWPRemaining()),message}render(){return html`
2      <div class="container">
3        <p>${this._displayMessage()}</p>
4        <sl-progress-bar
5          value=${this.percentageValue}
6          aria-label="${window.cartStrings.freeShippingProgress}"
7        ></sl-progress-bar>
8        ${this.caseType==="freeShippingLarger"||this.caseType==="gwpLarger"?html`<span
9              class="free-shipping__threshold mark"
10              status="${this.status}"
11              style="left:${this.percentageValueFreeShipping}%;"
12            ></span>

13            <span class="gwp__threshold mark" status="${this.status}"></span>`:nothing}
14      </div>
15    `}static styles=[styles.flex,css`
16      :host {
17        display: block;
18        padding: var(--nova-space-md) 0;
19        border-bottom: 1px solid var(--nova-color-brand-taupe) !important;
20      }
21
22      .container {
23        margin: 0 var(--nova-space-md);
24        position: relative;
25      }
26
27      @media screen and (min-width: 768px) {
28        :host {
29          padding: var(--nova-space-sm) 0;
30        }
31
32        .container {
33          margin: 0 var(--nova-space-sm);
34        }
35      }
36
37      p {
38        margin: 0 0 10px;
39        line-height: normal;
40      }
41
42      sl-progress-bar {
43        --height: 10px;
44        --track-color: #fff;
45        --indicator-color: var(--nova-color-brand-charcoal);
46      }
47
48      sl-progress-bar::part(indicator) {
49        border-radius: var(--sl-border-radius-pill);
50        background-color: var(--nova-color-brand-charcoal);
51      }
52
53      .mark {
54        position: absolute;
55        bottom: -3px;
56        width: 16px;
57        height: 16px;
58        border-radius: 16px;
59        background: var(--nova-color-brand-reverse);
60      }
61
62      .free-shipping__threshold {
63        transform: translateX(-50%);
64      }
65
66      .free-shipping__threshold[status="1"],
67      .free-shipping__threshold[status="2"] {
68        background: var(--nova-color-brand-charcoal);
69      }
70      .gwp__threshold {
71        right: 0;
72      }
73      .gwp__threshold[status="2"] {
74        background: var(--nova-color-brand-charcoal);
75      }
76    `]}customElements.define("nova-free-shipping-threshold",NovaFreeShippingThreshold);
77//# sourceMappingURL=/cdn/shop/t/424/assets/component-free-shipping-threshold.js.map?v=146018267625435166911783361503