├── .gitignore ├── project ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── assets │ │ └── Logo.png │ ├── image │ │ └── SizeChart.jpeg │ ├── components │ │ ├── Confirm │ │ │ ├── Logo.png │ │ │ ├── Header.jsx │ │ │ ├── Product.jsx │ │ │ ├── Footer.jsx │ │ │ └── Confirm.jsx │ │ ├── Delivery │ │ │ ├── Logo.png │ │ │ ├── Header.jsx │ │ │ ├── Footer.jsx │ │ │ ├── Address.jsx │ │ │ └── Delivery.jsx │ │ ├── Payment │ │ │ ├── Logo.png │ │ │ ├── jcb.png │ │ │ ├── visa.png │ │ │ ├── dinersClub.png │ │ │ ├── masterCard.jpg │ │ │ ├── unionPay.png │ │ │ ├── americanExpress.png │ │ │ ├── Header.jsx │ │ │ ├── Footer.jsx │ │ │ └── Payment.jsx │ │ ├── Products.css │ │ ├── Navbar.css │ │ ├── Pagination.jsx │ │ ├── sidebar │ │ │ ├── Header.jsx │ │ │ └── Sidebar.jsx │ │ ├── Wishlist.jsx │ │ ├── Footer.jsx │ │ ├── ListChild.jsx │ │ ├── Carousel.jsx │ │ ├── Products.jsx │ │ ├── ProductList.jsx │ │ ├── Navbar.jsx │ │ └── ProductDetails.jsx │ ├── redux │ │ ├── social │ │ │ ├── social.types.js │ │ │ ├── social.actions.js │ │ │ └── social.reducer.js │ │ ├── products │ │ │ ├── ProdactionTypes.js │ │ │ ├── ProdReducer.js │ │ │ └── Prodaction.js │ │ ├── auth │ │ │ ├── auth.types.js │ │ │ ├── auth.actions.js │ │ │ └── auth.reducer.js │ │ └── store.js │ ├── App.test.js │ ├── App.jsx │ ├── index.js │ ├── App.css │ ├── components_css │ │ └── ProductDetails.css │ └── pages │ │ ├── AllRoutes.jsx │ │ ├── Home.jsx │ │ └── Social.jsx ├── .gitignore ├── package.json └── README.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Local Netlify folder 2 | .netlify 3 | -------------------------------------------------------------------------------- /project/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /project/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/public/favicon.ico -------------------------------------------------------------------------------- /project/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/public/logo192.png -------------------------------------------------------------------------------- /project/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/public/logo512.png -------------------------------------------------------------------------------- /project/src/assets/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/assets/Logo.png -------------------------------------------------------------------------------- /project/src/image/SizeChart.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/image/SizeChart.jpeg -------------------------------------------------------------------------------- /project/src/components/Confirm/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Confirm/Logo.png -------------------------------------------------------------------------------- /project/src/components/Delivery/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Delivery/Logo.png -------------------------------------------------------------------------------- /project/src/components/Payment/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Payment/Logo.png -------------------------------------------------------------------------------- /project/src/components/Payment/jcb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Payment/jcb.png -------------------------------------------------------------------------------- /project/src/components/Payment/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Payment/visa.png -------------------------------------------------------------------------------- /project/src/components/Payment/dinersClub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Payment/dinersClub.png -------------------------------------------------------------------------------- /project/src/components/Payment/masterCard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Payment/masterCard.jpg -------------------------------------------------------------------------------- /project/src/components/Payment/unionPay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Payment/unionPay.png -------------------------------------------------------------------------------- /project/src/components/Payment/americanExpress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/himanshudestiny/Nyresa/HEAD/project/src/components/Payment/americanExpress.png -------------------------------------------------------------------------------- /project/src/redux/social/social.types.js: -------------------------------------------------------------------------------- 1 | export const USER_LOADING = "users/loading"; 2 | export const USER_ERROR = "users/error"; 3 | 4 | export const ADD_USER = "users/add"; 5 | -------------------------------------------------------------------------------- /project/src/redux/products/ProdactionTypes.js: -------------------------------------------------------------------------------- 1 | export const GET_PRODUCT = "get/products"; 2 | 3 | export const Loading = "products/loading"; 4 | 5 | export const Filter = "data/filter"; 6 | -------------------------------------------------------------------------------- /project/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 | -------------------------------------------------------------------------------- /project/src/redux/auth/auth.types.js: -------------------------------------------------------------------------------- 1 | export const AUTH_SIGN_IN_LOADING = "auth/signin/loading"; 2 | export const AUTH_SIGN_IN_SUCCESS = "auth/signin/success"; 3 | export const AUTH_SIGN_IN_ERROR = "auth/signin/error"; 4 | export const AUTH_SIGN_OUT = "auth/signout"; 5 | 6 | export const RESET_AUTH = "auth/reset"; 7 | -------------------------------------------------------------------------------- /project/.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 | -------------------------------------------------------------------------------- /project/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Navbar from "./components/Navbar"; 3 | import AllRoutes from "./pages/AllRoutes"; 4 | import { useEffect } from "react"; 5 | 6 | function App() { 7 | useEffect(() => { 8 | document.title = "NYRESA"; 9 | }, []); 10 | 11 | return ( 12 |
13 | 14 | 15 |
16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /project/src/redux/social/social.actions.js: -------------------------------------------------------------------------------- 1 | import { USER_LOADING, USER_ERROR, ADD_USER } from "./social.types"; 2 | import axios from "axios"; 3 | 4 | export const addUser = (newUser) => async (dispatch) => { 5 | dispatch({ type: USER_LOADING }); 6 | try { 7 | let res = axios.post("https://nyresa-database.vercel.app/users", { 8 | ...newUser, 9 | }); 10 | dispatch({ type: ADD_USER, payload: res.data }); 11 | } catch (error) { 12 | dispatch({ type: USER_ERROR, payload: error.message }); 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /project/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import { ChakraProvider } from "@chakra-ui/react"; 5 | import { BrowserRouter } from "react-router-dom"; 6 | import { Provider as ReduxProvider } from "react-redux"; 7 | import { store } from "./redux/store"; 8 | 9 | const root = ReactDOM.createRoot(document.getElementById("root")); 10 | root.render( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /project/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 | -------------------------------------------------------------------------------- /project/src/redux/auth/auth.actions.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { 3 | AUTH_SIGN_IN_LOADING, 4 | AUTH_SIGN_IN_SUCCESS, 5 | AUTH_SIGN_IN_ERROR, 6 | AUTH_SIGN_OUT, 7 | } from "./auth.types"; 8 | 9 | export const login = (creds) => async (dispatch) => { 10 | dispatch({ type: AUTH_SIGN_IN_LOADING }); 11 | try { 12 | let res = await axios.post("https://reqres.in/api/login", creds); 13 | dispatch({ type: AUTH_SIGN_IN_SUCCESS, payload: res.data }); 14 | } catch (error) { 15 | dispatch({ type: AUTH_SIGN_IN_ERROR, payload: error.message }); 16 | } 17 | }; 18 | 19 | export const logout = () => ({ type: AUTH_SIGN_OUT }); 20 | -------------------------------------------------------------------------------- /project/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { 2 | legacy_createStore, 3 | applyMiddleware, 4 | combineReducers, 5 | compose, 6 | } from "redux"; 7 | import thunk from "redux-thunk"; 8 | import { authReducer } from "./auth/auth.reducer"; 9 | import { socialReducer } from "./social/social.reducer"; 10 | import { prodReducer } from "./products/ProdReducer"; 11 | 12 | const rootReducer = combineReducers({ 13 | socialManager: socialReducer, 14 | authManager: authReducer, 15 | prodManager: prodReducer, 16 | }); 17 | 18 | const composer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 19 | 20 | export const store = legacy_createStore( 21 | rootReducer, 22 | composer(applyMiddleware(thunk)) 23 | ); 24 | -------------------------------------------------------------------------------- /project/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 | -------------------------------------------------------------------------------- /project/src/redux/products/ProdReducer.js: -------------------------------------------------------------------------------- 1 | import { GET_PRODUCT, Loading, Filter } from "./ProdactionTypes"; 2 | 3 | const init = { 4 | loading: false, 5 | data: [], 6 | }; 7 | 8 | export const prodReducer = (state = init, action) => { 9 | switch (action.type) { 10 | case Loading: { 11 | return { 12 | ...state, 13 | loading: true, 14 | }; 15 | } 16 | 17 | case GET_PRODUCT: { 18 | return { 19 | ...state, 20 | loading: false, 21 | data: action.payload, 22 | }; 23 | } 24 | 25 | // case Filter: { 26 | // return { 27 | // ...state, 28 | // loading: false, 29 | // data: action.payload, 30 | // }; 31 | // } 32 | 33 | default: { 34 | return state; 35 | } 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /project/src/redux/social/social.reducer.js: -------------------------------------------------------------------------------- 1 | import { USER_LOADING, USER_ERROR, ADD_USER } from "./social.types"; 2 | 3 | const initialState = { 4 | loading: false, 5 | error: false, 6 | users: [], 7 | }; 8 | 9 | export const socialReducer = (state = initialState, { type, payload }) => { 10 | switch (type) { 11 | case USER_LOADING: { 12 | return { 13 | ...state, 14 | loading: true, 15 | }; 16 | } 17 | case USER_ERROR: { 18 | return { 19 | ...state, 20 | loading: false, 21 | error: payload || true, 22 | }; 23 | } 24 | case ADD_USER: { 25 | return { 26 | ...state, 27 | loading: false, 28 | users: [...state.users, payload], 29 | }; 30 | } 31 | 32 | default: 33 | return state; 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /project/src/components/Products.css: -------------------------------------------------------------------------------- 1 | *{ 2 | /* color:rgb(0, 0, 0) */ 3 | } 4 | 5 | .hovereffect:hover{ 6 | color: black; 7 | } 8 | 9 | .sortsec{ 10 | display: flex; 11 | justify-content: space-between; 12 | width: 100%; 13 | margin: auto; 14 | 15 | 16 | } 17 | 18 | @media only screen and (max-width:500px) { 19 | .sortsec{ 20 | justify-content: space-around; 21 | } 22 | 23 | } 24 | 25 | .subtitle{ 26 | font-family:'Courier New', Courier, monospace,monospace; 27 | font-weight: bold; 28 | color: gray; 29 | } 30 | 31 | .subtitle:hover{ 32 | color: black; 33 | } 34 | .price{ 35 | display:flex; 36 | justify-content: space-between; 37 | 38 | width: 60%; 39 | margin: auto; 40 | margin-top: 8px; 41 | 42 | } 43 | 44 | .eldiv:hover{ 45 | box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px; 46 | } 47 | -------------------------------------------------------------------------------- /project/src/components/Navbar.css: -------------------------------------------------------------------------------- 1 | .NavOne { 2 | font-family: "Arial, Helvetica, sans-serif"; 3 | font-weight: 600; 4 | width: 95%; 5 | margin: auto; 6 | } 7 | 8 | .NavOne p { 9 | color: rgb(89, 88, 88); 10 | } 11 | 12 | .NavOne p:hover { 13 | color: black; 14 | } 15 | .categ { 16 | padding: 20px; 17 | font-family: "Century Gothic"; 18 | font-weight: 400; 19 | text-transform: uppercase; 20 | } 21 | .categ:hover { 22 | background-color: #f2f2f2; 23 | } 24 | #heart { 25 | color: rgb(89, 88, 88); 26 | align-items: "center"; 27 | justify-content: "center"; 28 | } 29 | #heart:hover { 30 | color: black; 31 | } 32 | 33 | #cart { 34 | color: rgb(89, 88, 88); 35 | } 36 | #cart:hover { 37 | color: black; 38 | } 39 | .stickyNav { 40 | color: #9f2943; 41 | text-align: center; 42 | position: -webkit-sticky; 43 | 44 | background-color: #f2f2f2; 45 | position: sticky; 46 | top: 0; 47 | } 48 | -------------------------------------------------------------------------------- /project/src/components_css/ProductDetails.css: -------------------------------------------------------------------------------- 1 | .Product_details_Mega_container{ 2 | width: 80%; 3 | height: auto; 4 | display: flex; 5 | } 6 | .Product_details_Mega_container div{ 7 | width: 50%; 8 | } 9 | .Product_details_Mega_container_second_child{ 10 | text-align: left; 11 | } 12 | .Product_details_Mega_container_first_child{ 13 | display: flex; 14 | } 15 | 16 | @media screen and (max-width: 800px) { 17 | .Product_details_Mega_container 18 | { 19 | display:grid; 20 | } 21 | .Product_details_Mega_container div{ 22 | width: 100%; 23 | } 24 | } 25 | 26 | .checkoutDiv{ 27 | margin-top: 40px; 28 | margin-bottom: 40px; 29 | padding: '10px'; 30 | display: flex; 31 | justify-content: space-around; 32 | } 33 | 34 | 35 | @media screen and (max-width: 800px) 36 | { 37 | .checkoutDiv{ 38 | display: grid; 39 | } 40 | .checkoutDiv_button 41 | { 42 | margin-top: 10px; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Nyresa

2 | 3 |

Description

4 |

Nyresa is basically an e-commerce website where users can buy products such as clothings, apparels etc.

5 | Nyresa 6 | Nyresa 7 | Nyresa 8 | Nyresa 9 | Nyresa 10 |

Tech Stacks we have used

11 | 17 | 18 |

Features

19 | 28 | 29 |

Deployed Link

30 |

https://numerous-governor-3295.netlify.app/

31 | 32 |

Presentation Link

33 |

https://drive.google.com/file/d/1TPtnOJjYIUWNhWusZLpNrRyZ4duzLj-i/view

34 | -------------------------------------------------------------------------------- /project/src/components/Pagination.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ChevronRightIcon, ChevronLeftIcon } from "@chakra-ui/icons"; 3 | 4 | const Pagination = ({ count, currentPage, updateCurrentPage }) => { 5 | let arr = new Array(count).fill(0); 6 | 7 | return ( 8 |
9 | 15 | 16 | {arr.map((el, i) => ( 17 | 26 | ))} 27 | 28 | 34 |
35 | ); 36 | }; 37 | 38 | export default Pagination; 39 | -------------------------------------------------------------------------------- /project/src/redux/auth/auth.reducer.js: -------------------------------------------------------------------------------- 1 | import { 2 | AUTH_SIGN_IN_LOADING, 3 | AUTH_SIGN_IN_SUCCESS, 4 | AUTH_SIGN_IN_ERROR, 5 | AUTH_SIGN_OUT, 6 | RESET_AUTH, 7 | } from "./auth.types"; 8 | 9 | const initialState = { 10 | loading: false, 11 | data: { 12 | token: "", 13 | isAuth: false, 14 | }, 15 | error: false, 16 | }; 17 | 18 | export const authReducer = (state = initialState, { type, payload }) => { 19 | switch (type) { 20 | case AUTH_SIGN_IN_LOADING: { 21 | return { 22 | ...state, 23 | loading: true, 24 | }; 25 | } 26 | case AUTH_SIGN_IN_SUCCESS: { 27 | return { 28 | ...state, 29 | loading: false, 30 | data: { 31 | token: payload.token, 32 | isAuth: true, 33 | }, 34 | }; 35 | } 36 | case AUTH_SIGN_IN_ERROR: { 37 | return { 38 | ...state, 39 | loading: false, 40 | error: true, 41 | }; 42 | } 43 | case AUTH_SIGN_OUT: { 44 | return { 45 | ...state, 46 | data: { 47 | token: "", 48 | isAuth: false, 49 | }, 50 | }; 51 | } 52 | case RESET_AUTH: { 53 | return { 54 | state: initialState, 55 | }; 56 | } 57 | 58 | default: 59 | return state; 60 | } 61 | }; 62 | -------------------------------------------------------------------------------- /project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/icons": "^2.0.13", 7 | "@chakra-ui/react": "^2.4.3", 8 | "@emotion/react": "^11.10.5", 9 | "@emotion/styled": "^11.10.5", 10 | "@testing-library/jest-dom": "^5.16.5", 11 | "@testing-library/react": "^13.4.0", 12 | "@testing-library/user-event": "^13.5.0", 13 | "axios": "^1.2.1", 14 | "framer-motion": "^7.7.2", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-icons": "^4.7.1", 18 | "react-redux": "^8.0.5", 19 | "react-router-dom": "^6.4.5", 20 | "react-scripts": "5.0.1", 21 | "react-slick": "^0.29.0", 22 | "redux": "^4.2.0", 23 | "redux-thunk": "^2.4.2", 24 | "swiper": "^8.4.5", 25 | "web-vitals": "^2.1.4" 26 | }, 27 | "scripts": { 28 | "start": "react-scripts start", 29 | "build": "react-scripts build", 30 | "test": "react-scripts test", 31 | "eject": "react-scripts eject" 32 | }, 33 | "eslintConfig": { 34 | "extends": [ 35 | "react-app", 36 | "react-app/jest" 37 | ] 38 | }, 39 | "browserslist": { 40 | "production": [ 41 | ">0.2%", 42 | "not dead", 43 | "not op_mini all" 44 | ], 45 | "development": [ 46 | "last 1 chrome version", 47 | "last 1 firefox version", 48 | "last 1 safari version" 49 | ] 50 | }, 51 | "homepage": "." 52 | } 53 | -------------------------------------------------------------------------------- /project/src/pages/AllRoutes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Routes, Route } from "react-router-dom"; 3 | import Home from "./Home"; 4 | import Social from "./Social"; 5 | import ProductDetails from "../components/ProductDetails"; 6 | import Products from "../components/Products"; 7 | import ProductList from "../components/ProductList"; 8 | import Payment from "./../components/Payment/Payment"; 9 | import Delivery from "./../components/Delivery/Delivery"; 10 | import Confirm from "./../components/Confirm/Confirm"; 11 | import Wishlist from "../components/Wishlist"; 12 | 13 | const AllRoutes = () => { 14 | return ( 15 |
16 | 17 | } /> 18 | } /> 19 | } /> 20 | } /> 21 | } /> 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | } /> 27 | } /> 28 | } /> 29 | 30 |
31 | ); 32 | }; 33 | 34 | export default AllRoutes; 35 | -------------------------------------------------------------------------------- /project/src/components/Delivery/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Logo from "./Logo.png"; 4 | 5 | import { Grid, GridItem } from "@chakra-ui/react"; 6 | 7 | const Header = () => { 8 | return ( 9 |
10 | Logo 20 | 21 | 36 | 37 |

SHOPPING BAG

38 | 39 | 40 |

SIGN IN

41 | 42 | 49 |

DELIVERY

50 | 51 | 52 |

PAYMENT

53 | 54 | 55 |

CONFIRM

56 | 57 | 58 |
59 | ); 60 | }; 61 | 62 | export default Header; 63 | -------------------------------------------------------------------------------- /project/src/components/Confirm/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Logo from "./Logo.png"; 4 | 5 | import { Grid, GridItem } from "@chakra-ui/react"; 6 | 7 | const Header = () => { 8 | return ( 9 |
10 | Logo 20 | 21 | 36 | 37 |

SHOPPING BAG

38 | 39 | 40 |

SIGN IN

41 | 42 | 43 |

DELIVERY

44 | 45 | 46 |

PAYMENT

47 | 48 | 49 |

56 | CONFIRM 57 |

58 | 59 | 60 |
61 | ); 62 | }; 63 | 64 | export default Header; 65 | -------------------------------------------------------------------------------- /project/src/components/Payment/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Logo from "./Logo.png"; 4 | 5 | import { Grid, GridItem } from "@chakra-ui/react"; 6 | 7 | const Header = () => { 8 | return ( 9 |
10 | Logo 20 | 21 | 36 | 37 |

SHOPPING BAG

38 | 39 | 40 |

SIGN IN

41 | 42 | 43 |

DELIVERY

44 | 45 | 46 |

53 | PAYMENT 54 |

55 | 56 | 57 |

CONFIRM

58 | 59 | 60 |
61 | ); 62 | }; 63 | 64 | export default Header; 65 | -------------------------------------------------------------------------------- /project/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /project/src/components/sidebar/Header.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Text, Flex, Select } from "@chakra-ui/react"; 2 | import { useEffect } from "react"; 3 | import { FaListUl } from "react-icons/fa"; 4 | import Pagination from "../Pagination"; 5 | import "../Products.css"; 6 | 7 | const Header = ({ 8 | showSidebarButton = true, 9 | onShowSidebar, 10 | count, 11 | page, 12 | updateCurrentPage, 13 | sortorder, 14 | category, 15 | }) => { 16 | 17 | 18 | 19 | const handlechange = (e) => { 20 | sortorder(e.target.value); 21 | 22 | }; 23 | 24 | // useEffect(()=>{ 25 | 26 | // },[count,category,sortorder,page]) 27 | 28 | return ( 29 | 30 | 31 | {showSidebarButton && ( 32 | 33 | Filter 34 | 35 | 36 | 37 | 38 | )} 39 | 40 | 41 | 42 | 43 | {category === "Mens" ? 108 : category === "Womens" ? 102 : 98}{" "} 44 | Products 45 | 46 | 47 | 59 | 60 | {!showSidebarButton && ( 61 | 66 | )} 67 | 68 | 69 | 70 | 71 | ); 72 | }; 73 | 74 | export default Header; 75 | -------------------------------------------------------------------------------- /project/src/redux/products/Prodaction.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable array-callback-return */ 2 | import axios from "axios"; 3 | import { GET_PRODUCT, Loading, Filter } from "./ProdactionTypes"; 4 | 5 | export const getdata = (cat = "Mens",page = 1, sort , order, val) => async (dispatch) => { 6 | dispatch({ type: Loading }); 7 | 8 | try { 9 | 10 | if(cat!=="" && page!=="" && sort!=="" && order!=="" && val!==""){ 11 | 12 | let res = await axios.get( 13 | `https://nyresa-project-server.onrender.com/${cat}?_page=${page}&_limit=30&_sort=${sort}&_order=${order}` 14 | ); 15 | 16 | let filtered = res.data.filter((el) => { 17 | if (el.subtitle !== null && el.subtitle.includes(val)) { 18 | return el; 19 | } 20 | }); 21 | 22 | 23 | dispatch({ type: GET_PRODUCT, payload: filtered }); 24 | 25 | } 26 | 27 | else if(cat!=="" && page!=="" && sort!=="" && order!==""){ 28 | 29 | let res = await axios.get( 30 | `https://nyresa-project-server.onrender.com/${cat}?_page=${page}&_limit=12&_sort=${sort}&_order=${order}` 31 | ); 32 | 33 | dispatch({ type: GET_PRODUCT, payload: res.data }); 34 | 35 | } 36 | 37 | else if(cat!=="" && page!=="" && val!==""){ 38 | 39 | let res = await axios.get( 40 | `https://nyresa-project-server.onrender.com/${cat}?_page=${page}&_limit=30` 41 | ); 42 | 43 | let filtered = res.data.filter((el) => { 44 | if (el.subtitle !== null && el.subtitle.includes(val)) { 45 | return el; 46 | } 47 | }); 48 | 49 | 50 | dispatch({ type: GET_PRODUCT, payload: filtered }); 51 | 52 | } 53 | 54 | else { 55 | 56 | let res = await axios.get( 57 | `https://nyresa-project-server.onrender.com/${cat}?_page=${page}&_limit=12` 58 | ); 59 | 60 | dispatch({ type: GET_PRODUCT, payload: res.data }); 61 | } 62 | 63 | 64 | 65 | } catch (e) { 66 | console.log(e); 67 | } 68 | }; 69 | 70 | 71 | 72 | 73 | // export const filterdata = 74 | // (val, page, sort = "discounted_price", order = "", cat = "Mens") => 75 | // async (dispatch) => { 76 | // dispatch({ type: Loading }); 77 | 78 | // let res = await axios.get( 79 | // `https://nyresa-database.vercel.app/${cat}?_page=${page}&_limit=30&_sort=${sort}&_order=${order}` 80 | // ); 81 | 82 | // let filtered = res.data.filter((el) => { 83 | // if (el.subtitle !== null && el.subtitle.includes(val)) { 84 | // return el; 85 | // } 86 | // }); 87 | 88 | // dispatch({ type: Filter, payload: filtered }); 89 | // }; 90 | -------------------------------------------------------------------------------- /project/src/components/Confirm/Product.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { SimpleGrid, Box, Grid, GridItem, Image } from "@chakra-ui/react"; 4 | 5 | const Product = ({ title, desc, price, quantity, subTotal, size, image }) => { 6 | return ( 7 |
8 | 16 | 21 | 33 | 34 | product 35 | 36 | 37 | 38 | {title} 39 | 40 | {desc} 41 | 42 | Size: {size} 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | Price 52 | 53 | 54 | Quantity 55 | 56 | 57 | Subtotal 58 | 59 | 60 | 61 | 62 | ${price} 63 | 64 | 65 | {quantity} 66 | 67 | 68 | ${subTotal} 69 | 70 | 71 | 72 | 73 | 74 |
75 | ); 76 | }; 77 | 78 | export default Product; 79 | -------------------------------------------------------------------------------- /project/src/components/Confirm/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { SimpleGrid, Box } from "@chakra-ui/react"; 4 | import { MdCall } from "react-icons/md"; 5 | import { GrMail } from "react-icons/gr"; 6 | 7 | const Footer = () => { 8 | return ( 9 | 16 | 23 | 24 | 25 | 26 | 27 | 28 | CALL US 29 | 30 | 31 | +49 89 127695-101 32 | 33 | 34 | Argentina: 0800-666-0663 35 | 36 | 37 | Chile: 800-914-515 38 | 39 | 40 | Colombia: 01800-518-5268 41 | 42 | 43 | Mexico: 01-800-099-0703 44 | 45 | 46 | Peru: 0800-78259 47 | 48 | 49 | Puerto Rico: 1-787-303-4205 50 | 51 | 52 | Available 24/7 53 | 54 | 55 | 56 | 57 | 64 | 65 | 66 | 67 | 68 | 69 | MAIL US 70 | 71 | 72 | customercare@mytheresa.com 73 | 74 | 75 | Please note that due to a high amount of requests, we might take a 76 | few days to get back to you. We apologize for any inconvenience this 77 | may cause. 78 | 79 | 80 | 81 | 82 | ); 83 | }; 84 | 85 | export default Footer; 86 | -------------------------------------------------------------------------------- /project/src/components/Delivery/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { SimpleGrid, Box } from "@chakra-ui/react"; 4 | import { MdCall } from "react-icons/md"; 5 | import { GrMail } from "react-icons/gr"; 6 | 7 | const Footer = () => { 8 | return ( 9 | 16 | 23 | 24 | 25 | 26 | 27 | 28 | CALL US 29 | 30 | 31 | +49 89 127695-101 32 | 33 | 34 | Argentina: 0800-666-0663 35 | 36 | 37 | Chile: 800-914-515 38 | 39 | 40 | Colombia: 01800-518-5268 41 | 42 | 43 | Mexico: 01-800-099-0703 44 | 45 | 46 | Peru: 0800-78259 47 | 48 | 49 | Puerto Rico: 1-787-303-4205 50 | 51 | 52 | Available 24/7 53 | 54 | 55 | 56 | 57 | 64 | 65 | 66 | 67 | 68 | 69 | MAIL US 70 | 71 | 72 | customercare@mytheresa.com 73 | 74 | 75 | Please note that due to a high amount of requests, we might take a 76 | few days to get back to you. We apologize for any inconvenience this 77 | may cause. 78 | 79 | 80 | 81 | 82 | ); 83 | }; 84 | 85 | export default Footer; 86 | -------------------------------------------------------------------------------- /project/src/components/Payment/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { SimpleGrid, Box } from "@chakra-ui/react"; 4 | import { MdCall } from "react-icons/md"; 5 | import { GrMail } from "react-icons/gr"; 6 | 7 | const Footer = () => { 8 | return ( 9 | 16 | 23 | 24 | 25 | 26 | 27 | 28 | CALL US 29 | 30 | 31 | +49 89 127695-101 32 | 33 | 34 | Argentina: 0800-666-0663 35 | 36 | 37 | Chile: 800-914-515 38 | 39 | 40 | Colombia: 01800-518-5268 41 | 42 | 43 | Mexico: 01-800-099-0703 44 | 45 | 46 | Peru: 0800-78259 47 | 48 | 49 | Puerto Rico: 1-787-303-4205 50 | 51 | 52 | Available 24/7 53 | 54 | 55 | 56 | 57 | 64 | 65 | 66 | 67 | 68 | 69 | MAIL US 70 | 71 | 72 | customercare@mytheresa.com 73 | 74 | 75 | Please note that due to a high amount of requests, we might take a 76 | few days to get back to you. We apologize for any inconvenience this 77 | may cause. 78 | 79 | 80 | 81 | 82 | ); 83 | }; 84 | 85 | export default Footer; 86 | -------------------------------------------------------------------------------- /project/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 your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may 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 | -------------------------------------------------------------------------------- /project/src/components/Wishlist.jsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, Grid, Image, Text, useToast } from "@chakra-ui/react"; 2 | import axios from "axios"; 3 | import "./Products.css"; 4 | import { CloseIcon, StarIcon } from "@chakra-ui/icons"; 5 | import React from "react"; 6 | import { Link, useNavigate } from "react-router-dom"; 7 | import { useState } from "react"; 8 | import { useEffect } from "react"; 9 | 10 | const getwish = async () => { 11 | let res = await axios.get("https://nyresa-project-server.onrender.com/wishlist"); 12 | return res.data; 13 | }; 14 | 15 | const Wishlist = () => { 16 | const [wish, setwish] = useState([]); 17 | const toast = useToast(); 18 | const navigate=useNavigate() 19 | 20 | const remove = async (id) => { 21 | // eslint-disable-next-line no-unused-vars 22 | let res = await axios.delete( 23 | `https://nyresa-project-server.onrender.com/wishlist/${id}` 24 | ); 25 | 26 | let updt = wish.filter((el) => el.id !== id); 27 | 28 | setwish(updt); 29 | }; 30 | 31 | const movecart =(el) => { 32 | fetch("https://nyresa-project-server.onrender.com/productlist", { 33 | method: "POST", 34 | headers: { 35 | "Content-Type": "application/json", 36 | }, 37 | body: JSON.stringify(el), 38 | }).then((res) => res.json()); 39 | navigate("/ProductList"); 40 | remove(el.id) 41 | } 42 | useEffect(() => { 43 | getwish().then((res) => setwish(res)); 44 | }, []); 45 | 46 | return ( 47 | 48 | {wish.length === 0 && ( 49 | 50 | THERE ARE NO PRODUCTS ON YOUR WISHLIST. 51 | 52 | Check out our new arrivals and start adding to your wishlist now! 53 | 54 | 58 | 59 | )} 60 | 61 | 70 | {wish.map((el) => ( 71 | 72 | 73 | {" "} 74 | remove(el.id)} /> 75 | 76 | 77 | title 84 | {el.title} 85 | 86 | {el.subtitle} 87 | 88 | 89 | {Array(5) 90 | .fill("") 91 | .map((_, i) => ( 92 | 98 | ))} 99 | 100 | {el.rating} 101 | 102 | 103 | 104 | 105 | €{el.discounted_price} 106 | 107 | €{el.strike_price} 108 | 109 | {el.discount} 110 | 111 | 112 | 123 | 124 | ))} 125 | 126 | 127 | ); 128 | }; 129 | 130 | export default Wishlist; 131 | -------------------------------------------------------------------------------- /project/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | chakra, 4 | Container, 5 | SimpleGrid, 6 | Stack, 7 | Text, 8 | VisuallyHidden, 9 | Input, 10 | IconButton, 11 | useColorModeValue, 12 | Image, 13 | } from "@chakra-ui/react"; 14 | import { FaInstagram, FaTwitter, FaYoutube } from "react-icons/fa"; 15 | import { BiMailSend } from "react-icons/bi"; 16 | import { Link } from "react-router-dom"; 17 | 18 | const SocialButton = ({ children, label, href }) => { 19 | return ( 20 | 36 | {label} 37 | {children} 38 | 39 | ); 40 | }; 41 | 42 | const ListHeader = ({ children }) => { 43 | return ( 44 | 45 | {children} 46 | 47 | ); 48 | }; 49 | 50 | export default function LargeWithNewsletter() { 51 | return ( 52 | 59 | 60 | 64 | 65 | 66 | 67 | 71 | 72 | 73 | © 2022 NYRESA.com. All rights reserved 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | Company 88 | About us 89 | Blog 90 | Contact us 91 | Pricing 92 | Testimonials 93 | 94 | 95 | Support 96 | Help Center 97 | Terms of Service 98 | Legal 99 | Privacy Policy 100 | Status 101 | 102 | 103 | Stay up to date 104 | 105 | 113 | } 121 | /> 122 | 123 | 124 | 125 | 126 | 127 | ); 128 | } 129 | -------------------------------------------------------------------------------- /project/src/components/ListChild.jsx: -------------------------------------------------------------------------------- 1 | import { SimpleGrid, Box, Grid, GridItem, Image } from "@chakra-ui/react"; 2 | import React, { useState } from "react"; 3 | 4 | const ListChild = ({ 5 | title, 6 | desc, 7 | id, 8 | price, 9 | image, 10 | quant, 11 | getData, 12 | setProduct, 13 | size 14 | }) => { 15 | // eslint-disable-next-line no-unused-vars 16 | const [quantity, setQuantity] = useState(1); 17 | 18 | const handleInc = (id) => { 19 | console.log(id); 20 | 21 | setQuantity((prev) => prev + 1); 22 | fetch(`https://nyresa-project-server.onrender.com/productlist/${id}`, { 23 | method: "PATCH", 24 | headers: { 25 | "Content-Type": "application/json", 26 | }, 27 | body: JSON.stringify({ 28 | quantity: quant + 1, 29 | price: (quant + 1) * Number(price), 30 | }), 31 | }).then((res) => res.json()).then(()=>getData().then((res)=>setProduct(res))) 32 | }; 33 | 34 | const handleDec = (id) => { 35 | console.log(id); 36 | 37 | fetch(`https://nyresa-project-server.onrender.com/productlist/${id}`, { 38 | method: "PATCH", 39 | headers: { 40 | "Content-Type": "application/json", 41 | }, 42 | body: JSON.stringify({ 43 | quantity: quant - 1, 44 | price: (quant - 1) * Number(price), 45 | }), 46 | }).then((res) => res.json()).then(()=>getData().then((res)=>setProduct(res))) 47 | }; 48 | 49 | return ( 50 | 51 | 59 | 64 | 76 | 77 | product 78 | 79 | 80 | 81 | {title} 82 | 83 | {desc} 84 | 85 | Size: {size} 86 | 87 | 88 | item no.: {id}{" "} 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | Price 98 | 99 | 100 | Quantity 101 | 102 | 103 | Subtotal 104 | 105 | 106 | 107 | 108 | ${price} 109 | 110 | 117 | 118 | {quant} 119 | 120 | 126 | 127 | {quant * Number(price)} 128 | 129 | 130 | 131 | 132 | 133 | 134 | ); 135 | }; 136 | 137 | export default ListChild; 138 | -------------------------------------------------------------------------------- /project/src/components/Carousel.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | Box, 4 | IconButton, 5 | Heading, 6 | Button, 7 | Image, 8 | Text, 9 | Flex, 10 | } from "@chakra-ui/react"; 11 | import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons"; 12 | import Slider from "react-slick"; 13 | import { Link } from "react-router-dom"; 14 | 15 | const settings = { 16 | dots: false, 17 | arrows: false, 18 | 19 | infinite: true, 20 | autoplay: false, 21 | speed: 1000, 22 | slidesToShow: 4, 23 | slidesToScroll: 4, 24 | responsive: [ 25 | { 26 | breakpoint: 1200, 27 | settings: { 28 | slidesToShow: 3, 29 | slidesToScroll: 1, 30 | }, 31 | }, 32 | { 33 | breakpoint: 1008, 34 | settings: { 35 | slidesToShow: 3, 36 | slidesToScroll: 1, 37 | }, 38 | }, 39 | { 40 | breakpoint: 800, 41 | settings: { 42 | slidesToShow: 2, 43 | slidesToScroll: 1, 44 | }, 45 | }, 46 | { 47 | breakpoint: 500, 48 | settings: { 49 | slidesToShow: 1, 50 | slidesToScroll: 1, 51 | }, 52 | }, 53 | ], 54 | }; 55 | 56 | export default function Carousel({ data, title, link }) { 57 | const [slider, setSlider] = useState(null); 58 | 59 | return ( 60 | 64 | 70 | 75 | 81 | {title} 82 | 83 |
84 | 93 | 98 | slider?.slickPrev()} 105 | _hover={{ bg: "none" }} 106 | > 107 | slider?.slickPrev()} 116 | /> 117 | 118 | 119 | 128 | setSlider(slider)}> 129 | {data.map((ele) => ( 130 | 131 | 132 | 133 | 134 | 135 | {ele.title} 136 | 137 | {ele.subtitle} 138 | 139 | $ {ele.discounted_price} 140 | 141 | 142 | 143 | 144 | ))} 145 | 146 | 147 | 152 | slider?.slickNext()} 159 | > 160 | 170 | 171 | 172 | 173 | 181 | 182 | 196 | 197 | 198 | 199 | ); 200 | } 201 | -------------------------------------------------------------------------------- /project/src/components/Delivery/Address.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Grid, 4 | GridItem, 5 | Box, 6 | SimpleGrid, 7 | Radio, 8 | RadioGroup, 9 | Stack, 10 | Input, 11 | Select, 12 | Button, 13 | } from "@chakra-ui/react"; 14 | 15 | const Address = () => { 16 | const [bvalue, setbValue] = React.useState(""); 17 | const [bfirstName, setbFirstName] = React.useState(""); 18 | const [blastName, setbLastName] = React.useState(""); 19 | const [bcompany, setbCompany] = React.useState(""); 20 | const [bemail, setbEmail] = React.useState(""); 21 | const [bstreet, setbStreet] = React.useState(""); 22 | const [blineTwo, setbLineTwo] = React.useState(""); 23 | const [bpost, setbPost] = React.useState(""); 24 | const [bcity, setbCity] = React.useState(""); 25 | const [bcountry, setbCountry] = React.useState(""); 26 | const [bphone, setbPhone] = React.useState(""); 27 | return ( 28 |
29 | 30 | 35 | 36 | 37 | BILLING ADDRESS 38 | 39 | 40 | Please enter your billing address in the form below. 41 | 42 | 43 | setbValue(bvalue)} 47 | > 48 | 49 | 50 | Ms.* 51 | 52 | 53 | Mrs.* 54 | 55 | 56 | Mr.* 57 | 58 | 59 | 60 | 61 | 62 |
63 | 64 | setbFirstName(e.target.value)} 69 | /> 70 | setbLastName(e.target.value)} 75 | /> 76 | setbCompany(e.target.value)} 81 | /> 82 | setbEmail(e.target.value)} 87 | /> 88 | setbStreet(e.target.value)} 93 | /> 94 | setbLineTwo(e.target.value)} 99 | /> 100 | setbPost(e.target.value)} 105 | /> 106 | setbCity(e.target.value)} 111 | /> 112 | 131 | setbPhone(e.target.value)} 136 | /> 137 | 138 | * required fields 139 | 140 | 141 | 142 | 143 | 144 | 147 | 148 | 149 | 150 |
151 | 152 | 153 | 154 | 155 |
156 | ); 157 | }; 158 | 159 | export default Address; 160 | -------------------------------------------------------------------------------- /project/src/components/Products.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Products.css"; 3 | import { useState } from "react"; 4 | import { 5 | Box, 6 | Divider, 7 | Grid, 8 | Heading, 9 | Image, 10 | Progress, 11 | Text, 12 | useBreakpointValue, 13 | } from "@chakra-ui/react"; 14 | 15 | import Header from "../components/sidebar/Header"; 16 | import Sidebar from "../components/sidebar/Sidebar"; 17 | import { useSelector, useDispatch } from "react-redux"; 18 | import { useEffect } from "react"; 19 | import { getdata } from "../redux/products/Prodaction"; 20 | import { StarIcon } from "@chakra-ui/icons"; 21 | import Pagination from "./Pagination"; 22 | import { useNavigate } from "react-router-dom"; 23 | import Footer from "./Footer"; 24 | 25 | const smVariant = { navigation: "drawer", navigationButton: true }; 26 | const mdVariant = { navigation: "sidebar", navigationButton: false }; 27 | 28 | const Products = ({ category }) => { 29 | 30 | const [c,setc]=useState(category); 31 | const [page, setpage] = useState(1); 32 | const [sort, setsort] = useState(""); 33 | const [order, setorder] = useState(""); 34 | const [filtval, setfiltval] = useState(""); 35 | 36 | 37 | const navigate = useNavigate(); 38 | 39 | const [isSidebarOpen, setSidebarOpen] = useState(false); 40 | const variants = useBreakpointValue({ base: smVariant, md: mdVariant }); 41 | 42 | const toggleSidebar = () => setSidebarOpen(!isSidebarOpen); 43 | 44 | const products = useSelector((store) => store.prodManager); 45 | 46 | const dispatch = useDispatch(); 47 | 48 | 49 | 50 | 51 | 52 | useEffect(() => { 53 | 54 | if(c!==category){ 55 | setpage(1); 56 | setfiltval(""); 57 | setc(category); 58 | } 59 | 60 | dispatch(getdata(category, page, sort, order, filtval)); 61 | 62 | 63 | // eslint-disable-next-line react-hooks/exhaustive-deps 64 | }, [category, page, sort, order, filtval]); 65 | 66 | 67 | const filterbyval=(filt)=>{ 68 | setfiltval(filt) 69 | } 70 | 71 | const sortorder = (val) => { 72 | setsort("discounted_price"); 73 | setorder(val); 74 | }; 75 | 76 | 77 | const updateCurrentPage=(pan)=>{ 78 | setpage(pan); 79 | } 80 | const tolocal = (el) => { 81 | localStorage.setItem("element", JSON.stringify(el)); 82 | navigate("/ProductDetails"); 83 | }; 84 | 85 | return ( 86 | <> 87 | 93 | 106 | 107 |
116 | 117 | 118 | 119 | {products.loading && ( 120 | 121 | Loading .... 122 | 123 | 124 | )} 125 | 126 | {products.data.length === 0 && ( 127 | 128 | 133 | Results not found for this page 134 | 135 | )} 136 | 137 | 146 | {products.data?.map((el) => ( 147 | tolocal(el)} 151 | textAlign="center" 152 | > 153 | title 160 | {el.title} 161 | {el.subtitle} 162 | 163 | {Array(5) 164 | .fill("") 165 | .map((_, i) => ( 166 | 172 | ))} 173 | 174 | {el.rating} 175 | 176 | 177 | 178 | 179 | €{el.discounted_price} 180 | 181 | €{el.strike_price} 182 | 183 | {el.discount} 184 | 185 | 186 | ))} 187 | 188 | 189 | 190 | 195 | 200 | 201 | 202 | 203 | 204 |