@internetarchive/donation-form 0.5.11 → 0.5.12-a1

package/dist/src/braintree-manager/payment-providers/paypal/paypal-button-datasource.d.ts

@@ -79,7 +79,7 @@ export interface PayPalButtonDataSourceDelegate {
      */
     payPalPaymentStarted(dataSource: PayPalButtonDataSourceInterface, options: object): Promise<void>;
     /**
-     * Payment has been authorized
+     * Payment has been authorized by patron and submits to PayPal
      *
      * @param {PayPalButtonDataSourceInterface} dataSource
      * @param {paypal.TokenizePayload} payload
@@ -87,6 +87,15 @@ export interface PayPalButtonDataSourceDelegate {
      * @memberof PayPalButtonDataSourceDelegate
      */
     payPalPaymentAuthorized(dataSource: PayPalButtonDataSourceInterface, payload: paypal.TokenizePayload): Promise<void>;
+    /**
+     * Payment has been authorized
+     *
+     * @param {PayPalButtonDataSourceInterface} dataSource
+     * @param {paypal.TokenizePayload} payload
+     * @returns {Promise<void>}
+     * @memberof PayPalButtonDataSourceDelegate
+     */
+    payPalPaymentConfirmed(dataSource: PayPalButtonDataSourceInterface, payload: paypal.TokenizePayload): Promise<void>;
     /**
      * Payment has been cancelled
      *
@@ -128,6 +137,7 @@ export declare class PayPalButtonDataSource implements PayPalButtonDataSourceInt
     payment(): Promise<string>;
     /** @inheritdoc */
     onAuthorize(data: paypal.AuthorizationData): Promise<paypal.TokenizePayload>;
+    onConfirm(data: paypal.AuthorizationData): Promise<paypal.TokenizePayload>;
     /** @inheritdoc */
     onCancel(data: object): void;
     /** @inheritdoc */

package/dist/src/braintree-manager/payment-providers/paypal/paypal-button-datasource.js

@@ -38,6 +38,14 @@ export class PayPalButtonDataSource {
             return payload;
         });
     }
+    onConfirm(data) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const payload = yield this.paypalInstance.tokenizePayment(data);
+            (_a = this.delegate) === null || _a === void 0 ? void 0 : _a.payPalPaymentConfirmed(this, payload);
+            return payload;
+        });
+    }
     /** @inheritdoc */
     onCancel(data) {
         var _a;

package/dist/src/braintree-manager/payment-providers/paypal/paypal-button-datasource.js.map

@@ -1 +1 @@
-{"version":3,"file":"paypal-button-datasource.js","sourceRoot":"","sources":["../../../../../src/braintree-manager/payment-providers/paypal/paypal-button-datasource.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAE/F,OAAO,QAAQ,MAAM,aAAa,CAAC;AA6HnC,kBAAkB;AAClB,MAAM,OAAO,sBAAsB;IAgBjC,YAAY,OAGX;QACC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,cAAc,CAAC;IAC/C,CAAC;IAED,kBAAkB;IACZ,OAAO;;;YACX,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;YACpD,MAAM,IAAI,GAAG,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;YAE1E,MAAM,OAAO,GAAiD;gBAC5D,IAAI,EAAE,IAAuB;gBAC7B,MAAM,EAAE,SAAS;aAClB,CAAC;YACF,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAErC,IAAI,IAAI,KAAK,UAAU,EAAE;gBACvB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;gBACzC,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;aAC1B;iBAAM;gBACL,OAAO,CAAC,2BAA2B,GAAG,uBAAuB,QAAQ,CACnE,IAAI,CAAC,YAAY,CAAC,KAAK,EACvB,EAAE,MAAM,EAAE,GAAG,EAAE,CAChB,CAAC,MAAM,EAAE,UAAU,CAAC;aACtB;YAED,MAAA,IAAI,CAAC,QAAQ,0CAAE,oBAAoB,CAAC,IAAI,EAAE,OAAO,EAAE;YAEnD,OAAO,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;;KACnD;IAED,kBAAkB;IACZ,WAAW,CAAC,IAA8B;;;YAC9C,MAAM,OAAO,GAA2B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAExF,MAAA,IAAI,CAAC,QAAQ,0CAAE,uBAAuB,CAAC,IAAI,EAAE,OAAO,EAAE;YAEtD,OAAO,OAAO,CAAC;;KAChB;IAED,kBAAkB;IAClB,QAAQ,CAAC,IAAY;;QACnB,MAAA,IAAI,CAAC,QAAQ,0CAAE,sBAAsB,CAAC,IAAI,EAAE,IAAI,EAAE;IACpD,CAAC;IAED,kBAAkB;IAClB,OAAO,CAAC,KAAa;;QACnB,OAAO,CAAC,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QACrC,MAAA,IAAI,CAAC,QAAQ,0CAAE,kBAAkB,CAAC,IAAI,EAAE,KAAK,EAAE;IACjD,CAAC;CACF","sourcesContent":["import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';\n\nimport currency from 'currency.js';\n\n/**\n * PayPayButtonDataSource is responsible for communicating with the PayPal button.\n *\n * The PayPal button cannot live in the ShadowDOM so we have to instantiate it at the\n * top of the DOM and it lives in the global sphere. This makes it difficult to communicate\n * with it directly. The PayPalButtonDataSource provides an object that we can pass around\n * that hooks into all of the PayPal button's callbacks and provides callbacks to its\n * delegate that is interested in the various events.\n *\n * @export\n * @interface PayPalButtonDataSourceInterface\n */\nexport interface PayPalButtonDataSourceInterface {\n  /**\n   * The delegate to inform about button events\n   *\n   * @type {PayPalButtonDataSourceDelegate}\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  delegate?: PayPalButtonDataSourceDelegate;\n\n  /**\n   * The Donation Info associated with this button.\n   *\n   * Since the user initiates the checkout flow from the button itself (not programatically by us),\n   * we need to have up-to-date donation information so whenever the user updates donation info\n   * from the form, we update this.\n   *\n   * @type {DonationPaymentInfo}\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  donationInfo: DonationPaymentInfo;\n\n  /**\n   * The payment has been started by the user (they clicked the PayPal button)\n   *\n   * @returns {Promise<string>}\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  payment(): Promise<string>;\n\n  /**\n   * The user has authorized the donation\n   *\n   * @param {paypal.AuthorizationData} data\n   * @param {object} actions\n   * @returns {(Promise<paypal.TokenizePayload | undefined>)}\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  onAuthorize(\n    data: paypal.AuthorizationData,\n    actions: object,\n  ): Promise<paypal.TokenizePayload | undefined>;\n\n  /**\n   * The user cancelled the donation\n   *\n   * @param {paypal.CancellationData} data\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  onCancel(data: paypal.CancellationData): void;\n\n  /**\n   * An error occurred\n   *\n   * @param {string} error\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  onError(error: string): void;\n}\n\n/**\n * The PayPalButtonDataSourceDelegate is an interface for any object interested\n * in events emitted by the paypal button.\n *\n * @export\n * @interface PayPalButtonDataSourceDelegate\n */\nexport interface PayPalButtonDataSourceDelegate {\n  /**\n   * Payment has been started\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {object} options\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n  payPalPaymentStarted(dataSource: PayPalButtonDataSourceInterface, options: object): Promise<void>;\n\n  /**\n   * Payment has been authorized\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {paypal.TokenizePayload} payload\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n  payPalPaymentAuthorized(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void>;\n\n  /**\n   * Payment has been cancelled\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {object} data\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n  payPalPaymentCancelled(dataSource: PayPalButtonDataSourceInterface, data: object): Promise<void>;\n\n  /**\n   * There was a payment error\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {string} error\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n  payPalPaymentError(dataSource: PayPalButtonDataSourceInterface, error: string): Promise<void>;\n}\n\n/** @inheritdoc */\nexport class PayPalButtonDataSource implements PayPalButtonDataSourceInterface {\n  /** @inheritdoc */\n  delegate?: PayPalButtonDataSourceDelegate;\n\n  /** @inheritdoc */\n  donationInfo: DonationPaymentInfo;\n\n  /**\n   * The PayPal instance\n   *\n   * @private\n   * @type {braintree.PayPalCheckout}\n   * @memberof PayPalButtonDataSource\n   */\n  private paypalInstance: braintree.PayPalCheckout;\n\n  constructor(options: {\n    donationInfo: DonationPaymentInfo;\n    paypalInstance: braintree.PayPalCheckout;\n  }) {\n    this.donationInfo = options.donationInfo;\n    this.paypalInstance = options.paypalInstance;\n  }\n\n  /** @inheritdoc */\n  async payment(): Promise<string> {\n    const donationType = this.donationInfo.donationType;\n    const flow = donationType === DonationType.OneTime ? 'checkout' : 'vault';\n\n    const options: braintree.PayPalCheckoutCreatePaymentOptions = {\n      flow: flow as paypal.FlowType,\n      intent: 'capture',\n    };\n    options.enableShippingAddress = true;\n\n    if (flow === 'checkout') {\n      options.amount = this.donationInfo.total;\n      options.currency = 'USD';\n    } else {\n      options.billingAgreementDescription = `Subscribe to donate ${currency(\n        this.donationInfo.total,\n        { symbol: '$' },\n      ).format()} monthly`;\n    }\n\n    this.delegate?.payPalPaymentStarted(this, options);\n\n    return this.paypalInstance.createPayment(options);\n  }\n\n  /** @inheritdoc */\n  async onAuthorize(data: paypal.AuthorizationData): Promise<paypal.TokenizePayload> {\n    const payload: paypal.TokenizePayload = await this.paypalInstance.tokenizePayment(data);\n\n    this.delegate?.payPalPaymentAuthorized(this, payload);\n\n    return payload;\n  }\n\n  /** @inheritdoc */\n  onCancel(data: object): void {\n    this.delegate?.payPalPaymentCancelled(this, data);\n  }\n\n  /** @inheritdoc */\n  onError(error: string): void {\n    console.error('PayPal error', error);\n    this.delegate?.payPalPaymentError(this, error);\n  }\n}\n"]}
+{"version":3,"file":"paypal-button-datasource.js","sourceRoot":"","sources":["../../../../../src/braintree-manager/payment-providers/paypal/paypal-button-datasource.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAE/F,OAAO,QAAQ,MAAM,aAAa,CAAC;AA0InC,kBAAkB;AAClB,MAAM,OAAO,sBAAsB;IAgBjC,YAAY,OAGX;QACC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,cAAc,CAAC;IAC/C,CAAC;IAED,kBAAkB;IACZ,OAAO;;;YACX,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;YACpD,MAAM,IAAI,GAAG,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;YAE1E,MAAM,OAAO,GAAiD;gBAC5D,IAAI,EAAE,IAAuB;gBAC7B,MAAM,EAAE,SAAS;aAClB,CAAC;YACF,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAErC,IAAI,IAAI,KAAK,UAAU,EAAE;gBACvB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;gBACzC,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;aAC1B;iBAAM;gBACL,OAAO,CAAC,2BAA2B,GAAG,uBAAuB,QAAQ,CACnE,IAAI,CAAC,YAAY,CAAC,KAAK,EACvB,EAAE,MAAM,EAAE,GAAG,EAAE,CAChB,CAAC,MAAM,EAAE,UAAU,CAAC;aACtB;YAED,MAAA,IAAI,CAAC,QAAQ,0CAAE,oBAAoB,CAAC,IAAI,EAAE,OAAO,EAAE;YAEnD,OAAO,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;;KACnD;IAED,kBAAkB;IACZ,WAAW,CAAC,IAA8B;;;YAC9C,MAAM,OAAO,GAA2B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAExF,MAAA,IAAI,CAAC,QAAQ,0CAAE,uBAAuB,CAAC,IAAI,EAAE,OAAO,EAAE;YAEtD,OAAO,OAAO,CAAC;;KAChB;IAEK,SAAS,CAAC,IAA8B;;;YAC5C,MAAM,OAAO,GAA2B,MAAM,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACxF,MAAA,IAAI,CAAC,QAAQ,0CAAE,sBAAsB,CAAC,IAAI,EAAE,OAAO,EAAE;YAErD,OAAO,OAAO,CAAC;;KAChB;IAED,kBAAkB;IAClB,QAAQ,CAAC,IAAY;;QACnB,MAAA,IAAI,CAAC,QAAQ,0CAAE,sBAAsB,CAAC,IAAI,EAAE,IAAI,EAAE;IACpD,CAAC;IAED,kBAAkB;IAClB,OAAO,CAAC,KAAa;;QACnB,OAAO,CAAC,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QACrC,MAAA,IAAI,CAAC,QAAQ,0CAAE,kBAAkB,CAAC,IAAI,EAAE,KAAK,EAAE;IACjD,CAAC;CACF","sourcesContent":["import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';\n\nimport currency from 'currency.js';\n\n/**\n * PayPayButtonDataSource is responsible for communicating with the PayPal button.\n *\n * The PayPal button cannot live in the ShadowDOM so we have to instantiate it at the\n * top of the DOM and it lives in the global sphere. This makes it difficult to communicate\n * with it directly. The PayPalButtonDataSource provides an object that we can pass around\n * that hooks into all of the PayPal button's callbacks and provides callbacks to its\n * delegate that is interested in the various events.\n *\n * @export\n * @interface PayPalButtonDataSourceInterface\n */\nexport interface PayPalButtonDataSourceInterface {\n  /**\n   * The delegate to inform about button events\n   *\n   * @type {PayPalButtonDataSourceDelegate}\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  delegate?: PayPalButtonDataSourceDelegate;\n\n  /**\n   * The Donation Info associated with this button.\n   *\n   * Since the user initiates the checkout flow from the button itself (not programatically by us),\n   * we need to have up-to-date donation information so whenever the user updates donation info\n   * from the form, we update this.\n   *\n   * @type {DonationPaymentInfo}\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  donationInfo: DonationPaymentInfo;\n\n  /**\n   * The payment has been started by the user (they clicked the PayPal button)\n   *\n   * @returns {Promise<string>}\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  payment(): Promise<string>;\n\n  /**\n   * The user has authorized the donation\n   *\n   * @param {paypal.AuthorizationData} data\n   * @param {object} actions\n   * @returns {(Promise<paypal.TokenizePayload | undefined>)}\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  onAuthorize(\n    data: paypal.AuthorizationData,\n    actions: object,\n  ): Promise<paypal.TokenizePayload | undefined>;\n\n  /**\n   * The user cancelled the donation\n   *\n   * @param {paypal.CancellationData} data\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  onCancel(data: paypal.CancellationData): void;\n\n  /**\n   * An error occurred\n   *\n   * @param {string} error\n   * @memberof PayPalButtonDataSourceInterface\n   */\n  onError(error: string): void;\n}\n\n/**\n * The PayPalButtonDataSourceDelegate is an interface for any object interested\n * in events emitted by the paypal button.\n *\n * @export\n * @interface PayPalButtonDataSourceDelegate\n */\nexport interface PayPalButtonDataSourceDelegate {\n  /**\n   * Payment has been started\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {object} options\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n  payPalPaymentStarted(dataSource: PayPalButtonDataSourceInterface, options: object): Promise<void>;\n\n  /**\n   * Payment has been authorized by patron and submits to PayPal\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {paypal.TokenizePayload} payload\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n  payPalPaymentAuthorized(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void>;\n\n  /**\n   * Payment has been authorized\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {paypal.TokenizePayload} payload\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n   payPalPaymentConfirmed(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void>;\n\n  /**\n   * Payment has been cancelled\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {object} data\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n  payPalPaymentCancelled(dataSource: PayPalButtonDataSourceInterface, data: object): Promise<void>;\n\n  /**\n   * There was a payment error\n   *\n   * @param {PayPalButtonDataSourceInterface} dataSource\n   * @param {string} error\n   * @returns {Promise<void>}\n   * @memberof PayPalButtonDataSourceDelegate\n   */\n  payPalPaymentError(dataSource: PayPalButtonDataSourceInterface, error: string): Promise<void>;\n}\n\n/** @inheritdoc */\nexport class PayPalButtonDataSource implements PayPalButtonDataSourceInterface {\n  /** @inheritdoc */\n  delegate?: PayPalButtonDataSourceDelegate;\n\n  /** @inheritdoc */\n  donationInfo: DonationPaymentInfo;\n\n  /**\n   * The PayPal instance\n   *\n   * @private\n   * @type {braintree.PayPalCheckout}\n   * @memberof PayPalButtonDataSource\n   */\n  private paypalInstance: braintree.PayPalCheckout;\n\n  constructor(options: {\n    donationInfo: DonationPaymentInfo;\n    paypalInstance: braintree.PayPalCheckout;\n  }) {\n    this.donationInfo = options.donationInfo;\n    this.paypalInstance = options.paypalInstance;\n  }\n\n  /** @inheritdoc */\n  async payment(): Promise<string> {\n    const donationType = this.donationInfo.donationType;\n    const flow = donationType === DonationType.OneTime ? 'checkout' : 'vault';\n\n    const options: braintree.PayPalCheckoutCreatePaymentOptions = {\n      flow: flow as paypal.FlowType,\n      intent: 'capture',\n    };\n    options.enableShippingAddress = true;\n\n    if (flow === 'checkout') {\n      options.amount = this.donationInfo.total;\n      options.currency = 'USD';\n    } else {\n      options.billingAgreementDescription = `Subscribe to donate ${currency(\n        this.donationInfo.total,\n        { symbol: '$' },\n      ).format()} monthly`;\n    }\n\n    this.delegate?.payPalPaymentStarted(this, options);\n\n    return this.paypalInstance.createPayment(options);\n  }\n\n  /** @inheritdoc */\n  async onAuthorize(data: paypal.AuthorizationData): Promise<paypal.TokenizePayload> {\n    const payload: paypal.TokenizePayload = await this.paypalInstance.tokenizePayment(data);\n\n    this.delegate?.payPalPaymentAuthorized(this, payload);\n\n    return payload;\n  }\n\n  async onConfirm(data: paypal.AuthorizationData): Promise<paypal.TokenizePayload> {\n    const payload: paypal.TokenizePayload = await this.paypalInstance.tokenizePayment(data);\n    this.delegate?.payPalPaymentConfirmed(this, payload);\n\n    return payload;\n  }\n\n  /** @inheritdoc */\n  onCancel(data: object): void {\n    this.delegate?.payPalPaymentCancelled(this, data);\n  }\n\n  /** @inheritdoc */\n  onError(error: string): void {\n    console.error('PayPal error', error);\n    this.delegate?.payPalPaymentError(this, error);\n  }\n}\n"]}

package/dist/src/donation-form-controller.d.ts

@@ -9,7 +9,7 @@ import './form-elements/badged-input';
 import './form-elements/contact-form/contact-form';
 import { AnalyticsHandlerInterface } from './@types/analytics-handler';
 import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode } from '@internetarchive/donation-form-edit-donation';
-import { DonationPaymentInfo } from '@internetarchive/donation-form-data-models';
+import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';
 import { UpsellModalCTAMode } from './modals/upsell-modal-content';
 /**
  * The DonationFormController orchestrates several of the interactions between
@@ -50,6 +50,13 @@ export declare class DonationFormController extends LitElement {
     private contactForm?;
     /** @inheritdoc */
     updated(changedProperties: PropertyValues): void;
+    showConfirmationStepDev(options: {
+        donationType: DonationType;
+        amount: number;
+        currencyType: string;
+        cancelDonationCB: Function;
+        confirmDonationCB: Function;
+    }): Promise<void>;
     showUpsellModalDev(options: {
         oneTimeAmount: number;
         ctaMode?: UpsellModalCTAMode;

package/dist/src/donation-form-controller.js

@@ -68,6 +68,11 @@ let DonationFormController = class DonationFormController extends LitElement {
             this.paymentClients = new PaymentClients(this.lazyLoaderService, this.environment);
         }
     }
+    showConfirmationStepDev(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.donationForm.showConfirmationModalDev(options);
+        });
+    }
     showUpsellModalDev(options) {
         return __awaiter(this, void 0, void 0, function* () {
             this.donationForm.showUpsellModalDev(options);
@@ -176,6 +181,7 @@ let DonationFormController = class DonationFormController extends LitElement {
         this.donationInfo = donationInfo;
     }
     setupPaymentFlowHandlers() {
+        var _a;
         // only set up once
         if (this.paymentFlowHandlers) {
             return;
@@ -195,7 +201,7 @@ let DonationFormController = class DonationFormController extends LitElement {
         this.donationForm.braintreeManager = this.braintreeManager;
         this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;
         this.braintreeManager.startup();
-        this.paymentFlowHandlers.startup();
+        (_a = this.paymentFlowHandlers) === null || _a === void 0 ? void 0 : _a.startup();
         this.recaptchaManager.setup(this.recaptchaElement, 1, 'light', 'image');
     }
     get hostedFieldConfig() {

package/dist/src/donation-form-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"donation-form-controller.js","sourceRoot":"","sources":["../../src/donation-form-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValues, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport currency from 'currency.js';\nimport {\n  LazyLoaderService,\n  LazyLoaderServiceInterface,\n} from '@internetarchive/lazy-loader-service';\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\n\nimport { DonationForm } from './donation-form';\nimport { PaymentClients, PaymentClientsInterface } from './braintree-manager/payment-clients';\nimport { BraintreeManager } from './braintree-manager/braintree-manager';\nimport {\n  BraintreeEndpointManagerInterface,\n  BraintreeManagerInterface,\n  HostingEnvironment,\n} from './braintree-manager/braintree-interfaces';\nimport {\n  PaymentFlowHandlers,\n  PaymentFlowHandlersInterface,\n} from './payment-flow-handlers/payment-flow-handlers';\n\nimport { RecaptchaManager, RecaptchaManagerInterface } from './recaptcha-manager/recaptcha-manager';\nimport { HostedFieldConfiguration } from './braintree-manager/payment-providers/credit-card/hosted-field-configuration';\nimport {\n  HostedFieldContainerInterface,\n  HostedFieldContainer,\n} from './braintree-manager/payment-providers/credit-card/hosted-field-container';\n\nimport './form-elements/badged-input';\nimport { ContactForm } from './form-elements/contact-form/contact-form';\nimport './form-elements/contact-form/contact-form';\n\nimport creditCardImg from '@internetarchive/icon-credit-card';\nimport calendarImg from '@internetarchive/icon-calendar';\nimport lockImg from '@internetarchive/icon-lock';\nimport { AnalyticsHandlerInterface } from './@types/analytics-handler';\nimport {\n  EditDonationAmountSelectionLayout,\n  EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nimport {\n  DonationPaymentInfo,\n  PaymentProvider,\n  DonationType,\n  defaultDonationAmounts,\n  defaultSelectedDonationInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { UpsellModalCTAMode } from './modals/upsell-modal-content';\n\n/**\n * The DonationFormController orchestrates several of the interactions between\n * the various pieces of the donation form like modals, braintree, paypal, and recaptcha\n *\n * @export\n * @class RadioPlayerController\n * @extends {LitElement}\n */\n@customElement('donation-form-controller')\nexport class DonationFormController extends LitElement {\n  @property({ type: String }) environment?: HostingEnvironment;\n\n  @property({ type: String }) braintreeAuthToken?: string;\n\n  @property({ type: String }) recaptchaSiteKey?: string;\n\n  @property({ type: String }) venmoProfileId?: string;\n\n  @property({ type: String }) googlePayMerchantId?: string;\n\n  @property({ type: String }) analyticsCategory = 'DonationForm';\n\n  @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n  @property({ type: Object }) donationInfo: DonationPaymentInfo = defaultSelectedDonationInfo;\n\n  @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n    EditDonationAmountSelectionLayout.MultiLine;\n\n  @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n    EditDonationFrequencySelectionMode.Button;\n\n  @property({ type: String }) referrer?: string;\n\n  @property({ type: String }) loggedInUser?: string;\n\n  @property({ type: String }) origin?: string;\n\n  @property({ type: Object }) endpointManager?: BraintreeEndpointManagerInterface;\n\n  @property({ type: Object }) analyticsHandler?: AnalyticsHandlerInterface;\n\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  @property({ type: Object }) recaptchaElement?: HTMLElement;\n\n  @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n  @property({ type: Object }) recaptchaManager?: RecaptchaManagerInterface;\n\n  @property({ type: Object }) paymentFlowHandlers?: PaymentFlowHandlersInterface;\n\n  @property({ type: Object }) paymentClients?: PaymentClientsInterface;\n\n  @property({ type: Object })\n  lazyLoaderService: LazyLoaderServiceInterface = new LazyLoaderService();\n\n  @query('donation-form') private donationForm!: DonationForm;\n\n  @query('#braintree-creditcard') private braintreeNumberInput!: HTMLDivElement;\n\n  @query('#braintree-cvv') private braintreeCVVInput!: HTMLDivElement;\n\n  @query('#braintree-expiration') private braintreeExpirationDateInput!: HTMLDivElement;\n\n  @query('#braintree-error-message') private braintreeErrorMessage!: HTMLDivElement;\n\n  @query('contact-form') private contactForm?: ContactForm;\n\n  /** @inheritdoc */\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('referrer') && this.referrer) {\n      this.braintreeManager?.setReferrer(this.referrer);\n    }\n\n    if (changedProperties.has('loggedInUser') && this.loggedInUser) {\n      this.braintreeManager?.setLoggedInUser(this.loggedInUser);\n    }\n\n    if (changedProperties.has('origin') && this.origin) {\n      this.braintreeManager?.setOrigin(this.origin);\n    }\n\n    if (\n      changedProperties.has('paymentClients') ||\n      changedProperties.has('braintreeAuthToken') ||\n      changedProperties.has('endpointManager') ||\n      changedProperties.has('environment')\n    ) {\n      this.setupBraintreeManager();\n      this.setupRecaptchaManager();\n    }\n\n    if (changedProperties.has('recaptchaSiteKey')) {\n      this.setupRecaptchaManager();\n    }\n\n    if (\n      changedProperties.has('braintreeManager') ||\n      changedProperties.has('recaptchaManager') ||\n      changedProperties.has('modalManager') ||\n      changedProperties.has('recaptchaElement')\n    ) {\n      this.setupPaymentFlowHandlers();\n    }\n\n    if (\n      (changedProperties.has('environment') || changedProperties.has('lazyLoaderService')) &&\n      this.environment\n    ) {\n      this.paymentClients = new PaymentClients(this.lazyLoaderService, this.environment);\n    }\n  }\n\n  async showUpsellModalDev(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    this.donationForm.showUpsellModalDev(options);\n  }\n\n  private setupBraintreeManager(): void {\n    if (\n      this.braintreeManager === undefined &&\n      this.braintreeAuthToken &&\n      this.endpointManager &&\n      this.paymentClients &&\n      this.environment\n    ) {\n      this.braintreeManager = new BraintreeManager({\n        paymentClients: this.paymentClients,\n        endpointManager: this.endpointManager,\n        authorizationToken: this.braintreeAuthToken,\n        venmoProfileId: this.venmoProfileId,\n        googlePayMerchantId: this.googlePayMerchantId,\n        hostedFieldConfig: this.hostedFieldConfig,\n        hostingEnvironment: this.environment,\n        referrer: this.referrer,\n        loggedInUser: this.loggedInUser,\n        origin: this.origin,\n      });\n\n      this.braintreeManager.on('paymentProvidersHostedFieldsRetry', (retryNumber: number) => {\n        const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {\n          detail: { retryNumber },\n        });\n        this.dispatchEvent(event);\n      });\n\n      this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error: unknown) => {\n        const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {\n          detail: { error },\n        });\n        this.dispatchEvent(event);\n      });\n    }\n  }\n\n  private recaptchaManagerSetup = false;\n\n  private async setupRecaptchaManager(): Promise<void> {\n    if (!this.recaptchaSiteKey || !this.paymentClients || this.recaptchaManagerSetup) {\n      return;\n    }\n    this.recaptchaManagerSetup = true;\n    const grecaptchaLibrary = await this.paymentClients.recaptchaLibrary.get();\n    this.recaptchaManager = new RecaptchaManager({\n      grecaptchaLibrary: grecaptchaLibrary,\n      siteKey: this.recaptchaSiteKey,\n    });\n  }\n\n  /** @inheritdoc */\n  firstUpdated(): void {\n    this.configureFromQueryParams();\n    this.trackViewedEvent();\n  }\n\n  private configureFromQueryParams(): void {\n    const urlParams = new URLSearchParams(window.location.search);\n\n    let amountOptions = this.amountOptions;\n    const amountOptionsParam = urlParams.get('dollarAmounts');\n    if (amountOptionsParam) {\n      const stripBrackets = amountOptionsParam.slice(1, -1);\n      const splitValues = stripBrackets.split(',');\n      const numberArray = splitValues\n        .map(value => parseFloat(value))\n        .filter(value => !isNaN(value));\n      amountOptions = numberArray;\n    }\n\n    let coverFees = this.donationInfo.coverFees;\n    const coverFeesParam = urlParams.get('coverFees');\n    if (coverFeesParam) {\n      coverFees = coverFeesParam === 'true';\n    }\n\n    let frequency = this.donationInfo.donationType;\n    const frequencyParam = urlParams.get('contrib_type');\n    if (frequencyParam === 'monthly') {\n      frequency = DonationType.Monthly;\n    }\n\n    let amount = this.donationInfo.amount;\n    const amountParam = urlParams.get('amt');\n    if (amountParam) {\n      const parsedAmount = currency(amountParam).value;\n      if (parsedAmount > 0) {\n        amount = parsedAmount;\n      }\n    }\n\n    const amountLayoutParam = urlParams.get('amountLayout');\n    if (amountLayoutParam) {\n      const amountLayout = amountLayoutParam as EditDonationAmountSelectionLayout;\n      if (Object.values(EditDonationAmountSelectionLayout).includes(amountLayout)) {\n        this.amountSelectionLayout = amountLayout;\n      }\n    }\n\n    const frequencyModeParam = urlParams.get('frequencyMode');\n    if (frequencyModeParam) {\n      const frequencyMode = frequencyModeParam as EditDonationFrequencySelectionMode;\n      if (Object.values(EditDonationFrequencySelectionMode).includes(frequencyMode)) {\n        this.frequencySelectionMode = frequencyMode;\n      }\n    }\n\n    const donationInfo = new DonationPaymentInfo({\n      donationType: frequency,\n      amount: amount,\n      coverFees: coverFees,\n    });\n\n    this.amountOptions = amountOptions;\n    this.donationInfo = donationInfo;\n  }\n\n  private setupPaymentFlowHandlers(): void {\n    // only set up once\n    if (this.paymentFlowHandlers) {\n      return;\n    }\n\n    // verify we have all of the dependencies\n    if (\n      !this.braintreeManager ||\n      !this.recaptchaManager ||\n      !this.modalManager ||\n      !this.recaptchaElement\n    ) {\n      return;\n    }\n\n    this.paymentFlowHandlers = new PaymentFlowHandlers({\n      braintreeManager: this.braintreeManager,\n      modalManager: this.modalManager,\n      recaptchaManager: this.recaptchaManager,\n    });\n\n    this.donationForm.braintreeManager = this.braintreeManager;\n    this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;\n\n    this.braintreeManager.startup();\n    this.paymentFlowHandlers.startup();\n    this.recaptchaManager.setup(this.recaptchaElement, 1, 'light', 'image');\n  }\n\n  private get hostedFieldConfig(): HostedFieldConfiguration {\n    const hostedFieldStyle: Record<string, Record<string, string>> = {\n      input: {\n        'font-size': '16px',\n        'font-family': '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        'font-weight': '700',\n        color: '#333',\n      },\n      ':focus': {\n        color: '#333',\n      },\n      '.valid': {},\n      '.invalid': {\n        color: '#b00b00',\n      },\n    };\n\n    const hostedFieldFieldOptions: braintree.HostedFieldFieldOptions = {\n      number: {\n        selector: '#braintree-creditcard',\n        placeholder: 'Card number',\n      },\n      cvv: {\n        selector: '#braintree-cvv',\n        placeholder: 'CVC',\n      },\n      expirationDate: {\n        selector: '#braintree-expiration',\n        placeholder: 'MM / YY',\n      },\n    };\n\n    const hostedFieldContainer: HostedFieldContainerInterface = new HostedFieldContainer({\n      number: this.braintreeNumberInput,\n      cvv: this.braintreeCVVInput,\n      expirationDate: this.braintreeExpirationDateInput,\n      errorContainer: this.braintreeErrorMessage,\n    });\n\n    const config: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle,\n      hostedFieldFieldOptions,\n      hostedFieldContainer,\n    });\n\n    return config;\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"donation-form-controller-container\">\n        <donation-form\n          .environment=${this.environment}\n          .braintreeManager=${this.braintreeManager}\n          .contactForm=${this.contactForm}\n          .amountOptions=${this.amountOptions}\n          .donationInfo=${this.donationInfo}\n          .amountSelectionLayout=${this.amountSelectionLayout}\n          .frequencySelectionMode=${this.frequencySelectionMode}\n          @donationInfoChanged=${this.donationInfoChanged}\n          @paymentProviderSelected=${this.paymentProviderSelected}\n          @paymentFlowStarted=${this.paymentFlowStarted}\n          @paymentFlowCancelled=${this.paymentFlowCancelled}\n          @paymentFlowError=${this.paymentFlowError}\n        >\n          <!--\n            Why are these slots here?\n\n            Due to the way Braintree, PayPal, and Recaptcha work, they cannot exist\n            in the shadowDOM so must exist in the clearDOM and get passed\n            in through a <slot>.\n\n            Braintree / PayPal are working on a solution to this. See:\n            - https://github.com/braintree/braintree-web-drop-in/issues/614#issuecomment-616796104\n            - https://github.com/braintree/braintree-web-drop-in/issues/296#issuecomment-616749307\n            - https://github.com/paypal/paypal-checkout-components/issues/353#issuecomment-595956216\n          -->\n          <div slot=\"braintree-hosted-fields\">\n            <div id=\"braintree-error-message\"></div>\n            <div class=\"braintree-row\">\n              <badged-input .icon=${creditCardImg} ?required=${true} class=\"creditcard\">\n                <div class=\"braintree-input\" id=\"braintree-creditcard\"></div>\n              </badged-input>\n            </div>\n            <div class=\"braintree-row\">\n              <badged-input .icon=${calendarImg} ?required=${true} class=\"expiration\">\n                <div class=\"braintree-input\" id=\"braintree-expiration\"></div>\n              </badged-input>\n              <badged-input .icon=${lockImg} ?required=${true} class=\"cvv\">\n                <div class=\"braintree-input\" id=\"braintree-cvv\"></div>\n              </badged-input>\n            </div>\n          </div>\n\n          <!--\n            Form autocompletion does not work in the shadowDOM so\n            we slot the contact form in from the lightDOM and pass\n            in a reference to it in the <donation-form> tag above\n          -->\n          <div slot=\"contact-form\">\n            <contact-form></contact-form>\n          </div>\n\n          <div slot=\"paypal-button\">\n            <div id=\"paypal-button\"></div>\n          </div>\n\n          <slot name=\"recaptcha\" slot=\"recaptcha\"> </slot>\n        </donation-form>\n      </div>\n\n      ${this.getStyles}\n    `;\n  }\n\n  /** @inheritdoc */\n  createRenderRoot(): this {\n    // Render template without shadow DOM. Note that shadow DOM features like\n    // encapsulated CSS and slots are unavailable.\n    // We have to do this to accomodate the PayPal buttons and HostedFields,\n    // which do not work in the shadow DOM\n    return this;\n  }\n\n  private donationInfoChanged(): void {\n    this.logEvent('DonationInfoChanged');\n  }\n\n  private trackViewedEvent(): void {\n    this.logEvent('Viewed');\n  }\n\n  private paymentProviderSelected(e: CustomEvent): void {\n    const paymentProvider = e.detail.paymentProvider as PaymentProvider;\n    const previousPaymentProvider = e.detail.previousPaymentProvider;\n    const providerNoSpaces = this.removeSpaces(paymentProvider);\n    let eventName = `ProviderFirstSelected-${providerNoSpaces}`;\n    let previousProviderInfo;\n    if (previousPaymentProvider !== undefined) {\n      eventName = `ProviderChangedTo-${providerNoSpaces}`;\n      previousProviderInfo = `ProviderChangedFrom-${this.removeSpaces(previousPaymentProvider)}`;\n    }\n    this.logEvent(eventName, previousProviderInfo);\n  }\n\n  private paymentFlowStarted(e: CustomEvent): void {\n    const selectedProvider = e.detail.paymentProvider as PaymentProvider;\n    const providerNoSpaces = this.removeSpaces(selectedProvider);\n    this.logEvent('PaymentFlowStarted', providerNoSpaces);\n  }\n\n  private paymentFlowCancelled(e: CustomEvent): void {\n    const selectedProvider = e.detail.paymentProvider as PaymentProvider;\n    const providerNoSpaces = this.removeSpaces(selectedProvider);\n    this.logEvent('PaymentFlowCancelled', providerNoSpaces);\n  }\n\n  private paymentFlowError(e: CustomEvent): void {\n    const selectedProvider = e.detail.paymentProvider as PaymentProvider;\n    const providerNoSpaces = this.removeSpaces(selectedProvider);\n    const error = e.detail.error;\n    const detail = `${providerNoSpaces}-${error}`;\n    this.logEvent('PaymentFlowError', detail);\n  }\n\n  private removeSpaces(original: string): string {\n    return original.replace(/\\s+/g, '');\n  }\n\n  /**\n   * Log an event\n   *\n   * @param {string} name Name of event\n   * @param {string} label Event label, optional\n   */\n  private logEvent(name: string, label?: string): void {\n    this.analyticsHandler?.send_event(this.analyticsCategory, name, label);\n  }\n\n  /**\n   * This is not the normal LitElement styles block.\n   *\n   * This element uses the clear DOM instead of the shadow DOM, it can't use\n   * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of\n   * the styling local by writing out our own <style> tag and just be careful about\n   * the selectors since they will leak outside of this component.\n   *\n   * @readonly\n   * @private\n   * @type {TemplateResult}\n   * @memberof IADonationFormController\n   */\n  private get getStyles(): TemplateResult {\n    return html`\n      <style>\n        .donation-form-controller-container donation-form:focus {\n          outline: none;\n        }\n\n        .donation-form-controller-container #paypal-button {\n          opacity: 0.001;\n          width: 5rem;\n          height: 3rem;\n          overflow: hidden;\n        }\n\n        .donation-form-controller-container .braintree-row {\n          display: flex;\n          margin-top: -1px;\n        }\n\n        .donation-form-controller-container badged-input {\n          width: 100%;\n        }\n\n        .donation-form-controller-container badged-input.cvv {\n          margin-left: -1px;\n        }\n\n        .donation-form-controller-container .braintree-input {\n          width: 100%;\n          height: 100%;\n        }\n\n        .donation-form-controller-container #braintree-error-message {\n          color: red;\n          font-size: 1.4rem;\n          margin-bottom: 0.6rem;\n        }\n      </style>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"donation-form-controller.js","sourceRoot":"","sources":["../../src/donation-form-controller.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EACL,iBAAiB,GAElB,MAAM,sCAAsC,CAAC;AAI9C,OAAO,EAAE,cAAc,EAA2B,MAAM,qCAAqC,CAAC;AAC9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AAMzE,OAAO,EACL,mBAAmB,GAEpB,MAAM,+CAA+C,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAA6B,MAAM,uCAAuC,CAAC;AACpG,OAAO,EAAE,wBAAwB,EAAE,MAAM,8EAA8E,CAAC;AACxH,OAAO,EAEL,oBAAoB,GACrB,MAAM,0EAA0E,CAAC;AAElF,OAAO,8BAA8B,CAAC;AAEtC,OAAO,2CAA2C,CAAC;AAEnD,OAAO,aAAa,MAAM,mCAAmC,CAAC;AAC9D,OAAO,WAAW,MAAM,gCAAgC,CAAC;AACzD,OAAO,OAAO,MAAM,4BAA4B,CAAC;AAEjD,OAAO,EACL,iCAAiC,EACjC,kCAAkC,GACnC,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EACL,mBAAmB,EAEnB,YAAY,EACZ,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,4CAA4C,CAAC;AAGpD;;;;;;;GAOG;AAEH,IAAa,sBAAsB,GAAnC,MAAa,sBAAuB,SAAQ,UAAU;IAAtD;;QAW8B,sBAAiB,GAAG,cAAc,CAAC;QAEpC,kBAAa,GAAa,sBAAsB,CAAC;QAEhD,iBAAY,GAAwB,2BAA2B,CAAC;QAEhE,0BAAqB,GAC/C,iCAAiC,CAAC,SAAS,CAAC;QAElB,2BAAsB,GAChD,kCAAkC,CAAC,MAAM,CAAC;QAyB5C,sBAAiB,GAA+B,IAAI,iBAAiB,EAAE,CAAC;QAqHhE,0BAAqB,GAAG,KAAK,CAAC;IAwVxC,CAAC;IA/bC,kBAAkB;IAClB,OAAO,CAAC,iBAAiC;;QACvC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACtD,MAAA,IAAI,CAAC,gBAAgB,0CAAE,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE;SACnD;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE;YAC9D,MAAA,IAAI,CAAC,gBAAgB,0CAAE,eAAe,CAAC,IAAI,CAAC,YAAY,EAAE;SAC3D;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE;YAClD,MAAA,IAAI,CAAC,gBAAgB,0CAAE,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE;SAC/C;QAED,IACE,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC;YACvC,iBAAiB,CAAC,GAAG,CAAC,oBAAoB,CAAC;YAC3C,iBAAiB,CAAC,GAAG,CAAC,iBAAiB,CAAC;YACxC,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,EACpC;YACA,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;YAC7C,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;QAED,IACE,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC;YACzC,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC;YACzC,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC;YACrC,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EACzC;YACA,IAAI,CAAC,wBAAwB,EAAE,CAAC;SACjC;QAED,IACE,CAAC,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YACpF,IAAI,CAAC,WAAW,EAChB;YACA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;SACpF;IACH,CAAC;IAEK,uBAAuB,CAAC,OAM7B;;YACC,IAAI,CAAC,YAAY,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC;QACtD,CAAC;KAAA;IAEK,kBAAkB,CAAC,OAOxB;;YACC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAChD,CAAC;KAAA;IAEO,qBAAqB;QAC3B,IACE,IAAI,CAAC,gBAAgB,KAAK,SAAS;YACnC,IAAI,CAAC,kBAAkB;YACvB,IAAI,CAAC,eAAe;YACpB,IAAI,CAAC,cAAc;YACnB,IAAI,CAAC,WAAW,EAChB;YACA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC;gBAC3C,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;gBAC3C,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB;gBAC7C,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;gBACzC,kBAAkB,EAAE,IAAI,CAAC,WAAW;gBACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,mCAAmC,EAAE,CAAC,WAAmB,EAAE,EAAE;gBACpF,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,mCAAmC,EAAE;oBACjE,MAAM,EAAE,EAAE,WAAW,EAAE;iBACxB,CAAC,CAAC;gBACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,oCAAoC,EAAE,CAAC,KAAc,EAAE,EAAE;gBAChF,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,oCAAoC,EAAE;oBAClE,MAAM,EAAE,EAAE,KAAK,EAAE;iBAClB,CAAC,CAAC;gBACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAIa,qBAAqB;;YACjC,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,qBAAqB,EAAE;gBAChF,OAAO;aACR;YACD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAClC,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,EAAE,CAAC;YAC3E,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC;gBAC3C,iBAAiB,EAAE,iBAAiB;gBACpC,OAAO,EAAE,IAAI,CAAC,gBAAgB;aAC/B,CAAC,CAAC;QACL,CAAC;KAAA;IAED,kBAAkB;IAClB,YAAY;QACV,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,wBAAwB;QAC9B,MAAM,SAAS,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAE9D,IAAI,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACvC,MAAM,kBAAkB,GAAG,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC1D,IAAI,kBAAkB,EAAE;YACtB,MAAM,aAAa,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC7C,MAAM,WAAW,GAAG,WAAW;iBAC5B,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;iBAC/B,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;YAClC,aAAa,GAAG,WAAW,CAAC;SAC7B;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;QAC5C,MAAM,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAClD,IAAI,cAAc,EAAE;YAClB,SAAS,GAAG,cAAc,KAAK,MAAM,CAAC;SACvC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;QAC/C,MAAM,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QACrD,IAAI,cAAc,KAAK,SAAS,EAAE;YAChC,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;SAClC;QAED,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QACtC,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,WAAW,EAAE;YACf,MAAM,YAAY,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;YACjD,IAAI,YAAY,GAAG,CAAC,EAAE;gBACpB,MAAM,GAAG,YAAY,CAAC;aACvB;SACF;QAED,MAAM,iBAAiB,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QACxD,IAAI,iBAAiB,EAAE;YACrB,MAAM,YAAY,GAAG,iBAAsD,CAAC;YAC5E,IAAI,MAAM,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;gBAC3E,IAAI,CAAC,qBAAqB,GAAG,YAAY,CAAC;aAC3C;SACF;QAED,MAAM,kBAAkB,GAAG,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC1D,IAAI,kBAAkB,EAAE;YACtB,MAAM,aAAa,GAAG,kBAAwD,CAAC;YAC/E,IAAI,MAAM,CAAC,MAAM,CAAC,kCAAkC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAC7E,IAAI,CAAC,sBAAsB,GAAG,aAAa,CAAC;aAC7C;SACF;QAED,MAAM,YAAY,GAAG,IAAI,mBAAmB,CAAC;YAC3C,YAAY,EAAE,SAAS;YACvB,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,SAAS;SACrB,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAEO,wBAAwB;;QAC9B,mBAAmB;QACnB,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,OAAO;SACR;QAED,yCAAyC;QACzC,IACE,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,IAAI,CAAC,YAAY;YAClB,CAAC,IAAI,CAAC,gBAAgB,EACtB;YACA,OAAO;SACR;QAED,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC;YACjD,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;SACxC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAC3D,IAAI,CAAC,YAAY,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAEjE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAChC,MAAA,IAAI,CAAC,mBAAmB,0CAAE,OAAO,GAAG;QACpC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAC1E,CAAC;IAED,IAAY,iBAAiB;QAC3B,MAAM,gBAAgB,GAA2C;YAC/D,KAAK,EAAE;gBACL,WAAW,EAAE,MAAM;gBACnB,aAAa,EAAE,gDAAgD;gBAC/D,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,MAAM;aACd;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,MAAM;aACd;YACD,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE;gBACV,KAAK,EAAE,SAAS;aACjB;SACF,CAAC;QAEF,MAAM,uBAAuB,GAAsC;YACjE,MAAM,EAAE;gBACN,QAAQ,EAAE,uBAAuB;gBACjC,WAAW,EAAE,aAAa;aAC3B;YACD,GAAG,EAAE;gBACH,QAAQ,EAAE,gBAAgB;gBAC1B,WAAW,EAAE,KAAK;aACnB;YACD,cAAc,EAAE;gBACd,QAAQ,EAAE,uBAAuB;gBACjC,WAAW,EAAE,SAAS;aACvB;SACF,CAAC;QAEF,MAAM,oBAAoB,GAAkC,IAAI,oBAAoB,CAAC;YACnF,MAAM,EAAE,IAAI,CAAC,oBAAoB;YACjC,GAAG,EAAE,IAAI,CAAC,iBAAiB;YAC3B,cAAc,EAAE,IAAI,CAAC,4BAA4B;YACjD,cAAc,EAAE,IAAI,CAAC,qBAAqB;SAC3C,CAAC,CAAC;QAEH,MAAM,MAAM,GAA6B,IAAI,wBAAwB,CAAC;YACpE,gBAAgB;YAChB,uBAAuB;YACvB,oBAAoB;SACrB,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;yBAGU,IAAI,CAAC,WAAW;8BACX,IAAI,CAAC,gBAAgB;yBAC1B,IAAI,CAAC,WAAW;2BACd,IAAI,CAAC,aAAa;0BACnB,IAAI,CAAC,YAAY;mCACR,IAAI,CAAC,qBAAqB;oCACzB,IAAI,CAAC,sBAAsB;iCAC9B,IAAI,CAAC,mBAAmB;qCACpB,IAAI,CAAC,uBAAuB;gCACjC,IAAI,CAAC,kBAAkB;kCACrB,IAAI,CAAC,oBAAoB;8BAC7B,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;;oCAiBf,aAAa,cAAc,IAAI;;;;;oCAK/B,WAAW,cAAc,IAAI;;;oCAG7B,OAAO,cAAc,IAAI;;;;;;;;;;;;;;;;;;;;;;;QAuBrD,IAAI,CAAC,SAAS;KACjB,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,gBAAgB;QACd,yEAAyE;QACzE,8CAA8C;QAC9C,wEAAwE;QACxE,sCAAsC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IACvC,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC;IAEO,uBAAuB,CAAC,CAAc;QAC5C,MAAM,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,eAAkC,CAAC;QACpE,MAAM,uBAAuB,GAAG,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC;QACjE,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;QAC5D,IAAI,SAAS,GAAG,yBAAyB,gBAAgB,EAAE,CAAC;QAC5D,IAAI,oBAAoB,CAAC;QACzB,IAAI,uBAAuB,KAAK,SAAS,EAAE;YACzC,SAAS,GAAG,qBAAqB,gBAAgB,EAAE,CAAC;YACpD,oBAAoB,GAAG,uBAAuB,IAAI,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;SAC5F;QACD,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACjD,CAAC;IAEO,kBAAkB,CAAC,CAAc;QACvC,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC,eAAkC,CAAC;QACrE,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;QAC7D,IAAI,CAAC,QAAQ,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC;IACxD,CAAC;IAEO,oBAAoB,CAAC,CAAc;QACzC,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC,eAAkC,CAAC;QACrE,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;QAC7D,IAAI,CAAC,QAAQ,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,CAAC;IAC1D,CAAC;IAEO,gBAAgB,CAAC,CAAc;QACrC,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC,eAAkC,CAAC;QACrE,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;QAC7D,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,MAAM,MAAM,GAAG,GAAG,gBAAgB,IAAI,KAAK,EAAE,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAC5C,CAAC;IAEO,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACtC,CAAC;IAED;;;;;OAKG;IACK,QAAQ,CAAC,IAAY,EAAE,KAAc;;QAC3C,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,KAAK,EAAE;IACzE,CAAC;IAED;;;;;;;;;;;;OAYG;IACH,IAAY,SAAS;QACnB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCV,CAAC;IACJ,CAAC;CACF,CAAA;AA1f6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAkC;AAEjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAA6B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAyB;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAA8B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAoC;AAEpC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6DAAkD;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAiE;AAEhE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEACmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEACiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAAqD;AAEpD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAsC;AAErC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAgC;AAE/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAoD;AAEnD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAA0C;AAGrE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAC6C;AAEhD;IAAvB,KAAK,CAAC,eAAe,CAAC;4DAAqC;AAE5B;IAA/B,KAAK,CAAC,uBAAuB,CAAC;oEAA+C;AAErD;IAAxB,KAAK,CAAC,gBAAgB,CAAC;iEAA4C;AAEpC;IAA/B,KAAK,CAAC,uBAAuB,CAAC;4EAAuD;AAEnD;IAAlC,KAAK,CAAC,0BAA0B,CAAC;qEAAgD;AAE3D;IAAtB,KAAK,CAAC,cAAc,CAAC;2DAAmC;AA1D9C,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CA2flC;SA3fY,sBAAsB","sourcesContent":["import { LitElement, html, PropertyValues, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport currency from 'currency.js';\nimport {\n  LazyLoaderService,\n  LazyLoaderServiceInterface,\n} from '@internetarchive/lazy-loader-service';\nimport { ModalManagerInterface } from '@internetarchive/modal-manager';\n\nimport { DonationForm } from './donation-form';\nimport { PaymentClients, PaymentClientsInterface } from './braintree-manager/payment-clients';\nimport { BraintreeManager } from './braintree-manager/braintree-manager';\nimport {\n  BraintreeEndpointManagerInterface,\n  BraintreeManagerInterface,\n  HostingEnvironment,\n} from './braintree-manager/braintree-interfaces';\nimport {\n  PaymentFlowHandlers,\n  PaymentFlowHandlersInterface,\n} from './payment-flow-handlers/payment-flow-handlers';\n\nimport { RecaptchaManager, RecaptchaManagerInterface } from './recaptcha-manager/recaptcha-manager';\nimport { HostedFieldConfiguration } from './braintree-manager/payment-providers/credit-card/hosted-field-configuration';\nimport {\n  HostedFieldContainerInterface,\n  HostedFieldContainer,\n} from './braintree-manager/payment-providers/credit-card/hosted-field-container';\n\nimport './form-elements/badged-input';\nimport { ContactForm } from './form-elements/contact-form/contact-form';\nimport './form-elements/contact-form/contact-form';\n\nimport creditCardImg from '@internetarchive/icon-credit-card';\nimport calendarImg from '@internetarchive/icon-calendar';\nimport lockImg from '@internetarchive/icon-lock';\nimport { AnalyticsHandlerInterface } from './@types/analytics-handler';\nimport {\n  EditDonationAmountSelectionLayout,\n  EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nimport {\n  DonationPaymentInfo,\n  PaymentProvider,\n  DonationType,\n  defaultDonationAmounts,\n  defaultSelectedDonationInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { UpsellModalCTAMode } from './modals/upsell-modal-content';\n\n/**\n * The DonationFormController orchestrates several of the interactions between\n * the various pieces of the donation form like modals, braintree, paypal, and recaptcha\n *\n * @export\n * @class RadioPlayerController\n * @extends {LitElement}\n */\n@customElement('donation-form-controller')\nexport class DonationFormController extends LitElement {\n  @property({ type: String }) environment?: HostingEnvironment;\n\n  @property({ type: String }) braintreeAuthToken?: string;\n\n  @property({ type: String }) recaptchaSiteKey?: string;\n\n  @property({ type: String }) venmoProfileId?: string;\n\n  @property({ type: String }) googlePayMerchantId?: string;\n\n  @property({ type: String }) analyticsCategory = 'DonationForm';\n\n  @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n  @property({ type: Object }) donationInfo: DonationPaymentInfo = defaultSelectedDonationInfo;\n\n  @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n    EditDonationAmountSelectionLayout.MultiLine;\n\n  @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n    EditDonationFrequencySelectionMode.Button;\n\n  @property({ type: String }) referrer?: string;\n\n  @property({ type: String }) loggedInUser?: string;\n\n  @property({ type: String }) origin?: string;\n\n  @property({ type: Object }) endpointManager?: BraintreeEndpointManagerInterface;\n\n  @property({ type: Object }) analyticsHandler?: AnalyticsHandlerInterface;\n\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  @property({ type: Object }) recaptchaElement?: HTMLElement;\n\n  @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n  @property({ type: Object }) recaptchaManager?: RecaptchaManagerInterface;\n\n  @property({ type: Object }) paymentFlowHandlers?: PaymentFlowHandlersInterface;\n\n  @property({ type: Object }) paymentClients?: PaymentClientsInterface;\n\n  @property({ type: Object })\n  lazyLoaderService: LazyLoaderServiceInterface = new LazyLoaderService();\n\n  @query('donation-form') private donationForm!: DonationForm;\n\n  @query('#braintree-creditcard') private braintreeNumberInput!: HTMLDivElement;\n\n  @query('#braintree-cvv') private braintreeCVVInput!: HTMLDivElement;\n\n  @query('#braintree-expiration') private braintreeExpirationDateInput!: HTMLDivElement;\n\n  @query('#braintree-error-message') private braintreeErrorMessage!: HTMLDivElement;\n\n  @query('contact-form') private contactForm?: ContactForm;\n\n  /** @inheritdoc */\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('referrer') && this.referrer) {\n      this.braintreeManager?.setReferrer(this.referrer);\n    }\n\n    if (changedProperties.has('loggedInUser') && this.loggedInUser) {\n      this.braintreeManager?.setLoggedInUser(this.loggedInUser);\n    }\n\n    if (changedProperties.has('origin') && this.origin) {\n      this.braintreeManager?.setOrigin(this.origin);\n    }\n\n    if (\n      changedProperties.has('paymentClients') ||\n      changedProperties.has('braintreeAuthToken') ||\n      changedProperties.has('endpointManager') ||\n      changedProperties.has('environment')\n    ) {\n      this.setupBraintreeManager();\n      this.setupRecaptchaManager();\n    }\n\n    if (changedProperties.has('recaptchaSiteKey')) {\n      this.setupRecaptchaManager();\n    }\n\n    if (\n      changedProperties.has('braintreeManager') ||\n      changedProperties.has('recaptchaManager') ||\n      changedProperties.has('modalManager') ||\n      changedProperties.has('recaptchaElement')\n    ) {\n      this.setupPaymentFlowHandlers();\n    }\n\n    if (\n      (changedProperties.has('environment') || changedProperties.has('lazyLoaderService')) &&\n      this.environment\n    ) {\n      this.paymentClients = new PaymentClients(this.lazyLoaderService, this.environment);\n    }\n  }\n\n  async showConfirmationStepDev(options: {\n    donationType: DonationType;\n    amount: number;\n    currencyType: string;\n    cancelDonationCB: Function;\n    confirmDonationCB: Function;\n  }): Promise<void> {\n    this.donationForm.showConfirmationModalDev(options);\n  }\n\n  async showUpsellModalDev(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    this.donationForm.showUpsellModalDev(options);\n  }\n\n  private setupBraintreeManager(): void {\n    if (\n      this.braintreeManager === undefined &&\n      this.braintreeAuthToken &&\n      this.endpointManager &&\n      this.paymentClients &&\n      this.environment\n    ) {\n      this.braintreeManager = new BraintreeManager({\n        paymentClients: this.paymentClients,\n        endpointManager: this.endpointManager,\n        authorizationToken: this.braintreeAuthToken,\n        venmoProfileId: this.venmoProfileId,\n        googlePayMerchantId: this.googlePayMerchantId,\n        hostedFieldConfig: this.hostedFieldConfig,\n        hostingEnvironment: this.environment,\n        referrer: this.referrer,\n        loggedInUser: this.loggedInUser,\n        origin: this.origin,\n      });\n\n      this.braintreeManager.on('paymentProvidersHostedFieldsRetry', (retryNumber: number) => {\n        const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {\n          detail: { retryNumber },\n        });\n        this.dispatchEvent(event);\n      });\n\n      this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error: unknown) => {\n        const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {\n          detail: { error },\n        });\n        this.dispatchEvent(event);\n      });\n    }\n  }\n\n  private recaptchaManagerSetup = false;\n\n  private async setupRecaptchaManager(): Promise<void> {\n    if (!this.recaptchaSiteKey || !this.paymentClients || this.recaptchaManagerSetup) {\n      return;\n    }\n    this.recaptchaManagerSetup = true;\n    const grecaptchaLibrary = await this.paymentClients.recaptchaLibrary.get();\n    this.recaptchaManager = new RecaptchaManager({\n      grecaptchaLibrary: grecaptchaLibrary,\n      siteKey: this.recaptchaSiteKey,\n    });\n  }\n\n  /** @inheritdoc */\n  firstUpdated(): void {\n    this.configureFromQueryParams();\n    this.trackViewedEvent();\n  }\n\n  private configureFromQueryParams(): void {\n    const urlParams = new URLSearchParams(window.location.search);\n\n    let amountOptions = this.amountOptions;\n    const amountOptionsParam = urlParams.get('dollarAmounts');\n    if (amountOptionsParam) {\n      const stripBrackets = amountOptionsParam.slice(1, -1);\n      const splitValues = stripBrackets.split(',');\n      const numberArray = splitValues\n        .map(value => parseFloat(value))\n        .filter(value => !isNaN(value));\n      amountOptions = numberArray;\n    }\n\n    let coverFees = this.donationInfo.coverFees;\n    const coverFeesParam = urlParams.get('coverFees');\n    if (coverFeesParam) {\n      coverFees = coverFeesParam === 'true';\n    }\n\n    let frequency = this.donationInfo.donationType;\n    const frequencyParam = urlParams.get('contrib_type');\n    if (frequencyParam === 'monthly') {\n      frequency = DonationType.Monthly;\n    }\n\n    let amount = this.donationInfo.amount;\n    const amountParam = urlParams.get('amt');\n    if (amountParam) {\n      const parsedAmount = currency(amountParam).value;\n      if (parsedAmount > 0) {\n        amount = parsedAmount;\n      }\n    }\n\n    const amountLayoutParam = urlParams.get('amountLayout');\n    if (amountLayoutParam) {\n      const amountLayout = amountLayoutParam as EditDonationAmountSelectionLayout;\n      if (Object.values(EditDonationAmountSelectionLayout).includes(amountLayout)) {\n        this.amountSelectionLayout = amountLayout;\n      }\n    }\n\n    const frequencyModeParam = urlParams.get('frequencyMode');\n    if (frequencyModeParam) {\n      const frequencyMode = frequencyModeParam as EditDonationFrequencySelectionMode;\n      if (Object.values(EditDonationFrequencySelectionMode).includes(frequencyMode)) {\n        this.frequencySelectionMode = frequencyMode;\n      }\n    }\n\n    const donationInfo = new DonationPaymentInfo({\n      donationType: frequency,\n      amount: amount,\n      coverFees: coverFees,\n    });\n\n    this.amountOptions = amountOptions;\n    this.donationInfo = donationInfo;\n  }\n\n  private setupPaymentFlowHandlers(): void {\n    // only set up once\n    if (this.paymentFlowHandlers) {\n      return;\n    }\n\n    // verify we have all of the dependencies\n    if (\n      !this.braintreeManager ||\n      !this.recaptchaManager ||\n      !this.modalManager ||\n      !this.recaptchaElement\n    ) {\n      return;\n    }\n\n    this.paymentFlowHandlers = new PaymentFlowHandlers({\n      braintreeManager: this.braintreeManager,\n      modalManager: this.modalManager,\n      recaptchaManager: this.recaptchaManager,\n    });\n\n    this.donationForm.braintreeManager = this.braintreeManager;\n    this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;\n\n    this.braintreeManager.startup();\n    this.paymentFlowHandlers?.startup();\n    this.recaptchaManager.setup(this.recaptchaElement, 1, 'light', 'image');\n  }\n\n  private get hostedFieldConfig(): HostedFieldConfiguration {\n    const hostedFieldStyle: Record<string, Record<string, string>> = {\n      input: {\n        'font-size': '16px',\n        'font-family': '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        'font-weight': '700',\n        color: '#333',\n      },\n      ':focus': {\n        color: '#333',\n      },\n      '.valid': {},\n      '.invalid': {\n        color: '#b00b00',\n      },\n    };\n\n    const hostedFieldFieldOptions: braintree.HostedFieldFieldOptions = {\n      number: {\n        selector: '#braintree-creditcard',\n        placeholder: 'Card number',\n      },\n      cvv: {\n        selector: '#braintree-cvv',\n        placeholder: 'CVC',\n      },\n      expirationDate: {\n        selector: '#braintree-expiration',\n        placeholder: 'MM / YY',\n      },\n    };\n\n    const hostedFieldContainer: HostedFieldContainerInterface = new HostedFieldContainer({\n      number: this.braintreeNumberInput,\n      cvv: this.braintreeCVVInput,\n      expirationDate: this.braintreeExpirationDateInput,\n      errorContainer: this.braintreeErrorMessage,\n    });\n\n    const config: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle,\n      hostedFieldFieldOptions,\n      hostedFieldContainer,\n    });\n\n    return config;\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div class=\"donation-form-controller-container\">\n        <donation-form\n          .environment=${this.environment}\n          .braintreeManager=${this.braintreeManager}\n          .contactForm=${this.contactForm}\n          .amountOptions=${this.amountOptions}\n          .donationInfo=${this.donationInfo}\n          .amountSelectionLayout=${this.amountSelectionLayout}\n          .frequencySelectionMode=${this.frequencySelectionMode}\n          @donationInfoChanged=${this.donationInfoChanged}\n          @paymentProviderSelected=${this.paymentProviderSelected}\n          @paymentFlowStarted=${this.paymentFlowStarted}\n          @paymentFlowCancelled=${this.paymentFlowCancelled}\n          @paymentFlowError=${this.paymentFlowError}\n        >\n          <!--\n            Why are these slots here?\n\n            Due to the way Braintree, PayPal, and Recaptcha work, they cannot exist\n            in the shadowDOM so must exist in the clearDOM and get passed\n            in through a <slot>.\n\n            Braintree / PayPal are working on a solution to this. See:\n            - https://github.com/braintree/braintree-web-drop-in/issues/614#issuecomment-616796104\n            - https://github.com/braintree/braintree-web-drop-in/issues/296#issuecomment-616749307\n            - https://github.com/paypal/paypal-checkout-components/issues/353#issuecomment-595956216\n          -->\n          <div slot=\"braintree-hosted-fields\">\n            <div id=\"braintree-error-message\"></div>\n            <div class=\"braintree-row\">\n              <badged-input .icon=${creditCardImg} ?required=${true} class=\"creditcard\">\n                <div class=\"braintree-input\" id=\"braintree-creditcard\"></div>\n              </badged-input>\n            </div>\n            <div class=\"braintree-row\">\n              <badged-input .icon=${calendarImg} ?required=${true} class=\"expiration\">\n                <div class=\"braintree-input\" id=\"braintree-expiration\"></div>\n              </badged-input>\n              <badged-input .icon=${lockImg} ?required=${true} class=\"cvv\">\n                <div class=\"braintree-input\" id=\"braintree-cvv\"></div>\n              </badged-input>\n            </div>\n          </div>\n\n          <!--\n            Form autocompletion does not work in the shadowDOM so\n            we slot the contact form in from the lightDOM and pass\n            in a reference to it in the <donation-form> tag above\n          -->\n          <div slot=\"contact-form\">\n            <contact-form></contact-form>\n          </div>\n\n          <div slot=\"paypal-button\">\n            <div id=\"paypal-button\"></div>\n          </div>\n\n          <slot name=\"recaptcha\" slot=\"recaptcha\"> </slot>\n        </donation-form>\n      </div>\n\n      ${this.getStyles}\n    `;\n  }\n\n  /** @inheritdoc */\n  createRenderRoot(): this {\n    // Render template without shadow DOM. Note that shadow DOM features like\n    // encapsulated CSS and slots are unavailable.\n    // We have to do this to accomodate the PayPal buttons and HostedFields,\n    // which do not work in the shadow DOM\n    return this;\n  }\n\n  private donationInfoChanged(): void {\n    this.logEvent('DonationInfoChanged');\n  }\n\n  private trackViewedEvent(): void {\n    this.logEvent('Viewed');\n  }\n\n  private paymentProviderSelected(e: CustomEvent): void {\n    const paymentProvider = e.detail.paymentProvider as PaymentProvider;\n    const previousPaymentProvider = e.detail.previousPaymentProvider;\n    const providerNoSpaces = this.removeSpaces(paymentProvider);\n    let eventName = `ProviderFirstSelected-${providerNoSpaces}`;\n    let previousProviderInfo;\n    if (previousPaymentProvider !== undefined) {\n      eventName = `ProviderChangedTo-${providerNoSpaces}`;\n      previousProviderInfo = `ProviderChangedFrom-${this.removeSpaces(previousPaymentProvider)}`;\n    }\n    this.logEvent(eventName, previousProviderInfo);\n  }\n\n  private paymentFlowStarted(e: CustomEvent): void {\n    const selectedProvider = e.detail.paymentProvider as PaymentProvider;\n    const providerNoSpaces = this.removeSpaces(selectedProvider);\n    this.logEvent('PaymentFlowStarted', providerNoSpaces);\n  }\n\n  private paymentFlowCancelled(e: CustomEvent): void {\n    const selectedProvider = e.detail.paymentProvider as PaymentProvider;\n    const providerNoSpaces = this.removeSpaces(selectedProvider);\n    this.logEvent('PaymentFlowCancelled', providerNoSpaces);\n  }\n\n  private paymentFlowError(e: CustomEvent): void {\n    const selectedProvider = e.detail.paymentProvider as PaymentProvider;\n    const providerNoSpaces = this.removeSpaces(selectedProvider);\n    const error = e.detail.error;\n    const detail = `${providerNoSpaces}-${error}`;\n    this.logEvent('PaymentFlowError', detail);\n  }\n\n  private removeSpaces(original: string): string {\n    return original.replace(/\\s+/g, '');\n  }\n\n  /**\n   * Log an event\n   *\n   * @param {string} name Name of event\n   * @param {string} label Event label, optional\n   */\n  private logEvent(name: string, label?: string): void {\n    this.analyticsHandler?.send_event(this.analyticsCategory, name, label);\n  }\n\n  /**\n   * This is not the normal LitElement styles block.\n   *\n   * This element uses the clear DOM instead of the shadow DOM, it can't use\n   * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of\n   * the styling local by writing out our own <style> tag and just be careful about\n   * the selectors since they will leak outside of this component.\n   *\n   * @readonly\n   * @private\n   * @type {TemplateResult}\n   * @memberof IADonationFormController\n   */\n  private get getStyles(): TemplateResult {\n    return html`\n      <style>\n        .donation-form-controller-container donation-form:focus {\n          outline: none;\n        }\n\n        .donation-form-controller-container #paypal-button {\n          opacity: 0.001;\n          width: 5rem;\n          height: 3rem;\n          overflow: hidden;\n        }\n\n        .donation-form-controller-container .braintree-row {\n          display: flex;\n          margin-top: -1px;\n        }\n\n        .donation-form-controller-container badged-input {\n          width: 100%;\n        }\n\n        .donation-form-controller-container badged-input.cvv {\n          margin-left: -1px;\n        }\n\n        .donation-form-controller-container .braintree-input {\n          width: 100%;\n          height: 100%;\n        }\n\n        .donation-form-controller-container #braintree-error-message {\n          color: red;\n          font-size: 1.4rem;\n          margin-bottom: 0.6rem;\n        }\n      </style>\n    `;\n  }\n}\n"]}

package/dist/src/donation-form.d.ts

@@ -4,7 +4,7 @@ import './form-elements/header/donation-form-header';
 import { DonationFormHeader } from './form-elements/header/donation-form-header';
 import { PaymentSelector } from './form-elements/payment-selector';
 import { BraintreeManagerInterface } from './braintree-manager/braintree-interfaces';
-import { DonationRequest, DonationPaymentInfo } from '@internetarchive/donation-form-data-models';
+import { DonationRequest, DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';
 import { PaymentFlowHandlersInterface } from './payment-flow-handlers/payment-flow-handlers';
 import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode } from '@internetarchive/donation-form-edit-donation';
 import '@internetarchive/donation-form-section';
@@ -31,6 +31,13 @@ export declare class DonationForm extends LitElement {
     private paypalButtonNeedsRender;
     /** @inheritdoc */
     render(): TemplateResult;
+    showConfirmationModalDev(options: {
+        donationType: DonationType;
+        amount: number;
+        currencyType: string;
+        cancelDonationCB: Function;
+        confirmDonationCB: Function;
+    }): Promise<void>;
     /**
      * This is a developer convenience method that allows us to show the upsell modal without going
      * through the purchasing flow. If it's showing the PayPal button, it will trigger

package/dist/src/donation-form.js

@@ -72,6 +72,12 @@ let DonationForm = class DonationForm extends LitElement {
       <slot name="recaptcha"></slot>
     `;
     }
+    showConfirmationModalDev(options) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            (_a = this.paymentFlowHandlers) === null || _a === void 0 ? void 0 : _a.showConfirmationStepModal(options);
+        });
+    }
     /**
      * This is a developer convenience method that allows us to show the upsell modal without going
      * through the purchasing flow. If it's showing the PayPal button, it will trigger

package/dist/src/donation-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"donation-form.js","sourceRoot":"","sources":["../../src/donation-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport lockImg from '@internetarchive/icon-lock';\n\n// we have to import the registered component independently from the definition below\n// because inside each of these files, we're registering the custom element inside\n// these files and by simply importing the class name, you lose that behavior\n// See https://github.com/microsoft/TypeScript/issues/9191 for more discussion\nimport './form-elements/payment-selector';\nimport './form-elements/header/donation-form-header';\n\nimport { DonationFormHeader } from './form-elements/header/donation-form-header';\nimport { PaymentSelector } from './form-elements/payment-selector';\n\nimport { BraintreeManagerInterface } from './braintree-manager/braintree-interfaces';\n\nimport {\n  DonationRequest,\n  DonationPaymentInfo,\n  PaymentProvider,\n  DonorContactInfo,\n  DonationType,\n  defaultDonationAmounts,\n} from '@internetarchive/donation-form-data-models';\n\nimport { PaymentFlowHandlersInterface } from './payment-flow-handlers/payment-flow-handlers';\n\nimport {\n  EditDonationAmountSelectionLayout,\n  EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nimport '@internetarchive/donation-form-section';\nimport {\n  DonationFormSection,\n  DonationFormSectionBadgeMode,\n} from '@internetarchive/donation-form-section';\nimport { UpsellModalCTAMode } from './modals/upsell-modal-content';\nimport { ContactForm } from './form-elements/contact-form/contact-form';\nimport './form-elements/total-amount';\n\n@customElement('donation-form')\nexport class DonationForm extends LitElement {\n  @property({ type: Object }) braintreeManager: BraintreeManagerInterface | undefined;\n\n  @property({ type: Object }) paymentFlowHandlers: PaymentFlowHandlersInterface | undefined;\n\n  @property({ type: Object }) donationRequest: DonationRequest | undefined;\n\n  @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n  @property({ type: Object }) contactForm?: ContactForm;\n\n  @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n  @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n    EditDonationAmountSelectionLayout.MultiLine;\n\n  @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n    EditDonationFrequencySelectionMode.Button;\n\n  @property({ type: Boolean }) private creditCardVisible = false;\n\n  @property({ type: Boolean }) private contactFormVisible = false;\n\n  @property({ type: Boolean }) private donationInfoValid = true;\n\n  @property({ type: String }) private selectedPaymentProvider?: PaymentProvider;\n\n  @query('#contactFormSection') contactFormSection?: DonationFormSection;\n\n  @query('donation-form-header') donationFormHeader!: DonationFormHeader;\n\n  @query('payment-selector') paymentSelector!: PaymentSelector;\n\n  private paypalButtonNeedsRender = true;\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <donation-form-header\n        .amountOptions=${this.amountOptions}\n        .amountSelectionLayout=${this.amountSelectionLayout}\n        .frequencySelectionMode=${this.frequencySelectionMode}\n        @donationInfoChanged=${this.donationInfoChanged}\n        @editDonationError=${this.editDonationError}\n      >\n      </donation-form-header>\n\n      <donation-form-section\n        .badgeMode=${DonationFormSectionBadgeMode.HideBadgeLeaveSpacing}\n        id=\"total-amount-section\"\n      >\n        <donation-form-total-amount .donationInfo=${this.donationInfo}>\n        </donation-form-total-amount>\n      </donation-form-section>\n\n      <donation-form-section\n        .sectionBadge=${this.paymentSelectorNumberingStart}\n        headline=\"Choose a payment method\"\n      >\n        <payment-selector\n          .paymentProviders=${this.braintreeManager?.paymentProviders}\n          @firstUpdated=${this.paymentSelectorFirstUpdated}\n          @creditCardSelected=${this.creditCardSelected}\n          @venmoSelected=${this.venmoSelected}\n          @applePaySelected=${this.applePaySelected}\n          @googlePaySelected=${this.googlePaySelected}\n          @paypalBlockerSelected=${this.paypalBlockerSelected}\n          tabindex=\"0\"\n        >\n          <slot name=\"paypal-button\" slot=\"paypal-button\"></slot>\n        </payment-selector>\n      </donation-form-section>\n\n      <div class=\"contact-form-section ${this.contactFormVisible ? '' : 'hidden'}\">\n        ${this.contactFormSectionTemplate}\n      </div>\n      <slot name=\"recaptcha\"></slot>\n    `;\n  }\n\n  /**\n   * This is a developer convenience method that allows us to show the upsell modal without going\n   * through the purchasing flow. If it's showing the PayPal button, it will trigger\n   * the PayPal button render\n   *\n   * @param {{\n   *     oneTimeAmount: number;\n   *     ctaMode?: UpsellModalCTAMode;\n   *     yesSelected?: (amount: number) => void;\n   *     noSelected?: () => void;\n   *     amountChanged?: (amount: number) => void;\n   *     userClosedModalCallback?: () => void;\n   *   }} options\n   * @returns {Promise<void>}\n   * @memberof DonationForm\n   */\n  async showUpsellModalDev(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    this.paymentFlowHandlers?.showUpsellModal(options);\n\n    if (options.ctaMode === UpsellModalCTAMode.PayPalUpsellSlot) {\n      const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();\n      const donationInfo = new DonationPaymentInfo({\n        amount: options.oneTimeAmount,\n        donationType: DonationType.OneTime,\n        coverFees: false,\n      });\n      handler?.renderPayPalButton({\n        selector: '#paypal-upsell-button',\n        style: {\n          color: 'blue' as paypal.ButtonColorOption,\n          label: 'paypal' as paypal.ButtonLabelOption,\n          shape: 'rect' as paypal.ButtonShapeOption,\n          size: 'responsive' as paypal.ButtonSizeOption,\n          tagline: false,\n        },\n        donationInfo: donationInfo,\n      });\n    }\n  }\n\n  get contactFormSectionTemplate(): TemplateResult {\n    return html`\n      <donation-form-section\n        .sectionBadge=${this.paymentSelectorNumberingStart + 1}\n        headline=\"Enter payment information\"\n        id=\"contactFormSection\"\n      >\n        <slot name=\"contact-form\"></slot>\n        <div class=\"credit-card-fields\" class=\"${this.creditCardVisible ? '' : 'hidden'}\">\n          <slot name=\"braintree-hosted-fields\"></slot>\n        </div>\n      </donation-form-section>\n\n      <donation-form-section .sectionBadge=${this.paymentSelectorNumberingStart + 2}>\n        <slot name=\"recaptcha\"></slot>\n        <button id=\"donate-button\" @click=${this.donateClicked}>\n          Donate\n        </button>\n\n        <div class=\"secure-process-note\">\n          ${lockImg} Your payment will be securely processed\n        </div>\n      </donation-form-section>\n    `;\n  }\n\n  /**\n   * Where to start the numbering of the payment selector\n   *\n   * - If we show the frequency selector in button mode, it becomes section 1, which makes\n   * the amount selection section 2, and the payment selector section 3.\n   * - If we show the frequency selector in checkbox mode, it is no longer section 1. The amount\n   * selector becomes section 1 and the payment selector becomes section 2.\n   *\n   * Visually:\n   *\n   * Button Mode:\n   * 1. Frequency selector\n   * 2. Amount selector\n   * 3. Payment selector\n   * 4. Contact info\n   * 5. Donate button\n   *\n   * Checkbox Mode:\n   * 1. Amount selector (including the monthly checkbox)\n   * 2. Payment selector <-- changes from 3 to 2\n   * 3. Contact info <-- changes from 4 to 3\n   * 4. Donate button <-- changes from 5 to 4\n   *\n   * @readonly\n   * @private\n   * @type {number}\n   * @memberof DonationForm\n   */\n  private get paymentSelectorNumberingStart(): number {\n    return this.frequencySelectionMode === EditDonationFrequencySelectionMode.Button ? 3 : 2;\n  }\n\n  private editDonationError(): void {\n    this.donationInfoValid = false;\n  }\n\n  private paymentSelectorFirstUpdated(): void {\n    if (this.paymentFlowHandlers?.paypalHandler) {\n      this.renderPayPalButtonIfNeeded();\n    }\n  }\n\n  private applePaySelected(e: CustomEvent): void {\n    this.selectedPaymentProvider = PaymentProvider.ApplePay;\n    this.contactFormVisible = false;\n    this.creditCardVisible = false;\n\n    if (!this.donationInfoValid) {\n      this.showInvalidDonationInfoAlert();\n      return;\n    }\n\n    const originalEvent = e.detail.originalEvent;\n    this.donationInfo &&\n      this.paymentFlowHandlers?.applePayHandler?.paymentInitiated(this.donationInfo, originalEvent);\n    this.emitPaymentFlowStartedEvent();\n  }\n\n  private googlePaySelected(): void {\n    this.selectedPaymentProvider = PaymentProvider.GooglePay;\n    this.contactFormVisible = false;\n    this.creditCardVisible = false;\n\n    if (!this.donationInfoValid) {\n      this.showInvalidDonationInfoAlert();\n    } else {\n      this.donationInfo &&\n        this.paymentFlowHandlers?.googlePayHandler?.paymentInitiated(this.donationInfo);\n      this.emitPaymentFlowStartedEvent();\n    }\n  }\n\n  private async creditCardSelected(): Promise<void> {\n    if (!this.donationInfoValid) {\n      this.showInvalidDonationInfoAlert();\n      return;\n    }\n    this.selectedPaymentProvider = PaymentProvider.CreditCard;\n    this.contactFormVisible = true;\n    this.creditCardVisible = true;\n    this.focusContactForm();\n  }\n\n  private async venmoSelected(): Promise<void> {\n    if (!this.donationInfoValid) {\n      this.showInvalidDonationInfoAlert();\n      return;\n    }\n    this.selectedPaymentProvider = PaymentProvider.Venmo;\n    this.contactFormVisible = true;\n    this.creditCardVisible = false;\n    this.focusContactForm();\n  }\n\n  private paypalBlockerSelected(): void {\n    this.contactFormVisible = false;\n    this.creditCardVisible = false;\n    this.showInvalidDonationInfoAlert();\n  }\n\n  private async focusContactForm(): Promise<void> {\n    await this.updateComplete;\n    if (this.contactFormSection) {\n      this.contactForm?.focus();\n    }\n  }\n\n  private async donateClicked(): Promise<void> {\n    if (!this.contactForm) {\n      alert('Please enter contact info.');\n      return;\n    }\n    if (!this.donationInfoValid || !this.donationInfo) {\n      this.showInvalidDonationInfoAlert();\n      return;\n    }\n\n    const contactInfo = this.contactForm.donorContactInfo;\n\n    switch (this.selectedPaymentProvider) {\n      case PaymentProvider.CreditCard:\n        this.handleCreditCardDonationFlow(contactInfo, this.donationInfo);\n        break;\n      case PaymentProvider.Venmo:\n        this.handleVenmoDonationFlow(contactInfo, this.donationInfo);\n        break;\n    }\n  }\n\n  private async handleCreditCardDonationFlow(\n    contactInfo: DonorContactInfo,\n    donationInfo: DonationPaymentInfo,\n  ): Promise<void> {\n    const creditCardFlowHandler = this.paymentFlowHandlers?.creditCardHandler;\n    const creditCardHandler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n    creditCardHandler?.hideErrorMessage();\n    const valid = this.contactForm?.reportValidity();\n    const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n\n    if (!valid || hostedFieldsResponse === undefined) {\n      return;\n    }\n\n    this.emitPaymentFlowStartedEvent();\n    creditCardFlowHandler?.paymentInitiated(hostedFieldsResponse, donationInfo, contactInfo);\n  }\n\n  private async handleVenmoDonationFlow(\n    contactInfo: DonorContactInfo,\n    donationInfo: DonationPaymentInfo,\n  ): Promise<void> {\n    const valid = this.contactForm?.reportValidity();\n    if (!valid) {\n      return;\n    }\n    this.paymentFlowHandlers?.venmoHandler?.paymentInitiated(contactInfo, donationInfo);\n  }\n\n  private emitPaymentFlowStartedEvent(): void {\n    if (!this.selectedPaymentProvider) {\n      return;\n    }\n    const event = new CustomEvent('paymentFlowStarted', {\n      detail: { paymentProvider: this.selectedPaymentProvider },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private emitPaymentFlowCancelledEvent(): void {\n    if (!this.selectedPaymentProvider) {\n      return;\n    }\n    const event = new CustomEvent('paymentFlowCancelled', {\n      detail: { paymentProvider: this.selectedPaymentProvider },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private emitPaymentFlowErrorEvent(error?: string): void {\n    if (!this.selectedPaymentProvider) {\n      return;\n    }\n    const event = new CustomEvent('paymentFlowError', {\n      detail: { paymentProvider: this.selectedPaymentProvider, error: error },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private showInvalidDonationInfoAlert(): void {\n    alert('Please enter a valid donation amount.');\n  }\n\n  private async renderPayPalButtonIfNeeded(): Promise<void> {\n    if (!this.paypalButtonNeedsRender) {\n      return;\n    }\n    this.paypalButtonNeedsRender = false;\n    this.donationInfo &&\n      (await this.paymentFlowHandlers?.paypalHandler?.renderPayPalButton(this.donationInfo));\n    this.paymentSelector.showPaypalButton();\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('donationInfo') && this.donationInfo) {\n      // The PayPal button has a standalone datasource since we don't initiate the payment\n      // through code so it has to have the donation info ready when the user taps the button.\n      this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);\n      this.donationFormHeader.donationInfo = this.donationInfo;\n    }\n\n    if (\n      (changedProperties.has('paymentFlowHandlers') || changedProperties.has('donationInfo')) &&\n      this.donationInfo &&\n      this.paymentFlowHandlers\n    ) {\n      this.setupFlowHandlers();\n    }\n\n    if (changedProperties.has('donationInfoValid')) {\n      this.paymentSelector.donationInfoValid = this.donationInfoValid;\n    }\n\n    if (changedProperties.has('selectedPaymentProvider')) {\n      const event = new CustomEvent('paymentProviderSelected', {\n        detail: {\n          paymentProvider: this.selectedPaymentProvider,\n          previousPaymentProvider: changedProperties.get('selectedPaymentProvider'),\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  private flowHandlersConfigured = false;\n\n  private setupFlowHandlers(): void {\n    if (this.flowHandlersConfigured) {\n      return;\n    }\n    this.flowHandlersConfigured = true;\n    this.bindFlowListenerEvents();\n    this.renderPayPalButtonIfNeeded();\n    this.donationInfo &&\n      this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);\n  }\n\n  private flowHandlerListenersBound = false;\n\n  private bindFlowListenerEvents(): void {\n    if (this.flowHandlerListenersBound) {\n      return;\n    }\n    this.flowHandlerListenersBound = true;\n\n    this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentStarted', () => {\n      this.selectedPaymentProvider = PaymentProvider.PayPal;\n      this.emitPaymentFlowStartedEvent();\n    });\n    this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentCancelled', () => {\n      this.selectedPaymentProvider = PaymentProvider.PayPal;\n      this.emitPaymentFlowCancelledEvent();\n    });\n    this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentError', (datasource, error) => {\n      this.selectedPaymentProvider = PaymentProvider.PayPal;\n      this.emitPaymentFlowErrorEvent(error);\n    });\n\n    this.paymentFlowHandlers?.googlePayHandler?.on('paymentCancelled', () => {\n      this.selectedPaymentProvider = PaymentProvider.GooglePay;\n      this.emitPaymentFlowCancelledEvent();\n    });\n  }\n\n  private donationInfoChanged(e: CustomEvent): void {\n    const donationInfo: DonationPaymentInfo = e.detail.donationInfo;\n    this.donationInfo = new DonationPaymentInfo({\n      amount: donationInfo.amount,\n      donationType: donationInfo.donationType,\n      coverFees: donationInfo.coverFees,\n    });\n    this.donationInfoValid = true;\n    const event = new CustomEvent('donationInfoChanged', { detail: { donationInfo } });\n    this.dispatchEvent(event);\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const donateButtonFontSize = css`var(--donateButtonFontSize, 2.6rem)`;\n    const donateButtonHeight = css`var(--donateButtonHeight, 4rem)`;\n    const donateButtonColor = css`var(--donateButtonColor, rgba(49, 164, 129, 1))`;\n    const donateButtonHoverColor = css`var(--donateButtonHoverColor, rgba(39, 131, 103, 1))`;\n    const totalAmountTopMargin = css`var(--donateTotalAmountTopMargin, 1.5rem)`;\n    const totalAmountBottomMargin = css`var(--donateTotalAmountBottomMargin, 1.2rem)`;\n\n    return css`\n      h1 {\n        margin: 0;\n        padding: 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .secure-process-note {\n        margin-top: 0.5em;\n        font-size: 0.75em;\n        text-align: center;\n      }\n\n      .secure-process-note svg {\n        width: 1.2rem;\n        height: 1.5rem;\n        vertical-align: bottom;\n      }\n\n      #donate-button {\n        width: 100%;\n        appearance: none;\n        -webkit-appearance: none;\n        font-size: ${donateButtonFontSize};\n        font-weight: bold;\n        text-align: center;\n        color: #fff;\n        cursor: pointer;\n        border: none;\n        border-radius: 5px;\n        background-color: ${donateButtonColor};\n        padding-top: 0.5rem;\n        padding-bottom: 0.5rem;\n        height: ${donateButtonHeight};\n      }\n\n      #donate-button:hover {\n        background-color: ${donateButtonHoverColor};\n      }\n\n      #total-amount-section {\n        display: block;\n        margin-top: ${totalAmountTopMargin};\n        margin-bottom: ${totalAmountBottomMargin};\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"donation-form.js","sourceRoot":"","sources":["../../src/donation-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport lockImg from '@internetarchive/icon-lock';\n\n// we have to import the registered component independently from the definition below\n// because inside each of these files, we're registering the custom element inside\n// these files and by simply importing the class name, you lose that behavior\n// See https://github.com/microsoft/TypeScript/issues/9191 for more discussion\nimport './form-elements/payment-selector';\nimport './form-elements/header/donation-form-header';\n\nimport { DonationFormHeader } from './form-elements/header/donation-form-header';\nimport { PaymentSelector } from './form-elements/payment-selector';\n\nimport { BraintreeManagerInterface } from './braintree-manager/braintree-interfaces';\n\nimport {\n  DonationRequest,\n  DonationPaymentInfo,\n  PaymentProvider,\n  DonorContactInfo,\n  DonationType,\n  defaultDonationAmounts,\n} from '@internetarchive/donation-form-data-models';\n\nimport { PaymentFlowHandlersInterface } from './payment-flow-handlers/payment-flow-handlers';\n\nimport {\n  EditDonationAmountSelectionLayout,\n  EditDonationFrequencySelectionMode,\n} from '@internetarchive/donation-form-edit-donation';\n\nimport '@internetarchive/donation-form-section';\nimport {\n  DonationFormSection,\n  DonationFormSectionBadgeMode,\n} from '@internetarchive/donation-form-section';\nimport { UpsellModalCTAMode } from './modals/upsell-modal-content';\nimport { ContactForm } from './form-elements/contact-form/contact-form';\nimport './form-elements/total-amount';\n\n@customElement('donation-form')\nexport class DonationForm extends LitElement {\n  @property({ type: Object }) braintreeManager: BraintreeManagerInterface | undefined;\n\n  @property({ type: Object }) paymentFlowHandlers: PaymentFlowHandlersInterface | undefined;\n\n  @property({ type: Object }) donationRequest: DonationRequest | undefined;\n\n  @property({ type: Object }) donationInfo?: DonationPaymentInfo;\n\n  @property({ type: Object }) contactForm?: ContactForm;\n\n  @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n  @property({ type: String }) amountSelectionLayout: EditDonationAmountSelectionLayout =\n    EditDonationAmountSelectionLayout.MultiLine;\n\n  @property({ type: String }) frequencySelectionMode: EditDonationFrequencySelectionMode =\n    EditDonationFrequencySelectionMode.Button;\n\n  @property({ type: Boolean }) private creditCardVisible = false;\n\n  @property({ type: Boolean }) private contactFormVisible = false;\n\n  @property({ type: Boolean }) private donationInfoValid = true;\n\n  @property({ type: String }) private selectedPaymentProvider?: PaymentProvider;\n\n  @query('#contactFormSection') contactFormSection?: DonationFormSection;\n\n  @query('donation-form-header') donationFormHeader!: DonationFormHeader;\n\n  @query('payment-selector') paymentSelector!: PaymentSelector;\n\n  private paypalButtonNeedsRender = true;\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <donation-form-header\n        .amountOptions=${this.amountOptions}\n        .amountSelectionLayout=${this.amountSelectionLayout}\n        .frequencySelectionMode=${this.frequencySelectionMode}\n        @donationInfoChanged=${this.donationInfoChanged}\n        @editDonationError=${this.editDonationError}\n      >\n      </donation-form-header>\n\n      <donation-form-section\n        .badgeMode=${DonationFormSectionBadgeMode.HideBadgeLeaveSpacing}\n        id=\"total-amount-section\"\n      >\n        <donation-form-total-amount .donationInfo=${this.donationInfo}>\n        </donation-form-total-amount>\n      </donation-form-section>\n\n      <donation-form-section\n        .sectionBadge=${this.paymentSelectorNumberingStart}\n        headline=\"Choose a payment method\"\n      >\n        <payment-selector\n          .paymentProviders=${this.braintreeManager?.paymentProviders}\n          @firstUpdated=${this.paymentSelectorFirstUpdated}\n          @creditCardSelected=${this.creditCardSelected}\n          @venmoSelected=${this.venmoSelected}\n          @applePaySelected=${this.applePaySelected}\n          @googlePaySelected=${this.googlePaySelected}\n          @paypalBlockerSelected=${this.paypalBlockerSelected}\n          tabindex=\"0\"\n        >\n          <slot name=\"paypal-button\" slot=\"paypal-button\"></slot>\n        </payment-selector>\n      </donation-form-section>\n\n      <div class=\"contact-form-section ${this.contactFormVisible ? '' : 'hidden'}\">\n        ${this.contactFormSectionTemplate}\n      </div>\n      <slot name=\"recaptcha\"></slot>\n    `;\n  }\n\n    async showConfirmationModalDev(options: {\n      donationType: DonationType;\n      amount: number;\n      currencyType: string;\n      cancelDonationCB: Function;\n      confirmDonationCB: Function;\n    }): Promise<void> {\n      this.paymentFlowHandlers?.showConfirmationStepModal(options);\n    }\n\n  /**\n   * This is a developer convenience method that allows us to show the upsell modal without going\n   * through the purchasing flow. If it's showing the PayPal button, it will trigger\n   * the PayPal button render\n   *\n   * @param {{\n   *     oneTimeAmount: number;\n   *     ctaMode?: UpsellModalCTAMode;\n   *     yesSelected?: (amount: number) => void;\n   *     noSelected?: () => void;\n   *     amountChanged?: (amount: number) => void;\n   *     userClosedModalCallback?: () => void;\n   *   }} options\n   * @returns {Promise<void>}\n   * @memberof DonationForm\n   */\n  async showUpsellModalDev(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    this.paymentFlowHandlers?.showUpsellModal(options);\n\n    if (options.ctaMode === UpsellModalCTAMode.PayPalUpsellSlot) {\n      const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();\n      const donationInfo = new DonationPaymentInfo({\n        amount: options.oneTimeAmount,\n        donationType: DonationType.OneTime,\n        coverFees: false,\n      });\n      handler?.renderPayPalButton({\n        selector: '#paypal-upsell-button',\n        style: {\n          color: 'blue' as paypal.ButtonColorOption,\n          label: 'paypal' as paypal.ButtonLabelOption,\n          shape: 'rect' as paypal.ButtonShapeOption,\n          size: 'responsive' as paypal.ButtonSizeOption,\n          tagline: false,\n        },\n        donationInfo: donationInfo,\n      });\n    }\n  }\n\n  get contactFormSectionTemplate(): TemplateResult {\n    return html`\n      <donation-form-section\n        .sectionBadge=${this.paymentSelectorNumberingStart + 1}\n        headline=\"Enter payment information\"\n        id=\"contactFormSection\"\n      >\n        <slot name=\"contact-form\"></slot>\n        <div class=\"credit-card-fields\" class=\"${this.creditCardVisible ? '' : 'hidden'}\">\n          <slot name=\"braintree-hosted-fields\"></slot>\n        </div>\n      </donation-form-section>\n\n      <donation-form-section .sectionBadge=${this.paymentSelectorNumberingStart + 2}>\n        <slot name=\"recaptcha\"></slot>\n        <button id=\"donate-button\" @click=${this.donateClicked}>\n          Donate\n        </button>\n\n        <div class=\"secure-process-note\">\n          ${lockImg} Your payment will be securely processed\n        </div>\n      </donation-form-section>\n    `;\n  }\n\n  /**\n   * Where to start the numbering of the payment selector\n   *\n   * - If we show the frequency selector in button mode, it becomes section 1, which makes\n   * the amount selection section 2, and the payment selector section 3.\n   * - If we show the frequency selector in checkbox mode, it is no longer section 1. The amount\n   * selector becomes section 1 and the payment selector becomes section 2.\n   *\n   * Visually:\n   *\n   * Button Mode:\n   * 1. Frequency selector\n   * 2. Amount selector\n   * 3. Payment selector\n   * 4. Contact info\n   * 5. Donate button\n   *\n   * Checkbox Mode:\n   * 1. Amount selector (including the monthly checkbox)\n   * 2. Payment selector <-- changes from 3 to 2\n   * 3. Contact info <-- changes from 4 to 3\n   * 4. Donate button <-- changes from 5 to 4\n   *\n   * @readonly\n   * @private\n   * @type {number}\n   * @memberof DonationForm\n   */\n  private get paymentSelectorNumberingStart(): number {\n    return this.frequencySelectionMode === EditDonationFrequencySelectionMode.Button ? 3 : 2;\n  }\n\n  private editDonationError(): void {\n    this.donationInfoValid = false;\n  }\n\n  private paymentSelectorFirstUpdated(): void {\n    if (this.paymentFlowHandlers?.paypalHandler) {\n      this.renderPayPalButtonIfNeeded();\n    }\n  }\n\n  private applePaySelected(e: CustomEvent): void {\n    this.selectedPaymentProvider = PaymentProvider.ApplePay;\n    this.contactFormVisible = false;\n    this.creditCardVisible = false;\n\n    if (!this.donationInfoValid) {\n      this.showInvalidDonationInfoAlert();\n      return;\n    }\n\n    const originalEvent = e.detail.originalEvent;\n    this.donationInfo &&\n      this.paymentFlowHandlers?.applePayHandler?.paymentInitiated(this.donationInfo, originalEvent);\n    this.emitPaymentFlowStartedEvent();\n  }\n\n  private googlePaySelected(): void {\n    this.selectedPaymentProvider = PaymentProvider.GooglePay;\n    this.contactFormVisible = false;\n    this.creditCardVisible = false;\n\n    if (!this.donationInfoValid) {\n      this.showInvalidDonationInfoAlert();\n    } else {\n      this.donationInfo &&\n        this.paymentFlowHandlers?.googlePayHandler?.paymentInitiated(this.donationInfo);\n      this.emitPaymentFlowStartedEvent();\n    }\n  }\n\n  private async creditCardSelected(): Promise<void> {\n    if (!this.donationInfoValid) {\n      this.showInvalidDonationInfoAlert();\n      return;\n    }\n    this.selectedPaymentProvider = PaymentProvider.CreditCard;\n    this.contactFormVisible = true;\n    this.creditCardVisible = true;\n    this.focusContactForm();\n  }\n\n  private async venmoSelected(): Promise<void> {\n    if (!this.donationInfoValid) {\n      this.showInvalidDonationInfoAlert();\n      return;\n    }\n    this.selectedPaymentProvider = PaymentProvider.Venmo;\n    this.contactFormVisible = true;\n    this.creditCardVisible = false;\n    this.focusContactForm();\n  }\n\n  private paypalBlockerSelected(): void {\n    this.contactFormVisible = false;\n    this.creditCardVisible = false;\n    this.showInvalidDonationInfoAlert();\n  }\n\n  private async focusContactForm(): Promise<void> {\n    await this.updateComplete;\n    if (this.contactFormSection) {\n      this.contactForm?.focus();\n    }\n  }\n\n  private async donateClicked(): Promise<void> {\n    if (!this.contactForm) {\n      alert('Please enter contact info.');\n      return;\n    }\n    if (!this.donationInfoValid || !this.donationInfo) {\n      this.showInvalidDonationInfoAlert();\n      return;\n    }\n\n    const contactInfo = this.contactForm.donorContactInfo;\n\n    switch (this.selectedPaymentProvider) {\n      case PaymentProvider.CreditCard:\n        this.handleCreditCardDonationFlow(contactInfo, this.donationInfo);\n        break;\n      case PaymentProvider.Venmo:\n        this.handleVenmoDonationFlow(contactInfo, this.donationInfo);\n        break;\n    }\n  }\n\n  private async handleCreditCardDonationFlow(\n    contactInfo: DonorContactInfo,\n    donationInfo: DonationPaymentInfo,\n  ): Promise<void> {\n    const creditCardFlowHandler = this.paymentFlowHandlers?.creditCardHandler;\n    const creditCardHandler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n    creditCardHandler?.hideErrorMessage();\n    const valid = this.contactForm?.reportValidity();\n    const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n\n    if (!valid || hostedFieldsResponse === undefined) {\n      return;\n    }\n\n    this.emitPaymentFlowStartedEvent();\n    creditCardFlowHandler?.paymentInitiated(hostedFieldsResponse, donationInfo, contactInfo);\n  }\n\n  private async handleVenmoDonationFlow(\n    contactInfo: DonorContactInfo,\n    donationInfo: DonationPaymentInfo,\n  ): Promise<void> {\n    const valid = this.contactForm?.reportValidity();\n    if (!valid) {\n      return;\n    }\n    this.paymentFlowHandlers?.venmoHandler?.paymentInitiated(contactInfo, donationInfo);\n  }\n\n  private emitPaymentFlowStartedEvent(): void {\n    if (!this.selectedPaymentProvider) {\n      return;\n    }\n    const event = new CustomEvent('paymentFlowStarted', {\n      detail: { paymentProvider: this.selectedPaymentProvider },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private emitPaymentFlowCancelledEvent(): void {\n    if (!this.selectedPaymentProvider) {\n      return;\n    }\n    const event = new CustomEvent('paymentFlowCancelled', {\n      detail: { paymentProvider: this.selectedPaymentProvider },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private emitPaymentFlowErrorEvent(error?: string): void {\n    if (!this.selectedPaymentProvider) {\n      return;\n    }\n    const event = new CustomEvent('paymentFlowError', {\n      detail: { paymentProvider: this.selectedPaymentProvider, error: error },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private showInvalidDonationInfoAlert(): void {\n    alert('Please enter a valid donation amount.');\n  }\n\n  private async renderPayPalButtonIfNeeded(): Promise<void> {\n    if (!this.paypalButtonNeedsRender) {\n      return;\n    }\n    this.paypalButtonNeedsRender = false;\n    this.donationInfo &&\n      (await this.paymentFlowHandlers?.paypalHandler?.renderPayPalButton(this.donationInfo));\n    this.paymentSelector.showPaypalButton();\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('donationInfo') && this.donationInfo) {\n      // The PayPal button has a standalone datasource since we don't initiate the payment\n      // through code so it has to have the donation info ready when the user taps the button.\n      this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);\n      this.donationFormHeader.donationInfo = this.donationInfo;\n    }\n\n    if (\n      (changedProperties.has('paymentFlowHandlers') || changedProperties.has('donationInfo')) &&\n      this.donationInfo &&\n      this.paymentFlowHandlers\n    ) {\n      this.setupFlowHandlers();\n    }\n\n    if (changedProperties.has('donationInfoValid')) {\n      this.paymentSelector.donationInfoValid = this.donationInfoValid;\n    }\n\n    if (changedProperties.has('selectedPaymentProvider')) {\n      const event = new CustomEvent('paymentProviderSelected', {\n        detail: {\n          paymentProvider: this.selectedPaymentProvider,\n          previousPaymentProvider: changedProperties.get('selectedPaymentProvider'),\n        },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n\n  private flowHandlersConfigured = false;\n\n  private setupFlowHandlers(): void {\n    if (this.flowHandlersConfigured) {\n      return;\n    }\n    this.flowHandlersConfigured = true;\n    this.bindFlowListenerEvents();\n    this.renderPayPalButtonIfNeeded();\n    this.donationInfo &&\n      this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);\n  }\n\n  private flowHandlerListenersBound = false;\n\n  private bindFlowListenerEvents(): void {\n    if (this.flowHandlerListenersBound) {\n      return;\n    }\n    this.flowHandlerListenersBound = true;\n\n    this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentStarted', () => {\n      this.selectedPaymentProvider = PaymentProvider.PayPal;\n      this.emitPaymentFlowStartedEvent();\n    });\n    this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentCancelled', () => {\n      this.selectedPaymentProvider = PaymentProvider.PayPal;\n      this.emitPaymentFlowCancelledEvent();\n    });\n    this.paymentFlowHandlers?.paypalHandler?.on('payPalPaymentError', (datasource, error) => {\n      this.selectedPaymentProvider = PaymentProvider.PayPal;\n      this.emitPaymentFlowErrorEvent(error);\n    });\n\n    this.paymentFlowHandlers?.googlePayHandler?.on('paymentCancelled', () => {\n      this.selectedPaymentProvider = PaymentProvider.GooglePay;\n      this.emitPaymentFlowCancelledEvent();\n    });\n  }\n\n  private donationInfoChanged(e: CustomEvent): void {\n    const donationInfo: DonationPaymentInfo = e.detail.donationInfo;\n    this.donationInfo = new DonationPaymentInfo({\n      amount: donationInfo.amount,\n      donationType: donationInfo.donationType,\n      coverFees: donationInfo.coverFees,\n    });\n    this.donationInfoValid = true;\n    const event = new CustomEvent('donationInfoChanged', { detail: { donationInfo } });\n    this.dispatchEvent(event);\n  }\n\n  /** @inheritdoc */\n  static get styles(): CSSResult {\n    const donateButtonFontSize = css`var(--donateButtonFontSize, 2.6rem)`;\n    const donateButtonHeight = css`var(--donateButtonHeight, 4rem)`;\n    const donateButtonColor = css`var(--donateButtonColor, rgba(49, 164, 129, 1))`;\n    const donateButtonHoverColor = css`var(--donateButtonHoverColor, rgba(39, 131, 103, 1))`;\n    const totalAmountTopMargin = css`var(--donateTotalAmountTopMargin, 1.5rem)`;\n    const totalAmountBottomMargin = css`var(--donateTotalAmountBottomMargin, 1.2rem)`;\n\n    return css`\n      h1 {\n        margin: 0;\n        padding: 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .secure-process-note {\n        margin-top: 0.5em;\n        font-size: 0.75em;\n        text-align: center;\n      }\n\n      .secure-process-note svg {\n        width: 1.2rem;\n        height: 1.5rem;\n        vertical-align: bottom;\n      }\n\n      #donate-button {\n        width: 100%;\n        appearance: none;\n        -webkit-appearance: none;\n        font-size: ${donateButtonFontSize};\n        font-weight: bold;\n        text-align: center;\n        color: #fff;\n        cursor: pointer;\n        border: none;\n        border-radius: 5px;\n        background-color: ${donateButtonColor};\n        padding-top: 0.5rem;\n        padding-bottom: 0.5rem;\n        height: ${donateButtonHeight};\n      }\n\n      #donate-button:hover {\n        background-color: ${donateButtonHoverColor};\n      }\n\n      #total-amount-section {\n        display: block;\n        margin-top: ${totalAmountTopMargin};\n        margin-bottom: ${totalAmountBottomMargin};\n      }\n    `;\n  }\n}\n"]}

package/dist/src/modals/confirm-donation-modal-content.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+import { DonationType } from '@internetarchive/donation-form-data-models';
+/**
+ * This is the content that we show in the upsell modal.
+ *
+ * It has an amount input, "Yes" and "No Thanks" options and a switch to optionally
+ * show the PayPal upsell button.
+ *
+ * @export
+ * @class ConfirmDonationContent
+ * @extends {LitElement}
+ */
+export declare class ConfirmDonationContent extends LitElement {
+    amount: number;
+    currencyType: string;
+    donationType: DonationType;
+    confirmDonation: Function;
+    cancelDonation: Function;
+    get confirmationText(): TemplateResult;
+    confirm(): void;
+    cancel(): void;
+    /** @inheritdoc */
+    render(): TemplateResult;
+    static get styles(): CSSResultGroup;
+    /**
+     * https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies/
+     */
+    get currencySymbol(): string;
+}