Merge pull request #156 from bluewave-labs/feature/128-implement-hint…

…-page-frontend

Feature/128 implement hint page frontend

frontend/src/App.jsx

@@ -15,6 +15,8 @@ import LinksDefaultPage from "./scenes/links/LinksDefaultPage";
 import ToursDefaultPage from "./scenes/tours/ToursDefaultPage";
 import PopupDefaultPage from "./scenes/popup/PopupDefaultPage";
 import HintDefaultPage from "./scenes/hints/HintDefaultPage";
+import CreateHintPage from "./scenes/hints/CreateHintPage";
+import HintPage from "./scenes/hints/HintPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 
 function App() {
@@ -23,10 +25,13 @@ function App() {
   return (
     <>
       <Routes>
-        <Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} />
+        <Route
+          path="/"
+          element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}
+        />
         {/* <Route path="/home" element={<Private Component={Home} />} /> */}
         {/* <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />         */}
-        <Route path="/login" element={<LoginPage />} />        
+        <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<PasswordResetPage />} />
@@ -39,8 +44,10 @@ function App() {
         <Route path="/popup" element={<Private Component={PopupDefaultPage }/>} />
         <Route path="/link" element={<LinksDefaultPage />} />
         <Route path="/tour" element={<ToursDefaultPage />} />
-        <Route path="/hint" element={<HintDefaultPage />} />
-      </Routes>    
+        <Route path="/hint-default" element={<HintDefaultPage />} />
+        <Route path="/hint/create" element={<CreateHintPage />} />
+        <Route path="/hint" element={<HintPage />} />
+      </Routes>
     </>
   );
 }

frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.css

@@ -0,0 +1,18 @@
+.hint-appearance-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.hint-state-name {
+  margin-top: 1.5rem;
+  margin-bottom: 0;
+  font-weight: 400;
+  font-size: 13px;
+}
+
+.hint-appearance-color {
+  display: flex;
+  align-items: center;
+}

frontend/src/components/HintPageComponents/HintLeftAppearance/HintLeftAppearance.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import ColorTextField from "../../ColorTextField/ColorTextField";
+import "./HintLeftAppearance.css";
+
+const HintLeftAppearance = ({ data = [] }) => {
+  return (
+    <div className="hint-appearance-container">
+      {data.map(({ stateName, state, setState }) => (
+        <div key={stateName}>
+          <h2 className="hint-state-name">{stateName}</h2>
+          <div className="hint-appearance-color">
+            <ColorTextField value={state} onChange={setState} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default HintLeftAppearance;

frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.css

@@ -0,0 +1,14 @@
+.left-content-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+    gap: 5;
+    color: var(--main-text-color);
+}
+
+.hint-label {
+    font-weight: 400;
+    font-size: 13px;
+    margin-top: 1.5rem;
+}

frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import DropdownList from "../../DropdownList/DropdownList";
+import CustomTextField from "../../TextFieldComponents/CustomTextField/CustomTextField";
+import "./HintLeftContent.css";
+
+const HintLeftContent = ({ setLeftContentFormData, formData }) => {
+
+  const handleChange = (name) => (e) => {
+    setLeftContentFormData({ ...formData, [name]: e.target.value });
+  };
+
+  return (
+    <div className="left-content-container">
+      <h2 className="hint-label">Action</h2>
+      <DropdownList
+        actions={["No action", "Open a URL", "Open a URL in a new page"]}
+      />
+      <h2 className="hint-label" style={{ marginBottom: 0 }}>
+        Action button url (can be relative)
+      </h2>
+      <CustomTextField
+        TextFieldWidth="241px"
+        value={formData.actionButtonUrl}
+        onChange={handleChange("actionButtonUrl")}
+      />
+      <h2 className="hint-label" style={{ marginBottom: 0 }}>
+        Action button text
+      </h2>
+      <CustomTextField
+        TextFieldWidth="241px"
+        value={formData.actionButtonText}
+        onChange={handleChange("actionButtonText")}
+      />
+      <h2 className="hint-label" style={{ marginBottom: 0 }}>
+        Target Element
+      </h2>
+      <CustomTextField
+        TextFieldWidth="241px"
+        value={formData.targetElement}
+        onChange={handleChange("targetElement")}
+        helperText="Page element to attach tooltip to"
+      />
+      <h2 className="hint-label">Tooltip Placement</h2>
+      <DropdownList actions={["Top", "Right", "Bottom", "Left"]} />
+    </div>
+  );
+};
+
+export default HintLeftContent;

frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx

@@ -1,7 +1,7 @@
 import { React } from 'react';
 import PropTypes from 'prop-types';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
-import styles from './GuideTemplate.module.scss';
+//import styles from './GuideTemplate.module.scss';
 import classNames from 'classnames';
 import Button from '../../Button/Button';
 import { useNavigate } from 'react-router-dom';

frontend/src/scenes/hints/CreateHintPage.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
+import GuideTemplate from "../../templates/GuideTemplate/GuideTemplate";
+import RichTextEditor from "../../components/RichTextEditor/RichTextEditor";
+import HintLeftContent from "../../components/HintPageComponents/HintLeftContent/HintLeftContent";
+import HintLeftAppearance from "../../components/HintPageComponents/HintLeftAppearance/HintLeftAppearance";
+
+const HintPage = () => {
+  const [activeButton, setActiveButton] = useState(0);
+  const [leftContentFormData, setLeftContentFormData] = useState({
+    actionButtonUrl: "https//",
+    actionButtonText: "",
+    targetElement: ".element",
+  });
+
+  const handleButtonClick = (index) => {
+    setActiveButton(index);
+  };
+
+  const [headerBackgroundColor, setHeaderBackgroundColor] = useState("#F8F9F8");
+  const [headerColor, setHeaderColor] = useState("#101828");
+  const [textColor, setTextColor] = useState("#344054");
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState("#7F56D9");
+  const [buttonTextColor, setButtonTextColor] = useState("#FFFFFF");
+
+  const stateList = [
+    {
+      stateName: "Header Background Color",
+      state: headerBackgroundColor,
+      setState: setHeaderBackgroundColor,
+    },
+    {
+      stateName: "Header Color",
+      state: headerColor,
+      setState: setHeaderColor,
+    },
+    { stateName: "Text Color", state: textColor, setState: setTextColor },
+    {
+      stateName: "Button Background Color",
+      state: buttonBackgroundColor,
+      setState: setButtonBackgroundColor,
+    },
+    {
+      stateName: "Button Text Color",
+      state: buttonTextColor,
+      setState: setButtonTextColor,
+    },
+  ];
+
+  return (
+    <div>
+      <HomePageTemplate>
+        <GuideTemplate
+          title="New Hint"
+          activeButton={activeButton}
+          handleButtonClick={handleButtonClick}
+          rightContent={() => (
+            <RichTextEditor
+              previewBtnText={leftContentFormData.actionButtonText}
+              headerBackgroundColor={headerBackgroundColor}
+              headerColor={headerColor}
+              textColor={textColor}
+              buttonBackgroundColor={buttonBackgroundColor}
+              buttonTextColor={buttonTextColor}
+              sx={{
+                width: "100%",
+                maxWidth: "700px",
+                marginLeft: "2.5rem",
+                marginTop: "1rem",
+              }}
+            />
+          )}
+          leftContent={() => (
+            <HintLeftContent
+              formData={leftContentFormData}
+              setLeftContentFormData={setLeftContentFormData}
+            />
+          )}
+          leftAppearance={() => <HintLeftAppearance data={stateList} />}
+        />
+      </HomePageTemplate>
+    </div>
+  );
+};
+
+export default HintPage;

frontend/src/scenes/hints/HintDefaultPage.jsx

@@ -2,25 +2,28 @@ import CreateActivityButton from "../../components/Button/CreateActivityButton/C
 import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate"
 import { ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
 import ParagraphCSS from "../../components/ParagraphCSS/ParagraphCSS";
+import { useNavigate } from "react-router";
 
 const HintDefaultPage = () => {
-    const style = {
-        "display": "flex",
-        "flex-direction": "column",
-        "width": "100%",
-        "justify-content": "center",
-        "align-items": "center",
-    }
-    return (
-        <HomePageTemplate>
-            <div style={style}>
-                <ParagraphCSS />
-                <CreateActivityButton type={ACTIVITY_TYPES.HINTS} />
-            </div>
-
-        </HomePageTemplate>
-    )
-}
-
-export default HintDefaultPage
+  const navigate = useNavigate();
+  const style = {
+    display: "flex",
+    "flex-direction": "column",
+    width: "100%",
+    "justify-content": "center",
+    "align-items": "center",
+  };
+  return (
+    <HomePageTemplate>
+      <div style={style}>
+        <ParagraphCSS />
+        <CreateActivityButton
+          type={ACTIVITY_TYPES.HINTS}
+          onClick={() => navigate("/hint/create")}
+        />
+      </div>
+    </HomePageTemplate>
+  );
+};
 
+export default HintDefaultPage;

frontend/src/scenes/hints/HintPage.css

@@ -0,0 +1,34 @@
+.hint-page-container {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  grid-gap: 20px;
+  width: 100%;
+  padding: 2% 3%;
+}
+
+.hint-page-title {
+  margin: 0;
+  height: 34px;
+}
+
+.hint-info-title,
+.hint-page-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--main-purple);
+}
+
+.hint-right-content {
+  width: 292px;
+  height: 510px;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+}
+
+.hint-info {
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--grey-border);
+}

frontend/src/scenes/hints/HintPage.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import Button from "../../components/Button/Button";
+import List from "../../components/List/List";
+import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
+import HintDefaultPage from "./HintDefaultPage";
+import "./HintPage.css";
+import { useNavigate } from "react-router-dom";
+
+const hintsData = [
+  {
+    idItem: 184293,
+    title: "Main dashboard - feature hint",
+    text: "This pops up the first time a user logs in to the dashboard.",
+  },
+  {
+    idItem: 194294,
+    title: "Main dashboard - password hint",
+    text: "This pops up the first time a user logs in to the dashboard.",
+  },
+];
+
+const HintPage = () => {
+  const navigate = useNavigate();
+  if (hintsData.length === 0) {
+    return <HintDefaultPage />;
+  } else {
+    return (
+      <HomePageTemplate>
+        <div className="hint-page-container">
+          <div className="hint-page-left-section">
+            <h2 className="hint-page-title" style={{ marginBottom: "16px" }}>All Hints</h2>
+            <List items={hintsData} onSelectItem={() => { }} />
+          </div>
+          <div className="hint-right-content">
+            <Button
+              style={{ height: "34px", width: "172px" }}
+              text="Create a new hint"
+              variant="contained"
+              onClick={() => navigate("/hint-default")}
+            />
+            <div className="hint-info">
+              <h2 className="hint-info-title">What is a hint?</h2>
+              <p>
+                Hints are like friendly reminders in an app, giving tips
+                without stopping what you are doing. They show up at small
+                bubbles near buttons or menus, guiding you on how to use
+                things.
+              </p>
+              <p>
+                One good thing about hints is they help you use the app
+                better by giving tips when you need them. For example, they
+                can show clear instructions when you're trying something
+                new, so you don't get stuck or confused.
+              </p>
+              <p>
+                Hints work for everyone, from beginners to experts. They
+                give basic tips for people just starting out and clever
+                tricks for those who know the app well. This makes the app
+                easier for everyone to use.
+              </p>
+            </div>
+          </div>
+        </div>
+      </HomePageTemplate>
+    );
+  }
+};
+
+export default HintPage;