JezK

Edit File: sc-subscription-payment.entry.js.map

{"file":"sc-subscription-payment.entry.js","mappings":";;;;;;AAAA,MAAM,wBAAwB,GAAG,qFAAqF,CAAC;AACvH,oCAAe,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;8EC+BN,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EA8DF,UAAE;;;;;;;;;;;;;;;;;;;;;6EAoCK,UAAE,2HAG3B,UAAE;;;;;;;;;qJA8BN,UAAE,wKAKA,UAAE;;;qGASqB,UAAE;;;;;;;","names":[],"sources":["src/components/controllers/dashboard/subscription-payment/sc-subscription-payment.scss?tag=sc-subscription-payment&encapsulation=shadow","src/components/controllers/dashboard/subscription-payment/sc-subscription-payment.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n}\n\n.subscription-payment {\n display: grid;\n gap: 0.5em;\n}\n","import { Component, h, Prop, State, Fragment } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { addQueryArgs } from '@wordpress/url';\nimport apiFetch from '../../../../functions/fetch';\nimport { PaymentMethod, Subscription, ManualPaymentMethod } from '../../../../types';\n@Component({\n tag: 'sc-subscription-payment',\n styleUrl: 'sc-subscription-payment.scss',\n shadow: true,\n})\nexport class ScSubscriptionPayment {\n @Prop() subscriptionId: string;\n @Prop() backUrl: string;\n @Prop() successUrl: string;\n @Prop({ mutable: true }) subscription: Subscription;\n @Prop() paymentMethods: Array<PaymentMethod> = [];\n @Prop() customerIds: Array<string> = [];\n @State() manualPaymentMethods: ManualPaymentMethod[];\n @State() loading: boolean;\n @State() busy: boolean;\n @State() error: string;\n\n componentWillLoad() {\n this.fetchItems();\n }\n\n async fetchItems() {\n try {\n this.loading = true;\n await Promise.all([this.fetchSubscription(), this.fetchPaymentMethods()]);\n } catch (e) {\n console.error(e);\n this.error = e?.message || __('Something went wrong', 'surecart');\n } finally {\n this.loading = false;\n }\n }\n\n async fetchSubscription() {\n if (!this.subscriptionId) return;\n this.subscription = (await apiFetch({\n path: addQueryArgs(`/surecart/v1/subscriptions/${this.subscriptionId}`, {\n expand: ['price', 'price.product', 'current_period', 'product'],\n }),\n })) as Subscription;\n }\n\n async fetchPaymentMethods() {\n this.paymentMethods = (await apiFetch({\n path: addQueryArgs(`/surecart/v1/payment_methods`, {\n expand: ['card', 'customer', 'billing_agreement', 'paypal_account', 'payment_instrument', 'bank_account'],\n customer_ids: this.customerIds,\n reusable: true,\n ...(this.subscription?.live_mode !== null ? { live_mode: this.subscription.live_mode } : {}),\n }),\n })) as PaymentMethod[];\n\n this.manualPaymentMethods = (await apiFetch({\n path: addQueryArgs(`surecart/v1/manual_payment_methods`, {\n customer_ids: this.customerIds,\n reusable: true,\n live_mode: this.subscription?.live_mode,\n }),\n })) as ManualPaymentMethod[];\n\n // remove archived methods if the current payment method id is not the archived one.\n this.manualPaymentMethods = this.manualPaymentMethods.filter(method => {\n if( method?.archived && method?.id !== this.currentPaymentMethodId()) {\n return false;\n }\n return true;\n }); \n }\n\n async handleSubmit(e) {\n const { payment_method } = await e.target.getFormJson();\n const isManualPaymentMethod = (this.manualPaymentMethods || []).some(method => method.id === payment_method);\n\n try {\n this.error = '';\n this.busy = true;\n await apiFetch({\n path: `/surecart/v1/subscriptions/${this.subscription?.id}`,\n method: 'PATCH',\n data: {\n ...(!isManualPaymentMethod ? { payment_method, manual_payment: false } : { manual_payment_method: payment_method, manual_payment: true }),\n },\n });\n if (this.successUrl) {\n window.location.assign(this.successUrl);\n } else {\n this.busy = false;\n }\n } catch (e) {\n this.error = e?.message || __('Something went wrong', 'surecart');\n this.busy = false;\n }\n }\n\n renderLoading() {\n return (\n <Fragment>\n <sc-choice name=\"loading\" disabled>\n <sc-skeleton style={{ width: '60px', display: 'inline-block' }}></sc-skeleton>\n <sc-skeleton style={{ width: '80px', display: 'inline-block' }} slot=\"price\"></sc-skeleton>\n <sc-skeleton style={{ width: '120px', display: 'inline-block' }} slot=\"description\"></sc-skeleton>\n </sc-choice>\n <sc-button type=\"primary\" full submit loading busy></sc-button>\n {!!this.backUrl && <sc-button href={this.backUrl} full loading busy></sc-button>}\n </Fragment>\n );\n }\n\n currentPaymentMethodId() {\n return this.subscription?.manual_payment\n ? this.subscription?.manual_payment_method\n : (this.subscription?.payment_method as PaymentMethod)?.id || this.subscription?.payment_method;\n }\n\n renderContent() {\n if (this.loading) {\n return this.renderLoading();\n }\n\n const modeMethods = this.paymentMethods.filter(method => method?.live_mode === this.subscription?.live_mode);\n const hasNoPaymentMethods = (!this.paymentMethods?.length && !this.manualPaymentMethods?.length) || (this.paymentMethods?.length && !modeMethods?.length);\n\n if (hasNoPaymentMethods) {\n return (\n <Fragment>\n <sc-empty icon=\"credit-card\">{__('You have no saved payment methods.', 'surecart')}</sc-empty>\n {!!this.backUrl && (\n <sc-button href={this.backUrl} full>\n {__('Go Back', 'surecart')}\n </sc-button>\n )}\n </Fragment>\n );\n }\n\n return (\n <Fragment>\n <sc-choices>\n <div>\n {(this.paymentMethods || []).map(method => {\n if (method?.live_mode !== this?.subscription?.live_mode) return null;\n return (\n <sc-choice checked={this.currentPaymentMethodId() === method?.id} name=\"payment_method\" value={method?.id}>\n <sc-payment-method paymentMethod={method} full={true} />\n </sc-choice>\n );\n })}\n {(this.manualPaymentMethods || []).map(method => {\n return (\n <sc-choice checked={this.currentPaymentMethodId() === method?.id} name=\"payment_method\" value={method?.id}>\n <sc-manual-payment-method paymentMethod={method} showDescription />\n </sc-choice>\n );\n })}\n </div>\n </sc-choices>\n\n <sc-button type=\"primary\" full submit loading={this.loading || this.busy} disabled={this.loading || this.busy}>\n {__('Update', 'surecart')}\n </sc-button>\n\n {!!this.backUrl && (\n <sc-button href={this.backUrl} full loading={this.loading || this.busy} disabled={this.loading || this.busy}>\n {__('Go Back', 'surecart')}\n </sc-button>\n )}\n </Fragment>\n );\n }\n\n render() {\n return (\n <sc-dashboard-module heading={__('Select a payment method', 'surecart')} class=\"subscription-payment\" error={this.error}>\n <sc-form onScFormSubmit={e => this.handleSubmit(e)}>\n <sc-card>{this.renderContent()}</sc-card>\n </sc-form>\n {this.busy && <sc-block-ui></sc-block-ui>}\n </sc-dashboard-module>\n );\n }\n}\n"],"version":3}