gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

user Address done and category updated with adding images

Browse Source
This commit is contained in:
print-signs 2023-10-27 18:07:01 +05:30
parent 34948d795b
commit 36d7c1beae
21 changed files with 1774 additions and 2715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -46,7 +46,7 @@
"@reduxjs/toolkit": "^1.9.2",
"axios": "^0.25.0",
"bootstrap": "^5.1.3",
"country-state-city": "^3.1.2",
"country-state-city": "^3.2.1",
"md5": "^2.3.0",
"prop-types": "^15.7.2",
"quill": "^1.3.7",
@ -66,7 +66,8 @@
"simplebar-react": "^2.3.6",
"styled-components": "^6.0.8",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.4.0"
"sweetalert2": "^11.4.0",
"uuid": "^9.0.1"
},
"devDependencies": {
"auto-changelog": "~2.3.0",

104
src/App.js
View File

@ -1,33 +1,35 @@
import React, { Component, Suspense } from 'react'
import axios from 'axios';
import { Router, Route, Routes, HashRouter } from 'react-router-dom'
import { useState, useEffect } from 'react';
import React, { Component, Suspense } from "react";
import axios from "axios";
import { Router, Route, Routes, HashRouter } from "react-router-dom";
import { useState, useEffect } from "react";
import { Toaster } from "react-hot-toast";
import './scss/style.scss'
import ForgotPassword from './views/pages/register/ForgotPassword'
import NewRegister from './views/pages/register/NewRegister'
import ProtectedRoute from './components/ProtectedRoute';
import { isAutheticated } from './auth';
import "./scss/style.scss";
import ForgotPassword from "./views/pages/register/ForgotPassword";
import NewRegister from "./views/pages/register/NewRegister";
// import ProtectedRoute from './components/ProtectedRoute';
import { isAutheticated } from "./auth";
const loading = (
<div className="pt-3 text-center">
<div className="sk-spinner sk-spinner-pulse"></div>
</div>
)
);
// import EditProducts from './views/Commerce/Editproducts'
// Containers
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
const DefaultLayout = React.lazy(() => import("./layout/DefaultLayout"));
// Pages
const Login = React.lazy(() => import('./views/pages/login/Login'))
const Register = React.lazy(() => import('./views/pages/register/Change_password'))
const Page404 = React.lazy(() => import('./views/pages/register/page404/Page404'))
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
const Login = React.lazy(() => import("./views/pages/login/Login"));
const Register = React.lazy(() =>
import("./views/pages/register/Change_password")
);
const Page404 = React.lazy(() =>
import("./views/pages/register/page404/Page404")
);
const Page500 = React.lazy(() => import("./views/pages/page500/Page500"));
const App = () => {
const [userdata, setUserData] = useState(null)
const [userdata, setUserData] = useState(null);
const token = isAutheticated();
useEffect(() => {
@ -35,7 +37,7 @@ const App = () => {
let existanceData = localStorage.getItem("authToken");
if (!existanceData) {
// console.log(existanceData.userData)
setUserData(false)
setUserData(false);
} else {
try {
// console.log('requesting user data from server')
@ -43,50 +45,62 @@ const App = () => {
headers: {
Authorization: `Bearer ${token}`,
},
})
});
// console.log(response.data)
const data = response.data
if (data.success && data.user.role === 'admin') {
const data = response.data;
if (data.success && data.user.role === "admin") {
setUserData(data.user);
} else {
setUserData(false)
setUserData(false);
}
}
catch (err) {
setUserData(false)
} catch (err) {
setUserData(false);
console.log(err);
};
}
}
}
getUser()
}, [])
};
getUser();
}, []);
return (
<HashRouter>
<Suspense fallback={loading}>
<Routes>
<Route exact path="/" name="Login Page" element={<Login />} />
<Route exact path="/register" name="Register Page" element={<NewRegister />} />
<Route exact path="/password/forgot" name="Forgot Page" element={<ForgotPassword />} />
<Route
exact
path="/register"
name="Register Page"
element={<NewRegister />}
/>
<Route
exact
path="/password/forgot"
name="Forgot Page"
element={<ForgotPassword />}
/>
<Route exact path="/404" name="Page 404" element={<Page404 />} />
<Route exact path="/500" name="Page 500" element={<Page500 />} />
<Route path="/" name="Home" element={userdata?.role === "admin" ? <DefaultLayout />
:
userdata === false ? <Login /> : <div></div>} />
<Route
path="/"
name="Home"
element={
userdata?.role === "admin" ? (
<DefaultLayout />
) : userdata === false ? (
<Login />
) : (
<div></div>
)
}
/>
<Route path="*" name="Home" element={<DefaultLayout />} />
</Routes>
<Toaster />
</Suspense>
</HashRouter>
)
}
export default App
);
};
export default App;

2
src/_nav.js
View File

@ -33,7 +33,7 @@ const _nav = [
component: CNavItem,
name: "Users",
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
to: "/users",
to: "/users-address",
},
{
component: CNavItem,

92
src/routes.js
View File

@ -27,9 +27,7 @@ import Login from "./views/pages/login/Login";
import Appointments from "./views/Appointments/Appointments";
//Businesses
import Businesses from "./views/Business/Businesses.js";
import AddBusiness from "./views/Business/AddBusiness.js";
import EditBusiness from "./views/Business/EditBusiness.js";
import Products from "./views/Products/Products";
//product
import AddProduct from "./views/Products/AddProduct";
@ -79,7 +77,7 @@ import EditPurpose from "./views/configuration/Purpose/EditPurpose.js";
import ViewAppointment from "./views/Appointments/ViewAppointment";
import EditAppointment from "./views/Appointments/EditAppointment";
import AddNewAppointment from "./views/Appointments/AddNewAppointment";
import ViewHealthCareProvider from "./views/Business/ViewHealthCareProvider";
import Campaign from "./views/Campaigns/Campaign.js";
import AddCampaign from "./views/Campaigns/AddCampaign.js";
import Categories from "./views/Categories/categories";
@ -88,6 +86,11 @@ import Content from "./views/Content/content";
import EditPrivacyPolicy from "./views/Content/editPrivacyPolicy";
import EditTermsConditions from "./views/Content/editTermsConditions";
import EditShippingPolicy from "./views/Content/editShippingPolicy";
import UserTable from "./views/UserAddress/userTable";
import EditUserAddress from "./views/UserAddress/editUserAddress";
import AddUserAddress from "./views/UserAddress/addUserAddress";
import ViewAddress from "./views/UserAddress/viewAddress";
const routes = [
{ path: "/", exact: true, name: "Home" },
{
@ -127,27 +130,48 @@ const routes = [
element: AddNewAppointment,
},
{
path: "/users-address",
name: "User Table",
element: UserTable,
},
{
path: "/users-address/add",
name: "User Address",
element: AddUserAddress,
},
{
path: "/users-address/edit/:id",
name: "Edit user address",
element: EditUserAddress,
},
{
path: "/users-address/view/:id",
name: "view address",
element: ViewAddress,
},
// health care providers
{
path: "//users",
name: "healthcare providers",
element: Businesses,
},
{
path: "//users/add",
name: "Add healthcare providers",
element: AddBusiness,
},
{
path: "/users/edit/:id",
name: "Edit healthcare providers",
element: EditBusiness,
},
{
path: "/users/view/:id",
name: "view healthcare providers",
element: ViewHealthCareProvider,
},
// {
// path: "//users",
// name: "healthcare providers",
// element: Businesses,
// },
// {
// path: "//users/add",
// name: "Add healthcare providers",
// element: AddBusiness,
// },
// {
// path: "/users/edit/:id",
// name: "Edit healthcare providers",
// element: EditBusiness,
// },
// {
// path: "/users/view/:id",
// name: "view healthcare providers",
// element: ViewHealthCareProvider,
// },
// Categories
{
path: "//categories",
@ -164,16 +188,16 @@ const routes = [
name: "Add Campaigns",
element: AddCampaign,
},
{
path: "/campaigns/edit/:id",
name: "Edit healthcare providers",
element: EditBusiness,
},
{
path: "/campaigns/view/:id",
name: "view healthcare providers",
element: ViewHealthCareProvider,
},
// {
// path: "/campaigns/edit/:id",
// name: "Edit healthcare providers",
// element: EditBusiness,
// },
// {
// path: "/campaigns/view/:id",
// name: "view healthcare providers",
// element: ViewHealthCareProvider,
// },
// { path: '/franchisee/view/:id', name: 'view franchisee', element: ViewFra },
//Contact Requests

339
src/views/Business/AddBusiness.js
View File

@ -1,339 +0,0 @@
import React, { useState, useEffect } from "react";
// import { Button } from '@mui/material'
import axios from "axios";
import { Link, useNavigate } from "react-router-dom";
import {
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CRow,
} from "@coreui/react";
import SelectPurpose from "./multiform/SelectPurpose.js";
import SelectBusiness from "./multiform/SelectBusiness.js";
import SelectLanguage from "./multiform/selectLanguage.js";
import Contacts from "./multiform/Contacts.js";
import BAddress from "./multiform/BAddress.js";
import Button from "@material-ui/core/Button";
import { isAutheticated } from "src/auth";
import DoctorInfo from "./multiform/DoctorInfo.js";
const AddBusiness = () => {
const token = isAutheticated();
const [productId, setProductId] = useState("");
const [viewState, setViewState] = useState(1);
// const [WebsiteURL, setWebsiteURL] = useState('https://bolo.ai.in/')
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [data, setData] = useState({
WebsiteURL: "https://bolo.ai.in/",
userType: "",
purpose: "",
language: [],
country: "",
state: "",
city: "",
address_Line_1: "",
address_Line_2: "",
pincode: "",
//contacts
image: "",
imageURL: "",
userName: "",
email: "",
short_url: "",
contact_Number: "",
contact_Person_Name: "",
specialization: "",
});
// console.log(data)
const handleView = (n) => {
if (viewState === n) return;
setViewState(n);
};
const handleSubmit = () => {
if (
data.address_Line_1.trim() === "" ||
data.address_Line_2.trim() === "" ||
data.userType === "" ||
data.language === "" ||
data.country === "" ||
data.state === "" ||
data.city === "" ||
data.pincode.trim() === "" ||
//Contacts
// data.image === '' ||
// data.imageURL.trim() === '' ||
(data.userName.trim() === ""
// &&
// (data.contact_Person_Name.trim() === "" ||
// data.specialization === "")
) ||
data.email.trim() === "" ||
// data.short_url.trim() === "" ||
data.contact_Number === ""
// || data.contact_Person_Name.trim() === ""
) {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.set("address_Line_1", data.address_Line_1);
formData.set("address_Line_2", data.address_Line_2);
formData.set("purpose", data.purpose);
formData.set("userType", data.userType);
// formData.set("language", data.language);
formData.set("country", data.country);
formData.set("city", data.city);
formData.set("state", data.state);
formData.set("pincode", data.pincode);
//contacts
formData.set("userName", data.userName);
formData.set("email", data.email);
formData.set("contact_Number", data.contact_Number);
formData.set("contact_Person_Name", data.contact_Person_Name);
formData.set("specialization", data.specialization);
formData.set("url", data.WebsiteURL);
formData.set("short_url", data.short_url);
axios
.post(`/api/businesses/add`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Added",
text: res?.data?.message
? res?.data?.message
: "Business added successfully!",
icon: "success",
button: "Return",
});
setLoading(false);
navigate("/users", { replace: true });
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message || "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
console.log(data);
return (
<CContainer>
<CRow className="mt-3">
<CCol md={12}>
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
Add User
</div>
<div className="page-title-right">
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
handleSubmit();
}}
disabled={
data.address_Line_1.trim() === "" ||
data.address_Line_2.trim() === "" ||
data.userType === "" ||
data.language === "" ||
data.country === "" ||
data.state === "" ||
data.city === "" ||
data.pincode.trim() === "" ||
data.userName.trim() === "" ||
// &&
// (data.contact_Person_Name.trim() === "" ||
// data.specialization === "")
data.email.trim() === "" ||
// data.short_url.trim() === "" ||
data.contact_Number === ""
// ||
// data.contact_Person_Name.trim() === ""
}
>
{loading ? "Loading" : "Add Now"}
</Button>
</div>
</div>
</div>
</CCol>
</CRow>
<CRow>
<CCol md={9} className="mt-1">
<CCardGroup>
<CCard className="p-4 mb-3">
<CCardBody>
{viewState === 1 && (
<SelectBusiness
data={{ data, setData }}
// categories={categories}
handleView={handleView}
// ProductId={{ productId, setProductId }}
loading={{ loading, setLoading }}
/>
)}
{viewState === 2 && (
<SelectPurpose
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ varients, setVarients }}
// taxes={taxes}
// sizes={sizes}
loading={{ loading, setLoading }}
/>
)}
{viewState === 3 &&
(data.business === "Doctor (Individual Practitioner)" ? (
<DoctorInfo
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ varients, setVarients }}
// taxes={taxes}
// sizes={sizes}
loading={{ loading, setLoading }}
/>
) : (
<Contacts
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ images, setImages }}
loading={{ loading, setLoading }}
/>
))}
{/* {viewState === 4 && (
<SelectLanguage
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ images, setImages }}
loading={{ loading, setLoading }}
/>
)} */}
{viewState === 4 && (
<BAddress
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ images, setImages }}
loading={{ loading, setLoading }}
/>
)}
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
<CCol md={3} className="mt-1">
<CCardGroup>
<CCard>
<CCardBody>
<div className="d-grid gap-2">
<button
className={
viewState === 1
? "btn btn-light"
: "btn btn-info text-white"
}
type="button"
onClick={() => handleView(1)}
>
Select User Type
</button>
{/*<button
className={
viewState === 2
? "btn btn-light"
: "btn btn-info text-white"
}
type="button"
onClick={() => handleView(2)}
>
Select Purpose
</button>*/}
<button
className={
viewState === 3
? "btn btn-light"
: "btn btn-info text-white"
}
type="button"
onClick={() => handleView(3)}
>
Basic Information
</button>
<button
className={
viewState === 5
? "btn btn-light"
: "btn btn-info text-white"
}
type="button"
onClick={() => handleView(5)}
>
Address
</button>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
);
};
export default AddBusiness;

367
src/views/Business/EditBusiness.js
View File

@ -1,367 +0,0 @@
import React, { useState, useEffect } from "react";
// import { Button } from '@mui/material'
import axios from "axios";
import { Link, useNavigate, useParams } from "react-router-dom";
import {
CCard,
CCardBody,
CCardGroup,
CCol,
CContainer,
CRow,
} from "@coreui/react";
import SelectPurpose from "./multiform/SelectPurpose.js";
import SelectBusiness from "./multiform/SelectBusiness.js";
import SelectLanguage from "./multiform/selectLanguage.js";
import BAddress from "./multiform/BAddress.js";
import Button from "@material-ui/core/Button";
import { isAutheticated } from "src/auth";
import Contacts from "./multiform/Contacts.js";
import DoctorInfo from "./multiform/DoctorInfo.js";
const EditBusiness = () => {
const token = isAutheticated();
const id = useParams()?.id;
const [productId, setProductId] = useState("");
const [viewState, setViewState] = useState(1);
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [data, setData] = useState({
WebsiteURL: "https://bolo.ai.in/",
business: "",
purpose: "",
language: [],
country: "",
state: "",
city: "",
address_Line_1: "",
address_Line_2: "",
pincode: "",
//contacts
image: "",
imageURL: "",
business_name: "",
email: "",
short_url: "",
contact_Number: "",
contact_Person_Name: "",
specialization: "",
});
// console.log(data)
const handleView = (n) => {
if (viewState === n) return;
setViewState(n);
};
//get business
// console.log(id)
const getbusinesses = () => {
axios
.get(`/api/businesses/get/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
// console.log(res.data.businesses)
// setBusinessesData(res.data?.businesses)
setData((prev) => ({
...prev,
...res.data?.businesses,
}));
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
};
useEffect(() => {
getbusinesses();
}, []);
// console.log(data)
const handleSubmit = () => {
if (
data.address_Line_1.trim() === "" ||
data.address_Line_2.trim() === "" ||
data.business === "" ||
data.language === "" ||
data.country === "" ||
data.state === "" ||
data.city === "" ||
data.pincode === "" ||
//Contacts
// data.image === '' ||
// data.imageURL.trim() === '' ||
(data.business_name.trim() === "" &&
(data.contact_Person_Name.trim() === "" ||
data.specialization === "")) ||
data.email.trim() === "" ||
data.short_url.trim() === "" ||
data.contact_Number === "" ||
data.contact_Person_Name.trim() === ""
) {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.set("address_Line_1", data.address_Line_1);
formData.set("address_Line_2", data.address_Line_2);
formData.set("business", data.business);
formData.set("language", data.language);
formData.set("country", data.country);
formData.set("city", data.city);
formData.set("state", data.state);
formData.set("pincode", data.pincode);
//contacts
formData.set("business_name", data.business_name);
formData.set("email", data.email);
formData.set("contact_Number", data.contact_Number);
formData.set("contact_Person_Name", data.contact_Person_Name);
formData.set("specialization", data.specialization);
formData.set("url", data.WebsiteURL);
formData.set("short_url", data.short_url);
axios
.patch(`/api/businesses/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: res?.data?.message
? res?.data?.message
: "Business added successfully!",
icon: "success",
button: "Return",
});
setLoading(false);
navigate("/users", { replace: true });
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message || "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
return (
<CContainer>
<CRow className="mt-3">
<CCol md={12}>
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
Edit Healthcare Provider
</div>
<div className="page-title-right">
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
handleSubmit();
}}
disabled={
data.address_Line_1.trim() === "" ||
data.address_Line_2.trim() === "" ||
data.business === "" ||
data.language === "" ||
data.country === "" ||
data.state === "" ||
data.city === "" ||
data.pincode === "" ||
(data.business_name.trim() === "" &&
(data.contact_Person_Name.trim() === "" ||
data.specialization === "")) ||
data.email.trim() === "" ||
data.short_url.trim() === "" ||
data.contact_Number === "" ||
data.contact_Person_Name.trim() === ""
}
>
{loading ? "Loading" : "Update Now"}
</Button>
</div>
</div>
</div>
</CCol>
</CRow>
<CRow>
<CCol md={9} className="mt-1">
<CCardGroup>
<CCard className="p-4 mb-3">
<CCardBody>
{viewState === 1 && (
<SelectBusiness
data={{ data, setData }}
// categories={categories}
handleView={handleView}
// ProductId={{ productId, setProductId }}
loading={{ loading, setLoading }}
/>
)}
{/*viewState === 2 && (
<SelectPurpose
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ varients, setVarients }}
// taxes={taxes}
// sizes={sizes}
loading={{ loading, setLoading }}
/>
)*/}
{viewState === 3 &&
(data.business === "Doctor (Individual Practitioner)" ? (
<DoctorInfo
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ varients, setVarients }}
// taxes={taxes}
// sizes={sizes}
loading={{ loading, setLoading }}
/>
) : (
<Contacts
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ images, setImages }}
loading={{ loading, setLoading }}
/>
))}
{viewState === 4 && (
<SelectLanguage
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ images, setImages }}
loading={{ loading, setLoading }}
/>
)}
{viewState === 5 && (
<BAddress
data={{ data, setData }}
handleView={handleView}
// productId={productId}
// data={{ images, setImages }}
loading={{ loading, setLoading }}
/>
)}
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
<CCol md={3} className="mt-1">
<CCardGroup>
<CCard>
<CCardBody>
<div className="d-grid gap-2">
<button
className={
viewState === 1
? "btn btn-light"
: "btn btn-info text-white"
}
type="button"
onClick={() => handleView(1)}
>
Select Business Type
</button>
<button
className={
viewState === 3
? "btn btn-light"
: "btn btn-info text-white"
}
type="button"
onClick={() => handleView(3)}
>
Contacts
</button>
<button
className={
viewState === 4
? "btn btn-light"
: "btn btn-info text-white"
}
type="button"
onClick={() => handleView(4)}
>
Select Languages
</button>
<button
className={
viewState === 5
? "btn btn-light"
: "btn btn-info text-white"
}
type="button"
onClick={() => handleView(5)}
>
Address
</button>
</div>
</CCardBody>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
);
};
export default EditBusiness;

29
src/views/Business/OverLayButton.js
View File

@ -1,29 +0,0 @@
import React, { useState, useRef } from 'react'
import Button from 'react-bootstrap/Button'
import Overlay from 'react-bootstrap/Overlay'
import Tooltip from 'react-bootstrap/Tooltip'
function OverLayButton(props) {
const { url } = props?.data || ''
const [show, setShow] = useState(false)
const target = useRef(null)
return (
<span>
<Button ref={target} onClick={() => setShow(!show)} size="sm" variant="outline-info">
URL
</Button>
<Overlay target={target.current} show={show} placement="top">
{(props) => (
<Tooltip id="overlay-example" {...props}>
<a href={url} target="_blank" className="text-white">
{url}
</a>
</Tooltip>
)}
</Overlay>
</span>
)
}
export default OverLayButton

146
src/views/Business/ViewHealthCareProvider.js
View File

@ -1,146 +0,0 @@
import axios from "axios";
import React from "react";
import { useState } from "react";
import { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import Button from "@material-ui/core/Button";
import { isAutheticated } from "src/auth";
const ViewHealthCareProvider = () => {
const [HealthCareData, setHealthCareData] = useState();
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const { id } = useParams();
const getHealthCareProvider = () => {
setLoading(true);
axios
.get(`/api/businesses/get/${id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then(async (res) => {
console.log(res.data);
setHealthCareData(res.data.businesses);
setLoading(false);
})
.catch((err) => {
swal("Error", "Could not get data", "error");
setLoading(false);
});
};
useEffect(() => {
getHealthCareProvider();
}, []);
const navigate = useNavigate();
return (
<div>
<div className="col-12">
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
HealthCare Provider Details
</div>
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
navigate("/users", { replace: true });
}}
>
Back
</Button>
</div>
</div>
</div>
{loading && <div>Loading...</div>}
{!loading && !HealthCareData && <div>No data found</div>}
{!loading && HealthCareData && (
<div>
<table className="table table-striped">
<tbody>
<tr>
<th scope="col">HealthCare Provider ID</th>
<td>{HealthCareData?._id}</td>
</tr>
<tr>
<th scope="col">Provider Type</th>
<td>{HealthCareData?.business}</td>
</tr>
{HealthCareData?.business_name ? (
<tr>
{" "}
<th scope="col">HealthCare Name</th>
<td>{HealthCareData?.business_name}</td>
</tr>
) : (
<tr>
<th scope="col">Specialization</th>
<td>{HealthCareData?.specialization}</td>
</tr>
)}
<tr>
<th scope="col">Contact Person Name</th>
<td>{HealthCareData?.contact_Person_Name}</td>
</tr>
<tr>
<th scope="col"> Phone</th>
<td>{HealthCareData?.contact_Number}</td>
</tr>
<tr>
<th scope="col">Email</th>
<td>{HealthCareData?.email}</td>
</tr>
<tr>
<th scope="col">Url</th>
<td>
{HealthCareData?.url ? (
HealthCareData?.url
) : (
<span className="text-danger">Not Set</span>
)}
</td>
</tr>
<tr>
<th scope="col">Address</th>
<td>
{HealthCareData?.address_Line_1} <br />
{HealthCareData?.address_Line_2}
<br />
{HealthCareData?.city}, {HealthCareData?.state} <br />
{HealthCareData?.country} <br />
{HealthCareData?.pincode}
</td>
</tr>
</tbody>
</table>
</div>
)}
</div>
);
};
export default ViewHealthCareProvider;

431
src/views/Business/multiform/BAddress.js
View File

@ -1,431 +0,0 @@
import React, { useEffect, useState } from 'react'
import Button from '@material-ui/core/Button'
import { Link, useNavigate } from 'react-router-dom'
import swal from 'sweetalert'
import axios from 'axios'
import { isAutheticated } from 'src/auth'
// import { WebsiteURL } from '../WebsiteURL'
import { Country, State, City } from 'country-state-city';
const BAddress = (props) => {
const token = isAutheticated()
const navigate = useNavigate()
const { data, setData } = props.data
const { loading, setLoading } = props.loading
// const categories = props?.categories || []
const handleChange = (e) => {
// if (e.target.id === 'master_price' && /^\D+$/.test(e.target.value)) return
// if (e.target.id === 'discontinue_on') {
// if (new Date(e.target.value) < new Date()) {
// return setData((prev) => ({
// ...prev,
// [e.target.id]: new Date().toISOString().slice(0, 10),
// }))
// }
// }
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
}
// const [data, setData] = useState({
// image: '',
// imageURL: '',
// address_Line_1: '',
// address_Line_2: '',
// address_line_1: '',
// address_line_2: '',
// city: '',
// state_name: '',
// short_url: '',
// contact_Number: '',
// contact_Person_Name: '',
// price_Lable: '',
// pin_Code: ''
// })
// const [cities, setCities] = useState([])
// const [loading, setLoading] = useState(false)
const [validForm, setValidForm] = useState(false)
const [limiter, setLimiter] = useState({
address_Line_1: 100,
nameHas: 100,
})
//country, city and state
const [countryCode, setCountryCode] = useState();
const [stateCode, setStateCode] = useState();
const country = Country.getAllCountries()
useEffect(() => {
country.map(item => {
if (item.name === data.country) {
setCountryCode(item.isoCode)
// console.log(data.state)
}
})
}, [data.country])
const state = State.getStatesOfCountry(countryCode)
useEffect(() => {
state.map(item => {
if (item.name === data.state) {
setStateCode(item.isoCode)
// console.log(data.state)
}
})
}, [data.state])
const handleSubmit = () => {
if (
data.address_Line_1.trim() === '' ||
data.address_Line_2.trim() === '' ||
data.contact_Number === '' ||
data.contact_Person_Name === '' ||
data.address_line_1.trim() === '' ||
data.address_line_2.trim() === '' ||
data.price_Lable.trim() === '' ||
data.city === '' ||
data.pin_Code.trim() === '' ||
data.short_url === '' ||
data.state_name === ''
// data.imageURL.trim() === ''
) {
swal({
title: 'Warning',
text: 'Fill all mandatory fields',
icon: 'error',
button: 'Close',
dangerMode: true,
})
return
}
setLoading(true)
const formData = new FormData()
formData.set('address_Line_1', data.address_Line_1)
formData.set('address_Line_2', data.address_Line_2)
formData.set('address_line_1', data.address_line_1)
formData.set('address_line_2', data.address_line_2)
formData.set('city', data.city)
formData.set('state_name', data.state_name)
formData.set('contact_Number', data.contact_Number)
formData.set('contact_Person_Name', data.contact_Person_Name)
formData.set('price_Lable', data.price_Lable)
formData.set('pin_Code', data.pin_Code)
formData.set('url', WebsiteURL + data.short_url + '/login')
formData.set('short_url', data.short_url)
formData.append('image', data.image)
axios
.post(`/api/franchisee/`, formData, {
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/formdata',
'Access-Control-Allow-Origin': '*',
},
})
.then((res) => {
swal({
title: 'Added',
text: res?.data?.message ? res?.data?.message : 'Franchisee added successfully!',
icon: 'success',
button: 'Return',
})
setLoading(false)
navigate('/franchisees', { replace: true })
})
.catch((err) => {
setLoading(false)
const message = err.response?.data?.message || 'Something went wrong!'
swal({
title: 'Warning',
text: message,
icon: 'error',
button: 'Retry',
dangerMode: true,
})
})
}
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">
Address
</div>
<div style={{ display: 'flex', gap: '1rem' }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
{/* <Button
variant="contained"
color="primary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
marginRight: '5px',
}}
onClick={() => handleSubmit()}
disabled={loading}
>
{loading ? 'Loading' : 'Save'}
</Button> */}
<Button
variant="contained"
color="secondary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
}}
onClick={() => props.handleView(3)}
>
Prev
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<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">
Address Line 1*
</label>
<input
type="text"
className="form-control"
id="address_Line_1"
value={data.address_Line_1}
maxLength="50"
onChange={(e) => handleChange(e)}
/>
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Address Line 2*
</label>
<input
type="text"
className="form-control"
id="address_Line_2"
value={data.address_Line_2}
maxLength="50"
onChange={(e) => handleChange(e)}
/>
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Country *
</label>
<select
onChange={(e) => handleChange(e)}
value={data.country}
className="form-control"
id="country"
>
<option value="1">---select---</option>
{Country.getAllCountries().map((item, index) =>
/* {City.getCountryByCode('IN') && City.getCountryByCode('IN').map((item, index) => */
<option key={index} value={item?.name} >{item?.name}</option>
)}
</select>
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
State *
</label>
<select
onChange={(e) => handleChange(e)}
value={data.state}
className="form-control"
id="state"
disabled={!data.country}
>
<option value="1">---select---</option>
{State.getStatesOfCountry(countryCode).map((item, index) =>
/* {City.getCountryByCode('IN') && City.getCountryByCode('IN').map((item, index) => */
<option key={index} value={item?.name} >{item?.name}</option>
)}
</select>
</div>
<div className="mb-3">
<label htmlFor="pageToLink" className="form-label">
City*
</label>
<select
onChange={(e) => handleChange(e)}
value={data.city}
className="form-control"
id="city"
name='city'
disabled={!data.state}
>
<option value="1">---select---</option>
{City.getCitiesOfState(`${countryCode}`, `${stateCode}`) && City.getCitiesOfState(`${countryCode}`, `${stateCode}`).map((item, index) =>
<option key={index} value={item?.name} >{item?.name}</option>
)}
</select>
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Pin Code *
</label>
<input
type="Number"
className="form-control"
id="pincode"
value={data.pincode}
maxLength={8}
onChange={(e) => handleChange(e)}
/>
</div>
</div>
</div>
</div>
{/* <div className="col-sm-12 col-md-12 col-lg-6 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Contact Number*
</label>
<input
type="number"
className="form-control"
id="contact_Number"
value={data.contact_Number}
onChange={(e) => handleChange(e)}
/>
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Contact Person Name*
</label>
<input
type="text"
className="form-control"
id="contact_Person_Name"
value={data.contact_Person_Name}
onChange={(e) => handleChange(e)}
/>
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
URL*
</label>
<div className="input-group mb-3">
<span className="input-group-text" id="basic-addon3">
{WebsiteURL}
</span>
<input
type="text"
className="form-control"
id="short_url"
aria-describedby="basic-addon3"
value={data.short_url}
onChange={(e) => handleChange(e)}
/>
</div>
</div>
<div className=" mb-3">
<label htmlFor="title" className="form-label">
Price Lable*
</label> <select className="form-control" address_Line_1="price_Lable" id="price_Lable"
onChange={(e) => handleChange(e)}
value={data.price_Lable}
>
<option value="" disabled>---</option>
<option value="base_Price">Base Price</option>
<option value="price_Level_2"> price Level 2</option>
<option value="price_Level_3">price Level 3</option>
</select>
</div>
<div className="mb-3">
<label htmlFor="image" className="form-label">
Franchisee Banner (optional)
</label>
<input
type="file"
className="form-control"
id="image"
accept="image/*"
onChange={(e) => handleChange(e)}
/>
<p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
</div>
<div className="mb-3" style={{ height: '200px', maxWdth: '100%' }}>
<img
src={data.imageURL}
alt="Uploaded Image will be shown here"
style={{ maxHeight: '200px', maxWidth: '100%' }}
/>
</div>
</div>
</div>
</div> */}
</div>
</div>
)
}
export default BAddress

296
src/views/Business/multiform/Contacts.js
View File

@ -1,296 +0,0 @@
import React, { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link, useNavigate } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";
import { isAutheticated } from "src/auth";
import toast from "react-hot-toast";
// import { WebsiteURL } from '../WebsiteURL'
const Contacts = (props) => {
const token = isAutheticated();
const navigate = useNavigate();
const { data, setData } = props.data;
const { loading, setLoading } = props.loading;
// const [data, setData] = useState({
// image: '',
// imageURL: '',
// name: '',
// email: '',
// short_url: '',
// contact_Number: '',
// contact_Person_Name: '',
// })
const [validForm, setValidForm] = useState(false);
const [errors, setErrors] = useState({
emailError: "",
phoneError: "",
});
const validEmailRegex = RegExp(
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
);
const validPhoneRegex = RegExp(
/^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/
);
const validateForm = () => {
let valid = true;
Object.values(errors).forEach((val) => {
if (val.length > 0) {
valid = false;
return false;
}
});
Object.values(data.email).forEach((val) => {
if (val.length <= 0) {
valid = false;
return false;
}
});
return valid;
};
//cheking email and password
useEffect(() => {
if (validateForm()) {
setValidForm(true);
} else {
setValidForm(false);
}
}, [errors]);
const handleChange = (e) => {
if (e.target.id === "userName") {
if (e.target.value.length < 0) return;
setData((prev) => ({
...prev,
short_url: e.target.value.toLowerCase().replace(/\s+/g, "-"),
}));
}
if (e.target.id === "contact_Number") {
setErrors({
...errors,
phoneError: validPhoneRegex.test(e.target.value)
? ""
: "Number is not valid!",
});
}
if (e.target.id === "email") {
setErrors({
...errors,
emailError: validEmailRegex.test(e.target.value)
? ""
: "Email is not valid!",
});
}
if (e.target.id === "image") {
if (
e.target.files[0]?.type === "image/jpeg" ||
e.target.files[0]?.type === "image/png" ||
e.target.files[0]?.type === "image/jpg"
) {
setData((prev) => ({
...prev,
imageURL: URL.createObjectURL(e.target.files[0]),
image: e.target.files[0],
}));
return;
} else {
swal({
title: "Warning",
text: "Upload jpg, jpeg, png only.",
icon: "error",
button: "Close",
dangerMode: true,
});
setData((prev) => ({
...prev,
imageURL: "",
image: "",
}));
e.target.value = null;
return;
}
}
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
};
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">
Basic Information
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => props.handleView(1)}
// disabled={loading}
>
Prev
</Button>
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
if (
data.business_name === "" ||
data.email === "" ||
data.contact_Number === ""
) {
toast.error("Enter All Details");
} else {
props.handleView(4);
}
}}
>
Next
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<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">
Name*
</label>
<input
type="text"
className="form-control"
id="userName"
value={data.userName}
maxLength={50}
onChange={(e) => handleChange(e)}
/>
{data.userName.length > 0 && (
<p className="pt-1 pl-2 text-secondary">
Remaining characters : {50 - data.userName.length}
</p>
)}
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Email *
</label>
<input
type="email"
className="form-control"
id="email"
value={data.email}
maxLength="50"
onChange={(e) => handleChange(e)}
/>
{errors.emailError && (
<p className="text-center py-2 text-danger">
{errors.emailError}
</p>
)}
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Contact Number*
</label>
<input
type="number"
className="form-control"
id="contact_Number"
value={data.contact_Number}
onChange={(e) => handleChange(e)}
/>
{errors.phoneError && (
<p className="text-center py-2 text-danger">
{errors.phoneError}
</p>
)}
</div>
{/*<div className="mb-3">
<label htmlFor="title" className="form-label">
URL*
</label>
<div className="input-group mb-3">
<span className="input-group-text" id="basic-addon3">
{data.WebsiteURL}
</span>
<input
type="text"
className="form-control"
id="short_url"
aria-describedby="basic-addon3"
disabled
value={data.short_url}
onChange={(e) => handleChange(e)}
/>
</div>
</div>*/}
{/* <div className="mb-3">
<label htmlFor="image" className="form-label">
Franchisee Banner (optional)
</label>
<input
type="file"
className="form-control"
id="image"
accept="image/*"
onChange={(e) => handleChange(e)}
/>
<p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
</div>
<div className="mb-3" style={{ height: '200px', maxWdth: '100%' }}>
<img
src={data.imageURL}
alt="Uploaded Image will be shown here"
style={{ maxHeight: '200px', maxWidth: '100%' }}
/>
</div> */}
</div>
</div>
</div>
</div>
</div>
);
};
export default Contacts;

338
src/views/Business/multiform/DoctorInfo.js
View File

@ -1,338 +0,0 @@
import React, { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link, useNavigate } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { CFormLabel, CFormSelect } from "@coreui/react";
// import { WebsiteURL } from '../WebsiteURL'
const DcotorInfo = (props) => {
const token = isAutheticated();
const navigate = useNavigate();
const { data, setData } = props.data;
const [categories, setCategories] = useState([]);
const getCategories = () => {
axios.get("/api/config/specialty/getall").then((res) => {
setCategories(res.data.specialty);
});
};
// create options from categories with placeholder select Specialization
const options = [
{
label: "Select Specialization",
value: "",
},
...categories.map((category) => {
return {
label: category.name,
value: category.name,
};
}),
];
useEffect(() => {
getCategories();
}, []);
const { loading, setLoading } = props.loading;
// const [data, setData] = useState({
// image: '',
// imageURL: '',
// name: '',
// email: '',
// short_url: '',
// contact_Number: '',
// contact_Person_Name: '',
// })
const [validForm, setValidForm] = useState(false);
const [errors, setErrors] = useState({
emailError: "",
phoneError: "",
});
const validEmailRegex = RegExp(
/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
);
const validPhoneRegex = RegExp(
/^(\+\d{1,2}\s?)?1?\-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/
);
const validateForm = () => {
let valid = true;
Object.values(errors).forEach((val) => {
if (val.length > 0) {
valid = false;
return false;
}
});
Object.values(data.email).forEach((val) => {
if (val.length <= 0) {
valid = false;
return false;
}
});
return valid;
};
//cheking email and password
useEffect(() => {
if (validateForm()) {
setValidForm(true);
} else {
setValidForm(false);
}
}, [errors]);
const handleChange = (e) => {
if (e.target.id === "contact_Person_Name") {
if (e.target.value.length < 0) return;
setData((prev) => ({
...prev,
short_url: e.target.value.toLowerCase().replace(/\s+/g, "-"),
}));
}
if (e.target.id === "contact_Number") {
setErrors({
...errors,
phoneError: validPhoneRegex.test(e.target.value)
? ""
: "Number is not valid!",
});
}
if (e.target.id === "email") {
setErrors({
...errors,
emailError: validEmailRegex.test(e.target.value)
? ""
: "Email is not valid!",
});
}
if (e.target.id === "image") {
if (
e.target.files[0]?.type === "image/jpeg" ||
e.target.files[0]?.type === "image/png" ||
e.target.files[0]?.type === "image/jpg"
) {
setData((prev) => ({
...prev,
imageURL: URL.createObjectURL(e.target.files[0]),
image: e.target.files[0],
}));
return;
} else {
swal({
title: "Warning",
text: "Upload jpg, jpeg, png only.",
icon: "error",
button: "Close",
dangerMode: true,
});
setData((prev) => ({
...prev,
imageURL: "",
image: "",
}));
e.target.value = null;
return;
}
}
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
};
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">
Doctor Information
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => props.handleView(1)}
// disabled={loading}
>
Prev
</Button>
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => props.handleView(4)}
>
Next
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<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">
Name*
</label>
<input
type="text"
className="form-control"
id="contact_Person_Name"
value={data.contact_Person_Name}
onChange={(e) => handleChange(e)}
/>
</div>
<div className="mb-3">
<CFormLabel htmlFor="specialization">
Specialization *
</CFormLabel>
<CFormSelect
id="specialization"
name="specialization"
value={data.specialization}
options={options}
onChange={handleChange}
></CFormSelect>
</div>
{/* <div className="mb-3">
<label htmlFor="title" className="form-label">
Business Name*
</label>
<input
type="text"
className="form-control"
id="business_name"
value={data.business_name}
maxLength={50}
onChange={(e) => handleChange(e)}
/>
{data.business_name.length > 0 && (
<p className="pt-1 pl-2 text-secondary">
Remaining characters : {50 - data.business_name.length}
</p>
)}
</div>*/}
<div className="mb-3">
<label htmlFor="title" className="form-label">
Email *
</label>
<input
type="email"
className="form-control"
id="email"
value={data.email}
maxLength="50"
onChange={(e) => handleChange(e)}
/>
{errors.emailError && (
<p className="text-center py-2 text-danger">
{errors.emailError}
</p>
)}
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Contact Number*
</label>
<input
type="number"
className="form-control"
id="contact_Number"
value={data.contact_Number}
onChange={(e) => handleChange(e)}
/>
{errors.phoneError && (
<p className="text-center py-2 text-danger">
{errors.phoneError}
</p>
)}
</div>
{/* <div className="mb-3">
<label htmlFor="title" className="form-label">
URL*
</label>
<div className="input-group mb-3">
<span className="input-group-text" id="basic-addon3">
{data.WebsiteURL}
</span>
<input
type="text"
className="form-control"
id="short_url"
aria-describedby="basic-addon3"
disabled
value={data.short_url}
onChange={(e) => handleChange(e)}
/>
</div>
</div>*/}
{/* <div className="mb-3">
<label htmlFor="image" className="form-label">
Franchisee Banner (optional)
</label>
<input
type="file"
className="form-control"
id="image"
accept="image/*"
onChange={(e) => handleChange(e)}
/>
<p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
</div>
<div className="mb-3" style={{ height: '200px', maxWdth: '100%' }}>
<img
src={data.imageURL}
alt="Uploaded Image will be shown here"
style={{ maxHeight: '200px', maxWidth: '100%' }}
/>
</div> */}
</div>
</div>
</div>
</div>
</div>
);
};
export default DcotorInfo;

142
src/views/Business/multiform/SelectBusiness.js
View File

@ -1,142 +0,0 @@
import React, { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link, useNavigate } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";
import { isAutheticated } from "src/auth";
import toast from "react-hot-toast";
const SelectBusiness = (props) => {
const token = isAutheticated();
const navigate = useNavigate();
console.log(props.handleView);
const { data, setData } = props.data;
const { loading, setLoading } = props.loading;
// const categories = props?.categories || []
const handleChange = (e) => {
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
};
// const [loading, setLoading] = useState(false)
const [BusinessData, setBusinessData] = useState([]);
const getCategories = () => {
axios
.get(`/api/business`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setBusinessData(res.data.data);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
};
useEffect(() => {
getCategories();
}, []);
const handleSubmit = () => {};
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">
Select User Type
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<Link to="/users">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
>
Back
</Button>
</Link>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
// marginRight: '5px',
}}
onClick={() => {
if (data.userType !== "") {
props.handleView(3);
} else {
toast.error("Fill User Type");
}
}}
// disabled={loading}
// disabled={data.business === ''}
>
Next
{/* {loading ? 'Loading' : 'Next'} */}
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<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">
<select
onChange={(e) => {handleChange(e)
console.log(e.target.id);
}}
value={data.userType}
className="form-control"
id="userType"
disabled={BusinessData.length < 1}
>
<option value="1">---select---</option>
{BusinessData.length > 0 &&
BusinessData.map((item, index) => (
<option key={index} value={item?.business}>
{item?.business}
</option>
))}
</select>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default SelectBusiness;

173
src/views/Business/multiform/SelectPurpose.js
View File

@ -1,173 +0,0 @@
import React, { useEffect, useState } from 'react'
import Button from '@material-ui/core/Button'
import { Link, useNavigate } from 'react-router-dom'
import swal from 'sweetalert'
import axios from 'axios'
import { isAutheticated } from 'src/auth'
const SelectPurpose = (props) => {
const token = isAutheticated()
const navigate = useNavigate()
const { data, setData } = props.data
const { loading, setLoading } = props.loading
// const categories = props?.categories || []
const handleChange = (e) => {
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
}
// const [loading, setLoading] = useState(false)
const [purposeData, setPurposeData] = useState([])
const getCategories = () => {
axios
.get(`/api/purpose`, {
headers: { 'Access-Control-Allow-Origin': '*', Authorization: `Bearer ${token}` },
})
.then((res) => {
// console.log(res.data)
setPurposeData(res.data?.data)
setLoading(false)
})
.catch((err) => {
console.log(err)
setLoading(false)
})
}
useEffect(() => {
getCategories()
}, [])
const handleSubmit = () => {
}
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">
Select Purpose
</div>
<div style={{ display: 'flex', gap: '1rem' }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
{/* <Button
variant="contained"
color="primary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
marginRight: '5px',
}}
onClick={() => handleSubmit()}
disabled={loading}
>
{loading ? 'Loading' : 'Save'}
</Button> */}
<Button
variant="contained"
color="secondary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
marginRight: '5px',
}}
onClick={() => props.handleView(1)}
>
Prev
</Button>
<Button
variant="contained"
color="primary"
disabled={data.purpose === ''}
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
}}
onClick={() => props.handleView(3)}
// disabled={loading}
>
Next
{/* {loading ? 'Loading' : 'Next'} */}
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<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">
Purpose *
</label>
<select
onChange={(e) => handleChange(e)}
value={data.purpose}
className="form-control"
id="purpose"
disabled={purposeData.length < 1}
>
<option value="1">---select---</option>
{purposeData.length > 0 && purposeData.map((item, index) =>
<option key={index} value={item?.purpose} >{item?.purpose}</option>
)}
</select>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default SelectPurpose

163
src/views/Business/multiform/selectLanguage.js
View File

@ -1,163 +0,0 @@
import React, { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link, useNavigate } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";
import { isAutheticated } from "src/auth";
const selectLanguage = (props) => {
const token = isAutheticated();
const navigate = useNavigate();
const { data, setData } = props.data;
const { loading, setLoading } = props.loading;
// const categories = props?.categories || []
const handleChange = (e) => {
if (data.language.length < 3) {
setData((prev) => ({
...prev,
language: [...data.language, e.target.value],
}));
} else {
swal({
title: "Warning",
text: "please select Up to 3 languages!",
icon: "warning",
button: "ok",
dangerMode: true,
});
}
};
// const [loading, setLoading] = useState(false)
const [LanguagesData, setLanguagesData] = useState([]);
const getCategories = () => {
axios
.get(`/api/language`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setLanguagesData(res.data.data);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
};
useEffect(() => {
getCategories();
}, []);
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">
Select Language
</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(3)}
>
Prev
</Button>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
// marginRight: '5px',
}}
onClick={() => props.handleView(5)}
// disabled={loading}
// disabled={data.language.length < 0 && data.language.length > 3}
>
Next
{/* {loading ? 'Loading' : 'Next'} */}
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<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">
please select Up to 3 languages
</label>
{LanguagesData.length > 0 &&
LanguagesData.map((item, index) => (
// <option key={index} value={item?.language} >{item?.language}</option>
<div className="d-flex">
<input
className="me-2"
type="checkbox"
name={item?.language}
id={data.language}
value={item?.language}
onChange={(e) => handleChange(e)}
/>
{/* {checked = { data.language.map(item => item === item?.language) }} */}
<label htmlFor="title" className="form-label">
{item?.language}
</label>
</div>
))}
{/* <select
onChange={(e) => handleChange(e)}
value={data.language}
className="form-control"
id="language"
disabled={LanguagesData.length < 1}
>
<option value="1">---select---</option>
{LanguagesData.length > 0 && LanguagesData.map((item, index) =>
<option key={index} value={item?.language} >{item?.language}</option>
)}
</select> */}
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default selectLanguage;

261
src/views/Categories/categories.js
View File

@ -13,10 +13,12 @@ import {
import CloseIcon from "@mui/icons-material/Close";
import { ClipLoader } from "react-spinners";
import swal from "sweetalert";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
const style = {
position: "absolute",
top: "20%",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
@ -34,21 +36,25 @@ const Categories = () => {
const [saveLoding, setSaveLoading] = useState(true);
const [edit, setEdit] = useState(false);
const [categoryName, setCategoryName] = useState("");
const [categoryImage, setCategoryImage] = useState("");
const [error, setError] = useState("");
const [categoryId, setCategoryId] = useState("");
const [category, setCategory] = useState([]);
const [itemPerPage, setItemPerPage] = useState(10);
const [page, setPage] = useState(1);
const [open, setOpen] = useState(false);
const [olderCategoryName, setOlderCategoruName] = useState("");
const [olderImage, setOlderImage] = useState("");
const handleOpen = () => setOpen(true);
const handleClose = () => {
setOpen(false);
// setUpdating(true)
setCategoryName("");
setCategoryId("");
// setUpdating(false);
// setIsUpdate(false);
setOlderImage("");
setCategoryImage("");
};
const getCategories = async () => {
@ -78,34 +84,75 @@ const Categories = () => {
getCategories();
}, [token, category]);
console.log(category.length);
const handleEditClick = (_id, categoryName) => {
const handleEditClick = (_id, categoryName, categoryImage) => {
setOpen(true);
setOlderImage(categoryImage);
setCategoryName(categoryName);
setCategoryId(_id);
setOlderCategoruName(categoryName);
setEdit(true);
// setUpdating(false);
};
const categoryNamesArray = [];
const setCategoryNamesArray = () => {
category &&
category.map((category) => {
categoryNamesArray.push(category.categoryName.toLowerCase());
});
};
setCategoryNamesArray();
const handleUpdate = () => {
const filteredArrayNames = categoryNamesArray.filter(
(item) => item !== olderCategoryName.toLowerCase()
);
console.log(filteredArrayNames, "filter");
const categoryExits = filteredArrayNames.includes(
categoryName.toLowerCase()
);
if (categoryExits) {
swal({
title: "Warning",
text: "Category already exists ",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
if (!categoryName || (!categoryImage && !olderImage)) {
swal({
title: "Warning",
text: "Please fill all the required fields!",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
setUpdating(false);
const formData = new FormData();
formData.append("categoryName", categoryName);
formData.append("categoryImage", categoryImage);
formData.append("olderImage", JSON.stringify(olderImage));
axios
.patch(
`/api/category/update/${categoryId}`,
{ categoryName },
{
headers: {
Authorization: `Bearer ${token}`,
},
}
)
.patch(`/api/category/update/${categoryId}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
// setUpdating(true);
// setIsUpdate(false);
handleClose();
setCategoryId("");
setCategoryName("");
setCategoryImage("");
setOlderImage("");
setUpdating(true);
setEdit(false);
swal({
@ -119,11 +166,12 @@ const Categories = () => {
.catch((err) => {
swal({
title: "Sorry, please try again",
text: "Something went wrong!",
text: err,
icon: "error",
button: "Retry",
dangerMode: true,
});
setUpdating(true);
});
};
@ -166,10 +214,23 @@ const Categories = () => {
};
const handleSaveCategory = async () => {
if (!categoryName) {
const categoryExits = categoryNamesArray.includes(
categoryName.toLowerCase()
);
if (categoryExits) {
swal({
title: "Warning",
text: "Category name is empty. Please enter the category name!",
text: "Category Already exits.",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
if (!categoryName || !categoryImage) {
swal({
title: "Warning",
text: "Please fill all the required fields!",
icon: "error",
button: "Retry",
dangerMode: true,
@ -178,23 +239,25 @@ const Categories = () => {
}
setSaveLoading(false);
setLoading(true);
const formData = new FormData();
formData.append("categoryName", categoryName);
formData.append("categoryImage", categoryImage);
axios
.post(
"/api/category/add",
{ categoryName },
{
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
}
)
.post("/api/category/add", formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
},
})
.then((response) => {
if (response.status === 201) {
setOpen(false);
setLoading(false);
setSaveLoading(true);
setCategoryName("");
setCategoryImage("");
setOlderImage("");
swal({
title: "Added",
text: "New category added successfully!",
@ -218,6 +281,19 @@ const Categories = () => {
const getPageCount = () => {
return Math.max(1, Math.ceil(category.length / itemPerPage));
};
const handleFileChange = (e) => {
const files = e.target.files[0];
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
if (allowedTypes.includes(files.type)) {
setCategoryImage(files);
}
};
const handeldeleteImage = () => {
setCategoryImage("");
};
return (
<div className="main-content">
<div className="page-content">
@ -283,7 +359,12 @@ const Categories = () => {
style={{
padding: "1rem",
}}
onChange={(e) => setCategoryName(e.target.value)}
onChange={(e) =>
setCategoryName(
e.target.value.charAt(0).toUpperCase() +
e.target.value.slice(1)
)
}
/>
{categoryName ? (
<>
@ -294,6 +375,112 @@ const Categories = () => {
) : (
<></>
)}
<Box
style={{
padding: "1rem",
}}
>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "140px",
height: "140px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
}}
fontSize="large"
/>
</Box>
</label>
{categoryImage && (
<Box>
<img
src={URL.createObjectURL(categoryImage)}
alt="categoryImage"
style={{
width: 100,
height: 100,
borderRadius: "1rem",
marginLeft: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handeldeleteImage()}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
{olderImage && (
<Box>
<img
src={olderImage?.secure_url}
alt="categoryImage"
style={{
width: 100,
height: 100,
borderRadius: "1rem",
marginLeft: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => setOlderImage("")}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<p className="pt-1 pl-2 text-secondary">
Upload jpg, jpeg and png only*
</p>
<Box
p={2}
display={"flex"}
@ -405,6 +592,8 @@ const Categories = () => {
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th> Image</th>
<th> Categories Name</th>
<th>Action</th>
@ -433,6 +622,15 @@ const Categories = () => {
)
.map((item, i) => (
<tr key={i}>
<td>
<img
className="me-2"
src={item?.categoryImage?.secure_url}
width="40"
alt=""
/>
<h5>{} </h5>
</td>
<td>
<h5>{item.categoryName} </h5>
</td>
@ -453,7 +651,8 @@ const Categories = () => {
onClick={() =>
handleEditClick(
item._id,
item.categoryName
item.categoryName,
item.categoryImage
)
}
>

8
src/views/Products/Products.js
View File

@ -229,14 +229,6 @@ const Products = () => {
margin: "1rem 1rem 1rem 0rem",
}}
>
{/* <input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Type your keywords..."
/>
<button onClick={() => handleSearchClick(query)}>
search
</button>{" "} */}
<Typography
style={{
display: "flex",

501
src/views/UserAddress/addUserAddress.js Normal file
View File

@ -0,0 +1,501 @@
import { Typography } from "@material-ui/core";
import {
Box,
Button,
FormControl,
MenuItem,
Select,
TextField,
} from "@mui/material";
import React, { useEffect, useState } from "react";
import swal from "sweetalert";
import { v4 as uuid } from "uuid";
import MainAddress from "./mainAddress";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
export default function AddUserAddress() {
const token = isAutheticated();
console.log(token);
const [selectUserType, setSelectUserType] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phno, setPhno] = useState("");
const [updateBtn, setUpdateBtn] = useState(false);
const [edit, setEdit] = useState(false);
const navigate = useNavigate();
const [addressess, setAddressess] = useState([
{
id: uuid(),
addressLine1: "",
addressLine2: "",
country: "",
state: "",
city: "",
zipcode: "",
},
]);
const [view, setView] = useState("0");
const [phnoError, setPhnoError] = useState("");
const [emailError, setEmailError] = useState("");
const handlePhnoChange = (e) => {
const inputValue = e.target.value;
const numericValue = inputValue.replace(/[^0-9]/g, "");
setPhno(numericValue);
if (numericValue.length > 10 || numericValue.length < 10) {
setPhnoError(
"Please enter a valid phone number with a maximum of 10 digits."
);
} else {
setPhno(numericValue);
setPhnoError("");
}
};
const handleEmailChange = (e) => {
const inputValue = e.target.value;
setEmail(inputValue);
// Regular expression for email validation
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if (!emailRegex.test(inputValue)) {
setEmailError("Please enter a valid email address.");
} else {
setEmail(inputValue);
setEmailError("");
}
};
const handleNextClick = () => {
if (view === "0" && selectUserType !== "") {
setView("1");
} else if (
!emailError &&
!phnoError &&
name !== "" &&
email !== "" &&
phno !== "" &&
view === "1"
) {
setView("2");
} else {
swal({
title: "Please fill all the required fileds correctly",
icon: "error",
button: "Ok",
dangerMode: true,
});
}
};
const handleBackClick = () => {
if (view === "1") {
setView("0");
} else if (view === "2") {
setView("1");
}
};
const handleAddMoreAddress = () => {
setAddressess([
...addressess,
{
id: uuid(),
addressLine1: "",
addressLine2: "",
country: "",
state: "",
city: "",
zipcode: "",
},
]);
};
console.log(addressess);
const handleDelete = (id) => {
const filteredAddress = addressess.filter((item) => item.id != id);
setAddressess(filteredAddress);
};
const handleAddressChange = (id, field, value) => {
// Find the address with the given ID
const updatedAddresses = addressess.map((address) => {
if (address.id === id) {
return { ...address, [field]: value };
}
return address;
});
setAddressess(updatedAddresses);
};
const handleSaveClick = async () => {
if (
!selectUserType ||
!name ||
!email ||
!phno ||
addressess.some(addressIsEmpty)
) {
swal({
title: "Please fill all the required fields correctly",
icon: "error",
button: "Ok",
dangerMode: true,
});
} else {
const saveresponse = await axios.post(
"/api/user-address/addAddress",
{
userType: selectUserType,
name,
email,
phno,
addressess,
},
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (saveresponse.status === 201) {
swal({
title: "Congratulations!!",
text: "Address stored successfully!",
icon: "success",
button: "OK",
});
navigate("/users-address", { replace: true });
} else {
swal({
title: "Please try again !",
text: "something went wrong",
icon: "error",
button: "OK",
});
}
}
};
const addressIsEmpty = (address) => {
return (
address.addressLine1 === "" ||
address.country === "" ||
address.state === "" ||
address.city === "" ||
address.zipcode === ""
);
};
// Get the address
// const getUserAddress = async () => {
// const address = await axios.get("/api/user-address/getAddress", {
// headers: {
// Authorization: `Bearer ${token}`,
// },
// });
// if (address.status === 200) {
// console.log(address);
// setSelectUserType(address?.data?.userAddress?.userType);
// setUpdateBtn(true);
// setEdit(true);
// setName(address?.data?.userAddress?.name);
// setEmail(address?.data?.userAddress?.email);
// setPhno(address?.data?.userAddress?.phno);
// setAddressess(address?.data?.userAddress?.addressess);
// }
// };
// const handleUpdateAddress = async () => {
// const updatedresponse = await axios.patch(
// "/api/user-address/updateAddress",
// {
// userType: selectUserType,
// name,
// email,
// phno,
// addressess,
// },
// {
// headers: {
// Authorization: `Bearer ${token}`,
// },
// }
// );
// if (updatedresponse.status === 200) {
// setEdit(true);
// swal({
// title: "Congratulations!!",
// text: "Address updated successfully!",
// icon: "success",
// button: "OK",
// });
// } else {
// swal({
// title: "Please try again",
// text: "Cannot update something went wronge !",
// icon: "error",
// button: "OK",
// });
// }
// };
// useEffect(() => {
// getUserAddress();
// }, []);
// console.log(selectUserType, name, email, phno, addressess);
return (
<div>
<Box>
<Typography
variant="h5"
style={{ fontWeight: "bold", marginBottom: "1rem" }}
>
User Address
</Typography>
<Box
sx={{
background: "#FFFFFF",
padding: "1rem",
width: "100%",
borderRadius: "1rem",
position: "relative",
}}
>
<div
style={{
display: "flex",
justifyContent: "flex-end",
}}
>
<Button
variant="outlined"
style={{
textTransform: "unset",
marginRight: "1rem",
border: "1px red solid",
}}
onClick={handleBackClick}
disabled={view === "0"}
>
Back
</Button>
{/* {updateBtn && (
<Button
variant="outlined"
style={{
textTransform: "unset",
marginRight: "1rem",
}}
onClick={() => setEdit(false)}
>
Edit
</Button>
)} */}
{view !== "2" && (
<Button
variant="contained"
style={{
textTransform: "unset",
marginRight: "1rem",
}}
onClick={handleNextClick}
>
Next
</Button>
)}
{view === "2" && (
<Button
variant="contained"
style={{
textTransform: "unset",
marginRight: "1rem",
}}
onClick={handleSaveClick}
>
Save address
</Button>
)}
<Link to={"/users-address"}>
<Button
variant="outlined"
style={{
textTransform: "unset",
marginRight: "1rem",
}}
>
Back to users
</Button>
</Link>
{/* {view === "2" && updateBtn && (
<Button
variant="contained"
style={{
textTransform: "unset",
}}
onClick={handleUpdateAddress}
>
Update address
</Button>
)} */}
</div>
{view === "0" && (
<div>
<div style={{ display: "flex" }}>
<Typography
variant="h6"
style={{
fontWeight: "bold",
marginBottom: "1rem",
flex: "1",
}}
>
Select User Type
</Typography>
</div>
<FormControl style={{ width: "50%" }}>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
size="small"
disabled={edit}
placeholder="select user type"
value={selectUserType}
onChange={(e) => setSelectUserType(e.target.value)}
>
<MenuItem value={"Online Customer"}>Online Customer</MenuItem>
<MenuItem value={"Corporate"}>Corporate</MenuItem>
</Select>
</FormControl>
</div>
)}
{view === "1" && (
<div>
<Typography
style={{ fontWeight: "bold", marginBottom: "1rem" }}
variant="h6"
>
User Basic Information
</Typography>
<Typography
style={{ fontWeight: "bold", marginBottom: "0.5rem" }}
>
Name:
</Typography>
<TextField
placeholder="Name"
type="text"
variant="outlined"
value={name}
disabled={edit}
style={{ width: "50%", marginBottom: "1rem" }}
onChange={(e) => setName(e.target.value)}
/>
<Typography
style={{ fontWeight: "bold", marginBottom: "0.5rem" }}
>
Email:
</Typography>
<TextField
placeholder="Email"
type="email"
variant="outlined"
value={email}
disabled={edit}
style={{ width: "50%", marginBottom: "1rem" }}
onChange={handleEmailChange}
/>
{emailError && (
<Typography style={{ color: "red" }}>{emailError}</Typography>
)}
<Typography
style={{ fontWeight: "bold", marginBottom: "0.5rem" }}
>
Contact number:
</Typography>
<TextField
placeholder="Contact number"
type="text"
variant="outlined"
value={phno}
disabled={edit}
inputProps={{
maxLength: 10,
}}
style={{ width: "50%", marginBottom: "1rem" }}
onChange={handlePhnoChange}
/>
{phnoError && (
<Typography style={{ color: "red" }}>{phnoError}</Typography>
)}
</div>
)}
{view === "2" && (
<Box marginTop={2}>
<Button
variant="contained"
style={{
marginBottom: "1rem",
textTransform: "unset",
}}
disabled={addressess.length >= 2}
onClick={() => handleAddMoreAddress()}
>
Add one more address{" "}
</Button>
{addressess.map((address, i) => (
<Box>
<Box style={{ display: "flex" }}>
<Typography
style={{
fontWeight: "bold",
margin: "1rem",
flex: "1",
}}
variant="h5"
>
Address {i + 1}
</Typography>
{addressess.length > 1 && (
<Button
variant="contained"
style={{
background: "red",
textTransform: "undet",
margin: "0.5rem",
}}
onClick={() => handleDelete(address.id)}
>
{" "}
Delete
</Button>
)}
</Box>
<MainAddress
key={address.id}
address={address}
edit={edit}
setAddressess={setAddressess}
onAddressChange={(field, value) =>
handleAddressChange(address.id, field, value)
}
/>
</Box>
))}
</Box>
)}
</Box>
</Box>
</div>
);
}

432
src/views/UserAddress/editUserAddress.js Normal file
View File

@ -0,0 +1,432 @@
import { Typography } from "@material-ui/core";
import {
Box,
Button,
FormControl,
MenuItem,
Select,
TextField,
} from "@mui/material";
import React, { useEffect, useState } from "react";
import swal from "sweetalert";
import { v4 as uuid } from "uuid";
import MainAddress from "./mainAddress";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { useNavigate, useParams } from "react-router-dom";
export default function EditUserAddress() {
const token = isAutheticated();
const [selectUserType, setSelectUserType] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phno, setPhno] = useState("");
const [updateBtn, setUpdateBtn] = useState(false);
const [edit, setEdit] = useState(false);
const navigate = useNavigate();
const id = useParams()?.id;
const [addressess, setAddressess] = useState([
{
id: uuid(),
addressLine1: "",
addressLine2: "",
country: "",
state: "",
city: "",
zipcode: "",
},
]);
const [view, setView] = useState("0");
const [phnoError, setPhnoError] = useState("");
const [emailError, setEmailError] = useState("");
const handlePhnoChange = (e) => {
const inputValue = e.target.value;
const numericValue = inputValue.replace(/[^0-9]/g, "");
setPhno(numericValue);
if (numericValue.length > 10 || numericValue.length < 10) {
setPhnoError(
"Please enter a valid phone number with a maximum of 10 digits."
);
} else {
setPhno(numericValue);
setPhnoError("");
}
};
const handleEmailChange = (e) => {
const inputValue = e.target.value;
setEmail(inputValue);
// Regular expression for email validation
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if (!emailRegex.test(inputValue)) {
setEmailError("Please enter a valid email address.");
} else {
setEmail(inputValue);
setEmailError("");
}
};
const handleNextClick = () => {
if (view === "0" && selectUserType !== "") {
setView("1");
} else if (
!emailError &&
!phnoError &&
name !== "" &&
email !== "" &&
phno !== "" &&
view === "1"
) {
setView("2");
} else {
swal({
title: "Please fill all the required fileds correctly",
icon: "error",
button: "Ok",
dangerMode: true,
});
}
};
const handleBackClick = () => {
if (view === "1") {
setView("0");
} else if (view === "2") {
setView("1");
}
};
const handleAddMoreAddress = () => {
setAddressess([
...addressess,
{
id: uuid(),
addressLine1: "",
addressLine2: "",
country: "",
state: "",
city: "",
zipcode: "",
},
]);
};
const handleDelete = (id) => {
const filteredAddress = addressess.filter((item) => item.id != id);
setAddressess(filteredAddress);
};
const handleAddressChange = (id, field, value) => {
// Find the address with the given ID
const updatedAddresses = addressess.map((address) => {
if (address.id === id) {
return { ...address, [field]: value };
}
return address;
});
setAddressess(updatedAddresses);
};
const getOneAddress = async () => {
axios
.get(`/api/user-address/getOneAddress/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setSelectUserType(res?.data?.address?.userType);
setName(res?.data?.address?.name);
setEmail(res?.data?.address?.email);
setPhno(res?.data?.address?.phno);
setAddressess(res?.data?.address?.addressess);
})
.catch((error) => {
swal({
title: error,
text: " Can not fetch the Address ",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleUpdateAddress = async () => {
if (
!selectUserType ||
!name ||
!email ||
!phno ||
addressess.some(addressIsEmpty)
) {
swal({
title: "Please fill all the required fields correctly",
icon: "error",
button: "Ok",
dangerMode: true,
});
} else {
const updatedresponse = await axios.patch(
`/api/user-address/updateAddress/${id}`,
{
userType: selectUserType,
name,
email,
phno,
addressess,
},
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (updatedresponse.status === 200) {
swal({
title: "Congratulations!!",
text: "Address updated successfully!",
icon: "success",
button: "OK",
});
navigate("/users-address", { replace: true });
} else {
swal({
title: "Please try again",
text: "Cannot update something went wronge !",
icon: "error",
button: "OK",
});
}
}
};
const addressIsEmpty = (address) => {
return (
address.addressLine1 === "" ||
address.country === "" ||
address.state === "" ||
address.city === "" ||
address.zipcode === ""
);
};
useEffect(() => {
getOneAddress();
}, []);
return (
<div>
<Box>
<Typography
variant="h5"
style={{ fontWeight: "bold", marginBottom: "1rem" }}
>
User Address
</Typography>
<Box
sx={{
background: "#FFFFFF",
padding: "1rem",
width: "100%",
borderRadius: "1rem",
position: "relative",
}}
>
<div
style={{
display: "flex",
justifyContent: "flex-end",
}}
>
<Button
variant="outlined"
style={{
textTransform: "unset",
marginRight: "1rem",
border: "1px red solid",
}}
onClick={handleBackClick}
disabled={view === "0"}
>
Back
</Button>
{view !== "2" && (
<Button
variant="contained"
style={{
textTransform: "unset",
}}
onClick={handleNextClick}
>
Next
</Button>
)}
{view === "2" && (
<Button
variant="contained"
style={{
textTransform: "unset",
}}
onClick={handleUpdateAddress}
>
Update address
</Button>
)}
</div>
{view === "0" && (
<div>
<div style={{ display: "flex" }}>
<Typography
variant="h6"
style={{
fontWeight: "bold",
marginBottom: "1rem",
flex: "1",
}}
>
Select User Type
</Typography>
</div>
<FormControl style={{ width: "50%" }}>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
size="small"
disabled={edit}
placeholder="select user type"
value={selectUserType}
onChange={(e) => setSelectUserType(e.target.value)}
>
<MenuItem value={"Online Customer"}>Online Customer</MenuItem>
<MenuItem value={"Corporate"}>Corporate</MenuItem>
</Select>
</FormControl>
</div>
)}
{view === "1" && (
<div>
<Typography
style={{ fontWeight: "bold", marginBottom: "1rem" }}
variant="h6"
>
User Basic Information
</Typography>
<Typography
style={{ fontWeight: "bold", marginBottom: "0.5rem" }}
>
Name:
</Typography>
<TextField
placeholder="Name"
type="text"
variant="outlined"
value={name}
disabled={edit}
style={{ width: "50%", marginBottom: "1rem" }}
onChange={(e) => setName(e.target.value)}
/>
<Typography
style={{ fontWeight: "bold", marginBottom: "0.5rem" }}
>
Email:
</Typography>
<TextField
placeholder="Email"
type="email"
variant="outlined"
value={email}
disabled={edit}
style={{ width: "50%", marginBottom: "1rem" }}
onChange={handleEmailChange}
/>
{emailError && (
<Typography style={{ color: "red" }}>{emailError}</Typography>
)}
<Typography
style={{ fontWeight: "bold", marginBottom: "0.5rem" }}
>
Contact number:
</Typography>
<TextField
placeholder="Contact number"
type="text"
variant="outlined"
value={phno}
disabled={edit}
inputProps={{
maxLength: 10,
}}
style={{ width: "50%", marginBottom: "1rem" }}
onChange={handlePhnoChange}
/>
{phnoError && (
<Typography style={{ color: "red" }}>{phnoError}</Typography>
)}
</div>
)}
{view === "2" && (
<Box marginTop={2}>
<Button
variant="contained"
style={{
marginBottom: "1rem",
textTransform: "unset",
}}
disabled={addressess.length >= 2}
onClick={() => handleAddMoreAddress()}
>
Add one more address{" "}
</Button>
{addressess.map((address, i) => (
<Box>
<Box style={{ display: "flex" }}>
<Typography
style={{
fontWeight: "bold",
margin: "1rem",
flex: "1",
}}
variant="h5"
>
Address {i + 1}
</Typography>
{addressess.length > 1 && (
<Button
variant="contained"
style={{
background: "red",
textTransform: "undet",
margin: "0.5rem",
}}
onClick={() => handleDelete(address.id)}
>
{" "}
Delete
</Button>
)}
</Box>
<MainAddress
key={address.id}
address={address}
edit={edit}
setAddressess={setAddressess}
onAddressChange={(field, value) =>
handleAddressChange(address.id, field, value)
}
/>
</Box>
))}
</Box>
)}
</Box>
</Box>
</div>
);
}

138
src/views/UserAddress/mainAddress.js Normal file
View File

@ -0,0 +1,138 @@
// MainAddress.js
import React from "react";
import TextField from "@mui/material/TextField";
import { Country, State, City } from "country-state-city";
import {
FormControl,
InputLabel,
MenuItem,
Paper,
Select,
} from "@mui/material";
import { Box, Typography } from "@material-ui/core";
export default function MainAddress({ address, onAddressChange, edit }) {
const { id, addressLine1, addressLine2, country, state, city, zipcode } =
address;
const handleFieldChange = (field, value) => {
onAddressChange(field, value);
};
const countries = Country.getAllCountries();
const states = State.getStatesOfCountry(country);
const cities = City.getCitiesOfState(country, state);
return (
<div>
<TextField
label="Address Line 1*"
variant="outlined"
style={{ display: "block", marginBottom: "1rem" }}
fullWidth
disabled={edit}
value={addressLine1}
onChange={(e) => handleFieldChange("addressLine1", e.target.value)}
/>
<TextField
label="Address Line 2 (optional)"
variant="outlined"
style={{ display: "block", marginBottom: "1rem" }}
fullWidth
disabled={edit}
value={addressLine2}
onChange={(e) => handleFieldChange("addressLine2", e.target.value)}
/>
{/* <TextField
label="Country"
variant="outlined"
value={country}
onChange={(e) => handleFieldChange("country", e.target.value)}
/> */}
<Typography>Select Country* </Typography>
<FormControl fullWidth>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={country}
disabled={edit}
style={{ width: "50%", marginBottom: "1rem" }}
MenuProps={{
PaperProps: {
style: {
maxHeight: 200, // Adjust the value to your preferred maximum height
},
},
}}
onChange={(e) => handleFieldChange("country", e.target.value)}
>
{countries.map((country) => (
<MenuItem key={country.isoCode} value={country.isoCode}>
{country.name}
</MenuItem>
))}
</Select>
</FormControl>
<Typography>Select State* </Typography>
<FormControl fullWidth>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
style={{ width: "50%", marginBottom: "1rem" }}
value={state}
disabled={edit}
MenuProps={{
PaperProps: {
style: {
maxHeight: 200, // Adjust the value to your preferred maximum height
},
},
}}
onChange={(e) => handleFieldChange("state", e.target.value)}
>
{states.map((state) => (
<MenuItem key={state.isoCode} value={state.isoCode}>
{state.name}
</MenuItem>
))}
</Select>
</FormControl>
<Typography>Select City* </Typography>
<FormControl fullWidth>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={city}
disabled={edit}
style={{ width: "50%", marginBottom: "1rem" }}
MenuProps={{
PaperProps: {
style: {
maxHeight: 200, // Adjust the value to your preferred maximum height
},
},
}}
onChange={(e) => handleFieldChange("city", e.target.value)}
>
{cities.length == 0 && (
<MenuItem value={"City not available"}>City not available</MenuItem>
)}
{cities.length > 0 &&
cities.map((city) => (
<MenuItem key={city.name} value={city.name}>
{city.name}
</MenuItem>
))}
</Select>
</FormControl>
<Typography style={{ marginBottom: "1rem" }}>Zipcode*</Typography>
<TextField
label="Zipcode*"
variant="outlined"
value={zipcode}
disabled={edit}
style={{ width: "50%" }}
onChange={(e) => handleFieldChange("zipcode", e.target.value)}
/>
</div>
);
}

302
src/views/Business/Businesses.js → src/views/UserAddress/userTable.js
View File

@ -1,94 +1,76 @@
import React, { useEffect } from "react";
import Button from "@material-ui/core/Button";
import { useState } from "react";
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import swal from "sweetalert";
import OverLayButton from "./OverLayButton.js";
import { isAutheticated } from "src/auth.js";
const Businesses = () => {
import {
Box,
FormControl,
IconButton,
InputLabel,
MenuItem,
Select,
TextField,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Fuse from "fuse.js";
import { Typography } from "@material-ui/core";
const UserTable = () => {
const token = isAutheticated();
const [query, setQuery] = useState("");
const navigate = useNavigate();
const [loading, setLoading] = useState(true);
const [success, setSuccess] = useState(true);
const [BusinessesData, setBusinessesData] = useState([]);
const [userAddress, setUserAddress] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [showData, setShowData] = useState(BusinessesData);
const [showData, setShowData] = useState(userAddress);
const handleShowEntries = (e) => {
setCurrentPage(1);
setItemPerPage(e.target.value);
};
const getbusinesses = () => {
const getUserAddressess = async () => {
axios
.get(`/api/businesses/getall`, {
.get(`/api/user-address/getAddressess`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setBusinessesData(res.data?.businesses);
setUserAddress(res.data?.userAddress);
setLoading(false);
})
.catch((err) => {
console.log(err);
.catch((error) => {
swal({
title: error,
text: "please login to access the resource or refresh the page ",
icon: "error",
button: "Retry",
dangerMode: true,
});
setLoading(false);
});
};
useEffect(() => {
getbusinesses();
getUserAddressess();
}, [success]);
console.log(userAddress);
useEffect(() => {
const loadData = () => {
const indexOfLastPost = currentPage * itemPerPage;
const indexOfFirstPost = indexOfLastPost - itemPerPage;
setShowData(BusinessesData.slice(indexOfFirstPost, indexOfLastPost));
setShowData(userAddress.slice(indexOfFirstPost, indexOfLastPost));
};
loadData();
}, [currentPage, itemPerPage, BusinessesData]);
}, [currentPage, itemPerPage, userAddress]);
// const handleVarification = (id) => {
// swal({
// title: 'Are you sure?',
// icon: 'warning',
// buttons: { Yes: { text: 'Yes', value: true }, Cancel: { text: 'Cancel', value: 'cancel' } },
// }).then((value) => {
// if (value === true) {
// axios
// .get(`/api/i/admin/verify/${id}`, {
// headers: {
// 'Access-Control-Allow-Origin': '*',
// Authorization: `Bearer ${token}`,
// },
// })
// .then((res) => {
// swal({
// title: 'success',
// text: res.data.message ? res.data.message : 'Verified Successfully!',
// icon: 'success',
// button: 'ok',
// dangerMode: true,
// })
// setSuccess((prev) => !prev)
// })
// .catch((err) => {
// swal({
// title: 'Failled',
// text: 'Something went wrong!',
// icon: 'error',
// button: 'Retry',
// dangerMode: true,
// })
// })
// }
// })
// }
const handleDelete = (id) => {
swal({
title: "Are you sure?",
@ -100,13 +82,19 @@ const Businesses = () => {
}).then((value) => {
if (value === true) {
axios
.delete(`/api/businesses/delete/${id}`, {
.delete(`/api/user-address/deleteAddress/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
swal({
title: "Deleted",
text: "Address Deleted successfully!",
icon: "success",
button: "ok",
});
setSuccess((prev) => !prev);
})
.catch((err) => {
@ -122,12 +110,6 @@ const Businesses = () => {
});
};
const formatDate = (inputDate) => {
const options = { year: 'numeric', month: 'short', day: 'numeric' };
const date = new Date(inputDate);
return date.toLocaleDateString('en-US', options);
}
return (
<div className="main-content">
<div className="page-content">
@ -147,28 +129,30 @@ const Businesses = () => {
</div>
<div className="page-title-right">
<Link to="/users/add">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Add user
</Button>
</Link>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
navigate("/users-address/add", { replace: true });
}}
>
Add User
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="row ml-0 mr-0 mb-10 ">
<div className="col-sm-12 col-md-12">
<div className="dataTables_length">
<label className="w-100">
@ -204,13 +188,12 @@ const Businesses = () => {
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th className="text-start">User Name </th>
{/* <th className="text-start">Logo</th> */}
<th className="text-start">User Type</th>
<th className="text-start">Created On</th>
{/* <th className="text-start">Status</th> */}
<th className="text-center">Actions</th>
<th className="text-center">Campaigns</th>
<th className="text-start">Id</th>
<th className="text-start">User Name</th>
<th className="text-start">Email</th>
<th className="text-start">Added On</th>
<th className="text-start">Actions</th>
</tr>
</thead>
<tbody>
@ -228,117 +211,96 @@ const Businesses = () => {
</td>
</tr>
) : (
showData.map((i, idx) => {
showData.map((userAddress, i) => {
return (
<tr key={idx}>
<tr key={i}>
<td>{userAddress._id}</td>
<td className="text-start">
{i.userName ? i.userName : i.business}
{userAddress.name}
</td>
{/* {i.banner && i.banner ?
<td className="text-start">
<img src={i.banner.url} alt="No Image" height="50" />
</td> :
<p>No image!</p>
} */}
<td className="text-start">
{i.userType ? i.userType : i.short_url}
{userAddress.email}
</td>
<td className="text-start">
{formatDate(i.createdAt)
}
{new Date(
userAddress.createdAt
).toLocaleString("en-IN", {
weekday: "short",
month: "short",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
})}
</td>
{/* <td className="text-start">
<button
style={{ color: 'white' }}
type="button"
className={`
btn ${i?.verify === true ? 'btn-success' : 'btn-danger'} btn-sm
waves-effect waves-light
ms-2
`}
disabled={i?.verify === true}
onClick={() => {
handleVarification(i._id)
}}
>
{i?.verify ? 'verified' : 'Not Verify'}
</button>
</td> */}
<td className=" text-center">
{/* <OverLayButton data={{ url: i?.url }} /> */}
<Link to={`/users/view/${i._id}`}>
<td className="text-start">
<Link
to={`/users-address/view/${userAddress._id}`}
>
<button
style={{ color: "white" }}
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
ms-2
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
View
</button>
</Link>
<Link to={`/users/edit/${i._id}`}>
<Link
to={`/users-address/edit/${userAddress._id}`}
>
<button
style={{ color: "white" }}
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-success btn-sm
btn btn-info btn-sm
waves-effect waves-light
ms-2
btn-table
mt-1
mx-1
"
>
Edit
</button>
</Link>
<button
style={{ color: "white" }}
type="button"
className="
btn btn-danger btn-sm
waves-effect waves-light
ms-2
"
onClick={() => {
handleDelete(i._id);
<Link
to={"#"}
style={{
marginRight: "1rem",
}}
>
Delete
</button>
<button
style={{ color: "white" }}
type="button"
className="
btn btn-danger btn-sm
waves-effect waves-light
btn-table
mt-1
mx-1
"
onClick={() => {
handleDelete(userAddress._id);
}}
>
Delete
</button>
</Link>
</td>
<td className="text-center">0</td>
</tr>
);
})
@ -358,9 +320,9 @@ const Businesses = () => {
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
{Math.min(
currentPage * itemPerPage,
BusinessesData.length
userAddress.length
)}{" "}
of {BusinessesData.length} entries
of {userAddress.length} entries
</div>
</div>
@ -408,7 +370,7 @@ const Businesses = () => {
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
BusinessesData.length - 1
userAddress.length - 1
) && (
<li className="paginate_button page-item ">
<span
@ -427,7 +389,7 @@ const Businesses = () => {
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
BusinessesData.length - 1
userAddress.length - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
@ -455,4 +417,4 @@ const Businesses = () => {
);
};
export default Businesses;
export default UserTable;

220
src/views/UserAddress/viewAddress.js Normal file
View File

@ -0,0 +1,220 @@
import { Typography } from "@material-ui/core";
import { Box, Button, Paper } from "@mui/material";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { isAutheticated } from "src/auth";
import { Country, State, City } from "country-state-city";
const activeStyle = {
background: "black",
margin: "1rem",
textTransform: "unset",
color: "white",
};
const inActive = {
background: "blue",
margin: "1rem",
textTransform: "unset",
color: "white",
};
export default function ViewAddress() {
const [selectUserType, setSelectUserType] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phno, setPhno] = useState("");
const token = isAutheticated();
const navigate = useNavigate();
const id = useParams()?.id;
const [addressess, setAddressess] = useState([]);
const getOneAddress = async () => {
axios
.get(`/api/user-address/getOneAddress/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setSelectUserType(res?.data?.address?.userType);
setName(res?.data?.address?.name);
setEmail(res?.data?.address?.email);
setPhno(res?.data?.address?.phno);
setAddressess(res?.data?.address?.addressess);
})
.catch((error) => {
swal({
title: error,
text: " Can not fetch the Address ",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
useEffect(() => {
getOneAddress();
}, []);
const [activeTab, setActiveTab] = useState("userType");
return (
<div>
<Box>
<Button
variant="contained"
style={activeTab === "userType" ? activeStyle : inActive}
onClick={() => setActiveTab("userType")}
>
User Type
</Button>
<Button
variant="contained"
style={activeTab === "basicInfo" ? activeStyle : inActive}
onClick={() => setActiveTab("basicInfo")}
>
User Basic Information
</Button>
<Button
variant="contained"
style={activeTab === "userAddress" ? activeStyle : inActive}
onClick={() => setActiveTab("userAddress")}
>
User Address
</Button>
{activeTab === "userType" && (
<Box>
<Typography
style={{
fontWeight: "bold",
background: "white",
padding: "2rem",
}}
variant="h5"
>
User Type :{" "}
<strong style={{ color: "green" }}>{selectUserType}</strong>
</Typography>
</Box>
)}
{activeTab === "basicInfo" && (
<Box>
<Paper elevation={0} style={{ padding: "1rem" }}>
<Typography variant="h4">User Basic Information</Typography>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
User Name : <strong style={{ color: "green" }}>{name}</strong>
</Typography>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
User email : <strong style={{ color: "green" }}>{email}</strong>
</Typography>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
User phone number :{" "}
<strong style={{ color: "green" }}>{phno}</strong>
</Typography>
</Paper>
</Box>
)}
{activeTab === "userAddress" && (
<Box>
<Paper elevation={0} style={{ padding: "1rem" }}>
<Typography variant="h4">User Address</Typography>
{addressess.map((address, i) => (
<Box margin={"1rem 0rem"} key={i}>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
Address line 1 :{" "}
<strong style={{ color: "green" }}>
{address.addressLine1 == ""
? "not available"
: address.addressLine1}
</strong>
</Typography>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
Address line 2 :{" "}
<strong style={{ color: "green" }}>
{address.addressLine2 == ""
? "not available"
: address.addressLine2}
</strong>
</Typography>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
Country :{" "}
<strong style={{ color: "green" }}>
{Country.getCountryByCode(address.country).name}
</strong>
</Typography>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
State :{" "}
<strong style={{ color: "green" }}>
{
State.getStateByCodeAndCountry(
address.state,
address.country
).name
}
</strong>
</Typography>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
City :{" "}
<strong style={{ color: "green" }}>{address.city}</strong>
</Typography>
<Typography
style={{
margin: "1rem 0rem",
}}
variant="h5"
>
Zipcode :{" "}
<strong style={{ color: "green" }}>
{address.zipcode}
</strong>
</Typography>
</Box>
))}
</Paper>
</Box>
)}
</Box>
</div>
);
}