@internetarchive/elements 1.1.2 → 1.1.3-l10n-demo.1

package/dist/src/elements/ia-donation-form/modals/ia-donation-error-modal-content.js

@@ -0,0 +1,64 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, } from 'lit';
+import { customElement } from '../../../util/custom-element.js';
+import { localized, msg } from '@lit/localize';
+import themeStyles from '../../../themes/theme-styles.js';
+/** The footer of the error modal: a link to the help article on failed donations. */
+let IADonationErrorModalContent = class IADonationErrorModalContent extends LitElement {
+    render() {
+        return html `
+      <div class="container">
+        <a
+          href="https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/"
+          rel="noopener"
+          target="_blank"
+        >
+          ${msg('Questions?')}
+        </a>
+      </div>
+    `;
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --donation-error-modal-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-error-modal-link-top-margin--: var(
+            --ia-donation-error-modal-link-top-margin,
+            var(--donation-error-modal-base-font-size--)
+          );
+          --donation-error-modal-link-color--: var(
+            --ia-donation-error-modal-link-color,
+            var(--mid-gray)
+          );
+          --donation-error-modal-link-font-size--: var(
+            --ia-donation-error-modal-link-font-size,
+            calc(var(--donation-error-modal-base-font-size--) * 1.4)
+          );
+        }
+
+        .container {
+          margin-top: var(--donation-error-modal-link-top-margin--);
+          text-align: center;
+        }
+
+        a,
+        a:link,
+        a:visited {
+          color: var(--donation-error-modal-link-color--);
+          font-size: var(--donation-error-modal-link-font-size--);
+        }
+      `,
+        ];
+    }
+};
+IADonationErrorModalContent = __decorate([
+    customElement('ia-donation-error-modal-content'),
+    localized()
+], IADonationErrorModalContent);
+export { IADonationErrorModalContent };
+//# sourceMappingURL=ia-donation-error-modal-content.js.map

package/dist/src/elements/ia-donation-form/modals/ia-donation-error-modal-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-error-modal-content.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/modals/ia-donation-error-modal-content.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,qFAAqF;AAG9E,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IACzD,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;YAOH,GAAG,CAAC,YAAY,CAAC;;;KAGxB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AApDY,2BAA2B;IAFvC,aAAa,CAAC,iCAAiC,CAAC;IAChD,SAAS,EAAE;GACC,2BAA2B,CAoDvC","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/** The footer of the error modal: a link to the help article on failed donations. */\n@customElement('ia-donation-error-modal-content')\n@localized()\nexport class IADonationErrorModalContent extends LitElement {\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <a\n          href=\"https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/\"\n          rel=\"noopener\"\n          target=\"_blank\"\n        >\n          ${msg('Questions?')}\n        </a>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --donation-error-modal-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-error-modal-link-top-margin--: var(\n            --ia-donation-error-modal-link-top-margin,\n            var(--donation-error-modal-base-font-size--)\n          );\n          --donation-error-modal-link-color--: var(\n            --ia-donation-error-modal-link-color,\n            var(--mid-gray)\n          );\n          --donation-error-modal-link-font-size--: var(\n            --ia-donation-error-modal-link-font-size,\n            calc(var(--donation-error-modal-base-font-size--) * 1.4)\n          );\n        }\n\n        .container {\n          margin-top: var(--donation-error-modal-link-top-margin--);\n          text-align: center;\n        }\n\n        a,\n        a:link,\n        a:visited {\n          color: var(--donation-error-modal-link-color--);\n          font-size: var(--donation-error-modal-link-font-size--);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, type CSSResultGroup, type TemplateResult } from 'lit';
+/** How the "yes" side of the upsell is offered: our own button, or a slot for the PayPal button. */
+export declare const UpsellModalCTAMode: {
+    readonly YesButton: "YesButton";
+    readonly PayPalUpsellSlot: "PayPalUpsellSlot";
+};
+export type UpsellModalCTAMode = (typeof UpsellModalCTAMode)[keyof typeof UpsellModalCTAMode];
+/**
+ * The content of the upsell modal shown after a one-time donation: a thank
+ * you, a monthly amount field, and a yes button (or the PayPal button, when
+ * the donation came through PayPal).
+ */
+export declare class IADonationUpsellModalContent extends LitElement {
+    yesButtonMode: UpsellModalCTAMode;
+    amount: number;
+    error?: TemplateResult;
+    amountInput: HTMLInputElement;
+    private currencyValidator;
+    render(): TemplateResult;
+    private get yesButton();
+    private amountChanged;
+    private handleCustomAmountInput;
+    private processAmount;
+    private yesSelected;
+    private noThanksSelected;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-donation-upsell-modal-content.d.ts.map

package/dist/src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-upsell-modal-content.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,oGAAoG;AACpG,eAAO,MAAM,kBAAkB;;;CAGrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAE/D;;;;GAIG;AACH,qBAEa,4BAA6B,SAAQ,UAAU;IAC9B,aAAa,EAAE,kBAAkB,CAC9B;IAEH,MAAM,SAAK;IAEX,KAAK,CAAC,EAAE,cAAc,CAAC;IAE3B,WAAW,EAAG,gBAAgB,CAAC;IAEvD,OAAO,CAAC,iBAAiB,CAA8C;IAEvE,MAAM,IAAI,cAAc;IAgCxB,OAAO,KAAK,SAAS,GA6BpB;IAED,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,gBAAgB;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAiKlC;CACF"}

package/dist/src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.js

@@ -0,0 +1,314 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../../util/custom-element.js';
+import { localized, msg } from '@lit/localize';
+import themeStyles from '../../../themes/theme-styles.js';
+import { CurrencyValidator } from '../currency-validator.js';
+/** How the "yes" side of the upsell is offered: our own button, or a slot for the PayPal button. */
+export const UpsellModalCTAMode = {
+    YesButton: 'YesButton',
+    PayPalUpsellSlot: 'PayPalUpsellSlot',
+};
+/**
+ * The content of the upsell modal shown after a one-time donation: a thank
+ * you, a monthly amount field, and a yes button (or the PayPal button, when
+ * the donation came through PayPal).
+ */
+let IADonationUpsellModalContent = class IADonationUpsellModalContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.yesButtonMode = UpsellModalCTAMode.YesButton;
+        this.amount = 5;
+        this.currencyValidator = new CurrencyValidator();
+    }
+    render() {
+        return html `
+      <h3>${msg('Thank you for donating!')}</h3>
+      <button @click=${this.noThanksSelected} class="cta-button" id="no-button">
+        ${msg('Continue')}
+      </button>
+      <p class="or_separator"><span>${msg('or')}</span></p>
+      <h3>${msg('Join our Monthly Giving Circle')}</h3>
+      <p class="appeal">
+        ${msg('Monthly support helps us reliably plan for the future.')}
+      </p>
+      <div class="monthly-amount">
+        <h1>${msg('Enter your monthly amount')}</h1>
+        <div class="amount-input">
+          <span class="dollar-symbol">$</span>
+          <input
+            id="amount-input"
+            type="text"
+            tabindex="0"
+            aria-label=${msg('Monthly amount in dollars')}
+            value=${this.amount}
+            @input=${this.amountChanged}
+            @keydown=${this.currencyValidator.keydown}
+          />
+        </div>
+        <div class="error ${this.error ? '' : 'hidden'}">${this.error}</div>
+      </div>
+
+      ${this.yesButton}
+    `;
+    }
+    get yesButton() {
+        switch (this.yesButtonMode) {
+            case UpsellModalCTAMode.YesButton:
+                return html `
+          <button
+            class="cta-button"
+            tabindex="0"
+            id="yes-button"
+            @click=${this.yesSelected}
+            .disabled=${this.error !== undefined}
+          >
+            ${msg("YES, I'll donate monthly")}
+          </button>
+        `;
+            case UpsellModalCTAMode.PayPalUpsellSlot:
+                return html `
+          <div class="paypal-upsell-slot-container">
+            <div
+              class="paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}"
+            ></div>
+            <button class="cta-button" id="paypal-cover-button">
+              ${msg("YES, I'll donate monthly")}
+            </button>
+            <slot class="paypal-upsell-slot"></slot>
+          </div>
+        `;
+            default:
+                return nothing;
+        }
+    }
+    amountChanged(e) {
+        const target = e.target;
+        const amount = target.value;
+        if (amount.length === 0) {
+            return;
+        }
+        this.handleCustomAmountInput(amount);
+    }
+    handleCustomAmountInput(value) {
+        const amount = parseFloat(value);
+        if (isNaN(amount)) {
+            this.error = html `${msg('Please enter a valid amount.')}`;
+        }
+        else {
+            this.processAmount(amount);
+        }
+    }
+    processAmount(amount) {
+        if (amount >= 10000) {
+            this.error = msg(html `
+        To make a donation of $10,000 or more, please contact our philanthropy
+        department at
+        <a href="mailto:donations@archive.org">donations@archive.org</a>
+      `);
+            return;
+        }
+        if (amount < 1) {
+            if (this.amountInput && this.amountInput.value.length > 0) {
+                this.error = html `${msg('The minimum donation amount is $1.')}`;
+            }
+            return;
+        }
+        this.error = undefined;
+        this.amount = amount;
+        const event = new CustomEvent('amountChanged', {
+            detail: { amount: this.amount },
+        });
+        this.dispatchEvent(event);
+    }
+    yesSelected() {
+        const event = new CustomEvent('yesSelected', {
+            detail: { amount: this.amount },
+        });
+        this.dispatchEvent(event);
+    }
+    noThanksSelected() {
+        this.dispatchEvent(new Event('noThanksSelected'));
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --donation-upsell-base-font-size--: var(
+            --ia-donation-form-base-font-size,
+            10px
+          );
+          --donation-upsell-cta-color--: var(
+            --ia-donation-upsell-cta-button-color,
+            var(--navy-blue)
+          );
+          --donation-upsell-cta-disabled-color--: var(
+            --ia-donation-upsell-cta-button-disabled-color,
+            rgba(109, 148, 201, 0.5)
+          );
+          /* Shifts the amount field left a little so the dollar sign and field read as centred */
+          --donation-upsell-amount-input-offset--: var(
+            --ia-donation-upsell-amount-input-offset,
+            calc(var(--donation-upsell-base-font-size--) * -1)
+          );
+          --donation-upsell-error-color--: var(--color-danger);
+        }
+
+        .monthly-amount {
+          background-color: var(--true-white);
+          padding: var(--padding-sm) 0.625rem;
+          border-radius: 5px;
+          text-align: center;
+          margin-bottom: var(--padding-sm);
+          margin-top: 0;
+        }
+
+        .monthly-amount h1 {
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);
+          font-weight: bold;
+          text-align: center;
+          line-height: 1.2em;
+          margin: 0;
+          padding: var(--padding-sm) 0 0 0;
+        }
+
+        .hidden {
+          display: none;
+        }
+
+        h3 {
+          text-align: center;
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);
+          margin: 0 var(--donation-upsell-base-font-size--) var(--padding-sm)
+            var(--donation-upsell-base-font-size--);
+        }
+
+        .appeal {
+          text-align: center;
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.6);
+          margin: var(--padding-sm) var(--donation-upsell-base-font-size--);
+        }
+
+        .amount-input {
+          transform: translate(var(--donation-upsell-amount-input-offset--), 0);
+        }
+
+        .amount-input .dollar-symbol {
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);
+          font-weight: bold;
+        }
+
+        .amount-input input {
+          width: 100px;
+          text-align: center;
+          border: none;
+          border-bottom: 1px solid gray;
+          font-weight: bold;
+          font-size: calc(var(--donation-upsell-base-font-size--) * 3.4);
+        }
+
+        .cta-button {
+          font-size: calc(var(--donation-upsell-base-font-size--) * 2);
+          display: block;
+          width: 100%;
+          margin-top: var(--padding-sm);
+          padding: var(--donation-upsell-base-font-size--)
+            calc(var(--donation-upsell-base-font-size--) * 2);
+          background-color: var(--donation-upsell-cta-color--);
+          color: var(--true-white);
+          border-radius: 5px;
+          border: 0;
+          font-weight: bold;
+          line-height: normal;
+          outline: none;
+          cursor: pointer;
+        }
+
+        .cta-button:disabled {
+          background-color: var(--donation-upsell-cta-disabled-color--);
+          cursor: not-allowed;
+        }
+
+        .paypal-upsell-slot {
+          text-align: center;
+        }
+
+        .paypal-upsell-slot-blocker {
+          position: absolute;
+          width: 100%;
+          height: calc(var(--donation-upsell-base-font-size--) * 4.5);
+          bottom: 0;
+          z-index: 250;
+          cursor: not-allowed;
+          background-color: rgba(255, 255, 255, 0.5);
+        }
+
+        .paypal-upsell-slot-blocker.hidden {
+          display: none;
+        }
+
+        #paypal-cover-button {
+          position: absolute;
+          width: 100%;
+          bottom: 0;
+        }
+
+        .paypal-upsell-slot-container {
+          position: relative;
+        }
+
+        .error {
+          font-size: calc(var(--donation-upsell-base-font-size--) * 1.4);
+          margin: var(--padding-sm) 0;
+          color: var(--donation-upsell-error-color--);
+        }
+
+        .or_separator {
+          position: relative;
+          margin: 0 calc(var(--donation-upsell-base-font-size--) * 2);
+          font-size: calc(var(--donation-upsell-base-font-size--) * 2.6);
+          font-weight: bold;
+          text-transform: uppercase;
+          text-align: center;
+        }
+
+        .or_separator:before {
+          position: absolute;
+          top: calc(50% - 1px);
+          right: 0;
+          left: 0;
+          height: 2px;
+          content: '';
+          background: var(--mid-gray);
+        }
+
+        .or_separator span {
+          display: inline-block;
+          position: relative;
+          padding: 0 var(--donation-upsell-base-font-size--);
+          background: #f5f5f7;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IADonationUpsellModalContent.prototype, "yesButtonMode", void 0);
+__decorate([
+    property({ type: Number })
+], IADonationUpsellModalContent.prototype, "amount", void 0);
+__decorate([
+    property({ type: Object })
+], IADonationUpsellModalContent.prototype, "error", void 0);
+__decorate([
+    query('#amount-input')
+], IADonationUpsellModalContent.prototype, "amountInput", void 0);
+IADonationUpsellModalContent = __decorate([
+    customElement('ia-donation-upsell-modal-content'),
+    localized()
+], IADonationUpsellModalContent);
+export { IADonationUpsellModalContent };
+//# sourceMappingURL=ia-donation-upsell-modal-content.js.map

package/dist/src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-donation-upsell-modal-content.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/modals/ia-donation-upsell-modal-content.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport { CurrencyValidator } from '../currency-validator';\n\n/** How the \"yes\" side of the upsell is offered: our own button, or a slot for the PayPal button. */\nexport const UpsellModalCTAMode = {\n  YesButton: 'YesButton',\n  PayPalUpsellSlot: 'PayPalUpsellSlot',\n} as const;\n\nexport type UpsellModalCTAMode =\n  (typeof UpsellModalCTAMode)[keyof typeof UpsellModalCTAMode];\n\n/**\n * The content of the upsell modal shown after a one-time donation: a thank\n * you, a monthly amount field, and a yes button (or the PayPal button, when\n * the donation came through PayPal).\n */\n@customElement('ia-donation-upsell-modal-content')\n@localized()\nexport class IADonationUpsellModalContent extends LitElement {\n  @property({ type: String }) yesButtonMode: UpsellModalCTAMode =\n    UpsellModalCTAMode.YesButton;\n\n  @property({ type: Number }) amount = 5;\n\n  @property({ type: Object }) error?: TemplateResult;\n\n  @query('#amount-input') amountInput!: HTMLInputElement;\n\n  private currencyValidator: CurrencyValidator = new CurrencyValidator();\n\n  render(): TemplateResult {\n    return html`\n      <h3>${msg('Thank you for donating!')}</h3>\n      <button @click=${this.noThanksSelected} class=\"cta-button\" id=\"no-button\">\n        ${msg('Continue')}\n      </button>\n      <p class=\"or_separator\"><span>${msg('or')}</span></p>\n      <h3>${msg('Join our Monthly Giving Circle')}</h3>\n      <p class=\"appeal\">\n        ${msg('Monthly support helps us reliably plan for the future.')}\n      </p>\n      <div class=\"monthly-amount\">\n        <h1>${msg('Enter your monthly amount')}</h1>\n        <div class=\"amount-input\">\n          <span class=\"dollar-symbol\">$</span>\n          <input\n            id=\"amount-input\"\n            type=\"text\"\n            tabindex=\"0\"\n            aria-label=${msg('Monthly amount in dollars')}\n            value=${this.amount}\n            @input=${this.amountChanged}\n            @keydown=${this.currencyValidator.keydown}\n          />\n        </div>\n        <div class=\"error ${this.error ? '' : 'hidden'}\">${this.error}</div>\n      </div>\n\n      ${this.yesButton}\n    `;\n  }\n\n  private get yesButton(): TemplateResult | typeof nothing {\n    switch (this.yesButtonMode) {\n      case UpsellModalCTAMode.YesButton:\n        return html`\n          <button\n            class=\"cta-button\"\n            tabindex=\"0\"\n            id=\"yes-button\"\n            @click=${this.yesSelected}\n            .disabled=${this.error !== undefined}\n          >\n            ${msg(\"YES, I'll donate monthly\")}\n          </button>\n        `;\n      case UpsellModalCTAMode.PayPalUpsellSlot:\n        return html`\n          <div class=\"paypal-upsell-slot-container\">\n            <div\n              class=\"paypal-upsell-slot-blocker ${this.error ? '' : 'hidden'}\"\n            ></div>\n            <button class=\"cta-button\" id=\"paypal-cover-button\">\n              ${msg(\"YES, I'll donate monthly\")}\n            </button>\n            <slot class=\"paypal-upsell-slot\"></slot>\n          </div>\n        `;\n      default:\n        return nothing;\n    }\n  }\n\n  private amountChanged(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    const amount = target.value;\n    if (amount.length === 0) {\n      return;\n    }\n    this.handleCustomAmountInput(amount);\n  }\n\n  private handleCustomAmountInput(value: string): void {\n    const amount = parseFloat(value);\n    if (isNaN(amount)) {\n      this.error = html`${msg('Please enter a valid amount.')}`;\n    } else {\n      this.processAmount(amount);\n    }\n  }\n\n  private processAmount(amount: number): void {\n    if (amount >= 10000) {\n      this.error = msg(html`\n        To make a donation of $10,000 or more, please contact our philanthropy\n        department at\n        <a href=\"mailto:donations@archive.org\">donations@archive.org</a>\n      `);\n      return;\n    }\n\n    if (amount < 1) {\n      if (this.amountInput && this.amountInput.value.length > 0) {\n        this.error = html`${msg('The minimum donation amount is $1.')}`;\n      }\n      return;\n    }\n\n    this.error = undefined;\n\n    this.amount = amount;\n\n    const event = new CustomEvent('amountChanged', {\n      detail: { amount: this.amount },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private yesSelected(): void {\n    const event = new CustomEvent('yesSelected', {\n      detail: { amount: this.amount },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private noThanksSelected(): void {\n    this.dispatchEvent(new Event('noThanksSelected'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --donation-upsell-base-font-size--: var(\n            --ia-donation-form-base-font-size,\n            10px\n          );\n          --donation-upsell-cta-color--: var(\n            --ia-donation-upsell-cta-button-color,\n            var(--navy-blue)\n          );\n          --donation-upsell-cta-disabled-color--: var(\n            --ia-donation-upsell-cta-button-disabled-color,\n            rgba(109, 148, 201, 0.5)\n          );\n          /* Shifts the amount field left a little so the dollar sign and field read as centred */\n          --donation-upsell-amount-input-offset--: var(\n            --ia-donation-upsell-amount-input-offset,\n            calc(var(--donation-upsell-base-font-size--) * -1)\n          );\n          --donation-upsell-error-color--: var(--color-danger);\n        }\n\n        .monthly-amount {\n          background-color: var(--true-white);\n          padding: var(--padding-sm) 0.625rem;\n          border-radius: 5px;\n          text-align: center;\n          margin-bottom: var(--padding-sm);\n          margin-top: 0;\n        }\n\n        .monthly-amount h1 {\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);\n          font-weight: bold;\n          text-align: center;\n          line-height: 1.2em;\n          margin: 0;\n          padding: var(--padding-sm) 0 0 0;\n        }\n\n        .hidden {\n          display: none;\n        }\n\n        h3 {\n          text-align: center;\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);\n          margin: 0 var(--donation-upsell-base-font-size--) var(--padding-sm)\n            var(--donation-upsell-base-font-size--);\n        }\n\n        .appeal {\n          text-align: center;\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.6);\n          margin: var(--padding-sm) var(--donation-upsell-base-font-size--);\n        }\n\n        .amount-input {\n          transform: translate(var(--donation-upsell-amount-input-offset--), 0);\n        }\n\n        .amount-input .dollar-symbol {\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.8);\n          font-weight: bold;\n        }\n\n        .amount-input input {\n          width: 100px;\n          text-align: center;\n          border: none;\n          border-bottom: 1px solid gray;\n          font-weight: bold;\n          font-size: calc(var(--donation-upsell-base-font-size--) * 3.4);\n        }\n\n        .cta-button {\n          font-size: calc(var(--donation-upsell-base-font-size--) * 2);\n          display: block;\n          width: 100%;\n          margin-top: var(--padding-sm);\n          padding: var(--donation-upsell-base-font-size--)\n            calc(var(--donation-upsell-base-font-size--) * 2);\n          background-color: var(--donation-upsell-cta-color--);\n          color: var(--true-white);\n          border-radius: 5px;\n          border: 0;\n          font-weight: bold;\n          line-height: normal;\n          outline: none;\n          cursor: pointer;\n        }\n\n        .cta-button:disabled {\n          background-color: var(--donation-upsell-cta-disabled-color--);\n          cursor: not-allowed;\n        }\n\n        .paypal-upsell-slot {\n          text-align: center;\n        }\n\n        .paypal-upsell-slot-blocker {\n          position: absolute;\n          width: 100%;\n          height: calc(var(--donation-upsell-base-font-size--) * 4.5);\n          bottom: 0;\n          z-index: 250;\n          cursor: not-allowed;\n          background-color: rgba(255, 255, 255, 0.5);\n        }\n\n        .paypal-upsell-slot-blocker.hidden {\n          display: none;\n        }\n\n        #paypal-cover-button {\n          position: absolute;\n          width: 100%;\n          bottom: 0;\n        }\n\n        .paypal-upsell-slot-container {\n          position: relative;\n        }\n\n        .error {\n          font-size: calc(var(--donation-upsell-base-font-size--) * 1.4);\n          margin: var(--padding-sm) 0;\n          color: var(--donation-upsell-error-color--);\n        }\n\n        .or_separator {\n          position: relative;\n          margin: 0 calc(var(--donation-upsell-base-font-size--) * 2);\n          font-size: calc(var(--donation-upsell-base-font-size--) * 2.6);\n          font-weight: bold;\n          text-transform: uppercase;\n          text-align: center;\n        }\n\n        .or_separator:before {\n          position: absolute;\n          top: calc(50% - 1px);\n          right: 0;\n          left: 0;\n          height: 2px;\n          content: '';\n          background: var(--mid-gray);\n        }\n\n        .or_separator span {\n          display: inline-block;\n          position: relative;\n          padding: 0 var(--donation-upsell-base-font-size--);\n          background: #f5f5f7;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,34 @@
+import { DonationType } from './donation-type.js';
+/**
+ * Everything needed to represent and calculate a donation amount.
+ *
+ * Given an amount and whether the donor is covering the processing fee, it
+ * calculates the fee and the total, rounded to the cent. It also carries the
+ * `DonationType`: one-time, monthly, or upsell.
+ */
+export declare class DonationPaymentInfo {
+    donationType: DonationType;
+    amount: number;
+    coverFees: boolean;
+    constructor(params: {
+        donationType: DonationType;
+        amount: number;
+        coverFees: boolean;
+    });
+    /** The fee the donor is paying on top of the amount, or 0 if they aren't covering it. */
+    get feeAmountCovered(): number;
+    /** The processing fee for this amount, whether or not the donor covers it. */
+    get fee(): number;
+    /** The amount charged: the donation plus the fee when the donor covers it. */
+    get total(): number;
+    /** The total for an amount, with the fee added when `coverFees` is set. Rounded to the cent. */
+    static calculateTotal(amount: number, coverFees: boolean): number;
+    /** The processing fee for an amount. Rounded to the cent. */
+    static calculateFeeAmount(amount: number): number;
+    private static roundAmount;
+}
+/** The preset amounts the donation form offers. */
+export declare const defaultDonationAmounts: number[];
+/** The amount selected when the form first renders. */
+export declare const defaultSelectedDonationInfo: DonationPaymentInfo;
+//# sourceMappingURL=donation-payment-info.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"donation-payment-info.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/models/donation-payment-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C;;;;;;GAMG;AACH,qBAAa,mBAAmB;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;gBAEP,MAAM,EAAE;QAClB,YAAY,EAAE,YAAY,CAAC;QAC3B,MAAM,EAAE,MAAM,CAAC;QACf,SAAS,EAAE,OAAO,CAAC;KACpB;IAMD,yFAAyF;IACzF,IAAI,gBAAgB,IAAI,MAAM,CAE7B;IAED,8EAA8E;IAC9E,IAAI,GAAG,IAAI,MAAM,CAEhB;IAED,8EAA8E;IAC9E,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,gGAAgG;IAChG,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,MAAM;IAOjE,6DAA6D;IAC7D,MAAM,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAMjD,OAAO,CAAC,MAAM,CAAC,WAAW;CAG3B;AAED,mDAAmD;AACnD,eAAO,MAAM,sBAAsB,EAAE,MAAM,EAAoC,CAAC;AAEhF,uDAAuD;AACvD,eAAO,MAAM,2BAA2B,EAAE,mBAKtC,CAAC"}

package/dist/src/elements/ia-donation-form/models/donation-payment-info.js

@@ -0,0 +1,54 @@
+import { DonationType } from './donation-type.js';
+/**
+ * Everything needed to represent and calculate a donation amount.
+ *
+ * Given an amount and whether the donor is covering the processing fee, it
+ * calculates the fee and the total, rounded to the cent. It also carries the
+ * `DonationType`: one-time, monthly, or upsell.
+ */
+export class DonationPaymentInfo {
+    constructor(params) {
+        this.donationType = params.donationType;
+        this.amount = params.amount;
+        this.coverFees = params.coverFees;
+    }
+    /** The fee the donor is paying on top of the amount, or 0 if they aren't covering it. */
+    get feeAmountCovered() {
+        return this.coverFees ? this.fee : 0;
+    }
+    /** The processing fee for this amount, whether or not the donor covers it. */
+    get fee() {
+        return DonationPaymentInfo.calculateFeeAmount(this.amount);
+    }
+    /** The amount charged: the donation plus the fee when the donor covers it. */
+    get total() {
+        return DonationPaymentInfo.calculateTotal(this.amount, this.coverFees);
+    }
+    /** The total for an amount, with the fee added when `coverFees` is set. Rounded to the cent. */
+    static calculateTotal(amount, coverFees) {
+        const fee = coverFees ? this.calculateFeeAmount(amount) : 0;
+        const total = amount + fee;
+        if (isNaN(total))
+            return 0;
+        return this.roundAmount(total);
+    }
+    /** The processing fee for an amount. Rounded to the cent. */
+    static calculateFeeAmount(amount) {
+        const fee = amount * 0.0219 + 0.29;
+        if (isNaN(fee))
+            return 0;
+        return this.roundAmount(fee);
+    }
+    static roundAmount(amount) {
+        return Math.round(amount * 100) / 100;
+    }
+}
+/** The preset amounts the donation form offers. */
+export const defaultDonationAmounts = [5, 10, 25, 50, 100, 500, 1000];
+/** The amount selected when the form first renders. */
+export const defaultSelectedDonationInfo = new DonationPaymentInfo({
+    donationType: DonationType.OneTime,
+    amount: 10,
+    coverFees: false,
+});
+//# sourceMappingURL=donation-payment-info.js.map

package/dist/src/elements/ia-donation-form/models/donation-payment-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donation-payment-info.js","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/models/donation-payment-info.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,OAAO,mBAAmB;IAK9B,YAAY,MAIX;QACC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;QACxC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;IACpC,CAAC;IAED,yFAAyF;IACzF,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAED,8EAA8E;IAC9E,IAAI,GAAG;QACL,OAAO,mBAAmB,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7D,CAAC;IAED,8EAA8E;IAC9E,IAAI,KAAK;QACP,OAAO,mBAAmB,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACzE,CAAC;IAED,gGAAgG;IAChG,MAAM,CAAC,cAAc,CAAC,MAAc,EAAE,SAAkB;QACtD,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5D,MAAM,KAAK,GAAG,MAAM,GAAG,GAAG,CAAC;QAC3B,IAAI,KAAK,CAAC,KAAK,CAAC;YAAE,OAAO,CAAC,CAAC;QAC3B,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,6DAA6D;IAC7D,MAAM,CAAC,kBAAkB,CAAC,MAAc;QACtC,MAAM,GAAG,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;QACnC,IAAI,KAAK,CAAC,GAAG,CAAC;YAAE,OAAO,CAAC,CAAC;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC/B,CAAC;IAEO,MAAM,CAAC,WAAW,CAAC,MAAc;QACvC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IACxC,CAAC;CACF;AAED,mDAAmD;AACnD,MAAM,CAAC,MAAM,sBAAsB,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;AAEhF,uDAAuD;AACvD,MAAM,CAAC,MAAM,2BAA2B,GACtC,IAAI,mBAAmB,CAAC;IACtB,YAAY,EAAE,YAAY,CAAC,OAAO;IAClC,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,KAAK;CACjB,CAAC,CAAC","sourcesContent":["import { DonationType } from './donation-type';\n\n/**\n * Everything needed to represent and calculate a donation amount.\n *\n * Given an amount and whether the donor is covering the processing fee, it\n * calculates the fee and the total, rounded to the cent. It also carries the\n * `DonationType`: one-time, monthly, or upsell.\n */\nexport class DonationPaymentInfo {\n  donationType: DonationType;\n  amount: number;\n  coverFees: boolean;\n\n  constructor(params: {\n    donationType: DonationType;\n    amount: number;\n    coverFees: boolean;\n  }) {\n    this.donationType = params.donationType;\n    this.amount = params.amount;\n    this.coverFees = params.coverFees;\n  }\n\n  /** The fee the donor is paying on top of the amount, or 0 if they aren't covering it. */\n  get feeAmountCovered(): number {\n    return this.coverFees ? this.fee : 0;\n  }\n\n  /** The processing fee for this amount, whether or not the donor covers it. */\n  get fee(): number {\n    return DonationPaymentInfo.calculateFeeAmount(this.amount);\n  }\n\n  /** The amount charged: the donation plus the fee when the donor covers it. */\n  get total(): number {\n    return DonationPaymentInfo.calculateTotal(this.amount, this.coverFees);\n  }\n\n  /** The total for an amount, with the fee added when `coverFees` is set. Rounded to the cent. */\n  static calculateTotal(amount: number, coverFees: boolean): number {\n    const fee = coverFees ? this.calculateFeeAmount(amount) : 0;\n    const total = amount + fee;\n    if (isNaN(total)) return 0;\n    return this.roundAmount(total);\n  }\n\n  /** The processing fee for an amount. Rounded to the cent. */\n  static calculateFeeAmount(amount: number): number {\n    const fee = amount * 0.0219 + 0.29;\n    if (isNaN(fee)) return 0;\n    return this.roundAmount(fee);\n  }\n\n  private static roundAmount(amount: number): number {\n    return Math.round(amount * 100) / 100;\n  }\n}\n\n/** The preset amounts the donation form offers. */\nexport const defaultDonationAmounts: number[] = [5, 10, 25, 50, 100, 500, 1000];\n\n/** The amount selected when the form first renders. */\nexport const defaultSelectedDonationInfo: DonationPaymentInfo =\n  new DonationPaymentInfo({\n    donationType: DonationType.OneTime,\n    amount: 10,\n    coverFees: false,\n  });\n"]}

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

@@ -0,0 +1,62 @@
+import type { BillingInfo, CustomerInfo } from './donor-contact-info.js';
+import type { DonationType } from './donation-type.js';
+import type { PaymentProvider } from './payment-provider.js';
+/**
+ * Extra fields sent with a donation. Each one has to exist in the Braintree
+ * control panel before the backend will accept it, which is why the names are
+ * snake_case: they match the Braintree field names.
+ */
+export declare class DonationRequestCustomFields {
+    logged_in_user?: string;
+    referrer?: string;
+    fee_amount_covered?: number;
+    /**
+     * Campaign and A/B test information about where the donor came from.
+     *
+     * Freeform, but keep it something identifiable so it can be queried in
+     * CiviCRM. The donation banner uses `{Source}-{Test Name}-{Variant Name}`,
+     * e.g. `DonateBanner-Campaign Start 2020-IADefault`. Add more segments for
+     * more specificity: `DonateBanner-MidJuly2020 Campaign-VariantA-Button1`.
+     */
+    origin?: string;
+    constructor(options?: {
+        logged_in_user?: string;
+        referrer?: string;
+        fee_amount_covered?: number;
+        origin?: string;
+    });
+}
+/** The request submitted to the backend to make a donation. */
+export declare class DonationRequest {
+    paymentProvider: PaymentProvider;
+    paymentMethodNonce: string;
+    recaptchaToken?: string;
+    customerId?: string;
+    deviceData?: string;
+    upsellOnetimeTransactionId?: string;
+    /** First 6 digits of the credit card */
+    bin?: string;
+    /** The credit card's bank name */
+    binName?: string;
+    amount: number;
+    donationType: DonationType;
+    customer: CustomerInfo;
+    billing: BillingInfo;
+    customFields: DonationRequestCustomFields;
+    constructor(options: {
+        paymentProvider: PaymentProvider;
+        paymentMethodNonce: string;
+        recaptchaToken?: string;
+        customerId?: string;
+        deviceData?: string;
+        upsellOnetimeTransactionId?: string;
+        bin?: string;
+        binName?: string;
+        amount: number;
+        donationType: DonationType;
+        customer: CustomerInfo;
+        billing: BillingInfo;
+        customFields?: DonationRequestCustomFields;
+    });
+}
+//# sourceMappingURL=donation-request.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"donation-request.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-donation-form/models/donation-request.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;GAIG;AACH,qBAAa,2BAA2B;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;gBAEJ,OAAO,CAAC,EAAE;QACpB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB;CAMF;AAED,+DAA+D;AAC/D,qBAAa,eAAe;IAC1B,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;IAE3B,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,YAAY,EAAE,2BAA2B,CAAqC;gBAElE,OAAO,EAAE;QACnB,eAAe,EAAE,eAAe,CAAC;QACjC,kBAAkB,EAAE,MAAM,CAAC;QAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,YAAY,EAAE,YAAY,CAAC;QAC3B,QAAQ,EAAE,YAAY,CAAC;QACvB,OAAO,EAAE,WAAW,CAAC;QACrB,YAAY,CAAC,EAAE,2BAA2B,CAAC;KAC5C;CAqBF"}

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

@@ -0,0 +1,35 @@
+/**
+ * Extra fields sent with a donation. Each one has to exist in the Braintree
+ * control panel before the backend will accept it, which is why the names are
+ * snake_case: they match the Braintree field names.
+ */
+export class DonationRequestCustomFields {
+    constructor(options) {
+        this.logged_in_user = options?.logged_in_user;
+        this.referrer = options?.referrer;
+        this.fee_amount_covered = options?.fee_amount_covered;
+        this.origin = options?.origin;
+    }
+}
+/** The request submitted to the backend to make a donation. */
+export class DonationRequest {
+    constructor(options) {
+        this.customFields = new DonationRequestCustomFields();
+        this.paymentProvider = options.paymentProvider;
+        this.paymentMethodNonce = options.paymentMethodNonce;
+        this.recaptchaToken = options.recaptchaToken;
+        this.customerId = options.customerId;
+        this.deviceData = options.deviceData;
+        this.upsellOnetimeTransactionId = options.upsellOnetimeTransactionId;
+        this.bin = options.bin;
+        this.binName = options.binName;
+        this.amount = options.amount;
+        this.donationType = options.donationType;
+        this.customer = options.customer;
+        this.billing = options.billing;
+        if (options.customFields) {
+            this.customFields = options.customFields;
+        }
+    }
+}
+//# sourceMappingURL=donation-request.js.map