JezK

Edit File: sc-order-bump2.js

import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{s as speak}from"./index2.js";import{i as intervalString}from"./price.js";import{s as state}from"./mutations2.js";import{r as removeCheckoutLineItem,a as addCheckoutLineItem,t as trackOrderBump}from"./mutations4.js";import{d as defineCustomElement$4}from"./sc-choice2.js";import{d as defineCustomElement$3}from"./sc-divider2.js";import{d as defineCustomElement$2}from"./sc-icon2.js";import{d as defineCustomElement$1}from"./sc-spinner2.js";const scOrderBumpCss=":host {\n display: block;\n}\n\n:host([data-design=modern]) sc-choice::part(base) {\n padding: 0;\n overflow: hidden;\n border-radius: var(--sc-order-bump-border-radius, 12px);\n border-color: var(--sc-order-bump-border-color, #e0e0e0) !important;\n box-shadow: none !important;\n outline: none !important;\n cursor: default;\n}\n\n:host([data-design=modern]) sc-choice::part(content) {\n cursor: default;\n}\n\n:host([data-design=modern]) .bump {\n display: flex;\n align-items: center;\n gap: var(--sc-order-bump-gap, 1em);\n padding: var(--sc-order-bump-padding, 0.75em 1em 0.75em 0.75em);\n}\n:host([data-design=modern]) .bump__text {\n display: grid;\n gap: 5px;\n flex: 1;\n min-width: 0;\n}\n:host([data-design=modern]) .bump__title {\n font-size: var(--sc-order-bump-title-size, 15px);\n font-weight: 600;\n line-height: 1.3;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n:host([data-design=modern]) .bump__cta {\n font-size: var(--sc-order-bump-cta-size, 12px);\n font-weight: 600;\n line-height: 1.3;\n display: var(--sc-order-bump-cta-display, -webkit-box);\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n:host([data-design=modern]) .bump__tag {\n display: var(--sc-order-bump-tag-display, inline-block);\n background: var(--sc-color-primary-500);\n color: var(--sc-color-white);\n border-radius: 999px;\n padding: var(--sc-spacing-x-small);\n font-size: var(--sc-font-size-x-small);\n}\n:host([data-design=modern]) .bump__description {\n display: var(--sc-order-bump-description-display, block);\n font-size: var(--sc-order-bump-description-size, 13px);\n color: var(--sc-order-bump-description-color, #6b7280);\n opacity: 0.8;\n line-height: 1.3;\n font-weight: normal;\n}\n:host([data-design=modern]) .bump__description p {\n margin: 0;\n}\n:host([data-design=modern]) .bump__image {\n width: var(--sc-order-bump-image-size, 72px);\n height: var(--sc-order-bump-image-size, 72px);\n flex: 0 0 var(--sc-order-bump-image-size, 72px);\n object-fit: cover;\n border-radius: var(--sc-order-bump-image-radius, 8px);\n border: 1px solid var(--sc-color-gray-200);\n display: var(--sc-order-bump-image-display, block);\n}\n:host([data-design=modern]) .bump__price--has-discount {\n display: flex;\n align-items: baseline;\n gap: 4px;\n}\n:host([data-design=modern]) .bump__price--has-discount .bump__original-price {\n text-decoration: line-through;\n color: var(--sc-color-gray-500);\n font-size: var(--sc-order-bump-price-size, 14px);\n font-weight: normal;\n}\n:host([data-design=modern]) .bump__price .bump__new-price {\n font-size: var(--sc-order-bump-price-size, 14px);\n font-weight: 500;\n color: var(--sc-color-gray-700);\n}\n:host([data-design=modern]) .bump__price .bump__interval {\n color: var(--sc-color-gray-500);\n}\n:host([data-design=modern]) .bump__button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--sc-order-bump-button-radius, 74.6%);\n border: 1px solid var(--sc-order-bump-button-border-color, #d1d5db);\n background-color: transparent;\n color: var(--sc-color-gray-500);\n flex-shrink: 0;\n line-height: 1;\n font-size: var(--sc-order-bump-button-size, 18px);\n padding: 0.5em;\n cursor: pointer;\n transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;\n}\n:host([data-design=modern]) .bump__button sc-icon {\n font-size: 1em;\n}\n:host([data-design=modern]) .bump__button--checked {\n background-color: var(--sc-color-primary-500);\n border-color: var(--sc-color-primary-500);\n color: var(--sc-color-white, #fff);\n}\n:host([data-design=modern]) .bump__button--loading {\n border-color: var(--sc-color-primary-500);\n}\n:host([data-design=modern]) .bump__button--loading sc-spinner {\n --spinner-size: 1em;\n --indicator-color: var(--sc-color-gray-500);\n}\n:host([data-design=modern]) .bump__amount {\n display: var(--sc-order-bump-amount-display, flex);\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n:host([data-design=classic]) .bump {\n display: grid;\n gap: 1em;\n}\n:host([data-design=classic]) .bump__text {\n display: grid;\n gap: 0.25em;\n}\n:host([data-design=classic]) .bump__tag {\n background: var(--sc-color-primary-500);\n color: var(--sc-color-white);\n border-radius: var(--sc-input-border-radius-medium);\n padding: var(--sc-spacing-x-small);\n font-size: var(--sc-font-size-x-small);\n}\n:host([data-design=classic]) .bump__product {\n display: flex;\n align-items: center;\n gap: var(--sc-choice-padding, 1.3em 1.1em);\n line-height: var(--sc-line-height-dense);\n}\n:host([data-design=classic]) .bump__product--wrapper {\n container-type: inline-size;\n}\n@container (max-width: 325px) {\n :host([data-design=classic]) .bump__product {\n flex-direction: column;\n align-items: start;\n }\n}\n:host([data-design=classic]) .bump__title {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n:host([data-design=classic]) .bump__product-title {\n font-weight: var(--sc-font-weight-semibold);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n:host([data-design=classic]) .bump__product-description {\n color: var(--sc-input-label-color);\n}\n:host([data-design=classic]) .bump__image {\n width: var(--sc-product-line-item-image-size, 4em);\n height: var(--sc-product-line-item-image-size, 4em);\n flex: 0 0 var(--sc-product-line-item-image-size, 4em);\n object-fit: cover;\n border-radius: 4px;\n border: 1px solid var(--sc-color-gray-200);\n display: block;\n box-shadow: var(--sc-input-box-shadow);\n}\n:host([data-design=classic]) .bump__price--has-discount {\n display: flex;\n align-items: baseline;\n gap: var(--sc-spacing-x-small);\n}\n:host([data-design=classic]) .bump__price--has-discount .bump__original-price {\n text-decoration: line-through;\n color: var(--sc-color-gray-500);\n font-size: var(--sc-font-size-small);\n}\n:host([data-design=classic]) .bump__price .bump__new-price {\n font-size: var(--sc-font-size-large);\n color: var(--sc-color-gray-700);\n}\n:host([data-design=classic]) .bump__price .bump__interval {\n color: var(--sc-color-gray-500);\n}\n:host([data-design=classic]) .bump__amount {\n display: flex;\n align-items: center;\n gap: var(--sc-spacing-x-small);\n flex-wrap: wrap;\n margin-top: var(--sc-spacing-xx-small);\n}",ScOrderBumpStyle0=scOrderBumpCss,ScOrderBump=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.isModern=!0,this.bump=void 0,this.showControl=void 0,this.loading=!1}lineItem(){var i,n,e;return null===(e=null===(n=null===(i=null==state?void 0:state.checkout)||void 0===i?void 0:i.line_items)||void 0===n?void 0:n.data)||void 0===e?void 0:e.find((i=>{var n;return(null==i?void 0:i.bump)===(null===(n=this.bump)||void 0===n?void 0:n.id)}))}async updateLineItem(){var i,n,e;if(this.loading)return;const t=(null===(i=this.bump.price)||void 0===i?void 0:i.id)||(null===(n=this.bump)||void 0===n?void 0:n.price),o=this.lineItem();this.loading=!0;try{o?(await removeCheckoutLineItem(o.id),speak(wp.i18n.__("Order bump Removed.","surecart"))):(await addCheckoutLineItem({bump:null===(e=this.bump)||void 0===e?void 0:e.id,price:t,quantity:1}),speak(wp.i18n.__("Order bump applied.","surecart")))}catch(i){console.error("[sc-order-bump] updateLineItem failed:",i),speak(wp.i18n.__("Something went wrong. Please try again.","surecart"))}finally{this.loading=!1}}componentWillLoad(){var i;this.isModern=!!(null===(i=window.scData)||void 0===i?void 0:i.modern_order_bump),this.el.setAttribute("data-design",this.isModern?"modern":"classic")}componentDidLoad(){var i;trackOrderBump(null===(i=this.bump)||void 0===i?void 0:i.id)}renderInterval(){var i;const n=intervalString(null===(i=this.bump)||void 0===i?void 0:i.price,{labels:{interval:"/",period:wp.i18n.__("for","surecart")}});return n.trim().length?h("span",{class:"bump__interval"},n):null}renderDiscount(){var i,n,e,t,o;if(null===(i=this.bump)||void 0===i?void 0:i.amount_off)return h("div",{class:"bump__tag",part:"tag","aria-label": /** translators: %1$s: amount off, %2$s: currency */ wp.i18n.sprintf(wp.i18n.__("You save %1$s%2$s.","surecart"),null===(n=this.bump)||void 0===n?void 0:n.amount_off,(null===(e=this.bump)||void 0===e?void 0:e.price).currency)},h("span",{"aria-hidden":"true"},wp.i18n._x("Save","Save money","surecart")," ",null===(t=this.bump)||void 0===t?void 0:t.amount_off_display_amount));if(null===(o=this.bump)||void 0===o?void 0:o.percent_off){const i=`${this.bump.percent_off}%`;return h("div",{class:"bump__tag",part:"tag","aria-label": /** translators: %s is the discount percentage (e.g. "10%"). */ wp.i18n.sprintf(wp.i18n.__("You save %s.","surecart"),i)},h("span",{"aria-hidden":"true"},wp.i18n.sprintf( /** translators: %s is the discount percentage (e.g. "10%"). */ wp.i18n._x("Save %s","Save money","surecart"),i)))}}renderModernPrice(){var i,n,e,t,o,r,s,a,d;return h("div",{class:{bump__price:!0,"bump__price--has-discount":!!(null===(i=this.bump)||void 0===i?void 0:i.percent_off)||!!(null===(n=this.bump)||void 0===n?void 0:n.amount_off)},part:"price"},!(!(null===(e=this.bump)||void 0===e?void 0:e.percent_off)&&!(null===(t=this.bump)||void 0===t?void 0:t.amount_off))&&h("span",{"aria-label": /** translators: %s: old price */ wp.i18n.sprintf(wp.i18n.__("Originally priced at %s.","surecart"),null===(o=this.bump)||void 0===o?void 0:o.subtotal_display_amount),class:"bump__original-price"},null===(r=this.bump)||void 0===r?void 0:r.subtotal_display_amount),h("span",null,h("span",{"aria-hidden":"true"},0===(null===(s=this.bump)||void 0===s?void 0:s.total_amount)&&wp.i18n.__("Free","surecart"),(null===(a=this.bump)||void 0===a?void 0:a.total_amount)>0&&h("span",{class:"bump__new-price"},null===(d=this.bump)||void 0===d?void 0:d.total_display_amount),this.renderInterval())))}renderClassicPrice(){var i,n,e,t,o,r,s,a,d;return h("div",{slot:"description",class:{bump__price:!0,"bump__price--has-discount":!!(null===(i=this.bump)||void 0===i?void 0:i.percent_off)||!!(null===(n=this.bump)||void 0===n?void 0:n.amount_off)},part:"price"},!(!(null===(e=this.bump)||void 0===e?void 0:e.percent_off)&&!(null===(t=this.bump)||void 0===t?void 0:t.amount_off))&&h("span",{"aria-label": /** translators: %s: old price */ wp.i18n.sprintf(wp.i18n.__("Originally priced at %s.","surecart"),null===(o=this.bump)||void 0===o?void 0:o.subtotal_display_amount),class:"bump__original-price"},null===(r=this.bump)||void 0===r?void 0:r.subtotal_display_amount),h("span",null,h("span",{"aria-hidden":"true"},0===(null===(s=this.bump)||void 0===s?void 0:s.total_amount)&&wp.i18n.__("Free","surecart"),(null===(a=this.bump)||void 0===a?void 0:a.total_amount)>0&&h("span",{class:"bump__new-price"},null===(d=this.bump)||void 0===d?void 0:d.total_display_amount),this.renderInterval())))}renderModern(){var i,n,e,t,o,r,s,a,d,l,p,c,u,m;const v=null===(n=null===(i=this.bump)||void 0===i?void 0:i.price)||void 0===n?void 0:n.product,b=this.lineItem();return h("sc-choice",{value:null===(e=this.bump)||void 0===e?void 0:e.id,type:"checkbox",showControl:!1,checked:!!b,exportparts:"base:choice__base, content:choice__content"},h("div",{part:"base-content",class:"bump",onClick:i=>i.stopPropagation(),onKeyDown:i=>{"Enter"!==i.key&&" "!==i.key||i.stopPropagation()}},!!(null===(t=null==v?void 0:v.line_item_image)||void 0===t?void 0:t.src)&&h("img",{...null==v?void 0:v.line_item_image,class:"bump__image",part:"image"}),h("div",{class:"bump__text",part:"text"},h("div",{class:"bump__title",part:"title","aria-label":wp.i18n.sprintf( /* translators: %s: order bump name */ wp.i18n.__("Product: %s.","surecart"),(null===(o=this.bump)||void 0===o?void 0:o.name)||(null==v?void 0:v.name))},h("span",{"aria-hidden":"true"},(null===(r=this.bump)||void 0===r?void 0:r.name)||(null==v?void 0:v.name))),!!(null===(a=null===(s=this.bump)||void 0===s?void 0:s.metadata)||void 0===a?void 0:a.cta)&&h("div",{class:"bump__cta",part:"cta"},h("span",null,null===(l=null===(d=this.bump)||void 0===d?void 0:d.metadata)||void 0===l?void 0:l.cta)),h("div",{class:"bump__amount",part:"amount"},this.renderModernPrice(),this.renderDiscount()),!!(null===(c=null===(p=this.bump)||void 0===p?void 0:p.metadata)||void 0===c?void 0:c.description)&&h("div",{class:"bump__description",part:"description","aria-label":wp.i18n.sprintf( /* translators: %s: Product description */ wp.i18n.__("Product description: %s.","surecart"),null===(u=this.bump)||void 0===u?void 0:u.rendered_description)},h("span",{"aria-hidden":"true",innerHTML:null===(m=this.bump)||void 0===m?void 0:m.rendered_description}))),h("button",{type:"button",class:{bump__button:!0,"bump__button--checked":!!b,"bump__button--loading":this.loading},part:"button",onClick:()=>this.updateLineItem(),"aria-label":b?wp.i18n.__("Remove from order","surecart"):wp.i18n.__("Add to order","surecart"),"aria-pressed":!!b,"aria-busy":this.loading},this.loading?h("sc-spinner",null):h("sc-icon",{name:b?"check":"plus"}))))}renderClassic(){var i,n,e,t,o,r,s,a,d,l,p,c,u,m,v,b,_,g;const f=null===(n=null===(i=this.bump)||void 0===i?void 0:i.price)||void 0===n?void 0:n.product;return h("sc-choice",{value:null===(e=this.bump)||void 0===e?void 0:e.id,type:"checkbox",showControl:this.showControl,checked:!!this.lineItem(),disabled:this.loading,onClick:i=>{i.preventDefault(),i.stopImmediatePropagation(),this.updateLineItem()},onKeyDown:i=>{"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),i.stopImmediatePropagation(),this.updateLineItem())},exportparts:"base, control, checked-icon, title"},h("div",{part:"base-content",class:"bump"},h("div",{class:"bump__text"},h("div",{class:"bump__title","aria-label":wp.i18n.sprintf( /* translators: %s: order bump name */ wp.i18n.__("Product: %s.","surecart"),(null===(o=null===(t=this.bump)||void 0===t?void 0:t.metadata)||void 0===o?void 0:o.cta)||(null===(r=this.bump)||void 0===r?void 0:r.name)||(null==f?void 0:f.name))},h("span",{"aria-hidden":"true"},(null===(a=null===(s=this.bump)||void 0===s?void 0:s.metadata)||void 0===a?void 0:a.cta)||(null===(d=this.bump)||void 0===d?void 0:d.name)||(null==f?void 0:f.name))),h("div",{class:"bump__amount"},this.renderClassicPrice(),this.renderDiscount()))),(null===(p=null===(l=this.bump)||void 0===l?void 0:l.metadata)||void 0===p?void 0:p.description)&&h("div",{slot:"footer",class:"bump__product--wrapper"},h("sc-divider",{style:{"--spacing":"var(--sc-spacing-medium)"}}),h("div",{class:"bump__product"},!!(null===(c=null==f?void 0:f.line_item_image)||void 0===c?void 0:c.src)&&h("img",{...null==f?void 0:f.line_item_image,class:"bump__image"}),h("div",{class:"bump__product-text"},!!(null===(m=null===(u=this.bump)||void 0===u?void 0:u.metadata)||void 0===m?void 0:m.cta)&&h("div",{class:"bump__product-title","aria-hidden":"true"},this.bump.name||(null==f?void 0:f.name)),!!(null===(b=null===(v=this.bump)||void 0===v?void 0:v.metadata)||void 0===b?void 0:b.description)&&h("div",{class:"bump__product-description","aria-label":wp.i18n.sprintf( /* translators: %s: Product description */ wp.i18n.__("Product description: %s.","surecart"),null===(_=this.bump)||void 0===_?void 0:_.rendered_description)},h("span",{"aria-hidden":"true",innerHTML:null===(g=this.bump)||void 0===g?void 0:g.rendered_description}))))))}render(){return this.isModern?this.renderModern():this.renderClassic()}get el(){return this}static get style(){return ScOrderBumpStyle0}},[1,"sc-order-bump",{bump:[16],showControl:[516,"show-control"],loading:[32]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-order-bump","sc-choice","sc-divider","sc-icon","sc-spinner"].forEach((i=>{switch(i){case"sc-order-bump":customElements.get(i)||customElements.define(i,ScOrderBump);break;case"sc-choice":customElements.get(i)||defineCustomElement$4();break;case"sc-divider":customElements.get(i)||defineCustomElement$3();break;case"sc-icon":customElements.get(i)||defineCustomElement$2();break;case"sc-spinner":customElements.get(i)||defineCustomElement$1()}}))}export{ScOrderBump as S,defineCustomElement as d};