@internetarchive/donation-form 0.5.16-a1 → 0.5.17-a1

package/dist/src/braintree-manager/braintree-interfaces.d.ts

@@ -140,10 +140,6 @@ export interface BraintreeEndpointManagerInterface {
         successResponse: SuccessResponse;
         upsellSuccessResponse?: SuccessResponse;
     }): void;
-    /**
-     * Optional callback once success is called
-     */
-    donationSuccessCallback?: Function;
 }
 export declare enum HostingEnvironment {
     Development = "dev",

package/dist/src/braintree-manager/braintree-interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"braintree-interfaces.js","sourceRoot":"","sources":["../../../src/braintree-manager/braintree-interfaces.ts"],"names":[],"mappings":"AA6KA,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,yCAAmB,CAAA;AACrB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B","sourcesContent":["import {\n  DonationRequest,\n  DonationResponse,\n  SuccessResponse,\n  PaymentProvider,\n  DonationPaymentInfo,\n  CustomerInfo,\n  BillingInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { PromisedSingleton } from '@internetarchive/promised-singleton';\nimport { Unsubscribe } from 'nanoevents';\nimport { PaymentProvidersInterface } from './payment-providers-interface';\n\nexport interface BraintreeManagerEvents {\n  paymentProvidersHostedFieldsRetry: (retryNumber: number) => void;\n  paymentProvidersHostedFieldsFailed: (error: unknown) => void;\n}\n\n/**\n * The BraintreeManager is the main entrypoint for much of the common braintree functionality.\n *\n * A single instance of it gets created and passed down through all of the components.\n *\n * @export\n * @interface BraintreeManagerInterface\n */\nexport interface BraintreeManagerInterface {\n  on<E extends keyof BraintreeManagerEvents>(\n    event: E,\n    callback: BraintreeManagerEvents[E],\n  ): Unsubscribe;\n\n  /**\n   * The PaymentProviders class contains the IA-specific handlers for each of the\n   * different payment providers.\n   *\n   * They are generally data-focused, as opposed to UI-focused, but there\n   * is some cross-polination between PaymentProviders and FlowHandlers.\n   *\n   * @type {PaymentProvidersInterface}\n   * @memberof BraintreeManagerInterface\n   */\n  paymentProviders: PaymentProvidersInterface;\n\n  /**\n   * The Braintree Client instance.\n   *\n   * This gets used to isntantiate clients for all of the payment providers.\n   *\n   * @type {PromisedSingleton<braintree.Client>}\n   * @memberof BraintreeManagerInterface\n   */\n  instance: PromisedSingleton<braintree.Client>;\n\n  /**\n   * Set the referrer for later submission\n   *\n   * @param {string} referrer\n   * @memberof BraintreeManagerInterface\n   */\n  setReferrer(referrer: string): void;\n\n  /**\n   * Set the origin for later submission\n   *\n   * @param {string} origin\n   * @memberof BraintreeManagerInterface\n   */\n  setOrigin(origin: string): void;\n\n  /**\n   * Set the logged-in user for later submission\n   *\n   * @param {string} loggedInUser\n   * @memberof BraintreeManagerInterface\n   */\n  setLoggedInUser(loggedInUser: string): void;\n\n  /**\n   * Perform startup tasts like session resuming\n   *\n   * @memberof BraintreeManagerInterface\n   */\n  startup(): void;\n\n  /**\n   * Submit donation to the backend\n   *\n   * @param {{\n   *     nonce: string;\n   *     paymentProvider: PaymentProvider;\n   *     donationInfo: DonationPaymentInfo;\n   *     billingInfo: BillingInfo;\n   *     customerInfo: CustomerInfo;\n   *     upsellOnetimeTransactionId?: string;\n   *     customerId?: string;\n   *     recaptchaToken?: string;\n   *     bin?: string; // first 6 digits of CC\n   *     binName?: string; // credit card bank name\n   *   }} options\n   * @returns {Promise<DonationResponse>}\n   * @memberof BraintreeManagerInterface\n   */\n  submitDonation(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse>;\n\n  /**\n   * Submit the upsell donation\n   *\n   * @param {{\n   *     oneTimeDonationResponse: SuccessResponse;\n   *     amount: number;\n   *   }} options\n   * @returns {Promise<DonationResponse>}\n   * @memberof BraintreeManagerInterface\n   */\n  submitUpsellDonation(options: {\n    oneTimeDonationResponse: SuccessResponse;\n    amount: number;\n  }): Promise<DonationResponse>;\n\n  /**\n   * Finish the donation after a successful completion.\n   *\n   * @param {{\n   *     successResponse: SuccessResponse;\n   *     upsellSuccessResponse?: SuccessResponse;\n   *   }} options\n   * @memberof BraintreeManagerInterface\n   */\n  donationSuccessful(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void;\n}\n\nexport interface BraintreeEndpointManagerInterface {\n  /**\n   * Responsible for submitting a data object to the backend\n   * and returning a Promise of the JSON object response.\n   *\n   * @param {object} data\n   * @returns {Promise<object>}\n   * @memberof BraintreeEndpointManagerInterface\n   */\n  submitData(request: DonationRequest): Promise<DonationResponse>;\n\n  /**\n   * Once the user is finished with the donation flow, either after\n   * a monthly donation or an upsell, we notify the endpoint manager\n   * so it can redirect the user to the thank you page.\n   */\n  donationSuccessful(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void;\n\n  /**\n   * Optional callback once success is called\n   */\n  donationSuccessCallback?: Function;\n}\n\nexport enum HostingEnvironment {\n  Development = 'dev',\n  Production = 'prod',\n}\n"]}
+{"version":3,"file":"braintree-interfaces.js","sourceRoot":"","sources":["../../../src/braintree-manager/braintree-interfaces.ts"],"names":[],"mappings":"AAwKA,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,yCAAmB,CAAA;AACrB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B","sourcesContent":["import {\n  DonationRequest,\n  DonationResponse,\n  SuccessResponse,\n  PaymentProvider,\n  DonationPaymentInfo,\n  CustomerInfo,\n  BillingInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { PromisedSingleton } from '@internetarchive/promised-singleton';\nimport { Unsubscribe } from 'nanoevents';\nimport { PaymentProvidersInterface } from './payment-providers-interface';\n\nexport interface BraintreeManagerEvents {\n  paymentProvidersHostedFieldsRetry: (retryNumber: number) => void;\n  paymentProvidersHostedFieldsFailed: (error: unknown) => void;\n}\n\n/**\n * The BraintreeManager is the main entrypoint for much of the common braintree functionality.\n *\n * A single instance of it gets created and passed down through all of the components.\n *\n * @export\n * @interface BraintreeManagerInterface\n */\nexport interface BraintreeManagerInterface {\n  on<E extends keyof BraintreeManagerEvents>(\n    event: E,\n    callback: BraintreeManagerEvents[E],\n  ): Unsubscribe;\n\n  /**\n   * The PaymentProviders class contains the IA-specific handlers for each of the\n   * different payment providers.\n   *\n   * They are generally data-focused, as opposed to UI-focused, but there\n   * is some cross-polination between PaymentProviders and FlowHandlers.\n   *\n   * @type {PaymentProvidersInterface}\n   * @memberof BraintreeManagerInterface\n   */\n  paymentProviders: PaymentProvidersInterface;\n\n  /**\n   * The Braintree Client instance.\n   *\n   * This gets used to isntantiate clients for all of the payment providers.\n   *\n   * @type {PromisedSingleton<braintree.Client>}\n   * @memberof BraintreeManagerInterface\n   */\n  instance: PromisedSingleton<braintree.Client>;\n\n  /**\n   * Set the referrer for later submission\n   *\n   * @param {string} referrer\n   * @memberof BraintreeManagerInterface\n   */\n  setReferrer(referrer: string): void;\n\n  /**\n   * Set the origin for later submission\n   *\n   * @param {string} origin\n   * @memberof BraintreeManagerInterface\n   */\n  setOrigin(origin: string): void;\n\n  /**\n   * Set the logged-in user for later submission\n   *\n   * @param {string} loggedInUser\n   * @memberof BraintreeManagerInterface\n   */\n  setLoggedInUser(loggedInUser: string): void;\n\n  /**\n   * Perform startup tasts like session resuming\n   *\n   * @memberof BraintreeManagerInterface\n   */\n  startup(): void;\n\n  /**\n   * Submit donation to the backend\n   *\n   * @param {{\n   *     nonce: string;\n   *     paymentProvider: PaymentProvider;\n   *     donationInfo: DonationPaymentInfo;\n   *     billingInfo: BillingInfo;\n   *     customerInfo: CustomerInfo;\n   *     upsellOnetimeTransactionId?: string;\n   *     customerId?: string;\n   *     recaptchaToken?: string;\n   *     bin?: string; // first 6 digits of CC\n   *     binName?: string; // credit card bank name\n   *   }} options\n   * @returns {Promise<DonationResponse>}\n   * @memberof BraintreeManagerInterface\n   */\n  submitDonation(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse>;\n\n  /**\n   * Submit the upsell donation\n   *\n   * @param {{\n   *     oneTimeDonationResponse: SuccessResponse;\n   *     amount: number;\n   *   }} options\n   * @returns {Promise<DonationResponse>}\n   * @memberof BraintreeManagerInterface\n   */\n  submitUpsellDonation(options: {\n    oneTimeDonationResponse: SuccessResponse;\n    amount: number;\n  }): Promise<DonationResponse>;\n\n  /**\n   * Finish the donation after a successful completion.\n   *\n   * @param {{\n   *     successResponse: SuccessResponse;\n   *     upsellSuccessResponse?: SuccessResponse;\n   *   }} options\n   * @memberof BraintreeManagerInterface\n   */\n  donationSuccessful(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void;\n}\n\nexport interface BraintreeEndpointManagerInterface {\n  /**\n   * Responsible for submitting a data object to the backend\n   * and returning a Promise of the JSON object response.\n   *\n   * @param {object} data\n   * @returns {Promise<object>}\n   * @memberof BraintreeEndpointManagerInterface\n   */\n  submitData(request: DonationRequest): Promise<DonationResponse>;\n\n  /**\n   * Once the user is finished with the donation flow, either after\n   * a monthly donation or an upsell, we notify the endpoint manager\n   * so it can redirect the user to the thank you page.\n   */\n  donationSuccessful(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void;\n}\n\nexport enum HostingEnvironment {\n  Development = 'dev',\n  Production = 'prod',\n}\n"]}

package/dist/src/braintree-manager/braintree-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"braintree-manager.js","sourceRoot":"","sources":["../../../src/braintree-manager/braintree-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DonationResponse,\n  DonationRequest,\n  DonationRequestCustomFields,\n  DonationType,\n  CustomerInfo,\n  BillingInfo,\n  DonationPaymentInfo,\n  PaymentProvider,\n  SuccessResponse,\n} from '@internetarchive/donation-form-data-models';\n\nimport { PaymentProviders } from './payment-providers';\nimport { PaymentClientsInterface } from './payment-clients';\nimport {\n  BraintreeManagerInterface,\n  BraintreeEndpointManagerInterface,\n  HostingEnvironment,\n  BraintreeManagerEvents,\n} from './braintree-interfaces';\nimport { HostedFieldConfiguration } from './payment-providers/credit-card/hosted-field-configuration';\nimport { PromisedSingleton } from '@internetarchive/promised-singleton';\nimport { PaymentProvidersInterface } from './payment-providers-interface';\nimport { createNanoEvents, Unsubscribe } from 'nanoevents';\n\n/** @inheritdoc */\nexport class BraintreeManager implements BraintreeManagerInterface {\n  private referrer?: string;\n\n  /**\n   * The origin is made up of campaign / ABTest information that the user originated from.\n   *\n   * The field is a freeform string so it can be anything, but make sure it's something\n   * identifiable so it can be queried in CiviCRM.\n   *\n   * For instance, we use this format for the Donation Banner:\n   * - `{Source}-{Test Name}-{Variant Name}`, eg:\n   * - `DonateBanner-Campaign Start 2020-IADefault`\n   * - `DonateBanner-Mid Campaign-IAThermometer`\n   *\n   * For additional specificity, you could add additional info, ie.\n   * - `DonateBanner-MidJuly2020 Campaign-VariantA-Button1`\n   *\n   * @private\n   * @type {string}\n   * @memberof BraintreeManager\n   */\n  private origin?: string;\n\n  private loggedInUser?: string;\n\n  /**\n   * The Device Data token generated by the DataCollector.\n   *\n   * This gets submitted for several of the payment providers as an anti-fraud mechanism.\n   *\n   * @private\n   * @type {string}\n   * @memberof BraintreeManager\n   */\n  private deviceData?: string;\n\n  private emitter = createNanoEvents<BraintreeManagerEvents>();\n\n  on<E extends keyof BraintreeManagerEvents>(\n    event: E,\n    callback: BraintreeManagerEvents[E],\n  ): Unsubscribe {\n    return this.emitter.on(event, callback);\n  }\n\n  /** @inheritdoc */\n  paymentProviders: PaymentProvidersInterface;\n\n  /** @inheritdoc */\n  async startup(): Promise<void> {\n    return this.collectDeviceData();\n  }\n\n  /** @inheritdoc */\n  instance = new PromisedSingleton<braintree.Client>({\n    generator: async (): Promise<braintree.Client> => {\n      const client = await this.paymentClients.braintreeClient.get();\n      return client?.create({ authorization: this.authorizationToken });\n    },\n  });\n\n  /** @inheritdoc */\n  async submitDonation(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse> {\n    const customFields = new DonationRequestCustomFields();\n    // eslint-disable-next-line @typescript-eslint/camelcase\n    customFields.fee_amount_covered = options.donationInfo.feeAmountCovered;\n    // eslint-disable-next-line @typescript-eslint/camelcase\n    customFields.logged_in_user = this.loggedInUser;\n    customFields.referrer = this.referrer;\n    customFields.origin = this.origin;\n\n    // This is interesting and applies only to Venmo, but will work for other providers as well.\n    // In Safari, `donationInfo` actually comes through as a DonationPaymentInfo object,\n    // but in Chrome, it comes through as a plain object so you can't call `.total()` on it to\n    // get the total amount and instead have to calculate the total\n    const total = DonationPaymentInfo.calculateTotal(\n      options.donationInfo.amount,\n      options.donationInfo.coverFees,\n    );\n\n    const donationRequest = new DonationRequest({\n      deviceData: this.deviceData,\n      paymentProvider: options.paymentProvider,\n      paymentMethodNonce: options.nonce,\n      amount: total,\n      donationType: options.donationInfo.donationType,\n      customer: options.customerInfo,\n      billing: options.billingInfo,\n      customFields: customFields,\n      upsellOnetimeTransactionId: options.upsellOnetimeTransactionId,\n      customerId: options.customerId,\n      recaptchaToken: options.recaptchaToken,\n      bin: options.bin,\n      binName: options.binName,\n    });\n\n    const jsonResponse = await this.endpointManager.submitData(donationRequest);\n    const modeledResponse = new DonationResponse(jsonResponse);\n    return modeledResponse;\n  }\n\n  /** @inheritdoc */\n  async submitUpsellDonation(options: {\n    oneTimeDonationResponse: SuccessResponse;\n    amount: number;\n  }): Promise<DonationResponse> {\n    const response = options.oneTimeDonationResponse;\n\n    const donationInfo = new DonationPaymentInfo({\n      amount: options.amount,\n      donationType: DonationType.Upsell,\n      coverFees: false,\n    });\n\n    return this.submitDonation({\n      nonce: response.paymentMethodNonce,\n      paymentProvider: response.paymentProvider,\n      customerId: response.customer_id,\n      donationInfo: donationInfo,\n      customerInfo: response.customer,\n      billingInfo: response.billing,\n      upsellOnetimeTransactionId: response.transaction_id,\n    });\n  }\n\n  /** @inheritdoc */\n  donationSuccessful(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void {\n\n\n\n    \n    this.endpointManager.donationSuccessful(options);\n  }\n\n  private deviceDataCollectionStarted = false;\n\n  /**\n   * Collect Braintree device data. This is used to help fraud detection.\n   *\n   * @private\n   * @returns {Promise<void>}\n   * @memberof BraintreeManager\n   */\n  private async collectDeviceData(): Promise<void> {\n    if (this.deviceDataCollectionStarted) {\n      return;\n    }\n    this.deviceDataCollectionStarted = true;\n\n    const instance = await this.instance.get();\n    if (!instance) {\n      return;\n    }\n\n    return this.paymentClients.dataCollector\n      .get()\n      .then((collector?: braintree.DataCollector) => {\n        return collector?.create({ client: instance, kount: false, paypal: true });\n      })\n      .then(instance => {\n        this.deviceData = instance?.deviceData;\n      });\n  }\n\n  /**\n   * Braintree Authorization Token\n   *\n   * @private\n   * @type {string}\n   * @memberof BraintreeManager\n   */\n  private authorizationToken: string;\n\n  /**\n   * The endpoint manager for network communications\n   *\n   * @private\n   * @type {BraintreeEndpointManagerInterface}\n   * @memberof BraintreeManager\n   */\n  private endpointManager: BraintreeEndpointManagerInterface;\n\n  /**\n   * The payment clients container containing the braintree, paypal, and google clients\n   *\n   * @private\n   * @type {PaymentClientsInterface}\n   * @memberof BraintreeManager\n   */\n  private paymentClients: PaymentClientsInterface;\n\n  private hostingEnvironment: HostingEnvironment = HostingEnvironment.Development;\n\n  constructor(options: {\n    authorizationToken: string;\n    paymentClients: PaymentClientsInterface;\n    endpointManager: BraintreeEndpointManagerInterface;\n    hostedFieldConfig: HostedFieldConfiguration;\n    hostingEnvironment: HostingEnvironment;\n    venmoProfileId?: string;\n    googlePayMerchantId?: string;\n    referrer?: string;\n    loggedInUser?: string;\n    origin?: string;\n  }) {\n    this.authorizationToken = options.authorizationToken;\n    this.endpointManager = options.endpointManager;\n    this.hostingEnvironment = options.hostingEnvironment;\n    this.paymentClients = options.paymentClients;\n\n    this.referrer = options.referrer;\n    this.loggedInUser = options.loggedInUser;\n    this.origin = options.origin;\n\n    this.paymentProviders = new PaymentProviders({\n      braintreeManager: this,\n      paymentClients: this.paymentClients,\n      venmoProfileId: options.venmoProfileId,\n      googlePayMerchantId: options.googlePayMerchantId,\n      hostingEnvironment: options.hostingEnvironment,\n      hostedFieldConfig: options.hostedFieldConfig,\n    });\n\n    this.paymentProviders.on('hostedFieldsRetry', (retryNumber: number) => {\n      this.emitter.emit('paymentProvidersHostedFieldsRetry', retryNumber);\n    });\n\n    this.paymentProviders.on('hostedFieldsFailed', (error: unknown) => {\n      this.emitter.emit('paymentProvidersHostedFieldsFailed', error);\n    });\n  }\n\n  /** @inheritdoc */\n  setReferrer(referrer: string): void {\n    this.referrer = referrer;\n  }\n\n  /** @inheritdoc */\n  setLoggedInUser(loggedInUser: string): void {\n    this.loggedInUser = loggedInUser;\n  }\n\n  /** @inheritdoc */\n  setOrigin(origin: string): void {\n    this.origin = origin;\n  }\n}\n"]}
+{"version":3,"file":"braintree-manager.js","sourceRoot":"","sources":["../../../src/braintree-manager/braintree-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  DonationResponse,\n  DonationRequest,\n  DonationRequestCustomFields,\n  DonationType,\n  CustomerInfo,\n  BillingInfo,\n  DonationPaymentInfo,\n  PaymentProvider,\n  SuccessResponse,\n} from '@internetarchive/donation-form-data-models';\n\nimport { PaymentProviders } from './payment-providers';\nimport { PaymentClientsInterface } from './payment-clients';\nimport {\n  BraintreeManagerInterface,\n  BraintreeEndpointManagerInterface,\n  HostingEnvironment,\n  BraintreeManagerEvents,\n} from './braintree-interfaces';\nimport { HostedFieldConfiguration } from './payment-providers/credit-card/hosted-field-configuration';\nimport { PromisedSingleton } from '@internetarchive/promised-singleton';\nimport { PaymentProvidersInterface } from './payment-providers-interface';\nimport { createNanoEvents, Unsubscribe } from 'nanoevents';\n\n/** @inheritdoc */\nexport class BraintreeManager implements BraintreeManagerInterface {\n  private referrer?: string;\n\n  /**\n   * The origin is made up of campaign / ABTest information that the user originated from.\n   *\n   * The field is a freeform string so it can be anything, but make sure it's something\n   * identifiable so it can be queried in CiviCRM.\n   *\n   * For instance, we use this format for the Donation Banner:\n   * - `{Source}-{Test Name}-{Variant Name}`, eg:\n   * - `DonateBanner-Campaign Start 2020-IADefault`\n   * - `DonateBanner-Mid Campaign-IAThermometer`\n   *\n   * For additional specificity, you could add additional info, ie.\n   * - `DonateBanner-MidJuly2020 Campaign-VariantA-Button1`\n   *\n   * @private\n   * @type {string}\n   * @memberof BraintreeManager\n   */\n  private origin?: string;\n\n  private loggedInUser?: string;\n\n  /**\n   * The Device Data token generated by the DataCollector.\n   *\n   * This gets submitted for several of the payment providers as an anti-fraud mechanism.\n   *\n   * @private\n   * @type {string}\n   * @memberof BraintreeManager\n   */\n  private deviceData?: string;\n\n  private emitter = createNanoEvents<BraintreeManagerEvents>();\n\n  on<E extends keyof BraintreeManagerEvents>(\n    event: E,\n    callback: BraintreeManagerEvents[E],\n  ): Unsubscribe {\n    return this.emitter.on(event, callback);\n  }\n\n  /** @inheritdoc */\n  paymentProviders: PaymentProvidersInterface;\n\n  /** @inheritdoc */\n  async startup(): Promise<void> {\n    return this.collectDeviceData();\n  }\n\n  /** @inheritdoc */\n  instance = new PromisedSingleton<braintree.Client>({\n    generator: async (): Promise<braintree.Client> => {\n      const client = await this.paymentClients.braintreeClient.get();\n      return client?.create({ authorization: this.authorizationToken });\n    },\n  });\n\n  /** @inheritdoc */\n  async submitDonation(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse> {\n    const customFields = new DonationRequestCustomFields();\n    // eslint-disable-next-line @typescript-eslint/camelcase\n    customFields.fee_amount_covered = options.donationInfo.feeAmountCovered;\n    // eslint-disable-next-line @typescript-eslint/camelcase\n    customFields.logged_in_user = this.loggedInUser;\n    customFields.referrer = this.referrer;\n    customFields.origin = this.origin;\n\n    // This is interesting and applies only to Venmo, but will work for other providers as well.\n    // In Safari, `donationInfo` actually comes through as a DonationPaymentInfo object,\n    // but in Chrome, it comes through as a plain object so you can't call `.total()` on it to\n    // get the total amount and instead have to calculate the total\n    const total = DonationPaymentInfo.calculateTotal(\n      options.donationInfo.amount,\n      options.donationInfo.coverFees,\n    );\n\n    const donationRequest = new DonationRequest({\n      deviceData: this.deviceData,\n      paymentProvider: options.paymentProvider,\n      paymentMethodNonce: options.nonce,\n      amount: total,\n      donationType: options.donationInfo.donationType,\n      customer: options.customerInfo,\n      billing: options.billingInfo,\n      customFields: customFields,\n      upsellOnetimeTransactionId: options.upsellOnetimeTransactionId,\n      customerId: options.customerId,\n      recaptchaToken: options.recaptchaToken,\n      bin: options.bin,\n      binName: options.binName,\n    });\n\n    const jsonResponse = await this.endpointManager.submitData(donationRequest);\n    const modeledResponse = new DonationResponse(jsonResponse);\n    return modeledResponse;\n  }\n\n  /** @inheritdoc */\n  async submitUpsellDonation(options: {\n    oneTimeDonationResponse: SuccessResponse;\n    amount: number;\n  }): Promise<DonationResponse> {\n    const response = options.oneTimeDonationResponse;\n\n    const donationInfo = new DonationPaymentInfo({\n      amount: options.amount,\n      donationType: DonationType.Upsell,\n      coverFees: false,\n    });\n\n    return this.submitDonation({\n      nonce: response.paymentMethodNonce,\n      paymentProvider: response.paymentProvider,\n      customerId: response.customer_id,\n      donationInfo: donationInfo,\n      customerInfo: response.customer,\n      billingInfo: response.billing,\n      upsellOnetimeTransactionId: response.transaction_id,\n    });\n  }\n\n  /** @inheritdoc */\n  donationSuccessful(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void {\n    this.endpointManager.donationSuccessful(options);\n  }\n\n  private deviceDataCollectionStarted = false;\n\n  /**\n   * Collect Braintree device data. This is used to help fraud detection.\n   *\n   * @private\n   * @returns {Promise<void>}\n   * @memberof BraintreeManager\n   */\n  private async collectDeviceData(): Promise<void> {\n    if (this.deviceDataCollectionStarted) {\n      return;\n    }\n    this.deviceDataCollectionStarted = true;\n\n    const instance = await this.instance.get();\n    if (!instance) {\n      return;\n    }\n\n    return this.paymentClients.dataCollector\n      .get()\n      .then((collector?: braintree.DataCollector) => {\n        return collector?.create({ client: instance, kount: false, paypal: true });\n      })\n      .then(instance => {\n        this.deviceData = instance?.deviceData;\n      });\n  }\n\n  /**\n   * Braintree Authorization Token\n   *\n   * @private\n   * @type {string}\n   * @memberof BraintreeManager\n   */\n  private authorizationToken: string;\n\n  /**\n   * The endpoint manager for network communications\n   *\n   * @private\n   * @type {BraintreeEndpointManagerInterface}\n   * @memberof BraintreeManager\n   */\n  private endpointManager: BraintreeEndpointManagerInterface;\n\n  /**\n   * The payment clients container containing the braintree, paypal, and google clients\n   *\n   * @private\n   * @type {PaymentClientsInterface}\n   * @memberof BraintreeManager\n   */\n  private paymentClients: PaymentClientsInterface;\n\n  private hostingEnvironment: HostingEnvironment = HostingEnvironment.Development;\n\n  constructor(options: {\n    authorizationToken: string;\n    paymentClients: PaymentClientsInterface;\n    endpointManager: BraintreeEndpointManagerInterface;\n    hostedFieldConfig: HostedFieldConfiguration;\n    hostingEnvironment: HostingEnvironment;\n    venmoProfileId?: string;\n    googlePayMerchantId?: string;\n    referrer?: string;\n    loggedInUser?: string;\n    origin?: string;\n  }) {\n    this.authorizationToken = options.authorizationToken;\n    this.endpointManager = options.endpointManager;\n    this.hostingEnvironment = options.hostingEnvironment;\n    this.paymentClients = options.paymentClients;\n\n    this.referrer = options.referrer;\n    this.loggedInUser = options.loggedInUser;\n    this.origin = options.origin;\n\n    this.paymentProviders = new PaymentProviders({\n      braintreeManager: this,\n      paymentClients: this.paymentClients,\n      venmoProfileId: options.venmoProfileId,\n      googlePayMerchantId: options.googlePayMerchantId,\n      hostingEnvironment: options.hostingEnvironment,\n      hostedFieldConfig: options.hostedFieldConfig,\n    });\n\n    this.paymentProviders.on('hostedFieldsRetry', (retryNumber: number) => {\n      this.emitter.emit('paymentProvidersHostedFieldsRetry', retryNumber);\n    });\n\n    this.paymentProviders.on('hostedFieldsFailed', (error: unknown) => {\n      this.emitter.emit('paymentProvidersHostedFieldsFailed', error);\n    });\n  }\n\n  /** @inheritdoc */\n  setReferrer(referrer: string): void {\n    this.referrer = referrer;\n  }\n\n  /** @inheritdoc */\n  setLoggedInUser(loggedInUser: string): void {\n    this.loggedInUser = loggedInUser;\n  }\n\n  /** @inheritdoc */\n  setOrigin(origin: string): void {\n    this.origin = origin;\n  }\n}\n"]}

package/dist/src/form-elements/contact-form/contact-form.d.ts

@@ -22,6 +22,8 @@ export declare class ContactForm extends LitElement {
     countryCodeAlpha2Field: HTMLSelectElement;
     errorMessage: HTMLDivElement;
     form: HTMLFormElement;
+    /** @keyof countries */
+    selectedCountry: string;
     reportValidity(): boolean;
     focus(): void;
     /** @inheritdoc */

package/dist/src/form-elements/contact-form/contact-form.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { BillingInfo, CustomerInfo, DonorContactInfo, } from '@internetarchive/donation-form-data-models';
 import { SpacerOption } from '../badged-input';
@@ -10,6 +10,11 @@ import localePinImg from '@internetarchive/icon-locale-pin';
 import userIcon from '@internetarchive/icon-user';
 import { countries } from './countries';
 let ContactForm = class ContactForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** @keyof countries */
+        this.selectedCountry = 'US';
+    }
     reportValidity() {
         const fieldBadgedInputs = [
             [this.emailField, this.emailBadgedInput],
@@ -140,14 +145,27 @@ let ContactForm = class ContactForm extends LitElement {
     `;
     }
     get countrySelectorTemplate() {
-        const selectedCountry = 'US';
         return html `
       <badged-input>
-        <select id="donation-contact-form-countryCodeAlpha2">
+        <select id="donation-contact-form-countryCodeAlpha2"
+        @change=${(e) => {
+            var _a, _b, _c, _d, _e, _f;
+            const currCountry = this.selectedCountry;
+            this.selectedCountry = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) ? (_b = e.target) === null || _b === void 0 ? void 0 : _b.value : currCountry;
+            // update required visual cue on postal code
+            if (this.selectedCountry === 'US') {
+                (_c = this.postalBadgedInput) === null || _c === void 0 ? void 0 : _c.setAttribute('required', '');
+                (_d = this.postalCodeField) === null || _d === void 0 ? void 0 : _d.setAttribute('required', '');
+            }
+            else {
+                (_e = this.postalBadgedInput) === null || _e === void 0 ? void 0 : _e.removeAttribute('required');
+                (_f = this.postalCodeField) === null || _f === void 0 ? void 0 : _f.removeAttribute('required');
+            }
+        }}>
           ${Object.keys(countries).map(key => {
             const name = countries[key];
             return html `
-              <option value=${key} ?selected=${key === selectedCountry}>${name}</option>
+              <option value=${key} ?selected=${key === this.selectedCountry}>${name}</option>
             `;
         })}
         </select>
@@ -397,6 +415,9 @@ __decorate([
 __decorate([
     query('form')
 ], ContactForm.prototype, "form", void 0);
+__decorate([
+    property({ type: String })
+], ContactForm.prototype, "selectedCountry", void 0);
 ContactForm = __decorate([
     customElement('contact-form')
 ], ContactForm);

package/dist/src/form-elements/contact-form/contact-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-form.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/contact-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n  BillingInfo,\n  CustomerInfo,\n  DonorContactInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { SpacerOption } from '../badged-input';\nimport { BadgedInput } from '../badged-input';\nimport '../badged-input';\n\nimport emailImg from '@internetarchive/icon-email';\nimport localePinImg from '@internetarchive/icon-locale-pin';\nimport userIcon from '@internetarchive/icon-user';\n\nimport { countries } from './countries';\n\n@customElement('contact-form')\nexport class ContactForm extends LitElement {\n  @query('badged-input.donation-contact-form-email') emailBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-first-name') firstNameBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-last-name') lastNameBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-postal-code') postalBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-postal-code') postalCodeField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-street-address')\n  streetAddressBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-street-address') streetAddressField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-extended-address')\n  extendedAddressBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-extended-address') extendedAddressField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-locality') localityBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-region') regionBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n  @query('#donation-contact-form-countryCodeAlpha2') countryCodeAlpha2Field!: HTMLSelectElement;\n\n  @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n  @query('form') form!: HTMLFormElement;\n\n  reportValidity(): boolean {\n    const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [\n      [this.emailField, this.emailBadgedInput],\n      [this.firstNameField, this.firstNameBadgedInput],\n      [this.lastNameField, this.lastNameBadgedInput],\n      [this.regionField, this.regionBadgedInput],\n      [this.localityField, this.localityBadgedInput],\n      [this.streetAddressField, this.streetAddressBadgedInput],\n      [this.postalCodeField, this.postalBadgedInput],\n    ];\n\n    let isValid = true;\n    fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {\n      const fieldValid = inputElement.checkValidity();\n      isValid = isValid && fieldValid;\n      if (!fieldValid) {\n        badgedInput.error = true;\n      }\n    });\n\n    if (!isValid) {\n      this.errorMessage.innerText = 'Please enter any missing contact information below';\n    } else {\n      this.errorMessage.innerText = '';\n    }\n\n    return isValid;\n  }\n\n  focus(): void {\n    this.emailField.focus();\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div id=\"donation-contact-form-error-message\"></div>\n      <form>\n        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-email',\n              placeholder: 'Email',\n              required: true,\n              fieldType: 'email',\n              name: 'email',\n              autocomplete: 'email',\n              maxlength: 255,\n              icon: emailImg,\n            })}\n          </div>\n        </fieldset>\n\n        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-first-name',\n              placeholder: 'First name',\n              name: 'fname',\n              required: true,\n              maxlength: 255,\n              autocomplete: 'given-name',\n              icon: userIcon,\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-last-name',\n              placeholder: 'Last name',\n              name: 'lname',\n              autocomplete: 'family-name',\n              required: true,\n              maxlength: 255,\n            })}\n          </div>\n        </fieldset>\n        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-street-address',\n              placeholder: 'Address Line 1',\n              required: true,\n              autocomplete: 'address-line1',\n              icon: localePinImg,\n              name: 'street-address',\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-extended-address',\n              placeholder: 'Address Line 2 (optional)',\n              autocomplete: 'address-line2',\n              required: false,\n              name: 'extended-address',\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-locality',\n              placeholder: 'City',\n              autocomplete: 'address-level2',\n              required: true,\n              name: 'locality',\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-region',\n              placeholder: 'State / Province',\n              autocomplete: 'address-level1',\n              required: true,\n              name: 'region',\n            })}\n            ${this.generateInput({\n              id: 'donation-contact-form-postal-code',\n              placeholder: 'Zip / Postal',\n              autocomplete: 'postal-code',\n              required: true,\n              name: 'postal',\n              maxlength: 9,\n              // must start with a character, then may contain spaces\n              validationPattern: '[a-zA-Z\\\\-\\\\d]+[a-zA-Z\\\\-\\\\d\\\\s]*',\n              iconSpaceOption: SpacerOption.CompressSpace,\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.countrySelectorTemplate}\n          </div>\n        </fieldset>\n      </form>\n      ${this.getStyles}\n    `;\n  }\n\n  private get countrySelectorTemplate(): TemplateResult {\n    const selectedCountry = 'US';\n\n    return html`\n      <badged-input>\n        <select id=\"donation-contact-form-countryCodeAlpha2\">\n          ${Object.keys(countries).map(key => {\n            const name = countries[key];\n            return html`\n              <option value=${key} ?selected=${key === selectedCountry}>${name}</option>\n            `;\n          })}\n        </select>\n      </badged-input>\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    // Form autofill does not work properly in the shadow DOM\n    // so we need our form fields in the light DOM\n    return this;\n  }\n\n  // reset the error state when the user focuses the input\n  private inputFocused(e: KeyboardEvent): void {\n    this.errorMessage.innerText = '';\n    const input = e.target as HTMLInputElement;\n    const inputIdentifier = input.id;\n    const badgedInput = this.querySelector(`badged-input.${inputIdentifier}`) as BadgedInput;\n    badgedInput.error = false;\n  }\n\n  private generateInput(options: {\n    id: string;\n    placeholder: string;\n    required?: boolean;\n    fieldType?: 'text' | 'email';\n    autocomplete?: AutoCompleteFieldOptions;\n    maxlength?: number;\n    name: string;\n    icon?: TemplateResult;\n    iconSpaceOption?: SpacerOption;\n    validationPattern?: string;\n  }): TemplateResult {\n    const required = options.required ?? true;\n    const fieldType = options.fieldType ?? 'text';\n    const iconOption = options.iconSpaceOption ?? SpacerOption.LeaveSpace;\n\n    return html`\n      <badged-input\n        class=${options.id}\n        .icon=${options.icon}\n        .iconSpaceOption=${iconOption}\n        ?required=${options.required}\n      >\n        <label for=${options.id}>${options.placeholder}</label>\n        <input\n          type=${fieldType}\n          id=${options.id}\n          class=\"donation-contact-form-input\"\n          name=${options.name}\n          aria-label=${options.placeholder}\n          placeholder=${options.placeholder}\n          maxlength=${ifDefined(options.maxlength)}\n          autocomplete=${options.autocomplete ?? 'on'}\n          pattern=${ifDefined(options.validationPattern)}\n          @focus=${this.inputFocused}\n          ?required=${required}\n        />\n      </badged-input>\n    `;\n  }\n\n  get donorContactInfo(): DonorContactInfo {\n    return new DonorContactInfo({\n      billing: this.billingInfo,\n      customer: this.contactInfo,\n    });\n  }\n\n  get billingInfo(): BillingInfo {\n    const billingInfo = new BillingInfo({\n      streetAddress: this.streetAddressField.value,\n      extendedAddress: this.extendedAddressField.value,\n      locality: this.localityField.value,\n      region: this.regionField.value,\n      postalCode: this.postalCodeField.value,\n      countryCodeAlpha2: this.countryCodeAlpha2Field.value,\n    });\n    return billingInfo;\n  }\n\n  get contactInfo(): CustomerInfo {\n    return new CustomerInfo({\n      email: this.emailField.value,\n      firstName: this.firstNameField.value,\n      lastName: this.lastNameField.value,\n    });\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 so 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 ContactForm\n   */\n  private get getStyles(): TemplateResult {\n    const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 3rem)`;\n    const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 5rem)`;\n\n    const fieldSetSpacing = css`var(--fieldSetSpacing, 1rem)`;\n    const fieldFontFamily = css`var(--fontFamily, \"Helvetica Neue\", Helvetica, Arial, sans-serif)`;\n    const fieldFontSize = css`var(--contactFieldFontSize, 1.6rem)`;\n    const fieldFontColor = css`var(--inputFieldFontColor, #333)`;\n\n    const iconFieldWidth = css`calc(100% - ${iconSpacerWidth})`;\n    const noIconFieldWidth = css`calc(100% - ${noIconSpacerWidth})`;\n\n    return html`\n      <style>\n        /*\n          **NOTE**\n          This element is in the lightDOM so be sure to prefix all styles\n          with \"contact-form\" so styles don't leak.\n         */\n        contact-form fieldset {\n          border: 0;\n          padding: 0;\n          margin: 0;\n          margin-bottom: ${fieldSetSpacing};\n          background-color: white;\n        }\n\n        /* These 1px and 0 margins in the next few selectors are to account for the\n        double outlines caused by the fields being right next to each other */\n        contact-form .row {\n          display: flex;\n          margin: -1px 0 0 0;\n        }\n\n        contact-form fieldset .row:first-child {\n          margin-top: 0;\n        }\n\n        contact-form badged-input.donation-contact-form-region {\n          width: 60%;\n        }\n\n        contact-form badged-input.donation-contact-form-postal-code {\n          width: 40%;\n        }\n\n        contact-form #donation-contact-form-region {\n          width: ${iconFieldWidth};\n        }\n\n        contact-form #donation-contact-form-postal-code {\n          width: ${noIconFieldWidth};\n        }\n\n        contact-form #donation-contact-form-error-message {\n          color: red;\n          font-size: 1.4rem;\n          margin-bottom: 0.6rem;\n        }\n\n        contact-form #donation-contact-form-last-name {\n          width: ${noIconFieldWidth};\n        }\n\n        /* only show for screen readers */\n        contact-form label {\n          position: absolute;\n          left: -10000px;\n          top: auto;\n          width: 1px;\n          height: 1px;\n          overflow: hidden;\n        }\n\n        contact-form .donation-contact-form-input {\n          width: ${iconFieldWidth};\n          border: 0;\n          outline: 0;\n          background: transparent;\n          font-weight: bold;\n          color: ${fieldFontColor};\n          font-size: ${fieldFontSize};\n          padding: 0;\n          font-family: ${fieldFontFamily};\n        }\n\n        contact-form .donation-contact-form-input::placeholder {\n          color: revert;\n        }\n\n        contact-form #donation-contact-form-countryCodeAlpha2 {\n          width: ${iconFieldWidth};\n          height: 100%;\n          box-sizing: border-box;\n          font-weight: bold;\n          font-size: ${fieldFontSize};\n          font-family: ${fieldFontFamily};\n          border: 0;\n          background: #fff;\n          -webkit-appearance: none;\n          -moz-appearance: none;\n          appearance: none;\n        }\n      </style>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"contact-form.js","sourceRoot":"","sources":["../../../../src/form-elements/contact-form/contact-form.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n  BillingInfo,\n  CustomerInfo,\n  DonorContactInfo,\n} from '@internetarchive/donation-form-data-models';\nimport { AutoCompleteFieldOptions } from './autocomplete-field-options';\nimport { SpacerOption } from '../badged-input';\nimport { BadgedInput } from '../badged-input';\nimport '../badged-input';\n\nimport emailImg from '@internetarchive/icon-email';\nimport localePinImg from '@internetarchive/icon-locale-pin';\nimport userIcon from '@internetarchive/icon-user';\n\nimport { countries } from './countries';\n\n@customElement('contact-form')\nexport class ContactForm extends LitElement {\n  @query('badged-input.donation-contact-form-email') emailBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-email') emailField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-first-name') firstNameBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-first-name') firstNameField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-last-name') lastNameBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-last-name') lastNameField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-postal-code') postalBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-postal-code') postalCodeField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-street-address')\n  streetAddressBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-street-address') streetAddressField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-extended-address')\n  extendedAddressBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-extended-address') extendedAddressField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-locality') localityBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-locality') localityField!: HTMLInputElement;\n\n  @query('badged-input.donation-contact-form-region') regionBadgedInput!: BadgedInput;\n  @query('#donation-contact-form-region') regionField!: HTMLInputElement;\n\n  @query('#donation-contact-form-countryCodeAlpha2') countryCodeAlpha2Field!: HTMLSelectElement;\n\n  @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;\n  @query('form') form!: HTMLFormElement;\n\n  /** @keyof countries */\n  @property({ type: String }) selectedCountry: string = 'US';\n\n  reportValidity(): boolean {\n    const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [\n      [this.emailField, this.emailBadgedInput],\n      [this.firstNameField, this.firstNameBadgedInput],\n      [this.lastNameField, this.lastNameBadgedInput],\n      [this.regionField, this.regionBadgedInput],\n      [this.localityField, this.localityBadgedInput],\n      [this.streetAddressField, this.streetAddressBadgedInput],\n      [this.postalCodeField, this.postalBadgedInput],\n    ];\n\n    let isValid = true;\n    fieldBadgedInputs.forEach(([inputElement, badgedInput]) => {\n      const fieldValid = inputElement.checkValidity();\n      isValid = isValid && fieldValid;\n      if (!fieldValid) {\n        badgedInput.error = true;\n      }\n    });\n\n    if (!isValid) {\n      this.errorMessage.innerText = 'Please enter any missing contact information below';\n    } else {\n      this.errorMessage.innerText = '';\n    }\n\n    return isValid;\n  }\n\n  focus(): void {\n    this.emailField.focus();\n  }\n\n  /** @inheritdoc */\n  render(): TemplateResult {\n    return html`\n      <div id=\"donation-contact-form-error-message\"></div>\n      <form>\n        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-email',\n              placeholder: 'Email',\n              required: true,\n              fieldType: 'email',\n              name: 'email',\n              autocomplete: 'email',\n              maxlength: 255,\n              icon: emailImg,\n            })}\n          </div>\n        </fieldset>\n\n        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-first-name',\n              placeholder: 'First name',\n              name: 'fname',\n              required: true,\n              maxlength: 255,\n              autocomplete: 'given-name',\n              icon: userIcon,\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-last-name',\n              placeholder: 'Last name',\n              name: 'lname',\n              autocomplete: 'family-name',\n              required: true,\n              maxlength: 255,\n            })}\n          </div>\n        </fieldset>\n        <fieldset>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-street-address',\n              placeholder: 'Address Line 1',\n              required: true,\n              autocomplete: 'address-line1',\n              icon: localePinImg,\n              name: 'street-address',\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-extended-address',\n              placeholder: 'Address Line 2 (optional)',\n              autocomplete: 'address-line2',\n              required: false,\n              name: 'extended-address',\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-locality',\n              placeholder: 'City',\n              autocomplete: 'address-level2',\n              required: true,\n              name: 'locality',\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.generateInput({\n              id: 'donation-contact-form-region',\n              placeholder: 'State / Province',\n              autocomplete: 'address-level1',\n              required: true,\n              name: 'region',\n            })}\n            ${this.generateInput({\n              id: 'donation-contact-form-postal-code',\n              placeholder: 'Zip / Postal',\n              autocomplete: 'postal-code',\n              required: true,\n              name: 'postal',\n              maxlength: 9,\n              // must start with a character, then may contain spaces\n              validationPattern: '[a-zA-Z\\\\-\\\\d]+[a-zA-Z\\\\-\\\\d\\\\s]*',\n              iconSpaceOption: SpacerOption.CompressSpace,\n            })}\n          </div>\n          <div class=\"row\">\n            ${this.countrySelectorTemplate}\n          </div>\n        </fieldset>\n      </form>\n      ${this.getStyles}\n    `;\n  }\n\n  private get countrySelectorTemplate(): TemplateResult {\n    return html`\n      <badged-input>\n        <select id=\"donation-contact-form-countryCodeAlpha2\"\n        @change=${(e: Event) => {\n          const currCountry = this.selectedCountry;\n          this.selectedCountry = (e.target as HTMLInputElement)?.value ? (e.target as HTMLInputElement)?.value as string : currCountry;\n          // update required visual cue on postal code\n          if (this.selectedCountry === 'US') {\n            this.postalBadgedInput?.setAttribute('required', '');\n            this.postalCodeField?.setAttribute('required', '');\n          } else {\n            this.postalBadgedInput?.removeAttribute('required');\n            this.postalCodeField?.removeAttribute('required');\n          }\n        }}>\n          ${Object.keys(countries).map(key => {\n            const name = countries[key];\n            return html`\n              <option value=${key} ?selected=${key === this.selectedCountry}>${name}</option>\n            `;\n          })}\n        </select>\n      </badged-input>\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    // Form autofill does not work properly in the shadow DOM\n    // so we need our form fields in the light DOM\n    return this;\n  }\n\n  // reset the error state when the user focuses the input\n  private inputFocused(e: KeyboardEvent): void {\n    this.errorMessage.innerText = '';\n    const input = e.target as HTMLInputElement;\n    const inputIdentifier = input.id;\n    const badgedInput = this.querySelector(`badged-input.${inputIdentifier}`) as BadgedInput;\n    badgedInput.error = false;\n  }\n\n  private generateInput(options: {\n    id: string;\n    placeholder: string;\n    required?: boolean;\n    fieldType?: 'text' | 'email';\n    autocomplete?: AutoCompleteFieldOptions;\n    maxlength?: number;\n    name: string;\n    icon?: TemplateResult;\n    iconSpaceOption?: SpacerOption;\n    validationPattern?: string;\n  }): TemplateResult {\n    const required = options.required ?? true;\n    const fieldType = options.fieldType ?? 'text';\n    const iconOption = options.iconSpaceOption ?? SpacerOption.LeaveSpace;\n\n    return html`\n      <badged-input\n        class=${options.id}\n        .icon=${options.icon}\n        .iconSpaceOption=${iconOption}\n        ?required=${options.required}\n      >\n        <label for=${options.id}>${options.placeholder}</label>\n        <input\n          type=${fieldType}\n          id=${options.id}\n          class=\"donation-contact-form-input\"\n          name=${options.name}\n          aria-label=${options.placeholder}\n          placeholder=${options.placeholder}\n          maxlength=${ifDefined(options.maxlength)}\n          autocomplete=${options.autocomplete ?? 'on'}\n          pattern=${ifDefined(options.validationPattern)}\n          @focus=${this.inputFocused}\n          ?required=${required}\n        />\n      </badged-input>\n    `;\n  }\n\n  get donorContactInfo(): DonorContactInfo {\n    return new DonorContactInfo({\n      billing: this.billingInfo,\n      customer: this.contactInfo,\n    });\n  }\n\n  get billingInfo(): BillingInfo {\n    const billingInfo = new BillingInfo({\n      streetAddress: this.streetAddressField.value,\n      extendedAddress: this.extendedAddressField.value,\n      locality: this.localityField.value,\n      region: this.regionField.value,\n      postalCode: this.postalCodeField.value,\n      countryCodeAlpha2: this.countryCodeAlpha2Field.value,\n    });\n    return billingInfo;\n  }\n\n  get contactInfo(): CustomerInfo {\n    return new CustomerInfo({\n      email: this.emailField.value,\n      firstName: this.firstNameField.value,\n      lastName: this.lastNameField.value,\n    });\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 so 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 ContactForm\n   */\n  private get getStyles(): TemplateResult {\n    const noIconSpacerWidth = css`var(--badgedInputNoIconSpacerWidth, 3rem)`;\n    const iconSpacerWidth = css`var(--badgedInputIconSpacerWidth, 5rem)`;\n\n    const fieldSetSpacing = css`var(--fieldSetSpacing, 1rem)`;\n    const fieldFontFamily = css`var(--fontFamily, \"Helvetica Neue\", Helvetica, Arial, sans-serif)`;\n    const fieldFontSize = css`var(--contactFieldFontSize, 1.6rem)`;\n    const fieldFontColor = css`var(--inputFieldFontColor, #333)`;\n\n    const iconFieldWidth = css`calc(100% - ${iconSpacerWidth})`;\n    const noIconFieldWidth = css`calc(100% - ${noIconSpacerWidth})`;\n\n    return html`\n      <style>\n        /*\n          **NOTE**\n          This element is in the lightDOM so be sure to prefix all styles\n          with \"contact-form\" so styles don't leak.\n         */\n        contact-form fieldset {\n          border: 0;\n          padding: 0;\n          margin: 0;\n          margin-bottom: ${fieldSetSpacing};\n          background-color: white;\n        }\n\n        /* These 1px and 0 margins in the next few selectors are to account for the\n        double outlines caused by the fields being right next to each other */\n        contact-form .row {\n          display: flex;\n          margin: -1px 0 0 0;\n        }\n\n        contact-form fieldset .row:first-child {\n          margin-top: 0;\n        }\n\n        contact-form badged-input.donation-contact-form-region {\n          width: 60%;\n        }\n\n        contact-form badged-input.donation-contact-form-postal-code {\n          width: 40%;\n        }\n\n        contact-form #donation-contact-form-region {\n          width: ${iconFieldWidth};\n        }\n\n        contact-form #donation-contact-form-postal-code {\n          width: ${noIconFieldWidth};\n        }\n\n        contact-form #donation-contact-form-error-message {\n          color: red;\n          font-size: 1.4rem;\n          margin-bottom: 0.6rem;\n        }\n\n        contact-form #donation-contact-form-last-name {\n          width: ${noIconFieldWidth};\n        }\n\n        /* only show for screen readers */\n        contact-form label {\n          position: absolute;\n          left: -10000px;\n          top: auto;\n          width: 1px;\n          height: 1px;\n          overflow: hidden;\n        }\n\n        contact-form .donation-contact-form-input {\n          width: ${iconFieldWidth};\n          border: 0;\n          outline: 0;\n          background: transparent;\n          font-weight: bold;\n          color: ${fieldFontColor};\n          font-size: ${fieldFontSize};\n          padding: 0;\n          font-family: ${fieldFontFamily};\n        }\n\n        contact-form .donation-contact-form-input::placeholder {\n          color: revert;\n        }\n\n        contact-form #donation-contact-form-countryCodeAlpha2 {\n          width: ${iconFieldWidth};\n          height: 100%;\n          box-sizing: border-box;\n          font-weight: bold;\n          font-size: ${fieldFontSize};\n          font-family: ${fieldFontFamily};\n          border: 0;\n          background: #fff;\n          -webkit-appearance: none;\n          -moz-appearance: none;\n          appearance: none;\n        }\n      </style>\n    `;\n  }\n}\n"]}

package/dist/src/payment-flow-handlers/donation-flow-modal-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"donation-flow-modal-manager.js","sourceRoot":"","sources":["../../../src/payment-flow-handlers/donation-flow-modal-manager.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAyB,MAAM,gCAAgC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAIL,YAAY,GAKb,MAAM,4CAA4C,CAAC;AACpD,OAAO,+BAA+B,CAAC;AAGvC,IAAK,gBAIJ;AAJD,WAAK,gBAAgB;IACnB,oCAAgB,CAAA;IAChB,qCAAiB,CAAA;IACjB,mCAAe,CAAA;AACjB,CAAC,EAJI,gBAAgB,KAAhB,gBAAgB,QAIpB;AA6HD,MAAM,OAAO,wBAAwB;IAOnC,YAAY,OAIX;QACC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QACzC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC;QACjD,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;IACrC,CAAC;IAED,kBAAkB;IAClB,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC;IAED,kBAAkB;IAClB,mBAAmB;QACjB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,WAAW,EAAE,gBAAgB,CAAC,IAAI;YAClC,uBAAuB,EAAE,IAAI;YAC7B,oBAAoB,EAAE,KAAK;YAC3B,eAAe,EAAE,KAAK;YACtB,mBAAmB,EAAE,YAAY;YACjC,KAAK,EAAE,IAAI,CAAA;;OAEV;SACF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,kBAAkB;IAClB,iBAAiB,CAAC,OAGjB;QACC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,uBAAuB,EAAE,IAAI;YAC7B,mBAAmB,EAAE,UAAU;YAC/B,WAAW,EAAE,gBAAgB,CAAC,KAAK;YACnC,KAAK,EAAE,IAAI,CAAA;;OAEV;SACF,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YAC1B,MAAM,EAAE,WAAW;SACpB,CAAC,CAAC;QAEH,gBAAgB;QAChB,MAAM,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACpF,IAAI,MAAM,GAAG,WAAW,eAAe,EAAE,CAAC;QAC1C,IAAI,OAAO,CAAC,qBAAqB,EAAE;YACjC,MAAM,IAAI,SAAS,CAAC;SACrB;QACD,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEnD,gBAAgB;QAChB,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAED,kBAAkB;IAClB,cAAc,CAAC,OAAkE;QAC/E,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,WAAW,EAAE,gBAAgB,CAAC,GAAG;YACjC,KAAK,EAAE,IAAI,CAAA;;OAEV;YACD,QAAQ,EAAE,IAAI,CAAA;;OAEb;YACD,OAAO,EAAE,IAAI,CAAA;UACT,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO;OACnB;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YAC1B,MAAM,EAAE,WAAW;YACnB,uBAAuB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;YACzD,kBAAkB,EAAE,IAAI,CAAA;;OAEvB;SACF,CAAC,CAAC;IACL,CAAC;IAED,yBAAyB,CAAC,OAMzB;QACC,MAAM,eAAe,GAAG,GAAS,EAAE;YACjC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,GAAG;QAC/B,CAAC,CAAC;QACF,MAAM,cAAc,GAAG,GAAS,EAAE;YAChC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,GAAG;QAC9B,CAAC,CAAC;QACF,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,KAAK,YAAY,CAAC,MAAM;YAC7D,CAAC,CAAC,0BAA0B;YAC5B,CAAC,CAAC,mBAAmB,CAAC;QAExB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,oBAAoB,EAAE,KAAK;YAC3B,WAAW,EAAE,gBAAgB,CAAC,KAAK;YACnC,KAAK,EAAE,IAAI,CAAA,GAAG,UAAU,EAAE;YAC1B,OAAO,EAAE,IAAI,CAAA;;qBAEE,OAAO,CAAC,MAAM;2BACR,OAAO,CAAC,YAAY;2BACpB,OAAO,CAAC,YAAY;6BAClB,eAAe;4BAChB,cAAc;;OAEnC;SACF,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YACjC,MAAM,EAAE,WAAW;YACnB,uBAAuB,EAAE,cAAc;SACxC,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;IAClB,eAAe,CAAC,OAOf;;QACC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;YAClC,WAAW,EAAE,gBAAgB,CAAC,KAAK;YACnC,KAAK,EAAE,IAAI,CAAA;;OAEV;YACD,mBAAmB,EAAE,UAAU;YAC/B,uBAAuB,EAAE,IAAI;SAC9B,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,wBAAwB,CAAC,sBAAsB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAC5F,IAAI,OAAO,CAAC,aAAa,EAAE;YACzB,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;SACrC;QAED,MAAM,YAAY,GAAG,IAAI,CAAA;;kBAEX,YAAY;yBACL,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,mCAAI,kBAAkB,CAAC,SAAS;uBAClD,CAAC,CAAc,EAAQ,EAAE,CACtC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS;4BACrD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU;yBACtB,CAAC,CAAc,EAAQ,EAAE,CACxC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,EAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS;;;;KAIhF,CAAC;QACF,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YACjC,MAAM,EAAE,WAAW;YACnB,kBAAkB,EAAE,YAAY;YAChC,uBAAuB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,uBAAuB;SAC1D,CAAC,CAAC;IACL,CAAC;IAED,kBAAkB;IACZ,2BAA2B,CAAC,OAWjC;;YACC,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAE3B,IAAI;gBACF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;gBAErE,IAAI,QAAQ,CAAC,OAAO,EAAE;oBACpB,IAAI,CAAC,gCAAgC,CACnC,OAAO,CAAC,YAAY,EACpB,QAAQ,CAAC,KAAwB,CAClC,CAAC;oBACF,OAAO,QAAQ,CAAC;iBACjB;qBAAM;oBACL,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAsB,CAAC;oBAC9C,IAAI,CAAC,cAAc,CAAC;wBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;qBACvB,CAAC,CAAC;oBACH,OAAO,QAAQ,CAAC;iBACjB;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,IAAI,CAAC,cAAc,CAAC;oBAClB,OAAO,EAAE,GAAG,KAAK,EAAE;iBACpB,CAAC,CAAC;gBACH,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;gBACjD,OAAO,SAAS,CAAC;aAClB;QACH,CAAC;KAAA;IAEa,sBAAsB,CAClC,uBAAwC,EACxC,MAAc;;YAEd,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAE3B,IAAI;gBACF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;oBAChE,uBAAuB,EAAE,uBAAuB;oBAChD,MAAM,EAAE,MAAM;iBACf,CAAC,CAAC;gBAEH,IAAI,QAAQ,CAAC,OAAO,EAAE;oBACpB,IAAI,CAAC,cAAc,CAAC;wBAClB,eAAe,EAAE,uBAAuB;wBACxC,qBAAqB,EAAE,QAAQ,CAAC,KAAwB;qBACzD,CAAC,CAAC;iBACJ;qBAAM;oBACL,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAsB,CAAC;oBAC9C,IAAI,CAAC,cAAc,CAAC;wBAClB,OAAO,EAAE,KAAK,CAAC,OAAO;qBACvB,CAAC,CAAC;iBACJ;gBAED,OAAO,QAAQ,CAAC;aACjB;YAAC,OAAO,KAAK,EAAE;gBACd,IAAI,CAAC,cAAc,CAAC;oBAClB,OAAO,EAAE,GAAG,KAAK,EAAE;iBACpB,CAAC,CAAC;gBACH,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;gBACjD,OAAO,SAAS,CAAC;aAClB;QACH,CAAC;KAAA;IAEO,cAAc,CAAC,OAGtB;QACC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAEhC,gBAAgB;QAChB,MAAM,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC,eAAe,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACpF,MAAM,MAAM,GAAG,WAAW,eAAe,SAAS,CAAC;QACnD,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEnD,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAED,MAAM,CAAC,sBAAsB,CAAC,aAAqB;QACjD,IAAI,MAAM,GAAG,CAAC,CAAC;QAEf,IAAI,aAAa,IAAI,EAAE;YAAE,MAAM,GAAG,CAAC,CAAC;aAC/B,IAAI,aAAa,GAAG,EAAE,IAAI,aAAa,IAAI,EAAE;YAAE,MAAM,GAAG,EAAE,CAAC;aAC3D,IAAI,aAAa,GAAG,EAAE,IAAI,aAAa,IAAI,GAAG;YAAE,MAAM,GAAG,EAAE,CAAC;aAC5D,IAAI,aAAa,GAAG,GAAG;YAAE,MAAM,GAAG,EAAE,CAAC;QAE1C,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,kBAAkB;IAMlB,gCAAgC,CAC9B,YAAiC,EACjC,QAAyB;QAEzB,QAAQ,YAAY,CAAC,YAAY,EAAE;YACjC,KAAK,YAAY,CAAC,OAAO;gBACvB,IAAI,CAAC,eAAe,CAAC;oBACnB,aAAa,EAAE,QAAQ,CAAC,MAAM;oBAC9B,WAAW,EAAE,CAAC,MAAc,EAAE,EAAE;wBAC9B,IAAI,CAAC,sBAAsB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;oBAChD,CAAC;oBACD,UAAU,EAAE,GAAG,EAAE;wBACf,IAAI,CAAC,iBAAiB,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;oBACxD,CAAC;oBACD,uBAAuB,EAAE,GAAG,EAAE;wBAC5B,IAAI,CAAC,iBAAiB,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;oBACxD,CAAC;iBACF,CAAC,CAAC;gBACH,MAAM;YACR,KAAK,YAAY,CAAC,OAAO;gBACvB,IAAI,CAAC,iBAAiB,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC;gBACtD,MAAM;YACR,qEAAqE;YACrE,6DAA6D;YAC7D,KAAK,YAAY,CAAC,MAAM;gBACtB,MAAM;YACR;gBACE,MAAM;SACT;IACH,CAAC;CACF","sourcesContent":["import { html } from 'lit';\nimport { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';\nimport { UpsellModalCTAMode } from '../modals/upsell-modal-content';\nimport '../modals/confirm-donation-modal-content';\nimport { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';\nimport {\n  SuccessResponse,\n  ErrorResponse,\n  DonationPaymentInfo,\n  DonationType,\n  PaymentProvider,\n  BillingInfo,\n  CustomerInfo,\n  DonationResponse,\n} from '@internetarchive/donation-form-data-models';\nimport '../modals/error-modal-content';\nimport { DonationControllerEventLoggerInterface } from '../@types/analytics-handler';\n\nenum ModalHeaderColor {\n  Blue = '#497fbf',\n  Green = '#55A183',\n  Red = '#691916',\n}\n\n/**\n * The DonationFlowModalManager is responsible for most of the high-level modal flows.\n *\n * Each of the payment providers has slightly different interactions, ie the PayPal button,\n * ApplePay popup, Venmo launching the app, etc. The modal flow is the same for all of them\n * so this class gets called by the individual payment flow handlers to take the user\n * through the modal flow.\n *\n * @export\n * @interface DonationFlowModalManagerInterface\n */\nexport interface DonationFlowModalManagerInterface {\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n    confirmDonationCB: Function;\n    cancelDonationCB: Function;\n  }): Promise<void>;\n  /**\n   * Close the modal\n   *\n   * @memberof DonationFlowModalManagerInterface\n   */\n  closeModal(): void;\n\n  /**\n   * Show the processing modal\n   *\n   * @memberof DonationFlowModalManagerInterface\n   */\n  showProcessingModal(): void;\n\n  /**\n   * Show the Thank You modal\n   *\n   * @memberof DonationFlowModalManagerInterface\n   */\n  showThankYouModal(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void;\n\n  /**\n   * Show the Error modal\n   *\n   * @param {{\n   *     userClosedModalCallback?: () => void;\n   *   }} [options]\n   * @memberof DonationFlowModalManagerInterface\n   */\n  showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void;\n\n  /**\n   * Show the upsell modal\n   *\n   * @param {{\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 DonationFlowModalManagerInterface\n   */\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    ctaMode?: UpsellModalCTAMode;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n  }): Promise<void>;\n\n  /**\n   * Start the donation submission flow. This kicks off the \"main\" modal flow once the\n   * user authorizes the donation through their payment provider, which provides\n   * us the with the nonce used to complete the donation.\n   *\n   * @param {{\n   *     nonce: string;\n   *     paymentProvider: PaymentProvider;\n   *     donationInfo: DonationPaymentInfo;\n   *     billingInfo: BillingInfo;\n   *     customerInfo: CustomerInfo;\n   *     upsellOnetimeTransactionId?: string;\n   *     customerId?: string;\n   *     recaptchaToken?: string;\n   *     bin?: string; // first 6 digits of CC\n   *     binName?: string; // credit card bank name\n   *   }} options\n   * @returns {(Promise<DonationResponse | undefined>)}\n   * @memberof DonationFlowModalManagerInterface\n   */\n  startDonationSubmissionFlow(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse | undefined>;\n\n  /**\n   * Handle a successful donation response. This encapsulates the logic for the type of\n   * donation that was made.\n   * ie. If it was a one-time donation, show the upsell, if it was monthly do not.\n   *\n   * @param {DonationPaymentInfo} donationInfo\n   * @param {SuccessResponse} response\n   * @memberof DonationFlowModalManagerInterface\n   */\n  handleSuccessfulDonationResponse(\n    donationInfo: DonationPaymentInfo,\n    response: SuccessResponse,\n  ): void;\n}\n\nexport class DonationFlowModalManager implements DonationFlowModalManagerInterface {\n  private braintreeManager: BraintreeManagerInterface;\n\n  private modalManager: ModalManagerInterface;\n\n  private analytics: DonationControllerEventLoggerInterface;\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    modalManager: ModalManagerInterface;\n    analytics: DonationControllerEventLoggerInterface;\n  }) {\n    this.modalManager = options.modalManager;\n    this.braintreeManager = options.braintreeManager;\n    this.analytics = options.analytics;\n  }\n\n  /** @inheritdoc */\n  closeModal(): void {\n    this.modalManager.closeModal();\n  }\n\n  /** @inheritdoc */\n  showProcessingModal(): void {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Blue,\n      showProcessingIndicator: true,\n      closeOnBackdropClick: false,\n      showCloseButton: false,\n      processingImageMode: 'processing',\n      title: html`\n        Processing...\n      `,\n    });\n    this.modalManager.showModal({ config: modalConfig });\n  }\n\n  /** @inheritdoc */\n  showThankYouModal(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void {\n    const modalConfig = new ModalConfig({\n      showProcessingIndicator: true,\n      processingImageMode: 'complete',\n      headerColor: ModalHeaderColor.Green,\n      title: html`\n        Thank You!\n      `,\n    });\n    this.modalManager.showModal({\n      config: modalConfig,\n    });\n\n    // post analytic\n    const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\n    let action = `Donated-${selectedPayment}`;\n    if (options.upsellSuccessResponse) {\n      action += `-upsell`;\n    }\n    const label = options.successResponse.donationType;\n    this.analytics.logDonationFlowEvent(action, label);\n\n    // post donation\n    this.braintreeManager.donationSuccessful(options);\n  }\n\n  /** @inheritdoc */\n  showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Red,\n      title: html`\n        Processing error\n      `,\n      headline: html`\n        There's been a problem completing your donation.\n      `,\n      message: html`\n        ${options?.message}\n      `,\n    });\n\n    this.modalManager.showModal({\n      config: modalConfig,\n      userClosedModalCallback: options?.userClosedModalCallback,\n      customModalContent: html`\n        <donation-form-error-modal-content></donation-form-error-modal-content>\n      `,\n    });\n  }\n\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n    confirmDonationCB: Function;\n    cancelDonationCB: Function;\n  }): Promise<void> {\n    const confirmDonation = (): void => {\n      options?.confirmDonationCB();\n    };\n    const cancelDonation = (): void => {\n      options?.cancelDonationCB();\n    };\n    const modalTitle = options.donationType === DonationType.Upsell\n      ? 'Confirm monthly donation'\n      : 'Complete donation';\n\n    const modalConfig = new ModalConfig({\n      closeOnBackdropClick: false,\n      headerColor: ModalHeaderColor.Green,\n      title: html`${modalTitle}`,\n      message: html`\n        <confirm-donation-modal\n          .amount=\"${options.amount}\"\n          .currencyType=\"${options.currencyType}\"\n          .donationType=\"${options.donationType}\"\n          .confirmDonation=${confirmDonation}\n          .cancelDonation=${cancelDonation}\n        ></confirm-donation-modal>\n      `,\n    });\n    return this.modalManager.showModal({\n      config: modalConfig,\n      userClosedModalCallback: cancelDonation\n    });\n  }\n\n  /** @inheritdoc */\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n    ctaMode?: UpsellModalCTAMode;\n  }): Promise<void> {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Green,\n      title: html`\n        Donation received\n      `,\n      processingImageMode: 'complete',\n      showProcessingIndicator: true,\n    });\n\n    const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(options.oneTimeAmount);\n    if (options.amountChanged) {\n      options.amountChanged(upsellAmount);\n    }\n\n    const modalContent = html`\n      <upsell-modal-content\n        .amount=${upsellAmount}\n        .yesButtonMode=${options?.ctaMode ?? UpsellModalCTAMode.YesButton}\n        @yesSelected=${(e: CustomEvent): void =>\n          options?.yesSelected ? options.yesSelected(e.detail.amount) : undefined}\n        @noThanksSelected=${options?.noSelected}\n        @amountChanged=${(e: CustomEvent): void =>\n          options?.amountChanged ? options.amountChanged(e.detail.amount) : undefined}\n      >\n        <slot name=\"paypal-upsell-button\"></slot>\n      </upsell-modal-content>\n    `;\n    return this.modalManager.showModal({\n      config: modalConfig,\n      customModalContent: modalContent,\n      userClosedModalCallback: options?.userClosedModalCallback,\n    });\n  }\n\n  /** @inheritdoc */\n  async startDonationSubmissionFlow(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse | undefined> {\n    this.showProcessingModal();\n\n    try {\n      const response = await this.braintreeManager.submitDonation(options);\n\n      if (response.success) {\n        this.handleSuccessfulDonationResponse(\n          options.donationInfo,\n          response.value as SuccessResponse,\n        );\n        return response;\n      } else {\n        const error = response.value as ErrorResponse;\n        this.showErrorModal({\n          message: error.message,\n        });\n        return response;\n      }\n    } catch (error) {\n      this.showErrorModal({\n        message: `${error}`,\n      });\n      console.error('error getting a response', error);\n      return undefined;\n    }\n  }\n\n  private async upsellModalYesSelected(\n    oneTimeDonationResponse: SuccessResponse,\n    amount: number,\n  ): Promise<DonationResponse | undefined> {\n    this.showProcessingModal();\n\n    try {\n      const response = await this.braintreeManager.submitUpsellDonation({\n        oneTimeDonationResponse: oneTimeDonationResponse,\n        amount: amount,\n      });\n\n      if (response.success) {\n        this.completeUpsell({\n          successResponse: oneTimeDonationResponse,\n          upsellSuccessResponse: response.value as SuccessResponse,\n        });\n      } else {\n        const error = response.value as ErrorResponse;\n        this.showErrorModal({\n          message: error.message,\n        });\n      }\n\n      return response;\n    } catch (error) {\n      this.showErrorModal({\n        message: `${error}`,\n      });\n      console.error('error getting a response', error);\n      return undefined;\n    }\n  }\n\n  private completeUpsell(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void {\n    this.showThankYouModal(options);\n\n    // post analytic\n    const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\n    const action = `Donated-${selectedPayment}-upsell`;\n    const label = options.successResponse.donationType;\n    this.analytics.logDonationFlowEvent(action, label);\n\n    this.braintreeManager.donationSuccessful(options);\n  }\n\n  static getDefaultUpsellAmount(oneTimeAmount: number): number {\n    let amount = 5;\n\n    if (oneTimeAmount <= 10) amount = 5;\n    else if (oneTimeAmount > 10 && oneTimeAmount <= 25) amount = 10;\n    else if (oneTimeAmount > 25 && oneTimeAmount <= 100) amount = 25;\n    else if (oneTimeAmount > 100) amount = 50;\n\n    return amount;\n  }\n\n  /** @inheritdoc */\n\n  \n\n\n  \n  handleSuccessfulDonationResponse(\n    donationInfo: DonationPaymentInfo,\n    response: SuccessResponse,\n  ): void {\n    switch (donationInfo.donationType) {\n      case DonationType.OneTime:\n        this.showUpsellModal({\n          oneTimeAmount: response.amount,\n          yesSelected: (amount: number) => {\n            this.upsellModalYesSelected(response, amount);\n          },\n          noSelected: () => {\n            this.showThankYouModal({ successResponse: response });\n          },\n          userClosedModalCallback: () => {\n            this.showThankYouModal({ successResponse: response });\n          },\n        });\n        break;\n      case DonationType.Monthly:\n        this.showThankYouModal({ successResponse: response });\n        break;\n      // This case will never be reached, it is only here for completeness.\n      // The upsell case gets handled in `modalYesSelected()` below\n      case DonationType.Upsell:\n        break;\n      default:\n        break;\n    }\n  }\n}\n"]}
+{"version":3,"file":"donation-flow-modal-manager.js","sourceRoot":"","sources":["../../../src/payment-flow-handlers/donation-flow-modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';\nimport { UpsellModalCTAMode } from '../modals/upsell-modal-content';\nimport '../modals/confirm-donation-modal-content';\nimport { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';\nimport {\n  SuccessResponse,\n  ErrorResponse,\n  DonationPaymentInfo,\n  DonationType,\n  PaymentProvider,\n  BillingInfo,\n  CustomerInfo,\n  DonationResponse,\n} from '@internetarchive/donation-form-data-models';\nimport '../modals/error-modal-content';\nimport { DonationControllerEventLoggerInterface } from '../@types/analytics-handler';\n\nenum ModalHeaderColor {\n  Blue = '#497fbf',\n  Green = '#55A183',\n  Red = '#691916',\n}\n\n/**\n * The DonationFlowModalManager is responsible for most of the high-level modal flows.\n *\n * Each of the payment providers has slightly different interactions, ie the PayPal button,\n * ApplePay popup, Venmo launching the app, etc. The modal flow is the same for all of them\n * so this class gets called by the individual payment flow handlers to take the user\n * through the modal flow.\n *\n * @export\n * @interface DonationFlowModalManagerInterface\n */\nexport interface DonationFlowModalManagerInterface {\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n    confirmDonationCB: Function;\n    cancelDonationCB: Function;\n  }): Promise<void>;\n  /**\n   * Close the modal\n   *\n   * @memberof DonationFlowModalManagerInterface\n   */\n  closeModal(): void;\n\n  /**\n   * Show the processing modal\n   *\n   * @memberof DonationFlowModalManagerInterface\n   */\n  showProcessingModal(): void;\n\n  /**\n   * Show the Thank You modal\n   *\n   * @memberof DonationFlowModalManagerInterface\n   */\n  showThankYouModal(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void;\n\n  /**\n   * Show the Error modal\n   *\n   * @param {{\n   *     userClosedModalCallback?: () => void;\n   *   }} [options]\n   * @memberof DonationFlowModalManagerInterface\n   */\n  showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void;\n\n  /**\n   * Show the upsell modal\n   *\n   * @param {{\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 DonationFlowModalManagerInterface\n   */\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    ctaMode?: UpsellModalCTAMode;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n  }): Promise<void>;\n\n  /**\n   * Start the donation submission flow. This kicks off the \"main\" modal flow once the\n   * user authorizes the donation through their payment provider, which provides\n   * us the with the nonce used to complete the donation.\n   *\n   * @param {{\n   *     nonce: string;\n   *     paymentProvider: PaymentProvider;\n   *     donationInfo: DonationPaymentInfo;\n   *     billingInfo: BillingInfo;\n   *     customerInfo: CustomerInfo;\n   *     upsellOnetimeTransactionId?: string;\n   *     customerId?: string;\n   *     recaptchaToken?: string;\n   *     bin?: string; // first 6 digits of CC\n   *     binName?: string; // credit card bank name\n   *   }} options\n   * @returns {(Promise<DonationResponse | undefined>)}\n   * @memberof DonationFlowModalManagerInterface\n   */\n  startDonationSubmissionFlow(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse | undefined>;\n\n  /**\n   * Handle a successful donation response. This encapsulates the logic for the type of\n   * donation that was made.\n   * ie. If it was a one-time donation, show the upsell, if it was monthly do not.\n   *\n   * @param {DonationPaymentInfo} donationInfo\n   * @param {SuccessResponse} response\n   * @memberof DonationFlowModalManagerInterface\n   */\n  handleSuccessfulDonationResponse(\n    donationInfo: DonationPaymentInfo,\n    response: SuccessResponse,\n  ): void;\n}\n\nexport class DonationFlowModalManager implements DonationFlowModalManagerInterface {\n  private braintreeManager: BraintreeManagerInterface;\n\n  private modalManager: ModalManagerInterface;\n\n  private analytics: DonationControllerEventLoggerInterface;\n\n  constructor(options: {\n    braintreeManager: BraintreeManagerInterface;\n    modalManager: ModalManagerInterface;\n    analytics: DonationControllerEventLoggerInterface;\n  }) {\n    this.modalManager = options.modalManager;\n    this.braintreeManager = options.braintreeManager;\n    this.analytics = options.analytics;\n  }\n\n  /** @inheritdoc */\n  closeModal(): void {\n    this.modalManager.closeModal();\n  }\n\n  /** @inheritdoc */\n  showProcessingModal(): void {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Blue,\n      showProcessingIndicator: true,\n      closeOnBackdropClick: false,\n      showCloseButton: false,\n      processingImageMode: 'processing',\n      title: html`\n        Processing...\n      `,\n    });\n    this.modalManager.showModal({ config: modalConfig });\n  }\n\n  /** @inheritdoc */\n  showThankYouModal(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void {\n    const modalConfig = new ModalConfig({\n      showProcessingIndicator: true,\n      processingImageMode: 'complete',\n      headerColor: ModalHeaderColor.Green,\n      title: html`\n        Thank You!\n      `,\n    });\n    this.modalManager.showModal({\n      config: modalConfig,\n    });\n\n    // post analytic\n    const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\n    let action = `Donated-${selectedPayment}`;\n    if (options.upsellSuccessResponse) {\n      action += `-upsell`;\n    }\n    const label = options.successResponse.donationType;\n    this.analytics.logDonationFlowEvent(action, label);\n\n    // post donation\n    this.braintreeManager.donationSuccessful(options);\n  }\n\n  /** @inheritdoc */\n  showErrorModal(options: { message: string; userClosedModalCallback?: () => void }): void {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Red,\n      title: html`\n        Processing error\n      `,\n      headline: html`\n        There's been a problem completing your donation.\n      `,\n      message: html`\n        ${options?.message}\n      `,\n    });\n\n    this.modalManager.showModal({\n      config: modalConfig,\n      userClosedModalCallback: options?.userClosedModalCallback,\n      customModalContent: html`\n        <donation-form-error-modal-content></donation-form-error-modal-content>\n      `,\n    });\n  }\n\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n    confirmDonationCB: Function;\n    cancelDonationCB: Function;\n  }): Promise<void> {\n    const confirmDonation = (): void => {\n      options?.confirmDonationCB();\n    };\n    const cancelDonation = (): void => {\n      options?.cancelDonationCB();\n    };\n    const modalTitle = options.donationType === DonationType.Upsell\n      ? 'Confirm monthly donation'\n      : 'Complete donation';\n\n    const modalConfig = new ModalConfig({\n      closeOnBackdropClick: false,\n      headerColor: ModalHeaderColor.Green,\n      title: html`${modalTitle}`,\n      message: html`\n        <confirm-donation-modal\n          .amount=\"${options.amount}\"\n          .currencyType=\"${options.currencyType}\"\n          .donationType=\"${options.donationType}\"\n          .confirmDonation=${confirmDonation}\n          .cancelDonation=${cancelDonation}\n        ></confirm-donation-modal>\n      `,\n    });\n    return this.modalManager.showModal({\n      config: modalConfig,\n      userClosedModalCallback: cancelDonation\n    });\n  }\n\n  /** @inheritdoc */\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n    ctaMode?: UpsellModalCTAMode;\n  }): Promise<void> {\n    const modalConfig = new ModalConfig({\n      headerColor: ModalHeaderColor.Green,\n      title: html`\n        Donation received\n      `,\n      processingImageMode: 'complete',\n      showProcessingIndicator: true,\n    });\n\n    const upsellAmount = DonationFlowModalManager.getDefaultUpsellAmount(options.oneTimeAmount);\n    if (options.amountChanged) {\n      options.amountChanged(upsellAmount);\n    }\n\n    const modalContent = html`\n      <upsell-modal-content\n        .amount=${upsellAmount}\n        .yesButtonMode=${options?.ctaMode ?? UpsellModalCTAMode.YesButton}\n        @yesSelected=${(e: CustomEvent): void =>\n          options?.yesSelected ? options.yesSelected(e.detail.amount) : undefined}\n        @noThanksSelected=${options?.noSelected}\n        @amountChanged=${(e: CustomEvent): void =>\n          options?.amountChanged ? options.amountChanged(e.detail.amount) : undefined}\n      >\n        <slot name=\"paypal-upsell-button\"></slot>\n      </upsell-modal-content>\n    `;\n    return this.modalManager.showModal({\n      config: modalConfig,\n      customModalContent: modalContent,\n      userClosedModalCallback: options?.userClosedModalCallback,\n    });\n  }\n\n  /** @inheritdoc */\n  async startDonationSubmissionFlow(options: {\n    nonce: string;\n    paymentProvider: PaymentProvider;\n    donationInfo: DonationPaymentInfo;\n    billingInfo: BillingInfo;\n    customerInfo: CustomerInfo;\n    upsellOnetimeTransactionId?: string;\n    customerId?: string;\n    recaptchaToken?: string;\n    bin?: string; // first 6 digits of CC\n    binName?: string; // credit card bank name\n  }): Promise<DonationResponse | undefined> {\n    this.showProcessingModal();\n\n    try {\n      const response = await this.braintreeManager.submitDonation(options);\n\n      if (response.success) {\n        this.handleSuccessfulDonationResponse(\n          options.donationInfo,\n          response.value as SuccessResponse,\n        );\n        return response;\n      } else {\n        const error = response.value as ErrorResponse;\n        this.showErrorModal({\n          message: error.message,\n        });\n        return response;\n      }\n    } catch (error) {\n      this.showErrorModal({\n        message: `${error}`,\n      });\n      console.error('error getting a response', error);\n      return undefined;\n    }\n  }\n\n  private async upsellModalYesSelected(\n    oneTimeDonationResponse: SuccessResponse,\n    amount: number,\n  ): Promise<DonationResponse | undefined> {\n    this.showProcessingModal();\n\n    try {\n      const response = await this.braintreeManager.submitUpsellDonation({\n        oneTimeDonationResponse: oneTimeDonationResponse,\n        amount: amount,\n      });\n\n      if (response.success) {\n        this.completeUpsell({\n          successResponse: oneTimeDonationResponse,\n          upsellSuccessResponse: response.value as SuccessResponse,\n        });\n      } else {\n        const error = response.value as ErrorResponse;\n        this.showErrorModal({\n          message: error.message,\n        });\n      }\n\n      return response;\n    } catch (error) {\n      this.showErrorModal({\n        message: `${error}`,\n      });\n      console.error('error getting a response', error);\n      return undefined;\n    }\n  }\n\n  private completeUpsell(options: {\n    successResponse: SuccessResponse;\n    upsellSuccessResponse?: SuccessResponse;\n  }): void {\n    this.showThankYouModal(options);\n\n    // post analytic\n    const selectedPayment = options.successResponse.paymentProvider.replace(/\\s+/g, '');\n    const action = `Donated-${selectedPayment}-upsell`;\n    const label = options.successResponse.donationType;\n    this.analytics.logDonationFlowEvent(action, label);\n\n    this.braintreeManager.donationSuccessful(options);\n  }\n\n  static getDefaultUpsellAmount(oneTimeAmount: number): number {\n    let amount = 5;\n\n    if (oneTimeAmount <= 10) amount = 5;\n    else if (oneTimeAmount > 10 && oneTimeAmount <= 25) amount = 10;\n    else if (oneTimeAmount > 25 && oneTimeAmount <= 100) amount = 25;\n    else if (oneTimeAmount > 100) amount = 50;\n\n    return amount;\n  }\n\n  /** @inheritdoc */\n  handleSuccessfulDonationResponse(\n    donationInfo: DonationPaymentInfo,\n    response: SuccessResponse,\n  ): void {\n    switch (donationInfo.donationType) {\n      case DonationType.OneTime:\n        this.showUpsellModal({\n          oneTimeAmount: response.amount,\n          yesSelected: (amount: number) => {\n            this.upsellModalYesSelected(response, amount);\n          },\n          noSelected: () => {\n            this.showThankYouModal({ successResponse: response });\n          },\n          userClosedModalCallback: () => {\n            this.showThankYouModal({ successResponse: response });\n          },\n        });\n        break;\n      case DonationType.Monthly:\n        this.showThankYouModal({ successResponse: response });\n        break;\n      // This case will never be reached, it is only here for completeness.\n      // The upsell case gets handled in `modalYesSelected()` below\n      case DonationType.Upsell:\n        break;\n      default:\n        break;\n    }\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-form",
-  "version": "0.5.16-a1",
+  "version": "0.5.17-a1",
   "description": "The Internet Archive Donation Form",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@internetarchive/analytics-manager": "^0.1.2",
     "@internetarchive/donation-form-currency-validator": "^0.3.0",
-    "@internetarchive/donation-form-data-models": "^0.3.2",
+    "@internetarchive/donation-form-data-models": "^0.3.3",
     "@internetarchive/donation-form-edit-donation": "^0.3.13",
     "@internetarchive/donation-form-section": "^0.3.5",
     "@internetarchive/icon-applepay": "^1.3.2",

package/src/braintree-manager/braintree-interfaces.ts

@@ -164,11 +164,6 @@ export interface BraintreeEndpointManagerInterface {
     successResponse: SuccessResponse;
     upsellSuccessResponse?: SuccessResponse;
   }): void;
-
-  /**
-   * Optional callback once success is called
-   */
-  donationSuccessCallback?: Function;
 }
 
 export enum HostingEnvironment {

package/src/braintree-manager/braintree-manager.ts

@@ -165,10 +165,6 @@ export class BraintreeManager implements BraintreeManagerInterface {
     successResponse: SuccessResponse;
     upsellSuccessResponse?: SuccessResponse;
   }): void {
-
-
-
-    
     this.endpointManager.donationSuccessful(options);
   }
 

package/src/form-elements/contact-form/contact-form.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css, TemplateResult } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import {
@@ -51,6 +51,9 @@ export class ContactForm extends LitElement {
   @query('#donation-contact-form-error-message') errorMessage!: HTMLDivElement;
   @query('form') form!: HTMLFormElement;
 
+  /** @keyof countries */
+  @property({ type: String }) selectedCountry: string = 'US';
+
   reportValidity(): boolean {
     const fieldBadgedInputs: Array<[HTMLInputElement, BadgedInput]> = [
       [this.emailField, this.emailBadgedInput],
@@ -186,15 +189,25 @@ export class ContactForm extends LitElement {
   }
 
   private get countrySelectorTemplate(): TemplateResult {
-    const selectedCountry = 'US';
-
     return html`
       <badged-input>
-        <select id="donation-contact-form-countryCodeAlpha2">
+        <select id="donation-contact-form-countryCodeAlpha2"
+        @change=${(e: Event) => {
+          const currCountry = this.selectedCountry;
+          this.selectedCountry = (e.target as HTMLInputElement)?.value ? (e.target as HTMLInputElement)?.value as string : currCountry;
+          // update required visual cue on postal code
+          if (this.selectedCountry === 'US') {
+            this.postalBadgedInput?.setAttribute('required', '');
+            this.postalCodeField?.setAttribute('required', '');
+          } else {
+            this.postalBadgedInput?.removeAttribute('required');
+            this.postalCodeField?.removeAttribute('required');
+          }
+        }}>
           ${Object.keys(countries).map(key => {
             const name = countries[key];
             return html`
-              <option value=${key} ?selected=${key === selectedCountry}>${name}</option>
+              <option value=${key} ?selected=${key === this.selectedCountry}>${name}</option>
             `;
           })}
         </select>

package/src/payment-flow-handlers/donation-flow-modal-manager.ts

@@ -417,11 +417,6 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
   }
 
   /** @inheritdoc */
-
-  
-
-
-  
   handleSuccessfulDonationResponse(
     donationInfo: DonationPaymentInfo,
     response: SuccessResponse,