@internetarchive/elements 1.1.6 → 1.1.7-webdev-9054.0

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

@@ -0,0 +1,95 @@
+import { LitElement, type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import type { BraintreeManagerInterface } from './braintree/braintree-manager-interface.js';
+import type { PaymentFlowHandlersInterface } from './flow-handlers/payment-flow-handlers.js';
+import type { IADonationContactForm } from './form-elements/contact-form/ia-donation-contact-form.js';
+import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode } from './form-elements/ia-donation-edit-donation.js';
+import type { IADonationHeader } from './form-elements/ia-donation-header.js';
+import type { IADonationPaymentSelector } from './form-elements/ia-donation-payment-selector.js';
+import { type IADonationSection } from './form-elements/ia-donation-section.js';
+import { DonationPaymentInfo } from './models/donation-payment-info.js';
+import type { DonationRequest } from './models/donation-request.js';
+import { DonationType } from './models/donation-type.js';
+import { UpsellModalCTAMode } from './modals/ia-donation-upsell-modal-content.js';
+import './form-elements/ia-donation-header.js';
+import './form-elements/ia-donation-payment-selector.js';
+import './form-elements/ia-donation-section.js';
+import './form-elements/ia-donation-total-amount.js';
+/**
+ * The donation form: amount picker, total, payment method buttons, then the
+ * contact form and Donate button for the methods that need them. The
+ * controller wires it to Braintree, the modals and recaptcha; on its own it
+ * renders and emits events.
+ */
+export declare class IADonationForm extends LitElement {
+    braintreeManager?: BraintreeManagerInterface;
+    paymentFlowHandlers?: PaymentFlowHandlersInterface;
+    donationRequest?: DonationRequest;
+    donationInfo: DonationPaymentInfo;
+    /** The contact form lives in the light DOM (for autofill) and is handed in here */
+    contactForm?: IADonationContactForm;
+    amountOptions: number[];
+    amountSelectionLayout: EditDonationAmountSelectionLayout;
+    frequencySelectionMode: EditDonationFrequencySelectionMode;
+    private creditCardVisible;
+    private contactFormVisible;
+    private donationInfoValid;
+    private selectedPaymentProvider?;
+    contactFormSection?: IADonationSection;
+    donationFormHeader: IADonationHeader;
+    paymentSelector: IADonationPaymentSelector;
+    private paypalButtonNeedsRender;
+    render(): TemplateResult;
+    /** Developer convenience: show the confirmation step without a payment. */
+    showConfirmationModalDev(options: {
+        donationType: DonationType;
+        amount: number;
+        currencyType: string;
+        cancelDonationCB: () => void;
+        confirmDonationCB: () => void;
+    }): Promise<void>;
+    /**
+     * Developer convenience: show the upsell modal without going through a
+     * payment. With the PayPal slot mode it also renders the PayPal button.
+     */
+    showUpsellModalDev(options: {
+        oneTimeAmount: number;
+        ctaMode?: UpsellModalCTAMode;
+        yesSelected?: (amount: number) => void;
+        noSelected?: () => void;
+        amountChanged?: (amount: number) => void;
+        userClosedModalCallback?: () => void;
+    }): Promise<void>;
+    get contactFormSectionTemplate(): TemplateResult;
+    /**
+     * The step number of the payment selector. With the frequency buttons
+     * showing they're step 1 and the amount is 2, so payment is 3. In checkbox
+     * mode the amount picker is step 1 and payment is 2.
+     */
+    private get paymentSelectorNumberingStart();
+    private editDonationError;
+    private paymentSelectorFirstUpdated;
+    private applePaySelected;
+    private googlePaySelected;
+    private creditCardSelected;
+    private venmoSelected;
+    private paypalBlockerSelected;
+    private focusContactForm;
+    private focusCreditCardNumberField;
+    private donateClicked;
+    private handleCreditCardDonationFlow;
+    private handleVenmoDonationFlow;
+    private emitPaymentFlowEvent;
+    private emitPaymentFlowStartedEvent;
+    private emitPaymentFlowConfirmedEvent;
+    private emitPaymentFlowCancelledEvent;
+    private emitPaymentFlowErrorEvent;
+    private showInvalidDonationInfoAlert;
+    private renderPayPalButtonIfNeeded;
+    updated(changedProperties: PropertyValues): void;
+    private flowHandlersConfigured;
+    private setupFlowHandlers;
+    private bindFlowListenerEvents;
+    private donationInfoChanged;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-form.d.ts.map

package/dist/src/elements/ia-donation-form/ia-donation-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-donation-form/ia-donation-form.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,522 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
+import { msg } from '@lit/localize';
+import themeStyles from '../../themes/theme-styles.js';
+import { EditDonationAmountSelectionLayout, EditDonationFrequencySelectionMode, } from './form-elements/ia-donation-edit-donation.js';
+import { DonationSectionBadgeMode, } from './form-elements/ia-donation-section.js';
+import { HostedFieldName } from './braintree/payment-providers/credit-card/hosted-field-container.js';
+import { lockIcon } from './icons.js';
+import { DonationPaymentInfo, defaultDonationAmounts, defaultSelectedDonationInfo, } from './models/donation-payment-info.js';
+import { DonationType } from './models/donation-type.js';
+import { PaymentProvider } from './models/payment-provider.js';
+import { UpsellModalCTAMode } from './modals/ia-donation-upsell-modal-content.js';
+import './form-elements/ia-donation-header.js';
+import './form-elements/ia-donation-payment-selector.js';
+import './form-elements/ia-donation-section.js';
+import './form-elements/ia-donation-total-amount.js';
+/**
+ * The donation form: amount picker, total, payment method buttons, then the
+ * contact form and Donate button for the methods that need them. The
+ * controller wires it to Braintree, the modals and recaptcha; on its own it
+ * renders and emits events.
+ */
+let IADonationForm = class IADonationForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.donationInfo = defaultSelectedDonationInfo;
+        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;
+    }
+    render() {
+        return html `
+      <ia-donation-header
+        .amountOptions=${this.amountOptions}
+        .amountSelectionLayout=${this.amountSelectionLayout}
+        .frequencySelectionMode=${this.frequencySelectionMode}
+        @donationInfoChanged=${this.donationInfoChanged}
+        @editDonationError=${this.editDonationError}
+      >
+      </ia-donation-header>
+
+      <ia-donation-section
+        .badgeMode=${DonationSectionBadgeMode.HideBadgeLeaveSpacing}
+        id="total-amount-section"
+      >
+        <ia-donation-total-amount .donationInfo=${this.donationInfo}>
+        </ia-donation-total-amount>
+      </ia-donation-section>
+
+      <ia-donation-section
+        .sectionBadge=${`${this.paymentSelectorNumberingStart}`}
+        headline=${msg('Choose a payment method')}
+      >
+        <ia-donation-payment-selector
+          .paymentProviders=${this.braintreeManager?.paymentProviders}
+          @firstUpdated=${this.paymentSelectorFirstUpdated}
+          @creditCardSelected=${this.creditCardSelected}
+          @venmoSelected=${this.venmoSelected}
+          @applePaySelected=${this.applePaySelected}
+          @googlePaySelected=${this.googlePaySelected}
+          @paypalBlockerSelected=${this.paypalBlockerSelected}
+          @resetPaymentMethod=${() => {
+            this.selectedPaymentProvider = undefined;
+            this.contactFormVisible = false;
+        }}
+        >
+          <slot name="paypal-button" slot="paypal-button"></slot>
+          <div
+            class="credit-card-fields ${this.creditCardVisible ? '' : 'hidden'}"
+            slot="credit-card-fields"
+          >
+            <slot name="braintree-hosted-fields"></slot>
+          </div>
+        </ia-donation-payment-selector>
+      </ia-donation-section>
+
+      <div
+        class="contact-form-section ${this.contactFormVisible ? '' : 'hidden'}"
+      >
+        ${this.contactFormSectionTemplate}
+      </div>
+    `;
+    }
+    /** Developer convenience: show the confirmation step without a payment. */
+    async showConfirmationModalDev(options) {
+        this.paymentFlowHandlers?.showConfirmationStepModal(options);
+    }
+    /**
+     * Developer convenience: show the upsell modal without going through a
+     * payment. With the PayPal slot mode it also renders the PayPal button.
+     */
+    async showUpsellModalDev(options) {
+        this.paymentFlowHandlers?.showUpsellModal(options);
+        if (options.ctaMode === UpsellModalCTAMode.PayPalUpsellSlot) {
+            const handler = await this.braintreeManager?.paymentProviders.paypalHandler.get();
+            const donationInfo = new DonationPaymentInfo({
+                amount: options.oneTimeAmount,
+                donationType: DonationType.OneTime,
+                coverFees: false,
+            });
+            handler?.renderPayPalButton({
+                selector: '#paypal-upsell-button',
+                style: {
+                    color: 'blue',
+                    label: 'paypal',
+                    shape: 'rect',
+                    size: 'responsive',
+                    tagline: false,
+                },
+                donationInfo,
+            });
+        }
+    }
+    get contactFormSectionTemplate() {
+        const headline = this.selectedPaymentProvider === PaymentProvider.Venmo
+            ? msg('Help us stay in touch')
+            : msg('Enter contact information');
+        return html `
+      <ia-donation-section
+        .sectionBadge=${`${this.paymentSelectorNumberingStart + 1}`}
+        headline=${headline}
+        id="contactFormSection"
+      >
+        <slot name="contact-form"></slot>
+      </ia-donation-section>
+
+      <ia-donation-section
+        .sectionBadge=${`${this.paymentSelectorNumberingStart + 2}`}
+      >
+        <slot name="recaptcha"></slot>
+        <button id="donate-button" @click=${this.donateClicked}>
+          ${msg('Donate')}
+        </button>
+
+        <div class="secure-process-note">
+          ${lockIcon} ${msg('Your payment will be securely processed')}
+        </div>
+      </ia-donation-section>
+    `;
+    }
+    /**
+     * The step number of the payment selector. With the frequency buttons
+     * showing they're step 1 and the amount is 2, so payment is 3. In checkbox
+     * mode the amount picker is step 1 and payment is 2.
+     */
+    get paymentSelectorNumberingStart() {
+        return this.frequencySelectionMode ===
+            EditDonationFrequencySelectionMode.Button
+            ? 3
+            : 2;
+    }
+    editDonationError() {
+        this.donationInfoValid = false;
+    }
+    paymentSelectorFirstUpdated() {
+        if (this.paymentFlowHandlers?.paypalHandler) {
+            this.renderPayPalButtonIfNeeded();
+        }
+    }
+    applePaySelected(e) {
+        this.selectedPaymentProvider = PaymentProvider.ApplePay;
+        this.contactFormVisible = false;
+        this.creditCardVisible = false;
+        if (!this.donationInfoValid) {
+            this.showInvalidDonationInfoAlert();
+            return;
+        }
+        const originalEvent = e.detail.originalEvent;
+        if (this.donationInfo) {
+            this.paymentFlowHandlers?.applePayHandler?.paymentInitiated(this.donationInfo, originalEvent);
+        }
+        this.emitPaymentFlowStartedEvent();
+    }
+    googlePaySelected() {
+        this.selectedPaymentProvider = PaymentProvider.GooglePay;
+        this.contactFormVisible = false;
+        this.creditCardVisible = false;
+        if (!this.donationInfoValid) {
+            this.showInvalidDonationInfoAlert();
+            return;
+        }
+        if (this.donationInfo) {
+            this.paymentFlowHandlers?.googlePayHandler?.paymentInitiated(this.donationInfo);
+        }
+        this.emitPaymentFlowStartedEvent();
+    }
+    async creditCardSelected() {
+        if (!this.donationInfoValid) {
+            this.showInvalidDonationInfoAlert();
+            return;
+        }
+        this.selectedPaymentProvider = PaymentProvider.CreditCard;
+        this.contactFormVisible = true;
+        this.creditCardVisible = true;
+        this.focusCreditCardNumberField();
+    }
+    async venmoSelected() {
+        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();
+    }
+    async focusContactForm() {
+        await this.updateComplete;
+        if (this.contactFormSection) {
+            this.contactForm?.focus();
+        }
+    }
+    async focusCreditCardNumberField() {
+        await this.updateComplete;
+        const creditCardHandler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();
+        creditCardHandler?.focusField(HostedFieldName.Number);
+    }
+    async donateClicked() {
+        if (!this.contactForm) {
+            alert(msg('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;
+        }
+    }
+    async handleCreditCardDonationFlow(contactInfo, donationInfo) {
+        const creditCardFlowHandler = this.paymentFlowHandlers?.creditCardHandler;
+        const creditCardHandler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();
+        creditCardHandler?.hideErrorMessage();
+        const valid = this.contactForm?.reportValidity();
+        const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();
+        if (!valid || hostedFieldsResponse === undefined) {
+            return;
+        }
+        this.emitPaymentFlowStartedEvent();
+        creditCardFlowHandler?.paymentInitiated(hostedFieldsResponse, donationInfo, contactInfo);
+    }
+    async handleVenmoDonationFlow(contactInfo, donationInfo) {
+        const valid = this.contactForm?.reportValidity();
+        if (!valid) {
+            return;
+        }
+        this.paymentFlowHandlers?.venmoHandler?.paymentInitiated(contactInfo, donationInfo);
+    }
+    emitPaymentFlowEvent(name, extra = {}) {
+        if (!this.selectedPaymentProvider) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent(name, {
+            detail: { paymentProvider: this.selectedPaymentProvider, ...extra },
+        }));
+    }
+    emitPaymentFlowStartedEvent() {
+        this.emitPaymentFlowEvent('paymentFlowStarted');
+    }
+    emitPaymentFlowConfirmedEvent() {
+        this.emitPaymentFlowEvent('paymentFlowConfirmed');
+    }
+    emitPaymentFlowCancelledEvent() {
+        this.emitPaymentFlowEvent('paymentFlowCancelled');
+    }
+    emitPaymentFlowErrorEvent(error) {
+        this.emitPaymentFlowEvent('paymentFlowError', { error });
+    }
+    showInvalidDonationInfoAlert() {
+        alert(msg('Please enter a valid donation amount.'));
+    }
+    async renderPayPalButtonIfNeeded() {
+        if (!this.paypalButtonNeedsRender) {
+            return;
+        }
+        this.paypalButtonNeedsRender = false;
+        if (this.donationInfo) {
+            await this.paymentFlowHandlers?.paypalHandler?.renderPayPalButton(this.donationInfo);
+        }
+        this.paymentSelector.showPaypalButton();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('donationInfo') && this.donationInfo) {
+            // The PayPal button holds its own copy of the donation info, since the
+            // donor starts that payment from the button rather than from our code
+            this.paymentFlowHandlers?.paypalHandler?.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')) {
+            this.dispatchEvent(new CustomEvent('paymentProviderSelected', {
+                detail: {
+                    paymentProvider: this.selectedPaymentProvider,
+                    previousPaymentProvider: changedProperties.get('selectedPaymentProvider'),
+                },
+            }));
+        }
+    }
+    setupFlowHandlers() {
+        if (this.flowHandlersConfigured) {
+            return;
+        }
+        this.flowHandlersConfigured = true;
+        this.bindFlowListenerEvents();
+        this.renderPayPalButtonIfNeeded();
+        if (this.donationInfo) {
+            this.paymentFlowHandlers?.paypalHandler?.updateDonationInfo(this.donationInfo);
+        }
+    }
+    bindFlowListenerEvents() {
+        const paypal = this.paymentFlowHandlers?.paypalHandler;
+        paypal?.on('payPalPaymentStarted', () => {
+            this.selectedPaymentProvider = PaymentProvider.PayPal;
+            this.emitPaymentFlowStartedEvent();
+        });
+        paypal?.on('payPalPaymentConfirmed', () => {
+            this.selectedPaymentProvider = PaymentProvider.PayPal;
+            this.emitPaymentFlowConfirmedEvent();
+        });
+        paypal?.on('payPalPaymentCancelled', () => {
+            this.selectedPaymentProvider = PaymentProvider.PayPal;
+            this.emitPaymentFlowCancelledEvent();
+        });
+        paypal?.on('payPalPaymentError', (_datasource, error) => {
+            this.selectedPaymentProvider = PaymentProvider.PayPal;
+            this.emitPaymentFlowErrorEvent(error);
+        });
+        this.paymentFlowHandlers?.googlePayHandler?.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;
+        this.dispatchEvent(new CustomEvent('donationInfoChanged', { detail: { donationInfo } }));
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          /*
+           * The donation form was built for a 10px root font size. Sizing off
+           * this base keeps it self-contained, so it looks the same whatever
+           * the page's root size is. Every part of the form reads it, and the
+           * two parts with their own base variable get it passed through.
+           */
+          --donation-form-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --ia-donation-section-base-font-size: var(
+            --donation-form-base-font-size--
+          );
+          --ia-donation-edit-base-font-size: var(
+            --donation-form-base-font-size--
+          );
+
+          --donation-form-donate-button-font-size--: var(
+            --ia-donation-form-donate-button-font-size,
+            calc(var(--donation-form-base-font-size--) * 2.6)
+          );
+          --donation-form-donate-button-height--: var(
+            --ia-donation-form-donate-button-height,
+            calc(var(--donation-form-base-font-size--) * 4)
+          );
+          --donation-form-donate-button-color--: var(
+            --ia-donation-form-donate-button-color,
+            var(--mint-green)
+          );
+          --donation-form-donate-button-text-color--: var(
+            --ia-donation-form-donate-button-text-color,
+            var(--true-white)
+          );
+          --donation-form-donate-button-hover-color--: var(
+            --ia-donation-form-donate-button-hover-color,
+            #278367
+          );
+          --donation-form-total-top-margin--: var(
+            --ia-donation-form-total-amount-top-margin,
+            calc(var(--donation-form-base-font-size--) * 1.5)
+          );
+          --donation-form-total-bottom-margin--: var(
+            --ia-donation-form-total-amount-bottom-margin,
+            calc(var(--donation-form-base-font-size--) * 1.2)
+          );
+        }
+
+        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 .ia-icon {
+          width: calc(var(--donation-form-base-font-size--) * 1.2);
+          height: calc(var(--donation-form-base-font-size--) * 1.5);
+          vertical-align: bottom;
+          background-color: currentColor;
+        }
+
+        #donate-button {
+          width: 100%;
+          appearance: none;
+          font-size: var(--donation-form-donate-button-font-size--);
+          font-weight: bold;
+          text-align: center;
+          color: var(--donation-form-donate-button-text-color--);
+          cursor: pointer;
+          border: none;
+          border-radius: 5px;
+          background-color: var(--donation-form-donate-button-color--);
+          padding-top: var(--padding-sm);
+          padding-bottom: var(--padding-sm);
+          height: var(--donation-form-donate-button-height--);
+        }
+
+        #donate-button:hover {
+          background-color: var(--donation-form-donate-button-hover-color--);
+        }
+
+        #total-amount-section {
+          display: block;
+          margin-top: var(--donation-form-total-top-margin--);
+          margin-bottom: var(--donation-form-total-bottom-margin--);
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Object })
+], IADonationForm.prototype, "braintreeManager", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationForm.prototype, "paymentFlowHandlers", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationForm.prototype, "donationRequest", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationForm.prototype, "donationInfo", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationForm.prototype, "contactForm", void 0);
+__decorate([
+    property({ type: Array })
+], IADonationForm.prototype, "amountOptions", void 0);
+__decorate([
+    property({ type: String })
+], IADonationForm.prototype, "amountSelectionLayout", void 0);
+__decorate([
+    property({ type: String })
+], IADonationForm.prototype, "frequencySelectionMode", void 0);
+__decorate([
+    state()
+], IADonationForm.prototype, "creditCardVisible", void 0);
+__decorate([
+    state()
+], IADonationForm.prototype, "contactFormVisible", void 0);
+__decorate([
+    state()
+], IADonationForm.prototype, "donationInfoValid", void 0);
+__decorate([
+    state()
+], IADonationForm.prototype, "selectedPaymentProvider", void 0);
+__decorate([
+    query('#contactFormSection')
+], IADonationForm.prototype, "contactFormSection", void 0);
+__decorate([
+    query('ia-donation-header')
+], IADonationForm.prototype, "donationFormHeader", void 0);
+__decorate([
+    query('ia-donation-payment-selector')
+], IADonationForm.prototype, "paymentSelector", void 0);
+IADonationForm = __decorate([
+    customElement('ia-donation-form')
+], IADonationForm);
+export { IADonationForm };
+//# sourceMappingURL=ia-donation-form.js.map