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

package/dist/src/donation-form.js

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