JezK

Edit File: sc-order-confirm-provider2.js.map

{"file":"sc-order-confirm-provider2.js","mappings":";;;;;;;;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,6VAA6V,CAAC;AAChY,qCAAe,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;kBCmD5B,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;04BAgF0C,UAAE,oZAGqB,UAAE,4hCAQ9B,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/providers/order-confirm-provider/sc-order-confirm-provider.scss?tag=sc-order-confirm-provider&encapsulation=shadow","src/components/providers/order-confirm-provider/sc-order-confirm-provider.tsx"],"sourcesContent":[".confirm {\n &__icon {\n margin-bottom: var(--sc-spacing-medium);\n display: flex;\n justify-content: center;\n }\n\n &__icon-container {\n background: var(--sc-color-primary-500);\n width: 55px;\n height: 55px;\n border-radius: 999999px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n line-height: 1;\n color: white;\n }\n}\n\nsc-dialog::part(overlay) {\n backdrop-filter: blur(4px);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Watch, Prop, State } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\nimport { addQueryArgs } from '@wordpress/url';\nimport { speak } from '@wordpress/a11y';\n\nimport apiFetch from '../../../functions/fetch';\nimport { expand } from '../../../services/session';\nimport { state as checkoutState } from '@store/checkout';\nimport { state as formState } from '@store/form';\nimport { Checkout, ManualPaymentMethod } from '../../../types';\nimport { createErrorNotice } from '@store/notices/mutations';\nimport { clearCheckout } from '@store/checkout/mutations';\n/**\n * This component listens to the order status\n * and confirms the order when payment is successful.\n */\n@Component({\n tag: 'sc-order-confirm-provider',\n styleUrl: 'sc-order-confirm-provider.scss',\n shadow: true,\n})\nexport class ScOrderConfirmProvider {\n private continueButton: HTMLScButtonElement;\n /** The order confirm provider element */\n @Element() el: HTMLScOrderConfirmProviderElement;\n\n /** Whether to show success modal */\n @State() showSuccessModal: boolean = false;\n\n /** Whether to show success modal */\n @State() manualPaymentMethod: ManualPaymentMethod;\n\n /** Checkout status to listen and do payment related stuff. */\n @Prop() checkoutStatus: string;\n\n /** Success url. */\n @Prop() successUrl: string;\n\n /** The order is paid event. */\n @Event() scOrderPaid: EventEmitter<Checkout>;\n\n @Event() scSetState: EventEmitter<string>;\n\n /**\n * Watch for paid checkout machine state.\n * This is triggered by Stripe, Paypal or Paystack when payment succeeds.\n */\n @Watch('checkoutStatus')\n handleConfirmOrderEvent() {\n if (this.checkoutStatus === 'confirming') {\n this.confirmOrder();\n } else if (this.checkoutStatus === 'confirmed') {\n speak(__('Order has been confirmed. Please select continue to go to the next step.', 'surecart'));\n }\n }\n\n /** Confirm the order. */\n async confirmOrder() {\n try {\n checkoutState.checkout = (await apiFetch({\n method: 'PATCH',\n path: addQueryArgs(`surecart/v1/checkouts/${checkoutState?.checkout?.id}/confirm`, { expand }),\n })) as Checkout;\n this.scSetState.emit('CONFIRMED');\n } catch (e) {\n console.error(e);\n createErrorNotice(e);\n } finally {\n this.manualPaymentMethod = (checkoutState.checkout?.manual_payment_method as ManualPaymentMethod) || null;\n const checkout = checkoutState.checkout;\n const formId = checkoutState.formId;\n\n // If there is an initial upsell redirect to it.\n if (!!checkout?.current_upsell?.permalink) {\n setTimeout(\n () =>\n window.location.assign(\n addQueryArgs(checkout?.current_upsell?.permalink, {\n sc_checkout_id: checkout?.id,\n sc_form_id: formId,\n }),\n ),\n 50,\n );\n clearCheckout();\n return;\n }\n\n // get success url.\n const successUrl = checkout?.metadata?.success_url || this.successUrl;\n if (successUrl) {\n // set state to redirecting.\n this.scSetState.emit('REDIRECT');\n const redirectUrl = addQueryArgs(successUrl, { sc_order: checkout?.id });\n setTimeout(() => window.location.assign(redirectUrl), 50);\n } else {\n this.showSuccessModal = true;\n }\n clearCheckout();\n }\n }\n\n getSuccessUrl() {\n const url = checkoutState.checkout?.metadata?.success_url || this.successUrl;\n return url ? addQueryArgs(url, { sc_order: checkoutState.checkout?.id }) : window?.scData?.pages?.dashboard;\n }\n\n @Watch('showSuccessModal')\n handleSuccessModal() {\n if (this.showSuccessModal) {\n setTimeout(() => {\n this.continueButton?.focus();\n }, 50);\n }\n }\n\n render() {\n return (\n <Host>\n <slot />\n <sc-dialog\n open={!!this.showSuccessModal}\n style={{ '--body-spacing': 'var(--sc-spacing-xxx-large)', '--width': '400px' }}\n noHeader\n onScRequestClose={e => e.preventDefault()}\n >\n <div class=\"confirm__icon\">\n <div class=\"confirm__icon-container\">\n <sc-icon name=\"check\" />\n </div>\n </div>\n <sc-dashboard-module\n heading={formState?.text?.success?.title || __('Thanks for your order!', 'surecart')}\n style={{ '--sc-dashboard-module-spacing': 'var(--sc-spacing-x-large)', 'textAlign': 'center' }}\n >\n <span slot=\"description\">{formState?.text?.success?.description || __('Your payment was successful. A receipt is on its way to your inbox.', 'surecart')}</span>\n {!!this.manualPaymentMethod?.name && !!this.manualPaymentMethod?.instructions && (\n <sc-alert type=\"info\" open style={{ 'text-align': 'left' }}>\n <span slot=\"title\">{this.manualPaymentMethod?.name}</span>\n <div innerHTML={this.manualPaymentMethod?.instructions}></div>\n </sc-alert>\n )}\n <sc-button href={this.getSuccessUrl()} size=\"large\" type=\"primary\" ref={el => (this.continueButton = el as HTMLScButtonElement)}>\n {formState?.text?.success?.button || __('Continue', 'surecart')}\n <sc-icon name=\"arrow-right\" slot=\"suffix\" />\n </sc-button>\n </sc-dashboard-module>\n </sc-dialog>\n </Host>\n );\n }\n}\n"],"version":3}