New Release (#371)

* Custom Checkout Progress

* Updates to Checkout

* Custom Checkout Progress

* Adding tabs

* Adding Collapse

* Adding Collapse

* Improving Sidebar Scroll

* Modif footer

* Changes

* More design updates

* sidebar cart

* More design updates

* More design updates

* More design updates

* More design updates

* Types

* Types

* Design Updates

* More changes

* More changes

* More changes

* Changes

* Changes

* Changes

* New tailwind required changes

* Sidebar Styling issues with Mobile

* Latest changes - Normalizing cart

* Styling Fixes

* New changes

* Changes

* latest

* Refactor and Renaming some UI Props

* Adding Quantity Component

* Adding Rating Component

* Rating Component

* More updates

* User Select disabled, plus hidding horizontal scroll bars

* Changes

* Adding ProductOptions Component and more helpers

* Styling updates

* Styling updates

* Fix for slim tags

* Missmatch with RightArrow

* Footer updates and some styles

* Latest Updates

* Latest Updates

* Latest Updates

* Removing Portal, since it's not needed. We might add it later I'd rather not to.

* Removing Portal, since it's not needed. We might add it later I'd rather not to.

* Sam backdrop filter

* General UI Improvements

* General UI Improvements

* Search now with Geist Colors

* Now with Geist Colors

* Changes

* Scroll for Mobile on IOs devises

* LoadingDots Working (:

* Changes

* More Changes

* Perf changes

* More perf changes

* Fade to the Nametags in the ProductCard

* changes

* Search issue ui

* Search issue ui

* Make sure to only refresh navbar and modals when required

* Index revalidate

* Fixed image issue

* hide album scroll on windows

* Fix scrollbar

* Changing

* Adding 404 with Layout

* Removing Toast

* Adding Assets

* Adding Assets

* Progress with LocalProvider

* New productTag

* Only images for the drop

* changes

* Empty SWRhooks

* Adding Local Provider

* Working local

* Working view of a LocalProvider

* More updates

* Changes

* Removed react-ticker

* default to local if no env available

* default to local if no env available

* add missing `@` to css import

* rewrite search rewrites to multiple pages

* allow requests in getStaticProps to execute in parallel

* make type import explicit

* add a tsconfig.js file

* use local provider in tsconfig.js

* avoid a circular dependency

* Saleor was not in the providers list

* avoid circular dependency in bigcommerce

* Adding more to the Local Provider (#366)

* Adding more data

* Adding more data

* optimize assets (#370)

* Optimize assets (#372)

* optimize assets

* remove assets

* remove assets

* cart enabled

* Adding saleor

* Changes with Webpack

* Changes

Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: Shu Ding <g@shud.in>

components/cart/CartItem/CartItem.module.css

@@ -1,6 +1,14 @@
+.root {
+  @apply flex flex-col py-4;
+}
+
+.root:first-child {
+  padding-top: 0;
+}
+
 .quantity {
   appearance: textfield;
-  @apply w-8 border-accents-2 border mx-3 rounded text-center text-sm text-black;
+  @apply w-8 border-accent-2 border mx-3 rounded text-center text-sm text-black;
 }
 
 .quantity::-webkit-outer-spin-button,
@@ -15,4 +23,10 @@
   height: 100%;
   left: 30% !important;
   top: 30% !important;
+  z-index: 1;
+}
+
+.productName {
+  @apply font-medium cursor-pointer pb-1;
+  margin-top: -4px;
 }

components/cart/CartItem/CartItem.tsx

@@ -1,14 +1,15 @@
-import { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, FocusEventHandler, useEffect, useState } from 'react'
 import cn from 'classnames'
 import Image from 'next/image'
 import Link from 'next/link'
 import s from './CartItem.module.css'
-import { Trash, Plus, Minus } from '@components/icons'
+import { Trash, Plus, Minus, Cross } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import type { LineItem } from '@commerce/types/cart'
 import usePrice from '@framework/product/use-price'
 import useUpdateItem from '@framework/cart/use-update-item'
 import useRemoveItem from '@framework/cart/use-remove-item'
+import Quantity from '@components/ui/Quantity'
 
 type ItemOption = {
   name: string
@@ -19,13 +20,19 @@ type ItemOption = {
 
 const CartItem = ({
   item,
+  variant = 'default',
   currencyCode,
   ...rest
 }: {
+  variant?: 'default' | 'display'
   item: LineItem
   currencyCode: string
 }) => {
   const { closeSidebarIfPresent } = useUI()
+  const [removing, setRemoving] = useState(false)
+  const [quantity, setQuantity] = useState<number>(item.quantity)
+  const removeItem = useRemoveItem()
+  const updateItem = useUpdateItem({ item })
 
   const { price } = usePrice({
     amount: item.variant.price * item.quantity,
@@ -33,48 +40,28 @@ const CartItem = ({
     currencyCode,
   })
 
-  const updateItem = useUpdateItem({ item })
-  const removeItem = useRemoveItem()
-  const [quantity, setQuantity] = useState<number | ''>(item.quantity)
-  const [removing, setRemoving] = useState(false)
+  const handleChange = async ({
+    target: { value },
+  }: ChangeEvent<HTMLInputElement>) => {
+    setQuantity(Number(value))
+    await updateItem({ quantity: Number(value) })
+  }
 
-  const updateQuantity = async (val: number) => {
+  const increaseQuantity = async (n = 1) => {
+    const val = Number(quantity) + n
+    setQuantity(val)
     await updateItem({ quantity: val })
   }
 
-  const handleQuantity = (e: ChangeEvent<HTMLInputElement>) => {
-    const val = !e.target.value ? '' : Number(e.target.value)
-
-    if (!val || (Number.isInteger(val) && val >= 0)) {
-      setQuantity(val)
-    }
-  }
-  const handleBlur = () => {
-    const val = Number(quantity)
-
-    if (val !== item.quantity) {
-      updateQuantity(val)
-    }
-  }
-  const increaseQuantity = (n = 1) => {
-    const val = Number(quantity) + n
-
-    if (Number.isInteger(val) && val >= 0) {
-      setQuantity(val)
-      updateQuantity(val)
-    }
-  }
   const handleRemove = async () => {
     setRemoving(true)
-
     try {
-      // If this action succeeds then there's no need to do `setRemoving(true)`
-      // because the component will be removed from the view
       await removeItem(item)
     } catch (error) {
       setRemoving(false)
     }
   }
+
   // TODO: Add a type for this
   const options = (item as any).options
 
@@ -87,79 +74,76 @@ const CartItem = ({
 
   return (
     <li
-      className={cn('flex flex-row space-x-8 py-8', {
-        'opacity-75 pointer-events-none': removing,
+      className={cn(s.root, {
+        'opacity-50 pointer-events-none': removing,
       })}
       {...rest}
     >
-      <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer">
-        <Link href={`/product/${item.path}`}>
-          <Image
-            onClick={() => closeSidebarIfPresent()}
-            className={s.productImage}
-            width={150}
-            height={150}
-            src={item.variant.image!.url}
-            alt={item.variant.image!.altText}
-            unoptimized
-          />
-        </Link>
-      </div>
-      <div className="flex-1 flex flex-col text-base">
-        <Link href={`/product/${item.path}`}>
-          <span
-            onClick={() => closeSidebarIfPresent()}
-          >
-            <div
-              className="font-bold text-lg cursor-pointer leading-6"
+      <div className="flex flex-row space-x-4 py-4">
+        <div className="w-16 h-16 bg-violet relative overflow-hidden cursor-pointer z-0">
+          <Link href={`/product/${item.path}`}>
+            <Image
+              onClick={() => closeSidebarIfPresent()}
+              className={s.productImage}
+              width={150}
+              height={150}
+              src={item.variant.image!.url}
+              alt={item.variant.image!.altText}
+              unoptimized
+            />
+          </Link>
+        </div>
+        <div className="flex-1 flex flex-col text-base">
+          <Link href={`/product/${item.path}`}>
+            <span
+              className={s.productName}
+              onClick={() => closeSidebarIfPresent()}
             >
               {item.name}
+            </span>
+          </Link>
+          {options && options.length > 0 && (
+            <div className="flex items-center pb-1">
+              {options.map((option: ItemOption, i: number) => (
+                <div
+                  key={`${item.id}-${option.name}`}
+                  className="text-sm font-semibold text-accent-7 inline-flex items-center justify-center"
+                >
+                  {option.name}
+                  {option.name === 'Color' ? (
+                    <span
+                      className="mx-2 rounded-full bg-transparent border w-5 h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden"
+                      style={{
+                        backgroundColor: `${option.value}`,
+                      }}
+                    ></span>
+                  ) : (
+                    <span className="mx-2 rounded-full bg-transparent border h-5 p-1 text-accent-9 inline-flex items-center justify-center overflow-hidden">
+                      {option.value}
+                    </span>
+                  )}
+                  {i === options.length - 1 ? '' : <span className="mr-3" />}
+                </div>
+              ))}
             </div>
-            {item.variant ? <span> {item.variant.name}</span> : ""}
-          </span>
-        </Link>
-        {options && options.length > 0 ? (
-          <div className="">
-            {options.map((option: ItemOption, i: number) => (
-              <span
-                key={`${item.id}-${option.name}`}
-                className="text-sm font-semibold text-accents-7"
-              >
-                {option.value}
-                {i === options.length - 1 ? '' : ', '}
-              </span>
-            ))}
-          </div>
-        ) : null}
-        <div className="flex items-center mt-3">
-          <button type="button" onClick={() => increaseQuantity(-1)}>
-            <Minus width={18} height={18} />
-          </button>
-          <label>
-            <input
-              type="number"
-              max={99}
-              min={0}
-              className={s.quantity}
-              value={quantity}
-              onChange={handleQuantity}
-              onBlur={handleBlur}
-            />
-          </label>
-          <button type="button" onClick={() => increaseQuantity(1)}>
-            <Plus width={18} height={18} />
-          </button>
+          )}
+          {variant === 'display' && (
+            <div className="text-sm tracking-wider">{quantity}x</div>
+          )}
+        </div>
+        <div className="flex flex-col justify-between space-y-2 text-sm">
+          <span>{price}</span>
         </div>
       </div>
-      <div className="flex flex-col justify-between space-y-2 text-base">
-        <span>{price}</span>
-        <button
-          className="flex justify-end outline-none"
-          onClick={handleRemove}
-        >
-          <Trash />
-        </button>
-      </div>
+      {variant === 'default' && (
+        <Quantity
+          value={quantity}
+          handleRemove={handleRemove}
+          handleChange={handleChange}
+          increase={() => increaseQuantity(1)}
+          decrease={() => increaseQuantity(-1)}
+        />
+      )}
     </li>
   )
 }