Fixed the issues discussed in the meeting

frontend/src/products/Hint/HintComponent.css

@@ -39,6 +39,11 @@
   line-height: 24px;
 }
 
+.preview-content  {
+  word-wrap: break-word; 
+  overflow-wrap: break-word; 
+}
+
 .preview-button-container {
   margin-top: 0.5rem;
   display: flex;

frontend/src/products/Popup/PopupComponent.module.css

@@ -10,6 +10,8 @@
 .popupContent {
   color: var(--second-text-color);
   font-size: var(--font-regular);
+  word-wrap: break-word; 
+  overflow-wrap: break-word; 
 }
 
 .centered {
@@ -59,17 +61,17 @@
 }
 
 .small {
-  min-width: 400px;
+  width: 400px;
   min-height: 250px;
 }
 
 .medium {
-  min-width: 500px;
+  width: 500px;
   min-height: 300px;
 }
 
 .large {
-  min-width: 700px;
+  width: 700px;
   min-height: 350px;
 }
 

frontend/src/scenes/dashboard/Dashboard.jsx

@@ -13,39 +13,39 @@ import BaseSkeleton from "./HomePageComponents/Skeletons/BaseSkeleton";
 const mapMetricName = (guideType) => {
   switch (guideType) {
     case "popup":
-      return "Popups views";
+      return "Popup views";
     case "hint":
-      return "Hints views";
+      return "Hint views";
     case "banner":
-      return "Banners views";
+      return "Banner views";
     case "link":
-      return "Links views";
+      return "Link views";
     case "tour":
-      return "Tours views";
+      return "Tour views";
     case "checklist":
-      return "Checklists views";
+      return "Checklist views";
     default:
       return "Unknown";
   }
 };
 
-const MAX_METRICS_DISPLAYED = 3;
-
 const Dashboard = ({ name }) => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
   const [metrics, setMetrics] = useState([]);
 
+  const metricNames = ['popup', 'banner', 'link']
+
   useEffect(() => {
     getStatistics().then((data) => {
       setMetrics(
         data
+          ?.filter((metric) => metricNames.includes(metric.guideType)) 
           ?.map((metric) => ({
             metricName: mapMetricName(metric.guideType),
             metricValue: metric.views,
             changeRate: metric.change,
           }))
-          ?.filter((_, i) => i < MAX_METRICS_DISPLAYED)
       );
       setIsLoading(false);
     });

frontend/src/scenes/progressSteps/ProgressSteps/ProgressSteps.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styles from './ProgressSteps.module.scss';
 import Step from './Step';
 

frontend/src/scenes/progressSteps/ProgressStepsMain.jsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import ProgressSteps from './ProgressSteps/ProgressSteps';
 import styles from './ProgressStepsMain.module.scss';
 import Button from '@components/Button/Button';
-import CheckboxHRM from '@components/Checkbox/CheckboxHRM';
 import TeamMembersList from './ProgressSteps/TeamMemberList/TeamMembersList';
 import { useNavigate } from "react-router-dom";
 import { setOrganisation } from '../../services/teamServices';
@@ -12,7 +11,6 @@ import { CircularProgress } from '@mui/material';
 
 const ProgressStepsMain = () => {
     const navigate = useNavigate();
-    const NUMBER_OF_STEPS = 4;
     const [step, setStep] = useState(1);
     const [teamMembersEmails, setTeamMembersEmails] = useState([]);
     const [organizationName, setOrganizationName] = useState('');
@@ -103,18 +101,6 @@ const ProgressStepsMain = () => {
         }
     ];
 
-    const increaseStep = () => {
-        if (step < NUMBER_OF_STEPS) {
-            setStep(step => step + 1);
-        }
-    }
-
-    const decreaseStep = () => {
-        if (step > 1) {
-            setStep(step => step - 1);
-        }
-    }
-
     const handleOrgNameEmpty = () => {
         if (!organizationName.trim()) {
             setOrgError(true);
@@ -209,13 +195,24 @@ const ProgressStepsMain = () => {
         )
     }
 
-    const pages = [firstPage, secondPage, thirdPage, fourthPage];
+    const pages = [firstPage, thirdPage, fourthPage]; //second page is removed
 
+    const increaseStep = () => {
+        if (step < pages.length) {
+            setStep(step => step + 1);
+        }
+    }
+
+    const decreaseStep = () => {
+        if (step > 1) {
+            setStep(step => step - 1);
+        }
+    }
     return (
         <div className={styles.container}>
             <div className={styles.skeleton}>
                 <h2>{content[step - 1].title}</h2>
-                <ProgressSteps stepData={NUMBER_OF_STEPS} completed={step} />
+                <ProgressSteps stepData={pages.length} completed={step} />
             </div>
             <div className={styles.content}>
                 <h3 dangerouslySetInnerHTML={{ __html: content[step - 1].explanation }} />

frontend/src/scenes/settings/CodeTab/CodeTab.jsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import styles from "./CodeTab.module.css";
 import CustomTextField from "@components/TextFieldComponents/CustomTextField/CustomTextField";
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import Button from "@components/Button/Button";
 import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined';
 import { emitToastError } from "../../../utils/guideHelper";
@@ -78,6 +77,32 @@ const CodeTab = () => {
         }
     };
 
+    const codeToCopy = `
+        <!-- Client-side HTML/JS Snippet to be integrated into their website -->
+        <script>
+            (function() {
+                const apiUrl = '${serverUrl}';
+
+                var s=document.createElement("script");
+                s.type="text/javascript";
+                s.async=false;
+                s.onerror=()=>{console.log("onboard not loaded");};
+                s.src = 'http://localhost:8082/main.js';
+                (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(s);
+            })();
+        </script>
+        `;
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(codeToCopy)
+            .then(() => {
+                toastEmitter.emit(TOAST_EMITTER_KEY, 'Code copied to clipboard');
+            })
+            .catch((err) => {
+                toastEmitter.emit(TOAST_EMITTER_KEY, err);
+            });
+    };
+
     return (
         <section className={styles.container}>
             <h2>API key management</h2>
@@ -100,26 +125,17 @@ const CodeTab = () => {
                 <p className={styles.content}>
                     Code snippet to copy in your web page between {"<head>"} and {"</head>"}. Make sure you edit the API URL.
                 </p>
-                <ContentCopyOutlinedIcon style={{ cursor: 'pointer', fontSize: '20px', color: 'var(--main-text-color)' }} />
+                <ContentCopyOutlinedIcon
+                    onClick={handleCopy}
+                    style={{
+                        cursor: 'pointer',
+                        fontSize: '20px',
+                        color: 'var(--main-text-color)',
+                    }}
+                    />
             </div>
 
-
-            <pre><code>
-                {`<!-- Client-side HTML/JS Snippet to be integrated into their website -->
-                    <script>
-                        (function() {
-                            const apiUrl = '${serverUrl}';
-
-                            var s=document.createElement("script");
-                            s.type="text/javascript";
-                            s.async=false;
-                            s.onerror=()=>{console.log("onboard not loaded");};
-                            s.src = 'http://localhost:8082/main.js';
-                            (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(s);
-                        })();
-                    </script>
-                `}
-            </code></pre>
+            <pre><code>{codeToCopy}</code></pre>
         </section>
     )
 }

frontend/src/utils/constants.js

@@ -1,9 +1,9 @@
 // API constants
 //local environment
-// export const API_BASE_URL = 'http://localhost:3000/api/';
+export const API_BASE_URL = 'http://localhost:3000/api/';
 
 //staging environment
-export const API_BASE_URL = 'https://onboarding-demo.bluewavelabs.ca/api/';
+// export const API_BASE_URL = 'https://onboarding-demo.bluewavelabs.ca/api/';
 // Other constants
 export const APP_TITLE = 'Bluewave Onboarding';
 export const SUPPORT_EMAIL = '[email protected]';