integrated assembly api from the backend to extract text

package.json

@@ -59,6 +59,7 @@
     "react-date-picker": "^8.4.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.0.0",
+    "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.0",
     "react-multistep": "^5.5.8",
     "react-paginate": "^8.1.3",
@@ -71,6 +72,7 @@
     "redux": "4.1.2",
     "serve": "^13.0.2",
     "simplebar-react": "^2.3.6",
+    "styled-components": "^6.0.8",
     "sweetalert": "^2.1.2",
     "sweetalert2": "^11.4.0",
     "webpack": "4.44.2",

src/_nav.js

@@ -36,8 +36,7 @@ import {
   cilTags,
   cilTennisBall,
   cilText,
-  cilUser
+  cilUser,
-  ,
 } from "@coreui/icons";
 import { CNavGroup, CNavItem, CNavTitle } from "@coreui/react";
 
@@ -48,55 +47,33 @@ const _nav = [
     to: "/dashboard",
     icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
   },
-
   {
     component: CNavItem,
-    name: "Products",
+    name: "Campaigns",
-    icon: <CIcon icon={cilClipboard} customClassName="nav-icon" />,
+    icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
-    to: "/products",
+    to: "/campaigns",
   },
-  // {
-  //   component: CNavItem,
-  //   name: 'Departures',
-  //   icon: <CIcon icon={cilAirplaneMode} customClassName="nav-icon" />,
-  //   to: '/departures',
-  // },
-  {
-    component: CNavItem,
-    name: "Testimonials",
-    icon: <CIcon icon={cilCompress} customClassName="nav-icon" />,
-    to: "/testimonials",
-  },
-  {
-    component: CNavItem,
-    name: "Contact Requests",
-    icon: <CIcon icon={cilContact} customClassName="nav-icon" />,
-    to: "/contact/request",
-  },
-
-  // {
-  //   component: CNavItem,
-  //   name: 'Information',
-  //   icon: <CIcon icon={cilInfo} customClassName="nav-icon" />,
-  //   to: '/informations',
-  // },
-
-  {
-    component: CNavItem,
-    name: "Appointments",
-    icon: <CIcon icon={cilCalendar} customClassName="nav-icon" />,
-    to: "/appointments",
-  },
-
   {
     component: CNavItem,
     name: "Users",
     icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
     to: "/users",
   },
+  {
+    component: CNavItem,
+    name: "Recipients",
+    icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
+    to: "/recipents",
+  },
+  {
+    component: CNavItem,
+    name: "Products",
+    icon: <CIcon icon={cilClipboard} customClassName="nav-icon" />,
+    to: "/products",
+  },
   {
     component: CNavGroup,
-    name: "Franchisee Orders",
+    name: "Orders",
     icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
     items: [
       {
@@ -137,19 +114,24 @@ const _nav = [
       },
     ],
   },
-
   {
-    component: CNavItem,
+    component: CNavGroup,
-    name: "Recipients",
+    name: "Website Related",
-    icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
+    icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
-    to: "/recipents",
+    items: [
-  },
+      {
-  {
+        component: CNavItem,
-    component: CNavItem,
+        name: "Testimonials",
-    name: "Campaigns",
+        icon: <CIcon icon={cilCompress} customClassName="nav-icon" />,
-    icon: <CIcon icon={cilUser
+        to: "/testimonials",
-    } customClassName="nav-icon" />,
+      },
-    to: "/campaigns",
+      {
+        component: CNavItem,
+        name: "Contact Requests",
+        icon: <CIcon icon={cilContact} customClassName="nav-icon" />,
+        to: "/contact/request",
+      },
+    ],
   },
   {
     component: CNavGroup,
@@ -244,6 +226,40 @@ const _nav = [
       },
     ],
   },
+
+  // {
+  //   component: CNavItem,
+  //   name: 'Departures',
+  //   icon: <CIcon icon={cilAirplaneMode} customClassName="nav-icon" />,
+  //   to: '/departures',
+  // },
+
+  // {
+  //   component: CNavItem,
+  //   name: "Testimonials",
+  //   icon: <CIcon icon={cilCompress} customClassName="nav-icon" />,
+  //   to: "/testimonials",
+  // },
+  // {
+  //   component: CNavItem,
+  //   name: "Contact Requests",
+  //   icon: <CIcon icon={cilContact} customClassName="nav-icon" />,
+  //   to: "/contact/request",
+  // },
+
+  // {
+  //   component: CNavItem,
+  //   name: 'Information',
+  //   icon: <CIcon icon={cilInfo} customClassName="nav-icon" />,
+  //   to: '/informations',
+  // },
+
+  // {
+  //   component: CNavItem,
+  //   name: "Appointments",
+  //   icon: <CIcon icon={cilCalendar} customClassName="nav-icon" />,
+  //   to: "/appointments",
+  // },
 ];
 
 export default _nav;

src/components/AppHeader.js

@@ -1,6 +1,6 @@
-import React from 'react'
+import React from "react";
-import { NavLink } from 'react-router-dom'
+import { NavLink } from "react-router-dom";
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector, useDispatch } from "react-redux";
 import {
   CContainer,
   CHeader,
@@ -10,24 +10,23 @@ import {
   CHeaderToggler,
   CNavLink,
   CNavItem,
-} from '@coreui/react'
+} from "@coreui/react";
-import CIcon from '@coreui/icons-react'
+import CIcon from "@coreui/icons-react";
-import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons'
+import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from "@coreui/icons";
 
-import { AppBreadcrumb } from './index'
+import { AppBreadcrumb } from "./index";
-import { AppHeaderDropdown } from './header/index'
+import { AppHeaderDropdown } from "./header/index";
-import { logo } from 'src/assets/brand/logo'
+import { logo } from "src/assets/brand/logo";
-import axios from 'axios'
+import axios from "axios";
-import { useEffect } from 'react'
+import { useEffect } from "react";
-import { useState } from 'react'
+import { useState } from "react";
-import { isAutheticated } from 'src/auth'
+import { isAutheticated } from "src/auth";
 
 const AppHeader = () => {
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
-  const sidebarShow = useSelector((state) => state.sidebarShow)
+  const sidebarShow = useSelector((state) => state.sidebarShow);
-  const [AppName, setAppName] = useState('')
+  const [AppName, setAppName] = useState("");
-  const token = isAutheticated()
+  const token = isAutheticated();
-
 
   useEffect(() => {
     async function getConfiguration() {
@@ -35,18 +34,17 @@ const AppHeader = () => {
         headers: {
           Authorization: `Bearer ${token}`,
         },
-      })
+      });
-      setAppName(configDetails.data.result[0]?.appName)
+      setAppName(configDetails.data.result[0]?.appName);
-
     }
-    getConfiguration()
+    getConfiguration();
-  }, [])
+  }, []);
   return (
     <CHeader position="sticky" className="mb-4">
       <CContainer fluid>
         <CHeaderToggler
           className="ps-1"
-          onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
+          onClick={() => dispatch({ type: "set", sidebarShow: !sidebarShow })}
         >
           <CIcon icon={cilMenu} size="lg" />
         </CHeaderToggler>
@@ -55,7 +53,11 @@ const AppHeader = () => {
         </CHeaderBrand>
         <CHeaderNav className="d-none d-md-flex me-auto">
           <CNavItem>
-            <CNavLink to="/dashboard" component={NavLink} activeClassName="active">
+            <CNavLink
+              to="/dashboard"
+              component={NavLink}
+              activeclassname="active"
+            >
               <h3>{AppName}</h3>
             </CNavLink>
           </CNavItem>
@@ -88,11 +90,9 @@ const AppHeader = () => {
         </CHeaderNav>
       </CContainer>
       <CHeaderDivider />
-      <CContainer fluid>
+      <CContainer fluid>{/* <AppBreadcrumb /> */}</CContainer>
-        {/* <AppBreadcrumb /> */}
-      </CContainer>
     </CHeader>
-  )
+  );
-}
+};
 
-export default AppHeader
+export default AppHeader;

src/components/AppSidebarNav.js

@@ -1,11 +1,11 @@
-import React from 'react'
+import React from "react";
-import { NavLink, useLocation } from 'react-router-dom'
+import { NavLink, useLocation } from "react-router-dom";
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types";
 
-import { CBadge } from '@coreui/react'
+import { CBadge } from "@coreui/react";
 
 export const AppSidebarNav = ({ items }) => {
-  const location = useLocation()
+  const location = useLocation();
   const navLink = (name, icon, badge) => {
     return (
       <>
@@ -16,34 +16,32 @@ export const AppSidebarNav = ({ items }) => {
             {badge.text}
           </CBadge>
         )}
-
       </>
-    )
+    );
-  }
+  };
 
   const navItem = (item, index) => {
-    const { component, name, badge, icon, ...rest } = item
+    const { component, name, badge, icon, ...rest } = item;
-    const Component = component
+    const Component = component;
     return (
       <>
-
         <Component
           {...(rest.to &&
             !rest.items && {
-            component: NavLink,
+              component: NavLink,
-            activeClassName: 'active',
+              activeclassname: "active",
-          })}
+            })}
           key={index}
           {...rest}
         >
           {navLink(name, icon, badge)}
         </Component>
       </>
-    )
+    );
-  }
+  };
   const navGroup = (item, index) => {
-    const { component, name, icon, to, ...rest } = item
+    const { component, name, icon, to, ...rest } = item;
-    const Component = component
+    const Component = component;
     return (
       <Component
         idx={String(index)}
@@ -53,22 +51,22 @@ export const AppSidebarNav = ({ items }) => {
         {...rest}
       >
         {item.items?.map((item, index) =>
-
+          item.items ? navGroup(item, index) : navItem(item, index)
-          item.items ? navGroup(item, index) : navItem(item, index),
         )}
       </Component>
-    )
+    );
-  }
+  };
 
   return (
     <React.Fragment>
       {items &&
         items.map((item, index) =>
-          (item.items ? navGroup(item, index) : navItem(item, index)))}
+          item.items ? navGroup(item, index) : navItem(item, index)
+        )}
     </React.Fragment>
-  )
+  );
-}
+};
 
 AppSidebarNav.propTypes = {
   items: PropTypes.arrayOf(PropTypes.any).isRequired,
-}
+};

src/views/Campaigns/AddCampaign.js

@@ -43,7 +43,7 @@ const AddCampaign = () => {
     video: null,
     spreadSheet: null,
     videos: [null, null],
-    recipients: [{ name: "", phoneNumber: "", email: "" }],
+    recipients: [{ name: "", contact: "" }],
     testRecipents: [
       {
         name: "",
@@ -169,9 +169,9 @@ const AddCampaign = () => {
             <div style={{ fontSize: "22px" }} className="fw-bold">
               Add Campaign
             </div>
-            <div className="page-title-right">
+            {/* <div className="page-title-right">
               <div className="page-title-right">
-                {/* <Button
+                <Button
                   variant="contained"
                   color="primary"
                   style={{
@@ -182,30 +182,30 @@ const AddCampaign = () => {
                   onClick={() => {
                     handleSubmit();
                   }}
-                  disabled={
+                  // disabled={
-                    data.address_Line_1.trim() === "" ||
+                  //   data.address_Line_1.trim() === "" ||
-                    data.address_Line_2.trim() === "" ||
+                  //   data.address_Line_2.trim() === "" ||
-                    data.userType === "" ||
+                  //   data.userType === "" ||
-                    data.language === "" ||
+                  //   data.language === "" ||
-                    data.country === "" ||
+                  //   data.country === "" ||
-                    data.state === "" ||
+                  //   data.state === "" ||
-                    data.city === "" ||
+                  //   data.city === "" ||
-                    data.pincode.trim() === "" ||
+                  //   data.pincode.trim() === "" ||
-                    data.userName.trim() === "" ||
+                  //   data.userName.trim() === "" ||
-                    //  &&
+                  //   //  &&
-                    //   (data.contact_Person_Name.trim() === "" ||
+                  //   //   (data.contact_Person_Name.trim() === "" ||
-                    //     data.specialization === "")
+                  //   //     data.specialization === "")
-                    data.email.trim() === "" ||
+                  //   data.email.trim() === "" ||
-                    // data.short_url.trim() === "" ||
+                  //   // data.short_url.trim() === "" ||
-                    data.contact_Number === ""
+                  //   data.contact_Number === ""
-                    //  ||
+                  //   //  ||
-                    // data.contact_Person_Name.trim() === ""
+                  //   // data.contact_Person_Name.trim() === ""
-                  }
+                  // }
                 >
                   {loading ? "Loading" : "Add Now"}
-                </Button> */}
+                </Button>
               </div>
-            </div>
+            </div> */}
           </div>
         </CCol>
       </CRow>
@@ -222,7 +222,9 @@ const AddCampaign = () => {
                   />
                 )}
 
-                {viewState === 2 && <VideoTemplate />}
+                {viewState === 2 && (
+                  <VideoTemplate props={{ data, setData, handleView }} />
+                )}
                 {viewState === 3 && (
                   <ContactDetails props={{ data, setData, handleView }} />
                 )}
@@ -303,7 +305,7 @@ const AddCampaign = () => {
                   </button>
                   <button
                     className={
-                      viewState === 3
+                      viewState === 4
                         ? "btn btn-light"
                         : "btn btn-info text-white"
                     }
@@ -314,18 +316,18 @@ const AddCampaign = () => {
                   </button>
                   <button
                     className={
-                      viewState === 4
+                      viewState === 5
                         ? "btn btn-light"
                         : "btn btn-info text-white"
                     }
                     type="button"
                     onClick={() => handleView(5)}
                   >
-                    Videos
+                    Videos (Internal Process)
                   </button>
                   <button
                     className={
-                      viewState === 5
+                      viewState === 6
                         ? "btn btn-light"
                         : "btn btn-info text-white"
                     }
@@ -336,7 +338,7 @@ const AddCampaign = () => {
                   </button>
                   <button
                     className={
-                      viewState === 6
+                      viewState === 7
                         ? "btn btn-light"
                         : "btn btn-info text-white"
                     }

src/views/Campaigns/BasicDetaiils.js

@@ -54,8 +54,7 @@ const BasicDetaiils = ({ props }) => {
                   if (
                     data?.campaignName === "" ||
                     data?.campaignType === "" ||
-                    data?.selectedLanguage === null ||
+                    data?.selectedLanguage === null
-                    data?.video === null
                   ) {
                     toast.error("Fill all details");
                   } else {
@@ -74,34 +73,6 @@ const BasicDetaiils = ({ props }) => {
         <div className="col-sm-12 col-md-12 col-lg-12 my-1">
           <div className="card h-100">
             <div className="card-body px-5">
-              <div className="mb-3">
-                <label htmlFor="title" className="form-label">
-                  Campaign Name
-                </label>
-                <input
-                  type="text"
-                  className="form-control"
-                  id="campaignName"
-                  value={data?.campaignName}
-                  maxLength="50"
-                  onChange={(e) => handleChange(e)}
-                />
-              </div>
-              <div className="mb-3">
-                <label htmlFor="title" className="form-label">
-                  Select Language
-                </label>
-                <select
-                  onChange={(e) => handleChange(e)}
-                  value={data?.language}
-                  className="form-control"
-                  id="language"
-                >
-                  <option value="">---English/Hindi---</option>
-                  <option value="english">English</option>
-                  <option value="hindi">Hindi</option>
-                </select>
-              </div>
               <div className="mb-3">
                 <label htmlFor="title" className="form-label">
                   Select Campaign Type
@@ -140,18 +111,34 @@ const BasicDetaiils = ({ props }) => {
                   EMAIL
                 </button>
               </div>
-
               <div className="mb-3">
                 <label htmlFor="title" className="form-label">
-                  Upload Video
+                  Campaign Name
                 </label>
                 <input
-                  type="file"
+                  type="text"
                   className="form-control"
-                  id="video"
+                  id="campaignName"
-                  onChange={(e) => handleVideoUpload(e)}
+                  value={data?.campaignName}
+                  maxLength="50"
+                  onChange={(e) => handleChange(e)}
                 />
               </div>
+              <div className="mb-3">
+                <label htmlFor="title" className="form-label">
+                  Select Language
+                </label>
+                <select
+                  onChange={(e) => handleChange(e)}
+                  value={data?.language}
+                  className="form-control"
+                  id="language"
+                >
+                  <option value="">---English/Hindi---</option>
+                  <option value="english">English</option>
+                  <option value="hindi">Hindi</option>
+                </select>
+              </div>
             </div>
           </div>
         </div>

src/views/Campaigns/Campaign.js

@@ -10,27 +10,28 @@ const Campaign = () => {
   const token = isAutheticated();
   const [loading, setLoading] = useState(true);
   const [success, setSuccess] = useState(true);
-  const [BusinessesData, setBusinessesData] = useState([]);
+  const [campaignData, setCampaignData] = useState([]);
 
   const [currentPage, setCurrentPage] = useState(1);
   const [itemPerPage, setItemPerPage] = useState(10);
-  const [showData, setShowData] = useState(BusinessesData);
+  const [showData, setShowData] = useState(campaignData);
 
   const handleShowEntries = (e) => {
     setCurrentPage(1);
     setItemPerPage(e.target.value);
   };
 
-  const getbusinesses = () => {
+  const getCampaign = () => {
     axios
-      .get(`/api/businesses/getall`, {
+      .get(`/api/campaign/getAll`, {
         headers: {
           "Access-Control-Allow-Origin": "*",
           Authorization: `Bearer ${token}`,
         },
       })
       .then((res) => {
-        setBusinessesData(res.data?.businesses);
+        setCampaignData(res.data?.campaigns);
+        // console.log(res.data?.campaigns);
         setLoading(false);
       })
       .catch((err) => {
@@ -40,17 +41,17 @@ const Campaign = () => {
   };
 
   useEffect(() => {
-    getbusinesses();
+    getCampaign();
   }, [success]);
 
   useEffect(() => {
     const loadData = () => {
       const indexOfLastPost = currentPage * itemPerPage;
       const indexOfFirstPost = indexOfLastPost - itemPerPage;
-      setShowData(BusinessesData.slice(indexOfFirstPost, indexOfLastPost));
+      setShowData(campaignData.slice(indexOfFirstPost, indexOfLastPost));
     };
     loadData();
-  }, [currentPage, itemPerPage, BusinessesData]);
+  }, [currentPage, itemPerPage, campaignData]);
 
   // const handleVarification = (id) => {
   //     swal({
@@ -89,36 +90,36 @@ const Campaign = () => {
   //     })
   // }
   const handleDelete = (id) => {
-    swal({
+    // swal({
-      title: "Are you sure?",
+    //   title: "Are you sure?",
-      icon: "error",
+    //   icon: "error",
-      buttons: {
+    //   buttons: {
-        Yes: { text: "Yes", value: true },
+    //     Yes: { text: "Yes", value: true },
-        Cancel: { text: "Cancel", value: "cancel" },
+    //     Cancel: { text: "Cancel", value: "cancel" },
-      },
+    //   },
-    }).then((value) => {
+    // }).then((value) => {
-      if (value === true) {
+    //   if (value === true) {
-        axios
+    //     axios
-          .delete(`/api/businesses/delete/${id}`, {
+    //       .delete(`/api/businesses/delete/${id}`, {
-            headers: {
+    //         headers: {
-              "Access-Control-Allow-Origin": "*",
+    //           "Access-Control-Allow-Origin": "*",
-              Authorization: `Bearer ${token}`,
+    //           Authorization: `Bearer ${token}`,
-            },
+    //         },
-          })
+    //       })
-          .then((res) => {
+    //       .then((res) => {
-            setSuccess((prev) => !prev);
+    //         setSuccess((prev) => !prev);
-          })
+    //       })
-          .catch((err) => {
+    //       .catch((err) => {
-            swal({
+    //         swal({
-              title: "Warning",
+    //           title: "Warning",
-              text: "Something went wrong!",
+    //           text: "Something went wrong!",
-              icon: "error",
+    //           icon: "error",
-              button: "Retry",
+    //           button: "Retry",
-              dangerMode: true,
+    //           dangerMode: true,
-            });
+    //         });
-          });
+    //       });
-      }
+    //   }
-    });
+    // });
   };
 
   const formatDate = (inputDate) => {
@@ -203,9 +204,9 @@ const Campaign = () => {
                         style={{ background: "rgb(140, 213, 213)" }}
                       >
                         <tr>
-                          <th className="text-start">User Name </th>
+                          <th className="text-start">Campaign Name </th>
                           {/* <th className="text-start">Logo</th> */}
-                          <th className="text-start"> Type</th>
+                          <th className="text-start">Campaign Type</th>
                           <th className="text-start">Recipients</th>
                           {/* <th className="text-start">Status</th> */}
                           <th className="text-center">Action</th>
@@ -231,9 +232,7 @@ const Campaign = () => {
                           showData.map((i, idx) => {
                             return (
                               <tr key={idx}>
-                                <td className="text-start">
+                                <td className="text-start">{i.campaignName}</td>
-                                  {i.userName ? i.userName : i.business}
-                                </td>
                                 {/* {i.banner && i.banner ?
                                                                     <td className="text-start">
                                                                         <img src={i.banner.url} alt="No Image" height="50" />
@@ -241,9 +240,7 @@ const Campaign = () => {
                                                                     <p>No image!</p>
                                                                 } */}
 
-                                <td className="text-start">
+                                <td className="text-start">{i.campaignType}</td>
-                                  {i.userType ? i.userType : i.short_url}
-                                </td>
 
                                 <td className="text-start">
                                   {formatDate(i.createdAt)}
@@ -284,7 +281,7 @@ const Campaign = () => {
                                     </button>
                                   </Link>
 
-                                  <Link to={`/users/edit/${i._id}`}>
+                                  <Link to={`/campaigns/edit/${i._id}`}>
                                     <button
                                       style={{ color: "white" }}
                                       type="button"
@@ -334,9 +331,9 @@ const Campaign = () => {
                         Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
                         {Math.min(
                           currentPage * itemPerPage,
-                          BusinessesData.length
+                          campaignData.length
                         )}{" "}
-                        of {BusinessesData.length} entries
+                        of {campaignData.length} entries
                       </div>
                     </div>
 
@@ -384,7 +381,7 @@ const Campaign = () => {
 
                           {!(
                             (currentPage + 1) * itemPerPage - itemPerPage >
-                            BusinessesData.length - 1
+                            campaignData.length - 1
                           ) && (
                             <li className="paginate_button page-item ">
                               <span
@@ -403,7 +400,7 @@ const Campaign = () => {
                             className={
                               !(
                                 (currentPage + 1) * itemPerPage - itemPerPage >
-                                BusinessesData.length - 1
+                                campaignData.length - 1
                               )
                                 ? "paginate_button page-item next"
                                 : "paginate_button page-item next disabled"

src/views/Campaigns/ContactDetails.js

@@ -8,15 +8,13 @@ const ContactDetails = ({ props }) => {
   const { data, setData, handleView } = props;
   const [dataEntryMethod, setDataEntryMethod] = useState("manual");
   const [csvData, setCsvData] = useState([]);
-  // const [recipients, setRecipients] = useState([{ name: "", phoneNumber: "" }]);
-  // console.log("data", data);
 
   const addRecord = () => {
     setData((prevData) => ({
       ...prevData,
       recipients: [
         ...prevData.recipients,
-        { name: "", phoneNumber: "", email: "" },
+        { name: "", contact: "" }, // Initialize contact as an empty string
       ],
     }));
   };
@@ -35,14 +33,13 @@ const ContactDetails = ({ props }) => {
           const row = rows[i].split(",");
           if (row.length >= 2) {
             const name = row[0].trim();
-            const email = row[1].trim();
+            const contact = row[1].trim();
-            if (name && email) {
+            if (name && contact) {
-              extractedData.push({ name, email });
+              extractedData.push({ name, contact });
             }
           }
         }
         setCsvData(extractedData);
-        // console.log(csvData);
         setData((prevData) => ({
           ...prevData,
           recipients: extractedData,
@@ -74,23 +71,11 @@ const ContactDetails = ({ props }) => {
     }));
   };
 
-  const recipientNumberChange = (e, index) => {
+  const recipientContactChange = (e, index) => {
     const updatedRecipients = [...data.recipients];
     updatedRecipients[index] = {
       ...updatedRecipients[index],
-      phoneNumber: e.target.value,
+      contact: e.target.value,
-    };
-    setData((prevData) => ({
-      ...prevData,
-      recipients: updatedRecipients,
-    }));
-  };
-
-  const recipientEmailChange = (e, index) => {
-    const updatedRecipients = [...data.recipients];
-    updatedRecipients[index] = {
-      ...updatedRecipients[index],
-      email: e.target.value,
     };
     setData((prevData) => ({
       ...prevData,
@@ -101,11 +86,7 @@ const ContactDetails = ({ props }) => {
   const handleSubmit = () => {
     if (
       data?.recipients.every(
-        (recipient) =>
+        (recipient) => recipient.name !== "" && recipient.contact !== ""
-          recipient.name !== "" &&
-          (data?.campaignType !== "email"
-            ? recipient.phoneNumber !== ""
-            : recipient.email !== "")
       )
     ) {
       handleView(4);
@@ -171,50 +152,41 @@ const ContactDetails = ({ props }) => {
                 <div className="card-body px-5">
                   {data?.recipients.map((recipient, index) => {
                     return (
-                      <div className="row mb-3 border p-3 rounded">
+                      <div className="row mb-3 border p-3 rounded" key={index}>
                         <div className="col-md-6 d-flex align-items-center">
-                          <label htmlFor="title" className="form-label me-2">
+                          <label
+                            htmlFor={`name-${index}`}
+                            className="form-label me-2"
+                          >
                             Name
                           </label>
                           <input
                             type="text"
                             className="form-control"
-                            name={`name-${index}`}
+                            id={`name-${index}`}
                             value={recipient?.name}
                             onChange={(e) => recipientNameChange(e, index)}
                             maxLength="50"
                           />
                         </div>
                         <div className="col-md-6 d-flex align-items-center">
-                          <label htmlFor="title" className="form-label me-2">
+                          <label
-                            {data?.campaignType === "rcs" ||
+                            htmlFor={`contact-${index}`}
-                            data?.campaignType === "whatsapp"
+                            className="form-label me-2"
-                              ? "Phone Number"
+                          >
-                              : "Email"}
+                            {data?.campaignType === "email"
+                              ? "Email"
+                              : "Phone Number"}
                           </label>
                           <input
                             type={
-                              data?.campaignType === "rcs" ||
+                              data?.campaignType === "email" ? "email" : "tel"
-                              data?.campaignType === "whatsapp"
-                                ? "number"
-                                : "email"
                             }
                             className="form-control"
-                            id={`recipients-phone-number-${index}`}
+                            id={`contact-${index}`}
                             maxLength="50"
-                            name={`toPhoneNumber-${index}`}
+                            value={recipient?.contact}
-                            value={
+                            onChange={(e) => recipientContactChange(e, index)}
-                              data?.campaignType === "rcs" ||
-                              data?.campaignType === "whatsapp"
-                                ? recipient?.phoneNumber
-                                : recipient?.email
-                            }
-                            onChange={(e) =>
-                              data?.campaignType === "rcs" ||
-                              data?.campaignType === "whatsapp"
-                                ? recipientNumberChange(e, index)
-                                : recipientEmailChange(e, index)
-                            }
                           />
                         </div>
                         {index !== 0 && (

src/views/Campaigns/Preview.js

@@ -1,23 +1,83 @@
-import React from "react";
+import React, { useState } from "react";
 import Button from "@material-ui/core/Button";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
+
 const Preview = ({ props }) => {
+  const token = isAutheticated();
   const { data, handleView, setData } = props;
-  console.log(data);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    // console.log(data);
+
+    // const campaignData = {
+    //   campaignType: data.campaignType,
+    //   campaignName: data.campaignName,
+    //   language: data.language,
+    //   videoTemplate: data.video,
+    //   recipients: data.recipients,
+    // };
+
+    const formattedRecipients = data.recipients.map((recipient) => ({
+      name: recipient.name,
+      contact: recipient.contact.email || recipient.contact.phoneNumber,
+    }));
+    // console.log(data.campaignType);
+
+    const formData = new FormData();
+    formData.append("campaignType", data.campaignType);
+    formData.append("campaignName", data.campaignName);
+    formData.append("language", data.language);
+    formData.append("videoTemplate", data.video);
+    // formData.set("recipients",JSON.stringify(formattedRecipients));
+    // console.log("campaignData", campaignData);
+    // console.log("formData", formData);
+
+    axios
+      .post(`/api/campaign/create`, formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/form-data",
+          "Access-Control-Allow-Origin": "*",
+        },
+      })
+      .then((res) => {
+        // console.log(res);
+        swal({
+          title: "Added",
+          text: res?.data?.message
+            ? res?.data?.message
+            : "Campaign added successfully!",
+          icon: "success",
+          button: "Return",
+        });
+        setLoading(false);
+        // handleView(5);
+      })
+      .catch((err) => {
+        setLoading(false);
+        const message = err.response?.data?.message || "Something went wrong!";
+        // console.log(message);
+        swal({
+          title: "Warning",
+          text: message,
+          icon: "error",
+          button: "Retry",
+          dangerMode: true,
+        });
+      });
+  };
+
+  // console.log(data);
   return (
-    <div>
+    <React.Fragment>
       <div className="col-12">
-        <div
+        <div className="page-title-box d-flex align-items-center justify-content-between">
-          className="
-                    page-title-box
-                    d-flex
-                    align-items-center
-                    justify-content-between
-                  "
-        >
           <div style={{ fontSize: "22px" }} className="fw-bold">
             Campaign Details
           </div>
-
           <div className="page-title-right">
             <Button
               variant="contained"
@@ -68,21 +128,15 @@ const Preview = ({ props }) => {
                 <td>{data?.campaignType}</td>
               </tr>
               <tr>
-                <th scope="col">
+                <th scope="col">Video</th>
-                  {data?.campaignType === "email" ? "Video" : "Spreadsheet"}
-                </th>
                 <td>
-                  {data?.campaignType === "email" ? (
+                  <video
-                    <video
+                    className="rounded"
-                      className="rounded"
+                    autoPlay={true}
-                      autoPlay={true}
+                    height={300}
-                      height={300}
+                    width={250}
-                      width={250}
+                    src={data?.video ? URL.createObjectURL(data?.video) : null}
-                      src={data?.video}
+                  ></video>
-                    ></video>
-                  ) : (
-                    <td>{data?.spreadSheet}</td>
-                  )}
                 </td>
               </tr>
               <tr>
@@ -93,7 +147,21 @@ const Preview = ({ props }) => {
           </table>
         </div>
       )}
-    </div>
+      <div className="page-title-right d-flex justify-content-end">
+        <Button
+          variant="contained"
+          color="primary"
+          style={{
+            fontWeight: "bold",
+            marginBottom: "1rem",
+            textTransform: "capitalize",
+          }}
+          onClick={handleSubmit}
+        >
+          {loading ? "Loading" : "Add Now"}
+        </Button>
+      </div>
+    </React.Fragment>
   );
 };
 

src/views/Campaigns/TestLaunch.js

@@ -3,6 +3,14 @@ import Button from "@material-ui/core/Button";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { CFormInput, CFormLabel, CCol, CRow } from "@coreui/react";
+import {
+  CButton,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableRow,
+} from "@coreui/react";
 
 const TestLaunch = ({ props }) => {
   const { data, setData, handleView } = props;
@@ -112,7 +120,7 @@ const TestLaunch = ({ props }) => {
         </Button>
       </div>
 
-      <div className="row">
+      {/* <div className="row">
         <div className="col-md-12 my-3">
           <div className="card h-100">
             <div className="card-body px-5">
@@ -201,7 +209,75 @@ const TestLaunch = ({ props }) => {
             <button className="btn btn-primary">Launch</button>
           </div>
         </div>
-      </div>
+      </div> */}
+      {data && (
+        <div>
+          <CTable striped>
+            <CTableHead>
+              <CTableRow>
+                <CTableDataCell scope="col">Video</CTableDataCell>
+                <CTableDataCell scope="col">Name</CTableDataCell>
+                <CTableDataCell scope="col">Contact</CTableDataCell>
+                <CTableDataCell scope="col"></CTableDataCell>
+              </CTableRow>
+            </CTableHead>
+            {/* <CTableBody>{renderTableRows()}</CTableBody> */}
+            <CTableBody>
+              <CTableRow>
+                <CTableDataCell>
+                  <video
+                    className="rounded"
+                    style={{ height: "100px" }}
+                    autoPlay={true}
+                    height={300}
+                    width={250}
+                    src={data.video}
+                  ></video>
+                </CTableDataCell>
+                <CTableDataCell>test</CTableDataCell>
+                <CTableDataCell>test@gmail.com</CTableDataCell>
+                <CTableDataCell>
+                  <CButton className="btn btn-primary">Send</CButton>
+                </CTableDataCell>
+              </CTableRow>
+              <CTableRow>
+                <CTableDataCell>
+                  <video
+                    className="rounded"
+                    style={{ height: "100px" }}
+                    autoPlay={true}
+                    height={300}
+                    width={250}
+                    src={data.video}
+                  ></video>
+                </CTableDataCell>
+                <CTableDataCell>test</CTableDataCell>
+                <CTableDataCell>test@gmail.com</CTableDataCell>
+                <CTableDataCell>
+                  <CButton className="btn btn-primary">Send</CButton>
+                </CTableDataCell>
+              </CTableRow>
+              <CTableRow>
+                <CTableDataCell>
+                  <video
+                    className="rounded"
+                    style={{ height: "100px" }}
+                    autoPlay={true}
+                    height={300}
+                    width={250}
+                    src={data.video}
+                  ></video>
+                </CTableDataCell>
+                <CTableDataCell>test</CTableDataCell>
+                <CTableDataCell>test@gmail.com</CTableDataCell>
+                <CTableDataCell>
+                  <CButton className="btn btn-primary">Send</CButton>
+                </CTableDataCell>
+              </CTableRow>
+            </CTableBody>
+          </CTable>
+        </div>
+      )}
     </div>
   );
 };

src/views/Campaigns/VideoTemplate.js

@@ -1,19 +1,176 @@
 import React, { useState } from "react";
 import Button from "@material-ui/core/Button";
+import styled from "styled-components";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
 
-const VideoTemplate = () => {
+const GridContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 0px;
+`;
+
+const GridItem = styled.div`
+  display: grid;
+  font-size: 20px;
+  text-align: center;
+`;
+
+const UploadContainer = styled.div`
+  width: 100%;
+  border: 1.5px dashed gray;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`;
+
+const UploadButton = styled.button`
+  margin-top: 20px;
+  border: none;
+  font-size: 15px;
+  padding: 10px;
+`;
+
+const VideoPreview = styled.video`
+  width: 100%;
+  height: 20rem;
+  margin-top: 50px;
+`;
+
+const DeleteButton = styled.button`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: transparent;
+  border: none;
+`;
+
+const VideoTemplate = ({ props }) => {
+  const token = isAutheticated();
+  const { data, setData, handleView } = props;
   const [selectedFile, setSelectedFile] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [transcribedText, setTranscribedText] = useState("");
 
-  const handleFileChange = (e) => {
+  const handleVideoUpload = async (e) => {
     const file = e.target.files[0];
     if (file) {
-      setSelectedFile(URL.createObjectURL(file));
+      setData((prev) => ({
+        ...prev,
+        [e.target.id]: file,
+      }));
+    }
+
+    setSelectedFile(URL.createObjectURL(file));
+
+    setIsLoading(true);
+    try {
+      const formData = new FormData();
+      // console.log(data.video);
+      formData.append("videoTemplate", data.video);
+
+      const response = await axios.post("/api/campaign/convert", formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/form-data",
+          "Access-Control-Allow-Origin": "*",
+        },
+      });
+
+      const { success, message, text } = response.data;
+      if (success) {
+        setTranscribedText(text);
+        setIsLoading(false);
+        swal({
+          title: "Converted",
+          text: "Text Extracted Successfully",
+          icon: "success",
+          button: "Close",
+        });
+      } else {
+        swal({
+          title: "API Error",
+          text: message,
+          icon: "error",
+          button: "Close",
+        });
+        setIsLoading(false);
+        console.log("API Error:", message);
+      }
+    } catch (error) {
+      swal({
+        title: "Network Error",
+        text: error.message,
+        icon: "error",
+        button: "Close",
+      });
+      setIsLoading(false);
+      console.log("Network Error:", error.message);
     }
   };
 
   const handleDelete = () => {
     setSelectedFile(null);
-    // You can also perform additional actions here, such as clearing the file input field.
+  };
+
+  const extractText = async (e) => {
+    e.preventDefault();
+
+    if (data.video === null) {
+      swal({
+        title: "Error",
+        text: "Please upload video",
+        icon: "error",
+        button: "Close",
+      });
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const formData = new FormData();
+      // console.log(data.video);
+      formData.append("videoTemplate", data.video);
+
+      const response = await axios.post("/api/campaign/convert", formData, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "multipart/form-data",
+          "Access-Control-Allow-Origin": "*",
+        },
+      });
+
+      const { success, message, text } = response.data;
+      if (success) {
+        setTranscribedText(text);
+        setIsLoading(false);
+        swal({
+          title: "Converted",
+          text: "Text Extracted Successfully",
+          icon: "success",
+          button: "Close",
+        });
+      } else {
+        swal({
+          title: "API Error",
+          text: message,
+          icon: "error",
+          button: "Close",
+        });
+        setIsLoading(false);
+        console.log("API Error:", message);
+      }
+    } catch (error) {
+      swal({
+        title: "Network Error",
+        text: error.message,
+        icon: "error",
+        button: "Close",
+      });
+      setIsLoading(false);
+      console.log("Network Error:", error.message);
+    }
   };
 
   return (
@@ -22,7 +179,7 @@ const VideoTemplate = () => {
         <div className="col-12">
           <div className="page-title-box d-flex align-items-center justify-content-between">
             <div style={{ fontSize: "22px" }} className="fw-bold">
-              Upload Video
+              Upload Video to Create Template
             </div>
             <div style={{ display: "flex", gap: "1rem" }}>
               <h4 className="mb-0"></h4>
@@ -39,7 +196,7 @@ const VideoTemplate = () => {
                   marginRight: "5px",
                 }}
                 onClick={() => {
-                  handeView(1);
+                  handleView(1);
                 }}
               >
                 Prev
@@ -53,7 +210,7 @@ const VideoTemplate = () => {
                   textTransform: "capitalize",
                 }}
                 onClick={() => {
-                  handeView(3);
+                  handleView(3);
                 }}
               >
                 Next
@@ -64,55 +221,51 @@ const VideoTemplate = () => {
       </div>
       <div className="row">
         <div className="col-sm-12 col-md-12 col-lg-12">
-          <div
+          <GridContainer>
-            className="card"
+            <GridItem
-            style={{
+              style={{
-              height: "auto",
+                overflowY: "auto",
-              display: "flex",
+                height: "30rem",
-              flexDirection: "column",
+                textAlign: "left",
-              alignItems: "center",
+              }}
-              justifyContent: "center",
+            >
-            }}
+              {isLoading
-          >
+                ? "Please wait. We are converting your video to text ..."
-            <div className="card-body px-5">
+                : transcribedText || "Transcribed Text will be displayed here"}
-              <div className="mb-3">
+            </GridItem>
-                <label>Upload Video</label>
+            <GridItem style={{ width: "30rem" }}>
-                <div>
+              <>
-                  <input
+                {selectedFile ? (
-                    type="file"
+                  <>
-                    id="video"
+                    <VideoPreview controls src={selectedFile}>
-                    accept="video/*"
-                    onChange={handleFileChange}
-                  />
-                </div>
-              </div>
-              {selectedFile && (
-                <div className="video-preview-container">
-                  <div className="text-container">
-                    {/* Add spacing text on the left */}
-                    <p>This is some text with spacing</p>
-                  </div>
-                  <div className="video-container">
-                    <span
-                      className="d-flex justify-content-end"
-                      style={{ fontSize: "30px", cursor: "pointer" }}
-                      onClick={handleDelete}
-                    >
-                      &times;
-                    </span>
-                    <video
-                      controls
-                      width="80%"
-                      style={{ height: "auto", maxWidth: "100%" }}
-                    >
-                      <source src={selectedFile} type="video/mp4" />
                       Your browser does not support the video tag.
-                    </video>
+                    </VideoPreview>
-                  </div>
+                    <DeleteButton onClick={handleDelete}>&times;</DeleteButton>
-                </div>
+                  </>
-              )}
+                ) : (
-            </div>
+                  <UploadContainer>
-          </div>
+                    <input
+                      type="file"
+                      id="video"
+                      accept="video/*"
+                      onChange={handleVideoUpload}
+                      style={{ display: "none" }}
+                    />
+                    <label htmlFor="video">
+                      {isLoading
+                        ? "Please wait. We are converting your video to text ..."
+                        : "Upload Your Videos to extract text from it"}
+                    </label>
+                    <UploadButton
+                      onClick={() => document.getElementById("video").click()}
+                    >
+                      SELECT FILES
+                    </UploadButton>
+                  </UploadContainer>
+                )}
+              </>
+            </GridItem>
+          </GridContainer>
         </div>
       </div>
     </div>