@internetarchive/elements 1.1.6 → 1.1.7-webdev-9054.0

package/dist/src/elements/ia-donation-form/flow-handlers/donation-flow-modal-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donation-flow-modal-manager.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/flow-handlers/donation-flow-modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { msg } from '@lit/localize';\nimport {\n  ModalConfig,\n  type ModalManagerInterface,\n} from '@internetarchive/modal-manager';\n\nimport type { DonationEventLoggerInterface } from '../analytics';\nimport type { BraintreeManagerInterface } from '../braintree/braintree-manager-interface';\nimport type { DonationPaymentInfo } from '../models/donation-payment-info';\nimport {\n  type DonationResponse,\n  type ErrorResponse,\n  type SuccessResponse,\n} from '../models/donation-response';\nimport { DonationType } from '../models/donation-type';\nimport type { BillingInfo, CustomerInfo } from '../models/donor-contact-info';\nimport type { PaymentProvider } from '../models/payment-provider';\nimport { UpsellModalCTAMode } from '../modals/ia-donation-upsell-modal-content';\nimport '../modals/ia-donation-confirm-modal';\nimport '../modals/ia-donation-error-modal-content';\nimport '../modals/ia-donation-upsell-modal-content';\n\nconst ModalHeaderColor = {\n  Blue: '#497fbf',\n  Green: '#55A183',\n  Red: '#691916',\n} as const;\n\n/**\n * The high-level modal flow. Each payment provider gets the donor to a nonce\n * differently (PayPal button, Apple Pay sheet, the Venmo app), but from there\n * the modals are the same: processing, upsell, thank you, error. The flow\n * handlers call this to take the donor through them.\n */\nexport interface DonationFlowModalManagerInterface {\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n    confirmDonationCB: () => void;\n    cancelDonationCB: () => void;\n  }): Promise<void>;\n\n  closeModal(): void;\n\n  showProcessingModal(): void;\n\n  showThankYouModal(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void;\n\n  showErrorModal(options: {\n    message: string;\n    userClosedModalCallback?: () => void;\n  }): void;\n\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    ctaMode?: UpsellModalCTAMode;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n  }): Promise<void>;\n\n  /**\n   * The main flow, once the provider has handed back a nonce: show\n   * processing, submit, then the upsell or thank you or error.\n   */\n  startDonationSubmissionFlow(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string;\n    binName?: string;\n  }): Promise<DonationResponse | undefined>;\n\n  /**\n   * What happens after a successful donation depends on its type: a one-time\n   * donation gets the monthly upsell, a monthly one goes straight to thanks.\n   */\n  handleSuccessfulDonationResponse(\n    donationInfo: DonationPaymentInfo,\n    response: SuccessResponse,\n  ): void;\n}\n\nexport class DonationFlowModalManager\n  implements DonationFlowModalManagerInterface\n{\n  private braintreeManager: BraintreeManagerInterface;\n\n  private modalManager: ModalManagerInterface;\n\n  private analytics: DonationEventLoggerInterface;\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    modalManager: ModalManagerInterface;\n    analytics: DonationEventLoggerInterface;\n  }) {\n    this.modalManager = options.modalManager;\n    this.braintreeManager = options.braintreeManager;\n    this.analytics = options.analytics;\n  }\n\n  closeModal(): void {\n    this.modalManager.closeModal();\n  }\n\n  showProcessingModal(): void {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Blue,\n      showProcessingIndicator: true,\n      closeOnBackdropClick: false,\n      showCloseButton: false,\n      processingImageMode: 'processing',\n      title: html`${msg('Processing...')}`,\n    });\n    this.modalManager.showModal({ config: modalConfig });\n  }\n\n  showThankYouModal(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void {\n    const modalConfig = new ModalConfig({\n      showProcessingIndicator: true,\n      processingImageMode: 'complete',\n      headerColor: ModalHeaderColor.Green,\n      title: html`${msg('Thank You!')}`,\n    });\n    this.modalManager.showModal({ config: modalConfig });\n\n    const selectedPayment = options.successResponse.paymentProvider.replace(\n      /\\s+/g,\n      '',\n    );\n    let action = `Donated-${selectedPayment}`;\n    if (options.upsellSuccessResponse) {\n      action += `-upsell`;\n    }\n    const label = options.successResponse.donationType;\n    this.analytics.logDonationFlowEvent(action, label);\n\n    this.braintreeManager.donationSuccessful(options);\n  }\n\n  showErrorModal(options: {\n    message: string;\n    userClosedModalCallback?: () => void;\n  }): void {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Red,\n      title: html`${msg('Processing error')}`,\n      headline: html`${msg(\"There's been a problem completing your donation.\")}`,\n      message: html`${options.message}`,\n    });\n\n    this.modalManager.showModal({\n      config: modalConfig,\n      userClosedModalCallback: options.userClosedModalCallback,\n      customModalContent: html`\n        <ia-donation-error-modal-content></ia-donation-error-modal-content>\n      `,\n    });\n  }\n\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n    confirmDonationCB: () => void;\n    cancelDonationCB: () => void;\n  }): Promise<void> {\n    const modalTitle =\n      options.donationType === DonationType.Upsell\n        ? msg('Confirm monthly donation')\n        : msg('Complete donation');\n\n    const modalConfig = new ModalConfig({\n      closeOnBackdropClick: false,\n      headerColor: ModalHeaderColor.Green,\n      title: html`${modalTitle}`,\n      message: html`\n        <ia-donation-confirm-modal\n          .amount=${options.amount}\n          .currencyType=${options.currencyType}\n          .donationType=${options.donationType}\n          .confirmDonation=${options.confirmDonationCB}\n          .cancelDonation=${options.cancelDonationCB}\n        ></ia-donation-confirm-modal>\n      `,\n    });\n    return this.modalManager.showModal({\n      config: modalConfig,\n      userClosedModalCallback: options.cancelDonationCB,\n    });\n  }\n\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n    ctaMode?: UpsellModalCTAMode;\n  }): Promise<void> {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Green,\n      title: html`${msg('Donation received')}`,\n      processingImageMode: 'complete',\n      showProcessingIndicator: true,\n    });\n\n    const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(\n      options.oneTimeAmount,\n    );\n    options.amountChanged?.(upsellAmount);\n\n    const modalContent = html`\n      <ia-donation-upsell-modal-content\n        .amount=${upsellAmount}\n        .yesButtonMode=${options.ctaMode ?? UpsellModalCTAMode.YesButton}\n        @yesSelected=${(e: CustomEvent): void =>\n          options.yesSelected?.(e.detail.amount)}\n        @noThanksSelected=${options.noSelected}\n        @amountChanged=${(e: CustomEvent): void =>\n          options.amountChanged?.(e.detail.amount)}\n      >\n        <slot name=\"paypal-upsell-button\"></slot>\n      </ia-donation-upsell-modal-content>\n    `;\n    return this.modalManager.showModal({\n      config: modalConfig,\n      customModalContent: modalContent,\n      userClosedModalCallback: options.userClosedModalCallback,\n    });\n  }\n\n  async startDonationSubmissionFlow(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string;\n    binName?: string;\n  }): Promise<DonationResponse | undefined> {\n    this.showProcessingModal();\n\n    try {\n      const response = await this.braintreeManager.submitDonation(options);\n\n      if (response.success) {\n        this.handleSuccessfulDonationResponse(\n          options.donationInfo,\n          response.value as SuccessResponse,\n        );\n      } else {\n        const error = response.value as ErrorResponse;\n        this.showErrorModal({ message: error.message });\n      }\n      return response;\n    } catch (error) {\n      this.showErrorModal({ message: `${error}` });\n      console.error('error getting a response', error);\n      return undefined;\n    }\n  }\n\n  private async upsellModalYesSelected(\n    oneTimeDonationResponse: SuccessResponse,\n    amount: number,\n  ): Promise<DonationResponse | undefined> {\n    this.showProcessingModal();\n\n    try {\n      const response = await this.braintreeManager.submitUpsellDonation({\n        oneTimeDonationResponse,\n        amount,\n      });\n\n      if (response.success) {\n        this.showThankYouModal({\n          successResponse: oneTimeDonationResponse,\n          upsellSuccessResponse: response.value as SuccessResponse,\n        });\n      } else {\n        const error = response.value as ErrorResponse;\n        this.showErrorModal({ message: error.message });\n      }\n\n      return response;\n    } catch (error) {\n      this.showErrorModal({ message: `${error}` });\n      console.error('error getting a response', error);\n      return undefined;\n    }\n  }\n\n  /** The monthly amount the upsell suggests, stepped up with the one-time gift. */\n  static getDefaultUpsellAmount(oneTimeAmount: number): number {\n    if (oneTimeAmount <= 10) return 8;\n    if (oneTimeAmount <= 25) return 10;\n    if (oneTimeAmount <= 100) return 25;\n    return 50;\n  }\n\n  handleSuccessfulDonationResponse(\n    donationInfo: DonationPaymentInfo,\n    response: SuccessResponse,\n  ): void {\n    switch (donationInfo.donationType) {\n      case DonationType.OneTime:\n        this.showUpsellModal({\n          oneTimeAmount: response.amount,\n          yesSelected: (amount: number) => {\n            this.upsellModalYesSelected(response, amount);\n          },\n          noSelected: () => {\n            this.showThankYouModal({ successResponse: response });\n          },\n          userClosedModalCallback: () => {\n            this.showThankYouModal({ successResponse: response });\n          },\n        });\n        break;\n      case DonationType.Monthly:\n        this.showThankYouModal({ successResponse: response });\n        break;\n      // The upsell itself is completed in `upsellModalYesSelected`\n      case DonationType.Upsell:\n        break;\n    }\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/apple-pay-flow-handler.d.ts

@@ -0,0 +1,24 @@
+import type { BraintreeManagerInterface } from '../../braintree/braintree-manager-interface.js';
+import type { ApplePaySessionDataSourceDelegate } from '../../braintree/payment-providers/apple-pay/apple-pay-session-datasource-interface.js';
+import type { DonationPaymentInfo } from '../../models/donation-payment-info.js';
+import type { DonationResponse } from '../../models/donation-response.js';
+import type { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager.js';
+export interface ApplePayFlowHandlerInterface {
+    paymentInitiated(donationInfo: DonationPaymentInfo, e: Event): Promise<void>;
+}
+/** The Apple Pay flow: the sheet does the collecting, this handles what comes back. */
+export declare class ApplePayFlowHandler implements ApplePayFlowHandlerInterface, ApplePaySessionDataSourceDelegate {
+    private donationFlowModalManager;
+    private braintreeManager;
+    constructor(options: {
+        braintreeManager: BraintreeManagerInterface;
+        donationFlowModalManager: DonationFlowModalManagerInterface;
+    });
+    private applePayDataSource?;
+    paymentInitiated(donationInfo: DonationPaymentInfo, e: Event): Promise<void>;
+    private modalYesSelected;
+    paymentComplete(response: DonationResponse): void;
+    paymentFailed(): void;
+    paymentCancelled(): void;
+}
+//# sourceMappingURL=apple-pay-flow-handler.d.ts.map

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/apple-pay-flow-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apple-pay-flow-handler.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/ia-donation-form/flow-handlers/handlers/apple-pay-flow-handler.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAC7F,OAAO,KAAK,EACV,iCAAiC,EAElC,MAAM,oFAAoF,CAAC;AAC5F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,gCAAgC,CAAC;AAExF,MAAM,WAAW,4BAA4B;IAC3C,gBAAgB,CAAC,YAAY,EAAE,mBAAmB,EAAE,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9E;AAED,uFAAuF;AACvF,qBAAa,mBACX,YAAW,4BAA4B,EAAE,iCAAiC;IAE1E,OAAO,CAAC,wBAAwB,CAAoC;IAEpE,OAAO,CAAC,gBAAgB,CAA4B;gBAExC,OAAO,EAAE;QACnB,gBAAgB,EAAE,yBAAyB,CAAC;QAC5C,wBAAwB,EAAE,iCAAiC,CAAC;KAC7D;IAKD,OAAO,CAAC,kBAAkB,CAAC,CAAqC;IAE1D,gBAAgB,CACpB,YAAY,EAAE,mBAAmB,EACjC,CAAC,EAAE,KAAK,GACP,OAAO,CAAC,IAAI,CAAC;YAcF,gBAAgB;IAsB9B,eAAe,CAAC,QAAQ,EAAE,gBAAgB,GAAG,IAAI;IA8BjD,aAAa,IAAI,IAAI;IAMrB,gBAAgB,IAAI,IAAI;CAGzB"}

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/apple-pay-flow-handler.js

@@ -0,0 +1,70 @@
+import { msg } from '@lit/localize';
+import { DonationType } from '../../models/donation-type.js';
+/** The Apple Pay flow: the sheet does the collecting, this handles what comes back. */
+export class ApplePayFlowHandler {
+    constructor(options) {
+        this.braintreeManager = options.braintreeManager;
+        this.donationFlowModalManager = options.donationFlowModalManager;
+    }
+    async paymentInitiated(donationInfo, e) {
+        this.donationFlowModalManager.showProcessingModal();
+        const handler = await this.braintreeManager.paymentProviders.applePayHandler.get();
+        this.applePayDataSource = await handler.createPaymentRequest(e, donationInfo);
+        if (this.applePayDataSource) {
+            this.applePayDataSource.delegate = this;
+        }
+    }
+    async modalYesSelected(oneTimeDonationResponse, amount) {
+        this.donationFlowModalManager.showProcessingModal();
+        const response = await this.braintreeManager.submitUpsellDonation({
+            oneTimeDonationResponse,
+            amount,
+        });
+        if (response.success) {
+            this.donationFlowModalManager.showThankYouModal({
+                successResponse: oneTimeDonationResponse,
+                upsellSuccessResponse: response.value,
+            });
+        }
+        else {
+            const error = response.value;
+            this.donationFlowModalManager.showErrorModal({ message: error.message });
+        }
+    }
+    paymentComplete(response) {
+        if (response.success) {
+            const successResponse = response.value;
+            if (this.applePayDataSource?.donationInfo.donationType ===
+                DonationType.OneTime) {
+                this.donationFlowModalManager.showUpsellModal({
+                    oneTimeAmount: successResponse.amount,
+                    yesSelected: this.modalYesSelected.bind(this, successResponse),
+                    noSelected: () => this.donationFlowModalManager.showThankYouModal({
+                        successResponse,
+                    }),
+                    userClosedModalCallback: () => this.donationFlowModalManager.showThankYouModal({
+                        successResponse,
+                    }),
+                });
+            }
+            else {
+                this.donationFlowModalManager.showThankYouModal({ successResponse });
+            }
+        }
+        else {
+            const errorResponse = response.value;
+            this.donationFlowModalManager.showErrorModal({
+                message: errorResponse.message,
+            });
+        }
+    }
+    paymentFailed() {
+        this.donationFlowModalManager.showErrorModal({
+            message: msg('Payment failed'),
+        });
+    }
+    paymentCancelled() {
+        this.donationFlowModalManager.closeModal();
+    }
+}
+//# sourceMappingURL=apple-pay-flow-handler.js.map

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/apple-pay-flow-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apple-pay-flow-handler.js","sourceRoot":"","sources":["../../../../../../src/elements/ia-donation-form/flow-handlers/handlers/apple-pay-flow-handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAapC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAO1D,uFAAuF;AACvF,MAAM,OAAO,mBAAmB;IAO9B,YAAY,OAGX;QACC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;QACjD,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IACnE,CAAC;IAID,KAAK,CAAC,gBAAgB,CACpB,YAAiC,EACjC,CAAQ;QAER,IAAI,CAAC,wBAAwB,CAAC,mBAAmB,EAAE,CAAC;QACpD,MAAM,OAAO,GACX,MAAM,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC;QACrE,IAAI,CAAC,kBAAkB,GAAG,MAAM,OAAO,CAAC,oBAAoB,CAC1D,CAAC,EACD,YAAY,CACb,CAAC;QAEF,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,IAAI,CAAC,kBAAkB,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC1C,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,gBAAgB,CAC5B,uBAAwC,EACxC,MAAc;QAEd,IAAI,CAAC,wBAAwB,CAAC,mBAAmB,EAAE,CAAC;QAEpD,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;YAChE,uBAAuB;YACvB,MAAM;SACP,CAAC,CAAC;QAEH,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAAC;gBAC9C,eAAe,EAAE,uBAAuB;gBACxC,qBAAqB,EAAE,QAAQ,CAAC,KAAwB;aACzD,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAsB,CAAC;YAC9C,IAAI,CAAC,wBAAwB,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;IAED,eAAe,CAAC,QAA0B;QACxC,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,MAAM,eAAe,GAAG,QAAQ,CAAC,KAAwB,CAAC;YAC1D,IACE,IAAI,CAAC,kBAAkB,EAAE,YAAY,CAAC,YAAY;gBAClD,YAAY,CAAC,OAAO,EACpB,CAAC;gBACD,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC;oBAC5C,aAAa,EAAE,eAAe,CAAC,MAAM;oBACrC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC;oBAC9D,UAAU,EAAE,GAAG,EAAE,CACf,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAAC;wBAC9C,eAAe;qBAChB,CAAC;oBACJ,uBAAuB,EAAE,GAAG,EAAE,CAC5B,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAAC;wBAC9C,eAAe;qBAChB,CAAC;iBACL,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,CAAC,EAAE,eAAe,EAAE,CAAC,CAAC;YACvE,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAsB,CAAC;YACtD,IAAI,CAAC,wBAAwB,CAAC,cAAc,CAAC;gBAC3C,OAAO,EAAE,aAAa,CAAC,OAAO;aAC/B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,aAAa;QACX,IAAI,CAAC,wBAAwB,CAAC,cAAc,CAAC;YAC3C,OAAO,EAAE,GAAG,CAAC,gBAAgB,CAAC;SAC/B,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,wBAAwB,CAAC,UAAU,EAAE,CAAC;IAC7C,CAAC;CACF","sourcesContent":["import { msg } from '@lit/localize';\n\nimport type { BraintreeManagerInterface } from '../../braintree/braintree-manager-interface';\nimport type {\n  ApplePaySessionDataSourceDelegate,\n  ApplePaySessionDataSourceInterface,\n} from '../../braintree/payment-providers/apple-pay/apple-pay-session-datasource-interface';\nimport type { DonationPaymentInfo } from '../../models/donation-payment-info';\nimport type {\n  DonationResponse,\n  ErrorResponse,\n  SuccessResponse,\n} from '../../models/donation-response';\nimport { DonationType } from '../../models/donation-type';\nimport type { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';\n\nexport interface ApplePayFlowHandlerInterface {\n  paymentInitiated(donationInfo: DonationPaymentInfo, e: Event): Promise<void>;\n}\n\n/** The Apple Pay flow: the sheet does the collecting, this handles what comes back. */\nexport class ApplePayFlowHandler\n  implements ApplePayFlowHandlerInterface, ApplePaySessionDataSourceDelegate\n{\n  private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n  private braintreeManager: BraintreeManagerInterface;\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    donationFlowModalManager: DonationFlowModalManagerInterface;\n  }) {\n    this.braintreeManager = options.braintreeManager;\n    this.donationFlowModalManager = options.donationFlowModalManager;\n  }\n\n  private applePayDataSource?: ApplePaySessionDataSourceInterface;\n\n  async paymentInitiated(\n    donationInfo: DonationPaymentInfo,\n    e: Event,\n  ): Promise<void> {\n    this.donationFlowModalManager.showProcessingModal();\n    const handler =\n      await this.braintreeManager.paymentProviders.applePayHandler.get();\n    this.applePayDataSource = await handler.createPaymentRequest(\n      e,\n      donationInfo,\n    );\n\n    if (this.applePayDataSource) {\n      this.applePayDataSource.delegate = this;\n    }\n  }\n\n  private async modalYesSelected(\n    oneTimeDonationResponse: SuccessResponse,\n    amount: number,\n  ): Promise<void> {\n    this.donationFlowModalManager.showProcessingModal();\n\n    const response = await this.braintreeManager.submitUpsellDonation({\n      oneTimeDonationResponse,\n      amount,\n    });\n\n    if (response.success) {\n      this.donationFlowModalManager.showThankYouModal({\n        successResponse: oneTimeDonationResponse,\n        upsellSuccessResponse: response.value as SuccessResponse,\n      });\n    } else {\n      const error = response.value as ErrorResponse;\n      this.donationFlowModalManager.showErrorModal({ message: error.message });\n    }\n  }\n\n  paymentComplete(response: DonationResponse): void {\n    if (response.success) {\n      const successResponse = response.value as SuccessResponse;\n      if (\n        this.applePayDataSource?.donationInfo.donationType ===\n        DonationType.OneTime\n      ) {\n        this.donationFlowModalManager.showUpsellModal({\n          oneTimeAmount: successResponse.amount,\n          yesSelected: this.modalYesSelected.bind(this, successResponse),\n          noSelected: () =>\n            this.donationFlowModalManager.showThankYouModal({\n              successResponse,\n            }),\n          userClosedModalCallback: () =>\n            this.donationFlowModalManager.showThankYouModal({\n              successResponse,\n            }),\n        });\n      } else {\n        this.donationFlowModalManager.showThankYouModal({ successResponse });\n      }\n    } else {\n      const errorResponse = response.value as ErrorResponse;\n      this.donationFlowModalManager.showErrorModal({\n        message: errorResponse.message,\n      });\n    }\n  }\n\n  paymentFailed(): void {\n    this.donationFlowModalManager.showErrorModal({\n      message: msg('Payment failed'),\n    });\n  }\n\n  paymentCancelled(): void {\n    this.donationFlowModalManager.closeModal();\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/credit-card-flow-handler.d.ts

@@ -0,0 +1,44 @@
+import type * as braintree from 'braintree-web';
+import { type Unsubscribe } from 'nanoevents';
+import type { BraintreeManagerInterface } from '../../braintree/braintree-manager-interface.js';
+import type { DonationPaymentInfo } from '../../models/donation-payment-info.js';
+import type { DonorContactInfo } from '../../models/donor-contact-info.js';
+import type { RecaptchaManagerInterface } from '../../recaptcha-manager.js';
+import type { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager.js';
+export interface CreditCardFlowHandlerInterface {
+    /** Bind the hosted field events */
+    startup(): Promise<void>;
+    /**
+     * Tokenize the hosted fields. This also validates them, so it runs before
+     * the payment starts and shows any field errors.
+     */
+    tokenizeFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined>;
+    /** Start the payment. Call `tokenizeFields()` first to validate the hosted fields. */
+    paymentInitiated(hostedFieldsResponse: braintree.HostedFieldsTokenizePayload, donationInfo: DonationPaymentInfo, donorContactInfo: DonorContactInfo): Promise<void>;
+    on<E extends keyof CreditCardFlowHandlerEvents>(event: E, callback: CreditCardFlowHandlerEvents[E]): Unsubscribe;
+}
+export interface CreditCardFlowHandlerEvents {
+    validityChanged: (isValid: boolean) => void;
+}
+export declare class CreditCardFlowHandler implements CreditCardFlowHandlerInterface {
+    private donationFlowModalManager;
+    private braintreeManager;
+    private recaptchaManager;
+    private emitter;
+    constructor(options: {
+        braintreeManager: BraintreeManagerInterface;
+        donationFlowModalManager: DonationFlowModalManagerInterface;
+        recaptchaManager: RecaptchaManagerInterface;
+    });
+    on<E extends keyof CreditCardFlowHandlerEvents>(event: E, callback: CreditCardFlowHandlerEvents[E]): Unsubscribe;
+    private started;
+    startup(): Promise<void>;
+    tokenizeFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined>;
+    paymentInitiated(hostedFieldsResponse: braintree.HostedFieldsTokenizePayload, donationInfo: DonationPaymentInfo, donorContactInfo: DonorContactInfo): Promise<void>;
+    /**
+     * Marks the fields Braintree rejected. The codes are documented at
+     * https://braintree.github.io/braintree-web/current/HostedFields.html#tokenize
+     */
+    private handleHostedFieldTokenizationError;
+}
+//# sourceMappingURL=credit-card-flow-handler.d.ts.map

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/credit-card-flow-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"credit-card-flow-handler.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/ia-donation-form/flow-handlers/handlers/credit-card-flow-handler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,SAAS,MAAM,eAAe,CAAC;AAChD,OAAO,EAAkC,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAG9E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAG7F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAExE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,gCAAgC,CAAC;AAExF,MAAM,WAAW,8BAA8B;IAC7C,mCAAmC;IACnC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzB;;;OAGG;IACH,cAAc,IAAI,OAAO,CAAC,SAAS,CAAC,2BAA2B,GAAG,SAAS,CAAC,CAAC;IAE7E,sFAAsF;IACtF,gBAAgB,CACd,oBAAoB,EAAE,SAAS,CAAC,2BAA2B,EAC3D,YAAY,EAAE,mBAAmB,EACjC,gBAAgB,EAAE,gBAAgB,GACjC,OAAO,CAAC,IAAI,CAAC,CAAC;IAEjB,EAAE,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC5C,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,2BAA2B,CAAC,CAAC,CAAC,GACvC,WAAW,CAAC;CAChB;AAED,MAAM,WAAW,2BAA2B;IAC1C,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED,qBAAa,qBAAsB,YAAW,8BAA8B;IAC1E,OAAO,CAAC,wBAAwB,CAAoC;IAEpE,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,OAAO,CAAuC;gBAE1C,OAAO,EAAE;QACnB,gBAAgB,EAAE,yBAAyB,CAAC;QAC5C,wBAAwB,EAAE,iCAAiC,CAAC;QAC5D,gBAAgB,EAAE,yBAAyB,CAAC;KAC7C;IAOD,EAAE,CAAC,CAAC,SAAS,MAAM,2BAA2B,EAC5C,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,2BAA2B,CAAC,CAAC,CAAC,GACvC,WAAW;IAId,OAAO,CAAC,OAAO,CAAS;IAElB,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IA+CxB,cAAc,IAAI,OAAO,CAC7B,SAAS,CAAC,2BAA2B,GAAG,SAAS,CAClD;IAcK,gBAAgB,CACpB,oBAAoB,EAAE,SAAS,CAAC,2BAA2B,EAC3D,YAAY,EAAE,mBAAmB,EACjC,gBAAgB,EAAE,gBAAgB,GACjC,OAAO,CAAC,IAAI,CAAC;IAuBhB;;;OAGG;YACW,kCAAkC;CAgCjD"}

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/credit-card-flow-handler.js

@@ -0,0 +1,116 @@
+import { createNanoEvents } from 'nanoevents';
+import { msg } from '@lit/localize';
+import { HostedFieldName } from '../../braintree/payment-providers/credit-card/hosted-field-container.js';
+import { PaymentProvider } from '../../models/payment-provider.js';
+export class CreditCardFlowHandler {
+    constructor(options) {
+        this.started = false;
+        this.braintreeManager = options.braintreeManager;
+        this.donationFlowModalManager = options.donationFlowModalManager;
+        this.recaptchaManager = options.recaptchaManager;
+        this.emitter = createNanoEvents();
+    }
+    on(event, callback) {
+        return this.emitter.on(event, callback);
+    }
+    async startup() {
+        if (this.started) {
+            return;
+        }
+        this.started = true;
+        const handler = await this.braintreeManager.paymentProviders.creditCardHandler.get();
+        const instance = await handler.instance.get();
+        // The hosted fields only report focus and blur through these callbacks,
+        // so the error state of the wrapping badged inputs is toggled here, apart
+        // from the HostedFieldContainer that handles it everywhere else.
+        //
+        // A field is only marked errored on blur when it has content that's
+        // invalid, not when it's merely empty. Otherwise clicking a nearby button
+        // (like "Change payment method") blurs an untouched field and flashes it
+        // red. Empty fields are still caught when the donor tries to submit, in
+        // handleHostedFieldTokenizationError.
+        instance?.on('focus', (event) => {
+            const { emittedBy, fields } = event;
+            const { container } = fields[emittedBy];
+            container.parentElement.error = false;
+            handler.hideErrorMessage();
+        });
+        instance?.on('blur', (event) => {
+            const { emittedBy, fields } = event;
+            const { container, isEmpty, isValid } = fields[emittedBy];
+            if (!isEmpty && !isValid) {
+                container.parentElement.error = true;
+            }
+        });
+        instance?.on('validityChange', (event) => {
+            const { fields } = event;
+            const isValid = fields.cvv.isValid &&
+                fields.expirationDate.isValid &&
+                fields.number.isValid;
+            this.emitter.emit('validityChanged', isValid);
+        });
+    }
+    async tokenizeFields() {
+        const handler = await this.braintreeManager.paymentProviders.creditCardHandler.get();
+        try {
+            return await handler.tokenizeHostedFields();
+        }
+        catch (error) {
+            this.handleHostedFieldTokenizationError(error);
+            return undefined;
+        }
+    }
+    async paymentInitiated(hostedFieldsResponse, donationInfo, donorContactInfo) {
+        let recaptchaToken;
+        try {
+            recaptchaToken = await this.recaptchaManager.execute();
+        }
+        catch {
+            this.donationFlowModalManager.showErrorModal({
+                message: msg('Recaptcha failure'),
+            });
+            return;
+        }
+        this.donationFlowModalManager.startDonationSubmissionFlow({
+            nonce: hostedFieldsResponse.nonce,
+            paymentProvider: PaymentProvider.CreditCard,
+            recaptchaToken,
+            bin: hostedFieldsResponse.details.bin,
+            donationInfo,
+            customerInfo: donorContactInfo.customer,
+            billingInfo: donorContactInfo.billing,
+        });
+    }
+    /**
+     * Marks the fields Braintree rejected. The codes are documented at
+     * https://braintree.github.io/braintree-web/current/HostedFields.html#tokenize
+     */
+    async handleHostedFieldTokenizationError(error) {
+        const handler = await this.braintreeManager.paymentProviders.creditCardHandler.get();
+        handler.showErrorMessage();
+        switch (error.code) {
+            case 'HOSTED_FIELDS_FIELDS_EMPTY':
+                handler.markFieldErrors([
+                    HostedFieldName.Number,
+                    HostedFieldName.CVV,
+                    HostedFieldName.ExpirationDate,
+                ]);
+                break;
+            case 'HOSTED_FIELDS_FIELDS_INVALID':
+                Object.keys(error.details.invalidFields).forEach((key) => {
+                    handler.markFieldErrors([key]);
+                });
+                break;
+            case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':
+                handler.markFieldErrors([HostedFieldName.CVV]);
+                break;
+            // HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE,
+            // HOSTED_FIELDS_FAILED_TOKENIZATION,
+            // HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR and anything else: the
+            // general error message is enough, no field to point at.
+            default:
+                break;
+        }
+    }
+}
+//# sourceMappingURL=credit-card-flow-handler.js.map

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/credit-card-flow-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"credit-card-flow-handler.js","sourceRoot":"","sources":["../../../../../../src/elements/ia-donation-form/flow-handlers/handlers/credit-card-flow-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import type * as braintree from 'braintree-web';\nimport { createNanoEvents, type Emitter, type Unsubscribe } from 'nanoevents';\nimport { msg } from '@lit/localize';\n\nimport type { BraintreeManagerInterface } from '../../braintree/braintree-manager-interface';\nimport { HostedFieldName } from '../../braintree/payment-providers/credit-card/hosted-field-container';\nimport type { IADonationBadgedInput } from '../../form-elements/ia-donation-badged-input';\nimport type { DonationPaymentInfo } from '../../models/donation-payment-info';\nimport type { DonorContactInfo } from '../../models/donor-contact-info';\nimport { PaymentProvider } from '../../models/payment-provider';\nimport type { RecaptchaManagerInterface } from '../../recaptcha-manager';\nimport type { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';\n\nexport interface CreditCardFlowHandlerInterface {\n  /** Bind the hosted field events */\n  startup(): Promise<void>;\n\n  /**\n   * Tokenize the hosted fields. This also validates them, so it runs before\n   * the payment starts and shows any field errors.\n   */\n  tokenizeFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined>;\n\n  /** Start the payment. Call `tokenizeFields()` first to validate the hosted fields. */\n  paymentInitiated(\n    hostedFieldsResponse: braintree.HostedFieldsTokenizePayload,\n    donationInfo: DonationPaymentInfo,\n    donorContactInfo: DonorContactInfo,\n  ): Promise<void>;\n\n  on<E extends keyof CreditCardFlowHandlerEvents>(\n    event: E,\n    callback: CreditCardFlowHandlerEvents[E],\n  ): Unsubscribe;\n}\n\nexport interface CreditCardFlowHandlerEvents {\n  validityChanged: (isValid: boolean) => void;\n}\n\nexport class CreditCardFlowHandler implements CreditCardFlowHandlerInterface {\n  private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n  private braintreeManager: BraintreeManagerInterface;\n\n  private recaptchaManager: RecaptchaManagerInterface;\n\n  private emitter: Emitter<CreditCardFlowHandlerEvents>;\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    donationFlowModalManager: DonationFlowModalManagerInterface;\n    recaptchaManager: RecaptchaManagerInterface;\n  }) {\n    this.braintreeManager = options.braintreeManager;\n    this.donationFlowModalManager = options.donationFlowModalManager;\n    this.recaptchaManager = options.recaptchaManager;\n    this.emitter = createNanoEvents<CreditCardFlowHandlerEvents>();\n  }\n\n  on<E extends keyof CreditCardFlowHandlerEvents>(\n    event: E,\n    callback: CreditCardFlowHandlerEvents[E],\n  ): Unsubscribe {\n    return this.emitter.on(event, callback);\n  }\n\n  private started = false;\n\n  async startup(): Promise<void> {\n    if (this.started) {\n      return;\n    }\n    this.started = true;\n\n    const handler =\n      await this.braintreeManager.paymentProviders.creditCardHandler.get();\n    const instance = await handler.instance.get();\n\n    // The hosted fields only report focus and blur through these callbacks,\n    // so the error state of the wrapping badged inputs is toggled here, apart\n    // from the HostedFieldContainer that handles it everywhere else.\n    //\n    // A field is only marked errored on blur when it has content that's\n    // invalid, not when it's merely empty. Otherwise clicking a nearby button\n    // (like \"Change payment method\") blurs an untouched field and flashes it\n    // red. Empty fields are still caught when the donor tries to submit, in\n    // handleHostedFieldTokenizationError.\n    instance?.on('focus', (event: braintree.HostedFieldsEvent): void => {\n      const { emittedBy, fields } = event;\n      const { container } = fields[emittedBy];\n      (container.parentElement as IADonationBadgedInput).error = false;\n      handler.hideErrorMessage();\n    });\n\n    instance?.on('blur', (event: braintree.HostedFieldsEvent): void => {\n      const { emittedBy, fields } = event;\n      const { container, isEmpty, isValid } = fields[emittedBy];\n      if (!isEmpty && !isValid) {\n        (container.parentElement as IADonationBadgedInput).error = true;\n      }\n    });\n\n    instance?.on(\n      'validityChange',\n      (event: braintree.HostedFieldsEvent): void => {\n        const { fields } = event;\n        const isValid =\n          fields.cvv.isValid &&\n          fields.expirationDate.isValid &&\n          fields.number.isValid;\n        this.emitter.emit('validityChanged', isValid);\n      },\n    );\n  }\n\n  async tokenizeFields(): Promise<\n    braintree.HostedFieldsTokenizePayload | undefined\n  > {\n    const handler =\n      await this.braintreeManager.paymentProviders.creditCardHandler.get();\n\n    try {\n      return await handler.tokenizeHostedFields();\n    } catch (error) {\n      this.handleHostedFieldTokenizationError(\n        error as braintree.BraintreeError,\n      );\n      return undefined;\n    }\n  }\n\n  async paymentInitiated(\n    hostedFieldsResponse: braintree.HostedFieldsTokenizePayload,\n    donationInfo: DonationPaymentInfo,\n    donorContactInfo: DonorContactInfo,\n  ): Promise<void> {\n    let recaptchaToken: string | undefined;\n\n    try {\n      recaptchaToken = await this.recaptchaManager.execute();\n    } catch {\n      this.donationFlowModalManager.showErrorModal({\n        message: msg('Recaptcha failure'),\n      });\n      return;\n    }\n\n    this.donationFlowModalManager.startDonationSubmissionFlow({\n      nonce: hostedFieldsResponse.nonce,\n      paymentProvider: PaymentProvider.CreditCard,\n      recaptchaToken,\n      bin: hostedFieldsResponse.details.bin,\n      donationInfo,\n      customerInfo: donorContactInfo.customer,\n      billingInfo: donorContactInfo.billing,\n    });\n  }\n\n  /**\n   * Marks the fields Braintree rejected. The codes are documented at\n   * https://braintree.github.io/braintree-web/current/HostedFields.html#tokenize\n   */\n  private async handleHostedFieldTokenizationError(\n    error: braintree.BraintreeError,\n  ): Promise<void> {\n    const handler =\n      await this.braintreeManager.paymentProviders.creditCardHandler.get();\n\n    handler.showErrorMessage();\n\n    switch (error.code) {\n      case 'HOSTED_FIELDS_FIELDS_EMPTY':\n        handler.markFieldErrors([\n          HostedFieldName.Number,\n          HostedFieldName.CVV,\n          HostedFieldName.ExpirationDate,\n        ]);\n        break;\n      case 'HOSTED_FIELDS_FIELDS_INVALID':\n        Object.keys(error.details.invalidFields).forEach((key) => {\n          handler.markFieldErrors([key as HostedFieldName]);\n        });\n        break;\n      case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':\n        handler.markFieldErrors([HostedFieldName.CVV]);\n        break;\n      // HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE,\n      // HOSTED_FIELDS_FAILED_TOKENIZATION,\n      // HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR and anything else: the\n      // general error message is enough, no field to point at.\n      default:\n        break;\n    }\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/google-pay-flow-handler.d.ts

@@ -0,0 +1,24 @@
+import { type Unsubscribe } from 'nanoevents';
+import type { BraintreeManagerInterface } from '../../braintree/braintree-manager-interface.js';
+import type { DonationPaymentInfo } from '../../models/donation-payment-info.js';
+import type { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager.js';
+export interface GooglePayFlowHandlerInterface {
+    paymentInitiated(donationInfo: DonationPaymentInfo): Promise<void>;
+    on<E extends keyof GooglePayFlowHandlerEvents>(event: E, callback: GooglePayFlowHandlerEvents[E]): Unsubscribe;
+}
+export interface GooglePayFlowHandlerEvents {
+    paymentCancelled: () => void;
+}
+/** The Google Pay flow: the payment sheet collects everything, this submits what it returns. */
+export declare class GooglePayFlowHandler implements GooglePayFlowHandlerInterface {
+    private donationFlowModalManager;
+    private braintreeManager;
+    private emitter;
+    constructor(options: {
+        braintreeManager: BraintreeManagerInterface;
+        donationFlowModalManager: DonationFlowModalManagerInterface;
+    });
+    on<E extends keyof GooglePayFlowHandlerEvents>(event: E, callback: GooglePayFlowHandlerEvents[E]): Unsubscribe;
+    paymentInitiated(donationInfo: DonationPaymentInfo): Promise<void>;
+}
+//# sourceMappingURL=google-pay-flow-handler.d.ts.map

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/google-pay-flow-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-pay-flow-handler.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/ia-donation-form/flow-handlers/handlers/google-pay-flow-handler.ts"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAC7F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAG9E,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,gCAAgC,CAAC;AAExF,MAAM,WAAW,6BAA6B;IAC5C,gBAAgB,CAAC,YAAY,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,EAAE,CAAC,CAAC,SAAS,MAAM,0BAA0B,EAC3C,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACtC,WAAW,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B;IACzC,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,gGAAgG;AAChG,qBAAa,oBAAqB,YAAW,6BAA6B;IACxE,OAAO,CAAC,wBAAwB,CAAoC;IAEpE,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,OAAO,CACkC;gBAErC,OAAO,EAAE;QACnB,gBAAgB,EAAE,yBAAyB,CAAC;QAC5C,wBAAwB,EAAE,iCAAiC,CAAC;KAC7D;IAKD,EAAE,CAAC,CAAC,SAAS,MAAM,0BAA0B,EAC3C,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACtC,WAAW;IAIR,gBAAgB,CAAC,YAAY,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC;CAoEzE"}

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/google-pay-flow-handler.js

@@ -0,0 +1,74 @@
+import { createNanoEvents } from 'nanoevents';
+import { BillingInfo, CustomerInfo } from '../../models/donor-contact-info.js';
+import { PaymentProvider } from '../../models/payment-provider.js';
+/** The Google Pay flow: the payment sheet collects everything, this submits what it returns. */
+export class GooglePayFlowHandler {
+    constructor(options) {
+        this.emitter = createNanoEvents();
+        this.braintreeManager = options.braintreeManager;
+        this.donationFlowModalManager = options.donationFlowModalManager;
+    }
+    on(event, callback) {
+        return this.emitter.on(event, callback);
+    }
+    async paymentInitiated(donationInfo) {
+        const handler = await this.braintreeManager.paymentProviders.googlePayHandler.get();
+        const instance = await handler.instance.get();
+        const paymentDataRequest = instance.createPaymentDataRequest({
+            emailRequired: true,
+            transactionInfo: {
+                currencyCode: 'USD',
+                totalPriceStatus: 'FINAL',
+                totalPrice: `${donationInfo.total}`,
+            },
+        });
+        const cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];
+        cardPaymentMethod.parameters.billingAddressRequired = true;
+        cardPaymentMethod.parameters.billingAddressParameters = {
+            format: 'FULL',
+            phoneNumberRequired: false,
+        };
+        try {
+            const paymentData = await handler.paymentsClient.loadPaymentData(paymentDataRequest);
+            const result = await instance.parseResponse(paymentData);
+            const billingInfo = paymentData.paymentMethodData.info?.billingAddress;
+            // Google Pay gives one full name; the last word is the surname
+            const name = billingInfo?.name?.trim();
+            let firstName = name;
+            let lastName = '';
+            const lastSpace = name?.lastIndexOf(' ') ?? -1;
+            if (name && lastSpace > 0) {
+                firstName = name.substring(0, lastSpace);
+                lastName = name.substring(lastSpace + 1);
+            }
+            const customer = new CustomerInfo({
+                email: paymentData.email,
+                firstName,
+                lastName,
+            });
+            const billing = new BillingInfo({
+                streetAddress: billingInfo?.address1,
+                extendedAddress: billingInfo?.address2,
+                locality: billingInfo?.locality,
+                region: billingInfo?.administrativeArea,
+                postalCode: billingInfo?.postalCode,
+                countryCodeAlpha2: billingInfo?.countryCode,
+            });
+            this.donationFlowModalManager.startDonationSubmissionFlow({
+                nonce: result.nonce,
+                paymentProvider: PaymentProvider.GooglePay,
+                bin: result.details.bin,
+                binName: result.binData.issuingBank,
+                donationInfo,
+                customerInfo: customer,
+                billingInfo: billing,
+            });
+        }
+        catch {
+            // The sheet was dismissed, or Google couldn't complete it
+            this.emitter.emit('paymentCancelled');
+            this.donationFlowModalManager.closeModal();
+        }
+    }
+}
+//# sourceMappingURL=google-pay-flow-handler.js.map

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/google-pay-flow-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-pay-flow-handler.js","sourceRoot":"","sources":["../../../../../../src/elements/ia-donation-form/flow-handlers/handlers/google-pay-flow-handler.ts"],"names":[],"mappings":"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","sourcesContent":["import type * as braintree from 'braintree-web';\nimport { createNanoEvents, type Emitter, type Unsubscribe } from 'nanoevents';\n\nimport type { BraintreeManagerInterface } from '../../braintree/braintree-manager-interface';\nimport type { DonationPaymentInfo } from '../../models/donation-payment-info';\nimport { BillingInfo, CustomerInfo } from '../../models/donor-contact-info';\nimport { PaymentProvider } from '../../models/payment-provider';\nimport type { DonationFlowModalManagerInterface } from '../donation-flow-modal-manager';\n\nexport interface GooglePayFlowHandlerInterface {\n  paymentInitiated(donationInfo: DonationPaymentInfo): Promise<void>;\n  on<E extends keyof GooglePayFlowHandlerEvents>(\n    event: E,\n    callback: GooglePayFlowHandlerEvents[E],\n  ): Unsubscribe;\n}\n\nexport interface GooglePayFlowHandlerEvents {\n  paymentCancelled: () => void;\n}\n\n/** The Google Pay flow: the payment sheet collects everything, this submits what it returns. */\nexport class GooglePayFlowHandler implements GooglePayFlowHandlerInterface {\n  private donationFlowModalManager: DonationFlowModalManagerInterface;\n\n  private braintreeManager: BraintreeManagerInterface;\n\n  private emitter: Emitter<GooglePayFlowHandlerEvents> =\n    createNanoEvents<GooglePayFlowHandlerEvents>();\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    donationFlowModalManager: DonationFlowModalManagerInterface;\n  }) {\n    this.braintreeManager = options.braintreeManager;\n    this.donationFlowModalManager = options.donationFlowModalManager;\n  }\n\n  on<E extends keyof GooglePayFlowHandlerEvents>(\n    event: E,\n    callback: GooglePayFlowHandlerEvents[E],\n  ): Unsubscribe {\n    return this.emitter.on(event, callback);\n  }\n\n  async paymentInitiated(donationInfo: DonationPaymentInfo): Promise<void> {\n    const handler =\n      await this.braintreeManager.paymentProviders.googlePayHandler.get();\n    const instance = await handler.instance.get();\n\n    const paymentDataRequest = instance.createPaymentDataRequest({\n      emailRequired: true,\n      transactionInfo: {\n        currencyCode: 'USD',\n        totalPriceStatus: 'FINAL',\n        totalPrice: `${donationInfo.total}`,\n      },\n    });\n\n    const cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0];\n    cardPaymentMethod.parameters.billingAddressRequired = true;\n    cardPaymentMethod.parameters.billingAddressParameters = {\n      format: 'FULL',\n      phoneNumberRequired: false,\n    };\n\n    try {\n      const paymentData =\n        await handler.paymentsClient.loadPaymentData(paymentDataRequest);\n      const result: braintree.GooglePaymentTokenizePayload =\n        await instance.parseResponse(paymentData);\n\n      const billingInfo = paymentData.paymentMethodData.info?.billingAddress;\n      // Google Pay gives one full name; the last word is the surname\n      const name = billingInfo?.name?.trim();\n      let firstName: string | undefined = name;\n      let lastName: string | undefined = '';\n      const lastSpace = name?.lastIndexOf(' ') ?? -1;\n      if (name && lastSpace > 0) {\n        firstName = name.substring(0, lastSpace);\n        lastName = name.substring(lastSpace + 1);\n      }\n\n      const customer = new CustomerInfo({\n        email: paymentData.email,\n        firstName,\n        lastName,\n      });\n\n      const billing = new BillingInfo({\n        streetAddress: billingInfo?.address1,\n        extendedAddress: billingInfo?.address2,\n        locality: billingInfo?.locality,\n        region: billingInfo?.administrativeArea,\n        postalCode: billingInfo?.postalCode,\n        countryCodeAlpha2: billingInfo?.countryCode,\n      });\n\n      this.donationFlowModalManager.startDonationSubmissionFlow({\n        nonce: result.nonce,\n        paymentProvider: PaymentProvider.GooglePay,\n        bin: result.details.bin,\n        binName: result.binData.issuingBank,\n        donationInfo,\n        customerInfo: customer,\n        billingInfo: billing,\n      });\n    } catch {\n      // The sheet was dismissed, or Google couldn't complete it\n      this.emitter.emit('paymentCancelled');\n      this.donationFlowModalManager.closeModal();\n    }\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/paypal-flow-handler.d.ts

@@ -0,0 +1,47 @@
+import type * as paypal from 'paypal-checkout-components';
+import { type Unsubscribe } from 'nanoevents';
+import type { BraintreeManagerInterface } from '../../braintree/braintree-manager-interface.js';
+import type { PayPalButtonDataSourceDelegate, PayPalButtonDataSourceInterface } from '../../braintree/payment-providers/paypal/paypal-button-datasource.js';
+import { DonationPaymentInfo } from '../../models/donation-payment-info.js';
+import { type DonationFlowModalManagerInterface } from '../donation-flow-modal-manager.js';
+export interface PayPalFlowHandlerInterface {
+    updateDonationInfo(donationInfo: DonationPaymentInfo): void;
+    updateUpsellDonationInfo(donationInfo: DonationPaymentInfo): void;
+    renderPayPalButton(donationInfo: DonationPaymentInfo): Promise<void>;
+    on<E extends keyof PayPalFlowHandlerEvents>(event: E, callback: PayPalFlowHandlerEvents[E]): Unsubscribe;
+}
+export interface PayPalFlowHandlerEvents {
+    payPalPaymentStarted: (dataSource: PayPalButtonDataSourceInterface, options: object) => void;
+    payPalPaymentCancelled: (dataSource: PayPalButtonDataSourceInterface, data: object) => void;
+    payPalPaymentError: (dataSource: PayPalButtonDataSourceInterface, error: string) => void;
+    payPalPaymentConfirmed: (dataSource: PayPalButtonDataSourceInterface, data: object) => void;
+}
+/** The PayPal flow: button press, authorization, our confirmation step, submit, upsell. */
+export declare class PayPalFlowHandler implements PayPalFlowHandlerInterface, PayPalButtonDataSourceDelegate {
+    private upsellButtonDataSourceContainer?;
+    private buttonDataSource?;
+    private donationFlowModalManager;
+    private braintreeManager;
+    private emitter;
+    updateDonationInfo(donationInfo: DonationPaymentInfo): void;
+    updateUpsellDonationInfo(donationInfo: DonationPaymentInfo): void;
+    constructor(options: {
+        braintreeManager: BraintreeManagerInterface;
+        donationFlowModalManager: DonationFlowModalManagerInterface;
+    });
+    on<E extends keyof PayPalFlowHandlerEvents>(event: E, callback: PayPalFlowHandlerEvents[E]): Unsubscribe;
+    payPalPaymentStarted(dataSource: PayPalButtonDataSourceInterface, options: object): Promise<void>;
+    /**
+     * PayPal has authorized the payment. The donor confirms the amount in our
+     * own step before it's submitted, which leads to `payPalPaymentConfirmed`.
+     */
+    payPalPaymentAuthorized(dataSource: PayPalButtonDataSourceInterface, payload: paypal.TokenizePayload): Promise<void>;
+    payPalPaymentConfirmed(dataSource: PayPalButtonDataSourceInterface, payload: paypal.TokenizePayload): Promise<void>;
+    payPalPaymentCancelled(dataSource: PayPalButtonDataSourceInterface, data: object): Promise<void>;
+    payPalPaymentError(dataSource: PayPalButtonDataSourceInterface, error: string): Promise<void>;
+    renderPayPalButton(donationInfo: DonationPaymentInfo): Promise<void>;
+    private showUpsellModal;
+    private upsellAmountChanged;
+    private renderUpsellPayPalButton;
+}
+//# sourceMappingURL=paypal-flow-handler.d.ts.map

package/dist/src/elements/ia-donation-form/flow-handlers/handlers/paypal-flow-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paypal-flow-handler.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/ia-donation-form/flow-handlers/handlers/paypal-flow-handler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAkC,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAG9E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AAC7F,OAAO,KAAK,EACV,8BAA8B,EAC9B,+BAA+B,EAChC,MAAM,mEAAmE,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAUzE,OAAO,EAEL,KAAK,iCAAiC,EACvC,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,0BAA0B;IACzC,kBAAkB,CAAC,YAAY,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC5D,wBAAwB,CAAC,YAAY,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAClE,kBAAkB,CAAC,YAAY,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,EAAE,CAAC,CAAC,SAAS,MAAM,uBAAuB,EACxC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACnC,WAAW,CAAC;CAChB;AAmBD,MAAM,WAAW,uBAAuB;IACtC,oBAAoB,EAAE,CACpB,UAAU,EAAE,+BAA+B,EAC3C,OAAO,EAAE,MAAM,KACZ,IAAI,CAAC;IACV,sBAAsB,EAAE,CACtB,UAAU,EAAE,+BAA+B,EAC3C,IAAI,EAAE,MAAM,KACT,IAAI,CAAC;IACV,kBAAkB,EAAE,CAClB,UAAU,EAAE,+BAA+B,EAC3C,KAAK,EAAE,MAAM,KACV,IAAI,CAAC;IACV,sBAAsB,EAAE,CACtB,UAAU,EAAE,+BAA+B,EAC3C,IAAI,EAAE,MAAM,KACT,IAAI,CAAC;CACX;AAED,2FAA2F;AAC3F,qBAAa,iBACX,YAAW,0BAA0B,EAAE,8BAA8B;IAErE,OAAO,CAAC,+BAA+B,CAAC,CAA4B;IAEpE,OAAO,CAAC,gBAAgB,CAAC,CAAkC;IAE3D,OAAO,CAAC,wBAAwB,CAAoC;IAEpE,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,OAAO,CAC+B;IAE9C,kBAAkB,CAAC,YAAY,EAAE,mBAAmB,GAAG,IAAI;IAM3D,wBAAwB,CAAC,YAAY,EAAE,mBAAmB,GAAG,IAAI;gBAOrD,OAAO,EAAE;QACnB,gBAAgB,EAAE,yBAAyB,CAAC;QAC5C,wBAAwB,EAAE,iCAAiC,CAAC;KAC7D;IAKD,EAAE,CAAC,CAAC,SAAS,MAAM,uBAAuB,EACxC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACnC,WAAW;IAIR,oBAAoB,CACxB,UAAU,EAAE,+BAA+B,EAC3C,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,IAAI,CAAC;IAIhB;;;OAGG;IACG,uBAAuB,CAC3B,UAAU,EAAE,+BAA+B,EAC3C,OAAO,EAAE,MAAM,CAAC,eAAe,GAC9B,OAAO,CAAC,IAAI,CAAC;IAgBV,sBAAsB,CAC1B,UAAU,EAAE,+BAA+B,EAC3C,OAAO,EAAE,MAAM,CAAC,eAAe,GAC9B,OAAO,CAAC,IAAI,CAAC;IAuEV,sBAAsB,CAC1B,UAAU,EAAE,+BAA+B,EAC3C,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,IAAI,CAAC;IAIV,kBAAkB,CACtB,UAAU,EAAE,+BAA+B,EAC3C,KAAK,EAAE,MAAM,GACZ,OAAO,CAAC,IAAI,CAAC;IAUV,kBAAkB,CAAC,YAAY,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC;YAqB5D,eAAe;IAuC7B,OAAO,CAAC,mBAAmB;YAOb,wBAAwB;CA+BvC"}