{"version":3,"names":["paypalButtonsCss","ScPaypalButtonsStyle0","wp","i18n","__","scSecureNoticeCss","ScSecureNoticeStyle0","ScSecureNotice","render","h","key","class","part","xmlns","width","height","viewBox","fill","d","name"],"sources":["src/components/ui/paypal-buttons/paypal-buttons.scss?tag=sc-paypal-buttons&encapsulation=shadow","src/components/ui/paypal-buttons/paypal-buttons.tsx","src/components/ui/secure-notice/sc-secure-notice.scss?tag=sc-secure-notice&encapsulation=shadow","src/components/ui/secure-notice/sc-secure-notice.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.paypal-buttons {\n  position: relative;\n  line-height: 0;\n  text-align: center;\n\n  &:not(.paypal-buttons--busy):after {\n    content: \" \";\n    border-bottom: 1px solid var(--sc-input-border-color);\n    width: 100%;\n    height: 0;\n    top: 50%;\n    left: 0;\n    right: 0;\n    position: absolute;\n  }\n}\n","import { loadScript } from '@paypal/paypal-js';\nimport { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { __ } from '@wordpress/i18n';\n\nimport apiFetch from '../../../functions/fetch';\nimport { fetchCheckout } from '../../../services/session';\nimport { Checkout, PaymentIntent } from '../../../types';\nimport { getScriptLoadParams } from './functions';\nimport { createErrorNotice } from '@store/notices/mutations';\n\n@Component({\n  tag: 'sc-paypal-buttons',\n  styleUrl: 'paypal-buttons.scss',\n  shadow: true,\n})\nexport class ScPaypalButtons {\n  /** This element. */\n  @Element() el!: HTMLScPaypalButtonsElement;\n\n  /** Holds the card button */\n  private cardContainer: HTMLDivElement;\n\n  /** Holds the paypal buttons */\n  private paypalContainer: HTMLDivElement;\n\n  /** Client id for the script. */\n  @Prop() clientId: string;\n\n  /** Is this busy? */\n  @Prop() busy: boolean = false;\n\n  /** The merchant id for paypal. */\n  @Prop() merchantId: string;\n\n  /** Merchant initiated billing enabled. */\n  @Prop() merchantInitiated: boolean;\n\n  /** Test or live mode. */\n  @Prop() mode: 'test' | 'live';\n\n  /** The order. */\n  @Prop({ mutable: true }) order: Checkout;\n\n  /** Buttons to render */\n  @Prop() buttons: string[] = ['paypal', 'card'];\n\n  /** Label for the button. */\n  @Prop() label: 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment' = 'paypal';\n\n  /** Button color. */\n  @Prop() color: 'gold' | 'blue' | 'silver' | 'black' | 'white' = 'gold';\n\n  /** Has this loaded? */\n  @State() loaded: boolean;\n\n  /** Set the state machine */\n  @Event() scSetState: EventEmitter<string>;\n\n  @Event() scPaid: EventEmitter<void>;\n\n  @Watch('order')\n  handleOrderChange(val, prev) {\n    if (val?.updated_at === prev?.updated_at) {\n      return;\n    }\n    this.cardContainer.innerHTML = '';\n    this.paypalContainer.innerHTML = '';\n    this.loadScript();\n  }\n\n  /** Load the script */\n  async loadScript() {\n    if (!this.clientId || !this.merchantId) return;\n    try {\n      const paypal = await loadScript(\n        getScriptLoadParams({\n          clientId: this.clientId,\n          merchantId: this.merchantId,\n          merchantInitiated: this.merchantInitiated,\n          reusable: this.order?.reusable_payment_method_required,\n          currency: this.order?.currency,\n        }),\n      );\n      this.renderButtons(paypal);\n    } catch (err) {\n      console.error('failed to load the PayPal JS SDK script', err);\n    }\n  }\n\n  /** Load the script on component load. */\n  componentDidLoad() {\n    this.loadScript();\n  }\n\n  /** Render the buttons. */\n  renderButtons(paypal) {\n    const createFunc = this.order.reusable_payment_method_required ? 'createBillingAgreement' : 'createOrder';\n\n    const config = {\n      /**\n       * Validate the form, client-side when the button is clicked.\n       */\n      onClick: async (_, actions) => {\n        const form = this.el.closest('sc-checkout') as HTMLScCheckoutElement;\n        const isValid = await form.validate();\n        return isValid ? actions.resolve() : actions.reject();\n      },\n\n      onInit: () => {\n        this.loaded = true;\n      },\n\n      onCancel: () => {\n        this.scSetState.emit('REJECT');\n      },\n\n      /**\n       * The transaction has been approved.\n       * We can capture it.\n       */\n      onApprove: async () => {\n        try {\n          this.order = (await fetchCheckout({ id: this.order?.id })) as Checkout;\n        } catch (e) {\n          console.error(e);\n          createErrorNotice({ code: 'could_not_capture', message: __('The payment did not process. Please try again.', 'surecart') });\n          this.scSetState.emit('REJECT');\n        }\n\n        try {\n          this.scSetState.emit('PAYING');\n          const intent = (await apiFetch({\n            method: 'PATCH',\n            path: `surecart/v1/payment_intents/${this.order?.payment_intent?.id || this.order?.payment_intent}/capture`,\n          })) as PaymentIntent;\n          if (['succeeded', 'processing'].includes(intent?.status)) {\n            this.scSetState.emit('PAID');\n            this.scPaid.emit();\n          } else {\n            createErrorNotice({ code: 'could_not_capture', message: __('Payment processing failed. Kindly attempt the transaction once more.', 'surecart') });\n            this.scSetState.emit('REJECT');\n          }\n        } catch (err) {\n          console.error(err);\n          createErrorNotice({ code: 'could_not_capture', message: __('Payment processing failed. Kindly attempt the transaction once more.', 'surecart') });\n          this.scSetState.emit('REJECT');\n        }\n      },\n\n      /**\n       * Transaction errored.\n       * @param err\n       */\n      onError: err => {\n        console.error(err);\n        createErrorNotice(err);\n        this.scSetState.emit('REJECT');\n      },\n    };\n\n    config[createFunc] = async () => {\n      return new Promise(async (resolve, reject) => {\n        // get the checkout component.\n        const checkout = this.el.closest('sc-checkout') as HTMLScCheckoutElement;\n\n        // submit and get the finalized order\n        const order = (await checkout.submit()) as Checkout;\n\n        // an error occurred. reject with the error.\n        if (order instanceof Error) {\n          return reject(order);\n        }\n\n        // assume there was a validation issue here.\n        // that is handled by our fetch function.\n        if (order?.status !== 'finalized') {\n          return reject(new Error('Something went wrong. Please try again.'));\n        }\n\n        // resolve the payment intent id.\n        if (order?.payment_intent?.external_intent_id) {\n          return resolve(order?.payment_intent?.external_intent_id);\n        }\n\n        // we don't have the correct payment intent for some reason.\n        createErrorNotice({ code: 'missing_payment_intent', message: __('Something went wrong. Please contact us for payment.', 'surecart') });\n        return reject();\n      });\n    };\n\n    if (paypal.FUNDING.PAYPAL) {\n      const paypalButton = paypal.Buttons({\n        fundingSource: paypal.FUNDING.PAYPAL,\n        style: {\n          label: this.label,\n          color: this.color,\n        },\n        ...config,\n      });\n      if (paypalButton.isEligible()) {\n        paypalButton.render(this.paypalContainer);\n      }\n    }\n\n    if (paypal.FUNDING.CARD) {\n      const cardButton = paypal.Buttons({\n        fundingSource: paypal.FUNDING.CARD,\n        style: {\n          color: 'black',\n        },\n        ...config,\n      });\n      if (cardButton.isEligible()) {\n        cardButton.render(this.cardContainer);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div part={`base ${this.busy || (!this.loaded && 'base--busy')}`} class={{ 'paypal-buttons': true, 'paypal-buttons--busy': this.busy || !this.loaded }}>\n        {(!this.loaded || this.busy) && <sc-skeleton style={{ 'height': '55px', '--border-radius': '4px', 'cursor': 'wait' }}></sc-skeleton>}\n        <div class=\"sc-paypal-button-container\" hidden={!this.loaded || this.busy}>\n          <div part=\"paypal-card-button\" hidden={!this.buttons.includes('card')} class=\"sc-paypal-card-button\" ref={el => (this.cardContainer = el as HTMLDivElement)}></div>\n          <div part=\"paypal-button\" hidden={!this.buttons.includes('paypal')} class=\"sc-paypal-button\" ref={el => (this.paypalContainer = el as HTMLDivElement)}></div>\n        </div>\n      </div>\n    );\n  }\n}\n",":host {\n  display: block;\n  --sc-secure-notice-icon-color: var(--sc-color-gray-300);\n  --sc-secure-notice-font-size: var(--sc-font-size-small);\n  --sc-secure-notice-color: var(--sc-color-gray-500);\n}\n\n.notice {\n  color: var(--sc-secure-notice-color);\n  font-size: var(--sc-secure-notice-font-size);\n  display: flex;\n  align-items: center;\n  gap: 5px;\n\n  &__text {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n  }\n}\n\n.notice__icon {\n  color: var(--sc-secure-notice-icon-color);\n  margin-right: 5px;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'sc-secure-notice',\n  styleUrl: 'sc-secure-notice.scss',\n  shadow: true,\n})\nexport class ScSecureNotice {\n  render() {\n    return (\n      <div class=\"notice\" part=\"base\">\n        <svg class=\"notice__icon\" part=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 512 512\" fill=\"currentColor\">\n          <path d=\"M368,192H352V112a96,96,0,1,0-192,0v80H144a64.07,64.07,0,0,0-64,64V432a64.07,64.07,0,0,0,64,64H368a64.07,64.07,0,0,0,64-64V256A64.07,64.07,0,0,0,368,192Zm-48,0H192V112a64,64,0,1,1,128,0Z\"></path>\n        </svg>\n        <span class=\"notice__text\" part=\"text\">\n          <slot name=\"prefix\"></slot>\n          <slot />\n          <slot name=\"suffix\"></slot>\n        </span>\n      </div>\n    );\n  }\n}\n"],"mappings":"gcAAA,MAAMA,EAAmB,wQACzB,MAAAC,EAAeD,E,i9CC4HmDE,GAAAC,KAAAC,GAAE,+D,qdAcAF,GAAAC,KAAAC,GAAE,qF,8FAKJF,GAAAC,KAAAC,GAAE,qF,smBAyCCF,GAAAC,KAAAC,GAAE,qE,4uCCzLvE,MAAMC,EAAoB,ieAC1B,MAAAC,EAAeD,E,MCMFE,EAAc,M,yBACzB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,SAASC,KAAK,QACvBH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eAAeC,KAAK,OAAOC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,cAAcC,KAAK,gBACzHR,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,+LAEVT,EAAA,QAAAC,IAAA,2CAAMC,MAAM,eAAeC,KAAK,QAC9BH,EAAA,QAAAC,IAAA,2CAAMS,KAAK,WACXV,EAAA,QAAAC,IAAA,6CACAD,EAAA,QAAAC,IAAA,2CAAMS,KAAK,Y","ignoreList":[]}