@internetarchive/donation-form 0.5.17-a3 → 0.5.18-alpha.1

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

@@ -1,563 +1,563 @@
-import { __awaiter, __decorate } from "tslib";
-import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import currency from 'currency.js';
-import { LazyLoaderService, } from '@internetarchive/lazy-loader-service';
-import { PaymentClients } from './braintree-manager/payment-clients';
-import { BraintreeManager } from './braintree-manager/braintree-manager';
-import { PaymentFlowHandlers, } from './payment-flow-handlers/payment-flow-handlers';
-import { RecaptchaManager } from './recaptcha-manager/recaptcha-manager';
-import { HostedFieldConfiguration } from './braintree-manager/payment-providers/credit-card/hosted-field-configuration';
-import { HostedFieldContainer, } from './braintree-manager/payment-providers/credit-card/hosted-field-container';
-import './form-elements/badged-input';
-import './form-elements/contact-form/contact-form';
-import creditCardImg from '@internetarchive/icon-credit-card';
-import calendarImg from '@internetarchive/icon-calendar';
-import lockImg from '@internetarchive/icon-lock';
-import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode, } from '@internetarchive/donation-form-edit-donation';
-import { DonationPaymentInfo, DonationType, defaultDonationAmounts, defaultSelectedDonationInfo, } from '@internetarchive/donation-form-data-models';
-/**
- * The DonationFormController orchestrates several of the interactions between
- * the various pieces of the donation form like modals, braintree, paypal, and recaptcha
- *
- * @export
- * @class RadioPlayerController
- * @extends {LitElement}
- */
-let DonationFormController = class DonationFormController extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.analyticsCategory = 'DonationForm';
-        this.amountOptions = defaultDonationAmounts;
-        this.donationInfo = defaultSelectedDonationInfo;
-        this.amountSelectionLayout = EditDonationAmountSelectionLayout.MultiLine;
-        this.frequencySelectionMode = EditDonationFrequencySelectionMode.Button;
-        this.lazyLoaderService = new LazyLoaderService();
-        this.recaptchaManagerSetup = false;
-    }
-    /** @inheritdoc */
-    updated(changedProperties) {
-        var _a, _b, _c;
-        if (changedProperties.has('referrer') && this.referrer) {
-            (_a = this.braintreeManager) === null || _a === void 0 ? void 0 : _a.setReferrer(this.referrer);
-            this.logDonationFlowEvent('referrer', this.referrer);
-        }
-        if (changedProperties.has('loggedInUser') && this.loggedInUser) {
-            (_b = this.braintreeManager) === null || _b === void 0 ? void 0 : _b.setLoggedInUser(this.loggedInUser);
-        }
-        if (changedProperties.has('origin') && this.origin) {
-            (_c = this.braintreeManager) === null || _c === void 0 ? void 0 : _c.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();
-        }
-        if ((changedProperties.has('environment') || changedProperties.has('lazyLoaderService')) &&
-            this.environment) {
-            this.paymentClients = new PaymentClients(this.lazyLoaderService, this.environment);
-        }
-    }
-    showConfirmationStepDev(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.donationForm.showConfirmationModalDev(options);
-        });
-    }
-    showUpsellModalDev(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.donationForm.showUpsellModalDev(options);
-        });
-    }
-    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) => {
-                const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {
-                    detail: { retryNumber },
-                });
-                this.dispatchEvent(event);
-            });
-            this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error) => {
-                const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {
-                    detail: { error },
-                });
-                this.dispatchEvent(event);
-            });
-        }
-    }
-    setupRecaptchaManager() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.recaptchaSiteKey || !this.paymentClients || this.recaptchaManagerSetup) {
-                return;
-            }
-            this.recaptchaManagerSetup = true;
-            const grecaptchaLibrary = yield this.paymentClients.recaptchaLibrary.get();
-            this.recaptchaManager = new RecaptchaManager({
-                grecaptchaLibrary: grecaptchaLibrary,
-                siteKey: this.recaptchaSiteKey,
-            });
-        });
-    }
-    /** @inheritdoc */
-    firstUpdated() {
-        this.configureFromQueryParams();
-        this.trackViewedEvent();
-    }
-    configureFromQueryParams() {
-        const urlParams = new URLSearchParams(window.location.search);
-        let amountOptions = this.amountOptions;
-        const amountOptionsParam = urlParams.get('dollarAmounts');
-        if (amountOptionsParam) {
-            const stripBrackets = amountOptionsParam.slice(1, -1);
-            const splitValues = stripBrackets.split(',');
-            const numberArray = splitValues
-                .map(value => parseFloat(value))
-                .filter(value => !isNaN(value));
-            amountOptions = numberArray;
-        }
-        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;
-            }
-        }
-        const donationInfo = new DonationPaymentInfo({
-            donationType: frequency,
-            amount: amount,
-            coverFees: coverFees,
-        });
-        this.amountOptions = amountOptions;
-        this.donationInfo = donationInfo;
-    }
-    setupPaymentFlowHandlers() {
-        var _a;
-        // only set up once
-        if (this.paymentFlowHandlers) {
-            return;
-        }
-        // verify we have all of the dependencies
-        if (!this.braintreeManager ||
-            !this.recaptchaManager ||
-            !this.modalManager ||
-            !this.recaptchaElement) {
-            return;
-        }
-        this.paymentFlowHandlers = new PaymentFlowHandlers({
-            braintreeManager: this.braintreeManager,
-            modalManager: this.modalManager,
-            recaptchaManager: this.recaptchaManager,
-            resources: {
-                analytics: {
-                    logEvent: this.logEvent.bind(this),
-                    logDonationFlowEvent: this.logDonationFlowEvent.bind(this),
-                },
-            }
-        });
-        this.donationForm.braintreeManager = this.braintreeManager;
-        this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;
-        this.braintreeManager.startup();
-        (_a = this.paymentFlowHandlers) === null || _a === void 0 ? void 0 : _a.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',
-            },
-            '.valid': {},
-            '.invalid': {
-                color: '#b00b00',
-            },
-        };
-        const hostedFieldFieldOptions = {
-            number: {
-                selector: '#braintree-creditcard',
-                placeholder: 'Card number',
-            },
-            cvv: {
-                selector: '#braintree-cvv',
-                placeholder: 'CVC',
-            },
-            expirationDate: {
-                selector: '#braintree-expiration',
-                placeholder: 'MM / YY',
-            },
-        };
-        const hostedFieldContainer = new HostedFieldContainer({
-            number: this.braintreeNumberInput,
-            cvv: this.braintreeCVVInput,
-            expirationDate: this.braintreeExpirationDateInput,
-            errorContainer: this.braintreeErrorMessage,
-        });
-        const config = new HostedFieldConfiguration({
-            hostedFieldStyle,
-            hostedFieldFieldOptions,
-            hostedFieldContainer,
-        });
-        return config;
-    }
-    /** @inheritdoc */
-    render() {
-        return html `
-      <div class="donation-form-controller-container">
-        <donation-form
-          .environment=${this.environment}
-          .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}
-        >
-          <!--
-            Why are these slots here?
-
-            Due to the way Braintree, PayPal, and Recaptcha work, they cannot exist
-            in the shadowDOM so must exist in the clearDOM and get passed
-            in through a <slot>.
-
-            Braintree / PayPal are working on a solution to this. See:
-            - https://github.com/braintree/braintree-web-drop-in/issues/614#issuecomment-616796104
-            - https://github.com/braintree/braintree-web-drop-in/issues/296#issuecomment-616749307
-            - https://github.com/paypal/paypal-checkout-components/issues/353#issuecomment-595956216
-          -->
-          <div slot="braintree-hosted-fields">
-            <div id="braintree-error-message"></div>
-            <div class="braintree-row">
-              <badged-input .icon=${creditCardImg} ?required=${true} class="creditcard">
-                <div class="braintree-input" id="braintree-creditcard"></div>
-              </badged-input>
-            </div>
-            <div class="braintree-row">
-              <badged-input .icon=${calendarImg} ?required=${true} class="expiration">
-                <div class="braintree-input" id="braintree-expiration"></div>
-              </badged-input>
-              <badged-input .icon=${lockImg} ?required=${true} class="cvv">
-                <div class="braintree-input" id="braintree-cvv"></div>
-              </badged-input>
-            </div>
-          </div>
-
-          <!--
-            Form autocompletion does not work in the shadowDOM so
-            we slot the contact form in from the lightDOM and pass
-            in a reference to it in the <donation-form> tag above
-          -->
-          <div slot="contact-form">
-            <contact-form></contact-form>
-          </div>
-
-          <div slot="paypal-button">
-            <div id="paypal-button"></div>
-          </div>
-
-          <slot name="recaptcha" slot="recaptcha"> </slot>
-        </donation-form>
-      </div>
-
-      ${this.getStyles}
-    `;
-    }
-    /** @inheritdoc */
-    createRenderRoot() {
-        // Render template without shadow DOM. Note that shadow DOM features like
-        // encapsulated CSS and slots are unavailable.
-        // We have to do this to accomodate the PayPal buttons and HostedFields,
-        // which do not work in the shadow DOM
-        return this;
-    }
-    donationInfoChanged() {
-        this.logEvent('DonationInfoChanged');
-    }
-    trackViewedEvent() {
-        this.logEvent('Viewed');
-    }
-    paymentProviderSelected(e) {
-        const paymentProvider = e.detail.paymentProvider;
-        const previousPaymentProvider = e.detail.previousPaymentProvider;
-        const providerNoSpaces = this.removeSpaces(paymentProvider);
-        let eventName = `ProviderFirstSelected-${providerNoSpaces}`;
-        let previousProviderInfo;
-        if (previousPaymentProvider !== undefined) {
-            eventName = `ProviderChangedTo-${providerNoSpaces}`;
-            previousProviderInfo = `ProviderChangedFrom-${this.removeSpaces(previousPaymentProvider)}`;
-        }
-        this.logEvent(eventName, previousProviderInfo);
-    }
-    paymentFlowConfirmed(e) {
-        const selectedProvider = e.detail.paymentProvider;
-        const providerNoSpaces = this.removeSpaces(selectedProvider);
-        this.logEvent('PaymentFlowConfirmed', providerNoSpaces);
-    }
-    paymentFlowStarted(e) {
-        const selectedProvider = e.detail.paymentProvider;
-        const providerNoSpaces = this.removeSpaces(selectedProvider);
-        this.logEvent('PaymentFlowStarted', providerNoSpaces);
-    }
-    paymentFlowCancelled(e) {
-        const selectedProvider = e.detail.paymentProvider;
-        const providerNoSpaces = this.removeSpaces(selectedProvider);
-        this.logEvent('PaymentFlowCancelled', providerNoSpaces);
-    }
-    paymentFlowError(e) {
-        const selectedProvider = e.detail.paymentProvider;
-        const providerNoSpaces = this.removeSpaces(selectedProvider);
-        const error = e.detail.error;
-        const detail = `${providerNoSpaces}-${error}`;
-        this.logEvent('PaymentFlowError', detail);
-    }
-    removeSpaces(original) {
-        return original.replace(/\s+/g, '');
-    }
-    /**
-     * Log an event
-     *
-     * @param {string} action Name of event
-     * @param {string} label Event label, optional
-     */
-    logEvent(action, label) {
-        var _a;
-        const analyticEvent = { action, label, category: this.analyticsCategory };
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent(analyticEvent);
-    }
-    /**
-     * Logs `DonationFlow` Event category into no sample bucket
-     *
-     * @param {string} action Name of event
-     * @param {string} label Event label, optional
-     */
-    logDonationFlowEvent(action, label) {
-        var _a;
-        const analyticEvent = { action, label, category: 'DonationFlow' };
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling(analyticEvent);
-    }
-    /**
-     * This is not the normal LitElement styles block.
-     *
-     * This element uses the clear DOM instead of the shadow DOM, it can't use
-     * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of
-     * the styling local by writing out our own <style> tag and just be careful about
-     * the selectors since they will leak outside of this component.
-     *
-     * @readonly
-     * @private
-     * @type {TemplateResult}
-     * @memberof IADonationFormController
-     */
-    get getStyles() {
-        return html `
-      <style>
-        .donation-form-controller-container {
-          color: var(--donateFormTextColor, #333);
-          background-color: var(--donateFormBgColor, transparent);
-
-          --formSectionContentBackgroundColor: var(--donateFormBgColor, transparent);
-
-          --editFormBadgeBgColor: var(--donateFormBadgeBgColor, #333);
-          --formSectionBadgeBackgroundColor: var(--donateFormBadgeBgColor, #333);
-
-          --editFormBadgeFontColor: var(--donateFormBadgeTextColor, #fff);
-          --formSectionBadgeFontColor: var(--donateFormBadgeTextColor, #fff);
-
-          --paymentButtonFontColor: var(--donateFormPaymentOptionTextColor);
-          --paymentButtonColor: var(--donateFormPaymentOptionBgColor);
-
-          --paymentButtonSelectedColor: var(--donateFormSelectedOptionBgColor);
-          --paymentButtonSelectedFontColor: var(--donateFormSelectedOptionTextColor);
-        }
-        .donation-form-controller-container donation-form:focus {
-          outline: none;
-        }
-
-        .donation-form-controller-container #paypal-button {
-          opacity: 0.001;
-          width: 5rem;
-          height: 3rem;
-          overflow: hidden;
-        }
-
-        .donation-form-controller-container .braintree-row {
-          display: flex;
-          margin-top: -1px;
-        }
-
-        .donation-form-controller-container badged-input {
-          width: 100%;
-        }
-
-        .donation-form-controller-container badged-input.cvv {
-          margin-left: -1px;
-        }
-
-        .donation-form-controller-container .braintree-input {
-          width: 100%;
-          height: 100%;
-        }
-
-        .donation-form-controller-container #braintree-error-message {
-          color: red;
-          font-size: 1.4rem;
-          margin-bottom: 0.6rem;
-        }
-
-        .donation-form-controller-container div[slot="braintree-hosted-fields"] {
-          background-color: white;
-        }
-      </style>
-    `;
-    }
-};
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "environment", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "braintreeAuthToken", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "recaptchaSiteKey", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "venmoProfileId", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "googlePayMerchantId", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "analyticsCategory", void 0);
-__decorate([
-    property({ type: Array })
-], DonationFormController.prototype, "amountOptions", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "donationInfo", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "amountSelectionLayout", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "frequencySelectionMode", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "referrer", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "loggedInUser", void 0);
-__decorate([
-    property({ type: String })
-], DonationFormController.prototype, "origin", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "endpointManager", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "analyticsHandler", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "modalManager", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "recaptchaElement", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "braintreeManager", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "recaptchaManager", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "paymentFlowHandlers", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "paymentClients", void 0);
-__decorate([
-    property({ type: Object })
-], DonationFormController.prototype, "lazyLoaderService", void 0);
-__decorate([
-    query('donation-form')
-], DonationFormController.prototype, "donationForm", void 0);
-__decorate([
-    query('#braintree-creditcard')
-], DonationFormController.prototype, "braintreeNumberInput", void 0);
-__decorate([
-    query('#braintree-cvv')
-], DonationFormController.prototype, "braintreeCVVInput", void 0);
-__decorate([
-    query('#braintree-expiration')
-], DonationFormController.prototype, "braintreeExpirationDateInput", void 0);
-__decorate([
-    query('#braintree-error-message')
-], DonationFormController.prototype, "braintreeErrorMessage", void 0);
-__decorate([
-    query('contact-form')
-], DonationFormController.prototype, "contactForm", void 0);
-DonationFormController = __decorate([
-    customElement('donation-form-controller')
-], DonationFormController);
-export { DonationFormController };
+import { __awaiter, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import currency from 'currency.js';
+import { LazyLoaderService, } from '@internetarchive/lazy-loader-service';
+import { PaymentClients } from './braintree-manager/payment-clients';
+import { BraintreeManager } from './braintree-manager/braintree-manager';
+import { PaymentFlowHandlers, } from './payment-flow-handlers/payment-flow-handlers';
+import { RecaptchaManager } from './recaptcha-manager/recaptcha-manager';
+import { HostedFieldConfiguration } from './braintree-manager/payment-providers/credit-card/hosted-field-configuration';
+import { HostedFieldContainer, } from './braintree-manager/payment-providers/credit-card/hosted-field-container';
+import './form-elements/badged-input';
+import './form-elements/contact-form/contact-form';
+import creditCardImg from '@internetarchive/icon-credit-card';
+import calendarImg from '@internetarchive/icon-calendar';
+import lockImg from '@internetarchive/icon-lock';
+import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode, } from '@internetarchive/donation-form-edit-donation';
+import { DonationPaymentInfo, DonationType, defaultDonationAmounts, defaultSelectedDonationInfo, } from '@internetarchive/donation-form-data-models';
+/**
+ * The DonationFormController orchestrates several of the interactions between
+ * the various pieces of the donation form like modals, braintree, paypal, and recaptcha
+ *
+ * @export
+ * @class RadioPlayerController
+ * @extends {LitElement}
+ */
+let DonationFormController = class DonationFormController extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.analyticsCategory = 'DonationForm';
+        this.amountOptions = defaultDonationAmounts;
+        this.donationInfo = defaultSelectedDonationInfo;
+        this.amountSelectionLayout = EditDonationAmountSelectionLayout.MultiLine;
+        this.frequencySelectionMode = EditDonationFrequencySelectionMode.Button;
+        this.lazyLoaderService = new LazyLoaderService();
+        this.recaptchaManagerSetup = false;
+    }
+    /** @inheritdoc */
+    updated(changedProperties) {
+        var _a, _b, _c;
+        if (changedProperties.has('referrer') && this.referrer) {
+            (_a = this.braintreeManager) === null || _a === void 0 ? void 0 : _a.setReferrer(this.referrer);
+            this.logDonationFlowEvent('referrer', this.referrer);
+        }
+        if (changedProperties.has('loggedInUser') && this.loggedInUser) {
+            (_b = this.braintreeManager) === null || _b === void 0 ? void 0 : _b.setLoggedInUser(this.loggedInUser);
+        }
+        if (changedProperties.has('origin') && this.origin) {
+            (_c = this.braintreeManager) === null || _c === void 0 ? void 0 : _c.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();
+        }
+        if ((changedProperties.has('environment') || changedProperties.has('lazyLoaderService')) &&
+            this.environment) {
+            this.paymentClients = new PaymentClients(this.lazyLoaderService, this.environment);
+        }
+    }
+    showConfirmationStepDev(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.donationForm.showConfirmationModalDev(options);
+        });
+    }
+    showUpsellModalDev(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.donationForm.showUpsellModalDev(options);
+        });
+    }
+    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) => {
+                const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {
+                    detail: { retryNumber },
+                });
+                this.dispatchEvent(event);
+            });
+            this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error) => {
+                const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {
+                    detail: { error },
+                });
+                this.dispatchEvent(event);
+            });
+        }
+    }
+    setupRecaptchaManager() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.recaptchaSiteKey || !this.paymentClients || this.recaptchaManagerSetup) {
+                return;
+            }
+            this.recaptchaManagerSetup = true;
+            const grecaptchaLibrary = yield this.paymentClients.recaptchaLibrary.get();
+            this.recaptchaManager = new RecaptchaManager({
+                grecaptchaLibrary: grecaptchaLibrary,
+                siteKey: this.recaptchaSiteKey,
+            });
+        });
+    }
+    /** @inheritdoc */
+    firstUpdated() {
+        this.configureFromQueryParams();
+        this.trackViewedEvent();
+    }
+    configureFromQueryParams() {
+        const urlParams = new URLSearchParams(window.location.search);
+        let amountOptions = this.amountOptions;
+        const amountOptionsParam = urlParams.get('dollarAmounts');
+        if (amountOptionsParam) {
+            const stripBrackets = amountOptionsParam.slice(1, -1);
+            const splitValues = stripBrackets.split(',');
+            const numberArray = splitValues
+                .map(value => parseFloat(value))
+                .filter(value => !isNaN(value));
+            amountOptions = numberArray;
+        }
+        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;
+            }
+        }
+        const donationInfo = new DonationPaymentInfo({
+            donationType: frequency,
+            amount: amount,
+            coverFees: coverFees,
+        });
+        this.amountOptions = amountOptions;
+        this.donationInfo = donationInfo;
+    }
+    setupPaymentFlowHandlers() {
+        var _a;
+        // only set up once
+        if (this.paymentFlowHandlers) {
+            return;
+        }
+        // verify we have all of the dependencies
+        if (!this.braintreeManager ||
+            !this.recaptchaManager ||
+            !this.modalManager ||
+            !this.recaptchaElement) {
+            return;
+        }
+        this.paymentFlowHandlers = new PaymentFlowHandlers({
+            braintreeManager: this.braintreeManager,
+            modalManager: this.modalManager,
+            recaptchaManager: this.recaptchaManager,
+            resources: {
+                analytics: {
+                    logEvent: this.logEvent.bind(this),
+                    logDonationFlowEvent: this.logDonationFlowEvent.bind(this),
+                },
+            }
+        });
+        this.donationForm.braintreeManager = this.braintreeManager;
+        this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;
+        this.braintreeManager.startup();
+        (_a = this.paymentFlowHandlers) === null || _a === void 0 ? void 0 : _a.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',
+            },
+            '.valid': {},
+            '.invalid': {
+                color: '#b00b00',
+            },
+        };
+        const hostedFieldFieldOptions = {
+            number: {
+                selector: '#braintree-creditcard',
+                placeholder: 'Card number',
+            },
+            cvv: {
+                selector: '#braintree-cvv',
+                placeholder: 'CVC',
+            },
+            expirationDate: {
+                selector: '#braintree-expiration',
+                placeholder: 'MM / YY',
+            },
+        };
+        const hostedFieldContainer = new HostedFieldContainer({
+            number: this.braintreeNumberInput,
+            cvv: this.braintreeCVVInput,
+            expirationDate: this.braintreeExpirationDateInput,
+            errorContainer: this.braintreeErrorMessage,
+        });
+        const config = new HostedFieldConfiguration({
+            hostedFieldStyle,
+            hostedFieldFieldOptions,
+            hostedFieldContainer,
+        });
+        return config;
+    }
+    /** @inheritdoc */
+    render() {
+        return html `
+      <div class="donation-form-controller-container">
+        <donation-form
+          .environment=${this.environment}
+          .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}
+        >
+          <!--
+            Why are these slots here?
+
+            Due to the way Braintree, PayPal, and Recaptcha work, they cannot exist
+            in the shadowDOM so must exist in the clearDOM and get passed
+            in through a <slot>.
+
+            Braintree / PayPal are working on a solution to this. See:
+            - https://github.com/braintree/braintree-web-drop-in/issues/614#issuecomment-616796104
+            - https://github.com/braintree/braintree-web-drop-in/issues/296#issuecomment-616749307
+            - https://github.com/paypal/paypal-checkout-components/issues/353#issuecomment-595956216
+          -->
+          <div slot="braintree-hosted-fields">
+            <div id="braintree-error-message"></div>
+            <div class="braintree-row">
+              <badged-input .icon=${creditCardImg} ?required=${true} class="creditcard">
+                <div class="braintree-input" id="braintree-creditcard"></div>
+              </badged-input>
+            </div>
+            <div class="braintree-row">
+              <badged-input .icon=${calendarImg} ?required=${true} class="expiration">
+                <div class="braintree-input" id="braintree-expiration"></div>
+              </badged-input>
+              <badged-input .icon=${lockImg} ?required=${true} class="cvv">
+                <div class="braintree-input" id="braintree-cvv"></div>
+              </badged-input>
+            </div>
+          </div>
+
+          <!--
+            Form autocompletion does not work in the shadowDOM so
+            we slot the contact form in from the lightDOM and pass
+            in a reference to it in the <donation-form> tag above
+          -->
+          <div slot="contact-form">
+            <contact-form></contact-form>
+          </div>
+
+          <div slot="paypal-button">
+            <div id="paypal-button"></div>
+          </div>
+
+          <slot name="recaptcha" slot="recaptcha"> </slot>
+        </donation-form>
+      </div>
+
+      ${this.getStyles}
+    `;
+    }
+    /** @inheritdoc */
+    createRenderRoot() {
+        // Render template without shadow DOM. Note that shadow DOM features like
+        // encapsulated CSS and slots are unavailable.
+        // We have to do this to accomodate the PayPal buttons and HostedFields,
+        // which do not work in the shadow DOM
+        return this;
+    }
+    donationInfoChanged() {
+        this.logEvent('DonationInfoChanged');
+    }
+    trackViewedEvent() {
+        this.logEvent('Viewed');
+    }
+    paymentProviderSelected(e) {
+        const paymentProvider = e.detail.paymentProvider;
+        const previousPaymentProvider = e.detail.previousPaymentProvider;
+        const providerNoSpaces = this.removeSpaces(paymentProvider);
+        let eventName = `ProviderFirstSelected-${providerNoSpaces}`;
+        let previousProviderInfo;
+        if (previousPaymentProvider !== undefined) {
+            eventName = `ProviderChangedTo-${providerNoSpaces}`;
+            previousProviderInfo = `ProviderChangedFrom-${this.removeSpaces(previousPaymentProvider)}`;
+        }
+        this.logEvent(eventName, previousProviderInfo);
+    }
+    paymentFlowConfirmed(e) {
+        const selectedProvider = e.detail.paymentProvider;
+        const providerNoSpaces = this.removeSpaces(selectedProvider);
+        this.logEvent('PaymentFlowConfirmed', providerNoSpaces);
+    }
+    paymentFlowStarted(e) {
+        const selectedProvider = e.detail.paymentProvider;
+        const providerNoSpaces = this.removeSpaces(selectedProvider);
+        this.logEvent('PaymentFlowStarted', providerNoSpaces);
+    }
+    paymentFlowCancelled(e) {
+        const selectedProvider = e.detail.paymentProvider;
+        const providerNoSpaces = this.removeSpaces(selectedProvider);
+        this.logEvent('PaymentFlowCancelled', providerNoSpaces);
+    }
+    paymentFlowError(e) {
+        const selectedProvider = e.detail.paymentProvider;
+        const providerNoSpaces = this.removeSpaces(selectedProvider);
+        const error = e.detail.error;
+        const detail = `${providerNoSpaces}-${error}`;
+        this.logEvent('PaymentFlowError', detail);
+    }
+    removeSpaces(original) {
+        return original.replace(/\s+/g, '');
+    }
+    /**
+     * Log an event
+     *
+     * @param {string} action Name of event
+     * @param {string} label Event label, optional
+     */
+    logEvent(action, label) {
+        var _a;
+        const analyticEvent = { action, label, category: this.analyticsCategory };
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent(analyticEvent);
+    }
+    /**
+     * Logs `DonationFlow` Event category into no sample bucket
+     *
+     * @param {string} action Name of event
+     * @param {string} label Event label, optional
+     */
+    logDonationFlowEvent(action, label) {
+        var _a;
+        const analyticEvent = { action, label, category: 'DonationFlow' };
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling(analyticEvent);
+    }
+    /**
+     * This is not the normal LitElement styles block.
+     *
+     * This element uses the clear DOM instead of the shadow DOM, it can't use
+     * the shadowRoot's isolated styling. This is a bit of a workaround to keep all of
+     * the styling local by writing out our own <style> tag and just be careful about
+     * the selectors since they will leak outside of this component.
+     *
+     * @readonly
+     * @private
+     * @type {TemplateResult}
+     * @memberof IADonationFormController
+     */
+    get getStyles() {
+        return html `
+      <style>
+        .donation-form-controller-container {
+          color: var(--donateFormTextColor, #333);
+          background-color: var(--donateFormBgColor, transparent);
+
+          --formSectionContentBackgroundColor: var(--donateFormBgColor, transparent);
+
+          --editFormBadgeBgColor: var(--donateFormBadgeBgColor, #333);
+          --formSectionBadgeBackgroundColor: var(--donateFormBadgeBgColor, #333);
+
+          --editFormBadgeFontColor: var(--donateFormBadgeTextColor, #fff);
+          --formSectionBadgeFontColor: var(--donateFormBadgeTextColor, #fff);
+
+          --paymentButtonFontColor: var(--donateFormPaymentOptionTextColor);
+          --paymentButtonColor: var(--donateFormPaymentOptionBgColor);
+
+          --paymentButtonSelectedColor: var(--donateFormSelectedOptionBgColor);
+          --paymentButtonSelectedFontColor: var(--donateFormSelectedOptionTextColor);
+        }
+        .donation-form-controller-container donation-form:focus {
+          outline: none;
+        }
+
+        .donation-form-controller-container #paypal-button {
+          opacity: 0.001;
+          width: 5rem;
+          height: 3rem;
+          overflow: hidden;
+        }
+
+        .donation-form-controller-container .braintree-row {
+          display: flex;
+          margin-top: -1px;
+        }
+
+        .donation-form-controller-container badged-input {
+          width: 100%;
+        }
+
+        .donation-form-controller-container badged-input.cvv {
+          margin-left: -1px;
+        }
+
+        .donation-form-controller-container .braintree-input {
+          width: 100%;
+          height: 100%;
+        }
+
+        .donation-form-controller-container #braintree-error-message {
+          color: red;
+          font-size: 1.4rem;
+          margin-bottom: 0.6rem;
+        }
+
+        .donation-form-controller-container div[slot="braintree-hosted-fields"] {
+          background-color: white;
+        }
+      </style>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "environment", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "braintreeAuthToken", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "recaptchaSiteKey", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "venmoProfileId", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "googlePayMerchantId", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "analyticsCategory", void 0);
+__decorate([
+    property({ type: Array })
+], DonationFormController.prototype, "amountOptions", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "donationInfo", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "amountSelectionLayout", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "frequencySelectionMode", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "referrer", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "loggedInUser", void 0);
+__decorate([
+    property({ type: String })
+], DonationFormController.prototype, "origin", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "endpointManager", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "analyticsHandler", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "modalManager", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "recaptchaElement", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "braintreeManager", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "recaptchaManager", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "paymentFlowHandlers", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "paymentClients", void 0);
+__decorate([
+    property({ type: Object })
+], DonationFormController.prototype, "lazyLoaderService", void 0);
+__decorate([
+    query('donation-form')
+], DonationFormController.prototype, "donationForm", void 0);
+__decorate([
+    query('#braintree-creditcard')
+], DonationFormController.prototype, "braintreeNumberInput", void 0);
+__decorate([
+    query('#braintree-cvv')
+], DonationFormController.prototype, "braintreeCVVInput", void 0);
+__decorate([
+    query('#braintree-expiration')
+], DonationFormController.prototype, "braintreeExpirationDateInput", void 0);
+__decorate([
+    query('#braintree-error-message')
+], DonationFormController.prototype, "braintreeErrorMessage", void 0);
+__decorate([
+    query('contact-form')
+], DonationFormController.prototype, "contactForm", void 0);
+DonationFormController = __decorate([
+    customElement('donation-form-controller')
+], DonationFormController);
+export { DonationFormController };
 //# sourceMappingURL=donation-form-controller.js.map