├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
└── src
    ├── App.js
    ├── assets
        ├── icons
        │   ├── all.png
        │   ├── appointments.png
        │   ├── body.png
        │   ├── close.png
        │   ├── line.png
        │   ├── logo.png
        │   ├── makeup.png
        │   ├── massage.png
        │   ├── menu.png
        │   ├── messages.png
        │   ├── nails.png
        │   ├── refresh.png
        │   ├── scroll.png
        │   ├── star.png
        │   ├── tick.png
        │   ├── tickbox.png
        │   ├── waxing.png
        │   └── zoom.png
        └── images
        │   ├── banner_01.jpeg
        │   ├── banner_02.jpeg
        │   ├── banner_03.jpeg
        │   ├── image2.jpeg
        │   ├── image3.jpeg
        │   ├── image4.jpeg
        │   ├── image5.jpeg
        │   ├── image6.jpeg
        │   └── salon.jpeg
    ├── components
        ├── About
        │   ├── About.js
        │   └── About.module.scss
        ├── Admin
        │   ├── Appointments
        │   │   ├── Appointment
        │   │   │   ├── Appointment.js
        │   │   │   └── Appointment.module.scss
        │   │   ├── Appointments.js
        │   │   ├── Appointments.module.scss
        │   │   └── Preview
        │   │   │   ├── Preview.js
        │   │   │   └── Preview.module.scss
        │   ├── Auth
        │   │   ├── Auth.js
        │   │   └── Auth.module.scss
        │   ├── Inbox
        │   │   ├── Inbox.js
        │   │   ├── Inbox.module.scss
        │   │   ├── Message
        │   │   │   ├── Message.js
        │   │   │   └── Message.module.scss
        │   │   └── Preview
        │   │   │   ├── Preview.js
        │   │   │   └── Preview.module.scss
        │   └── Menu
        │   │   ├── Menu.js
        │   │   └── Menu.module.scss
        ├── Booking
        │   ├── Checkout
        │   │   ├── Checkout.js
        │   │   ├── Checkout.module.scss
        │   │   └── Stripe
        │   │   │   ├── CardSectionStyles.css
        │   │   │   └── Stripe.js
        │   ├── Details
        │   │   ├── Details.js
        │   │   └── Details.module.scss
        │   ├── Schedule
        │   │   ├── Schedule.js
        │   │   └── Schedule.module.scss
        │   └── Success
        │   │   ├── Success.js
        │   │   └── Success.module.scss
        ├── Contacts
        │   ├── Contacts.js
        │   ├── Contacts.module.scss
        │   ├── Form
        │   │   ├── Form.js
        │   │   └── Form.module.scss
        │   └── Map
        │   │   └── Map.js
        ├── Footer
        │   ├── Footer.js
        │   └── Footer.module.scss
        ├── Gallery
        │   ├── Gallery.js
        │   └── Gallery.module.scss
        ├── Navigation
        │   ├── Navigation.js
        │   └── Navigation.module.scss
        ├── Services
        │   ├── Services.js
        │   ├── Services.module.scss
        │   └── availableServices.js
        ├── Summary
        │   ├── Summary.js
        │   └── Summary.module.scss
        ├── Testimonials
        │   ├── Testimonials.js
        │   └── Testimonials.module.scss
        └── UI
        │   └── Spinner
        │       ├── Spinner.js
        │       └── Spinner.module.scss
    ├── config
        └── constants.js
    ├── containers
        ├── Admin
        │   ├── Admin.js
        │   └── Admin.module.scss
        ├── Banner
        │   ├── Banner.js
        │   └── Banner.module.scss
        ├── Booking
        │   ├── Booking.js
        │   └── Booking.module.scss
        └── Section
        │   ├── Section.js
        │   └── Section.module.scss
    ├── hoc
        └── Layout
        │   ├── Layout.js
        │   ├── Layout.module.scss
        │   └── reset.css
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | .eslintcache
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # :cherry_blossom: About
  2 | 
  3 | Beauty at Luxx is a single page application build for a beauty salon with integrated booking system.
  4 | 
  5 | Website preview:
  6 | https://mivladie.github.io/beautyatluxx/
  7 | 
  8 | # :memo: Table of Contents
  9 | 
 10 | * [:memo: Table of Contents](#memo-table-of-contents)
 11 | * [:rocket: Quick Start](#rocket-quick-start)
 12 | 	* [Step 1: Installing the dependencies](#step-1-installing-the-dependencies)
 13 | 	* [Step 2: Setting up configurations](#step-2-setting-up-configurations)
 14 | 	* [Step 3: Launching the server](#step-3-launching-the-server)
 15 | * [:desktop_computer: Installation](#desktop_computer-installation)
 16 | 	* [NodeJS](#nodejs)
 17 | * [:keyboard: Available Scripts](#keyboard-available-scripts)
 18 | * [:green_book: Learn More](#green_book-learn-more)
 19 | 	* [ReactJS](#reactjs)
 20 | 	* [React Google Maps](#react-google-maps)
 21 |     * [Stripe](#stripe)
 22 | 	* [Sass](#sass)
 23 | 
 24 | # :rocket: Quick Start
 25 | 
 26 | > You must have installed all of the software applications in the [installation](#desktop_computer-installation) section.
 27 | 
 28 | Quick start guide to set the server up and running.
 29 | 
 30 | ## Step 1: Installing the dependencies
 31 | 
 32 | ### Run `npm install`
 33 | 
 34 | Installs all of the necessary dependencies.
 35 | 
 36 | ## Step 2: Setting up configurations
 37 | 
 38 | ### Google Maps (optional)
 39 | 
 40 | * Open `/src/config/constants.js` file;
 41 | * Assign the API key to the `GOOGLE_MAPS_API_KEY` constant;
 42 | * Save the file.
 43 | 
 44 | ### Stripe
 45 | 
 46 | * Open `/src/config/constants.js` file;
 47 | * Assign the Stripe publishable key to the `STRIPE_PUBLISHABLE_KEY` constant;
 48 | * Save the file.
 49 | 
 50 | ## Step 3: Launching the server
 51 | 
 52 | ### Run `npm start`
 53 | 
 54 | Starts the server in the development mode.
 55 | 
 56 | # :desktop_computer: Installation
 57 | 
 58 | In order to run the server, you must have installed all of the necessary software listed below.
 59 | 
 60 | ## NodeJS
 61 | 
 62 | Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
 63 | 
 64 | * [Download](https://nodejs.org/en/)
 65 | 
 66 | # :keyboard: Available Scripts
 67 | 
 68 | In the project directory, you can run:
 69 | 
 70 | ### `npm install`
 71 | 
 72 | Installs all of the necessary dependencies.
 73 | 
 74 | ### `npm start`
 75 | 
 76 | Runs the app in the development mode on port `:3000`.
 77 | 
 78 | ### `npm run build`
 79 | 
 80 | Builds the app for production to the `/build` folder.
 81 | 
 82 | # :green_book: Learn More
 83 | 
 84 | References to the packages used in the project.
 85 | 
 86 | ## ReactJS
 87 | 
 88 | React is a JavaScript library for building user interfaces.
 89 | 
 90 | * [Getting Started](https://reactjs.org/docs/getting-started.html)
 91 | 
 92 | ## React Google Maps
 93 | 
 94 | `react-google-maps` provides a set of React components wrapping the underlying Google Maps JavaScript API v3 instances.
 95 | 
 96 | * [Documentation](https://tomchentw.github.io/react-google-maps/#documentation)
 97 | 
 98 | ## Stripe
 99 | 
100 | Stripe is a technology company that builds economic infrastructure for the internet.
101 | 
102 | * [Documentation](https://stripe.com/docs)
103 | 
104 | ## Sass
105 | 
106 | Sass is a preprocessor scripting language that is interpreted or compiled into CSS.
107 | 
108 | * [Documentation](https://sass-lang.com/documentation)
109 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "beautyatluxx",
 3 | 	"version": "1.0.0",
 4 | 	"homepage": "https://mivladie.github.io/beautyatluxx/",
 5 | 	"private": true,
 6 | 	"scripts": {
 7 | 		"start": "react-scripts start",
 8 | 		"build": "react-scripts build",
 9 | 		"predeploy": "npm run build",
10 | 		"deploy": "gh-pages -d build",
11 | 		"test": "react-scripts test",
12 | 		"eject": "react-scripts eject"
13 | 	},
14 | 	"eslintConfig": {
15 | 		"extends": "react-app"
16 | 	},
17 | 	"browserslist": {
18 | 		"production": [
19 | 			">0.2%",
20 | 			"not dead",
21 | 			"not op_mini all"
22 | 		],
23 | 		"development": [
24 | 			"last 1 chrome version",
25 | 			"last 1 firefox version",
26 | 			"last 1 safari version"
27 | 		]
28 | 	},
29 | 	"dependencies": {
30 | 		"@stripe/react-stripe-js": "^1.16.1",
31 | 		"@stripe/stripe-js": "^1.46.0",
32 | 		"axios": "^1.2.1",
33 | 		"react": "^16.14.0",
34 | 		"react-dom": "^16.14.0",
35 | 		"react-google-maps": "^9.4.5",
36 | 		"react-scripts": "^5.0.1"
37 | 	},
38 | 	"devDependencies": {
39 | 		"gh-pages": "^4.0.0",
40 | 		"sass": "^1.56.2"
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#000000" />
 7 |     <meta
 8 |       name="description"
 9 |       content="Web site created using create-react-app"
10 |     />
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12 |     <link rel=”shortcut icon” href=”%PUBLIC_URL%/favicon.ico>
13 |     <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Montserrat|Oranienbaum|Poppins:300,400|Satisfy|Suranna&display=swap" rel="stylesheet">    
14 |     <title>Beauty at Luxx</title>
15 |   </head>
16 |   <body>
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 |     <!--
20 |       This HTML file is a template.
21 |       If you open it directly in the browser, you will see an empty page.
22 | 
23 |       You can add webfonts, meta tags, or analytics to this file.
24 |       The build step will place the bundled scripts into the <body> tag.
25 | 
26 |       To begin the development, run `npm start` or `yarn start`.
27 |       To create a production bundle, use `npm run build` or `yarn build`.
28 |     -->
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Beauty at Luxx",
 3 |   "name": "Beauty at Luxx",
 4 |   "start_url": ".",
 5 |   "display": "standalone",
 6 |   "theme_color": "#000000",
 7 |   "background_color": "#ffffff",
 8 |   "icons": [
 9 |     {
10 |       "src": "favicon.ico",
11 |       "sizes": "64x64 32x32 24x24 16x16"
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Layout from './hoc/Layout/Layout';
 4 | import Banner from './containers/Banner/Banner';
 5 | import Navigation from './components/Navigation/Navigation';
 6 | import Section from './containers/Section/Section';
 7 | import Footer from './components/Footer/Footer';
 8 | 
 9 | import About from './components/About/About';
10 | import Services from './components/Services/Services';
11 | import Gallery from './components/Gallery/Gallery';
12 | import Testimonials from './components/Testimonials/Testimonials';
13 | import Contacts from './components/Contacts/Contacts';
14 | import Summary from './components/Summary/Summary';
15 | 
16 | const App = () => {
17 |     return (
18 |       <Layout>
19 |         <Navigation/>
20 | 
21 |         <Banner />
22 | 
23 |         <Section
24 |           id = 'about'
25 |           meta = 'Welcome to'
26 |           name = 'Beauty at Luxx'
27 |           description = 'Vestibulum ut mauris euismod, tristique augue sed, consequat metus. Duis fermentum massa ac metus suscipit tincidunt. Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.'
28 |         >
29 |           <About />
30 |         </Section>
31 | 
32 |         <Section
33 |           id = 'services'
34 |           meta = 'What we do'
35 |           name = 'Services'
36 |           description = 'Vestibulum ut mauris euismod, tristique augue sed, consequat metus. Duis fermentum massa ac metus suscipit tincidunt. Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.'
37 |         >
38 |           <Services />
39 |         </Section>
40 | 
41 |         <Section
42 |           id = 'gallery'
43 |           meta = 'Our work'
44 |           name = 'Gallery'
45 |           description = 'Vestibulum ut mauris euismod, tristique augue sed, consequat metus. Duis fermentum massa ac metus suscipit tincidunt. Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.'
46 |         >
47 |           <Gallery />
48 |         </Section>
49 | 
50 |         <Section
51 |           id = 'testimonials'
52 |           meta = 'What clients say'
53 |           name = 'Testimonials'
54 |           description = 'Vestibulum ut mauris euismod, tristique augue sed, consequat metus. Duis fermentum massa ac metus suscipit tincidunt. Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.'
55 |         >
56 |           <Testimonials />
57 |         </Section>
58 |         
59 |         <Section
60 |           id = 'contact'
61 |           meta = 'Where to find us'
62 |           name = 'Contacts'
63 |           description = 'Vestibulum ut mauris euismod, tristique augue sed, consequat metus. Duis fermentum massa ac metus suscipit tincidunt. Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.'
64 |         >
65 |           <Contacts />
66 |         </Section>
67 | 
68 |         <Summary />
69 | 
70 |         <Footer />
71 |       </Layout>
72 |     );
73 | }
74 | 
75 | export default App;
76 | 
77 | /*
78 | 
79 | font-family: 'Satisfy', cursive;
80 | font-family: 'Suranna', serif;
81 | font-family: 'Poppins', sans-serif;
82 | font-family: 'Dancing Script', cursive;
83 | font-family: 'Montserrat', sans-serif;
84 | font-family: 'Oranienbaum', serif;
85 | 
86 | $eunry1: #D6BCBC;
87 | $eunry2: #6D0E2A;
88 | $eunry3: #A28282;
89 | $dark1: #444444;
90 | $dark2: #616161;
91 | 
92 | */


--------------------------------------------------------------------------------
/src/assets/icons/all.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/all.png


--------------------------------------------------------------------------------
/src/assets/icons/appointments.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/appointments.png


--------------------------------------------------------------------------------
/src/assets/icons/body.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/body.png


--------------------------------------------------------------------------------
/src/assets/icons/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/close.png


--------------------------------------------------------------------------------
/src/assets/icons/line.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/line.png


--------------------------------------------------------------------------------
/src/assets/icons/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/logo.png


--------------------------------------------------------------------------------
/src/assets/icons/makeup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/makeup.png


--------------------------------------------------------------------------------
/src/assets/icons/massage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/massage.png


--------------------------------------------------------------------------------
/src/assets/icons/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/menu.png


--------------------------------------------------------------------------------
/src/assets/icons/messages.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/messages.png


--------------------------------------------------------------------------------
/src/assets/icons/nails.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/nails.png


--------------------------------------------------------------------------------
/src/assets/icons/refresh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/refresh.png


--------------------------------------------------------------------------------
/src/assets/icons/scroll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/scroll.png


--------------------------------------------------------------------------------
/src/assets/icons/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/star.png


--------------------------------------------------------------------------------
/src/assets/icons/tick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/tick.png


--------------------------------------------------------------------------------
/src/assets/icons/tickbox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/tickbox.png


--------------------------------------------------------------------------------
/src/assets/icons/waxing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/waxing.png


--------------------------------------------------------------------------------
/src/assets/icons/zoom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/icons/zoom.png


--------------------------------------------------------------------------------
/src/assets/images/banner_01.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/banner_01.jpeg


--------------------------------------------------------------------------------
/src/assets/images/banner_02.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/banner_02.jpeg


--------------------------------------------------------------------------------
/src/assets/images/banner_03.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/banner_03.jpeg


--------------------------------------------------------------------------------
/src/assets/images/image2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/image2.jpeg


--------------------------------------------------------------------------------
/src/assets/images/image3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/image3.jpeg


--------------------------------------------------------------------------------
/src/assets/images/image4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/image4.jpeg


--------------------------------------------------------------------------------
/src/assets/images/image5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/image5.jpeg


--------------------------------------------------------------------------------
/src/assets/images/image6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/image6.jpeg


--------------------------------------------------------------------------------
/src/assets/images/salon.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MiVladie/beautyatluxx/4eca17ac5d2b40661db0e997cb427aa40656af80/src/assets/images/salon.jpeg


--------------------------------------------------------------------------------
/src/components/About/About.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import classes from './About.module.scss';
 4 | 
 5 | import salon from '../../assets/images/salon.jpeg';
 6 | import nails from '../../assets/icons/nails.png';
 7 | import waxing from '../../assets/icons/waxing.png';
 8 | import makeup from '../../assets/icons/makeup.png';
 9 | import massage from '../../assets/icons/massage.png';
10 | 
11 | const about = () => {
12 |     return (
13 |     	<div className = { classes.About }>
14 |             <div className = { classes.Services }>
15 |                 <div className = { classes.Service }>
16 |                     <img className = { classes.Icon } src = { nails } alt = 'Manicure & Pedicure' />
17 |                     <h2 className = { classes.Name }>Manicure & Pedicure</h2>
18 |                     <p className = { classes.Description }>Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.</p>
19 |                 </div>
20 | 
21 |                 <div className = { classes.Service }>
22 |                     <img className = { classes.Icon } src = { waxing } alt = 'Waxing' />
23 |                     <h2 className = { classes.Name }>Waxing</h2>
24 |                     <p className = { classes.Description }>Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.</p>
25 |                 </div>
26 | 
27 |                 <div className = { classes.Service }>
28 |                     <img className = { classes.Icon } src = { makeup } alt = 'Make-up' />
29 |                     <h2 className = { classes.Name }>Make-up</h2>
30 |                     <p className = { classes.Description }>Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.</p>
31 |                 </div>
32 | 
33 |                 <div className = { classes.Service }>
34 |                     <img className = { classes.Icon } src = { massage } alt = 'Massage & Treatment' />
35 |                     <h2 className = { classes.Name }>Massage & Treatment</h2>
36 |                     <p className = { classes.Description }>Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.</p>
37 |                 </div>
38 |             </div>
39 | 
40 |             <img className = { classes.Image } src = { salon } alt = 'Beauty Salon' />
41 |     	</div>
42 |     );
43 | }
44 | 
45 | export default about;
46 | 


--------------------------------------------------------------------------------
/src/components/About/About.module.scss:
--------------------------------------------------------------------------------
  1 | $grey: #444444;
  2 | $lightGrey: #616161;
  3 | $borderGrey: rgba(0, 0, 0, 0.05);
  4 | 
  5 | .About {
  6 |     width: 100%;
  7 | 
  8 |     display: flex;
  9 |     flex-flow: column;
 10 | 
 11 |     .Services {
 12 |         display: flex;
 13 |         flex-flow: column;
 14 | 
 15 |         .Service {
 16 |             background-color: white;
 17 | 
 18 |             padding: 2em 0;
 19 | 
 20 |             border-top: 1px solid $borderGrey;
 21 | 
 22 |             display: flex;
 23 |             justify-content: center;
 24 |             align-items: center;
 25 |             flex-flow: column;
 26 | 
 27 |             text-align: center;
 28 | 
 29 |             transition: all 0.3s;
 30 | 
 31 |             &:last-child {
 32 |                 border-bottom: 1px solid $borderGrey;
 33 |             }
 34 | 
 35 |             &:hover {
 36 |                 background-color: #D6BCBC;
 37 |             }
 38 | 
 39 |             .Icon {
 40 |                 height: 4em;
 41 |                 width: 4em;
 42 | 
 43 |                 background-repeat: no-repeat;
 44 |                 object-fit: contain;
 45 | 
 46 |                 border-radius: 50%;
 47 |             }
 48 | 
 49 |             .Name {
 50 |                 font-family: 'Montserrat', sans-serif;
 51 |                 font-size: 1.35em;
 52 | 
 53 |                 color: $grey;
 54 | 
 55 |                 margin: 1em 0;
 56 |             }
 57 | 
 58 |             .Description {
 59 |                 width: 95%;
 60 | 
 61 |                 font-family: 'Poppins', sans-serif;
 62 |                 font-size: 1em;
 63 |                 font-weight: 300;
 64 | 
 65 |                 line-height: 1.35em;
 66 | 
 67 |                 color: $lightGrey;
 68 |             }
 69 |         }
 70 |     }
 71 |     
 72 |     .Image {
 73 |         width: 100%;
 74 |         height: 16em;
 75 | 
 76 |         object-fit: cover;
 77 |         background-repeat: no-repeat;
 78 |     }
 79 | }
 80 | 
 81 | @media (min-width: 720px) {
 82 |     .About {
 83 |         .Services {
 84 |             flex-flow: row;
 85 |             flex-wrap: wrap;
 86 |             justify-content: center;
 87 | 
 88 |             .Service {
 89 |                 min-width: calc(50% - 1px);
 90 |                 height: 20vw;
 91 | 
 92 |                 flex: 0 1;
 93 | 
 94 |                 padding: 3em 0;
 95 | 
 96 |                 border-right: 1px solid $borderGrey;
 97 | 
 98 |                 &:nth-child(2n) {                  
 99 |                     border-right: none;  
100 |                 }
101 | 
102 |                 .Icon {
103 |                     height: 6em;
104 |                     width: 6em;
105 |                 }
106 |             }
107 |         }
108 | 
109 |         .Image {
110 |             height: 40%;
111 |         }
112 |     }
113 | }
114 | 
115 | @media (min-width: 1025px) {
116 |     .About {
117 |         flex-flow: row;
118 | 
119 |         .Services {
120 |             width: 50%;
121 |             height: 70vh;
122 | 
123 |             .Service {
124 |                 padding: 0;
125 |                 height: auto;
126 |             }
127 |         }
128 | 
129 |         .Image {
130 |             width: 50%;
131 |             height: 70vh;
132 |         }
133 |     }
134 | }
135 | 


--------------------------------------------------------------------------------
/src/components/Admin/Appointments/Appointment/Appointment.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import { services } from '../../../Services/availableServices';
 4 | 
 5 | import classes from './Appointment.module.scss';
 6 | 
 7 | const appointment = ({ appointment, back, remove }) => {
 8 |     let name = appointment.client.name;
 9 |     let email = appointment.client.email;
10 |     let bookedAt = new Date(appointment.details.bookingTime);
11 |     let phone = appointment.client.phone;
12 |     let date = new Date(appointment.service.time);
13 |     let payment = appointment.details.payment;
14 |     let listedServices = appointment.service.id.map(service => services.find(s => s.id === +service).name).join(' | ');
15 |     let price = ' £' + (appointment.service.price / 100.00);
16 | 
17 |     return (
18 |     	<section className = { classes.Appointment }>
19 |             <div className = { classes.Row }>
20 |                 <div className = { classes.Description }>
21 |                     <p className = { classes.Name }>Name: <span className = { classes.Text }>{ name }</span></p>
22 |                 </div>
23 |                 <div className = { classes.Description }>
24 |                     <p className = { classes.Name }>Email: <span className = { classes.Text }>{ email }</span></p>
25 |                 </div>
26 |             </div>
27 | 
28 |             <div className = { classes.Row }>
29 |                 <div className = { classes.Description }>
30 |                     <p className = { classes.Name }>Booked At: <span className = { classes.Text }>{ bookedAt.getDate() + '/' + (bookedAt.getMonth() + 1) + '/' + bookedAt.getFullYear() + ' ' + bookedAt.getHours() + ':' + (bookedAt.getMinutes() < 10 ? '0' : '') + bookedAt.getMinutes() }</span></p>
31 |                 </div>
32 |                 <div className = { classes.Description }>
33 |                     <p className = { classes.Name }>Phone: <span className = { classes.Text }>{ phone }</span></p>
34 |                 </div>
35 |             </div>
36 |             
37 |             <div className = { classes.Row }>
38 |                 <div className = { classes.Description }>
39 |                     <p className = { classes.Name }>Appointment Date: <span className = { classes.Text }>{ date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes() }</span></p>
40 |                 </div>
41 |                 <div className = { classes.Description }>
42 |                     <p className = { classes.Name }>Payment: <span className = { classes.Text }>{ payment }</span></p>
43 |                 </div>
44 |             </div>
45 | 
46 |             <div className = { classes.Row }>
47 |                 <div className = { classes.Description }>
48 |                     <p className = { classes.Name }>Services: <span className = { classes.Text }>{ listedServices }</span></p>
49 |                 </div>
50 |                 <div className = { classes.Description }>
51 |                     <p className = { classes.Name }>{ payment === 'venue' ? 'Due pay:' : 'Amount paid:' }<span className = { classes.Text }>{ price }</span></p>
52 |                 </div>
53 |             </div>
54 | 
55 |             <div className = { [classes.Row, classes.Action].join(' ') }>
56 |                 <button className = { classes.Button } onClick = { back }>{ '< back' }</button>
57 |                 <button className = { classes.Button } onClick = { remove }>Delete</button>
58 |             </div>
59 |             
60 |             <div className = { [classes.Row, classes.Response].join(' ') }>
61 |                 <button className = { classes.Button} onClick = { () => window.location.assign('mailto:' + email) }>Send email</button>
62 |                 <button className = { classes.Button } onClick = { () => window.location.assign('tel:' + phone) }>Call on phone</button>
63 |             </div>
64 |     	</section>
65 |     );
66 | }
67 | 
68 | export default appointment;
69 | 


--------------------------------------------------------------------------------
/src/components/Admin/Appointments/Appointment/Appointment.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | $eunry2: #6D0E2A;
  3 | $eunry3: #A28282;
  4 | $dark1: #444444;
  5 | $dark2: #616161;
  6 | 
  7 | .Appointment {
  8 |     width: 100%;
  9 |     margin: 0 auto;
 10 | 
 11 |     max-height: 50vh;
 12 |     overflow-y: auto;
 13 |     overflow-x: hidden;
 14 | 
 15 |     .Description {
 16 |         display: flex;
 17 | 
 18 |         margin-bottom: 0.75em;
 19 |         
 20 |         .Name {
 21 |             font-family: 'Poppins', sans-serif;
 22 |             font-size: 1.25em;
 23 |             color: $dark1;
 24 | 
 25 |             width: 100%;
 26 |             margin-right: 0.25em;
 27 |                 
 28 |             .Text {
 29 |                 font-family: 'Poppins', sans-serif;
 30 |                 font-weight: 300;
 31 |                 font-size: 0.9em;
 32 | 
 33 |                 overflow-wrap: break-word;
 34 |                 word-wrap: break-word;
 35 |                 hyphens: auto;
 36 |                 color: $dark2;
 37 |             }
 38 |         }
 39 |     }
 40 | 
 41 |     .Button {
 42 |         width: 100%;
 43 |         height: 3em;
 44 | 
 45 |         border: none;
 46 |         background: none;
 47 | 
 48 |         font-family: 'Poppins', sans-serif;
 49 |         font-weight: 500;
 50 |         text-transform: uppercase;
 51 |         text-decoration: none;
 52 | 
 53 |         color: $eunry2;
 54 | 
 55 |         border-radius: 30px;
 56 | 
 57 |         margin-bottom: 0.75em;
 58 | 
 59 |         transition: all 0.3s;
 60 |     }
 61 | 
 62 |     .Action, .Response {
 63 |         .Button {       
 64 |             &:nth-child(1) {
 65 |                 border: 1px solid $eunry2;
 66 |                 
 67 |                 &:hover {
 68 |                     background-color: #F5F5F5;
 69 |                 }
 70 |             }
 71 |         }
 72 |     }
 73 | 
 74 |     .Action {
 75 |         .Button {
 76 |             &:nth-child(2) {
 77 |                 background-color: $eunry2;
 78 |                 color: white;
 79 | 
 80 |                 &:hover {
 81 |                     background-color: darken($eunry2, 5);
 82 |                 }
 83 |             }
 84 |         }
 85 |     }
 86 |     
 87 |     .Response {
 88 |         .Button {
 89 |             &:nth-child(2) {
 90 |                 background-color: $eunry3;
 91 |                 color: white;
 92 |                 
 93 |                 &:hover {
 94 |                     background-color: darken($eunry3, 10);
 95 |                 }
 96 |             }
 97 |         }
 98 |     }
 99 | }
100 | 
101 | @media (min-width: 720px) {
102 |     .Appointment {
103 |         .Row {
104 |             display: flex;
105 |             justify-content: space-between;
106 | 
107 |             .Description {
108 |                 width: 50%;
109 |             }
110 | 
111 |             .Button {
112 |                 width: 49%;
113 |             }
114 |         }
115 | 
116 |         .Description {
117 |             .Name {
118 |                 .Text {
119 |                     line-height: 1.25em;
120 |                 }
121 |             }
122 |         }
123 | 
124 |         .Action {
125 |             padding-top: 1em;
126 |         }
127 | 
128 |         .Response {
129 |             padding-bottom: 1em;
130 |         }
131 |     }
132 | }
133 | 


--------------------------------------------------------------------------------
/src/components/Admin/Appointments/Appointments.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import axios from 'axios';
 3 | import { BACKEND_DOMAIN } from '../../../config/constants';
 4 | 
 5 | import Appointment from './Appointment/Appointment';
 6 | import Preview from './Preview/Preview';
 7 | import Spinner from '../../UI/Spinner/Spinner';
 8 | 
 9 | import classes from './Appointments.module.scss';
10 | 
11 | const Appointments = ({ back }) => {
12 |     const [appointments, setAppointments] = useState();
13 |     const [key, setKey] = useState();
14 |     const [loading, setLoading] = useState(true);
15 | 
16 |     useEffect(() => {
17 |         fetchAppointments();
18 |     }, []);
19 | 
20 |     const fetchAppointments = () => {
21 |         setLoading(true);
22 | 
23 |         axios.get(BACKEND_DOMAIN + 'admin/beautyatluxx/appointments', { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
24 |             .then(response => {
25 |                 setAppointments(response.data.appointments);
26 |                 setLoading(false);
27 |             })
28 |             .catch(error => {
29 |                 setLoading(false);
30 |             });
31 |     }
32 | 
33 |     const deleteAppointment = () => {
34 |         setLoading(true);
35 |         
36 |         axios.delete(BACKEND_DOMAIN + 'admin/beautyatluxx/appointments/' + key, { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
37 |             .then(response => {
38 |                 setLoading(false);
39 |                 setKey(null);
40 | 
41 |                 fetchAppointments();
42 |             })
43 |             .catch(error => {
44 |                 setLoading(false);
45 |             });
46 |     }
47 | 
48 |     return (
49 |     	<div className = { classes.Appointments }>
50 |             { loading 
51 |                 ? <Spinner /> 
52 |                 : key != null 
53 |                     ? <Appointment 
54 |                         appointment = { appointments[key] }
55 |                         back = { () => setKey(null) } 
56 |                         remove = { deleteAppointment } /> 
57 |                     : <Preview 
58 |                         appointments = { appointments }
59 |                         expand = { setKey }
60 |                         back = { back } /> 
61 |             }
62 |     	</div>
63 |     );
64 | }
65 | 
66 | export default Appointments;
67 | 


--------------------------------------------------------------------------------
/src/components/Admin/Appointments/Appointments.module.scss:
--------------------------------------------------------------------------------
 1 | .Appointments {
 2 |     width: 90%;
 3 |     margin: 0 auto;
 4 |     
 5 |     display: flex;
 6 |     justify-content: center;
 7 |     align-items: center;
 8 | }
 9 | 
10 | @media (min-width: 720px) {
11 |     .Appointments {
12 |         width: 70vw;
13 |     }
14 | }
15 | 
16 | @media (min-width: 1025px) {
17 |     .Appointments {
18 |         width: 60vw;
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/Admin/Appointments/Preview/Preview.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import { services } from '../../../Services/availableServices';
 4 | 
 5 | import classes from './Preview.module.scss';
 6 | 
 7 | const preview = ({ appointments, expand, back }) => {
 8 |     const allAppointments = Object.keys(appointments)
 9 |         .map(appointment => { 
10 |             return {
11 |                 key: appointment,
12 |                 name: appointments[appointment].client.name,
13 |                 payment: appointments[appointment].details.payment,
14 |                 service: services.find(s => s.id === appointments[appointment].service.id[0]).name.substring(0, 35), 
15 |                 date: new Date(appointments[appointment].service.time)
16 |             }
17 |         })
18 |         .filter(appointment => appointment.date.getTime() >= new Date().getTime())
19 |         .sort((a, b) => a.date - b.date);
20 | 
21 |     if(allAppointments == null || allAppointments.length === 0)
22 |         return <h3 className = { classes.Empty }>No new appointments!</h3>
23 | 
24 |     return (
25 |     	<section className = { classes.Preview }>
26 |             <div className = { classes.Meta }>
27 |                 <h3 className = { classes.Description }>Name</h3>
28 |                 <h3 className = { classes.Description }>Payment</h3>
29 |                 <h3 className = { classes.Description }>Service</h3>
30 |                 <h3 className = { classes.Description }>Date</h3>
31 |             </div>
32 | 
33 |             <div className = { classes.Appointments }>
34 |                 { allAppointments.map((appointment, index) => 
35 |                     <div className = { classes.Appointment } onClick = { () => expand(appointment.key) } key = { index }>
36 |                         <div className = { classes.Info }><p className = { classes.Text }>{ appointment.name }</p></div>
37 |                         <div className = { classes.Info }><p className = { classes.Text }>{ appointment.payment }</p></div>
38 |                         <div className = { classes.Info }><p className = { classes.Text }>{ appointment.service }</p></div>
39 |                         <div className = { classes.Info }><p className = { classes.Text }>{ appointment.date.getDate() + '/' + (appointment.date.getMonth() + 1) + '/' + appointment.date.getFullYear() + ' ' + appointment.date.getHours() + ':' + (appointment.date.getMinutes() < 10 ? '0' : '') + appointment.date.getMinutes() }</p></div>
40 |                     </div>
41 |                 )}
42 |             </div>
43 | 
44 |             <p className = { classes.Total }>Total appointments: { allAppointments.length }</p>
45 |             <button className = { classes.Back } onClick = { back }>{ '< Back' }</button>
46 |         </section>
47 |     );
48 | }
49 | 
50 | export default preview;
51 | 


--------------------------------------------------------------------------------
/src/components/Admin/Appointments/Preview/Preview.module.scss:
--------------------------------------------------------------------------------
  1 | $dark1: #444444;
  2 | $dark2: #616161;
  3 | 
  4 | .Preview {
  5 |     width: 100%;
  6 |     margin: 0 auto;
  7 | 
  8 |     .Meta {
  9 |         width: 100%;
 10 | 
 11 |         display: flex;
 12 |         align-items: center;
 13 | 
 14 |         margin-bottom: 0.5em;
 15 | 
 16 |         .Description {
 17 |             width: 50%;
 18 |             margin-left: 0.75em;
 19 | 
 20 |             font-family: 'Poppins', sans-serif;
 21 |             font-size: 1em;
 22 | 
 23 |             color: $dark1;
 24 | 
 25 |             &:nth-child(2n) {
 26 |                 display: none;
 27 |             }
 28 |         }
 29 |     }
 30 | 
 31 |     .Appointments {
 32 |         width: 100%;
 33 | 
 34 |         max-height: 50vh;
 35 |         overflow-y: auto;
 36 |         overflow-x: hidden;
 37 |         
 38 |         .Appointment {
 39 |             height: 3em;
 40 | 
 41 |             margin-bottom: 0.75em;
 42 | 
 43 |             border-radius: 50px;
 44 |             border: 0.5px solid #E1E1E1;
 45 | 
 46 |             display: flex;
 47 |             justify-content: center;
 48 |             align-items: center;
 49 | 
 50 |             transition: all 0.3s;
 51 |             
 52 |             &:nth-child(2n) {
 53 |                 background-color: #F5F5F5;
 54 |             }
 55 | 
 56 |             &:hover {
 57 |                 box-shadow: 0px 0 8px rgba(0, 0, 0, 0.06);
 58 |                 cursor: pointer;
 59 |             }
 60 | 
 61 |             .Info {
 62 |                 width: 50%;
 63 | 
 64 |                 &:nth-child(1) {
 65 |                     .Text {
 66 |                         border: none;
 67 |                         margin-left: 0.5em;
 68 |                     }
 69 |                 }
 70 | 
 71 |                 .Text {
 72 |                     font-family: 'Poppins', sans-serif;
 73 |                     font-weight: 300;
 74 |                     font-size: 1em;
 75 | 
 76 |                     text-overflow: ellipsis;
 77 |                     text-transform: capitalize;
 78 | 
 79 |                     color: $dark2;
 80 |                     
 81 |                     overflow: hidden;
 82 |                     white-space: nowrap;
 83 | 
 84 |                     width: 80%;
 85 |                     padding: 0.5em 0 0.5em 0.75em;
 86 | 
 87 |                     border-left: 0.5px solid rgba(0, 0, 0, 0.25);
 88 |                 }
 89 |                 
 90 |                 &:nth-child(2n) {
 91 |                     display: none;
 92 |                 }
 93 |             }
 94 |         }
 95 |     }
 96 | 
 97 |     .Total, .Back {
 98 |         font-family: 'Poppins', sans-serif;
 99 |         font-size: 1em;
100 |         color: $dark1;
101 |         
102 |         margin: 0.5em 0 0 0.75em;
103 |     }
104 |     
105 |     .Back {
106 |         margin-top: 0;
107 |         padding-bottom: 1em;
108 | 
109 |         background: none;
110 |         border: none;
111 |         outline: none;
112 | 
113 |         text-decoration: underline;
114 |         cursor: pointer;
115 |     }
116 | }
117 | 
118 | .Empty {
119 |     font-family: 'Poppins', sans-serif;
120 |     font-size: 1.5em;
121 | 
122 |     margin-bottom: 2em;
123 | 
124 |     text-align: center;
125 | 
126 |     color: $dark1;
127 | }
128 | 
129 | @media (min-width: 720px) {
130 |     .Preview {
131 |         .Meta {
132 |             .Description {
133 |                 width: 33%;
134 | 
135 |                 &:nth-child(4) {
136 |                     display: block;
137 |                 }
138 |             }
139 |         }
140 | 
141 |         .Appointments {
142 |             .Appointment {
143 |                 .Info {
144 |                     width: 33%;
145 | 
146 |                     &:nth-child(4) {
147 |                         display: block;
148 |                     }
149 |                 }
150 |             }
151 |         }
152 |     }
153 | }
154 | 
155 | @media (min-width: 1025px) {
156 |     .Preview {
157 |         .Meta {
158 |             .Description {
159 |                 width: 25%;
160 | 
161 |                 &:nth-child(2) {
162 |                     display: block;
163 |                 }
164 |             }
165 |         }
166 | 
167 |         .Appointments {
168 |             .Appointment {
169 |                 height: 4em;
170 | 
171 |                 .Info {
172 |                     width: 25%;
173 | 
174 |                     &:nth-child(2) {
175 |                         display: block;
176 |                     }
177 |                 }
178 |             }
179 |         }
180 |     }
181 | }
182 | 


--------------------------------------------------------------------------------
/src/components/Admin/Auth/Auth.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import { BACKEND_DOMAIN } from '../../../config/constants';
 4 | 
 5 | import Spinner from '../../UI/Spinner/Spinner';
 6 | import axios from 'axios';
 7 | 
 8 | import classes from './Auth.module.scss';
 9 | 
10 | const isEmailAddress = (str) => {
11 |     var pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
12 |     return pattern.test(str);
13 | }
14 | 
15 | const Auth = ({ success }) => {
16 |     const [credentials, setCredentials] = useState({ email: '', password: '' });
17 |     const [loading, setLoading] = useState(false);
18 |     const [result, setResult] = useState();
19 | 
20 |     const onSubmit = (event) => {
21 |         event.preventDefault();
22 |         setLoading(true);
23 | 
24 |         if(credentials.email === '' || credentials.password === '') { 
25 |             setResult('Please, fill in all required fields.');           
26 |             setLoading(false);            
27 |         } else if(!isEmailAddress(credentials.email)) {
28 |             setResult('Please, provide a valid email address.');        
29 |             setLoading(false);   
30 |         } else {
31 |             axios.post(BACKEND_DOMAIN + 'admin/beautyatluxx', { credentials: credentials })
32 |                 .then(response => {
33 |                     setLoading(false);
34 | 
35 |                     const token = response.data.token;
36 |                     const expirationDate = response.data.expirationDate;
37 | 
38 |                     localStorage.setItem('token', token);
39 |                     localStorage.setItem('expirationDate', expirationDate);
40 | 
41 |                     success();
42 |                 })
43 |                 .catch(error => {
44 |                     setLoading(false);
45 |                     setCredentials({ email: credentials.email, password: '' });                    
46 |                     setResult(error.response ? error.response.data.message : 'Something went wrong!');
47 |                 });
48 |         }
49 |     }
50 | 
51 |     return (
52 |     	<form className = { classes.Auth }>
53 |             { loading && <div className = { classes.Modal }><Spinner /></div> }
54 |             
55 |             <div className = { classes.Input }>
56 |                 <input className = { classes.Field } value = { credentials.email } onChange = { (event) => setCredentials({ ...credentials, email: event.target.value }) } type = 'email' placeholder = 'Email' />
57 |             </div>
58 |             
59 |             <div className = { classes.Input }>
60 |                 <input className = { classes.Field } value = { credentials.password } onChange = { (event) => setCredentials({ ...credentials, password: event.target.value }) } type = 'password' placeholder = 'Password' />
61 |             </div>
62 | 
63 |             { result && <p className = { classes.Result }>{ result }</p> }
64 | 
65 |             <button className = { classes.Send } type = 'submit' onClick = { onSubmit }>Login</button>
66 |         </form>
67 |     );
68 | }
69 | 
70 | export default Auth;
71 | 


--------------------------------------------------------------------------------
/src/components/Admin/Auth/Auth.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry2: #6D0E2A;
  2 | $eunry3: #A28282;
  3 | $dark1: #444444;
  4 | 
  5 | .Auth {
  6 |     width: 90%;
  7 |     margin: 0 auto;
  8 | 
  9 |     position: relative;
 10 | 
 11 |     .Modal {
 12 |         position: absolute;
 13 |         top: 0;
 14 |         bottom: 0;
 15 |         left: 0;
 16 |         right: 0;
 17 | 
 18 |         background-color: rgba(255, 255, 255, 0.75);
 19 | 
 20 |         display: flex;
 21 |         justify-content: center;
 22 |         align-items: center;
 23 |     }
 24 | 
 25 |     .Input {
 26 |         width: 90%;
 27 | 
 28 |         margin: 0.75em 0;
 29 |         padding: 0.75em 5%;
 30 | 
 31 |         border: 1px solid #E1E1E1;
 32 |         border-radius: 25px;
 33 | 
 34 |         display: flex;
 35 |         align-items: center;
 36 |         justify-content: center;
 37 | 
 38 |         .Field {
 39 |             width: 100%;
 40 | 
 41 |             border: none;
 42 |             
 43 |             font-family: 'Poppins', sans-serif;
 44 |             font-weight: 300;
 45 |         }
 46 |     }
 47 | 
 48 |     .Result {
 49 |         font-family: 'Poppins', sans-serif;
 50 |         font-weight: 300;
 51 | 
 52 |         text-align: center;
 53 |         
 54 |         margin: 1em 0 1.5em;
 55 |         
 56 |         color: $dark1;
 57 |     }
 58 | 
 59 |     .Send {
 60 |         width: 100%;
 61 |         height: 3.25em;
 62 | 
 63 |         margin: 1em 0 2em;
 64 | 
 65 |         font-family: 'Poppins', sans-serif;
 66 |         font-size: 0.9em;
 67 | 
 68 |         text-transform: uppercase;
 69 |         color: white;
 70 | 
 71 |         background-color: $eunry3;
 72 |         border-radius: 25px;
 73 | 
 74 |         border: none;
 75 | 
 76 |         transition: all 0.3s;
 77 | 
 78 |         &:hover {
 79 |             background-color: darken($eunry3, 10);
 80 |         }
 81 |     }
 82 | }
 83 | 
 84 | @media (min-width: 720px) {
 85 |     .Auth {
 86 |         width: 50vw;
 87 |         
 88 |         display: flex;
 89 |         align-items: center;
 90 |         flex-flow: column;
 91 | 
 92 |         .Send {
 93 |             width: 50%;
 94 |         }
 95 |     }
 96 | }
 97 | 
 98 | @media (min-width: 1025px) {    
 99 |     .Auth {
100 |         width: 35vw;
101 |         margin: 1em auto;
102 | 
103 |         .Input {
104 |             .Field {
105 |                 font-size: 1.125em;
106 |             }
107 |         }
108 | 
109 |         .Result {
110 |             font-size: 1.1em;
111 |             margin: 1em 0 0 1em;
112 |         }
113 | 
114 |         .Send {
115 |             margin: 1.5em auto 0;
116 |             font-size: 1em;
117 |         }
118 |     }
119 | }
120 | 


--------------------------------------------------------------------------------
/src/components/Admin/Inbox/Inbox.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import axios from 'axios';
 3 | import { BACKEND_DOMAIN } from '../../../config/constants';
 4 | 
 5 | import Message from './Message/Message';
 6 | import Preview from './Preview/Preview';
 7 | import Spinner from '../../UI/Spinner/Spinner';
 8 | 
 9 | import classes from './Inbox.module.scss';
10 | 
11 | const Inbox = ({ back }) => {
12 |     const [messages, setMessages] = useState();
13 |     const [key, setKey] = useState();
14 |     const [loading, setLoading] = useState(false);
15 | 
16 |     useEffect(() => {
17 |         fetchMessages();
18 |     }, []);
19 | 
20 |     const fetchMessages = () => {
21 |         setLoading(true);
22 | 
23 |         axios.get(BACKEND_DOMAIN + 'admin/beautyatluxx/messages', { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
24 |             .then(response => {
25 |                 setMessages(response.data.messages);
26 |                 setLoading(false);
27 |             })
28 |             .catch(error => {
29 |                 setLoading(false);
30 |             });
31 |     }
32 | 
33 |     const deleteMessage = () => {
34 |         setLoading(true);
35 |         
36 |         axios.delete(BACKEND_DOMAIN + 'admin/beautyatluxx/messages/' + key, { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } })
37 |             .then(response => {
38 |                 setLoading(false);
39 |                 setKey(null);
40 |                 fetchMessages();
41 |             })
42 |             .catch(error => {
43 |                 setLoading(false);
44 |             });
45 |     }
46 | 
47 |     return (
48 |     	<div className = { classes.Inbox }>
49 |             { loading ? <Spinner /> :
50 |                 key != null ? 
51 |                     <Message 
52 |                         message = { messages[key] }
53 |                         back = { () => setKey(null) } 
54 |                         remove = { deleteMessage } /> : 
55 |                     <Preview 
56 |                         messages = { messages }
57 |                         expand = { setKey }
58 |                         back = { back } /> 
59 |             }
60 |     	</div>
61 |     );
62 | }
63 | 
64 | export default Inbox;
65 | 


--------------------------------------------------------------------------------
/src/components/Admin/Inbox/Inbox.module.scss:
--------------------------------------------------------------------------------
 1 | .Inbox {
 2 |     width: 90%;
 3 |     margin: 0 auto;
 4 |     
 5 |     display: flex;
 6 |     justify-content: center;
 7 |     align-items: center;
 8 | }
 9 | 
10 | @media (min-width: 720px) {
11 |     .Inbox {
12 |         width: 70vw;
13 |     }
14 | }
15 | 
16 | @media (min-width: 1025px) {
17 |     .Inbox {
18 |         width: 60vw;
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/Admin/Inbox/Message/Message.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import classes from './Message.module.scss';
 4 | 
 5 | const message = ({ message, back, remove }) => {
 6 |     let name = message.name;
 7 |     let email = message.email;
 8 |     let phone = message.phone;
 9 |     let text = message.message;
10 |     let date = message.time;
11 | 
12 |     return (
13 |     	<section className = { classes.Message }>
14 |             <div className = { classes.Row }>
15 |                 <div className = { classes.Description }>
16 |                     <p className = { classes.Name }>Name: <span className = { classes.Text }>{ name }</span></p>
17 |                 </div>
18 |                 { <div className = { classes.Description }>
19 |                     <p className = { classes.Name }>Email: <span className = { classes.Text }>{ email }</span></p>
20 |                 </div> }
21 |             </div>
22 | 
23 |             <div className = { classes.Row }>
24 |                 <div className = { classes.Description }>
25 |                     <p className = { classes.Name }>Date: <span className = { classes.Text }>{ date }</span></p>
26 |                 </div>
27 |                 { phone && <div className = { classes.Description }>
28 |                     <p className = { classes.Name }>Phone: <span className = { classes.Text }>{ phone }</span></p>
29 |                 </div> }
30 |             </div>
31 | 
32 |             <div className = { classes.Description }>
33 |                 <p className = { classes.Name }>Message: <span className = { classes.Text }>{ text }</span></p>
34 |             </div>
35 | 
36 |             <div className = { [classes.Row, classes.Action].join(' ') }>
37 |                 <button className = { classes.Button } onClick = { back }>{ '< back' }</button>
38 |                 <button className = { classes.Button } onClick = { remove }>Delete</button>
39 |             </div>
40 |             
41 |             <div className = { [classes.Row, classes.Response].join(' ') }>
42 |                 <button className = { classes.Button} onClick = { () => window.location.assign('mailto:' + email) }>Send email</button>
43 |                 <button className = { classes.Button } onClick = { () => window.location.assign('tel:' + phone) }>Call on phone</button>
44 |             </div>
45 |     	</section>
46 |     );
47 | }
48 | 
49 | export default message;
50 | 


--------------------------------------------------------------------------------
/src/components/Admin/Inbox/Message/Message.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | $eunry2: #6D0E2A;
  3 | $eunry3: #A28282;
  4 | $dark1: #444444;
  5 | $dark2: #616161;
  6 | 
  7 | .Message {
  8 |     width: 100%;
  9 |     margin: 0 auto;
 10 | 
 11 |     max-height: 50vh;
 12 |     overflow-y: auto;
 13 |     overflow-x: hidden;
 14 | 
 15 |     .Description {
 16 |         display: flex;
 17 | 
 18 |         margin-bottom: 0.75em;
 19 |         
 20 |         .Name {
 21 |             font-family: 'Poppins', sans-serif;
 22 |             font-size: 1.25em;
 23 |             color: $dark1;
 24 | 
 25 |             width: 100%;
 26 |             margin-right: 0.25em;
 27 |                 
 28 |             .Text {
 29 |                 font-family: 'Poppins', sans-serif;
 30 |                 font-weight: 300;
 31 |                 font-size: 0.9em;
 32 | 
 33 |                 overflow-wrap: break-word;
 34 |                 word-wrap: break-word;
 35 |                 hyphens: auto;
 36 |                 color: $dark2;
 37 |             }
 38 |         }
 39 |     }
 40 | 
 41 |     .Button {
 42 |         width: 100%;
 43 |         height: 3em;
 44 | 
 45 |         border: none;
 46 |         background: none;
 47 | 
 48 |         font-family: 'Poppins', sans-serif;
 49 |         font-weight: 500;
 50 |         text-transform: uppercase;
 51 |         text-decoration: none;
 52 | 
 53 |         color: $eunry2;
 54 | 
 55 |         border-radius: 30px;
 56 | 
 57 |         margin-bottom: 0.75em;
 58 | 
 59 |         transition: all 0.3s;
 60 |     }
 61 | 
 62 |     .Action, .Response {
 63 |         .Button {       
 64 |             &:nth-child(1) {
 65 |                 border: 1px solid $eunry2;
 66 |                 
 67 |                 &:hover {
 68 |                     background-color: #F5F5F5;
 69 |                 }
 70 |             }
 71 |         }
 72 |     }
 73 | 
 74 |     .Action {
 75 |         .Button {
 76 |             &:nth-child(2) {
 77 |                 background-color: $eunry2;
 78 |                 color: white;
 79 | 
 80 |                 &:hover {
 81 |                     background-color: darken($eunry2, 5);
 82 |                 }
 83 |             }
 84 |         }
 85 |     }
 86 |     
 87 |     .Response {
 88 |         .Button {
 89 |             &:nth-child(2) {
 90 |                 background-color: $eunry3;
 91 |                 color: white;
 92 |                 
 93 |                 &:hover {
 94 |                     background-color: darken($eunry3, 10);
 95 |                 }
 96 |             }
 97 |         }
 98 |     }
 99 | }
100 | 
101 | @media (min-width: 720px) {
102 |     .Message {
103 |         .Row {
104 |             display: flex;
105 |             justify-content: space-between;
106 | 
107 |             .Description {
108 |                 width: 50%;
109 |             }
110 | 
111 |             .Button {
112 |                 width: 49%;
113 |             }
114 |         }
115 | 
116 |         .Description {
117 |             .Name {
118 |                 .Text {
119 |                     line-height: 1.25em;
120 |                 }
121 |             }
122 |         }
123 | 
124 |         .Action {
125 |             padding-top: 1em;
126 |         }
127 | 
128 |         .Response {
129 |             padding-bottom: 1em;
130 |         }
131 |     }
132 | }
133 | 
134 | 


--------------------------------------------------------------------------------
/src/components/Admin/Inbox/Preview/Preview.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import classes from './Preview.module.scss';
 4 | 
 5 | const preview = ({ messages, expand, back }) => {    
 6 |     if(messages == null)
 7 |         return <h3 className = { classes.Empty }>No new messages!</h3>
 8 | 
 9 |     return (
10 |     	<section className = { classes.Preview }>
11 |             <div className = { classes.Meta }>
12 |                 <h3 className = { classes.Description }>Name</h3>
13 |                 <h3 className = { classes.Description }>Email</h3>
14 |                 <h3 className = { classes.Description }>Message</h3>
15 |                 <h3 className = { classes.Description }>Date</h3>
16 |             </div>
17 | 
18 |             <div className = { classes.Messages }>
19 |                 { Object.keys(messages).reverse().map((message, index) => {
20 |                         let name = messages[message].name;
21 |                         let contact = messages[message].email;
22 |                         let text = messages[message].message.substring(0, 35);
23 |                         let date = messages[message].time;
24 | 
25 |                         return (
26 |                             <div className = { classes.Message } onClick = { () => expand(message) } key = { index }>
27 |                                 <div className = { classes.Info }><p className = { classes.Text }>{ name }</p></div>
28 |                                 <div className = { classes.Info }><p className = { classes.Text }>{ contact }</p></div>
29 |                                 <div className = { classes.Info }><p className = { classes.Text }>{ text }</p></div>
30 |                                 <div className = { classes.Info }><p className = { classes.Text }>{ date }</p></div>
31 |                             </div>
32 |                         );
33 |                     })
34 |                 }
35 |             </div>
36 | 
37 |         <p className = { classes.Total }>Total messages: { Object.keys(messages).length }</p>
38 |         <button className = { classes.Back } onClick = { back }>{ '< Back' }</button>
39 |     </section>
40 |     );
41 | }
42 | 
43 | export default preview;
44 | 


--------------------------------------------------------------------------------
/src/components/Admin/Inbox/Preview/Preview.module.scss:
--------------------------------------------------------------------------------
  1 | $dark1: #444444;
  2 | $dark2: #616161;
  3 | 
  4 | .Preview {
  5 |     width: 100%;
  6 |     margin: 0 auto;
  7 | 
  8 |     .Meta {
  9 |         width: 100%;
 10 | 
 11 |         display: flex;
 12 |         align-items: center;
 13 | 
 14 |         margin-bottom: 0.5em;
 15 | 
 16 |         .Description {
 17 |             width: 50%;
 18 |             margin-left: 0.75em;
 19 | 
 20 |             font-family: 'Poppins', sans-serif;
 21 |             font-size: 1em;
 22 | 
 23 |             color: $dark1;
 24 | 
 25 |             &:nth-child(2n) {
 26 |                 display: none;
 27 |             }
 28 |         }
 29 |     }
 30 | 
 31 |     .Messages {
 32 |         width: 100%;
 33 | 
 34 |         max-height: 50vh;
 35 |         overflow-y: auto;
 36 |         overflow-x: hidden;
 37 |         
 38 |         .Message {
 39 |             height: 3em;
 40 | 
 41 |             margin-bottom: 0.75em;
 42 | 
 43 |             border-radius: 50px;
 44 |             border: 0.5px solid #E1E1E1;
 45 | 
 46 |             display: flex;
 47 |             justify-content: center;
 48 |             align-items: center;
 49 | 
 50 |             transition: all 0.3s;
 51 |             
 52 |             &:nth-child(2n) {
 53 |                 background-color: #F5F5F5;
 54 |             }
 55 | 
 56 |             &:hover {
 57 |                 box-shadow: 0px 0 8px rgba(0, 0, 0, 0.06);
 58 |                 cursor: pointer;
 59 |             }
 60 | 
 61 |             .Info {
 62 |                 width: 50%;
 63 | 
 64 |                 &:nth-child(1) {
 65 |                     .Text {
 66 |                         border: none;
 67 |                         margin-left: 0.5em;
 68 |                     }
 69 |                 }
 70 | 
 71 |                 .Text {
 72 |                     font-family: 'Poppins', sans-serif;
 73 |                     font-weight: 300;
 74 |                     font-size: 1em;
 75 |                     text-overflow: ellipsis;
 76 | 
 77 |                     color: $dark2;
 78 |                     
 79 |                     overflow: hidden;
 80 |                     white-space: nowrap;
 81 | 
 82 |                     width: 80%;
 83 |                     padding: 0.5em 0 0.5em 0.75em;
 84 | 
 85 |                     border-left: 0.5px solid rgba(0, 0, 0, 0.25);
 86 |                 }
 87 |                 
 88 |                 &:nth-child(2n) {
 89 |                     display: none;
 90 |                 }
 91 |             }
 92 |         }
 93 |     }
 94 | 
 95 |     .Total, .Back {
 96 |         font-family: 'Poppins', sans-serif;
 97 |         font-size: 1em;
 98 |         color: $dark1;
 99 |         
100 |         margin: 0.5em 0 0 0.75em;
101 |     }
102 |     
103 |     .Back {
104 |         margin-top: 0;
105 |         padding-bottom: 1em;
106 | 
107 |         background: none;
108 |         border: none;
109 |         outline: none;
110 | 
111 |         text-decoration: underline;
112 |         cursor: pointer;
113 |     }
114 | }
115 | 
116 | .Empty {
117 |     font-family: 'Poppins', sans-serif;
118 |     font-size: 1.5em;
119 | 
120 |     margin-bottom: 2em;
121 | 
122 |     text-align: center;
123 | 
124 |     color: $dark1;
125 | }
126 | 
127 | @media (min-width: 720px) {
128 |     .Preview {
129 |         .Meta {
130 |             .Description {
131 |                 width: 33%;
132 | 
133 |                 &:nth-child(4) {
134 |                     display: block;
135 |                 }
136 |             }
137 |         }
138 | 
139 |         .Messages {
140 |             .Message {
141 |                 .Info {
142 |                     width: 33%;
143 | 
144 |                     &:nth-child(4) {
145 |                         display: block;
146 |                     }
147 |                 }
148 |             }
149 |         }
150 |     }
151 | }
152 | 
153 | @media (min-width: 1025px) {
154 |     .Preview {
155 |         .Meta {
156 |             .Description {
157 |                 width: 25%;
158 | 
159 |                 &:nth-child(2) {
160 |                     display: block;
161 |                 }
162 |             }
163 |         }
164 | 
165 |         .Messages {
166 |             .Message {
167 |                 height: 4em;
168 | 
169 |                 .Info {
170 |                     width: 25%;
171 | 
172 |                     &:nth-child(2) {
173 |                         display: block;
174 |                     }
175 |                 }
176 |             }
177 |         }
178 |     }
179 | }
180 | 


--------------------------------------------------------------------------------
/src/components/Admin/Menu/Menu.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import messages_icon from '../../../assets/icons/messages.png';
 4 | import appointments_icon from '../../../assets/icons/appointments.png';
 5 | import close_icon from '../../../assets/icons/close.png';
 6 | 
 7 | import classes from './Menu.module.scss';
 8 | 
 9 | const Menu = ({ select, close }) => {
10 |     return (
11 |     	<div className = { classes.Menu }>
12 |     		<div className = { classes.Wrapper }>
13 |                 <div className = { classes.Box } onClick = { () => select('Inbox') }>
14 |                     <img className = { classes.Icon } src = { messages_icon } alt = 'Messages' />
15 |                     <p className = { classes.Name }>Messages</p>
16 |                 </div>
17 |                 
18 |                 <div className = { classes.Box } onClick = { () => select('Appointments') }>
19 |                     <img className = { classes.Icon } src = { appointments_icon } alt = 'Appointments' />
20 |                     <p className = { classes.Name }>Appointments</p>
21 |                 </div>
22 |                 
23 |                 <div className = { classes.Box } onClick = { close }>
24 |                     <img className = { classes.Icon } src = { close_icon } alt = 'Close' />
25 |                     <p className = { classes.Name }>Close</p>
26 |                 </div>
27 |             </div>
28 |     	</div>
29 |     );
30 | }
31 | 
32 | export default Menu;
33 | 


--------------------------------------------------------------------------------
/src/components/Admin/Menu/Menu.module.scss:
--------------------------------------------------------------------------------
 1 | $dark2: #616161;
 2 | 
 3 | .Menu {
 4 |     width: 90%;
 5 |     margin: 0 auto;
 6 | 
 7 |     .Wrapper {
 8 |         width: 100%;
 9 | 
10 |         display: flex;
11 |         justify-content: center;
12 |         flex-wrap: wrap;
13 | 
14 |         .Box {
15 |             width: 35vw;
16 |             height: 35vw;
17 | 
18 |             margin: 0.5em;
19 | 
20 |             display: flex;
21 |             justify-content: center;
22 |             align-items: center;
23 | 
24 |             position: relative;
25 | 
26 |             border-radius: 33px;
27 |             box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
28 | 
29 |             transition: all 0.3s;
30 | 
31 |             cursor: pointer;
32 | 
33 |             &:hover {
34 |                 background-color: darken(white, 4);
35 |             }
36 | 
37 |             .Icon {
38 |                 width: 40%;
39 |                 height: 40%;
40 | 
41 |                 object-fit: contain;
42 |                 background-position: center;
43 |                 background-repeat: no-repeat;
44 |             }
45 | 
46 |             .Name {
47 |                 font-family: 'Poppins', sans-serif;
48 |                 font-size: 0.8em;
49 | 
50 |                 color: $dark2;
51 | 
52 |                 text-align: center;
53 | 
54 |                 width: 100%;
55 | 
56 |                 position: absolute;
57 |                 left: 0;
58 |                 right: 0;
59 |                 bottom: 10%;
60 |             }
61 |         }
62 |     }
63 | }
64 | 
65 | @media (min-width: 720px) {
66 |     .Menu {
67 |         width: 50vw;
68 | 
69 |         .Wrapper {
70 |             .Box {
71 |                 margin: 1em;
72 | 
73 |                 width: 20vw;
74 |                 height: 20vw;
75 | 
76 |                 .Name {
77 |                     font-size: 0.9em;
78 |                 }
79 |             }
80 |         }
81 |     }
82 | }
83 | 
84 | @media (min-width: 1025px) {
85 |     .Menu {
86 |         width: auto;
87 |         max-width: 25vw;
88 | 
89 |         .Wrapper {
90 |             .Box {
91 |                 margin: 1em;
92 | 
93 |                 width: 10vw;
94 |                 height: 10vw;
95 |             }
96 |         }
97 |     }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/components/Booking/Checkout/Checkout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import Stripe from './Stripe/Stripe';
 4 | import { services } from '../../Services/availableServices';
 5 | 
 6 | import classes from './Checkout.module.scss';
 7 | 
 8 | const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 9 | const weekNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
10 | 
11 | const Checkout = ({ data, success, meta }) => {
12 |     const onSubmitHandler = () => {
13 |         success();
14 |     };
15 |     
16 |     const mapIdsToServices = () => {
17 |         return data.service.id.map(serviceId => services.find(service => service.id === serviceId ));
18 |     };
19 | 
20 |     const countTotalPrice = () => {
21 |         let price = 0;
22 | 
23 |         mapIdsToServices().map(service => {
24 |             price += service.price;
25 | 
26 |             return service;
27 |         });
28 | 
29 |         return price.toFixed(2);
30 |     };
31 | 
32 |     return (
33 |         <div className = { classes.Checkout }>
34 |             <div className = { classes.Main }>
35 |                 <div className = { classes.Meta }>
36 |                     <h2 className = { classes.Text }>Summary</h2>
37 |                 </div>
38 | 
39 |                 <div className = { classes.Schedule }>
40 |                     <p className = { classes.Time }>{ ('0' + new Date(data.service.time).getHours()).slice(-2) + ":" + ('0' + new Date(data.service.time).getMinutes()).slice(-2) }</p>
41 |                     <div className = { classes.Separation } />
42 |                     <p className = { classes.Date }>{ new Date(data.service.time).getDate() + ' ' + monthNames[new Date(data.service.time).getMonth()] }<br/>{ weekNames[new Date(data.service.time).getDay()] }</p>
43 |                 </div>
44 | 
45 |                 <div className = { classes.Line } />
46 | 
47 |                 <div className = { classes.Services }>
48 |                     { mapIdsToServices().map((service, i) => 
49 |                         <div className = { classes.Service } key = { i }>
50 |                             <p className = { classes.Name }>{ service.name }</p>
51 |                             <p className = { classes.Duration }>{ service.duration >= 60 && (~~(service.duration / 60) + ' hrs') } { service.duration % 60 !== 0 ? service.duration % 60 + ' mins' : '' }</p>
52 |                         </div>                 
53 |                     )}
54 |                 </div>
55 |                 
56 |                 <div className = { classes.Line } />
57 | 
58 |                 <div className = { [classes.Box, data.details.payment === 'card' ? classes.Card : ''].join(' ') }>
59 |                     { data.details.payment === 'venue' ?
60 |                         <React.Fragment>
61 |                             <p className = { classes.Stats }>Payment method:</p>
62 |                             <p className = { classes.Result }>{ data.details.payment === 'venue' ? 'Pay at venue' : 'Pay with card' }</p>
63 |                         </React.Fragment>
64 |                         : <Stripe />
65 |                     }
66 |                     { meta && <p className = { classes.Error }>{ meta }</p> }
67 |                 </div>
68 |                 
69 |                 <div className = { classes.Line } />
70 | 
71 |                 <div className = { classes.Box }>
72 |                     <p className = { classes.Stats }>Order total:</p>
73 |                     <p className = { classes.Result }>£{ countTotalPrice() }</p>
74 |                 </div>
75 | 
76 |                 <div className = { classes.Line } />
77 |             </div>
78 | 
79 |             <div className = { classes.Submit }>
80 |                 { data.details.payment === 'card' && <p className = { classes.Terms }>By clicking 'Pay now' button, you agree to our <span>Booking Terms</span></p> }
81 |                 <button className = { classes.Button } onClick = { onSubmitHandler }>{ data.details.payment === 'venue' ? 'Buy now' : 'Pay now' }</button>
82 |             </div>
83 |         </div>
84 |     );
85 | }
86 | 
87 | export default Checkout;
88 | 


--------------------------------------------------------------------------------
/src/components/Booking/Checkout/Checkout.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | $eunry3: #A28282;
  3 | $dark1: #444444;
  4 | $dark2: #616161;
  5 | 
  6 | .Checkout {
  7 |     display: flex;
  8 |     justify-content: space-between;
  9 |     align-items: center;
 10 |     flex-flow: column;
 11 |     flex-direction: column;
 12 | 
 13 |     .Main {
 14 |         width: 100%;
 15 | 
 16 |         .Meta {
 17 |             width: 100%;
 18 |             
 19 |             display: flex;
 20 |             justify-content: center;
 21 |             align-items: center;
 22 | 
 23 |             margin-bottom: 1.5em;
 24 | 
 25 |             .Text {
 26 |                 font-family: 'Poppins', sans-serif;
 27 |                 font-size: 1.35em;
 28 | 
 29 |                 color: $dark1;
 30 |             }
 31 |         }
 32 | 
 33 |         .Line {
 34 |             width: 100%;
 35 |             height: 1px;
 36 | 
 37 |             background-color: #E0E0E0;
 38 | 
 39 |             margin: 1em 0;
 40 |         }
 41 | 
 42 |         .Schedule {
 43 |             width: 100%;
 44 | 
 45 |             display: flex;
 46 |             justify-content: center;
 47 |             align-items: center;
 48 | 
 49 |             .Time {
 50 |                 font-family: 'Poppins', sans-serif;
 51 |                 font-size: 2.35em;
 52 |                 font-weight: 300;
 53 | 
 54 |                 color: $eunry3;
 55 |             }
 56 | 
 57 |             .Separation {
 58 |                 width: 1px;
 59 |                 height: 2.35em;
 60 | 
 61 |                 margin: 0 0.75em;
 62 | 
 63 |                 background-color: #E0E0E0;
 64 |             }
 65 | 
 66 |             .Date {
 67 |                 font-family: 'Poppins', sans-serif;
 68 |                 font-size: 1em;
 69 |                 font-weight: 300;
 70 | 
 71 |                 color: $dark2;
 72 |             }
 73 |         }
 74 | 
 75 |         .Services {
 76 |             width: 100%;
 77 |             max-height: 12vh;
 78 | 
 79 |             overflow-y: auto;
 80 | 
 81 |             .Service {
 82 |                 width: 100%;
 83 | 
 84 |                 text-align: center;
 85 | 
 86 |                 margin-bottom: 0.75em;
 87 | 
 88 |                 &:last-child {
 89 |                     margin-bottom: 0;
 90 |                 }
 91 | 
 92 |                 .Name {
 93 |                     font-family: 'Poppins', sans-serif;
 94 |                     font-weight: 300;
 95 | 
 96 |                     margin-bottom: 0.35em;
 97 | 
 98 |                     color: $dark2;
 99 |                 }
100 | 
101 |                 .Duration {
102 |                     font-family: 'Poppins', sans-serif;
103 |                     font-size: 0.8em;
104 |                     font-weight: 300;
105 | 
106 |                     color: $eunry3;
107 |                 }
108 |             }
109 |         }
110 | 
111 |         .Box {
112 |             width: 100%;
113 | 
114 |             display: flex;
115 |             justify-content: space-between;
116 |             align-items: center;
117 | 
118 |             .Stats {
119 |                 font-family: 'Poppins', sans-serif;
120 |                 font-size: 1em;
121 |                 font-weight: 300;
122 | 
123 |                 color: $dark2;
124 |             }
125 | 
126 |             .Result {
127 |                 font-family: 'Poppins', sans-serif;
128 |                 font-size: 1em;
129 | 
130 |                 color: $dark2;
131 |             }
132 |         }
133 | 
134 |         .Card {
135 |             flex-flow: column;
136 |             max-width: fit-content;
137 |             min-width: 100%;
138 | 
139 |             .Error {
140 |                 margin: 0 auto;
141 | 
142 |                 font-family: 'Poppins', sans-serif;
143 |                 font-size: 0.8em;
144 |                 font-weight: 300;
145 |                 
146 |                 text-align: center;
147 |                 
148 |                 color: rgb(255, 88, 88);
149 |             }
150 |         }
151 |     }
152 | 
153 |     .Submit {
154 |         width: 100%;
155 | 
156 |         display: flex;
157 |         justify-content: center;
158 |         align-items: center;
159 |         flex-flow: column;
160 | 
161 |         text-align: center;
162 | 
163 |         .Terms {
164 |             width: 80%;
165 | 
166 |             font-family: 'Poppins', sans-serif;
167 |             font-size: 0.8em;
168 |             font-weight: 300;
169 | 
170 |             color: $dark2;
171 | 
172 |             margin-bottom: 0.5em;
173 | 
174 |             span {
175 |                 text-decoration: underline;
176 |             }
177 |         }
178 |         
179 |         .Button {
180 |             border: none;
181 |             background: none;
182 | 
183 |             width: 55%;
184 |             height: 3em;
185 | 
186 |             font-family: 'Poppins', sans-serif;
187 |             font-size: 0.9em;
188 | 
189 |             color: white;
190 |             background-color: $eunry3;
191 |             border-radius: 25px;
192 | 
193 |             transition: all 0.15s;
194 | 
195 |             &:hover {
196 |                 background-color: darken($eunry3, 10);
197 |             }
198 |         }
199 |     }
200 | }
201 | 
202 | @media (min-width: 720px) {
203 |     .Checkout {
204 |         font-size: 1.5em;
205 | 
206 |         .Submit {
207 |             .Button {
208 |                 width: 45%;
209 |                 border-radius: 35px;
210 |                 font-size: 0.9em;
211 |             }
212 |         }
213 |     }
214 | }
215 | 
216 | @media (min-width: 1025px) {
217 |     .Checkout {
218 |         font-size: 1em;
219 |     }
220 | }
221 | 


--------------------------------------------------------------------------------
/src/components/Booking/Checkout/Stripe/CardSectionStyles.css:
--------------------------------------------------------------------------------
 1 | .StripeElement {
 2 |   width: 100%;
 3 |   height: 30px;
 4 |   color: #32325d;
 5 |   background-color: white;
 6 | 
 7 |   display: flex;
 8 |   justify-content: center;
 9 |   align-items: center;
10 | }
11 | 
12 | .StripeElement--invalid {
13 |   border-color: #fa755a;
14 | }
15 | 
16 | .StripeElement--webkit-autofill {
17 |   background-color: #fefde5 !important;
18 | }
19 | 
20 | .__PrivateStripeElement {
21 |   width: 100%;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/Booking/Checkout/Stripe/Stripe.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import { CardElement } from '@stripe/react-stripe-js';
 4 | 
 5 | import './CardSectionStyles.css'
 6 | 
 7 | const CARD_ELEMENT_OPTIONS = {
 8 |   style: {
 9 |     base: {
10 |       color: "#32325d",
11 |       fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
12 |       fontSmoothing: "antialiased",
13 |       fontSize: "16px",
14 |       "::placeholder": {
15 |         color: "#aab7c4",
16 |       },
17 |     },
18 |     invalid: {
19 |       color: "#fa755a",
20 |       iconColor: "#fa755a",
21 |     },
22 |   },
23 | };
24 | 
25 | const Stripe = () => {
26 |   return (
27 |       <CardElement options = { CARD_ELEMENT_OPTIONS } />
28 |   );
29 | };
30 | 
31 | 
32 | export default Stripe;
33 | 


--------------------------------------------------------------------------------
/src/components/Booking/Details/Details.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import classes from './Details.module.scss';
 4 | 
 5 | const isEmailAddress = (str) => {
 6 |     var pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 7 |     return pattern.test(str);
 8 | }
 9 | 
10 | const Details = ({ success }) => {
11 |     const [client, setClient] = useState({ name: '', email: '', phone: '' });
12 |     const [payment, setPayment] = useState('venue');
13 |     
14 |     const onSubmitHandler = () => {
15 |         let result = { client: client, payment: payment };
16 |         success(result);
17 |     };
18 | 
19 |     return (
20 |     	<div className = { classes.Details }>
21 |             <div className = { classes.Main }>
22 |                 <div className = { classes.Meta }>
23 |                     <h2 className = { classes.Text }>Your details</h2>
24 |                 </div>
25 | 
26 |                 <div className = { classes.Box }>
27 |                     <p className = { classes.Description }>Please, enter your information</p>
28 |                         
29 |                     <div className = { classes.Input }>
30 |                         <input className = { classes.Field } value = { client.name } onChange = { (event) => setClient({ ...client, name: event.target.value }) } type = 'text' placeholder = 'Your name' />
31 |                     </div>
32 | 
33 |                     <div className = { classes.Input }>
34 |                         <input className = { classes.Field } value = { client.email } onChange = { (event) => setClient({ ...client, email: event.target.value }) } type = 'text' placeholder = 'Your email' />
35 |                     </div>
36 | 
37 |                     <div className = { classes.Input }>
38 |                         <input className = { classes.Field } value = { client.phone } onChange = { (event) => setClient({ ...client, phone: event.target.value }) } type = 'text' placeholder = 'Your phone' />
39 |                     </div>
40 |                 </div>
41 | 
42 |                 <div className = { classes.Box }>
43 |                     <p className = { classes.Description }>Please, choose the payment method</p>
44 | 
45 |                     <div className = { classes.Options }>
46 |                         <div className = { [classes.Option, payment === 'venue' ? classes.Selected : ''].join(' ') } onClick = { () => setPayment('venue') }>Pay at venue</div>
47 |                         <div className = { [classes.Option, payment === 'card' ? classes.Selected : ''].join(' ') } onClick = { () => setPayment('card') }>Pay with card</div>
48 |                     </div>
49 |                 </div>
50 |             </div>
51 | 
52 |             <div className = { classes.Submit }>
53 |                 { !isEmailAddress(client.email) && client.email !== '' && <p className = { classes.Extra }>Please, provide a valid email address</p> }
54 |                 <button className = { classes.Button } onClick = { onSubmitHandler } disabled = { client.name === '' || client.email === '' || client.phone === '' || !isEmailAddress(client.email) }>Checkout</button>
55 |             </div>
56 |         </div>
57 |     );
58 | }
59 | 
60 | export default Details;
61 | 


--------------------------------------------------------------------------------
/src/components/Booking/Details/Details.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | $eunry3: #A28282;
  3 | $dark1: #444444;
  4 | $dark2: #616161;
  5 | 
  6 | .Details {
  7 |     display: flex;
  8 |     justify-content: space-between;
  9 |     align-items: center;
 10 |     flex-flow: column;
 11 |     flex-direction: column;
 12 | 
 13 |     .Main {
 14 |         width: 100%;
 15 | 
 16 |         .Meta {
 17 |             width: 100%;
 18 |             
 19 |             display: flex;
 20 |             justify-content: center;
 21 |             align-items: center;
 22 | 
 23 |             margin-bottom: 1.5em;
 24 | 
 25 |             .Text {
 26 |                 font-family: 'Poppins', sans-serif;
 27 |                 font-size: 1.35em;
 28 | 
 29 |                 color: $dark1;
 30 |             }
 31 |         }
 32 | 
 33 |         .Box {
 34 |             width: 100%;
 35 |             margin-bottom: 1em;
 36 | 
 37 |             .Description {
 38 |                 font-family: 'Poppins', sans-serif;
 39 |                 font-size: 0.9em;
 40 |                 font-weight: 300;
 41 | 
 42 |                 margin-bottom: 0.75em;
 43 |                 margin-left: 1em;
 44 | 
 45 |                 color: $dark2;                
 46 |             }
 47 | 
 48 |             .Input {
 49 |                 width: 90%;
 50 | 
 51 |                 margin: 0.5em 0;
 52 |                 padding: 0.5em 5%;
 53 | 
 54 |                 border: 1px solid #E1E1E1;
 55 |                 border-radius: 25px;
 56 | 
 57 |                 display: flex;
 58 |                 align-items: center;
 59 |                 justify-content: center;
 60 | 
 61 |                 .Field {
 62 |                     width: 100%;
 63 | 
 64 |                     border: none;
 65 |                     
 66 |                     font-family: 'Poppins', sans-serif;
 67 |                     font-weight: 300;
 68 |                     font-size: 0.8em;
 69 |                 }
 70 |             }
 71 |             
 72 |             .Options {
 73 |                 display: flex;
 74 |                 justify-content: space-between;
 75 |                 align-items: center;
 76 | 
 77 |                 .Option {
 78 |                     width: 48%;
 79 |                     height: 3.5em;
 80 | 
 81 |                     box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
 82 |                     border-radius: 50px;
 83 | 
 84 |                     display: flex;
 85 |                     justify-content: center;
 86 |                     align-items: center;
 87 | 
 88 |                     font-family: 'Poppins', sans-serif;
 89 |                     font-size: 0.8em;
 90 |                     font-weight: 300;
 91 |                     color: #BEBEBE;
 92 | 
 93 |                     cursor: pointer;
 94 |                     transition: all 0.3s;
 95 | 
 96 |                     &:hover {
 97 |                         background-color: rgb(243, 243, 243);
 98 |                     }
 99 |                 }
100 | 
101 |                 .Selected {
102 |                     background-color: $eunry1;
103 |                     box-shadow: 0 0 6px rgba(214, 188, 188, 0.33);
104 | 
105 |                     font-weight: 400;
106 |                     color: white;
107 | 
108 |                     &:hover {
109 |                         background-color: $eunry1;
110 |                     }
111 |                 }
112 |             }
113 |         }        
114 |     }
115 | 
116 |     .Submit {
117 |         width: 100%;
118 | 
119 |         display: flex;
120 |         justify-content: center;
121 |         align-items: center;
122 |         flex-flow: column;
123 | 
124 |         text-align: center;
125 | 
126 |         .Extra {
127 |             width: 80%;
128 | 
129 |             font-family: 'Poppins', sans-serif;
130 |             font-size: 0.8em;
131 |             font-weight: 300;
132 | 
133 |             color: $dark2;
134 | 
135 |             margin-bottom: 0.5em;
136 | 
137 |             span {
138 |                 text-decoration: underline;
139 |             }
140 |         }
141 | 
142 |         .Button {
143 |             border: none;
144 |             background: none;
145 | 
146 |             width: 55%;
147 |             height: 3em;
148 | 
149 |             font-family: 'Poppins', sans-serif;
150 |             font-size: 0.9em;
151 | 
152 |             color: white;
153 |             background-color: $eunry3;
154 |             border-radius: 25px;
155 | 
156 |             transition: all 0.15s;
157 | 
158 |             &:hover {
159 |                 background-color: darken($eunry3, 10);
160 |             }
161 | 
162 |             &:disabled {
163 |                 background-color: rgb(231, 231, 231);
164 |             }
165 |         }
166 |     }
167 | }
168 | 
169 | @media (min-width: 720px) {
170 |     .Details {
171 |         font-size: 1.5em;
172 | 
173 |         .Submit {
174 |             .Button {
175 |                 width: 45%;
176 |                 border-radius: 35px;
177 |                 font-size: 0.9em;
178 |             }
179 |         }
180 |     }
181 | }
182 | 
183 | @media (min-width: 1025px) {
184 |     .Details {
185 |         min-width: 25vw;
186 |         font-size: 1em;
187 |     }
188 | }
189 | 


--------------------------------------------------------------------------------
/src/components/Booking/Schedule/Schedule.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import classes from './Schedule.module.scss';
 4 | 
 5 | const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
 6 | const weekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 7 | 
 8 | const Schedule = ({ schedule, success }) => {
 9 |     const [selectedDay, setSelectedDay] = useState(1);
10 |     const [selectedTime, setSelectedTime] = useState();
11 |     const [week, setWeek] = useState(0);
12 | 
13 |     const selectWeekHandler = (week) => {
14 |         setWeek(week);
15 |         setSelectedDay(1);
16 |     };
17 | 
18 |     const selectDayHandler = (day) => {
19 |         setSelectedDay(day);
20 |         setSelectedTime(null);
21 |     };
22 | 
23 |     const selectTimeHandler = (time) => {
24 |         setSelectedTime(time);
25 |     };
26 | 
27 |     const onSubmitHandler = () => {
28 |         success(selectedTime);
29 |     };
30 |     
31 |     const weekDate = () => {
32 |         const weekStart = new Date();
33 |         weekStart.setDate(weekStart.getDate() + week * 7);
34 | 
35 |         let result = [];
36 | 
37 |         for (let i = 0; i < 7; i++) {
38 |             let addedDate = new Date(weekStart);
39 |             addedDate.setDate(addedDate.getDate() + i);
40 | 
41 |             result.push(new Date(addedDate));
42 |         }
43 | 
44 |         return result;
45 |     };
46 |     
47 |     return (
48 |     	<div className = { classes.Schedule }>
49 |             <div className = { classes.Main }>
50 |                 <div className = { classes.Month }>
51 |                     <button className = { classes.Previous } onClick = { () => selectWeekHandler(week - 1) } disabled = { week - 1 < 0 }><div className = { classes.Arrow } /></button>
52 |                     <h2 className = { classes.Text }>{ monthNames[weekDate()[0].getMonth()] } { weekDate()[0].getFullYear() }</h2>
53 |                     <button className = { classes.Next } onClick = { () => selectWeekHandler(week + 1) } disabled = { week + 1 > 11 }><div className = { classes.Arrow } /></button>
54 |                 </div>
55 | 
56 |                 <div className = { classes.Days }>
57 |                     { weekDate().map((day, i) => 
58 |                         <div className = { classes.Day } onClick = { () => selectDayHandler(i) } key = { i }>
59 |                             <p className = { classes.Name }>{ weekNames[day.getDay()] }</p>
60 |                             <span className = { [classes.Number, i === selectedDay ? classes.ActiveDay : ''].join(' ') }>{ day.getDate() }</span>
61 |                         </div>) }
62 |                 </div>
63 |             
64 |                 <div className = { classes.Line } />
65 | 
66 |                 <div className = { classes.Options }>
67 |                     { schedule[week][selectedDay].length === 0 ? <div className = { classes.Unavailable }><p className = { classes.Text }>Sorry, there are no available slots.<br/>Please, select another day.</p></div> : schedule[week][selectedDay].map(time => 
68 |                         <div className = { [classes.Option, selectedTime === time ? classes.ActiveTime : ''].join(' ') } onClick = { () => selectTimeHandler(time) } key = { time }>
69 |                             <p className = { classes.Time }>{ ('0' + new Date(time).getHours()).slice(-2) + ":" + ('0' + new Date(time).getMinutes()).slice(-2) }</p>
70 |                             <p className = { classes.Select }>Select</p>
71 |                             <div className = { classes.Tick } />
72 |                     </div>) }
73 |                 </div>
74 |             </div>
75 | 
76 |             <button className = { classes.Submit } onClick = { onSubmitHandler } disabled = { selectedTime == null }>Continue</button>
77 |     	</div>
78 |     );
79 | }
80 | 
81 | export default Schedule;
82 | 


--------------------------------------------------------------------------------
/src/components/Booking/Schedule/Schedule.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | $eunry3: #A28282;
  3 | $dark1: #444444;
  4 | $dark2: #616161;
  5 | 
  6 | .Schedule {
  7 |     display: flex;
  8 |     justify-content: space-between;
  9 |     align-items: center;
 10 |     flex-flow: column;
 11 |     flex-direction: column;
 12 | 
 13 |     .Main {
 14 |         width: 100%;
 15 | 
 16 |         .Month {
 17 |             width: 100%;
 18 |             
 19 |             display: flex;
 20 |             justify-content: space-between;
 21 |             align-items: center;
 22 | 
 23 |             .Text {
 24 |                 font-family: 'Poppins', sans-serif;
 25 |                 font-size: 1.35em;
 26 | 
 27 |                 color: $dark1;
 28 |             }
 29 | 
 30 |             .Previous, .Next {
 31 |                 background: none;
 32 |                 border: none;
 33 | 
 34 |                 width: 0.85em;
 35 |                 height: 0.85em;
 36 | 
 37 |                 background-image: url('../../../assets/icons/scroll.png');
 38 |                 background-size: contain;
 39 |                 background-position: center;
 40 |                 background-repeat: no-repeat;
 41 | 
 42 |                 filter: brightness(0) invert(0.75);
 43 | 
 44 |                 transition: all 0.15s;
 45 | 
 46 |                 &:hover {                    
 47 |                     filter: none;
 48 |                 }
 49 | 
 50 |                 &:disabled {
 51 |                     visibility: hidden;
 52 |                 }
 53 |             }
 54 | 
 55 |             .Previous {
 56 |                 transform: rotateZ(90deg);
 57 |             }
 58 |             
 59 |             .Next {
 60 |                 transform: rotateZ(-90deg);
 61 |             }
 62 |         }
 63 | 
 64 |         .Days {
 65 |             width: 95%;
 66 |             margin: 1.25em auto 0;
 67 | 
 68 |             display: flex;
 69 |             justify-content: space-between;
 70 |             align-items: center;
 71 | 
 72 |             .Day {
 73 |                 text-align: center;
 74 |                 position: relative;
 75 | 
 76 |                 .Name {
 77 |                     font-family: 'Poppins', sans-serif;
 78 |                     font-size: 0.7em;
 79 |                     font-weight: 300;
 80 | 
 81 |                     margin-bottom: 1em;
 82 | 
 83 |                     color: $dark2;
 84 |                 }
 85 | 
 86 |                 .Number {
 87 |                     font-family: 'Poppins', sans-serif;
 88 |                     font-size: 1.25em;
 89 | 
 90 |                     z-index: 600;
 91 |                     position: relative;
 92 |                     color: $dark1;
 93 |                     
 94 |                     width: 1.75em;
 95 |                     height: 1.75em;
 96 | 
 97 |                     display: block;
 98 | 
 99 |                     text-align: center;
100 |                     line-height: 1.75em;
101 |                     border-radius: 50%;
102 |                     
103 |                     transition: all 0.15s;
104 |                     cursor: pointer;
105 | 
106 |                     &:hover {
107 |                         background-color: rgb(243, 243, 243);
108 |                     }
109 |                 }
110 | 
111 |                 .ActiveDay {
112 |                     background-color: $eunry1;
113 |                     color: white;
114 | 
115 |                     &:hover {
116 |                         background-color: $eunry1;
117 |                     }
118 |                 }
119 | 
120 |             }
121 |         }
122 | 
123 |         .Line {
124 |             width: 7em;
125 |             height: 1px;
126 | 
127 |             margin: 0.75em auto 1em;
128 | 
129 |             background-color: $eunry1;
130 |         }
131 | 
132 |         .Options {
133 |             width: 100%;
134 |             margin: 0 auto 1.5em;
135 | 
136 |             height: 30vh;
137 |             overflow-y: auto;
138 | 
139 |             .Unavailable {
140 |                 width: 100%;
141 |                 height: 100%;
142 | 
143 |                 display: flex;
144 |                 justify-content: center;
145 |                 align-items: center;
146 | 
147 |                 .Text {
148 |                     font-family: 'Poppins', sans-serif;
149 |                     font-size: 1.15em;
150 | 
151 |                     line-height: 1.5em;
152 |                     
153 |                     text-align: center;
154 | 
155 |                     color: $dark1;
156 |                 }
157 |             }
158 | 
159 |             .Option {
160 |                 height: 3em;
161 | 
162 |                 box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
163 |                 border-radius: 30px;
164 | 
165 |                 margin: 0.5em 0;
166 | 
167 |                 display: flex;
168 |                 justify-content: space-between;
169 |                 align-items: center;
170 | 
171 |                 transition: all 0.15s;
172 |                 
173 |                 cursor: pointer;
174 | 
175 |                 &:hover {
176 |                     background-color: rgb(243, 243, 243);
177 |                 }
178 | 
179 |                 .Time {
180 |                     font-family: 'Poppins', sans-serif;
181 |                     font-size: 1em;
182 |                     font-weight: 300;
183 | 
184 |                     margin-left: 1.5em;
185 | 
186 |                     color: $dark1;
187 |                 }
188 | 
189 |                 .Select {
190 |                     font-family: 'Poppins', sans-serif;
191 |                     font-size: 0.9em;
192 |                     font-weight: 300;
193 | 
194 |                     color: #BEBEBE;
195 | 
196 |                     margin-right: 1.25em;
197 |                 }
198 | 
199 |                 .Tick {
200 |                     display: none;
201 |                 }
202 |             }
203 | 
204 |             .ActiveTime {
205 |                 background-color: $eunry1;
206 |                 box-shadow: 0 0 6px rgba(214, 188, 188, 0.33);
207 |                 
208 |                 &:hover {
209 |                     background-color: $eunry1;
210 |                 }
211 | 
212 |                 .Time {
213 |                     font-weight: 400;
214 |                     color: white;
215 |                 }
216 | 
217 |                 .Select {
218 |                     display: none;
219 |                 }
220 | 
221 |                 .Tick {
222 |                     display: block;
223 |                     
224 |                     width: 1em;
225 |                     height: 1em;
226 |                     
227 |                     margin-right: 1.5em;
228 | 
229 |                     background-image: url('../../../assets/icons/tick.png');
230 |                     background-size: contain;
231 |                     background-position: center;
232 |                     background-repeat: no-repeat;
233 |                 }
234 |             }
235 |         }
236 |     }
237 | 
238 |     .Submit {
239 |         border: none;
240 |         background: none;
241 | 
242 |         width: 55%;
243 |         height: 3em;
244 | 
245 |         font-family: 'Poppins', sans-serif;
246 |         font-size: 0.9em;
247 | 
248 |         color: white;
249 |         background-color: $eunry3;
250 |         border-radius: 25px;
251 | 
252 |         transition: all 0.15s;
253 | 
254 |         &:hover {
255 |             background-color: darken($eunry3, 10);
256 |         }
257 | 
258 |         &:disabled {
259 |             background-color: rgb(231, 231, 231);
260 |         }
261 |     }
262 | }
263 | 
264 | @media (min-width: 720px) {
265 |     .Schedule {
266 |         font-size: 1.5em;
267 | 
268 |         .Submit {
269 |             width: 45%;
270 |             border-radius: 35px;
271 |             font-size: 0.9em;
272 |         }
273 |     }
274 | }
275 | 
276 | @media (min-width: 1025px) {
277 |     .Schedule {
278 |         font-size: 1em;
279 |     }
280 | }
281 | 


--------------------------------------------------------------------------------
/src/components/Booking/Success/Success.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import classes from './Success.module.scss';
 4 | 
 5 | const Success = ({ success, email }) => {
 6 |     return (
 7 |     	<div className = { classes.Success }>
 8 |             <div className = { classes.Main }>
 9 |                 <div className = { classes.Meta }>
10 |                     <h2 className = { classes.Text }>Congratulations!</h2>
11 |                 </div>
12 | 
13 |                 <div className = { classes.Tick } />
14 | 
15 |                 <div className = { classes.Description }>
16 |                     <p className = { classes.Info }>An email with the appointment details was sent to: <span>{ email }</span></p>
17 |                 </div>
18 |             </div>
19 | 
20 |             <div className = { classes.Submit }>
21 |                 <button className = { classes.Button } onClick = { success }>Done</button>
22 |             </div>
23 |         </div>
24 |     );
25 | }
26 | 
27 | export default Success;
28 | 


--------------------------------------------------------------------------------
/src/components/Booking/Success/Success.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | $eunry3: #A28282;
  3 | $dark1: #444444;
  4 | $dark2: #616161;
  5 | 
  6 | .Success {
  7 |     display: flex;
  8 |     justify-content: space-between;
  9 |     align-items: center;
 10 |     flex-flow: column;
 11 |     flex-direction: column;
 12 | 
 13 |     .Main {
 14 |         width: 100%;
 15 | 
 16 |         .Meta {
 17 |             width: 100%;
 18 |             
 19 |             display: flex;
 20 |             justify-content: center;
 21 |             align-items: center;
 22 | 
 23 |             margin-bottom: 1.5em;
 24 | 
 25 |             .Text {
 26 |                 font-family: 'Poppins', sans-serif;
 27 |                 font-size: 1.35em;
 28 | 
 29 |                 color: $dark1;
 30 |             }
 31 |         }
 32 | 
 33 |         .Tick {
 34 |             width: 40vw;
 35 |             height: 40vw;
 36 | 
 37 |             margin: 2em auto;
 38 | 
 39 |             background-size: contain;
 40 |             background-image: url('../../../assets/icons/tickbox.png');
 41 |             background-repeat: no-repeat;
 42 |         }
 43 |         
 44 |         .Description {
 45 |             max-width: fit-content;
 46 | 
 47 |             margin: 1.5em auto;
 48 | 
 49 |             .Info {
 50 |                 font-family: 'Poppins', sans-serif;
 51 |                 font-size: 0.9em;
 52 |                 font-weight: 300;
 53 | 
 54 |                 line-height: 1.25em;
 55 |                 text-align: center;
 56 | 
 57 |                 color: $dark2;
 58 | 
 59 |                 span {
 60 |                     text-decoration: underline;
 61 |                 }
 62 |             }
 63 |         }
 64 |     }
 65 | 
 66 |     .Submit {
 67 |         width: 100%;
 68 | 
 69 |         display: flex;
 70 |         justify-content: center;
 71 |         align-items: center;
 72 |         flex-flow: column;
 73 | 
 74 |         text-align: center;
 75 | 
 76 |         .Button {
 77 |             border: none;
 78 |             background: none;
 79 | 
 80 |             width: 55%;
 81 |             height: 3em;
 82 | 
 83 |             font-family: 'Poppins', sans-serif;
 84 |             font-size: 0.9em;
 85 | 
 86 |             color: white;
 87 |             background-color: $eunry3;
 88 |             border-radius: 25px;
 89 | 
 90 |             transition: all 0.15s;
 91 | 
 92 |             &:hover {
 93 |                 background-color: darken($eunry3, 10);
 94 |             }
 95 | 
 96 |             &:disabled {
 97 |                 background-color: rgb(231, 231, 231);
 98 |             }
 99 |         }
100 |     }
101 | }
102 | 
103 | @media (min-width: 720px) {
104 |     .Success {
105 |         font-size: 1.5em;
106 | 
107 |         .Main {
108 |             font-size: 0.8em;
109 | 
110 |             .Tick {      
111 |                 width: 25vw;
112 |                 height: 25vw;          
113 |             }
114 |         }
115 | 
116 |         .Submit {
117 |             .Button {
118 |                 width: 45%;
119 |                 border-radius: 35px;
120 |                 font-size: 0.9em;
121 |             }
122 |         }
123 |     }
124 | }
125 | 
126 | @media (min-width: 1025px) {
127 |     .Success {
128 |         font-size: 1em;
129 |         
130 |         .Main {
131 |             font-size: 1em;
132 |             .Tick {      
133 |                 width: 12vw;
134 |                 height: 12vw;          
135 |             }
136 |         }
137 |     }
138 | }


--------------------------------------------------------------------------------
/src/components/Contacts/Contacts.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { GOOGLE_MAPS_API_KEY } from '../../config/constants';
 3 | 
 4 | import Form from './Form/Form';
 5 | import Map from './Map/Map';
 6 | 
 7 | import classes from './Contacts.module.scss';
 8 | 
 9 | const Contacts = () => {
10 |     return (
11 |     	<div className = { classes.Contacts }>
12 |     		<div className = { classes.Map }>
13 |                 <Map
14 |                     location = { { lat: 51.5127868, lng: -0.3047389 } }
15 |                     zoom = { 15.5 }
16 |                     googleMapURL = { "https://maps.googleapis.com/maps/api/js?key=" + GOOGLE_MAPS_API_KEY }
17 |                     loadingElement = { <div style = {{ height: `100vh`, width: '100vw' }} /> } />
18 |             </div>
19 | 
20 |             <div className = { classes.Container }>
21 |                 <div className = { classes.Wrapper }>
22 |                     <h1 className = { classes.Text }>Get in touch</h1>
23 |                     <div className = { classes.Line } />
24 |                     <p className = { classes.Description }>Have any questions? Feel free to use contact form below to get in touch with us. We will answer you as soon as possible!</p>
25 | 
26 |                     <Form />
27 |                 </div>
28 |             </div>
29 |     	</div>
30 |     );
31 | }
32 | 
33 | export default Contacts;
34 | 


--------------------------------------------------------------------------------
/src/components/Contacts/Contacts.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry2: #6D0E2A;
  2 | $eunry3: #A28282;
  3 | $dark1: #444444;
  4 | $dark2: #616161;
  5 | 
  6 | .Contacts {
  7 |     width: 100%;
  8 | 
  9 |     .Map {
 10 |         width: 100%;
 11 |         height: 40vh;
 12 | 
 13 |         background-color: lightsteelblue;
 14 |     }
 15 | 
 16 |     .Container {
 17 |         width: 100%;
 18 | 
 19 |         padding: 2em 0;
 20 | 
 21 |         display: flex;
 22 |         justify-content: center;
 23 |         align-items: center;
 24 | 
 25 |         background-color: white;
 26 | 
 27 |         .Wrapper {
 28 |             width: 96vw;
 29 | 
 30 |             display: flex;
 31 |             justify-content: center;
 32 |             align-items: center;
 33 |             flex-flow: column;
 34 | 
 35 |             text-align: center;
 36 | 
 37 |             .Text {
 38 |                 font-family: 'Poppins', sans-serif;
 39 |                 font-size: 2em;
 40 |                 text-transform: capitalize;
 41 | 
 42 |                 color: $eunry2;
 43 |             }
 44 | 
 45 |             .Line {
 46 |                 width: 4em;
 47 |                 height: 2px;
 48 | 
 49 |                 margin: 1em 0 1.5em;
 50 | 
 51 |                 background-color: $eunry3;
 52 |             }
 53 | 
 54 |             .Description {
 55 |                 font-family: 'Poppins', sans-serif;
 56 |                 font-weight: 300;
 57 | 
 58 |                 line-height: 1.5em;
 59 | 
 60 |                 color: $dark2;
 61 |             }
 62 |         }
 63 |     }
 64 | }
 65 | 
 66 | @media (min-width: 720px) {
 67 |     .Contacts {
 68 |         .Container {
 69 |             .Wrapper {
 70 |                 width: 70%;
 71 | 
 72 |                 .Form {
 73 |                     .Send {
 74 |                         width: 35%;
 75 |                     }
 76 |                 }
 77 |             }
 78 |         }
 79 |     }
 80 | }
 81 | 
 82 | @media (min-width: 1025px) {
 83 |     .Contacts {
 84 |         display: flex;
 85 |         height: 80vh;
 86 | 
 87 |         .Map {
 88 |             width: 50%;
 89 |             height: 100%;
 90 |         }
 91 | 
 92 |         .Container {
 93 |             width: 50%;
 94 | 
 95 |             justify-content: left;
 96 | 
 97 |             .Wrapper {
 98 |                 width: 70%;
 99 |                 margin-left: 3em;
100 |                 
101 |                 font-size: 0.8em;
102 | 
103 |                 align-items: flex-start;
104 | 
105 |                 text-align: left;
106 | 
107 |                 .Text {
108 |                     font-size: 2.5em;
109 |                 }
110 | 
111 |                 .Line {
112 |                     width: 5em;
113 |                     margin: 1.5em 0 2em;
114 |                 }
115 | 
116 |                 .Description {
117 |                     font-size: 1.2em;
118 |                 }
119 | 
120 |                 .Form {
121 |                     margin: 1em 0;
122 | 
123 |                     .Input {
124 |                         .Field {
125 |                             font-size: 1.125em;
126 |                         }
127 |                     }
128 | 
129 |                     .Send {
130 |                         margin-top: 1.5em;
131 |                         font-size: 1em;
132 |                     }
133 |                 }
134 |             }
135 |         }
136 |     }
137 | }
138 | 


--------------------------------------------------------------------------------
/src/components/Contacts/Form/Form.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import axios from 'axios';
 3 | import { BACKEND_DOMAIN } from '../../../config/constants';
 4 | 
 5 | import Spinner from '../../UI/Spinner/Spinner';
 6 | 
 7 | import classes from './Form.module.scss';
 8 | 
 9 | const isEmailAddress = (str) => {
10 |     var pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
11 |     return pattern.test(str);
12 | }
13 | 
14 | const Form = () => {
15 |     const [message, setMessage] = useState({ name: '', email: '', phone: '', message: '', time: '' });
16 |     const [loading, setLoading] = useState(false);
17 |     const [result, setResult] = useState();
18 | 
19 |     const onSubmit = (event) => {
20 |         event.preventDefault();
21 | 
22 |         setLoading(true);
23 |         
24 |         message.time = new Date().getDate() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getFullYear() + ' ' + new Date().getHours() + ':' + new Date().getMinutes();
25 | 
26 |         if(message.name === '' || message.email === '' || message.phone === '' || message.message === '' || message.time === '') { 
27 |             setResult('Please, fill in all required fields.');           
28 |             setLoading(false);            
29 |         } else if(!isEmailAddress(message.email)) {
30 |             setResult('Please, provide a valid email address.');        
31 |             setLoading(false);   
32 |         } else {
33 |             axios.post(BACKEND_DOMAIN + 'message/beautyatluxx', { message: message })
34 |                 .then(response => {
35 |                     setLoading(false);
36 |                     setResult('Your message has been delivered.');
37 |                     setMessage({ name: '', email: '', phone: '', message: '', time: '' });
38 |                 })
39 |                 .catch(error => {
40 |                     setResult('Something went wrong! Please, try again.');
41 |                     setLoading(false);
42 |                 });
43 |         }
44 |     }
45 | 
46 |     return (
47 |         <form className = { classes.Form }>
48 |             { loading && <div className = { classes.Modal }><Spinner /></div> }
49 |             
50 |             <div className = { classes.Input }>
51 |                 <input className = { classes.Field } value = { message.name } onChange = { (event) => setMessage({ ...message, name: event.target.value }) } type = 'text' placeholder = 'Your name' />
52 |             </div>
53 |             
54 |             <div className = { classes.Input }>
55 |                 <input className = { classes.Field } value = { message.email } onChange = { (event) => setMessage({ ...message, email: event.target.value }) } type = 'email' placeholder = 'Your email' />
56 |             </div>
57 |             
58 |             <div className = { classes.Input }>
59 |                 <input className = { classes.Field } value = { message.phone } onChange = { (event) => setMessage({ ...message, phone: event.target.value }) } type = 'tel' placeholder = 'Your phone' />
60 |             </div>
61 |             
62 |             <div className = { classes.Input}>
63 |                 <textarea className = { [classes.Field, classes.Textarea].join(' ') } value = { message.message } onChange = { (event) => setMessage({ ...message, message: event.target.value }) } placeholder = 'Your message' />
64 |             </div>
65 | 
66 |             { result && <p className = { classes.Result }>{ result }</p> }
67 | 
68 |             <button className = { classes.Send } type = 'submit' onClick = { onSubmit }>Send message</button>
69 |         </form>
70 |     );
71 | }
72 | 
73 | export default Form;
74 | 


--------------------------------------------------------------------------------
/src/components/Contacts/Form/Form.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry2: #6D0E2A;
  2 | $eunry3: #A28282;
  3 | $dark1: #444444;
  4 | 
  5 | .Form {
  6 |     width: 100%;
  7 |     margin: 0.5em 0;
  8 | 
  9 |     position: relative;
 10 | 
 11 |     .Modal {
 12 |         position: absolute;
 13 |         top: 0;
 14 |         bottom: 0;
 15 |         left: 0;
 16 |         right: 0;
 17 | 
 18 |         background-color: rgba(255, 255, 255, 0.75);
 19 | 
 20 |         display: flex;
 21 |         justify-content: center;
 22 |         align-items: center;
 23 |     }
 24 | 
 25 |     .Input {
 26 |         width: 90%;
 27 | 
 28 |         margin: 0.75em 0;
 29 |         padding: 0.75em 5%;
 30 | 
 31 |         border: 1px solid #E1E1E1;
 32 |         border-radius: 25px;
 33 | 
 34 |         display: flex;
 35 |         align-items: center;
 36 |         justify-content: center;
 37 | 
 38 |         .Field {
 39 |             width: 100%;
 40 | 
 41 |             border: none;
 42 |             
 43 |             font-family: 'Poppins', sans-serif;
 44 |             font-weight: 300;
 45 |         }
 46 |     }
 47 |     
 48 |     .Textarea {
 49 |         min-height: 8em;
 50 |         resize: none;
 51 |     }
 52 | 
 53 |     .Result {
 54 |         font-family: 'Poppins', sans-serif;
 55 |         font-weight: 300;
 56 | 
 57 |         margin: 1em 0 1.5em;
 58 |         
 59 |         color: $dark1;
 60 |     }
 61 | 
 62 |     .Send {
 63 |         width: 50%;
 64 |         height: 3.25em;
 65 | 
 66 |         font-family: 'Poppins', sans-serif;
 67 |         font-size: 0.9em;
 68 | 
 69 |         text-transform: uppercase;
 70 |         color: white;
 71 | 
 72 |         background-color: $eunry3;
 73 |         border-radius: 25px;
 74 | 
 75 |         border: none;
 76 | 
 77 |         transition: all 0.3s;
 78 | 
 79 |         &:hover {
 80 |             background-color: darken($eunry3, 10);
 81 |         }
 82 |     }
 83 | }
 84 | 
 85 | @media (min-width: 720px) {
 86 |     .Form {
 87 |         .Send {
 88 |             width: 35%;
 89 |         }
 90 |     }
 91 | }
 92 | 
 93 | @media (min-width: 1025px) {    
 94 |     .Form {
 95 |         margin: 1em 0;
 96 | 
 97 |         .Input {
 98 |             .Field {
 99 |                 font-size: 1.125em;
100 |             }
101 |         }
102 | 
103 |         .Result {
104 |             font-size: 1.1em;
105 |             margin: 1em 0 0 1em;
106 |         }
107 | 
108 |         .Send {
109 |             margin-top: 1.5em;
110 |             font-size: 1em;
111 |         }
112 |     }
113 | }
114 | 


--------------------------------------------------------------------------------
/src/components/Contacts/Map/Map.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
 3 | 
 4 | const Map = ({ location, zoom }) => {       
 5 |     const CustomMap = withGoogleMap(props => (
 6 |         <GoogleMap defaultCenter = { location } defaultZoom = { zoom }>
 7 |             <Marker position  = { location } />
 8 |         </GoogleMap>
 9 |     ));
10 | 
11 |     return <CustomMap
12 |                 containerElement = { <div style = {{ height: '100%', width: '100%' }} /> }
13 |                 mapElement = { <div style = {{ height: '100%' }} /> } />
14 | }
15 | 
16 | export default React.memo(withScriptjs(Map));
17 | 


--------------------------------------------------------------------------------
/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import Admin from '../../containers/Admin/Admin';
 4 | 
 5 | import logo from '../../assets/icons/logo.png';
 6 | import classes from './Footer.module.scss';
 7 | 
 8 | const Footer = () => {
 9 | 	const [admin, setAdmin] = useState(false);
10 | 
11 | 	const switchAdmin = () => {
12 | 		document.body.style.overflow = !admin ? 'hidden' : 'visible';
13 | 		setAdmin(!admin);
14 | 	};
15 | 
16 | 	const closePanel = () => {
17 | 		document.body.style.overflow = 'auto';
18 | 		setAdmin(false);
19 | 	};
20 | 
21 | 	return (
22 | 		<div className={classes.Footer}>
23 | 			<div className={classes.Wrapper}>
24 | 				<img className={classes.Logo} src={logo} alt='Beauty Salon Ealing Logo' />
25 | 				<div className={classes.Content}>
26 | 					<p>
27 | 						Copyright Beauty at Luxx &copy; {new Date().getFullYear()} <br className={classes.Break} />
28 | 						All Rights Reserved
29 | 					</p>
30 | 					<p>
31 | 						Website created by{' '}
32 | 						<span>
33 | 							<a href='https://mivladie.github.io/letscomit/' target='_blank' rel='noopener noreferrer'>
34 | 								letscomit
35 | 							</a>
36 | 						</span>
37 | 					</p>
38 | 				</div>
39 | 				<button className={classes.Admin} onClick={switchAdmin}>
40 | 					Admin
41 | 				</button>
42 | 			</div>
43 | 
44 | 			{admin ? <Admin closePanel={() => closePanel()} /> : null}
45 | 		</div>
46 | 	);
47 | };
48 | 
49 | export default Footer;
50 | 


--------------------------------------------------------------------------------
/src/components/Footer/Footer.module.scss:
--------------------------------------------------------------------------------
 1 | $dark1: #444444;
 2 | 
 3 | .Footer {
 4 |     width: 100%;
 5 | 
 6 |     padding: 0.5em 0;
 7 | 
 8 |     background-color: white;
 9 | 
10 |     .Wrapper {
11 |         width: 90%;
12 | 
13 |         margin: 0 auto;
14 | 
15 |         display: flex;
16 |         justify-content: center;
17 |         align-items: center;
18 | 
19 |         flex-flow: column;
20 | 
21 |         text-align: center;
22 |         
23 |         .Logo {
24 |             display: none;
25 |         }
26 | 
27 |         .Content {
28 |             font-family: 'Montserrat', sans-serif;
29 |             font-size: 0.9em;
30 |             
31 |             line-height: 1.5em;
32 |             color: $dark1;
33 | 
34 |             span {
35 |                 a {
36 |                     color: $dark1;
37 |                     outline: none;
38 |                 }
39 |             }
40 |         }
41 | 
42 |         .Admin {
43 |             background: none;
44 |             border: none;
45 |             outline: none;
46 | 
47 |             text-decoration: underline;
48 | 
49 |             font-family: 'Montserrat', sans-serif;
50 |             font-size: 0.9em;
51 | 
52 |             color: $dark1;
53 |         }
54 |     }
55 | }
56 | 
57 | @media (min-width: 720px) {
58 |     .Footer {
59 |         padding: 0.75em 0;
60 | 
61 |         .Wrapper {
62 |             .Content {
63 |                 p {
64 |                     .Break {
65 |                         display: none;
66 |                     }
67 |                 }
68 |             }
69 |         }
70 |     }
71 | }
72 | 
73 | @media (min-width: 1025px) {
74 |     .Footer {
75 |         .Wrapper {
76 |             width: 70%;
77 | 
78 |             justify-content: space-between;
79 |             flex-flow: row;
80 | 
81 |             .Logo {
82 |                 display: block;
83 | 
84 |                 width: 5em;
85 |                 height: 3em;
86 | 
87 |                 object-fit: contain;
88 |                 background-position: center;
89 |                 background-repeat: no-repeat;
90 |             }
91 |         }
92 |     }
93 | }
94 | 


--------------------------------------------------------------------------------
/src/components/Gallery/Gallery.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import classes from './Gallery.module.scss';
 4 | 
 5 | import image1 from '../../assets/images/banner_01.jpeg';
 6 | import image2 from '../../assets/images/image2.jpeg';
 7 | import image3 from '../../assets/images/image3.jpeg';
 8 | import image4 from '../../assets/images/image4.jpeg';
 9 | import image5 from '../../assets/images/image5.jpeg';
10 | import image6 from '../../assets/images/image6.jpeg';
11 | import image7 from '../../assets/images/salon.jpeg';
12 | import image8 from '../../assets/images/banner_02.jpeg';
13 | 
14 | import zoom from '../../assets/icons/zoom.png';
15 | import close from '../../assets/icons/close.png';
16 | 
17 | const Gallery = () => {
18 |     const images = [image1, image2, image3, image4, image5, image6, image7, image8];
19 |     
20 |     const [expand, setExpand] = useState(null);
21 | 
22 |     const closeModal = (element) => {
23 |         if(element === document.getElementsByClassName(classes.Modal)[0]) {
24 |             document.body.style.overflow = 'auto';
25 |             setExpand(null);
26 |         }
27 |     }
28 | 
29 |     const openModal = () => {
30 |         if(expand != null) {
31 |             document.body.style.overflow = 'hidden';
32 |             return (      
33 |                 <React.Fragment>
34 |                     <div className = { classes.Modal } onClick = { (event) => closeModal(event.target) }>
35 |                         <div className = { classes.Wrapper }>
36 |                             <img src = { expand } alt = 'Beauty Salon Zoomed' />
37 |                             <div className = { classes.Close } onClick = { () => closeModal(document.getElementsByClassName(classes.Modal)[0]) }>
38 |                                 <img src = { close } alt = 'Beauty Salon Close' />
39 |                             </div>
40 |                         </div>
41 |                     </div>
42 |                 </React.Fragment>
43 |             )
44 |         } else {
45 |             return null;
46 |         } 
47 |     }
48 | 
49 |     return (
50 |     	<div className = { classes.Gallery }>
51 |     		{ images.map((image, i) => (
52 |                 <div className = { classes.Container } key = { i }>
53 |                     <img className = { classes.Image } src = { image } alt = 'Beauty Salon' />
54 |                     <div className = { classes.Zoom } onClick = { () => setExpand(image) }>
55 |                         <img className = { classes.Icon } src = { zoom } alt = 'Beauty Salon Zoom' />
56 |                     </div>
57 |                 </div>
58 |             )) }
59 | 
60 |             { openModal() }
61 |     	</div>
62 |     );
63 | }
64 | 
65 | export default Gallery;
66 | 


--------------------------------------------------------------------------------
/src/components/Gallery/Gallery.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | 
  3 | .Gallery {
  4 |     width: 100%;
  5 | 
  6 |     display: flex;
  7 |     flex-flow: wrap;
  8 | 
  9 |     .Container {
 10 |         width: 50%;
 11 |         height: 50vw;
 12 | 
 13 |         overflow: hidden;
 14 | 
 15 |         position: relative;
 16 | 
 17 |         &:hover {
 18 |             .Image {
 19 |                 filter: brightness(0.5);
 20 |                 transform: scale(1.05);
 21 |             }
 22 | 
 23 |             .Zoom {
 24 |                 display: flex;
 25 |                 bottom: 8%;
 26 |             }
 27 |         }
 28 | 
 29 |         .Image {
 30 |             width: 100%;
 31 |             height: 100%;
 32 |             transition: all 0.3s;
 33 | 
 34 |             filter: brightness(0.85);
 35 | 
 36 |             object-fit: cover;
 37 |             background-position: center;
 38 |             background-repeat: no-repeat;
 39 |         }
 40 | 
 41 |         .Zoom {
 42 |             display: none;
 43 |             
 44 |             position: absolute;
 45 |             bottom: -30%;
 46 |             left: 50%;
 47 |             
 48 |             transform: translateX(-50%);
 49 | 
 50 |             width: 23%;
 51 |             height: 23%;
 52 | 
 53 |             background-color: $eunry1;
 54 |             border-radius: 50%;
 55 |             box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
 56 | 
 57 |             display: flex;
 58 |             justify-content: center;
 59 |             align-items: center;
 60 | 
 61 |             transition: all 0.3s;
 62 | 
 63 |             cursor: pointer;
 64 | 
 65 |             &:hover {
 66 |                 background-color: darken($eunry1, 10);
 67 |             }
 68 | 
 69 |             .Icon {
 70 |                 width: 33%;
 71 |                 height: 33%;
 72 | 
 73 |                 object-fit: contain;
 74 |                 background-position: center;
 75 |                 background-repeat: no-repeat;
 76 |             }
 77 |         }
 78 |     }
 79 | 
 80 |     .Modal {
 81 |         position: fixed;
 82 |         top: 0;
 83 |         bottom: 0;
 84 |         left: 0;
 85 |         right: 0;
 86 | 
 87 |         z-index: 700;
 88 |         
 89 |         background-color: rgba(0, 0, 0, 0.6);
 90 | 
 91 |         display: flex;
 92 |         justify-content: center;
 93 |         align-items: center;
 94 |         
 95 |         .Wrapper {
 96 |             position: relative;
 97 | 
 98 |             img {
 99 |                 max-width: 80vw;
100 |                 max-height: 80vh;
101 | 
102 |                 object-fit: cover;
103 |                 background-position: center;
104 |                 background-repeat: no-repeat;
105 | 
106 |                 box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
107 |             }
108 | 
109 |             .Close {
110 |                 width: 1.5em;
111 |                 height: 1.5em;
112 | 
113 |                 background-color: white;
114 |                 border-radius: 50%;
115 |                 box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
116 | 
117 |                 display: flex;
118 |                 justify-content: center;
119 |                 align-items: center;
120 | 
121 |                 position: absolute;
122 |                 top: -0.75em;
123 |                 right: -0.75em;
124 | 
125 |                 transition: all 0.3s;
126 | 
127 |                 cursor: pointer;
128 | 
129 |                 &:hover {
130 |                     background-color: darken(white, 10);
131 |                 }
132 | 
133 |                 img {
134 |                     width: 40%;
135 |                     height: 40%;
136 | 
137 |                     object-fit: contain;
138 |                     background-position: center;
139 |                     background-repeat: no-repeat;
140 |                 }
141 |             }
142 |         }
143 |     }
144 | }
145 | 
146 | @media (min-width: 720px) {
147 |     .Gallery {
148 |         .Container {
149 |             .Zoom {
150 |                 width: 15%;
151 |                 height: 15%;
152 |             }
153 |         }
154 | 
155 |         .Modal {
156 |             .Wrapper {
157 |                 .Close {
158 |                     width: 2.5em;
159 |                     height: 2.5em;
160 | 
161 |                     top: -1.25em;
162 |                     right: -1.25em;
163 |                 }
164 |             }
165 |         }
166 |     }
167 | }
168 | 
169 | @media (min-width: 1025px) {
170 |     .Gallery {
171 |         .Container {
172 |             width: 25%;
173 |             height: 25vw;
174 |         }
175 | 
176 |         .Modal {
177 |             .Wrapper {
178 |                 .Close {
179 |                     width: 2em;
180 |                     height: 2em;
181 | 
182 |                     top: -1em;
183 |                     right: -1em;
184 |                 }
185 |             }
186 |         }
187 |     }
188 | }
189 | 


--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | import classes from './Navigation.module.scss';
 4 | 
 5 | const Navigation = () => {
 6 |     const [expand, setExpand] = useState(false);
 7 |     
 8 |     useEffect(() => {
 9 |         if(!expand) document.body.style.overflow = 'visible';
10 |         else document.body.style.overflow = 'hidden';
11 |     }, [expand]);
12 | 
13 |     const expandMenuHandler = (event) => {
14 |         event.preventDefault();
15 | 
16 |         setExpand(!expand);
17 |     }
18 | 
19 |     return (
20 |     	<nav className = { [classes.Navigation, expand ? classes.Expand : ''].join(' ') }>
21 |             <div className = { classes.Container }>
22 |                 <div className = { classes.Hide } />
23 | 
24 |                 <ul className = { classes.Links }>
25 |                     <li><a className = { classes.Link } href = '#' onClick = { () => setExpand(false) }>Home</a></li>
26 |                     <li><a className = { classes.Link } href = '#about' onClick = { () => setExpand(false) }>About</a></li>
27 |                     <li><a className = { classes.Link } href = '#services' onClick = { () => setExpand(false) }>Services</a></li>
28 |                     <li><a className = { classes.Logo } href = '#' onClick = { () => setExpand(false) }> </a></li>
29 |                     <li><a className = { classes.Link } href = '#gallery' onClick = { () => setExpand(false) }>Gallery</a></li>
30 |                     <li><a className = { classes.Link } href = '#testimonials' onClick = { () => setExpand(false) }>Testimonials</a></li>
31 |                     <li><a className = { classes.Link } href = '#contact' onClick = { () => setExpand(false) }>Contact</a></li>
32 |                 </ul>
33 | 
34 |                 <button className = { classes.Menu } onClick = { (event) => expandMenuHandler(event) } />
35 |             </div>            
36 |         </nav>
37 |     );
38 | }
39 | 
40 | export default Navigation;
41 | 


--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.module.scss:
--------------------------------------------------------------------------------
  1 | $grey: #444444;
  2 | 
  3 | .Navigation {
  4 |     width: 100%;
  5 |     height: 4em;
  6 | 
  7 |     margin: auto;
  8 | 
  9 |     background-color: white;
 10 |     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
 11 | 
 12 |     position: fixed;
 13 |     top: 0;
 14 |     left: 0;
 15 |     right: 0;
 16 |     z-index: 500;
 17 | 
 18 |     .Container {
 19 |         width: 90%;
 20 |         height: 100%;
 21 | 
 22 |         margin: auto;
 23 |         
 24 |         display: flex;
 25 |         justify-content: space-between;
 26 |         align-items: center;
 27 | 
 28 |         .Links {
 29 |             width: 100%;
 30 |             height: 100%;
 31 |     
 32 |             display: flex;
 33 |             justify-content: space-between;
 34 |     
 35 |             .Link {
 36 |                 display: none;
 37 |             }
 38 |     
 39 |             .Logo {
 40 |                 width: 5em;
 41 |                 height: 4em;
 42 |     
 43 |                 display: block;
 44 |     
 45 |                 background-image: url('../../assets/icons/logo.png');
 46 |                 background-position: center;
 47 |                 background-size: contain;
 48 |                 background-repeat: no-repeat;
 49 |             }
 50 |         }
 51 |         
 52 |         .Menu, .Hide {
 53 |             width: 3em;
 54 |             height: 3em;
 55 |         }
 56 | 
 57 |         .Menu {    
 58 |             background: none;
 59 |             background-image: url('../../assets/icons/menu.png');
 60 |             background-size: contain;
 61 |             background-position: center;
 62 |             background-repeat: no-repeat;
 63 |             border: none;
 64 |             transform: scale(0.7);
 65 |     
 66 |             outline: none;
 67 |         }
 68 |     }
 69 | }
 70 | 
 71 | .Expand {
 72 |     background-color: white;
 73 |     z-index: 1000;
 74 | 
 75 |     .Container {
 76 | 
 77 |         .Hide, .Menu {
 78 |             z-index: 300;
 79 |         }
 80 |     
 81 |         .Menu {
 82 |             background: none;
 83 |             background-image: url('../../assets/icons/close.png');
 84 |             background-size: contain;
 85 |             background-position: center;
 86 |             background-repeat: no-repeat;
 87 |             border: none;
 88 |             transform: scale(0.5);
 89 |     
 90 |             outline: none;
 91 |         }
 92 |         
 93 |         .Links {
 94 |             position: fixed;
 95 |             top: 0;
 96 |             left: 0;
 97 |     
 98 |             z-index: 200;
 99 |     
100 |             width: 100vw;
101 |             height: 100vh;
102 |             
103 |             background-color: white;
104 |             box-shadow: 0 0 7px rgba(0, 0, 0, 0);
105 |     
106 |             display: flex;
107 |             justify-content: center;
108 |             align-items: center;
109 |             flex-flow: column;
110 |     
111 |             overflow: hidden;
112 |     
113 |             animation: fadeIn 0.3s 0s ease forwards;
114 |     
115 |             .Link {     
116 |                 display: flex;
117 |                 align-items: center;
118 |                 justify-content: center;
119 |     
120 |                 flex-flow: column;
121 |         
122 |                 margin: 0.5em 0;
123 |                 padding: 0.35em 0;
124 | 
125 |                 font-size: 1.2em;
126 |                 font-family: 'Poppins', sans-serif;
127 |                 
128 |                 text-decoration: none;
129 |                 
130 |                 color: $grey;
131 | 
132 |                 outline: none;
133 |             }
134 | 
135 |             .Logo {
136 |                 transform: scale(1.35);
137 |                 margin: 0.75em 0;
138 |             }
139 |         }
140 |     }
141 | }
142 | 
143 | @keyframes fadeIn {
144 |     from {
145 |         opacity: 0;
146 |         height: 50vh;
147 |     }
148 | 
149 |     to {
150 |         opacity: 1;
151 |         height: 100vh;
152 |     }            
153 | }
154 | 
155 | @media(min-width: 720px) {
156 |     .Navigation {
157 |         height: 5em;
158 | 
159 |         .Container {
160 |             .Links {
161 |                 .Logo {
162 |                     width: 6em;
163 |                     height: 5em;  
164 |                 }
165 |             }
166 |         }
167 |     }    
168 |     
169 |     .Expand {
170 |         .Container {
171 |             .Links {
172 |                 .Link {
173 |                     font-size: 1.5em; 
174 |                 }
175 | 
176 |                 .Logo {
177 |                     width: 7em;
178 |                     height: 7em;
179 |                 }
180 |             }
181 |         }
182 |     }
183 | }
184 | 
185 | @media(min-width: 1025px) {
186 |     .Navigation {
187 |         .Container {
188 |             width: 75%;
189 | 
190 |             .Links {
191 |                 display: flex;
192 |                 align-items: center;
193 | 
194 |                 .Link {
195 |                     display: block;
196 | 
197 |                     font-size: 0.9em;
198 |                     font-family: 'Poppins', sans-serif;
199 |                     text-decoration: none;
200 |                     color: $grey;
201 | 
202 |                     &:hover {
203 |                         color: black;
204 |                     }
205 |                 }
206 | 
207 |                 .Logo {
208 |                     margin: 0 2em;
209 |                 }
210 |             }
211 | 
212 |             .Menu {
213 |                 display: none;
214 |             }
215 |         }
216 |     }
217 | }
218 | 


--------------------------------------------------------------------------------
/src/components/Services/Services.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { STRIPE_PUBLISHABLE_KEY } from '../../config/constants';
  3 | 
  4 | import Booking from '../../containers/Booking/Booking';
  5 | 
  6 | import classes from './Services.module.scss';
  7 | import { services, categories, types } from './availableServices';
  8 | 
  9 | import { Elements } from '@stripe/react-stripe-js';
 10 | import { loadStripe } from '@stripe/stripe-js';
 11 | 
 12 | import expand from '../../assets/icons/scroll.png';
 13 | 
 14 | const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);
 15 | 
 16 | const Services = () => {
 17 |     const [activeCategory, setActiveCategory] = useState(1);
 18 |     const [activeType, setActiveType] = useState(window.screen.width >= 720 ? 1 : null);
 19 |     const [activeServices, setActiveServices] = useState([]);
 20 |     const [booking, setBooking] = useState(false);
 21 |     
 22 |     const switchCategory = (category) => {
 23 |         setActiveType(window.screen.width >= 720 ? categories[category - 1].types[0] : null);
 24 |         setActiveCategory(category);
 25 |     }
 26 | 
 27 |     const switchType = (type) => {
 28 |         if(activeType === type && window.screen.width < 720) {
 29 |             setActiveType(null);
 30 |         } else {
 31 |             setActiveType(type);
 32 |         }
 33 |     }
 34 | 
 35 |     const switchService = (service) => {
 36 |         if(activeServices.includes(service)) {
 37 |             let servicesId = activeServices.filter(serviceId => serviceId !== service);
 38 | 
 39 |             setActiveServices(servicesId);
 40 |         } else {
 41 |             setActiveServices([ ...activeServices, service ]);
 42 |         }
 43 |     }
 44 | 
 45 |     const switchBooking = () => {
 46 |         document.body.style.overflow = !booking ? 'hidden' : 'visible';
 47 |         setBooking(!booking);
 48 |     }
 49 |     
 50 |     const selectedServices = activeType != null && <div className = { classes.Services }>
 51 |         { types[activeType - 1].services.map(service => (
 52 |             <div className = { [classes.Service, activeServices.includes(service) ? classes.ActiveService : ''].join(' ') } onClick = { () => switchService(service) } key = { service }>
 53 |                     <div className = { classes.Line }>
 54 |                         <p className = { classes.Name }>{ services[service - 1].name }</p>
 55 |                         <p className = { classes.Price }>now £{ ('' + services[service - 1].price).includes('.') ? services[service - 1].price.toFixed(2) : services[service - 1].price }</p>
 56 |                     </div>
 57 | 
 58 |                     <div className = { classes.Line }>
 59 |                         <p className = { classes.Time }>{ services[service - 1].duration >= 60 && (~~(services[service - 1].duration / 60) + ' hrs') } { services[service - 1].duration % 60 !== 0 ? services[service - 1].duration % 60 + ' mins' : '' }</p>
 60 |                         <p className = { classes.Discount }>save up to 20%</p>
 61 |                     </div>
 62 |                 </div>
 63 |             )) }
 64 | 
 65 |         <a className = { [classes.Book, activeServices.length !== 0 ? classes.ActiveBook : ''].join(' ') } onClick = { () => switchBooking(!booking) }>Book now</a>
 66 |     </div>
 67 |     
 68 |     return (
 69 |         <Elements stripe = { stripePromise }>
 70 |             <div className = { classes.Services }>
 71 |                 { booking && <Booking services = { activeServices } closePanel = { () => setBooking(false) } /> }
 72 | 
 73 |                 <div className = { classes.Categories }>
 74 |                     { categories.map(category => (
 75 |                         <div className = { [classes.Category, activeCategory === category.id ? classes.Active : ''].join(' ') } onClick = { () => switchCategory(category.id) } key = { category.id }>
 76 |                             <img src = { category.icon } alt = { category.name } />
 77 |                             <p>{ category.name }</p>
 78 |                         </div>
 79 |                     )) }
 80 |                 </div>
 81 | 
 82 |                 <div className = { classes.Types }>
 83 |                     { categories[activeCategory - 1].types.map(type => (
 84 |                             <React.Fragment key = { types[type - 1].name }>
 85 |                                 <div className = { [classes.Type, activeType === types[type - 1].id ? classes.Active : ''].join(' ') } onClick = { () => switchType(types[type - 1].id) }>
 86 |                                     <p className = { classes.Name }>{ types[type - 1].name }</p>
 87 |                                     { types[type - 1].services.some(e => activeServices.includes(e)) ? <div className = { classes.Contain } /> : '' }
 88 |                                     <img className = { [classes.Expand, activeType === types[type - 1].id ? classes.ExpandOpen : ''].join(' ') } src = { expand } alt = 'Expand' />
 89 |                                 </div>
 90 | 
 91 |                                 { activeType === types[type - 1].id && window.screen.width < 720 ? selectedServices : null }
 92 |                             </React.Fragment>
 93 |                         ))
 94 |                     }
 95 |                 </div>
 96 | 
 97 |                 { window.screen.width >= 720 && selectedServices }
 98 |             </div>
 99 |         </Elements>
100 |     );
101 | }
102 | 
103 | export default Services;
104 | 


--------------------------------------------------------------------------------
/src/components/Services/Services.module.scss:
--------------------------------------------------------------------------------
  1 | $grey: #444444;
  2 | $eunry2: #6D0E2A;
  3 | $eunry3: #A28282;
  4 | $lightGrey2: #CFCFCF;
  5 | 
  6 | .Services {
  7 |     width: 100%;
  8 | 
  9 |     .Categories {
 10 |         width: 96vw;
 11 | 
 12 |         margin: 0 auto;
 13 | 
 14 |         display: flex;
 15 |         justify-content: space-between;
 16 |         flex-wrap: wrap;
 17 | 
 18 |         .Category {
 19 |             min-width: 30vw;
 20 |             min-height: 30vw;
 21 | 
 22 |             margin-bottom: 2vw;
 23 | 
 24 |             flex: 0 1;
 25 | 
 26 |             background-color: white;
 27 |             box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
 28 | 
 29 |             display: flex;
 30 |             justify-content: center;
 31 |             align-items: center;
 32 |             flex-flow: column;
 33 | 
 34 |             cursor: pointer;
 35 | 
 36 |             img {
 37 |                 width: 40%;
 38 |                 height: 40%;
 39 | 
 40 |                 object-fit: cover;
 41 |                 background-position: center;
 42 |                 background-repeat: no-repeat;
 43 | 
 44 |                 border-radius: 50%;
 45 |             }
 46 | 
 47 |             p {
 48 |                 margin-top: 1.25em;
 49 | 
 50 |                 font-family: 'Poppins', sans-serif;
 51 |                 font-size: 80%;
 52 | 
 53 |                 text-transform: uppercase;
 54 | 
 55 |                 color: $eunry2;
 56 |             }
 57 |         }
 58 |         
 59 |         .Active {
 60 |             border: 2px solid $eunry3;
 61 |             
 62 |             min-width: calc(30vw - 4px);
 63 |             min-height: calc(30vw - 4px);
 64 |         }
 65 |     }
 66 | 
 67 |     .Types {
 68 |         width: 96vw;
 69 | 
 70 |         margin: 0 auto;
 71 |         padding: 0.25em 0;
 72 | 
 73 |         background-color: white;
 74 |         box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
 75 | 
 76 |         transition: all 0.3s;
 77 | 
 78 |         .Type {
 79 |             width: 100%;
 80 |             height: 2.75em;
 81 | 
 82 |             background-color: white;
 83 | 
 84 |             display: flex;
 85 |             justify-content: space-between;
 86 |             align-items: center;
 87 | 
 88 |             position: relative;
 89 | 
 90 |             cursor: pointer;
 91 | 
 92 |             transition: all 0.3s;
 93 |             
 94 |             .Name {
 95 |                 font-family: 'Montserrat', sans-serif;
 96 |                 font-size: 0.9em;
 97 | 
 98 |                 color: $grey;
 99 |                 margin-left: 1em;
100 |                 
101 |                 transition: all 0.3s;
102 |             }
103 | 
104 |             .Contain {
105 |                 width: 1.25em;
106 |                 height: 1.25em;
107 | 
108 |                 position: absolute;
109 |                 right: 3em;
110 |                 top: calc(50% - 1.25em / 2);
111 | 
112 |                 background-image: url('../../assets/icons/tickbox.png');
113 |                 background-size: contain;
114 |                 background-repeat: no-repeat;
115 |             }
116 | 
117 |             .Expand {
118 |                 height: 1em;
119 |                 width: 1em;
120 | 
121 |                 margin-right: 1em;
122 | 
123 |                 object-fit: contain;
124 |                 background-position: center;
125 |                 background-repeat: no-repeat;
126 | 
127 |                 transition: all 0.3s;
128 |             }
129 | 
130 |             .ExpandOpen {
131 |                 transform: rotateZ(180deg);
132 |             }
133 |         }
134 | 
135 |         .Active {
136 |             width: calc(100% - 2px);
137 |             border-left: 2px solid $eunry3;
138 | 
139 |             .Name {
140 |                 margin-left: 1.5em;
141 |                 color: $eunry3;
142 |             }
143 |         }
144 |     }
145 | 
146 |     .Services {
147 |         width: 96vw;
148 | 
149 |         margin: 0 auto;
150 | 
151 |         box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
152 |         background-color: #F6F6F6;
153 | 
154 |         padding: 0.5em 0;
155 | 
156 |         display: flex;
157 |         justify-content: center;
158 |         align-items: center;
159 |         flex-flow: column;
160 | 
161 |         .Service {
162 |             width: 95%;
163 | 
164 |             margin: 0 auto;
165 |             padding: 0.5em 0;
166 | 
167 |             display: flex;
168 |             flex-flow: column;
169 | 
170 |             transition: all 0.3s;
171 |             
172 |             cursor: pointer;
173 | 
174 |             .Line {
175 |                 width: 100%;
176 | 
177 |                 display: flex;
178 |                 justify-content: space-between;
179 |                 align-items: center;
180 |                 
181 |                 .Name, .Price {
182 |                     font-size: 0.8em;    
183 |                     margin-bottom: 0.35em;
184 |                     color: $grey;
185 |                 }
186 | 
187 |                 .Name {
188 |                     font-family: 'Montserrat', sans-serif;
189 |                     text-align: left;
190 |                 }
191 | 
192 |                 .Price {
193 |                     font-family: 'Poppins', sans-serif;
194 |                     text-align: right;
195 |                 }
196 | 
197 |                 .Time {
198 |                     font-family: 'Poppins', sans-serif;
199 |                     font-size: 0.65em;
200 |                     text-align: left;
201 |                     color: $lightGrey2;
202 |                 }
203 | 
204 |                 .Discount {
205 |                     font-family: 'Poppins', sans-serif;
206 |                     font-size: 0.65em;
207 |                     text-align: right;
208 |                     color: $eunry3;
209 |                 }
210 |             }
211 |         }
212 | 
213 |         .ActiveService {
214 |             width: calc(95% - 1em - 2px);
215 |             padding-left: 1em;
216 |             border-left: 2px solid $eunry3;
217 | 
218 |             .Line {
219 |                 .Name {
220 |                     color: $eunry3;
221 |                 }
222 |             }
223 |         }
224 | 
225 |         .Book {
226 |             width: 95%;
227 |             height: 3em;
228 | 
229 |             margin: 0.5em auto 0;
230 | 
231 |             background-color: #d3d3d3;
232 | 
233 |             font-family: 'Poppins', sans-serif;
234 |             font-size: 0.8em;
235 | 
236 |             text-align: center;
237 |             text-decoration: none;
238 | 
239 |             line-height: 3em;
240 |             color: white;
241 | 
242 |             cursor: pointer;
243 |             pointer-events: none;
244 | 
245 |             transition: background-color 0.3s;
246 |         }
247 | 
248 |         .ActiveBook {
249 |             background-color: $eunry3;
250 |             pointer-events: auto;
251 | 
252 |             &:hover {
253 |                 background-color: darken($eunry3, 10);
254 |             }
255 |         }
256 |     }
257 | }
258 | 
259 | @media (min-width: 720px) {
260 |     .Services {
261 |         width: 90vw;
262 |         margin: 0 auto;
263 |         
264 |         display: flex;
265 |         justify-content: space-between;
266 |         flex-wrap: wrap;
267 | 
268 |         .Categories {
269 |             .Category {
270 |                 min-width: 14vw;
271 |                 min-height: 14vw;
272 | 
273 |                 transition: all 0.3s;
274 | 
275 |                 &:hover {
276 |                     background-color: #F6F6F6;
277 |                 }
278 |             }
279 | 
280 |             .Active {
281 |                 min-width: calc(14vw - 4px);
282 |                 min-height: calc(14vw - 4px);
283 | 
284 |                 &:hover {
285 |                     background-color: white;
286 |                 }
287 |             }
288 |         }
289 | 
290 |         .Types {
291 |             width: 40%; 
292 |             margin: 0;
293 | 
294 |             .Type {                   
295 |                 &:hover {
296 |                     .Name {
297 |                         margin-left: 1.5em;
298 |                     }
299 |                 }
300 | 
301 |                 .Contain {
302 |                     right: 1em;
303 |                 }
304 | 
305 |                 img {
306 |                     display: none;
307 |                 }
308 |             }
309 | 
310 |             .Active {
311 |                 &:hover {
312 |                     .Name {
313 |                         margin-left: 1.25em;
314 |                     }
315 |                 }
316 | 
317 |                 .Name {
318 |                     margin-left: 1.25em;
319 |                 }
320 |             }
321 |         }
322 | 
323 |         .Services {
324 |             width: 57.5%;
325 | 
326 |             margin: 0;
327 | 
328 |             justify-content: flex-start;
329 | 
330 |             background-color: white;
331 |             
332 |             font-size: 1.2em; 
333 | 
334 |             .Service {
335 |                 width: 90%;
336 |                 margin: 0;
337 | 
338 |                 &:hover {
339 |                     margin-left: 1em;
340 |                     width: calc(90% - 1em);
341 |                 }
342 |             }
343 | 
344 |             .ActiveService {
345 |                 width: calc(90% - 1em - 2px);
346 | 
347 |                 &:hover {
348 |                     margin-left: 0;
349 |                     width: calc(90% - 1em - 2px);
350 |                 }
351 |             }
352 | 
353 |             .Book {
354 |                 width: 40%;
355 |                 height: 2.9em;
356 | 
357 |                 margin: 0.75em 0 0.25em;
358 |                 
359 |                 font-size: 0.7em;
360 |                 line-height: 2.9em;
361 |             }
362 |         }
363 |     }
364 | }
365 | 
366 | @media (min-width: 1025px) {
367 |     .Services {
368 |         width: 80vw;
369 | 
370 |         .Categories {
371 |             .Category {
372 |                 min-width: 11.5vw;
373 |                 min-height: 11.5vw;
374 | 
375 |                 p {
376 |                     margin-top: 2.5em;
377 |                     font-size: 90%;
378 |                 }
379 |             }
380 |             
381 |             .Active {
382 |                 min-width: calc(11.5vw - 4px);
383 |                 min-height: calc(11.5vw - 4px);
384 |             }
385 |         }
386 | 
387 |         .Types {
388 |             .Type {
389 |                 font-size: 1.05em;
390 |             }
391 |         }
392 | 
393 |         .Services {
394 |             padding: 0.75em 0;
395 | 
396 |             .Service {
397 |                 font-size: 1.05em;
398 |             }
399 |         }
400 |     }
401 | }
402 | 


--------------------------------------------------------------------------------
/src/components/Services/availableServices.js:
--------------------------------------------------------------------------------
 1 | import all from '../../assets/icons/all.png';
 2 | import nails from '../../assets/icons/nails.png';
 3 | import waxing from '../../assets/icons/waxing.png';
 4 | import makeup from '../../assets/icons/makeup.png';
 5 | import massage from '../../assets/icons/massage.png';
 6 | import body from '../../assets/icons/body.png';
 7 | 
 8 | export const services = [
 9 |     { id: 1, name: "Shellac Manicure & Pedicure", price: 52, duration: 135 },
10 |     { id: 2, name: "Shellac Manicure", price: 45, duration: 20 },
11 |     { id: 3, name: "Shellac Pedicure", price: 32, duration: 75 },
12 |     { id: 4, name: "Shellac Removal", price: 8, duration: 20 },
13 |     { id: 5, name: "Spa Manicure & Pedicure", price: 60, duration: 150 },
14 |     { id: 6, name: "Spa Manicure", price: 24, duration: 65 },
15 |     { id: 7, name: "Spa Pedicure", price: 36, duration: 75 },
16 |     { id: 8, name: "Manicure & Pedicure", price: 41.60, duration: 75 },
17 |     { id: 9, name: "Manicure", price: 17.60, duration: 45 },
18 |     { id: 10, name: "Pedicure", price: 24, duration: 60 },
19 |     { id: 11, name: "File & Polish", price: 10.40, duration: 20 },
20 |     { id: 12, name: "Ladies' Waxing - Hollywood (Strip Wax)", price: 21, duration: 30 },
21 |     { id: 13, name: "Ladies' Waxing - Brazilian (Strip Wax)", price: 17.50, duration: 30 },
22 |     { id: 14, name: "Ladies' Waxing - Bikini (Strip Wax)", price: 7, duration: 15 },
23 |     { id: 15, name: "Ladies' Waxing - Leg (Strip Wax)", price: 7, duration: 30 },
24 |     { id: 16, name: "Ladies' Waxing - Arm & Underarm (Strip Wax)", price: 7, duration: 10 },
25 |     { id: 17, name: "Ladies' Waxing - Face (Strip Wax)", price: 3.50, duration: 10 },
26 |     { id: 18, name: "Ladies' Waxing - Upper Body (Strip Wax)", price: 7, duration: 15 },
27 |     { id: 19, name: "Ladies' Waxing - Full Body (Strip Wax)", price: 49, duration: 120 },
28 |     { id: 20, name: "Ladies' Waxing - Hollywood (Hot Wax)", price: 24.50, duration: 30 },
29 |     { id: 21, name: "Ladies' Waxing - Brazilian (Hot Wax)", price: 24, duration: 30 },
30 |     { id: 22, name: "Ladies' Waxing - Bikini (Hot Wax)", price: 10.50, duration: 15 },
31 |     { id: 23, name: "Ladies' Waxing - Underarm (Hot Wax)", price: 10.50, duration: 10 },
32 |     { id: 24, name: "Ladies' Waxing - Arm (Hot Wax)", price: 14, duration: 15 },
33 |     { id: 25, name: "Ladies' Waxing - Face (Hot Wax)", price: 4.90, duration: 10 },
34 |     { id: 26, name: "Men's Waxing - Back (Strip Wax)", price: 14, duration: 30 },
35 |     { id: 27, name: "Men's Waxing - Chest (Strip Wax)", price: 10.50, duration: 20 },
36 |     { id: 28, name: "Men's Waxing - Stomach (Strip Wax)", price: 10.50, duration: 20 },
37 |     { id: 29, name: "Men's Waxing - Eyebrows", price: 7, duration: 15 },
38 |     { id: 30, name: "Eyebrow & Eyelash Tinting", price: 7, duration: 10 },
39 |     { id: 31, name: "Eyebrow Waxing", price: 4.90, duration: 10 },
40 |     { id: 32, name: "Facial - Caudalie Prescriptive Customised", price: 42, duration: 60 },
41 |     { id: 33, name: "Facial - Caudalie Anti-Ageing, Firming & Perfection", price: 49, duration: 75 },
42 |     { id: 34, name: "Facial - Caudalie Express", price: 21, duration: 30 },
43 |     { id: 35, name: "Deep Tissue Massage", price: 48, duration: 60 },
44 |     { id: 36, name: "Swedish Massage", price: 40, duration: 60 },
45 |     { id: 37, name: "Aromatherapy Massage", price: 44, duration: 60 },
46 |     { id: 38, name: "Back, Neck & Shoulders Massage", price: 20, duration: 30 },
47 |     { id: 39, name: "Back Massage", price: 24, duration: 30 },
48 |     { id: 40, name: "Reflexology", price: 20, duration: 30 },
49 |     { id: 41, name: "Full Body Scrub", price: 21, duration: 45 },
50 |     { id: 42, name: "Nourishing Body Wrap", price: 28, duration: 60 },
51 |     { id: 43, name: "Cellulite Massage Treatment", price: 28, duration: 60 }
52 | ];
53 | 
54 | export const types = [
55 |     { id: 1, name: "Manicures & Pedicures", services: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] },
56 |     { id: 2, name: "Ladies' Waxing - Strip Wax", services: [12, 13, 14, 15, 16, 17, 18, 19] },
57 |     { id: 3, name: "Ladies' Waxing - Lycon Hot Wax", services: [20, 21, 22, 23, 24, 25] },
58 |     { id: 4, name: "Men's Waxing", services: [26, 27, 28, 29] },
59 |     { id: 5, name: "Eyebrows & Eyelashes", services: [30, 31] },
60 |     { id: 6, name: "Facials - Caudalie", services: [32, 33, 34] },
61 |     { id: 7, name: "Massage", services: [35, 36, 37, 38, 39, 40] },
62 |     { id: 8, name: "Body Spa Treatments", services: [41, 42] },
63 |     { id: 9, name: "Weight Loss & Cellulite Treatments", services: [43] }
64 | ];
65 | 
66 | export const categories = [
67 |     { id: 1, name: "All", types: [1, 2, 3, 4, 5, 6, 7, 8, 9], icon: all },
68 |     { id: 2, name: "Nails", types: [1], icon: nails  },
69 |     { id: 3, name: "Hair Removal", types: [2, 3, 4], icon: waxing },
70 |     { id: 4, name: "Face", types: [5, 6], icon: makeup },
71 |     { id: 5, name: "Massage", types: [7], icon: massage },
72 |     { id: 6, name: "Body", types: [8, 9], icon: body },
73 | ];
74 | 


--------------------------------------------------------------------------------
/src/components/Summary/Summary.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import classes from './Summary.module.scss';
 4 | 
 5 | const summary = () => {
 6 |     return (
 7 |     	<div className = { classes.Summary }>
 8 |     		<div className = { classes.Block }>
 9 |                 <h1 className = { classes.Name }>About us</h1>
10 |                 <div className = { classes.Line } />
11 |                 <p className = { classes.Content }>Vestibulum ut mauris euismod, tristique augue sed, consequat metus. Duis fermentum massa ac metus suscipit tincidunt. Praesent felis felis, pretium sit amet vehicula at, posuere at mauris.</p>
12 |             </div>
13 |             
14 |     		<div className = { classes.Block }>
15 |                 <h1 className = { classes.Name }>Open hours</h1>
16 |                 <div className = { classes.Line } />
17 |                 <p className = { classes.Content }>
18 |                     <span>Monday: </span>
19 |                     10:00 AM - 6:30 PM
20 |                     <br />                    
21 |                     <span>Tuesday: </span>
22 |                     10:00 AM - 6:30 PM
23 |                     <br />                    
24 |                     <span>Wednesday: </span>
25 |                     10:00 AM - 8:00 PM
26 |                     <br />                    
27 |                     <span>Thursday: </span>
28 |                     10:00 AM - 8:00 PM
29 |                     <br />                    
30 |                     <span>Friday: </span>
31 |                     10:00 AM - 6:30 PM
32 |                     <br />                    
33 |                     <span>Saturday: </span>
34 |                     10:00 AM - 6:00 PM
35 |                     <br />                    
36 |                     <span>Sunday: </span>
37 |                     11:00 AM - 5:00 PM
38 |                     <br />
39 |                 </p>
40 |             </div>
41 |             
42 |     		<div className = { classes.Block }>
43 |                 <h1 className = { classes.Name }>Contacts</h1>
44 |                 <div className = { classes.Line } />
45 |                 <p className = { classes.Content }>
46 |                     <span>Address: </span>
47 |                     43 High Street, Ealing,<br />London, W5 5DB
48 |                     <br />
49 |                     <span>Phone: </span>
50 |                     +44 7342 216193
51 |                     <br />
52 |                     <span>Email: </span>
53 |                     letscomit@gmail.com
54 |                     <br />
55 |                 </p>
56 |             </div>
57 |     	</div>
58 |     );
59 | }
60 | 
61 | export default summary;
62 | 


--------------------------------------------------------------------------------
/src/components/Summary/Summary.module.scss:
--------------------------------------------------------------------------------
 1 | $eunry3: #A28282;
 2 | $dark1: #444444;
 3 | $dark2: #616161;
 4 | 
 5 | .Summary {
 6 |     width: 100%;
 7 | 
 8 |     display: flex;
 9 |     justify-content: center;
10 |     align-items: center;
11 |     flex-flow: column;
12 | 
13 |     padding: 2em 0;
14 | 
15 |     .Block {
16 |         width: 85%;
17 | 
18 |         display: flex;
19 |         justify-content: center;
20 |         align-items: center;
21 |         flex-flow: column;
22 | 
23 |         text-align: center;
24 | 
25 |         &:nth-child(2) {
26 |             margin: 2em 0;
27 |         }
28 | 
29 |         .Name {
30 |             font-family: 'Poppins', sans-serif;
31 |             font-size: 1.5em;
32 |             
33 |             text-transform: uppercase;
34 | 
35 |             color: $dark1;
36 |         }
37 | 
38 |         .Line {
39 |             width: 4em;
40 |             height: 2px;
41 | 
42 |             background-color: $eunry3;
43 | 
44 |             margin: 1em 0 1.35em;
45 |         }
46 | 
47 |         .Content {
48 |             font-family: 'Poppins', sans-serif;
49 |             font-size: 1em;
50 |             font-weight: 300;
51 | 
52 |             line-height: 1.5em;
53 | 
54 |             color: $dark2;
55 | 
56 |             span {
57 |                 font-weight: 400;
58 |             }
59 |         }
60 |     }
61 | }
62 | 
63 | @media (min-width: 720px) {
64 |     .Summary {
65 |         flex-flow: row;
66 |         align-items: flex-start;
67 | 
68 |         .Block {
69 |             width: 28%;
70 |             margin: 0 1em;
71 | 
72 |             font-size: 0.8em;
73 | 
74 |             &:nth-child(2) {
75 |                 margin: 0 1em;
76 |             }
77 |         }
78 |     }
79 | }
80 | 
81 | @media (min-width: 1025px) {
82 |     .Summary {
83 |         flex-flow: row;
84 |         align-items: flex-start;
85 | 
86 |         padding: 3em 0;
87 | 
88 |         .Block {
89 |             width: 20%;
90 |             margin: 0 7vw;
91 | 
92 |             font-size: 0.9em;
93 |         }
94 |     }
95 | }
96 | 
97 | 


--------------------------------------------------------------------------------
/src/components/Testimonials/Testimonials.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import classes from './Testimonials.module.scss';
 4 | 
 5 | import arrow from '../../assets/icons/scroll.png';
 6 | import star from '../../assets/icons/star.png';
 7 | 
 8 | const Testimonials = () => {
 9 |     const reviews = [
10 |         { name: 'Karen', text: 'Amazing! Very professional, environment was calm, clean and soothing to be in. The massage was very relaxing, and my face was feeling extremely smooth afterwards.', stars: 5 },
11 |         { name: 'Ashton', text: 'Janet was very kind, welcoming, carried out my treatment so efficiently and results were great. She always maintained my dignity making sure I was covered. She is clearly very experienced. Her studio is beautiful, very clean and welcoming, relaxing and comfortable. Thank you', stars: 5 },
12 |         { name: 'Anonymous', text: 'Great experience with Janet, she is very professional and experienced. Also, I appreciated Janet being very patient with me as she helped me choosing the colour for my shellac.', stars: 5 }
13 |     ];
14 | 
15 |     const [active, setActive] = useState(1);
16 | 
17 |     return (
18 |     	<div className = { classes.Testimonials }>
19 |             <div className = { classes.Wrapper }>
20 |                 <div className = { classes.Arrow } onClick = { () => setActive(active + 1 <= reviews.length - 1 ? active + 1 : 0) }><img src = { arrow } alt = 'Beauty Salon Ealing Arrow' /></div>
21 |                     { reviews.map((review, i) => (
22 |                         <div className = { [classes.Review, active === i ? classes.Active : ''].join(' ') } onClick = { () => setActive(i) } key = { i }>
23 |                             <div className = { classes.Container }>
24 |                                 <h2 className = { classes.Name }>{ review.name }</h2>
25 |                                 <p className = { classes.Text }>{ review.text }</p>
26 |                                 <div className = { classes.Stars }>
27 |                                     { [...new Array(review.stars)].map((_, index) => 
28 |                                         <img className = { classes.Star } src = { star } alt = 'Beauty Salon Ealing Review' key = { index } />
29 |                                     ) }
30 |                                 </div>
31 |                             </div>
32 |                         </div>
33 |                     )) }
34 |                 <div className = { classes.Arrow } onClick = { () => setActive(active - 1 >= 0 ? active - 1 : reviews.length - 1) }><img src = { arrow } alt = 'Beauty Salon Ealing Arrow' /></div>
35 |             </div>
36 |     	</div>
37 |     );
38 | }
39 | 
40 | export default Testimonials;
41 | 


--------------------------------------------------------------------------------
/src/components/Testimonials/Testimonials.module.scss:
--------------------------------------------------------------------------------
  1 | $dark1: #444444;
  2 | 
  3 | .Testimonials {
  4 |     width: 100%;
  5 | 
  6 |     .Wrapper {
  7 |         width: 96vw;
  8 |         margin: 0 auto;
  9 | 
 10 |         display: flex;
 11 |         justify-content: space-between;
 12 |         align-items: center;
 13 | 
 14 |         .Arrow {
 15 |             width: 2.25em;
 16 |             height: 2.25em;
 17 | 
 18 |             background-color: white;
 19 |             box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
 20 | 
 21 |             display: flex;
 22 |             justify-content: center;
 23 |             align-items: center;
 24 | 
 25 |             cursor: pointer;
 26 | 
 27 |             &:first-child {
 28 |                 transform: rotateZ(90deg);
 29 |             }
 30 |             
 31 |             &:last-child {
 32 |                 transform: rotateZ(-90deg);
 33 |             }
 34 | 
 35 |             img {
 36 |                 width: 35%;
 37 |                 height: 35%;
 38 | 
 39 |                 object-fit: contain;
 40 |                 background-position: center;
 41 |                 background-repeat: no-repeat;
 42 |             }
 43 |         }
 44 | 
 45 |         .Review {
 46 |             width: 75%;
 47 | 
 48 |             padding: 2em 0;
 49 | 
 50 |             background-color: white;
 51 |             box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
 52 | 
 53 |             display: none;
 54 |             justify-content: center;
 55 |             align-items: center;
 56 | 
 57 |             cursor: pointer;
 58 | 
 59 |             transition: all 0.3s;
 60 | 
 61 |             .Container {
 62 |                 width: 90%;
 63 |                 display: flex;
 64 |                 align-items: center;
 65 |                 flex-flow: column;
 66 |                 
 67 |                 text-align: center;
 68 | 
 69 |                 .Name {
 70 |                     font-family: 'Montserrat', sans-serif;
 71 |                     font-size: 1.25em;
 72 |                     color: $dark1;
 73 |                 }
 74 | 
 75 |                 .Text {
 76 |                     margin: 1em 0;
 77 | 
 78 |                     font-family: 'Poppins', sans-serif;
 79 |                     font-size: 0.8em;
 80 |                     font-weight: 300;
 81 | 
 82 |                     line-height: 1.5em;
 83 |                     color: $dark1;
 84 |                 }
 85 | 
 86 |                 .Stars {
 87 |                     display: flex;
 88 | 
 89 |                     .Star {
 90 |                         width: 1.5em;
 91 |                         height: 1.5em;
 92 | 
 93 |                         margin: 0 0.2em;
 94 | 
 95 |                         object-fit: contain;
 96 |                         background-position: center;
 97 |                         background-repeat: no-repeat;
 98 |                     }
 99 |                 }
100 |             }
101 |         }
102 | 
103 |         .Active {
104 |             display: flex;
105 |         }
106 |     }
107 | }
108 | 
109 | @media (min-width: 720px) {
110 |     .Testimonials {
111 |         .Wrapper {
112 |             width: 75vw; 
113 |             
114 |             .Arrow {
115 |                 width: 2.75em;
116 |                 height: 2.75em;
117 |             }
118 | 
119 |             .Review {
120 |                 width: 70%;
121 |                 
122 |                 .Container {
123 |                     font-size: 1.35em;
124 | 
125 |                     .Text {
126 |                         width: 90%;
127 |                         line-height: 1.5em;
128 |                         margin: 1.5em 0;
129 |                     }
130 | 
131 |                     .Stars {
132 |                         font-size: 0.7em;
133 |                     }
134 |                 }
135 |             }
136 |         }
137 |     }
138 | }
139 | 
140 | @media (min-width: 1025px) {
141 |     .Testimonials {
142 |         .Wrapper {
143 |             justify-content: center;
144 |             padding: 2em 0;
145 | 
146 |             .Arrow {
147 |                 display: none;
148 |             }
149 | 
150 |             .Review {
151 |                 width: 25%;
152 |                 min-width: 22vw;
153 |                 min-height: 35vh;
154 |                 display: flex;
155 | 
156 |                 &:hover {
157 |                     transform: scale(1.05);
158 |                 }
159 | 
160 |                 &:nth-child(2n) {
161 |                     margin: 0 3.5em;
162 |                 }
163 | 
164 |                 .Container {
165 |                     font-size: 1em;
166 |                 }
167 |             }
168 | 
169 |             .Active {
170 |                 transform: scale(1.15);
171 |                 
172 |                 &:hover {
173 |                     transform: scale(1.15);
174 |                 }
175 |             }
176 |         }
177 |     }
178 | }
179 | 


--------------------------------------------------------------------------------
/src/components/UI/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | import classes from './Spinner.module.scss';
4 | 
5 | const spinner = () => <div className = { classes.Spinner } />
6 | 
7 | export default spinner;
8 | 


--------------------------------------------------------------------------------
/src/components/UI/Spinner/Spinner.module.scss:
--------------------------------------------------------------------------------
 1 | $dark1: #444444;
 2 | $dark2: #616161;
 3 | 
 4 | .Spinner {
 5 |     display: inline-block;
 6 |     width: 80px;
 7 |     height: 80px;
 8 | 
 9 |     &:after {
10 |         content: " ";
11 |         display: block;
12 |         width: 64px;
13 |         height: 64px;
14 |         margin: 8px;
15 |         border-radius: 50%;
16 |         border: 6px solid #fff;
17 |         border-color: $dark1 transparent $dark1 transparent;
18 |         animation: Spinner 1.2s linear infinite;
19 |     }
20 | }
21 | 
22 | @keyframes Spinner {
23 |     0% {
24 |         transform: rotate(0deg);
25 |     }
26 |     100% {
27 |         transform: rotate(360deg);
28 |     }
29 | }
30 |   


--------------------------------------------------------------------------------
/src/config/constants.js:
--------------------------------------------------------------------------------
1 | export const GOOGLE_MAPS_API_KEY = '';
2 | export const STRIPE_PUBLISHABLE_KEY = '';
3 | export const BACKEND_DOMAIN = 'https://access-server.herokuapp.com/';
4 | 


--------------------------------------------------------------------------------
/src/containers/Admin/Admin.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | 
  3 | import Section from '../Section/Section';
  4 | import Auth from '../../components/Admin/Auth/Auth';
  5 | import Menu from '../../components/Admin/Menu/Menu';
  6 | import Inbox from '../../components/Admin/Inbox/Inbox';
  7 | import Appointments from '../../components/Admin/Appointments/Appointments';
  8 | 
  9 | import classes from './Admin.module.scss';
 10 | 
 11 | const Admin = ({ closePanel }) => {
 12 |     const [logged, setLogged] = useState(false);
 13 |     const [selected, setSelected] = useState('Menu');
 14 | 
 15 |     useEffect(() => {
 16 |         checkLogin();
 17 |     }, []);
 18 | 
 19 |     const closeModal = (element) => {
 20 |         if(element === document.getElementsByClassName(classes.Modal)[0]) {
 21 |             closePanel();
 22 |         }
 23 |     }
 24 | 
 25 |     const checkLogin = () => {
 26 |         let token = localStorage.getItem('token');
 27 |         let expirationDate = localStorage.getItem('expirationDate');
 28 | 
 29 |         if(!token || !expirationDate) {
 30 |             return setLogged(false);
 31 |         }
 32 | 
 33 |         if(expirationDate < new Date()) {
 34 |             return setLogged(false);
 35 |         }
 36 | 
 37 |         if(!logged) {
 38 |             return setLogged(true);
 39 |         }
 40 |     }
 41 | 
 42 |     const getSectionData = () => {
 43 |         let meta = 'Login';
 44 |         let name = 'Admin page';
 45 |         let description = 'This is a restricted area. Please, enter your email and password below.';
 46 | 
 47 |         if(logged) {
 48 |             switch (selected) {
 49 |                 case 'Menu':
 50 |                     meta = 'Menu';
 51 |                     name = 'Select';
 52 |                     description = 'Please, choose an option'
 53 |                     break;
 54 | 
 55 |                 case 'Inbox':
 56 |                     meta = 'Inbox';
 57 |                     name = 'Messages';
 58 |                     description = 'Incoming messages';
 59 |                     break;
 60 |                 
 61 |                 case 'Appointments':
 62 |                     meta = 'Booking';
 63 |                     name = 'Appointments';
 64 |                     description = 'Upcoming appointments';
 65 |                     break;
 66 |                 
 67 |                 default:
 68 |                     break;
 69 |             }
 70 |         }
 71 |         
 72 |         return {
 73 |             meta: meta,
 74 |             name: name,
 75 |             description: description
 76 |         };
 77 |     };
 78 | 
 79 |     const onMenuSelect = (option) => {
 80 |         setSelected(option);
 81 |     };
 82 | 
 83 |     return (
 84 |     	<div className = { classes.Admin }>
 85 |     		<div className = { classes.Modal } onClick = { (event) => closeModal(event.target) } />
 86 |             <div className = { classes.Console }>
 87 |                 <Section 
 88 |                     meta = { getSectionData().meta } 
 89 |                     name = { getSectionData().name } 
 90 |                     description = { getSectionData().description } />
 91 | 
 92 |                 { !logged 
 93 |                     ? <Auth success = { () => setLogged(true) } /> 
 94 |                     : selected === 'Menu'
 95 |                         ? <Menu select = { onMenuSelect } close = { closePanel } />
 96 |                         : selected === 'Inbox'
 97 |                             ? <Inbox back = { () => setSelected('Menu') } />
 98 |                             : <Appointments back = { () => setSelected('Menu') } />
 99 |                 }
100 |             </div>
101 |     	</div>
102 |     );
103 | }
104 | 
105 | export default Admin;
106 | 


--------------------------------------------------------------------------------
/src/containers/Admin/Admin.module.scss:
--------------------------------------------------------------------------------
 1 | .Admin {
 2 |     display: flex;
 3 |     justify-content: center;
 4 |     align-items: center;
 5 |     
 6 |     position: fixed;
 7 |     
 8 |     top: 0;
 9 |     bottom: 0;
10 |     left: 0;
11 |     right: 0;
12 | 
13 |     z-index: 500;
14 |     
15 |     .Modal {
16 |         position: fixed;
17 |     
18 |         top: 0;
19 |         bottom: 0;
20 |         left: 0;
21 |         right: 0;
22 |     
23 |         z-index: 500;
24 |     
25 |         background-color: rgba(0, 0, 0, 0.75);
26 |     }
27 | 
28 |     .Console {
29 |         width: 90%;
30 |         padding-bottom: 2.5em;
31 | 
32 |         z-index: 600;
33 | 
34 |         background-color: white;
35 |         box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
36 | 
37 |         display: flex;
38 |         justify-content: center;
39 |         align-items: center;
40 |         flex-flow: column;
41 |     }
42 | }
43 | 
44 | @media(min-width: 720px) {
45 |     .Admin {
46 |         .Console {
47 |             width: auto;
48 |             padding: 0 2em 2em;
49 |         }
50 |     }
51 | }
52 | 
53 | @media(min-width: 1025px) {
54 |     .Admin {
55 |         .Console {
56 |             padding: 0 4em 2em;
57 |         }
58 |     }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/containers/Banner/Banner.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | import classes from './Banner.module.scss';
 4 | 
 5 | import banner_01 from '../../assets/images/banner_01.jpeg';
 6 | import banner_02 from '../../assets/images/banner_02.jpeg';
 7 | import banner_03 from '../../assets/images/banner_03.jpeg';
 8 | 
 9 | const Banner = () => {
10 |     const [active, setActive] = useState(1);
11 |     
12 |     useEffect(() => {
13 |         const interval = setInterval(() => {
14 |             setActive(active + 1 <= 3 ? active + 1 : 1);
15 |         }, 7000);
16 | 
17 |         return () => clearInterval(interval);
18 |     });
19 | 
20 |     return (
21 |     	<div className = { classes.Banner }>
22 |             <div className = { classes.Main }>
23 |                 <div className = { classes.Holder }>
24 |                     <div className = { classes.Text }>
25 |                         <h2>the best</h2>
26 |                         <h1>Beauty &<br/>Hair Salon</h1>
27 |                         <div className = { classes.Line } />
28 |                         <p>Our qualified expert provides a full range of services to meet all customer needs.</p>
29 |                         <a href = 'https://www.treatwell.co.uk/place/beauty-at-luxx-hair/' target = '_blank' rel = 'noopener noreferrer'>Book now</a>
30 |                     </div>
31 | 
32 |                     <div className = { classes.Images }>
33 |                         <img className = { [classes.Image, active === 1 ? classes.Active : '', active === 3 ? classes.Hidden : ''].join(' ') } src = { banner_01 } alt = 'Beaty Salon' />
34 |                         <img className = { [classes.Image, active === 2 ? classes.Active : '', active === 1 ? classes.Hidden : ''].join(' ') } src = { banner_02 } alt = 'Beaty Salon' />
35 |                         <img className = { [classes.Image, active === 3 ? classes.Active : '', active === 2 ? classes.Hidden : ''].join(' ') } src = { banner_03 } alt = 'Beaty Salon' />
36 |                     </div>
37 |                 </div>        
38 | 
39 |                 <div className = { classes.Dots }>
40 |                     <div className = { [classes.Dot, active === 1 ? classes.Active : ''].join(' ') } onClick = { () => setActive(1) } />
41 |                     <div className = { [classes.Dot, active === 2 ? classes.Active : ''].join(' ') } onClick = { () => setActive(2) } />
42 |                     <div className = { [classes.Dot, active === 3 ? classes.Active : ''].join(' ') } onClick = { () => setActive(3) } />
43 |                 </div>        
44 |             </div>
45 |             
46 |             <a className = { classes.Scroll } href = '#about'><div className = { classes.Arrow } /></a>
47 |     	</div>
48 |     );
49 | }
50 | 
51 | export default Banner;
52 | 


--------------------------------------------------------------------------------
/src/containers/Banner/Banner.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | $eunry2: #6D0E2A;
  3 | $eunry3: #A28282;
  4 | $dark1: #444444;
  5 | $dark2: #616161;
  6 | 
  7 | .Banner {
  8 |     width: 100%;
  9 |     height: calc(100vh - 4em);
 10 | 
 11 |     margin-top: 4em;
 12 | 
 13 |     .Main {
 14 |         width: 100%;
 15 |         height: calc(100vh - 4em - 3vh);
 16 | 
 17 |         background-color: $eunry1;
 18 | 
 19 |         .Holder {
 20 |             display: flex;
 21 |             flex-flow: column-reverse;
 22 |             
 23 |             width: 100%;
 24 | 
 25 |             .Text {
 26 |                 width: 90%;
 27 |                 margin: 0 auto;
 28 | 
 29 |                 h2 {
 30 |                     font-family: 'Satisfy', cursive;
 31 |                     font-size: 6vh;
 32 |                     color: white;
 33 |                 }
 34 |     
 35 |                 h1 {
 36 |                     font-family: 'Suranna', serif;
 37 |                     font-size: 7vh;
 38 |                     text-transform: uppercase;
 39 |                     color: $dark1;
 40 |                 }
 41 |     
 42 |                 .Line {
 43 |                     width: 4em;
 44 |                     height: 3px;
 45 | 
 46 |                     margin: 2.5vh 0;
 47 | 
 48 |                     background-color: white;
 49 |                 }
 50 |     
 51 |                 p {
 52 |                     font-family: 'Poppins', sans-serif;
 53 |                     font-size: 4vw;
 54 | 
 55 |                     line-height: 1.5em;
 56 | 
 57 |                     margin-bottom: 1.5em;
 58 | 
 59 |                     color: $dark2;
 60 |                 }
 61 | 
 62 |                 a {
 63 |                     display: block;
 64 | 
 65 |                     width: 11em;
 66 |                     height: 3.5em;
 67 | 
 68 |                     line-height: 3.5em;
 69 | 
 70 |                     font-size: 0.8em;
 71 |                     font-family: 'Poppins', sans-serif;
 72 | 
 73 |                     box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
 74 | 
 75 |                     color: $eunry2;
 76 |                     
 77 |                     text-align: center;
 78 |                     text-decoration: none;
 79 | 
 80 |                     background-color: white;
 81 | 
 82 |                     transition: all 0.3s;
 83 | 
 84 |                     &:hover {
 85 |                         background-color: $eunry3;
 86 |                         color: white;
 87 |                     }
 88 |                 }
 89 |             }
 90 |             
 91 |             .Images {
 92 |                 width: 100%;
 93 |                 margin-bottom: 2.5vh;
 94 | 
 95 |                 .Image {
 96 |                     display: none;
 97 | 
 98 |                     width: 100%;
 99 |                     height: 40vh;
100 | 
101 |                     object-fit: cover;
102 | 
103 |                     transition: all 0.3s;
104 |                 }
105 | 
106 |                 .Active {
107 |                     display: block;
108 |                     transition: all 0.3s;
109 |                 }
110 |             }
111 |         }
112 |         
113 |         .Dots {
114 |             display: none;
115 |         }
116 |     }
117 |     
118 |     .Scroll {
119 |         display: flex;
120 |         justify-content: center;
121 |         align-items: center;
122 |         
123 |         width: 6vh;
124 |         height: 6vh;
125 | 
126 |         margin: -3vh auto 0;
127 | 
128 |         box-shadow: 0 0 18px rgba(0, 0, 0, 0.06);
129 | 
130 |         background-color: white;
131 | 
132 |         transition: all 0.3s;
133 |         
134 |         &:hover {
135 |             background-color: $eunry3;
136 |             color: white;
137 | 
138 |             .Arrow {
139 |                 filter: brightness(0) invert(1);
140 |             }
141 |         }
142 | 
143 |         .Arrow {
144 |             height: 40%;
145 |             width: 40%;
146 | 
147 |             background-image: url('../../assets/icons/scroll.png');
148 |             background-size: contain;
149 |             background-repeat: no-repeat;
150 | 
151 |             transition: all 0.3s;
152 |         }
153 |     }
154 | }
155 | 
156 | @media (min-width: 720px) {
157 |     .Banner {
158 |         height: auto;
159 |         margin-top: 5em;
160 | 
161 |         .Main {
162 |             height: auto;
163 |             padding: 3.5em 0;
164 | 
165 |             display: flex;
166 |             align-items: center;
167 | 
168 |             .Holder {
169 |                 width: 90%;
170 |                 margin: 0 auto;
171 |                 flex-flow: row;
172 |                 justify-content: space-between;
173 | 
174 |                 .Text {
175 |                     width: 45vw;
176 |                     height: 45vw;
177 | 
178 |                     display: flex;
179 |                     flex-direction: column;
180 |                     justify-content: space-between;
181 |                     
182 |                     h2 {
183 |                         font-size: 6vw;
184 |                         margin: 0;
185 |                     }
186 | 
187 |                     h1 {
188 |                         font-size: 7.75vw;
189 |                         margin: 0;
190 |                     }
191 | 
192 |                     .Line {
193 |                         margin: 1.5vh 0;
194 |                     }
195 | 
196 |                     p {
197 |                         font-size: 2vw;
198 |                         margin: 0 0 0.5em;
199 |                         width: 87.5%;
200 |                     }
201 |                 }
202 | 
203 |                 .Images {
204 |                     width: 45vw; 
205 |                     height: 45vw;
206 | 
207 |                     margin: 0;
208 | 
209 |                     position: relative;
210 | 
211 |                     .Image {
212 |                         display: block;
213 | 
214 |                         filter: brightness(0.5);
215 | 
216 |                         width: 42.5vw;
217 |                         height: 42.5vw;
218 | 
219 |                         position: absolute;
220 |                         bottom: 0;
221 |                         left: 0;
222 |                     }
223 | 
224 |                     .Active {
225 |                         top: 0;
226 |                         right: 0;
227 |                         bottom: auto;
228 |                         left: auto;
229 |                         
230 |                         box-shadow: 0 2px 44px rgba(0, 0, 0, 0.16);
231 | 
232 |                         z-index: 100;
233 | 
234 |                         filter: none;
235 |                     }
236 |                     
237 |                     .Hidden {
238 |                         display: none;
239 |                     }
240 |                 }
241 |             }
242 | 
243 |             .Dots {
244 |                 display: block;
245 |                 position: absolute;
246 | 
247 |                 right: 0;   
248 | 
249 |                 .Dot {
250 |                     width: 0.75em;
251 |                     height: 0.75em;
252 | 
253 |                     margin: 5px 1.75vw 5px 0;
254 | 
255 |                     background-color: white;
256 | 
257 |                     border-radius: 50%;
258 | 
259 |                     cursor: pointer;
260 | 
261 |                     transition: all 0.3s;
262 | 
263 |                     &:hover {
264 |                         background-color: #A28282;
265 |                     }
266 |                 }
267 | 
268 |                 .Active {
269 |                     background-color: $eunry2;
270 |                     
271 |                     &:hover {
272 |                         background-color: $eunry2;
273 |                     }
274 |                 }
275 |             }
276 |         }
277 | 
278 |         .Scroll {            
279 |             width: 5vh;
280 |             height: 5vh;
281 | 
282 |             margin: -2.5vh auto 0;
283 |         }
284 |     }
285 | }
286 | 
287 | @media (min-width: 1025px) {
288 |     .Banner {
289 |         height: calc(100vh - 5em);
290 | 
291 |         .Main {
292 |             height: calc(100vh - 5em - 4vh);
293 |             padding: 0;
294 | 
295 |             .Holder {
296 |                 width: 85%;
297 |                 height: 80%;
298 | 
299 |                 margin: 0 auto; 
300 | 
301 |                 .Text {
302 |                     height: 100%;
303 |                     width: calc(100vw - (100% - 30%));
304 | 
305 |                     margin: 0;
306 | 
307 |                     h2 {
308 |                         font-size: 6vw;
309 |                     }
310 | 
311 |                     h1 {
312 |                         font-size: 7vw;
313 |                     }
314 | 
315 |                     .Line {
316 |                         width: 5em;
317 |                         height: 4px;
318 |                         margin: 1.5vh 0;
319 |                     }
320 | 
321 |                     p {
322 |                         font-size: 1.25em;
323 |                         margin: 0 0 0.5em;
324 |                         width: 90%;
325 |                     }
326 | 
327 |                     a {
328 |                         font-size: 1em;
329 |                     }
330 |                 }
331 | 
332 |                 .Images {
333 |                     width: 40vw;
334 |                     height: 40vw;
335 | 
336 |                     max-width: calc((100vh - 5em - 4vh) * 0.8);
337 |                     max-height: 100%;
338 | 
339 |                     .Image {
340 |                         height: 90%;
341 |                         width: 90%;
342 |                     }
343 |                 }                
344 |             }
345 |         }
346 | 
347 |         .Scroll {            
348 |             width: 6.5vh;
349 |             height: 6.5vh;             
350 |         }
351 |     }
352 | }
353 | 


--------------------------------------------------------------------------------
/src/containers/Booking/Booking.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import axios from 'axios';
  3 | import { BACKEND_DOMAIN } from '../../config/constants';
  4 | 
  5 | import Spinner from '../../components/UI/Spinner/Spinner';
  6 | import Section from '../Section/Section';
  7 | import Schedule from '../../components/Booking/Schedule/Schedule';
  8 | import Details from '../../components/Booking/Details/Details';
  9 | import Checkout from '../../components/Booking/Checkout/Checkout';
 10 | import Success from '../../components/Booking/Success/Success';
 11 | 
 12 | import classes from './Booking.module.scss';
 13 | 
 14 | import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
 15 | 
 16 | const Booking = ({ services, closePanel }) => {
 17 |     const stripe = useStripe();
 18 |     const elements = useElements();
 19 | 
 20 |     const [process, setProcess] = useState('Schedule');
 21 |     const [loading, setLoading] = useState(true);
 22 |     const [error, setError] = useState();
 23 |     
 24 |     const [result, setResult] = useState({ service: { id: services } });
 25 |     const [schedule, setSchedule] = useState(null);
 26 | 
 27 |     const [stripeError, setStripeError] = useState();
 28 |     const [clientSecret, setClientSecret] = useState();
 29 | 
 30 |     useEffect(() => {
 31 |         getSchedule();
 32 |     }, []);
 33 | 
 34 |     const closeModal = (element) => {
 35 |         if(element === document.getElementsByClassName(classes.Modal)[0]) {
 36 |             document.body.style.overflow = 'auto';
 37 |             closePanel();
 38 |         }
 39 |     }
 40 |     
 41 |     const getSchedule = () => {
 42 |         setLoading(true);
 43 | 
 44 |         axios.get(BACKEND_DOMAIN + 'appointment/beautyatluxx/?id=' + services)
 45 |             .then(response => {
 46 |                 setSchedule(response.data.schedule);
 47 |                 setLoading(false);
 48 |             })
 49 |             .catch(error => {
 50 |                 setError(error.response.data.message);
 51 |                 setLoading(false);
 52 |             });
 53 |     }
 54 |     
 55 |     const scheduleSuccess = (time) => {
 56 |         setResult({ ...result, service: { ...result.service, time: time } });
 57 |         setProcess('Details');
 58 |     }
 59 |     
 60 |     const detailsSuccess = async (details) => {
 61 |         setLoading(true);
 62 | 
 63 |         try {
 64 |             const appointment = {
 65 |                 service: { ...result.service },
 66 |                 client: details.client,
 67 |                 details: {
 68 |                     payment: details.payment
 69 |                 }
 70 |             };
 71 | 
 72 |             if (details.payment === 'card') {
 73 |                 const response = await axios.post(BACKEND_DOMAIN + 'appointment/beautyatluxx/card', { appointment: appointment })
 74 |                 setClientSecret(response.data.clientSecret);
 75 |             }
 76 | 
 77 |             setResult(appointment);
 78 | 
 79 |             setProcess('Checkout');
 80 |             setLoading(false);        
 81 |         } catch (error) {
 82 |             setError(error.response.data.message);
 83 |             setLoading(false);
 84 |         }
 85 |     };
 86 | 
 87 |     const checkoutPay = async () => {
 88 |         setLoading(true);
 89 | 
 90 |         if (result.details.payment === 'card') {
 91 |             if (!stripe || !elements)
 92 |                 return;
 93 |         
 94 |             try {
 95 |                 const response = await stripe.confirmCardPayment(clientSecret, {
 96 |                     payment_method: {
 97 |                         card: elements.getElement(CardElement),
 98 |                         billing_details: {
 99 |                             name: result.client.name,
100 |                             email: result.client.email,
101 |                             phone: result.client.phone
102 |                         },
103 |                     }
104 |                 });
105 |                 
106 |                 if (response.error) {
107 |                     setStripeError(response.error.message);
108 |                     setLoading(false);
109 |                 } else if (response.paymentIntent.status === 'succeeded') {
110 |                     setProcess('Success');
111 |                     setLoading(false);
112 |                 }
113 |             } catch (error) {
114 |                 setError(error.message);
115 |                 setLoading(false);
116 |             };
117 |         } else if (result.details.payment === 'venue') {
118 |             try {
119 |                 const appointment = { ...result };
120 | 
121 |                 await axios.post(BACKEND_DOMAIN + 'appointment/beautyatluxx/venue', { appointment: appointment })
122 |                 
123 |                 setLoading(false);
124 |                 setProcess('Success');
125 |             } catch (error) {
126 |                 setError(error.response.data.message);
127 |                 setLoading(false);
128 |             }
129 |         }    
130 |     };
131 | 
132 |     const completionSuccess = () => {
133 |         document.body.style.overflow = 'auto';
134 |         closePanel();
135 |     };
136 | 
137 |     return (
138 |         <div className = { classes.Booking }>
139 |             <div className = { classes.Modal } onClick = { (event) => closeModal(event.target) } />
140 |             <div className = { classes.Console }>
141 |                 <Section 
142 |                     meta = { process === 'Date' ? 'Select date' : process === 'Details' ? 'About you' : process === 'Checkout' ? 'Order review' : 'Success' } 
143 |                     name = { process === 'Schedule' ? 'Choose time' : process === 'Details' ? 'Information' : process === 'Checkout' ? 'Checkout' : 'Your order' } 
144 |                     description = { process === 'Schedule' ? 'Please, choose the available time' : process === 'Details' ? 'Please, enter the required information about you' : process === 'Checkout' ? 'Please, review your order' : 'Your appointment has been confirmed!' } />
145 |                 <div className = { classes.Content }>
146 |                     { loading && <div className = { classes.LoadingWrapper }><Spinner /></div> }
147 |                     { error
148 |                         ? <p className = { classes.Error }>{ error }</p>
149 |                         : process === 'Schedule' && !loading
150 |                             ? <Schedule schedule = { schedule } success = { scheduleSuccess } /> 
151 |                             : process === 'Details' && !loading
152 |                                 ? <Details success = { detailsSuccess } /> 
153 |                                 : process === 'Checkout'
154 |                                     ? <Checkout data = { result } success = { checkoutPay } meta = { stripeError } />
155 |                                     : !loading
156 |                                         ? <Success success = { completionSuccess } email = { result.client.email } />
157 |                                         : null }
158 |                 </div>                
159 |             </div>
160 |         </div>
161 |     );
162 | }
163 | 
164 | export default Booking;
165 | 


--------------------------------------------------------------------------------
/src/containers/Booking/Booking.module.scss:
--------------------------------------------------------------------------------
  1 | $eunry1: #D6BCBC;
  2 | $eunry2: #6D0E2A;
  3 | $eunry3: #A28282;
  4 | $dark1: #444444;
  5 | $dark2: #616161;
  6 | 
  7 | .Booking {
  8 |     display: flex;
  9 |     justify-content: center;
 10 |     align-items: center;
 11 |     
 12 |     position: fixed;
 13 |     
 14 |     top: 0;
 15 |     bottom: 0;
 16 |     left: 0;
 17 |     right: 0;
 18 | 
 19 |     z-index: 500;
 20 |     
 21 |     .Modal {
 22 |         position: fixed;
 23 |     
 24 |         top: 0;
 25 |         bottom: 0;
 26 |         left: 0;
 27 |         right: 0;
 28 |     
 29 |         z-index: 500;
 30 |     
 31 |         background-color: rgba(0, 0, 0, 0.75);
 32 |     }
 33 | 
 34 |     .Console {
 35 |         width: 90%;
 36 |         padding-bottom: 1em;
 37 | 
 38 |         z-index: 600;
 39 | 
 40 |         background-color: white;
 41 |         box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
 42 | 
 43 |         display: flex;
 44 |         justify-content: center;
 45 |         align-items: center;
 46 |         flex-flow: column;
 47 | 
 48 |         .Content {
 49 |             width: 90%;
 50 |             min-height: 50vh;
 51 | 
 52 |             position: relative;
 53 | 
 54 |             .LoadingWrapper {
 55 |                 position: absolute;
 56 |                 top: 0;
 57 |                 right: 0;
 58 |                 bottom: 0;
 59 |                 left: 0;
 60 |                 
 61 |                 display: flex;
 62 |                 justify-content: center;
 63 |                 align-items: center;
 64 | 
 65 |                 background-color: rgba(255, 255, 255, 0.75);
 66 |             }
 67 |         }
 68 | 
 69 |         .Error {
 70 |             padding: 1em 0;
 71 | 
 72 |             font-family: 'Poppins', sans-serif;
 73 |             font-size: 1.25em;
 74 | 
 75 |             color: $dark1;
 76 |         }
 77 |     }
 78 | }
 79 | 
 80 | @media(min-width: 720px) {
 81 |     .Booking {
 82 |         .Console {
 83 |             width: auto;
 84 |             padding: 0 2em 2em;
 85 | 
 86 |             .Content {
 87 |                 min-width: 55vw;
 88 |             }
 89 |         }
 90 |     }
 91 | }
 92 | 
 93 | @media(min-width: 1025px) {
 94 |     .Booking {
 95 |         .Console {
 96 |             min-width: 25em;
 97 |             padding: 0 2em 2em;
 98 | 
 99 |             .Content {
100 |                 min-width: 25vw;
101 |             }
102 |         }
103 |     }
104 | }
105 | 


--------------------------------------------------------------------------------
/src/containers/Section/Section.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import classes from './Section.module.scss';
 4 | 
 5 | const section = (props) => {
 6 |     return (
 7 |     	<section className = { classes.Section } id = { props.id }>
 8 |     		<div className = { classes.Main }>
 9 |                 <h1 className = { classes.Meta }>{ props.meta }</h1>
10 |                 <h1 className = { classes.Name }>{ props.name }</h1>                
11 |                 <div className = { classes.Line } />
12 |                 <p className = { classes.Description }>{ props.description }</p>
13 |             </div>
14 | 
15 |             { props.children }
16 |     	</section>
17 |     );
18 | }
19 | 
20 | export default section;
21 | 


--------------------------------------------------------------------------------
/src/containers/Section/Section.module.scss:
--------------------------------------------------------------------------------
 1 | $grey: #444444;
 2 | $eunry2: #6D0E2A;
 3 | $grey2: #616161;
 4 | $eunry3: #A28282;
 5 | 
 6 | .Section {
 7 |     width: 100%;
 8 | 
 9 |     display: flex;
10 |     justify-content: center;
11 |     flex-flow: column;
12 | 
13 |     .Main {
14 |         display: flex;
15 |         align-items: center;
16 |         flex-flow: column;
17 | 
18 |         margin: 2em 0;
19 | 
20 |         font-size: 1em;
21 | 
22 |         .Meta {
23 |             font-family: 'Dancing Script', cursive;
24 |             font-size: 1.75em;
25 | 
26 |             color: $eunry3;
27 |         }
28 | 
29 |         .Name {
30 |             font-family: 'Montserrat', sans-serif;
31 |             font-size: 2em;
32 | 
33 |             text-transform: uppercase;
34 | 
35 |             margin: 0.5em 0;
36 | 
37 |             color: $eunry2;
38 |         }
39 | 
40 |         .Line {
41 |             background-image: url('../../assets/icons/line.png');
42 |             background-size: contain;
43 |             background-position: center;
44 |             background-repeat: no-repeat;
45 | 
46 |             width: 80%;
47 |             height: 0.5em;
48 | 
49 |             margin: 0.5em 0 2em;
50 |         }
51 | 
52 |         .Description {
53 |             font-family: 'Poppins', sans-serif;
54 |             font-size: 1em;
55 |             font-weight: 300;
56 | 
57 |             width: 90%;
58 |             
59 |             text-align: center;
60 |             line-height: 1.65em;
61 | 
62 |             color: $grey2;
63 |         }
64 |     }
65 | }
66 | 
67 | @media (min-width: 1025px) {
68 |     .Section {
69 |         .Main {
70 |             font-size: 1em;
71 | 
72 |             .Description {
73 |                 width: 65%;
74 |                 line-height: 1.75em;
75 |             }
76 |         }
77 |     }
78 | }
79 | 


--------------------------------------------------------------------------------
/src/hoc/Layout/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './reset.css';
 3 | 
 4 | import classes from './Layout.module.scss';
 5 | 
 6 | const layout = (props) => {
 7 |     return (
 8 |         <div className = { classes.Layout }>
 9 |             { props.children }
10 |         </div>
11 |     );
12 | }
13 | 
14 | export default layout;
15 | 


--------------------------------------------------------------------------------
/src/hoc/Layout/Layout.module.scss:
--------------------------------------------------------------------------------
 1 | $grey: #F6F6F6;
 2 | 
 3 | html {
 4 |     scroll-behavior: smooth;
 5 | }
 6 | 
 7 | body {
 8 |     background-color: $grey;
 9 | }
10 | 
11 | .Layout {
12 |     width: 100%;
13 |     height: 100%;
14 | }
15 | 


--------------------------------------------------------------------------------
/src/hoc/Layout/reset.css:
--------------------------------------------------------------------------------
  1 | html, body, div, span, applet, object, iframe,
  2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3 | a, abbr, acronym, address, big, cite, code,
  4 | del, dfn, em, img, ins, kbd, q, s, samp,
  5 | small, strike, strong, sub, sup, tt, var,
  6 | b, u, i, center,
  7 | dl, dt, dd, ol, ul, li,
  8 | fieldset, form, label, legend,
  9 | table, caption, tbody, tfoot, thead, tr, th, td,
 10 | article, aside, canvas, details, embed,
 11 | figure, figcaption, footer, header, hgroup,
 12 | menu, nav, output, ruby, section, summary,
 13 | time, mark, audio, video {
 14 |   margin: 0;
 15 | 	padding: 0;
 16 | 	border: 0;
 17 | 	font-size: 100%;
 18 | 	font: inherit;
 19 | 	vertical-align: baseline;
 20 |     outline: none;
 21 | }
 22 | 
 23 | /* make sure to set some focus styles for accessibility */
 24 | :focus {
 25 |     outline: 0;
 26 | }
 27 | 
 28 | /* HTML5 display-role reset for older browsers */
 29 | article, aside, details, figcaption, figure,
 30 | footer, header, hgroup, menu, nav, section {
 31 | 	display: block;
 32 | }
 33 | 
 34 | body {
 35 | 	line-height: 1;
 36 | }
 37 | 
 38 | ol, ul {
 39 | 	list-style: none;
 40 | }
 41 | 
 42 | blockquote, q {
 43 | 	quotes: none;
 44 | }
 45 | 
 46 | blockquote:before, blockquote:after,
 47 | q:before, q:after {
 48 | 	content: '';
 49 | 	content: none;
 50 | }
 51 | 
 52 | table {
 53 | 	border-collapse: collapse;
 54 | 	border-spacing: 0;
 55 | }
 56 | 
 57 | input[type=search]::-webkit-search-cancel-button,
 58 | input[type=search]::-webkit-search-decoration,
 59 | input[type=search]::-webkit-search-results-button,
 60 | input[type=search]::-webkit-search-results-decoration {
 61 |     -webkit-appearance: none;
 62 |     -moz-appearance: none;
 63 | }
 64 | 
 65 | input[type=search] {
 66 |     -webkit-appearance: none;
 67 |     -moz-appearance: none;
 68 |     -webkit-box-sizing: content-box;
 69 |     -moz-box-sizing: content-box;
 70 |     box-sizing: content-box;
 71 | }
 72 | 
 73 | textarea {
 74 |     overflow: auto;
 75 |     vertical-align: top;
 76 |     resize: vertical;
 77 | }
 78 | 
 79 | /**
 80 |  * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 81 |  */
 82 | 
 83 | audio,
 84 | canvas,
 85 | video {
 86 |     display: inline-block;
 87 |     *display: inline;
 88 |     *zoom: 1;
 89 |     max-width: 100%;
 90 | }
 91 | 
 92 | /**
 93 |  * Prevent modern browsers from displaying `audio` without controls.
 94 |  * Remove excess height in iOS 5 devices.
 95 |  */
 96 | 
 97 | audio:not([controls]) {
 98 |     display: none;
 99 |     height: 0;
100 | }
101 | 
102 | /**
103 |  * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
104 |  * Known issue: no IE 6 support.
105 |  */
106 | 
107 | [hidden] {
108 |     display: none;
109 | }
110 | 
111 | /**
112 |  * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
113 |  *    `em` units.
114 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
115 |  *    user zoom.
116 |  */
117 | 
118 | html {
119 |     font-size: 100%; /* 1 */
120 |     -webkit-text-size-adjust: 100%; /* 2 */
121 |     -ms-text-size-adjust: 100%; /* 2 */
122 | }
123 | 
124 | /**
125 |  * Address `outline` inconsistency between Chrome and other browsers.
126 |  */
127 | 
128 | a:focus {
129 |     outline: thin dotted;
130 | }
131 | 
132 | /**
133 |  * Improve readability when focused and also mouse hovered in all browsers.
134 |  */
135 | 
136 | a:active,
137 | a:hover {
138 |     outline: 0;
139 | }
140 | 
141 | /**
142 |  * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
143 |  * 2. Improve image quality when scaled in IE 7.
144 |  */
145 | 
146 | img {
147 |     border: 0; /* 1 */
148 |     -ms-interpolation-mode: bicubic; /* 2 */
149 | }
150 | 
151 | /**
152 |  * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
153 |  */
154 | 
155 | figure {
156 |     margin: 0;
157 | }
158 | 
159 | /**
160 |  * Correct margin displayed oddly in IE 6/7.
161 |  */
162 | 
163 | form {
164 |     margin: 0;
165 | }
166 | 
167 | /**
168 |  * Define consistent border, margin, and padding.
169 |  */
170 | 
171 | fieldset {
172 |     border: 1px solid #c0c0c0;
173 |     margin: 0 2px;
174 |     padding: 0.35em 0.625em 0.75em;
175 | }
176 | 
177 | /**
178 |  * 1. Correct color not being inherited in IE 6/7/8/9.
179 |  * 2. Correct text not wrapping in Firefox 3.
180 |  * 3. Correct alignment displayed oddly in IE 6/7.
181 |  */
182 | 
183 | legend {
184 |     border: 0; /* 1 */
185 |     padding: 0;
186 |     white-space: normal; /* 2 */
187 |     *margin-left: -7px; /* 3 */
188 | }
189 | 
190 | /**
191 |  * 1. Correct font size not being inherited in all browsers.
192 |  * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
193 |  *    and Chrome.
194 |  * 3. Improve appearance and consistency in all browsers.
195 |  */
196 | 
197 | button,
198 | input,
199 | select,
200 | textarea {
201 |     font-size: 100%; /* 1 */
202 |     margin: 0; /* 2 */
203 |     vertical-align: baseline; /* 3 */
204 |     *vertical-align: middle; /* 3 */
205 | }
206 | 
207 | /**
208 |  * Address Firefox 3+ setting `line-height` on `input` using `!important` in
209 |  * the UA stylesheet.
210 |  */
211 | 
212 | button,
213 | input {
214 |     line-height: normal;
215 | }
216 | 
217 | /**
218 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
219 |  * All other form control elements do not inherit `text-transform` values.
220 |  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
221 |  * Correct `select` style inheritance in Firefox 4+ and Opera.
222 |  */
223 | 
224 | button,
225 | select {
226 |     text-transform: none;
227 | }
228 | 
229 | /**
230 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
231 |  *    and `video` controls.
232 |  * 2. Correct inability to style clickable `input` types in iOS.
233 |  * 3. Improve usability and consistency of cursor style between image-type
234 |  *    `input` and others.
235 |  * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
236 |  *    Known issue: inner spacing remains in IE 6.
237 |  */
238 | 
239 | button,
240 | html input[type="button"], /* 1 */
241 | input[type="reset"],
242 | input[type="submit"] {
243 |     -webkit-appearance: button; /* 2 */
244 |     cursor: pointer; /* 3 */
245 |     *overflow: visible;  /* 4 */
246 | }
247 | 
248 | /**
249 |  * Re-set default cursor for disabled elements.
250 |  */
251 | 
252 | button[disabled],
253 | html input[disabled] {
254 |     cursor: default;
255 | }
256 | 
257 | /**
258 |  * 1. Address box sizing set to content-box in IE 8/9.
259 |  * 2. Remove excess padding in IE 8/9.
260 |  * 3. Remove excess padding in IE 7.
261 |  *    Known issue: excess padding remains in IE 6.
262 |  */
263 | 
264 | input[type="checkbox"],
265 | input[type="radio"] {
266 |     box-sizing: border-box; /* 1 */
267 |     padding: 0; /* 2 */
268 |     *height: 13px; /* 3 */
269 |     *width: 13px; /* 3 */
270 | }
271 | 
272 | /**
273 |  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
274 |  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
275 |  *    (include `-moz` to future-proof).
276 |  */
277 | 
278 | input[type="search"] {
279 |     -webkit-appearance: textfield; /* 1 */
280 |     -moz-box-sizing: content-box;
281 |     -webkit-box-sizing: content-box; /* 2 */
282 |     box-sizing: content-box;
283 | }
284 | 
285 | /**
286 |  * Remove inner padding and search cancel button in Safari 5 and Chrome
287 |  * on OS X.
288 |  */
289 | 
290 | input[type="search"]::-webkit-search-cancel-button,
291 | input[type="search"]::-webkit-search-decoration {
292 |     -webkit-appearance: none;
293 | }
294 | 
295 | /**
296 |  * Remove inner padding and border in Firefox 3+.
297 |  */
298 | 
299 | button::-moz-focus-inner,
300 | input::-moz-focus-inner {
301 |     border: 0;
302 |     padding: 0;
303 | }
304 | 
305 | /**
306 |  * 1. Remove default vertical scrollbar in IE 6/7/8/9.
307 |  * 2. Improve readability and alignment in all browsers.
308 |  */
309 | 
310 | textarea {
311 |     overflow: auto; /* 1 */
312 |     vertical-align: top; /* 2 */
313 | }
314 | 
315 | /**
316 |  * Remove most spacing between table cells.
317 |  */
318 | 
319 | table {
320 |     border-collapse: collapse;
321 |     border-spacing: 0;
322 | }
323 | 
324 | html,
325 | button,
326 | input,
327 | select,
328 | textarea {
329 |     color: #222;
330 | }
331 | 
332 | 
333 | ::-moz-selection {
334 |     background: #b3d4fc;
335 |     text-shadow: none;
336 | }
337 | 
338 | ::selection {
339 |     background: #b3d4fc;
340 |     text-shadow: none;
341 | }
342 | 
343 | img {
344 |     vertical-align: middle;
345 | }
346 | 
347 | fieldset {
348 |     border: 0;
349 |     margin: 0;
350 |     padding: 0;
351 | }
352 | 
353 | textarea {
354 |     resize: vertical;
355 | }
356 | 
357 | .chromeframe {
358 |     margin: 0.2em 0;
359 |     background: #ccc;
360 |     color: #000;
361 |     padding: 0.2em 0;
362 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | ReactDOM.render(<App />, document.getElementById('root'));
6 | 


--------------------------------------------------------------------------------