feature/ Surprise challenge #2 - AI pun button added and basic suggestion integrated in the plans

src/router/user.js

@@ -1,5 +1,6 @@
 const getRates = require("../util/exchangeRate");
 const { calculatePlanProgress, updatePlanProgressInDB } = require("../util/calculations");
+const suggestions = require("../util/suggestions");
 const status = require("../util/statuses");
 const ObjectId = require('mongodb').ObjectId;
 const session = require("express-session");
@@ -153,6 +154,7 @@ module.exports = (middleware, users, plans, assets) => {
                 plan: plan, // This plan object will have the progress from the database
                 geoData: req.session.geoData,
                 assets: userAssets,
+                suggestions: await suggestions.generateSuggestions(),
             });
 
         } catch (err) {
@@ -216,6 +218,11 @@ module.exports = (middleware, users, plans, assets) => {
         }
     });
 
+    router.get('/pun', async (req, res) => {
+        const pun = await suggestions.generatePun();
+        return res.status(status.Ok).json({ pun });
+    });
+
     router.get('/more', (req, res) => {
         res.render('more', {
             user: req.session.user,

src/util/suggestions.js

@@ -0,0 +1,24 @@
+const { GoogleGenAI } = require("@google/genai");
+
+const ai = new GoogleGenAI({ apiKey: process.env.GOOGLE_API_KEY });
+
+async function generatePun() {
+  const response = await ai.models.generateContent({
+    model: "gemini-2.0-flash",
+    contents: "Return a funny pun about investments, answer the pun only, no additional text.",
+  });
+  return response.text;
+}
+
+async function generateSuggestions() {
+    const response = await ai.models.generateContent({
+      model: "gemini-2.0-flash",
+      contents: "Return a mock investment suggestion 3-5 lines only",
+    });
+    return response.text;
+}
+
+module.exports = {
+    generatePun,
+    generateSuggestions
+};

src/views/partials/footer.ejs

@@ -1,3 +1,9 @@
+<div data-dial-init class="fixed end-6 bottom-20 group">
+    <button type="button" id="punButton" class="flex items-center justify-center text-white bg-blue-700 rounded-full w-14 h-14 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
+        <span class="sr-only">Get a Pun</span>
+    </button>
+</div>
 
 <footer class="mt-16">
     <div class="fixed bottom-0 left-0 z-50 hidden lg:block w-full h-16 bg-gray-800 border-t border-gray-700 p-6 text-center text-gray-400 text-sm">
@@ -8,6 +14,20 @@
 </footer>
 
 <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<script>
+    const punButton = document.getElementById("punButton");
+    punButton.addEventListener("click", () => {
+        fetch("/pun")
+            .then(response => response.json())
+            .then(data => {
+                Swal.fire('Here is a pun!', data.pun, 'success');
+            })
+            .catch(error => {
+                console.error("Error fetching pun:", error);
+                Swal.fire('Error fetching pun', 'Please try again later', 'error');
+            });
+    });
+</script>
 </body>
 </html>

src/views/planDetail.ejs

@@ -62,7 +62,7 @@
             
             <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg dark:bg-gray-700 dark:border-gray-600">
                 <p class="text-sm text-blue-700 dark:text-blue-300">
-                    USE YOUR HEAD MOCK
+                    <%= suggestions %>
                 </p>
             </div>
         </div>