Toolbox on dashboard page should have relevant node tools and add tooltip text to back button

eslint.config.mjs

@@ -23,6 +23,7 @@ const eslintConfig = [
       '@typescript-eslint': tseslint,
     },
     rules: {
+      'react/no-unescaped-entities': 'off',
       // Enforce file names
       'check-file/filename-naming-convention': [
         'error',

src/_components/dashboard-component/toolbox/toolbox.tsx

@@ -8,6 +8,7 @@ import FhsaCalculatorComponent from '@/_components/calculator-component/fhsa/fhs
 import AllocationCalculatorComponent from '@/_components/calculator-component/allocation/allocation-calculator-component';
 import links from '@/_lib/_data/constants/links.json';
 import { QuizLink } from '@/_lib/_data/types/types';
+import { toolboxShow } from '@/_lib/_services/tools-functions';
 type ToolboxProps = {
   historyArray: number[];
 };
@@ -33,25 +34,34 @@ export default function Toolbox({ historyArray }: ToolboxProps) {
 
   const currentNodeId = historyArray[historyArray.length - 1];
   const Links = links.links as QuizLink[];
+  const toolboxShowList = toolboxShow(currentNodeId);
 
   const currentActions = [];
 
-  if (currentNodeId == 4 || currentNodeId == 23) {
+  if (toolboxShowList.showTfsaCalculator) {
     currentActions.push({
       icon: <FaCalculator size={45} className="" />,
       name: 'TFSA Calculator',
       onClickModal: 'TFSA_modal',
     });
   }
 
-  if (currentNodeId == 14 || currentNodeId == 31) {
+  if (toolboxShowList.showFhsaCalculator) {
     currentActions.push({
       icon: <FaCalculator size={45} className="" />,
       name: 'FHSA Calculator',
       onClickModal: 'FHSA_modal',
     });
   }
 
+  if (toolboxShowList.showAllocationCalculator) {
+    currentActions.push({
+      icon: <FaBullseye size={45} className="" />,
+      name: 'Allocation Calculator',
+      onClickModal: 'Allocation_modal',
+    });
+  }
+
   for (let i = 0; i < Links.length; i++) {
     if (Links[i].id == currentNodeId) {
       currentActions.push({
@@ -81,13 +91,8 @@ export default function Toolbox({ historyArray }: ToolboxProps) {
     },
     {
       icon: <FaLink size={45} className="" />,
-      name: 'https://www.wealthsimple.com/en-ca/spend',
-      onClickLink: 'https://www.wealthsimple.com/en-ca/spend',
-    },
-    {
-      icon: <FaLink size={45} className="" />,
-      name: 'https://www.wealthsimple.com/en-ca/self-directed-investing',
-      onClickLink: 'https://www.wealthsimple.com/en-ca/self-directed-investing',
+      name: 'https://www.wealthsimple.com/en-ca/learn',
+      onClickLink: 'https://www.wealthsimple.com/en-ca/learn',
     },
   ];
 

src/_lib/_services/tools-functions.ts

@@ -0,0 +1,67 @@
+type ToolboxShowListType = {
+  showTfsaCalculator: boolean;
+  showFhsaCalculator: boolean;
+  showAllocationCalculator: boolean;
+  showLink: boolean;
+};
+
+function toolboxShow(
+  currentNodeId?: number,
+  currentNodeLink?: string
+): ToolboxShowListType {
+  if (currentNodeId === undefined) currentNodeId = 0;
+
+  const toolboxShowList: ToolboxShowListType = {
+    showTfsaCalculator: false,
+    showFhsaCalculator: false,
+    showAllocationCalculator: false,
+    showLink: false,
+  };
+
+  switch (currentNodeId) {
+    case 4:
+      toolboxShowList.showTfsaCalculator = true;
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    case 23:
+      toolboxShowList.showTfsaCalculator = true;
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    case 14:
+      toolboxShowList.showFhsaCalculator = true;
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    case 31:
+      toolboxShowList.showFhsaCalculator = true;
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    case 8:
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    case 17:
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    case 9:
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    case 28:
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    case 7:
+      toolboxShowList.showAllocationCalculator = true;
+      break;
+    default:
+      toolboxShowList.showAllocationCalculator = false;
+      toolboxShowList.showTfsaCalculator = false;
+      toolboxShowList.showFhsaCalculator = false;
+      break;
+  }
+
+  if (currentNodeLink !== undefined) {
+    toolboxShowList.showLink = true;
+  }
+
+  return toolboxShowList;
+}
+
+export { toolboxShow };

src/app/quiz/_components/quiz.tsx

@@ -30,6 +30,8 @@ import AllocationCalculatorButton from '@/_components/calculator-component/alloc
 import LinkButton from '@/_components/link-component/link-component';
 import NavToDashboard from '@/_components/nav-to-dashboard-button-component/nav-to-dashboard-button';
 import MoreInfoButtons from '@/_components/more-info-component/more-info-buttons';
+import { toolboxShow } from '@/_lib/_services/tools-functions';
+import { Tooltip } from 'react-tooltip';
 
 export default function QuizPage({ data }) {
   const router = useRouter();
@@ -153,48 +155,12 @@ export default function QuizPage({ data }) {
     setShowNextText(isNextAvailable(currentNode, currentTextIndex));
     setShowPrevText(isPrevAvailable(currentNode, currentTextIndex));
 
-    switch (currentNode.id) {
-      case 4:
-        setshowTfsaCalculator(true);
-        setShowAllocationCalculator(true);
-        break;
-      case 23:
-        setshowTfsaCalculator(true);
-        setShowAllocationCalculator(true);
-        break;
-      case 14:
-        setshowFhsaCalculator(true);
-        setShowAllocationCalculator(true);
-        break;
-      case 31:
-        setshowFhsaCalculator(true);
-        setShowAllocationCalculator(true);
-        break;
-      case 8:
-        setShowAllocationCalculator(true);
-        break;
-      case 17:
-        setShowAllocationCalculator(true);
-        break;
-      case 9:
-        setShowAllocationCalculator(true);
-        break;
-      case 28:
-        setShowAllocationCalculator(true);
-        break;
-      case 7:
-        setShowAllocationCalculator(true);
-        break;
-      default:
-        setShowAllocationCalculator(false);
-        setshowTfsaCalculator(false);
-        setshowFhsaCalculator(false);
-        break;
-    }
+    const toolboxShowList = toolboxShow(currentNode.id, currentNode.link);
 
-    if (currentNode.link) {
-      setShowLink(true);
-    } else setShowLink(false);
+    setShowAllocationCalculator(toolboxShowList.showAllocationCalculator);
+    setshowTfsaCalculator(toolboxShowList.showTfsaCalculator);
+    setshowFhsaCalculator(toolboxShowList.showFhsaCalculator);
+    setShowLink(toolboxShowList.showLink);
 
     if (historyState.loading) {
       setHistoryAsync();
@@ -255,7 +221,11 @@ export default function QuizPage({ data }) {
                 <IoIosArrowRoundBack
                   onClick={goBack}
                   className="text-blue h-8 w-8 hover:cursor-pointer"
+                  data-tooltip-id="backButton"
                 />
+                <Tooltip id="backButton" place="top">
+                  {`Back`}
+                </Tooltip>
               </div>
 
               {/* Calculator Buttons */}