FileMaster

Edit File: sc-coupon-form2.js

import{proxyCustomElement,HTMLElement,createEvent,h,Fragment}from"@stencil/core/internal/client";import{s as speak}from"./index2.js";import{i as isRtl}from"./page-align.js";import{a as getHumanDiscount,b as getHumanDiscountRedeemableStatus}from"./price.js";import{s as state}from"./mutations2.js";import{d as defineCustomElement$c}from"./sc-alert2.js";import{d as defineCustomElement$b}from"./sc-block-ui2.js";import{d as defineCustomElement$a}from"./sc-button2.js";import{d as defineCustomElement$9}from"./sc-form-control2.js";import{d as defineCustomElement$8}from"./sc-format-number2.js";import{d as defineCustomElement$7}from"./sc-icon2.js";import{d as defineCustomElement$6}from"./sc-input2.js";import{d as defineCustomElement$5}from"./sc-line-item2.js";import{d as defineCustomElement$4}from"./sc-skeleton2.js";import{d as defineCustomElement$3}from"./sc-spinner2.js";import{d as defineCustomElement$2}from"./sc-tag2.js";import{d as defineCustomElement$1}from"./sc-visually-hidden2.js";const scCouponFormCss=":host {\n  display: block;\n}\n\nsc-button {\n  color: var(--sc-color-primary-500);\n}\n\nsc-alert {\n  margin-top: var(--sc-spacing-small);\n}\n\n.coupon-form {\n  position: relative;\n  container-type: inline-size;\n}\n.coupon-form .coupon-button {\n  opacity: 0;\n  visibility: hidden;\n  transform: scale(0.9);\n  transition: all var(--sc-transition-fast) ease;\n  color: var(--sc-input-color);\n}\n.coupon-form .coupon-button-mobile {\n  margin-top: var(--sc-input-label-margin);\n  display: none;\n}\n.coupon-form--has-value .coupon-button {\n  opacity: 1;\n  visibility: visible;\n  transform: scale(1);\n}\n\n@container (max-width: 320px) {\n  .coupon-form .coupon-button {\n    display: none;\n  }\n  .coupon-form .coupon-button-mobile {\n    display: block;\n  }\n}\n.form {\n  opacity: 0;\n  visibility: hidden;\n  height: 0;\n  transform: translateY(5px);\n  transition: opacity var(--sc-transition-medium) ease, transform var(--sc-transition-medium) ease;\n  position: relative;\n  gap: var(--sc-spacing-small);\n}\n\n.coupon-form--is-open .form {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n  height: auto;\n  margin: var(--sc-spacing-small) 0;\n}\n.coupon-form--is-open .trigger {\n  display: none;\n}\n\n.trigger {\n  cursor: pointer;\n  font-size: var(--sc-font-size-small);\n  line-height: var(--sc-line-height-dense);\n  color: var(--sc-input-label-color);\n  user-select: none;\n}\n.trigger:hover {\n  text-decoration: underline;\n}\n\n.coupon-form--is-rtl .trigger {\n  text-align: right;\n}\n\n.coupon__status {\n  font-size: var(--sc-font-size-small);\n  line-height: var(--sc-line-height-dense);\n  color: var(--sc-color-warning-700);\n  display: inline-flex;\n  gap: var(--sc-spacing-x-small);\n  align-items: flex-start;\n  text-align: left;\n}\n.coupon__status sc-icon {\n  flex: 0 0 1em;\n  margin-top: 0.25em;\n}",ScCouponFormStyle0=scCouponFormCss,ScCouponForm=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.scApplyCoupon=createEvent(this,"scApplyCoupon",7),this.label=void 0,this.loading=void 0,this.busy=void 0,this.placeholder=void 0,this.error=void 0,this.forceOpen=void 0,this.discount=void 0,this.currency=void 0,this.discountAmount=void 0,this.discountsDisplayAmount=void 0,this.showInterval=void 0,this.open=void 0,this.collapsed=void 0,this.value=void 0,this.buttonText=void 0,this.editable=!0}handleOpenChange(t){t&&setTimeout((()=>this.input.triggerFocus()),50)}handleBlur(){this.value||(this.open=!1,this.error="")}getHumanReadableDiscount(){var t,e,o;return(null===(t=null==this?void 0:this.discount)||void 0===t?void 0:t.coupon)&&(null===(e=null==this?void 0:this.discount)||void 0===e?void 0:e.coupon.percent_off)?getHumanDiscount(null===(o=null==this?void 0:this.discount)||void 0===o?void 0:o.coupon):""}applyCoupon(){this.scApplyCoupon.emit(this.value)}handleKeyDown(t){"Enter"===(null==t?void 0:t.code)?this.applyCoupon():"Escape"===(null==t?void 0:t.code)&&(this.scApplyCoupon.emit(null),this.open=!1,speak(wp.i18n.__("Coupon code field closed.","surecart"),"assertive"))}translateHumanDiscountWithDuration(t){var e;if(!this.showInterval)return t;const{duration:o,duration_in_months:n}=null===(e=this.discount)||void 0===e?void 0:e.coupon;switch(o){case"once":return`${t} ${wp.i18n.__("once","surecart")}`;case"repeating":const e=wp.i18n.sprintf(wp.i18n._n("%d month","%d months",n,"surecart"),n);
// translators: %s is the discount amount, %s is the duration (e.g. 3 months)
return wp.i18n.sprintf(wp.i18n.__("%s for %s","surecart"),t,e);default:return t}}async triggerFocus(){var t,e,o;await new Promise((t=>requestAnimationFrame(t))),(null===(e=null===(t=null==this?void 0:this.discount)||void 0===t?void 0:t.promotion)||void 0===e?void 0:e.code)?null===(o=this.couponTag.shadowRoot.querySelector("*"))||void 0===o||o.focus():this.addCouponTrigger&&this.addCouponTrigger.focus()}renderTrialText(){var t,e;return"once"===(null===(e=null===(t=this.discount)||void 0===t?void 0:t.coupon)||void 0===e?void 0:e.duration)?wp.i18n.__("Applies on first payment","surecart"):wp.i18n.__("Starting on first payment","surecart")}render(){var t,e,o,n,s,i,r,l,a,u,c;const p=!!(null===(t=null==state?void 0:state.checkout)||void 0===t?void 0:t.trial_amount)&&!(null===(e=null==state?void 0:state.checkout)||void 0===e?void 0:e.amount_due);if(this.loading)return h("sc-skeleton",{style:{width:"120px",display:"inline-block"}});if(null===(n=null===(o=null==this?void 0:this.discount)||void 0===o?void 0:o.promotion)||void 0===n?void 0:n.code){let t=this.getHumanReadableDiscount();return h("sc-line-item",{exportparts:"description:info, price-description:discount, price:amount"},h("span",{slot:"description"},h("div",{part:"discount-label"},wp.i18n.__("Discount","surecart")),h("sc-tag",{exportparts:"base:coupon-tag",type:"redeemable"===(null===(s=this.discount)||void 0===s?void 0:s.redeemable_status)?"success":"warning",class:"coupon-tag",clearable:this.editable,onScClear:()=>{this.editable&&(this.scApplyCoupon.emit(null),this.open=!1)},onKeyDown:t=>{var e,o,n;this.editable&&("Enter"!==t.key&&"Escape"!==t.key||(speak(
// translators: %1$s is the coupon code, %2$s is the order total
wp.i18n.sprintf(wp.i18n.__("Coupon code %1$s was removed and now order total is %2$s","surecart"),null===(o=null===(e=null==this?void 0:this.discount)||void 0===e?void 0:e.promotion)||void 0===o?void 0:o.code,null===(n=state.checkout)||void 0===n?void 0:n.total_display_amount),"assertive"),this.scApplyCoupon.emit(null),this.open=!1))},ref:t=>this.couponTag=t,role:"button","aria-label":wp.i18n.sprintf(wp.i18n.__("Press enter to remove coupon code %s.","surecart"),(null===(r=null===(i=null==this?void 0:this.discount)||void 0===i?void 0:i.promotion)||void 0===r?void 0:r.code)||this.input.value||"")},null===(a=null===(l=null==this?void 0:this.discount)||void 0===l?void 0:l.promotion)||void 0===a?void 0:a.code)),"redeemable"===(null===(u=this.discount)||void 0===u?void 0:u.redeemable_status)?h(Fragment,null,t&&h("span",{class:"coupon-human-discount",slot:"price-description"},this.translateHumanDiscountWithDuration(t)),h("span",{slot:p?"price-description":"price"},p?this.renderTrialText():this.discountsDisplayAmount?this.discountsDisplayAmount:h("sc-format-number",{type:"currency",currency:null==this?void 0:this.currency,value:null==this?void 0:this.discountAmount}))):h("div",{class:"coupon__status",slot:"price-description"},h("sc-icon",{name:"alert-triangle"}),getHumanDiscountRedeemableStatus(null===(c=this.discount)||void 0===c?void 0:c.redeemable_status)))}return this.collapsed?h("div",{part:"base",class:{"coupon-form":!0,"coupon-form--is-open":this.open||this.forceOpen,"coupon-form--has-value":!!this.value,"coupon-form--is-rtl":isRtl()}},h("div",{part:"label",class:"trigger",onMouseDown:()=>{this.open||(this.open=!0)},onKeyDown:t=>{if("Enter"!==t.key&&" "!==t.key)return!0;this.open||(this.open=!0,speak(wp.i18n.__("Coupon code field opened. Press Escape button to close it.","surecart"),"assertive"))},tabindex:"0",ref:t=>this.addCouponTrigger=t,role:"button"},h("slot",{name:"label"},this.label)),h("div",{class:"form",part:"form"},h("sc-input",{exportparts:"base:input__base, input, form-control:input__form-control",value:this.value,onScInput:t=>this.value=t.target.value,placeholder:this.placeholder,onScBlur:()=>this.handleBlur(),onKeyDown:t=>this.handleKeyDown(t),ref:t=>this.input=t,"aria-label":wp.i18n.__("Add coupon code.","surecart")},h("sc-button",{exportparts:"base:button__base, label:button_label",slot:"suffix",type:"text",loading:this.busy,size:"medium",class:"coupon-button",onClick:()=>this.applyCoupon()},h("slot",null,this.buttonText))),h("sc-button",{exportparts:"base:button__base, label:button_label",type:"primary",outline:!0,loading:this.busy,size:"medium",class:"coupon-button-mobile",onClick:()=>this.applyCoupon()},h("slot",null,this.buttonText)),!!this.error&&h("sc-alert",{exportparts:"base:error__base, icon:error__icon, text:error__text, title:error_title, message:error__message",type:"danger",open:!0},h("span",{slot:"title"},this.error))),this.loading&&h("sc-block-ui",{exportparts:"base:block-ui, content:block-ui__content"})):h("div",{class:{"coupon-form":!0,"coupon-form--has-value":!!this.value,"coupon-form--is-rtl":isRtl()}},h("sc-input",{label:this.label,exportparts:"base:input__base, input, form-control:input__form-control",value:this.value,onScInput:t=>this.value=t.target.value,placeholder:this.placeholder,onScBlur:()=>this.handleBlur(),onKeyDown:t=>this.handleKeyDown(t),ref:t=>this.input=t},h("sc-button",{exportparts:"base:button__base, label:button_label",slot:"suffix",type:"text",loading:this.busy,size:"medium",class:"coupon-button",onClick:()=>this.applyCoupon()},h("slot",null,this.buttonText))),h("sc-button",{exportparts:"base:button__base, label:button_label",type:"primary",outline:!0,loading:this.busy,size:"medium",class:"coupon-button-mobile",onClick:()=>this.applyCoupon()},h("slot",null,this.buttonText)),!!this.error&&h("sc-alert",{exportparts:"base:error__base, icon:error__icon, text:error__text, title:error_title, message:error__message",type:"danger",open:!0},h("span",{slot:"title"},this.error)))}get el(){return this}static get watchers(){return{open:["handleOpenChange"]}}static get style(){return ScCouponFormStyle0}},[1,"sc-coupon-form",{label:[1],loading:[4],busy:[4],placeholder:[1],error:[1025],forceOpen:[4,"force-open"],discount:[16],currency:[1],discountAmount:[2,"discount-amount"],discountsDisplayAmount:[1,"discounts-display-amount"],showInterval:[4,"show-interval"],open:[1028],collapsed:[4],buttonText:[513,"button-text"],editable:[4],value:[32],triggerFocus:[64]},void 0,{open:["handleOpenChange"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-coupon-form","sc-alert","sc-block-ui","sc-button","sc-form-control","sc-format-number","sc-icon","sc-input","sc-line-item","sc-skeleton","sc-spinner","sc-tag","sc-visually-hidden"].forEach((t=>{switch(t){case"sc-coupon-form":customElements.get(t)||customElements.define(t,ScCouponForm);break;case"sc-alert":customElements.get(t)||defineCustomElement$c();break;case"sc-block-ui":customElements.get(t)||defineCustomElement$b();break;case"sc-button":customElements.get(t)||defineCustomElement$a();break;case"sc-form-control":customElements.get(t)||defineCustomElement$9();break;case"sc-format-number":customElements.get(t)||defineCustomElement$8();break;case"sc-icon":customElements.get(t)||defineCustomElement$7();break;case"sc-input":customElements.get(t)||defineCustomElement$6();break;case"sc-line-item":customElements.get(t)||defineCustomElement$5();break;case"sc-skeleton":customElements.get(t)||defineCustomElement$4();break;case"sc-spinner":customElements.get(t)||defineCustomElement$3();break;case"sc-tag":customElements.get(t)||defineCustomElement$2();break;case"sc-visually-hidden":customElements.get(t)||defineCustomElement$1()}}))}export{ScCouponForm as S,defineCustomElement as d};

Back