Solution: Luis Molina

.eslintrc.js

@@ -49,7 +49,7 @@ module.exports = {
     },
   ],
   rules: {
-    "prettier/prettier": "error",
+    "prettier/prettier": 0,
     "react/jsx-filename-extension": "off",
     "import/prefer-default-export": "off",
     "prefer-destructuring": "off",

package.json

@@ -18,12 +18,13 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-phone-input-2": "^2.15.0",
     "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
-    "sass": "^1.32.11",
+    "sass": "^1.49.9",
     "uuid": "^8.3.2",
     "web-vitals": "^1.1.1",
     "yup": "^0.32.9"

src/App.js

@@ -1,13 +1,17 @@
 import React, { useState, useEffect } from "react";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 
+// context
+import CheckoutContextProvider from "./components/CheckoutContextProvider"
 import Home from "./pages/Home";
 import NewProduct from "./pages/NewProduct";
 
 import * as api from "./api";
 
 import useLocalStorage from "./hooks/useLocalStorage";
 import loadLocalStorageItems from "./utils/loadLocalStorageItems";
+import Checkout from "./pages/Checkout/Checkout";
+import OverviewContextProvider from "./components/OverviewContextProvider/OverviewContextProvider";
 
 function buildNewCartItem(cartItem) {
   if (cartItem.quantity >= cartItem.unitsInStock) {
@@ -116,7 +120,7 @@ function App() {
       if (
         product.id === productId &&
         product.votes.downVotes.currentValue <
-          product.votes.downVotes.lowerLimit
+        product.votes.downVotes.lowerLimit
       ) {
         return {
           ...product,
@@ -178,7 +182,6 @@ function App() {
   function saveNewProduct(newProduct) {
     setProducts((prevState) => [newProduct, ...prevState]);
   }
-
   return (
     <BrowserRouter>
       <Switch>
@@ -201,8 +204,24 @@ function App() {
             handleChange={handleChange}
           />
         </Route>
+
+        <Route path="/checkout">
+
+          <OverviewContextProvider
+            cartItems={cartItems}
+            setCartItems={setCartItems}
+            handleChange={handleChange}
+            handleRemove={handleRemove}
+          >
+            <CheckoutContextProvider>
+              <Checkout fullWidth />
+            </CheckoutContextProvider>
+          </OverviewContextProvider>
+
+        </Route>
+
       </Switch>
-    </BrowserRouter>
+    </BrowserRouter >
   );
 }
 

src/assets/styles/_layout.scss

@@ -0,0 +1,31 @@
+.mflex {
+  display: flex;
+}
+.mrow {
+  flex-direction: row;
+}
+.mcol {
+  flex-direction: column;
+}
+.mjustify-center {
+  justify-content: center;
+}
+.mjustify-around {
+  justify-content: space-around;
+}
+.mjustify-between {
+  justify-content: space-between;
+}
+.malign-center {
+  align-items: center;
+}
+
+.mnoButton {
+  outline: none;
+  background-color: inherit;
+  border: none;
+}
+
+.bolder {
+  font-weight: bold;
+}

src/assets/styles/_variables.scss

@@ -0,0 +1,10 @@
+$darkPink: #f72585;
+$pink: #b5179e;
+$purple: #7209b7;
+$darkPurple: #560bad;
+$purpledBlue: #480ca8;
+$lightPurpledBlue: #3a0ca3;
+$darkBlue: #3f37c9;
+$blue: #4361ee;
+$lightBlue: #4895ef;
+$skyBlue: #4cc9f0;

src/components/Cart/Cart.js

@@ -1,18 +1,26 @@
 import React from "react";
 
+import { useHistory } from "react-router-dom";
 import ShoppingCartItem from "../ShoppingCartItem";
 import Button from "../Button";
 
-function getCartTotal(cart) {
+
+export function getCartTotal(cart) {
   return cart.reduce((accum, item) => {
     return accum + item.price * item.quantity;
   }, 0);
 }
 
 function Cart({ cartItems, handleRemove, handleChange, ...props }) {
+  const history = useHistory();
+
+  const goToCheckout = () => {
+    history.push("/checkout/step-1")
+  }
+
   return (
     <aside {...props}>
-      <div className="row flex-column">
+      <div className="row flex-column" data-testid="Cart">
         <div className="col shopping__cart__header">
           <h2 className="h3 mt-2">Shopping Cart</h2>
           <hr className="mb-3" />
@@ -49,7 +57,7 @@ function Cart({ cartItems, handleRemove, handleChange, ...props }) {
               <hr />
             </div>
             <div className="col">
-              <Button>Checkout</Button>
+              <Button disabled={cartItems.length === 0} onClick={goToCheckout} >Checkout</Button>
             </div>
           </div>
         </div>

src/components/Cart/cart.test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from '@testing-library/react'
+import Cart from "./Cart"
+
+describe("Given a Cart component", () => {
+    test("Then should render", () => {
+        render(<Cart />)
+        expect(screen.getByTestId("Cart")).toBeInTheDocument()
+    })
+})

src/components/CheckoutContextProvider/CheckoutContextProvider.js

@@ -0,0 +1,147 @@
+import React, { useReducer, useContext, useEffect } from "react";
+import { useHistory } from "react-router-dom";
+// uuid 
+import { v4 as uuid } from "uuid"
+// context
+import { CheckoutContext } from "../../context/CheckoutContext";
+import { OverviewContext } from "../../context/OverviewContext";
+
+const initialState = {
+    personalInfo: {},
+    billingAddress: {},
+    payment: {},
+    orderID: uuid(),
+    actualStep: 1,
+    temporaryStorage: true
+}
+
+
+function checkoutReducer(state, action) {
+    const { type, nameForm, payload } = action
+    switch (type) {
+        case "FINISH_CHECKOUT":
+            return {
+                ...state,
+                actualStep: 1,
+                temporaryStorage: false
+
+            }
+        case "SET_INFO":
+            // sets the info dynamiclly, and sums 1 to go for next step
+            return {
+                ...state,
+                actualStep: state.actualStep + 1,
+                [nameForm]: payload
+            }
+        case "SET_STEP":
+            return {
+                ...state,
+                actualStep: payload
+            }
+        default:
+            return {
+                ...state
+            }
+    }
+}
+
+const checkInitialState = () => {
+    if (localStorage.getItem("checkoutInfo")) {
+        return {
+            ...JSON.parse(localStorage.getItem("checkoutInfo")),
+            actualStep: 1
+        }
+    }
+    // temporal checkout for user refresh
+    if (localStorage.getItem("tempCheckout")) {
+        return JSON.parse(localStorage.getItem("tempCheckout"))
+    }
+    return initialState
+}
+
+export default function CheckoutContextProvider({ children }) {
+    const [checkoutState, dispatch] = useReducer(
+        checkoutReducer, checkInitialState()
+    )
+    const { setCartItems } = useContext(OverviewContext)
+    const history = useHistory()
+    const {
+        personalInfo,
+        billingAddress,
+        payment,
+        actualStep,
+        temporaryStorage,
+        orderID
+    } = checkoutState
+
+    useEffect(() => {
+        if (temporaryStorage) {
+            return localStorage.setItem("tempCheckout", JSON.stringify(checkoutState))
+        }
+        return localStorage.removeItem("tempCheckout")
+    }, [checkoutState])
+
+    useEffect(() => {
+        const location = history.location.pathname.split("/")[2]
+        // const step = parseInt(location.substring(5, 6), 10)
+        if (location !== `step-${actualStep}`) {
+            history.push(`/checkout/step-${actualStep}`)
+        }
+
+    }, [])
+
+
+    const setFormInfo = (nameForm, data) => {
+        dispatch({
+            type: "SET_INFO",
+            nameForm: nameForm,
+            payload: data
+        })
+    }
+
+    const setStep = (step) => {
+        dispatch({
+            type: "SET_STEP",
+            payload: step
+        })
+
+        return history.push(`/checkout/step-${step}`)
+    }
+
+    const setCheckoutDone = (saveUserInfo) => {
+        if (saveUserInfo) {
+            localStorage.setItem("checkoutInfo", JSON.stringify({
+                personalInfo,
+                billingAddress,
+                payment
+            })
+            )
+        } else {
+            localStorage.removeItem("checkoutInfo")
+        }
+        dispatch({
+            type: "FINISH_CHECKOUT",
+            payload: saveUserInfo
+        })
+        /* this state returns us to home, because condition in overview,
+            if cart is empty, go back to home
+        */
+        setCartItems([])
+
+    }
+
+    return (
+        <CheckoutContext.Provider value={{
+            setFormInfo: setFormInfo,
+            setStep: setStep,
+            setCheckoutDone: setCheckoutDone,
+            orderID: orderID,
+            personalInfo: personalInfo,
+            billingAddress: billingAddress,
+            payment: payment,
+            actualStep: checkoutState.actualStep
+        }}>
+            {children}
+        </CheckoutContext.Provider>
+    )
+}

src/components/CheckoutContextProvider/index.js

@@ -0,0 +1 @@
+export { default } from "./CheckoutContextProvider"