diff --git a/README.md b/README.md index 2de9f808..88e5154c 100644 --- a/README.md +++ b/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: 'me@me.com', + pointOfSale: 'POS_ID', + category: 'Groceries' + } + } } //example @@ -71,29 +94,30 @@ Terms ('fdc3.Terms') ```ts interface Terms { type: string; //'fdc3.terms - points: number; - rate: number; - provider: Provider; //identifiers and display information of bank providing terms -} -interface Provider { - id: string; - name: string; - logo?: string; + data: { + points: number; + rate: number; + provider: string; //display name of bank providing terms + providerId: string; //identifier of bank providing terms + } } //example { type: 'fdc3.terms', - points: 13, - rate: 1, - provider: { - name: 'E*TRADE', - id: 'testApp1', - logo: './images/etrade.png' - } + data: { + points: 13, + rate: 1, + provider: { + name: 'E*TRADE', + id: 'testApp1', + logo: './images/etrade.png' + } + } } + ``` intent: MakePurchase (result) @@ -113,7 +137,33 @@ intent: MakePurchase (result) logo: './images/etrade.png' } -``` + +```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 diff --git a/app/bank-app1.html b/app/bank-app1.html index 30b75699..571608ca 100644 --- a/app/bank-app1.html +++ b/app/bank-app1.html @@ -23,23 +23,28 @@ fdc3.addIntentListener('GetTerms', async (ctx) => { return { type: 'fdc3.terms', - points: 13, - rate: 1, - provider: { - name: 'E*TRADE', - id: 'testApp1', - logo: './images/etrade.png' - } + data: { + points: 13, + rate: 1, + provider: { + name: 'E*TRADE', + id: 'testApp1', + logo: './images/etrade.png' + } + } + }; }); fdc3.addIntentListener('MakePurchase', async (ctx) => { return { type: 'fdc3.purchaseConfirmation', - provider: { - name: 'E*TRADE', - id: 'testApp1', - logo: './images/etrade.png' - } + data: { + provider: { + name: 'E*TRADE', + id: 'testApp1', + logo: './images/etrade.png' + } + } }; }); } diff --git a/app/bank-app2.html b/app/bank-app2.html index 9923cd1f..edb9ef43 100644 --- a/app/bank-app2.html +++ b/app/bank-app2.html @@ -23,23 +23,27 @@ fdc3.addIntentListener('GetTerms', async (ctx) => { return { type: 'fdc3.terms', - points: 25, - rate: .8, - provider: { - name: 'Capital One', - id: 'testApp2', - logo: './images/capitalone.png' - } + data: { + points: 25, + rate: .8, + provider: { + name: 'Capital One', + id: 'testApp2', + logo: './images/capitalone.png' + } + } }; }); fdc3.addIntentListener('MakePurchase', async (ctx) => { return { type: 'fdc3.purchaseConfirmation', - provider: { - name: 'Capital One', - id: 'testApp2', - logo: './images/capitalone.png' - } + data: { + provider: { + name: 'Capital One', + id: 'testApp2', + logo: './images/capitalone.png' + } + } }; }); } diff --git a/app/bank-app3.html b/app/bank-app3.html index 2fa4ac0c..82c60333 100644 --- a/app/bank-app3.html +++ b/app/bank-app3.html @@ -23,23 +23,27 @@ fdc3.addIntentListener('GetTerms', async (ctx) => { return { type: 'fdc3.terms', - points: 11, - rate: .6, - provider: { - name: 'Klarna', - id: 'testApp3', - logo: './images/klarna.png' - } + data: { + points: 11, + rate: .6, + provider: { + name: 'Klarna', + id: 'testApp3', + logo: './images/klarna.png' + } + } }; }); fdc3.addIntentListener('MakePurchase', async (ctx) => { return { type: 'fdc3.purchaseConfirmation', - provider: { - name: 'Klarna', - id: 'testApp3', - logo: './images/klarna.png' - } + data: { + provider: { + name: 'Klarna', + id: 'testApp3', + logo: './images/klarna.png' + } + } }; }); } diff --git a/app/index.html b/app/index.html index f2d78777..225960c6 100644 --- a/app/index.html +++ b/app/index.html @@ -22,8 +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); window.fdc3 = fdc3; const purchaseButton = document.getElementById('initPurchaseButton'); if (purchaseButton){ diff --git a/app/main.js b/app/main.js index f12c910f..437c4ee7 100644 --- a/app/main.js +++ b/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: 'nick@connectifi.co', + pointOfSale: 'POS1', + category: 'Groceries' + } }; + const selectCard = (id) => { const modal = document.getElementById('modal'); const cards = modal.querySelectorAll('.card'); @@ -29,23 +33,24 @@ const launchBankApp = (index) => { }; 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 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 modalText = modal.querySelector('.textContainer .text'); + modalText.textContent = message; + showModal('successModal'); } const initializeModal = () => { @@ -86,7 +91,7 @@ const initializeModal = () => { const purchaseResponse = await fdc3?.raiseIntent('MakePurchase', purchase, selected); const purchaseResult = await purchaseResponse.getResult(); hideModal(); - showSuccessModal('Purchase Successful', purchaseResult); + showSuccessModal('Purchase Successful', purchaseResult.data); }); actionRow.appendChild(purchaseButton); modal.appendChild(actionRow); @@ -164,8 +169,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(); }; \ No newline at end of file diff --git a/app/styles.css b/app/styles.css index 91fafec4..2112c54d 100644 --- a/app/styles.css +++ b/app/styles.css @@ -194,6 +194,10 @@ body { font-size: 24px; } + .card .header .logo img { + max-height: 60px; + } + .card .content { display: flex; flex-flow: column; @@ -234,6 +238,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;