JezK

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

{"file":"sc-subscription.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,shBAAshB,CAAC;AACjjB,6BAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;0BC2DV,UAAE;;;;;;;;;;;;;;;;;;;;6BAiBH,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8EA+BU,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA0Bd,UAAE;;;;;;;;;;;;;eAYZ,UAAE;;;;;;;YAYD,eAAO,CAAC,UAAE;;;;;YAWV,eAAO,CAAC,UAAE;;;;;YAWV,eAAO,CAAC,UAAE;;;;;kDAUS,UAAE;;;;;;;;;;;;;;;;;2HAqCmB,UAAE,2nBAMrC,UAAE;;;;;gIAcF,UAAE,+XAMF,UAAE,0TAMF,UAAE;;oKAQA,UAAE;;;;;;+HAgBJ,UAAE;;;;;;;;","names":[],"sources":["src/components/controllers/dashboard/subscription/sc-subscription.scss?tag=sc-subscription&encapsulation=shadow","src/components/controllers/dashboard/subscription/sc-subscription.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.subscription {\n display: grid;\n gap: 0.5em;\n\n a {\n text-decoration: none;\n font-weight: var(--sc-font-weight-semibold);\n display: inline-flex;\n align-items: center;\n gap: 0.25em;\n color: var(--sc-color-primary-500);\n\n &.cancel {\n color: var(--sc-color-danger-500);\n }\n }\n}\n\n@media screen and (max-width: 720px) {\n .subscription {\n &__action-buttons {\n --sc-flex-column-gap: var(--sc-spacing-xxx-small);\n &::part(base) {\n flex-direction: column;\n }\n\n sc-button::part(base) {\n width: auto;\n height: 2em;\n }\n }\n }\n}\n\n// .subscription {\n// position: relative;\n\n// &__details {\n// line-height: var(--sc-line-height-normal);\n// }\n\n// &__name {\n// font-weight: var(--sc-font-weight-bold);\n// font-size: var(--sc-font-size-large);\n// line-height: var(--sc-line-height-normal)\n// }\n\n// &__fine-print {\n// font-size: var(--sc-font-size-x-small);\n// color: var(--sc-color-gray-500);\n// }\n// }\n","import { Component, Element, Fragment, h, Prop, State } from '@stencil/core';\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { addQueryArgs } from '@wordpress/url';\nimport apiFetch from '../../../../functions/fetch';\nimport { Subscription, SubscriptionProtocol } from '../../../../types';\nimport { onFirstVisible } from '../../../../functions/lazy';\nimport { productNameWithPrice } from '../../../../functions/price';\n@Component({\n tag: 'sc-subscription',\n styleUrl: 'sc-subscription.scss',\n shadow: true,\n})\nexport class ScSubscription {\n @Element() el: HTMLScSubscriptionsListElement;\n\n /** The subscription ID */\n @Prop() subscriptionId: string;\n\n /** Whether to show the cancel button */\n @Prop() showCancel: boolean;\n\n /** Heading to display */\n @Prop() heading: string;\n\n /** Query to pass to the API */\n @Prop() query: object;\n\n /** The subscription protocol */\n @Prop() protocol: SubscriptionProtocol;\n\n /** The subscription */\n @Prop({ mutable: true }) subscription: Subscription;\n\n /** Update the payment method url */\n @Prop() updatePaymentMethodUrl: string;\n\n /** Loading state */\n @State() loading: boolean;\n\n /** Cancel modal */\n @State() cancelModal: boolean;\n\n /** Resubscribe modal */\n @State() resubscribeModal: boolean;\n\n /** Busy state */\n @State() busy: boolean;\n\n /** Error message */\n @State() error: string;\n\n componentWillLoad() {\n onFirstVisible(this.el, () => {\n if (!this.subscription) {\n this.getSubscription();\n }\n });\n }\n\n async cancelPendingUpdate() {\n const r = confirm(__('Are you sure you want to cancel the pending update to your plan?', 'surecart'));\n if (!r) return;\n try {\n this.busy = true;\n this.subscription = (await apiFetch({\n path: addQueryArgs(`surecart/v1/subscriptions/${this.subscription?.id}/`, {\n expand: ['price', 'price.product', 'product.bundle_items', 'bundle_item.component_product', 'current_period', 'period.checkout', 'purchase', 'purchase.license', 'license.activations', 'discount', 'discount.coupon'],\n }),\n method: 'PATCH',\n data: {\n purge_pending_update: true,\n },\n })) as Subscription;\n } catch (e) {\n if (e?.message) {\n this.error = e.message;\n } else {\n this.error = __('Something went wrong', 'surecart');\n }\n console.error(this.error);\n } finally {\n this.busy = false;\n }\n }\n\n async renewSubscription() {\n try {\n this.error = '';\n this.busy = true;\n this.subscription = (await apiFetch({\n path: addQueryArgs(`surecart/v1/subscriptions/${this.subscription?.id}/renew`, {\n expand: [\n 'price',\n 'price.product',\n 'product.bundle_items',\n 'bundle_item.component_product',\n 'current_period',\n 'period.checkout',\n 'purchase',\n 'purchase.license',\n 'license.activations',\n 'discount',\n 'discount.coupon',\n ],\n }),\n method: 'PATCH',\n })) as Subscription;\n } catch (e) {\n this.error = e?.message || __('Something went wrong', 'surecart');\n } finally {\n this.busy = false;\n }\n }\n\n /** Get all subscriptions */\n async getSubscription() {\n try {\n this.loading = true;\n this.subscription = (await await apiFetch({\n path: addQueryArgs(`surecart/v1/subscriptions/${this.subscriptionId || this.subscription?.id}`, {\n expand: [\n 'price',\n 'price.product',\n 'product.bundle_items',\n 'bundle_item.component_product',\n 'current_period',\n ],\n ...(this.query || {}),\n }),\n })) as Subscription;\n } catch (e) {\n if (e?.message) {\n this.error = e.message;\n } else {\n this.error = __('Something went wrong', 'surecart');\n }\n console.error(this.error);\n } finally {\n this.loading = false;\n }\n }\n\n renderName(subscription: Subscription) {\n if (typeof subscription?.price?.product !== 'string') {\n return productNameWithPrice(subscription?.price);\n }\n return __('Subscription', 'surecart');\n }\n\n renderRenewalText(subscription) {\n const tag = <sc-subscription-status-badge subscription={subscription}></sc-subscription-status-badge>;\n\n if (subscription?.cancel_at_period_end && subscription.current_period_end_at) {\n return (\n <span>\n {tag}{' '}\n {\n /* translators: %s: current period end date */\n sprintf(__('Your plan will be canceled on %s', 'surecart'), subscription.current_period_end_at_date)\n }\n </span>\n );\n }\n if (subscription.status === 'trialing' && subscription.trial_end_at) {\n return (\n <span>\n {tag}{' '}\n {\n /* translators: %s: trial end date */\n sprintf(__('Your plan begins on %s', 'surecart'), subscription.trial_end_at_date)\n }\n </span>\n );\n }\n if (subscription.status === 'active' && subscription.current_period_end_at) {\n return (\n <span>\n {tag}{' '}\n {\n /* translators: %s: current period end date */\n sprintf(__('Your plan renews on %s', 'surecart'), subscription.current_period_end_at_date)\n }\n </span>\n );\n }\n\n return tag;\n }\n\n renderEmpty() {\n return <slot name=\"empty\">{__('This subscription does not exist.', 'surecart')}</slot>;\n }\n\n renderLoading() {\n return (\n <sc-stacked-list-row style={{ '--columns': '2' }} mobile-size={0}>\n <div style={{ padding: '0.5em' }}>\n <sc-skeleton style={{ width: '30%', marginBottom: '0.75em' }}></sc-skeleton>\n <sc-skeleton style={{ width: '20%', marginBottom: '0.75em' }}></sc-skeleton>\n <sc-skeleton style={{ width: '40%' }}></sc-skeleton>\n </div>\n </sc-stacked-list-row>\n );\n }\n\n renderContent() {\n if (this.loading) {\n return this.renderLoading();\n }\n\n if (!this.subscription) {\n return this.renderEmpty();\n }\n\n return (\n <Fragment>\n <sc-subscription-next-payment subscription={this.subscription} updatePaymentMethodUrl={this.updatePaymentMethodUrl}>\n <sc-subscription-details subscription={this.subscription}></sc-subscription-details>\n </sc-subscription-next-payment>\n </Fragment>\n );\n }\n\n render() {\n const paymentMethodExists = this?.subscription.payment_method || this?.subscription.manual_payment;\n\n return (\n <sc-dashboard-module heading={this.heading || __('Current Plan', 'surecart')} class=\"subscription\" error={this.error}>\n {!!this.subscription && this?.subscription?.can_modify && (\n <sc-flex slot=\"end\" class=\"subscription__action-buttons\">\n {this.updatePaymentMethodUrl && paymentMethodExists && (\n <sc-button type=\"link\" href={this.updatePaymentMethodUrl}>\n <sc-icon name=\"credit-card\" slot=\"prefix\"></sc-icon>\n {__('Update Payment Method', 'surecart')}\n </sc-button>\n )}\n {!paymentMethodExists && (\n <sc-button\n type=\"link\"\n href={addQueryArgs(window.location.href, {\n action: 'create',\n model: 'payment_method',\n id: this?.subscription.id,\n ...(this?.subscription?.live_mode === false ? { live_mode: false } : {}),\n })}\n >\n <sc-icon name=\"credit-card\" slot=\"prefix\"></sc-icon>\n {__('Add Payment Method', 'surecart')}\n </sc-button>\n )}\n {!!Object.keys(this.subscription?.pending_update).length && (\n <sc-button type=\"link\" onClick={() => this.cancelPendingUpdate()}>\n <sc-icon name=\"x-octagon\" slot=\"prefix\"></sc-icon>\n {__('Cancel Scheduled Update', 'surecart')}\n </sc-button>\n )}\n {this?.subscription?.cancel_at_period_end ? (\n <sc-button type=\"link\" onClick={() => this.renewSubscription()}>\n <sc-icon name=\"repeat\" slot=\"prefix\"></sc-icon>\n {__('Restore Plan', 'surecart')}\n </sc-button>\n ) : (\n this.subscription?.status !== 'canceled' &&\n this.subscription?.current_period_end_at &&\n this.showCancel && (\n <sc-button type=\"link\" onClick={() => (this.cancelModal = true)}>\n <sc-icon name=\"x\" slot=\"prefix\"></sc-icon>\n {__('Cancel Plan', 'surecart')}\n </sc-button>\n )\n )}\n {this.subscription?.status === 'canceled' && (\n <sc-button\n type=\"link\"\n {...(!!this.subscription?.payment_method || this?.subscription.manual_payment\n ? {\n onClick: () => (this.resubscribeModal = true),\n }\n : {\n href: this?.updatePaymentMethodUrl,\n })}\n >\n <sc-icon name=\"repeat\" slot=\"prefix\"></sc-icon>\n {__('Resubscribe', 'surecart')}\n </sc-button>\n )}\n </sc-flex>\n )}\n\n <sc-card style={{ '--overflow': 'hidden' }} noPadding>\n {this.renderContent()}\n </sc-card>\n\n {this.busy && <sc-block-ui spinner></sc-block-ui>}\n\n <sc-cancel-dialog\n subscription={this.subscription}\n protocol={this.protocol}\n open={this.cancelModal}\n onScRequestClose={() => (this.cancelModal = false)}\n onScRefresh={() => this.getSubscription()}\n >\n <slot name=\"cancel-popup-content\" slot=\"cancel-popup-content\" />\n </sc-cancel-dialog>\n <sc-subscription-reactivate\n subscription={this.subscription}\n open={this.resubscribeModal}\n onScRequestClose={() => (this.resubscribeModal = false)}\n onScRefresh={() => this.getSubscription()}\n />\n </sc-dashboard-module>\n );\n }\n}\n"],"version":3}