├── .gitignore ├── LICENCE.txt ├── README.md ├── env.local.sample ├── lib └── gtag.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── fonts │ ├── roboto-condensed-v18-latin-regular.eot │ ├── roboto-condensed-v18-latin-regular.svg │ ├── roboto-condensed-v18-latin-regular.ttf │ ├── roboto-condensed-v18-latin-regular.woff │ └── roboto-condensed-v18-latin-regular.woff2 ├── img │ ├── carousel │ │ ├── Laptops │ │ │ ├── 01.jpg │ │ │ └── 01.webp │ │ ├── Mobile Phones │ │ │ ├── 01.jpg │ │ │ └── 01.webp │ │ └── Tablets │ │ │ ├── 01.jpg │ │ │ └── 01.webp │ ├── logo.jpg │ ├── logo.webp │ ├── mini-logo.jpg │ ├── mini-logo.webp │ ├── owner.jpg │ └── owner.webp └── zeit.svg └── src ├── components ├── Layout.js ├── ProductListItem.js ├── SearchResult.js ├── Timer.js ├── cart │ ├── CartList.js │ └── cartList │ │ └── CartListItem.js ├── checkout │ ├── CartInfo.js │ ├── Form.js │ ├── PayPalCheckoutButton.js │ └── cartInfo │ │ └── CheckoutCartListItem.js ├── index │ ├── FeaturedCarousel.js │ └── FeaturedProducts.js ├── layout │ ├── AuthForm.js │ ├── CookieBanner.js │ ├── Footer.js │ ├── Header.js │ ├── authForm │ │ ├── LogIn.js │ │ ├── Registration.js │ │ └── ResetPassword.js │ ├── footer │ │ ├── Lists.js │ │ ├── SelectButtons.js │ │ └── Social.js │ └── header │ │ ├── AuthButtons.js │ │ ├── CartButton.js │ │ ├── Catalogue.js │ │ ├── Logo.js │ │ ├── Nav.js │ │ └── Search.js └── productPage │ ├── AddToCart.js │ ├── ProductInfo.js │ ├── ProductSlider.js │ ├── RelatedProducts.js │ ├── Reviews.js │ └── relatedProduct │ └── relatedProduct.js ├── context ├── cartContext.js ├── cookiesContext.js └── currencyContext.js └── pages ├── _app.js ├── _document.js ├── about.js ├── api ├── available.js ├── cart.js ├── categories.js ├── contact.js ├── currencyRates.js ├── order.js ├── postReview.js └── search.js ├── cart.js ├── checkout.js ├── contact-us.js ├── index.js ├── product-page └── [id].js ├── products └── [category] │ └── [page].js ├── sales └── [category].js ├── search └── [value].js └── thank-you.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | -------------------------------------------------------------------------------- /LICENCE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 AlexTechNoir 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /env.local.sample: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_DEV_HOST=XXX 2 | NEXT_PUBLIC_PROD_HOST=XXX 3 | 4 | DEV_CMS_URL=XXX 5 | PROD_CMS_URL=XXX 6 | 7 | NEXT_PUBLIC_GA_ID=XXX 8 | 9 | OERAPI_ACCESS_KEY=XXX 10 | 11 | NEXT_PUBLIC_PAYPAL_CLIENT_ID=XXX 12 | NEXT_PUBLIC_PAYPAL_MERCHANT_ID=XXX 13 | 14 | NODEMAILER_SENDER_EMAIL=XXX 15 | NODEMAILER_SENDER_EMAIL_PASSWORD=XXX -------------------------------------------------------------------------------- /lib/gtag.js: -------------------------------------------------------------------------------- 1 | export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID 2 | 3 | // https://developers.google.com/analytics/devguides/collection/gtagjs/pages 4 | export const pageview = (url) => { 5 | window.gtag('config', GA_TRACKING_ID, { 6 | page_path: url, 7 | }) 8 | } 9 | 10 | // https://developers.google.com/analytics/devguides/collection/gtagjs/events 11 | export const event = ({ action, category, label, value }) => { 12 | window.gtag('event', action, { 13 | event_category: category, 14 | event_label: label, 15 | value: value, 16 | }) 17 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next_online_store", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.32", 12 | "@fortawesome/free-brands-svg-icons": "^5.15.1", 13 | "@fortawesome/free-regular-svg-icons": "^5.15.1", 14 | "@fortawesome/free-solid-svg-icons": "^5.15.1", 15 | "@fortawesome/react-fontawesome": "^0.1.13", 16 | "@paypal/react-paypal-js": "^7.8.1", 17 | "draft-js": "^0.11.7", 18 | "draftjs-to-html": "^0.9.1", 19 | "formik": "^2.2.5", 20 | "html-to-draftjs": "^1.4.0", 21 | "isomorphic-dompurify": "^0.19.0", 22 | "next": "^11.1.4", 23 | "nodemailer": "^6.7.7", 24 | "react": "^17.0.2", 25 | "react-dom": "^17.0.2", 26 | "react-draft-wysiwyg": "^1.14.6", 27 | "react-image-magnifiers": "^1.4.0", 28 | "react-paginate": "^6.5.0", 29 | "react-responsive-carousel": "^3.2.10", 30 | "styled-components": "^5.2.1", 31 | "swr": "^1.3.0", 32 | "yup": "^0.32.11" 33 | }, 34 | "devDependencies": { 35 | "babel-plugin-styled-components": "^1.12.0", 36 | "webpack": "^5.73.0" 37 | }, 38 | "babel": { 39 | "presets": [ 40 | "next/babel" 41 | ], 42 | "plugins": [ 43 | [ 44 | "babel-plugin-styled-components", 45 | { 46 | "ssr": true 47 | } 48 | ] 49 | ] 50 | }, 51 | "engines": { 52 | "npm": ">=7.0.0", 53 | "node": ">=16.0.0" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/roboto-condensed-v18-latin-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/fonts/roboto-condensed-v18-latin-regular.eot -------------------------------------------------------------------------------- /public/fonts/roboto-condensed-v18-latin-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/fonts/roboto-condensed-v18-latin-regular.ttf -------------------------------------------------------------------------------- /public/fonts/roboto-condensed-v18-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/fonts/roboto-condensed-v18-latin-regular.woff -------------------------------------------------------------------------------- /public/fonts/roboto-condensed-v18-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/fonts/roboto-condensed-v18-latin-regular.woff2 -------------------------------------------------------------------------------- /public/img/carousel/Laptops/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/carousel/Laptops/01.jpg -------------------------------------------------------------------------------- /public/img/carousel/Laptops/01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/carousel/Laptops/01.webp -------------------------------------------------------------------------------- /public/img/carousel/Mobile Phones/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/carousel/Mobile Phones/01.jpg -------------------------------------------------------------------------------- /public/img/carousel/Mobile Phones/01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/carousel/Mobile Phones/01.webp -------------------------------------------------------------------------------- /public/img/carousel/Tablets/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/carousel/Tablets/01.jpg -------------------------------------------------------------------------------- /public/img/carousel/Tablets/01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/carousel/Tablets/01.webp -------------------------------------------------------------------------------- /public/img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/logo.jpg -------------------------------------------------------------------------------- /public/img/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/logo.webp -------------------------------------------------------------------------------- /public/img/mini-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/mini-logo.jpg -------------------------------------------------------------------------------- /public/img/mini-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/mini-logo.webp -------------------------------------------------------------------------------- /public/img/owner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/owner.jpg -------------------------------------------------------------------------------- /public/img/owner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlexTechNoir/Next.js-Strapi-Ecommerce-store/fb5e88fb4dbd65411dc59d9ecec275f6446e5bd9/public/img/owner.webp -------------------------------------------------------------------------------- /public/zeit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useContext } from 'react' 2 | import styled, { createGlobalStyle, keyframes } from 'styled-components' 3 | import dynamic from 'next/dynamic' 4 | import { useRouter } from 'next/router' 5 | import * as gtag from '../../lib/gtag' 6 | import CookiesContext from '../context/cookiesContext' 7 | 8 | import Header from './layout/Header' 9 | const AuthForm = dynamic(() => import('./layout/AuthForm')) 10 | import CookieBanner from './layout/CookieBanner' 11 | import Footer from './layout/Footer' 12 | 13 | export default function Layout(props) { 14 | 15 | // auth modal ↓ 16 | const [ isAuthModalVisible, setIsAuthModalVisible ] = useState(false) 17 | const [ isLogInTabVisible, setIsLogInTabVisible ] = useState(null) 18 | 19 | const handleAuthModalVisibility = e => { 20 | 21 | if (e.currentTarget.name === 'logIn') { 22 | 23 | setIsAuthModalVisible(true) 24 | setIsLogInTabVisible(true) 25 | document.body.style.overflow = 'hidden' 26 | 27 | } else if (e.currentTarget.name === 'singUp') { 28 | 29 | setIsAuthModalVisible(true) 30 | setIsLogInTabVisible(false) 31 | document.body.style.overflow = 'hidden' 32 | } 33 | } 34 | 35 | const closeAuthModal = e => { 36 | if (e.target.id === 'outsideAuthModal') { 37 | setIsAuthModalVisible(false) 38 | document.body.style.overflow = 'visible' 39 | } 40 | } 41 | 42 | // cookies ↓ 43 | const { areCookiesAccepted, setAreCookiesAccepted } = useContext(CookiesContext) 44 | 45 | const [ isCookieBannerVisible, setIsCookieBannerVisible ] = useState(false) 46 | 47 | const router = useRouter() 48 | 49 | const setCookies = () => { 50 | 51 | if (localStorage.getItem('areCookiesAccepted') !== null) { 52 | if (localStorage.getItem('areCookiesAccepted') === 'false') { 53 | setAreCookiesAccepted(false) 54 | } else { 55 | setAreCookiesAccepted(true) 56 | } 57 | } 58 | } 59 | 60 | const setCookiesBanner = () => { 61 | if ( 62 | localStorage.getItem('isCookieBannerVisible') !== null || 63 | localStorage.getItem('isCookieBannerVisible') === 'false' 64 | ) { 65 | setIsCookieBannerVisible(false) 66 | } else { 67 | setIsCookieBannerVisible(true) 68 | } 69 | } 70 | 71 | const manageGAScript = () => { 72 | if (localStorage.getItem('areCookiesAccepted') === 'true') { 73 | 74 | // initialize script on route change 75 | const handleRouteChange = url => { 76 | gtag.pageview(url) 77 | } 78 | router.events.on('routeChangeComplete', handleRouteChange) 79 | return () => { 80 | router.events.off('routeChangeComplete', handleRouteChange) 81 | } 82 | 83 | } else if (localStorage.getItem('areCookiesAccepted') === 'false') { 84 | 85 | // delete all GA cookies by expiring them 86 | 87 | document.cookie = '_ga=; Max-Age=0;' 88 | 89 | const cookiePair = document.cookie.split('; ').find(row => row.startsWith('_ga_')) 90 | if (cookiePair !== undefined) { 91 | const cookieName = cookiePair.substring(0, cookiePair.indexOf('=')) 92 | document.cookie = `${cookieName}=; Max-Age=0;` 93 | } 94 | 95 | document.cookie = '_gid=; Max-Age=0;' 96 | } 97 | } 98 | 99 | const showCookieBanner = e => { 100 | e.preventDefault() 101 | setIsCookieBannerVisible(true) 102 | } 103 | 104 | useEffect(() => { 105 | setCookies() 106 | }, [isCookieBannerVisible]) // triggers here in setCookiesBanner() and showCookieBanner(), and in components/layout/CookieBanner.js in rejectCookies() and acceptCookies() 107 | 108 | useEffect(() => { 109 | setCookiesBanner() 110 | }, [areCookiesAccepted]) // triggers here in setCookies(), and in components/layout/CookieBanner.js in rejectCookies() and acceptCookies() 111 | 112 | useEffect(() => { 113 | manageGAScript() 114 | }, [router.events, areCookiesAccepted]) // router.events triggers on route change and set here in manageGAScript(); areCookiesAccepted - see comment above 115 | 116 | return ( 117 | <> 118 | 119 | 120 |
121 | { 122 | isAuthModalVisible 123 | ? 128 | : null 129 | } 130 | {props.children} 131 | 136 |