receipts view

demo/index.html

@@ -37,14 +37,104 @@
   </header>
   <div class="dev-tools">
     <div id="options">
+      <button id="toggle-receipts">Toggle receipts</button>
+
+      <p id="interaction-status-area" style="min-height: 20px;margin: 10px;"></p>
     </div>
   </div>
 
   <div id="demo">
+    <style>
+      iaux-monthly-giving-circle {
+        display: block;
+        margin: 0 auto;
+        max-width: 800px;
+      }
+    </style>
     <iaux-monthly-giving-circle></iaux-monthly-giving-circle>
   </div>
 
   <script type="module" src="../dist/src/monthly-giving-circle.js"></script>
+  <script type="module">
+    let updateNotices = [];
+
+    const receiptsData = [
+        {
+          amount: 9999.99,
+          date: '2020-09-01',
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Completed',
+          id: 'foo-id-1',
+        },
+        {
+          amount: 100,
+          date: '2023-02-01',
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Completed',
+          id: 'foo-id-2',
+          is_test: true,
+        },
+        {
+          amount: 100,
+          date: '2024-03-01',
+          donor: 'John Doe',
+          paymentMethod: 'Credit Card',
+          status: 'Completed',
+          id: 'foo-id-3',
+          is_test: true,
+        },
+      ];
+
+
+    let showReceipts = true;
+
+    const mgcComponent = document.querySelector('iaux-monthly-giving-circle');
+
+    // load start data
+    mgcComponent.receipts = receiptsData;
+
+    // event handlers
+    mgcComponent.addEventListener('EmailReceiptRequest', (e) => {
+      const uxMessageInfoArea = document.getElementById('interaction-status-area');
+
+      const { donation } = e.detail;
+      const randomizer = Math.floor(Math.random() + 0.5);
+      const successOrFail = randomizer === 1 ? 'success' : 'fail';
+      const returnTiming = randomizer === 1 ? 3000 : 8000;
+
+      uxMessageInfoArea.innerText = `Email receipt request for donation ${donation.id} will return ${successOrFail} in ${returnTiming} ms.`;
+
+      const message = successOrFail === 'success' ? 'Email receipt sent' : 'Email receipt failed';
+
+      const update = {
+        message,
+        status: successOrFail,
+        donationId: donation.id
+      };
+
+      updateNotices = [update, ...updateNotices];
+
+      setTimeout(() => {
+        mgcComponent.updateReceived(update);
+        console.log('EmailReceiptRequest index.html ----', update);
+        uxMessageInfoArea.innerText = '';
+      }, returnTiming);
+    });
+
+    // options hooks
+    document.getElementById('toggle-receipts').addEventListener('click', async () => {
+      if (showReceipts) {
+        mgcComponent.receipts = [];
+        showReceipts = false;
+        return;
+      }
+      mgcComponent.receipts = receiptsData;
+      await mgcComponent.updateComplete;
 
+      showReceipts = true;
+    });
+  </script>
 </body>
 </html>

index.ts

@@ -1 +1,2 @@
 export { MonthlyGivingCircle } from './src/monthly-giving-circle';
+export type { anUpdate } from './src/monthly-giving-circle';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-monthly-portal",
-  "version": "1.0.0",
+  "version": "0.0.0-receipts10",
   "description": "The Internet Archive Monthly Portal",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
@@ -27,6 +27,7 @@
     "ghpages:generate": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
   },
   "dependencies": {
+    "@internetarchive/iaux-notification-toast": "^0.0.0-alpha2",
     "@internetarchive/icon-donate": "^1.3.4",
     "lit": "^2.8.0"
   },

src/monthly-giving-circle.ts

@@ -1,22 +1,107 @@
 /* eslint-disable no-debugger */
 
-import { LitElement, html } from 'lit';
+import { LitElement, html, TemplateResult, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import './welcome-message';
 import './presentational/mgc-title';
+import './receipts';
+import type { IauxMgcReceipts } from './receipts';
+import './presentational/button-style';
+
+export type anUpdate = {
+  message: string;
+  status: 'success' | 'fail';
+  donationId: string;
+};
 
 @customElement('iaux-monthly-giving-circle')
 export class MonthlyGivingCircle extends LitElement {
   @property({ type: String }) patronName: string = '';
 
+  @property({ type: Array }) receipts = [];
+
+  @property({ type: Array }) updates: anUpdate[] = [];
+
+  @property({ type: String, reflect: true }) viewToDisplay:
+    | 'welcome'
+    | 'receipts' = 'welcome';
+
   protected createRenderRoot() {
     return this;
   }
 
+  get receiptListElement(): IauxMgcReceipts {
+    return this.querySelector('iaux-mgc-receipts') as IauxMgcReceipts;
+  }
+
+  updateReceived(update: anUpdate) {
+    this.receiptListElement.emailSent({
+      id: update.donationId,
+      emailStatus: update.status,
+    });
+    this.updates.unshift(update);
+  }
+
+  get showReceiptsCTA(): TemplateResult {
+    return html`
+      <iaux-button-style class="link">
+        <button
+          @click=${() => {
+            this.viewToDisplay = 'receipts';
+            this.dispatchEvent(new CustomEvent('ShowReceipts'));
+          }}
+        >
+          View recent donation history
+        </button>
+      </iaux-button-style>
+    `;
+  }
+
   protected render() {
+    if (this.viewToDisplay === 'receipts') {
+      return html`
+        <iaux-mgc-title titleStyle="default">
+          <span slot="title">Recent donations</span>
+          <span slot="action">
+            <iaux-button-style class="link">
+              <button
+                class="close-receipts"
+                @click=${(event: Event) => {
+                  const btn = event.target as HTMLButtonElement;
+                  btn.disabled = true;
+
+                  this.viewToDisplay = 'welcome';
+                  this.dispatchEvent(new CustomEvent('ShowWelcome'));
+                  this.updates = [];
+                }}
+              >
+                Back to account settings
+              </button>
+            </iaux-button-style>
+          </span>
+        </iaux-mgc-title>
+        <iaux-mgc-receipts
+          .receipts=${this.receipts}
+          @EmailReceiptRequest=${(event: CustomEvent) => {
+            console.log('EmailReceiptRequest', event.detail);
+            this.dispatchEvent(
+              new CustomEvent('EmailReceiptRequest', {
+                detail: { ...event.detail },
+              })
+            );
+          }}
+        ></iaux-mgc-receipts>
+      `;
+    }
+
     return html`
-      <iaux-mgc-title titleStyle="heart"></iaux-mgc-title>
+      <iaux-mgc-title titleStyle="heart">
+        <span slot="title">Monthly Giving Circle</span>
+        <span slot="action"
+          >${this.receipts.length ? this.showReceiptsCTA : nothing}</span
+        >
+      </iaux-mgc-title>
       <iaux-mgc-welcome .patronName=${this.patronName}></iaux-mgc-welcome>
     `;
   }

src/presentational/button-style.ts

@@ -0,0 +1,72 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import '@internetarchive/icon-donate/icon-donate.js';
+
+@customElement('iaux-button-style')
+export class MonthlyGivingCircle extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static styles = css`
+    ::slotted(*) {
+      height: 30px;
+      border: none;
+      cursor: pointer;
+      color: #fff;
+      line-height: normal;
+      border-radius: 0.4rem;
+      text-align: center;
+      vertical-align: middle;
+      display: inline-block;
+      padding: 0.6rem 1.2rem;
+      border: 1px solid transparent;
+
+      white-space: nowrap;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -o-user-select: none;
+      user-select: none;
+    }
+
+    :host(.transparent) ::slotted(*) {
+      background-color: transparent;
+    }
+
+    :host(.slim) ::slotted(*) {
+      padding: 0;
+    }
+
+    :host(.primary) ::slotted(*) {
+      background-color: #194880;
+      border-color: #c5d1df;
+    }
+
+    :host(.secondary) ::slotted(*) {
+      background: #333;
+    }
+
+    :host(.cancel) ::slotted(*) {
+      background-color: #e51c26;
+      border-color: #f8c6c8;
+    }
+
+    :host(.link) ::slotted(*) {
+      color: #4b64ff;
+      border: none;
+      background: transparent;
+      display: flex;
+      align-items: flex-end;
+      padding: 0;
+      height: inherit;
+    }
+
+    :host(.disabled) ::slotted(*) {
+      cursor: not-allowed;
+      opacity: 0.5;
+      color: #222;
+    }
+  `;
+}

src/presentational/mgc-title.ts

@@ -9,10 +9,7 @@ export class MonthlyGivingCircle extends LitElement {
 
   get heart(): TemplateResult | typeof nothing {
     return this.titleStyle === 'heart'
-      ? html`
-          <div class="icon-donate"><ia-icon-donate></ia-icon-donate></div>
-          <span>Monthly Giving Circle</span>
-        `
+      ? html` <div class="icon-donate"><ia-icon-donate></ia-icon-donate></div> `
       : nothing;
   }
 
@@ -31,6 +28,11 @@ export class MonthlyGivingCircle extends LitElement {
   }
 
   static styles = css`
+    :host {
+      padding-bottom: 5px;
+      display: block;
+    }
+
     h2 {
       font-size: 1.5em;
       display: flex;