Merge pull request #46 from rtCamp/fix/adding-review-from-12-02

Adding review from meeting 12.02
rtCamp · Feb 12, 2024 · 4a301d1 · 4a301d1
2 parents 728bf94 + ee7402c
commit 4a301d1
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 28 deletions.
diff --git a/src/common/index.ejs b/src/common/index.ejs
@@ -19,9 +19,8 @@
         <%= renderCard('Payment Gateway', '💳', '/payment-gateway') %>
         <%= renderCard('CHIPS', '🍪', '/chips') %>
         <%= renderCard('Legacy GSI', '🔐', '/gsi') %>
-        <%= renderCard('Social Media', '👍', '/social-media') %>
+        <%= renderCard('Facebook', '👍', '/social-media') %>
     </div>
 </div>
 
-<%- include(commonPath + '/footer.ejs') %>
-👍
+<%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/ecommerce/cart.ejs b/src/scenarios/ecommerce/cart.ejs
@@ -1,8 +1,8 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8">
-    <h1 class="text-3xl font-bold mb-4 text-center">Your Cart</h1>
-    <div id="cart" class="space-y-2 max-w-lg mx-auto"></div>
+<div class="container mx-auto p-8">
+    <h1 class="text-3xl font-bold mb-6">Your Cart</h1>
+    <ul id="cart" class="space-y-4"></ul>
     <div class="text-center mt-4">
         <a href="./products" class="text-blue-600 text-lg hover:underline">Back to products</a>
     </div>
@@ -14,6 +14,16 @@
 			const data = await res.json();
 			const cartElement = document.getElementById('cart');
 
+			const productList = {
+				1: { name: '🍍 Pineapple'},
+				2: { name: '🍊 Orange' },
+				3: { name: '🍓 Strawberry' }
+			};
+
+			const getProductName = ( productId ) => {
+				return productList[productId].name 
+			} 
+
 			// Group products by ID and count them
 			const productCounts = data.reduce((acc, productId) => {
 				acc[productId] = (acc[productId] || 0) + 1;
@@ -30,10 +40,9 @@
 
 			// Display the product details in the cart element
 			cartElement.innerHTML = productDetails.map(detail => `
-                    <div class="flex items-center space-x-2 p-2 bg-white rounded shadow mb-2">
-                        <span class="text-2xl">📦</span>
-                        <span>Product #${detail.productId} (Count: ${detail.count})</span>
-                    </div>
+                    <li class="text-center flex justify-between items-center p-2 bg-white rounded shadow text-lg">
+                        ${getProductName(detail.productId)} (Count: ${detail.count})
+                    </li>
                 `).join('');
 		} catch (error) {
 			console.error('Error:', error);

diff --git a/src/scenarios/ecommerce/index.ejs b/src/scenarios/ecommerce/index.ejs
@@ -1,10 +1,10 @@
 <%- include(commonPath + '/header.ejs') %>
 
-	<%- include(commonPath + '/internal-page/header.ejs') %>
-		<p class="text-lg font-bold mb-4 text-center">Here is an embedded Third-Party e-commerce site, check if you can add products to cart.</p>
-		<div class="mt-8 flex justify-center">
-			<iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/ecommerce/products" class="border-8 rounded w-1/2 h-96"></iframe>
-		</div>
-	<%- include(commonPath + '/internal-page/footer.ejs') %>
+	<header>
+		<h1 class="text-3xl font-bold my-8 text-center text-slate-800">E-commerce</h1>
+	</header>
+	<div class="mt-8 flex justify-center">
+		<iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/ecommerce/products" class="border-8 rounded w-1/2 h-96"></iframe>
+	</div>
 
 <%- include(commonPath + '/footer.ejs') %>
diff --git a/src/scenarios/ecommerce/products.ejs b/src/scenarios/ecommerce/products.ejs
@@ -1,13 +1,27 @@
 <%- include(commonPath + '/header.ejs') %>
 
-<div class="container mx-auto py-8 relative">
-    <a href="./cart" id="cart-icon" class="text-blue-600 text-xl hover:underline absolute top-8 right-8">🛒 Cart (0)</a>
-    <h1 class="text-3xl font-bold mb-4 text-center">Products</h1>
+<% 
+	const productList = {
+		1: { name: '🍍 Pineapple'},
+		2: { name: '🍊 Orange' },
+		3: { name: '🍓 Strawberry' }
+	};
+
+	const getProductName = ( productId ) => {
+		return productList[productId].name 
+	} 
+%>
+
+<div class="container mx-auto p-8 relative">
+    <header class="flex justify-between items-center mb-6">
+		<h1 class="text-3xl font-bold text-center">Products</h1>
+		<a href="./cart" id="cart-icon" class="text-blue-600 text-xl hover:underline">🛒 Cart (0)</a>
+    </header>	
     <div id="error-message" class="text-center text-red-600 mb-4"></div>
     <ul class="space-y-4">
 		<% [1,2,3].forEach(productNumber => { %>
-			<li class="text-center">
-				<span>Product <%= productNumber %></span>
+			<li class="text-center flex justify-between items-center p-2 bg-white rounded shadow text-lg">
+				<span><%= getProductName(productNumber) %></span>
 				<button onclick="addToCart('<%= productNumber %>')" class="ml-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">Add to cart</button>
 			</li>
 		<% }) %>

diff --git a/src/scenarios/payment-gateway/checkout.ejs b/src/scenarios/payment-gateway/checkout.ejs
@@ -1,7 +1,7 @@
 <%- include(commonPath + '/header.ejs') %>
 
     <%- include(commonPath + '/internal-page/header.ejs') %>
-        <p class="bg-gray-100 p-4 rounded-lg mb-4 text-lg">Item: <%= item %> - $<%= price %></p>
+        <p class="bg-gray-100 p-4 rounded-lg mb-4 text-lg">Shopping cart: <%= item %> - $<%= price %></p>
         <div class="overflow-hidden rounded-lg">
             <iframe src="<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/payment-gateway/payment-form" class="w-full h-96" frameborder="0"></iframe>
         </div>

diff --git a/src/scenarios/payment-gateway/routes.js b/src/scenarios/payment-gateway/routes.js
@@ -2,11 +2,13 @@ const express = require( 'express' );
 const path = require( 'path' );
 const router = express.Router();
 
+const DEMO_CARD_NUMBER = '4242424242424242';
+const DEMO_CARD_NUMBER_2 = '4242-4242-4242-4242';
 
 router.get( '/', ( req, res ) => {
 	res.render( path.join( __dirname, 'checkout' ), {
-		title: 'Checkout',
-		item: "Virtual Badge for testing the site",
+		title: 'Checkout - Payment',
+		item: '🍍 Pineapple',
 		price: 10,
 	} );
 } );
@@ -18,7 +20,7 @@ router.get( '/payment-form', ( req, res ) => {
 			maxAge: 900000,
 			httpOnly: true,
 			domain: res.locals.domainC,
-			sameSite: "none",
+			sameSite: 'none',
 			secure: true
 		} );
 	}
@@ -33,13 +35,13 @@ router.post( '/payment-form', ( req, res ) => {
 	let message = '';
 	let status = 0;
 
-	if (sessionId && ( cardNumber === '4242424242424242' || cardNumber === '4242-4242-4242-4242' )) {
+	if (sessionId && ( cardNumber === DEMO_CARD_NUMBER || cardNumber === DEMO_CARD_NUMBER_2 )) {
 		status = 1;
 		message = 'Payment successful!';
 	} else if (!sessionId) {
 		message = 'Payment failed! Session not valid.';
 	} else {
-		message = 'Invalid card number. <br/>Please use 4242424242424242 for demo purchases.';
+		message = `Invalid card number. <br/>Please use ${DEMO_CARD_NUMBER} for demo purchases.`;
 	}
 
 	res.render( path.join( __dirname, 'payment-form' ), {

diff --git a/src/scenarios/social-media/routes.js b/src/scenarios/social-media/routes.js
@@ -6,7 +6,7 @@ router.get('/', (req, res) => {
     // Send the default page
     const currentDomain = req.get('host');
     res.render(path.join(__dirname,'index'), {
-        title: 'Social Media'
+        title: 'Facebook'
     });
 });