added voiceid and audio url

.env

@@ -1,2 +1,3 @@
 PORT = 3000
 CHOKIDAR_USEPOLLING = true
+XI_API_KEY="e327fdf320043677a512f1b0dade8403"

package.json

@@ -30,23 +30,37 @@
     "coreui_library_short_version": "4.1"
   },
   "dependencies": {
+    "@coreui/chartjs": "^3.0.0",
     "@coreui/coreui": "^4.1.0",
     "@coreui/icons": "^2.1.0",
+    "@coreui/icons-react": "^2.0.0",
     "@coreui/react": "^4.3.0",
+    "@coreui/react-chartjs": "^2.0.0",
     "@coreui/utils": "^1.3.1",
     "@material-ui/core": "^4.12.4",
+    "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@mui/material": "^5.11.12",
     "@reduxjs/toolkit": "^1.9.2",
     "axios": "^0.25.0",
+    "bootstrap": "^5.1.3",
+    "country-state-city": "^3.1.2",
     "prop-types": "^15.7.2",
     "react": "18.0.0",
     "react-bootstrap": "^2.7.0",
+    "react-datepicker": "^4.8.0",
     "react-dom": "^18.0.0",
+    "react-hot-toast": "^2.4.0",
+    "react-qr-code": "^2.0.11",
     "react-redux": "^7.2.9",
     "react-router-dom": "^6.7.0",
+    "react-spinners": "^0.11.0",
+    "react-to-print": "^2.14.11",
     "redux": "4.1.2",
     "serve": "^13.0.2",
-    "styled-components": "^6.0.8"
+    "simplebar-react": "^2.3.6",
+    "styled-components": "^6.0.8",
+    "sweetalert": "^2.1.2",
+    "sweetalert2": "^11.4.0"
   },
   "devDependencies": {
     "auto-changelog": "~2.3.0",

src/_nav.js

@@ -2,38 +2,19 @@ import React from "react";
 import CIcon from "@coreui/icons-react";
 import {
   cilAddressBook,
-  cilAirplaneMode,
   cilAppsSettings,
-  cilBell,
   cilBrush,
-  cilCalculator,
-  cilCalendar,
   cilCart,
-  cilChartPie,
   cilClipboard,
   cilCommand,
   cilCompress,
   cilContact,
-  cilCursor,
-  cilDrop,
-  cilFace,
-  cilFilterSquare,
-  cilInfo,
   cilLanguage,
   cilLoopCircular,
   cilMedicalCross,
-  cilMoney,
-  cilMugTea,
-  cilNewspaper,
   cilNotes,
-  cilPencil,
-  cilPuzzle,
-  cilSitemap,
   cilSpeedometer,
-  cilStar,
   cilSwapHorizontal,
-  cilTablet,
-  cilTags,
   cilTennisBall,
   cilText,
   cilUser,
@@ -150,37 +131,6 @@ const _nav = [
         icon: <CIcon icon={cilBrush} customClassName="nav-icon" />,
         to: "/business_type",
       },
-
-      // {
-      //   component: CNavItem,
-      //   name: 'States',
-      //   icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
-      //   to: '/states',
-      // },
-      // {
-      //   component: CNavItem,
-      //   name: 'Standard Shipping',
-      //   icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
-      //   to: '/shipping',
-      // },
-      // {
-      //   component: CNavItem,
-      //   name: 'Custom Shipping',
-      //   icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
-      //   to: '/custom-shipping',
-      // },
-      // {
-      //   component: CNavItem,
-      //   name: 'Pincode',
-      //   icon: <CIcon icon={cilCommand} customClassName="nav-icon" />,
-      //   to: '/pincode',
-      // },
-      // {
-      //   component: CNavItem,
-      //   name: 'Tax Rates',
-      //   icon: <CIcon icon={cilTags} customClassName="nav-icon" />,
-      //   to: '/tax',
-      // },
       {
         component: CNavItem,
         name: "Languages",
@@ -226,40 +176,6 @@ 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/views/Campaigns/VideoTemplate.js

@@ -50,26 +50,27 @@ const DeleteButton = styled.button`
 const VideoTemplate = ({ props }) => {
   const token = isAutheticated();
   const { data, setData, handleView } = props;
-  const [selectedFile, setSelectedFile] = useState(null);
+  const [selectedFile, setSelectedFile] = useState();
   const [isLoading, setIsLoading] = useState(false);
   const [transcribedText, setTranscribedText] = useState("");
   const [audioUrl, setAudioUrl] = useState();
+  const [elevenLabsVoiceId, setElevenLabsVoiceId] = useState("");
 
   const handleVideoUpload = async (e) => {
     const file = e.target.files[0];
-    if (file) {
+    if (!file) return;
+
     setData((prev) => ({
       ...prev,
       [e.target.id]: file,
     }));
-    }
 
     setSelectedFile(URL.createObjectURL(file));
 
     setIsLoading(true);
     try {
       const formData = new FormData();
-      // console.log(data.video);
+      console.log(data.video);
       formData.append("videoTemplate", data.video);
       // console.log(Object.fromEntries(formData));
       const response = await axios.post("/api/campaign/convert", formData, {
@@ -80,10 +81,11 @@ const VideoTemplate = ({ props }) => {
         },
       });
 
-      const { success, message, text, audio } = response.data;
+      const { success, message, text, audio, voiceId } = response.data;
       if (success) {
         setAudioUrl(audio);
         setTranscribedText(text);
+        setElevenLabsVoiceId(voiceId);
         setIsLoading(false);
         swal({
           title: "Converted",
@@ -109,7 +111,7 @@ const VideoTemplate = ({ props }) => {
         button: "Close",
       });
       setIsLoading(false);
-      console.log("Network Error:", error.message);
+      console.log("Network Error:", error);
     }
   };
 
@@ -165,14 +167,13 @@ const VideoTemplate = ({ props }) => {
       </div>
       <div className="row">
         <div className="col-sm-12 col-md-12 col-lg-12">
-          <div>
+          <div style={{ padding: "10px" }}>
-            <a
+            <a href={audioUrl} target="_blank">
-              style={{ padding: "10px", backgroundColor: "#f5f5f5" }}
+              Your audioUrl: {audioUrl ? audioUrl : null}
-              href={audioUrl}
-              target="_blank"
-            >
-              {audioUrl ? audioUrl : null}
             </a>
+            <p>
+              {elevenLabsVoiceId ? `Your VoiceId: ${elevenLabsVoiceId}` : null}
+            </p>
           </div>
           <GridContainer>
             <GridItem