+
```
-$ git clone https://github.com/assembler-school/react-first-stage-project.git
+$ git clone https://github.com/assembler-school/react-shopping-cart-context.git
```
+## Contents and Branches Naming Strategy
+
+The repository is made up of several branches that include the contents of each
+section.
+
+The branches follow a naming strategy like the following:
+
+- `main`: includes the main contents and the instructions
+- `assembler-solution`: includes the solution
+
+### Fetching All the Branches
+
+In order to fetch all the remote branches in the repository, you can use the
+following command:
+
+```sh
+$ git fetch --all
+```
+
+### List Both Remote Tracking Branches and Local Branches
+
+```sh
+$ git branch --all
+```
+
+Then, you can create a local branch based on a remote branch with the following
+command:
+
+```sh
+$ git checkout -b
+ 
+
+ {title}
+{shortDescription}
+ Dani Lucaci 💻 📖 💡 🔧 |
+
+
+
+
+
+
+
+ );
+}
+
+export default Breadcrumbs;
diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js
new file mode 100644
index 0000000..cec497e
--- /dev/null
+++ b/src/components/Breadcrumbs/index.js
@@ -0,0 +1 @@
+export { default } from "./Breadcrumbs";
diff --git a/src/components/Breadcrumbs/style.scss b/src/components/Breadcrumbs/style.scss
new file mode 100644
index 0000000..62a413e
--- /dev/null
+++ b/src/components/Breadcrumbs/style.scss
@@ -0,0 +1,69 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
+
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ list-style: none;
+ text-decoration: none;
+ font-family: 'Josefin Sans', sans-serif;
+}
+
+.wrapper ul{
+ display: flex;
+ justify-content: center;
+}
+
+.wrapper ul li{
+ width: 100px;
+ margin-right: 25px;
+ position: relative;
+}
+
+.wrapper ul li:before{
+ content: ">";
+ position: absolute;
+ top: 45%;
+ transform: translateY(-50%);
+ right: -15px;
+ font-size: 25px;
+ font-weight: bold;
+ color: #007BFF;
+}
+
+.wrapper ul li:last-child{
+ margin-right: 0;
+}
+
+.wrapper ul li:last-child:before{
+ display: none;
+}
+
+.wrapper ul li a{
+ text-align: center;
+ color: #fff;
+ font-size: 18px;
+}
+
+.wrapper ul li a .icon{
+ display: block;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ margin: 0 auto 12px;
+ font-size: 22px;
+ text-align: center;
+ background: #007BFF;
+ color: #fff;
+ border-radius: 50%;
+ box-shadow: 0px 3px 6px 0px rgba(62,88,113,0.8);
+}
+
+.wrapper ul li.active a .icon{
+ background: #fff;
+ color: #007BFF;
+}
+
+.wrapper ul li.active a{
+ color: #007BFF;
+}
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
new file mode 100644
index 0000000..e02fa9e
--- /dev/null
+++ b/src/components/Button/Button.js
@@ -0,0 +1,30 @@
+import React from "react";
+import cn from "clsx";
+
+function Button({
+ submitButton,
+ disabled = false,
+ block = false,
+ small = false,
+ children,
+ ...props
+}) {
+ const classes = cn({
+ btn: true,
+ "btn-primary": true,
+ "btn-block": block,
+ "btn-sm": small,
+ });
+ return (
+
+ );
+}
+
+export default Button;
diff --git a/src/components/Button/__tests_/Button.test.js b/src/components/Button/__tests_/Button.test.js
new file mode 100644
index 0000000..409335e
--- /dev/null
+++ b/src/components/Button/__tests_/Button.test.js
@@ -0,0 +1,46 @@
+import React from "react";
+
+import { renderWithReduxAndRouter } from "../../../utils/test-utils";
+import Button from "..";
+
+describe("", () => {
+ it("is defined", () => {
+ expect().toBeDefined();
+ });
+
+ it("renders a button with a default type", () => {
+ const { getByRole } = renderWithReduxAndRouter();
+ const btn = getByRole("button");
+ expect(btn).toHaveAttribute("type", "button");
+ });
+
+ it("renders a button with a submit type", () => {
+ const { getByRole } = renderWithReduxAndRouter(
+ ,
+ );
+ const btn = getByRole("button");
+ expect(btn).toHaveAttribute("type", "submit");
+ });
+
+ it("renders the button with the passed in text", () => {
+ const { getByRole } = renderWithReduxAndRouter();
+ const btn = getByRole("button", {
+ name: "Click",
+ });
+ expect(btn).toBeInTheDocument();
+ });
+
+ it("renders a button that can be disabled with a prop", () => {
+ const { getByRole } = renderWithReduxAndRouter(
+ ,
+ );
+ const btn = getByRole("button");
+ expect(btn).toBeDisabled();
+ });
+
+ it("renders a button that is enabled by default", () => {
+ const { getByRole } = renderWithReduxAndRouter();
+ const btn = getByRole("button");
+ expect(btn).toBeEnabled();
+ });
+});
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
new file mode 100644
index 0000000..c4719be
--- /dev/null
+++ b/src/components/Button/index.js
@@ -0,0 +1 @@
+export { default } from "./Button";
diff --git a/src/components/Cart/Cart.js b/src/components/Cart/Cart.js
new file mode 100644
index 0000000..b61f8d8
--- /dev/null
+++ b/src/components/Cart/Cart.js
@@ -0,0 +1,93 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import ShoppingCartItem from "../ShoppingCartItem";
+import Button from "../Button";
+import { useProducts } from "../Context/reducer";
+import { useUsers } from "../Context/UserContext";
+
+export function getCartTotal(cart) {
+ return cart.reduce((accum, item) => {
+ return accum + item.price * item.quantity;
+ }, 0);
+}
+
+export function getCartTotalIVA(cart, IVA = 1.21) {
+ return cart.reduce((accum, item) => {
+ return accum + item.price * IVA * item.quantity;
+ }, 0);
+}
+
+function Cart({ ...props }) {
+ const { cartItems, IVA } = useProducts();
+ const { nextStep } = useUsers();
+
+ return (
+
+ );
+}
+
+export default Cart;
diff --git a/src/components/Cart/index.js b/src/components/Cart/index.js
new file mode 100644
index 0000000..4a15a11
--- /dev/null
+++ b/src/components/Cart/index.js
@@ -0,0 +1 @@
+export { default,getCartTotal,getCartTotalIVA } from "./Cart";
diff --git a/src/components/Context/UserContext.js b/src/components/Context/UserContext.js
new file mode 100644
index 0000000..cdd0935
--- /dev/null
+++ b/src/components/Context/UserContext.js
@@ -0,0 +1,130 @@
+import React, { useReducer, useContext, createContext } from "react";
+import { actionTypes } from "./typesUser";
+import { TAXES, SHIPPING } from "../../Variables/Variables";
+
+const initValues = {
+ completed: false,
+ name: "",
+ email: "",
+ countryCode: "+34",
+ phone: "",
+ address: "",
+ city: "",
+ zip: "",
+ country: "Spain",
+ cardHolder: "",
+ cardNumber: "",
+ expiryDate: "",
+ cvc: "",
+ rules: false,
+ paymentMethod: "Visa",
+ taxes: 0,
+ shipping: 0,
+ discount: 0,
+};
+
+const UserContext = createContext(initValues);
+
+function reducer(state, action) {
+ /* const { step } = state; */
+
+ switch (action.type) {
+ case actionTypes.SAVE_USER: {
+ const { name, email, countryCode, phone } = action.payload;
+
+ return {
+ ...state,
+ name: name,
+ email: email,
+ countryCode: countryCode,
+ phone: phone,
+ userDataValid: true,
+ };
+ }
+ case actionTypes.SAVE_ADDRESS: {
+ const { address, city, zip, country } = action.payload;
+ let taxes = 1.21,
+ shipping = 1.99;
+ for (const key in TAXES) {
+ if (country === key) {
+ taxes = TAXES[key];
+ shipping = SHIPPING[key];
+ }
+ }
+ return {
+ ...state,
+ address,
+ city,
+ zip,
+ country,
+ shipping: shipping,
+ taxes: taxes,
+ userDataValid: true,
+ };
+ }
+ case actionTypes.SAVE_PAYMENT: {
+ const { cvc, expiry, name, rules, number, pay } = action.payload;
+
+ return {
+ ...state,
+ cvc,
+ expiryDate: expiry,
+ cardHolder: name,
+ cardNumber: number,
+ rules,
+ paymentMethod: pay,
+ completed: true,
+ };
+ }
+ case actionTypes.RESET: {
+ return {
+ ...state,
+ completed: false,
+ name: "",
+ email: "",
+ countryCode: "+34",
+ phone: "",
+ address: "",
+ city: "",
+ zip: "",
+ country: "Spain",
+ cardHolder: "",
+ cardNumber: "",
+ expiryDate: "",
+ cvc: "",
+ rules: false,
+ paymentMethod: "Visa",
+ taxes: 0,
+ shipping: 0,
+ discount: 0,
+ };
+ }
+ default:
+ return state;
+ }
+}
+
+function UsersProvider({ children }) {
+ const [state, dispatch] = useReducer(reducer, initValues);
+
+ const value = {
+ ...state,
+ saveUser: (data) =>
+ dispatch({ type: actionTypes.SAVE_USER, payload: data }),
+ saveAddress: (data) =>
+ dispatch({ type: actionTypes.SAVE_ADDRESS, payload: data }),
+ savePayment: (data) =>
+ dispatch({ type: actionTypes.SAVE_PAYMENT, payload: data }),
+ reset: () => dispatch({ type: actionTypes.RESET }),
+ };
+
+ return -
+
-
+
+
+
Information
+ +
+ -
+
+
+
Delivery
+ +
+ -
+
+
+
Payment
+ +
+ -
+
+
+
Completed
+ +
+
+
+ );
+}
+
+export default CreditCard;
diff --git a/src/components/CreditCard/credit-card-schema.js b/src/components/CreditCard/credit-card-schema.js
new file mode 100644
index 0000000..d1a4588
--- /dev/null
+++ b/src/components/CreditCard/credit-card-schema.js
@@ -0,0 +1,24 @@
+import * as Yup from "yup";
+
+const creditCardSchema = Yup.object().shape({
+ name: Yup.string()
+ .min(2, "The name is too short!")
+ .max(50, "The name is too long!")
+ .required("The name is required"),
+ number: Yup.string()
+ .matches(/^[0-9]{16}$/, "Number Invalid")
+ .required("The number is required"),
+ expiry: Yup.string()
+ .typeError("This is not a valid expiry date")
+ .matches(/\b\d{2}\/\d{2}\b/, "Please use the format MM/YY")
+ .required("The expiry is required"),
+ cvc: Yup.string()
+ .typeError("CVC not valid")
+ .matches(/\b\d{3}\b/, "Required 3 numbers")
+ .required("The cvc is required"),
+ rules: Yup.boolean()
+ .required("The terms and conditions must be accepted.")
+ .oneOf([true], "The terms and conditions must be accepted."),
+});
+
+export default creditCardSchema;
diff --git a/src/components/CreditCard/index.js b/src/components/CreditCard/index.js
new file mode 100644
index 0000000..932f7cd
--- /dev/null
+++ b/src/components/CreditCard/index.js
@@ -0,0 +1 @@
+export { default } from "./CreditCard";
diff --git a/src/components/FavoriteIconButton/FavoriteIconButton.js b/src/components/FavoriteIconButton/FavoriteIconButton.js
new file mode 100644
index 0000000..b650b65
--- /dev/null
+++ b/src/components/FavoriteIconButton/FavoriteIconButton.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { SavedIcon, UnsavedIcon } from "../SVGIcons";
+
+import "./FavoriteIconButton.scss";
+
+function FavoriteIconButton({ handleSetFavorite, isFavorite }) {
+ return (
+
+ );
+}
+
+export default FavoriteIconButton;
diff --git a/src/components/FavoriteIconButton/FavoriteIconButton.scss b/src/components/FavoriteIconButton/FavoriteIconButton.scss
new file mode 100644
index 0000000..d038f17
--- /dev/null
+++ b/src/components/FavoriteIconButton/FavoriteIconButton.scss
@@ -0,0 +1,7 @@
+.FavoriteIconButton {
+ display: block;
+ padding: 0.25rem;
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+}
diff --git a/src/components/FavoriteIconButton/index.js b/src/components/FavoriteIconButton/index.js
new file mode 100644
index 0000000..3fdcb2e
--- /dev/null
+++ b/src/components/FavoriteIconButton/index.js
@@ -0,0 +1 @@
+export { default } from "./FavoriteIconButton";
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
new file mode 100644
index 0000000..0d42509
--- /dev/null
+++ b/src/components/Footer/Footer.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+import "./Footer.scss";
+
+function Footer({ children, ...props }) {
+ return (
+
+ );
+}
+
+export default Footer;
diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss
new file mode 100644
index 0000000..919148f
--- /dev/null
+++ b/src/components/Footer/Footer.scss
@@ -0,0 +1,5 @@
+.Footer {
+ width: 100%;
+ text-align: center;
+ padding: 4rem 1rem;
+}
diff --git a/src/components/Footer/__tests__/Footer.test.js b/src/components/Footer/__tests__/Footer.test.js
new file mode 100644
index 0000000..11341bd
--- /dev/null
+++ b/src/components/Footer/__tests__/Footer.test.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+import Footer from "..";
+import { renderWithReduxAndRouter } from "../../../utils/test-utils";
+
+describe("", () => {
+ it("is defined", () => {
+ expect().toBeDefined();
+ });
+
+ it("renders an footer html5 element", () => {
+ const { getByRole } = renderWithReduxAndRouter();
+
+ const element = getByRole("contentinfo");
+ expect(element).toBeInTheDocument();
+ });
+
+ it("renders the current year", () => {
+ const { getByRole } = renderWithReduxAndRouter();
+
+ const year = new Date().getFullYear();
+
+ const element = getByRole("contentinfo");
+ expect(element).toHaveTextContent(year);
+ });
+});
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
new file mode 100644
index 0000000..3738288
--- /dev/null
+++ b/src/components/Footer/index.js
@@ -0,0 +1 @@
+export { default } from "./Footer";
diff --git a/src/components/FormBillingAddress/FormBillingAddress.js b/src/components/FormBillingAddress/FormBillingAddress.js
new file mode 100644
index 0000000..c732658
--- /dev/null
+++ b/src/components/FormBillingAddress/FormBillingAddress.js
@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { useFormik } from "formik";
+import { Link, Redirect } from "react-router-dom";
+
+import Input from "../Input";
+import Button from "../Button";
+
+import billingAddressSchema from "./billing-address-schema";
+import { useUsers } from "../Context/UserContext";
+import Breadcrumbs from "../Breadcrumbs";
+
+function FormBillingAddress() {
+ const [hasSubmitted, setHasSubmitted] = useState(false);
+
+ const { address, city, zip, country, saveAddress } = useUsers();
+
+ const formik = useFormik({
+ initialValues: {
+ address: address,
+ city: city,
+ zip: zip,
+ country: country,
+ },
+ validationSchema: billingAddressSchema,
+ onSubmit: (values, { setSubmitting }) => {
+ saveAddress(values);
+ setSubmitting(true);
+
+ setTimeout(() => {
+ setHasSubmitted(true);
+ }, 500);
+ },
+ });
+
+ return (
+ <>
+
+
+
+
+ {hasSubmitted &&
+
+
+ Billing Address
+
+ Step 2 of 4
+ + + + + {hasSubmitted &&
+
+
+ Payment Details
+
+ Step 3 of 4
+ +
+
+
+ {hasErrorMessage && errorMessage && (
+
+ );
+}
+
+export default Input;
diff --git a/src/components/Input/__tests__/Input.test.js b/src/components/Input/__tests__/Input.test.js
new file mode 100644
index 0000000..70c7754
--- /dev/null
+++ b/src/components/Input/__tests__/Input.test.js
@@ -0,0 +1,90 @@
+import React from "react";
+
+import { renderWithReduxAndRouter, userEvent } from "../../../utils/test-utils";
+import Input from "..";
+
+describe("", () => {
+ it("is defined", () => {
+ expect().toBeDefined();
+ });
+
+ it("can be accessed by the label", () => {
+ const { getByLabelText } = renderWithReduxAndRouter(
+ ,
+ );
+ const input = getByLabelText("Email");
+ expect(input).toBeInTheDocument();
+ });
+
+ it("defines a default type of text", () => {
+ const { getByLabelText } = renderWithReduxAndRouter(
+ ,
+ );
+ const input = getByLabelText("Email");
+ expect(input).toHaveAttribute("type", "text");
+ });
+
+ it("assigns the specified type of input", () => {
+ const { getByLabelText } = renderWithReduxAndRouter(
+ ,
+ );
+ const input = getByLabelText("Email");
+ expect(input).toHaveAttribute("type", "email");
+ });
+
+ it("sets the specified placeholder value", () => {
+ const { getByPlaceholderText } = renderWithReduxAndRouter(
+ ,
+ );
+ const input = getByPlaceholderText("Email");
+ expect(input).toBeInTheDocument();
+ });
+
+ it("forwards all the other props", () => {
+ const { getByLabelText } = renderWithReduxAndRouter(
+ ,
+ );
+ const input = getByLabelText("my special input");
+ expect(input).toBeInTheDocument();
+ });
+
+ it("assigns the value received and the onChange handler", () => {
+ const handleChange = jest.fn();
+ const value = "hello-mundo";
+
+ const { getByDisplayValue } = renderWithReduxAndRouter(
+ ,
+ );
+ const input = getByDisplayValue(value);
+ expect(input).toBeInTheDocument();
+ });
+
+ it("calls the onChange handler when typing", () => {
+ const handleChange = jest.fn();
+ const value = "hello-mundo";
+
+ const { getByDisplayValue } = renderWithReduxAndRouter(
+ ,
+ );
+ const input = getByDisplayValue(value);
+ userEvent.type(input, "hola");
+ expect(handleChange).toHaveBeenCalled();
+ });
+});
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
new file mode 100644
index 0000000..a50d7d1
--- /dev/null
+++ b/src/components/Input/index.js
@@ -0,0 +1 @@
+export { default } from "./Input";
diff --git a/src/components/ItemCard/ItemCard.js b/src/components/ItemCard/ItemCard.js
new file mode 100644
index 0000000..d90f725
--- /dev/null
+++ b/src/components/ItemCard/ItemCard.js
@@ -0,0 +1,110 @@
+import React, { useContext } from "react";
+
+import FavoriteIconButton from "../FavoriteIconButton";
+import IconButton from "../IconButton";
+import Button from "../Button";
+import { ThumbDown, ThumbUp } from "../SVGIcons";
+
+import "./ItemCard.scss";
+import { useProducts } from "../Context/reducer";
+
+function Divider() {
+ return {errorMessage}
+ )} +; +} + +function getPopularityClasses( + currentValue, + limit, + prevClasses, + popularityClassName, +) { + const halfLimit = Math.floor(limit / 2); + + if (currentValue >= halfLimit) { + return `${prevClasses} ${popularityClassName}`; + } + + return prevClasses; +} + +function ItemCard({ + id, + img, + title, + shortDescription, + isFavorite, + upVotes, + downVotes, +}) { + const { setFavorite, setUpVotes, setDownVotes, addToCart } = useProducts(); + + function onDownVote() { + setDownVotes(id); + } + function onUpVote() { + setUpVotes(id); + } + function onSetFavorite() { + setFavorite(id); + } + function onAddToCart() { + addToCart(id); + } + + return ( +
hello
+hello
+
+
+
+ Payment Details
+
+ Step 3 of 4
+ +
+
+
+ + {cartItems.length > 0 && + cartItems.map((item) => ( +
+
+
+
+
+
+
+
+ );
+}
+
+export default ResumePurchase;
diff --git a/src/components/ResumePurchase/index.js b/src/components/ResumePurchase/index.js
new file mode 100644
index 0000000..c8d3cf5
--- /dev/null
+++ b/src/components/ResumePurchase/index.js
@@ -0,0 +1 @@
+export { default } from './ResumePurchase'
\ No newline at end of file
diff --git a/src/components/SVGIcons/SavedIcon/SavedIcon.js b/src/components/SVGIcons/SavedIcon/SavedIcon.js
new file mode 100644
index 0000000..c80ffd2
--- /dev/null
+++ b/src/components/SVGIcons/SavedIcon/SavedIcon.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+function SavedIcon() {
+ return (
+
+ );
+}
+
+export default SavedIcon;
diff --git a/src/components/SVGIcons/SavedIcon/index.js b/src/components/SVGIcons/SavedIcon/index.js
new file mode 100644
index 0000000..036c307
--- /dev/null
+++ b/src/components/SVGIcons/SavedIcon/index.js
@@ -0,0 +1 @@
+export { default } from "./SavedIcon";
diff --git a/src/components/SVGIcons/ThumbDown/ThumbDown.js b/src/components/SVGIcons/ThumbDown/ThumbDown.js
new file mode 100644
index 0000000..32b382e
--- /dev/null
+++ b/src/components/SVGIcons/ThumbDown/ThumbDown.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+function ThumbDown() {
+ return (
+
+ );
+}
+
+export default ThumbDown;
diff --git a/src/components/SVGIcons/ThumbDown/index.js b/src/components/SVGIcons/ThumbDown/index.js
new file mode 100644
index 0000000..9af2ada
--- /dev/null
+++ b/src/components/SVGIcons/ThumbDown/index.js
@@ -0,0 +1 @@
+export { default } from "./ThumbDown";
diff --git a/src/components/SVGIcons/ThumbUp/ThumbUp.js b/src/components/SVGIcons/ThumbUp/ThumbUp.js
new file mode 100644
index 0000000..8cac132
--- /dev/null
+++ b/src/components/SVGIcons/ThumbUp/ThumbUp.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+function ThumbUp() {
+ return (
+
+ );
+}
+
+export default ThumbUp;
diff --git a/src/components/SVGIcons/ThumbUp/index.js b/src/components/SVGIcons/ThumbUp/index.js
new file mode 100644
index 0000000..6ce9fcb
--- /dev/null
+++ b/src/components/SVGIcons/ThumbUp/index.js
@@ -0,0 +1 @@
+export { default } from "./ThumbUp";
diff --git a/src/components/SVGIcons/UnsavedIcon/UnsavedIcon.js b/src/components/SVGIcons/UnsavedIcon/UnsavedIcon.js
new file mode 100644
index 0000000..8b2c28e
--- /dev/null
+++ b/src/components/SVGIcons/UnsavedIcon/UnsavedIcon.js
@@ -0,0 +1,23 @@
+import React from "react";
+
+function UnsavedIcon() {
+ return (
+
+ );
+}
+
+export default UnsavedIcon;
diff --git a/src/components/SVGIcons/UnsavedIcon/index.js b/src/components/SVGIcons/UnsavedIcon/index.js
new file mode 100644
index 0000000..9a34ab4
--- /dev/null
+++ b/src/components/SVGIcons/UnsavedIcon/index.js
@@ -0,0 +1 @@
+export { default } from "./UnsavedIcon";
diff --git a/src/components/SVGIcons/index.js b/src/components/SVGIcons/index.js
new file mode 100644
index 0000000..5c56c4b
--- /dev/null
+++ b/src/components/SVGIcons/index.js
@@ -0,0 +1,4 @@
+export { default as ThumbUp } from "./ThumbUp";
+export { default as ThumbDown } from "./ThumbDown";
+export { default as SavedIcon } from "./SavedIcon";
+export { default as UnsavedIcon } from "./UnsavedIcon";
diff --git a/src/components/ShoppingCartItem/ShoppingCartItem.js b/src/components/ShoppingCartItem/ShoppingCartItem.js
new file mode 100644
index 0000000..867140f
--- /dev/null
+++ b/src/components/ShoppingCartItem/ShoppingCartItem.js
@@ -0,0 +1,79 @@
+import React, { useContext } from "react";
+
+import "./ShoppingCartItem.scss";
+
+import Button from "../Button";
+import { useProducts } from "../Context/reducer";
+
+function buildSelectOptions(unitsInStock) {
+ return Array.from({ length: unitsInStock }, (_value, index) => {
+ const currentIndex = index + 1;
+ return (
+
+ );
+ });
+}
+
+function ShoppingCartItem({ id, img, title, price, quantity, unitsInStock }) {
+ const { remove, change } = useProducts();
+ function onHandleChange(event) {
+ change(event, id);
+ }
+ function onHandleRemove() {
+ remove(id);
+ }
+
+ return (
+
+
+ Your Order Confirmed
+Hi {name}
+ Your order has been confirmed and will be shipping soon
+ +
+
+
+
+ Order Date
+ {new Date().toDateString()}
+
+
+ Order Id
+ BK56988569
+
+
+ Payment
+
+ {cardNumber != "" && paymentMethod === "Visa"
+ ? paymentMethod + " - " + (cardNumber % 10000)
+ : paymentMethod}
+
+
+
+ Address
+ {address}
+ + + {cartItems.length > 0 && + cartItems.map((item) => ( +
+
+ ))}
+
+ 
+
+
+
+ {item.title}
+
+
+
+
+ Qty: {item.quantity}
+
+
+
+
+ {item.price} €
+
+
+ +
Subtotal: {getCartTotal(cartItems)} €
+ Shipping: {shipping} €
+ IVA: {taxes && taxes * 100 - 100} %: {(getCartTotal(cartItems) * (taxes - 1)).toFixed(2)} €
+ Discount:
+ +
+ Total: {(getCartTotalIVA(cartItems, taxes) + shipping).toFixed(2)} €
+
+ +
+ We'll send you shipping confirmation when your item(s) are on the way!
+ We appreciate your business, and hope you enjoy your purchase.
+
+
+
+ );
+}
+
+export default ShoppingCartItem;
diff --git a/src/components/ShoppingCartItem/ShoppingCartItem.scss b/src/components/ShoppingCartItem/ShoppingCartItem.scss
new file mode 100644
index 0000000..a7562db
--- /dev/null
+++ b/src/components/ShoppingCartItem/ShoppingCartItem.scss
@@ -0,0 +1,10 @@
+.ShoppingCartItem {
+ &__img {
+ width: 100%;
+ min-width: 4rem;
+ height: 100%;
+ border-radius: 4px;
+ object-fit: cover;
+ background-position: center;
+ }
+}
diff --git a/src/components/ShoppingCartItem/index.js b/src/components/ShoppingCartItem/index.js
new file mode 100644
index 0000000..252ad96
--- /dev/null
+++ b/src/components/ShoppingCartItem/index.js
@@ -0,0 +1 @@
+export { default } from "./ShoppingCartItem";
diff --git a/src/components/SummaryOrder/SummaryOrder.js b/src/components/SummaryOrder/SummaryOrder.js
new file mode 100644
index 0000000..8279bca
--- /dev/null
+++ b/src/components/SummaryOrder/SummaryOrder.js
@@ -0,0 +1,67 @@
+import react from "react";
+import { useProducts } from "../Context/reducer";
+import ShoppingCartItem from "../ShoppingCartItem";
+
+import { getCartTotal, getCartTotalIVA } from "../Cart/";
+
+function SummaryOrder({ ...props }) {
+ const { cartItems } = useProducts();
+ return (
+
+ );
+}
+
+export default SummaryOrder;
diff --git a/src/components/SummaryOrder/index.js b/src/components/SummaryOrder/index.js
new file mode 100644
index 0000000..e7d6552
--- /dev/null
+++ b/src/components/SummaryOrder/index.js
@@ -0,0 +1 @@
+export { default } from "./SummaryOrder";
diff --git a/src/components/UserForm/User-schema.js b/src/components/UserForm/User-schema.js
new file mode 100644
index 0000000..30417c9
--- /dev/null
+++ b/src/components/UserForm/User-schema.js
@@ -0,0 +1,18 @@
+import * as Yup from "yup";
+
+const UserSchema = Yup.object().shape({
+ name: Yup.string()
+ .min(3, "Please insert a valid name")
+ .required("Remember to add your complete name"),
+ email: Yup.string()
+ .email("The address is not valid")
+ .required("Your email is equired"),
+ phone: Yup.number()
+ .typeError("Phone must be a number")
+ .integer("Please insert a valid phone number")
+ .min(100000000, "Please insert a valid phone number")
+ .max(99999999999, "Please insert a valid phone number")
+ .required("Your phone number is required"),
+});
+
+export default UserSchema;
\ No newline at end of file
diff --git a/src/components/UserForm/UserForm.js b/src/components/UserForm/UserForm.js
new file mode 100644
index 0000000..a472724
--- /dev/null
+++ b/src/components/UserForm/UserForm.js
@@ -0,0 +1,124 @@
+import React, { useEffect, useState } from "react";
+import { useFormik } from "formik";
+
+import UserSchema from "./User-schema";
+import "./userFormStyle.scss";
+import Input from "../Input";
+import Button from "../Button";
+import { useUsers } from "../Context/UserContext";
+import { Redirect } from "react-router";
+import Breadcrumbs from "../Breadcrumbs";
+
+function UserForm() {
+ const [hasSubmitted, setHasSubmitted] = useState(false);
+
+ const { name, email, phone, countryCode, saveUser } = useUsers();
+
+ const formik = useFormik({
+ initialValues: {
+ name: name,
+ email: email,
+ phone: phone,
+ countryCode: countryCode,
+ },
+ validationSchema: UserSchema,
+ onSubmit: (values, { setSubmitting }) => {
+ saveUser(values);
+ setSubmitting(true);
+
+ setTimeout(() => {
+ setHasSubmitted(true);
+ }, 500);
+ },
+ });
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {title} +
+
+
+ + {price}€ +
+
+ {unitsInStock ? (
+
+
+
+ ):`Quantity: ${quantity}`}
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ );
+}
+
+export default UserForm;
diff --git a/src/components/UserForm/index.js b/src/components/UserForm/index.js
new file mode 100644
index 0000000..fd63452
--- /dev/null
+++ b/src/components/UserForm/index.js
@@ -0,0 +1 @@
+export { default } from "./UserForm"
\ No newline at end of file
diff --git a/src/components/UserForm/userFormStyle.scss b/src/components/UserForm/userFormStyle.scss
new file mode 100644
index 0000000..cec0772
--- /dev/null
+++ b/src/components/UserForm/userFormStyle.scss
@@ -0,0 +1,8 @@
+select{
+ width: 6rem;
+ height: 2rem;
+}
+
+#phone{
+ margin-top: 0;
+}
\ No newline at end of file
diff --git a/src/hoc/withLayout.js b/src/hoc/withLayout.js
new file mode 100644
index 0000000..5cf3a54
--- /dev/null
+++ b/src/hoc/withLayout.js
@@ -0,0 +1,32 @@
+import React from "react";
+
+import AppHeader from "../components/AppHeader";
+import Footer from "../components/Footer";
+import Main from "../components/Main";
+
+function getDisplayName(WrappedComponent) {
+ return WrappedComponent.displayName || WrappedComponent.name || "Component";
+}
+
+/* eslint no-param-reassign: [2, { "props": false }] */
+function withLayout(WrappedComponent) {
+ WrappedComponent.displayName = `withLayout(${getDisplayName(
+ WrappedComponent,
+ )})`;
+
+ function WrapperComponent({ ...props }) {
+ return (
+ <>
+
+
+
+ User Information
+
+ Step 1 of 4
+ +
+
+
+ {hasSubmitted &&
+
+
+ );
+}
+
+export default withLayout(BillingAddressPage);
diff --git a/src/pages/BillingAddressPage/index.js b/src/pages/BillingAddressPage/index.js
new file mode 100644
index 0000000..95e5dc6
--- /dev/null
+++ b/src/pages/BillingAddressPage/index.js
@@ -0,0 +1 @@
+export { default } from "./BillingAddressPage";
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
new file mode 100644
index 0000000..5bf1f5b
--- /dev/null
+++ b/src/pages/Home/Home.js
@@ -0,0 +1,49 @@
+import React, { useContext } from "react";
+
+import ProductsListing from "../../components/ProductsListing";
+import Cart from "../../components/Cart";
+import withLayout from "../../hoc/withLayout";
+import { useProducts } from "../../components/Context/reducer";
+
+function Home() {
+ const { isLoading, hasError, loadingError } = useProducts();
+ return (
+
+
+
+
+ );
+}
+
+export default withLayout(Home);
diff --git a/src/pages/Home/__tests__/Home.test.js b/src/pages/Home/__tests__/Home.test.js
new file mode 100644
index 0000000..30cbb46
--- /dev/null
+++ b/src/pages/Home/__tests__/Home.test.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+import Home from "..";
+
+describe("
+
+
+
+
+
+
+
+ {isLoading && (
+ Shoe shop
++ This is the best shoe shop ever, you will never find a better + one. +
+Buy now!
+
+
+ )}
+ {hasError && (
+ Loading products...
+
+
+ )}
+ {!isLoading && !hasError && (
+ Something went wrong...
+
+ {loadingError}
+
+
+
+ )}
+
+
+ );
+}
+
+export default withLayout(NewProduct);
diff --git a/src/pages/NewProduct/index.js b/src/pages/NewProduct/index.js
new file mode 100644
index 0000000..5c191bb
--- /dev/null
+++ b/src/pages/NewProduct/index.js
@@ -0,0 +1 @@
+export { default } from "./NewProduct";
diff --git a/src/pages/PaymentDetailsPage/PaymentDetailsPage.js b/src/pages/PaymentDetailsPage/PaymentDetailsPage.js
new file mode 100644
index 0000000..933a58a
--- /dev/null
+++ b/src/pages/PaymentDetailsPage/PaymentDetailsPage.js
@@ -0,0 +1,16 @@
+import FormPaymentDetails from "../../components/FormPaymentDetails";
+import SummaryOrder from "../../components/SummaryOrder";
+import withLayout from "../../hoc/withLayout";
+
+function PaymentDetailsPage() {
+ return (
+
+
+
+
+
+
+ New product
+
+
+
+
+ +
+
+
+
+ );
+}
+
+export default withLayout(PaymentDetailsPage);
diff --git a/src/pages/PaymentDetailsPage/index.js b/src/pages/PaymentDetailsPage/index.js
new file mode 100644
index 0000000..8b852e0
--- /dev/null
+++ b/src/pages/PaymentDetailsPage/index.js
@@ -0,0 +1 @@
+export { default } from "./PaymentDetails";
diff --git a/src/pages/ResumePurchasePage/ResumePurchasePage.js b/src/pages/ResumePurchasePage/ResumePurchasePage.js
new file mode 100644
index 0000000..576f09d
--- /dev/null
+++ b/src/pages/ResumePurchasePage/ResumePurchasePage.js
@@ -0,0 +1,9 @@
+import ResumePurchase from "../../components/ResumePurchase/ResumePurchase";
+import withLayout from "../../hoc/withLayout";
+
+
+function ResumePurchasePage() {
+ return (<>
+
+
+
+ );
+}
+
+export default withLayout(UserInfo);
diff --git a/src/pages/UserInfo/index.js b/src/pages/UserInfo/index.js
new file mode 100644
index 0000000..73df624
--- /dev/null
+++ b/src/pages/UserInfo/index.js
@@ -0,0 +1 @@
+export { default } from "./UserInfo"
\ No newline at end of file
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
new file mode 100644
index 0000000..9ecd33f
--- /dev/null
+++ b/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
new file mode 100644
index 0000000..1dd407a
--- /dev/null
+++ b/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";
diff --git a/src/utils/demo-data.js b/src/utils/demo-data.js
new file mode 100644
index 0000000..a5e50cc
--- /dev/null
+++ b/src/utils/demo-data.js
@@ -0,0 +1,195 @@
+import img1 from "../img/img1.jpeg";
+import img2 from "../img/img2.jpeg";
+import img3 from "../img/img3.jpeg";
+import img4 from "../img/img4.jpeg";
+import img5 from "../img/img5.jpeg";
+import img6 from "../img/img6.jpeg";
+
+const products = [
+ {
+ id: "65d6b269-209b-50ac-a566-ca6a334aa6f0",
+ title: "Nike Runner 2000",
+ price: 88,
+ img: img1,
+ shortDescription:
+ "Ipsum sint consequat culpa adipisicing occaecat aliquip aliquip sit labore aute.",
+ longDescription:
+ "Occaecat nostrud ipsum excepteur adipisicing dolor. Deserunt pariatur commodo duis Lorem laboris irure dolor dolor proident aute pariatur. Nostrud consectetur labore anim est deserunt esse est nostrud ipsum velit incididunt aliqua anim. Occaecat exercitation culpa proident aute aliqua exercitation nulla cillum velit nisi reprehenderit Lorem sunt.",
+ isFavorite: false,
+ createdAt: "2021-04-23T09:12:24.2424+02",
+ updatedAt: "2021-04-23T09:12:24.2424+02",
+ unitsInStock: 5,
+ quantity: 0,
+ votes: {
+ upVotes: {
+ upperLimit: 10,
+ currentValue: 0,
+ },
+ downVotes: {
+ lowerLimit: 10,
+ currentValue: 0,
+ },
+ },
+ author: {
+ id: "9cb107d1-cc36-5399-a8b2-0ad65daa5d36",
+ firstName: "Clyde",
+ lastName: "Tucker",
+ email: "mepsukjid@riz.jm",
+ },
+ },
+ {
+ id: "fbabb4ce-823f-5790-9b87-35819d4be380",
+ title: "Puma 80's",
+ price: 109,
+ img: img2,
+ shortDescription: "Ea nisi minim cillum quis enim ullamco enim sint.",
+ longDescription:
+ "Eu in voluptate ut magna id sint elit est enim et officia. Lorem id commodo duis dolor ullamco consequat dolor culpa. Irure nostrud veniam nulla enim occaecat nostrud ullamco sunt. Excepteur esse occaecat cupidatat excepteur adipisicing fugiat cillum amet do ad aliqua.",
+ isFavorite: false,
+ createdAt: "2021-04-23T09:12:24.2424+02",
+ updatedAt: "2021-04-23T09:12:24.2424+02",
+ unitsInStock: 5,
+ quantity: 0,
+ votes: {
+ upVotes: {
+ upperLimit: 10,
+ currentValue: 0,
+ },
+ downVotes: {
+ lowerLimit: 10,
+ currentValue: 0,
+ },
+ },
+ author: {
+ id: "b2c1f67d-91ee-5a62-b198-4229a4ecc0b8",
+ firstName: "Aaron",
+ lastName: "Casey",
+ email: "mascefjuh@rekos.pl",
+ },
+ },
+ {
+ id: "5e88d7ab-ecdd-5a92-8a4a-7391a4709994",
+ title: "Nike Rev Lite",
+ price: 66,
+ img: img3,
+ shortDescription: "Voluptate nulla ullamco id eu quis ex ad do nulla.",
+ longDescription:
+ "Officia pariatur ad ut consectetur excepteur elit ipsum tempor cillum anim ex. Tempor ad aute nisi nulla Lorem qui amet esse ut sint. Dolor ex laboris adipisicing excepteur velit fugiat magna consequat amet.",
+ isFavorite: false,
+ createdAt: "2021-04-23T09:12:24.2424+02",
+ updatedAt: "2021-04-23T09:12:24.2424+02",
+ unitsInStock: 4,
+ quantity: 0,
+ votes: {
+ upVotes: {
+ upperLimit: 10,
+ currentValue: 0,
+ },
+ downVotes: {
+ lowerLimit: 10,
+ currentValue: 0,
+ },
+ },
+ author: {
+ id: "7bd00d73-815c-5bb4-b2db-8bef58b5bff5",
+ firstName: "Glen",
+ lastName: "Herrera",
+ email: "caeki@genzowde.sj",
+ },
+ },
+ {
+ id: "3ca3c877-0d1c-585e-8866-e19a97392c93",
+ title: "Nike Air",
+ price: 129,
+ img: img4,
+ shortDescription:
+ "Dolore tempor aute magna officia elit irure aliquip eu incididunt in anim in ipsum.",
+ longDescription:
+ "Cillum mollit velit voluptate sit deserunt laborum voluptate. Duis in eiusmod eu cillum nisi anim adipisicing et esse consectetur. Ullamco voluptate deserunt fugiat dolore amet voluptate. Cupidatat dolore qui commodo dolore exercitation proident nulla mollit ut ut occaecat.",
+ isFavorite: false,
+ createdAt: "2021-04-23T09:12:24.2424+02",
+ updatedAt: "2021-04-23T09:12:24.2424+02",
+ unitsInStock: 8,
+ quantity: 0,
+ votes: {
+ upVotes: {
+ upperLimit: 10,
+ currentValue: 0,
+ },
+ downVotes: {
+ lowerLimit: 10,
+ currentValue: 0,
+ },
+ },
+ author: {
+ id: "ef406520-a046-57d1-ad41-e48aed83be83",
+ firstName: "Louise",
+ lastName: "Neal",
+ email: "avaahimo@jamas.at",
+ },
+ },
+ {
+ id: "208c1e43-c945-58fd-9469-19d9229fded4",
+ title: "Adidas Run Kit",
+ price: 199,
+ img: img5,
+ shortDescription:
+ "Do cillum irure ad elit est id laborum laboris et ex mollit minim culpa.",
+ longDescription:
+ "Est tempor occaecat labore aute sint. Voluptate culpa pariatur exercitation mollit Lorem reprehenderit enim sit dolore tempor aliqua anim. Est mollit veniam fugiat eiusmod. Aliqua reprehenderit irure nostrud anim veniam laborum non id occaecat deserunt proident elit.",
+ isFavorite: false,
+ createdAt: "2021-04-23T09:12:24.2424+02",
+ updatedAt: "2021-04-23T09:12:24.2424+02",
+ unitsInStock: 4,
+ quantity: 0,
+ votes: {
+ upVotes: {
+ upperLimit: 10,
+ currentValue: 0,
+ },
+ downVotes: {
+ lowerLimit: 10,
+ currentValue: 0,
+ },
+ },
+ author: {
+ id: "53ac6a16-11c8-52c7-967a-4756352cedd3",
+ firstName: "Eleanor",
+ lastName: "Ellis",
+ email: "urdon@re.vg",
+ },
+ },
+ {
+ id: "10691cf1-28ce-5ec7-8eac-812e8eb623cb",
+ title: "Adidas Flyer",
+ price: 59,
+ img: img6,
+ shortDescription:
+ "Est elit ullamco do aute elit consequat mollit nisi Lorem elit labore nulla aliqua.",
+ longDescription:
+ "Cillum excepteur incididunt culpa laboris esse voluptate irure ex adipisicing. Dolor non pariatur quis est exercitation dolore reprehenderit aliquip minim est sunt sint sit do. Aute cupidatat occaecat reprehenderit nostrud fugiat quis cupidatat deserunt.",
+ isFavorite: false,
+ createdAt: "2021-04-23T09:12:24.2424+02",
+ updatedAt: "2021-04-23T09:12:24.2424+02",
+ unitsInStock: 8,
+ quantity: 0,
+ votes: {
+ upVotes: {
+ upperLimit: 10,
+ currentValue: 0,
+ },
+ downVotes: {
+ lowerLimit: 10,
+ currentValue: 0,
+ },
+ },
+ author: {
+ id: "d77faf0e-d84a-59f3-9778-b95ca29209a1",
+ firstName: "Ethan",
+ lastName: "Sharp",
+ email: "kasmahve@doduttip.ps",
+ },
+ },
+];
+
+export default products;
diff --git a/src/utils/loadLocalStorageItems.js b/src/utils/loadLocalStorageItems.js
new file mode 100644
index 0000000..2cf8bc6
--- /dev/null
+++ b/src/utils/loadLocalStorageItems.js
@@ -0,0 +1,15 @@
+function loadLocalStorageItems(storageKey, defaultValue) {
+ const data = localStorage.getItem(storageKey);
+
+ if (data) {
+ try {
+ return JSON.parse(data);
+ } catch (error) {
+ return defaultValue;
+ }
+ } else {
+ return defaultValue;
+ }
+}
+
+export default loadLocalStorageItems;
diff --git a/src/utils/test-assets/test-img.jpg b/src/utils/test-assets/test-img.jpg
new file mode 100644
index 0000000..afd29a9
Binary files /dev/null and b/src/utils/test-assets/test-img.jpg differ
diff --git a/src/utils/test-utils.js b/src/utils/test-utils.js
new file mode 100644
index 0000000..94b3315
--- /dev/null
+++ b/src/utils/test-utils.js
@@ -0,0 +1,93 @@
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { createStore, combineReducers, applyMiddleware } from "redux";
+import { Provider } from "react-redux";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import thunk from "redux-thunk";
+
+import testProductImage from "./test-assets/test-img.jpg";
+
+function defaultReducer(state = {}, action) {
+ switch (action.type) {
+ default: {
+ return state;
+ }
+ }
+}
+
+// we don't need this for now
+const rootReducer = combineReducers({
+ data: defaultReducer,
+});
+
+/**
+ * Wraps the component in the Redux and React Router DOM
+ * Context Providers
+ * @param {React Component} component The React Component
+ * @param {Object} options { initialState, store }
+ * @param {String} route React Router Route = "/"
+ * @returns {Function} render()
+ */
+function renderWithReduxAndRouter(component, options = {}, route = "/") {
+ const {
+ initialState = {},
+ store = createStore(rootReducer, initialState, applyMiddleware(thunk)),
+ } = options;
+
+ return render(
+
+
+