added customer Web App in Progress
This commit is contained in:
sharan
parent
49c7b36a7b
commit
f5110f2aef
|
|
@ -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*
|
||||
|
|
@ -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)
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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();
|
||||
});
|
||||
|
|
@ -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);
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
|
|
@ -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);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import AlertSnack from "./AlertSnack";
|
||||
|
||||
export { AlertSnack };
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import MainHeader from "./MainHeader/MainHeader";
|
||||
|
||||
export { MainHeader };
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import SearchContainer from "./SearchContainer/SearchContainer";
|
||||
|
||||
export { SearchContainer };
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import AddressDetailModal from "./AddressDetailModal/AddressDetailModal";
|
||||
|
||||
export { AddressDetailModal };
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import DetailCard from "./DetailCard";
|
||||
import ItemContainer from "./ItemsContainer";
|
||||
export {DetailCard, ItemContainer}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import ActiveOrdersCard from "./ActiveOrdersCard/ActiveOrdersCard";
|
||||
import PastOrdersCard from "./PastOrdersCard/PastOrdersCard";
|
||||
export {ActiveOrdersCard, PastOrdersCard}
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -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);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import GetStartedWrapper from "./GetStartedWrapper";
|
||||
|
||||
export { GetStartedWrapper };
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 };
|
||||
|
|
@ -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);
|
||||
|
|
@ -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
|
||||
|
|
@ -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 };
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import AlertProvider, { AlertContext } from "./Alert";
|
||||
import UserProvider, { UserContext } from "./User";
|
||||
import {ConfigurationProvider} from "./Configuration";
|
||||
|
||||
export { AlertProvider, AlertContext, UserProvider, UserContext, ConfigurationProvider };
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import useRegistration from "./useRegistration";
|
||||
|
||||
export { useRegistration };
|
||||
|
|
@ -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 };
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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,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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Address from "./Address";
|
||||
|
||||
export { Address };
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import Customize from "./Cutomize";
|
||||
export {Customize}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Help from "./Help";
|
||||
|
||||
export { Help };
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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
Loading…
Reference in New Issue