Merge branch 'suggested-task-page' of WrenchBoard/Users-Wrench into master

src/components/FamilyPopup/SuggestTask.jsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
 import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
+import {Form, Formik } from "formik";
 import InputCom from "../Helpers/Inputs/InputCom";
 import usersService from "../../services/UsersService";
+import Icons from "../Helpers/Icons";
 
 const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
 const SuggestTask = ({ details, onClose, situation }) => {
@@ -13,7 +14,12 @@ const SuggestTask = ({ details, onClose, situation }) => {
     msg: "",
     state: "",
   });
-  // default image
+  const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
+
+  const switchNextStep = (value) => {
+    setSuggestedNextStep(value);
+  };
+
   const selectedImage = details?.selectedImage || DEFAULT_IMAGE;
   const initialValues = {
     title: details?.title || "",
@@ -79,16 +85,19 @@ const SuggestTask = ({ details, onClose, situation }) => {
             </svg>
           </button>
         </div>
-        <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={pathname !== "/manage-family" && handleSubmit}
+        >
           {(props) => {
             return (
               <Form>
                 <div className="p-5 w-full bg-white rounded-md flex justify-between">
+                  {/* Image Section */}
                   <div className="p-4 w-full md:w-2/4 md:border-r-2">
                     <div
                       className="w-full h-[236px] p-6 bg-gray-400 rounded-xl overflow-hidden"
                       style={{
-                        // background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
                         background: `url(${selectedImage}) center / contain no-repeat`,
                       }}
                     ></div>
@@ -141,10 +150,10 @@ const SuggestTask = ({ details, onClose, situation }) => {
                       <textarea
                         id="description"
                         rows="5"
-                        className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] ${
+                        className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full ${
                           pathname === "/manage-family"
-                            ? "px-2"
+                            ? "px-2 h-[110px]"
-                            : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]"
+                            : "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] h-[130px]"
                         }`}
                         style={{ resize: "none" }}
                         name="description"
@@ -153,6 +162,48 @@ const SuggestTask = ({ details, onClose, situation }) => {
                         onBlur={props.handleBlur}
                       />
                     </div>
+
+                    {/* Radio buttons for family */}
+                    {pathname === "/manage-family" && (
+                      <div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
+                        <div id="my-radio-group" className="sr-only">
+                          Parent suggested next step
+                        </div>
+                        <div
+                          role="group"
+                          className="flex items-center justify-between py-2"
+                          aria-labelledby="parent-suggested-radio-group"
+                        >
+                          {[
+                            { title: "Send Task" },
+                            { title: "Duplicate" },
+                            { title: "Not Now" },
+                          ].map(({ title }, idx) => (
+                            <label key={idx} htmlFor="parent-suggested">
+                              <input
+                                type="radio"
+                                name="parent-suggested"
+                                value={title}
+                                checked={title == suggestedNextStep}
+                                onChange={switchNextStep}
+                                className={`transition duration-150 ease-in-out parent-suggest`}
+                              />
+                              <span
+                                className={`ml-1 ${
+                                  title == "Not Now"
+                                    ? "text-red-500"
+                                    : title == "Duplicate"
+                                    ? "text-purple"
+                                    : "text-black"
+                                } font-semibold`}
+                              >
+                                {title}
+                              </span>
+                            </label>
+                          ))}
+                        </div>
+                      </div>
+                    )}
                   </div>
                 </div>
                 <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
@@ -164,11 +215,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
                     >
                       <span className="text-gradient"> Cancel</span>
                     </button>
-                    {pathname !== "/manage-family" && (
+                    {pathname !== "/manage-family" ? (
                       <button
                         type="submit"
                         disabled={props.isSubmitting}
-                        className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+                        className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out"
                       >
                         {submitTask.loading
                           ? "Submitting Task"
@@ -178,6 +229,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
                           ? "An Error Occurred"
                           : "Send to Parents"}
                       </button>
+                    ) : (
+                      <button className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full flex items-center transition duration-150 ease-in-out">
+                        {suggestedNextStep == "Send Task" ? (
+                          <>
+                            Continue <Icons name="chevron-right" />
+                          </>
+                        ) : (
+                          "Complete"
+                        )}
+                      </button>
                     )}
                   </div>
                 </div>

src/components/Helpers/Icons.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import ATMCard from '../../assets/images/card.svg'
+import ATMCard from "../../assets/images/card.svg";
-import VisaCard from '../../assets/images/visa.svg'
+import VisaCard from "../../assets/images/visa.svg";
-import MasterCard from '../../assets/images/master.svg'
+import MasterCard from "../../assets/images/master.svg";
 
 export default function Icons({ name }) {
   return (
@@ -472,6 +472,21 @@ export default function Icons({ name }) {
         >
           <rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
         </svg>
+      ) : name === "chevron-right" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          className="w-4 h-4"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M8.25 4.5l7.5 7.5-7.5 7.5"
+          />
+        </svg>
       ) : name === "right-arrow" ? (
         <svg
           width="24"