From 025a89bc733a64c517967d633f9dc0e3db4beff1 Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Mon, 31 May 2021 18:00:55 -0300
Subject: [PATCH] Changes

---
 components/common/Footer/Footer.tsx           | 36 +++++++----------
 .../product/ProductCard/ProductCard.tsx       | 40 +++++++++++--------
 .../ProductView/ProductView.module.css        |  8 ++--
 .../product/ProductView/ProductView.tsx       | 39 +++++++++++++-----
 pages/product/[slug].tsx                      | 12 +++++-
 pages/search.tsx                              |  5 +--
 6 files changed, 85 insertions(+), 55 deletions(-)

diff --git a/components/common/Footer/Footer.tsx b/components/common/Footer/Footer.tsx
index f9f24b021..e2de8c240 100644
--- a/components/common/Footer/Footer.tsx
+++ b/components/common/Footer/Footer.tsx
@@ -16,6 +16,12 @@ interface Props {
 }
 
 const LEGAL_PAGES = ['terms-of-use', 'shipping-returns', 'privacy-policy']
+const links = [
+  {
+    name: 'Home',
+    href: '/',
+  },
+]
 
 const Footer: FC<Props> = ({ className, pages }) => {
   const { sitePages, legalPages } = usePages(pages)
@@ -37,27 +43,15 @@ const Footer: FC<Props> = ({ className, pages }) => {
           </div>
           <div className="col-span-1 lg:col-span-2">
             <ul className="flex flex-initial flex-col md:flex-1">
-              <li className="py-3 md:py-0 md:pb-4">
-                <Link href="/">
-                  <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
-                    Home
-                  </a>
-                </Link>
-              </li>
-              <li className="py-3 md:py-0 md:pb-4">
-                <Link href="/">
-                  <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
-                    Careers
-                  </a>
-                </Link>
-              </li>
-              <li className="py-3 md:py-0 md:pb-4">
-                <Link href="/blog">
-                  <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
-                    Blog
-                  </a>
-                </Link>
-              </li>
+              {links.map(({ href, name }) => (
+                <li className="py-3 md:py-0 md:pb-4">
+                  <Link href={href}>
+                    <a className="text-primary hover:text-accent-6 transition ease-in-out duration-150">
+                      {name}
+                    </a>
+                  </Link>
+                </li>
+              ))}
               {sitePages.map((page) => (
                 <li key={page.url} className="py-3 md:py-0 md:pb-4">
                   <Link href={page.url!}>
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index ade53380c..8949019e7 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -11,6 +11,7 @@ interface Props {
   product: Product
   variant?: 'slim' | 'simple'
   imgProps?: Omit<ImageProps, 'src'>
+  noNameTag: boolean
 }
 
 const placeholderImg = '/product-img-placeholder.svg'
@@ -20,17 +21,20 @@ const ProductCard: FC<Props> = ({
   product,
   variant,
   imgProps,
+  noNameTag = false,
   ...props
 }) => (
   <Link href={`/product/${product.slug}`} {...props}>
     <a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
       {variant === 'slim' ? (
-        <div className="relative overflow-hidden box-border">
-          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
-              {product.name}
-            </span>
-          </div>
+        <div className="relative overflow-hidden box-border ">
+          {!noNameTag && (
+            <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+              <span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
+                {product.name}
+              </span>
+            </div>
+          )}
           {product?.images && (
             <Image
               quality="85"
@@ -46,17 +50,19 @@ const ProductCard: FC<Props> = ({
       ) : (
         <>
           <div className={s.squareBg} />
-          <div className="flex flex-row justify-between box-border w-full z-20 absolute">
-            <div className="absolute top-0 left-0 pr-16 max-w-full">
-              <h3 className={s.productTitle}>
-                <span>{product.name}</span>
-              </h3>
-              <span className={s.productPrice}>
-                {product.price.value}
-                &nbsp;
-                {product.price.currencyCode}
-              </span>
-            </div>
+          <div className="flex flex-row justify-between box-border w-full z-20 absolute bg-red">
+            {!noNameTag && (
+              <div className="absolute top-0 left-0 pr-16 max-w-full">
+                <h3 className={s.productTitle}>
+                  <span>{product.name}</span>
+                </h3>
+                <span className={s.productPrice}>
+                  {product.price.value}
+                  &nbsp;
+                  {product.price.currencyCode}
+                </span>
+              </div>
+            )}
             {process.env.COMMERCE_WISHLIST_ENABLED && (
               <WishlistButton
                 className={s.wishlistButton}
diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css
index 0b67ba853..f0a7de5e6 100644
--- a/components/product/ProductView/ProductView.module.css
+++ b/components/product/ProductView/ProductView.module.css
@@ -69,7 +69,7 @@
   }
 }
 
-.img {
+.sliderContainer .img {
   @apply w-full h-auto max-h-full object-cover;
 }
 
@@ -84,9 +84,11 @@
 }
 
 .wishlistButton {
-  @apply absolute z-30 top-6 right-0 bg-primary text-primary w-10 h-10 flex items-center justify-center font-semibold leading-6 cursor-pointer;
+  @apply absolute z-30 top-6 right-0 bg-primary text-primary
+  w-10 h-10 flex items-center justify-center font-semibold
+  leading-6 cursor-pointer px-6;
 
   @screen lg {
-    @apply right-0 top-0 text-black bg-white w-14 h-14;
+    @apply top-6 right-0 text-black bg-white w-14 h-14;
   }
 }
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 7eae0adf7..a8e21ee1c 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -1,24 +1,27 @@
 import cn from 'classnames'
 import Image from 'next/image'
 import { NextSeo } from 'next-seo'
-import { FC, useEffect, useState } from 'react'
 import s from './ProductView.module.css'
-import { Swatch, ProductSlider } from '@components/product'
-import { Button, Container, Text, useUI } from '@components/ui'
+import { FC, useEffect, useState } from 'react'
 import type { Product } from '@commerce/types'
 import usePrice from '@framework/product/use-price'
-import { useAddItem } from '@framework/cart'
 import { getVariant, SelectedOptions } from '../helpers'
-import WishlistButton from '@components/wishlist/WishlistButton'
+import { Swatch, ProductSlider } from '@components/product'
+import { Button, Container, Text, useUI } from '@components/ui'
+import { useAddItem } from '@framework/cart'
 import Collapse from '@components/ui/Collapse'
+import Skeleton from '@components/ui/Skeleton'
+import ProductCard from '@components/product/ProductCard'
+import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
   children?: any
   product: Product
+  relatedProducts: Product[]
   className?: string
 }
 
-const ProductView: FC<Props> = ({ product }) => {
+const ProductView: FC<Props> = ({ product, relatedProducts }) => {
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
@@ -173,10 +176,28 @@ const ProductView: FC<Props> = ({ product }) => {
       </div>
       <section className="py-12 px-6">
         <Text variant="sectionHeading">Related Products</Text>
-        <div className="grid grid-cols-4 py-3 gap-5  h-48">
-          {Array.from({ length: 4 }).map((i) => (
-            <div className="bg-accent-6" />
+        <div className="grid grid-cols-4 py-3 gap-10">
+          {relatedProducts.map((p) => (
+            <div className="animated fadeIn bg-accent-0 border border-accent-3">
+              <ProductCard
+                variant="simple"
+                key={p.path}
+                className="animated fadeIn"
+                product={p}
+                noNameTag
+                imgProps={{
+                  width: 275,
+                  height: 275,
+                }}
+              />
+            </div>
           ))}
+          {/* {Array.from({ length: 4 }).map((_, i) => (
+            <Skeleton
+              key={i}
+              className="w-full animated fadeIn bg-accent-0 border border-accent-3"
+            />
+          ))} */}
         </div>
       </section>
     </Container>
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index 61420a8d9..ac2fcdad6 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -11,6 +11,7 @@ import { getConfig } from '@framework/api'
 import getProduct from '@framework/product/get-product'
 import getAllPages from '@framework/common/get-all-pages'
 import getAllProductPaths from '@framework/product/get-all-product-paths'
+import getAllProducts from '@framework/product/get-all-products'
 
 export async function getStaticProps({
   params,
@@ -19,6 +20,11 @@ export async function getStaticProps({
 }: GetStaticPropsContext<{ slug: string }>) {
   const config = getConfig({ locale })
   const { pages } = await getAllPages({ config, preview })
+  const { products: relatedProducts } = await getAllProducts({
+    variables: { first: 4 },
+    config,
+    preview,
+  })
   const { product } = await getProduct({
     variables: { slug: params!.slug },
     config,
@@ -33,6 +39,7 @@ export async function getStaticProps({
     props: {
       pages,
       product,
+      relatedProducts,
     },
     revalidate: 200,
   }
@@ -57,13 +64,14 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
 
 export default function Slug({
   product,
+  relatedProducts,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
 
   return router.isFallback ? (
-    <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
+    <h1>Loading...</h1>
   ) : (
-    <ProductView product={product as any} />
+    <ProductView product={product as any} relatedProducts={relatedProducts} />
   )
 }
 
diff --git a/pages/search.tsx b/pages/search.tsx
index 78f784572..424b4623b 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -325,8 +325,7 @@ export default function Search({
                       </>
                     ) : (
                       <>
-                        There are no products that match the selected category &
-                        designer
+                        There are no products that match the selected category.
                       </>
                     )}
                   </span>
@@ -362,7 +361,7 @@ export default function Search({
                 <Skeleton
                   key={i}
                   className="w-full animated fadeIn"
-                  height={325}
+                  height={480}
                 />
               ))}
             </Grid>