JezK

Edit File: sc-stripe-payment-element.js

import{proxyCustomElement,HTMLElement,createEvent,h}from"@stencil/core/internal/client";import{p as pure}from"./pure.js";import{s as state$2}from"./watchers5.js";import{o as onChange,s as state}from"./mutations2.js";import{o as onChange$1}from"./store4.js";import"./watchers4.js";import{s as state$1,d as getProcessorByType}from"./getters5.js";import{c as currentFormState}from"./getters3.js";import{c as createErrorNotice}from"./mutations3.js";import{u as updateFormState}from"./mutations5.js";import{b as getResolvedBillingEmail,t as toStripeAddress,d as getResolvedBillingAddress}from"./getters2.js";import{d as defineCustomElement$3}from"./sc-skeleton2.js";import{d as defineCustomElement$2}from"./sc-text2.js";import{a as addQueryArgs}from"./add-query-args.js";const scStripePaymentElementCss="sc-stripe-payment-element{display:block}sc-stripe-payment-element [hidden]{display:none}.loader{display:grid;height:128px;gap:2em}.loader__row{display:flex;align-items:flex-start;justify-content:space-between;gap:1em}.loader__details{display:grid;gap:0.5em}",ScStripePaymentElementStyle0=scStripePaymentElementCss,ScStripePaymentElement$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.scPaid=createEvent(this,"scPaid",7),this.scSetState=createEvent(this,"scSetState",7),this.scPaymentInfoAdded=createEvent(this,"scPaymentInfoAdded",7),this.error=void 0,this.confirming=!1,this.isInitializingStripe=!1,this.isCreatingUpdatingStripeElement=!1,this.loaded=!1,this.styles=void 0}async componentWillLoad(){this.fetchStyles(),this.syncCheckoutMode()}async handleStylesChange(){this.createOrUpdateElements()}async fetchStyles(){this.styles=await this.getComputedStyles()}getComputedStyles(){return new Promise((e=>{let t=setInterval((()=>{const i=window.getComputedStyle(document.body);i.getPropertyValue("--sc-color-primary-500")&&(clearInterval(t),e(i))}),100)}))}async syncCheckoutMode(){onChange("checkout",(()=>{this.initializeStripe()}))}async componentDidLoad(){this.initializeStripe()}async initializeStripe(){var e,t;if(void 0===(null===(e=null==state?void 0:state.checkout)||void 0===e?void 0:e.live_mode)||(null===(t=null==state$1?void 0:state$1.instances)||void 0===t?void 0:t.stripe)||this.isInitializingStripe)return;this.isInitializingStripe=!0;const{processor_data:i}=getProcessorByType("stripe")||{};try{state$1.instances.stripe=await pure.loadStripe(null==i?void 0:i.publishable_key,{stripeAccount:null==i?void 0:i.account_id}),this.error=""}catch(e){return this.error=(null==e?void 0:e.message)||wp.i18n.__("Stripe could not be loaded","surecart"),void(this.isInitializingStripe=!1)}this.createOrUpdateElements(),this.handleUpdateElement(),this.unlistenToCheckout=onChange("checkout",(()=>{this.fetchStyles(),this.createOrUpdateElements(),this.handleUpdateElement()})),this.unlistenToFormState=onChange$1("formState",(()=>{var e;(null===(e=null==state?void 0:state.checkout)||void 0===e?void 0:e.payment_method_required)&&"paying"===currentFormState()&&this.maybeConfirmOrder()})),this.isInitializingStripe=!1}clearStripeInstances(){var e,t,i,s;if(this.isInitializingStripe=!1,this.isCreatingUpdatingStripeElement=!1,null==this?void 0:this.element){try{null===(t=null===(e=this.element)||void 0===e?void 0:e.unmount)||void 0===t||t.call(e)}catch(e){console.warn("Could not unmount Stripe element:",e)}this.element=null}(null===(i=null==state$1?void 0:state$1.instances)||void 0===i?void 0:i.stripeElements)&&(state$1.instances.stripeElements=null),(null===(s=null==state$1?void 0:state$1.instances)||void 0===s?void 0:s.stripe)&&(state$1.instances.stripe=null)}disconnectedCallback(){this.unlistenToFormState(),this.unlistenToCheckout(),this.clearStripeInstances()}getElementsConfig(){var e,t,i,s;const n=getComputedStyle(this.el);return{mode:(null===(e=state.checkout)||void 0===e?void 0:e.remaining_amount_due)>0?"payment":"setup",amount:null===(t=state.checkout)||void 0===t?void 0:t.remaining_amount_due,currency:null===(i=state.checkout)||void 0===i?void 0:i.currency,setupFutureUsage:(null===(s=state.checkout)||void 0===s?void 0:s.reusable_payment_method_required)?"off_session":null,appearance:{variables:{colorPrimary:n.getPropertyValue("--sc-color-primary-500")||"black",colorText:n.getPropertyValue("--sc-input-label-color")||"black",borderRadius:n.getPropertyValue("--sc-input-border-radius-medium")||"4px",colorBackground:n.getPropertyValue("--sc-input-background-color")||"white",fontSizeBase:n.getPropertyValue("--sc-input-font-size-medium")||"16px",colorLogo:n.getPropertyValue("--sc-stripe-color-logo")||"light",colorLogoTab:n.getPropertyValue("--sc-stripe-color-logo-tab")||"light",colorLogoTabSelected:n.getPropertyValue("--sc-stripe-color-logo-tab-selected")||"light",colorTextPlaceholder:n.getPropertyValue("--sc-input-placeholder-color")||"black"},rules:{".Input":{border:n.getPropertyValue("--sc-input-border")}}}}}maybeApplyFilters(e){var t,i,s;return(null===(i=null===(t=null===window||void 0===window?void 0:window.wp)||void 0===t?void 0:t.hooks)||void 0===i?void 0:i.applyFilters)?{...e,paymentMethodOrder:window.wp.hooks.applyFilters("surecart_stripe_payment_element_payment_method_order",[],state.checkout),wallets:window.wp.hooks.applyFilters("surecart_stripe_payment_element_wallets",{},state.checkout),terms:window.wp.hooks.applyFilters("surecart_stripe_payment_element_terms",{},state.checkout),fields:window.wp.hooks.applyFilters("surecart_stripe_payment_element_fields",null!==(s=e.fields)&&void 0!==s?s:{})}:e}createOrUpdateElements(){var e,t,i,s,n;if((null===(e=null==state?void 0:state.checkout)||void 0===e?void 0:e.payment_method_required)&&state$1.instances.stripe&&!this.isCreatingUpdatingStripeElement&&(!(null===(t=state.checkout)||void 0===t?void 0:t.status)||!["paid","processing"].includes(null===(i=state.checkout)||void 0===i?void 0:i.status))){if(this.isCreatingUpdatingStripeElement=!0,!state$1.instances.stripeElements){state$1.instances.stripeElements=state$1.instances.stripe.elements(this.getElementsConfig());const e=toStripeAddress(getResolvedBillingAddress()),t=this.maybeApplyFilters({defaultValues:{billingDetails:{...(null===(s=state.checkout)||void 0===s?void 0:s.name)?{name:state.checkout.name}:{},...getResolvedBillingEmail()?{email:getResolvedBillingEmail()}:{},...(null===(n=state.checkout)||void 0===n?void 0:n.phone)?{phone:state.checkout.phone}:{},...e?{address:e}:{}}},fields:{billingDetails:{email:"never"}}});return state$1.instances.stripeElements.create("payment",t).mount(this.container),this.element=state$1.instances.stripeElements.getElement("payment"),this.element.on("ready",(()=>this.loaded=!0)),this.element.on("change",(e=>{var t,i,s,n,a,o,l;state.paymentMethodRequiresShipping=["cashapp","klarna","clearpay"].includes(null===(t=null==e?void 0:e.value)||void 0===t?void 0:t.type),e.complete&&this.scPaymentInfoAdded.emit({checkout_id:null===(i=state.checkout)||void 0===i?void 0:i.id,currency:null===(s=state.checkout)||void 0===s?void 0:s.currency,processor_type:"stripe",total_amount:null===(n=state.checkout)||void 0===n?void 0:n.total_amount,line_items:null===(a=state.checkout)||void 0===a?void 0:a.line_items,payment_method:{billing_details:{email:null===(o=state.checkout)||void 0===o?void 0:o.email,name:null===(l=state.checkout)||void 0===l?void 0:l.name}}})})),void(this.isCreatingUpdatingStripeElement=!1)}state$1.instances.stripeElements.update(this.getElementsConfig()),this.isCreatingUpdatingStripeElement=!1}}handleUpdateElement(){var e,t,i;if(!this.element)return;if("draft"!==(null===(e=state.checkout)||void 0===e?void 0:e.status))return;const s=toStripeAddress(getResolvedBillingAddress()),n=this.maybeApplyFilters({defaultValues:{billingDetails:{...(null===(t=state.checkout)||void 0===t?void 0:t.name)?{name:state.checkout.name}:{},...getResolvedBillingEmail()?{email:getResolvedBillingEmail()}:{},...(null===(i=state.checkout)||void 0===i?void 0:i.phone)?{phone:state.checkout.phone}:{},...s?{address:s}:{}}},fields:{billingDetails:{email:"never"}}});this.element.update(n)}async submit(){if("stripe"!==(null==state$2?void 0:state$2.id))return;const{error:e}=await state$1.instances.stripeElements.submit();return e?(console.error({error:e}),updateFormState("REJECT"),createErrorNotice(e),void(this.error=e.message)):void 0}async maybeConfirmOrder(){var e,t,i,s,n,a,o,l,r,d,c,m,u,p;if("stripe"===(null==state$2?void 0:state$2.id)&&"stripe"===(null===(t=null===(e=state.checkout)||void 0===e?void 0:e.payment_intent)||void 0===t?void 0:t.processor_type)&&(null===(a=null===(n=null===(s=null===(i=state.checkout)||void 0===i?void 0:i.payment_intent)||void 0===s?void 0:s.processor_data)||void 0===n?void 0:n.stripe)||void 0===a?void 0:a.type)&&(null===(d=null===(r=null===(l=null===(o=state.checkout)||void 0===o?void 0:o.payment_intent)||void 0===l?void 0:l.processor_data)||void 0===r?void 0:r.stripe)||void 0===d?void 0:d.client_secret))return await this.confirm(null===(p=null===(u=null===(m=null===(c=state.checkout)||void 0===c?void 0:c.payment_intent)||void 0===m?void 0:m.processor_data)||void 0===u?void 0:u.stripe)||void 0===p?void 0:p.type)}async confirm(e,t={}){var i,s,n,a,o,l;const r=toStripeAddress(getResolvedBillingAddress()),d={elements:state$1.instances.stripeElements,clientSecret:null===(a=null===(n=null===(s=null===(i=state.checkout)||void 0===i?void 0:i.payment_intent)||void 0===s?void 0:s.processor_data)||void 0===n?void 0:n.stripe)||void 0===a?void 0:a.client_secret,confirmParams:{return_url:addQueryArgs(window.location.href,{...state.checkout.id?{checkout_id:state.checkout.id}:{}}),payment_method_data:{billing_details:{...getResolvedBillingEmail()?{email:getResolvedBillingEmail()}:{},...(null===(o=state.checkout)||void 0===o?void 0:o.name)?{name:state.checkout.name}:{},...(null===(l=state.checkout)||void 0===l?void 0:l.phone)?{phone:state.checkout.phone}:{},...r?{address:r}:{}}}},redirect:"if_required",...t};if(!this.confirming&&state$1.instances.stripe)try{this.scSetState.emit("PAYING");const t="setup"===e?await state$1.instances.stripe.confirmSetup(d):await state$1.instances.stripe.confirmPayment(d);if(null==t?void 0:t.error)throw this.error=t.error.message,t.error;this.scSetState.emit("PAID"),this.scPaid.emit()}catch(e){console.error(e),updateFormState("REJECT"),createErrorNotice(e),e.message&&(this.error=e.message)}finally{this.confirming=!1}}render(){return h("div",{key:"c0016a393f1aa445b51da4a530b7edf698e563bf",class:"sc-stripe-payment-element","data-testid":"stripe-payment-element"},!!this.error&&h("sc-text",{key:"c09a6e1d635731857dc31a5fc25ad04935a8913c",style:{color:"var(--sc-color-danger-500)","--font-size":"var(--sc-font-size-small)",marginBottom:"0.5em"}},this.error),h("div",{key:"57a220e93ee306dc86fc6df7bab71bd346f66783",class:"loader",hidden:this.loaded},h("div",{key:"afd6786da88edbf811a375090e4df66ca98846be",class:"loader__row"},h("div",{key:"a862e3f18cda04a3c1f1ea7bb075288945099c31",style:{width:"50%"}},h("sc-skeleton",{key:"61aa058d7abed5538cca62c6db05c76fa1254f67",style:{width:"50%",marginBottom:"0.5em"}}),h("sc-skeleton",{key:"0295966e246a0cd057a3ff94188408051bef066a"})),h("div",{key:"b22e9fc235cb89d749403ba43b4da200af7d82f9",style:{flex:"1"}},h("sc-skeleton",{key:"5268d2c1f509a430822806a2d454f1d7d0397674",style:{width:"50%",marginBottom:"0.5em"}}),h("sc-skeleton",{key:"470436ac76f63fa7b5c7120776642f4d8d2a1633"})),h("div",{key:"aa3e3a12bb063778c0fe5b8335125c929ba1634c",style:{flex:"1"}},h("sc-skeleton",{key:"5a11fdc0424cec4f5c0ceb8c0f232b7736e51662",style:{width:"50%",marginBottom:"0.5em"}}),h("sc-skeleton",{key:"ee169a25cc29f740f26c70afa227c30a23564ed0"}))),h("div",{key:"6b6b2038705990671d39c2b79673a9b41a8a3046",class:"loader__details"},h("sc-skeleton",{key:"f23185d310d18cfb008de7d8323b79f600faa599",style:{height:"1rem"}}),h("sc-skeleton",{key:"93d333bf62b776b455bc18919150ca005d891dcc",style:{height:"1rem",width:"30%"}}))),h("div",{key:"ebda57e66939b559a2d8e647bc89c04028c6c037",hidden:!this.loaded,class:"sc-payment-element-container",ref:e=>this.container=e}))}get el(){return this}static get watchers(){return{styles:["handleStylesChange"]}}static get style(){return ScStripePaymentElementStyle0}},[0,"sc-stripe-payment-element",{error:[32],confirming:[32],isInitializingStripe:[32],isCreatingUpdatingStripeElement:[32],loaded:[32],styles:[32],confirm:[64]},void 0,{styles:["handleStylesChange"]}]);function defineCustomElement$1(){"undefined"!=typeof customElements&&["sc-stripe-payment-element","sc-skeleton","sc-text"].forEach((e=>{switch(e){case"sc-stripe-payment-element":customElements.get(e)||customElements.define(e,ScStripePaymentElement$1);break;case"sc-skeleton":customElements.get(e)||defineCustomElement$3();break;case"sc-text":customElements.get(e)||defineCustomElement$2()}}))}const ScStripePaymentElement=ScStripePaymentElement$1,defineCustomElement=defineCustomElement$1;export{ScStripePaymentElement,defineCustomElement};