diff --git a/package.json b/package.json index 095caf2..691136c 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,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", diff --git a/src/_nav.js b/src/_nav.js index f9c5d44..53c8975 100644 --- a/src/_nav.js +++ b/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: , }, - { component: CNavItem, - name: "Products", - icon: , - to: "/products", + name: "Campaigns", + icon: , + to: "/campaigns", }, - // { - // component: CNavItem, - // name: 'Departures', - // icon: , - // to: '/departures', - // }, - { - component: CNavItem, - name: "Testimonials", - icon: , - to: "/testimonials", - }, - { - component: CNavItem, - name: "Contact Requests", - icon: , - to: "/contact/request", - }, - - // { - // component: CNavItem, - // name: 'Information', - // icon: , - // to: '/informations', - // }, - - { - component: CNavItem, - name: "Appointments", - icon: , - to: "/appointments", - }, - { component: CNavItem, name: "Users", icon: , to: "/users", }, + { + component: CNavItem, + name: "Recipients", + icon: , + to: "/recipents", + }, + { + component: CNavItem, + name: "Products", + icon: , + to: "/products", + }, { component: CNavGroup, - name: "Franchisee Orders", + name: "Orders", icon: , items: [ { @@ -137,19 +114,24 @@ const _nav = [ }, ], }, - { - component: CNavItem, - name: "Recipients", - icon: , - to: "/recipents", - }, - { - component: CNavItem, - name: "Campaigns", - icon: , - to: "/campaigns", + component: CNavGroup, + name: "Website Related", + icon: , + items: [ + { + component: CNavItem, + name: "Testimonials", + icon: , + to: "/testimonials", + }, + { + component: CNavItem, + name: "Contact Requests", + icon: , + to: "/contact/request", + }, + ], }, { component: CNavGroup, @@ -244,6 +226,40 @@ const _nav = [ }, ], }, + + // { + // component: CNavItem, + // name: 'Departures', + // icon: , + // to: '/departures', + // }, + + // { + // component: CNavItem, + // name: "Testimonials", + // icon: , + // to: "/testimonials", + // }, + // { + // component: CNavItem, + // name: "Contact Requests", + // icon: , + // to: "/contact/request", + // }, + + // { + // component: CNavItem, + // name: 'Information', + // icon: , + // to: '/informations', + // }, + + // { + // component: CNavItem, + // name: "Appointments", + // icon: , + // to: "/appointments", + // }, ]; export default _nav; diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js index 7ad2c6e..d269634 100644 --- a/src/components/AppHeader.js +++ b/src/components/AppHeader.js @@ -1,6 +1,6 @@ -import React from 'react' -import { NavLink } from 'react-router-dom' -import { useSelector, useDispatch } from 'react-redux' +import React from "react"; +import { NavLink } from "react-router-dom"; +import { useSelector, useDispatch } from "react-redux"; import { CContainer, CHeader, @@ -10,24 +10,23 @@ import { CHeaderToggler, CNavLink, CNavItem, -} from '@coreui/react' -import CIcon from '@coreui/icons-react' -import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons' +} from "@coreui/react"; +import CIcon from "@coreui/icons-react"; +import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from "@coreui/icons"; -import { AppBreadcrumb } from './index' -import { AppHeaderDropdown } from './header/index' -import { logo } from 'src/assets/brand/logo' -import axios from 'axios' -import { useEffect } from 'react' -import { useState } from 'react' -import { isAutheticated } from 'src/auth' +import { AppBreadcrumb } from "./index"; +import { AppHeaderDropdown } from "./header/index"; +import { logo } from "src/assets/brand/logo"; +import axios from "axios"; +import { useEffect } from "react"; +import { useState } from "react"; +import { isAutheticated } from "src/auth"; const AppHeader = () => { - const dispatch = useDispatch() - const sidebarShow = useSelector((state) => state.sidebarShow) - const [AppName, setAppName] = useState('') - const token = isAutheticated() - + const dispatch = useDispatch(); + const sidebarShow = useSelector((state) => state.sidebarShow); + const [AppName, setAppName] = useState(""); + 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 ( dispatch({ type: 'set', sidebarShow: !sidebarShow })} + onClick={() => dispatch({ type: "set", sidebarShow: !sidebarShow })} > @@ -55,7 +53,11 @@ const AppHeader = () => { - +

{AppName}

@@ -88,11 +90,9 @@ const AppHeader = () => {
- - {/* */} - + {/* */}
- ) -} + ); +}; -export default AppHeader +export default AppHeader; diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js index 3841783..fd3092e 100644 --- a/src/components/AppSidebarNav.js +++ b/src/components/AppSidebarNav.js @@ -1,11 +1,11 @@ -import React from 'react' -import { NavLink, useLocation } from 'react-router-dom' -import PropTypes from 'prop-types' +import React from "react"; +import { NavLink, useLocation } from "react-router-dom"; +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} )} - - ) - } + ); + }; const navItem = (item, index) => { - const { component, name, badge, icon, ...rest } = item - const Component = component + const { component, name, badge, icon, ...rest } = item; + const Component = component; return ( <> - {navLink(name, icon, badge)} - ) - } + ); + }; const navGroup = (item, index) => { - const { component, name, icon, to, ...rest } = item - const Component = component + const { component, name, icon, to, ...rest } = item; + const Component = component; return ( { {...rest} > {item.items?.map((item, index) => - - item.items ? navGroup(item, index) : navItem(item, index), + item.items ? navGroup(item, index) : navItem(item, index) )} - ) - } + ); + }; return ( {items && items.map((item, index) => - (item.items ? navGroup(item, index) : navItem(item, index)))} + item.items ? navGroup(item, index) : navItem(item, index) + )} - ) -} + ); +}; AppSidebarNav.propTypes = { items: PropTypes.arrayOf(PropTypes.any).isRequired, -} +}; diff --git a/src/views/Campaigns/AddCampaign.js b/src/views/Campaigns/AddCampaign.js index 8b517b2..bc99feb 100644 --- a/src/views/Campaigns/AddCampaign.js +++ b/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 = () => {
Add Campaign
-
+ {/*
- {/* */} +
-
+
*/} @@ -222,7 +222,9 @@ const AddCampaign = () => { /> )} - {viewState === 2 && } + {viewState === 2 && ( + + )} {viewState === 3 && ( )} @@ -303,7 +305,7 @@ const AddCampaign = () => { -
handleVideoUpload(e)} + id="campaignName" + value={data?.campaignName} + maxLength="50" + onChange={(e) => handleChange(e)} />
+
+ + +
diff --git a/src/views/Campaigns/Campaign.js b/src/views/Campaigns/Campaign.js index 99d6222..6a326e7 100644 --- a/src/views/Campaigns/Campaign.js +++ b/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({ - title: "Are you sure?", - icon: "error", - buttons: { - Yes: { text: "Yes", value: true }, - Cancel: { text: "Cancel", value: "cancel" }, - }, - }).then((value) => { - if (value === true) { - axios - .delete(`/api/businesses/delete/${id}`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - setSuccess((prev) => !prev); - }) - .catch((err) => { - swal({ - title: "Warning", - text: "Something went wrong!", - icon: "error", - button: "Retry", - dangerMode: true, - }); - }); - } - }); + // swal({ + // title: "Are you sure?", + // icon: "error", + // buttons: { + // Yes: { text: "Yes", value: true }, + // Cancel: { text: "Cancel", value: "cancel" }, + // }, + // }).then((value) => { + // if (value === true) { + // axios + // .delete(`/api/businesses/delete/${id}`, { + // headers: { + // "Access-Control-Allow-Origin": "*", + // Authorization: `Bearer ${token}`, + // }, + // }) + // .then((res) => { + // setSuccess((prev) => !prev); + // }) + // .catch((err) => { + // swal({ + // title: "Warning", + // text: "Something went wrong!", + // icon: "error", + // button: "Retry", + // dangerMode: true, + // }); + // }); + // } + // }); }; const formatDate = (inputDate) => { @@ -203,9 +204,9 @@ const Campaign = () => { style={{ background: "rgb(140, 213, 213)" }} > - User Name + Campaign Name {/* Logo */} - Type + Campaign Type Recipients {/* Status */} Action @@ -231,9 +232,7 @@ const Campaign = () => { showData.map((i, idx) => { return ( - - {i.userName ? i.userName : i.business} - + {i.campaignName} {/* {i.banner && i.banner ? No Image @@ -241,9 +240,7 @@ const Campaign = () => {

No image!

} */} - - {i.userType ? i.userType : i.short_url} - + {i.campaignType} {formatDate(i.createdAt)} @@ -284,7 +281,7 @@ const Campaign = () => { - + @@ -56,44 +88,38 @@ const Preview = ({ props }) => { Campaign Name - {data?.campaignName} + {campaignData.campaignName} Language - {data?.language} + {campaignData.language} Campaign Type - {data?.campaignType} + {campaignData.campaignType} - - {data?.campaignType === "email" ? "Video" : "Spreadsheet"} - + Video - {data?.campaignType === "email" ? ( - - ) : ( - {data?.spreadSheet} - )} + Recipients - {data?.recipients?.length} + {campaignData.recipients} )} - + ); }; diff --git a/src/views/Campaigns/TestLaunch.js b/src/views/Campaigns/TestLaunch.js index 31b10ea..13271e3 100644 --- a/src/views/Campaigns/TestLaunch.js +++ b/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 }) => { -
+ {/*
@@ -201,7 +209,75 @@ const TestLaunch = ({ props }) => {
-
+
*/} + {data && ( +
+ + + + Video + Name + Contact + + + + {/* {renderTableRows()} */} + + + + + + test + test@gmail.com + + Send + + + + + + + test + test@gmail.com + + Send + + + + + + + test + test@gmail.com + + Send + + + + +
+ )}
); }; diff --git a/src/views/Campaigns/Video.js b/src/views/Campaigns/Video.js index 6edb1e6..3a54c59 100644 --- a/src/views/Campaigns/Video.js +++ b/src/views/Campaigns/Video.js @@ -23,7 +23,6 @@ const Video = ({ props }) => { 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), @@ -31,7 +30,6 @@ const Video = ({ props }) => { } }; - console.log(data); return (
@@ -106,7 +104,7 @@ const Video = ({ props }) => { id={`videoTitle${index + 1}`} onChange={(e) => handleVideoUpload(e, index)} /> - {index >= 2 && ( // Render delete button for videos starting from the third one + {index >= 2 && (