Added checkout service

Author: otterobert

build/checkout.Dockerfile

@@ -0,0 +1,31 @@
+# docker build -t checkout-service -f build/checkout.Dockerfile .
+
+# Stage 1: Create a self signed SSL certificate
+FROM alpine:latest AS certs
+WORKDIR /app
+RUN apk --no-cache add openssl
+
+# Generate self-signed certificate (server.crt and server.key)
+RUN openssl req -new -newkey rsa:2048 -days 365 -nodes -x509 \
+    -subj "/C=US/ST=State/L=City/O=Organization/CN=localhost" \
+    -keyout server.key -out server.crt
+
+# Stage 2: Build the Node application
+FROM node:16
+WORKDIR /app
+
+# Copy the certificates from the certs stage
+COPY --from=certs /app .
+
+# Download and install dependencies
+COPY services/checkout/package*.json ./
+RUN npm install
+
+# Copy the rest of the application code
+COPY services/checkout/. .
+
+# Expose port 7005 for the HTTPS server
+EXPOSE 7005
+
+# Start the server
+CMD ["node", "index.js"]

build/newsletter.Dockerfile

@@ -1,4 +1,4 @@
-# docker build -t users-service -f build/users.Dockerfile .
+# docker build -t newsletter-service -f build/newsletter.Dockerfile .
 
 # Stage 1: Create a self signed SSL certificate
 FROM alpine:latest AS certs
@@ -10,7 +10,7 @@ RUN openssl req -new -newkey rsa:2048 -days 365 -nodes -x509 \
     -subj "/C=US/ST=State/L=City/O=Organization/CN=localhost" \
     -keyout server.key -out server.crt
 
-# Stage 2: Build the Go application
+# Stage 2: Build the Node application
 FROM node:16
 WORKDIR /app
 

docker-compose.yml

@@ -56,8 +56,22 @@ services:
       REDIS_HOST: redis
       PRODUCTS_SERVICE_API: https://products-service:7002
     depends_on:
+      - products-service
       - redis
 
+  checkout-service:
+    build:
+      dockerfile: build/checkout.Dockerfile
+    restart: unless-stopped
+    platform: linux/amd64
+    command: ["node", "index.js"]
+    ports:
+      - "7005:7005"
+    environment:
+      CART_SERVICE_API: https://cart-service:7004
+    depends_on:
+      - cart-service
+
   postgres:
     image: postgres:14
     restart: unless-stopped

services/checkout/index.js

@@ -8,7 +8,7 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const fetch = require('node-fetch');
 
-const CART_SERVICE_API = process.env.NEWSLETTER_SERVICE_API || 'https://localhost:7003';
+const CART_SERVICE_API = process.env.CART_SERVICE_API || 'https://localhost:7004';
 
 // Initialize the app and port
 const app = express();
@@ -27,19 +27,27 @@ app.post('/process', async (req, res) => {
   }
 
   // Fetch the cart items from the cart service
-  const response = await fetch(`${CART_SERVICE_API}/?user_id=${user_id}`,{method: 'GET'});
-  console.log(response);
-
-  // try {
-  //   // Create a new subscriber in the database
-  //   await Subscriber.create({ email });
-  //   return res.status(201).json({ message: 'Subscribed successfully' });
-  // } catch (error) {
-  //   if (error.name === 'SequelizeUniqueConstraintError') {
-  //     return res.status(201).json({ message: 'Subscribed successfully' });
-  //   }
-  //   return res.status(500).json({ error: 'Failed to subscribe' });
-  // }
+  let response = await fetch(`${CART_SERVICE_API}/?user_id=${user_id}`,{method: 'GET'});
+  if (!response.ok) {
+    return res.status(500).json({ error: 'Failed to fetch cart items' });
+  }
+  const cartStatus = await response.json();
+
+  // Process the payment
+  const body = { customer, address, payment, total: cartStatus.total }
+  response = await fetch(`https://otterize.com`,{
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: {'Content-Type': 'application/json'}
+  });
+
+  // Empty the cart after checkout
+  response = await fetch(`${CART_SERVICE_API}/?user_id=${user_id}`,{method: 'DELETE'});
+  if (!response.ok) {
+    return res.status(500).json({ error: 'Failed to empty the cart' });
+  }
+
+  return res.status(200).json({ message: 'Checked out' });
 });
 
 // Certificate paths

services/frontend/routes/checkout.py

@@ -1,6 +1,6 @@
 import os
 import requests
-from fastapi import APIRouter, Form, Depends
+from fastapi import APIRouter, Form, Depends, Request
 from fastapi.responses import HTMLResponse
 from fastapi.templating import Jinja2Templates
 
@@ -13,18 +13,33 @@
 templates = Jinja2Templates(directory="templates")
 
 
-@router.post("/process", tags=["chekcout"], response_class=HTMLResponse)
+@router.post("/process", tags=["checkout"], response_class=HTMLResponse)
 async def process_checkout(
+    request: Request,
     email: str = Form(...),
+    card: str = Form(...),
+    year: str = Form(...),
+    month: str = Form(...),
+    cvv: str = Form(...),
     session: SessionData = Depends(get_session)
 ):
     api_resp = requests.post(url=f'{CHECKOUT_SERVICE_API}/process/?user_id={session.email}', verify=False, json={
-        "email": email
+        "email": email,
+        "payment": {
+            "card": card,
+            "year": year,
+            "month": month,
+            "cvv": cvv
+        }
     })
     if api_resp.status_code == 200:
-        return HTMLResponse(status_code=200, content="Successfully subscribed to newsletter!")
+        return templates.TemplateResponse(
+            "partials/checkout_success.html",
+            {"request": request},
+            headers={"HX-Trigger": "cartChanged"}
+        )
 
     return HTMLResponse(
         status_code=api_resp.status_code,
-        content="Could not subscribe. Please try again later."
+        content="Could not complete checkout. Please try again later."
     )

services/frontend/routes/views.py

@@ -14,8 +14,11 @@ async def get_shop_page(request: Request):
 
 
 @router.get("/cart", response_class=HTMLResponse, dependencies=[Depends(get_session)])
-async def get_cart_page(request: Request):
-    return templates.TemplateResponse("pages/cart.html", {"request": request})
+async def get_cart_page(request: Request, session=Depends(get_session)):
+    return templates.TemplateResponse("pages/cart.html", {
+        "request": request,
+        "email": session.email
+    })
 
 
 @router.get("/login", response_class=HTMLResponse)

services/frontend/server.py

@@ -8,6 +8,7 @@
 from routes.cart import router as cart_router
 from routes.users import router as users_router
 from routes.products import router as products_router
+from routes.checkout import router as checkout_router
 from routes.newsletter import router as newsletter_router
 
 app = FastAPI()
@@ -36,6 +37,7 @@ async def validation_exception_handler(request, exc):
 app.include_router(cart_router, prefix="/api/cart", tags=["cart"])
 app.include_router(users_router, prefix="/api/users", tags=["users"])
 app.include_router(products_router, prefix="/api/products", tags=["products"])
+app.include_router(checkout_router, prefix="/api/checkout", tags=["checkout"])
 app.include_router(newsletter_router, prefix="/api/newsletter", tags=["newsletter"])
 
 

services/frontend/static/app.css

@@ -48,11 +48,13 @@ label span {
 label input {
   background: unset;
   width: 100%;
-  padding: 12px 20px;
+  padding: 12px 16px;
   border: 1px solid #dcdcdc;
   font-size: 14px;
   box-sizing: border-box;
   border-radius: 4px;
+  color: var(--text-color);
+  font-weight: 300;
 }
 
 label textarea {

services/frontend/templates/base/app-layout.html

@@ -18,7 +18,7 @@
     </head>
 
     <body>
-        <div class="app">
+        <div class="app" id="#app" hx-ext="response-targets">
             {% include "partials/header.html" %}
             {% block content %}{% endblock %}
             {% include "partials/footer.html" %}

services/frontend/templates/pages/cart.html

@@ -8,24 +8,24 @@
     <h1> Checkout </h1>
 </div>
 
-<div class="cart">
-    <form class="shipping">
+<div class="cart" id="cart">
+    <form class="shipping" hx-post="{{ url_for('process_checkout') }}" hx-target="#cart" hx-swap="show:#app:top" hx-indicator="#loader">
         <div class="details-block">
             <h3> Customer Information </h3>
 
             <label for="email">
                 <span> Email </span>
-                <input type="email" id="email" name="email" required>
+                <input type="email" id="email" name="email" value="{{ email }}" required>
             </label>
 
             <div style="display: flex; flex-direction: row; gap: 16px;">
                 <label for="first_name">
                     <span> First Name </span>
-                    <input type="text" id="first_name" name="first_name" required>
+                    <input type="text" id="first_name" name="first_name">
                 </label>
                 <label for="last_name">
                     <span> Last Name </span>
-                    <input type="text" id="last_name" name="last_name" required>
+                    <input type="text" id="last_name" name="last_name">
                 </label>
             </div>
         </div>
@@ -35,29 +35,29 @@ <h3> Shipping Address </h3>
 
             <label for="company_name">
                 <span> Company Name </span>
-                <input type="text" id="company_name" name="company_name">
+                <input type="text" id="company_name" name="company_name" value="Otterize">
             </label>
 
             <div style="display: flex; flex-direction: row; gap: 16px;">
                 <label for="country">
                     <span> Country </span>
-                    <input type="text" id="country" name="country" required>
+                    <input type="text" id="country" name="country" value="United States">
                 </label>
 
                 <label for="city">
                     <span> City </span>
-                    <input type="text" id="city" name="city" required>
+                    <input type="text" id="city" name="city" value="New York" required>
                 </label>
 
                 <label for="zip">
                     <span> Zip </span>
-                    <input type="text" id="zip" name="zip" required>
+                    <input type="text" id="zip" name="zip" value="10011" required>
                 </label>
             </div>
 
             <label for="address">
                 <span> Street Address </span>
-                <input type="text" id="address" name="address" required>
+                <input type="text" id="address" name="address" value="47 W 13th St, New York, NY 10011, USA" required>
             </label>
         </div>
 
@@ -66,28 +66,35 @@ <h3> Payment Method </h3>
 
             <label for="card">
                 <span> Credit Card Number </span>
-                <input type="text" id="card" name="card" required>
+                <input type="text" id="card" name="card" value="4111 1111 1111 1111" required>
             </label>
 
             <div style="display: flex; flex-direction: row; gap: 16px;">
                 <label for="month">
                     <span> Month </span>
-                    <input type="text" id="month" name="month" required>
+                    <input type="text" id="month" name="month" value="12" required>
                 </label>
 
                 <label for="year">
                     <span> Year </span>
-                    <input type="text" id="year" name="year" required>
+                    <input type="text" id="year" name="year" value="2030" required>
                 </label>
 
-                <label for="zip">
+                <label for="cvv">
                     <span> CVV </span>
-                    <input type="text" id="cvv" name="cvv" required>
+                    <input type="text" id="cvv" name="cvv" value="111" required>
                 </label>
             </div>
         </div>
 
-        <button> Place order </button>
+        <button id="loader">
+            <span> Place order </span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="shape-rendering: auto;" width="16" height="16">
+                <g data-idx="1" style="fill: #FFFFFF; stroke: none; transform: none; opacity: 1;">
+                    <circle stroke-dasharray="94.24777960769379 33.41592653589793" r="32" stroke-width="4" stroke="#FFFFFF" fill="none" cy="50" cx="50" data-idx="2" transform="matrix(-0.2486899197101593,0.9685831665992737,-0.9685831665992737,-0.2486899197101593,110.86365509033203,14.005337715148926)" style="opacity: 1;"></circle>
+                </g>
+            </svg>
+        </button>
     </form>
 
     <div class="summary" hx-get="{{ url_for('cart_summary') }}" hx-trigger="load, cartChanged from:body"></div>
@@ -151,6 +158,35 @@ <h3> Payment Method </h3>
     display: flex;
     flex-direction: column;
     width: 40%;
+    height: 50px;
+  }
+
+  #loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #loader svg {
+    display: none;
+    animation-name: spin;
+    animation-duration: 1000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+  #loader.htmx-request svg {
+    display: block;
+  }
+  #loader.htmx-request span {
+    display: none;
+  }
+
+  @keyframes spin {
+    from {
+      transform:rotate(0deg);
+    }
+    to {
+      transform:rotate(360deg);
+    }
   }
 </style>
 

services/frontend/templates/partials/cart_summary.html

@@ -43,6 +43,9 @@ <h2> {{ product.title }} </h2>
     margin-bottom: 0;
     border-bottom: unset;
   }
+  .cart-title a {
+    height: 16px;
+  }
 
   .item {
     display: flex;