From 044c8edf7dc1ef34c1ef98be61f1c9b677cf16ca Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 12 Mar 2024 15:50:47 +0100
Subject: [PATCH] Suggest task flow pt1

---
 .../Breadcrumb/CustomBreadcrumb.jsx           | 37 +++++------
 src/components/FamilyAcc/FamilyActivities.jsx | 23 +++++--
 .../FamilyPopout/AssignTaskPopout.jsx         | 42 +++++++------
 .../FamilyAcc/FamilySettings/index.jsx        | 44 ++++++++++---
 src/components/FamilyAcc/FamilyTableNew.jsx   |  2 +-
 .../FamilyAcc/Tabs/FamilyNewWaitlist.jsx      |  2 +-
 src/components/FamilyAcc/index.jsx            |  2 +-
 src/components/FamilyPopup/SuggestTask.jsx    | 61 +++++++++++++------
 8 files changed, 140 insertions(+), 73 deletions(-)

diff --git a/src/components/Breadcrumb/CustomBreadcrumb.jsx b/src/components/Breadcrumb/CustomBreadcrumb.jsx
index 9a8be78..1d2027b 100644
--- a/src/components/Breadcrumb/CustomBreadcrumb.jsx
+++ b/src/components/Breadcrumb/CustomBreadcrumb.jsx
@@ -1,22 +1,25 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
+import React from "react";
+import { Link } from "react-router-dom";
 
-export default function CustomBreadcrumb({title, breadcrumb}) {
+export default function CustomBreadcrumb({ title, breadcrumb }) {
   return (
     <div className="">
-        <h3 className="text-26 font-bold text-dark-gray dark:text-white">{title}</h3>
-        <nav aria-label="breadcrumb" className='text-base text-dark-gray dark:text-white flex items-center'>
-            {breadcrumb.map((value, index) => (
-                <p key={index}>
-                    <Link className={`${value.active ? 'opacity-60' : ''}`} to={value.link}>{value.title}</Link>
-                    {index != breadcrumb.length - 1 ?
-                    <span className='px-1'>/</span>
-                    :
-                    null
-                    }
-                </p>
-            ))}
-        </nav>
+      <h3 className="text-26 font-bold text-dark-gray dark:text-white">
+        {title}
+      </h3>
+      <nav
+        aria-label="breadcrumb"
+        className="text-base text-dark-gray dark:text-white flex items-center"
+      >
+        {breadcrumb.map((value, index) => (
+          <React.Fragment key={index}>
+            <Link className={value.active ? "opacity-60" : ""} to={value.link}>
+              {value.title}
+            </Link>
+            {index !== breadcrumb.length - 1 && <span className="px-1">\</span>}
+          </React.Fragment>
+        ))}
+      </nav>
     </div>
-  )
+  );
 }
diff --git a/src/components/FamilyAcc/FamilyActivities.jsx b/src/components/FamilyAcc/FamilyActivities.jsx
index 57e077c..ac353aa 100644
--- a/src/components/FamilyAcc/FamilyActivities.jsx
+++ b/src/components/FamilyAcc/FamilyActivities.jsx
@@ -1,12 +1,11 @@
-import React, { Suspense, useMemo, useState } from "react";
+import React, { Suspense } from "react";
 import { Link } from "react-router-dom";
-import usersService from "../../services/UsersService";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyTableNew from "./FamilyTableNew";
 
 export default function FamilyActivities() {
-
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -15,9 +14,21 @@ export default function FamilyActivities() {
           {/* heading */}
           <div className="sm:flex justify-between items-center mb-6">
             <div className="mb-5 sm:mb-0">
-              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                <span className={``}>Tasks & Chores</span>
-              </h1>
+              <CustomBreadcrumb
+                title={"Tasks & Chores"}
+                breadcrumb={[
+                  { link: "/", title: "Home" },
+                  {
+                    link: "/acc-family",
+                    title: "Family Account",
+                  },
+                  {
+                    link: "/acc-family/activities",
+                    title: "Tasks & Chores",
+                    active: true,
+                  },
+                ]}
+              />
             </div>
             <Link
               className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
index a069c63..274baf2 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx
@@ -188,31 +188,35 @@ const AssignTaskPopout = React.memo(
         });
     };
 
+    console.log(details);
+
     return (
       <>
         <ModalCom action={action} situation={situation}>
           <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
             <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide flex items-center">
-                Assign task to{" "}
-                {pathname === "/acc-family/activities" ? (
-                  <div className="w-[270px] h-[40px] ml-2">
-                    <select
-                      name=""
-                      id=""
-                      className="text-black/70 bg-transparent px-2 transition-all cursor-pointer focus:outline-none border border-gray-200 rounded-lg w-full h-full py-1"
-                      onChange={handleFamChange}
-                      value={selectedFamilyUid}
-                    >
-                      <option value="" disabled selected>
-                        Select a member
-                      </option>
-                      {familyList}
-                    </select>
-                  </div>
-                ) : (
-                  <>{familyDetailsData?.firstname || details?.firstName}</>
-                )}
+                <>
+                  Assign task to{" "}
+                  {pathname === "/acc-family/activities" ? (
+                    <div className="w-[270px] h-[40px] ml-2">
+                      <select
+                        name=""
+                        id=""
+                        className="text-black/70 bg-transparent px-2 transition-all cursor-pointer focus:outline-none border border-gray-200 rounded-lg w-full h-full py-1"
+                        onChange={handleFamChange}
+                        value={selectedFamilyUid}
+                      >
+                        <option value="" disabled selected>
+                          Select a member
+                        </option>
+                        {familyList}
+                      </select>
+                    </div>
+                  ) : (
+                    <>{familyDetailsData?.firstname || details?.firstName}</>
+                  )}
+                </>
               </h1>
               <button
                 type="button"
diff --git a/src/components/FamilyAcc/FamilySettings/index.jsx b/src/components/FamilyAcc/FamilySettings/index.jsx
index 252f377..40d3bac 100644
--- a/src/components/FamilyAcc/FamilySettings/index.jsx
+++ b/src/components/FamilyAcc/FamilySettings/index.jsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
+import CustomBreadcrumb from "../../Breadcrumb/CustomBreadcrumb";
 import Icons from "../../Helpers/Icons";
 import Layout from "../../Partials/Layout";
 import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
 
 const FamilySettings = () => {
-  let {state} = useLocation()
+  let { state } = useLocation();
   const tabs = [
     {
       id: 1,
@@ -58,15 +59,42 @@ const FamilySettings = () => {
           {/* heading */}
           <div className="sm:flex justify-between items-center mb-6">
             <div className="mb-5 sm:mb-0">
-              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
-                <span className={``}>Family Settings</span>
-              </h1>
+              <CustomBreadcrumb
+                title={"Family Settings"}
+                breadcrumb={[
+                  { link: "/", title: "Home" },
+                  {
+                    link: "/acc-family",
+                    title: "Family Account",
+                  },
+                  {
+                    link: "/familysettings",
+                    title: "Family Settings",
+                    active: true,
+                  },
+                ]}
+              />
             </div>
-            <Link to="/acc-family" className="flex gap-2 items-center text-dark-gray dark:text-white">
-              <svg className="w-5 h-5 rtl:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18" />
+            <Link
+              className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
+              to="/acc-family"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-4 h-4"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
+                />
               </svg>
-              Family
+
+              <span>Family</span>
             </Link>
           </div>
 
diff --git a/src/components/FamilyAcc/FamilyTableNew.jsx b/src/components/FamilyAcc/FamilyTableNew.jsx
index 0c3040c..a33fb9e 100644
--- a/src/components/FamilyAcc/FamilyTableNew.jsx
+++ b/src/components/FamilyAcc/FamilyTableNew.jsx
@@ -1,9 +1,9 @@
 import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
 import { apiConst } from "../../lib/apiConst";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
-import { useLocation } from "react-router-dom";
 
 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
diff --git a/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx
index 65428d1..372684a 100644
--- a/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx
+++ b/src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx
@@ -44,7 +44,7 @@ const FamilyNewWaitlist = ({
     setContinueTaskPopup({ show: false, data: {} });
   };
 
-  // console.log("Check this >>",currentTask)
+  console.log("Check this >>",continueTaskPopup)
 
   return (
     <div
diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx
index 047a886..15e1657 100644
--- a/src/components/FamilyAcc/index.jsx
+++ b/src/components/FamilyAcc/index.jsx
@@ -146,7 +146,7 @@ export default function FamilyAcc() {
                     breadcrumb={
                       [
                         { link: "/", title: "Home" },
-                        { link: "/acc-family", title: "Family-acc", active: true},
+                        { link: "/acc-family", title: "Family Account", active: true},
                       ]
                     }
                     />
diff --git a/src/components/FamilyPopup/SuggestTask.jsx b/src/components/FamilyPopup/SuggestTask.jsx
index a78937b..732a95f 100644
--- a/src/components/FamilyPopup/SuggestTask.jsx
+++ b/src/components/FamilyPopup/SuggestTask.jsx
@@ -2,7 +2,6 @@ import { Form, Formik } from "formik";
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
 import usersService from "../../services/UsersService";
-import Icons from "../Helpers/Icons";
 import InputCom from "../Helpers/Inputs/InputCom";
 import ModalCom from "../Helpers/ModalCom";
 
@@ -52,22 +51,46 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
 
   const handleParentSuggestion = (values) => {
     if (suggestedNextStep === "Send Task") {
-      let firstName = state?.firstname;
-      let family_uid = state?.family_uid;
-      continuePopupData({ ...details, firstName, family_uid });
+      let firstname = state?.firstname || details?.firstname;
+      let family_uid = state?.family_uid || details?.family_uid;
+      continuePopupData({
+        ...details,
+        firstname,
+        family_uid,
+      });
     }
     onClose();
   };
 
+  const isActivitiesPage = pathname === "/acc-family/activities";
+  const isManageFamilyPage = pathname === "/manage-family";
+
+  const getButtonText = () => {
+    if (isActivitiesPage) {
+      return suggestedNextStep === "Send Task" ? "Continue" : "Complete";
+    } else {
+      if (!isManageFamilyPage) {
+        if (submitTask.loading) return "Submitting Task";
+        if (submitTask.state === "success") return "Task Submitted";
+        if (submitTask.state === "bad") return "An Error Occurred";
+        return "Send to Parents";
+      } else {
+        return suggestedNextStep === "Send Task" ? "Continue" : "Complete";
+      }
+    }
+  };
+
+  console.log(details);
+
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
-            {pathname === "/manage-family"
+            {isManageFamilyPage
               ? `${state?.firstname}'s Suggested Task`
-              : pathname === "/acc-family/activities"
-              ? "Suggested Task"
+              : isActivitiesPage
+              ? `${details?.firstname}'s Suggested Task`
               : "Suggest to Parent"}
           </h1>
           <button
@@ -99,10 +122,11 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
         <Formik
           initialValues={initialValues}
           onSubmit={
-            pathname !== "/manage-family" ||
-            pathname !== "/acc-family/activities"
-              ? handleSuggestedTask
-              : handleParentSuggestion
+            isActivitiesPage
+              ? handleParentSuggestion
+              : isManageFamilyPage
+              ? handleParentSuggestion
+              : handleSuggestedTask
           }
         >
           {(props) => {
@@ -252,18 +276,14 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                       disabled={props.isSubmitting}
                       className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out flex items-center"
                     >
-                      {pathname === "/acc-family/activities" ? (
+                      {/* {pathname === "/acc-family/activities" ? (
                         <>
-                          {submitTask.loading ? (
-                            "Sending..."
-                          ) : submitTask.state === "success" ? (
-                            "Completed"
-                          ) : submitTask.state === "bad" ? (
-                            "An Error Occurred"
-                          ) : (
+                          {suggestedNextStep === "Send Task" ? (
                             <>
                               Continue <Icons name="chevron-right" />
                             </>
+                          ) : (
+                            "Complete"
                           )}
                         </>
                       ) : (
@@ -290,7 +310,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                             </>
                           )}
                         </>
-                      )}
+                      )} */}
+                      {getButtonText()}
                     </button>
                   </div>
                 </div>