rendered video component for media task type

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/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/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);