Continue Suggested Task

2023-07-08 22:52:36 +01:00
parent 0cc70d66b3
commit eb01e35c75
4 changed files with 107 additions and 65 deletions
@@ -6,7 +6,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { NewTasks } from "./forms";

-function AssignTaskPopout({ action, situation, familyDetails }) {
+function AssignTaskPopout({ action, details, situation, familyDetails }) {
  const apiCall = new usersService();

  let [requestStatus, setRequestStatus] = useState({
@@ -17,7 +17,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {

  let [familyTask, setFamilyTask] = useState({ loading: true, data: [] });

-  let [taskType, setTaskType] = useState("select"); // SWITCHES BTW SELECT TASK AND NEW TASK
+  let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK

  let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK

@@ -34,14 +34,14 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
  // New Task
  const [formState, setFormState] = useState({
    // Initialize form state with desired fields
-    banner: "" || "default.jpg",
-    country: "" || "",
-    price: "" || "",
-    title: "" || "",
-    description: "" || "",
-    job_detail: "" || "",
-    timeline_days: "" || "",
-    category: [] || "",
+    banner: details?.banner || "default.jpg",
+    country: details?.country || "",
+    price: details?.price || "",
+    title: details?.title || "",
+    description: details?.description || "",
+    job_detail: details?.job_detail || "",
+    timeline_days: details?.timeline_days || "",
+    category: details?.category || "",
  });

  const assignFamilyTask = () => {
@@ -81,30 +81,28 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
        title,
      } = formState;

-      const requiredFields = [
+      const requiredFields = {
        banner,
-        category,
+        // category,
        country,
        description,
        job_detail,
        price,
        timeline_days,
        title,
-      ];
+      };

-      if (requiredFields.some((field) => !field)) {
-        const emptyField = requiredFields.find((field) => !field);
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: `${emptyField} Empty`,
-        });
-
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 3000);
-
-        return;
+      for (let field in requiredFields) {
+        if (requiredFields[field] == "") {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: `${field} is empty`,
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 3000);
+        }
      }

      reqData = {
@@ -117,7 +115,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
        timeline_days,
        title,
        assign_mode: 110055,
-        family_uid: familyDetails.uid,
+        family_uid: details?.family_uid || familyDetails?.uid,
      };
    }

@@ -156,6 +154,8 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
      });
  };

+  console.log("state >>--<<", familyDetails);
+
  useEffect(() => {
    const reqData = {
      limit: 30,
@@ -180,14 +180,17 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
      });
  }, []);

-  console.log("Trying to see form data >>", formState);
  return (
    <>
-      <ModalCom action={action} situation={situation} className="assign-task-popup">
+      <ModalCom
+        action={action}
+        situation={situation}
+        className="assign-task-popup"
+      >
        <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
          <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">
-              Assign task to {familyDetails?.firstname}
+              Assign task to {familyDetails?.firstname || details.firstName}
            </h1>
            <button
              type="button"
@@ -367,7 +370,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                {requestStatus.message != "" &&
                  (!requestStatus.status ? (
                    <div
-                      className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                      className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
                    >
                      {requestStatus.message}
                    </div>
@@ -380,6 +383,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                      </div>
                    )
                  ))}
+
                {/* End of error or success display */}
                <button
                  disabled={requestStatus.loading}
@@ -408,7 +412,9 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
                      onClick={assignFamilyTask}
                      className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
                    >
-                      {`Assign to ${familyDetails?.firstname}`}
+                      {`Assign to ${
+                        familyDetails?.firstname || details.firstName
+                      }`}
                    </button>
                  )}
                </div>
@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from "react";
 import usersService from "../../../../services/UsersService";
 import InputCom from "../../../Helpers/Inputs/InputCom";
-import debounce from "../../../../hooks/debounce";

-const DEFAULT_IMAGE = require("../../../../assets/images/taskbanners/default.jpg");
+// const DEFAULT_IMAGE =
 export default function NewTasks({ formState, setFormState }) {
  let [currency, setCurrency] = useState({
    loading: true,
@@ -11,6 +10,9 @@ export default function NewTasks({ formState, setFormState }) {
    data: null,
  });

+  const selectImage = require(`../../../../assets/images/taskbanners/${
+    formState.banner || "default.jpg"
+  }`);
  const ApiCall = new usersService();

  // FUNCTION TO GET Currency
@@ -47,7 +49,7 @@ export default function NewTasks({ formState, setFormState }) {
  }, []);

  return (
-    <form className="w-full flex justify-between items-center">
+    <form className="w-full flex justify-between items-start">
      <div className="flex flex-col gap-3 max-w-[77%]">
        {/* inputs starts here */}
        <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
@@ -207,7 +209,7 @@ export default function NewTasks({ formState, setFormState }) {
      <div className="max-w-[20%] w-full">
        <div className="h-32 w-full">
          <img
-            src={DEFAULT_IMAGE}
+            src={selectImage}
            alt="task_banner_img"
            className="w-full h-full object-contain"
          />
@@ -2,9 +2,14 @@ import { useState } from "react";
 import { handlePagingFunc, PaginatedList } from "../../Pagination";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import SuggestTask from "../../FamilyPopup/SuggestTask";
+import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";

 const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
  const [popUp, setPopUp] = useState({ show: false, data: {} });
+  const [continueTaskPopup, setContinueTaskPopup] = useState({
+    show: false,
+    data: {},
+  });

  let filteredFamilyData = familyData?.result_list?.filter(
    (data) => data?.family_uid === accountDetails?.family_uid
@@ -112,9 +117,23 @@ const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
          onClose={() => {
            setPopUp({ show: false, data: {} });
          }}
+          continuePopupData={(value) =>
+            setContinueTaskPopup({ show: true, data: { ...value } })
+          }
          situation={popUp.show}
        />
      )}
+
+      {/* Continue Task */}
+      {continueTaskPopup.show && (
+        <AssignTaskPopout
+          details={continueTaskPopup.data}
+          action={() => {
+            setContinueTaskPopup({ show: false, data: {} });
+          }}
+          situation={continueTaskPopup.show}
+        />
+      )}
    </div>
  );
 };
@@ -7,7 +7,7 @@ import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";

 const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
-const SuggestTask = ({ details, onClose, situation }) => {
+const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
  const { pathname, state } = useLocation();
  const [submitTask, setSubmitTask] = useState({
    loading: false,
@@ -29,7 +29,7 @@ const SuggestTask = ({ details, onClose, situation }) => {

  const apiCall = new usersService();

-  const handleSubmit = async (values) => {
+  const handleSuggestedTask = async (values) => {
    if (!values.title && !values.description) return;
    try {
      setSubmitTask({ loading: true });
@@ -49,7 +49,15 @@ const SuggestTask = ({ details, onClose, situation }) => {
    }
  };

-  // console.log("state >-->>", state);
+  const handleParentSuggestion = (values) => {
+    if (suggestedNextStep == "Send Task") {
+      let firstName = state?.firstname;
+      let family_uid = state?.family_uid
+      continuePopupData({ ...details, firstName, family_uid });
+    }
+    onClose();
+  };
+
  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">
@@ -87,7 +95,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
        </div>
        <Formik
          initialValues={initialValues}
-          onSubmit={pathname !== "/manage-family" && handleSubmit}
+          onSubmit={
+            pathname !== "/manage-family"
+              ? handleSuggestedTask
+              : handleParentSuggestion
+          }
        >
          {(props) => {
            return (
@@ -211,6 +223,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
                    )}
                  </div>
                </div>
+
                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                  <div className="flex items-center space-x-4 mr-9">
                    <button
@@ -220,31 +233,33 @@ const SuggestTask = ({ details, onClose, situation }) => {
                    >
                      <span className="text-gradient"> Cancel</span>
                    </button>
-                    {pathname !== "/manage-family" ? (
-                      <button
-                        type="submit"
-                        disabled={props.isSubmitting}
-                        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"
-                          : submitTask.state == "success"
-                          ? "Task Submitted"
-                          : submitTask.state == "bad"
-                          ? "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>
-                    )}
+                    <button
+                      type="submit"
+                      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 !== "/manage-family" ? (
+                        <>
+                          {submitTask.loading
+                            ? "Submitting Task"
+                            : submitTask.state == "success"
+                            ? "Task Submitted"
+                            : submitTask.state == "bad"
+                            ? "An Error Occurred"
+                            : "Send to Parents"}
+                        </>
+                      ) : (
+                        <>
+                          {suggestedNextStep == "Send Task" ? (
+                            <>
+                              Continue <Icons name="chevron-right" />
+                            </>
+                          ) : (
+                            "Complete"
+                          )}
+                        </>
+                      )}
+                    </button>
                  </div>
                </div>
              </Form>