changes on campaign

src/components/AppFooter.js

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
-import { CFooter } from '@coreui/react'
+import { CFooter } from "@coreui/react";
-import { isAutheticated } from 'src/auth'
+import { isAutheticated } from "src/auth";
-import axios from 'axios'
+import axios from "axios";
 
 const AppFooter = () => {
-  const token = isAutheticated()
+  const token = isAutheticated();
 
-  const [copyright, setCopyright] = useState('')
+  const [copyright, setCopyright] = useState("");
 
   useEffect(() => {
     async function getConfiguration() {
@@ -14,24 +14,23 @@ const AppFooter = () => {
         headers: {
           Authorization: `Bearer ${token}`,
         },
-      })
+      });
       configDetails.data.result.map((item) => {
-        setCopyright(item?.copyrightMessage)
+        setCopyright(item?.copyrightMessage);
-
+      });
-      })
     }
-    getConfiguration()
+    getConfiguration();
-  }, [])
+  }, []);
 
   return (
     <CFooter>
       <div>
-
+        <span className="ms-1">
-        <span className="ms-1">{new Date().getFullYear()} &copy; {copyright ? copyright : ''} .</span>
+          {new Date().getFullYear()} &copy; {copyright ? copyright : ""} .
+        </span>
       </div>
-
     </CFooter>
-  )
+  );
-}
+};
 
-export default React.memo(AppFooter)
+export default React.memo(AppFooter);

src/views/Campaigns/AddCampaign.js

@@ -22,6 +22,10 @@ import { isAutheticated } from "src/auth";
 import BasicDetaiils from "./BasicDetaiils.js";
 import ContactDetails from "./ContactDetails.js";
 import Preview from "./Preview.js";
+import Videos from "./Video.js";
+import TestLaunch from "./TestLaunch.js";
+import Status from "./Status.js";
+import VideoTemplate from "./VideoTemplate.js";
 
 const AddCampaign = () => {
   const token = isAutheticated();
@@ -38,7 +42,16 @@ const AddCampaign = () => {
     campaignType: "",
     video: null,
     spreadSheet: null,
-    recipients: [{ name: "", phoneNumber: "" }],
+    videos: [null, null],
+    recipients: [{ name: "", phoneNumber: "", email: "" }],
+    testRecipents: [
+      {
+        name: "",
+        phoneNumber: "",
+        email: "",
+        status: ["delivered"],
+      },
+    ],
   });
 
   // console.log(data)
@@ -139,7 +152,7 @@ const AddCampaign = () => {
   //       });
   //   };
 
-  console.log(data);
+  // console.log(data);
 
   return (
     <CContainer>
@@ -209,14 +222,15 @@ const AddCampaign = () => {
                   />
                 )}
 
-                {viewState === 2 && (
+                {viewState === 2 && <VideoTemplate />}
+                {viewState === 3 && (
                   <ContactDetails props={{ data, setData, handleView }} />
                 )}
 
-                {viewState === 3 && (
+                {viewState === 4 && (
                   <Preview props={{ data, setData, handleView }} />
                 )}
-                {viewState === 4 && (
+                {/* {viewState === 4 && (
                   <BAddress
                     data={{ data, setData }}
                     handleView={handleView}
@@ -224,6 +238,15 @@ const AddCampaign = () => {
                     // data={{ images, setImages }}
                     loading={{ loading, setLoading }}
                   />
+                )} */}
+                {viewState === 5 && (
+                  <Videos props={{ data, setData, handleView }} />
+                )}
+                {viewState === 6 && (
+                  <TestLaunch props={{ data, setData, handleView }} />
+                )}
+                {viewState === 7 && (
+                  <Status props={{ data, setData, handleView }} />
                 )}
               </CCardBody>
             </CCard>
@@ -263,6 +286,17 @@ const AddCampaign = () => {
                         : "btn btn-info text-white"
                     }
                     type="button"
+                    onClick={() => handleView(2)}
+                  >
+                    Video Template
+                  </button>
+                  <button
+                    className={
+                      viewState === 3
+                        ? "btn btn-light"
+                        : "btn btn-info text-white"
+                    }
+                    type="button"
                     onClick={() => handleView(3)}
                   >
                     Contact Details
@@ -274,7 +308,7 @@ const AddCampaign = () => {
                         : "btn btn-info text-white"
                     }
                     type="button"
-                    onClick={() => handleView(5)}
+                    onClick={() => handleView(4)}
                   >
                     Preview
                   </button>
@@ -296,7 +330,7 @@ const AddCampaign = () => {
                         : "btn btn-info text-white"
                     }
                     type="button"
-                    onClick={() => handleView(5)}
+                    onClick={() => handleView(6)}
                   >
                     Test & Launch
                   </button>
@@ -307,7 +341,7 @@ const AddCampaign = () => {
                         : "btn btn-info text-white"
                     }
                     type="button"
-                    onClick={() => handleView(5)}
+                    onClick={() => handleView(7)}
                   >
                     Status
                   </button>

src/views/Campaigns/ContactDetails.js

@@ -10,6 +10,7 @@ const ContactDetails = ({ props }) => {
   const [csvData, setCsvData] = useState([]);
   // const [recipients, setRecipients] = useState([{ name: "", phoneNumber: "" }]);
   // console.log("data", data);
+
   const addRecord = () => {
     setData((prevData) => ({
       ...prevData,
@@ -107,7 +108,7 @@ const ContactDetails = ({ props }) => {
             : recipient.email !== "")
       )
     ) {
-      handleView(3);
+      handleView(4);
     } else {
       toast.error("Fill all contact details");
     }
@@ -115,49 +116,49 @@ const ContactDetails = ({ props }) => {
 
   return (
     <div className="container">
-      <div>
+      <div className="row">
-        <div className="row">
+        <div className="col-12">
-          <div className="col-12">
+          <div className="page-title-box d-flex align-items-center justify-content-between">
-            <div className="page-title-box d-flex align-items-center justify-content-between">
+            <div className="form-group">
-              <div>
+              <label htmlFor="dataEntryMethod">
-                <label>
+                Data Entry Method:
-                  Data Entry Method:
+                <select
-                  <select
+                  className="form-control"
-                    value={dataEntryMethod}
+                  id="dataEntryMethod"
-                    onChange={(e) => setDataEntryMethod(e.target.value)}
+                  value={dataEntryMethod}
-                  >
+                  onChange={(e) => setDataEntryMethod(e.target.value)}
-                    <option value="manual">Manually</option>
-                    <option value="spreadsheet">Using Spreadsheet</option>
-                  </select>
-                </label>
-              </div>
-              <div className="page-title-right">
-                <Button
-                  variant="contained"
-                  color="secondary"
-                  style={{
-                    fontWeight: "bold",
-                    marginBottom: "1rem",
-                    textTransform: "capitalize",
-                    marginRight: "5px",
-                  }}
-                  onClick={() => handleView(1)}
                 >
-                  Prev
+                  <option value="manual">Manually</option>
-                </Button>
+                  <option value="spreadsheet">Using Spreadsheet</option>
-                <Button
+                </select>
-                  variant="contained"
+              </label>
-                  color="secondary"
+            </div>
-                  style={{
+            <div className="page-title-right">
-                    fontWeight: "bold",
+              <Button
-                    marginBottom: "1rem",
+                variant="contained"
-                    textTransform: "capitalize",
+                color="secondary"
-                  }}
+                style={{
-                  onClick={handleSubmit}
+                  fontWeight: "bold",
-                >
+                  marginBottom: "1rem",
-                  Next
+                  textTransform: "capitalize",
-                </Button>
+                  marginRight: "5px",
-              </div>
+                }}
+                onClick={() => handleView(2)}
+              >
+                Prev
+              </Button>
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                }}
+                onClick={handleSubmit}
+              >
+                Next
+              </Button>
             </div>
           </div>
         </div>
@@ -255,7 +256,7 @@ const ContactDetails = ({ props }) => {
                 <div className="card-body px-5">
                   <div className="row mb-3 border p-3 rounded">
                     <div className="mb-3">
-                      <label htmlFor="title" className="form-label">
+                      <label htmlFor="spreadsheet" className="form-label">
                         Upload Spreadsheet
                       </label>
                       <input

src/views/Campaigns/Preview.js

@@ -41,7 +41,7 @@ const Preview = ({ props }) => {
                 textTransform: "capitalize",
               }}
               onClick={() => {
-                handleView(4);
+                handleView(5);
               }}
             >
               Next

src/views/Campaigns/Status.js

@@ -0,0 +1,144 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import {
+  CButton,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableRow,
+} from "@coreui/react";
+
+const TestLaunch = ({ props }) => {
+  const { data, setData, handleView } = props;
+
+  console.log(data);
+
+  const renderTableRows = () => {
+    return data.testRecipents.map((recipient, index) => (
+      <CTableRow key={index}>
+        <CTableDataCell>
+          <video
+            className="rounded"
+            style={{ height: "100px" }}
+            autoPlay={true}
+            height={300}
+            width={250}
+            src={data.video}
+          ></video>
+        </CTableDataCell>
+        <CTableDataCell>{recipient.name}</CTableDataCell>
+        <CTableDataCell>
+          {data.campaignType === "email"
+            ? recipient.email
+            : recipient.phoneNumber}
+        </CTableDataCell>
+        <CTableDataCell>{recipient.status}</CTableDataCell>
+      </CTableRow>
+    ));
+  };
+
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col-12">
+          <div
+            className="
+                page-title-box
+                d-flex
+                align-items-center
+                justify-content-between
+              "
+          >
+            <div style={{ fontSize: "22px" }} className="fw-bold">
+              Status
+            </div>
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <h4 className="mb-0"></h4>
+            </div>
+            <div className="page-title-right">
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                  marginRight: "5px",
+                }}
+                onClick={() => handleView(6)}
+              >
+                Prev
+              </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">Status</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>delivered</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>sent</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>read</CTableDataCell>
+              </CTableRow>
+            </CTableBody>
+          </CTable>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TestLaunch;

src/views/Campaigns/TestLaunch.js

@@ -0,0 +1,209 @@
+import React from "react";
+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";
+
+const TestLaunch = ({ props }) => {
+  const { data, setData, handleView } = props;
+  // const [recipients, setRecipients] = useState([{ name: "", phoneNumber: "" }]);
+  console.log("data", data);
+
+  const addRecord = () => {
+    setData((prevData) => ({
+      ...prevData,
+      testRecipents: [
+        ...prevData.testRecipents,
+        { name: "", phoneNumber: "", email: "" },
+      ],
+    }));
+  };
+
+  const deleteRecipient = (index) => {
+    const updatedRecipients = [...data.testRecipents];
+    updatedRecipients.splice(index, 1);
+    setData((prevData) => ({
+      ...prevData,
+      testRecipents: updatedRecipients,
+    }));
+  };
+
+  const recipientNameChange = (e, index) => {
+    const updatedRecipients = [...data.testRecipents];
+    updatedRecipients[index] = {
+      ...updatedRecipients[index],
+      name: e.target.value,
+    };
+    setData((prevData) => ({
+      ...prevData,
+      testRecipents: updatedRecipients,
+    }));
+  };
+
+  const recipientNumberChange = (e, index) => {
+    const updatedRecipients = [...data.testRecipents];
+    updatedRecipients[index] = {
+      ...updatedRecipients[index],
+      phoneNumber: e.target.value,
+    };
+    setData((prevData) => ({
+      ...prevData,
+      testRecipents: updatedRecipients,
+    }));
+  };
+
+  const recipientEmailChange = (e, index) => {
+    const updatedRecipients = [...data.testRecipents];
+    updatedRecipients[index] = {
+      ...updatedRecipients[index],
+      email: e.target.value,
+    };
+    setData((prevData) => ({
+      ...prevData,
+      testRecipents: updatedRecipients,
+    }));
+  };
+
+  const handleSubmit = () => {
+    //     if (
+    //       data?.testRecipents.every(
+    //         (testRecipent) =>
+    //           testRecipent.name !== "" &&
+    //           (data?.campaignType !== "email"
+    //             ? testRecipent.phoneNumber !== ""
+    //             : testRecipent.email !== "")
+    //       )
+    //     ) {
+    //       handleView(6);
+    //     } else {
+    //       toast.error("Fill all contact details");
+    //     }
+  };
+
+  console.log(data);
+
+  return (
+    <div className="container">
+      <div className="page-title-right d-flex align-items-center justify-content-end">
+        <Button
+          variant="contained"
+          color="secondary"
+          style={{
+            fontWeight: "bold",
+            marginBottom: "1rem",
+            textTransform: "capitalize",
+            marginRight: "5px",
+          }}
+          onClick={() => handleView(5)}
+        >
+          Prev
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          style={{
+            fontWeight: "bold",
+            marginBottom: "1rem",
+            textTransform: "capitalize",
+          }}
+          onClick={() => handleView(7)}
+        >
+          Next
+        </Button>
+      </div>
+
+      <div className="row">
+        <div className="col-md-12 my-3">
+          <div className="card h-100">
+            <div className="card-body px-5">
+              <div style={{ fontSize: "22px" }} className="fw-bold">
+                Test & Launch
+              </div>
+              {data?.testRecipents.map((testRecipent, index) => {
+                return (
+                  <div className="row mb-3 border p-3 rounded">
+                    <div className="col-md-6 d-flex align-items-center">
+                      <label htmlFor="title" className="form-label me-2">
+                        Name
+                      </label>
+                      <input
+                        type="text"
+                        className="form-control"
+                        name={`name-${index}`}
+                        value={testRecipent?.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">
+                        {data?.campaignType === "rcs" ||
+                        data?.campaignType === "whatsapp"
+                          ? "Phone Number"
+                          : "Email"}
+                      </label>
+                      <input
+                        type={
+                          data?.campaignType === "rcs" ||
+                          data?.campaignType === "whatsapp"
+                            ? "number"
+                            : "email"
+                        }
+                        className="form-control"
+                        id={`recipients-phone-number-${index}`}
+                        maxLength="50"
+                        name={`toPhoneNumber-${index}`}
+                        value={
+                          data?.campaignType === "rcs" ||
+                          data?.campaignType === "whatsapp"
+                            ? testRecipent?.phoneNumber
+                            : testRecipent?.email
+                        }
+                        onChange={(e) =>
+                          data?.campaignType === "rcs" ||
+                          data?.campaignType === "whatsapp"
+                            ? recipientNumberChange(e, index)
+                            : recipientEmailChange(e, index)
+                        }
+                      />
+                    </div>
+                    {index !== 0 && (
+                      <div className="col-12">
+                        <button
+                          onClick={() => {
+                            deleteRecipient(index);
+                          }}
+                          className="btn btn-danger btn-sm rounded-5 fw-bold mt-2"
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+              <div className="col-md-12">
+                <button
+                  onClick={() => {
+                    addRecord();
+                  }}
+                  className="btn btn-secondary"
+                >
+                  Add another record
+                </button>
+              </div>
+            </div>
+            <div className="col-md-12 d-flex justify-content-end p-3">
+              <button className="btn btn-primary">Send</button>
+            </div>
+          </div>
+          <div className="col-md-12">
+            <button className="btn btn-primary">Launch</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TestLaunch;

src/views/Campaigns/Video.js

@@ -0,0 +1,141 @@
+import React, { useState } from "react";
+import Button from "@material-ui/core/Button";
+
+const Video = ({ props }) => {
+  const { data, setData, handleView } = props;
+
+  const handleVideoUpload = (e, index) => {
+    const file = e.target.files[0];
+    setData((prev) => ({
+      ...prev,
+      videos: prev.videos.map((video, i) =>
+        i === index ? { ...video, title: URL.createObjectURL(file) } : video
+      ),
+    }));
+  };
+
+  const addRecord = () => {
+    setData((prev) => ({
+      ...prev,
+      videos: [...prev.videos, null],
+    }));
+  };
+
+  const deleteRecord = (index) => {
+    if (index >= 2) {
+      // Only allow deletion for videos starting from the third one
+      setData((prev) => ({
+        ...prev,
+        videos: prev.videos.filter((_, i) => i !== index),
+      }));
+    }
+  };
+
+  console.log(data);
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col-12">
+          <div
+            className="
+                page-title-box
+                d-flex
+                align-items-center
+                justify-content-between
+              "
+          >
+            <div style={{ fontSize: "22px" }} className="fw-bold">
+              Videos
+            </div>
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <h4 className="mb-0"></h4>
+            </div>
+
+            <div className="page-title-right">
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                  marginRight: "5px",
+                }}
+                onClick={() => props.handleView(4)}
+              >
+                Prev
+              </Button>
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                }}
+                onClick={() => {
+                  if (data?.videos === null) {
+                    toast.error("Fill all details");
+                  } else {
+                    handleView(6);
+                  }
+                }}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="row mb-2">
+        <div className="col-sm-12 col-md-12 col-lg-12 my-1">
+          <div className="card h-100">
+            <div className="card-body px-5">
+              {data?.videos.map((video, index) => (
+                <div className="mb-3" key={index}>
+                  <label
+                    htmlFor={`videoTitle${index + 1}`}
+                    className="form-label"
+                  >
+                    Upload Video
+                  </label>
+                  <input
+                    type="file"
+                    className="form-control"
+                    id={`videoTitle${index + 1}`}
+                    onChange={(e) => handleVideoUpload(e, index)}
+                  />
+                  {index >= 2 && ( // Render delete button for videos starting from the third one
+                    <div className="col-12">
+                      <button
+                        onClick={() => {
+                          deleteRecord(index);
+                        }}
+                        className="btn btn-danger btn-sm rounded-5 fw-bold mt-2"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  )}
+                </div>
+              ))}
+              <div className="col-md-12">
+                <button onClick={addRecord} className="btn btn-secondary">
+                  Add another record
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="col-md-12">
+        <button onClick={addRecord} className="btn btn-primary">
+          Merge Videos
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Video;

src/views/Campaigns/VideoTemplate.js

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import Button from "@material-ui/core/Button";
+
+const VideoTemplate = () => {
+  const [selectedFile, setSelectedFile] = useState(null);
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setSelectedFile(URL.createObjectURL(file));
+    }
+  };
+
+  const handleDelete = () => {
+    setSelectedFile(null);
+    // You can also perform additional actions here, such as clearing the file input field.
+  };
+
+  return (
+    <div className="container">
+      <div className="row">
+        <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
+            </div>
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <h4 className="mb-0"></h4>
+            </div>
+
+            <div className="page-title-right">
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                  marginRight: "5px",
+                }}
+                onClick={() => {
+                  handeView(1);
+                }}
+              >
+                Prev
+              </Button>
+              <Button
+                variant="contained"
+                color="secondary"
+                style={{
+                  fontWeight: "bold",
+                  marginBottom: "1rem",
+                  textTransform: "capitalize",
+                }}
+                onClick={() => {
+                  handeView(3);
+                }}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col-sm-12 col-md-12 col-lg-12">
+          <div
+            className="card"
+            style={{
+              height: "auto",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <div className="card-body px-5">
+              <div className="mb-3">
+                <label>Upload Video</label>
+                <div>
+                  <input
+                    type="file"
+                    id="video"
+                    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>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VideoTemplate;

src/views/Campaigns/VideoTemplate.module.css

@@ -0,0 +1,83 @@
+.card {
+    padding: 10px;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.card p {
+    text-align: center;
+}
+
+.card .dragArea {
+    height: 150px;
+    border-radius: 5px;
+    border: 1px solid black;
+    color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.card .dragArea .visible {
+    font-size: 18px;
+}
+
+.card .select {
+    color: red;
+    margin-left: 5px;
+    cursor: pointer;
+    transition: 0.4s;
+}
+
+.card .select:hover {
+    opacity: 0.6;
+}
+
+.card .container {
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 10px;
+}
+
+.card .container .file {
+    width: 75px;
+    margin-right: 5px;
+    height: 75px;
+    position: relative;
+    margin-bottom: 8px;
+
+}
+
+.card .container .file video {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+
+}
+
+.card .container .file span {
+    position: absolute;
+    top: -2px;
+    right: 9px;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.card input,
+.card .dragArea .on-drop,
+.card .dragArea.dragover .visible {
+    display: none;
+}
+
+.delete {
+    z-index: 999;
+    color: red;
+}