Merge pull request #260 from LL08-MathematicalModelling-dowell/fronte…

…nd-Norah addition of query search params and nps scale page
LL08-MathematicalModelling-dowell · Jun 3, 2024 · 496d580 · 496d580
2 parents 33097d3 + c63e32d
commit 496d580
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 9 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,7 +4,7 @@ import { FetchUserContextProvider } from './contexts/fetchUserContext';
 import Navbar from './components/Navbar';
 import { Outlet } from "react-router-dom";
 import {
-  useLocation,
+  useLocation, useParams
 } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import SideBar from './pages/SideBar';
@@ -14,8 +14,11 @@ function App() {
   const queryParams = new URLSearchParams(search);
   const publicLink = queryParams.get('scale_type');
   const location = useLocation();
+  const { slug } = useParams();
   const isHome = location.pathname === '/100035-DowellScale-Function//home';
-  const masterLink = location.pathname === '/100035-DowellScale-Function/home/master-link';
+  const masterLink = location.pathname === `/100035-DowellScale-Function/home/master-link`;
+  const scale = location.pathname === `/100035-DowellScale-Function/home/master-link/scale`;
+
   const [isSidebarVisible, setIsSidebarVisible] = useState(true);
 
   useEffect(() => {
@@ -31,11 +34,11 @@ function App() {
 
   return (
     <div>
-      {!publicLink &&  !masterLink && <Navbar />}
+      {!publicLink &&  (!masterLink && !scale)  && <Navbar />}
     <div className='flex'>
       <ToastContainer />
       <FetchUserContextProvider>
-      {!publicLink && !masterLink &&  <SideBar />}
+      {!publicLink && (!masterLink && !scale) &&  <SideBar />}
         <Outlet />
       </FetchUserContextProvider>
     </div>

diff --git a/src/main.jsx b/src/main.jsx
@@ -65,6 +65,7 @@ import {
   ScaleReportSettings,
   ReportAnalyis,
   Booth,
+  NpsScaleTest,
 } from './pages/scales/report';
 
 import {
@@ -119,10 +120,18 @@ const router = createBrowserRouter([
         path: `${basePath}/home/generate-report/:slug`,
         element: <GenerateReport />,
       },
+      {
+        path: `${basePath}/home/master-link/:slug`,
+        element: <Booth />,
+      },
       {
         path: `${basePath}/home/master-link`,
         element: <Booth />,
-      },  
+      },
+      {
+        path: `${basePath}/home/master-link/scale`,
+        element: <NpsScaleTest />,
+      },
       {
         path: `${basePath}/home/pc-scale`,
         element: <PairedScale />,

diff --git a/src/pages/scales/report/Booth.jsx b/src/pages/scales/report/Booth.jsx
@@ -1,13 +1,27 @@
 import React from 'react'
-import dowellLogo from '../../../assets/dowell-logo.png';
+import { useState, useEffect} from 'react';
+import { useSearchParams } from "react-router-dom";
 
 const Booth = () => {
+
+  const [boothInput, setBoothInput] = useState()
+  const [searchParams, setSearchParams] = useSearchParams({});
+  let currentUrlParams = new URLSearchParams(window.location.search);
+
+  useEffect(()=>{
+    setSearchParams({ scale_id: "665a8277d5d158ec8391aaf7" });
+  })
+
+  const handleGoButton = () =>{
+    console.log(boothInput)
+  }
   return (
     <div className='flex flex-col items-center mt-10 w-[320px] h-[550px] m-auto'>
       <img className='mt-10' src='https://cdn.discordapp.com/attachments/1108341894162952192/1247115439675277424/image.png?ex=665eda43&is=665d88c3&hm=f56e39dc3fdcc0568aaa30ee96283958693cb3909acc5dea18373633d5fc9f07&' alt='booth image'/>
       <h3 className='mt-[140px]'>Please enter your booth number</h3>
-      <input className='w-[150px] h-[30px] border-2 border-black mt-5' />
-      <button className='w-[70px] h-[30px] rounded-lg mt-[100px] bg-[#FEC39C]'>Go</button>
+      <input name='boothInput' value={boothInput} onChange={(e) =>setBoothInput(e.target.value)} type='number' className='w-[150px] h-[30px] border-2 border-black mt-5' />
+      <button className='w-[70px] h-[30px] rounded-lg mt-[100px] bg-[#FEC39C]'
+      onClick={handleGoButton}>Go</button>
     </div>
   )
 }

diff --git a/src/pages/scales/report/NpsScaleTest.jsx b/src/pages/scales/report/NpsScaleTest.jsx
@@ -0,0 +1,85 @@
+import React from 'react'
+import { useState, useEffect} from 'react';
+import { useSearchParams } from "react-router-dom";
+
+const NpsScaleTest = () => {
+
+  const [searchParams, setSearchParams] = useSearchParams({});
+  let currentUrlParams = new URLSearchParams(window.location.search);
+
+  useEffect(()=>{
+    setSearchParams({ scale_id: "665a8277d5d158ec8391aaf7", channel:"channel_1", instance: "instance_1" });
+  })
+  return (
+    <div className='flex flex-col justify-center items-center font-sans font-medium p-3 mt-5 text-base m-auto w-full'>
+      <p className="flex justify-center items-center font-sans font-medium p-3 mt-5 text-base">
+        How was your experience using our product? Please rate your experience below.
+      </p>
+
+      <div className="flex justify-center items-center gap-6 md:gap-12 mt-5">
+        <button
+          className="bg-[#129561] rounded-lg  w-[30px] h-[30px]  text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href ="https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=0"}
+        >
+          0
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg w-[30px] h-[30px]  text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href ="https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=1"}
+        >
+          1
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg w-[30px] h-[30px] text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href = "https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=2"}
+        >
+          2
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg w-[30px] h-[30px] text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href = "https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=2"}
+        >
+          4
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg w-[30px] h-[30px] text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href = "https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=2"}
+        >
+          5
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg w-[30px] h-[30px] text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href = "https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=2"}
+        >
+          6
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg  w-[30px] h-[30px] text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href = "https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=2"}
+        >
+          7
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg w-[30px] h-[30px] text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href = "https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=2"}
+        >
+          8
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg w-[30px] h-[30px] text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href = "https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=2"}
+        >
+          9
+        </button>
+        <button
+          className="bg-[#129561] rounded-lg w-[30px] h-[30px] text-base sm:font-medium cursor-pointer"
+          onClick={() => window.location.href = "https://100035.pythonanywhere.com/addons/create-response/v3/?user=True&scale_type=nps_lite&channel=channel_1&instance=instances_1&workspace_id=653637a4950d738c6249aa9a&username=CustomerSupport&scale_id=6656f055d57731003026715e&item=2"}
+        >
+          10
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default NpsScaleTest
diff --git a/src/pages/scales/report/index.js b/src/pages/scales/report/index.js
@@ -2,4 +2,5 @@
 export { default as Report } from './Report';
 export { default as ScaleReportSettings } from './ScaleReportSettings';
 export { default as ReportAnalyis } from './ReportAnalysis';
-export { default as Booth } from './Booth'
+export { default as Booth } from './Booth'
+export { default as NpsScaleTest } from './NpsScaleTest'