user Address done and category updated with adding images
This commit is contained in:
print-signs
parent
34948d795b
commit
36d7c1beae
@ -46,7 +46,7 @@
|
|||||||
"@reduxjs/toolkit": "^1.9.2",
|
"@reduxjs/toolkit": "^1.9.2",
|
||||||
"axios": "^0.25.0",
|
"axios": "^0.25.0",
|
||||||
"bootstrap": "^5.1.3",
|
"bootstrap": "^5.1.3",
|
||||||
"country-state-city": "^3.1.2",
|
"country-state-city": "^3.2.1",
|
||||||
"md5": "^2.3.0",
|
"md5": "^2.3.0",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"quill": "^1.3.7",
|
"quill": "^1.3.7",
|
||||||
@ -66,7 +66,8 @@
|
|||||||
"simplebar-react": "^2.3.6",
|
"simplebar-react": "^2.3.6",
|
||||||
"styled-components": "^6.0.8",
|
"styled-components": "^6.0.8",
|
||||||
"sweetalert": "^2.1.2",
|
"sweetalert": "^2.1.2",
|
||||||
"sweetalert2": "^11.4.0"
|
"sweetalert2": "^11.4.0",
|
||||||
|
"uuid": "^9.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"auto-changelog": "~2.3.0",
|
"auto-changelog": "~2.3.0",
|
||||||
|
|||||||
104
src/App.js
104
src/App.js
@ -1,33 +1,35 @@
|
|||||||
import React, { Component, Suspense } from 'react'
|
import React, { Component, Suspense } from "react";
|
||||||
import axios from 'axios';
|
import axios from "axios";
|
||||||
import { Router, Route, Routes, HashRouter } from 'react-router-dom'
|
import { Router, Route, Routes, HashRouter } from "react-router-dom";
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from "react";
|
||||||
import { Toaster } from "react-hot-toast";
|
import { Toaster } from "react-hot-toast";
|
||||||
import './scss/style.scss'
|
import "./scss/style.scss";
|
||||||
import ForgotPassword from './views/pages/register/ForgotPassword'
|
import ForgotPassword from "./views/pages/register/ForgotPassword";
|
||||||
import NewRegister from './views/pages/register/NewRegister'
|
import NewRegister from "./views/pages/register/NewRegister";
|
||||||
import ProtectedRoute from './components/ProtectedRoute';
|
// import ProtectedRoute from './components/ProtectedRoute';
|
||||||
import { isAutheticated } from './auth';
|
import { isAutheticated } from "./auth";
|
||||||
|
|
||||||
|
|
||||||
const loading = (
|
const loading = (
|
||||||
<div className="pt-3 text-center">
|
<div className="pt-3 text-center">
|
||||||
<div className="sk-spinner sk-spinner-pulse"></div>
|
<div className="sk-spinner sk-spinner-pulse"></div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
// import EditProducts from './views/Commerce/Editproducts'
|
// import EditProducts from './views/Commerce/Editproducts'
|
||||||
// Containers
|
// Containers
|
||||||
const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
|
const DefaultLayout = React.lazy(() => import("./layout/DefaultLayout"));
|
||||||
|
|
||||||
// Pages
|
// Pages
|
||||||
const Login = React.lazy(() => import('./views/pages/login/Login'))
|
const Login = React.lazy(() => import("./views/pages/login/Login"));
|
||||||
const Register = React.lazy(() => import('./views/pages/register/Change_password'))
|
const Register = React.lazy(() =>
|
||||||
const Page404 = React.lazy(() => import('./views/pages/register/page404/Page404'))
|
import("./views/pages/register/Change_password")
|
||||||
const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
|
);
|
||||||
|
const Page404 = React.lazy(() =>
|
||||||
|
import("./views/pages/register/page404/Page404")
|
||||||
|
);
|
||||||
|
const Page500 = React.lazy(() => import("./views/pages/page500/Page500"));
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
const [userdata, setUserData] = useState(null);
|
||||||
const [userdata, setUserData] = useState(null)
|
|
||||||
const token = isAutheticated();
|
const token = isAutheticated();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -35,7 +37,7 @@ const App = () => {
|
|||||||
let existanceData = localStorage.getItem("authToken");
|
let existanceData = localStorage.getItem("authToken");
|
||||||
if (!existanceData) {
|
if (!existanceData) {
|
||||||
// console.log(existanceData.userData)
|
// console.log(existanceData.userData)
|
||||||
setUserData(false)
|
setUserData(false);
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
// console.log('requesting user data from server')
|
// console.log('requesting user data from server')
|
||||||
@ -43,50 +45,62 @@ const App = () => {
|
|||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
// console.log(response.data)
|
// console.log(response.data)
|
||||||
const data = response.data
|
const data = response.data;
|
||||||
if (data.success && data.user.role === 'admin') {
|
if (data.success && data.user.role === "admin") {
|
||||||
|
|
||||||
setUserData(data.user);
|
setUserData(data.user);
|
||||||
} else {
|
} else {
|
||||||
setUserData(false)
|
setUserData(false);
|
||||||
}
|
}
|
||||||
|
} catch (err) {
|
||||||
}
|
setUserData(false);
|
||||||
catch (err) {
|
|
||||||
setUserData(false)
|
|
||||||
console.log(err);
|
console.log(err);
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
getUser();
|
||||||
getUser()
|
}, []);
|
||||||
}, [])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
<Suspense fallback={loading}>
|
<Suspense fallback={loading}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route exact path="/" name="Login Page" element={<Login />} />
|
<Route exact path="/" name="Login Page" element={<Login />} />
|
||||||
<Route exact path="/register" name="Register Page" element={<NewRegister />} />
|
<Route
|
||||||
<Route exact path="/password/forgot" name="Forgot Page" element={<ForgotPassword />} />
|
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="/404" name="Page 404" element={<Page404 />} />
|
||||||
<Route exact path="/500" name="Page 500" element={<Page500 />} />
|
<Route exact path="/500" name="Page 500" element={<Page500 />} />
|
||||||
|
|
||||||
<Route path="/" name="Home" element={userdata?.role === "admin" ? <DefaultLayout />
|
<Route
|
||||||
:
|
path="/"
|
||||||
userdata === false ? <Login /> : <div></div>} />
|
name="Home"
|
||||||
|
element={
|
||||||
|
userdata?.role === "admin" ? (
|
||||||
|
<DefaultLayout />
|
||||||
|
) : userdata === false ? (
|
||||||
|
<Login />
|
||||||
|
) : (
|
||||||
|
<div></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
<Route path="*" name="Home" element={<DefaultLayout />} />
|
<Route path="*" name="Home" element={<DefaultLayout />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
<Toaster />
|
<Toaster />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
||||||
</HashRouter>
|
</HashRouter>
|
||||||
|
);
|
||||||
)
|
};
|
||||||
}
|
export default App;
|
||||||
export default App
|
|
||||||
|
|||||||
@ -33,7 +33,7 @@ const _nav = [
|
|||||||
component: CNavItem,
|
component: CNavItem,
|
||||||
name: "Users",
|
name: "Users",
|
||||||
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
|
icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
|
||||||
to: "/users",
|
to: "/users-address",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: CNavItem,
|
component: CNavItem,
|
||||||
|
|||||||
@ -27,9 +27,7 @@ import Login from "./views/pages/login/Login";
|
|||||||
import Appointments from "./views/Appointments/Appointments";
|
import Appointments from "./views/Appointments/Appointments";
|
||||||
|
|
||||||
//Businesses
|
//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";
|
import Products from "./views/Products/Products";
|
||||||
//product
|
//product
|
||||||
import AddProduct from "./views/Products/AddProduct";
|
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 ViewAppointment from "./views/Appointments/ViewAppointment";
|
||||||
import EditAppointment from "./views/Appointments/EditAppointment";
|
import EditAppointment from "./views/Appointments/EditAppointment";
|
||||||
import AddNewAppointment from "./views/Appointments/AddNewAppointment";
|
import AddNewAppointment from "./views/Appointments/AddNewAppointment";
|
||||||
import ViewHealthCareProvider from "./views/Business/ViewHealthCareProvider";
|
|
||||||
import Campaign from "./views/Campaigns/Campaign.js";
|
import Campaign from "./views/Campaigns/Campaign.js";
|
||||||
import AddCampaign from "./views/Campaigns/AddCampaign.js";
|
import AddCampaign from "./views/Campaigns/AddCampaign.js";
|
||||||
import Categories from "./views/Categories/categories";
|
import Categories from "./views/Categories/categories";
|
||||||
@ -88,6 +86,11 @@ import Content from "./views/Content/content";
|
|||||||
import EditPrivacyPolicy from "./views/Content/editPrivacyPolicy";
|
import EditPrivacyPolicy from "./views/Content/editPrivacyPolicy";
|
||||||
import EditTermsConditions from "./views/Content/editTermsConditions";
|
import EditTermsConditions from "./views/Content/editTermsConditions";
|
||||||
import EditShippingPolicy from "./views/Content/editShippingPolicy";
|
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 = [
|
const routes = [
|
||||||
{ path: "/", exact: true, name: "Home" },
|
{ path: "/", exact: true, name: "Home" },
|
||||||
{
|
{
|
||||||
@ -127,27 +130,48 @@ const routes = [
|
|||||||
element: AddNewAppointment,
|
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
|
// health care providers
|
||||||
{
|
// {
|
||||||
path: "//users",
|
// path: "//users",
|
||||||
name: "healthcare providers",
|
// name: "healthcare providers",
|
||||||
element: Businesses,
|
// element: Businesses,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: "//users/add",
|
// path: "//users/add",
|
||||||
name: "Add healthcare providers",
|
// name: "Add healthcare providers",
|
||||||
element: AddBusiness,
|
// element: AddBusiness,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: "/users/edit/:id",
|
// path: "/users/edit/:id",
|
||||||
name: "Edit healthcare providers",
|
// name: "Edit healthcare providers",
|
||||||
element: EditBusiness,
|
// element: EditBusiness,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: "/users/view/:id",
|
// path: "/users/view/:id",
|
||||||
name: "view healthcare providers",
|
// name: "view healthcare providers",
|
||||||
element: ViewHealthCareProvider,
|
// element: ViewHealthCareProvider,
|
||||||
},
|
// },
|
||||||
// Categories
|
// Categories
|
||||||
{
|
{
|
||||||
path: "//categories",
|
path: "//categories",
|
||||||
@ -164,16 +188,16 @@ const routes = [
|
|||||||
name: "Add Campaigns",
|
name: "Add Campaigns",
|
||||||
element: AddCampaign,
|
element: AddCampaign,
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
path: "/campaigns/edit/:id",
|
// path: "/campaigns/edit/:id",
|
||||||
name: "Edit healthcare providers",
|
// name: "Edit healthcare providers",
|
||||||
element: EditBusiness,
|
// element: EditBusiness,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: "/campaigns/view/:id",
|
// path: "/campaigns/view/:id",
|
||||||
name: "view healthcare providers",
|
// name: "view healthcare providers",
|
||||||
element: ViewHealthCareProvider,
|
// element: ViewHealthCareProvider,
|
||||||
},
|
// },
|
||||||
|
|
||||||
// { path: '/franchisee/view/:id', name: 'view franchisee', element: ViewFra },
|
// { path: '/franchisee/view/:id', name: 'view franchisee', element: ViewFra },
|
||||||
//Contact Requests
|
//Contact Requests
|
||||||
|
|||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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
|
|
||||||
@ -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;
|
|
||||||
@ -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
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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
|
|
||||||
@ -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;
|
|
||||||
@ -13,10 +13,12 @@ import {
|
|||||||
import CloseIcon from "@mui/icons-material/Close";
|
import CloseIcon from "@mui/icons-material/Close";
|
||||||
import { ClipLoader } from "react-spinners";
|
import { ClipLoader } from "react-spinners";
|
||||||
import swal from "sweetalert";
|
import swal from "sweetalert";
|
||||||
|
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
||||||
|
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
|
||||||
|
|
||||||
const style = {
|
const style = {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: "20%",
|
top: "50%",
|
||||||
left: "50%",
|
left: "50%",
|
||||||
transform: "translate(-50%, -50%)",
|
transform: "translate(-50%, -50%)",
|
||||||
width: 400,
|
width: 400,
|
||||||
@ -34,21 +36,25 @@ const Categories = () => {
|
|||||||
const [saveLoding, setSaveLoading] = useState(true);
|
const [saveLoding, setSaveLoading] = useState(true);
|
||||||
const [edit, setEdit] = useState(false);
|
const [edit, setEdit] = useState(false);
|
||||||
const [categoryName, setCategoryName] = useState("");
|
const [categoryName, setCategoryName] = useState("");
|
||||||
|
const [categoryImage, setCategoryImage] = useState("");
|
||||||
|
const [error, setError] = useState("");
|
||||||
const [categoryId, setCategoryId] = useState("");
|
const [categoryId, setCategoryId] = useState("");
|
||||||
const [category, setCategory] = useState([]);
|
const [category, setCategory] = useState([]);
|
||||||
const [itemPerPage, setItemPerPage] = useState(10);
|
const [itemPerPage, setItemPerPage] = useState(10);
|
||||||
const [page, setPage] = useState(1);
|
const [page, setPage] = useState(1);
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
const [olderCategoryName, setOlderCategoruName] = useState("");
|
||||||
|
const [olderImage, setOlderImage] = useState("");
|
||||||
|
|
||||||
const handleOpen = () => setOpen(true);
|
const handleOpen = () => setOpen(true);
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
// setUpdating(true)
|
// setUpdating(true)
|
||||||
|
|
||||||
setCategoryName("");
|
setCategoryName("");
|
||||||
setCategoryId("");
|
setCategoryId("");
|
||||||
// setUpdating(false);
|
setOlderImage("");
|
||||||
// setIsUpdate(false);
|
setCategoryImage("");
|
||||||
};
|
};
|
||||||
|
|
||||||
const getCategories = async () => {
|
const getCategories = async () => {
|
||||||
@ -78,34 +84,75 @@ const Categories = () => {
|
|||||||
getCategories();
|
getCategories();
|
||||||
}, [token, category]);
|
}, [token, category]);
|
||||||
|
|
||||||
console.log(category.length);
|
const handleEditClick = (_id, categoryName, categoryImage) => {
|
||||||
const handleEditClick = (_id, categoryName) => {
|
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
|
setOlderImage(categoryImage);
|
||||||
setCategoryName(categoryName);
|
setCategoryName(categoryName);
|
||||||
setCategoryId(_id);
|
setCategoryId(_id);
|
||||||
|
setOlderCategoruName(categoryName);
|
||||||
setEdit(true);
|
setEdit(true);
|
||||||
// setUpdating(false);
|
// setUpdating(false);
|
||||||
};
|
};
|
||||||
|
const categoryNamesArray = [];
|
||||||
|
const setCategoryNamesArray = () => {
|
||||||
|
category &&
|
||||||
|
category.map((category) => {
|
||||||
|
categoryNamesArray.push(category.categoryName.toLowerCase());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
setCategoryNamesArray();
|
||||||
|
|
||||||
const handleUpdate = () => {
|
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);
|
setUpdating(false);
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("categoryName", categoryName);
|
||||||
|
|
||||||
|
formData.append("categoryImage", categoryImage);
|
||||||
|
|
||||||
|
formData.append("olderImage", JSON.stringify(olderImage));
|
||||||
|
|
||||||
axios
|
axios
|
||||||
.patch(
|
.patch(`/api/category/update/${categoryId}`, formData, {
|
||||||
`/api/category/update/${categoryId}`,
|
headers: {
|
||||||
{ categoryName },
|
Authorization: `Bearer ${token}`,
|
||||||
{
|
},
|
||||||
headers: {
|
})
|
||||||
Authorization: `Bearer ${token}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
// setUpdating(true);
|
// setUpdating(true);
|
||||||
// setIsUpdate(false);
|
// setIsUpdate(false);
|
||||||
handleClose();
|
handleClose();
|
||||||
setCategoryId("");
|
setCategoryId("");
|
||||||
setCategoryName("");
|
setCategoryName("");
|
||||||
|
setCategoryImage("");
|
||||||
|
setOlderImage("");
|
||||||
setUpdating(true);
|
setUpdating(true);
|
||||||
setEdit(false);
|
setEdit(false);
|
||||||
swal({
|
swal({
|
||||||
@ -119,11 +166,12 @@ const Categories = () => {
|
|||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
swal({
|
swal({
|
||||||
title: "Sorry, please try again",
|
title: "Sorry, please try again",
|
||||||
text: "Something went wrong!",
|
text: err,
|
||||||
icon: "error",
|
icon: "error",
|
||||||
button: "Retry",
|
button: "Retry",
|
||||||
dangerMode: true,
|
dangerMode: true,
|
||||||
});
|
});
|
||||||
|
setUpdating(true);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -166,10 +214,23 @@ const Categories = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleSaveCategory = async () => {
|
const handleSaveCategory = async () => {
|
||||||
if (!categoryName) {
|
const categoryExits = categoryNamesArray.includes(
|
||||||
|
categoryName.toLowerCase()
|
||||||
|
);
|
||||||
|
if (categoryExits) {
|
||||||
swal({
|
swal({
|
||||||
title: "Warning",
|
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",
|
icon: "error",
|
||||||
button: "Retry",
|
button: "Retry",
|
||||||
dangerMode: true,
|
dangerMode: true,
|
||||||
@ -178,23 +239,25 @@ const Categories = () => {
|
|||||||
}
|
}
|
||||||
setSaveLoading(false);
|
setSaveLoading(false);
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("categoryName", categoryName);
|
||||||
|
formData.append("categoryImage", categoryImage);
|
||||||
|
|
||||||
axios
|
axios
|
||||||
.post(
|
.post("/api/category/add", formData, {
|
||||||
"/api/category/add",
|
headers: {
|
||||||
{ categoryName },
|
Authorization: `Bearer ${token}`,
|
||||||
{
|
"Content-Type": "multipart/formdata",
|
||||||
headers: {
|
},
|
||||||
Authorization: `Bearer ${token}`,
|
})
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.status === 201) {
|
if (response.status === 201) {
|
||||||
setOpen(false);
|
setOpen(false);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
setSaveLoading(true);
|
setSaveLoading(true);
|
||||||
setCategoryName("");
|
setCategoryName("");
|
||||||
|
setCategoryImage("");
|
||||||
|
setOlderImage("");
|
||||||
swal({
|
swal({
|
||||||
title: "Added",
|
title: "Added",
|
||||||
text: "New category added successfully!",
|
text: "New category added successfully!",
|
||||||
@ -218,6 +281,19 @@ const Categories = () => {
|
|||||||
const getPageCount = () => {
|
const getPageCount = () => {
|
||||||
return Math.max(1, Math.ceil(category.length / itemPerPage));
|
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 (
|
return (
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
<div className="page-content">
|
<div className="page-content">
|
||||||
@ -283,7 +359,12 @@ const Categories = () => {
|
|||||||
style={{
|
style={{
|
||||||
padding: "1rem",
|
padding: "1rem",
|
||||||
}}
|
}}
|
||||||
onChange={(e) => setCategoryName(e.target.value)}
|
onChange={(e) =>
|
||||||
|
setCategoryName(
|
||||||
|
e.target.value.charAt(0).toUpperCase() +
|
||||||
|
e.target.value.slice(1)
|
||||||
|
)
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{categoryName ? (
|
{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
|
<Box
|
||||||
p={2}
|
p={2}
|
||||||
display={"flex"}
|
display={"flex"}
|
||||||
@ -405,6 +592,8 @@ const Categories = () => {
|
|||||||
style={{ background: "rgb(140, 213, 213)" }}
|
style={{ background: "rgb(140, 213, 213)" }}
|
||||||
>
|
>
|
||||||
<tr>
|
<tr>
|
||||||
|
<th> Image</th>
|
||||||
|
|
||||||
<th> Categories Name</th>
|
<th> Categories Name</th>
|
||||||
|
|
||||||
<th>Action</th>
|
<th>Action</th>
|
||||||
@ -433,6 +622,15 @@ const Categories = () => {
|
|||||||
)
|
)
|
||||||
.map((item, i) => (
|
.map((item, i) => (
|
||||||
<tr key={i}>
|
<tr key={i}>
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
className="me-2"
|
||||||
|
src={item?.categoryImage?.secure_url}
|
||||||
|
width="40"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<h5>{} </h5>
|
||||||
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<h5>{item.categoryName} </h5>
|
<h5>{item.categoryName} </h5>
|
||||||
</td>
|
</td>
|
||||||
@ -453,7 +651,8 @@ const Categories = () => {
|
|||||||
onClick={() =>
|
onClick={() =>
|
||||||
handleEditClick(
|
handleEditClick(
|
||||||
item._id,
|
item._id,
|
||||||
item.categoryName
|
item.categoryName,
|
||||||
|
item.categoryImage
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -229,14 +229,6 @@ const Products = () => {
|
|||||||
margin: "1rem 1rem 1rem 0rem",
|
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
|
<Typography
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|||||||
501
src/views/UserAddress/addUserAddress.js
Normal file
501
src/views/UserAddress/addUserAddress.js
Normal 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
432
src/views/UserAddress/editUserAddress.js
Normal 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
138
src/views/UserAddress/mainAddress.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,94 +1,76 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import Button from "@material-ui/core/Button";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
import Button from "@material-ui/core/Button";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import { isAutheticated } from "src/auth";
|
||||||
import swal from "sweetalert";
|
import swal from "sweetalert";
|
||||||
import OverLayButton from "./OverLayButton.js";
|
import {
|
||||||
import { isAutheticated } from "src/auth.js";
|
Box,
|
||||||
|
FormControl,
|
||||||
const Businesses = () => {
|
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 token = isAutheticated();
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const navigate = useNavigate();
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [success, setSuccess] = useState(true);
|
const [success, setSuccess] = useState(true);
|
||||||
const [BusinessesData, setBusinessesData] = useState([]);
|
const [userAddress, setUserAddress] = useState([]);
|
||||||
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const [itemPerPage, setItemPerPage] = useState(10);
|
const [itemPerPage, setItemPerPage] = useState(10);
|
||||||
const [showData, setShowData] = useState(BusinessesData);
|
const [showData, setShowData] = useState(userAddress);
|
||||||
|
|
||||||
const handleShowEntries = (e) => {
|
const handleShowEntries = (e) => {
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
setItemPerPage(e.target.value);
|
setItemPerPage(e.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getbusinesses = () => {
|
const getUserAddressess = async () => {
|
||||||
axios
|
axios
|
||||||
.get(`/api/businesses/getall`, {
|
.get(`/api/user-address/getAddressess`, {
|
||||||
headers: {
|
headers: {
|
||||||
"Access-Control-Allow-Origin": "*",
|
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
setBusinessesData(res.data?.businesses);
|
setUserAddress(res.data?.userAddress);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((error) => {
|
||||||
console.log(err);
|
swal({
|
||||||
|
title: error,
|
||||||
|
text: "please login to access the resource or refresh the page ",
|
||||||
|
icon: "error",
|
||||||
|
button: "Retry",
|
||||||
|
dangerMode: true,
|
||||||
|
});
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getbusinesses();
|
getUserAddressess();
|
||||||
}, [success]);
|
}, [success]);
|
||||||
|
console.log(userAddress);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadData = () => {
|
const loadData = () => {
|
||||||
const indexOfLastPost = currentPage * itemPerPage;
|
const indexOfLastPost = currentPage * itemPerPage;
|
||||||
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
const indexOfFirstPost = indexOfLastPost - itemPerPage;
|
||||||
setShowData(BusinessesData.slice(indexOfFirstPost, indexOfLastPost));
|
setShowData(userAddress.slice(indexOfFirstPost, indexOfLastPost));
|
||||||
};
|
};
|
||||||
loadData();
|
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) => {
|
const handleDelete = (id) => {
|
||||||
swal({
|
swal({
|
||||||
title: "Are you sure?",
|
title: "Are you sure?",
|
||||||
@ -100,13 +82,19 @@ const Businesses = () => {
|
|||||||
}).then((value) => {
|
}).then((value) => {
|
||||||
if (value === true) {
|
if (value === true) {
|
||||||
axios
|
axios
|
||||||
.delete(`/api/businesses/delete/${id}`, {
|
.delete(`/api/user-address/deleteAddress/${id}`, {
|
||||||
headers: {
|
headers: {
|
||||||
"Access-Control-Allow-Origin": "*",
|
"Access-Control-Allow-Origin": "*",
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
|
swal({
|
||||||
|
title: "Deleted",
|
||||||
|
text: "Address Deleted successfully!",
|
||||||
|
icon: "success",
|
||||||
|
button: "ok",
|
||||||
|
});
|
||||||
setSuccess((prev) => !prev);
|
setSuccess((prev) => !prev);
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.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 (
|
return (
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
<div className="page-content">
|
<div className="page-content">
|
||||||
@ -147,28 +129,30 @@ const Businesses = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="page-title-right">
|
<div className="page-title-right">
|
||||||
<Link to="/users/add">
|
<Button
|
||||||
<Button
|
variant="contained"
|
||||||
variant="contained"
|
color="primary"
|
||||||
color="primary"
|
style={{
|
||||||
style={{
|
fontWeight: "bold",
|
||||||
fontWeight: "bold",
|
marginBottom: "1rem",
|
||||||
marginBottom: "1rem",
|
textTransform: "capitalize",
|
||||||
textTransform: "capitalize",
|
}}
|
||||||
}}
|
onClick={() => {
|
||||||
>
|
navigate("/users-address/add", { replace: true });
|
||||||
Add user
|
}}
|
||||||
</Button>
|
>
|
||||||
</Link>
|
Add User
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-lg-12">
|
<div className="col-lg-12">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-body">
|
<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="col-sm-12 col-md-12">
|
||||||
<div className="dataTables_length">
|
<div className="dataTables_length">
|
||||||
<label className="w-100">
|
<label className="w-100">
|
||||||
@ -204,13 +188,12 @@ const Businesses = () => {
|
|||||||
style={{ background: "rgb(140, 213, 213)" }}
|
style={{ background: "rgb(140, 213, 213)" }}
|
||||||
>
|
>
|
||||||
<tr>
|
<tr>
|
||||||
<th className="text-start">User Name </th>
|
<th className="text-start">Id</th>
|
||||||
{/* <th className="text-start">Logo</th> */}
|
<th className="text-start">User Name</th>
|
||||||
<th className="text-start">User Type</th>
|
<th className="text-start">Email</th>
|
||||||
<th className="text-start">Created On</th>
|
|
||||||
{/* <th className="text-start">Status</th> */}
|
<th className="text-start">Added On</th>
|
||||||
<th className="text-center">Actions</th>
|
<th className="text-start">Actions</th>
|
||||||
<th className="text-center">Campaigns</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -228,117 +211,96 @@ const Businesses = () => {
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
) : (
|
) : (
|
||||||
showData.map((i, idx) => {
|
showData.map((userAddress, i) => {
|
||||||
return (
|
return (
|
||||||
<tr key={idx}>
|
<tr key={i}>
|
||||||
|
<td>{userAddress._id}</td>
|
||||||
<td className="text-start">
|
<td className="text-start">
|
||||||
{i.userName ? i.userName : i.business}
|
{userAddress.name}
|
||||||
</td>
|
</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">
|
<td className="text-start">
|
||||||
{i.userType ? i.userType : i.short_url}
|
{userAddress.email}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<td className="text-start">
|
<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>
|
||||||
{/* <td className="text-start">
|
<td className="text-start">
|
||||||
<button
|
<Link
|
||||||
style={{ color: 'white' }}
|
to={`/users-address/view/${userAddress._id}`}
|
||||||
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}`}>
|
|
||||||
<button
|
<button
|
||||||
style={{ color: "white" }}
|
style={{
|
||||||
|
color: "white",
|
||||||
|
marginRight: "1rem",
|
||||||
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
className="
|
className="
|
||||||
btn btn-primary btn-sm
|
btn btn-primary btn-sm
|
||||||
waves-effect waves-light
|
waves-effect waves-light
|
||||||
ms-2
|
btn-table
|
||||||
|
mx-1
|
||||||
|
mt-1
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
View
|
View
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link
|
||||||
<Link to={`/users/edit/${i._id}`}>
|
to={`/users-address/edit/${userAddress._id}`}
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
style={{ color: "white" }}
|
style={{
|
||||||
|
color: "white",
|
||||||
|
marginRight: "1rem",
|
||||||
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
className="
|
className="
|
||||||
btn btn-success btn-sm
|
btn btn-info btn-sm
|
||||||
waves-effect waves-light
|
waves-effect waves-light
|
||||||
ms-2
|
btn-table
|
||||||
|
mt-1
|
||||||
|
mx-1
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<button
|
<Link
|
||||||
style={{ color: "white" }}
|
to={"#"}
|
||||||
type="button"
|
style={{
|
||||||
className="
|
marginRight: "1rem",
|
||||||
btn btn-danger btn-sm
|
|
||||||
waves-effect waves-light
|
|
||||||
ms-2
|
|
||||||
|
|
||||||
"
|
|
||||||
onClick={() => {
|
|
||||||
handleDelete(i._id);
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
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>
|
||||||
<td className="text-center">0</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
@ -358,9 +320,9 @@ const Businesses = () => {
|
|||||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||||
{Math.min(
|
{Math.min(
|
||||||
currentPage * itemPerPage,
|
currentPage * itemPerPage,
|
||||||
BusinessesData.length
|
userAddress.length
|
||||||
)}{" "}
|
)}{" "}
|
||||||
of {BusinessesData.length} entries
|
of {userAddress.length} entries
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -408,7 +370,7 @@ const Businesses = () => {
|
|||||||
|
|
||||||
{!(
|
{!(
|
||||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||||
BusinessesData.length - 1
|
userAddress.length - 1
|
||||||
) && (
|
) && (
|
||||||
<li className="paginate_button page-item ">
|
<li className="paginate_button page-item ">
|
||||||
<span
|
<span
|
||||||
@ -427,7 +389,7 @@ const Businesses = () => {
|
|||||||
className={
|
className={
|
||||||
!(
|
!(
|
||||||
(currentPage + 1) * itemPerPage - itemPerPage >
|
(currentPage + 1) * itemPerPage - itemPerPage >
|
||||||
BusinessesData.length - 1
|
userAddress.length - 1
|
||||||
)
|
)
|
||||||
? "paginate_button page-item next"
|
? "paginate_button page-item next"
|
||||||
: "paginate_button page-item next disabled"
|
: "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
220
src/views/UserAddress/viewAddress.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user