├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo193.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── image │ ├── logo.png │ ├── mens.jpg │ ├── budget.jpg │ ├── luxury.jpg │ ├── womens.jpg │ ├── bestsellers.jpg │ ├── mens │ │ ├── ck-35.jpg │ │ ├── custume-45.jpg │ │ ├── invictus-52.jpg │ │ ├── versace-75.jpg │ │ ├── dior-sauvage.jpg │ │ ├── jean-paul-60.jpg │ │ ├── ysl-lanuit-70.jpeg │ │ └── tomford-tabaco-152.jpg │ ├── budget │ │ ├── jbsd-18.9.jpg │ │ ├── lolita-25.jpg │ │ ├── rihana-18.jpg │ │ ├── britney-14.5.jpg │ │ ├── ferragamo-35.jpg │ │ ├── moschino-20.jpg │ │ ├── pink-sugar-20.jpg │ │ └── truth-dare-40.jpeg │ ├── womens │ │ ├── coco-chanel.jpg │ │ ├── good-girl-95.jpg │ │ ├── lelabo-100.jpg │ │ ├── chanel-chance.jpg │ │ ├── missdior-100.jpeg │ │ ├── dior-poison-100.jpg │ │ ├── lancome-tresor-50.jpg │ │ └── viva-lajuicy-45.jpg │ ├── luxury │ │ ├── gris-dior-307.jpg │ │ ├── guerlains-205.jpg │ │ ├── oud-maison-290.jpg │ │ ├── delina-exclusif-230.jpg │ │ └── giorgio-armani-398.jpg │ ├── bestsellers │ │ ├── aquadi-gio.jpg │ │ ├── jean-paul-60.jpg │ │ ├── versace-75.jpg │ │ ├── chanel-no5-120.jpg │ │ ├── d&g-lightblue.jpg │ │ ├── lancome-lavie.png │ │ ├── parco-rabanne.jpg │ │ ├── ysl-blackopium.jpg │ │ └── Davidoff-Coolwater.jpg │ └── shop.bag.svg ├── redux │ ├── user │ │ ├── user.types.js │ │ ├── user.actions.js │ │ ├── user.selectors.js │ │ └── user.reducer.js │ ├── cart │ │ ├── cart.types.js │ │ ├── cart.actions.js │ │ ├── cart.selectors.js │ │ ├── cart.utils.js │ │ └── cart.reducer.js │ ├── directory │ │ ├── directory.selectors.js │ │ └── directory.reducer.js │ ├── shop │ │ ├── shop.reducer.js │ │ ├── shop.selectors.js │ │ └── shop.data.js │ ├── store.js │ └── root-reducer.js ├── components │ ├── collections-overview │ │ ├── collections-overview.styles.scss │ │ └── CollectionsOverview.js │ ├── directory │ │ ├── directory.styles.scss │ │ └── Directory.js │ ├── sign-up │ │ ├── sign-up.styles.scss │ │ └── SignUp.js │ ├── sign-in │ │ ├── sign-in.styles.scss │ │ └── SignIn.js │ ├── preview-collection │ │ ├── preview-collection.styles.scss │ │ └── PreviewCollection.js │ ├── cart-icon │ │ ├── cart-icon.styles.scss │ │ └── CartIcon.js │ ├── cart-item │ │ ├── cart-item.styles.scss │ │ └── CartItem.js │ ├── custom-button │ │ ├── CustomButton.js │ │ └── custom-button.styles.scss │ ├── header │ │ ├── header.styles.scss │ │ └── Header.js │ ├── cart-dropdown │ │ ├── cart-dropdown.styles.scss │ │ └── CartDropdown.js │ ├── form-input │ │ ├── FormInput.js │ │ └── form-input.styles.scss │ ├── checkout-item │ │ ├── checkout-item.styles.scss │ │ └── CheckoutItem.js │ ├── stripe-button │ │ └── StripeButton.js │ ├── fragrance-item │ │ ├── FragranceItem.js │ │ └── fragrance-item.styles.scss │ └── collection-item │ │ ├── collection-item.styles.scss │ │ └── CollectionItem.js ├── pages │ ├── homepage │ │ ├── homepage.styles.scss │ │ └── HomePage.js │ ├── authen-page │ │ ├── authen-page.styles.scss │ │ └── AuthenPage.js │ ├── collection │ │ ├── collection.styles.scss │ │ └── CollectionPage.js │ ├── shop │ │ └── Shop.js │ └── checkout │ │ ├── checkout.styles.scss │ │ └── Checkout.js ├── setupTests.js ├── App.test.js ├── index.css ├── index.js ├── App.css ├── firebase │ └── firebase.utils.js ├── logo.svg ├── App.js └── serviceWorker.js ├── .gitignore ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo193.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/public/logo193.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/image/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/logo.png -------------------------------------------------------------------------------- /src/image/mens.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens.jpg -------------------------------------------------------------------------------- /src/image/budget.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget.jpg -------------------------------------------------------------------------------- /src/image/luxury.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/luxury.jpg -------------------------------------------------------------------------------- /src/image/womens.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens.jpg -------------------------------------------------------------------------------- /src/image/bestsellers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers.jpg -------------------------------------------------------------------------------- /src/image/mens/ck-35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens/ck-35.jpg -------------------------------------------------------------------------------- /src/redux/user/user.types.js: -------------------------------------------------------------------------------- 1 | export const UserActionTypes = { 2 | SET_CURRENT_USER: "SET_CURRENT_USER" 3 | }; 4 | -------------------------------------------------------------------------------- /src/image/budget/jbsd-18.9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget/jbsd-18.9.jpg -------------------------------------------------------------------------------- /src/image/budget/lolita-25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget/lolita-25.jpg -------------------------------------------------------------------------------- /src/image/budget/rihana-18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget/rihana-18.jpg -------------------------------------------------------------------------------- /src/image/mens/custume-45.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens/custume-45.jpg -------------------------------------------------------------------------------- /src/image/mens/invictus-52.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens/invictus-52.jpg -------------------------------------------------------------------------------- /src/image/mens/versace-75.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens/versace-75.jpg -------------------------------------------------------------------------------- /src/image/budget/britney-14.5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget/britney-14.5.jpg -------------------------------------------------------------------------------- /src/image/budget/ferragamo-35.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget/ferragamo-35.jpg -------------------------------------------------------------------------------- /src/image/budget/moschino-20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget/moschino-20.jpg -------------------------------------------------------------------------------- /src/image/mens/dior-sauvage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens/dior-sauvage.jpg -------------------------------------------------------------------------------- /src/image/mens/jean-paul-60.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens/jean-paul-60.jpg -------------------------------------------------------------------------------- /src/image/mens/ysl-lanuit-70.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens/ysl-lanuit-70.jpeg -------------------------------------------------------------------------------- /src/image/womens/coco-chanel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens/coco-chanel.jpg -------------------------------------------------------------------------------- /src/image/womens/good-girl-95.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens/good-girl-95.jpg -------------------------------------------------------------------------------- /src/image/womens/lelabo-100.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens/lelabo-100.jpg -------------------------------------------------------------------------------- /src/image/budget/pink-sugar-20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget/pink-sugar-20.jpg -------------------------------------------------------------------------------- /src/image/budget/truth-dare-40.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/budget/truth-dare-40.jpeg -------------------------------------------------------------------------------- /src/image/luxury/gris-dior-307.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/luxury/gris-dior-307.jpg -------------------------------------------------------------------------------- /src/image/luxury/guerlains-205.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/luxury/guerlains-205.jpg -------------------------------------------------------------------------------- /src/image/luxury/oud-maison-290.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/luxury/oud-maison-290.jpg -------------------------------------------------------------------------------- /src/image/womens/chanel-chance.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens/chanel-chance.jpg -------------------------------------------------------------------------------- /src/image/womens/missdior-100.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens/missdior-100.jpeg -------------------------------------------------------------------------------- /src/image/bestsellers/aquadi-gio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/aquadi-gio.jpg -------------------------------------------------------------------------------- /src/image/bestsellers/jean-paul-60.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/jean-paul-60.jpg -------------------------------------------------------------------------------- /src/image/bestsellers/versace-75.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/versace-75.jpg -------------------------------------------------------------------------------- /src/image/mens/tomford-tabaco-152.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/mens/tomford-tabaco-152.jpg -------------------------------------------------------------------------------- /src/image/womens/dior-poison-100.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens/dior-poison-100.jpg -------------------------------------------------------------------------------- /src/image/womens/lancome-tresor-50.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens/lancome-tresor-50.jpg -------------------------------------------------------------------------------- /src/image/womens/viva-lajuicy-45.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/womens/viva-lajuicy-45.jpg -------------------------------------------------------------------------------- /src/image/bestsellers/chanel-no5-120.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/chanel-no5-120.jpg -------------------------------------------------------------------------------- /src/image/bestsellers/d&g-lightblue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/d&g-lightblue.jpg -------------------------------------------------------------------------------- /src/image/bestsellers/lancome-lavie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/lancome-lavie.png -------------------------------------------------------------------------------- /src/image/bestsellers/parco-rabanne.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/parco-rabanne.jpg -------------------------------------------------------------------------------- /src/image/bestsellers/ysl-blackopium.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/ysl-blackopium.jpg -------------------------------------------------------------------------------- /src/image/luxury/delina-exclusif-230.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/luxury/delina-exclusif-230.jpg -------------------------------------------------------------------------------- /src/image/luxury/giorgio-armani-398.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/luxury/giorgio-armani-398.jpg -------------------------------------------------------------------------------- /src/components/collections-overview/collections-overview.styles.scss: -------------------------------------------------------------------------------- 1 | .collections-overview { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | -------------------------------------------------------------------------------- /src/image/bestsellers/Davidoff-Coolwater.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ashleynguci/fragrance-shop/HEAD/src/image/bestsellers/Davidoff-Coolwater.jpg -------------------------------------------------------------------------------- /src/pages/homepage/homepage.styles.scss: -------------------------------------------------------------------------------- 1 | .homepage { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | padding: 5px 70px; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/directory/directory.styles.scss: -------------------------------------------------------------------------------- 1 | .directory-menu { 2 | width: 100%; 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-between; 6 | } 7 | -------------------------------------------------------------------------------- /src/pages/authen-page/authen-page.styles.scss: -------------------------------------------------------------------------------- 1 | .authen-page { 2 | width: 850px; 3 | display: flex; 4 | justify-content: space-between; 5 | margin: 30px auto; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/sign-up/sign-up.styles.scss: -------------------------------------------------------------------------------- 1 | .sign-up { 2 | display: flex; 3 | flex-direction: column; 4 | width: 380px; 5 | .title { 6 | margin: 10px 0; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/redux/user/user.actions.js: -------------------------------------------------------------------------------- 1 | import { UserActionTypes } from "./user.types"; 2 | 3 | export const setCurrentUser = user => ({ 4 | type: 5 | UserActionTypes.SET_CURRENT_USER, 6 | payload: user 7 | }); 8 | -------------------------------------------------------------------------------- /src/redux/user/user.selectors.js: -------------------------------------------------------------------------------- 1 | import { createSelector } from 'reselect'; 2 | 3 | const selectUser = state => state.user; 4 | 5 | export const selectCurrentUser = createSelector( 6 | [selectUser], 7 | user => user.currentUser 8 | ); -------------------------------------------------------------------------------- /src/redux/cart/cart.types.js: -------------------------------------------------------------------------------- 1 | const CartActionTypes = { 2 | TOGGLE_CART_HIDDEN: 'TOGGLE_CART_HIDDEN', 3 | ADD_ITEM: 'ADD_ITEM', 4 | REMOVE_ITEM: 'REMOVE_ITEM', 5 | CLEAR_ITEM_FROM_CART: 'CLEAR_ITEM_FROM_CART' 6 | }; 7 | 8 | export default CartActionTypes; -------------------------------------------------------------------------------- /src/redux/directory/directory.selectors.js: -------------------------------------------------------------------------------- 1 | import { createSelector } from 'reselect'; 2 | 3 | const selectDirectory = state => state.directory; 4 | 5 | export const selectDirectorySections = createSelector( 6 | [selectDirectory], 7 | directory => directory.sections 8 | ); -------------------------------------------------------------------------------- /src/components/sign-in/sign-in.styles.scss: -------------------------------------------------------------------------------- 1 | .sign-in { 2 | width: 30vw; 3 | display: flex; 4 | flex-direction: column; 5 | 6 | .title { 7 | margin: 10px 0; 8 | } 9 | .buttons { 10 | display: flex; 11 | justify-content: space-between; 12 | } 13 | } 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/extend-expect'; 6 | -------------------------------------------------------------------------------- /src/pages/homepage/HomePage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./homepage.styles.scss"; 3 | import Directory from "../../components/directory/Directory"; 4 | export default function HomePage({}) { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/redux/shop/shop.reducer.js: -------------------------------------------------------------------------------- 1 | import SHOP_DATA from './shop.data'; 2 | 3 | const INITIAL_STATE = { 4 | collections: SHOP_DATA 5 | }; 6 | 7 | const shopReducer = (state = INITIAL_STATE, action) => { 8 | switch (action.type) { 9 | default: 10 | return state; 11 | } 12 | }; 13 | 14 | export default shopReducer; -------------------------------------------------------------------------------- /src/components/preview-collection/preview-collection.styles.scss: -------------------------------------------------------------------------------- 1 | .collection-preview { 2 | display: flex; 3 | flex-direction: column; 4 | margin-bottom: 30px; 5 | 6 | .title { 7 | font-size: 28px; 8 | margin-bottom: 25px; 9 | } 10 | 11 | .preview { 12 | display: flex; 13 | justify-content: space-between; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/authen-page/AuthenPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import SignIn from "../../components/sign-in/SignIn.js"; 4 | import SignUp from "../../components/sign-up/SignUp.js"; 5 | 6 | import "./authen-page.styles.scss"; 7 | 8 | const AuthenPage = () => ( 9 |
10 | 11 | 12 |
13 | ); 14 | 15 | export default AuthenPage; 16 | -------------------------------------------------------------------------------- /src/pages/collection/collection.styles.scss: -------------------------------------------------------------------------------- 1 | .collection-page { 2 | display: flex; 3 | flex-direction: column; 4 | 5 | .title { 6 | font-size: 38px; 7 | margin: 0 auto 30px; 8 | } 9 | 10 | .items { 11 | display: grid; 12 | grid-template-columns: 1fr 1fr 1fr 1fr; 13 | grid-gap: 10px; 14 | 15 | & .collection-item { 16 | margin-bottom: 30px; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux'; 2 | import { persistStore } from 'redux-persist'; 3 | import logger from 'redux-logger'; 4 | 5 | import rootReducer from './root-reducer'; 6 | 7 | const middlewares = [logger]; 8 | 9 | export const store = createStore(rootReducer, applyMiddleware(...middlewares)); 10 | 11 | export const persistor = persistStore(store); 12 | 13 | export default { store, persistStore }; -------------------------------------------------------------------------------- /src/components/cart-icon/cart-icon.styles.scss: -------------------------------------------------------------------------------- 1 | .cart-icon { 2 | width: 45px; 3 | height: 45px; 4 | position: relative; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | cursor: pointer; 9 | 10 | .shopping-icon { 11 | width: 24px; 12 | height: 24px; 13 | } 14 | 15 | .item-count { 16 | position: absolute; 17 | font-size: 10px; 18 | font-weight: bold; 19 | bottom: 12px; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/cart-item/cart-item.styles.scss: -------------------------------------------------------------------------------- 1 | .cart-item { 2 | width: 100%; 3 | display: flex; 4 | height: 80px; 5 | margin-bottom: 15px; 6 | 7 | img { 8 | width: 30%; 9 | } 10 | 11 | .item-details { 12 | width: 70%; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: flex-start; 16 | justify-content: center; 17 | padding: 10px 20px; 18 | 19 | .name { 20 | font-size: 16px; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/redux/user/user.reducer.js: -------------------------------------------------------------------------------- 1 | import { UserActionTypes } from "./user.types"; 2 | 3 | const INITIAL_STATE = { 4 | currentUser: null 5 | }; 6 | 7 | const userReducer = ( 8 | state = INITIAL_STATE, 9 | action 10 | ) => { 11 | switch (action.type) { 12 | case UserActionTypes.SET_CURRENT_USER: 13 | return { 14 | ...state, 15 | currentUser: action.payload 16 | }; 17 | default: 18 | return state; 19 | } 20 | }; 21 | 22 | export default userReducer; 23 | -------------------------------------------------------------------------------- /src/components/custom-button/CustomButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './custom-button.styles.scss'; 3 | 4 | const CustomButton = ({ 5 | children, 6 | isGoogleSignIn, 7 | inverted, 8 | ...otherProps 9 | }) => ( 10 | 18 | ); 19 | 20 | export default CustomButton; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: "Open Sans Condensed", 4 | sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | padding: 20px 50px; 8 | background-color: #ffffff; 9 | /* background-image: linear-gradient( 10 | 105deg, 11 | #ffffff 0%, 12 | #ffffff 30%, 13 | #8f759b 100% 14 | ); */ 15 | } 16 | 17 | code { 18 | font-family: source-code-pro, Menlo, 19 | Monaco, Consolas, "Courier New", 20 | monospace; 21 | } 22 | -------------------------------------------------------------------------------- /src/redux/cart/cart.actions.js: -------------------------------------------------------------------------------- 1 | import CartActionTypes from "./cart.types"; 2 | 3 | export const toggleCartHidden = () => ({ 4 | type: 5 | CartActionTypes.TOGGLE_CART_HIDDEN 6 | }); 7 | 8 | export const addItem = item => ({ 9 | type: CartActionTypes.ADD_ITEM, 10 | payload: item 11 | }); 12 | export const removeItem = item => ({ 13 | type: CartActionTypes.REMOVE_ITEM, 14 | payload: item 15 | }); 16 | 17 | export const clearItemFromCart = item => ({ 18 | type: CartActionTypes.CLEAR_ITEM_FROM_CART, 19 | payload: item 20 | }); -------------------------------------------------------------------------------- /src/components/cart-item/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './cart-item.styles.scss'; 4 | 5 | const CartItem = ({ item: { imageUrl, price, name, quantity } }) => ( 6 |
7 | item 8 |
9 | {name} 10 | 11 | {quantity} x €{price} 12 | 13 |
14 |
15 | ); 16 | 17 | export default CartItem; -------------------------------------------------------------------------------- /src/components/header/header.styles.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | height: 70px; 3 | width: 100%; 4 | display: flex; 5 | justify-content: space-between; 6 | margin-bottom: 25px; 7 | 8 | .logo-container { 9 | height: 100%; 10 | width: 70px; 11 | padding: 8px; 12 | } 13 | 14 | .options { 15 | width: 50%; 16 | height: 100%; 17 | display: flex; 18 | align-items: center; 19 | justify-content: flex-end; 20 | 21 | .option { 22 | padding: 20px 15px; 23 | cursor: pointer; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/pages/shop/Shop.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route } from 'react-router-dom'; 3 | 4 | import CollectionsOverview from '../../components/collections-overview/CollectionsOverview'; 5 | import CollectionPage from '../collection/CollectionPage'; 6 | 7 | const ShopPage = ({ match }) => ( 8 |
9 | 10 | 11 |
12 | ); 13 | 14 | export default ShopPage; -------------------------------------------------------------------------------- /src/redux/shop/shop.selectors.js: -------------------------------------------------------------------------------- 1 | import { createSelector } from 'reselect'; 2 | 3 | const selectShop = state => state.shop; 4 | 5 | export const selectCollections = createSelector( 6 | [selectShop], 7 | shop => shop.collections 8 | ); 9 | 10 | export const selectCollectionsForPreview = createSelector( 11 | [selectCollections], 12 | collections => Object.keys(collections).map(key => collections[key]) 13 | ); 14 | 15 | export const selectCollection = collectionUrlParam => 16 | createSelector( 17 | [selectCollections], 18 | collections => collections[collectionUrlParam] 19 | ); -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { BrowserRouter } from 'react-router-dom'; 4 | import { Provider } from 'react-redux'; 5 | import { PersistGate } from 'redux-persist/integration/react'; 6 | 7 | import { store, persistor } from './redux/store'; 8 | 9 | import './index.css'; 10 | import App from './App'; 11 | 12 | ReactDOM.render( 13 | 14 | 15 | 16 | 17 | 18 | 19 | , 20 | document.getElementById('root') 21 | ); -------------------------------------------------------------------------------- /src/components/cart-dropdown/cart-dropdown.styles.scss: -------------------------------------------------------------------------------- 1 | .cart-dropdown { 2 | position: absolute; 3 | width: 240px; 4 | height: 340px; 5 | display: flex; 6 | flex-direction: column; 7 | padding: 20px; 8 | border: 1px solid black; 9 | background-color: white; 10 | top: 90px; 11 | right: 40px; 12 | z-index: 5; 13 | 14 | .empty-message { 15 | font-size: 18px; 16 | margin: 50px auto; 17 | } 18 | 19 | .cart-items { 20 | height: 240px; 21 | display: flex; 22 | flex-direction: column; 23 | overflow: scroll; 24 | } 25 | 26 | button { 27 | margin-top: auto; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/preview-collection/PreviewCollection.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import CollectionItem from '../collection-item/CollectionItem'; 4 | 5 | import './preview-collection.styles.scss'; 6 | 7 | const PreviewCollection = ({ title, items }) => ( 8 |
9 |

{title.toUpperCase()}

10 |
11 | {items 12 | .filter((item, idx) => idx < 4) 13 | .map(item => ( 14 | 15 | ))} 16 |
17 |
18 | ); 19 | 20 | export default PreviewCollection; -------------------------------------------------------------------------------- /src/components/form-input/FormInput.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./form-input.styles.scss"; 4 | 5 | const FormInput = ({ 6 | handleChange, 7 | label, 8 | ...otherProps 9 | }) => ( 10 |
11 | 16 | {label ? ( 17 | 26 | ) : null} 27 |
28 | ); 29 | 30 | export default FormInput; 31 | -------------------------------------------------------------------------------- /src/redux/root-reducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { persistReducer } from 'redux-persist'; 3 | import storage from 'redux-persist/lib/storage'; 4 | 5 | import userReducer from './user/user.reducer'; 6 | import cartReducer from './cart/cart.reducer'; 7 | import directoryReducer from './directory/directory.reducer'; 8 | import shopReducer from './shop/shop.reducer'; 9 | 10 | const persistConfig = { 11 | key: 'root', 12 | storage, 13 | whitelist: ['cart'] 14 | }; 15 | 16 | const rootReducer = combineReducers({ 17 | user: userReducer, 18 | cart: cartReducer, 19 | directory: directoryReducer, 20 | shop: shopReducer 21 | }); 22 | 23 | 24 | export default persistReducer(persistConfig, rootReducer); -------------------------------------------------------------------------------- /src/components/checkout-item/checkout-item.styles.scss: -------------------------------------------------------------------------------- 1 | .checkout-item { 2 | width: 100%; 3 | display: flex; 4 | min-height: 100px; 5 | border-bottom: 1px solid darkgrey; 6 | padding: 15px 0; 7 | font-size: 20px; 8 | align-items: center; 9 | 10 | .image-container { 11 | width: 23%; 12 | padding-right: 15px; 13 | 14 | img { 15 | width: 100%; 16 | height: 100%; 17 | } 18 | } 19 | .name, 20 | .quantity, 21 | .price { 22 | width: 23%; 23 | } 24 | 25 | .quantity { 26 | display: flex; 27 | 28 | .arrow { 29 | cursor: pointer; 30 | } 31 | 32 | .value { 33 | margin: 0 10px; 34 | } 35 | } 36 | 37 | .remove-button { 38 | padding-left: 12px; 39 | cursor: pointer; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/directory/Directory.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { createStructuredSelector } from 'reselect'; 4 | 5 | import { selectDirectorySections } from '../../redux/directory/directory.selectors'; 6 | 7 | import FragranceItem from '../fragrance-item/FragranceItem'; 8 | 9 | import './directory.styles.scss'; 10 | 11 | const Directory = ({ sections }) => ( 12 |
13 | {sections.map(({ id, ...otherSectionProps }) => ( 14 | 15 | ))} 16 |
17 | ); 18 | 19 | const mapStateToProps = createStructuredSelector({ 20 | sections: selectDirectorySections 21 | }); 22 | 23 | export default connect(mapStateToProps)(Directory); -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | .App-logo { 5 | height: 40vmin; 6 | pointer-events: none; 7 | } 8 | 9 | @media (prefers-reduced-motion: no-preference) { 10 | .App-logo { 11 | animation: App-logo-spin infinite 12 | 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 | a { 32 | text-decoration: none; 33 | color: black; 34 | } 35 | 36 | @keyframes App-logo-spin { 37 | from { 38 | transform: rotate(0deg); 39 | } 40 | to { 41 | transform: rotate(360deg); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/collections-overview/CollectionsOverview.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { createStructuredSelector } from 'reselect'; 4 | 5 | import PreviewCollection from '../preview-collection/PreviewCollection'; 6 | 7 | import { selectCollectionsForPreview } from '../../redux/shop/shop.selectors'; 8 | 9 | import './collections-overview.styles.scss'; 10 | 11 | const CollectionsOverview = ({ collections }) => ( 12 |
13 | {collections.map(({ id, ...otherCollectionProps }) => ( 14 | 15 | ))} 16 |
17 | ); 18 | 19 | const mapStateToProps = createStructuredSelector({ 20 | collections: selectCollectionsForPreview 21 | }); 22 | 23 | export default connect(mapStateToProps)(CollectionsOverview); -------------------------------------------------------------------------------- /src/pages/checkout/checkout.styles.scss: -------------------------------------------------------------------------------- 1 | .checkout-page { 2 | width: 55%; 3 | min-height: 90vh; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | margin: 50px auto 0; 8 | 9 | .checkout-header { 10 | width: 100%; 11 | padding: 10px 0; 12 | display: flex; 13 | justify-content: space-between; 14 | border-bottom: 1px solid darkgrey; 15 | 16 | .header-block { 17 | text-transform: capitalize; 18 | width: 23%; 19 | 20 | &:last-child { 21 | width: 8%; 22 | } 23 | } 24 | } 25 | 26 | .total { 27 | margin-top: 30px; 28 | margin-left: auto; 29 | font-size: 36px; 30 | } 31 | 32 | button { 33 | margin-left: auto; 34 | margin-top: 20px; 35 | } 36 | 37 | .test-warning { 38 | text-align: center; 39 | margin-top: 40px; 40 | font-size: 20px; 41 | color: red; 42 | opacity: 0.6; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/stripe-button/StripeButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import StripeCheckout from 'react-stripe-checkout'; 3 | 4 | const StripeCheckoutButton = ({ price }) => { 5 | const priceForStripe = price * 100; 6 | const publishableKey = 'pk_test_MC79yRmMaODTE96dTmPoUKph00XJrA6TpR'; 7 | 8 | const onToken = token => { 9 | console.log(token); 10 | alert('Payment Succesful!'); 11 | }; 12 | 13 | return ( 14 | 26 | ); 27 | }; 28 | 29 | export default StripeCheckoutButton; -------------------------------------------------------------------------------- /src/redux/cart/cart.selectors.js: -------------------------------------------------------------------------------- 1 | import { createSelector } from 'reselect'; 2 | 3 | const selectCart = state => state.cart; 4 | 5 | export const selectCartItems = createSelector( 6 | [selectCart], 7 | cart => cart.cartItems 8 | ); 9 | 10 | export const selectCartHidden = createSelector( 11 | [selectCart], 12 | cart => cart.hidden 13 | ); 14 | 15 | export const selectCartItemsCount = createSelector( 16 | [selectCartItems], 17 | cartItems => 18 | cartItems.reduce( 19 | (accumalatedQuantity, cartItem) => 20 | accumalatedQuantity + cartItem.quantity, 21 | 0 22 | ) 23 | ); 24 | 25 | export const selectCartTotal = createSelector( 26 | [selectCartItems], 27 | cartItems => 28 | cartItems.reduce( 29 | (accumalatedQuantity, cartItem) => 30 | accumalatedQuantity + cartItem.quantity * cartItem.price, 31 | 0 32 | ) 33 | ); -------------------------------------------------------------------------------- /src/pages/collection/CollectionPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | import CollectionItem from '../../components/collection-item/CollectionItem'; 5 | 6 | import { selectCollection } from '../../redux/shop/shop.selectors'; 7 | 8 | import './collection.styles.scss'; 9 | 10 | const CollectionPage = ({ collection }) => { 11 | const { title, items } = collection; 12 | return ( 13 |
14 |

{title}

15 |
16 | {items.map(item => ( 17 | 18 | ))} 19 |
20 |
21 | ); 22 | }; 23 | 24 | const mapStateToProps = (state, ownProps) => ({ 25 | collection: selectCollection(ownProps.match.params.collectionId)(state) 26 | }); 27 | 28 | export default connect(mapStateToProps)(CollectionPage); -------------------------------------------------------------------------------- /src/components/fragrance-item/FragranceItem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { withRouter } from "react-router-dom"; 3 | import "./fragrance-item.styles.scss"; 4 | const FragranceItem = ({ 5 | title, 6 | imageUrl, 7 | size, 8 | history, 9 | linkUrl, 10 | match 11 | }) => { 12 | return ( 13 |
16 | history.push( 17 | `${match.url}${linkUrl}` 18 | ) 19 | } 20 | > 21 |
27 |
28 |

29 | {title.toUpperCase()} 30 |

31 | 32 | SHOP NOW 33 | 34 |
35 |
36 | ); 37 | }; 38 | 39 | export default withRouter( 40 | FragranceItem 41 | ); 42 | -------------------------------------------------------------------------------- /src/components/cart-icon/CartIcon.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { connect } from "react-redux"; 3 | import { ReactComponent as ShoppingIcon } from "../../image/shop.bag.svg"; 4 | import { toggleCartHidden } from "../../redux/cart/cart.actions"; 5 | import { selectCartItemsCount } from '../../redux/cart/cart.selectors'; 6 | import "./cart-icon.styles.scss"; 7 | import { createStructuredSelector } from 'reselect'; 8 | 9 | const CartIcon = ({ toggleCartHidden, itemCount }) => ( 10 |
11 | 12 | {itemCount} 13 |
14 | ); 15 | 16 | const mapDispatchToProps = dispatch => ({ 17 | toggleCartHidden: () => dispatch(toggleCartHidden()) 18 | }); 19 | 20 | const mapStateToProps = createStructuredSelector({ 21 | itemCount: selectCartItemsCount 22 | }); 23 | 24 | export default connect( 25 | mapStateToProps, 26 | mapDispatchToProps 27 | )(CartIcon); -------------------------------------------------------------------------------- /src/components/collection-item/collection-item.styles.scss: -------------------------------------------------------------------------------- 1 | .collection-item { 2 | width: 22vw; 3 | display: flex; 4 | flex-direction: column; 5 | height: 350px; 6 | align-items: center; 7 | position: relative; 8 | 9 | .image { 10 | width: 100%; 11 | height: 95%; 12 | background-size: cover; 13 | background-position: center; 14 | margin-bottom: 5px; 15 | } 16 | 17 | .custom-button { 18 | width: 80%; 19 | opacity: 0.7; 20 | position: absolute; 21 | top: 255px; 22 | display: none; 23 | } 24 | 25 | &:hover { 26 | .image { 27 | opacity: 0.8; 28 | } 29 | 30 | .custom-button { 31 | opacity: 0.85; 32 | display: flex; 33 | } 34 | } 35 | 36 | .collection-footer { 37 | width: 100%; 38 | height: 5%; 39 | display: flex; 40 | justify-content: space-between; 41 | font-size: 18px; 42 | 43 | .name { 44 | width: 90%; 45 | margin-bottom: 15px; 46 | } 47 | 48 | .price { 49 | width: 10%; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/components/custom-button/custom-button.styles.scss: -------------------------------------------------------------------------------- 1 | .custom-button { 2 | min-width: 165px; 3 | width: auto; 4 | height: 50px; 5 | letter-spacing: 0.5px; 6 | line-height: 50px; 7 | padding: 0 35px 0 35px; 8 | font-size: 15px; 9 | background-color: black; 10 | color: white; 11 | text-transform: uppercase; 12 | font-family: "Open Sans Condensed"; 13 | font-weight: bolder; 14 | border: none; 15 | cursor: pointer; 16 | display: flex; 17 | justify-content: center; 18 | 19 | &:hover { 20 | background-color: white; 21 | color: black; 22 | border: 1px solid black; 23 | } 24 | 25 | &.google-sign-in { 26 | background-color: #4285f4; 27 | color: white; 28 | 29 | &:hover { 30 | background-color: #357ae8; 31 | border: none; 32 | } 33 | } 34 | 35 | &.inverted { 36 | background-color: white; 37 | color: black; 38 | border: 1px solid black; 39 | 40 | &:hover { 41 | background-color: black; 42 | color: white; 43 | border: none; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/redux/cart/cart.utils.js: -------------------------------------------------------------------------------- 1 | export const addItemToCart = (cartItems, cartItemToAdd) => { 2 | const existingCartItem = cartItems.find( 3 | cartItem => cartItem.id === cartItemToAdd.id 4 | ); 5 | 6 | if (existingCartItem) { 7 | return cartItems.map(cartItem => 8 | cartItem.id === cartItemToAdd.id 9 | ? { ...cartItem, quantity: cartItem.quantity + 1 } 10 | : cartItem 11 | ); 12 | } 13 | 14 | return [...cartItems, { ...cartItemToAdd, quantity: 1 }]; 15 | }; 16 | 17 | export const removeItemFromCart = (cartItems, cartItemToRemove) => { 18 | const existingCartItem = cartItems.find( 19 | cartItem => cartItem.id === cartItemToRemove.id 20 | ); 21 | 22 | if (existingCartItem.quantity === 1) { 23 | return cartItems.filter(cartItem => cartItem.id !== cartItemToRemove.id); 24 | } 25 | 26 | return cartItems.map(cartItem => 27 | cartItem.id === cartItemToRemove.id 28 | ? { ...cartItem, quantity: cartItem.quantity - 1 } 29 | : cartItem 30 | ); 31 | 32 | }; -------------------------------------------------------------------------------- /src/components/collection-item/CollectionItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import CustomButton from '../custom-button/CustomButton' 4 | import { addItem } from '../../redux/cart/cart.actions'; 5 | import './collection-item.styles.scss'; 6 | 7 | const CollectionItem = ({ item, addItem }) => { 8 | const { name, price, imageUrl } = item; 9 | 10 | return ( 11 |
12 |
18 |
19 | {name} 20 | €{price} 21 |
22 | addItem(item)} inverted> 23 | Add to cart 24 | 25 |
26 | ); 27 | }; 28 | 29 | const mapDispatchToProps = dispatch => ({ 30 | addItem: item => dispatch(addItem(item)) 31 | }); 32 | 33 | export default connect( 34 | null, 35 | mapDispatchToProps 36 | )(CollectionItem); -------------------------------------------------------------------------------- /src/redux/cart/cart.reducer.js: -------------------------------------------------------------------------------- 1 | import CartActionTypes from "./cart.types"; 2 | import { addItemToCart, removeItemFromCart } from './cart.utils'; 3 | const INITIAL_STATE = { 4 | hidden: true, 5 | cartItems: [] 6 | }; 7 | 8 | const cartReducer = (state = INITIAL_STATE, action) => { 9 | switch (action.type) { 10 | case CartActionTypes.TOGGLE_CART_HIDDEN: 11 | return { 12 | ...state, 13 | hidden: !state.hidden 14 | }; 15 | case CartActionTypes.ADD_ITEM: 16 | return { 17 | ...state, 18 | cartItems: addItemToCart(state.cartItems, action.payload) 19 | }; 20 | case CartActionTypes.REMOVE_ITEM: 21 | return { 22 | ...state, 23 | cartItems: removeItemFromCart(state.cartItems, action.payload) 24 | }; 25 | case CartActionTypes.CLEAR_ITEM_FROM_CART: 26 | return { 27 | ...state, 28 | cartItems: state.cartItems.filter( 29 | cartItem => cartItem.id !== action.payload.id 30 | ) 31 | }; 32 | default: 33 | return state; 34 | } 35 | }; 36 | 37 | export default cartReducer; 38 | -------------------------------------------------------------------------------- /src/components/form-input/form-input.styles.scss: -------------------------------------------------------------------------------- 1 | $sub-color: grey; 2 | $main-color: black; 3 | 4 | @mixin shrinkLabel { 5 | top: -14px; 6 | font-size: 12px; 7 | color: $main-color; 8 | } 9 | 10 | .group { 11 | position: relative; 12 | margin: 45px 0; 13 | 14 | .form-input { 15 | background: none; 16 | background-color: white; 17 | color: $sub-color; 18 | font-size: 18px; 19 | padding: 10px 10px 10px 5px; 20 | display: block; 21 | width: 100%; 22 | border: none; 23 | border-radius: 0; 24 | border-bottom: 1px solid $sub-color; 25 | margin: 25px 0; 26 | 27 | &:focus { 28 | outline: none; 29 | } 30 | 31 | &:focus ~ .form-input-label { 32 | @include shrinkLabel(); 33 | } 34 | } 35 | 36 | input[type="password"] { 37 | letter-spacing: 0.3em; 38 | } 39 | 40 | .form-input-label { 41 | color: $sub-color; 42 | font-size: 16px; 43 | font-weight: normal; 44 | position: absolute; 45 | pointer-events: none; 46 | left: 5px; 47 | top: 10px; 48 | transition: 300ms ease all; 49 | 50 | &.shrink { 51 | @include shrinkLabel(); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e-commerce", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "firebase": "^7.5.2", 10 | "node-sass": "^4.13.0", 11 | "react": "^16.12.0", 12 | "react-dom": "^16.12.0", 13 | "react-redux": "^7.1.3", 14 | "react-router-dom": "^5.1.2", 15 | "react-scripts": "3.3.0", 16 | "react-stripe-checkout": "^2.6.3", 17 | "redux": "^4.0.4", 18 | "redux-logger": "^3.0.6", 19 | "redux-persist": "^6.0.0", 20 | "reselect": "^4.0.0" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": "react-app" 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/cart-dropdown/CartDropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { connect } from 'react-redux'; 3 | import CustomButton from "../custom-button/CustomButton"; 4 | import CartItem from '../cart-item/CartItem'; 5 | import { createStructuredSelector } from 'reselect'; 6 | import "./cart-dropdown.styles.scss"; 7 | import { selectCartItems } from '../../redux/cart/cart.selectors'; 8 | import { toggleCartHidden } from '../../redux/cart/cart.actions.js'; 9 | import { withRouter } from 'react-router-dom'; 10 | 11 | const CartDropdown = ({ cartItems, history, dispatch }) => ( 12 |
13 |
14 | {cartItems.length ? ( 15 | cartItems.map(cartItem => ( 16 | 17 | )) 18 | ) : ( 19 | Your cart is empty 20 | )} 21 |
22 | { 23 | history.push('/checkout'); 24 | dispatch(toggleCartHidden()); 25 | }}>GO PAY NOW 26 |
27 | ); 28 | 29 | const mapStateToProps = createStructuredSelector({ 30 | cartItems: selectCartItems 31 | }); 32 | 33 | export default withRouter(connect(mapStateToProps)(CartDropdown)); 34 | -------------------------------------------------------------------------------- /src/redux/directory/directory.reducer.js: -------------------------------------------------------------------------------- 1 | const INITIAL_STATE = { 2 | sections: [ 3 | { 4 | id: 1, 5 | title: "bestsellers", 6 | imageUrl: require("../../image/bestsellers.jpg"), 7 | linkUrl: "shop/bestsellers" 8 | }, 9 | { 10 | id: 2, 11 | title: "luxury", 12 | imageUrl: require("../../image/luxury.jpg"), 13 | linkUrl: "shop/luxury" 14 | }, 15 | { 16 | id: 3, 17 | title: "budget", 18 | imageUrl: require("../../image/budget.jpg"), 19 | linkUrl: "shop/budget" 20 | }, 21 | { 22 | id: 4, 23 | title: "womens", 24 | imageUrl: require("../../image/womens.jpg"), 25 | size: "large", 26 | linkUrl: "shop/womens" 27 | }, 28 | { 29 | id: 5, 30 | title: "mens", 31 | imageUrl: require("../../image/mens.jpg"), 32 | size: "large", 33 | linkUrl: "shop/mens" 34 | } 35 | ] 36 | } 37 | 38 | const directoryReducer = (state = INITIAL_STATE, action) => { 39 | switch (action.type) { 40 | default: 41 | return state; 42 | } 43 | }; 44 | 45 | export default directoryReducer; -------------------------------------------------------------------------------- /src/components/fragrance-item/fragrance-item.styles.scss: -------------------------------------------------------------------------------- 1 | .fragrance-item { 2 | min-width: 30%; 3 | height: 240px; 4 | flex: 1 1 auto; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | border: 1px solid black; 9 | margin: 0 7.5px 15px; 10 | overflow: hidden; 11 | &:hover { 12 | cursor: pointer; 13 | 14 | & .background-image { 15 | opacity: 0.7; 16 | transform: scale(1.1); 17 | transition: transform 4s cubic-bezier(0.25, 0.45, 0.45, 0.95); 18 | } 19 | 20 | & .content { 21 | opacity: 0.8; 22 | } 23 | } 24 | 25 | &.large { 26 | height: 380px; 27 | } 28 | &:first-child { 29 | margin-right: 7.5px; 30 | } 31 | 32 | &:last-child { 33 | margin-left: 7.5px; 34 | } 35 | .background-image { 36 | width: 100%; 37 | height: 100%; 38 | background-position: center; 39 | background-size: cover; 40 | } 41 | 42 | .content { 43 | height: 90px; 44 | padding: 0 25px; 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | justify-content: center; 49 | background-color: white; 50 | opacity: 0.8; 51 | position: absolute; 52 | .title { 53 | font-weight: bold; 54 | margin-bottom: 6px; 55 | font-size: 22px; 56 | color: #4a4a4a; 57 | } 58 | 59 | .subtitle { 60 | font-weight: lighter; 61 | font-size: 16px; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/components/checkout-item/CheckoutItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | import { 5 | clearItemFromCart, 6 | addItem, 7 | removeItem 8 | } from '../../redux/cart/cart.actions'; 9 | import './checkout-item.styles.scss'; 10 | 11 | const CheckoutItem = ({ cartItem, clearItem, addItem, removeItem }) => { 12 | const { name, imageUrl, price, quantity } = cartItem; 13 | return ( 14 |
15 |
16 | item 17 |
18 | {name} 19 | 20 |
removeItem(cartItem)}> 21 | ❮ 22 |
23 | {quantity} 24 |
addItem(cartItem)}> 25 | ❯ 26 |
27 | 28 | €{price} 29 |
clearItem(cartItem)}> 30 | ✕ 31 |
32 |
33 | ); 34 | }; 35 | 36 | const mapDispatchToProps = dispatch => ({ 37 | clearItem: item => dispatch(clearItemFromCart(item)), 38 | addItem: item => dispatch(addItem(item)), 39 | removeItem: item => dispatch(removeItem(item)) 40 | }); 41 | 42 | export default connect( 43 | null, 44 | mapDispatchToProps 45 | )(CheckoutItem); -------------------------------------------------------------------------------- /src/firebase/firebase.utils.js: -------------------------------------------------------------------------------- 1 | import firebase from "firebase/app"; 2 | import "firebase/firestore"; 3 | import "firebase/auth"; 4 | 5 | const config = { 6 | apiKey: 7 | "AIzaSyCX9DXcBV0JQV0Rnuu2e2OD3aeicgMoF0k", 8 | authDomain: 9 | "fragrance-db.firebaseapp.com", 10 | databaseURL: 11 | "https://fragrance-db.firebaseio.com", 12 | projectId: "fragrance-db", 13 | storageBucket: 14 | "fragrance-db.appspot.com", 15 | messagingSenderId: "802916175797", 16 | appId: 17 | "1:802916175797:web:6fb713d075df5f095593fc", 18 | measurementId: "G-B02VT7GK5L" 19 | }; 20 | 21 | export const createUserProfileDocument = async (userAuth, additionalData) => { 22 | if (!userAuth) return; 23 | 24 | const userRef = firestore.doc(`users/${userAuth.uid}`); 25 | 26 | const snapShot = await userRef.get(); 27 | 28 | if (!snapShot.exists) { 29 | const { displayName, email } = userAuth; 30 | const createdAt = new Date(); 31 | try { 32 | await userRef.set({ 33 | displayName, 34 | email, 35 | createdAt, 36 | ...additionalData 37 | }); 38 | } catch (error) { 39 | console.log('error creating user', error.message); 40 | } 41 | } 42 | 43 | return userRef; 44 | }; 45 | 46 | 47 | firebase.initializeApp(config); 48 | 49 | export const auth = firebase.auth(); 50 | export const firestore = firebase.firestore(); 51 | 52 | const provider = new firebase.auth.GoogleAuthProvider(); 53 | provider.setCustomParameters({ 54 | prompt: "select_account" 55 | }); 56 | export const signInWithGoogle = () => 57 | auth.signInWithPopup(provider); 58 | 59 | export default firebase; 60 | -------------------------------------------------------------------------------- /src/pages/checkout/Checkout.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { createStructuredSelector } from 'reselect'; 4 | 5 | import CheckoutItem from '../../components/checkout-item/CheckoutItem'; 6 | import StripeCheckoutButton from '../../components/stripe-button/StripeButton'; 7 | 8 | import { 9 | selectCartItems, 10 | selectCartTotal 11 | } from '../../redux/cart/cart.selectors'; 12 | 13 | import './checkout.styles.scss'; 14 | 15 | const CheckoutPage = ({ cartItems, total }) => ( 16 |
17 |
18 |
19 | Product 20 |
21 |
22 | Description 23 |
24 |
25 | Quantity 26 |
27 |
28 | Price 29 |
30 |
31 | Remove 32 |
33 |
34 | {cartItems.map(cartItem => ( 35 | 36 | ))} 37 |
TOTAL: €{total}
38 |
39 | *Please use the following test credit card for payments* 40 |
41 | XXXX XXXX XXXX XXXX - Exp: 01/20 - CVV: 123 42 |
43 | 44 |
45 | ); 46 | 47 | const mapStateToProps = createStructuredSelector({ 48 | cartItems: selectCartItems, 49 | total: selectCartTotal 50 | }); 51 | 52 | export default connect(mapStateToProps)(CheckoutPage); -------------------------------------------------------------------------------- /src/components/sign-in/SignIn.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import FormInput from "../form-input/FormInput.js"; 4 | import CustomButton from "../custom-button/CustomButton.js"; 5 | import { signInWithGoogle } from "../../firebase/firebase.utils.js"; 6 | import "./sign-in.styles.scss"; 7 | 8 | export default function SignIn() { 9 | const [ 10 | credentials, 11 | setCredentials 12 | ] = useState({ 13 | email: "", 14 | password: "" 15 | }); 16 | 17 | const handleSubmit = e => { 18 | e.preventDefault(); 19 | setCredentials({ 20 | email: "", 21 | password: "" 22 | }); 23 | }; 24 | 25 | const handleChange = e => { 26 | setCredentials({ 27 | ...credentials, 28 | [e.target.name]: e.target.value 29 | }); 30 | }; 31 | return ( 32 |
33 |

I already have an account

34 | 35 | Sign in with your email and 36 | password 37 | 38 | 39 |
40 | 48 | 56 |
57 | 58 | {" "} 59 | Sign in{" "} 60 | 61 | 65 | {" "} 66 | Sign in with Google{" "} 67 | 68 |
69 | 70 |
71 | ); 72 | } 73 | -------------------------------------------------------------------------------- /src/components/header/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./header.styles.scss"; 3 | import { Link } from "react-router-dom"; 4 | import Logo from "../../image/logo.png"; 5 | import { auth } from "../../firebase/firebase.utils.js"; 6 | import { connect } from "react-redux"; 7 | import CartIcon from "../cart-icon/CartIcon"; 8 | import CartDropdown from "../cart-dropdown/CartDropdown"; 9 | import { createStructuredSelector } from 'reselect'; 10 | import { selectCurrentUser } from '../../redux/user/user.selectors'; 11 | import { selectCartHidden } from '../../redux/cart/cart.selectors'; 12 | 13 | const Header = ({ 14 | currentUser, 15 | hidden 16 | }) => { 17 | return ( 18 |
19 | 23 | 31 | 32 |
33 | 37 | SHOP 38 | 39 | 43 | CONTACT 44 | 45 | {currentUser ? ( 46 |
49 | auth.signOut() 50 | } 51 | > 52 | SIGN OUT 53 |
54 | ) : ( 55 | 59 | SIGN IN 60 | 61 | )} 62 | 63 |
64 | {hidden ? null : } 65 |
66 | ); 67 | }; 68 | 69 | const mapStateToProps = createStructuredSelector({ 70 | currentUser: selectCurrentUser, 71 | hidden: selectCartHidden 72 | }); 73 | 74 | export default connect(mapStateToProps)( 75 | Header 76 | ); 77 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 13 | 17 | 21 | 25 | 29 | 33 | 37 | 46 | 47 | makes Scents | Turku Fragrances 48 | 49 | 50 | 51 | 55 |
56 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/image/shop.bag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 12 | 16 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/sign-up/SignUp.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import FormInput from "../form-input/FormInput.js"; 3 | import CustomButton from "../custom-button/CustomButton.js"; 4 | import { 5 | auth, 6 | createUserProfileDocument 7 | } from "../../firebase/firebase.utils"; 8 | import "./sign-up.styles.scss"; 9 | 10 | export default function SignUp() { 11 | const [ 12 | newAccount, 13 | setNewAccount 14 | ] = useState({ 15 | displayName: "", 16 | email: "", 17 | password: "", 18 | confirmPassword: "" 19 | }); 20 | const { 21 | displayName, 22 | email, 23 | password, 24 | confirmPassword 25 | } = newAccount; 26 | const handleSubmit = async event => { 27 | event.preventDefault(); 28 | 29 | if (password !== confirmPassword) { 30 | alert("passwords don't match"); 31 | return; 32 | } 33 | 34 | // signUpStart({ 35 | // displayName, 36 | // email, 37 | // password 38 | // }); 39 | }; 40 | 41 | const handleChange = event => { 42 | const { 43 | name, 44 | value 45 | } = event.target; 46 | 47 | setNewAccount({ 48 | ...newAccount, 49 | [name]: value 50 | }); 51 | }; 52 | return ( 53 |
54 |

55 | I do not have an account 56 |

57 | 58 | Sign up with your email and 59 | password 60 | 61 |
65 | 73 | 81 | 89 | 97 | 98 | SIGN UP 99 | 100 | 101 |
102 | ); 103 | } 104 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Route, 4 | Switch, 5 | Redirect 6 | } from "react-router-dom"; 7 | import HomePage from "./pages/homepage/HomePage"; 8 | import CheckoutPage from './pages/checkout/Checkout'; 9 | import ShopPage from "./pages/shop/Shop"; 10 | import "./App.css"; 11 | import AuthenPage from "./pages/authen-page/AuthenPage"; 12 | 13 | import Header from "./components/header/Header"; 14 | import { 15 | auth, 16 | createUserProfileDocument 17 | } from "./firebase/firebase.utils"; 18 | import { connect } from "react-redux"; 19 | import { createStructuredSelector } from 'reselect'; 20 | import { setCurrentUser } from './redux/user/user.actions'; 21 | import { selectCurrentUser } from './redux/user/user.selectors'; 22 | 23 | class App extends React.Component { 24 | unsubscribeFromAuth = null; 25 | 26 | componentDidMount() { 27 | const { 28 | setCurrentUser 29 | } = this.props; 30 | 31 | this.unsubscribeFromAuth = auth.onAuthStateChanged( 32 | async userAuth => { 33 | if (userAuth) { 34 | const userRef = await createUserProfileDocument( 35 | userAuth 36 | ); 37 | 38 | userRef.onSnapshot( 39 | snapShot => { 40 | setCurrentUser({ 41 | id: snapShot.id, 42 | ...snapShot.data() 43 | }); 44 | } 45 | ); 46 | } 47 | 48 | setCurrentUser(userAuth); 49 | } 50 | ); 51 | } 52 | 53 | componentWillUnmount() { 54 | this.unsubscribeFromAuth(); 55 | } 56 | 57 | render() { 58 | return ( 59 |
60 |
61 | 62 | 67 | 71 | 76 | 80 | this.props.currentUser ? ( 81 | 82 | ) : ( 83 | 84 | ) 85 | } 86 | /> 87 | 88 |
89 | ); 90 | } 91 | } 92 | 93 | const mapStateToProps = createStructuredSelector({ 94 | currentUser: selectCurrentUser 95 | }); 96 | 97 | 98 | const mapDispatchToProps = dispatch => ({ 99 | setCurrentUser: user => 100 | dispatch(setCurrentUser(user)) 101 | }); 102 | 103 | export default connect( 104 | mapStateToProps, 105 | mapDispatchToProps 106 | )(App); 107 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | 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. 35 | 36 | 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. 37 | 38 | 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. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | # online-course 70 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' } 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready.then(registration => { 134 | registration.unregister(); 135 | }); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /src/redux/shop/shop.data.js: -------------------------------------------------------------------------------- 1 | const SHOP_DATA = { 2 | bestsellers: { 3 | id: 1, 4 | title: "Bestsellers", 5 | routeName: "bestsellers", 6 | items: [ 7 | { 8 | id: 1, 9 | name: "Versace pour homme", 10 | imageUrl: require("../../image/bestsellers/versace-75.jpg"), 11 | price: 75 12 | }, 13 | { 14 | id: 2, 15 | name: "Chanel No.5", 16 | imageUrl: require("../../image/bestsellers/chanel-no5-120.jpg"), 17 | price: 120 18 | }, 19 | { 20 | id: 3, 21 | name: "DavidOff Cool water", 22 | imageUrl: require("../../image/bestsellers/Davidoff-Coolwater.jpg"), 23 | price: 68 24 | }, 25 | { 26 | id: 4, 27 | name: 28 | "Lancome La vie est belle", 29 | imageUrl: require("../../image/bestsellers/lancome-lavie.png"), 30 | price: 110 31 | }, 32 | { 33 | id: 5, 34 | name: "Acqua di GIO", 35 | imageUrl: require("../../image/bestsellers/aquadi-gio.jpg"), 36 | price: 65 37 | }, 38 | { 39 | id: 6, 40 | name: "YSL Black Opium", 41 | imageUrl: require("../../image/bestsellers/ysl-blackopium.jpg"), 42 | price: 85 43 | }, 44 | { 45 | id: 7, 46 | name: "Jean Paul Gaultier EDT", 47 | imageUrl: require("../../image/bestsellers/jean-paul-60.jpg"), 48 | price: 60 49 | }, 50 | { 51 | id: 8, 52 | name: "D&G Light Blue", 53 | imageUrl: require("../../image/bestsellers/d&g-lightblue.jpg"), 54 | price: 95 55 | }, 56 | { 57 | id: 9, 58 | name: "1Million Parco Rabanne", 59 | imageUrl: require("../../image/bestsellers/parco-rabanne.jpg"), 60 | price: 74 61 | }, 62 | ] 63 | }, 64 | luxury: { 65 | id: 2, 66 | title: "Luxury", 67 | routeName: "luxury", 68 | items: [ 69 | { 70 | id: 10, 71 | name: "Delina Exclusif", 72 | imageUrl: require("../../image/luxury/delina-exclusif-230.jpg"), 73 | price: 235 74 | }, 75 | { 76 | id: 11, 77 | name: "Giorgio Armani", 78 | imageUrl: require("../../image/luxury/giorgio-armani-398.jpg"), 79 | price: 398 80 | }, 81 | { 82 | id: 12, 83 | name: "Gris Dior", 84 | imageUrl: require("../../image/luxury/gris-dior-307.jpg"), 85 | price: 307 86 | }, 87 | { 88 | id: 13, 89 | name: "Guerlains les Exclusifs", 90 | imageUrl: require("../../image/luxury/guerlains-205.jpg"), 91 | price: 205 92 | }, 93 | { 94 | id: 14, 95 | name: "Oud Maison", 96 | imageUrl: require("../../image/luxury/oud-maison-290.jpg"), 97 | price: 290 98 | }, 99 | ] 100 | }, 101 | budget: { 102 | id: 3, 103 | title: "Budget", 104 | routeName: "budget", 105 | items: [ 106 | { 107 | id: 16, 108 | name: "Midnight Fantasy", 109 | imageUrl: require("../../image/budget/britney-14.5.jpg"), 110 | price: 14.5 111 | }, 112 | { 113 | id: 17, 114 | name: "Reb'l Fleur Rihanna ", 115 | imageUrl: require("../../image/budget/rihana-18.jpg"), 116 | price: 18 117 | }, 118 | { 119 | id: 18, 120 | name: "Lolita Lempicka", 121 | imageUrl: require("../../image/budget/lolita-25.jpg"), 122 | price: 25 123 | }, 124 | { 125 | id: 19, 126 | name: "Someday by J.Bieber", 127 | imageUrl: require("../../image/budget/jbsd-18.9.jpg"), 128 | price: 19 129 | }, 130 | { 131 | id: 15, 132 | name: "TruthOrDare By Madonna", 133 | imageUrl: require("../../image/budget/truth-dare-40.jpeg"), 134 | price: 30 135 | }, 136 | { 137 | id: 40, 138 | name: "Pink Sugar", 139 | imageUrl: require("../../image/budget/pink-sugar-20.jpg"), 140 | price: 20 141 | }, 142 | { 143 | id: 41, 144 | name: "Moschino", 145 | imageUrl: require("../../image/budget/moschino-20.jpg"), 146 | price: 20 147 | }, 148 | { 149 | id: 42, 150 | name: "Ferragamo", 151 | imageUrl: require("../../image/budget/ferragamo-35.jpg"), 152 | price: 35 153 | }, 154 | ] 155 | }, 156 | womens: { 157 | id: 4, 158 | title: "Womens", 159 | routeName: "womens", 160 | items: [ 161 | { 162 | id: 21, 163 | name: "Good Girl", 164 | imageUrl: require("../../image/womens/good-girl-95.jpg"), 165 | price: 95 166 | }, 167 | { 168 | id: 20, 169 | name: "Le Labo", 170 | imageUrl: require("../../image/womens/lelabo-100.jpg"), 171 | price: 110 172 | }, 173 | { 174 | id: 23, 175 | name: "Lancome Tresor", 176 | imageUrl: require("../../image/womens/lancome-tresor-50.jpg"), 177 | price: 65 178 | }, 179 | { 180 | id: 22, 181 | name: "Viva la Juicy", 182 | imageUrl: require("../../image/womens/viva-lajuicy-45.jpg"), 183 | price: 80 184 | }, 185 | { 186 | id: 24, 187 | name: "Miss Dior", 188 | imageUrl: require("../../image/womens/missdior-100.jpeg"), 189 | price: 100 190 | }, 191 | { 192 | id: 25, 193 | name: "Chanel Chance", 194 | imageUrl: require("../../image/womens/chanel-chance.jpg"), 195 | price: 120 196 | }, 197 | { 198 | id: 26, 199 | name: "Coco Chanel", 200 | imageUrl: require("../../image/womens/coco-chanel.jpg"), 201 | price: 20 202 | }, 203 | { 204 | id: 43, 205 | name: "Poison Girl Dior", 206 | imageUrl: require("../../image/womens/dior-poison-100.jpg"), 207 | price: 100 208 | }, 209 | { 210 | id: 44, 211 | name: "YSL Black Opium", 212 | imageUrl: require("../../image/bestsellers/ysl-blackopium.jpg"), 213 | price: 85 214 | }, 215 | { 216 | id: 45, 217 | name: "Chanel No.5", 218 | imageUrl: require("../../image/bestsellers/chanel-no5-120.jpg"), 219 | price: 120 220 | }, 221 | { 222 | id: 46, 223 | name: 224 | "Lancome La vie est belle", 225 | imageUrl: require("../../image/bestsellers/lancome-lavie.png"), 226 | price: 110 227 | }, 228 | ] 229 | }, 230 | mens: { 231 | id: 5, 232 | title: "Mens", 233 | routeName: "mens", 234 | items: [ 235 | { 236 | id: 27, 237 | name: "Dior Sauvage", 238 | imageUrl: require("../../image/mens/dior-sauvage.jpg"), 239 | price: 87 240 | }, 241 | { 242 | id: 28, 243 | name: "Tomford Tobacco", 244 | imageUrl: require("../../image/mens/tomford-tabaco-152.jpg"), 245 | price: 152 246 | }, 247 | { 248 | id: 29, 249 | name: 250 | "Invictus", 251 | imageUrl: require("../../image/mens/invictus-52.jpg"), 252 | price: 52 253 | }, 254 | { 255 | id: 30, 256 | name: "CoSTUME National Homme", 257 | imageUrl: require("../../image/mens/custume-45.jpg"), 258 | price: 45 259 | }, 260 | { 261 | id: 31, 262 | name: "Versace Homme", 263 | imageUrl: require("../../image/mens/versace-75.jpg"), 264 | price: 75 265 | }, 266 | { 267 | id: 32, 268 | name: "Jean Paul", 269 | imageUrl: require("../../image/mens/jean-paul-60.jpg"), 270 | price: 60 271 | }, 272 | { 273 | id: 52, 274 | name: "CK be", 275 | imageUrl: require("../../image/mens/ck-35.jpg"), 276 | price: 55 277 | }, 278 | { 279 | id: 53, 280 | name: "Lanuit de l'homme YSL", 281 | imageUrl: require("../../image/mens/ysl-lanuit-70.jpeg"), 282 | price: 70 283 | }, 284 | { 285 | id: 54, 286 | name: "DavidOff Cool water", 287 | imageUrl: require("../../image/bestsellers/Davidoff-Coolwater.jpg"), 288 | price: 68 289 | }, 290 | ] 291 | } 292 | }; 293 | export default SHOP_DATA; --------------------------------------------------------------------------------