Merge pull request #2 from Beameri/pratish

changes on campaign
2023-09-26 09:45:16 +05:30 · 2023-09-26 09:45:16 +05:30 · 9a846edf7f
commit 9a846edf7f
parent 08586562c6 487715ce82
9 changed files with 804 additions and 71 deletions
--- a/src/components/AppFooter.js
+++ b/src/components/AppFooter.js
@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import { CFooter } from '@coreui/react'
-import { isAutheticated } from 'src/auth'
-import axios from 'axios'
+import React, { useEffect, useState } from "react";
+import { CFooter } from "@coreui/react";
+import { isAutheticated } from "src/auth";
+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">{new Date().getFullYear()} &copy; {copyright ? copyright : ''} .</span>
+        <span className="ms-1">
+          {new Date().getFullYear()} &copy; {copyright ? copyright : ""} .
+        </span>
      </div>
-
    </CFooter>
-  )
-}
+  );
+};

-export default React.memo(AppFooter)
+export default React.memo(AppFooter);
--- a/src/views/Campaigns/AddCampaign.js
+++ b/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>
--- a/src/views/Campaigns/ContactDetails.js
+++ b/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,14 +116,15 @@ const ContactDetails = ({ props }) => {

  return (
    <div className="container">
-      <div>
      <div className="row">
        <div className="col-12">
          <div className="page-title-box d-flex align-items-center justify-content-between">
-              <div>
-                <label>
+            <div className="form-group">
+              <label htmlFor="dataEntryMethod">
                Data Entry Method:
                <select
+                  className="form-control"
+                  id="dataEntryMethod"
                  value={dataEntryMethod}
                  onChange={(e) => setDataEntryMethod(e.target.value)}
                >
@ -141,7 +143,7 @@ const ContactDetails = ({ props }) => {
                  textTransform: "capitalize",
                  marginRight: "5px",
                }}
-                  onClick={() => handleView(1)}
+                onClick={() => handleView(2)}
              >
                Prev
              </Button>
@ -161,7 +163,6 @@ const ContactDetails = ({ props }) => {
          </div>
        </div>
      </div>
-      </div>
      <div>
        {dataEntryMethod === "manual" && (
          <div className="row">
@ -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
--- a/src/views/Campaigns/Preview.js
+++ b/src/views/Campaigns/Preview.js
@ -41,7 +41,7 @@ const Preview = ({ props }) => {
                textTransform: "capitalize",
              }}
              onClick={() => {
-                handleView(4);
+                handleView(5);
              }}
            >
              Next
--- a/src/views/Campaigns/Status.js
+++ b/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;
--- a/src/views/Campaigns/TestLaunch.js
+++ b/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;
--- a/src/views/Campaigns/Video.js
+++ b/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;
--- a/src/views/Campaigns/VideoTemplate.js
+++ b/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;
--- a/src/views/Campaigns/VideoTemplate.module.css
+++ b/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;
+}