Family pending task start popout style changed

src/components/Cards/OfferCard.jsx

@@ -1,7 +1,10 @@
+import { Suspense, lazy } from "react";
 import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
+const VideoElement = lazy(() => import("../VideoCom/VideoElement")); // LAZY IMPORTING VIDEO COMPONENT
+
 export default function OfferCard({
   datas,
   hidden = false,
@@ -19,9 +22,13 @@ export default function OfferCard({
   return (
     <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
       <div className="content">
-        {/* thumbnail */}
         <div className="w-full h-40">
-          {/* thumbnail image */}
+          {/* thumbnail image/video */}
+          {datas.job_type == "MEDIA" ?
+          <Suspense fallback={<p>Loading...</p>}>
+            <VideoElement videoId={datas?.media_uid} />
+          </Suspense>
+          :
           <div
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
@@ -30,6 +37,7 @@ export default function OfferCard({
           >
             {hidden && <div className="flex justify-center"></div>}
           </div>
+          }
         </div>
         {/* details */}
         <div className="details">

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -195,6 +195,7 @@ export default function FamilyManageTabs({
         familyData={details.familyPending.data}
         accountDetails={accountDetails}
         loader={details.familyPending.loading}
+        setUpdatePage={setUpdatePage}
       />
     ),
     Account: (

src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx

@@ -10,7 +10,7 @@ import { Form, Formik } from "formik";
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
-    country: Yup.string()
+    currency: Yup.string()
       .min(1, "Minimum 3 characters")
       .max(25, "Maximum 25 characters")
       .required("required"),
@@ -28,7 +28,7 @@ const validationSchema = Yup.object().shape({
       .min(3, "Minimum 3 characters")
       .max(499, "Maximum 499 characters")
       .required("required"),
-    timeline: Yup.number()
+      timeline_days: Yup.number()
       .typeError("you must specify a number")
       .min(1, "Must be greater than 0")
       .required("required"),
@@ -52,10 +52,10 @@ export default function AssignMediaTask({
   // For form initial values
     const initialValues = {
         // initial values for formik
-        country: "",
+        currency: "",
         amount: "",
         job_description: "",
-        timeline: "",
+        timeline_days: "",
         media_uid: activeMedia.uid,
         family_uid: family_uid,
         media_type: "COMMON"
@@ -66,8 +66,8 @@ export default function AssignMediaTask({
 
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
 
-  let imageSrc = (localStorage.getItem("session_token")
-  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE
+//   let imageSrc = (localStorage.getItem("session_token")
+//   ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE
 
   return (
     <>
@@ -164,16 +164,16 @@ export default function AssignMediaTask({
                                                 {/* Currency */}
                                                 <div className="field w-full">
                                                     <label
-                                                    htmlFor="country"
+                                                    htmlFor="currency"
                                                     className="job-label flex gap-1"
                                                     >
                                                     Currency
-                                                    {props.errors.country && props.touched.country && <span className="text-[10px] text-red-500">{props.errors.country}</span>}
+                                                    {props.errors.currency && props.touched.currency && <span className="text-[10px] text-red-500">{props.errors.currency}</span>}
                                                     </label>
                                                     <select
-                                                    id="country"
-                                                    name="country"
-                                                    value={props.values.country}
+                                                    id="currency"
+                                                    name="currency"
+                                                    value={props.values.currency}
                                                     className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
                                                     onChange={props.handleChange}
                                                     >
@@ -198,7 +198,7 @@ export default function AssignMediaTask({
                                                         </>
                                                     ) : (
                                                         <option className="text-slate-500 text-lg" value="">
-                                                        No Options Found! Try Again
+                                                        No Options Found!
                                                         </option>
                                                     )}
                                                     </select>
@@ -212,12 +212,12 @@ export default function AssignMediaTask({
                                                 className="job-label flex gap-1"
                                                 >
                                                 Timeline
-                                                {props.errors.timeline && props.touched.timeline && <span className="text-[12px] text-red-500">{props.errors.timeline}</span>}
+                                                {props.errors.timeline_days && props.touched.timeline_days && <span className="text-[12px] text-red-500">{props.errors.timeline_days}</span>}
                                                 </label>
                                                 <select
                                                 id="timeline_days"
-                                                name="timeline"
-                                                value={props.values.timeline}
+                                                name="timeline_days"
+                                                value={props.values.timeline_days}
                                                 className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
                                                 onChange={props.handleChange}
                                                 >

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -258,14 +258,27 @@ const AssignTaskPopout = ({
         setRequestStatus({ loading: false, status: false, message: "" });
       }, 3000);
     }
-    // values.family_uid = selectedFamilyUid
-    // values.media_uid = activeMedia.uid
-    // values.amount = values.amount * 100
+
     let reqData = {...values, assign_mode:'110012', family_uid:selectedFamilyUid, media_uid:activeMedia.uid, amount:values.amount * 100}
-    console.log(reqData)
-    return setTimeout(()=>{
-      setRequestStatus({ loading: false, status: false, message: "" });
-    },2000)
+
+    apiCall.parentAssignMediaTask(reqData).then(res => {  // API CALL TO ASSIGN MEDIA TASK
+      if(res.status != 200 || res.data.internal_return < 0){
+        setRequestStatus({ loading: false, status: false, message: "Failed to Assign Task" });
+        return setTimeout(()=>{
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 3000)
+      }
+      setRequestStatus({ loading: false, status: true, message: "Task Assigned Successfully" });
+      return setTimeout(()=>{
+        setRequestStatus({ loading: false, status: false, message: "" });
+        closeModal() // FOR CLOSING ASSIGN MODAL
+      }, 3000)
+    }).catch(err => {
+      setRequestStatus({ loading: false, status: false, message: "Failed, something went wrong. Try Again" });
+      return setTimeout(()=>{
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 3000)
+    })
   }
 
   useEffect(()=>{ // effect to update family UID when components mounts
@@ -280,7 +293,7 @@ const AssignTaskPopout = ({
 
   useEffect(()=>{
     apiCall.getParentCommonMedia().then((res)=>{
-        console.log('RESPONSE', res)
+        // console.log('RESPONSE', res)
         setCommonMedia({loading: false, data: res?.data?.result, image: ''})
         setActiveMedia(res?.data?.result[0])
     }).catch(err => {

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -9,6 +9,7 @@ export default function FamilyPending({
   className,
   accountDetails,
   loader,
+  setUpdatePage,
 }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
@@ -151,6 +152,7 @@ export default function FamilyPending({
           details={jobPopout.data}
           onClose={() => {
             setJobPopout({ show: false, data: {} });
+            setUpdatePage(prev => !prev);
           }}
           situation={jobPopout.show}
         />

src/components/ImageCon/ImageElement.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function ImageElement({className, src, alt}) {
+  return (
+    <div className='w-full h-full flex justify-center items-center'>
+        <img src={src} alt={alt} className={`object-cover w-auto h-full ${className && className}`} />
+    </div>
+  )
+}

src/components/VideoCom/VideoElement.jsx

@@ -13,7 +13,7 @@ export default function VideoElement({videoId}) {
   },[videoId])
 
   return (
-    <video ref={videoRef} className='w-full h-full' controls autoPlay>
+    <video ref={videoRef} className='w-full h-full' controls>
       <source src={`https://dev-media.wrenchboard.com/videos/${videoId}`} type='video/mp4'></source>
       Your browser does not support the video tag.
   </video>

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { Suspense, lazy, useState } from "react";
 import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import { useNavigate } from "react-router-dom";
@@ -12,6 +12,9 @@ import { useDispatch } from "react-redux";
 
 import { SocketValues } from "../Contexts/SocketIOContext";
 
+const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
+const ImageElement = lazy(() => import("../ImageCon/ImageElement"));
+
 function FamilyOfferJobPopout({ details, onClose, situation }) {
 
   const {parentAssignJobToKid} = SocketValues()
@@ -118,8 +121,6 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
       });
   };
 
-  console.log(details)
-
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -153,12 +154,9 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white rounded-lg">
-          <div className="p-4 w-full md:w-3/4 md:border-r-2">
+        <div className="md:flex bg-white rounded-lg h-[450px] overflow-y-auto">
+          <div className="p-4 w-full md:w-3/5 md:border-r-2">
             <div className="flex gap-2">
-                <div className="image-wrapper w-32">
-                    <img className="w-full h-auto" src={details?.image} alt='banner' />
-                </div>
                 <div className="details-wrapper">
                     <p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
                     {details.title}
@@ -208,7 +206,22 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-1/4 h-full">
+          <div className="p-4 w-full md:w-2/5 h-full flex flex-col justify-between">
+            { details.job_type == 'TASK' ?
+              <div className="image-wrapper w-full h-40 flex justify-center items-center">
+                <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
+                  <ImageElement src={details?.image} alt='banner' className='w-auto h-full' />
+                </Suspense>
+              </div>
+              :
+              <div className="w-full flex justify-center">
+                <div className="w-full max-w-xs">
+                  <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
+                    <VideoElement videoId={details.media_uid} />
+                  </Suspense>
+                </div>
+              </div>
+            }
             <div className="my-3 md:flex md:justify-center">
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />
@@ -238,30 +251,19 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
                 </button>
               )}
             </div> */}
-
-            {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-            {requestStatus.message != "" &&
-              (!requestStatus.status ? (
-                <div
-                  className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                >
-                  {requestStatus.message}
-                </div>
-              ) : (
-                requestStatus.status && (
-                  <div
-                    className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                  >
-                    {requestStatus.message}
-                  </div>
-                )
-              ))}
-            {/* End of error or success display */}
           </div>
         </div>
 
         {/* close button */}
-        <div className="modal-footer-wrapper flex justify-end">
+        <div className="modal-footer-wrapper flex justify-between">
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          <div
+            className={`relative text-md font-light leading-[19.5px] text-[13px] ${requestStatus.status ? 'text-green-700' : 'text-[#912741]'}`}
+          >
+            {requestStatus.message}
+          </div>
+          {/* End of error or success display */}
+
           <button
             onClick={onClose}
             disabled={requestStatus.loading}

src/components/jobPopout/PendingJobsPopout.jsx

@@ -71,7 +71,9 @@ function PendingJobsPopout({ details, onClose, situation }) {
         .pendingJobSendTome(reqData)
         .then((res) => {
           setRequestMessage({ status: true, message: res.data.status });
+          dispatch(tableReload({ type: "PENDINGTABLE" }));
           setTimeout(() => {
+            onClose()
             setPendingJobLoader({ extend: false, offer: false });
             setRequestMessage({ status: false, message: "" });
           }, 4000);