updated data formats. restored accidentally overwritten changes to apps

README.md

@@ -36,12 +36,35 @@ Purchase ('fdc3.purchase')
 ```ts
 interface Purchase {
     type: string; //'fdc3.purchase'
-    amount: number;
-    vendor: string;
-    timestamp: number;
-    purchaser: string; //is there a common identifier for the purchaser?  do we even want to include this (or is this too much PII)?
-    merchant: string; //identifier for the merchant/point of purchase - is there a common identifier
-    category?: string;
+    data: {
+      amount: number;
+      vendor: string;
+      date: string;
+      time: string;
+      userID: string; //is there a common identifier for the purchaser?  do we even want to include this (or is this too much PII)?
+      pointOfSale: string; //identifier for the merchant/point of purchase - is there a common identifier
+      category?: 'Groceries'
+                  | 'Dining'
+                  | 'Home'
+                  | 'Shopping'
+                  | 'Travel'
+                  | 'Fuel';
+      }
+
+
+      //example
+      {
+         type: 'fdc3.purchase',
+         data: {
+            amount: 30,
+            vendor: 'My Favorite Vendor',
+            date: '9/29/2024',
+            time: '3:28:10 PM',
+            userId: '[email protected]',
+            pointOfSale: 'POS_ID',
+            category: 'Groceries' 
+         }
+      }
 }
 ```
 
@@ -59,15 +82,58 @@ Terms ('fdc3.Terms')
 ```ts
 interface Terms {
    type: string; //'fdc3.terms
-   points: number;
-   rate: number;
-   provider: string; //display name of bank providing terms
-   providerId: string; //identifier of bank providing terms
+   data: {
+      points: number;
+      rate: number;
+      provider: string; //display name of bank providing terms
+      providerId: string; //identifier of bank providing terms
+   }
 }
+
+//example
+{
+   type: 'fdc3.terms',
+   data: {
+      points: 13,
+      rate: 1,
+      provider: {
+         name: 'E*TRADE',
+         id: 'testApp1',
+         logo: './images/etrade.png'
+      }
+   }   
+}
+
 ```
 
 intent: MakePurchase
 
+```ts
+
+intent: MakePurchase (result)
+
+ ```ts 
+   interface PurchaseConfirmation {
+      type: string; //fdc3.purchaseConfirmation
+      data: {
+         provider: Provider;
+      }
+   }
+
+   //example
+   {
+      type: 'fdc3.purchaseConfirmation',
+      data: {
+         provider: {
+            name: 'E*TRADE',
+            id: 'testApp1',
+            logo: './images/etrade.png'
+         }
+      }
+   }   
+
+ ```
+
 
 ## Roadmap
 

app/bank-app1.html

@@ -23,16 +23,27 @@
             fdc3.addIntentListener('GetTerms', async (ctx) => {
               return {
                     type: 'fdc3.terms',
-                    points: 13,
-                    rate: 1,
-                    provider: 'Visa',
-                    providerId: 'testApp1'
+                    data: {
+                      points: 13,
+                      rate: 1,
+                      provider: {
+                        name: 'E*TRADE',
+                        id: 'testApp1',
+                        logo: './images/etrade.png'
+                      } 
+                    }
                 };
           });
           fdc3.addIntentListener('MakePurchase', async (ctx) => {
               return {
                     type: 'fdc3.purchaseConfirmation',
-                    providerId: 'testApp1'
+                    data: {
+                      provider: {
+                        name: 'E*TRADE',
+                        id: 'testApp1',
+                        logo: './images/etrade.png'
+                      } 
+                    }
                 };
           });
           }

app/bank-app2.html

@@ -23,16 +23,27 @@
             fdc3.addIntentListener('GetTerms', async (ctx) => {
               return {
                     type: 'fdc3.terms',
-                    points: 25,
-                    rate: .8,
-                    provider: 'Capital One',
-                    providerId: 'testApp2'
+                    data: {
+                      points: 25,
+                      rate: .8,
+                      provider: {
+                        name: 'Capital One',
+                        id: 'testApp2',
+                        logo: './images/capitalone.png'
+                      }   
+                    }
                 };
           });
           fdc3.addIntentListener('MakePurchase', async (ctx) => {
               return {
                     type: 'fdc3.purchaseConfirmation',
-                    providerId: 'testApp2'
+                    data: {
+                      provider: {
+                        name: 'Capital One',
+                        id: 'testApp2',
+                        logo: './images/capitalone.png'
+                      }   
+                    }
                 };
           });
           }

app/bank-app3.html

@@ -23,16 +23,27 @@
             fdc3.addIntentListener('GetTerms', async (ctx) => {
               return {
                     type: 'fdc3.terms',
-                    points: 11,
-                    rate: .6,
-                    provider: 'Klarna',
-                    providerId: 'testApp3'
+                    data: {
+                      points: 11,
+                      rate: .6,
+                      provider: {
+                        name: 'Klarna',
+                        id: 'testApp3',
+                        logo: './images/klarna.png'
+                      } 
+                    }
                 };
           });
           fdc3.addIntentListener('MakePurchase', async (ctx) => {
               return {
                     type: 'fdc3.purchaseConfirmation',
-                    providerId: 'testApp3'
+                    data: {
+                      provider: {
+                        name: 'Klarna',
+                        id: 'testApp3',
+                        logo: './images/klarna.png'
+                      } 
+                    }
                 };
           });
           }

app/index.html

@@ -22,14 +22,6 @@
           onChannelJoined: (evt) => console.log('channel joined', evt),
           onChannelLeft: () => console.log('channel left'),
           onFDC3Ready: async (fdc3) => {
-            const info = await fdc3.getInfo();
-            console.log('onFDC3Ready - info', info);
-            fdc3.addIntentListener('ViewChart', (ctx) => {
-              console.log('handleContext', ctx);
-            });
-            fdc3.addContextListener('fdc3.instrument', (ctx) => {
-              console.log('handleContext', ctx);
-            });
             window.fdc3 = fdc3;
             const purchaseButton = document.getElementById('initPurchaseButton');
             if (purchaseButton){
@@ -60,7 +52,8 @@ <h1>BankerX Demo</h1>
       </div>
       <div id="successModal" class="modal">
           <div class="textContainer">
-            <div class="text"></div>
+            <div class="logo row"></div>
+            <div class="text row"></div>
           </div>
           <div class="row cta">
             <button id="successCTA">OK</button>

app/main.js

@@ -1,14 +1,18 @@
 let selected = null;
 const purchase = {
           type: 'fdc3.purchase',
-          amount: 30,
-          vendor: 'My Favorite Vendor',
-          timestamp: new Date().getDate(),
-          purchaser: 'me',
-          merchant: 'you',
-          category: 'stuff' 
+          data: {
+            amount: 30,
+            vendor: 'My Favorite Vendor',
+            time: new Date().toLocaleTimeString(),
+            date: new Date().toLocaleDateString(),
+            userID: '[email protected]',
+            pointOfSale: 'POS1',
+            category: 'Groceries' 
+          }
   };
 
+
 const selectCard = (id) => {
   const modal = document.getElementById('modal');
   const cards = modal.querySelectorAll('.card');
@@ -28,13 +32,24 @@ const launchBankApp = (index) => {
     window.open(`./bank-app${index}.html`, '_blank');
 };
 
-const showSuccessModal = (message) => {
-  const modal = document.getElementById('successModal');
-  const modalCTA = document.getElementById('successCTA');
-  modalCTA.addEventListener('click', () => { hideModal('successModal');});
-  const modalText = modal.querySelector('.textContainer .text');
-  modalText.textContent = message;
-  showModal('successModal');
+const showSuccessModal = (message, purchaseResult) => {
+    const modal = document.getElementById('successModal');
+    const modalCTA = document.getElementById('successCTA');
+    modalCTA.addEventListener('click', () => { hideModal('successModal');});
+    if (purchaseResult.provider.logo){
+      const logoContainer = modal.querySelector('.logo');
+      if (logoContainer){
+          let target = logoContainer.querySelector('img');
+          if (!target){
+              target = document.createElement('img');
+              logoContainer.appendChild(target);
+          }
+          target.src = purchaseResult.provider.logo;
+      }
+    }
+    const modalText = modal.querySelector('.textContainer .text');
+    modalText.textContent = message;
+    showModal('successModal');
 }
 
 const initializeModal = () => {
@@ -75,7 +90,7 @@ const initializeModal = () => {
   const purchaseResponse = await fdc3?.raiseIntent('MakePurchase', purchase, selected);
   const purchaseResult = await purchaseResponse.getResult();
   hideModal();
-  showSuccessModal('Purchase Successful');
+  showSuccessModal('Purchase Successful', purchaseResult.data);
  });
 actionRow.appendChild(purchaseButton);
 modal.appendChild(actionRow);
@@ -104,14 +119,22 @@ const renderBankResult = (data) => {
     return;
   }
   const bankCard = document.createElement('div');
-  bankCard.id = data.providerId;
-  bankCard.addEventListener('click', () => { selectCard(data.providerId)});
+  bankCard.id = data.provider.id;
+  bankCard.addEventListener('click', () => { selectCard(data.provider.id)});
   bankCard.classList.add('card');
   const cardHeader = document.createElement('div');
   cardHeader.classList.add('header');
   const headerText = document.createElement('div');
-  headerText.classList.add('text');
-  headerText.textContent = data.provider;
+  if (data.provider.logo) {
+    headerText.classList.add('logo');
+    const logo = document.createElement('img');
+    logo.src = data.provider.logo;
+    logo.title = data.provider.name;
+    headerText.appendChild(logo);
+  } else {
+    headerText.classList.add('text');  
+    headerText.textContent = data.provider;
+  }
   cardHeader.appendChild(headerText);
   bankCard.appendChild(cardHeader);
 
@@ -145,8 +168,8 @@ const getTerms = async () => {
   initializeModal();
   appIntents.apps.forEach(async (app) => {
       const result = await fdc3.raiseIntent('GetTerms', purchase, {appId: app.appId});
-      const data = await result.getResult();            
-      renderBankResult(data);
+      const contextData = await result.getResult();            
+      renderBankResult(contextData.data);
   });
   showModal();
 };

app/styles.css

@@ -85,7 +85,7 @@ body {
   }
 
   .modal .row {
-    padding-bottom: 16px;
+    padding-top: 16px;
   }
 
   .modal .actions {
@@ -132,7 +132,7 @@ body {
     font-family: Sans-serif;
     font-size: 30px;
     font-weight: 700;
-    line-height: 38px;
+    line-height: 28px;
     text-align: center;
   }
 
@@ -160,7 +160,7 @@ body {
   }
 
   .card {
-    height: 130px;
+    height: 160px;
     width: 160px;
     border: 1px solid;
     border-radius: 12px;
@@ -190,6 +190,10 @@ body {
     font-size: 24px;
   }
 
+  .card .header .logo img {
+    max-height: 60px;
+  }
+
   .card .content {
     display: flex;
     flex-flow: column;
@@ -208,6 +212,7 @@ body {
 
   #successModal .textContainer {
     display: flex;
+    flex-flow: column;
     width: 100%;
     justify-content: center;
     align-items: center;
@@ -217,6 +222,17 @@ body {
     font-size: 24px;
     font-weight: 700;
   }
+
+  #succesModal .row {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+  }
+
+
+  #successModal .logo img {
+    height: 60px;
+  }
 
   #successModal .cta {
     display: flex;