JezK

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

{"file":"sc-subscription-payment-method.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,8BAA8B,GAAG,sBAAsB,CAAC;AAC9D,0CAAe,8BAA8B;;;;;;;;;;;;;;;;;;yHCoDL,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EA+BR,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;0BA2Bd,UAAE;;;;;;;;;;;;;+EAWU,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EAiCF,UAAE;;;;;;;;;;;;;;;uPAoBzB,UAAE;;;;;uWAgBI,UAAE;;YASD,UAAE;;0OASL,UAAE;;;;wZAiBF,UAAE;;;;;;2HAWmC,UAAE;;;;;yHAY3C,UAAE;;;;;;;;","names":[],"sources":["src/components/controllers/dashboard/sc-subscription-payment-method/sc-subscription-payment-method.css?tag=sc-subscription-payment-method&encapsulation=shadow","src/components/controllers/dashboard/sc-subscription-payment-method/sc-subscription-payment-method.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Prop, State, h, Element } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { addQueryArgs } from '@wordpress/url';\nimport apiFetch from '../../../../functions/fetch';\nimport { onFirstVisible } from '../../../../functions/lazy';\nimport { ManualPaymentMethod, PaymentMethod, Subscription } from '../../../../types';\n\n@Component({\n tag: 'sc-subscription-payment-method',\n styleUrl: 'sc-subscription-payment-method.css',\n shadow: true,\n})\nexport class ScSubscriptionPaymentMethod {\n /** The element */\n @Element() el: HTMLScSubscriptionPaymentElement;\n\n /** The heading */\n @Prop() heading: string;\n\n /** The subscription */\n @Prop() subscription: Subscription;\n\n /** The list of payment methods. */\n @State() paymentMethods: PaymentMethod[];\n\n @State() manualPaymentMethods: ManualPaymentMethod[];\n\n /** The error. */\n @State() error: string;\n\n /** Loading state. */\n @State() loading: boolean;\n @State() busy: boolean;\n @State() method: string;\n\n renderLoading() {\n return (\n <sc-card noPadding>\n <sc-stacked-list>\n <sc-stacked-list-row style={{ '--columns': '4' }} mobile-size={500}>\n {[...Array(4)].map(() => (\n <sc-skeleton style={{ width: '100px', display: 'inline-block' }}></sc-skeleton>\n ))}\n </sc-stacked-list-row>\n </sc-stacked-list>\n </sc-card>\n );\n }\n\n renderEmpty() {\n return (\n <slot name=\"empty\">\n <sc-card>\n <sc-empty icon=\"credit-card\">{__('You do not have any payment methods.', 'surecart')}</sc-empty>\n </sc-card>\n </slot>\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 hasPaymentMethods() {\n return this.paymentMethods?.length && this.manualPaymentMethods?.length;\n }\n\n componentWillLoad() {\n onFirstVisible(this.el, () => {\n this.getPaymentMethods();\n });\n }\n\n /** Get all subscriptions */\n async getPaymentMethods() {\n if (this.hasPaymentMethods()) return;\n const customerId = this.subscription?.customer?.id || this.subscription?.customer;\n if (!customerId) return;\n try {\n this.loading = true;\n await this.fetchMethods(customerId);\n } catch (e) {\n this.error = e?.messsage || __('Something went wrong', 'surecart');\n console.error(this.error);\n } finally {\n this.loading = false;\n }\n }\n\n async fetchMethods(customerId) {\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: [customerId],\n reusable: true,\n 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 reusable: true,\n archived: false,\n live_mode: this.subscription?.live_mode,\n }),\n })) as ManualPaymentMethod[];\n }\n\n async deleteMethod(method: PaymentMethod) {\n const r = confirm(__('Are you sure you want to remove this payment method?', 'surecart'));\n if (!r) return;\n try {\n this.busy = true;\n (await apiFetch({\n path: `surecart/v1/payment_methods/${method?.id}/detach`,\n method: 'PATCH',\n })) as PaymentMethod;\n // remove from view.\n this.paymentMethods = this.paymentMethods.filter(m => m.id !== method.id);\n } catch (e) {\n this.error = e?.messsage || __('Something went wrong', 'surecart');\n console.error(this.error);\n } finally {\n this.busy = false;\n }\n }\n\n async updateMethod(e) {\n const { payment_method } = await e.target.getFormJson();\n\n if (payment_method === this.currentPaymentMethodId()) {\n return;\n }\n try {\n const isManualPaymentMethod = (this.manualPaymentMethods || []).some(method => method.id === payment_method);\n this.busy = true;\n this.subscription = (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 })) as Subscription;\n // redirect to edit page.\n window.location.assign(\n addQueryArgs(window.location.href, {\n action: 'edit',\n model: 'subscription',\n id: this.subscription?.id,\n }),\n );\n // remove from view.\n } catch (e) {\n this.error = e?.messsage || __('Something went wrong', 'surecart');\n console.error(this.error);\n } finally {\n this.busy = false;\n }\n }\n\n renderContent() {\n if (this.loading) {\n return this.renderLoading();\n }\n\n if (!this.paymentMethods?.length && !this.manualPaymentMethods?.length) {\n return this.renderEmpty();\n }\n\n return (\n <sc-form onScSubmit={e => this.updateMethod(e)}>\n <sc-choices>{this.renderList()}</sc-choices>\n <sc-button type=\"primary\" submit full size=\"large\" busy={this.busy} disabled={this.busy}>\n {__('Update Payment Method', 'surecart')}\n </sc-button>\n </sc-form>\n );\n }\n\n renderList() {\n const regularPaymentMethods = this.paymentMethods.map(paymentMethod => {\n const { id, card, live_mode, paypal_account } = paymentMethod;\n\n return (\n <sc-choice checked={this.currentPaymentMethodId() === id} name=\"payment_method\" value={id} required>\n <sc-flex justifyContent=\"flex-start\" align-items=\"center\">\n <sc-payment-method paymentMethod={paymentMethod} />{' '}\n {!live_mode && (\n <sc-tag type=\"warning\" size=\"small\">\n {__('Test', 'surecart')}\n </sc-tag>\n )}\n </sc-flex>\n <div slot=\"description\">\n {!!card?.exp_month && (\n <span>\n {\n /** Translators: Credit Card Expires (Exp. 11/27) */\n __('Exp.', 'surecart')\n }\n {card?.exp_month}/{card?.exp_year}\n </span>\n )}\n {!!paypal_account && paypal_account?.email}\n </div>\n {this.currentPaymentMethodId() === id && (\n <sc-tag type=\"info\" slot=\"price\">\n {__('Current Payment Method', 'surecart')}\n </sc-tag>\n )}\n </sc-choice>\n );\n });\n\n const manualPaymentMethods = this.manualPaymentMethods.map(paymentMethod => {\n const { id } = paymentMethod;\n\n return (\n <sc-choice checked={this.currentPaymentMethodId() === id} name=\"payment_method\" value={id} required>\n <sc-flex justifyContent=\"flex-start\" align-items=\"center\">\n <sc-manual-payment-method paymentMethod={paymentMethod} showDescription />\n </sc-flex>\n {this.currentPaymentMethodId() === id && (\n <sc-tag type=\"info\" slot=\"price\">\n {__('Current Payment Method', 'surecart')}\n </sc-tag>\n )}\n </sc-choice>\n );\n });\n return [...regularPaymentMethods, ...manualPaymentMethods];\n }\n\n render() {\n return (\n <sc-dashboard-module heading={this.heading || __('Update Payment Method', 'surecart')} class=\"subscription\" error={this.error}>\n <sc-button\n slot=\"end\"\n type=\"link\"\n href={addQueryArgs(window.location.href, {\n action: 'create',\n model: 'payment_method',\n ...(this.subscription?.live_mode === false ? { live_mode: false } : {}),\n success_url: window.location.href,\n })}\n >\n <sc-icon name=\"plus\" slot=\"prefix\"></sc-icon>\n {__('Add New', 'surecart')}\n </sc-button>\n\n {this.renderContent()}\n\n {this.busy && <sc-block-ui spinner></sc-block-ui>}\n </sc-dashboard-module>\n );\n }\n}\n"],"version":3}