diff --git a/app/main.js b/app/main.js
index b4102118..c629f51e 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');
@@ -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();
};
\ No newline at end of file
diff --git a/app/styles.css b/app/styles.css
index 1cee65e3..b655db41 100644
--- a/app/styles.css
+++ b/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;
From 8db9ab69a200abaa8adad5c75c4730c7cddd73f1 Mon Sep 17 00:00:00 2001
From: Nicholas Kolba
Date: Sun, 29 Sep 2024 16:08:54 -0400
Subject: [PATCH 3/3] README cleanup
more cleanup of JSON interfaces and examples
---
README.md | 56 +++++++++++--------------------------------------------
1 file changed, 11 insertions(+), 45 deletions(-)
diff --git a/README.md b/README.md
index 88e5154c..0560bc7d 100644
--- a/README.md
+++ b/README.md
@@ -50,32 +50,20 @@ interface Purchase {
| '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
- {
- type: 'fdc3.purchase',
- amount: 30,
- vendor: 'My Favorite Vendor',
- timestamp: new Date().getDate(),
- purchaser: 'me',
- merchant: 'you',
- category: 'stuff'
+{
+ 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'
+ }
}
```
@@ -116,30 +104,8 @@ interface Terms {
}
}
}
-
-
```
-intent: MakePurchase (result)
-
-```ts
- interface PurchaseConfirmation {
- type: string; //fdc3.purchaseConfirmation
- provider: Provider;
- }
-
- //example
- {
- type: 'fdc3.purchaseConfirmation',
- provider: {
- name: 'E*TRADE',
- id: 'testApp1',
- logo: './images/etrade.png'
- }
-
-
-```ts
-
intent: MakePurchase (result)
```ts