20 creating popup js code

backend/Dockerfile

@@ -1,12 +1,14 @@
-FROM node:22-alpine3.20
+FROM node:22-alpine3.21
+
+RUN apk update && apk add bash && rm -rf /var/cache/apk/*
 
 RUN apk update && apk add bash && rm -rf /var/cache/apk/*
 
 WORKDIR /app
 
 COPY package*.json ./
 
-RUN npm install
+RUN rm -rf package-lock.json && npm install
 
 COPY . .
 

backend/package.json

@@ -28,7 +28,7 @@
     "helmet": "^7.1.0",
     "jsonwebtoken": "^9.0.2",
     "nodemailer": "^6.9.15",
-    "pg": "^8.11.5",
+    "pg": "^8.13.1",
     "sequelize": "^6.37.3"
   },
   "devDependencies": {

backend/public/scripts/popupRender.js

@@ -0,0 +1,52 @@
+const showPopup = (popupData) => {
+    if (!popupData || popupData.length === 0) {
+      console.warn('No popup data available');
+      return;
+    }
+
+    popupData.forEach(popup => {
+      // Create popup container
+      const popupContainer = document.createElement('div');
+      Object.assign(popupContainer.style, {
+        position: 'fixed',
+        bottom: '20px',
+        right: '20px',
+        backgroundColor: popup.headerBg || '#FFFFFF',
+        padding: '20px',
+        border: '1px solid #000',
+        zIndex: 1000,
+      });
+
+      // Create header
+      const header = document.createElement('h2');
+      header.textContent = popup.headerText;
+      header.style.color = popup.headerTextColor || '#000';
+      popupContainer.appendChild(header);
+
+      // Create content
+      const content = document.createElement('div');
+      content.innerHTML = popup.contentHtml;
+      Object.assign(content.style, {
+        color: popup.fontColor || '#000',
+        fontSize: popup.font || '14px',
+      });
+      popupContainer.appendChild(content);
+
+      // Create action button
+      const actionButton = document.createElement('button');
+      actionButton.textContent = popup.actionButtonText || 'Close';
+      Object.assign(actionButton.style, {
+        backgroundColor: popup.actionButtonColor || '#CCC',
+      });
+      actionButton.addEventListener('click', () => {
+        document.body.removeChild(popupContainer); // Remove popup when button is clicked
+      });
+      popupContainer.appendChild(actionButton);
+
+      // Append the popup to the document body
+      document.body.appendChild(popupContainer);
+    });
+  };
+
+  export default showPopup;
+

backend/public/snippets/popupSnippet.html

@@ -0,0 +1,30 @@
+<!-- Client-side HTML/JS Snippet to be integrated into their website -->
+<script>
+    (function() {
+      const apiId = 'YOUR_CLIENT_API_ID';
+      const apiUrl = `https://onboarding-demo.bluewavelabs.ca/api/onboard`;
+
+      fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ userId: apiId })
+      })
+      .then(response => response.json())
+      .then(data => {
+        const script = document.createElement('script');
+        script.src = `https://onboarding-demo.bluewavelabs.ca/api/scripts/popupRenderer.js?apiId=${apiId}`;
+        script.type = 'module';
+        script.onload = () => {
+          import(`https://onboarding-demo.bluewavelabs.ca/api/scripts/popupRenderer.js?apiId=${apiId}`)
+            .then(module => {
+              module.default(data.popupData);
+            });
+        };
+        document.head.appendChild(script);
+      })
+      .catch(error => console.error('Error fetching onboarding data:', error));
+    })();
+  </script>
+

backend/src/controllers/onboard/bannerData.controller.js

@@ -0,0 +1,12 @@
+const bannerService = require("../service/banner.service.js");
+const getBannerData = async (req, res) => {
+  try {
+    const { userId } = req.body;
+    const bannerData = await bannerService.getBannerData(userId);
+    res.status(200).json(bannerData);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+};
+
+module.exports = { getBannerData };

backend/src/controllers/onboard/index.js

@@ -0,0 +1,7 @@
+module.exports = {
+    // bannerData: require('./bannerData.controller'),
+    popupData: require('./popupData.controller'),
+    // tourData: require('./tourData.controller'),
+    // hintData: require('./hintData.controller')
+  };
+

backend/src/controllers/onboard/popupData.controller.js

@@ -0,0 +1,13 @@
+const popupService = require('../../service/popup.service');
+
+const getPopupData = async (req, res) => {
+  try {
+    const { userId } = req.body;
+    const popupData = await popupService.getPopups(userId);
+    res.status(200).json(popupData);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+};
+
+module.exports = { getPopupData };

backend/src/controllers/onboard/tourData.controller.js

@@ -0,0 +1,13 @@
+const tourService = require('../service/tour.service');
+
+const getTourData = async (req, res) => {
+  try {
+    const { userId } = req.body;
+    const tourData = await tourService.getTourData(userId);
+    res.status(200).json(tourData);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+};
+
+module.exports = { getTourData };

backend/src/middleware/onboard.middleware.js

@@ -0,0 +1,35 @@
+const db = require('../models');
+const { v4: uuidv4 } = require('uuid');
+
+// Middleware to validate API ID
+const validateApiId = async (req, res, next) => {
+  const { apiId } = req.query;  // Assume API ID is sent in query params
+  if (!apiId) {
+    return res.status(400).json({ error: "API ID is required." });
+  }
+
+  try {
+    const user = await db.User.findOne({ where: { apiId } }); // API ID must be in User model
+    if (!user) {
+      return res.status(403).json({ error: "Invalid API ID." });
+    }
+
+    req.user = user;  // Attach the user to the request for future use
+    next();
+  } catch (error) {
+    return res.status(500).json({ error: "API ID validation failed." });
+  }
+};
+
+// Middleware to generate client ID for each session
+const generateClientId = (req, res, next) => {
+  if (!req.session.clientId) {
+    req.session.clientId = uuidv4();  // Generate new client ID and store in session
+  }
+  next();
+};
+
+module.exports = {
+  validateApiId,
+  generateClientId
+};

backend/src/routes/guide.routes.js

@@ -3,7 +3,7 @@ const guideController = require("../controllers/guide.controller.js");
 
 const router = express.Router();
 
-router.get("/get_guides_by_url", guideController.getGuidesByUrl);
+router.post("/get_guides_by_url", guideController.getGuidesByUrl);
 // router.get("/get_incomplete_guides_by_url", guideController.getIncompleteGuidesByUrl);
 
 module.exports = router;

backend/src/routes/onboard.routes.js

@@ -0,0 +1,15 @@
+const express = require("express");
+const { validateApiId, generateClientId } = require("../middleware/onboard.middleware");
+const onboardControllers = require("../controllers/onboard");
+
+const router = express.Router();
+
+router.use(validateApiId);
+router.use(generateClientId);
+
+// router.get("/banner", onboardControllers.bannerData.getBannerData);
+router.get("/popup", onboardControllers.popupData.getPopupData);
+// router.get("/tour", onboardControllers.tourData.getTourData);
+// router.get("/hint", onboardControllers.hintData.getHintData);
+
+module.exports = router;

backend/src/service/popup.service.js

@@ -55,6 +55,24 @@ class PopupService {
     }
   }
 
+  async getPopupByApiAndClientId(apiId, clientId) {
+    try {
+      return await Popup.findAll({
+        include: [
+          {
+            model: db.User,
+            as: "creator",
+            where: { apiId }
+          },
+        ],
+        where: { clientId },
+        order: [['createdAt', 'DESC']],
+      });
+    } catch (error) {
+      throw new Error("Error retrieving popups for the given API and Client ID");
+    }
+  }
+
   async getPopupByUrl(url) {
     try {
       return await Popup.findAll({ where: { url } });

frontend/Dockerfile

@@ -1,4 +1,6 @@
-FROM node:22-alpine3.20
+FROM node:22-alpine3.21
+
+RUN apk update && apk add bash && rm -rf /var/cache/apk/*
 
 RUN apk update && apk add bash && rm -rf /var/cache/apk/*
 
@@ -7,7 +9,6 @@ WORKDIR /app
 COPY package*.json ./
 
 RUN rm -rf package-lock.json && npm install
-RUN npm install formik
 
 COPY . .