{"version":3,"names":["scCheckoutCss","ScCheckoutStyle0","wp","i18n","__","includes","state$1","formState","value","h","style","padding","this","successUrl"],"sources":["src/components/controllers/checkout-form/checkout/sc-checkout.scss?tag=sc-checkout","src/components/controllers/checkout-form/checkout/sc-checkout.tsx"],"sourcesContent":["sc-checkout {\n  --sc-form-focus-within-z-index: 5;\n\n  display: block;\n  font-family: var(--sc-font-sans);\n  font-size: var(--sc-checkout-font-size, 16px);\n  position: relative;\n\n  h3 {\n    font-size: var(--sc-input-label-font-size-medium);\n  }\n}\n\nsc-alert {\n  margin-bottom: var(--sc-form-row-spacing);\n}\n.sc-checkout-container {\n  &.sc-align-center {\n    max-width: 500px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n  &.sc-align-wide {\n    max-width: 800px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n\n::slotted(*) {\n  font-family: var(--sc-font-sans);\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State } from '@stencil/core';\nimport { state as checkoutState } from '@store/checkout';\nimport { state as formState } from '@store/form';\nimport { state as userState } from '@store/user';\nimport { state as processorsState } from '@store/processors';\nimport { __ } from '@wordpress/i18n';\nimport { Creator, Universe } from 'stencil-wormhole';\n\nimport {\n  Bump,\n  Checkout,\n  Customer,\n  FormState,\n  ManualPaymentMethod,\n  PaymentIntents,\n  PriceChoice,\n  Prices,\n  Processor,\n  ProcessorName,\n  Product,\n  Products,\n  ResponseError,\n  TaxProtocol,\n} from '../../../../types';\n\n@Component({\n  tag: 'sc-checkout',\n  styleUrl: 'sc-checkout.scss',\n  shadow: false,\n})\nexport class ScCheckout {\n  /** Element */\n  @Element() el: HTMLElement;\n\n  /** Holds the session provider reference. */\n  private sessionProvider: HTMLScSessionProviderElement;\n\n  /** An array of prices to pre-fill in the form. */\n  @Prop() prices: Array<PriceChoice> = [];\n\n  /** A product to pre-fill the form. */\n  @Prop() product: Product;\n\n  /** Are we in test or live mode. */\n  @Prop() mode: 'test' | 'live' = 'live';\n\n  /** The checkout form id */\n  @Prop() formId: number;\n\n  /** When the form was modified. */\n  @Prop() modified: string;\n\n  /** Currency to use for this checkout. */\n  @Prop() currencyCode: string = 'usd';\n\n  /** Whether to persist the session in the browser between visits. */\n  @Prop() persistSession: boolean = true;\n\n  /** Where to go on success */\n  @Prop() successUrl: string = '';\n\n  /** Stores the current customer */\n  @Prop({ mutable: true }) customer: Customer;\n\n  /** Alignment */\n  @Prop() alignment: 'center' | 'wide' | 'full';\n\n  /** The account tax protocol */\n  @Prop() taxProtocol: TaxProtocol;\n\n  /** Should we disable components validation */\n  @Prop() disableComponentsValidation: boolean;\n\n  /** Processors enabled for this form. */\n  @Prop({ mutable: true }) processors: Processor[];\n\n  /** Manual payment methods enabled for this form. */\n  @Prop() manualPaymentMethods: ManualPaymentMethod[];\n\n  /** Can we edit line items? */\n  @Prop() editLineItems: boolean = true;\n\n  /** Can we remove line items? */\n  @Prop() removeLineItems: boolean = true;\n\n  /** Is abandoned checkout enabled. */\n  @Prop() abandonedCheckoutEnabled: boolean;\n\n  /** Use the Stripe payment element. */\n  @Prop() stripePaymentElement: boolean = false;\n\n  /** Stores fetched prices for use throughout component.  */\n  @State() pricesEntities: Prices = {};\n\n  /** Stores fetched products for use throughout component.  */\n  @State() productsEntities: Products = {};\n\n  /** Loading states for different parts of the form. */\n  @State() checkoutState: FormState = 'idle';\n\n  /** Error to display. */\n  @State() error: ResponseError | null;\n\n  /** The currenly selected processor */\n  @State() processor: ProcessorName = 'stripe';\n\n  /** The processor method. */\n  @State() method: string;\n\n  /** Is the processor manual? */\n  @State() isManualProcessor: boolean;\n\n  /** Holds the payment intents for the checkout. */\n  @State() paymentIntents: PaymentIntents = {};\n\n  /** Is this form a duplicate form? (There's another on the page) */\n  @State() isDuplicate: boolean;\n\n  /** Checkout has been updated. */\n  @Event() scOrderUpdated: EventEmitter<Checkout>;\n\n  /** Checkout has been finalized. */\n  @Event() scOrderFinalized: EventEmitter<Checkout>;\n\n  /** Checkout has an error. */\n  @Event() scOrderError: EventEmitter<ResponseError>;\n\n  @Listen('scUpdateOrderState')\n  handleOrderStateUpdate(e: { detail: Checkout }) {\n    checkoutState.checkout = e.detail;\n  }\n\n  @Listen('scSetMethod')\n  handleMethodChange(e) {\n    this.method = e.detail;\n  }\n\n  @Listen('scAddEntities')\n  handleAddEntities(e) {\n    const { products, prices } = e.detail;\n    // add products.\n    if (Object.keys(products?.length || {})) {\n      this.productsEntities = {\n        ...this.productsEntities,\n        ...products,\n      };\n    }\n\n    // add prices.\n    if (Object.keys(prices?.length || {})) {\n      this.pricesEntities = {\n        ...this.pricesEntities,\n        ...prices,\n      };\n    }\n  }\n\n  /**\n   * Submit the form\n   */\n  @Method()\n  async submit({ skip_validation } = { skip_validation: false }) {\n    if (!skip_validation) {\n      await this.validate();\n    }\n    return await this.sessionProvider.finalize();\n  }\n\n  /**\n   * Validate the form.\n   */\n  @Method()\n  async validate() {\n    const form = this.el.querySelector('sc-form') as HTMLScFormElement;\n    return await form.validate();\n  }\n\n  componentWillLoad() {\n    const checkout = document.querySelector('sc-checkout');\n    this.isDuplicate = !!checkout && checkout !== this.el;\n    if (this.isDuplicate) return;\n    Universe.create(this as Creator, this.state());\n  }\n\n  state() {\n    return {\n      processor: this.processor,\n      method: this.method,\n      selectedProcessorId: this.processor,\n      manualPaymentMethods: this.manualPaymentMethods,\n      processor_data: checkoutState.checkout?.processor_data,\n      state: this.checkoutState,\n      formState: formState.formState.value,\n      paymentIntents: this.paymentIntents,\n      successUrl: this.successUrl,\n      bumps: checkoutState.checkout?.recommended_bumps?.data as Bump[],\n\n      order: checkoutState.checkout,\n      abandonedCheckoutEnabled: checkoutState.checkout?.abandoned_checkout_enabled,\n      checkout: checkoutState.checkout,\n      shippingEnabled: checkoutState.checkout?.shipping_enabled,\n      lineItems: checkoutState.checkout?.line_items?.data || [],\n      editLineItems: this.editLineItems,\n      removeLineItems: this.removeLineItems,\n\n      // checkout states\n      loading: formState.formState.value === 'loading',\n      busy: ['updating', 'finalizing', 'paying', 'confirming'].includes(formState.formState.value),\n      paying: ['finalizing', 'paying', 'confirming'].includes(formState.formState.value),\n      empty: !['loading', 'updating'].includes(formState.formState.value) && !checkoutState.checkout?.line_items?.pagination?.count,\n      // checkout states\n\n      // stripe.\n      stripePaymentElement: processorsState.config.stripe.paymentElement,\n      stripePaymentIntent: (checkoutState.checkout?.staged_payment_intents?.data || []).find(intent => intent.processor_type === 'stripe'),\n\n      error: this.error,\n      customer: this.customer,\n      tax_status: checkoutState.checkout?.tax_status,\n      taxEnabled: checkoutState.checkout?.tax_enabled,\n      customerShippingAddress: typeof checkoutState.checkout?.customer !== 'string' ? checkoutState.checkout?.customer?.shipping_address : {},\n      shippingAddress: checkoutState.checkout?.shipping_address,\n      taxStatus: checkoutState.checkout?.tax_status,\n      taxIdentifier: checkoutState.checkout?.tax_identifier,\n      totalAmount: checkoutState.checkout?.total_amount,\n      taxProtocol: this.taxProtocol,\n      lockedChoices: this.prices,\n      products: this.productsEntities,\n      prices: this.pricesEntities,\n      country: 'US',\n      loggedIn: userState.loggedIn,\n      emailExists: checkoutState.checkout?.email_exists,\n      formId: checkoutState.formId,\n      mode: checkoutState.mode,\n      currencyCode: checkoutState.currencyCode,\n    };\n  }\n\n  render() {\n    if (this.isDuplicate) {\n      return <sc-alert open>{__('Due to processor restrictions, only one checkout form is allowed on the page.', 'surecart')}</sc-alert>;\n    }\n\n    return (\n      <div\n        class={{\n          'sc-checkout-container': true,\n          'sc-align-center': this.alignment === 'center',\n          'sc-align-wide': this.alignment === 'wide',\n          'sc-align-full': this.alignment === 'full',\n        }}\n      >\n        {/* Handles unsaved changes warning depending on checkout state */}\n        <sc-checkout-unsaved-changes-warning state={this.checkoutState} />\n        {checkoutState.validateStock && <sc-checkout-stock-alert />}\n\n        {/* Univers provider */}\n        <Universe.Provider state={this.state()}>\n          {/** Handles login form prompts. */}\n          <sc-login-provider\n            loggedIn={userState.loggedIn}\n            onScSetCustomer={e => (this.customer = e.detail as Customer)}\n            onScSetLoggedIn={e => (userState.loggedIn = e.detail)}\n            order={checkoutState.checkout}\n          >\n            {/* Handles the current checkout form state. */}\n            <sc-form-state-provider onScSetCheckoutFormState={e => (this.checkoutState = e.detail)}>\n              {/* Handles adding error component in the form. */}\n              <sc-form-error-provider>\n                {/* Validate components in the form based on order state. */}\n                <sc-form-components-validator disabled={this.disableComponentsValidation} taxProtocol={checkoutState.taxProtocol}>\n                  {/* Handle confirming of order after it is \"Paid\" by processors. */}\n                  <sc-order-confirm-provider checkout-status={formState.formState.value} success-url={this.successUrl}>\n                    {/* Handles the current session. */}\n                    <sc-session-provider ref={el => (this.sessionProvider = el as HTMLScSessionProviderElement)} prices={this.prices} persist={this.persistSession}>\n                      <slot />\n                    </sc-session-provider>\n                  </sc-order-confirm-provider>\n                </sc-form-components-validator>\n              </sc-form-error-provider>\n            </sc-form-state-provider>\n          </sc-login-provider>\n\n          {this.state().busy && <sc-block-ui class=\"busy-block-ui\" style={{ 'z-index': '30' }}></sc-block-ui>}\n\n          {['finalizing', 'paying', 'confirming', 'confirmed', 'redirecting'].includes(formState.formState.value) && (\n            <sc-block-ui spinner style={{ '--sc-block-ui-opacity': '0.75', 'z-index': '30' }}>\n              {formState.text.loading[formState.formState.value] || __('Processing payment...', 'surecart')}\n            </sc-block-ui>\n          )}\n\n          {['locked'].includes(formState.formState.value) && (\n            <sc-block-ui style={{ '--sc-block-ui-opacity': '1', 'z-index': '30', '--sc-block-ui-position': 'fixed', '--sc-block-ui-cursor': 'normal' }}>\n              <div style={{ 'text-align': 'center', 'padding': '2rem', 'max-width': '600px' }}>\n                {__('This invoice is not currently available for payment. If you have any questions, please contact us.', 'surecart')}\n              </div>\n            </sc-block-ui>\n          )}\n\n          <sc-checkout-test-complete checkout-status={formState.formState.value} success-url={this.successUrl} />\n        </Universe.Provider>\n      </div>\n    );\n  }\n}\n"],"mappings":"qfAAA,MAAMA,EAAgB,8eACtB,MAAAC,EAAeD,E,6+HC+OcE,GAAAC,KAAAC,GAAE,4F,2rCA+CqCF,GAAAC,KAAAC,GAAE,gDAAAC,SAAAC,EAAAC,UAAAC,QAAAC,EAAA,eAAAC,MAAA,+GAAAD,EAAA,OAAAC,MAAA,uBAAAC,QAAA,6BAOrDT,GAAAC,KAAAC,GAAE,mHAAAK,EAAA,+CAAAH,EAAAC,UAAAC,MAAA,cAAAI,KAAAC,c","ignoreList":[]}