@internetarchive/donation-form 1.0.2 → 1.0.3-alpha-webdev7960.1

package/src/form-elements/total-amount.ts

@@ -1,46 +1,46 @@
-import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';
-import { css, CSSResult, html, LitElement, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import currency from 'currency.js';
-
-@customElement('donation-form-total-amount')
-export class TotalAmount extends LitElement {
-  @property({ type: Object })
-  donationInfo?: DonationPaymentInfo;
-
-  render(): TemplateResult {
-    return html`
-      <div class="top-line"></div>
-      <div class="total-line">Total: ${this.totalAmount}</div>
-    `;
-  }
-
-  private get totalAmount(): string | undefined {
-    if (!this.donationInfo) return;
-    const amount = currency(this.donationInfo.total, { symbol: '$' }).format();
-    const monthly = this.donationInfo.donationType === DonationType.Monthly ? '/month' : '';
-    return `${amount}${monthly}`;
-  }
-
-  static get styles(): CSSResult {
-    const lineColor = css`var(--totalAmountLineColor, #333)`;
-    const lineThickness = css`var(--totalAmountLineThickness, 2px)`;
-    const totalAmountVerticalSpacing = css`var(--totalAmountVerticalSpacing, 0.5rem)`;
-    const totalAmountFontSize = css`var(--totalAmountFontSize, 2.6rem)`;
-
-    return css`
-      .top-line {
-        width: 100%;
-        height: ${lineThickness};
-        background-color: ${lineColor};
-      }
-
-      .total-line {
-        font-size: ${totalAmountFontSize};
-        font-weight: bold;
-        text-align: center;
-        margin-top: ${totalAmountVerticalSpacing};
-      }
-    `;
-  }
-}
+import { DonationPaymentInfo, DonationType } from '@internetarchive/donation-form-data-models';
+import { css, CSSResult, html, LitElement, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import currency from 'currency.js';
+
+@customElement('donation-form-total-amount')
+export class TotalAmount extends LitElement {
+  @property({ type: Object })
+  donationInfo?: DonationPaymentInfo;
+
+  render(): TemplateResult {
+    return html`
+      <div class="top-line"></div>
+      <div class="total-line">Total: ${this.totalAmount}</div>
+    `;
+  }
+
+  private get totalAmount(): string | undefined {
+    if (!this.donationInfo) return;
+    const amount = currency(this.donationInfo.total, { symbol: '$' }).format();
+    const monthly = this.donationInfo.donationType === DonationType.Monthly ? '/month' : '';
+    return `${amount}${monthly}`;
+  }
+
+  static get styles(): CSSResult {
+    const lineColor = css`var(--totalAmountLineColor, #333)`;
+    const lineThickness = css`var(--totalAmountLineThickness, 2px)`;
+    const totalAmountVerticalSpacing = css`var(--totalAmountVerticalSpacing, 0.5rem)`;
+    const totalAmountFontSize = css`var(--totalAmountFontSize, 2.6rem)`;
+
+    return css`
+      .top-line {
+        width: 100%;
+        height: ${lineThickness};
+        background-color: ${lineColor};
+      }
+
+      .total-line {
+        font-size: ${totalAmountFontSize};
+        font-weight: bold;
+        text-align: center;
+        margin-top: ${totalAmountVerticalSpacing};
+      }
+    `;
+  }
+}

package/src/modals/confirm-donation-modal-content.ts

@@ -1,168 +1,168 @@
-import { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { DonationType } from '@internetarchive/donation-form-data-models';
-import currency from 'currency.js';
-
-/**
- * This is the content that we show in the upsell modal.
- *
- * It has an amount input, "Yes" and "No Thanks" options and a switch to optionally
- * show the PayPal upsell button.
- *
- * @export
- * @class ConfirmDonationContent
- * @extends {LitElement}
- */
-@customElement('confirm-donation-modal')
-export class ConfirmDonationContent extends LitElement {
-  @property({ type: Number }) amount = 5;
-
-  @property({ type: String }) currencyType = '$';
-
-  @property({ type: String }) donationType: DonationType = DonationType.OneTime;
-
-  @property({ type: Function }) confirmDonation: Function = (): void => {};
-
-  @property({ type: Function }) cancelDonation: Function = (): void => {};
-
-  get confirmationText(): TemplateResult {
-    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
-    return html`
-      <p>
-        You are about to make a <b>${this.donationType}</b> donation of
-        <b>${amount} ${this.currencyType}</b> to the Internet Archive.
-      </p>
-    `;
-  }
-
-  get confirmUpsellText(): TemplateResult {
-    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
-    return html`<p>
-      You are about to begin making <b>monthly</b> donations of
-      <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring
-      contribution will be next month.)
-    </p>`;
-  }
-
-  confirm(): void {
-    this?.confirmDonation();
-  }
-
-  cancel(): void {
-    this?.cancelDonation();
-  }
-
-  get confirmCTA(): string {
-    return this.donationType === DonationType.Upsell
-      ? 'Start monthly donation'
-      : 'Complete donation';
-  }
-
-  /** @inheritdoc */
-  render(): TemplateResult {
-    return html`
-      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}
-
-      <div class="cta-group">
-        <button id="confirm" @click=${(): void => this.confirm()}>${this.confirmCTA}</button>
-        <button id="cancel" @click=${(): void => this.cancel()}>Cancel</button>
-      </div>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;
-    const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;
-
-    return css`
-      :host {
-        display: block;
-      }
-
-      button {
-        outline: none;
-        cursor: pointer;
-      }
-
-      button#confirm {
-        font-size: 2rem;
-        display: block;
-        width: 100%;
-        margin-top: 0.5rem;
-        padding: 1rem 2rem;
-        background-color: ${ctaButtonColor};
-        color: #fff;
-        border-radius: 5px;
-        border: 0;
-        font-weight: bold;
-        line-height: normal;
-      }
-
-      button#cancel {
-        margin-top: 1rem;
-        border: 0;
-        text-decoration: underline;
-        background-color: transparent;
-      }
-
-      button:disabled {
-        background-color: ${ctaButtonDisabledColor};
-        cursor: not-allowed;
-      }
-    }`;
-  }
-
-  /**
-   * https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies/
-   */
-  get currencySymbol(): string {
-    switch (this.currencyType) {
-      case 'AUD':
-        return 'AU$';
-      case 'BRL':
-        return 'R$';
-      case 'CAD':
-        return 'CA$';
-      case 'CHF':
-        return 'Fr';
-      case 'CNY':
-        return '¥';
-      case 'CZK':
-        return 'Kč';
-      case 'DKK':
-        return 'Kr';
-      case 'EUR':
-        return '€';
-      case 'GBP':
-        return '£';
-      case 'HKD':
-        return 'HK$';
-      case 'HUF':
-        return 'Ft';
-      case 'ILS':
-        return '₪';
-      case 'JPY':
-        return '¥';
-      case 'MXN':
-        return 'MX$';
-      case 'MYR':
-        return 'RM';
-      case 'NOK':
-        return 'kr';
-      case 'PLN':
-        return 'zł';
-      case 'RUB':
-        return '₽';
-      case 'SEK':
-        return 'kr';
-      case 'SGD':
-        return 'S$';
-      case 'THB':
-        return '฿';
-      case 'TYD':
-        return 'NT$';
-      default:
-        return '$'; // $ as default USD, NZD
-    }
-  }
-}
+import { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { DonationType } from '@internetarchive/donation-form-data-models';
+import currency from 'currency.js';
+
+/**
+ * This is the content that we show in the upsell modal.
+ *
+ * It has an amount input, "Yes" and "No Thanks" options and a switch to optionally
+ * show the PayPal upsell button.
+ *
+ * @export
+ * @class ConfirmDonationContent
+ * @extends {LitElement}
+ */
+@customElement('confirm-donation-modal')
+export class ConfirmDonationContent extends LitElement {
+  @property({ type: Number }) amount = 5;
+
+  @property({ type: String }) currencyType = '$';
+
+  @property({ type: String }) donationType: DonationType = DonationType.OneTime;
+
+  @property({ type: Function }) confirmDonation: Function = (): void => {};
+
+  @property({ type: Function }) cancelDonation: Function = (): void => {};
+
+  get confirmationText(): TemplateResult {
+    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
+    return html`
+      <p>
+        You are about to make a <b>${this.donationType}</b> donation of
+        <b>${amount} ${this.currencyType}</b> to the Internet Archive.
+      </p>
+    `;
+  }
+
+  get confirmUpsellText(): TemplateResult {
+    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
+    return html`<p>
+      You are about to begin making <b>monthly</b> donations of
+      <b>${amount} ${this.currencyType}</b> to the Internet Archive. (Your first recurring
+      contribution will be next month.)
+    </p>`;
+  }
+
+  confirm(): void {
+    this?.confirmDonation();
+  }
+
+  cancel(): void {
+    this?.cancelDonation();
+  }
+
+  get confirmCTA(): string {
+    return this.donationType === DonationType.Upsell
+      ? 'Start monthly donation'
+      : 'Complete donation';
+  }
+
+  /** @inheritdoc */
+  render(): TemplateResult {
+    return html`
+      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}
+
+      <div class="cta-group">
+        <button id="confirm" @click=${(): void => this.confirm()}>${this.confirmCTA}</button>
+        <button id="cancel" @click=${(): void => this.cancel()}>Cancel</button>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;
+    const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;
+
+    return css`
+      :host {
+        display: block;
+      }
+
+      button {
+        outline: none;
+        cursor: pointer;
+      }
+
+      button#confirm {
+        font-size: 2rem;
+        display: block;
+        width: 100%;
+        margin-top: 0.5rem;
+        padding: 1rem 2rem;
+        background-color: ${ctaButtonColor};
+        color: #fff;
+        border-radius: 5px;
+        border: 0;
+        font-weight: bold;
+        line-height: normal;
+      }
+
+      button#cancel {
+        margin-top: 1rem;
+        border: 0;
+        text-decoration: underline;
+        background-color: transparent;
+      }
+
+      button:disabled {
+        background-color: ${ctaButtonDisabledColor};
+        cursor: not-allowed;
+      }
+    }`;
+  }
+
+  /**
+   * https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies/
+   */
+  get currencySymbol(): string {
+    switch (this.currencyType) {
+      case 'AUD':
+        return 'AU$';
+      case 'BRL':
+        return 'R$';
+      case 'CAD':
+        return 'CA$';
+      case 'CHF':
+        return 'Fr';
+      case 'CNY':
+        return '¥';
+      case 'CZK':
+        return 'Kč';
+      case 'DKK':
+        return 'Kr';
+      case 'EUR':
+        return '€';
+      case 'GBP':
+        return '£';
+      case 'HKD':
+        return 'HK$';
+      case 'HUF':
+        return 'Ft';
+      case 'ILS':
+        return '₪';
+      case 'JPY':
+        return '¥';
+      case 'MXN':
+        return 'MX$';
+      case 'MYR':
+        return 'RM';
+      case 'NOK':
+        return 'kr';
+      case 'PLN':
+        return 'zł';
+      case 'RUB':
+        return '₽';
+      case 'SEK':
+        return 'kr';
+      case 'SGD':
+        return 'S$';
+      case 'THB':
+        return '฿';
+      case 'TYD':
+        return 'NT$';
+      default:
+        return '$'; // $ as default USD, NZD
+    }
+  }
+}

package/src/modals/error-modal-content.ts

@@ -1,48 +1,48 @@
-import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-/**
- * This is shown at the bottom of the error modal.
- *
- * @export
- * @class ErrorModalContent
- * @extends {LitElement}
- */
-@customElement('donation-form-error-modal-content')
-export class ErrorModalContent extends LitElement {
-  /** @inheritdoc */
-  render(): TemplateResult {
-    return html`
-      <div class="container">
-        <a
-          href="https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/"
-          rel="noopener"
-          target="_blank"
-        >
-          Questions?
-        </a>
-      </div>
-    `;
-  }
-
-  /** @inheritdoc */
-  static get styles(): CSSResult {
-    const questionsLinkTopMargin = css`var(--errorModalQuestionsLinkTopMargin, 1rem)`;
-    const questionsLinkFontColor = css`var(--errorModalQuestionsLinkFontColor, #333)`;
-    const questionsLinkFontSize = css`var(--errorModalQuestionsLinkFontSize, 1.4rem)`;
-
-    return css`
-      .container {
-        margin-top: ${questionsLinkTopMargin};
-        text-align: center;
-      }
-
-      a,
-      a:link,
-      a:visited {
-        color: ${questionsLinkFontColor};
-        font-size: ${questionsLinkFontSize};
-      }
-    `;
-  }
-}
+import { LitElement, html, css, CSSResult, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+/**
+ * This is shown at the bottom of the error modal.
+ *
+ * @export
+ * @class ErrorModalContent
+ * @extends {LitElement}
+ */
+@customElement('donation-form-error-modal-content')
+export class ErrorModalContent extends LitElement {
+  /** @inheritdoc */
+  render(): TemplateResult {
+    return html`
+      <div class="container">
+        <a
+          href="https://help.archive.org/help/why-is-there-a-problem-processing-my-donation/"
+          rel="noopener"
+          target="_blank"
+        >
+          Questions?
+        </a>
+      </div>
+    `;
+  }
+
+  /** @inheritdoc */
+  static get styles(): CSSResult {
+    const questionsLinkTopMargin = css`var(--errorModalQuestionsLinkTopMargin, 1rem)`;
+    const questionsLinkFontColor = css`var(--errorModalQuestionsLinkFontColor, #333)`;
+    const questionsLinkFontSize = css`var(--errorModalQuestionsLinkFontSize, 1.4rem)`;
+
+    return css`
+      .container {
+        margin-top: ${questionsLinkTopMargin};
+        text-align: center;
+      }
+
+      a,
+      a:link,
+      a:visited {
+        color: ${questionsLinkFontColor};
+        font-size: ${questionsLinkFontSize};
+      }
+    `;
+  }
+}