steve
/
keepyourmouthshut
mirror of https://github.com/ninjas-code-official/food-delivery-singlevendor
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added customer Web App in Progress

This commit is contained in:
sharan 2023-09-11 13:54:44 +05:00
parent 49c7b36a7b
commit f5110f2aef
124 changed files with 34187 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

23
CustomerWebApp/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

70
CustomerWebApp/README.md Normal file
View File

@ -0,0 +1,70 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `yarn test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `yarn build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

15645
CustomerWebApp/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

52
CustomerWebApp/package.json Normal file
View File

@ -0,0 +1,52 @@
{
"name": "food-delivery-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/client": "^3.3.21",
"@material-ui/core": "^4.12.1",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@react-google-maps/api": "^2.2.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"clsx": "^1.1.1",
"graphql": "^15.5.1",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-facebook-login": "^4.1.1",
"react-geocode": "^0.2.3",
"react-google-login": "^5.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"subscriptions-transport-ws": "^0.9.19",
"use-position": "^0.0.8",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
CustomerWebApp/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

41
CustomerWebApp/public/index.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
CustomerWebApp/public/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
CustomerWebApp/public/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

25
CustomerWebApp/public/manifest.json Normal file
View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
CustomerWebApp/public/robots.txt Normal file
View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

38
CustomerWebApp/src/App.css Normal file
View File

@ -0,0 +1,38 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

56
CustomerWebApp/src/App.js Normal file
View File

@ -0,0 +1,56 @@
import { Box, CircularProgress } from "@material-ui/core";
import { useContext } from "react";
import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom";
import { UserContext } from "./context/User";
import { ROUTES } from "./utils/constant";
function App() {
const { isLoggedIn, loadingProfile } = useContext(UserContext);
const ProtectedRoute = ({ component: Comp, loggedIn, accessRequired, path, ...rest }) => {
return (
<Route
path={path}
{...rest}
render={(props) => {
if (loggedIn && accessRequired) {
return <Redirect to="/Home" />;
}
return <Comp {...props} />;
}}
/>
);
};
if (isLoggedIn === undefined || loadingProfile) {
return (
<Box component="div" display="flex" alignItems="center" justifyContent="center" height="100vh" width="100vw">
<CircularProgress color="primary" />
</Box>
);
}
return (
<Router>
<Switch>
{ROUTES.map((prop, key) => {
if (!prop.authRequired || (prop.authRequired && isLoggedIn)) {
return (
<ProtectedRoute
loggedIn={isLoggedIn}
accessRequired={prop.accessRequired}
path={prop.path}
component={prop.component}
key={key}
/>
);
} else {
return <Redirect key={key} from={prop.path} to={`/Login?redirect=${prop.path}`} />;
}
})}
<Redirect exact from="/" to="Home" />
</Switch>
</Router>
);
}
export default App;

8
CustomerWebApp/src/App.test.js Normal file
View File

@ -0,0 +1,8 @@
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

11
CustomerWebApp/src/apollo/ApolloSetup.js Normal file
View File

@ -0,0 +1,11 @@
import { ApolloProvider } from "@apollo/client";
import React from "react";
import setupApollo from "./setup";
function ApolloSetup({ children }) {
const client = setupApollo();
return <ApolloProvider client={client}>{children}</ApolloProvider>;
}
export default React.memo(ApolloSetup);

305
CustomerWebApp/src/apollo/graphQL.js Normal file
View File

@ -0,0 +1,305 @@
export const login = `
mutation Login($facebookId:String,$email:String,$password:String,$type:String!,$appleId:String,$name:String,$notificationToken:String){
login(facebookId:$facebookId,email:$email,password:$password,type:$type,appleId:$appleId,name:$name,notificationToken:$notificationToken){
userId
token
tokenExpiration
name
email
phone
}
}
`;
export const createUser = `
mutation CreateUser($facebookId:String,$phone:String,$email:String,$password:String,$name:String,$notificationToken:String,$appleId:String){
createUser(userInput:{
facebookId:$facebookId,
phone:$phone,
email:$email,
password:$password,
name:$name,
notificationToken:$notificationToken,
appleId:$appleId
}){
userId
token
tokenExpiration
name
email
phone
}
}`;
export const getConfiguration = `query Configuration{
configuration{
_id
currency
currency_symbol
delivery_charges
}
}`
export const foods = `
query FoodByCategory($category:String!,$onSale:Boolean,$inStock:Boolean,$min:Float,$max:Float,$search:String){
foodByCategory(category:$category,onSale:$onSale,inStock:$inStock,min:$min,max:$max,search:$search){
_id
title
description
variations{
_id
title
price
discounted
addons{
_id
title
description
quantity_minimum
quantity_maximum
options{
_id
title
description
price
}
}
}
category{_id}
img_url
stock
}
}`
export const updateUser = `
mutation UpdateUser($name:String!,$phone:String!){
updateUser(updateUserInput:{name:$name,phone:$phone}){
_id
name
phone
}
}`
export const profile = `
query{
profile{
_id
name
phone
email
notificationToken
is_order_notification
is_offer_notification
addresses{
_id
label
delivery_address
details
longitude
latitude
selected
}
}
}`;
export const deleteAddress = `mutation DeleteAddress($id:ID!){
deleteAddress(id:$id){
_id
addresses{
_id
label
delivery_address
details
longitude
latitude
selected
}
}
}`
export const createAddress = `mutation CreateAddress($addressInput:AddressInput!){
createAddress(addressInput:$addressInput){
_id
addresses{
_id
label
delivery_address
details
longitude
latitude
selected
}
}
}`
export const editAddress = `mutation EditAddress($addressInput:AddressInput!){
editAddress(addressInput:$addressInput){
_id
label
delivery_address
details
longitude
latitude
}
}`
export const categories = `
{
categories{
_id
title
description
img_menu
}
}`;
export const myOrders = `query Orders($offset:Int){
orders(offset:$offset){
_id
delivery_address{
latitude
longitude
delivery_address
details
label
}
delivery_charges
order_id
user{
_id
phone
}
items{
_id
food{
_id
title
category{
_id
}
description
img_url
}
variation{
_id
title
price
}
addons{
_id
title
description
quantity_minimum
quantity_maximum
options{
_id
title
description
price
}
}
quantity
}
payment_status
payment_method
order_amount
paid_amount
order_status
status_queue{
pending
preparing
picked
delivered
cancelled
}
createdAt
review{
_id
rating
description
}
rider{
_id
}
}
}
`
export const orderStatusChanged = `subscription OrderStatusChanged($userId:String!){
orderStatusChanged(userId:$userId)
{
userId
origin
order{
_id
delivery_address{
latitude
longitude
delivery_address
details
label
}
delivery_charges
order_id
user{
_id
phone
}
items{
_id
food{
_id
title
category{
_id
}
description
img_url
}
variation{
_id
title
price
}
addons{
_id
title
description
quantity_minimum
quantity_maximum
options{
_id
title
description
price
}
}
quantity
}
payment_status
payment_method
order_amount
paid_amount
order_status
status_queue{
pending
preparing
picked
delivered
cancelled
}
createdAt
review{
_id
rating
description
}
rider{
_id
}
}
}
}
`

36
CustomerWebApp/src/apollo/setup.js Normal file
View File

@ -0,0 +1,36 @@
import { ApolloClient, ApolloLink, from, HttpLink, InMemoryCache } from "@apollo/client";
import { SERVER_URL } from "../configuration/configurataion";
const httpLink = new HttpLink({ uri: `${SERVER_URL}graphql` });
const request = async (operation) => {
const data = localStorage.getItem("token");
let token = null;
if (data) {
token = data;
}
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : "",
},
});
};
const requestLink = new ApolloLink(async (operation, forward) => {
// add the authorization to the headers
await request(operation);
return forward(operation);
});
const setupApollo = () => {
const client = new ApolloClient({
link: from([requestLink, httpLink]),
cache: new InMemoryCache(),
connectToDevTools: true,
});
return client;
};
export default setupApollo;

37
CustomerWebApp/src/assets/icons/AppleIcon.js Normal file
View File

@ -0,0 +1,37 @@
import { SvgIcon, useTheme } from "@material-ui/core";
import * as React from "react";
function AppleIcon(props) {
const theme = useTheme();
return (
<SvgIcon
xmlns="http://www.w3.org/2000/svg"
width="17.607"
height="20.613"
viewBox="0 0 17.607 20.613"
style={{ color: theme.palette.common.black }}
{...props}
>
<defs>
<style>
.cls-1{"#0b0b0b"}
</style>
</defs>
<g id="apple" transform="translate(-37.336)">
<g id="Group_223" transform="translate(45.798)">
<g id="Group_222" transform="translate(0)">
<path id="Path_27560" d="M251.727 0a4.837 4.837 0 0 0-3.127 1.7 4.2 4.2 0 0 0-1.03 3.26 4.082 4.082 0 0 0 3.16-1.614A4.535 4.535 0 0 0 251.727 0z" class="cls-1" transform="translate(-247.522)"/>
</g>
</g>
<g id="Group_225" transform="translate(37.336 4.825)">
<g id="Group_224" transform="translate(0)">
<path id="Path_27561" d="M54.346 121.931a5.218 5.218 0 0 0-3.938-2.091c-1.849 0-2.631.885-3.915.885-1.324 0-2.331-.882-3.929-.882a5.347 5.347 0 0 0-4.3 2.6c-1.491 2.311-1.235 6.657 1.18 10.358.864 1.324 2.019 2.814 3.529 2.827 1.344.013 1.722-.862 3.543-.871s2.166.883 3.507.868c1.511-.012 2.729-1.662 3.593-2.986a14.853 14.853 0 0 0 1.331-2.5 4.544 4.544 0 0 1-.601-8.208z" class="cls-1" transform="translate(-37.336 -119.84)"/>
</g>
</g>
</g>
</SvgIcon>
);
}
export default AppleIcon;

21
CustomerWebApp/src/assets/icons/EnategaIcon.js Normal file
View File

@ -0,0 +1,21 @@
import { SvgIcon, useTheme } from "@material-ui/core";
import * as React from "react";
function EnategaIcon(props) {
const theme = useTheme();
return (
<SvgIcon
xmlns="http://www.w3.org/2000/svg"
width="18.012"
height="17.52"
viewBox="0 0 18.012 17.52"
style={{ color: theme.palette.common.white }}
{...props}
>
<path fill="#febb2c" d="M-1195.916 1122.209c-.312 0-.6-.012-.889-.027a8.764 8.764 0 0 1-8.408-8.224 9.024 9.024 0 0 1 2.037-6.147 8.913 8.913 0 0 1 5.676-3.072 7.156 7.156 0 0 1 .982-.048h8.157a1.145 1.145 0 0 1 .984.552 1.14 1.14 0 0 1 .04 1.124l-.479.926-.758 1.46c-.96 1.848-1.952 3.759-2.913 5.645a1.54 1.54 0 0 1-1.508.945h-.031c-1.235-.013-2.551-.019-4.266-.019h-3.771a6.693 6.693 0 0 0 .578 1.05 4.779 4.779 0 0 0 3.988 2.062c.368.008.757.011 1.226.011h.6a.682.682 0 0 1 .582.326.683.683 0 0 1 .025.668l-1.234 2.4a.681.681 0 0 1-.606.37zm-3.178-10.648c1.523 0 3.156 0 4.807-.02a.622.622 0 0 0 .067-.1c.436-.8.861-1.63 1.273-2.43l.288-.559h-.564c-.526 0-1.044-.006-1.558-.006-.8 0-1.449.008-2.052.025a4.547 4.547 0 0 0-2.9 1.2 4.741 4.741 0 0 0-1.345 1.886z" transform="translate(1205.221 -1104.69)"/>
</SvgIcon>
);
}
export default EnategaIcon;

21
CustomerWebApp/src/assets/icons/FacebookIcon.js Normal file
View File

@ -0,0 +1,21 @@
import { SvgIcon, useTheme } from "@material-ui/core";
import * as React from "react";
function FacebookIcon(props) {
const theme = useTheme();
return (
<SvgIcon
xmlns="http://www.w3.org/2000/svg"
width="9.859"
height="19.716"
viewBox="0 0 9.859 19.716"
style={{ color: theme.palette.common.white }}
{...props}
>
<path fill="#1976d2" d="M14.246 3.274h1.8V.139A23.242 23.242 0 0 0 13.424 0c-2.6 0-4.373 1.632-4.373 4.632v2.761H6.187v3.5h2.864v8.818h3.511V10.9h2.748l.436-3.5h-3.185V4.98c0-1.013.274-1.706 1.685-1.706z" transform="translate(-6.187)"/>
</SvgIcon>
);
}
export default FacebookIcon;

23
CustomerWebApp/src/assets/icons/GoogleIcon.js Normal file
View File

@ -0,0 +1,23 @@
import { SvgIcon, useTheme } from "@material-ui/core";
import * as React from "react";
function GoogleIcon(props) {
const theme = useTheme();
return (
<SvgIcon
xmlns="http://www.w3.org/2000/svg"
width="17.606"
height="17.606"
viewBox="0 0 17.606 17.606"
style={{ color: theme.palette.common.white }}
{...props}
>
<path fill="#fbbb00" d="M3.9 144.153l-.613 2.288-2.24.047a8.819 8.819 0 0 1-.065-8.22l1.994.366.874 1.982a5.254 5.254 0 0 0 .049 3.537z" transform="translate(0 -133.513)"/>
<path fill="#518ef8" d="M270.084 208.176a8.8 8.8 0 0 1-3.138 8.51l-2.512-.128-.356-2.219a5.247 5.247 0 0 0 2.257-2.679h-4.707v-3.483h8.456z" transform="translate(-252.631 -201.017)"/>
<path fill="#28b446" d="M43.774 314.437a8.806 8.806 0 0 1-13.265-2.693l2.853-2.335a5.236 5.236 0 0 0 7.545 2.681z" transform="translate(-29.46 -298.769)"/>
<path fill="#f14336" d="M42.062 2.027L39.21 4.361A5.235 5.235 0 0 0 31.492 7.1l-2.868-2.345a8.805 8.805 0 0 1 13.438-2.728z" transform="translate(-27.64)"/>
</SvgIcon>
);
}
export default GoogleIcon;

14
CustomerWebApp/src/assets/icons/LogoAlphabet.js Normal file
View File

@ -0,0 +1,14 @@
import * as React from "react";
function LogoAlphabet(props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={18.012} height={17.52} viewBox="0 0 18.012 17.52" {...props}>
<path
fill="#febb2c"
d="M9.305 17.519c-.312 0-.6-.012-.889-.027A8.764 8.764 0 01.008 9.268a9.024 9.024 0 012.037-6.147A8.913 8.913 0 017.721.049a7.156 7.156 0 01.982-.048h8.157a1.145 1.145 0 01.984.552 1.14 1.14 0 01.04 1.124l-.479.926-.758 1.46a813.34 813.34 0 00-2.913 5.645 1.54 1.54 0 01-1.508.945h-.031a397.896 397.896 0 00-4.266-.019H4.158a6.693 6.693 0 00.578 1.05 4.779 4.779 0 003.988 2.062c.368.008.757.011 1.226.011h.6a.682.682 0 01.582.326.683.683 0 01.025.668l-1.234 2.4a.681.681 0 01-.606.37zM6.127 6.871c1.523 0 3.156 0 4.807-.02a.622.622 0 00.067-.1c.436-.8.861-1.63 1.273-2.43l.288-.559h-.564c-.526 0-1.044-.006-1.558-.006-.8 0-1.449.008-2.052.025a4.547 4.547 0 00-2.9 1.2 4.741 4.741 0 00-1.345 1.886z"
/>
</svg>
);
}
export default React.memo(LogoAlphabet);

19
CustomerWebApp/src/assets/icons/LogoHorizontal.js Normal file
View File

@ -0,0 +1,19 @@
import * as React from "react";
function LogoHorizontal(props) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 175.496 41.29" {...props}>
<path
fill={props.color || "#febb2c"}
d="M21.928 41.291a49.48 49.48 0 01-2.1-.063C9.102 40.694.396 32.181.011 21.847a21.267 21.267 0 014.8-14.488A21 21 0 0118.188.119a16.847 16.847 0 012.315-.114h.141q4.89-.005 9.78 0h9.3a2.7 2.7 0 012.319 1.3 2.689 2.689 0 01.1 2.649l-1.129 2.183-1.786 3.441c-2.262 4.356-4.6 8.86-6.866 13.305a3.63 3.63 0 01-3.555 2.228h-.074c-2.91-.031-6.011-.046-10.054-.046q-2.649 0-5.3.005H9.791a15.76 15.76 0 001.361 2.475 11.264 11.264 0 009.4 4.859c.867.018 1.784.026 2.888.026h1.407a1.607 1.607 0 011.37.767 1.608 1.608 0 01.058 1.575l-2.909 5.647a1.607 1.607 0 01-1.428.871zm-7.491-25.1c3.589 0 7.438-.005 11.328-.047a1.444 1.444 0 00.156-.227c1.028-1.89 2.03-3.841 3-5.727l.678-1.318-1.329-.008c-1.24-.008-2.461-.015-3.671-.015-1.878 0-3.416.018-4.837.06a10.716 10.716 0 00-6.841 2.834 11.175 11.175 0 00-3.171 4.446z"
/>
<text fill="#0b0b0b" fontSize={32} fontStyle="italic" fontWeight={700} transform="translate(50.496 32)">
<tspan x={0} y={0}>
{"enatega"}
</tspan>
</text>
</svg>
);
}
export default React.memo(LogoHorizontal);

20
CustomerWebApp/src/assets/icons/Marker.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="44.617" height="52.267" viewBox="0 0 44.617 52.267">
<defs>
<filter id="eioansj5ua" width="44.617" height="52.267" x="0" y="0" filterUnits="userSpaceOnUse">
<feOffset dy="3"/>
<feGaussianBlur result="blur" stdDeviation="3"/>
<feFlood flood-opacity=".161"/>
<feComposite in2="blur" operator="in"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g>
<g>
<g filter="url(#eioansj5ua)" transform="translate(-153.383 -249.866) translate(105.232 255.866) translate(48.15 -6)">
<path fill="#ee3840" d="M83.768 13.308c0 10.657-12.03 20.526-12.03 20.526a2.1 2.1 0 0 1-2.556 0s-12.03-9.869-12.03-20.526a13.309 13.309 0 0 1 26.617 0z" transform="translate(-48.15 6)"/>
</g>
<path fill="#fff" d="M166.548 119.984a10.589 10.589 0 1 1 10.589-10.589 10.6 10.6 0 0 1-10.589 10.589z" transform="translate(-153.383 -249.866) translate(105.232 255.866) translate(-96.088 -96.087)"/>
</g>
<path fill="#febb2c" d="M-1198.079 1118.137c-.24 0-.463-.009-.683-.021a6.727 6.727 0 0 1-6.454-6.312 6.926 6.926 0 0 1 1.563-4.719 6.841 6.841 0 0 1 4.357-2.358 5.48 5.48 0 0 1 .754-.037h6.26a.879.879 0 0 1 .755.424.875.875 0 0 1 .031.863l-.368.711-.582 1.121c-.737 1.419-1.5 2.886-2.236 4.333a1.182 1.182 0 0 1-1.158.726h-.024c-.948-.01-1.958-.015-3.275-.015h-2.895a5.146 5.146 0 0 0 .443.806 3.669 3.669 0 0 0 3.061 1.583c.282.006.581.009.941.009h.459a.523.523 0 0 1 .447.25.524.524 0 0 1 .019.513l-.948 1.839a.523.523 0 0 1-.465.283zm-2.44-8.173c1.169 0 2.422 0 3.689-.015a.479.479 0 0 0 .051-.074c.335-.615.661-1.251.977-1.865l.221-.429h-1.633c-.612 0-1.113.006-1.575.02a3.49 3.49 0 0 0-2.228.923 3.64 3.64 0 0 0-1.033 1.448z" transform="translate(-153.383 -249.866) translate(1373.999 -841.732)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
CustomerWebApp/src/assets/images/Background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

141
CustomerWebApp/src/assets/images/Group 429 (1).svg Normal file
View File

@ -0,0 +1,141 @@
<svg xmlns="http://www.w3.org/2000/svg" width="566" height="608" viewBox="0 0 566 608">
<defs>
<filter id="Rectangle_2431" width="566" height="608" x="0" y="0" filterUnits="userSpaceOnUse">
<feOffset/>
<feGaussianBlur result="blur" stdDeviation="20"/>
<feFlood flood-opacity=".2"/>
<feComposite in2="blur" operator="in"/>
<feComposite in="SourceGraphic"/>
</filter>
<style>
.cls-8{fill:#fff}.cls-14,.cls-4{fill:none}.cls-4{stroke:#ccc;stroke-width:.5px}.cls-5{fill:#636363;font-size:16px;font-family:Poppins-Regular,Poppins}.cls-8{stroke:#a5a5a5}.cls-9{fill:#febb2c}.cls-13{stroke:none}
</style>
</defs>
<g id="Group_429" transform="translate(-4482 -12215)">
<g filter="url(#Rectangle_2431)" transform="matrix(1, 0, 0, 1, 4482, 12215)">
<rect id="Rectangle_2431-2" width="446" height="488" fill="#fff" rx="18" transform="translate(60 60)"/>
</g>
<path id="Rectangle_2432" fill="#f6f6f6" d="M18 0h410a18 18 0 0 1 18 18v99H0V18A18 18 0 0 1 18 0z" transform="translate(4542 12275)"/>
<text id="Change_Payment_Method" fill="#0b0b0b" font-family="Poppins-SemiBold, Poppins" font-size="21px" font-weight="600" transform="translate(4628 12342.5)">
<tspan x="0" y="0">Change Payment Method</tspan>
</text>
<path id="Line_110" d="M0 0L372 0" className="cls-4" transform="translate(4579 12482)"/>
<path id="Line_112" d="M0 0L372 0" className="cls-4" transform="translate(4579 12591)"/>
<path id="Line_111" d="M0 0L372 0" className="cls-4" transform="translate(4579 12537)"/>
<text id="COD_Cash_On_Delivery_" className="cls-5" transform="translate(4653 12459)">
<tspan x="0" y="0">COD (Cash On Delivery)</tspan>
</text>
<text id="Paypal" className="cls-5" transform="translate(4653 12568.5)">
<tspan x="0" y="0">Paypal</tspan>
</text>
<text id="Credit_Card_Debit_Card" fill="#0b0b0b" font-family="Poppins-Regular, Poppins" font-size="16px" transform="translate(4653 12514.5)">
<tspan x="0" y="0">Credit Card/Debit Card</tspan>
</text>
<g id="Ellipse_291" fill="#fff" stroke="#febb2c" stroke-width="4px" transform="translate(4907.326 12501.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="6" className="cls-14"/>
</g>
<g id="Ellipse_292" className="cls-8" transform="translate(4907.326 12446.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="7.5" className="cls-14"/>
</g>
<g id="Ellipse_293" className="cls-8" transform="translate(4907.326 12555.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="7.5" className="cls-14"/>
</g>
<g id="money-bag" transform="translate(4611 12444)">
<path id="Path_27609" d="M81.578 14.453l-3.6-7.134V4.764L79.365 0H75.49a2.746 2.746 0 0 0-2.06.929A2.746 2.746 0 0 0 71.371 0H67.5l1.388 4.764v2.555l-3.6 7.134a6.323 6.323 0 0 0 5.645 9.172h5.006a6.323 6.323 0 0 0 5.645-9.172zM71.371 1.384a1.369 1.369 0 0 1 1.368 1.368h1.384a1.369 1.369 0 0 1 1.367-1.368h2.03l-.754 2.588H70.1l-.754-2.588zm5.222 3.973v1.435h-6.325V5.357zm3.546 14.534a4.906 4.906 0 0 1-4.206 2.35h-5.005a4.939 4.939 0 0 1-4.409-7.164L70 8.176h6.857l3.483 6.9a4.906 4.906 0 0 1-.201 4.815z" className="cls-9" transform="translate(-64.599 0)"/>
<path id="Path_27610" d="M204.177 235.224h-1.485a.606.606 0 1 1 0-1.212h2.508v-1.384h-1.254v-.934h-1.384v.939a1.99 1.99 0 0 0 .132 3.976h1.485a.659.659 0 1 1 0 1.317h-3.2v1.384h1.583v.934h1.384v-.934h.232a2.043 2.043 0 0 0 0-4.086z" className="cls-9" transform="translate(-194.422 -221.002)"/>
</g>
<g id="visa" transform="translate(4602 12500)">
<g id="Group_336" transform="translate(6 7.499)">
<g id="Group_335" transform="translate(0 0)">
<path id="Path_27611" d="M93.862 192.044a.749.749 0 0 0-.975.417l-2.812 7.029h-.242v-6.75a.75.75 0 0 0-.75-.75h-3a.75.75 0 1 0 0 1.5h2.25v6.75a.75.75 0 0 0 .75.75h1.5a.75.75 0 0 0 .7-.471l3-7.5a.749.749 0 0 0-.421-.975z" className="cls-9" transform="translate(-85.333 -191.989)"/>
</g>
</g>
<g id="Group_338" transform="translate(14.999 7.5)">
<g id="Group_337">
<path id="Path_27612" d="M215.715 192.018a.758.758 0 0 0-.882.588l-1.5 7.5a.75.75 0 0 0 .59.882.716.716 0 0 0 .148.015.75.75 0 0 0 .734-.6l1.5-7.5a.75.75 0 0 0-.59-.885z" className="cls-9" transform="translate(-213.318 -192.004)"/>
</g>
</g>
<g id="Group_340" transform="translate(18 7.497)">
<g id="Group_339" transform="translate(0 0)">
<path id="Path_27613" d="M261.43 192.114c-.121-.033-3.007-.741-4.121 1.065a2.191 2.191 0 0 0-.324 1.714 3.8 3.8 0 0 0 1.919 2.067c.864.513 1.322 1.032 1.225 1.385a1.462 1.462 0 0 1-.712.894 3.169 3.169 0 0 1-2.432-.075.751.751 0 0 0-.483 1.422 6.171 6.171 0 0 0 1.971.364 3.439 3.439 0 0 0 1.65-.387 2.956 2.956 0 0 0 1.455-1.824c.206-.759.043-1.908-1.907-3.068-.332-.2-1.115-.665-1.228-1.134a.71.71 0 0 1 .144-.57c.441-.72 1.972-.525 2.475-.4a.75.75 0 0 0 .368-1.454z" className="cls-9" transform="translate(-255.993 -191.95)"/>
</g>
</g>
<g id="Group_342" transform="translate(24 7.5)">
<g id="Group_341">
<path id="Path_27614" d="M346.578 192h-1.5a.75.75 0 0 0-.7.471l-3 7.5a.749.749 0 0 0 .417.975.733.733 0 0 0 .279.054.75.75 0 0 0 .7-.471l2.813-7.029h.241v6.75a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75z" className="cls-9" transform="translate(-341.328 -192)"/>
</g>
</g>
<g id="Group_344" transform="translate(25.5 12)">
<g id="Group_343">
<path id="Path_27615" d="M366.416 256h-3a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5z" className="cls-9" transform="translate(-362.666 -256)"/>
</g>
</g>
<g id="Group_346">
<g id="Group_345">
<path id="Path_27616" d="M30.75 85.333H5.25A5.256 5.256 0 0 0 0 90.583v13.5a5.256 5.256 0 0 0 5.25 5.25h25.5a5.256 5.256 0 0 0 5.25-5.25v-13.5a5.256 5.256 0 0 0-5.25-5.25zm3.75 18.75a3.754 3.754 0 0 1-3.75 3.75H5.25a3.754 3.754 0 0 1-3.75-3.75v-13.5a3.754 3.754 0 0 1 3.75-3.75h25.5a3.754 3.754 0 0 1 3.75 3.75z" className="cls-9" transform="translate(0 -85.333)"/>
</g>
</g>
</g>
<g id="Group_363" transform="translate(4602 12554)">
<g id="Group_346-2">
<g id="Group_345-2">
<path id="Path_27616-2" d="M30.75 85.333H5.25A5.256 5.256 0 0 0 0 90.583v13.5a5.256 5.256 0 0 0 5.25 5.25h25.5a5.256 5.256 0 0 0 5.25-5.25v-13.5a5.256 5.256 0 0 0-5.25-5.25zm3.75 18.75a3.754 3.754 0 0 1-3.75 3.75H5.25a3.754 3.754 0 0 1-3.75-3.75v-13.5a3.754 3.754 0 0 1 3.75-3.75h25.5a3.754 3.754 0 0 1 3.75 3.75z" className="cls-9" transform="translate(0 -85.333)"/>
</g>
</g>
<g id="paypal-logo" transform="translate(6 8.4)">
<g id="Group_348" transform="translate(0 0.447)">
<g id="Group_347">
<path id="Path_27617" d="M4.767 19.954a1.078 1.078 0 0 0-.4-.427 1.854 1.854 0 0 0-.629-.231 5.145 5.145 0 0 0-.855-.068H1.374a.379.379 0 0 0-.348.276L.008 23.94a.214.214 0 0 0 .219.275h.724a.371.371 0 0 0 .349-.275l.249-1.076a.371.371 0 0 1 .347-.275H2.1a3.431 3.431 0 0 0 2.065-.545 1.7 1.7 0 0 0 .74-1.437 1.347 1.347 0 0 0-.138-.653zM3.2 21.4a1.523 1.523 0 0 1-.916.241h-.172a.216.216 0 0 1-.22-.276l.218-.941a.367.367 0 0 1 .345-.275h.237a1.159 1.159 0 0 1 .63.141.479.479 0 0 1 .209.432.784.784 0 0 1-.331.678z" className="cls-9" transform="translate(0 -19.229)"/>
</g>
</g>
<g id="Group_350" transform="translate(24.98 0)">
<g id="Group_349">
<path id="Path_27618" d="M47.783 19.176l-.045.014-.061.008-.074-.012-.038-.037-.017-.058v-.409h.242v-.1h-.242v-.2h-.12v.2h-.081v.1h.081v.375l.056.186.165.059.069-.006.073-.014v-.106z" className="cls-9" transform="translate(-47.345 -18.381)"/>
</g>
</g>
<g id="Group_352" transform="translate(25.567 0.181)">
<g id="Group_351">
<path id="Path_27619" d="M49.431 18.8l-.173-.071-.128.026-.13.088-.075-.084-.122-.029-.118.026-.111.072v-.078h-.118v.7h.117v-.526l.1-.061.1-.024.08.014.04.041.017.068.006.087v.4h.118v-.52l.1-.064.1-.025.078.014.042.041.015.068.008.086v.4h.118v-.457z" className="cls-9" transform="translate(-48.456 -18.724)"/>
</g>
</g>
<g id="Group_354" transform="translate(4.504 1.575)">
<g id="Group_353">
<path id="Path_27620" d="M12.293 21.6A2.749 2.749 0 0 0 11 21.367a5.722 5.722 0 0 0-.876.068c-.217.033-.238.04-.371.069a.425.425 0 0 0-.319.335l-.089.365c-.05.233.084.224.14.2a3.764 3.764 0 0 1 .433-.128 3.106 3.106 0 0 1 .679-.091 1.788 1.788 0 0 1 .659.093.333.333 0 0 1 .218.329l-.013.1-.1.064c-.411.026-.708.064-1.068.116a3.314 3.314 0 0 0-.919.253 1.428 1.428 0 0 0-.624.492 1.34 1.34 0 0 0-.207.758.9.9 0 0 0 .295.688 1.107 1.107 0 0 0 .763.261 2.083 2.083 0 0 0 .455-.042l.351-.121.3-.165.273-.18v.005l-.027.116a.215.215 0 0 0 .194.271h.682a.375.375 0 0 0 .312-.271l.528-2.286.027-.186.013-.175a.764.764 0 0 0-.416-.705zm-1.168 2.571l-.113.149-.285.147a1.015 1.015 0 0 1-.379.082.869.869 0 0 1-.413-.079L9.8 24.2a.543.543 0 0 1 .106-.354l.307-.209a2.656 2.656 0 0 1 .478-.108c.166-.021.493-.058.536-.059l.05.088c-.015.047-.108.436-.152.611z" className="cls-9" transform="translate(-8.537 -21.367)"/>
</g>
</g>
<g id="Group_356" transform="translate(17.662 1.578)">
<g id="Group_355">
<path id="Path_27621" d="M37.231 21.6a2.755 2.755 0 0 0-1.294-.232 5.516 5.516 0 0 0-.876.07c-.217.032-.239.039-.373.067a.424.424 0 0 0-.318.336l-.089.364c-.05.233.081.222.142.2a4.291 4.291 0 0 1 .429-.128 3.24 3.24 0 0 1 .68-.091 1.779 1.779 0 0 1 .657.093.332.332 0 0 1 .218.329l-.011.1-.1.066c-.415.025-.713.063-1.07.115a3.315 3.315 0 0 0-.919.253 1.427 1.427 0 0 0-.624.493 1.324 1.324 0 0 0-.208.755.885.885 0 0 0 .3.689 1.109 1.109 0 0 0 .762.262 2.018 2.018 0 0 0 .454-.043l.35-.119.3-.165.271-.183v.006l-.025.117a.212.212 0 0 0 .193.271h.683a.371.371 0 0 0 .308-.273l.53-2.283.028-.187.015-.175a.763.763 0 0 0-.413-.707zm-1.166 2.571l-.118.15-.282.146a1.026 1.026 0 0 1-.377.082.844.844 0 0 1-.412-.079l-.141-.271a.566.566 0 0 1 .1-.355.742.742 0 0 1 .31-.208 2.691 2.691 0 0 1 .477-.107c.165-.021.491-.059.533-.06l.051.088c-.006.054-.097.443-.14.617z" className="cls-9" transform="translate(-33.475 -21.372)"/>
</g>
</g>
<g id="Group_358" transform="translate(13.155 0.463)">
<g id="Group_357">
<path id="Path_27622" d="M29.7 19.985a1.121 1.121 0 0 0-.4-.428 1.778 1.778 0 0 0-.629-.231 4.98 4.98 0 0 0-.852-.066h-1.513a.376.376 0 0 0-.346.275l-1.019 4.435a.215.215 0 0 0 .218.275h.725a.376.376 0 0 0 .348-.274l.245-1.077a.376.376 0 0 1 .348-.275h.207a3.449 3.449 0 0 0 2.069-.544 1.715 1.715 0 0 0 .737-1.439 1.413 1.413 0 0 0-.138-.651zm-1.562 1.45a1.542 1.542 0 0 1-.914.237h-.18a.217.217 0 0 1-.222-.276l.219-.94a.368.368 0 0 1 .346-.275h.235a1.173 1.173 0 0 1 .63.14.483.483 0 0 1 .211.432.8.8 0 0 1-.324.682z" className="cls-9" transform="translate(-24.934 -19.259)"/>
</g>
</g>
<g id="Group_360" transform="translate(21.947 0.503)">
<g id="Group_359">
<path id="Path_27623" d="M43.783 19.606a.212.212 0 0 0-.217-.272h-.649a.368.368 0 0 0-.311.22l-.036.056-.033.144-.907 4.123-.03.123a.205.205 0 0 0 .182.257l.011.015h.674a.368.368 0 0 0 .312-.224l.037-.048.97-4.4z" className="cls-9" transform="translate(-41.595 -19.334)"/>
</g>
</g>
<g id="Group_362" transform="translate(8.913 1.631)">
<g id="Group_361">
<path id="Path_27624" d="M21.163 21.472h-.868a.628.628 0 0 0-.456.276s-1.039 1.781-1.139 1.96h-.12l-.323-1.945a.4.4 0 0 0-.395-.284h-.649a.214.214 0 0 0-.217.276s.493 2.8.591 3.464c.046.364-.006.429-.006.429l-.642 1.118c-.095.152-.044.276.112.276h.75a.606.606 0 0 0 .454-.275l2.886-4.882s.28-.419.022-.413z" className="cls-9" transform="translate(-16.893 -21.472)"/>
</g>
</g>
</g>
</g>
<g id="Group_364" transform="translate(4575 11557)">
<rect id="Rectangle_2320" width="300" height="50" fill="#00b9c6" rx="18" transform="translate(38 1086)"/>
<text id="Done" fill="#fff" font-family="Poppins-SemiBold, Poppins" font-size="14px" font-weight="600" transform="translate(188 1116)">
<tspan x="-18.431" y="0">Done</tspan>
</text>
</g>
<text id="Cancel" fill="#0b0b0b" font-family="Poppins-Medium, Poppins" font-size="14px" font-weight="500" transform="translate(4763 12724)">
<tspan x="-25.067" y="0">Cancel</tspan>
</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

141
CustomerWebApp/src/assets/images/Group 429 (2).svg Normal file
View File

@ -0,0 +1,141 @@
<svg xmlns="http://www.w3.org/2000/svg" width="566" height="608" viewBox="0 0 566 608">
<defs>
<filter id="Rectangle_2431" width="566" height="608" x="0" y="0" filterUnits="userSpaceOnUse">
<feOffset/>
<feGaussianBlur result="blur" stdDeviation="20"/>
<feFlood flood-opacity=".2"/>
<feComposite in2="blur" operator="in"/>
<feComposite in="SourceGraphic"/>
</filter>
<style>
.cls-8{fill:#fff}.cls-14,.cls-4{fill:none}.cls-4{stroke:#ccc;stroke-width:.5px}.cls-5{fill:#636363;font-size:16px;font-family:Poppins-Regular,Poppins}.cls-8{stroke:#a5a5a5}.cls-9{fill:#febb2c}.cls-13{stroke:none}
</style>
</defs>
<g id="Group_429" transform="translate(-4482 -12215)">
<g filter="url(#Rectangle_2431)" transform="matrix(1, 0, 0, 1, 4482, 12215)">
<rect id="Rectangle_2431-2" width="446" height="488" fill="#fff" rx="18" transform="translate(60 60)"/>
</g>
<path id="Rectangle_2432" fill="#f6f6f6" d="M18 0h410a18 18 0 0 1 18 18v99H0V18A18 18 0 0 1 18 0z" transform="translate(4542 12275)"/>
<text id="Change_Payment_Method" fill="#0b0b0b" font-family="Poppins-SemiBold, Poppins" font-size="21px" font-weight="600" transform="translate(4628 12342.5)">
<tspan x="0" y="0">Change Payment Method</tspan>
</text>
<path id="Line_110" d="M0 0L372 0" className="cls-4" transform="translate(4579 12482)"/>
<path id="Line_112" d="M0 0L372 0" className="cls-4" transform="translate(4579 12591)"/>
<path id="Line_111" d="M0 0L372 0" className="cls-4" transform="translate(4579 12537)"/>
<text id="COD_Cash_On_Delivery_" className="cls-5" transform="translate(4653 12459)">
<tspan x="0" y="0">COD (Cash On Delivery)</tspan>
</text>
<text id="Paypal" className="cls-5" transform="translate(4653 12568.5)">
<tspan x="0" y="0">Paypal</tspan>
</text>
<text id="Credit_Card_Debit_Card" fill="#0b0b0b" font-family="Poppins-Regular, Poppins" font-size="16px" transform="translate(4653 12514.5)">
<tspan x="0" y="0">Credit Card/Debit Card</tspan>
</text>
<g id="Ellipse_291" fill="#fff" stroke="#febb2c" stroke-width="4px" transform="translate(4907.326 12501.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="6" className="cls-14"/>
</g>
<g id="Ellipse_292" className="cls-8" transform="translate(4907.326 12446.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="7.5" className="cls-14"/>
</g>
<g id="Ellipse_293" className="cls-8" transform="translate(4907.326 12555.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="7.5" className="cls-14"/>
</g>
<g id="money-bag" transform="translate(4611 12444)">
<path id="Path_27609" d="M81.578 14.453l-3.6-7.134V4.764L79.365 0H75.49a2.746 2.746 0 0 0-2.06.929A2.746 2.746 0 0 0 71.371 0H67.5l1.388 4.764v2.555l-3.6 7.134a6.323 6.323 0 0 0 5.645 9.172h5.006a6.323 6.323 0 0 0 5.645-9.172zM71.371 1.384a1.369 1.369 0 0 1 1.368 1.368h1.384a1.369 1.369 0 0 1 1.367-1.368h2.03l-.754 2.588H70.1l-.754-2.588zm5.222 3.973v1.435h-6.325V5.357zm3.546 14.534a4.906 4.906 0 0 1-4.206 2.35h-5.005a4.939 4.939 0 0 1-4.409-7.164L70 8.176h6.857l3.483 6.9a4.906 4.906 0 0 1-.201 4.815z" className="cls-9" transform="translate(-64.599 0)"/>
<path id="Path_27610" d="M204.177 235.224h-1.485a.606.606 0 1 1 0-1.212h2.508v-1.384h-1.254v-.934h-1.384v.939a1.99 1.99 0 0 0 .132 3.976h1.485a.659.659 0 1 1 0 1.317h-3.2v1.384h1.583v.934h1.384v-.934h.232a2.043 2.043 0 0 0 0-4.086z" className="cls-9" transform="translate(-194.422 -221.002)"/>
</g>
<g id="visa" transform="translate(4602 12500)">
<g id="Group_336" transform="translate(6 7.499)">
<g id="Group_335" transform="translate(0 0)">
<path id="Path_27611" d="M93.862 192.044a.749.749 0 0 0-.975.417l-2.812 7.029h-.242v-6.75a.75.75 0 0 0-.75-.75h-3a.75.75 0 1 0 0 1.5h2.25v6.75a.75.75 0 0 0 .75.75h1.5a.75.75 0 0 0 .7-.471l3-7.5a.749.749 0 0 0-.421-.975z" className="cls-9" transform="translate(-85.333 -191.989)"/>
</g>
</g>
<g id="Group_338" transform="translate(14.999 7.5)">
<g id="Group_337">
<path id="Path_27612" d="M215.715 192.018a.758.758 0 0 0-.882.588l-1.5 7.5a.75.75 0 0 0 .59.882.716.716 0 0 0 .148.015.75.75 0 0 0 .734-.6l1.5-7.5a.75.75 0 0 0-.59-.885z" className="cls-9" transform="translate(-213.318 -192.004)"/>
</g>
</g>
<g id="Group_340" transform="translate(18 7.497)">
<g id="Group_339" transform="translate(0 0)">
<path id="Path_27613" d="M261.43 192.114c-.121-.033-3.007-.741-4.121 1.065a2.191 2.191 0 0 0-.324 1.714 3.8 3.8 0 0 0 1.919 2.067c.864.513 1.322 1.032 1.225 1.385a1.462 1.462 0 0 1-.712.894 3.169 3.169 0 0 1-2.432-.075.751.751 0 0 0-.483 1.422 6.171 6.171 0 0 0 1.971.364 3.439 3.439 0 0 0 1.65-.387 2.956 2.956 0 0 0 1.455-1.824c.206-.759.043-1.908-1.907-3.068-.332-.2-1.115-.665-1.228-1.134a.71.71 0 0 1 .144-.57c.441-.72 1.972-.525 2.475-.4a.75.75 0 0 0 .368-1.454z" className="cls-9" transform="translate(-255.993 -191.95)"/>
</g>
</g>
<g id="Group_342" transform="translate(24 7.5)">
<g id="Group_341">
<path id="Path_27614" d="M346.578 192h-1.5a.75.75 0 0 0-.7.471l-3 7.5a.749.749 0 0 0 .417.975.733.733 0 0 0 .279.054.75.75 0 0 0 .7-.471l2.813-7.029h.241v6.75a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75z" className="cls-9" transform="translate(-341.328 -192)"/>
</g>
</g>
<g id="Group_344" transform="translate(25.5 12)">
<g id="Group_343">
<path id="Path_27615" d="M366.416 256h-3a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5z" className="cls-9" transform="translate(-362.666 -256)"/>
</g>
</g>
<g id="Group_346">
<g id="Group_345">
<path id="Path_27616" d="M30.75 85.333H5.25A5.256 5.256 0 0 0 0 90.583v13.5a5.256 5.256 0 0 0 5.25 5.25h25.5a5.256 5.256 0 0 0 5.25-5.25v-13.5a5.256 5.256 0 0 0-5.25-5.25zm3.75 18.75a3.754 3.754 0 0 1-3.75 3.75H5.25a3.754 3.754 0 0 1-3.75-3.75v-13.5a3.754 3.754 0 0 1 3.75-3.75h25.5a3.754 3.754 0 0 1 3.75 3.75z" className="cls-9" transform="translate(0 -85.333)"/>
</g>
</g>
</g>
<g id="Group_363" transform="translate(4602 12554)">
<g id="Group_346-2">
<g id="Group_345-2">
<path id="Path_27616-2" d="M30.75 85.333H5.25A5.256 5.256 0 0 0 0 90.583v13.5a5.256 5.256 0 0 0 5.25 5.25h25.5a5.256 5.256 0 0 0 5.25-5.25v-13.5a5.256 5.256 0 0 0-5.25-5.25zm3.75 18.75a3.754 3.754 0 0 1-3.75 3.75H5.25a3.754 3.754 0 0 1-3.75-3.75v-13.5a3.754 3.754 0 0 1 3.75-3.75h25.5a3.754 3.754 0 0 1 3.75 3.75z" className="cls-9" transform="translate(0 -85.333)"/>
</g>
</g>
<g id="paypal-logo" transform="translate(6 8.4)">
<g id="Group_348" transform="translate(0 0.447)">
<g id="Group_347">
<path id="Path_27617" d="M4.767 19.954a1.078 1.078 0 0 0-.4-.427 1.854 1.854 0 0 0-.629-.231 5.145 5.145 0 0 0-.855-.068H1.374a.379.379 0 0 0-.348.276L.008 23.94a.214.214 0 0 0 .219.275h.724a.371.371 0 0 0 .349-.275l.249-1.076a.371.371 0 0 1 .347-.275H2.1a3.431 3.431 0 0 0 2.065-.545 1.7 1.7 0 0 0 .74-1.437 1.347 1.347 0 0 0-.138-.653zM3.2 21.4a1.523 1.523 0 0 1-.916.241h-.172a.216.216 0 0 1-.22-.276l.218-.941a.367.367 0 0 1 .345-.275h.237a1.159 1.159 0 0 1 .63.141.479.479 0 0 1 .209.432.784.784 0 0 1-.331.678z" className="cls-9" transform="translate(0 -19.229)"/>
</g>
</g>
<g id="Group_350" transform="translate(24.98 0)">
<g id="Group_349">
<path id="Path_27618" d="M47.783 19.176l-.045.014-.061.008-.074-.012-.038-.037-.017-.058v-.409h.242v-.1h-.242v-.2h-.12v.2h-.081v.1h.081v.375l.056.186.165.059.069-.006.073-.014v-.106z" className="cls-9" transform="translate(-47.345 -18.381)"/>
</g>
</g>
<g id="Group_352" transform="translate(25.567 0.181)">
<g id="Group_351">
<path id="Path_27619" d="M49.431 18.8l-.173-.071-.128.026-.13.088-.075-.084-.122-.029-.118.026-.111.072v-.078h-.118v.7h.117v-.526l.1-.061.1-.024.08.014.04.041.017.068.006.087v.4h.118v-.52l.1-.064.1-.025.078.014.042.041.015.068.008.086v.4h.118v-.457z" className="cls-9" transform="translate(-48.456 -18.724)"/>
</g>
</g>
<g id="Group_354" transform="translate(4.504 1.575)">
<g id="Group_353">
<path id="Path_27620" d="M12.293 21.6A2.749 2.749 0 0 0 11 21.367a5.722 5.722 0 0 0-.876.068c-.217.033-.238.04-.371.069a.425.425 0 0 0-.319.335l-.089.365c-.05.233.084.224.14.2a3.764 3.764 0 0 1 .433-.128 3.106 3.106 0 0 1 .679-.091 1.788 1.788 0 0 1 .659.093.333.333 0 0 1 .218.329l-.013.1-.1.064c-.411.026-.708.064-1.068.116a3.314 3.314 0 0 0-.919.253 1.428 1.428 0 0 0-.624.492 1.34 1.34 0 0 0-.207.758.9.9 0 0 0 .295.688 1.107 1.107 0 0 0 .763.261 2.083 2.083 0 0 0 .455-.042l.351-.121.3-.165.273-.18v.005l-.027.116a.215.215 0 0 0 .194.271h.682a.375.375 0 0 0 .312-.271l.528-2.286.027-.186.013-.175a.764.764 0 0 0-.416-.705zm-1.168 2.571l-.113.149-.285.147a1.015 1.015 0 0 1-.379.082.869.869 0 0 1-.413-.079L9.8 24.2a.543.543 0 0 1 .106-.354l.307-.209a2.656 2.656 0 0 1 .478-.108c.166-.021.493-.058.536-.059l.05.088c-.015.047-.108.436-.152.611z" className="cls-9" transform="translate(-8.537 -21.367)"/>
</g>
</g>
<g id="Group_356" transform="translate(17.662 1.578)">
<g id="Group_355">
<path id="Path_27621" d="M37.231 21.6a2.755 2.755 0 0 0-1.294-.232 5.516 5.516 0 0 0-.876.07c-.217.032-.239.039-.373.067a.424.424 0 0 0-.318.336l-.089.364c-.05.233.081.222.142.2a4.291 4.291 0 0 1 .429-.128 3.24 3.24 0 0 1 .68-.091 1.779 1.779 0 0 1 .657.093.332.332 0 0 1 .218.329l-.011.1-.1.066c-.415.025-.713.063-1.07.115a3.315 3.315 0 0 0-.919.253 1.427 1.427 0 0 0-.624.493 1.324 1.324 0 0 0-.208.755.885.885 0 0 0 .3.689 1.109 1.109 0 0 0 .762.262 2.018 2.018 0 0 0 .454-.043l.35-.119.3-.165.271-.183v.006l-.025.117a.212.212 0 0 0 .193.271h.683a.371.371 0 0 0 .308-.273l.53-2.283.028-.187.015-.175a.763.763 0 0 0-.413-.707zm-1.166 2.571l-.118.15-.282.146a1.026 1.026 0 0 1-.377.082.844.844 0 0 1-.412-.079l-.141-.271a.566.566 0 0 1 .1-.355.742.742 0 0 1 .31-.208 2.691 2.691 0 0 1 .477-.107c.165-.021.491-.059.533-.06l.051.088c-.006.054-.097.443-.14.617z" className="cls-9" transform="translate(-33.475 -21.372)"/>
</g>
</g>
<g id="Group_358" transform="translate(13.155 0.463)">
<g id="Group_357">
<path id="Path_27622" d="M29.7 19.985a1.121 1.121 0 0 0-.4-.428 1.778 1.778 0 0 0-.629-.231 4.98 4.98 0 0 0-.852-.066h-1.513a.376.376 0 0 0-.346.275l-1.019 4.435a.215.215 0 0 0 .218.275h.725a.376.376 0 0 0 .348-.274l.245-1.077a.376.376 0 0 1 .348-.275h.207a3.449 3.449 0 0 0 2.069-.544 1.715 1.715 0 0 0 .737-1.439 1.413 1.413 0 0 0-.138-.651zm-1.562 1.45a1.542 1.542 0 0 1-.914.237h-.18a.217.217 0 0 1-.222-.276l.219-.94a.368.368 0 0 1 .346-.275h.235a1.173 1.173 0 0 1 .63.14.483.483 0 0 1 .211.432.8.8 0 0 1-.324.682z" className="cls-9" transform="translate(-24.934 -19.259)"/>
</g>
</g>
<g id="Group_360" transform="translate(21.947 0.503)">
<g id="Group_359">
<path id="Path_27623" d="M43.783 19.606a.212.212 0 0 0-.217-.272h-.649a.368.368 0 0 0-.311.22l-.036.056-.033.144-.907 4.123-.03.123a.205.205 0 0 0 .182.257l.011.015h.674a.368.368 0 0 0 .312-.224l.037-.048.97-4.4z" className="cls-9" transform="translate(-41.595 -19.334)"/>
</g>
</g>
<g id="Group_362" transform="translate(8.913 1.631)">
<g id="Group_361">
<path id="Path_27624" d="M21.163 21.472h-.868a.628.628 0 0 0-.456.276s-1.039 1.781-1.139 1.96h-.12l-.323-1.945a.4.4 0 0 0-.395-.284h-.649a.214.214 0 0 0-.217.276s.493 2.8.591 3.464c.046.364-.006.429-.006.429l-.642 1.118c-.095.152-.044.276.112.276h.75a.606.606 0 0 0 .454-.275l2.886-4.882s.28-.419.022-.413z" className="cls-9" transform="translate(-16.893 -21.472)"/>
</g>
</g>
</g>
</g>
<g id="Group_364" transform="translate(4575 11557)">
<rect id="Rectangle_2320" width="300" height="50" fill="#00b9c6" rx="18" transform="translate(38 1086)"/>
<text id="Done" fill="#fff" font-family="Poppins-SemiBold, Poppins" font-size="14px" font-weight="600" transform="translate(188 1116)">
<tspan x="-18.431" y="0">Done</tspan>
</text>
</g>
<text id="Cancel" fill="#0b0b0b" font-family="Poppins-Medium, Poppins" font-size="14px" font-weight="500" transform="translate(4763 12724)">
<tspan x="-25.067" y="0">Cancel</tspan>
</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

141
CustomerWebApp/src/assets/images/Group 429.svg Normal file
View File

@ -0,0 +1,141 @@
<svg xmlns="http://www.w3.org/2000/svg" width="566" height="608" viewBox="0 0 566 608">
<defs>
<filter id="Rectangle_2431" width="566" height="608" x="0" y="0" filterUnits="userSpaceOnUse">
<feOffset/>
<feGaussianBlur result="blur" stdDeviation="20"/>
<feFlood flood-opacity=".2"/>
<feComposite in2="blur" operator="in"/>
<feComposite in="SourceGraphic"/>
</filter>
<style>
.cls-8{fill:#fff}.cls-14,.cls-4{fill:none}.cls-4{stroke:#ccc;stroke-width:.5px}.cls-5{fill:#636363;font-size:16px;font-family:Poppins-Regular,Poppins}.cls-8{stroke:#a5a5a5}.cls-9{fill:#febb2c}.cls-13{stroke:none}
</style>
</defs>
<g id="Group_429" transform="translate(-4482 -12215)">
<g filter="url(#Rectangle_2431)" transform="matrix(1, 0, 0, 1, 4482, 12215)">
<rect id="Rectangle_2431-2" width="446" height="488" fill="#fff" rx="18" transform="translate(60 60)"/>
</g>
<path id="Rectangle_2432" fill="#f6f6f6" d="M18 0h410a18 18 0 0 1 18 18v99H0V18A18 18 0 0 1 18 0z" transform="translate(4542 12275)"/>
<text id="Change_Payment_Method" fill="#0b0b0b" font-family="Poppins-SemiBold, Poppins" font-size="21px" font-weight="600" transform="translate(4628 12342.5)">
<tspan x="0" y="0">Change Payment Method</tspan>
</text>
<path id="Line_110" d="M0 0L372 0" className="cls-4" transform="translate(4579 12482)"/>
<path id="Line_112" d="M0 0L372 0" className="cls-4" transform="translate(4579 12591)"/>
<path id="Line_111" d="M0 0L372 0" className="cls-4" transform="translate(4579 12537)"/>
<text id="COD_Cash_On_Delivery_" className="cls-5" transform="translate(4653 12459)">
<tspan x="0" y="0">COD (Cash On Delivery)</tspan>
</text>
<text id="Paypal" className="cls-5" transform="translate(4653 12568.5)">
<tspan x="0" y="0">Paypal</tspan>
</text>
<text id="Credit_Card_Debit_Card" fill="#0b0b0b" font-family="Poppins-Regular, Poppins" font-size="16px" transform="translate(4653 12514.5)">
<tspan x="0" y="0">Credit Card/Debit Card</tspan>
</text>
<g id="Ellipse_291" fill="#fff" stroke="#febb2c" stroke-width="4px" transform="translate(4907.326 12501.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="6" className="cls-14"/>
</g>
<g id="Ellipse_292" className="cls-8" transform="translate(4907.326 12446.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="7.5" className="cls-14"/>
</g>
<g id="Ellipse_293" className="cls-8" transform="translate(4907.326 12555.5)">
<circle cx="8" cy="8" r="8" className="cls-13"/>
<circle cx="8" cy="8" r="7.5" className="cls-14"/>
</g>
<g id="money-bag" transform="translate(4611 12444)">
<path id="Path_27609" d="M81.578 14.453l-3.6-7.134V4.764L79.365 0H75.49a2.746 2.746 0 0 0-2.06.929A2.746 2.746 0 0 0 71.371 0H67.5l1.388 4.764v2.555l-3.6 7.134a6.323 6.323 0 0 0 5.645 9.172h5.006a6.323 6.323 0 0 0 5.645-9.172zM71.371 1.384a1.369 1.369 0 0 1 1.368 1.368h1.384a1.369 1.369 0 0 1 1.367-1.368h2.03l-.754 2.588H70.1l-.754-2.588zm5.222 3.973v1.435h-6.325V5.357zm3.546 14.534a4.906 4.906 0 0 1-4.206 2.35h-5.005a4.939 4.939 0 0 1-4.409-7.164L70 8.176h6.857l3.483 6.9a4.906 4.906 0 0 1-.201 4.815z" className="cls-9" transform="translate(-64.599 0)"/>
<path id="Path_27610" d="M204.177 235.224h-1.485a.606.606 0 1 1 0-1.212h2.508v-1.384h-1.254v-.934h-1.384v.939a1.99 1.99 0 0 0 .132 3.976h1.485a.659.659 0 1 1 0 1.317h-3.2v1.384h1.583v.934h1.384v-.934h.232a2.043 2.043 0 0 0 0-4.086z" className="cls-9" transform="translate(-194.422 -221.002)"/>
</g>
<g id="visa" transform="translate(4602 12500)">
<g id="Group_336" transform="translate(6 7.499)">
<g id="Group_335" transform="translate(0 0)">
<path id="Path_27611" d="M93.862 192.044a.749.749 0 0 0-.975.417l-2.812 7.029h-.242v-6.75a.75.75 0 0 0-.75-.75h-3a.75.75 0 1 0 0 1.5h2.25v6.75a.75.75 0 0 0 .75.75h1.5a.75.75 0 0 0 .7-.471l3-7.5a.749.749 0 0 0-.421-.975z" className="cls-9" transform="translate(-85.333 -191.989)"/>
</g>
</g>
<g id="Group_338" transform="translate(14.999 7.5)">
<g id="Group_337">
<path id="Path_27612" d="M215.715 192.018a.758.758 0 0 0-.882.588l-1.5 7.5a.75.75 0 0 0 .59.882.716.716 0 0 0 .148.015.75.75 0 0 0 .734-.6l1.5-7.5a.75.75 0 0 0-.59-.885z" className="cls-9" transform="translate(-213.318 -192.004)"/>
</g>
</g>
<g id="Group_340" transform="translate(18 7.497)">
<g id="Group_339" transform="translate(0 0)">
<path id="Path_27613" d="M261.43 192.114c-.121-.033-3.007-.741-4.121 1.065a2.191 2.191 0 0 0-.324 1.714 3.8 3.8 0 0 0 1.919 2.067c.864.513 1.322 1.032 1.225 1.385a1.462 1.462 0 0 1-.712.894 3.169 3.169 0 0 1-2.432-.075.751.751 0 0 0-.483 1.422 6.171 6.171 0 0 0 1.971.364 3.439 3.439 0 0 0 1.65-.387 2.956 2.956 0 0 0 1.455-1.824c.206-.759.043-1.908-1.907-3.068-.332-.2-1.115-.665-1.228-1.134a.71.71 0 0 1 .144-.57c.441-.72 1.972-.525 2.475-.4a.75.75 0 0 0 .368-1.454z" className="cls-9" transform="translate(-255.993 -191.95)"/>
</g>
</g>
<g id="Group_342" transform="translate(24 7.5)">
<g id="Group_341">
<path id="Path_27614" d="M346.578 192h-1.5a.75.75 0 0 0-.7.471l-3 7.5a.749.749 0 0 0 .417.975.733.733 0 0 0 .279.054.75.75 0 0 0 .7-.471l2.813-7.029h.241v6.75a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75z" className="cls-9" transform="translate(-341.328 -192)"/>
</g>
</g>
<g id="Group_344" transform="translate(25.5 12)">
<g id="Group_343">
<path id="Path_27615" d="M366.416 256h-3a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5z" className="cls-9" transform="translate(-362.666 -256)"/>
</g>
</g>
<g id="Group_346">
<g id="Group_345">
<path id="Path_27616" d="M30.75 85.333H5.25A5.256 5.256 0 0 0 0 90.583v13.5a5.256 5.256 0 0 0 5.25 5.25h25.5a5.256 5.256 0 0 0 5.25-5.25v-13.5a5.256 5.256 0 0 0-5.25-5.25zm3.75 18.75a3.754 3.754 0 0 1-3.75 3.75H5.25a3.754 3.754 0 0 1-3.75-3.75v-13.5a3.754 3.754 0 0 1 3.75-3.75h25.5a3.754 3.754 0 0 1 3.75 3.75z" className="cls-9" transform="translate(0 -85.333)"/>
</g>
</g>
</g>
<g id="Group_363" transform="translate(4602 12554)">
<g id="Group_346-2">
<g id="Group_345-2">
<path id="Path_27616-2" d="M30.75 85.333H5.25A5.256 5.256 0 0 0 0 90.583v13.5a5.256 5.256 0 0 0 5.25 5.25h25.5a5.256 5.256 0 0 0 5.25-5.25v-13.5a5.256 5.256 0 0 0-5.25-5.25zm3.75 18.75a3.754 3.754 0 0 1-3.75 3.75H5.25a3.754 3.754 0 0 1-3.75-3.75v-13.5a3.754 3.754 0 0 1 3.75-3.75h25.5a3.754 3.754 0 0 1 3.75 3.75z" className="cls-9" transform="translate(0 -85.333)"/>
</g>
</g>
<g id="paypal-logo" transform="translate(6 8.4)">
<g id="Group_348" transform="translate(0 0.447)">
<g id="Group_347">
<path id="Path_27617" d="M4.767 19.954a1.078 1.078 0 0 0-.4-.427 1.854 1.854 0 0 0-.629-.231 5.145 5.145 0 0 0-.855-.068H1.374a.379.379 0 0 0-.348.276L.008 23.94a.214.214 0 0 0 .219.275h.724a.371.371 0 0 0 .349-.275l.249-1.076a.371.371 0 0 1 .347-.275H2.1a3.431 3.431 0 0 0 2.065-.545 1.7 1.7 0 0 0 .74-1.437 1.347 1.347 0 0 0-.138-.653zM3.2 21.4a1.523 1.523 0 0 1-.916.241h-.172a.216.216 0 0 1-.22-.276l.218-.941a.367.367 0 0 1 .345-.275h.237a1.159 1.159 0 0 1 .63.141.479.479 0 0 1 .209.432.784.784 0 0 1-.331.678z" className="cls-9" transform="translate(0 -19.229)"/>
</g>
</g>
<g id="Group_350" transform="translate(24.98 0)">
<g id="Group_349">
<path id="Path_27618" d="M47.783 19.176l-.045.014-.061.008-.074-.012-.038-.037-.017-.058v-.409h.242v-.1h-.242v-.2h-.12v.2h-.081v.1h.081v.375l.056.186.165.059.069-.006.073-.014v-.106z" className="cls-9" transform="translate(-47.345 -18.381)"/>
</g>
</g>
<g id="Group_352" transform="translate(25.567 0.181)">
<g id="Group_351">
<path id="Path_27619" d="M49.431 18.8l-.173-.071-.128.026-.13.088-.075-.084-.122-.029-.118.026-.111.072v-.078h-.118v.7h.117v-.526l.1-.061.1-.024.08.014.04.041.017.068.006.087v.4h.118v-.52l.1-.064.1-.025.078.014.042.041.015.068.008.086v.4h.118v-.457z" className="cls-9" transform="translate(-48.456 -18.724)"/>
</g>
</g>
<g id="Group_354" transform="translate(4.504 1.575)">
<g id="Group_353">
<path id="Path_27620" d="M12.293 21.6A2.749 2.749 0 0 0 11 21.367a5.722 5.722 0 0 0-.876.068c-.217.033-.238.04-.371.069a.425.425 0 0 0-.319.335l-.089.365c-.05.233.084.224.14.2a3.764 3.764 0 0 1 .433-.128 3.106 3.106 0 0 1 .679-.091 1.788 1.788 0 0 1 .659.093.333.333 0 0 1 .218.329l-.013.1-.1.064c-.411.026-.708.064-1.068.116a3.314 3.314 0 0 0-.919.253 1.428 1.428 0 0 0-.624.492 1.34 1.34 0 0 0-.207.758.9.9 0 0 0 .295.688 1.107 1.107 0 0 0 .763.261 2.083 2.083 0 0 0 .455-.042l.351-.121.3-.165.273-.18v.005l-.027.116a.215.215 0 0 0 .194.271h.682a.375.375 0 0 0 .312-.271l.528-2.286.027-.186.013-.175a.764.764 0 0 0-.416-.705zm-1.168 2.571l-.113.149-.285.147a1.015 1.015 0 0 1-.379.082.869.869 0 0 1-.413-.079L9.8 24.2a.543.543 0 0 1 .106-.354l.307-.209a2.656 2.656 0 0 1 .478-.108c.166-.021.493-.058.536-.059l.05.088c-.015.047-.108.436-.152.611z" className="cls-9" transform="translate(-8.537 -21.367)"/>
</g>
</g>
<g id="Group_356" transform="translate(17.662 1.578)">
<g id="Group_355">
<path id="Path_27621" d="M37.231 21.6a2.755 2.755 0 0 0-1.294-.232 5.516 5.516 0 0 0-.876.07c-.217.032-.239.039-.373.067a.424.424 0 0 0-.318.336l-.089.364c-.05.233.081.222.142.2a4.291 4.291 0 0 1 .429-.128 3.24 3.24 0 0 1 .68-.091 1.779 1.779 0 0 1 .657.093.332.332 0 0 1 .218.329l-.011.1-.1.066c-.415.025-.713.063-1.07.115a3.315 3.315 0 0 0-.919.253 1.427 1.427 0 0 0-.624.493 1.324 1.324 0 0 0-.208.755.885.885 0 0 0 .3.689 1.109 1.109 0 0 0 .762.262 2.018 2.018 0 0 0 .454-.043l.35-.119.3-.165.271-.183v.006l-.025.117a.212.212 0 0 0 .193.271h.683a.371.371 0 0 0 .308-.273l.53-2.283.028-.187.015-.175a.763.763 0 0 0-.413-.707zm-1.166 2.571l-.118.15-.282.146a1.026 1.026 0 0 1-.377.082.844.844 0 0 1-.412-.079l-.141-.271a.566.566 0 0 1 .1-.355.742.742 0 0 1 .31-.208 2.691 2.691 0 0 1 .477-.107c.165-.021.491-.059.533-.06l.051.088c-.006.054-.097.443-.14.617z" className="cls-9" transform="translate(-33.475 -21.372)"/>
</g>
</g>
<g id="Group_358" transform="translate(13.155 0.463)">
<g id="Group_357">
<path id="Path_27622" d="M29.7 19.985a1.121 1.121 0 0 0-.4-.428 1.778 1.778 0 0 0-.629-.231 4.98 4.98 0 0 0-.852-.066h-1.513a.376.376 0 0 0-.346.275l-1.019 4.435a.215.215 0 0 0 .218.275h.725a.376.376 0 0 0 .348-.274l.245-1.077a.376.376 0 0 1 .348-.275h.207a3.449 3.449 0 0 0 2.069-.544 1.715 1.715 0 0 0 .737-1.439 1.413 1.413 0 0 0-.138-.651zm-1.562 1.45a1.542 1.542 0 0 1-.914.237h-.18a.217.217 0 0 1-.222-.276l.219-.94a.368.368 0 0 1 .346-.275h.235a1.173 1.173 0 0 1 .63.14.483.483 0 0 1 .211.432.8.8 0 0 1-.324.682z" className="cls-9" transform="translate(-24.934 -19.259)"/>
</g>
</g>
<g id="Group_360" transform="translate(21.947 0.503)">
<g id="Group_359">
<path id="Path_27623" d="M43.783 19.606a.212.212 0 0 0-.217-.272h-.649a.368.368 0 0 0-.311.22l-.036.056-.033.144-.907 4.123-.03.123a.205.205 0 0 0 .182.257l.011.015h.674a.368.368 0 0 0 .312-.224l.037-.048.97-4.4z" className="cls-9" transform="translate(-41.595 -19.334)"/>
</g>
</g>
<g id="Group_362" transform="translate(8.913 1.631)">
<g id="Group_361">
<path id="Path_27624" d="M21.163 21.472h-.868a.628.628 0 0 0-.456.276s-1.039 1.781-1.139 1.96h-.12l-.323-1.945a.4.4 0 0 0-.395-.284h-.649a.214.214 0 0 0-.217.276s.493 2.8.591 3.464c.046.364-.006.429-.006.429l-.642 1.118c-.095.152-.044.276.112.276h.75a.606.606 0 0 0 .454-.275l2.886-4.882s.28-.419.022-.413z" className="cls-9" transform="translate(-16.893 -21.472)"/>
</g>
</g>
</g>
</g>
<g id="Group_364" transform="translate(4575 11557)">
<rect id="Rectangle_2320" width="300" height="50" fill="#00b9c6" rx="18" transform="translate(38 1086)"/>
<text id="Done" fill="#fff" font-family="Poppins-SemiBold, Poppins" font-size="14px" font-weight="600" transform="translate(188 1116)">
<tspan x="-18.431" y="0">Done</tspan>
</text>
</g>
<text id="Cancel" fill="#0b0b0b" font-family="Poppins-Medium, Poppins" font-size="14px" font-weight="500" transform="translate(4763 12724)">
<tspan x="-25.067" y="0">Cancel</tspan>
</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
CustomerWebApp/src/assets/images/HomeHeader.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 544 KiB

BIN
CustomerWebApp/src/assets/images/enategaFooter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
CustomerWebApp/src/assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
CustomerWebApp/src/assets/images/markerEnatega.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 696 B

BIN
CustomerWebApp/src/assets/images/placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
CustomerWebApp/src/assets/images/profilePlaceholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

34
CustomerWebApp/src/components/Alert/AlertSnack.js Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
import Snackbar from "@material-ui/core/Snackbar";
import MuiAlert from "@material-ui/lab/Alert";
import { IconButton } from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
function Alert(alertProps) {
return <MuiAlert elevation={6} variant="filled" {...alertProps} />;
}
function AlertSnack(props) {
return (
<Snackbar
anchorOrigin={{ vertical: "top", horizontal: "right" }}
open={props.alertVisible}
onClose={props.closeAlert}
message={props.alertMessage}
autoHideDuration={props.alive}
key={`${props.alertMessage} top`}
action={
<IconButton size="small" aria-label="close" color="inherit" onClick={props.closeAlert}>
<CloseIcon fontSize="small" />
</IconButton>
}
>
{props.alertSeverity && (
<Alert onClose={props.closeAlert} severity={props.alertSeverity}>
{props.alertMessage}
</Alert>
)}
</Snackbar>
);
}
export default React.memo(AlertSnack);

3
CustomerWebApp/src/components/Alert/index.js Normal file
View File

@ -0,0 +1,3 @@
import AlertSnack from "./AlertSnack";
export { AlertSnack };

94
CustomerWebApp/src/components/Card/Card.js Normal file
View File

@ -0,0 +1,94 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
Box,
Card as ICard,
Typography,
CardActionArea,
} from "@material-ui/core";
import React, { useCallback, useContext } from "react";
import useStyles from "./styles";
import PlaceHolder from "../../assets/images/placeholder.png";
import { useHistory } from "react-router-dom";
function Card(props) {
const history = useHistory()
const item = props.data ?? null;
const cardImageHeight = props.cardImageHeight ? props.cardImageHeight : "144px";
const classes = useStyles(props);
const navigate = useCallback(() => {
// if (props.checkCart(item._id) && !loading) {
history.push({
pathname: "/OrderDetail",
state:{...item},
});
// }
}, []);
return (
<ICard className={classes.card}>
<CardActionArea
onClick={(e) => {
e.preventDefault();
navigate()
}}
>
<Box style={{ minWidth: "300px" }}>
<Box
style={{
height: cardImageHeight,
}}
className={classes.imageContainer}
>
<Box
style={{
height: cardImageHeight,
backgroundImage: `url("${item.img_menu ? item.img_menu : PlaceHolder }")`,
}}
className={classes.imgContainer}
/>
{/* <Box className={classes.offContainer}>
<Typography className={classes.offText}>Flat 50% OFF</Typography>
</Box> */}
<Box className={classes.cardBottomHeader} color="info.main">
<Typography variant="subtitle1" className={classes.textBold}>
{item.title}
</Typography>
<Typography noWrap variant="subtitle2" className={classes.subDescription}>
{item.description}
</Typography>
</Box>
{/* <IconButton
// onMouseDown={(e) => e.stopPropagation()}
size="small"
className={classes.heartBtn}
>
<FavoriteBorderIcon fontSize="small" color="primary" />
</IconButton> */}
</Box>
{/* <Box display="flex" justifyContent="space-between">
<Typography variant="subtitle1" color="textSecondary" className={classes.textBold}>
{item.name}
</Typography>
<Box style={{ display: "flex", alignItems: "center" }}>
<StarSharpIcon style={{ fontSize: "14px", color: "#276fa5" }} />
</Box>
</Box>
<Box>
<Typography variant="caption" className={classes.subDescription}>
category name
</Typography>
</Box> */}
</Box>
</CardActionArea>
</ICard>
);
}
export default React.memo(Card);

98
CustomerWebApp/src/components/Card/styles.js Normal file
View File

@ -0,0 +1,98 @@
import { makeStyles } from "@material-ui/core";
const useStyle = makeStyles((theme) => ({
imageContainer: {
width: "100%",
height: "144px",
position: "relative",
overflow: "hidden",
},
imgContainer: {
backgroundSize: "contain",
backgroundPositionX: "center",
backgroundPositionY: "center",
transition: "transform 0.2s",
"&:hover": {
transform: "scale(1.1)",
},
},
timeText: {
...theme.typography.caption,
fontSize: "0.5rem",
textAlign: "center",
lineHeight: "normal",
},
timeContainer: {
padding: "5px 10px",
backgroundColor: theme.palette.primary.light,
position: "absolute",
right: "0px",
top: "0px",
},
offText: {
textAlign: "center",
color: theme.palette.text.primary,
fontWeight: 700,
},
offContainer: {
padding: "5px 15px",
backgroundColor: theme.palette.primary.main,
position: "absolute",
top: "10px",
},
textBold: {
fontWeight: theme.typography.fontWeightBold,
},
totalRatingText: {
color: theme.palette.text.disabled,
},
subDescription: {
width: "65%",
},
priceText: {
fontWeight: 700,
fontSize: "0.875rem",
},
priceDescription: {
color: theme.palette.text.disabled,
fontSize: "0.875rem",
},
heartBtn: {
minWidth: "36px",
height: "36px",
borderRadius: "18px",
backgroundColor: theme.palette.common.white,
position: "absolute",
bottom: "5px",
right: "5px",
display: "flex",
justifyContent: "center",
alignItems: "center",
"&:hover": {
backgroundColor: theme.palette.common.white,
},
"&:disabled": {
backgroundColor: theme.palette.common.white,
},
},
cardBottomHeader: {
minWidth: "100%",
height: "35%",
// borderRadius: "18px",
background: "rgba(0, 0, 0, 0.7)",
position: "absolute",
bottom: "0px",
// display: "flex",
justifyContent: "flex-start",
alignItems: "center",
padding: "4%",
},
card: {
backgroundColor: "transparent",
boxShadow: theme.shadows[0],
borderRadius: 20,
// backgroundColor:'red'
},
}));
export default useStyle;

156
CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js Normal file
View File

@ -0,0 +1,156 @@
import { Box, Grid, Divider, Button, ButtonBase, Typography, useTheme, Radio, RadioGroup } from "@material-ui/core";
import React from "react";
import useStyles from "./styles";
const image = ['https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg']
function CustomizeCard(props) {
const theme = useTheme();
const classes = useStyles();
return (
<Grid container direction="row" className={classes.center}>
<Grid container item xs={10}>
<Box className={classes.mt3} />
<Typography color="textPrimary" variant="h6" className={classes.subText}>{'KFC Meal'}</Typography>
<Box display="block" className={classes.mt3} />
</Grid>
<Grid container item xs={8}>
<Box display="block" className={classes.mt3} />
<Box display="flex" style={{ width: '100%' }} alignItems="center" justifyContent="space-between">
<Typography color="textPrimary">{'KFC Meal(Midnight)'}</Typography>
<Typography color="primary" className={classes.subText}>{'$122.45'}</Typography>
</Box>
<Box className={classes.mv2} />
<Typography variant="subtitle2" color="textSecondary">{'Double Zinger Pattie Burger with regular drink'}</Typography>
<Box display="block" className={classes.mt3}>
<Typography color="textPrimary">{'Select Variation'}<Typography display="inline" color="textSecondary">(Optional)</Typography></Typography>
</Box>
<Grid item xs={12}>
<ButtonBase >
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Small Cheese
</Typography>
</Box>
</ButtonBase>
</Grid>
<Box className={classes.mv2} />
<Grid item xs={12}>
<ButtonBase >
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Medium Cheese
</Typography>
</Box>
</ButtonBase>
</Grid>
<Grid item xs={12}>
<ButtonBase >
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Large Cheese
</Typography>
</Box>
</ButtonBase>
</Grid>
<Divider style={{ width: '100%' }} className={classes.mt3} orientation="horizontal" />
<Box className={classes.mv2} />
<Grid item xs={12}>
<Box className={classes.mt3}>
<Typography color="textPrimary">{'Drinks'}</Typography>
</Box>
<Grid item xs={12}>
<ButtonBase >
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Pepsi
</Typography>
</Box>
</ButtonBase>
</Grid>
<Grid item xs={12}>
<ButtonBase >
<Box display="flex" alignItems="center">
<Radio color="primary" checked={true} />
<Typography variant="body1" color="textSecondary">
Coke
</Typography>
</Box>
</ButtonBase>
</Grid>
</Grid>
<Grid xs={12} alignItems="center" justify="space-between" container item>
<Grid container alignItems="center" justify="space-between" item xs={5} >
<Button
variant="contained"
disableElevation
size="small"
className={classes.subBtn}
onClick={(e) => {
e.preventDefault();
}}
>
<Typography
align="center"
color="textSecondary"
className={classes.pH}
>
-
</Typography>
</Button>
<Typography>
{2}
</Typography>
<Button
variant="contained"
disableElevation
size="small"
className={classes.subBtn}
onClick={(e) => {
e.preventDefault();
}}
>
<Typography
align="center"
color="textSecondary"
>
+
</Typography>
</Button>
</Grid>
<Grid container alignItems="center" justify="space-between" item xs={6}>
<Button
variant="contained"
color="secondary"
disableElevation
fullWidth
className={classes.chatBtn}
onClick={(e) => {
e.preventDefault();
}}
>
<Typography
align="center"
>
Add To Cart
</Typography>
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
);
}
export default CustomizeCard;

87
CustomerWebApp/src/components/CustomizeCard/styles.js Normal file
View File

@ -0,0 +1,87 @@
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
w70: {
width: "70%",
},
mv2: {
margin: theme.spacing(2, 0),
},
mt3: {
marginTop: theme.spacing(3),
},
ml: {
marginLeft: theme.spacing(3),
},
ph1: {
padding: theme.spacing(0, 1),
},
mv4:{
},
pH:{
marginLeft:theme.spacing(1),
paddingRight:theme.spacing(1)
},
center: {
// justifyContent: "center",
// padding: theme.spacing(2, 3),
},
cardContainer: {
background: theme.palette.common.white,
},
imageCard:{
width:180,
height:150,
},
dot: {
fontSize: 10,
margin: theme.spacing(2, 0),
marginRight: theme.spacing(0.5),
},
imgContainer: {
height:190,
width:'100%',
borderRadius:theme.spacing(3),
// height:'50%',
// height:'156px',
backgroundSize: "cover",
},
disabledText: {
color: theme.palette.text.disabled,
},
subText: {
fontWeight: 700,
},
lightText:{
fontWeight:theme.typography.fontWeightMedium
},
smallText: {
fontSize: "0.85rem",
fontWeight:'bold',
},
cardRow: {
display: "flex",
justifyContent: "space-between",
padding: theme.spacing(0.1, 0),
},
chatBtn: {
padding: theme.spacing(1.4),
borderRadius: 20,
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
subBtn: {
padding: theme.spacing(1,0),
minWidth:'40px',
borderRadius:'16px',
backgroundColor: theme.palette.grey[100],
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
}));
export default useStyles;

248
CustomerWebApp/src/components/Footer/Footer.js Normal file
View File

@ -0,0 +1,248 @@
import { Box, Container, Button, Divider, Link, Grid, makeStyles, Typography } from "@material-ui/core";
import React from "react";
import clsx from "clsx";
import FacebookIcon from "@material-ui/icons/Facebook";
import InstagramIcon from "@material-ui/icons/Instagram";
import ArrowRightIcon from "@material-ui/icons/ArrowRight";
import EnategaLogo from "../../assets/images/enategaFooter.png";
import AppleIcon from "../../assets/icons/AppleIcon";
import LogoHorizontal from "../../assets/icons/LogoHorizontal";
const useStyles = makeStyles((theme) => ({
titleStyle: {
...theme.typography.subtitle2,
color: theme.palette.text.disabled,
},
copyRightText: {
...theme.typography.subtitle2,
fontWeight: theme.typography.fontWeightRegular,
color: theme.palette.primary.light,
paddingRight: "1vw",
fontSize: "1vw",
},
footerText: {
...theme.typography.caption,
color: theme.palette.text.disabled,
margin: "0px 10px",
"&:hover": {
color: theme.palette.primary.main,
},
},
iconStyles: {
color: theme.palette.text.disabled,
"&:hover": {
color: theme.palette.primary.main,
},
},
font700: {
fontWeight: theme.typography.fontWeightMedium,
},
btnText: {
width: "inherit",
fontSize: "1vw",
textTransform: "inherit",
padding: theme.spacing(0, 1),
},
marginB: {
marginBottom: theme.spacing(2),
},
loginBtn: {
marginBottom: theme.spacing(2),
padding: theme.spacing(1, 1, 1, 2),
borderRadius: 20,
backgroundColor: theme.palette.grey[100],
"&:disabled": {
backgroundColor: theme.palette.grey[100],
},
"&:hover": {
opacity: 0.9,
backgroundColor: theme.palette.grey[50],
},
},
btmBtn: {
marginTop: theme.spacing(5),
padding: theme.spacing(1, 3, 1, 3),
borderRadius: "4vw",
borderStyle: "solid",
borderColor: theme.palette.text.primary,
borderWidth: 2,
"&:disabled": {
backgroundColor: theme.palette.grey[100],
},
"&:hover": {
opacity: 0.9,
backgroundColor: theme.palette.grey[50],
},
},
}));
function Footer() {
const classes = useStyles();
return (
<>
<Container
maxWidth="xl"
style={{
marginTop: "5vw",
}}
>
<Box
style={{
display: "flex",
justifyContent: "space-between",
margin: "20px 0px",
paddingLeft: "17vw",
paddingRight: "17vw",
}}
>
<Box>
<LogoHorizontal width={"10vw"} height={"3vw"} color={"#000"} />
{/* <img style={{ width: "10vw", height: "3vw" }} src={EnategaLogo} /> */}
<Box />
<Button
variant="outlined"
disableElevation
className={classes.btmBtn}
// style={{display:"inline-block"}}
endIcon={<ArrowRightIcon style={{ width: "3vw", height: "3vw" }} />}
>
<Typography
variant="h1"
color="textPrimary"
align="left"
className={clsx(classes.font700, classes.btnText)}
>
Start browsing
</Typography>
</Button>
</Box>
<Box style={{ display: "flex" }}>
<Box>
<Button
variant="contained"
disableElevation
className={classes.loginBtn}
// style={{display:"inline-block"}}
startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
>
<Typography
variant="button"
color="textSecondary"
align="left"
className={clsx(classes.font700, classes.btnText)}
>
Download for Apple ios
</Typography>
</Button>
<Box style={{ display: "block" }} />
<Button
variant="contained"
disableElevation
// style={{display:'block'}}
className={classes.loginBtn}
startIcon={<AppleIcon style={{ width: "1.5vw", height: "1.5vw" }} />}
>
<Typography
variant="button"
color="textSecondary"
align="left"
className={clsx(classes.font700, classes.btnText)}
>
Download for Android
</Typography>
</Button>
</Box>
<Box>
<Link href="https://www.facebook.com/enatega">
<Typography
variant="button"
color="textPrimary"
// align="left"
className={clsx(classes.font700, classes.btnText)}
>
Facebook
</Typography>
</Link>
<Box className={classes.marginB} />
<Link href="https://www.facebook.com/enatega">
<Typography
variant="button"
color="textPrimary"
// align="left"
className={clsx(classes.font700, classes.btnText)}
>
LinkedIn
</Typography>
</Link>
<Box className={classes.marginB} />
<Link href="https://www.facebook.com/enatega">
<Typography
variant="button"
color="textPrimary"
// align="left"
className={clsx(classes.font700, classes.btnText)}
>
Instagram
</Typography>
</Link>
<Box className={classes.marginB} />
<Link href="https://www.facebook.com/enatega">
<Typography
variant="button"
color="textPrimary"
// align="left"
className={clsx(classes.font700, classes.btnText)}
>
Youtube
</Typography>
</Link>
</Box>
{/* <Link href="https://www.facebook.com/enatega">
<FacebookIcon className={classes.iconStyles} fontSize="large" />
</Link>
<Link href="https://www.instagram.com/enatega.nb/">
<InstagramIcon style={{ marginLeft: "20px" }} className={classes.iconStyles} fontSize="large" />
</Link> */}
</Box>
</Box>
{/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
{/* <Divider style={{ width: "100%" }} light orientation="horizontal" /> */}
</Container>
<Box
style={{
width: "100%",
height: "5vw",
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
backgroundColor: "black",
marginTop: "30px",
textAlign: "center",
}}
>
<Box
style={{
display: "flex",
textAlign: "center",
margin: "auto",
alignItems: "center",
height: "100%",
justifyContent: "space-between",
alignItems: "center",
width: "70%",
}}
>
<Typography className={classes.copyRightText}>
Enatega {" "}© {new Date().getFullYear()} All right reserved
</Typography>
<Box style={{ display: "flex" }}>
<Typography className={classes.copyRightText}>Privacy Policy</Typography>
<Typography className={classes.copyRightText}>Terms&Conditions</Typography>
</Box>
</Box>
</Box>
</>
);
}
export default Footer;

55
CustomerWebApp/src/components/Footer/styles.js Normal file
View File

@ -0,0 +1,55 @@
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
width100: {
maxWidth: "100%",
},
height100: {
height: "100%",
},
logoView: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
imgContainer: {
width: 85,
aspectRatio: 1,
},
bottomView: {
display: "flex",
justifyContent: "flex-end",
padding: theme.spacing(2, 0),
},
loginBtn: {
margin: theme.spacing(1, 0),
padding: theme.spacing(2, 2, 2, 3),
borderRadius: 20,
backgroundColor: theme.palette.grey[100],
"&:disabled": {
backgroundColor: theme.palette.grey[100],
},
"&:hover": {
opacity: 0.9,
backgroundColor: theme.palette.grey[50],
},
},
font700: {
fontWeight: theme.typography.fontWeightMedium,
},
emailBtn: {
margin: theme.spacing(4, 0, 0, 0),
padding: theme.spacing(2),
borderRadius: 20,
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
btnText: {
width: "inherit",
textTransform: "capitalize",
padding: theme.spacing(0, 2),
},
}));
export default useStyles;

109
CustomerWebApp/src/components/Headers/MainHeader/MainHeader.js Normal file
View File

@ -0,0 +1,109 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { AppBar, Box, Button, Divider, Grid, IconButton, Toolbar, Typography } from "@material-ui/core";
import ShoppingCartOutlinedIcon from "@material-ui/icons/ShoppingCartOutlined";
import clsx from "clsx";
import React, { useCallback, useContext } from "react";
import { Link as RouterLink, useHistory, useLocation } from "react-router-dom";
import LogoHorizontal from "../../../assets/icons/LogoHorizontal";
import { UserContext } from "../../../context/User";
import { HEADER_NAV } from "../../../utils/constant";
import useStyle from "./styles";
function MainHeader() {
const classes = useStyle();
const navigation = useHistory();
const location = useLocation();
const urlPath = location.pathname;
const { isLoggedIn, logout } = useContext(UserContext);
const authorization = useCallback(() => {
if (isLoggedIn) {
logout();
} else {
navigation.push("/Login");
}
}, [isLoggedIn]);
return (
<Grid container item xs={12}>
<Grid item xs={1} md={1} />
<Grid container item xs={9}>
<AppBar position="static" color="transparent" elevation={0}>
<Toolbar disableGutters>
<Box display="flex" alignItems="center" flexGrow={1}>
<IconButton disableRipple edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
<LogoHorizontal width="100px" />
</IconButton>
{HEADER_NAV.map((element) => {
const isSelected = urlPath === element.navigate;
return (
<Button
component={RouterLink}
to={element.navigate}
variant="text"
key={element.id}
color="inherit"
classes={{
text: classes.MR2,
}}
>
<Typography
variant="subtitle2"
color={"textPrimary"}
className={clsx({ [classes.unSelectedMenu]: !isSelected, [classes.selectedMenu]: isSelected })}
>
{element.name}
</Typography>
</Button>
);
})}
</Box>
<Box display="flex" flexDirection="row" className={classes.loginView} mr={3}>
<Button color="inherit">
<Typography variant="body2" color={"textPrimary"} className={classes.upperCase}>
EN
</Typography>
</Button>
<Divider orientation="vertical" flexItem />
<Button
color="inherit"
onClick={(e) => {
e.preventDefault();
authorization();
}}
>
<Typography variant="body2" color={"textPrimary"} className={classes.upperCase}>
{isLoggedIn ? "Logout" : "Login"}
</Typography>
</Button>
</Box>
<Button
variant="contained"
color="primary"
size="medium"
classes={{
containedPrimary: classes.cartBtn,
}}
>
<ShoppingCartOutlinedIcon />
<Box bgcolor="info.main" borderRadius={20} className={classes.tagView}>
<Typography
component="p"
color="textPrimary"
variant="subtitle2"
classes={{
subtitle2: classes.tagIcon,
}}
>
2
</Typography>
</Box>
</Button>
</Toolbar>
</AppBar>
</Grid>
</Grid>
);
}
export default React.memo(MainHeader);

54
CustomerWebApp/src/components/Headers/MainHeader/styles.js Normal file
View File

@ -0,0 +1,54 @@
import { makeStyles } from "@material-ui/core";
const useStyle = makeStyles((theme) => ({
menuButton: {
marginRight: theme.spacing(8),
"&:hover": {
backgroundColor: "transparent",
},
},
MR2: {
marginRight: theme.spacing(2),
},
upperCase: {
textTransform: "uppercase",
padding: theme.spacing(0, 2),
},
loginView: {
backgroundColor: "rgba(255,255,255,0.8)",
borderRadius: 10,
boxShadow: theme.shadows[5],
height: "70%",
minWidth: 140,
overflow: "hidden",
},
selectedMenu: {
borderBottomWidth: 2,
borderBottomStyle: "solid",
borderBottomColor: theme.palette.primary.main,
},
unSelectedMenu: {
color: theme.palette.grey[400],
},
cartBtn: {
minWidth: "auto",
height: "70%",
aspectRatio: 1,
borderRadius: 10,
padding: theme.spacing(1.5),
},
tagView: {
position: "absolute",
right: -10,
top: -10,
alignSelf: "center",
justifyContent: "center",
alignItems: "center",
padding: theme.spacing(1.5, 1),
},
tagIcon: {
lineHeight: 0,
letterSpacing: 0,
},
}));
export default useStyle;

3
CustomerWebApp/src/components/Headers/index.js Normal file
View File

@ -0,0 +1,3 @@
import MainHeader from "./MainHeader/MainHeader";
export { MainHeader };

44
CustomerWebApp/src/components/HomeScreen/SearchContainer/SearchContainer.js Normal file
View File

@ -0,0 +1,44 @@
import { Button, Grid, InputBase, Paper, Typography } from "@material-ui/core";
import SearchIcon from "@material-ui/icons/Search";
import TuneIcon from "@material-ui/icons/Tune";
import clsx from "clsx";
import React from "react";
import { MainHeader } from "../../Headers";
import useStyle from "./styles";
function SearchContainer(props) {
const classes = useStyle();
return (
<Grid container className={classes.mainContainer}>
<Grid container item xs={12} className={classes.headingContainer}>
<MainHeader />
<Grid container item xs={12}>
<Grid item xs={1} md={1} />
<Grid container item xs={10} sm={10} md={9} lg={8}>
<Grid item xs={12} sm={9}>
{props.showSearch ? (
<Paper component="form" className={clsx(classes.searchContainer, classes.bottomHeight)}>
<SearchIcon color="action" />
<InputBase fullWidth color="primary" placeholder="Search" className={classes.input} />
<Button onClick={props.toggleModal} size="large" color="primary" className={classes.rightBtn}>
<TuneIcon color="primary" />
<Typography variant="body1" color="primary">
Filters
</Typography>
</Button>
</Paper>
) : (
<Typography variant="h3" color="textPrimary" className={classes.bottomHeight}>
{props.heading ?? ""}
</Typography>
)}
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
);
}
export default React.memo(SearchContainer);

44
CustomerWebApp/src/components/HomeScreen/SearchContainer/styles.js Normal file
View File

@ -0,0 +1,44 @@
import { makeStyles } from "@material-ui/core";
import Background from "../../../assets/images/HomeHeader.png";
const useStyle = makeStyles((theme) => ({
mainContainer: {
display: "flex",
minWidth: "100%",
backgroundColor: "transparent",
},
headingContainer: {
display: "flex",
alignItems: "center",
minHeight: "45vh",
backgroundColor: "transparent",
backgroundImage: `url(${Background})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "right top",
},
bottomHeight: {
height: 80,
},
searchContainer: {
display: "flex",
padding: theme.spacing(0, 0, 0, 3),
boxShadow: theme.shadows[5],
alignItems: "Center",
borderRadius: 10,
},
input: {
...theme.typography.body1,
margin: theme.spacing(0, 3),
color: theme.palette.text.primary,
},
rightBtn: {
width: "150px",
height: "100%",
borderRadius: 0,
justifyContent: "space-around",
borderLeft: "1px solid",
borderColor: theme.palette.grey[300],
},
}));
export default useStyle;

3
CustomerWebApp/src/components/HomeScreen/index.js Normal file
View File

@ -0,0 +1,3 @@
import SearchContainer from "./SearchContainer/SearchContainer";
export { SearchContainer };

296
CustomerWebApp/src/components/Modals/AddressDetailModal/AddressDetailModal.js Normal file
View File

@ -0,0 +1,296 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { gql, useMutation } from "@apollo/client";
import {
Box,
Button,
CircularProgress,
Dialog,
DialogContent,
DialogTitle,
Grid,
TextField,
Typography,
useTheme,
} from "@material-ui/core";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import { GoogleMap, Marker } from "@react-google-maps/api";
import clsx from "clsx";
import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
import { createAddress, editAddress } from "../../../apollo/graphQL";
import MarkerEnatega from "../../../assets/icons/Marker.svg";
import { AlertContext } from "../../../context/Alert";
import useLocation from "../../../hooks/Location";
import { ADDRESS_LABEL } from "../../../utils/constant";
import useStyle from "./styles";
const EDIT_ADDRESS = gql`
${editAddress}
`;
const CREATE_ADDRESS = gql`
${createAddress}
`;
function AddressDetailModal({ toggleModal, isVisible, regionDetail }) {
const classes = useStyle();
const theme = useTheme();
const formRef = useRef(null);
const isEdit = Boolean(regionDetail?.id);
const [region, setRegion] = useState(null);
const { showAlert } = useContext(AlertContext);
const [addressError, setAddressError] = useState("");
const [locationName, setLocationName] = useState("");
const [loadingLocation, setLoadingLocation] = useState(false);
const { loading, geoCodeCoordinates } = useLocation();
const [selectedLabel, setSelectedLabel] = useState(regionDetail?.label ?? ADDRESS_LABEL[0].value);
const [mutate, { loading: mutateLoading }] = useMutation(isEdit ? EDIT_ADDRESS : CREATE_ADDRESS, {
onCompleted,
onError,
});
useEffect(() => {
if (regionDetail) {
setRegion({
lat: regionDetail.lat,
lng: regionDetail.lng,
});
setLocationName(regionDetail.location);
}
}, [regionDetail]);
function onCompleted(data) {
if (isEdit) {
showAlert({
alertSeverity: "success",
alertMessage: "Address updated",
});
} else {
showAlert({
alertSeverity: "success",
alertMessage: "Address added",
});
}
toggleModal();
}
function onError(error) {
console.log(error);
showAlert({
alertSeverity: "error",
alertMessage: `An error occured. Please try again. ${error}`,
});
}
const changeCoordinates = async (coordinates, index) => {
setLoadingLocation(true);
const { latLng } = coordinates;
const regionChange = {
lat: latLng.lat(),
lng: latLng.lng(),
};
const geoCodeData = await geoCodeCoordinates(regionChange.lat, regionChange.lng);
setLocationName(geoCodeData);
setRegion(regionChange);
setLoadingLocation(false);
};
const clearErrors = useCallback(() => {
setAddressError("");
}, []);
const submitAddress = useCallback(() => {
clearErrors();
const detailValue = formRef.current["addressDetail"].value;
if (!detailValue) {
setAddressError("Delivery details is required");
return false;
}
if (region) {
mutate({
variables: {
addressInput: {
_id: isEdit ? regionDetail?.id : undefined,
latitude: `${region?.lat}`,
longitude: `${region?.lng}`,
delivery_address: locationName.trim(),
details: detailValue.trim(),
label: selectedLabel,
},
},
});
} else {
showAlert({
alertSeverity: "error",
alertMessage: "Cann't find location coordinates.",
});
}
}, [locationName, region]);
return (
<Dialog
open={isVisible}
onClose={toggleModal}
scroll="body"
fullWidth={true}
maxWidth="md"
className={classes.root}
>
<DialogTitle id="simple-dialog-title">
<Box component="div">
<Typography variant="h6" color="textPrimary" align="center" className={clsx(classes.boldText, classes.title)}>
Add Address
</Typography>
</Box>
</DialogTitle>
<DialogContent>
<Grid
container
classes={{
container: classes.mainView,
}}
>
<Grid item xs={6} className={classes.leftContainer}>
<GoogleMap
mapContainerStyle={{ height: "400px", width: "100%", borderRadius: 20 }}
zoom={16}
options={{
fullscreenControl: false,
streetViewControl: false,
MapTypeControlOptions: false,
mapTypeControl: false,
}}
center={region}
>
<Marker
icon={{
url: MarkerEnatega,
}}
position={region}
draggable={true}
onDragEnd={changeCoordinates}
/>
</GoogleMap>
</Grid>
<Grid container item xs={6} direction="row" justify="space-around">
<Grid item xs={12} className={classes.rightContainer}>
<Grid item xs={12}>
<Typography variant="button" className={classes.boldText}>
Label As
</Typography>
<Box display="flex" mt={`${theme.spacing(1)}px`} mb={`${theme.spacing(4)}px`}>
{ADDRESS_LABEL.map((label, index) => {
const isSelected = selectedLabel === label.value;
return (
<Button
variant={isSelected ? "contained" : "outlined"}
color={isSelected ? "primary" : "default"}
className={classes.btn}
classes={{
containedPrimary: classes.selectedBtn,
outlined: classes.unSelectedBtn,
}}
startIcon={isSelected && <CheckCircleIcon className={classes.whiteFont} />}
onClick={(e) => {
e.preventDefault();
setSelectedLabel(label.value);
}}
>
<Typography
variant="caption"
color="textSecondary"
className={clsx(classes.boldText, { [classes.whiteFont]: isSelected })}
>
{label.title}
</Typography>
</Button>
);
})}
</Box>
</Grid>
<Grid item xs={12} className={classes.m2}>
<TextField
name={"userAddress"}
value={locationName}
disabled
fullWidth
variant="filled"
label="Delivery Address"
placeholder="Your full delivery Address"
color="secondary"
InputProps={{
disableUnderline: true,
classes: {
input: classes.input,
},
}}
/>
</Grid>
<Grid item xs={12}>
<form ref={formRef}>
<TextField
name={"addressDetail"}
error={Boolean(addressError)}
helperText={addressError ? "Delivery details is required" : null}
defaultValue={regionDetail?.detail ?? null}
fullWidth
multiline
maxRows={4}
variant="filled"
label="Additional Info"
placeholder="Required Details e.f Floor/Building"
color="secondary"
InputProps={{
disableUnderline: true,
}}
/>
</form>
</Grid>
</Grid>
<Grid container className={classes.rightContainer} alignItems="flex-end">
<Grid item xs={7}>
<Button
color="secondary"
variant="contained"
disableElevation
fullWidth
className={classes.subBtn}
onClick={(e) => {
e.preventDefault();
if (!loading && !loadingLocation && !mutateLoading) {
submitAddress();
}
}}
>
{loading || loadingLocation || mutateLoading ? (
<CircularProgress color="inherit" size={24} thickness={5} />
) : (
<Typography align="center" className={classes.whiteFont}>
Save
</Typography>
)}
</Button>
</Grid>
<Grid item xs={5}>
<Button
variant="text"
disableElevation
fullWidth
className={clsx(classes.subBtn, classes.linkBtn)}
onClick={(e) => {
e.preventDefault();
clearErrors();
toggleModal();
}}
>
Cancel
</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</DialogContent>
</Dialog>
);
}
export default React.memo(AddressDetailModal);

67
CustomerWebApp/src/components/Modals/AddressDetailModal/styles.js Normal file
View File

@ -0,0 +1,67 @@
import { makeStyles } from "@material-ui/core";
const useStyle = makeStyles((theme) => ({
root: {
"& .MuiDialogTitle-root": {
backgroundColor: theme.palette.grey[100],
},
"& label": {
color: theme.palette.grey[600],
fontSize: "0.85rem",
},
"& .MuiFilledInput-root": {
backgroundColor: theme.palette.grey[100],
fontSize: 14,
borderRadius: 10,
"& .Mui-disabled": {
color: theme.palette.text.primary,
},
},
},
whiteFont: {
color: theme.palette.common.white,
},
m2: {
margin: theme.spacing(2, 0),
},
boldText: {
fontWeight: theme.typography.fontWeightMedium,
},
mainView: {
backgroundColor: theme.palette.common.white,
padding: theme.spacing(3, 2),
},
leftContainer: {},
rightContainer: {
paddingLeft: theme.spacing(2),
paddingTop: theme.spacing(1),
},
btn: {
marginRight: theme.spacing(1),
},
selectedBtn: {
borderRadius: 20,
},
unSelectedBtn: {
borderRadius: 20,
},
input: {
borderRadius: 10,
},
multiline: {
maxHeight: 100,
overflow: "scroll",
},
subBtn: {
margin: theme.spacing(2, 0, 0, 0),
padding: theme.spacing(1),
borderRadius: 20,
},
linkBtn: {
"&:hover": {
backgroundColor: "transparent",
},
},
}));
export default useStyle;

213
CustomerWebApp/src/components/Modals/FilterModal/FilterModal.js Normal file
View File

@ -0,0 +1,213 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
Switch,
FormControlLabel,
FormGroup,
IconButton,
Radio,
RadioGroup,
Typography,
useMediaQuery,
useTheme,
ButtonBase,
Slider
} from "@material-ui/core";
import CreditCardIcon from '@material-ui/icons/CreditCard';
import ReceiptIcon from '@material-ui/icons/Receipt';
import LocalAtmIcon from '@material-ui/icons/LocalAtm';
import React, { useCallback, useContext, useEffect, useState } from "react";
import useStyles from "./styles";
import RefreshIcon from '@material-ui/icons/Refresh';
function FilterModal(props) {
const theme = useTheme();
const classes = useStyles();
const extraSmall = useMediaQuery(theme.breakpoints.down("xs"));
const [value, setValue] = React.useState([20, 37]);
return (
<>
<Dialog
fullScreen={extraSmall}
onClose={props.toggleModal}
open={props.isOpen}
maxWidth="xs"
pt={`${theme.spacing(0.5)}px`}
>
<DialogTitle style={{ padding: 0 }}>
<Box display="flex" justifyContent="center" className={classes.header}>
<Typography variant="h5" className={classes.itemTitle}>{'Filters'}</Typography>
</Box>
</DialogTitle>
<DialogContent>
<Box display="flex" alignItems="center" justifyContent="space-between">
<Typography variant="body2" className={classes.modeText}>
Filter
</Typography>
<IconButton >
<Typography variant="body2" className={classes.modeText} color="secondary">
Reset
</Typography>
<RefreshIcon color="secondary" style={{ fontSize: '19px' }} />
</IconButton>
</Box>
<Divider light orientation="horizontal" />
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Show sales item only
</Typography>
</Box>
<Switch
checked={true}
// onChange={handleChange}
name="checkedA"
inputProps={{ 'aria-label': 'secondary checkbox' }}
color="primary"
/>
</ButtonBase>
<Divider light orientation="horizontal" />
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Show stock item only
</Typography>
</Box>
<Switch
checked={true}
// onChange={handleChange}
name="checkedA"
inputProps={{ 'aria-label': 'secondary checkbox' }}
color="primary"
/>
</ButtonBase>
<Divider light orientation="horizontal" />
<Box display="flex" alignItems="center" className={classes.mt3} justifyContent="space-between">
<Typography variant="body2" className={classes.modeText}>
Price Range
</Typography>
</Box>
<Box display="flex" className={classes.mt3}>
<Slider
value={value}
// onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
// getAriaValueText={valuetext}
/>
</Box>
<Box display="flex" alignItems="center" justifyContent="space-between">
<Typography variant="body2" color="textSecondary" className={classes.modeText}>
$0
</Typography>
<Typography variant="body2" className={classes.modeText} color="textSecondary">
$1000
</Typography>
</Box>
<Box display="flex" alignItems="center" className={classes.mt3} justifyContent="space-between">
<Typography variant="body2" className={classes.modeText}>
Sorting
</Typography>
</Box>
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Default
</Typography>
</Box>
<Radio color="primary" checked={true} />
</ButtonBase>
<Divider light orientation="horizontal" />
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Ascending(A-Z)
</Typography>
</Box>
<Radio color="primary" checked={true} />
</ButtonBase>
<Divider light orientation="horizontal" />
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Descending(Z-A)
</Typography>
</Box>
<Radio color="primary" checked={true} />
</ButtonBase>
<Divider light orientation="horizontal" />
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Price(Low - High)
</Typography>
</Box>
<Radio color="primary" checked={true} />
</ButtonBase>
<Divider light orientation="horizontal" />
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Price(High - Low)
</Typography>
</Box>
<Radio color="primary" checked={true} />
</ButtonBase>
<Divider light orientation="horizontal" />
</DialogContent>
<DialogActions>
<Box
style={{ background: "white", width: "100%" }}
// display="flex"
textAlign="center"
alignItems="center"
justifyContent="center"
>
<Button
variant="contained"
color="secondary"
disableElevation
className={classes.doneBtn}
onClick={(e) => {
e.preventDefault();
}}
>
<Typography
variant="button"
align="center"
>
Done
</Typography>
</Button>
<Box />
<Button
variant="text"
className={classes.doneBtn}
onClick={props.toggleModal}
>
<Typography
variant="button"
align="center"
color="textPrimary"
>
Cancel
</Typography>
</Button>
</Box>
</DialogActions>
</Dialog>
</>
);
}
export default React.memo(FilterModal);

91
CustomerWebApp/src/components/Modals/FilterModal/styles.js Normal file
View File

@ -0,0 +1,91 @@
import { makeStyles } from "@material-ui/core";
const useStyle = makeStyles((theme) => ({
itemTitle: {
...theme.typography.h6,
fontWeight: theme.typography.fontWeightMedium,
color: theme.palette.text.primary,
// fontSize:'1.1vw'
},
priceTitle: {
...theme.typography.subtitle2,
color: theme.palette.text.disabled,
},
dialog:{
borderRadius:theme.spacing(10)
},
header:{
backgroundColor:theme.palette.grey[100],padding:theme.spacing(3)
},
root: {
'&$paper': {
borderRadius:20,
},
},
mt3:{
marginTop:theme.spacing(2)
},
doneBtn: {
margin: theme.spacing(2, 0, 0, 0),
width:'70%',
padding: theme.spacing(1.5),
borderRadius: 20,
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
modeText:{
paddingRight:theme.spacing(0.5),
},
infoStyle: {
...theme.typography.caption,
textTransform: "uppercase",
background: "rgba(39,111,191,0.1)",
color: "#276FBF",
padding: "4px 6px",
fontWeight: 700,
},
checkoutContainer: {
borderRadius: 0,
width: "80%",
padding: "10px 0px",
"&:hover": {
background: theme.palette.primary.main,
},
},
checkoutText: {
...theme.typography.h6,
fontWeight: 600,
fontSize: "0.875rem",
},
closeContainer: {
background: theme.palette.grey[300],
minWidth: "auto",
marginRight: theme.spacing(1),
marginTop: theme.spacing(1),
borderRadius: "50%",
padding: theme.spacing(1),
},
itemError: {
color: theme.palette.common.white,
backgroundColor: theme.palette.warning.main,
},
disableBtn: {
background: theme.palette.grey[400],
"&:hover": {
background: theme.palette.grey[400],
},
},
btnBase: {
borderRadius: "0px",
height: "50px",
},
paymentInfoBtn: {
width: "100%",
justifyContent: "space-between",
padding: theme.spacing(1),
marginTop: theme.spacing(2),
},
}));
export default useStyle;

137
CustomerWebApp/src/components/Modals/PaymentModal/PaymentModal.js Normal file
View File

@ -0,0 +1,137 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
Box,
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
FormControl,
FormControlLabel,
FormGroup,
IconButton,
Radio,
RadioGroup,
Typography,
useMediaQuery,
useTheme,
ButtonBase,
} from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import CloseIcon from "@material-ui/icons/Close";
import RemoveIcon from "@material-ui/icons/Remove";
import CreditCardIcon from '@material-ui/icons/CreditCard';
import ReceiptIcon from '@material-ui/icons/Receipt';
import LocalAtmIcon from '@material-ui/icons/LocalAtm';
import clsx from "clsx";
import React, { useCallback, useContext, useEffect, useState } from "react";
import useStyles from "./styles";
function PaymentModal(props) {
const theme = useTheme();
const classes = useStyles();
const extraSmall = useMediaQuery(theme.breakpoints.down("xs"));
const [isVisible, setIsVisible] = useState(false)
const toggleModal = () => {
setIsVisible(!isVisible)
}
console.log('paymentmodal', props.isOpen)
return (
<>
<Dialog
fullScreen={extraSmall}
onClose={props.toggleModal}
open={props.isOpen}
maxWidth="xs"
pt={`${theme.spacing(0.5)}px`}
>
<DialogTitle style={{padding:0}}>
<Box display="flex" justifyContent="center" className={classes.header}>
<Typography className={classes.itemTitle}>{'Change Payment method'}</Typography>
</Box>
</DialogTitle>
<DialogContent>
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Box display="flex">
<LocalAtmIcon color="primary" />
</Box>
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Cash on Delivery (COD)
</Typography>
</Box>
<Radio color="primary" checked={true} />
</ButtonBase>
<Divider light orientation="horizontal" />
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Box display="flex">
<CreditCardIcon color="primary" />
</Box>
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Credit Card/Debit Card
</Typography>
</Box>
<Radio color="primary" checked={true} />
</ButtonBase>
<Divider light orientation="horizontal" />
<ButtonBase className={classes.paymentInfoBtn}>
<Box display="flex" alignItems="center">
<Box display="flex">
<ReceiptIcon color="primary" />
</Box>
<Typography variant="body1" className={classes.modeText} color="textSecondary">
Credit card
</Typography>
</Box>
<Radio color="primary" checked={true} />
</ButtonBase>
<Divider light orientation="horizontal" />
</DialogContent>
<DialogActions>
<Box
style={{ background: "white", width: "100%" }}
// display="flex"
textAlign="center"
alignItems="center"
justifyContent="center"
>
<Button
variant="contained"
color="secondary"
disableElevation
className={classes.doneBtn}
onClick={(e) => {
e.preventDefault();
}}
>
<Typography
variant="button"
align="center"
>
Done
</Typography>
</Button>
<Box />
<Button
variant="text"
className={classes.doneBtn}
onClick={props.toggleModal}
>
<Typography
variant="button"
align="center"
color="textPrimary"
>
Cancel
</Typography>
</Button>
</Box>
</DialogActions>
</Dialog>
</>
);
}
export default React.memo(PaymentModal);

88
CustomerWebApp/src/components/Modals/PaymentModal/styles.js Normal file
View File

@ -0,0 +1,88 @@
import { makeStyles } from "@material-ui/core";
const useStyle = makeStyles((theme) => ({
itemTitle: {
...theme.typography.subtitle1,
fontWeight: theme.typography.fontWeightRegular,
color: theme.palette.text.primary,
// fontSize:'1.1vw'
},
priceTitle: {
...theme.typography.subtitle2,
color: theme.palette.text.disabled,
},
dialog:{
borderRadius:theme.spacing(10)
},
header:{
backgroundColor:theme.palette.grey[100],padding:theme.spacing(3)
},
root: {
'&$paper': {
borderRadius:20,
},
},
doneBtn: {
margin: theme.spacing(2, 0, 0, 0),
width:'70%',
padding: theme.spacing(1.5),
borderRadius: 20,
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
modeText:{
paddingLeft:theme.spacing(1),
},
infoStyle: {
...theme.typography.caption,
textTransform: "uppercase",
background: "rgba(39,111,191,0.1)",
color: "#276FBF",
padding: "4px 6px",
fontWeight: 700,
},
checkoutContainer: {
borderRadius: 0,
width: "80%",
padding: "10px 0px",
"&:hover": {
background: theme.palette.primary.main,
},
},
checkoutText: {
...theme.typography.h6,
fontWeight: 600,
fontSize: "0.875rem",
},
closeContainer: {
background: theme.palette.grey[300],
minWidth: "auto",
marginRight: theme.spacing(1),
marginTop: theme.spacing(1),
borderRadius: "50%",
padding: theme.spacing(1),
},
itemError: {
color: theme.palette.common.white,
backgroundColor: theme.palette.warning.main,
},
disableBtn: {
background: theme.palette.grey[400],
"&:hover": {
background: theme.palette.grey[400],
},
},
btnBase: {
borderRadius: "0px",
height: "50px",
},
paymentInfoBtn: {
width: "100%",
justifyContent: "space-between",
padding: theme.spacing(1),
marginTop: theme.spacing(2),
},
}));
export default useStyle;

3
CustomerWebApp/src/components/Modals/index.js Normal file
View File

@ -0,0 +1,3 @@
import AddressDetailModal from "./AddressDetailModal/AddressDetailModal";
export { AddressDetailModal };

86
CustomerWebApp/src/components/OrderDetail/DetailCard.js Normal file
View File

@ -0,0 +1,86 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { Box, Button, Grid, Typography } from "@material-ui/core";
import React, { useCallback, useContext } from "react";
import { useHistory } from "react-router-dom";
import { UserContext } from "../../context/User";
import useStyles from "./styles";
function DetailCard(props) {
const classes = useStyles();
const navigation = useHistory();
const { isLoggedIn } = useContext(UserContext);
const addToCart = useCallback(() => {
if (!isLoggedIn) {
navigation.push("/Login");
}
}, []);
const customization = useCallback(() => {
if (!isLoggedIn) {
navigation.push("/Login");
}
}, []);
const chatRider = useCallback(() => {
if (!isLoggedIn) {
navigation.push("/Login");
}
}, []);
return (
<Grid container direction="row" className={classes.center}>
<Grid item xs={10}>
<img className={classes.imgContainer} src={props.img_menu} alt="Pic" />
<Box display="flex" justifyContent="space-between" className={classes.mv2}>
<Typography className={classes.subText}>{props.title}</Typography>
<Typography color="primary" className={classes.subText}>
{"$129.50"}
</Typography>
</Box>
<Button
variant="contained"
color="secondary"
disableElevation
className={classes.chatBtn}
onClick={(e) => {
e.preventDefault();
addToCart();
}}
>
<Typography align="center">Add To Cart</Typography>
</Button>
<Box display="flex" justifyContent="space-between">
<Button
variant="contained"
disableElevation
className={classes.subBtn}
onClick={(e) => {
e.preventDefault();
customization();
}}
>
<Typography align="center" color="textPrimary">
Customize Order
</Typography>
</Button>
<Button
variant="contained"
disableElevation
className={classes.subBtn}
onClick={(e) => {
e.preventDefault();
chatRider();
}}
>
<Typography align="center" color="textPrimary">
Chat with Rider
</Typography>
</Button>
</Box>
</Grid>
</Grid>
);
}
export default DetailCard;

70
CustomerWebApp/src/components/OrderDetail/ItemsContainer.js Normal file
View File

@ -0,0 +1,70 @@
import { Box, Grid, Paper, Button, Typography, useTheme } from "@material-ui/core";
import React, {useState, useContext} from "react";
import Skeleton from '@material-ui/lab/Skeleton';
import useStyles from "./styles";
import { Link as RouterLink } from "react-router-dom";
import {foods } from "../../apollo/graphQL";
import { gql, useQuery } from "@apollo/client";
import { get } from "lodash";
import ConfigurationContext from "../../context/Configuration";
// constants
const FOODS = gql`
${foods}
`
function ItemContainer(props) {
const theme = useTheme();
const classes = useStyles();
const [filters, setFilters] = useState({})
const { loading, error, data, refetch, networkStatus } = useQuery(FOODS, {
variables: { category: props._id, ...filters }
})
const configuration = useContext(ConfigurationContext)
console.log('data', data)
if(loading)
return (
<>
<Skeleton variant="text" style={{borderRadius:20,width:'20%',borderTopRightRadius:20}} />
<Skeleton variant="text" style={{borderRadius:20,width:'20%',borderTopRightRadius:20}} />
<Skeleton variant="text" height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} />
<Skeleton height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} />
<Skeleton height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} />
</>
)
return (
<Grid container direction="row">
<Grid item xs={10}>
<Typography color="textPrimary" className={classes.subText}>{props.title}</Typography>
<Typography color="secondary" className={classes.lightText}>{'Deal Contains'}</Typography>
{
data?.foodByCategory && data?.foodByCategory.map((item, index) => (
<RouterLink to={{ pathname: `/Customize` }} className={classes.link}>
<Paper elevation={3} style={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', padding: 10, height: 80, borderRadius: 20 }} className={classes.mv2} >
<img className={classes.ml} style={{ width: '25%', borderRadius: 20, height: '90%' }} src={item.img_url} />
<Box className={classes.ml} style={{width:"60%"}}>
<Typography noWrap>{item?.title}</Typography>
<Typography noWrap variant="body2" className={classes.smallText} color="textSecondary">{item.description}</Typography>
{/* {item.variations[0].discounted > 0 && (
<Typography className={classes.subText} color="primary">{item.variations[0].price.toFixed(2)}</Typography>
)} */}
{/* {item.variations[0].discounted > 0 && ( */}
<Box display="flex">
<Typography className={classes.subText} color="textSecondary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}{' '}</Typography>
<Typography className={classes.subText} color="primary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}</Typography>
</Box>
{/* )} */}
</Box>
</Paper>
</RouterLink>
))
}
</Grid>
</Grid>
);
}
export default ItemContainer;

3
CustomerWebApp/src/components/OrderDetail/index.js Normal file
View File

@ -0,0 +1,3 @@
import DetailCard from "./DetailCard";
import ItemContainer from "./ItemsContainer";
export {DetailCard, ItemContainer}

82
CustomerWebApp/src/components/OrderDetail/styles.js Normal file
View File

@ -0,0 +1,82 @@
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
w70: {
width: "70%",
},
mv2: {
margin: theme.spacing(2, 0),
},
mt3: {
marginTop: theme.spacing(3),
},
ml: {
marginLeft: theme.spacing(3),
},
ph1: {
padding: theme.spacing(0, 1),
},
center: {
// justifyContent: "center",
// padding: theme.spacing(2, 3),
},
cardContainer: {
background: theme.palette.common.white,
},
imageCard: {
width: 180,
height: 150,
},
dot: {
fontSize: 10,
margin: theme.spacing(2, 0),
marginRight: theme.spacing(0.5),
},
imgContainer: {
height: 190,
width: "100%",
borderRadius: theme.spacing(3),
// height:'50%',
// height:'156px',
backgroundSize: "cover",
},
disabledText: {
color: theme.palette.text.disabled,
},
subText: {
fontWeight: 700,
paddingRight:theme.spacing(1),
},
itemTitleText: {
// width:'90%'
},
lightText: {
fontWeight: theme.typography.fontWeightMedium,
},
smallText: {
fontSize: "0.75rem",
},
cardRow: {
display: "flex",
justifyContent: "space-between",
padding: theme.spacing(0.1, 0),
},
chatBtn: {
margin: theme.spacing(2, 0, 0, 0),
width: "100%",
padding: theme.spacing(1.5),
borderRadius: 20,
},
link: {
textDecoration: "none",
},
subBtn: {
margin: theme.spacing(2, 0, 0, 0),
width: "45%",
padding: theme.spacing(1.5),
borderRadius: 20,
backgroundColor: theme.palette.grey[100],
},
}));
export default useStyles;

53
CustomerWebApp/src/components/Orders/ActiveOrdersCard/ActiveOrdersCard.js Normal file
View File

@ -0,0 +1,53 @@
import { Box, Paper, Typography, useTheme } from "@material-ui/core";
import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
import React, { useContext } from "react";
import { Link as RouterLink } from "react-router-dom";
import PlaceHolder from "../../../assets/images/placeholder.png";
import ConfigurationContext from "../../../context/Configuration";
import useStyles from "./styles";
function ActiveOrdersCard(props) {
const theme = useTheme();
const classes = useStyles();
const configuration = useContext(ConfigurationContext);
const orderImage = props?.items?.[0].food?.img_url ?? PlaceHolder;
return (
<RouterLink to={{ pathname: `/OrderStatus/${props._id}` }} className={classes.link}>
<Paper
elevation={7}
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: 15,
height: 80,
borderRadius: 20,
}}
className={classes.mv2}
>
<object style={{ width: "30%", borderRadius: 10, height: "100%" }} data={orderImage} type="image/png">
<img style={{ width: "auto", height: "100%" }} src={PlaceHolder} alt="No Pic" />
</object>
<Box>
<Typography className={classes.smallText} color="textSecondary">
{`Order ID: ${props.order_id}`}
</Typography>
<Typography className={classes.subText} color="primary">
{configuration.currency_symbol} {props.order_amount}
</Typography>
</Box>
<Box style={{ height: "100%", width: "2px", backgroundColor: theme.palette.grey[100] }} />
<Box justifyContent="center" alignItems="center" style={{ textAlign: "center" }}>
<CheckCircleOutlineIcon color="secondary" style={{ fontSize: "35px" }} />
<Typography className={classes.subText} color="secondary">
{props.order_status}
</Typography>
</Box>
</Paper>
</RouterLink>
);
}
export default React.memo(ActiveOrdersCard);

89
CustomerWebApp/src/components/Orders/ActiveOrdersCard/styles.js Normal file
View File

@ -0,0 +1,89 @@
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
w70: {
width: "70%",
},
mv2: {
margin: theme.spacing(2, 0),
},
mt3: {
marginTop: theme.spacing(3),
},
ml: {
marginLeft: theme.spacing(3),
},
ph1: {
padding: theme.spacing(0, 1),
},
center: {
// justifyContent: "center",
// padding: theme.spacing(2, 3),
},
cardContainer: {
background: theme.palette.common.white,
},
imageCard:{
width:180,
height:150,
},
dot: {
fontSize: 10,
margin: theme.spacing(2, 0),
marginRight: theme.spacing(0.5),
},
imgContainer: {
height:190,
width:'100%',
borderRadius:theme.spacing(3),
// height:'50%',
// height:'156px',
backgroundSize: "cover",
},
disabledText: {
color: theme.palette.text.disabled,
},
subText: {
fontWeight: 700,
marginTop:theme.spacing(0)
},
icon:{
fontWeight:'bold'
},
lightText:{
fontWeight:theme.typography.fontWeightMedium
},
smallText: {
fontSize: "0.85rem",
fontWeight:'bold',
},
cardRow: {
display: "flex",
justifyContent: "space-between",
padding: theme.spacing(0.1, 0),
},
chatBtn: {
margin: theme.spacing(2, 0, 0, 0),
width:'100%',
padding: theme.spacing(1.5),
borderRadius: 20,
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
link:{
textDecoration:'none'
},
subBtn: {
margin: theme.spacing(2, 0, 0, 0),
width:'45%',
padding: theme.spacing(1.5),
borderRadius: 20,
backgroundColor: theme.palette.grey[100],
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
}));
export default useStyles;

53
CustomerWebApp/src/components/Orders/PastOrdersCard/PastOrdersCard.js Normal file
View File

@ -0,0 +1,53 @@
import { Box, Paper, Typography, useTheme } from "@material-ui/core";
import CachedIcon from "@material-ui/icons/Cached";
import React, { useContext } from "react";
import { Link as RouterLink } from "react-router-dom";
import PlaceHolder from "../../../assets/images/placeholder.png";
import ConfigurationContext from "../../../context/Configuration";
import useStyles from "./styles";
function PastOrdersCard(props) {
const theme = useTheme();
const classes = useStyles();
const configuration = useContext(ConfigurationContext);
const orderImage = props?.items?.[0].food?.img_url ?? PlaceHolder;
return (
<RouterLink to={{ pathname: `/OrderDetail/${props._id}` }} className={classes.link}>
<Paper
elevation={7}
style={{
alignItems: "center",
display: "flex",
justifyContent: "space-between",
padding: 15,
height: 80,
borderRadius: 20,
}}
className={classes.mv2}
>
<object style={{ width: "30%", borderRadius: 10, height: "100%" }} data={orderImage} type="image/png">
<img style={{ width: "auto", height: "100%" }} src={PlaceHolder} alt="No Pic" />
</object>
<Box>
<Typography className={classes.smallText} color="textSecondary">
{`Order ID: ${props.order_id}`}
</Typography>
<Typography className={classes.subText} color="primary">
{configuration.currency_symbol} {props.order_amount}
</Typography>
</Box>
<Box style={{ height: "100%", width: "2px", backgroundColor: theme.palette.grey[100] }} />
<Box justifyContent="center" alignItems="center" style={{ textAlign: "center" }}>
<CachedIcon style={{ fontSize: "35px" }} />
<Typography className={classes.subText} color="textPrimary">
{"Re-Order"}
</Typography>
</Box>
</Paper>
</RouterLink>
);
}
export default React.memo(PastOrdersCard);

89
CustomerWebApp/src/components/Orders/PastOrdersCard/styles.js Normal file
View File

@ -0,0 +1,89 @@
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
w70: {
width: "70%",
},
mv2: {
margin: theme.spacing(2, 0),
},
mt3: {
marginTop: theme.spacing(3),
},
ml: {
marginLeft: theme.spacing(3),
},
ph1: {
padding: theme.spacing(0, 1),
},
center: {
// justifyContent: "center",
// padding: theme.spacing(2, 3),
},
cardContainer: {
background: theme.palette.common.white,
},
imageCard:{
width:180,
height:150,
},
dot: {
fontSize: 10,
margin: theme.spacing(2, 0),
marginRight: theme.spacing(0.5),
},
imgContainer: {
height:190,
width:'100%',
borderRadius:theme.spacing(3),
// height:'50%',
// height:'156px',
backgroundSize: "cover",
},
disabledText: {
color: theme.palette.text.disabled,
},
subText: {
fontWeight: 700,
marginTop:theme.spacing(0)
},
icon:{
fontWeight:'bold'
},
lightText:{
fontWeight:theme.typography.fontWeightMedium
},
smallText: {
fontSize: "0.85rem",
fontWeight:'bold',
},
cardRow: {
display: "flex",
justifyContent: "space-between",
padding: theme.spacing(0.1, 0),
},
chatBtn: {
margin: theme.spacing(2, 0, 0, 0),
width:'100%',
padding: theme.spacing(1.5),
borderRadius: 20,
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
subBtn: {
margin: theme.spacing(2, 0, 0, 0),
width:'45%',
padding: theme.spacing(1.5),
borderRadius: 20,
backgroundColor: theme.palette.grey[100],
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
link:{
textDecoration:'none'
}
}));
export default useStyles;

3
CustomerWebApp/src/components/Orders/index.js Normal file
View File

@ -0,0 +1,3 @@
import ActiveOrdersCard from "./ActiveOrdersCard/ActiveOrdersCard";
import PastOrdersCard from "./PastOrdersCard/PastOrdersCard";
export {ActiveOrdersCard, PastOrdersCard}

93
CustomerWebApp/src/components/RestaurantSection/RestaurantSection.js Normal file
View File

@ -0,0 +1,93 @@
import { Box, Button, Grid, Typography, useMediaQuery, useTheme } from "@material-ui/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
import React, { useCallback, useRef } from "react";
import Card from "../Card/Card";
import useStyles from "./styles";
function RestaurantSection(props) {
const theme = useTheme();
const extraSmall = useMediaQuery(theme.breakpoints.down("xs"));
const classes = useStyles(extraSmall);
const ref = useRef([]);
const ScrollLeft = useCallback((index1) => {
ref.current[index1].scrollTo({
left: ref.current[index1].scrollLeft + 500,
behavior: "smooth",
});
}, []);
const ScrollRight = useCallback((index1) => {
ref.current[index1].scrollTo({
left: ref.current[index1].scrollLeft - 500,
behavior: "smooth",
});
}, []);
console.log('props section', props.restaurantSections)
return (
<Grid container item justify="center" alignItems="center" className={classes.mainContainer}>
<Grid item sm={1} />
<Grid item xs={12} sm={9}>
{props.restaurantSections.map((section, index1) => (
<Box style={{ marginTop: "50px", position: "relative" }} key={section._id}>
<Typography variant="h5" className={classes.sectionHeading}>
{section.name}
</Typography>
{section.categories.length > 4 && (
<Button
variant="contained"
color="primary"
className={classes.nextButtonStyles}
style={{
left: "-4vw",
}}
onClick={() => ScrollRight(index1)}
>
<ArrowBackIcon />
</Button>
)}
<Box
style={{
overflow: "auto",
whiteSpace: "nowrap",
}}
ref={(el) => (ref.current[index1] = el)}
className={classes.restauranCardContainer}
>
{section.categories.map((data, index) => (
<Box style={{ display: "inline-block", marginRight: "25px" }} key={index}>
<Card
data={data}
cardImageHeight="165px"
showMessage={props.showMessage}
checkCart={props.checkCart}
/>
</Box>
))}
</Box>
{section.categories.length > 4 && (
<Button
variant="contained"
color="primary"
className={classes.nextButtonStyles}
style={{
right: "-4vw",
}}
onClick={() => ScrollLeft(index1)}
>
<ArrowForwardIcon />
</Button>
)}
</Box>
))}
</Grid>
<Grid item sm={1} />
</Grid>
);
}
export default React.memo(RestaurantSection);

32
CustomerWebApp/src/components/RestaurantSection/styles.js Normal file
View File

@ -0,0 +1,32 @@
import { makeStyles } from "@material-ui/core";
const useStyle = makeStyles((theme) => ({
restauranCardContainer: {
msOverflowStyle: "none",
scrollbarWidth: "none",
"&::-webkit-scrollbar": {
display: "none",
},
},
nextButtonStyles: {
minWidth: "auto",
width: "44px",
height: "47px",
position: "absolute",
top: "45%",
zIndex: 5,
borderRadius: 15,
"&:hover": {
backgroundColor: theme.palette.primary.main,
},
},
sectionHeading: {
marginBottom: theme.spacing(3),
},
mainContainer: {
marginTop: "50px",
padding: (extraSmall) => (extraSmall ? "0px 5vw" : "0px"),
},
}));
export default useStyle;

29
CustomerWebApp/src/components/index.js Normal file
View File

@ -0,0 +1,29 @@
import { MainHeader } from "./Headers";
import { SearchContainer } from "./HomeScreen";
import RestaurantRow from "./RestaurantSection/RestaurantSection";
import { GetStartedWrapper } from "./wrappers";
import Footer from "./Footer/Footer";
import PaymentModal from "./Modals/PaymentModal/PaymentModal";
import { DetailCard, ItemContainer } from "./OrderDetail";
import { ActiveOrdersCard, PastOrdersCard } from "./Orders";
import CustomizeCard from "./CustomizeCard/CustomizeCard";
import FilterModal from "./Modals/FilterModal/FilterModal";
import { AlertSnack } from "./Alert";
import { AddressDetailModal } from "./Modals";
export {
Footer,
AlertSnack,
MainHeader,
DetailCard,
FilterModal,
PaymentModal,
CustomizeCard,
ItemContainer,
RestaurantRow,
PastOrdersCard,
SearchContainer,
ActiveOrdersCard,
GetStartedWrapper,
AddressDetailModal,
};

17
CustomerWebApp/src/components/wrappers/GetStartedWrapper.js Normal file
View File

@ -0,0 +1,17 @@
import { Box, Container } from "@material-ui/core";
import React from "react";
import useStyles from "./styles";
function GetStartedWrapper({ children }) {
const classes = useStyles();
return (
<Box className={classes.root}>
<Box className={classes.mainContainer}>
<Container maxWidth="xs" className={classes.loginBox}>
{children}
</Container>
</Box>
</Box>
);
}
export default React.memo(GetStartedWrapper);

3
CustomerWebApp/src/components/wrappers/index.js Normal file
View File

@ -0,0 +1,3 @@
import GetStartedWrapper from "./GetStartedWrapper";
export { GetStartedWrapper };

40
CustomerWebApp/src/components/wrappers/styles.js Normal file
View File

@ -0,0 +1,40 @@
import { makeStyles } from "@material-ui/core";
import Background from "../../assets/images/Background.jpg";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiInputBase-input": {
color: theme.palette.text.secondary,
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: theme.palette.grey[200],
},
"&:hover fieldset": {
borderColor: theme.palette.text.disabled,
},
"&.Mui-focused fieldset": {
borderColor: theme.palette.primary.main,
},
},
},
mainContainer: {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
backgroundImage: `url(${Background})`,
},
loginBox: {
background: theme.palette.common.white,
padding: theme.spacing(6),
height: "80vh",
minWidth: "30vw",
borderRadius: theme.spacing(2),
textAlign: "center",
alignItems:'center'
},
}));
export default useStyles;

5
CustomerWebApp/src/configuration/configurataion.js Normal file
View File

@ -0,0 +1,5 @@
const SERVER_URL = "http://192.168.43.245:8000/";
const WS_SERVER_URL = "ws://192.168.43.245:8000/";
const GOOGLE_CLIENT_ID = "94983896797-s9qpbnjj4fg5b9fa35m25bm80h1mouaf.apps.googleusercontent.com";
export { SERVER_URL, WS_SERVER_URL, GOOGLE_CLIENT_ID };

45
CustomerWebApp/src/context/Alert.js Normal file
View File

@ -0,0 +1,45 @@
import React, { createContext, useCallback, useState } from "react";
import AlertSnack from "../components/Alert/AlertSnack";
export const AlertContext = createContext({
closeAlert: () => null,
showAlert: () => null,
});
const INITIAL_VALUE = {
alive: null,
cancelBtn: "",
alertMessage: "",
alertVisible: false,
alertSeverity: "",
closeAlert: () => null,
};
function AlertProvider({ children }) {
const [snackShow, setSnackShow] = useState(INITIAL_VALUE);
const closeAlert = useCallback(() => {
setSnackShow(INITIAL_VALUE);
}, []);
const showAlert = useCallback(
(showObj) => {
setSnackShow((prev) => ({
...prev,
alertVisible: true,
closeAlert: closeAlert,
...showObj,
}));
},
[closeAlert]
);
return (
<AlertContext.Provider value={{ showAlert, closeAlert }}>
<AlertSnack {...snackShow} />
{children}
</AlertContext.Provider>
);
}
export default React.memo(AlertProvider);

31
CustomerWebApp/src/context/Configuration.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react'
import { gql, useQuery } from "@apollo/client";
import PropTypes from 'prop-types'
import { getConfiguration } from '../apollo/graphQL'
const GETCONFIGURATION = gql`
${getConfiguration}
`
const ConfigurationContext = React.createContext({})
export const ConfigurationProvider = props => {
const { loading, data, error } = useQuery(GETCONFIGURATION)
const configuration =
loading || error || !data.configuration
? { currency: '', currency_symbol: '', delivery_charges: 0 }
: data.configuration
return (
<ConfigurationContext.Provider value={configuration}>
{props.children}
</ConfigurationContext.Provider>
)
}
ConfigurationProvider.propTypes = {
children: PropTypes.node.isRequired
}
export const ConfigurationConsumer = ConfigurationContext.Consumer
export default ConfigurationContext

184
CustomerWebApp/src/context/User.js Normal file
View File

@ -0,0 +1,184 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { createContext, useEffect, useState } from "react";
import React from "react";
import { gql, useApolloClient, useLazyQuery } from "@apollo/client";
import { myOrders, orderStatusChanged, profile } from "../apollo/graphQL";
import { has } from "lodash";
const PROFILE = gql`
${profile}
`;
const ORDERS = gql`
${myOrders}
`;
const SUBSCRIPTION_ORDERS = gql`
${orderStatusChanged}
`;
const UserContext = createContext({
profile: null,
networkStatusOrders: 0,
orders: [],
errorOrders: "",
loadingProfile: false,
loadingOrders: false,
isLoggedIn: false,
authToken: "",
fetchMoreOrdersFunc: () => null,
setTokenAsync: () => null,
fetchOrders: () => null,
logout: () => null,
});
function UserProvider({ children }) {
const client = useApolloClient();
const [authToken, setAuthToken] = useState(null);
const [fetchProfile, { loading: loadingProfile, error: errorProfile, data: dataProfile }] = useLazyQuery(PROFILE, {
fetchPolicy: "network-only",
onCompleted,
onError,
});
const [
fetchOrders,
{
called: calledOrders,
loading: loadingOrders,
error: errorOrders,
data: dataOrders,
networkStatus: networkStatusOrders,
fetchMore: fetchMoreOrders,
subscribeToMore: subscribeToMoreOrders,
},
] = useLazyQuery(ORDERS, {
fetchPolicy: "network-only",
onCompleted,
onError,
});
useEffect(() => {
let isSubscribed = true;
(async () => {
const token = localStorage.getItem("token");
isSubscribed && setAuthToken(token);
})();
return () => {
isSubscribed = false;
};
}, []);
useEffect(() => {
if (!authToken) return;
let isSubscribed = true;
(async () => {
isSubscribed && (await fetchProfile());
isSubscribed && (await fetchOrders());
})();
return () => {
isSubscribed = false;
};
}, [authToken]);
useEffect(() => {
if (!dataProfile) return;
subscribeOrders();
}, [dataProfile]);
function onCompleted({ profile, orders }) {}
function onError(error) {
console.log("error context", error);
}
const fetchMoreOrdersFunc = () => {
if (networkStatusOrders === 7) {
fetchMoreOrders({
variables: { offset: dataOrders.orders.length + 1 },
updateQuery: (previousResult, { fetchMoreResult }) => {
// Don't do anything if there weren't any new items
if (!fetchMoreResult || fetchMoreResult.orders.length === 0) {
return previousResult;
}
// setOrders(previousResult.orders.concat(fetchMoreResult.orders))
return {
// Append the new feed results to the old one
orders: previousResult.orders.concat(fetchMoreResult.orders),
};
},
});
}
};
const subscribeOrders = () => {
try {
const unsubscribeOrders = subscribeToMoreOrders({
document: SUBSCRIPTION_ORDERS,
variables: { userId: dataProfile.profile._id },
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;
const { _id } = subscriptionData.data.orderStatusChanged.order;
if (subscriptionData.data.orderStatusChanged.origin === "new") {
if (prev.orders.findIndex((o) => o._id === _id) > -1) return prev;
return {
orders: [subscriptionData.data.orderStatusChanged.order, ...prev.orders],
};
} else {
const { orders } = prev;
const orderIndex = orders.findIndex((o) => o._id === _id);
if (orderIndex > -1) {
orders[orderIndex] = subscriptionData.data.orderStatusChanged.order;
}
return {
orders: [...orders],
};
}
},
});
client.onResetStore(unsubscribeOrders);
} catch (error) {
console.log("error subscribing order", error.message);
}
};
const setTokenAsync = async (tokenReq) => {
localStorage.setItem("token", tokenReq);
setAuthToken(tokenReq);
};
const logout = async () => {
try {
localStorage.removeItem("token");
setAuthToken(null);
await client.resetStore();
} catch (error) {
console.log("error on logout", error);
}
};
return (
<UserContext.Provider
value={{
isLoggedIn: Boolean(authToken) && has(dataProfile, "profile"),
loadingProfile: loadingProfile,
errorProfile,
profile: dataProfile?.profile ?? null,
loadingOrders: loadingOrders && calledOrders,
errorOrders,
orders: dataOrders?.orders ?? [],
fetchMoreOrdersFunc,
networkStatusOrders,
fetchOrders,
authToken,
setTokenAsync,
logout,
}}
>
{children}
</UserContext.Provider>
);
}
export default React.memo(UserProvider);
export { UserContext };

5
CustomerWebApp/src/context/index.js Normal file
View File

@ -0,0 +1,5 @@
import AlertProvider, { AlertContext } from "./Alert";
import UserProvider, { UserContext } from "./User";
import {ConfigurationProvider} from "./Configuration";
export { AlertProvider, AlertContext, UserProvider, UserContext, ConfigurationProvider };

59
CustomerWebApp/src/hooks/Location.js Normal file
View File

@ -0,0 +1,59 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect, useState } from "react";
import Geocode from "react-geocode";
import { usePosition } from "use-position";
function useLocation() {
Geocode.setApiKey("AIzaSyCzNP5qQql2a5y8lOoO-1yj1lj_tzjVImA");
Geocode.setLanguage("en");
Geocode.enableDebug();
const [permissionError, setPermissionError] = useState("");
const { latitude, longitude, error } = usePosition(true, { enableHighAccuracy: true });
const [location, setLocation] = useState();
useEffect(() => {
setPermissionError("");
if ("geolocation" in navigator) {
(async () => {
await getAddress();
})();
} else {
setPermissionError("Permission is not granted");
}
}, [latitude, error]);
const geocodingLocation = async (lat, lng, setFunction) => {
try {
const locationName = await Geocode.fromLatLng(lat, lng);
return locationName.results[0].formatted_address;
} catch (e) {
console.error(error);
return null;
}
};
const getAddress = async () => {
if (!latitude) {
setPermissionError("Invalid Location");
return;
}
const locationName = await geocodingLocation(latitude, longitude);
if (locationName)
setLocation({
label: "Home",
latitude: latitude,
longitude: longitude,
deliveryAddress: locationName,
});
};
return {
loading: !!error || !!permissionError ? false : !!location ? false : true,
error: error || permissionError,
location,
updateError: setPermissionError,
geoCodeCoordinates: geocodingLocation,
};
}
export default useLocation;

3
CustomerWebApp/src/hooks/index.js Normal file
View File

@ -0,0 +1,3 @@
import useRegistration from "./useRegistration";
export { useRegistration };

13
CustomerWebApp/src/hooks/useFilterModal.js Normal file
View File

@ -0,0 +1,13 @@
import React, { useState } from "react";
export default function useFilterModal() {
const [isOpen, setIsOpen] = useState(false);
const toggleModal = () => {
setIsOpen(!isOpen)
}
return { isOpen, toggleModal };
}

137
CustomerWebApp/src/hooks/useRegistration.js Normal file
View File

@ -0,0 +1,137 @@
import { useCallback, useContext, useState } from "react";
import { gql, useMutation } from "@apollo/client";
import { createUser, login } from "../apollo/graphQL";
import { AlertContext } from "../context/Alert";
import { useGoogleLogin } from "react-google-login";
import { GOOGLE_CLIENT_ID } from "../configuration/configurataion";
import { UserContext } from "../context/User";
import { useHistory } from "react-router-dom";
const LOGIN = gql`
${login}
`;
const CREATEUSER = gql`
${createUser}
`;
function useRegistration() {
const navigation = useHistory();
const [loading, setLoading] = useState(false);
const { showAlert } = useContext(AlertContext);
const { setTokenAsync } = useContext(UserContext);
const [loginButton, loginButtonSetter] = useState(null);
const [Login] = useMutation(LOGIN, { onCompleted, onError });
const [Registration] = useMutation(CREATEUSER, { onCompleted, onError });
const mutateLogin = useCallback(
async (user) => {
Login({
variables: {
...user,
},
});
},
[Login]
);
async function onCompleted({ login, createUser }) {
try {
await setTokenAsync(login ? login.token : createUser.token);
navigation.replace("/Home");
} catch (e) {
showAlert({
alertMessage: "Something went wrong",
});
console.log("Error While saving token:", e);
} finally {
setLoading(false);
}
}
function onError(errors) {
setLoading(false);
showAlert({
alertMessage: errors.message || "Invalid credentials!",
alertSeverity: "error",
});
}
const authenticationFailure = useCallback((response) => {
console.log("Authentication Failed: ", response);
switch (response.error) {
case "popup_closed_by_user":
case "immediate_failed":
break;
case "idpiframe_initialization_failed":
showAlert({
alertMessage: "Something went wrong",
alertSeverity: "default",
});
break;
default:
showAlert({
alertMessage: "Something went wrong",
alertSeverity: "default",
});
break;
}
setLoading(false);
loginButtonSetter(null);
}, []);
const goolgeSuccess = useCallback(
(response) => {
const user = {
phone: "",
email: response.profileObj.email,
password: "",
name: response.profileObj.name,
picture: response.profileObj.imageUrl,
type: "google",
};
mutateLogin(user);
},
[mutateLogin]
);
const { signIn } = useGoogleLogin({
clientId: GOOGLE_CLIENT_ID,
onSuccess: goolgeSuccess,
onFailure: authenticationFailure,
cookiePolicy: "single_host_origin",
});
const googleAuthentication = () => {
if (!loading) {
loginButtonSetter("GOOGLE");
setLoading(true);
signIn();
}
};
const emailLogin = (user) => {
setLoading(true);
mutateLogin(user);
};
const emailAuthentication = async (user) => {
setLoading(true);
Registration({
variables: {
...user,
},
});
};
return {
loading,
loginButton,
emailLogin,
loginButtonSetter,
authenticationFailure,
googleAuthentication,
emailAuthentication,
};
}
export default useRegistration;

13
CustomerWebApp/src/index.css Normal file
View File

@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

38
CustomerWebApp/src/index.js Normal file
View File

@ -0,0 +1,38 @@
import { ThemeProvider } from "@material-ui/core";
import { LoadScript } from "@react-google-maps/api";
import React from "react";
import ReactDOM from "react-dom";
import ApolloSetup from "./apollo/ApolloSetup";
import App from "./App";
import { AlertProvider, UserProvider, ConfigurationProvider } from "./context";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import theme from "./utils/theme";
ReactDOM.render(
// <React.StrictMode>
<ThemeProvider theme={theme}>
<ApolloSetup>
<ConfigurationProvider>
<UserProvider>
<LoadScript
id="script-loader"
googleMapsApiKey="AIzaSyCzNP5qQql2a5y8lOoO-1yj1lj_tzjVImA"
libraries={["places"]}
>
<AlertProvider>
<App />
</AlertProvider>
</LoadScript>
</UserProvider>
</ConfigurationProvider>
</ApolloSetup>
</ThemeProvider>,
// </React.StrictMode>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

1
CustomerWebApp/src/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

13
CustomerWebApp/src/reportWebVitals.js Normal file
View File

@ -0,0 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

91
CustomerWebApp/src/screens/Address/Address.js Normal file
View File

@ -0,0 +1,91 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { Button, Grid } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import React, { useCallback, useContext, useEffect, useState } from "react";
import { AddressDetailModal, Footer, SearchContainer } from "../../components";
import { UserContext } from "../../context/User";
import useLocation from "../../hooks/Location";
import AddressCard from "./components/AddressCard";
import useStyle from "./styles";
const LATITUDE = 33.7001019;
const LONGITUDE = 72.9735978;
function Address() {
const classes = useStyle();
const { location } = useLocation();
const { profile } = useContext(UserContext);
const [addressInfo, setAddressInfo] = useState(null);
const [addressVisible, setAddressVisible] = useState(false);
useEffect(() => {
if (location && !addressInfo) {
currentLocation();
}
}, [addressInfo, location]);
const toggleModal = useCallback(() => {
setAddressVisible((prev) => !prev);
}, []);
const currentLocation = useCallback(() => {
if (location)
setAddressInfo({
lat: location?.latitude ?? LATITUDE,
lng: location?.longitude ?? LONGITUDE,
location: location?.deliveryAddress ?? "",
});
}, [location]);
const editAddress = useCallback((item) => {
const coordinates = {
lat: parseFloat(item?.latitude) ?? null,
lng: parseFloat(item?.longitude) ?? null,
};
setAddressInfo({
...coordinates,
id: item._id,
location: item.delivery_address,
detail: item.details,
label: item.label || "Home",
});
toggleModal();
}, []);
return (
<Grid container>
<Grid container item>
<SearchContainer heading="My Addresses" />
</Grid>
<Grid container alignItems="center" justify="center" item xs={12} className={classes.mainView}>
<Grid container item xs={10} sm={10} md={9} lg={8} className={classes.center}>
<Grid item xs={12} alignItems="flex-end" className={classes.right}>
<Button
variant="outlined"
size="medium"
classes={{
outlined: classes.editBtn,
}}
onClick={(e) => {
e.preventDefault();
currentLocation();
toggleModal();
}}
>
<AddIcon />
</Button>
</Grid>
<Grid item xs={12}>
{profile.addresses.map((item, index) => (
<AddressCard key={item.id} item={item} editAction={editAddress} />
))}
</Grid>
</Grid>
</Grid>
<Footer />
<AddressDetailModal isVisible={addressVisible} regionDetail={addressInfo} toggleModal={toggleModal} />
</Grid>
);
}
export default React.memo(Address);

116
CustomerWebApp/src/screens/Address/components/AddressCard.js Normal file
View File

@ -0,0 +1,116 @@
import { gql, useMutation } from "@apollo/client";
import { Box, Button, CircularProgress, Paper, Typography, useTheme } from "@material-ui/core";
import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
import EditOutlinedIcon from "@material-ui/icons/EditOutlined";
import HomeOutlinedIcon from "@material-ui/icons/HomeOutlined";
import LocalMallOutlinedIcon from "@material-ui/icons/LocalMallOutlined";
import RoomOutlinedIcon from "@material-ui/icons/RoomOutlined";
import React, { useContext } from "react";
import { deleteAddress } from "../../../apollo/graphQL";
import { AlertContext } from "../../../context/Alert";
import useStyles from "./styles";
const DELETE_ADDRESS = gql`
${deleteAddress}
`;
function AddressCard({ item, editAction }) {
const theme = useTheme();
const classes = useStyles();
const { showAlert } = useContext(AlertContext);
const [mutate, { loading: loadingDelete }] = useMutation(DELETE_ADDRESS, { onCompleted, onError });
function onCompleted() {
showAlert({
alertSeverity: "success",
alertMessage: "Address Removed!",
});
}
function onError(error) {
console.log(error);
showAlert({
alertSeverity: "error",
alertMessage: `An error occured. Please try again. ${error}`,
});
}
return (
<Paper
elevation={2}
style={{
alignItems: "center",
display: "flex",
justifyContent: "space-between",
padding: 15,
height: "50px",
borderRadius: 20,
}}
className={classes.mv2}
>
<Box display="flex" alignItems="center">
{item.label === "Other" && <RoomOutlinedIcon style={{ fontSize: "2rem" }} color="primary" />}
{item.label === "Work" && <LocalMallOutlinedIcon style={{ fontSize: "2rem" }} color="secondary" />}
{item.label === "Home" && <HomeOutlinedIcon style={{ fontSize: "2rem" }} color="error" />}
<Box className={classes.ml}>
<Typography className={classes.type}>{item.label}</Typography>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography className={classes.smallText} color="textSecondary">
{item.delivery_address}
</Typography>
<Box
style={{
height: "1.2vw",
marginLeft: 5,
marginRight: 5,
width: "2px",
backgroundColor: theme.palette.text.secondary,
opacity: 0.5,
}}
/>
<Typography className={classes.smallText} color="textSecondary">
{item.details}
</Typography>
</Box>
</Box>
</Box>
<Box display="flex">
<Button
variant="contained"
color="primary"
disableElevation
size="small"
classes={{
containedPrimary: classes.editBtn,
}}
onClick={(e) => {
e.preventDefault();
editAction(item);
}}
>
<EditOutlinedIcon style={{ fontSize: "1.3rem" }} />
</Button>
<Button
variant="contained"
color="primary"
disableElevation
size="small"
classes={{
containedPrimary: classes.editBtn,
}}
onClick={(e) => {
e.preventDefault();
mutate({ variables: { id: item._id } });
}}
>
{loadingDelete ? (
<CircularProgress color="inherit" size={20} thickness={5} />
) : (
<DeleteOutlineIcon style={{ fontSize: "1.3rem" }} />
)}
</Button>
</Box>
</Paper>
);
}
export default React.memo(AddressCard);

0
CustomerWebApp/src/screens/Address/components/index.js Normal file
View File

100
CustomerWebApp/src/screens/Address/components/styles.js Normal file
View File

@ -0,0 +1,100 @@
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
w70: {
width: "70%",
},
mv2: {
margin: theme.spacing(4, 0),
},
mt3: {
marginTop: theme.spacing(3),
},
ml: {
marginLeft: theme.spacing(3),
},
ph1: {
padding: theme.spacing(0, 1),
},
center: {
// justifyContent: "center",
// padding: theme.spacing(2, 3),
},
cardContainer: {
background: theme.palette.common.white,
},
imageCard:{
width:180,
height:150,
},
dot: {
fontSize: 10,
margin: theme.spacing(2, 0),
marginRight: theme.spacing(0.5),
},
imgContainer: {
height:190,
width:'100%',
borderRadius:theme.spacing(3),
// height:'50%',
// height:'156px',
backgroundSize: "cover",
},
disabledText: {
color: theme.palette.text.disabled,
},
subText: {
fontWeight: 700,
marginTop:theme.spacing(0)
},
type:{
fontWeight:'600'
},
lightText:{
fontWeight:theme.typography.fontWeightMedium
},
smallText: {
fontSize: "1vw",
},
editBtn: {
minWidth: "auto",
// aspectRatio: 1,
backgroundColor:theme.palette.primary.light,
borderRadius: 10,
borderColor:'black',
padding: theme.spacing(1),
borderWidth:2,
color:'black',
marginLeft:theme.spacing(1)
},
cardRow: {
display: "flex",
justifyContent: "space-between",
padding: theme.spacing(0.1, 0),
},
chatBtn: {
margin: theme.spacing(2, 0, 0, 0),
width:'100%',
padding: theme.spacing(1.5),
borderRadius: 20,
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
link:{
textDecoration:'none'
},
subBtn: {
margin: theme.spacing(2, 0, 0, 0),
width:'45%',
padding: theme.spacing(1.5),
borderRadius: 20,
backgroundColor: theme.palette.grey[100],
"&:hover": {
backgroundColor: theme.palette.primary.light,
},
},
}));
export default useStyles;

3
CustomerWebApp/src/screens/Address/index.js Normal file
View File

@ -0,0 +1,3 @@
import Address from "./Address";
export { Address };

51
CustomerWebApp/src/screens/Address/styles.js Normal file
View File

@ -0,0 +1,51 @@
import { makeStyles } from "@material-ui/core";
const useStyle = makeStyles((theme) => ({
mainView: {
paddingTop: theme.spacing(8),
},
cardView: {
width: "100%",
boxShadow: theme.shadows[5],
borderRadius: 10,
margin: theme.spacing(2, 0),
},
leftContainer: {
margin: theme.spacing(2, 0),
alignSelf: "flex-start",
},
right:{
textAlign:'right'
},
row: {
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
editBtn: {
minWidth: "auto",
// aspectRatio: 1,
borderRadius: 18,
borderColor:'black',
padding: theme.spacing(1.5),
borderWidth:2,
color:'black'
},
imgView: {
borderRadius: 10,
border: "dashed 2px #febb2c",
// padding: theme.spacing(1),
},
center:{
justifyContent:'center',
alignItems:'center'
},
rightView: {
padding: theme.spacing(0, 3),
},
inputRow: {
margin: theme.spacing(2, 0),
},
}));
export default useStyle;

46
CustomerWebApp/src/screens/Customize/Cutomize.js Normal file
View File

@ -0,0 +1,46 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { Box, Grid, Typography,Container, useTheme, IconButton } from "@material-ui/core";
import React from "react";
import {SearchContainer, Footer, DetailCard, CustomizeCard } from "../../components";
import useStyles from "./styles";
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import { useHistory } from "react-router-dom";
function OrderDetail() {
const theme = useTheme();
const classes = useStyles();
const history = useHistory()
return (
<Grid container justify="space-between" direction="column" style={{minHeight:'100vh'}}>
<Grid container item>
<SearchContainer />
</Grid>
<Container maxWidth="md" className={classes.mainContainer}>
<Grid container className={classes.center}>
<Grid item xs={12} className={classes.row}>
<IconButton onClick={()=> history.goBack()} style={{color:theme.palette.text.primary}} >
<ArrowBackIcon />
<Typography variant="h6" className={classes.pl} color="textPrimary">
Back
</Typography>
</IconButton>
</Grid>
<Grid item xs={12} sm={6}>
<DetailCard />
</Grid>
<Grid item xs={12} sm={6} >
<CustomizeCard />
{/* <Box pt={`${theme.spacing(2)}px`} /> */}
</Grid>
</Grid>
</Container>
<Box>
<Footer />
</Box>
</Grid>
);
}
export default OrderDetail;

2
CustomerWebApp/src/screens/Customize/index.js Normal file
View File

@ -0,0 +1,2 @@
import Customize from "./Cutomize";
export {Customize}

39
CustomerWebApp/src/screens/Customize/styles.js Normal file
View File

@ -0,0 +1,39 @@
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
contentContainer: {
padding: theme.spacing(0, 3),
},
mainContainer: {
marginTop: "80px",
justifyContent:'center',
alignItems:'center'
},
center: {
justifyContent: "center",
alignItems:'center',
},
pl:{
paddingLeft:theme.spacing(1)
},
row: {
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
},
textBold: {
fontWeight: 700,
},
smallText: {
color: theme.palette.text.disabled,
fontSize: "0.875rem",
padding: theme.spacing(0, 2),
},
bottomContainer: {
marginTop: theme.spacing(10),
backgroundColor: theme.palette.grey[100],
},
}));
export default useStyles;

96
CustomerWebApp/src/screens/GetStarted/GetStarted.js Normal file
View File

@ -0,0 +1,96 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { Button, Typography } from "@material-ui/core";
import React from "react";
import AppleIcon from "../../assets/icons/AppleIcon";
import FacebookIcon from "../../assets/icons/FacebookIcon";
import GoogleIcon from "../../assets/icons/GoogleIcon";
import LogoAlphabet from "../../assets/icons/LogoAlphabet";
import Logo from "../../assets/images/logo.png";
import useStyles from "./styles";
import { GetStartedWrapper } from "../../components";
function GetStarted() {
const classes = useStyles();
return (
<GetStartedWrapper>
<img className={classes.imgContainer} src={Logo} />
<Button
variant="contained"
disableElevation
fullWidth
className={`${classes.gButton}`}
startIcon={<FacebookIcon />}
>
<Typography
variant="caption"
color="textPrimary"
align="center"
className={`${classes.font700} ${classes.btnText}`}
>
Signup with Facebook
</Typography>
</Button>
<Button
variant="contained"
disableElevation
fullWidth
className={`${classes.gButton}`}
startIcon={<GoogleIcon />}
>
<Typography
variant="caption"
color="textPrimary"
align="center"
className={`${classes.font700} ${classes.btnText}`}
>
CONTINUE WITH GOOGLE
</Typography>
</Button>
<Button
variant="contained"
disableElevation
className={`${classes.gButton}`}
fullWidth
autoCapitalize={false}
startIcon={<AppleIcon />}
>
<Typography
variant="caption"
color="textPrimary"
align="center"
className={`${classes.font700} ${classes.btnText}`}
>
Signup with Apple
</Typography>
</Button>
<Button
variant="contained"
disableElevation
className={`${classes.gButton}`}
fullWidth
startIcon={<LogoAlphabet />}
>
<Typography
variant="caption"
color="textPrimary"
align="center"
className={`${classes.font700} ${classes.btnText}`}
>
Signup using Email
</Typography>
</Button>
<Button variant="contained" disableElevation className={`${classes.lgnBtn}`} fullWidth>
<Typography
variant="caption"
color="textPrimary"
align="center"
className={`${classes.font700} ${classes.btnText}`}
>
Already a member ? Login
</Typography>
</Button>
</GetStartedWrapper>
);
}
export default React.memo(GetStarted);

67
CustomerWebApp/src/screens/GetStarted/styles.js Normal file
View File

@ -0,0 +1,67 @@
import { makeStyles } from "@material-ui/core";
import Background from "../../assets/images/Background.jpg";
import MyTheme from "../../utils/theme";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiInputBase-root": {
color: theme.palette.text.secondary,
},
"& .MuiOutlinedInput-root": {
"&:hover fieldset": {
borderColor: theme.palette.common.black,
},
},
},
container:{
backgroundImage: `url(${Background})`,
width:'100%',
height:'100vh',
backgroundSize:'contain'
},
imgContainer:{
width:'40%',
height:'20%',
marginBottom:theme.spacing(7)
},
font700:{
fontWeight:theme.typography.fontWeightBold,
// textAlign:'center'
},
gButton: {
marginTop: theme.spacing(2),
padding:theme.spacing(1.5),
background: MyTheme.palette.primary.light,
borderRadius:theme.spacing(2),
"&:disabled": {
backgroundColor: theme.palette.primary.dark,
},
"&:hover": {
opacity: 0.9,
backgroundColor: MyTheme.palette.primary.light
},
},
lgnBtn: {
marginTop: theme.spacing(4),
padding:theme.spacing(1.5),
background: MyTheme.palette.primary.main,
borderRadius:theme.spacing(2),
"&:disabled": {
backgroundColor: theme.palette.primary.dark,
},
"&:hover": {
opacity: 0.9,
backgroundColor: MyTheme.palette.primary.light
},
},
btnText: {
width: "inherit",
},
caption: {
fontSize: "0.875rem",
}
}));
export default useStyles;

49
CustomerWebApp/src/screens/Help/Help.js Normal file
View File

@ -0,0 +1,49 @@
import { Card, CardActionArea, CardContent, Grid, Typography } from "@material-ui/core";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import React from "react";
import { Link as RouterLink } from "react-router-dom";
import { Footer, SearchContainer } from "../../components";
import { HELP_NAV } from "../../utils/constant";
import useStyle from "./styles";
function Help() {
const classes = useStyle();
return (
<Grid container>
<Grid container item>
<SearchContainer heading="Help" />
</Grid>
<Grid container item xs={12} className={classes.mainView}>
<Grid item xs={1} md={1} />
<Grid container item xs={10} sm={10} md={9} lg={9}>
{HELP_NAV.map((item) => (
<Card key={item.id} className={classes.cardView}>
<CardActionArea
component={RouterLink}
to={{ pathname: item.navigate }}
target="_blank"
className={classes.btnView}
>
<CardContent className={classes.row}>
<Typography
variant="subtitle1"
color="textPrimary"
classes={{
subtitle1: classes.bold,
}}
>
{item.name}
</Typography>
<KeyboardArrowRightIcon fontSize="large" />
</CardContent>
</CardActionArea>
</Card>
))}
</Grid>
</Grid>
<Footer />
</Grid>
);
}
export default React.memo(Help);

3
CustomerWebApp/src/screens/Help/index.js Normal file
View File

@ -0,0 +1,3 @@
import Help from "./Help";
export { Help };

30
CustomerWebApp/src/screens/Help/styles.js Normal file
View File

@ -0,0 +1,30 @@
import { makeStyles } from "@material-ui/core";
const useStyle = makeStyles((theme) => ({
btnView: {
"&:hover .MuiCardActionArea-focusHighlight": {
opacity: 0,
},
},
bold: {
fontWeight: "500",
},
mainView: {
paddingTop: theme.spacing(8),
},
cardView: {
width: "100%",
boxShadow: theme.shadows[5],
borderRadius: 20,
margin: theme.spacing(2, 0),
},
row: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3),
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
}));
export default useStyle;

54
CustomerWebApp/src/screens/Home/index.js Normal file
View File

@ -0,0 +1,54 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { Grid, LinearProgress, Typography } from "@material-ui/core";
import React, { useEffect } from "react";
import { gql, useQuery } from "@apollo/client";
import { categories } from "../../apollo/graphQL";
import { RestaurantRow, SearchContainer, Footer, PaymentModal, FilterModal } from "../../components";
import useFilterModal from "../../hooks/useFilterModal";
const CATEGORIES = gql`
${categories}
`;
function Home() {
const { data, loading} = useQuery(CATEGORIES);
const {isOpen, toggleModal} = useFilterModal()
const sections = [
{
_id: "601e9657cf8e2913cb91088b",
name: "Featured",
},
{
_id: "601e96f0cf8e2913cb9108f6",
name: "Hot Items",
},
];
const restaurantSections = sections.map((sec) => ({
...sec,
...data
}));
return (
<Grid container>
{<FilterModal isOpen={isOpen} toggleModal={toggleModal}/>}
<Grid container item>
<SearchContainer showSearch toggleModal={toggleModal}/>
</Grid>
<Grid container item>
{loading ? (
<div style={{ width: "100%" }}>
<LinearProgress color="primary" />
</div>
) : (
// <Typography>Hello</Typography>
<RestaurantRow restaurantSections={restaurantSections} />
)}
</Grid>
<Footer />
</Grid>
);
}
export default Home;

104
CustomerWebApp/src/screens/MyOrders/MyOrders.js Normal file
View File

@ -0,0 +1,104 @@
import { Button, Grid, LinearProgress, Typography } from "@material-ui/core";
import React, { useContext } from "react";
import { Link as RouterLink } from "react-router-dom";
import { ActiveOrdersCard, Footer, PastOrdersCard, SearchContainer } from "../../components";
import { UserContext } from "../../context";
import { ACTIVE_ORDERS, INACTIVE_ORDERS } from "../../utils/constant";
import useStyle from "./styles";
function MyOrders() {
const classes = useStyle();
const { orders, loadingOrders, errorOrders } = useContext(UserContext);
const activeOrders = orders.filter((o) => ACTIVE_ORDERS.includes(o.order_status));
const pastOrders = orders.filter((o) => INACTIVE_ORDERS.includes(o.order_status));
let renderView;
if (loadingOrders) {
renderView = (
<div style={{ width: "100%" }}>
<LinearProgress color="primary" />
</div>
);
} else if (errorOrders) {
renderView = (
<Grid item xs={12} className={classes.center}>
<Typography variant="h4" align="center" color="error">
{errorOrders.message}
</Typography>
</Grid>
);
} else if (orders.length < 1) {
renderView = (
<Grid container className={classes.center} spacing={10}>
<Grid item xs={12}>
<Typography variant="h4" align="center" color="textSecondary">
No order found!
</Typography>
</Grid>
<Button component={RouterLink} to={"/Home"} variant="outlined" color="primary" size="large">
Start Shopping
</Button>
</Grid>
);
} else {
renderView = (
<>
<Grid container item className={classes.center}>
<Grid item xs={11} sm={11} md={9} lg={10}>
<Typography variant="subtitle1" color="textPrimary" classes={{ subtitle1: classes.bold }}>
Recent
</Typography>
</Grid>
<Grid container spacing={2} item xs={11} sm={11} md={9} lg={10} className={classes.contentContainer}>
{activeOrders.length > 0 ? (
activeOrders.map((item) => (
<Grid item lg={4} md={6} sm={6} xs={11}>
<ActiveOrdersCard key={item._id} {...item} />
</Grid>
))
) : (
<Grid item xs={12}>
<Typography variant="body1" color="textSecondary" align="center">
You have no active orders.
</Typography>
</Grid>
)}
</Grid>
</Grid>
<Grid container item className={classes.center}>
<Grid item xs={11} sm={11} md={9} lg={10}>
<Typography variant="subtitle1" color="textPrimary" classes={{ subtitle1: classes.bold }}>
Old Orders
</Typography>
</Grid>
<Grid container spacing={2} item xs={11} sm={11} md={9} lg={10} className={classes.contentContainer}>
{pastOrders.length > 0 ? (
pastOrders.map((item) => (
<Grid item lg={4} md={6} sm={6} xs={11}>
<PastOrdersCard key={item.id} {...item} />
</Grid>
))
) : (
<Grid item xs={12}>
<Typography variant="body1" color="textSecondary" align="center">
You have no past orders.
</Typography>
</Grid>
)}
</Grid>
</Grid>
<Footer />
</>
);
}
return (
<Grid container>
<Grid container item>
<SearchContainer />
</Grid>
{renderView}
</Grid>
);
}
export default React.memo(MyOrders);

3
CustomerWebApp/src/screens/MyOrders/index.js Normal file
View File

@ -0,0 +1,3 @@
import MyOrders from "./MyOrders";
export { MyOrders };

Some files were not shown because too many files have changed in this diff Show More