@internetarchive/elements 1.1.7-webdev-9378.0 → 1.1.7-webdev-9054.1

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

@@ -0,0 +1,522 @@
+import { __decorate } from "tslib";
+import { html, LitElement, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import currency from 'currency.js';
+import { LazyLoaderService, } from '@internetarchive/lazy-loader-service';
+import { BraintreeManager } from './braintree/braintree-manager.js';
+import { PaymentClients, } from './braintree/payment-clients.js';
+import { HostedFieldConfiguration } from './braintree/payment-providers/credit-card/hosted-field-configuration.js';
+import { PaymentFlowHandlers, } from './flow-handlers/payment-flow-handlers.js';
+import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode, } from './form-elements/ia-donation-edit-donation.js';
+import { DonationPaymentInfo, defaultDonationAmounts, defaultSelectedDonationInfo, } from './models/donation-payment-info.js';
+import { DonationType } from './models/donation-type.js';
+import { RecaptchaManager, } from './recaptcha-manager.js';
+import './form-elements/contact-form/ia-donation-contact-form.js';
+import './form-elements/ia-donation-credit-card-fields.js';
+import './ia-donation-form.js';
+/**
+ * Wires the donation form to everything around it: Braintree and the payment
+ * libraries, the modal manager, recaptcha, and analytics. Give it the
+ * environment, tokens and an endpoint manager and it builds the rest.
+ *
+ * It renders into the light DOM, because Braintree's hosted fields, the
+ * PayPal button and recaptcha all refuse to work inside a shadow root. Those
+ * are rendered here and slotted into `<ia-donation-form>`.
+ */
+let IADonationFormController = class IADonationFormController extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.analyticsCategory = 'DonationForm';
+        this.amountOptions = defaultDonationAmounts;
+        this.donationInfo = defaultSelectedDonationInfo;
+        this.amountSelectionLayout = EditDonationAmountSelectionLayout.MultiLine;
+        this.frequencySelectionMode = EditDonationFrequencySelectionMode.Button;
+        this.donorEmail = '';
+        this.lazyLoaderService = new LazyLoaderService();
+        this.recaptchaManagerSetup = false;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('referrer') && this.referrer) {
+            this.braintreeManager?.setReferrer(this.referrer);
+            this.logDonationFlowEvent('referrer', this.referrer);
+        }
+        if (changedProperties.has('loggedInUser') && this.loggedInUser) {
+            this.braintreeManager?.setLoggedInUser(this.loggedInUser);
+        }
+        if (changedProperties.has('origin') && this.origin) {
+            this.braintreeManager?.setOrigin(this.origin);
+            this.logDonationFlowEvent('origin', this.origin);
+        }
+        if (changedProperties.has('paymentClients') ||
+            changedProperties.has('braintreeAuthToken') ||
+            changedProperties.has('endpointManager') ||
+            changedProperties.has('environment')) {
+            this.setupBraintreeManager();
+            this.setupRecaptchaManager();
+        }
+        if (changedProperties.has('recaptchaSiteKey')) {
+            this.setupRecaptchaManager();
+        }
+        if (changedProperties.has('braintreeManager') ||
+            changedProperties.has('recaptchaManager') ||
+            changedProperties.has('modalManager') ||
+            changedProperties.has('recaptchaElement')) {
+            this.setupPaymentFlowHandlers();
+        }
+        // Build the default clients for the environment, unless the consumer
+        // supplied their own
+        if ((changedProperties.has('environment') ||
+            changedProperties.has('lazyLoaderService')) &&
+            this.environment &&
+            (this.paymentClients === undefined ||
+                this.paymentClients === this.defaultPaymentClients)) {
+            this.defaultPaymentClients = new PaymentClients(this.lazyLoaderService, this.environment);
+            this.paymentClients = this.defaultPaymentClients;
+        }
+    }
+    /** Developer convenience: show the confirmation step without a payment. */
+    async showConfirmationStepDev(options) {
+        this.donationForm.showConfirmationModalDev(options);
+    }
+    /** Developer convenience: show the upsell modal without a payment. */
+    async showUpsellModalDev(options) {
+        this.donationForm.showUpsellModalDev(options);
+    }
+    setupBraintreeManager() {
+        if (this.braintreeManager === undefined &&
+            this.braintreeAuthToken &&
+            this.endpointManager &&
+            this.paymentClients &&
+            this.environment) {
+            this.braintreeManager = new BraintreeManager({
+                paymentClients: this.paymentClients,
+                endpointManager: this.endpointManager,
+                authorizationToken: this.braintreeAuthToken,
+                venmoProfileId: this.venmoProfileId,
+                googlePayMerchantId: this.googlePayMerchantId,
+                hostedFieldConfig: this.hostedFieldConfig,
+                hostingEnvironment: this.environment,
+                referrer: this.referrer,
+                loggedInUser: this.loggedInUser,
+                origin: this.origin,
+            });
+            this.braintreeManager.on('paymentProvidersHostedFieldsRetry', (retryNumber) => {
+                this.dispatchEvent(new CustomEvent('paymentProvidersHostedFieldsRetry', {
+                    detail: { retryNumber },
+                }));
+            });
+            this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error) => {
+                this.dispatchEvent(new CustomEvent('paymentProvidersHostedFieldsFailed', {
+                    detail: { error },
+                }));
+            });
+        }
+    }
+    async setupRecaptchaManager() {
+        if (!this.recaptchaSiteKey ||
+            !this.paymentClients ||
+            this.recaptchaManagerSetup) {
+            return;
+        }
+        this.recaptchaManagerSetup = true;
+        const grecaptchaLibrary = await this.paymentClients.recaptchaLibrary.get();
+        this.recaptchaManager = new RecaptchaManager({
+            grecaptchaLibrary,
+            siteKey: this.recaptchaSiteKey,
+        });
+    }
+    firstUpdated() {
+        this.configureFromQueryParams();
+        this.trackViewedEvent();
+    }
+    /**
+     * The donate page links carry the starting configuration in the query
+     * string: `amt`, `contrib_type`, `coverFees`, `dollarAmounts`,
+     * `amountLayout` and `frequencyMode`.
+     */
+    configureFromQueryParams() {
+        const urlParams = new URLSearchParams(window.location.search);
+        let amountOptions = this.amountOptions;
+        const amountOptionsParam = urlParams.get('dollarAmounts');
+        if (amountOptionsParam) {
+            // e.g. `[5,10,25]`
+            const stripBrackets = amountOptionsParam.slice(1, -1);
+            amountOptions = stripBrackets
+                .split(',')
+                .map((value) => parseFloat(value))
+                .filter((value) => !isNaN(value));
+        }
+        let coverFees = this.donationInfo.coverFees;
+        const coverFeesParam = urlParams.get('coverFees');
+        if (coverFeesParam) {
+            coverFees = coverFeesParam === 'true';
+        }
+        let frequency = this.donationInfo.donationType;
+        const frequencyParam = urlParams.get('contrib_type');
+        if (frequencyParam === 'monthly') {
+            frequency = DonationType.Monthly;
+        }
+        let amount = this.donationInfo.amount;
+        const amountParam = urlParams.get('amt');
+        if (amountParam) {
+            const parsedAmount = currency(amountParam).value;
+            if (parsedAmount > 0) {
+                amount = parsedAmount;
+            }
+        }
+        const amountLayoutParam = urlParams.get('amountLayout');
+        if (amountLayoutParam) {
+            const amountLayout = amountLayoutParam;
+            if (Object.values(EditDonationAmountSelectionLayout).includes(amountLayout)) {
+                this.amountSelectionLayout = amountLayout;
+            }
+        }
+        const frequencyModeParam = urlParams.get('frequencyMode');
+        if (frequencyModeParam) {
+            const frequencyMode = frequencyModeParam;
+            if (Object.values(EditDonationFrequencySelectionMode).includes(frequencyMode)) {
+                this.frequencySelectionMode = frequencyMode;
+            }
+        }
+        this.amountOptions = amountOptions;
+        this.donationInfo = new DonationPaymentInfo({
+            donationType: frequency,
+            amount,
+            coverFees,
+        });
+    }
+    setupPaymentFlowHandlers() {
+        if (this.paymentFlowHandlers) {
+            return;
+        }
+        if (!this.braintreeManager ||
+            !this.recaptchaManager ||
+            !this.modalManager ||
+            !this.recaptchaElement) {
+            return;
+        }
+        this.paymentFlowHandlers = new PaymentFlowHandlers({
+            braintreeManager: this.braintreeManager,
+            modalManager: this.modalManager,
+            recaptchaManager: this.recaptchaManager,
+            analytics: {
+                logEvent: this.logEvent.bind(this),
+                logDonationFlowEvent: this.logDonationFlowEvent.bind(this),
+            },
+        });
+        this.donationForm.braintreeManager = this.braintreeManager;
+        this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;
+        this.braintreeManager.startup();
+        this.paymentFlowHandlers.startup();
+        this.recaptchaManager.setup(this.recaptchaElement, 1, 'light', 'image');
+    }
+    get hostedFieldConfig() {
+        const hostedFieldStyle = {
+            input: {
+                'font-size': '16px',
+                'font-family': '"Helvetica Neue", Helvetica, Arial, sans-serif',
+                'font-weight': '700',
+                color: '#333',
+            },
+            ':focus': {
+                color: '#333',
+            },
+            // The text color stays the same when valid or invalid. The badged
+            // input's red border and the error message already show the error
+            // state, and red text on top of them is confusing.
+            '.valid': {
+                color: '#333',
+            },
+            '.invalid': {
+                color: '#333',
+            },
+        };
+        // No placeholders. The visible labels above each field are the only text.
+        const hostedFieldFieldOptions = {
+            number: {
+                selector: '#braintree-creditcard',
+            },
+            cvv: {
+                selector: '#braintree-cvv',
+            },
+            expirationDate: {
+                selector: '#braintree-expiration',
+            },
+        };
+        const hostedFieldContainer = this.creditCardFieldsElement.hostedFieldContainer;
+        return new HostedFieldConfiguration({
+            hostedFieldStyle,
+            hostedFieldFieldOptions,
+            hostedFieldContainer,
+        });
+    }
+    render() {
+        return html `
+      <div class="ia-donation-form-controller-container">
+        <ia-donation-form
+          .braintreeManager=${this.braintreeManager}
+          .contactForm=${this.contactForm}
+          .amountOptions=${this.amountOptions}
+          .donationInfo=${this.donationInfo}
+          .amountSelectionLayout=${this.amountSelectionLayout}
+          .frequencySelectionMode=${this.frequencySelectionMode}
+          @donationInfoChanged=${this.donationInfoChanged}
+          @paymentProviderSelected=${this.paymentProviderSelected}
+          @paymentFlowStarted=${this.paymentFlowStarted}
+          @paymentFlowConfirmed=${this.paymentFlowConfirmed}
+          @paymentFlowCancelled=${this.paymentFlowCancelled}
+          @paymentFlowError=${this.paymentFlowError}
+        >
+          <!--
+            Braintree's hosted fields, the PayPal button and recaptcha can't
+            live in a shadow root, so they render here in the light DOM and
+            are slotted into the form. See
+            https://github.com/braintree/braintree-web-drop-in/issues/614
+            and https://github.com/paypal/paypal-checkout-components/issues/353
+          -->
+          <div slot="braintree-hosted-fields">
+            <ia-donation-credit-card-fields></ia-donation-credit-card-fields>
+          </div>
+
+          <!-- Autofill doesn't reach into shadow DOM, so the contact form is light DOM too -->
+          <div slot="contact-form">
+            <ia-donation-contact-form
+              .donorEmail=${this.donorEmail}
+            ></ia-donation-contact-form>
+          </div>
+
+          <div slot="paypal-button">
+            <div id="paypal-button"></div>
+          </div>
+
+          <slot name="recaptcha" slot="recaptcha"></slot>
+        </ia-donation-form>
+      </div>
+
+      ${this.getStyles}
+    `;
+    }
+    /** Light DOM, for the payment libraries that can't render into a shadow root */
+    createRenderRoot() {
+        return this;
+    }
+    donationInfoChanged(e) {
+        this.logEvent('DonationInfoChanged');
+        this.donationInfo = e.detail.donationInfo;
+    }
+    trackViewedEvent() {
+        this.logEvent('Viewed');
+    }
+    paymentProviderSelected(e) {
+        const paymentProvider = e.detail.paymentProvider;
+        const previousPaymentProvider = e.detail.previousPaymentProvider;
+        const providerNoSpaces = this.removeSpaces(paymentProvider ?? 'unset');
+        let eventName = `ProviderFirstSelected-${providerNoSpaces}`;
+        let previousProviderInfo;
+        if (previousPaymentProvider !== undefined) {
+            eventName = `ProviderChangedTo-${providerNoSpaces}`;
+            previousProviderInfo = `ProviderChangedFrom-${this.removeSpaces(previousPaymentProvider)}`;
+        }
+        this.logEvent(eventName, previousProviderInfo);
+    }
+    paymentFlowConfirmed(e) {
+        this.logEvent('PaymentFlowConfirmed', this.removeSpaces(e.detail.paymentProvider));
+    }
+    paymentFlowStarted(e) {
+        this.logEvent('PaymentFlowStarted', this.removeSpaces(e.detail.paymentProvider));
+    }
+    paymentFlowCancelled(e) {
+        this.logEvent('PaymentFlowCancelled', this.removeSpaces(e.detail.paymentProvider));
+    }
+    paymentFlowError(e) {
+        const providerNoSpaces = this.removeSpaces(e.detail.paymentProvider);
+        this.logEvent('PaymentFlowError', `${providerNoSpaces}-${e.detail.error}`);
+    }
+    removeSpaces(original) {
+        return original.replace(/\s+/g, '');
+    }
+    /** A sampled event in this form's category */
+    logEvent(action, label) {
+        const analyticEvent = {
+            action,
+            label,
+            category: this.analyticsCategory,
+        };
+        this.analyticsHandler?.sendEvent(analyticEvent);
+    }
+    /** An unsampled event in the `DonationFlow` category */
+    logDonationFlowEvent(action, label) {
+        const analyticEvent = {
+            action,
+            label,
+            category: 'DonationFlow',
+        };
+        this.analyticsHandler?.sendEventNoSampling(analyticEvent);
+    }
+    /**
+     * The element renders into the light DOM, so instead of a `styles` block
+     * it writes its own `<style>` tag, scoped to its container class.
+     *
+     * The `--ia-donation-form-*` variables set here are the consumer-facing
+     * theming for the whole form; they fan out to the sections, the amount
+     * picker and the payment buttons.
+     */
+    get getStyles() {
+        return html `
+      <style>
+        .ia-donation-form-controller-container {
+          --donation-form-controller-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          color: var(--ia-donation-form-text-color, #333);
+          background-color: var(
+            --ia-donation-form-background-color,
+            transparent
+          );
+
+          --ia-donation-section-background-color: var(
+            --ia-donation-form-background-color,
+            transparent
+          );
+          --ia-donation-edit-background-color: var(
+            --ia-donation-form-background-color,
+            transparent
+          );
+
+          --ia-donation-section-badge-background-color: var(
+            --ia-donation-form-badge-background-color,
+            #333
+          );
+          --ia-donation-edit-badge-background-color: var(
+            --ia-donation-form-badge-background-color,
+            #333
+          );
+
+          --ia-donation-section-badge-font-color: var(
+            --ia-donation-form-badge-text-color,
+            #fff
+          );
+          --ia-donation-edit-badge-font-color: var(
+            --ia-donation-form-badge-text-color,
+            #fff
+          );
+
+          --ia-donation-edit-button-font-color: var(
+            --ia-donation-form-payment-option-text-color
+          );
+          --ia-donation-edit-button-color: var(
+            --ia-donation-form-payment-option-background-color
+          );
+          --ia-donation-edit-button-selected-color: var(
+            --ia-donation-form-selected-option-background-color
+          );
+          --ia-donation-edit-button-selected-font-color: var(
+            --ia-donation-form-selected-option-text-color
+          );
+        }
+
+        .ia-donation-form-controller-container ia-donation-form:focus {
+          outline: none;
+        }
+
+        /* The real PayPal button, kept but nearly invisible under the local one */
+        .ia-donation-form-controller-container #paypal-button {
+          opacity: 0.001;
+          width: calc(var(--donation-form-controller-base-font-size--) * 5);
+          height: calc(var(--donation-form-controller-base-font-size--) * 3);
+          overflow: hidden;
+        }
+
+        .ia-donation-form-controller-container
+          div[slot='braintree-hosted-fields'] {
+          background-color: white;
+        }
+      </style>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "environment", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "braintreeAuthToken", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "recaptchaSiteKey", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "venmoProfileId", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "googlePayMerchantId", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "analyticsCategory", void 0);
+__decorate([
+    property({ type: Array })
+], IADonationFormController.prototype, "amountOptions", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "donationInfo", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "amountSelectionLayout", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "frequencySelectionMode", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "referrer", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "loggedInUser", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "origin", void 0);
+__decorate([
+    property({ type: String })
+], IADonationFormController.prototype, "donorEmail", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "endpointManager", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "analyticsHandler", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "modalManager", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "recaptchaElement", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "braintreeManager", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "recaptchaManager", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "paymentFlowHandlers", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "paymentClients", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationFormController.prototype, "lazyLoaderService", void 0);
+__decorate([
+    query('ia-donation-form')
+], IADonationFormController.prototype, "donationForm", void 0);
+__decorate([
+    query('ia-donation-credit-card-fields')
+], IADonationFormController.prototype, "creditCardFieldsElement", void 0);
+__decorate([
+    query('ia-donation-contact-form')
+], IADonationFormController.prototype, "contactForm", void 0);
+IADonationFormController = __decorate([
+    customElement('ia-donation-form-controller')
+], IADonationFormController);
+export { IADonationFormController };
+//# sourceMappingURL=ia-donation-form-controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-form-controller.js","sourceRoot":"","sources":["../../../../src/elements/ia-donation-form/ia-donation-form-controller.ts"],"names":[],"mappings":";AACA,OAAO,EACL,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EACL,iBAAiB,GAElB,MAAM,sCAAsC,CAAC;AAO9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EACL,cAAc,GAEf,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sEAAsE,CAAC;AAChH,OAAO,EACL,mBAAmB,GAEpB,MAAM,uCAAuC,CAAC;AAE/C,OAAO,EACL,iCAAiC,EACjC,kCAAkC,GACnC,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGtD,OAAO,EACL,gBAAgB,GAEjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,uDAAuD,CAAC;AAC/D,OAAO,gDAAgD,CAAC;AACxD,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;GAQG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAWuB,sBAAiB,GAAG,cAAc,CAAC;QAEpC,kBAAa,GAAa,sBAAsB,CAAC;QAEhD,iBAAY,GACtC,2BAA2B,CAAC;QAG9B,0BAAqB,GACnB,iCAAiC,CAAC,SAAS,CAAC;QAG9C,2BAAsB,GACpB,kCAAkC,CAAC,MAAM,CAAC;QAQhB,eAAU,GAAW,EAAE,CAAC;QAyBpD,sBAAiB,GAA+B,IAAI,iBAAiB,EAAE,CAAC;QAqIhE,0BAAqB,GAAG,KAAK,CAAC;IAiYxC,CAAC;IA5fC,OAAO,CAAC,iBAAiC;QACvC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvD,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAClD,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YAC/D,IAAI,CAAC,gBAAgB,EAAE,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5D,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACnD,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC9C,IAAI,CAAC,oBAAoB,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACnD,CAAC;QAED,IACE,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC;YACvC,iBAAiB,CAAC,GAAG,CAAC,oBAAoB,CAAC;YAC3C,iBAAiB,CAAC,GAAG,CAAC,iBAAiB,CAAC;YACxC,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC,EACpC,CAAC;YACD,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;QAED,IACE,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC;YACzC,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC;YACzC,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC;YACrC,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,EACzC,CAAC;YACD,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;QAED,qEAAqE;QACrE,qBAAqB;QACrB,IACE,CAAC,iBAAiB,CAAC,GAAG,CAAC,aAAa,CAAC;YACnC,iBAAiB,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC7C,IAAI,CAAC,WAAW;YAChB,CAAC,IAAI,CAAC,cAAc,KAAK,SAAS;gBAChC,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC,qBAAqB,CAAC,EACrD,CAAC;YACD,IAAI,CAAC,qBAAqB,GAAG,IAAI,cAAc,CAC7C,IAAI,CAAC,iBAAiB,EACtB,IAAI,CAAC,WAAW,CACjB,CAAC;YACF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,qBAAqB,CAAC;QACnD,CAAC;IACH,CAAC;IAED,2EAA2E;IAC3E,KAAK,CAAC,uBAAuB,CAAC,OAM7B;QACC,IAAI,CAAC,YAAY,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC;IACtD,CAAC;IAED,sEAAsE;IACtE,KAAK,CAAC,kBAAkB,CAAC,OAOxB;QACC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAEO,qBAAqB;QAC3B,IACE,IAAI,CAAC,gBAAgB,KAAK,SAAS;YACnC,IAAI,CAAC,kBAAkB;YACvB,IAAI,CAAC,eAAe;YACpB,IAAI,CAAC,cAAc;YACnB,IAAI,CAAC,WAAW,EAChB,CAAC;YACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC;gBAC3C,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;gBAC3C,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB;gBAC7C,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;gBACzC,kBAAkB,EAAE,IAAI,CAAC,WAAW;gBACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,EAAE,CACtB,mCAAmC,EACnC,CAAC,WAAmB,EAAE,EAAE;gBACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mCAAmC,EAAE;oBACnD,MAAM,EAAE,EAAE,WAAW,EAAE;iBACxB,CAAC,CACH,CAAC;YACJ,CAAC,CACF,CAAC;YAEF,IAAI,CAAC,gBAAgB,CAAC,EAAE,CACtB,oCAAoC,EACpC,CAAC,KAAc,EAAE,EAAE;gBACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oCAAoC,EAAE;oBACpD,MAAM,EAAE,EAAE,KAAK,EAAE;iBAClB,CAAC,CACH,CAAC;YACJ,CAAC,CACF,CAAC;QACJ,CAAC;IACH,CAAC;IAIO,KAAK,CAAC,qBAAqB;QACjC,IACE,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,IAAI,CAAC,cAAc;YACpB,IAAI,CAAC,qBAAqB,EAC1B,CAAC;YACD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;QAClC,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,EAAE,CAAC;QAC3E,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC;YAC3C,iBAAiB;YACjB,OAAO,EAAE,IAAI,CAAC,gBAAgB;SAC/B,CAAC,CAAC;IACL,CAAC;IAED,YAAY;QACV,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED;;;;OAIG;IACK,wBAAwB;QAC9B,MAAM,SAAS,GAAG,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAE9D,IAAI,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACvC,MAAM,kBAAkB,GAAG,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC1D,IAAI,kBAAkB,EAAE,CAAC;YACvB,mBAAmB;YACnB,MAAM,aAAa,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACtD,aAAa,GAAG,aAAa;iBAC1B,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;iBACjC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;QAC5C,MAAM,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAClD,IAAI,cAAc,EAAE,CAAC;YACnB,SAAS,GAAG,cAAc,KAAK,MAAM,CAAC;QACxC,CAAC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;QAC/C,MAAM,cAAc,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QACrD,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;YACjC,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACnC,CAAC;QAED,IAAI,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QACtC,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,YAAY,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC;YACjD,IAAI,YAAY,GAAG,CAAC,EAAE,CAAC;gBACrB,MAAM,GAAG,YAAY,CAAC;YACxB,CAAC;QACH,CAAC;QAED,MAAM,iBAAiB,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QACxD,IAAI,iBAAiB,EAAE,CAAC;YACtB,MAAM,YAAY,GAChB,iBAAsD,CAAC;YACzD,IACE,MAAM,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,EACvE,CAAC;gBACD,IAAI,CAAC,qBAAqB,GAAG,YAAY,CAAC;YAC5C,CAAC;QACH,CAAC;QAED,MAAM,kBAAkB,GAAG,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC1D,IAAI,kBAAkB,EAAE,CAAC;YACvB,MAAM,aAAa,GACjB,kBAAwD,CAAC;YAC3D,IACE,MAAM,CAAC,MAAM,CAAC,kCAAkC,CAAC,CAAC,QAAQ,CACxD,aAAa,CACd,EACD,CAAC;gBACD,IAAI,CAAC,sBAAsB,GAAG,aAAa,CAAC;YAC9C,CAAC;QACH,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,YAAY,GAAG,IAAI,mBAAmB,CAAC;YAC1C,YAAY,EAAE,SAAS;YACvB,MAAM;YACN,SAAS;SACV,CAAC,CAAC;IACL,CAAC;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,IACE,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,IAAI,CAAC,gBAAgB;YACtB,CAAC,IAAI,CAAC,YAAY;YAClB,CAAC,IAAI,CAAC,gBAAgB,EACtB,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC;YACjD,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,YAAY,EAAE,IAAI,CAAC,YAAY;YAC/B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,SAAS,EAAE;gBACT,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;gBAClC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC;aAC3D;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAC3D,IAAI,CAAC,YAAY,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAEjE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAChC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAC1E,CAAC;IAED,IAAY,iBAAiB;QAC3B,MAAM,gBAAgB,GAA2C;YAC/D,KAAK,EAAE;gBACL,WAAW,EAAE,MAAM;gBACnB,aAAa,EAAE,gDAAgD;gBAC/D,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,MAAM;aACd;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,MAAM;aACd;YACD,kEAAkE;YAClE,kEAAkE;YAClE,mDAAmD;YACnD,QAAQ,EAAE;gBACR,KAAK,EAAE,MAAM;aACd;YACD,UAAU,EAAE;gBACV,KAAK,EAAE,MAAM;aACd;SACF,CAAC;QAEF,0EAA0E;QAC1E,MAAM,uBAAuB,GAAsC;YACjE,MAAM,EAAE;gBACN,QAAQ,EAAE,uBAAuB;aAClC;YACD,GAAG,EAAE;gBACH,QAAQ,EAAE,gBAAgB;aAC3B;YACD,cAAc,EAAE;gBACd,QAAQ,EAAE,uBAAuB;aAClC;SACF,CAAC;QAEF,MAAM,oBAAoB,GACxB,IAAI,CAAC,uBAAuB,CAAC,oBAAoB,CAAC;QAEpD,OAAO,IAAI,wBAAwB,CAAC;YAClC,gBAAgB;YAChB,uBAAuB;YACvB,oBAAoB;SACrB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;8BAGe,IAAI,CAAC,gBAAgB;yBAC1B,IAAI,CAAC,WAAW;2BACd,IAAI,CAAC,aAAa;0BACnB,IAAI,CAAC,YAAY;mCACR,IAAI,CAAC,qBAAqB;oCACzB,IAAI,CAAC,sBAAsB;iCAC9B,IAAI,CAAC,mBAAmB;qCACpB,IAAI,CAAC,uBAAuB;gCACjC,IAAI,CAAC,kBAAkB;kCACrB,IAAI,CAAC,oBAAoB;kCACzB,IAAI,CAAC,oBAAoB;8BAC7B,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;4BAgBvB,IAAI,CAAC,UAAU;;;;;;;;;;;;QAYnC,IAAI,CAAC,SAAS;KACjB,CAAC;IACJ,CAAC;IAED,gFAAgF;IAChF,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,mBAAmB,CAAC,CAAc;QACxC,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;QACrC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;IAC5C,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC;IAEO,uBAAuB,CAAC,CAAc;QAC5C,MAAM,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,eAEpB,CAAC;QACd,MAAM,uBAAuB,GAAG,CAAC,CAAC,MAAM,CAAC,uBAE5B,CAAC;QACd,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,eAAe,IAAI,OAAO,CAAC,CAAC;QACvE,IAAI,SAAS,GAAG,yBAAyB,gBAAgB,EAAE,CAAC;QAC5D,IAAI,oBAAwC,CAAC;QAC7C,IAAI,uBAAuB,KAAK,SAAS,EAAE,CAAC;YAC1C,SAAS,GAAG,qBAAqB,gBAAgB,EAAE,CAAC;YACpD,oBAAoB,GAAG,uBAAuB,IAAI,CAAC,YAAY,CAC7D,uBAAuB,CACxB,EAAE,CAAC;QACN,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACjD,CAAC;IAEO,oBAAoB,CAAC,CAAc;QACzC,IAAI,CAAC,QAAQ,CACX,sBAAsB,EACtB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAC5C,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,CAAc;QACvC,IAAI,CAAC,QAAQ,CACX,oBAAoB,EACpB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAC5C,CAAC;IACJ,CAAC;IAEO,oBAAoB,CAAC,CAAc;QACzC,IAAI,CAAC,QAAQ,CACX,sBAAsB,EACtB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAC5C,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,CAAc;QACrC,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QACrE,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,gBAAgB,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC7E,CAAC;IAEO,YAAY,CAAC,QAAgB;QACnC,OAAO,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,8CAA8C;IACtC,QAAQ,CAAC,MAAc,EAAE,KAAc;QAC7C,MAAM,aAAa,GAAmB;YACpC,MAAM;YACN,KAAK;YACL,QAAQ,EAAE,IAAI,CAAC,iBAAiB;SACjC,CAAC;QACF,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IAED,wDAAwD;IAChD,oBAAoB,CAAC,MAAc,EAAE,KAAc;QACzD,MAAM,aAAa,GAAmB;YACpC,MAAM;YACN,KAAK;YACL,QAAQ,EAAE,cAAc;SACzB,CAAC;QACF,IAAI,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IAC5D,CAAC;IAED;;;;;;;OAOG;IACH,IAAY,SAAS;QACnB,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEV,CAAC;IACJ,CAAC;CACF,CAAA;AA9jB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAkC;AAEjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAA6B;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAA2B;AAE1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAyB;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAA8B;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAoC;AAEpC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;+DAAkD;AAEhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACG;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAEmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wEAEiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAiB;AAEhB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAyB;AAGpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEACyB;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAsC;AAGrC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAgC;AAE/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAA8C;AAE7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAA8C;AAGzE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEACwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA0C;AAMrE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAC6C;AAErC;IAAlC,KAAK,CAAC,kBAAkB,CAAC;8DAAuC;AAGzD;IADP,KAAK,CAAC,gCAAgC,CAAC;yEACqB;AAGrD;IADP,KAAK,CAAC,0BAA0B,CAAC;6DACU;AAjEjC,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CA+jBpC","sourcesContent":["import type * as braintree from 'braintree-web';\nimport {\n  html,\n  LitElement,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport currency from 'currency.js';\nimport {\n  LazyLoaderService,\n  type LazyLoaderServiceInterface,\n} from '@internetarchive/lazy-loader-service';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type {\n  AnalyticsEvent,\n  AnalyticsManagerInterface,\n} from '@internetarchive/analytics-manager';\n\nimport { BraintreeManager } from './braintree/braintree-manager';\nimport type {\n  BraintreeEndpointManagerInterface,\n  BraintreeManagerInterface,\n} from './braintree/braintree-manager-interface';\nimport type { HostingEnvironment } from './braintree/hosting-environment';\nimport {\n  PaymentClients,\n  type PaymentClientsInterface,\n} from './braintree/payment-clients';\nimport { HostedFieldConfiguration } from './braintree/payment-providers/credit-card/hosted-field-configuration';\nimport {\n  PaymentFlowHandlers,\n  type PaymentFlowHandlersInterface,\n} from './flow-handlers/payment-flow-handlers';\nimport type { IADonationContactForm } from './form-elements/contact-form/ia-donation-contact-form';\nimport {\n  EditDonationAmountSelectionLayout,\n  EditDonationFrequencySelectionMode,\n} from './form-elements/ia-donation-edit-donation';\nimport type { IADonationCreditCardFields } from './form-elements/ia-donation-credit-card-fields';\nimport type { IADonationForm } from './ia-donation-form';\nimport {\n  DonationPaymentInfo,\n  defaultDonationAmounts,\n  defaultSelectedDonationInfo,\n} from './models/donation-payment-info';\nimport { DonationType } from './models/donation-type';\nimport type { PaymentProvider } from './models/payment-provider';\nimport type { UpsellModalCTAMode } from './modals/ia-donation-upsell-modal-content';\nimport {\n  RecaptchaManager,\n  type RecaptchaManagerInterface,\n} from './recaptcha-manager';\nimport './form-elements/contact-form/ia-donation-contact-form';\nimport './form-elements/ia-donation-credit-card-fields';\nimport './ia-donation-form';\n\n/**\n * Wires the donation form to everything around it: Braintree and the payment\n * libraries, the modal manager, recaptcha, and analytics. Give it the\n * environment, tokens and an endpoint manager and it builds the rest.\n *\n * It renders into the light DOM, because Braintree's hosted fields, the\n * PayPal button and recaptcha all refuse to work inside a shadow root. Those\n * are rendered here and slotted into `<ia-donation-form>`.\n */\n@customElement('ia-donation-form-controller')\nexport class IADonationFormController extends LitElement {\n  @property({ type: String }) environment?: HostingEnvironment;\n\n  @property({ type: String }) braintreeAuthToken?: string;\n\n  @property({ type: String }) recaptchaSiteKey?: string;\n\n  @property({ type: String }) venmoProfileId?: string;\n\n  @property({ type: String }) googlePayMerchantId?: string;\n\n  @property({ type: String }) analyticsCategory = 'DonationForm';\n\n  @property({ type: Array }) amountOptions: number[] = defaultDonationAmounts;\n\n  @property({ type: Object }) donationInfo: DonationPaymentInfo =\n    defaultSelectedDonationInfo;\n\n  @property({ type: String })\n  amountSelectionLayout: EditDonationAmountSelectionLayout =\n    EditDonationAmountSelectionLayout.MultiLine;\n\n  @property({ type: String })\n  frequencySelectionMode: EditDonationFrequencySelectionMode =\n    EditDonationFrequencySelectionMode.Button;\n\n  @property({ type: String }) referrer?: string;\n\n  @property({ type: String }) loggedInUser?: string;\n\n  @property({ type: String }) origin?: string;\n\n  @property({ type: String }) donorEmail: string = '';\n\n  @property({ type: Object })\n  endpointManager?: BraintreeEndpointManagerInterface;\n\n  @property({ type: Object }) analyticsHandler?: AnalyticsManagerInterface;\n\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  /** The element recaptcha renders its (invisible) widget into. Must be in the light DOM. */\n  @property({ type: Object }) recaptchaElement?: HTMLElement;\n\n  @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n  @property({ type: Object }) recaptchaManager?: RecaptchaManagerInterface;\n\n  @property({ type: Object })\n  paymentFlowHandlers?: PaymentFlowHandlersInterface;\n\n  @property({ type: Object }) paymentClients?: PaymentClientsInterface;\n\n  /** The clients this element built itself, so it knows when it may rebuild them */\n  private defaultPaymentClients?: PaymentClientsInterface;\n\n  @property({ type: Object })\n  lazyLoaderService: LazyLoaderServiceInterface = new LazyLoaderService();\n\n  @query('ia-donation-form') private donationForm!: IADonationForm;\n\n  @query('ia-donation-credit-card-fields')\n  private creditCardFieldsElement!: IADonationCreditCardFields;\n\n  @query('ia-donation-contact-form')\n  private contactForm?: IADonationContactForm;\n\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('referrer') && this.referrer) {\n      this.braintreeManager?.setReferrer(this.referrer);\n      this.logDonationFlowEvent('referrer', this.referrer);\n    }\n\n    if (changedProperties.has('loggedInUser') && this.loggedInUser) {\n      this.braintreeManager?.setLoggedInUser(this.loggedInUser);\n    }\n\n    if (changedProperties.has('origin') && this.origin) {\n      this.braintreeManager?.setOrigin(this.origin);\n      this.logDonationFlowEvent('origin', this.origin);\n    }\n\n    if (\n      changedProperties.has('paymentClients') ||\n      changedProperties.has('braintreeAuthToken') ||\n      changedProperties.has('endpointManager') ||\n      changedProperties.has('environment')\n    ) {\n      this.setupBraintreeManager();\n      this.setupRecaptchaManager();\n    }\n\n    if (changedProperties.has('recaptchaSiteKey')) {\n      this.setupRecaptchaManager();\n    }\n\n    if (\n      changedProperties.has('braintreeManager') ||\n      changedProperties.has('recaptchaManager') ||\n      changedProperties.has('modalManager') ||\n      changedProperties.has('recaptchaElement')\n    ) {\n      this.setupPaymentFlowHandlers();\n    }\n\n    // Build the default clients for the environment, unless the consumer\n    // supplied their own\n    if (\n      (changedProperties.has('environment') ||\n        changedProperties.has('lazyLoaderService')) &&\n      this.environment &&\n      (this.paymentClients === undefined ||\n        this.paymentClients === this.defaultPaymentClients)\n    ) {\n      this.defaultPaymentClients = new PaymentClients(\n        this.lazyLoaderService,\n        this.environment,\n      );\n      this.paymentClients = this.defaultPaymentClients;\n    }\n  }\n\n  /** Developer convenience: show the confirmation step without a payment. */\n  async showConfirmationStepDev(options: {\n    donationType: DonationType;\n    amount: number;\n    currencyType: string;\n    cancelDonationCB: () => void;\n    confirmDonationCB: () => void;\n  }): Promise<void> {\n    this.donationForm.showConfirmationModalDev(options);\n  }\n\n  /** Developer convenience: show the upsell modal without a payment. */\n  async showUpsellModalDev(options: {\n    oneTimeAmount: number;\n    ctaMode?: UpsellModalCTAMode;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n  }): Promise<void> {\n    this.donationForm.showUpsellModalDev(options);\n  }\n\n  private setupBraintreeManager(): void {\n    if (\n      this.braintreeManager === undefined &&\n      this.braintreeAuthToken &&\n      this.endpointManager &&\n      this.paymentClients &&\n      this.environment\n    ) {\n      this.braintreeManager = new BraintreeManager({\n        paymentClients: this.paymentClients,\n        endpointManager: this.endpointManager,\n        authorizationToken: this.braintreeAuthToken,\n        venmoProfileId: this.venmoProfileId,\n        googlePayMerchantId: this.googlePayMerchantId,\n        hostedFieldConfig: this.hostedFieldConfig,\n        hostingEnvironment: this.environment,\n        referrer: this.referrer,\n        loggedInUser: this.loggedInUser,\n        origin: this.origin,\n      });\n\n      this.braintreeManager.on(\n        'paymentProvidersHostedFieldsRetry',\n        (retryNumber: number) => {\n          this.dispatchEvent(\n            new CustomEvent('paymentProvidersHostedFieldsRetry', {\n              detail: { retryNumber },\n            }),\n          );\n        },\n      );\n\n      this.braintreeManager.on(\n        'paymentProvidersHostedFieldsFailed',\n        (error: unknown) => {\n          this.dispatchEvent(\n            new CustomEvent('paymentProvidersHostedFieldsFailed', {\n              detail: { error },\n            }),\n          );\n        },\n      );\n    }\n  }\n\n  private recaptchaManagerSetup = false;\n\n  private async setupRecaptchaManager(): Promise<void> {\n    if (\n      !this.recaptchaSiteKey ||\n      !this.paymentClients ||\n      this.recaptchaManagerSetup\n    ) {\n      return;\n    }\n    this.recaptchaManagerSetup = true;\n    const grecaptchaLibrary = await this.paymentClients.recaptchaLibrary.get();\n    this.recaptchaManager = new RecaptchaManager({\n      grecaptchaLibrary,\n      siteKey: this.recaptchaSiteKey,\n    });\n  }\n\n  firstUpdated(): void {\n    this.configureFromQueryParams();\n    this.trackViewedEvent();\n  }\n\n  /**\n   * The donate page links carry the starting configuration in the query\n   * string: `amt`, `contrib_type`, `coverFees`, `dollarAmounts`,\n   * `amountLayout` and `frequencyMode`.\n   */\n  private configureFromQueryParams(): void {\n    const urlParams = new URLSearchParams(window.location.search);\n\n    let amountOptions = this.amountOptions;\n    const amountOptionsParam = urlParams.get('dollarAmounts');\n    if (amountOptionsParam) {\n      // e.g. `[5,10,25]`\n      const stripBrackets = amountOptionsParam.slice(1, -1);\n      amountOptions = stripBrackets\n        .split(',')\n        .map((value) => parseFloat(value))\n        .filter((value) => !isNaN(value));\n    }\n\n    let coverFees = this.donationInfo.coverFees;\n    const coverFeesParam = urlParams.get('coverFees');\n    if (coverFeesParam) {\n      coverFees = coverFeesParam === 'true';\n    }\n\n    let frequency = this.donationInfo.donationType;\n    const frequencyParam = urlParams.get('contrib_type');\n    if (frequencyParam === 'monthly') {\n      frequency = DonationType.Monthly;\n    }\n\n    let amount = this.donationInfo.amount;\n    const amountParam = urlParams.get('amt');\n    if (amountParam) {\n      const parsedAmount = currency(amountParam).value;\n      if (parsedAmount > 0) {\n        amount = parsedAmount;\n      }\n    }\n\n    const amountLayoutParam = urlParams.get('amountLayout');\n    if (amountLayoutParam) {\n      const amountLayout =\n        amountLayoutParam as EditDonationAmountSelectionLayout;\n      if (\n        Object.values(EditDonationAmountSelectionLayout).includes(amountLayout)\n      ) {\n        this.amountSelectionLayout = amountLayout;\n      }\n    }\n\n    const frequencyModeParam = urlParams.get('frequencyMode');\n    if (frequencyModeParam) {\n      const frequencyMode =\n        frequencyModeParam as EditDonationFrequencySelectionMode;\n      if (\n        Object.values(EditDonationFrequencySelectionMode).includes(\n          frequencyMode,\n        )\n      ) {\n        this.frequencySelectionMode = frequencyMode;\n      }\n    }\n\n    this.amountOptions = amountOptions;\n    this.donationInfo = new DonationPaymentInfo({\n      donationType: frequency,\n      amount,\n      coverFees,\n    });\n  }\n\n  private setupPaymentFlowHandlers(): void {\n    if (this.paymentFlowHandlers) {\n      return;\n    }\n\n    if (\n      !this.braintreeManager ||\n      !this.recaptchaManager ||\n      !this.modalManager ||\n      !this.recaptchaElement\n    ) {\n      return;\n    }\n\n    this.paymentFlowHandlers = new PaymentFlowHandlers({\n      braintreeManager: this.braintreeManager,\n      modalManager: this.modalManager,\n      recaptchaManager: this.recaptchaManager,\n      analytics: {\n        logEvent: this.logEvent.bind(this),\n        logDonationFlowEvent: this.logDonationFlowEvent.bind(this),\n      },\n    });\n\n    this.donationForm.braintreeManager = this.braintreeManager;\n    this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;\n\n    this.braintreeManager.startup();\n    this.paymentFlowHandlers.startup();\n    this.recaptchaManager.setup(this.recaptchaElement, 1, 'light', 'image');\n  }\n\n  private get hostedFieldConfig(): HostedFieldConfiguration {\n    const hostedFieldStyle: Record<string, Record<string, string>> = {\n      input: {\n        'font-size': '16px',\n        'font-family': '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        'font-weight': '700',\n        color: '#333',\n      },\n      ':focus': {\n        color: '#333',\n      },\n      // The text color stays the same when valid or invalid. The badged\n      // input's red border and the error message already show the error\n      // state, and red text on top of them is confusing.\n      '.valid': {\n        color: '#333',\n      },\n      '.invalid': {\n        color: '#333',\n      },\n    };\n\n    // No placeholders. The visible labels above each field are the only text.\n    const hostedFieldFieldOptions: braintree.HostedFieldFieldOptions = {\n      number: {\n        selector: '#braintree-creditcard',\n      },\n      cvv: {\n        selector: '#braintree-cvv',\n      },\n      expirationDate: {\n        selector: '#braintree-expiration',\n      },\n    };\n\n    const hostedFieldContainer =\n      this.creditCardFieldsElement.hostedFieldContainer;\n\n    return new HostedFieldConfiguration({\n      hostedFieldStyle,\n      hostedFieldFieldOptions,\n      hostedFieldContainer,\n    });\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"ia-donation-form-controller-container\">\n        <ia-donation-form\n          .braintreeManager=${this.braintreeManager}\n          .contactForm=${this.contactForm}\n          .amountOptions=${this.amountOptions}\n          .donationInfo=${this.donationInfo}\n          .amountSelectionLayout=${this.amountSelectionLayout}\n          .frequencySelectionMode=${this.frequencySelectionMode}\n          @donationInfoChanged=${this.donationInfoChanged}\n          @paymentProviderSelected=${this.paymentProviderSelected}\n          @paymentFlowStarted=${this.paymentFlowStarted}\n          @paymentFlowConfirmed=${this.paymentFlowConfirmed}\n          @paymentFlowCancelled=${this.paymentFlowCancelled}\n          @paymentFlowError=${this.paymentFlowError}\n        >\n          <!--\n            Braintree's hosted fields, the PayPal button and recaptcha can't\n            live in a shadow root, so they render here in the light DOM and\n            are slotted into the form. See\n            https://github.com/braintree/braintree-web-drop-in/issues/614\n            and https://github.com/paypal/paypal-checkout-components/issues/353\n          -->\n          <div slot=\"braintree-hosted-fields\">\n            <ia-donation-credit-card-fields></ia-donation-credit-card-fields>\n          </div>\n\n          <!-- Autofill doesn't reach into shadow DOM, so the contact form is light DOM too -->\n          <div slot=\"contact-form\">\n            <ia-donation-contact-form\n              .donorEmail=${this.donorEmail}\n            ></ia-donation-contact-form>\n          </div>\n\n          <div slot=\"paypal-button\">\n            <div id=\"paypal-button\"></div>\n          </div>\n\n          <slot name=\"recaptcha\" slot=\"recaptcha\"></slot>\n        </ia-donation-form>\n      </div>\n\n      ${this.getStyles}\n    `;\n  }\n\n  /** Light DOM, for the payment libraries that can't render into a shadow root */\n  createRenderRoot(): this {\n    return this;\n  }\n\n  private donationInfoChanged(e: CustomEvent): void {\n    this.logEvent('DonationInfoChanged');\n    this.donationInfo = e.detail.donationInfo;\n  }\n\n  private trackViewedEvent(): void {\n    this.logEvent('Viewed');\n  }\n\n  private paymentProviderSelected(e: CustomEvent): void {\n    const paymentProvider = e.detail.paymentProvider as\n      | PaymentProvider\n      | undefined;\n    const previousPaymentProvider = e.detail.previousPaymentProvider as\n      | PaymentProvider\n      | undefined;\n    const providerNoSpaces = this.removeSpaces(paymentProvider ?? 'unset');\n    let eventName = `ProviderFirstSelected-${providerNoSpaces}`;\n    let previousProviderInfo: string | undefined;\n    if (previousPaymentProvider !== undefined) {\n      eventName = `ProviderChangedTo-${providerNoSpaces}`;\n      previousProviderInfo = `ProviderChangedFrom-${this.removeSpaces(\n        previousPaymentProvider,\n      )}`;\n    }\n\n    this.logEvent(eventName, previousProviderInfo);\n  }\n\n  private paymentFlowConfirmed(e: CustomEvent): void {\n    this.logEvent(\n      'PaymentFlowConfirmed',\n      this.removeSpaces(e.detail.paymentProvider),\n    );\n  }\n\n  private paymentFlowStarted(e: CustomEvent): void {\n    this.logEvent(\n      'PaymentFlowStarted',\n      this.removeSpaces(e.detail.paymentProvider),\n    );\n  }\n\n  private paymentFlowCancelled(e: CustomEvent): void {\n    this.logEvent(\n      'PaymentFlowCancelled',\n      this.removeSpaces(e.detail.paymentProvider),\n    );\n  }\n\n  private paymentFlowError(e: CustomEvent): void {\n    const providerNoSpaces = this.removeSpaces(e.detail.paymentProvider);\n    this.logEvent('PaymentFlowError', `${providerNoSpaces}-${e.detail.error}`);\n  }\n\n  private removeSpaces(original: string): string {\n    return original.replace(/\\s+/g, '');\n  }\n\n  /** A sampled event in this form's category */\n  private logEvent(action: string, label?: string): void {\n    const analyticEvent: AnalyticsEvent = {\n      action,\n      label,\n      category: this.analyticsCategory,\n    };\n    this.analyticsHandler?.sendEvent(analyticEvent);\n  }\n\n  /** An unsampled event in the `DonationFlow` category */\n  private logDonationFlowEvent(action: string, label?: string): void {\n    const analyticEvent: AnalyticsEvent = {\n      action,\n      label,\n      category: 'DonationFlow',\n    };\n    this.analyticsHandler?.sendEventNoSampling(analyticEvent);\n  }\n\n  /**\n   * The element renders into the light DOM, so instead of a `styles` block\n   * it writes its own `<style>` tag, scoped to its container class.\n   *\n   * The `--ia-donation-form-*` variables set here are the consumer-facing\n   * theming for the whole form; they fan out to the sections, the amount\n   * picker and the payment buttons.\n   */\n  private get getStyles(): TemplateResult {\n    return html`\n      <style>\n        .ia-donation-form-controller-container {\n          --donation-form-controller-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          color: var(--ia-donation-form-text-color, #333);\n          background-color: var(\n            --ia-donation-form-background-color,\n            transparent\n          );\n\n          --ia-donation-section-background-color: var(\n            --ia-donation-form-background-color,\n            transparent\n          );\n          --ia-donation-edit-background-color: var(\n            --ia-donation-form-background-color,\n            transparent\n          );\n\n          --ia-donation-section-badge-background-color: var(\n            --ia-donation-form-badge-background-color,\n            #333\n          );\n          --ia-donation-edit-badge-background-color: var(\n            --ia-donation-form-badge-background-color,\n            #333\n          );\n\n          --ia-donation-section-badge-font-color: var(\n            --ia-donation-form-badge-text-color,\n            #fff\n          );\n          --ia-donation-edit-badge-font-color: var(\n            --ia-donation-form-badge-text-color,\n            #fff\n          );\n\n          --ia-donation-edit-button-font-color: var(\n            --ia-donation-form-payment-option-text-color\n          );\n          --ia-donation-edit-button-color: var(\n            --ia-donation-form-payment-option-background-color\n          );\n          --ia-donation-edit-button-selected-color: var(\n            --ia-donation-form-selected-option-background-color\n          );\n          --ia-donation-edit-button-selected-font-color: var(\n            --ia-donation-form-selected-option-text-color\n          );\n        }\n\n        .ia-donation-form-controller-container ia-donation-form:focus {\n          outline: none;\n        }\n\n        /* The real PayPal button, kept but nearly invisible under the local one */\n        .ia-donation-form-controller-container #paypal-button {\n          opacity: 0.001;\n          width: calc(var(--donation-form-controller-base-font-size--) * 5);\n          height: calc(var(--donation-form-controller-base-font-size--) * 3);\n          overflow: hidden;\n        }\n\n        .ia-donation-form-controller-container\n          div[slot='braintree-hosted-fields'] {\n          background-color: white;\n        }\n      </style>\n    `;\n  }\n}\n"]}