@@ -7,10 +7,12 @@ const functions = require("firebase-functions");
 // response.send("Hello from Firebase!");
 // });
 
+// set env vars: gcloud functions deploy FUNCTION_NAME --set-env-vars FOO=bar , get env vars : process.env.FOO
+
 const express = require("express");
 const cors = require("cors");
 const stripe = require("stripe")(
-"sk_test_51HeTtQImEgmfO9dxsYTv9vHitaqlfq2bW9QkRUzO89Uya2IlzyiJxbMiPY0GNF7sfaKMdWw8GarT0oxCjPZ9jTAf00I0kzR0bU"
+process.env.STRIPE_KEY
 );
 
 // - App Config

@@ -71,10 +71,7 @@ const Header = () => {
 <p>Electronics</p>
 <p>Home</p>
 <p>Baby</p>
-<p>Toys & Game</p>
-<p>Women's Clothing</p>
-<p>Men's Clothing</p>
-<p>Shoes</p>
+
 
 </div>
 </Drawer>

@@ -44,3 +44,10 @@ code {
 font-size: 1.2rem !important;
 }
 
+.image-gallery-thumbnail-image {
+width: 60% !important;
+}
+
+.image-gallery-image {
+width: 80% !important;
+}

@@ -4,10 +4,13 @@ import { selectUser } from "../../redux/userSlice";
 import { useSelector } from "react-redux";
 import Order from "./../../components/order/Order";
 import Spinner from "react-bootstrap/Spinner";
+import { useNavigate } from "react-router-dom";
+import { Result } from "antd";
 
 const Orders = () => {
 const [orders, setOrders] = useState([]);
 const user = useSelector(selectUser);
+const navigate = useNavigate();
 
 useEffect(() => {
 let mounted = true;
@@ -28,13 +31,23 @@ const Orders = () => {
 });
 } else {
 setOrders([]);
+navigate("/auth");
 }
 return () => (mounted = false);
-}, [user]);
+}, [user, navigate]);
 
 return (
 <div className="orders">
-<h1>Your Orders</h1>
+{orders.length > 0 ? (
+<h1>Your Orders</h1>
+) : (
+<Result
+status="404"
+title="no order found"
+subTitle="Oops! you don't have any orders"
+/>
+)}
+
 <div className="orders__order">
 {orders ? (
 orders.map((order) => <Order order={order} key={order.id} />)

@@ -102,7 +102,7 @@ const Payment = () => {
 </div>
 <div className="payment__address">
 <p>{user?.name}</p>
-<p>22 porana rd </p>
+<p>18 Great South Rd </p>
 <p>Auckland , New Zealand</p>
 </div>
 </div>

@@ -1,17 +1,48 @@
 import React from "react";
 import { useDis } from "react-redux";
 import { Button } from "react-bootstrap";
-import { useParams,useNavigate } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { selectProduct } from "../../redux/productSelector";
 import { ReactComponent as AddToCart } from "../../assets/add_shopping_cart.svg";
 import { addItem } from "../../redux/cartSlice";
 import ImageGallery from "react-image-gallery";
 import "react-image-gallery/styles/css/image-gallery.css";
-import { Modal } from 'antd';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { Modal } from "antd";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { selectProducts } from "../../redux/productsSlice";
+import ProductCard from "../../components/card/ProductCard";
+
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+
 
 const Product = () => {
+//related slider
+let slidesToShow;
+const width =
+window.innerWidth ||
+document.documentElement.clientWidth ||
+document.body.clientWidth;
+if (width > 1024) {
+slidesToShow = 7;
+} else if (width > 768) {
+slidesToShow = 5;
+} else if(width === 768) {
+slidesToShow = 4;
+} else {
+slidesToShow = 1;
+}
+
+const settings = {
+infinite: true,
+speed: 500,
+slidesToShow,
+slidesToScroll: 1,
+};
+
 const dis = useDis();
 const navigate = useNavigate();
 const { productId } = useParams();
@@ -27,6 +58,8 @@ const Product = () => {
 gallery,
 } = useSelector((state) => selectProduct(state, productId));
 
+const products = useSelector(selectProducts);
+
 const formatedPrice = price.toLocaleString("en-US", {
 style: "currency",
 currency: "USD",
@@ -43,56 +76,67 @@ const Product = () => {
 productId,
 active,
 })
-)
+);
 Modal.confirm({
-title: 'Product added to your cart',
+title: "Product added to your cart",
 icon: <ExclamationCircleOutlined />,
 content: `You've added the ${title} to your cart`,
-okText: 'Continue Shopping',
-cancelText: 'Proceed to Checkout',
-onOk:()=> navigate('/shop'),
-onCancel:()=> navigate('/checkout')
+okText: "Continue Shopping",
+cancelText: "Proceed to Checkout",
+onOk: () => navigate("/shop"),
+onCancel: () => navigate("/checkout"),
 });
-}
+};
+
 return (
-<div className="product">
-<div className="product__gallery">
-<ImageGallery
-items={gallery}
-showNav={false}
-thumbnailPosition={"left"}
-showPlayButton={false}
-/>
-</div>
-<div className="product__description">
-<div className="product__description__title">{title}</div>
-<div className="product__description__brand">
-<span>Brand: </span>
-{brand}
+<div>
+<div className="product">
+<div className="product__gallery">
+<ImageGallery
+items={gallery}
+showNav={false}
+thumbnailPosition={"left"}
+showPlayButton={false}
+/>
 </div>
-<div className="product__description__price">
-<span>Price: </span> <span>{formatedPrice}</span>
+<div className="product__description">
+<div className="product__description__title">{title}</div>
+<div className="product__description__brand">
+<span>Brand: </span>
+{brand}
+</div>
+<div className="product__description__price">
+<span>Price: </span> <span>{formatedPrice}</span>
+</div>
+<div className="product__description__line" />
+<div className="product__description__content">
+<ul>
+{descriptions.map((el, index) => (
+<li key={index}>{el}</li>
+))}
+</ul>
+</div>
 </div>
-<div className="product__description__line" />
-<div className="product__description__content">
-<ul>
-{descriptions.map((el, index) => (
-<li key={index}>{el}</li>
-))}
-</ul>
+<div className="product__cart">
+<div className="product__cart__price">{formatedPrice}</div>
+<div className="product__cart__button">
+<Button
+block
+className="checkout__subtotal__button"
+onClick={handleShopCart}
+>
+<AddToCart /> <span>Add to Cart</span>
+</Button>
+</div>
 </div>
 </div>
-<div className="product__cart">
-<div className="product__cart__price">{formatedPrice}</div>
-<div className="product__cart__button">
-<Button
-block
-className="checkout__subtotal__button"
-onClick={handleShopCart}
->
-<AddToCart /> <span>Add to Cart</span>
-</Button>
-</div>
+<div className="product__related">
+<h3>Inspired by your recent shopping trends</h3>
+<Slider {...settings}>
+{products.map(({ id, ...props }) => (
+<ProductCard key={id} productId={id} {...props} />
+))}
+</Slider>
 </div>
 </div>
 );

@@ -1,7 +1,5 @@
 .product {
-
 @include breakpoint(l) {
-
 display: flex;
 }
 justify-content: space-between;
@@ -45,7 +43,7 @@
 margin: 1.5rem 0;
 }
 
-&__content li {
+&__content li {
 padding-bottom: 1rem;
 line-height: 1.5;
 }
@@ -65,9 +63,20 @@
 margin: 1rem;
 padding: 1rem;
 &__price {
-margin-bottom: 1rem;
-color: $text-color-red;
-font-weight: 600;
+margin-bottom: 1rem;
+color: $text-color-red;
+font-weight: 600;
+}
+}
+
+&__related {
+margin: 2rem;
+@include breakpoint(l) {
+margin: 4rem;
+}
+
+& > h3 {
+color: $secondary-color-dark;
 }
 }
 }