├── .gitignore ├── README.md ├── components_list ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── Components ├── CartPage.js ├── CartPage │ ├── Coupon.js │ └── ProductCard.js ├── Checkout.js ├── Checkout │ ├── AddressAccordion.js │ ├── AddressCard.js │ ├── AddressForm.js │ ├── AddressPage.js │ ├── PaymentDetails.js │ ├── PaymentForm.js │ └── ReviewOrder.js ├── HeaderBar.js ├── HeaderBar │ ├── HeaderBarDropdown.js │ ├── Login.js │ └── SignUp.js ├── HomePage.js └── HomePage │ ├── ChooseCategory.js │ ├── HomePageContainer.js │ ├── LeftPane.js │ ├── Map.js │ ├── ProductsTab.js │ └── SearchBar.js ├── assets └── HomePage │ ├── bg2.png │ ├── dairy.jpg │ ├── dals.jpg │ ├── flour.jpg │ ├── levis.jpg │ ├── maggi.png │ ├── marker.png │ ├── product1.png │ └── product2.png ├── consts ├── constants.js ├── states.js └── theme.js ├── index.css ├── index.js ├── logo.svg ├── registerServiceWorker.js ├── reportWebVitals.js ├── setupTests.js ├── store ├── actions │ ├── actionTypes.js │ └── auth.js ├── reducers │ └── auth.js └── utility.js ├── styles └── js │ ├── CartPage │ └── CartPageStyle.js │ ├── Checkout │ ├── AddressPageStyle.js │ ├── CheckoutStyle.js │ └── PaymentDetailsStyle.js │ └── HomePage │ ├── HeaderBarStyle.js │ ├── HomePageContainerStyle.js │ ├── HomePageStyle.js │ ├── LeftPaneStyle.js │ └── customDropdownStyle.js └── utils.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | 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. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | 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) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | 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) 55 | 56 | ### Making a Progressive Web App 57 | 58 | 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) 59 | 60 | ### Advanced Configuration 61 | 62 | 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) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | 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) 71 | -------------------------------------------------------------------------------- /components_list: -------------------------------------------------------------------------------- 1 | (Material UI https://codeload.github.com/creativetimofficial/material-kit-react/zip/master) 2 | 1. Home Page(component) 3 | 1.1. Header Bar(component) 4 | 1.1. Cart Icon 5 | 1.2. My account link 6 | 1.3. Logo 7 | 1.4. Background rectangle 8 | 1.5. Header Bar Dropdown(Component) 9 | 1.5.1 Buttons for logour profile/ Login Register 10 | 11 | 1.2. Search Bar(Component) 12 | 2.1 Explore shop icon 13 | 2.2 2 separators for icons( | ) 14 | 2.3 Explore Products icon 15 | 2.4 Search icon 16 | 2.5 Search textbox 17 | 2.6. Search Dropdown(Component) 18 | 2.6.1 Shop names with location list and a separator (-) between location and shop name 19 | 2.6.2 Shop and location icon 20 | 2.6.3 Dropdown box 21 | 22 | 1.3. Map(Component) 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.11.3", 7 | "@material-ui/icons": "^4.11.2", 8 | "@material-ui/lab": "^4.0.0-alpha.57", 9 | "@testing-library/jest-dom": "^5.11.10", 10 | "@testing-library/react": "^11.2.6", 11 | "@testing-library/user-event": "^12.8.3", 12 | "axios": "^0.21.1", 13 | "classnames": "^2.3.1", 14 | "history": "^5.0.0", 15 | "mapbox": "^1.0.0-beta10", 16 | "mapbox-gl": "^2.2.0", 17 | "material-ui": "^0.20.2", 18 | "prop-types": "^15.7.2", 19 | "react": "^17.0.2", 20 | "react-dom": "^17.0.2", 21 | "react-multi-carousel": "^2.6.2", 22 | "react-redux": "^7.2.4", 23 | "react-router-dom": "^5.2.0", 24 | "react-scripts": "4.0.3", 25 | "redux": "^4.1.0", 26 | "redux-thunk": "^2.3.0", 27 | "web-vitals": "^1.1.1" 28 | }, 29 | "scripts": { 30 | "start": "react-scripts start", 31 | "build": "react-scripts build", 32 | "test": "react-scripts test", 33 | "eject": "react-scripts eject" 34 | }, 35 | "eslintConfig": { 36 | "extends": [ 37 | "react-app", 38 | "react-app/jest" 39 | ] 40 | }, 41 | "browserslist": { 42 | "production": [ 43 | ">0.2%", 44 | "not dead", 45 | "not op_mini all" 46 | ], 47 | "development": [ 48 | "last 1 chrome version", 49 | "last 1 firefox version", 50 | "last 1 safari version" 51 | ] 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 31 | 32 | 37 | 38 | 47 | React App 48 | 49 | 50 | 51 |
52 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 3 | import { Redirect } from "react-router-dom"; 4 | import HomePage from "./components/HomePage.js"; 5 | import Checkout from "./components/Checkout"; 6 | import CartPage from "./components/CartPage"; 7 | import { connect } from "react-redux"; 8 | import * as actions from "./store/actions/auth"; 9 | 10 | function App(props) { 11 | const { onTryAutoSignup } = props; 12 | useEffect(() => { 13 | onTryAutoSignup(); 14 | }, [onTryAutoSignup]); 15 | 16 | return ( 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | ); 28 | } 29 | 30 | const mapStateToProps = (state) => { 31 | return { 32 | isAuthenticated: state.auth.token !== null, 33 | }; 34 | }; 35 | 36 | const mapDispatchToProps = (dispatch) => { 37 | return { 38 | onTryAutoSignup: () => dispatch(actions.authCheckState()), 39 | }; 40 | }; 41 | 42 | export default connect(mapStateToProps, mapDispatchToProps)(App); 43 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Components/CartPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import HeaderBar from "./HeaderBar.js"; 4 | import ProductCard from "./CartPage/ProductCard.js"; 5 | import Coupon from "./CartPage/Coupon.js"; 6 | import PaymentDetails from "./Checkout/PaymentDetails.js"; 7 | import Typography from "@material-ui/core/Typography"; 8 | import Grid from "@material-ui/core/Grid"; 9 | import { ThemeProvider } from "@material-ui/core/styles"; 10 | 11 | import styles from "../styles/js/CartPage/CartPageStyle.js"; 12 | 13 | import theme from "../consts/theme"; 14 | const useStyles = makeStyles(styles); 15 | 16 | function CartPage() { 17 | const classes = useStyles(); 18 | return ( 19 | 20 | 21 |
22 | 23 | 24 | 29 | Shopping Basket (4) 30 | 31 |
32 | 33 |
34 | 35 | 36 |
37 | 38 |
39 | 40 |
41 |
42 | 43 | 44 |
45 | 46 | ); 47 | } 48 | 49 | export default CartPage; 50 | -------------------------------------------------------------------------------- /src/Components/CartPage/Coupon.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // @material-ui/core components 4 | 5 | import { makeStyles } from "@material-ui/core/styles"; 6 | import Paper from "@material-ui/core/Paper"; 7 | import Typography from "@material-ui/core/Typography"; 8 | import Checkbox from "@material-ui/core/Checkbox"; 9 | import Grid from "@material-ui/core/Grid"; 10 | import Divider from "@material-ui/core/Divider"; 11 | import { ThemeProvider } from "@material-ui/core/styles"; 12 | import theme from "../../consts/theme"; 13 | const useStyles = makeStyles((theme) => ({ 14 | paper: { 15 | width: "auto", 16 | padding: theme.spacing(1), 17 | marginTop: theme.spacing(2), 18 | [theme.breakpoints.up(1125 + theme.spacing(3) * 2)]: { 19 | width: "19vw", 20 | padding: theme.spacing(3), 21 | }, 22 | }, 23 | divider: { 24 | marginTop: "2vh", 25 | marginBottom: "2vh", 26 | }, 27 | })); 28 | 29 | export default function SimplePaper() { 30 | const classes = useStyles(); 31 | 32 | return ( 33 | 34 |
35 | 36 | 37 | 38 | APPLY COUPONS 39 | 40 | 41 | 42 | 43 | 44 | 45 | 50 | 51 | 52 | 53 |
54 | 55 | WOW100 56 | 57 | 58 | Flat Rs. 100 OFF on your bill. 59 | 60 | 61 | Just add fashion products above Rs. 399 62 | 63 |
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 76 | 77 | 78 | 79 |
80 | WOW200 81 | 82 | Flat Rs. 200 OFF on your bill. 83 | 84 | 85 | Just add fashion products above Rs. 599 86 | 87 |
88 | 89 | 90 | 91 | 92 |
93 | 94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /src/Components/CartPage/ProductCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Paper from "@material-ui/core/Paper"; 4 | import Grid from "@material-ui/core/Grid"; 5 | import Typography from "@material-ui/core/Typography"; 6 | import ButtonBase from "@material-ui/core/ButtonBase"; 7 | import product1 from "../../assets/HomePage/product1.png"; 8 | import product2 from "../../assets/HomePage/product2.png"; 9 | import Checkbox from "@material-ui/core/Checkbox"; 10 | import ButtonGroup from "@material-ui/core/ButtonGroup"; 11 | import AddCircleIcon from "@material-ui/icons/AddCircle"; 12 | import RemoveCircleIcon from "@material-ui/icons/RemoveCircle"; 13 | import styles from "../../styles/js/CartPage/CartPageStyle.js"; 14 | import classNames from "classnames"; 15 | import Divider from "@material-ui/core/Divider"; 16 | import { ThemeProvider } from "@material-ui/core/styles"; 17 | import theme from "../../consts/theme"; 18 | const useStyles = makeStyles(styles); 19 | 20 | export default function SimplePaper() { 21 | const [count, setCount] = React.useState(0); 22 | 23 | const add = () => { 24 | setCount(count + 1); 25 | }; 26 | const subtract = () => { 27 | if (count <= 0) { 28 | setCount(0); 29 | } else setCount(count - 1); 30 | }; 31 | 32 | const classes = useStyles(); 33 | 34 | return ( 35 | 36 |
37 | 38 | 39 | 40 | 45 | 46 | complex 47 | 48 | 49 | 50 | 51 | 52 | 57 | Loose HMT Kolam Rice 1 kg 58 | 59 | 60 | Sold By: Agarwal Shop 61 | 62 | 67 | In stock 68 | 69 |
70 | 75 | ₹200.00 76 | 77 | 82 | ₹250.00 83 | 84 | 90 | You save ₹50.00 91 | 92 |
93 | 94 | 95 | 99 | Remove | Save For Later | See More Like This 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 116 | 117 |
124 | {count} 125 |
126 | 127 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 143 | 144 | complex 145 | 146 | 147 | 148 | 149 | 150 | 155 | Loose HMT Kolam Rice 1 kg 156 | 157 | 158 | Sold By: Agarwal Shop 159 | 160 | 165 | In stock 166 | 167 |
168 | 173 | ₹200.00 174 | 175 | 180 | ₹250.00 181 | 182 | 188 | You save ₹50.00 189 | 190 |
191 | 192 | 193 | 197 | Remove | Save For Later | See More Like This 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 214 | 215 |
222 | {count} 223 |
224 | 225 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 241 | 242 | complex 243 | 244 | 245 | 246 | 247 | 248 | 253 | Nestle Milkmaid Sweetened Condensed Milk 400 g (Tin) 254 | 255 | 256 | Sold By: Gupta Shop 257 | 258 | 263 | In stock 264 | 265 |
266 | 271 | ₹150.00 272 | 273 | 278 | ₹200.00 279 | 280 | 286 | You save ₹50.00 287 | 288 |
289 | 290 | 291 | 295 | Remove | Save For Later | See More Like This 296 | 297 | 298 | 299 | {/* TODO to be inspected why empty typography tags */} 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 313 | 314 |
321 | {count} 322 |
323 | 324 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 340 | 341 | complex 342 | 343 | 344 | 345 | 346 | 347 | 352 | Nestle Milkmaid Sweetened Condensed Milk 400 g (Tin) 353 | 354 | 355 | Sold By: Gupta Shop 356 | 357 | 362 | In stock 363 | 364 |
365 | 370 | ₹150.00 371 | 372 | 377 | ₹200.00 378 | 379 | 385 | You save ₹50.00 386 | 387 |
388 | 389 | 390 | 394 | Remove | Save For Later | See More Like This 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 411 | 412 |
419 | {count} 420 |
421 | 422 | 426 | 427 | 428 | 429 | 430 | 431 | 439 | Subtotal : ₹700.00 440 | 441 | 442 |
443 | 444 | ); 445 | } 446 | -------------------------------------------------------------------------------- /src/Components/Checkout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Redirect } from "react-router-dom"; 3 | // Material UI imports 4 | import { makeStyles } from "@material-ui/core/styles"; 5 | import Stepper from "@material-ui/core/Stepper"; 6 | import Step from "@material-ui/core/Step"; 7 | import StepLabel from "@material-ui/core/StepLabel"; 8 | import Button from "@material-ui/core/Button"; 9 | import Typography from "@material-ui/core/Typography"; 10 | import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; 11 | import Grid from "@material-ui/core/Grid"; 12 | import Hidden from "@material-ui/core/Hidden"; 13 | // Component imports 14 | import HeaderBar from "./HeaderBar"; 15 | import PaymentForm from "./Checkout/PaymentForm"; 16 | import PaymentDetails from "./Checkout/PaymentDetails"; 17 | import ReviewOrder from "./Checkout/ReviewOrder"; 18 | import styles from "../styles/js/Checkout/CheckoutStyle.js"; 19 | import AddressPage from "./Checkout/AddressPage"; 20 | import theme from "../consts/theme"; 21 | 22 | const useStyles = makeStyles(styles); 23 | const steps = ["Shipping address", "Payment details", "Review your order"]; 24 | 25 | function getStepContent(step, handleNext) { 26 | switch (step) { 27 | case 0: 28 | return ; 29 | case 1: 30 | return ; 31 | case 2: 32 | return ; 33 | default: 34 | throw new Error("Unknown step"); 35 | } 36 | } 37 | 38 | function Checkout() { 39 | const classes = useStyles(); 40 | const [activeStep, setActiveStep] = React.useState(0); 41 | const token = localStorage.getItem("token"); 42 | const handleNext = () => { 43 | setActiveStep(activeStep + 1); 44 | }; 45 | const handleBack = () => { 46 | setActiveStep(activeStep - 1); 47 | }; 48 | 49 | if (!token) { 50 | return ; 51 | } 52 | return ( 53 | 54 | 55 | 56 | 57 | 58 |
59 |
60 | 61 | Checkout 62 | 63 | 64 | {steps.map((label) => ( 65 | 66 | {label} 67 | 68 | ))} 69 | 70 | 71 | {activeStep === steps.length ? ( 72 | 73 | 74 | Thank you for your order. 75 | 76 | 77 | Your order number is #2001539. We have emailed your 78 | order confirmation, and will send you an update when 79 | your order has shipped. 80 | 81 | 82 | ) : ( 83 | 84 | {getStepContent(activeStep, handleNext)} 85 |
86 | {activeStep !== 0 && ( 87 | 93 | )} 94 | {activeStep !== 0 ? ( 95 | 105 | ) : ( 106 | "" 107 | )} 108 |
109 | 110 | )} 111 | 112 |
113 |
114 | 115 | 116 | 117 |
118 | 119 |
120 | 121 | 122 | 123 | 124 | 125 | ); 126 | } 127 | export default Checkout; 128 | -------------------------------------------------------------------------------- /src/Components/Checkout/AddressAccordion.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // Material UI imports 4 | import Accordion from "@material-ui/core/Accordion"; 5 | import AccordionSummary from "@material-ui/core/AccordionSummary"; 6 | import AccordionDetails from "@material-ui/core/AccordionDetails"; 7 | import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; 8 | import Typography from "@material-ui/core/Typography"; 9 | import Button from "@material-ui/core/Button"; 10 | import { makeStyles } from "@material-ui/core/styles"; 11 | import Dialog from "@material-ui/core/Dialog"; 12 | import DialogActions from "@material-ui/core/DialogActions"; 13 | import DialogContent from "@material-ui/core/DialogContent"; 14 | import DialogContentText from "@material-ui/core/DialogContentText"; 15 | import DialogTitle from "@material-ui/core/DialogTitle"; 16 | import { ThemeProvider } from "@material-ui/core/styles"; 17 | import theme from "../../consts/theme"; 18 | 19 | const useStyles = makeStyles((theme) => ({ 20 | heading: { 21 | fontSize: theme.typography.pxToRem(13), 22 | flexBasis: "33.33%", 23 | flexShrink: 0, 24 | fontWeight: "700", 25 | }, 26 | secondaryHeading: { 27 | fontSize: theme.typography.pxToRem(12), 28 | color: theme.palette.text.secondary, 29 | }, 30 | })); 31 | 32 | function AddressAccordion(props) { 33 | const classes = useStyles(); 34 | const [openDeleteConfirm, setOpenDeleteConfirm] = React.useState(false); 35 | const { detail } = props; 36 | const handleClickOpen = () => { 37 | setOpenDeleteConfirm(true); 38 | }; 39 | 40 | const handleDeleteClose = (from) => { 41 | if (from === "no") { 42 | setOpenDeleteConfirm(false); 43 | } else if (from === "yes") { 44 | setOpenDeleteConfirm(false); 45 | props.handleDelete(props.detail); 46 | } 47 | }; 48 | 49 | return ( 50 | 51 | 52 | }> 53 | {detail.name} 54 | 55 | 56 | {" "} 57 | {detail.apartment_address} 58 | 59 | 60 | 61 | 62 | 74 | 75 | 76 | 90 | 101 | 102 | 103 | 104 | 105 | {"Do you want to delete the address permanently?"} 106 | 107 | 108 | 109 | The address would be deleted permanently. 110 | 111 | 112 | 113 | 120 | 127 | 128 | 129 | 130 | ); 131 | } 132 | 133 | export default AddressAccordion; 134 | -------------------------------------------------------------------------------- /src/Components/Checkout/AddressCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Card from "@material-ui/core/Card"; 4 | import CardActions from "@material-ui/core/CardActions"; 5 | import CardContent from "@material-ui/core/CardContent"; 6 | import CardHeader from "@material-ui/core/CardHeader"; 7 | import Button from "@material-ui/core/Button"; 8 | import Typography from "@material-ui/core/Typography"; 9 | import PropTypes from "prop-types"; 10 | import Divider from "@material-ui/core/Divider"; 11 | import Dialog from "@material-ui/core/Dialog"; 12 | import DialogActions from "@material-ui/core/DialogActions"; 13 | import DialogContent from "@material-ui/core/DialogContent"; 14 | import DialogContentText from "@material-ui/core/DialogContentText"; 15 | import DialogTitle from "@material-ui/core/DialogTitle"; 16 | import { ThemeProvider } from "@material-ui/core/styles"; 17 | import theme from "../../consts/theme"; 18 | const useStyles = makeStyles({ 19 | root: { 20 | maxWidth: 345, 21 | }, 22 | containedPrimary: { 23 | color: "#00A3FF", 24 | }, 25 | onHover: { 26 | "&:hover": { 27 | border: "2px solid #00A3FF", 28 | }, 29 | }, 30 | }); 31 | 32 | export default function AddressCard(props) { 33 | const classes = useStyles(); 34 | const [openDeleteConfirm, setOpenDeleteConfirm] = React.useState(false); 35 | const { state, address_type } = props; 36 | 37 | const handleClickOpen = () => { 38 | setOpenDeleteConfirm(true); 39 | }; 40 | 41 | const handleDeleteClose = (from) => { 42 | if (from === "no") { 43 | setOpenDeleteConfirm(false); 44 | } else if (from === "yes") { 45 | props.handleDelete(props.detail); 46 | setOpenDeleteConfirm(false); 47 | } 48 | }; 49 | 50 | return ( 51 | 52 | 53 | 54 | 55 | 56 | {props.detail.apartment_address} {props.detail.street_address} 57 | {","} 58 |
59 | {props.detail.area_pincode} 60 |
61 | {state} 62 | {address_type} 63 | 64 | 65 | 66 | 78 | 79 | 80 | 91 | 92 | 103 | 104 | 105 | 106 | 107 | {"Do you want to delete the address permanently?"} 108 | 109 | 110 | 111 | The address would be deleted permanently. 112 | 113 | 114 | 115 | 122 | 129 | 130 | 131 | 132 | ); 133 | } 134 | 135 | AddressCard.propTypes = { 136 | default_shipping: PropTypes.bool, 137 | detail: PropTypes.object, 138 | handleNext: PropTypes.func, 139 | handleClickOpen: PropTypes.func, 140 | default_billing: PropTypes.bool, 141 | }; 142 | -------------------------------------------------------------------------------- /src/Components/Checkout/AddressForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Grid from "@material-ui/core/Grid"; 3 | import Typography from "@material-ui/core/Typography"; 4 | import TextField from "@material-ui/core/TextField"; 5 | import FormControlLabel from "@material-ui/core/FormControlLabel"; 6 | import Checkbox from "@material-ui/core/Checkbox"; 7 | import Button from "@material-ui/core/Button"; 8 | import axios from "axios"; 9 | import { addressURL } from "../../consts/constants"; 10 | import { states } from "../../consts/states"; 11 | import { connect } from "react-redux"; 12 | import MenuItem from "@material-ui/core/MenuItem"; 13 | import Snackbar from "@material-ui/core/Snackbar"; 14 | import MuiAlert from "@material-ui/lab/Alert"; 15 | import { makeStyles } from "@material-ui/core/styles"; 16 | import { ThemeProvider } from "@material-ui/core/styles"; 17 | import theme from "../../consts/theme"; 18 | 19 | function Alert(props) { 20 | return ; 21 | } 22 | 23 | function AddressForm(props) { 24 | const useStyles = makeStyles((theme) => ({ 25 | buttons: { 26 | display: "flex", 27 | justifyContent: "flex-end", 28 | }, 29 | })); 30 | const { token } = props; 31 | const [addressData, setAddressData] = useState({ 32 | name: "", 33 | contact: "", 34 | contact2: "", 35 | apartment_address: "", 36 | street_address: "", 37 | city: "", 38 | state: "", 39 | area_pincode: "", 40 | }); 41 | const onChangeHandler = (e) => { 42 | setAddressData({ 43 | ...addressData, 44 | [e.target.name]: e.target.value, 45 | }); 46 | }; 47 | const [openSuccess, setOpenSuccess] = React.useState(false); 48 | const [openerror, setOpenerror] = React.useState(false); 49 | 50 | const handleClose = (event, reason) => { 51 | if (reason === "clickaway") { 52 | return; 53 | } 54 | 55 | setOpenSuccess(false); 56 | setOpenerror(false); 57 | }; 58 | const classes = useStyles(); 59 | 60 | const handleSubmit = (e) => { 61 | e.preventDefault(); 62 | axios 63 | .post( 64 | addressURL, 65 | { 66 | name: addressData.name, 67 | contact: addressData.contact, 68 | contact2: addressData.contact2, 69 | apartment_address: addressData.apartment_address, 70 | street_address: addressData.street_address, 71 | city: addressData.city, 72 | state: addressData.state, 73 | area_pincode: addressData.area_pincode, 74 | address_type: "W", 75 | default_shipping: false, 76 | default_billing: false, 77 | }, 78 | { 79 | headers: { 80 | Authorization: `Bearer ${token}`, 81 | }, 82 | } 83 | ) 84 | .then((res) => { 85 | if (res.status === 200) { 86 | props.addToDetails(res.data); 87 | setAddressData({ 88 | name: "", 89 | contact: "", 90 | contact2: "", 91 | apartment_address: "", 92 | street_address: "", 93 | city: "", 94 | state: "", 95 | area_pincode: "", 96 | }); 97 | setOpenSuccess(true); 98 | } 99 | }) 100 | 101 | .catch((err) => { 102 | setOpenerror(true); 103 | }); 104 | }; 105 | React.useEffect(() => { 106 | if (props.updateDetails != null) { 107 | setAddressData(props.updateDetails); 108 | } 109 | if (props.turnEmpty) { 110 | setAddressData({ 111 | name: "", 112 | contact: "", 113 | contact2: "", 114 | apartment_address: "", 115 | street_address: "", 116 | city: "", 117 | state: "", 118 | area_pincode: "", 119 | }); 120 | props.setTurnEmpty(false); 121 | } 122 | }, [props.updateDetails, props.turnEmpty]); 123 | return ( 124 | 125 | 126 | {props.updateDetails == null 127 | ? "Add a new Address" 128 | : "Update the Address"} 129 | 130 |
131 | 132 | 133 | 143 | 144 | 145 | 158 | 159 | 160 | 173 | 174 | 175 | 184 | 185 | 186 | 196 | 197 | 198 | 208 | 209 | 210 | 219 | {states.map((option, key) => ( 220 | 226 | {option.name} 227 | 228 | ))} 229 | 230 | 231 | 232 | 233 | 246 | 247 | 248 | 251 | } 252 | label="Use this address for payment details" 253 | /> 254 | 255 | 256 | {props.updateDetails == null ? ( 257 | 268 | ) : ( 269 | 279 | )} 280 | 281 | 282 |
283 | 288 | 289 | Address Added Successfully! 290 | 291 | 292 | 293 | 294 | Unable to process your request! 295 | 296 | 297 | 298 | ); 299 | } 300 | const mapStateToProps = (state) => { 301 | return { 302 | token: state.auth.token, 303 | }; 304 | }; 305 | export default connect(mapStateToProps)(AddressForm); 306 | -------------------------------------------------------------------------------- /src/Components/Checkout/AddressPage.js: -------------------------------------------------------------------------------- 1 | // React Library Imports 2 | import React, { useEffect, useState } from "react"; 3 | import PropTypes from "prop-types"; 4 | import axios from "axios"; 5 | import { connect } from "react-redux"; 6 | 7 | // Material ui imports 8 | import Grid from "@material-ui/core/Grid"; 9 | import { makeStyles } from "@material-ui/core/styles"; 10 | import Button from "@material-ui/core/Button"; 11 | import Box from "@material-ui/core/Box"; 12 | import Skeleton from "@material-ui/lab/Skeleton"; 13 | import Typography from "@material-ui/core/Typography"; 14 | import Hidden from "@material-ui/core/Hidden"; 15 | import Snackbar from "@material-ui/core/Snackbar"; 16 | import MuiAlert from "@material-ui/lab/Alert"; 17 | import { ThemeProvider } from "@material-ui/core/styles"; 18 | import theme from "../../consts/theme"; 19 | // component imports 20 | import AddressCard from "./AddressCard"; 21 | import AddressForm from "./AddressForm"; 22 | import { addressURL, addressSlugURL } from "../../consts/constants"; 23 | import AddressAccordion from "./AddressAccordion"; 24 | import styles from "../../styles/js/Checkout/AddressPageStyle"; 25 | 26 | function Alert(props) { 27 | return ; 28 | } 29 | const useStyles = makeStyles(styles); 30 | 31 | function AddressPage(props) { 32 | const classes = useStyles(); 33 | 34 | const [openSuccess, setOpenSuccess] = useState(false); 35 | const [openerror, setOpenerror] = useState(false); 36 | 37 | const [openEditSuccess, setEditSuccess] = useState(false); 38 | const [openEditerror, setOpenEditerror] = useState(false); 39 | const [details, setdetails] = useState([]); 40 | const [turnEmpty, setTurnEmpty] = useState(false); 41 | const [updateDetails, setUpdateDetails] = useState(null); 42 | const [addressLoading, setAddressloading] = useState(true); 43 | 44 | const skeletons = [1, 2, 3]; 45 | const { token } = props; 46 | const formRef = React.useRef(null); 47 | 48 | const handleForm = () => { 49 | formRef.current.scrollIntoView({ 50 | behavior: "smooth", 51 | }); 52 | if (updateDetails !== null) { 53 | setUpdateDetails(null); 54 | setTurnEmpty(true); 55 | } 56 | }; 57 | 58 | const handleSnackClose = (event, reason) => { 59 | if (reason === "clickaway") { 60 | return; 61 | } 62 | setOpenSuccess(false); 63 | setOpenerror(false); 64 | setEditSuccess(false); 65 | setOpenEditerror(false); 66 | }; 67 | 68 | const handleDelete = (detail) => { 69 | axios 70 | .delete(addressSlugURL(detail.slug), { 71 | headers: { 72 | Authorization: `Bearer ${token}`, 73 | }, 74 | }) 75 | .then((res) => { 76 | if (res.status === 200) { 77 | const newDetails = details.filter((item) => item !== detail); 78 | setdetails(newDetails); 79 | setOpenSuccess(true); 80 | } 81 | }) 82 | .catch((err) => { 83 | console.log(err.response); 84 | setOpenerror(true); 85 | //TODO Error 86 | }); 87 | }; 88 | 89 | const addToDetails = (detail) => { 90 | const newDetails = details.concat(detail); 91 | setdetails(newDetails); 92 | }; 93 | const handleEdit = (detail) => { 94 | // axios.post("") 95 | // const newDetails = details.filter((item) => item!==detail); 96 | // setdetails(newDetails); 97 | // setOpenSuccess(true); 98 | 99 | // .then((res)=>{ 100 | // alert(detail) 101 | // setEditSuccess(true); 102 | // }) 103 | // .catch((err) => { 104 | // console.log(err.response); 105 | // setEditerror(true); 106 | // }); 107 | setUpdateDetails(detail); 108 | // console.log(updateDetails) 109 | }; 110 | 111 | const getAddresses = () => { 112 | setAddressloading(true); 113 | axios 114 | .get(addressURL, { 115 | headers: { 116 | Authorization: `Bearer ${token}`, 117 | }, 118 | }) 119 | .then((res) => { 120 | setAddressloading(false); 121 | setdetails(res.data); 122 | }) 123 | .catch((err) => { 124 | console.log(err.response); 125 | setAddressloading(false); 126 | //TODO Error 127 | }); 128 | }; 129 | 130 | useEffect(() => { 131 | if (token) getAddresses(); 132 | }, [token]); 133 | 134 | return ( 135 | 136 | 137 | 138 | 139 | Shipping Address 140 | 141 | 142 | 143 |
144 | 155 |
156 | 157 | 158 | 159 |
160 | {!addressLoading ? ( 161 | details.map((detail, key) => ( 162 | 170 | )) 171 | ) : ( 172 |
173 | {skeletons.map((index) => ( 174 | 181 | 182 | 183 | 184 | 185 | 186 | ))} 187 |
188 | )} 189 |
190 | 191 | 192 | 193 | {!addressLoading ? ( 194 | details.map((detail, key) => ( 195 | 196 | { 200 | handleForm(); 201 | handleEdit(detail); 202 | }} 203 | handleDelete={handleDelete} 204 | detail={detail} 205 | /> 206 | 207 | )) 208 | ) : ( 209 |
210 | {skeletons.map((index) => ( 211 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | ))} 225 |
226 | )} 227 | 228 | 229 |
230 | 236 |
237 | 238 | 239 | 240 | 245 | 246 | Address Deleted Successfully! 247 | 248 | 249 | Address Edited Successfully! 250 | 251 | 252 | 257 | 258 | Unable to process your request! 259 | 260 | 261 | 262 | ); 263 | } 264 | AddressPage.propTypes = { 265 | handleNext: PropTypes.func, 266 | }; 267 | 268 | const mapStateToProps = (state) => { 269 | return { 270 | token: state.auth.token, 271 | }; 272 | }; 273 | export default connect(mapStateToProps)(AddressPage); 274 | -------------------------------------------------------------------------------- /src/Components/Checkout/PaymentDetails.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Paper from "@material-ui/core/Paper"; 4 | import Typography from "@material-ui/core/Typography"; 5 | import Divider from "@material-ui/core/Divider"; 6 | import List from "@material-ui/core/List"; 7 | import ListItem from "@material-ui/core/ListItem"; 8 | import ListItemText from "@material-ui/core/ListItemText"; 9 | import styles from "../../styles/js/Checkout/PaymentDetailsStyle.js"; 10 | import { ThemeProvider } from "@material-ui/core/styles"; 11 | import theme from "../../consts/theme"; 12 | const products = [ 13 | { name: "Price (2 Items)", price: "$9.99" }, 14 | { name: "Discount", price: "$3.45" }, 15 | { name: "Coupon Discount", price: "$6.51" }, 16 | { name: "Delivery Charges", price: "Free" }, 17 | ]; 18 | 19 | const useStyles = makeStyles(styles); 20 | function PaymentDetails() { 21 | const classes = useStyles(); 22 | return ( 23 | 24 |
25 |
26 | 27 | 28 | Price Details 29 | 30 | 31 | 32 | {products.map((product) => ( 33 | 34 | 38 | {product.price} 39 | 40 | ))} 41 | 42 | 43 | 44 | 45 | $34.06 46 | 47 | 48 | 49 | 50 |
51 |
52 | 53 | ); 54 | } 55 | 56 | export default PaymentDetails; 57 | -------------------------------------------------------------------------------- /src/Components/Checkout/PaymentForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Typography from "@material-ui/core/Typography"; 3 | import Grid from "@material-ui/core/Grid"; 4 | import TextField from "@material-ui/core/TextField"; 5 | import FormControlLabel from "@material-ui/core/FormControlLabel"; 6 | import Checkbox from "@material-ui/core/Checkbox"; 7 | import { ThemeProvider } from "@material-ui/core/styles"; 8 | import theme from "../../consts/theme"; 9 | export default function PaymentForm() { 10 | return ( 11 | 12 | 13 | Payment method 14 | 15 | 16 | 17 | 24 | 25 | 26 | 33 | 34 | 35 | 42 | 43 | 44 | 52 | 53 | 54 | } 56 | label="Remember credit card details for next time" 57 | /> 58 | 59 | 60 | 61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /src/Components/Checkout/ReviewOrder.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import Typography from "@material-ui/core/Typography"; 4 | import Grid from "@material-ui/core/Grid"; 5 | import Hidden from "@material-ui/core/Hidden"; 6 | import Paper from "@material-ui/core/Paper"; 7 | import PaymentDetails from "./PaymentDetails"; 8 | import ProductCard from "../CartPage/ProductCard"; 9 | import { ThemeProvider } from "@material-ui/core/styles"; 10 | import theme from "../../consts/theme"; 11 | // const products = [ 12 | // { name: "Product 1", desc: "A nice thing", price: "$9.99" }, 13 | // { name: "Product 2", desc: "Another thing", price: "$3.45" }, 14 | // { name: "Product 3", desc: "Something else", price: "$6.51" }, 15 | // { name: "Product 4", desc: "Best thing of all", price: "$14.11" }, 16 | // { name: "Shipping", desc: "", price: "Free" }, 17 | // ]; 18 | const payments = [ 19 | { name: "Card type", detail: "Visa" }, 20 | { name: "Card holder", detail: "Mr John Smith" }, 21 | { name: "Card number", detail: "xxxx-xxxx-xxxx-1234" }, 22 | { name: "Expiry date", detail: "04/2024" }, 23 | ]; 24 | 25 | const useStyles = makeStyles((theme) => ({ 26 | listItem: { 27 | padding: theme.spacing(1, 0), 28 | }, 29 | total: { 30 | fontWeight: 700, 31 | }, 32 | title: { 33 | marginTop: theme.spacing(2), 34 | }, 35 | paper: { 36 | width: "auto", 37 | marginBottom: theme.spacing(2), 38 | padding: theme.spacing(1), 39 | }, 40 | heading: { 41 | fontSize: "3.5vw", 42 | fontWeight: "600", 43 | paddingBottom: "5px", 44 | }, 45 | secondaryHeading1: { 46 | paddingTop: "5px", 47 | }, 48 | secondaryHeading: { 49 | color: theme.palette.text.secondary, 50 | }, 51 | })); 52 | 53 | export default function Review() { 54 | const classes = useStyles(); 55 | 56 | return ( 57 | 58 | 59 | Order summary 60 | 61 | 62 | 63 | 64 | 65 | Shipping Address 66 | 67 | Avanya Wadhwa 68 | 69 | 50 D/B Slice 4 Scheme 78 Vijay Nagar 70 | 71 | Indore , M.P (201013) 72 | +91 987456321 73 | 74 | 75 | 76 | 77 | 78 | Payment details 79 | 80 | 81 | {payments.map((payment) => ( 82 | 83 | 84 | {payment.name} 85 | 86 | 87 | {payment.detail} 88 | 89 | 90 | ))} 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | {/* 100 | {products.map((product) => ( 101 | 102 | 103 | {product.price} 104 | 105 | ))} 106 | 107 | 108 | 109 | $34.06 110 | 111 | 112 | */} 113 | 114 | ); 115 | } 116 | -------------------------------------------------------------------------------- /src/Components/HeaderBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import classNames from "classnames"; 3 | import PropTypes from "prop-types"; 4 | import { makeStyles } from "@material-ui/core/styles"; 5 | import AppBar from "@material-ui/core/AppBar"; 6 | import Toolbar from "@material-ui/core/Toolbar"; 7 | import IconButton from "@material-ui/core/IconButton"; 8 | import Button from "@material-ui/core/Button"; 9 | import Hidden from "@material-ui/core/Hidden"; 10 | import Drawer from "@material-ui/core/Drawer"; 11 | import Menu from "@material-ui/icons/Menu"; 12 | import Badge from "@material-ui/core/Badge"; 13 | import { withStyles } from "@material-ui/core/styles"; 14 | import ShoppingCartIcon from "@material-ui/icons/ShoppingCart"; 15 | import LocalMallIcon from "@material-ui/icons/LocalMall"; 16 | import List from "@material-ui/core/List"; 17 | import HeaderBarDropdown from "./HeaderBar/HeaderBarDropdown"; 18 | import { useHistory } from "react-router-dom"; 19 | import styles from "../styles/js/HomePage/HeaderBarStyle.js"; 20 | import { ThemeProvider } from "@material-ui/core/styles"; 21 | import theme from "../consts/theme"; 22 | const useStyles = makeStyles(styles); 23 | 24 | const StyledBadge = withStyles((theme) => ({ 25 | badge: { 26 | right: -3, 27 | top: 13, 28 | border: `2px solid ${theme.palette.background.paper}`, 29 | padding: "0 4px", 30 | }, 31 | }))(Badge); 32 | function userMenu(view) { 33 | return ( 34 | 35 | 36 | 37 | ); 38 | } 39 | export default function HeaderBar(props) { 40 | let history = useHistory(); 41 | function handleClick() { 42 | history.push("/cart"); 43 | } 44 | function GoToHome() { 45 | history.push("/"); 46 | } 47 | const classes = useStyles(); 48 | const [mobileOpen, setMobileOpen] = React.useState(false); 49 | React.useEffect(() => { 50 | window.addEventListener("scroll", headerColorChange); 51 | return function cleanup() { 52 | window.removeEventListener("scroll", headerColorChange); 53 | }; 54 | }); 55 | const handleDrawerToggle = () => { 56 | setMobileOpen(!mobileOpen); 57 | }; 58 | const headerColorChange = () => { 59 | const windowsScrollTop = window.pageYOffset; 60 | if (windowsScrollTop > 1000) { 61 | document.body 62 | .getElementsByTagName("header")[0] 63 | .classList.remove(classes.sticky); 64 | document.body 65 | .getElementsByTagName("header")[0] 66 | .classList.add(classes.fixed); 67 | } else { 68 | document.body 69 | .getElementsByTagName("header")[0] 70 | .classList.add(classes.sticky); 71 | document.body 72 | .getElementsByTagName("header")[0] 73 | .classList.remove(classes.fixed); 74 | } 75 | }; 76 | const { fixed, absolute, sticky, bottom } = props; 77 | const appBarClasses = classNames({ 78 | [classes.appBar]: true, 79 | [classes.absolute]: absolute, 80 | [classes.fixed]: fixed, 81 | [classes.sticky]: sticky, 82 | [classes.bottom]: bottom, 83 | }); 84 | const brandComponent = ( 85 | 88 | ); 89 | return ( 90 | 91 | 92 | 93 | 94 | 95 | 96 |
{brandComponent}
97 | 98 | {userMenu("smDown")} 99 | 100 | 101 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 126 |
{userMenu("mdUp")}
127 | 128 | 129 | 130 | 131 | ); 132 | } 133 | 134 | HeaderBar.propTypes = { 135 | color: PropTypes.oneOf([ 136 | "primary", 137 | "info", 138 | "success", 139 | "warning", 140 | "danger", 141 | "transparent", 142 | "white", 143 | "rose", 144 | "dark", 145 | ]), 146 | fixed: PropTypes.bool, 147 | absolute: PropTypes.bool, 148 | sticky: PropTypes.bool, 149 | bottom: PropTypes.bool, 150 | // this will cause the sidebar to change the color from 151 | // props.color (see above) to changeColorOnScroll.color 152 | // when the window.pageYOffset is heigher or equal to 153 | // changeColorOnScroll.height and then when it is smaller than 154 | // changeColorOnScroll.height change it back to 155 | // props.color (see above) 156 | changeColorOnScroll: PropTypes.shape({ 157 | height: PropTypes.number.isRequired, 158 | }), 159 | }; 160 | -------------------------------------------------------------------------------- /src/Components/HeaderBar/HeaderBarDropdown.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | 3 | // nodejs libraries 4 | import classNames from "classnames"; 5 | import axios from "axios"; 6 | import { connect } from "react-redux"; 7 | 8 | // @material-ui components 9 | import Dialog from "@material-ui/core/Dialog"; 10 | import { makeStyles } from "@material-ui/core/styles"; 11 | import MenuItem from "@material-ui/core/MenuItem"; 12 | import MenuList from "@material-ui/core/MenuList"; 13 | import ClickAwayListener from "@material-ui/core/ClickAwayListener"; 14 | import Paper from "@material-ui/core/Paper"; 15 | import Grow from "@material-ui/core/Grow"; 16 | import Divider from "@material-ui/core/Divider"; 17 | import Popper from "@material-ui/core/Popper"; 18 | import Button from "@material-ui/core/Button"; 19 | import { ThemeProvider } from "@material-ui/core/styles"; 20 | import theme from "../../consts/theme"; 21 | // local components 22 | import { userDetailsURL } from "../../consts/constants"; 23 | import SignIn from "./Login"; 24 | import SignUp from "./SignUp"; 25 | import styles from "../../styles/js/HomePage/customDropdownStyle"; 26 | import * as actions from "../../store/actions/auth"; 27 | 28 | const useStyles = makeStyles(styles); 29 | 30 | function HeaderBarDropdown(props) { 31 | const [anchorEl, setAnchorEl] = useState(null); 32 | const handleClick = (event) => { 33 | if (anchorEl && anchorEl.contains(event.target)) { 34 | setAnchorEl(null); 35 | } else { 36 | setAnchorEl(event.currentTarget); 37 | } 38 | }; 39 | const handleClose = (param) => { 40 | setAnchorEl(null); 41 | if (props && props.onClick) { 42 | props.onClick(param); 43 | } 44 | }; 45 | const handleCloseAway = (event) => { 46 | if (anchorEl.contains(event.target)) { 47 | return; 48 | } 49 | setAnchorEl(null); 50 | }; 51 | const classes = useStyles(); 52 | const { 53 | dropup, 54 | caret, 55 | hoverColor, 56 | left, 57 | rtlActive, 58 | noLiPadding, 59 | authenticated, 60 | token, 61 | } = props; 62 | const caretClasses = classNames({ 63 | [classes.caret]: true, 64 | [classes.caretActive]: Boolean(anchorEl), 65 | [classes.caretRTL]: rtlActive, 66 | }); 67 | const dropdownItem = classNames({ 68 | [classes.dropdownItem]: true, 69 | [classes[hoverColor + "Hover"]]: true, 70 | [classes.noLiPadding]: noLiPadding, 71 | [classes.dropdownItemRTL]: rtlActive, 72 | }); 73 | const [openlogin, setOpenlogin] = useState(false); 74 | const [opensignup, setOpensignup] = useState(false); 75 | const handleClickOpenlogin = () => { 76 | handleClose(); 77 | setOpenlogin(true); 78 | }; 79 | 80 | const handleCloseDropdownlogin = () => { 81 | setOpenlogin(false); 82 | }; 83 | const handleClickOpensignup = () => { 84 | handleClose(); 85 | setOpensignup(true); 86 | }; 87 | 88 | const handleCloseDropdownsignup = () => { 89 | setOpensignup(false); 90 | }; 91 | const [username, setUserName] = useState(""); 92 | useEffect(() => { 93 | if (authenticated) { 94 | axios 95 | .get(userDetailsURL, { 96 | headers: { 97 | Authorization: `Bearer ${token}`, 98 | }, 99 | }) 100 | .then((res) => { 101 | setUserName(res.data.fname); 102 | }) 103 | .catch((err) => { 104 | console.log(err.response); 105 | }); 106 | } 107 | }, [authenticated, token]); 108 | return ( 109 | 110 |
111 | {props.view === "smDown" ? ( 112 |
113 |
114 | 123 |
124 | 143 | {() => ( 144 | 153 | 154 | 155 | 156 | {authenticated ? ( 157 |
158 | 163 | {"Profile"} 164 | 165 | handleClose("divider")} 168 | className={classes.dropdownDividerItem} 169 | />{" "} 170 | props.logout()} 173 | className={dropdownItem} 174 | > 175 | {"Logout"} 176 | 177 |
178 | ) : ( 179 |
180 | 185 | {"Login"} 186 | 187 | handleClose("divider")} 190 | className={classes.dropdownDividerItem} 191 | /> 192 | 197 | {"Signup"} 198 | 199 |
200 | )} 201 | 202 | 203 | 204 | 205 | )} 206 | 207 |
208 | ) : ( 209 |
210 | 211 | {authenticated ? ( 212 |
213 | 218 | {"PROFILE"} 219 | 220 | handleClose("divider")} 223 | className={classes.dropdownDividerItem} 224 | />{" "} 225 | props.logout()} 228 | className={dropdownItem} 229 | > 230 | {"LOGOUT"} 231 | 232 |
233 | ) : ( 234 |
235 | 240 | {"LOGIN"} 241 | 242 | handleClose("divider")} 245 | className={classes.dropdownDividerItem} 246 | /> 247 | 252 | {"SIGNUP"} 253 | 254 |
255 | )} 256 | 257 |
258 | )} 259 | 260 | 264 | 265 | 266 | 270 | 271 |
272 | 273 | ); 274 | } 275 | 276 | HeaderBarDropdown.defaultProps = { 277 | caret: true, 278 | hoverColor: "primary", 279 | }; 280 | 281 | const mapStateToProps = (state) => { 282 | return { 283 | authenticated: state.auth.token !== null, 284 | token: state.auth.token, 285 | }; 286 | }; 287 | 288 | const mapDispatchToProps = (dispatch) => { 289 | return { 290 | logout: () => dispatch(actions.logout()), 291 | }; 292 | }; 293 | 294 | export default connect(mapStateToProps, mapDispatchToProps)(HeaderBarDropdown); 295 | -------------------------------------------------------------------------------- /src/Components/HeaderBar/Login.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Avatar from "@material-ui/core/Avatar"; 3 | import Button from "@material-ui/core/Button"; 4 | import CssBaseline from "@material-ui/core/CssBaseline"; 5 | import TextField from "@material-ui/core/TextField"; 6 | import Link from "@material-ui/core/Link"; 7 | import Grid from "@material-ui/core/Grid"; 8 | import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; 9 | import Typography from "@material-ui/core/Typography"; 10 | import { makeStyles } from "@material-ui/core/styles"; 11 | import Container from "@material-ui/core/Container"; 12 | import { Redirect } from "react-router-dom"; 13 | import { connect } from "react-redux"; 14 | import { authLogin, authSetError } from "../../store/actions/auth"; 15 | import IconButton from "@material-ui/core/IconButton"; 16 | import InputAdornment from "@material-ui/core/InputAdornment"; 17 | import Visibility from "@material-ui/icons/Visibility"; 18 | import VisibilityOff from "@material-ui/icons/VisibilityOff"; 19 | import { ThemeProvider } from "@material-ui/core/styles"; 20 | import theme from "../../consts/theme"; 21 | // TODO add loading on all pages 22 | 23 | const useStyles = makeStyles((theme) => ({ 24 | paper: { 25 | marginTop: theme.spacing(3), 26 | marginBottom: theme.spacing(4), 27 | display: "flex", 28 | flexDirection: "column", 29 | alignItems: "center", 30 | }, 31 | avatar: { 32 | margin: theme.spacing(1), 33 | backgroundColor: theme.palette.secondary.main, 34 | }, 35 | form: { 36 | width: "100%", // Fix IE 11 issue. 37 | marginTop: theme.spacing(1), 38 | }, 39 | submit: { 40 | margin: theme.spacing(3, 0, 2), 41 | }, 42 | })); 43 | function Login(props) { 44 | const { error, token, handleCloseDropdownlogin, handleClickOpensignup } = 45 | props; 46 | const [formData, setFormData] = useState({ 47 | emailmobile: "", 48 | password: "", 49 | showPassword: false, 50 | }); 51 | const onChangeHandler = (e) => { 52 | setFormData({ 53 | ...formData, 54 | [e.target.name]: e.target.value, 55 | }); 56 | }; 57 | const handleChange = (prop) => (event) => { 58 | setFormData({ ...formData, [prop]: event.target.value }); 59 | }; 60 | 61 | const handleClickShowPassword = () => { 62 | setFormData({ ...formData, showPassword: !formData.showPassword }); 63 | }; 64 | 65 | const handleMouseDownPassword = (event) => { 66 | event.preventDefault(); 67 | }; 68 | 69 | React.useEffect(() => { 70 | if (token) { 71 | handleCloseDropdownlogin(); 72 | } 73 | if (error) { 74 | if (error.response && error.response.status === 404) { 75 | props.setError(); 76 | handleCloseDropdownlogin(); 77 | handleClickOpensignup(); 78 | } else { 79 | // TODO to print a network error 80 | console.log("Network Error"); 81 | } 82 | } 83 | }, [token, error]); 84 | 85 | const handleSubmit = (e) => { 86 | e.preventDefault(); 87 | const { emailmobile, password } = formData; 88 | props.login(emailmobile, password); 89 | }; 90 | 91 | const classes = useStyles(); 92 | const preventDefault = (event) => event.preventDefault(); 93 | 94 | const handleSignUp = (event) => { 95 | preventDefault(event); 96 | props.handleCloseDropdownlogin(); 97 | props.handleClickOpensignup(); 98 | }; 99 | 100 | if (token) { 101 | return ; 102 | } 103 | return ( 104 | 105 | 106 | 107 |
108 | 112 | 113 | 114 | 115 | Welcome Back 116 | 117 |
118 | 137 | 152 | 158 | {formData.showPassword ? ( 159 | 160 | ) : ( 161 | 162 | )} 163 | 164 | 165 | ), 166 | }} 167 | /> 168 | 177 | 178 | 179 | 180 | Forgot password? 181 | 182 | 183 | 184 | 190 | {"Don't have an account? Sign Up"} 191 | 192 | 193 | 194 | 195 |
196 | 197 | 198 | ); 199 | } 200 | 201 | const mapStateToProps = (state) => { 202 | return { 203 | loading: state.auth.loading, 204 | error: state.auth.error, 205 | token: state.auth.token, 206 | }; 207 | }; 208 | 209 | const mapDispatchToProps = (dispatch) => { 210 | return { 211 | login: (emailmobile, password) => 212 | dispatch(authLogin(emailmobile, password)), 213 | setError: () => dispatch(authSetError()), 214 | }; 215 | }; 216 | 217 | export default connect(mapStateToProps, mapDispatchToProps)(Login); 218 | -------------------------------------------------------------------------------- /src/Components/HeaderBar/SignUp.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Redirect } from "react-router-dom"; 3 | import Avatar from "@material-ui/core/Avatar"; 4 | import Button from "@material-ui/core/Button"; 5 | import CssBaseline from "@material-ui/core/CssBaseline"; 6 | import TextField from "@material-ui/core/TextField"; 7 | import Link from "@material-ui/core/Link"; 8 | import Grid from "@material-ui/core/Grid"; 9 | import LockOutlinedIcon from "@material-ui/icons/LockOutlined"; 10 | import Typography from "@material-ui/core/Typography"; 11 | import { makeStyles } from "@material-ui/core/styles"; 12 | import Container from "@material-ui/core/Container"; 13 | import { authSignup } from "../../store/actions/auth"; 14 | import { connect } from "react-redux"; 15 | import IconButton from "@material-ui/core/IconButton"; 16 | import InputAdornment from "@material-ui/core/InputAdornment"; 17 | import Visibility from "@material-ui/icons/Visibility"; 18 | import VisibilityOff from "@material-ui/icons/VisibilityOff"; 19 | import { ThemeProvider } from "@material-ui/core/styles"; 20 | import theme from "../../consts/theme"; 21 | const useStyles = makeStyles((theme) => ({ 22 | paper: { 23 | marginTop: theme.spacing(3), 24 | marginBottom: theme.spacing(4), 25 | display: "flex", 26 | flexDirection: "column", 27 | alignItems: "center", 28 | }, 29 | avatar: { 30 | margin: theme.spacing(1), 31 | backgroundColor: theme.palette.secondary.main, 32 | }, 33 | form: { 34 | width: "100%", // Fix IE 11 issue. 35 | marginTop: theme.spacing(3), 36 | }, 37 | submit: { 38 | margin: theme.spacing(3, 0, 2), 39 | }, 40 | })); 41 | 42 | function SignUp(props) { 43 | const classes = useStyles(); 44 | const preventDefault = (event) => event.preventDefault(); 45 | const { error, token } = props; 46 | 47 | const [formData, setFormData] = useState({ 48 | email: "", 49 | firstname: "", 50 | lastname: "", 51 | mobileno: "", 52 | password: "", 53 | confirmpassword: "", 54 | confirmed: true, 55 | showPassword: false, 56 | showConfirmPassword: false, 57 | }); 58 | const onChangeHandler = (e) => { 59 | setFormData({ 60 | ...formData, 61 | [e.target.name]: e.target.value, 62 | }); 63 | }; 64 | 65 | const handleClickShowPassword = (pass) => { 66 | setFormData({ ...formData, [pass]: !formData[pass] }); 67 | }; 68 | 69 | const handleMouseDownPassword = (event) => { 70 | event.preventDefault(); 71 | }; 72 | 73 | const confirmPasswordOnChangeHandler = (e) => { 74 | let confirmed = false; 75 | if (e.target.value === formData.password) { 76 | confirmed = true; 77 | } else { 78 | confirmed = false; 79 | } 80 | setFormData({ 81 | ...formData, 82 | confirmed: confirmed, 83 | [e.target.name]: e.target.value, 84 | }); 85 | }; 86 | const passwordOnChangeHandler = (e) => { 87 | let confirmed = false; 88 | if (e.target.value === formData.confirmpassword) { 89 | confirmed = true; 90 | } else { 91 | confirmed = false; 92 | } 93 | setFormData({ 94 | ...formData, 95 | confirmed: confirmed, 96 | [e.target.name]: e.target.value, 97 | }); 98 | }; 99 | const mobileOnChangeHandler = (e) => { 100 | if (e.target.value.length >= 11) { 101 | setFormData({ 102 | ...formData, 103 | [e.target.name]: formData.mobileno, 104 | }); 105 | } else { 106 | setFormData({ 107 | ...formData, 108 | [e.target.name]: e.target.value, 109 | }); 110 | } 111 | }; 112 | 113 | useEffect(() => { 114 | if (token) { 115 | props.handleCloseDropdownsignup(); 116 | } 117 | }); 118 | const handleSubmit = (e) => { 119 | e.preventDefault(); 120 | const { email, firstname, lastname, mobileno, password, confirmPassword } = 121 | formData; 122 | props.signup( 123 | email, 124 | firstname, 125 | lastname, 126 | mobileno, 127 | password, 128 | confirmPassword 129 | ); 130 | ; 131 | }; 132 | const handleSignIn = (event) => { 133 | preventDefault(event); 134 | props.handleCloseDropdownsignup(); 135 | props.handleClickOpenlogin(); 136 | }; 137 | return ( 138 | 139 | 140 | 141 |
142 | 146 | 147 | 148 | 149 | Sign up 150 | 151 |
152 | 153 | 154 | 166 | 167 | 168 | 179 | 180 | 181 | 198 | 199 | 200 | 217 | 218 | 219 | 242 | 245 | handleClickShowPassword("showPassword") 246 | } 247 | onMouseDown={handleMouseDownPassword} 248 | edge="end" 249 | > 250 | {formData.showPassword ? ( 251 | 252 | ) : ( 253 | 254 | )} 255 | 256 | 257 | ), 258 | }} 259 | /> 260 | 261 | 262 | 277 | 280 | handleClickShowPassword("showConfirmPassword") 281 | } 282 | onMouseDown={handleMouseDownPassword} 283 | edge="end" 284 | > 285 | {formData.showConfirmPassword ? ( 286 | 287 | ) : ( 288 | 289 | )} 290 | 291 | 292 | ), 293 | }} 294 | /> 295 | 296 | 297 | 307 | 308 | 309 | 315 | Already have an account? Sign in 316 | 317 | 318 | 319 |
320 |
321 | 322 | 323 | ); 324 | } 325 | 326 | const mapStateToProps = (state) => { 327 | return { 328 | loading: state.auth.loading, 329 | error: state.auth.error, 330 | token: state.auth.token, 331 | }; 332 | }; 333 | const mapDispatchToProps = (dispatch) => { 334 | return { 335 | signup: (email, firstname, lastname, mobileno, password) => 336 | dispatch(authSignup(email, firstname, lastname, mobileno, password)), 337 | }; 338 | }; 339 | 340 | export default connect(mapStateToProps, mapDispatchToProps)(SignUp); 341 | -------------------------------------------------------------------------------- /src/Components/HomePage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import HomePageContainer from "./HomePage/HomePageContainer.js"; 3 | import HeaderBar from "./HeaderBar.js"; 4 | import styles from "../styles/js/HomePage/HomePageStyle.js"; 5 | import classNames from "classnames"; 6 | import Grid from "@material-ui/core/Grid"; 7 | import SearchBar from "./HomePage/SearchBar"; 8 | import { makeStyles } from "@material-ui/core/styles"; 9 | import LeftPane from "./HomePage/LeftPane.js"; 10 | import Map from "./HomePage/Map.js"; 11 | import { ThemeProvider } from "@material-ui/core/styles"; 12 | import theme from "../consts/theme"; 13 | 14 | const gridStyles = { 15 | grid: { 16 | width: "auto", 17 | }, 18 | }; 19 | const gridItemStyles = { 20 | grid: { 21 | position: "relative", 22 | width: "100%", 23 | minHeight: "1px", 24 | paddingRight: "15px", 25 | flexBasis: "auto", 26 | }, 27 | }; 28 | const useStyles = makeStyles(styles); 29 | const useGridStyles = makeStyles(gridStyles); 30 | const useGridItemStyles = makeStyles(gridItemStyles); 31 | 32 | function HomePage() { 33 | const gridclasses = useGridStyles(); 34 | const griditemclasses = useGridItemStyles(); 35 | const classes = useStyles(); 36 | return ( 37 | 38 |
39 | 40 | 41 |
42 | 43 | 44 | {/* HELP: would be used for search bar or adding anything above map */} 45 | {/*
46 |

Material Kit React.

47 |

48 | A Badass Material-UI Kit based on Material Design. 49 |

50 |
*/} 51 |
52 | 53 |
54 | 55 | 56 | 57 |
58 | 59 |
60 | 61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 | 156 | ); 157 | } 158 | 159 | export default HomePage; 160 | -------------------------------------------------------------------------------- /src/Components/HomePage/ChooseCategory.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // nodejs library that concatenates classes 3 | import classNames from "classnames"; 4 | // nodejs library to set properties for components 5 | 6 | // @material-ui/core components 7 | import { makeStyles, withStyles } from "@material-ui/core/styles"; 8 | import MenuItem from "@material-ui/core/MenuItem"; 9 | import MenuList from "@material-ui/core/MenuList"; 10 | import ClickAwayListener from "@material-ui/core/ClickAwayListener"; 11 | import Paper from "@material-ui/core/Paper"; 12 | import Grow from "@material-ui/core/Grow"; 13 | import MuiAccordion from "@material-ui/core/Accordion"; 14 | import Typography from "@material-ui/core/Typography"; 15 | import MuiAccordionSummary from "@material-ui/core/AccordionSummary"; 16 | import MuiAccordionDetails from "@material-ui/core/AccordionDetails"; 17 | import ButtonGroup from "@material-ui/core/ButtonGroup"; 18 | import AddCircleIcon from "@material-ui/icons/AddCircle"; 19 | import RemoveCircleIcon from "@material-ui/icons/RemoveCircle"; 20 | import Link from "@material-ui/core/Link"; 21 | import Button from "@material-ui/core/Button"; 22 | import Popper from "@material-ui/core/Popper"; 23 | import { ThemeProvider } from "@material-ui/core/styles"; 24 | import theme from "../../consts/theme"; 25 | // core components 26 | import styles from "../../styles/js/HomePage/customDropdownStyle.js"; 27 | 28 | const useStyles = makeStyles(styles); 29 | 30 | const Accordion = withStyles({ 31 | root: { 32 | border: "1px solid rgba(0, 0, 0, .125)", 33 | boxShadow: "none", 34 | "&:not(:last-child)": { 35 | borderBottom: 0, 36 | }, 37 | position: "static", 38 | "&:before": { 39 | display: "none", 40 | }, 41 | "&$expanded": { 42 | margin: "auto", 43 | }, 44 | }, 45 | expanded: {}, 46 | })(MuiAccordion); 47 | 48 | const AccordionSummary = withStyles({ 49 | root: { 50 | backgroundColor: "rgba(0, 0, 0, .03)", 51 | borderBottom: "1px solid rgba(0, 0, 0, .125)", 52 | marginBottom: -1, 53 | minHeight: 56, 54 | "&$expanded": { 55 | minHeight: 56, 56 | }, 57 | }, 58 | content: { 59 | "&$expanded": { 60 | margin: "12px 0", 61 | }, 62 | }, 63 | expanded: {}, 64 | })(MuiAccordionSummary); 65 | 66 | const AccordionDetails = withStyles((theme) => ({ 67 | root: { 68 | padding: theme.spacing(2), 69 | }, 70 | }))(MuiAccordionDetails); 71 | export default function CustomDropdown(props) { 72 | const preventDefault = (event) => event.preventDefault(); 73 | // TODO add transition on according expanding 74 | const [anchorEl, setAnchorEl] = React.useState(null); 75 | const handleClick = (event) => { 76 | if (anchorEl && anchorEl.contains(event.target)) { 77 | setAnchorEl(null); 78 | } else { 79 | setAnchorEl(event.currentTarget); 80 | } 81 | }; 82 | const handleClose = (param) => { 83 | setAnchorEl(null); 84 | }; 85 | const handleCloseAway = (event) => { 86 | if (anchorEl.contains(event.target)) { 87 | return; 88 | } 89 | setAnchorEl(null); 90 | }; 91 | const dropdownList = ["Breads", "Dal", "Dairy", "Flour"]; 92 | 93 | const classes = useStyles(); 94 | const caretClasses = classNames({ 95 | [classes.caret]: true, 96 | [classes.caretActive]: Boolean(anchorEl), 97 | }); 98 | const add = () => { 99 | setCount(count + 1); 100 | }; 101 | const subtract = () => { 102 | if (count <= 0) { 103 | setCount(0); 104 | } else setCount(count - 1); 105 | }; 106 | const [count, setCount] = React.useState(0); 107 | const [state, setState] = React.useState({ 108 | Breads: false, 109 | Dal: false, 110 | Dairy: false, 111 | Flour: false, 112 | }); 113 | const handleChange = (prop) => { 114 | setState({ ...state, [prop]: true }); 115 | }; 116 | const handleAccordianChange = (prop) => (event, newExpanded) => { 117 | if (newExpanded === true) { 118 | setState({ ...state, [prop]: true }); 119 | } else { 120 | setState({ ...state, [prop]: false }); 121 | } 122 | }; 123 | return ( 124 | 125 |
126 | 135 | 139 | 140 | 150 | {() => ( 151 | 152 | 153 | 154 | 155 | {dropdownList.map((prop, key) => { 156 | return ( 157 | { 160 | handleClose(); 161 | handleChange(prop); 162 | }} 163 | className={classNames( 164 | classes.dropdownItem, 165 | classes["primaryHover"] 166 | )} 167 | > 168 | {prop} 169 | 170 | ); 171 | })} 172 | 173 | 174 | 175 | 176 | )} 177 | 178 |
179 | {dropdownList.map((element) => { 180 | return ( 181 | 185 | 189 | {element} 190 | 191 | 192 | 193 | 194 | {element} 195 | 196 |
197 |
204 | ₹ 205 |
21
206 |
207 |
217 | ₹
25
218 |
219 |
220 | 221 | 222 | 228 | 232 | 233 |
240 | {count} 241 |
242 | 243 | 247 | 248 | 249 | 250 | 251 | 252 | Maida Wali Bread 253 | 254 |
255 |
262 | ₹
21
263 |
264 |
274 | ₹
25
275 |
276 |
277 | 278 | 279 | 285 | 289 | 290 |
297 | {count} 298 |
299 | 300 | 304 | 305 | 306 | 307 | ); 308 | })} 309 |
310 |
311 | 312 | ); 313 | } 314 | -------------------------------------------------------------------------------- /src/Components/HomePage/HomePageContainer.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import classNames from "classnames"; 3 | import PropTypes from "prop-types"; 4 | import { makeStyles } from "@material-ui/core/styles"; 5 | import styles from "../../styles/js/HomePage/HomePageContainerStyle.js"; 6 | import { ThemeProvider } from "@material-ui/core/styles"; 7 | import theme from "../../consts/theme"; 8 | const useStyles = makeStyles(styles); 9 | 10 | export default function HomePageContainer(props) { 11 | let windowScrollTop; 12 | if (window.innerWidth >= 768) { 13 | windowScrollTop = window.pageYOffset / 3; 14 | } else { 15 | windowScrollTop = 0; 16 | } 17 | const [transform, setTransform] = React.useState( 18 | "translate3d(0," + windowScrollTop + "px,0)" 19 | ); 20 | useEffect(() => { 21 | if (window.innerWidth >= 768) { 22 | window.addEventListener("scroll", resetTransform); 23 | } 24 | return function cleanup() { 25 | if (window.innerWidth >= 768) { 26 | window.removeEventListener("scroll", resetTransform); 27 | } 28 | }; 29 | }); 30 | const resetTransform = () => { 31 | var windowScrollTop = window.pageYOffset / 3; 32 | setTransform("translate3d(0," + windowScrollTop + "px,0)"); 33 | }; 34 | const { filter, className, children, style, small } = props; 35 | const classes = useStyles(); 36 | const parallaxClasses = classNames({ 37 | [classes.parallax]: true, 38 | [classes.filter]: filter, 39 | [classes.small]: small, 40 | [className]: className !== undefined, 41 | }); 42 | return ( 43 | 44 |
51 | {children} 52 |
53 | 54 | ); 55 | } 56 | 57 | HomePageContainer.propTypes = { 58 | className: PropTypes.string, 59 | filter: PropTypes.bool, 60 | children: PropTypes.node, 61 | style: PropTypes.string, 62 | image: PropTypes.string, 63 | small: PropTypes.bool, 64 | }; 65 | -------------------------------------------------------------------------------- /src/Components/HomePage/LeftPane.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles } from "@material-ui/core/styles"; 3 | import { withStyles } from "@material-ui/core/styles"; 4 | import Drawer from "@material-ui/core/Drawer"; 5 | import Button from "@material-ui/core/Button"; 6 | import FormControl from "@material-ui/core/FormControl"; 7 | import Divider from "@material-ui/core/Divider"; 8 | import Rating from "@material-ui/lab/Rating"; 9 | import Box from "@material-ui/core/Box"; 10 | import Card from "@material-ui/core/Card"; 11 | import CardActionArea from "@material-ui/core/CardActionArea"; 12 | import CardMedia from "@material-ui/core/CardMedia"; 13 | import Typography from "@material-ui/core/Typography"; 14 | import Grid from "@material-ui/core/Grid"; 15 | import ShareIcon from "@material-ui/icons/Share"; 16 | import IconButton from "@material-ui/core/IconButton"; 17 | import ListItem from "@material-ui/core/ListItem"; 18 | import ExploreIcon from "@material-ui/icons/Explore"; 19 | import DirectionsIcon from "@material-ui/icons/Directions"; 20 | import Tooltip from "@material-ui/core/Tooltip"; 21 | import CheckIcon from "@material-ui/icons/Check"; 22 | import BookmarkIcon from "@material-ui/icons/Bookmark"; 23 | import RateReviewIcon from "@material-ui/icons/RateReview"; 24 | import MuiChip from "@material-ui/core/Chip"; 25 | import Link from "@material-ui/core/Link"; 26 | import TextField from "@material-ui/core/TextField"; 27 | import Paper from "@material-ui/core/Paper"; 28 | import Dialog from "@material-ui/core/Dialog"; 29 | import DialogActions from "@material-ui/core/DialogActions"; 30 | import DialogContent from "@material-ui/core/DialogContent"; 31 | import DialogContentText from "@material-ui/core/DialogContentText"; 32 | import useMediaQuery from "@material-ui/core/useMediaQuery"; 33 | import { useTheme } from "@material-ui/core/styles"; 34 | 35 | // HomePage imports 36 | import CustomDropdown from "./ChooseCategory"; 37 | import SearchBar from "./SearchBar"; 38 | import ProductsTab from "./ProductsTab"; 39 | // Asset imports 40 | import banner_image from "../../assets/HomePage/levis.jpg"; 41 | import styles from "../../styles/js/HomePage/LeftPaneStyle.js"; 42 | import { ThemeProvider } from "@material-ui/core/styles"; 43 | import theme from "../../consts/theme"; 44 | 45 | // Making styles 46 | const useStyles = makeStyles(styles); 47 | 48 | const CustomDrawer = withStyles((theme) => ({ 49 | paperAnchorLeft: { 50 | width: "100vw", 51 | 52 | [theme.breakpoints.up(1400 + theme.spacing(3) * 2)]: { 53 | width: "28.5vw", 54 | }, 55 | [theme.breakpoints.down(1400 + theme.spacing(3) * 2)]: { 56 | width: "32vw", 57 | }, 58 | [theme.breakpoints.down(1250 + theme.spacing(3) * 2)]: { 59 | width: "35vw", 60 | }, 61 | [theme.breakpoints.down(1200 + theme.spacing(3) * 2)]: { 62 | width: "38vw", 63 | }, 64 | [theme.breakpoints.down(1100 + theme.spacing(3) * 2)]: { 65 | width: "40vw", 66 | }, 67 | [theme.breakpoints.down(1000 + theme.spacing(3) * 2)]: { 68 | width: "44vw", 69 | }, 70 | [theme.breakpoints.down(950 + theme.spacing(3) * 2)]: { 71 | width: "50vw", 72 | }, 73 | [theme.breakpoints.down(950 + theme.spacing(3) * 2)]: { 74 | width: "50vw", 75 | }, 76 | [theme.breakpoints.down(850 + theme.spacing(3) * 2)]: { 77 | width: "54vw", 78 | }, 79 | [theme.breakpoints.down(800 + theme.spacing(3) * 2)]: { 80 | width: "56vw", 81 | }, 82 | [theme.breakpoints.down(750 + theme.spacing(3) * 2)]: { 83 | width: "60vw", 84 | }, 85 | [theme.breakpoints.down(700 + theme.spacing(3) * 2)]: { 86 | width: "65vw", 87 | }, 88 | [theme.breakpoints.down(650 + theme.spacing(3) * 2)]: { 89 | width: "70vw", 90 | }, 91 | [theme.breakpoints.down(600 + theme.spacing(3) * 2)]: { 92 | width: "75vw", 93 | }, 94 | [theme.breakpoints.down(550 + theme.spacing(3) * 2)]: { 95 | width: "80vw", 96 | }, 97 | [theme.breakpoints.down(500 + theme.spacing(3) * 2)]: { 98 | width: "100vw", 99 | }, 100 | }, 101 | }))(Drawer); 102 | 103 | const ReviewChip = withStyles({ 104 | icon: { color: "#37b3f9 !important" }, 105 | })(MuiChip); 106 | // TODO: search suggestions 107 | // main functional component start 108 | function LeftPane() { 109 | const preventDefault = (event) => event.preventDefault(); 110 | const [value, setValue] = React.useState(2); 111 | const [openmodal, setOpenModal] = React.useState(false); 112 | const theme = useTheme(); 113 | const fullScreen = useMediaQuery(theme.breakpoints.down("sm")); 114 | 115 | const handleClickOpen = () => { 116 | setOpenModal(true); 117 | }; 118 | 119 | const handleClose = () => { 120 | setOpenModal(false); 121 | }; 122 | 123 | // Basic styles class 124 | const classes = useStyles(); 125 | const [state, setState] = React.useState({ 126 | top: false, 127 | left: false, 128 | bottom: false, 129 | right: false, 130 | }); 131 | 132 | const toggleDrawer = (anchor, open) => (event) => { 133 | if ( 134 | event && 135 | event.type === "keydown" && 136 | (event.key === "Tab" || event.key === "Shift") 137 | ) { 138 | return; 139 | } 140 | 141 | setState({ ...state, [anchor]: open }); 142 | }; 143 | const anchor = "left"; 144 | 145 | return ( 146 | 147 | 148 | 149 | 156 |
157 | 158 |
159 | 160 |
161 | 162 | 169 | 170 | 171 |
172 |
173 | Aggarwal Store 174 |
175 | 180 | 181 | 182 |
183 |
Open Now - 11:00 AM - 11:00 PM
184 | 185 |
186 | 194 | 195 | 196 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 |
261 | 267 |
275 | 276 |
277 | 278 |
BEST DEALS
279 |
280 | 281 |
282 | 283 | 284 | } 288 | label={"Write a Review"} 289 | className={classes.chip} 290 | /> 291 | 292 | 293 | 298 | From Customers 299 | 300 | 301 | 302 | 307 | Avanya Wadhwa 308 | 309 | 310 | Local Guid - 219 reviews 311 | 312 | 313 | I think this is the best website ever build. 314 | 315 | 316 | 321 | Manav Agarwal 322 | 323 | 324 | Student - 719 reviews 325 | 326 | 327 | Upar wali comment ko ignore krein. 328 | 329 | 330 | 335 | Avanya Wadhwa 336 | 337 | 338 | Local Guid - 219 reviews 339 | 340 | 341 | I think this is the best website ever build. 342 | 343 | 344 | 349 | Manav Agarwal 350 | 351 | 352 | Student - 719 reviews 353 | 354 | 355 | Upar wali comment ko ignore krein. 356 | 357 | 358 | 359 | 360 | 365 | More Reviews (1,673) 366 | 367 | 368 | 369 | 370 | 377 |
386 | {"Aggarwal Store"} 387 |
388 | 389 |
390 | AVANYA WADHWA 391 |
392 | Posting Publically 393 | 394 | { 398 | setValue(newValue); 399 | }} 400 | /> 401 | 402 | 403 | 404 | 416 | 417 | 418 | 419 | 420 | 428 | 436 | 437 | 438 |
439 | 440 | 441 | 442 | ); 443 | } 444 | // main functional component end 445 | export default LeftPane; 446 | -------------------------------------------------------------------------------- /src/Components/HomePage/Map.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect, useState } from "react"; 2 | import mapboxgl from "mapbox-gl"; 3 | import { makeStyles } from "@material-ui/core/styles"; 4 | import marker from "../../assets/HomePage/marker.png"; 5 | import { ThemeProvider } from "@material-ui/core/styles"; 6 | import theme from "../../consts/theme"; 7 | const mapStyles = { 8 | map: { 9 | position: "absolute", 10 | top: "0", 11 | right: "0", 12 | left: "0", 13 | bottom: "0", 14 | }, 15 | marker: { 16 | backgroundImage: "url(" + marker + ")", 17 | backgroundSize: "cover", 18 | width: "50px", 19 | height: "50px", 20 | borderRadius: "50%", 21 | cursor: "pointer", 22 | }, 23 | }; 24 | const useMapStyles = makeStyles(mapStyles); 25 | // var stores = { 26 | // type: "FeatureCollection", 27 | // features: [ 28 | // { 29 | // type: "Feature", 30 | // geometry: { 31 | // type: "Point", 32 | // coordinates: [77.771425, 28.730614], 33 | // }, 34 | // properties: { 35 | // phoneFormatted: "(202) 234-7336", 36 | // phone: "2022347336", 37 | // address: "1471 P St NW", 38 | // city: "Washington DC", 39 | // country: "United States", 40 | // crossStreet: "at 15th St NW", 41 | // postalCode: "20005", 42 | // state: "D.C.", 43 | // }, 44 | // }, 45 | // { 46 | // type: "Feature", 47 | // geometry: { 48 | // type: "Point", 49 | // coordinates: [77.4889323, 28.679584], 50 | // }, 51 | // properties: { 52 | // phoneFormatted: "(202) 507-8357", 53 | // phone: "2025078357", 54 | // address: "2221 I St NW", 55 | // city: "Washington DC", 56 | // country: "United States", 57 | // crossStreet: "at 22nd St NW", 58 | // postalCode: "20037", 59 | // state: "D.C.", 60 | // }, 61 | // }, 62 | // { 63 | // type: "Feature", 64 | // geometry: { 65 | // type: "Point", 66 | // coordinates: [-77.043929, 38.910525], 67 | // }, 68 | // properties: { 69 | // phoneFormatted: "(202) 387-9338", 70 | // phone: "2023879338", 71 | // address: "1512 Connecticut Ave NW", 72 | // city: "Washington DC", 73 | // country: "United States", 74 | // crossStreet: "at Dupont Circle", 75 | // postalCode: "20036", 76 | // state: "D.C.", 77 | // }, 78 | // }, 79 | // { 80 | // type: "Feature", 81 | // geometry: { 82 | // type: "Point", 83 | // coordinates: [-77.0672, 38.90516896], 84 | // }, 85 | // properties: { 86 | // phoneFormatted: "(202) 337-9338", 87 | // phone: "2023379338", 88 | // address: "3333 M St NW", 89 | // city: "Washington DC", 90 | // country: "United States", 91 | // crossStreet: "at 34th St NW", 92 | // postalCode: "20007", 93 | // state: "D.C.", 94 | // }, 95 | // }, 96 | // { 97 | // type: "Feature", 98 | // geometry: { 99 | // type: "Point", 100 | // coordinates: [-77.002583742142, 38.887041080933], 101 | // }, 102 | // properties: { 103 | // phoneFormatted: "(202) 547-9338", 104 | // phone: "2025479338", 105 | // address: "221 Pennsylvania Ave SE", 106 | // city: "Washington DC", 107 | // country: "United States", 108 | // crossStreet: "btwn 2nd & 3rd Sts. SE", 109 | // postalCode: "20003", 110 | // state: "D.C.", 111 | // }, 112 | // }, 113 | // { 114 | // type: "Feature", 115 | // geometry: { 116 | // type: "Point", 117 | // coordinates: [-76.933492720127, 38.99225245786], 118 | // }, 119 | // properties: { 120 | // address: "8204 Baltimore Ave", 121 | // city: "College Park", 122 | // country: "United States", 123 | // postalCode: "20740", 124 | // state: "MD", 125 | // }, 126 | // }, 127 | // { 128 | // type: "Feature", 129 | // geometry: { 130 | // type: "Point", 131 | // coordinates: [-77.097083330154, 38.980979], 132 | // }, 133 | // properties: { 134 | // phoneFormatted: "(301) 654-7336", 135 | // phone: "3016547336", 136 | // address: "4831 Bethesda Ave", 137 | // cc: "US", 138 | // city: "Bethesda", 139 | // country: "United States", 140 | // postalCode: "20814", 141 | // state: "MD", 142 | // }, 143 | // }, 144 | // { 145 | // type: "Feature", 146 | // geometry: { 147 | // type: "Point", 148 | // coordinates: [-77.359425054188, 38.958058116661], 149 | // }, 150 | // properties: { 151 | // phoneFormatted: "(571) 203-0082", 152 | // phone: "5712030082", 153 | // address: "11935 Democracy Dr", 154 | // city: "Reston", 155 | // country: "United States", 156 | // crossStreet: "btw Explorer & Library", 157 | // postalCode: "20190", 158 | // state: "VA", 159 | // }, 160 | // }, 161 | // { 162 | // type: "Feature", 163 | // geometry: { 164 | // type: "Point", 165 | // coordinates: [-77.10853099823, 38.880100922392], 166 | // }, 167 | // properties: { 168 | // phoneFormatted: "(703) 522-2016", 169 | // phone: "7035222016", 170 | // address: "4075 Wilson Blvd", 171 | // city: "Arlington", 172 | // country: "United States", 173 | // crossStreet: "at N Randolph St.", 174 | // postalCode: "22203", 175 | // state: "VA", 176 | // }, 177 | // }, 178 | // { 179 | // type: "Feature", 180 | // geometry: { 181 | // type: "Point", 182 | // coordinates: [-75.28784, 40.008008], 183 | // }, 184 | // properties: { 185 | // phoneFormatted: "(610) 642-9400", 186 | // phone: "6106429400", 187 | // address: "68 Coulter Ave", 188 | // city: "Ardmore", 189 | // country: "United States", 190 | // postalCode: "19003", 191 | // state: "PA", 192 | // }, 193 | // }, 194 | // { 195 | // type: "Feature", 196 | // geometry: { 197 | // type: "Point", 198 | // coordinates: [-75.20121216774, 39.954030175164], 199 | // }, 200 | // properties: { 201 | // phoneFormatted: "(215) 386-1365", 202 | // phone: "2153861365", 203 | // address: "3925 Walnut St", 204 | // city: "Philadelphia", 205 | // country: "United States", 206 | // postalCode: "19104", 207 | // state: "PA", 208 | // }, 209 | // }, 210 | // { 211 | // type: "Feature", 212 | // geometry: { 213 | // type: "Point", 214 | // coordinates: [-77.043959498405, 38.903883387232], 215 | // }, 216 | // properties: { 217 | // phoneFormatted: "(202) 331-3355", 218 | // phone: "2023313355", 219 | // address: "1901 L St. NW", 220 | // city: "Washington DC", 221 | // country: "United States", 222 | // crossStreet: "at 19th St", 223 | // postalCode: "20036", 224 | // state: "D.C.", 225 | // }, 226 | // }, 227 | // ], 228 | // }; 229 | 230 | mapboxgl.accessToken = 231 | "pk.eyJ1IjoidGVzdGluZzEyMzQyNTEyNTQxIiwiYSI6ImNraGFud2ZyYjE1eWUycG5xMTA3b2lrZTcifQ.utAlAYrt6I8LmG1Uyhn4ug"; 232 | 233 | // const MapComponent = () => { 234 | // const mapclasses = useMapStyles(); 235 | 236 | // const mapContainer = useRef(); 237 | // const [lng, setLng] = useState(77.77142); 238 | // const [lat, setLat] = useState(29.73061); 239 | // const [zoom, setZoom] = useState(13); 240 | 241 | // function successLocation(position) { 242 | // setLng(position.coords.longitude); 243 | // setLat(position.coords.latitude); 244 | // } 245 | // function errorLocation() { 246 | // setLng(lng); 247 | // setLat(lat); 248 | // } 249 | // navigator.geolocation.getCurrentPosition(successLocation, errorLocation, { 250 | // enableHighAccuracy: true, 251 | // }); 252 | 253 | // useEffect(() => { 254 | // const map = new mapboxgl.Map({ 255 | // container: mapContainer.current, 256 | // style: "mapbox://styles/mapbox/streets-v11", 257 | // center: [lng, lat], 258 | // zoom: zoom, 259 | // }); 260 | // var marker = new mapboxgl.Marker({ 261 | // color: "#37b3f9", 262 | // draggable: true, 263 | // }) 264 | // .setLngLat([lng, lat]) 265 | // .addTo(map); 266 | 267 | // // HELP: to get the longitude and latitude of a marker 268 | // // var lngLat = marker.getLngLat(); 269 | 270 | // map.on("move", () => { 271 | // setLng(map.getCenter().lng.toFixed(4)); 272 | // setLat(map.getCenter().lat.toFixed(4)); 273 | // setZoom(map.getZoom().toFixed(2)); 274 | // }); 275 | 276 | // return () => map.remove(); 277 | // }, []); 278 | 279 | // return ( 280 | //
281 | //
282 | //
283 | // ); 284 | // }; 285 | 286 | export default function Map(props) { 287 | const mapclasses = useMapStyles(); 288 | const mapContainer = useRef(); 289 | const [lng, setLng] = useState(77.77142); 290 | const [lat, setLat] = useState(28.73061); 291 | const [zoom, setZoom] = useState(16); 292 | 293 | useEffect(() => { 294 | navigator.geolocation.getCurrentPosition( 295 | (position) => { 296 | setLng(position.coords.longitude); 297 | setLat(position.coords.latitude); 298 | }, 299 | () => {}, 300 | { 301 | enableHighAccuracy: true, 302 | } 303 | ); 304 | const map = new mapboxgl.Map({ 305 | container: mapContainer.current, 306 | style: "mapbox://styles/mapbox/streets-v11", 307 | center: [lng, lat], 308 | zoom: zoom, 309 | }); 310 | new mapboxgl.Marker({ 311 | color: "#37b3f9", 312 | draggable: true, 313 | }) 314 | .setLngLat([lng, lat]) 315 | .addTo(map); 316 | // map.scrollZoom.disable(); 317 | // map.boxZoom.enable(); 318 | // map.scrollZoom.setWheelZoomRate(1 / 600); 319 | // HELP: to control the drag intensity of map in map container 320 | // map.dragPan.enable({ 321 | // linearity: 0.3, 322 | // // easing: bezier(0, 0, 0.3, 1), 323 | // maxSpeed: 1400, 324 | // deceleration: 2500, 325 | // }); 326 | // HELP: to get the longitude and latitude of a marker 327 | // var lngLat = marker.getLngLat(); 328 | // map.addControl( 329 | // new mapboxgl.GeolocateControl({ 330 | // positionOptions: { 331 | // enableHighAccuracy: true, 332 | // }, 333 | // trackUserLocation: true, 334 | // }) 335 | // ); 336 | // HELP: to disable ctrl+scroll to zoom 337 | // map.boxZoom.disable(); 338 | map.on("move", () => { 339 | setLng(map.getCenter().lng.toFixed(4)); 340 | setLat(map.getCenter().lat.toFixed(4)); 341 | setZoom(map.getZoom().toFixed(2)); 342 | }); 343 | // return () => map.remove(); 344 | }, []); 345 | 346 | return ( 347 | 348 |
349 |
350 |
351 | 352 | ); 353 | } 354 | -------------------------------------------------------------------------------- /src/Components/HomePage/ProductsTab.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from "@material-ui/core/styles"; 2 | import Card from "@material-ui/core/Card"; 3 | import CardActionArea from "@material-ui/core/CardActionArea"; 4 | import CardContent from "@material-ui/core/CardContent"; 5 | import CardMedia from "@material-ui/core/CardMedia"; 6 | import dairy from "../../assets/HomePage/dairy.jpg"; 7 | import dals from "../../assets/HomePage/dals.jpg"; 8 | import flour from "../../assets/HomePage/flour.jpg"; 9 | import maggi from "../../assets/HomePage/maggi.png"; 10 | import Carousel from "react-multi-carousel"; 11 | import "react-multi-carousel/lib/styles.css"; 12 | import { ThemeProvider } from "@material-ui/core/styles"; 13 | import theme from "../../consts/theme"; 14 | const useStyles = makeStyles((theme) => ({ 15 | root: { 16 | minWidth: "10vw", 17 | maxWidth: "38vw", 18 | minHeight: "10vh", 19 | maxHeight: "30vh", 20 | marginLeft: "5px", 21 | marginRight: "5px", 22 | marginBottom: "3vh", 23 | // [theme.breakpoints.down(1400 + theme.spacing(3) * 2)]: { 24 | // maxWidth: "50vw !important", 25 | // }, 26 | [theme.breakpoints.down(1300 + theme.spacing(3) * 2)]: { 27 | maxWidth: "50vw", 28 | minWidth: "12vw", 29 | }, 30 | }, 31 | carouselImage: { 32 | height: "20vh", 33 | objectFit: "cover", 34 | }, 35 | carouselItem: { 36 | marginLeft: "1.5vw !important", 37 | [theme.breakpoints.down(1400 + theme.spacing(3) * 2)]: { 38 | marginLeft: "0.8vw !important", 39 | }, 40 | [theme.breakpoints.down(1350 + theme.spacing(3) * 2)]: { 41 | marginLeft: "2vw !important", 42 | }, 43 | [theme.breakpoints.down(1250 + theme.spacing(3) * 2)]: { 44 | marginLeft: "1.2vw !important", 45 | }, 46 | [theme.breakpoints.down(1050 + theme.spacing(3) * 2)]: { 47 | marginLeft: "0.8vw !important", 48 | }, 49 | [theme.breakpoints.down(400 + theme.spacing(3) * 2)]: { 50 | marginLeft: "-5vw !important", 51 | }, 52 | }, 53 | })); 54 | export default function ProductsTab() { 55 | const responsive = { 56 | desktop: { 57 | breakpoint: { max: 3000, min: 1024 }, 58 | items: 3, 59 | slidesToSlide: 3, 60 | }, 61 | tablet: { 62 | breakpoint: { max: 1024, min: 464 }, 63 | items: 3, 64 | slidesToSlide: 2, 65 | }, 66 | mobile: { 67 | breakpoint: { max: 464, min: 0 }, 68 | items: 2, 69 | slidesToSlide: 1, 70 | }, 71 | }; 72 | const classes = useStyles(); 73 | 74 | return ( 75 | 76 | 89 | 96 | 97 | 104 | 105 |
Whole Wheat Bread
106 |
107 |
114 | ₹
21
115 |
116 |
126 | ₹
25
127 |
128 |
129 | 130 | 131 | 132 | 139 | 140 | 147 | 148 |
Whole Wheat Bread
149 |
150 |
157 | ₹
21
158 |
159 |
169 | ₹
25
170 |
171 |
172 | 173 | 174 | 175 | 182 | 183 | 190 | 191 |
Whole Wheat Bread
192 |
193 |
200 | ₹
21
201 |
202 |
212 | ₹
25
213 |
214 |
215 | 216 | 217 | 218 | 225 | 226 | 233 | 234 |
Whole Wheat Bread
235 |
236 |
243 | ₹
21
244 |
245 |
255 | ₹
25
256 |
257 |
258 | 259 | 260 | 261 | 269 | 270 | 277 | 278 |
Whole Wheat Bread
279 |
280 |
287 | ₹
21
288 |
289 |
299 | ₹
25
300 |
301 |
302 | 303 | 304 | 305 | 313 | 314 | 321 | 322 |
Whole Wheat Bread
323 |
324 |
331 | ₹
21
332 |
333 |
343 | ₹
25
344 |
345 |
346 | 347 | 348 | 349 | 350 | 351 | ); 352 | } 353 | -------------------------------------------------------------------------------- /src/Components/HomePage/SearchBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { makeStyles, withStyles } from "@material-ui/core/styles"; 3 | import Paper from "@material-ui/core/Paper"; 4 | import Divider from "@material-ui/core/Divider"; 5 | import IconButton from "@material-ui/core/IconButton"; 6 | import StoreOutlinedIcon from "@material-ui/icons/StoreOutlined"; 7 | import FastfoodOutlinedIcon from "@material-ui/icons/FastfoodOutlined"; 8 | import SearchIcon from "@material-ui/icons/Search"; 9 | import Autocomplete from "@material-ui/lab/Autocomplete"; 10 | import Tooltip from "@material-ui/core/Tooltip"; 11 | import TextField from "@material-ui/core/TextField"; 12 | import { createFilterOptions } from "@material-ui/lab/Autocomplete"; 13 | import { ThemeProvider } from "@material-ui/core/styles"; 14 | import theme from "../../consts/theme"; 15 | const filter = createFilterOptions(); 16 | const NoPaddingAutocomplete = withStyles({ 17 | inputRoot: { 18 | '&&[class*="MuiInput-root"]': { 19 | input: { 20 | "&:first-child": { 21 | paddingLeft: "5px !important", 22 | }, 23 | }, 24 | }, 25 | }, 26 | input: { 27 | paddingLeft: "5px !important", 28 | }, 29 | })(Autocomplete); 30 | 31 | const useStyles = makeStyles((theme) => ({ 32 | root: { 33 | padding: "2px 4px", 34 | display: "flex", 35 | alignItems: "center", 36 | width: 400, 37 | [theme.breakpoints.down(400 + theme.spacing(3) * 2)]: { 38 | maxWidth: "90vw", 39 | }, 40 | }, 41 | input: { 42 | paddingLeft: "5px", 43 | flex: 1, 44 | }, 45 | iconButton: { 46 | padding: 10, 47 | }, 48 | divider: { 49 | height: 28, 50 | margin: 4, 51 | }, 52 | colorchange: { 53 | "&:hover": { 54 | color: "#37b3f9 !important", 55 | }, 56 | }, 57 | // NNot working but is here for reference and is to be improved in future releases of the product 58 | // inputRoot: { input: { "&:first-child": { paddingLeft: "5px !important" } } }, 59 | })); 60 | 61 | export default function CustomizedInputBase() { 62 | const classes = useStyles(); 63 | const [value, setValue] = React.useState(null); 64 | const preventDefault = (event) => event.preventDefault(); 65 | 66 | return ( 67 | 68 | 69 | { 74 | if (typeof newValue === "string") { 75 | setValue({ 76 | title: newValue, 77 | }); 78 | } else if (newValue && newValue.inputValue) { 79 | // Create a new value from the user input 80 | setValue({ 81 | title: newValue.inputValue, 82 | }); 83 | } else { 84 | setValue(newValue); 85 | } 86 | }} 87 | filterOptions={(options, params) => { 88 | const filtered = filter(options, params); 89 | 90 | // Suggest the creation of a new value 91 | if (params.inputValue !== "") { 92 | filtered.push({ 93 | inputValue: params.inputValue, 94 | title: `Add "${params.inputValue}"`, 95 | }); 96 | } 97 | 98 | return filtered; 99 | }} 100 | selectOnFocus 101 | clearOnBlur 102 | handleHomeEndKeys 103 | options={top100Films} 104 | getOptionLabel={(option) => { 105 | // Value selected with enter, right from the input 106 | if (typeof option === "string") { 107 | return option; 108 | } 109 | // Add "xxx" option created dynamically 110 | if (option.inputValue) { 111 | return option.inputValue; 112 | } 113 | // Regular option 114 | return option.title; 115 | }} 116 | renderOption={(option) => option.title} 117 | style={{ width: 300 }} 118 | freeSolo 119 | renderInput={(params) => ( 120 | 125 | )} 126 | /> 127 | 128 | 134 | 135 | 136 | 137 | 138 | 139 | 145 | 146 | 147 | 148 | 149 | 150 | 156 | 157 | 158 | 159 | 160 | 161 | ); 162 | } 163 | const top100Films = [ 164 | { title: "The Shawshank Redemption", year: 1994 }, 165 | { title: "The Godfather", year: 1972 }, 166 | { title: "The Godfather: Part II", year: 1974 }, 167 | { title: "The Dark Knight", year: 2008 }, 168 | { title: "12 Angry Men", year: 1957 }, 169 | { title: "Schindler's List", year: 1993 }, 170 | { title: "Pulp Fiction", year: 1994 }, 171 | { title: "The Lord of the Rings: The Return of the King", year: 2003 }, 172 | { title: "The Good, the Bad and the Ugly", year: 1966 }, 173 | { title: "Fight Club", year: 1999 }, 174 | { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 }, 175 | { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 }, 176 | { title: "Forrest Gump", year: 1994 }, 177 | { title: "Inception", year: 2010 }, 178 | { title: "The Lord of the Rings: The Two Towers", year: 2002 }, 179 | { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, 180 | { title: "Goodfellas", year: 1990 }, 181 | { title: "The Matrix", year: 1999 }, 182 | { title: "Seven Samurai", year: 1954 }, 183 | { title: "Star Wars: Episode IV - A New Hope", year: 1977 }, 184 | { title: "City of God", year: 2002 }, 185 | { title: "Se7en", year: 1995 }, 186 | { title: "The Silence of the Lambs", year: 1991 }, 187 | { title: "It's a Wonderful Life", year: 1946 }, 188 | { title: "Life Is Beautiful", year: 1997 }, 189 | { title: "The Usual Suspects", year: 1995 }, 190 | { title: "Léon: The Professional", year: 1994 }, 191 | { title: "Spirited Away", year: 2001 }, 192 | { title: "Saving Private Ryan", year: 1998 }, 193 | { title: "Once Upon a Time in the West", year: 1968 }, 194 | { title: "American History X", year: 1998 }, 195 | { title: "Interstellar", year: 2014 }, 196 | { title: "Casablanca", year: 1942 }, 197 | { title: "City Lights", year: 1931 }, 198 | { title: "Psycho", year: 1960 }, 199 | { title: "The Green Mile", year: 1999 }, 200 | { title: "The Intouchables", year: 2011 }, 201 | { title: "Modern Times", year: 1936 }, 202 | { title: "Raiders of the Lost Ark", year: 1981 }, 203 | { title: "Rear Window", year: 1954 }, 204 | { title: "The Pianist", year: 2002 }, 205 | { title: "The Departed", year: 2006 }, 206 | { title: "Terminator 2: Judgment Day", year: 1991 }, 207 | { title: "Back to the Future", year: 1985 }, 208 | { title: "Whiplash", year: 2014 }, 209 | { title: "Gladiator", year: 2000 }, 210 | { title: "Memento", year: 2000 }, 211 | { title: "The Prestige", year: 2006 }, 212 | { title: "The Lion King", year: 1994 }, 213 | { title: "Apocalypse Now", year: 1979 }, 214 | { title: "Alien", year: 1979 }, 215 | { title: "Sunset Boulevard", year: 1950 }, 216 | { 217 | title: 218 | "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb", 219 | year: 1964, 220 | }, 221 | { title: "The Great Dictator", year: 1940 }, 222 | { title: "Cinema Paradiso", year: 1988 }, 223 | { title: "The Lives of Others", year: 2006 }, 224 | { title: "Grave of the Fireflies", year: 1988 }, 225 | { title: "Paths of Glory", year: 1957 }, 226 | { title: "Django Unchained", year: 2012 }, 227 | { title: "The Shining", year: 1980 }, 228 | { title: "WALL·E", year: 2008 }, 229 | { title: "American Beauty", year: 1999 }, 230 | { title: "The Dark Knight Rises", year: 2012 }, 231 | { title: "Princess Mononoke", year: 1997 }, 232 | { title: "Aliens", year: 1986 }, 233 | { title: "Oldboy", year: 2003 }, 234 | { title: "Once Upon a Time in America", year: 1984 }, 235 | { title: "Witness for the Prosecution", year: 1957 }, 236 | { title: "Das Boot", year: 1981 }, 237 | { title: "Citizen Kane", year: 1941 }, 238 | { title: "North by Northwest", year: 1959 }, 239 | { title: "Vertigo", year: 1958 }, 240 | { title: "Star Wars: Episode VI - Return of the Jedi", year: 1983 }, 241 | { title: "Reservoir Dogs", year: 1992 }, 242 | { title: "Braveheart", year: 1995 }, 243 | { title: "M", year: 1931 }, 244 | { title: "Requiem for a Dream", year: 2000 }, 245 | { title: "Amélie", year: 2001 }, 246 | { title: "A Clockwork Orange", year: 1971 }, 247 | { title: "Like Stars on Earth", year: 2007 }, 248 | { title: "Taxi Driver", year: 1976 }, 249 | { title: "Lawrence of Arabia", year: 1962 }, 250 | { title: "Double Indemnity", year: 1944 }, 251 | { title: "Eternal Sunshine of the Spotless Mind", year: 2004 }, 252 | { title: "Amadeus", year: 1984 }, 253 | { title: "To Kill a Mockingbird", year: 1962 }, 254 | { title: "Toy Story 3", year: 2010 }, 255 | { title: "Logan", year: 2017 }, 256 | { title: "Full Metal Jacket", year: 1987 }, 257 | { title: "Dangal", year: 2016 }, 258 | { title: "The Sting", year: 1973 }, 259 | { title: "2001: A Space Odyssey", year: 1968 }, 260 | { title: "Singin' in the Rain", year: 1952 }, 261 | { title: "Toy Story", year: 1995 }, 262 | { title: "Bicycle Thieves", year: 1948 }, 263 | { title: "The Kid", year: 1921 }, 264 | { title: "Inglourious Basterds", year: 2009 }, 265 | { title: "Snatch", year: 2000 }, 266 | { title: "3 Idiots", year: 2009 }, 267 | { title: "Monty Python and the Holy Grail", year: 1975 }, 268 | ]; 269 | -------------------------------------------------------------------------------- /src/assets/HomePage/bg2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/bg2.png -------------------------------------------------------------------------------- /src/assets/HomePage/dairy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/dairy.jpg -------------------------------------------------------------------------------- /src/assets/HomePage/dals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/dals.jpg -------------------------------------------------------------------------------- /src/assets/HomePage/flour.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/flour.jpg -------------------------------------------------------------------------------- /src/assets/HomePage/levis.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/levis.jpg -------------------------------------------------------------------------------- /src/assets/HomePage/maggi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/maggi.png -------------------------------------------------------------------------------- /src/assets/HomePage/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/marker.png -------------------------------------------------------------------------------- /src/assets/HomePage/product1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/product1.png -------------------------------------------------------------------------------- /src/assets/HomePage/product2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manav014/Project1/685187d5791f9b3ff9071bcea0cd3153205fe29c/src/assets/HomePage/product2.png -------------------------------------------------------------------------------- /src/consts/constants.js: -------------------------------------------------------------------------------- 1 | const serverURL = "http://127.0.0.1:8000"; 2 | 3 | const coreApiURL = "/core"; 4 | const accountsApiURL = "/accounts"; 5 | 6 | export const core_endpoint = `${serverURL}${coreApiURL}`; 7 | export const accounts_endpoint = `${serverURL}${accountsApiURL}`; 8 | export const userDetailsURL = `${accounts_endpoint}/account_details/`; 9 | export const addressURL = `${core_endpoint}/address/`; 10 | export const addressSlugURL = (slug) => `${addressURL}${slug}/`; 11 | 12 | // TODO to define color constant here 13 | -------------------------------------------------------------------------------- /src/consts/states.js: -------------------------------------------------------------------------------- 1 | export const states = [ 2 | { 3 | abbreviation: "AN", 4 | name: "Andaman and Nicobar Islands", 5 | }, 6 | { 7 | abbreviation: "AP", 8 | name: "Andhra Pradesh", 9 | }, 10 | { 11 | abbreviation: "AR", 12 | name: "Arunachal Pradesh", 13 | }, 14 | { 15 | abbreviation: "AS", 16 | name: "Assam", 17 | }, 18 | { 19 | abbreviation: "BR", 20 | name: "Bihar", 21 | }, 22 | { 23 | abbreviation: "CG", 24 | name: "Chandigarh", 25 | }, 26 | { 27 | abbreviation: "CH", 28 | name: "Chhattisgarh", 29 | }, 30 | { 31 | abbreviation: "DH", 32 | name: "Dadra and Nagar Haveli", 33 | }, 34 | { 35 | abbreviation: "DD", 36 | name: "Daman and Diu", 37 | }, 38 | { 39 | abbreviation: "DL", 40 | name: "Delhi", 41 | }, 42 | { 43 | abbreviation: "GA", 44 | name: "Goa", 45 | }, 46 | { 47 | abbreviation: "GJ", 48 | name: "Gujarat", 49 | }, 50 | { 51 | abbreviation: "HR", 52 | name: "Haryana", 53 | }, 54 | { 55 | abbreviation: "HP", 56 | name: "Himachal Pradesh", 57 | }, 58 | { 59 | abbreviation: "JK", 60 | name: "Jammu and Kashmir", 61 | }, 62 | { 63 | abbreviation: "JH", 64 | name: "Jharkhand", 65 | }, 66 | { 67 | abbreviation: "KA", 68 | name: "Karnataka", 69 | }, 70 | { 71 | abbreviation: "KL", 72 | name: "Kerala", 73 | }, 74 | { 75 | abbreviation: "LD", 76 | name: "Lakshadweep", 77 | }, 78 | { 79 | abbreviation: "MP", 80 | name: "Madhya Pradesh", 81 | }, 82 | { 83 | abbreviation: "MH", 84 | name: "Maharashtra", 85 | }, 86 | { 87 | abbreviation: "MN", 88 | name: "Manipur", 89 | }, 90 | { 91 | abbreviation: "ML", 92 | name: "Meghalaya", 93 | }, 94 | { 95 | abbreviation: "MZ", 96 | name: "Mizoram", 97 | }, 98 | { 99 | abbreviation: "NL", 100 | name: "Nagaland", 101 | }, 102 | { 103 | abbreviation: "OR", 104 | name: "Odisha", 105 | }, 106 | { 107 | abbreviation: "PY", 108 | name: "Puducherry", 109 | }, 110 | { 111 | abbreviation: "PB", 112 | name: "Punjab", 113 | }, 114 | { 115 | abbreviation: "RJ", 116 | name: "Rajasthan", 117 | }, 118 | { 119 | abbreviation: "SK", 120 | name: "Sikkim", 121 | }, 122 | { 123 | abbreviation: "TN", 124 | name: "Tamil Nadu", 125 | }, 126 | { 127 | abbreviation: "TS", 128 | name: "Telangana", 129 | }, 130 | { 131 | abbreviation: "TR", 132 | name: "Tripura", 133 | }, 134 | { 135 | abbreviation: "UP", 136 | name: "Uttar Pradesh", 137 | }, 138 | { 139 | abbreviation: "UK", 140 | name: "Uttarakhand", 141 | }, 142 | { 143 | abbreviation: "WB", 144 | name: "West Bengal", 145 | }, 146 | ]; 147 | -------------------------------------------------------------------------------- /src/consts/theme.js: -------------------------------------------------------------------------------- 1 | import { createMuiTheme } from "@material-ui/core/styles"; 2 | const theme = createMuiTheme({ 3 | palette: { 4 | primary: { 5 | main: "#37b3f9", 6 | }, 7 | }, 8 | }); 9 | 10 | export default theme; 11 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | import registerServiceWorker from "./registerServiceWorker"; 7 | import { createStore, compose, applyMiddleware, combineReducers } from "redux"; 8 | import { Provider } from "react-redux"; 9 | import thunk from "redux-thunk"; 10 | import authReducer from "./store/reducers/auth"; 11 | const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 12 | const rootReducer = combineReducers({ 13 | auth: authReducer, 14 | }); 15 | const store = createStore(rootReducer, composeEnhances(applyMiddleware(thunk))); 16 | 17 | ReactDOM.render( 18 | 19 | 20 | 21 | 22 | , 23 | document.getElementById("root") 24 | ); 25 | 26 | // If you want to start measuring performance in your app, pass a function 27 | // to log results (for example: reportWebVitals(console.log)) 28 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 29 | reportWebVitals(); 30 | registerServiceWorker(); 31 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === "localhost" || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === "[::1]" || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener("load", () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | 39 | // Add some additional logging to localhost, pointing developers to the 40 | // service worker/PWA documentation. 41 | navigator.serviceWorker.ready.then(() => { 42 | console.log( 43 | "This web app is being served cache-first by a service " + 44 | "worker. To learn more, visit https://goo.gl/SC7cgQ" 45 | ); 46 | }); 47 | } else { 48 | // Is not local host. Just register service worker 49 | registerValidSW(swUrl); 50 | } 51 | }); 52 | } 53 | } 54 | 55 | function registerValidSW(swUrl) { 56 | navigator.serviceWorker 57 | .register(swUrl) 58 | .then(registration => { 59 | registration.onupdatefound = () => { 60 | const installingWorker = registration.installing; 61 | installingWorker.onstatechange = () => { 62 | if (installingWorker.state === "installed") { 63 | if (navigator.serviceWorker.controller) { 64 | // At this point, the old content will have been purged and 65 | // the fresh content will have been added to the cache. 66 | // It's the perfect time to display a "New content is 67 | // available; please refresh." message in your web app. 68 | console.log("New content is available; please refresh."); 69 | } else { 70 | // At this point, everything has been precached. 71 | // It's the perfect time to display a 72 | // "Content is cached for offline use." message. 73 | console.log("Content is cached for offline use."); 74 | } 75 | } 76 | }; 77 | }; 78 | }) 79 | .catch(error => { 80 | console.error("Error during service worker registration:", error); 81 | }); 82 | } 83 | 84 | function checkValidServiceWorker(swUrl) { 85 | // Check if the service worker can be found. If it can't reload the page. 86 | fetch(swUrl) 87 | .then(response => { 88 | // Ensure service worker exists, and that we really are getting a JS file. 89 | if ( 90 | response.status === 404 || 91 | response.headers.get("content-type").indexOf("javascript") === -1 92 | ) { 93 | // No service worker found. Probably a different app. Reload the page. 94 | navigator.serviceWorker.ready.then(registration => { 95 | registration.unregister().then(() => { 96 | window.location.reload(); 97 | }); 98 | }); 99 | } else { 100 | // Service worker found. Proceed as normal. 101 | registerValidSW(swUrl); 102 | } 103 | }) 104 | .catch(() => { 105 | console.log( 106 | "No internet connection found. App is running in offline mode." 107 | ); 108 | }); 109 | } 110 | 111 | export function unregister() { 112 | if ("serviceWorker" in navigator) { 113 | navigator.serviceWorker.ready.then(registration => { 114 | registration.unregister(); 115 | }); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/store/actions/actionTypes.js: -------------------------------------------------------------------------------- 1 | export const AUTH_START = "AUTH_START"; 2 | export const AUTH_SUCCESS = "AUTH_SUCCESS"; 3 | export const AUTH_FAIL = "AUTH_FAIL"; 4 | export const AUTH_LOGOUT = "AUTH_LOGOUT"; 5 | export const AUTH_REMOVE_ERROR = "AUTH_REMOVE_ERROR"; 6 | -------------------------------------------------------------------------------- /src/store/actions/auth.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import * as actionTypes from "./actionTypes"; 3 | 4 | export const authStart = () => { 5 | return { 6 | type: actionTypes.AUTH_START, 7 | }; 8 | }; 9 | 10 | export const authSuccess = (token) => { 11 | return { 12 | type: actionTypes.AUTH_SUCCESS, 13 | token: token, 14 | }; 15 | }; 16 | 17 | export const authFail = (error) => { 18 | return { 19 | type: actionTypes.AUTH_FAIL, 20 | error: error, 21 | }; 22 | }; 23 | 24 | export const authSetError = () => { 25 | return { 26 | type: actionTypes.AUTH_REMOVE_ERROR, 27 | }; 28 | }; 29 | 30 | export const logout = () => { 31 | localStorage.removeItem("token"); 32 | localStorage.removeItem("expirationDate"); 33 | return { 34 | type: actionTypes.AUTH_LOGOUT, 35 | }; 36 | }; 37 | 38 | export const checkAuthTimeout = (expirationTime) => { 39 | return (dispatch) => { 40 | setTimeout(() => { 41 | dispatch(logout()); 42 | }, expirationTime * 1000); 43 | }; 44 | }; 45 | 46 | export const authLogin = (emailmobile, password) => (dispatch) => { 47 | dispatch(authStart()); 48 | axios 49 | .post("http://127.0.0.1:8000/accounts/login/", { 50 | userid: emailmobile, 51 | pass: password, 52 | }) 53 | .then((res) => { 54 | const token = res.data.access; 55 | // TODO change the time from 3600 to anything else 56 | const expirationDate = new Date(new Date().getTime() + 172800 * 1000); 57 | localStorage.setItem("token", token); 58 | localStorage.setItem("expirationDate", expirationDate); 59 | dispatch(authSuccess(token)); 60 | dispatch(checkAuthTimeout(172800)); 61 | }) 62 | .catch((err) => { 63 | if (err.response) { 64 | dispatch(authFail(err)); 65 | } else if (err.request) { 66 | dispatch(authFail(err)); 67 | } 68 | }); 69 | }; 70 | 71 | export const authSignup = ( 72 | username, 73 | email, 74 | password, 75 | mobileno, 76 | firstname, 77 | lastname 78 | ) => { 79 | return (dispatch) => { 80 | dispatch(authStart()); 81 | axios 82 | .post("http://127.0.0.1:8000/accounts/register/", { 83 | userid: username, 84 | email_address: email, 85 | pass: password, 86 | fname: firstname, 87 | lname: lastname, 88 | mobile: mobileno, 89 | }) 90 | .then((res) => { 91 | const token = res.data.access; 92 | 93 | const expirationDate = new Date(new Date().getTime() + 172800 * 1000); 94 | localStorage.setItem("token", token); 95 | localStorage.setItem("expirationDate", expirationDate); 96 | dispatch(authSuccess(token)); 97 | dispatch(checkAuthTimeout(172800)); 98 | }) 99 | .catch((err) => { 100 | dispatch(authFail(err)); 101 | }); 102 | }; 103 | }; 104 | 105 | export const authCheckState = () => { 106 | return (dispatch) => { 107 | const token = localStorage.getItem("token"); 108 | if (token === undefined) { 109 | dispatch(logout()); 110 | } else { 111 | const expirationDate = new Date(localStorage.getItem("expirationDate")); 112 | if (expirationDate <= new Date()) { 113 | dispatch(logout()); 114 | } else { 115 | dispatch(authSuccess(token)); 116 | dispatch( 117 | checkAuthTimeout( 118 | (expirationDate.getTime() - new Date().getTime()) / 1000 119 | ) 120 | ); 121 | } 122 | } 123 | }; 124 | }; 125 | -------------------------------------------------------------------------------- /src/store/reducers/auth.js: -------------------------------------------------------------------------------- 1 | import * as actionTypes from "../actions/actionTypes"; 2 | import { updateObject } from "../utility"; 3 | 4 | const initialState = { 5 | token: null, 6 | error: null, 7 | loading: false, 8 | }; 9 | 10 | const authStart = (state, action) => { 11 | return updateObject(state, { 12 | error: null, 13 | loading: true, 14 | }); 15 | }; 16 | 17 | const authSuccess = (state, action) => { 18 | return updateObject(state, { 19 | token: action.token, 20 | error: null, 21 | loading: false, 22 | }); 23 | }; 24 | 25 | const authFail = (state, action) => { 26 | return updateObject(state, { 27 | error: action.error, 28 | loading: false, 29 | }); 30 | }; 31 | 32 | const setError = (state) => { 33 | return updateObject(state, { 34 | error: null, 35 | }); 36 | }; 37 | 38 | const authLogout = (state, action) => { 39 | return updateObject(state, { 40 | token: null, 41 | }); 42 | }; 43 | 44 | const reducer = (state = initialState, action) => { 45 | switch (action.type) { 46 | case actionTypes.AUTH_START: 47 | return authStart(state, action); 48 | case actionTypes.AUTH_SUCCESS: 49 | return authSuccess(state, action); 50 | case actionTypes.AUTH_FAIL: 51 | return authFail(state, action); 52 | case actionTypes.AUTH_LOGOUT: 53 | return authLogout(state, action); 54 | case actionTypes.AUTH_REMOVE_ERROR: 55 | return setError(state); 56 | default: 57 | return state; 58 | } 59 | }; 60 | 61 | export default reducer; 62 | -------------------------------------------------------------------------------- /src/store/utility.js: -------------------------------------------------------------------------------- 1 | export const updateObject = (oldObject, updatedProperties) => { 2 | return { 3 | ...oldObject, 4 | ...updatedProperties, 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /src/styles/js/CartPage/CartPageStyle.js: -------------------------------------------------------------------------------- 1 | const CartPageStyle = (theme) => ({ 2 | paper: { 3 | width: "auto", 4 | padding: theme.spacing(4), 5 | marginTop: theme.spacing(2), 6 | marginLeft: theme.spacing(0), 7 | [theme.breakpoints.up(1125 + theme.spacing(3) * 2)]: { 8 | width: "58vw", 9 | padding: theme.spacing(3), 10 | marginLeft: theme.spacing(3), 11 | }, 12 | }, 13 | PaymentDetailsCart: { 14 | position: "sticky", 15 | top: "15vh", 16 | marginBottom: theme.spacing(3), 17 | marginTop: theme.spacing(10), 18 | [theme.breakpoints.up(1125 + theme.spacing(3) * 2)]: { 19 | marginTop: theme.spacing(17), 20 | marginLeft: theme.spacing(-4), 21 | }, 22 | }, 23 | papercart: { 24 | padding: theme.spacing(2), 25 | }, 26 | text: { 27 | textDecoration: "line-through", 28 | }, 29 | root: { 30 | flexGrow: 1, 31 | }, 32 | image: { 33 | width: 128, 34 | height: 128, 35 | }, 36 | // TODO improve image styling and make it responsive 37 | img: { 38 | margin: "auto", 39 | display: "block", 40 | maxWidth: "100%", 41 | maxHeight: "100%", 42 | }, 43 | 44 | cartText: { 45 | marginLeft: theme.spacing(1), 46 | }, 47 | 48 | divider: { 49 | marginTop: "2vh", 50 | marginBottom: "2vh", 51 | }, 52 | ProductCardStyle: { 53 | [theme.breakpoints.up(1125 + theme.spacing(3) * 2)]: { 54 | marginLeft: theme.spacing(6), 55 | marginTop: theme.spacing(7), 56 | }, 57 | }, 58 | }); 59 | export default CartPageStyle; 60 | -------------------------------------------------------------------------------- /src/styles/js/Checkout/AddressPageStyle.js: -------------------------------------------------------------------------------- 1 | const addressPageStyle = (theme) => ({ 2 | buttons: { 3 | display: "flex", 4 | justifyContent: "flex-end", 5 | }, 6 | button: { 7 | marginBottom: theme.spacing(2), 8 | marginLeft: theme.spacing(1), 9 | }, 10 | root: { 11 | width: "100%", 12 | }, 13 | heading: { 14 | fontSize: theme.typography.pxToRem(13), 15 | flexBasis: "33.33%", 16 | flexShrink: 0, 17 | fontWeight: "700", 18 | }, 19 | secondaryHeading: { 20 | fontSize: theme.typography.pxToRem(12), 21 | color: theme.palette.text.secondary, 22 | }, 23 | shipping: { 24 | marginLeft: "3vw", 25 | fontSize: "3.5vw", 26 | fontWeight: "500", 27 | [theme.breakpoints.up(1000 + theme.spacing(2) * 2)]: { 28 | fontSize: "1.8vw", 29 | }, 30 | }, 31 | }); 32 | 33 | export default addressPageStyle; 34 | -------------------------------------------------------------------------------- /src/styles/js/Checkout/CheckoutStyle.js: -------------------------------------------------------------------------------- 1 | const checkoutstyle = (theme) => ({ 2 | layout: { 3 | width: "auto", 4 | marginLeft: theme.spacing(1), 5 | marginRight: theme.spacing(2), 6 | [theme.breakpoints.up(1000 + theme.spacing(2) * 2)]: { 7 | width: "70vw", 8 | marginLeft: theme.spacing(2), 9 | marginRight: "auto", 10 | }, 11 | }, 12 | paper: { 13 | marginTop: theme.spacing(3), 14 | marginBottom: theme.spacing(3), 15 | padding: theme.spacing(2), 16 | [theme.breakpoints.up(1125 + theme.spacing(3) * 2)]: { 17 | marginTop: theme.spacing(6), 18 | marginBottom: theme.spacing(6), 19 | padding: theme.spacing(3), 20 | }, 21 | }, 22 | PaymentDetailsCheckout: { 23 | marginBottom: theme.spacing(3), 24 | marginTop: theme.spacing(2), 25 | [theme.breakpoints.up(1125 + theme.spacing(3) * 2)]: { 26 | marginTop: theme.spacing(15), 27 | }, 28 | }, 29 | stepper: { 30 | padding: theme.spacing(3, 2, 5), 31 | }, 32 | buttons: { 33 | display: "flex", 34 | justifyContent: "flex-end", 35 | }, 36 | button: { 37 | marginTop: theme.spacing(3), 38 | marginLeft: theme.spacing(1), 39 | }, 40 | }); 41 | 42 | export default checkoutstyle; 43 | -------------------------------------------------------------------------------- /src/styles/js/Checkout/PaymentDetailsStyle.js: -------------------------------------------------------------------------------- 1 | const PaymentDetailsStyle = (theme) => ({ 2 | paperPayment: { 3 | width: "auto", 4 | padding: theme.spacing(1), 5 | marginTop: theme.spacing(2), 6 | [theme.breakpoints.up(1125 + theme.spacing(3) * 2)]: { 7 | width: "19vw", 8 | padding: theme.spacing(3), 9 | }, 10 | }, 11 | listItem: { 12 | padding: theme.spacing(1, 0), 13 | }, 14 | total: { 15 | fontWeight: 700, 16 | }, 17 | title: { 18 | marginTop: theme.spacing(2), 19 | }, 20 | }); 21 | 22 | export default PaymentDetailsStyle; 23 | -------------------------------------------------------------------------------- /src/styles/js/HomePage/HeaderBarStyle.js: -------------------------------------------------------------------------------- 1 | const defaultFont = { 2 | fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', 3 | fontWeight: "300", 4 | lineHeight: "1.5em", 5 | }; 6 | const drawerWidth = 260; 7 | 8 | const boxShadow = { 9 | boxShadow: 10 | "0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)", 11 | }; 12 | const transition = { 13 | transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)", 14 | }; 15 | const containerFluid = { 16 | paddingRight: "15px", 17 | paddingLeft: "15px", 18 | marginRight: "auto", 19 | marginLeft: "auto", 20 | width: "100%", 21 | }; 22 | const container = { 23 | ...containerFluid, 24 | "@media (min-width: 576px)": { 25 | maxWidth: "540px", 26 | }, 27 | "@media (min-width: 768px)": { 28 | maxWidth: "720px", 29 | }, 30 | "@media (min-width: 992px)": { 31 | maxWidth: "960px", 32 | }, 33 | "@media (min-width: 1200px)": { 34 | maxWidth: "1140px", 35 | }, 36 | }; 37 | 38 | const primaryColor = "#37b3f9"; 39 | const warningColor = "#ff9800"; 40 | const dangerColor = "#f44336"; 41 | const successColor = "#4caf50"; 42 | const infoColor = "#00acc1"; 43 | const roseColor = "#e91e63"; 44 | 45 | const headerStyle = { 46 | appBar: { 47 | display: "flex", 48 | border: "0", 49 | borderRadius: "3px", 50 | padding: "0.625rem 0", 51 | marginBottom: "20px", 52 | color: "#555", 53 | width: "100%", 54 | backgroundColor: "#37b3f9", 55 | boxShadow: 56 | "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)", 57 | transition: "all 150ms ease 0s", 58 | alignItems: "center", 59 | flexFlow: "row nowrap", 60 | justifyContent: "flex-start", 61 | position: "relative", 62 | zIndex: "unset", 63 | }, 64 | absolute: { 65 | position: "absolute", 66 | zIndex: "1100", 67 | }, 68 | bottom: { 69 | top: "auto", 70 | bottom: 0, 71 | }, 72 | fixed: { 73 | position: "fixed", 74 | zIndex: "1100", 75 | }, 76 | sticky: { 77 | position: "sticky", 78 | zIndex: "1100", 79 | }, 80 | container: { 81 | ...container, 82 | minHeight: "50px", 83 | flex: "1", 84 | alignItems: "center", 85 | justifyContent: "space-between", 86 | display: "flex", 87 | flexWrap: "nowrap", 88 | }, 89 | flex: { 90 | flex: 1, 91 | }, 92 | title: { 93 | ...defaultFont, 94 | lineHeight: "30px", 95 | fontSize: "18px", 96 | borderRadius: "3px", 97 | textTransform: "none", 98 | color: "inherit", 99 | padding: "8px 16px", 100 | letterSpacing: "unset", 101 | "&:hover,&:focus": { 102 | color: "inherit", 103 | background: "transparent", 104 | }, 105 | }, 106 | appResponsive: { 107 | margin: "20px 10px", 108 | }, 109 | primary: { 110 | backgroundColor: primaryColor, 111 | color: "#FFFFFF", 112 | boxShadow: 113 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(156, 39, 176, 0.46)", 114 | }, 115 | info: { 116 | backgroundColor: infoColor, 117 | color: "#FFFFFF", 118 | boxShadow: 119 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(0, 188, 212, 0.46)", 120 | }, 121 | success: { 122 | backgroundColor: successColor, 123 | color: "#FFFFFF", 124 | boxShadow: 125 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(76, 175, 80, 0.46)", 126 | }, 127 | warning: { 128 | backgroundColor: warningColor, 129 | color: "#FFFFFF", 130 | boxShadow: 131 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(255, 152, 0, 0.46)", 132 | }, 133 | danger: { 134 | backgroundColor: dangerColor, 135 | color: "#FFFFFF", 136 | boxShadow: 137 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(244, 67, 54, 0.46)", 138 | }, 139 | rose: { 140 | backgroundColor: roseColor, 141 | color: "#FFFFFF", 142 | boxShadow: 143 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(233, 30, 99, 0.46)", 144 | }, 145 | transparent: { 146 | backgroundColor: "transparent !important", 147 | boxShadow: "none", 148 | paddingTop: "25px", 149 | color: "#FFFFFF", 150 | }, 151 | blue: { 152 | border: "0", 153 | padding: "0.625rem 0", 154 | marginBottom: "20px", 155 | color: "#000000", 156 | backgroundColor: "#37b3f9 !important", 157 | boxShadow: 158 | "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)", 159 | }, 160 | dark: { 161 | color: "#FFFFFF", 162 | backgroundColor: "#212121 !important", 163 | boxShadow: 164 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(33, 33, 33, 0.46)", 165 | }, 166 | white: { 167 | border: "0", 168 | padding: "0.625rem 0", 169 | marginBottom: "20px", 170 | color: "#555", 171 | backgroundColor: "#fff !important", 172 | boxShadow: 173 | "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)", 174 | }, 175 | drawerPaper: { 176 | border: "none", 177 | bottom: "0", 178 | transitionProperty: "top, bottom, width", 179 | transitionDuration: ".2s, .2s, .35s", 180 | transitionTimingFunction: "linear, linear, ease", 181 | width: drawerWidth, 182 | ...boxShadow, 183 | position: "fixed", 184 | display: "block", 185 | top: "0", 186 | height: "100vh", 187 | right: "0", 188 | left: "auto", 189 | visibility: "visible", 190 | // overflowY: "visible", 191 | borderTop: "none", 192 | textAlign: "left", 193 | paddingRight: "0px", 194 | paddingLeft: "0", 195 | ...transition, 196 | }, 197 | }; 198 | 199 | export default headerStyle; 200 | -------------------------------------------------------------------------------- /src/styles/js/HomePage/HomePageContainerStyle.js: -------------------------------------------------------------------------------- 1 | const parallaxStyle = { 2 | parallax: { 3 | height: "100vh", 4 | maxHeight: "1000px", 5 | // overflow: "hidden", 6 | position: "relative", 7 | backgroundPosition: "center center", 8 | backgroundSize: "cover", 9 | margin: "0", 10 | padding: "0", 11 | border: "0", 12 | display: "flex", 13 | alignItems: "center", 14 | }, 15 | filter: { 16 | "&:before": { 17 | background: "rgba(0, 0, 0, 0.5)", 18 | }, 19 | "&:after,&:before": { 20 | position: "absolute", 21 | zIndex: "1", 22 | width: "100%", 23 | height: "100%", 24 | display: "block", 25 | left: "0", 26 | top: "0", 27 | content: "''", 28 | }, 29 | }, 30 | small: { 31 | height: "380px", 32 | }, 33 | }; 34 | 35 | export default parallaxStyle; 36 | -------------------------------------------------------------------------------- /src/styles/js/HomePage/HomePageStyle.js: -------------------------------------------------------------------------------- 1 | const containerFluid = { 2 | paddingRight: "15px", 3 | paddingLeft: "15px", 4 | marginRight: "auto", 5 | marginLeft: "auto", 6 | width: "100%", 7 | }; 8 | const container = { 9 | ...containerFluid, 10 | "@media (min-width: 576px)": { 11 | maxWidth: "540px", 12 | }, 13 | "@media (min-width: 768px)": { 14 | maxWidth: "720px", 15 | }, 16 | "@media (min-width: 992px)": { 17 | maxWidth: "960px", 18 | }, 19 | "@media (min-width: 1200px)": { 20 | maxWidth: "1140px", 21 | }, 22 | }; 23 | 24 | const componentsStyle = { 25 | container, 26 | brand: { 27 | color: "#FFFFFF", 28 | textAlign: "left", 29 | }, 30 | title: { 31 | fontSize: "4.2rem", 32 | fontWeight: "600", 33 | display: "inline-block", 34 | position: "relative", 35 | }, 36 | subtitle: { 37 | fontSize: "1.313rem", 38 | maxWidth: "500px", 39 | margin: "10px 0 0", 40 | }, 41 | main: { 42 | background: "#FFFFFF", 43 | position: "relative", 44 | zIndex: "3", 45 | }, 46 | mainRaised: { 47 | margin: "-4.5vw 1.5vw 0vw", 48 | borderRadius: "6px", 49 | boxShadow: 50 | "0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)", 51 | }, 52 | link: { 53 | textDecoration: "none", 54 | }, 55 | searchbarPosition: { 56 | marginTop: "-45vh", 57 | }, 58 | textCenter: { 59 | textAlign: "center", 60 | }, 61 | }; 62 | 63 | export default componentsStyle; 64 | -------------------------------------------------------------------------------- /src/styles/js/HomePage/LeftPaneStyle.js: -------------------------------------------------------------------------------- 1 | const containerFluid = { 2 | paddingRight: "15px", 3 | paddingLeft: "15px", 4 | marginRight: "auto", 5 | marginLeft: "auto", 6 | width: "100%", 7 | }; 8 | const container = { 9 | ...containerFluid, 10 | "@media (min-width: 576px)": { 11 | maxWidth: "540px", 12 | }, 13 | "@media (min-width: 768px)": { 14 | maxWidth: "720px", 15 | }, 16 | "@media (min-width: 992px)": { 17 | maxWidth: "960px", 18 | }, 19 | "@media (min-width: 1200px)": { 20 | maxWidth: "1140px", 21 | }, 22 | }; 23 | const typographyStyle = (theme) => ({ 24 | paper: { 25 | marginTop: theme.spacing(3), 26 | marginBottom: theme.spacing(3), 27 | padding: theme.spacing(0, 2, 2, 2), 28 | width: "90%", 29 | margin: "auto", 30 | borderRadius: "8px", 31 | }, 32 | searchbarPlacement: { 33 | position: "absolute !important", 34 | top: "5vh !important", 35 | left: "50% !important", 36 | transform: "translate(-50%, -50%) !important", 37 | zIndex: "1", 38 | [theme.breakpoints.down(400 + theme.spacing(3) * 2)]: { 39 | // maxWidth: "90vw", 40 | }, 41 | }, 42 | searchbarPlacement1: { 43 | padding: "2px 4px", 44 | display: "flex", 45 | alignItems: "center", 46 | width: 400, 47 | [theme.breakpoints.down(400 + theme.spacing(3) * 2)]: { 48 | maxWidth: "90vw", 49 | }, 50 | }, 51 | section: { 52 | padding: "70px 0", 53 | }, 54 | iconStyle: { 55 | marginLeft: "25px", 56 | color: "#37b3f9 !important", 57 | }, 58 | container, 59 | space50: { 60 | height: "50px", 61 | display: "block", 62 | }, 63 | title: { 64 | color: "#121111", 65 | margin: "1.75rem 0 0.875rem", 66 | textDecoration: "none", 67 | fontWeight: "700", 68 | fontSize: "20px", 69 | paddingLeft: "15px", 70 | }, 71 | typo: { 72 | paddingLeft: "25%", 73 | marginBottom: "40px", 74 | position: "relative", 75 | width: "100%", 76 | }, 77 | note: { 78 | fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', 79 | color: "#777777", 80 | display: "block", 81 | fontWeight: "500", 82 | fontSize: "13px", 83 | lineHeight: "0px", 84 | paddingLeft: "15px", 85 | }, 86 | marginLeft: { 87 | marginLeft: "auto !important", 88 | }, 89 | h1: { 90 | fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"', 91 | fontWeight: "300", 92 | lineHeight: " 1.5em", 93 | }, 94 | img_responsive: { 95 | height: "100vh", 96 | maxHeight: "1000px", 97 | position: "relative", 98 | backgroundPosition: "center center", 99 | backgroundSize: "cover", 100 | margin: "0", 101 | padding: "0", 102 | border: "0", 103 | display: "flex", 104 | alignItems: "center", 105 | }, 106 | paperAnchorLeft: { 107 | width: "28.5vw", 108 | }, 109 | cardPos: { 110 | display: "flex", 111 | marginTop: "-10px", 112 | height: "20px", 113 | }, 114 | shopName: { 115 | marginTop: " 2vh !important", 116 | paddingLeft: "10px", 117 | fontSize: "1.3rem", 118 | fontWeight: "500", 119 | }, 120 | rating: { 121 | marginBottom: "0 !important", 122 | marginTop: "1.8vh !important", 123 | 124 | "@media (min-width: 992px)": { 125 | maxWidth: "960px", 126 | marginTop: "1.8vh !important", 127 | }, 128 | }, 129 | timing: { 130 | paddingLeft: "10px", 131 | color: "#777777", 132 | fontSize: "0.8rem", 133 | fontWeight: "400", 134 | marginBottom: "2vh", 135 | marginTop: "-2vh", 136 | }, 137 | textfieldstyle: { 138 | width: "1vw", 139 | }, 140 | MuiInputBaseInput: { 141 | textAlign: "center !important", 142 | }, 143 | review: { 144 | width: "50%", 145 | borderColor: "#37b3f9", 146 | color: "#37b3f9", 147 | alignItems: "center", 148 | justifyContent: "center", 149 | }, 150 | chip: { 151 | marginTop: "2vh", 152 | width: "50%", 153 | margin: "auto", 154 | borderColor: "#37b3f9", 155 | borderWidth: "2px", 156 | color: "#37b3f9", 157 | backgroundColor: "white", 158 | padding: "17px", 159 | }, 160 | MuiChipIcon: { 161 | color: "#37b3f9", 162 | }, 163 | reviewheading: { 164 | fontSize: "1.5vw", 165 | fontWeight: "500", 166 | paddingLeft: "10px", 167 | marginTop: "2vh", 168 | }, 169 | reviewcontainer: { 170 | width: "85%", 171 | margin: "auto", 172 | marginTop: "2.5vh", 173 | borderRadius: "10px", 174 | marginBottom: "2vh", 175 | }, 176 | reviewname: { 177 | fontWeight: "500 !important", 178 | fontSize: "1.1rem", 179 | paddingTop: theme.spacing(1), 180 | }, 181 | review2: { 182 | fontWeight: "500", 183 | fontSize: "0.8rem", 184 | color: "#777777", 185 | lineHeight: "15px", 186 | }, 187 | reviewtext: { 188 | marginBottom: "1.3vh", 189 | }, 190 | bestdeals: { 191 | fontWeight: "500", 192 | fontSize: "1.5rem", 193 | textAlign: "center", 194 | marginTop: "2vh", 195 | }, 196 | morereviews: { 197 | fontWeight: "550", 198 | margin: "auto", 199 | }, 200 | onHover: { 201 | "&:hover": { 202 | // backgroundColor: "#37b3f9", 203 | // color: "green", 204 | border: "2px solid #37b3f9", 205 | }, 206 | }, 207 | }); 208 | 209 | export default typographyStyle; 210 | -------------------------------------------------------------------------------- /src/styles/js/HomePage/customDropdownStyle.js: -------------------------------------------------------------------------------- 1 | const defaultFont = { 2 | fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', 3 | fontWeight: "300", 4 | lineHeight: "1.5em", 5 | }; 6 | const primaryBoxShadow = { 7 | boxShadow: 8 | "0 12px 20px -10px rgba(156, 39, 176, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2)", 9 | }; 10 | const infoBoxShadow = { 11 | boxShadow: 12 | "0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2)", 13 | }; 14 | const successBoxShadow = { 15 | boxShadow: 16 | "0 12px 20px -10px rgba(76, 175, 80, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(76, 175, 80, 0.2)", 17 | }; 18 | const warningBoxShadow = { 19 | boxShadow: 20 | "0 12px 20px -10px rgba(255, 152, 0, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 152, 0, 0.2)", 21 | }; 22 | const dangerBoxShadow = { 23 | boxShadow: 24 | "0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2)", 25 | }; 26 | const roseBoxShadow = { 27 | boxShadow: 28 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4)", 29 | }; 30 | 31 | const primaryColor = "#37b3f9"; 32 | const warningColor = "#ff9800"; 33 | const dangerColor = "#f44336"; 34 | const successColor = "#4caf50"; 35 | const infoColor = "#00acc1"; 36 | const roseColor = "#e91e63"; 37 | 38 | const customDropdownStyle = (theme) => ({ 39 | popperClose: { 40 | pointerEvents: "none", 41 | }, 42 | dropdown: { 43 | borderRadius: "3px", 44 | border: "0", 45 | boxShadow: "0 2px 5px 0 rgba(0, 0, 0, 0.26)", 46 | top: "100%", 47 | zIndex: "1000", 48 | minWidth: "160px", 49 | padding: "5px 0", 50 | margin: "2px 0 0", 51 | fontSize: "14px", 52 | textAlign: "left", 53 | listStyle: "none", 54 | backgroundColor: "#fff", 55 | backgroundClip: "padding-box", 56 | }, 57 | menuList: { 58 | padding: "0", 59 | }, 60 | popperResponsive: { 61 | zIndex: "1200", 62 | [theme.breakpoints.down("sm")]: { 63 | zIndex: "1640", 64 | // position: "static", 65 | float: "none", 66 | width: "auto", 67 | marginTop: "0", 68 | backgroundColor: "transparent", 69 | border: "0", 70 | boxShadow: "none", 71 | color: "black", 72 | }, 73 | }, 74 | dropdownItem: { 75 | ...defaultFont, 76 | fontSize: "13px", 77 | padding: "10px 20px", 78 | margin: "0 5px", 79 | borderRadius: "2px", 80 | // position: " !important", 81 | transition: "all 150ms linear", 82 | display: "block", 83 | clear: "both", 84 | fontWeight: "400", 85 | height: "fit-content", 86 | color: "#333", 87 | whiteSpace: "nowrap", 88 | minHeight: "unset", 89 | }, 90 | blackHover: { 91 | "&:hover": { 92 | boxShadow: 93 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(33, 33, 33, 0.4)", 94 | backgroundColor: "#212121", 95 | color: "#fff", 96 | }, 97 | }, 98 | primaryHover: { 99 | "&:hover": { 100 | backgroundColor: primaryColor, 101 | color: "#FFFFFF", 102 | ...primaryBoxShadow, 103 | }, 104 | }, 105 | infoHover: { 106 | "&:hover": { 107 | backgroundColor: infoColor, 108 | color: "#FFFFFF", 109 | ...infoBoxShadow, 110 | }, 111 | }, 112 | successHover: { 113 | "&:hover": { 114 | backgroundColor: successColor, 115 | color: "#FFFFFF", 116 | ...successBoxShadow, 117 | }, 118 | }, 119 | warningHover: { 120 | "&:hover": { 121 | backgroundColor: warningColor, 122 | color: "#FFFFFF", 123 | ...warningBoxShadow, 124 | }, 125 | }, 126 | dangerHover: { 127 | "&:hover": { 128 | backgroundColor: dangerColor, 129 | color: "#FFFFFF", 130 | ...dangerBoxShadow, 131 | }, 132 | }, 133 | roseHover: { 134 | "&:hover": { 135 | backgroundColor: roseColor, 136 | color: "#FFFFFF", 137 | ...roseBoxShadow, 138 | }, 139 | }, 140 | dropdownItemRTL: { 141 | textAlign: "right", 142 | }, 143 | dropdownDividerItem: { 144 | margin: "5px 0", 145 | backgroundColor: "rgba(0, 0, 0, 0.12)", 146 | height: "1px", 147 | // overflow: "hidden", 148 | }, 149 | buttonIcon: { 150 | width: "20px", 151 | height: "20px", 152 | }, 153 | caret: { 154 | transition: "all 150ms ease-in", 155 | display: "inline-block", 156 | width: "0", 157 | height: "0", 158 | marginLeft: "4px", 159 | verticalAlign: "middle", 160 | borderTop: "4px solid", 161 | borderRight: "4px solid transparent", 162 | borderLeft: "4px solid transparent", 163 | }, 164 | caretActive: { 165 | transform: "rotate(180deg)", 166 | }, 167 | caretRTL: { 168 | marginRight: "4px", 169 | }, 170 | dropdownHeader: { 171 | display: "block", 172 | padding: "0.1875rem 1.25rem", 173 | fontSize: "0.75rem", 174 | lineHeight: "1.428571", 175 | color: "#777", 176 | whiteSpace: "nowrap", 177 | fontWeight: "inherit", 178 | marginTop: "10px", 179 | minHeight: "unset", 180 | "&:hover,&:focus": { 181 | backgroundColor: "transparent", 182 | cursor: "auto", 183 | }, 184 | }, 185 | noLiPadding: { 186 | padding: "0", 187 | }, 188 | }); 189 | 190 | export default customDropdownStyle; 191 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { core_endpoint, accounts_endpoint } from "./constants"; 3 | 4 | export const authCoreAxios = axios.create({ 5 | baseURL: core_endpoint, 6 | headers: { 7 | Authorization: `Bearer ${localStorage.getItem("token")}`, 8 | }, 9 | }); 10 | 11 | export const authAccountsAxios = axios.create({ 12 | baseURL: accounts_endpoint, 13 | headers: { 14 | Authorization: `Bearer ${localStorage.getItem("token")}`, 15 | }, 16 | }); 17 | --------------------------------------------------------------------------------