receipts toggling in demo with sent notifs firing

Author: iisa

demo/index.html

@@ -39,6 +39,8 @@
     <div id="options">
       <button id="toggle-receipts">Toggle receipts</button>
       <button id="clear-updates">Clear updates</button>
+
+      <p id="interaction-status-area" style="min-height: 20px;margin: 10px;"></p>
     </div>
   </div>
 
@@ -95,10 +97,17 @@
     mgcComponent.receipts = receiptsData;
 
     // event handlers
-    mgcComponent.addEventListener('EmailReceiptRequest', async (e) => {
+    mgcComponent.addEventListener('EmailReceiptRequest', (e) => {
+      debugger;
+      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 = {
@@ -109,8 +118,11 @@
 
       updateNotices = [update, ...updateNotices];
 
-      mgcComponent.updateReceived(update);
-      await mgcComponent.updateComplete;
+      setTimeout(() => {
+        mgcComponent.updateReceived(update);
+        console.log('EmailReceiptRequest index.html ----', update);
+        uxMessageInfoArea.innerText = '';
+      }, returnTiming);
     });
 
     // options hooks

src/receipts.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { LitElement, html, css, PropertyValues, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -27,17 +28,16 @@ export class IauxMgcReceipts extends LitElement {
   @property({ type: Object })
   donationEmailStatusMap: donationEmailStatusMapType | null = null;
 
-  shouldUpdate(changed: PropertyValues) {
-    if (changed.has('donationEmailStatusMap')) {
-      return true;
-    }
-    return true;
-  }
-
   updated(changed: PropertyValues) {
     if (changed.has('receipts')) {
       this.updateReceiptSentMap();
     }
+    if (changed.has('donationEmailStatusMap')) {
+      console.log(
+        'donationEmailStatusMap UPDATED ---- ',
+        this.donationEmailStatusMap
+      );
+    }
   }
 
   updateReceiptSentMap() {
@@ -94,22 +94,30 @@ export class IauxMgcReceipts extends LitElement {
     );
   }
 
-  public emailSent(receiptEmailed: donationEmailStatus) {
+  async emailSent(receiptEmailed: donationEmailStatus) {
+    const currStatusMap = this.donationEmailStatusMap;
+    this.donationEmailStatusMap = null;
+    await this.updateComplete;
     const statusMap = {
-      ...this.donationEmailStatusMap,
+      ...currStatusMap,
     } as donationEmailStatusMapType;
     const { id } = receiptEmailed;
     statusMap[id] = receiptEmailed;
-    this.donationEmailStatusMap = statusMap;
-    // this.requestUpdate();
+
+    this.donationEmailStatusMap = { ...statusMap };
+    console.log(
+      'RECEIPTS -- emailSent',
+      this.donationEmailStatusMap,
+      receiptEmailed
+    );
   }
 
   emailStatusMessageToDisplay(donationSentStatus: donationEmailStatus): string {
     switch (donationSentStatus.emailStatus) {
       case 'success':
-        return 'Email sent';
+        return '✓ Email receipt sent';
       case 'fail':
-        return 'Email did not send';
+        return '✖ Email receipt failed';
       default:
         return '';
     }
@@ -185,10 +193,6 @@ export class IauxMgcReceipts extends LitElement {
                                 } as donationEmailStatusMapType;
                                 statusMap[donation.id].emailStatus = 'pending';
                                 this.donationEmailStatusMap = statusMap;
-                                console.log(
-                                  'this.donationEmailStatusMap',
-                                  this.donationEmailStatusMap
-                                );
                               }
                             }}
                             ?disabled=${emailUnavailable}
@@ -237,11 +241,26 @@ export class IauxMgcReceipts extends LitElement {
     }
     iaux-button-style {
       display: inline-block;
-      padding-right: 5px;
+    }
+
+    .request-receipt {
+      display: flex;
+      flex-wrap: nowrap;
+      align-content: center;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 20px;
+    }
+
+    .sent-status.success,
+    .sent-status.fail {
+      padding: 5px;
+      background: rgb(238, 253, 238);
+      width: 135px;
+      min-height: 20px;
     }
     .sent-status.success {
       color: rgb(33, 149, 24);
-      cursor: pointer;
       border-left: 5px solid rgb(33, 149, 24);
     }
     .sent-status.fail {