Merge branch 'custom-checkout' into improvements

components/common/Searchbar/Searchbar.module.css

@@ -4,10 +4,10 @@
 
 .input {
   @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out pr-10;
+}
 
-  @screen sm {
+.input::placeholder {
-    min-width: 300px;
+  @apply text-accent-3;
-  }
 }
 
 .input:focus {
@@ -21,3 +21,9 @@
 .icon {
   @apply h-5 w-5;
 }
+
+@screen sm {
+  .input {
+    min-width: 300px;
+  }
+}

components/product/ProductCard/ProductCard.module.css

@@ -1,7 +1,7 @@
 .root {
   @apply relative max-h-full w-full box-border overflow-hidden
   bg-no-repeat bg-center bg-cover transition-transform
-  ease-linear cursor-pointer inline-block;
+  ease-linear cursor-pointer inline-block bg-accent-1;
   height: 100% !important;
 
   &:hover {
@@ -96,3 +96,11 @@
 .productImage {
   @apply transform transition-transform duration-500 object-cover scale-120;
 }
+
+.slim {
+  @apply bg-transparent relative overflow-hidden box-border;
+}
+
+.slim .tag {
+  @apply bg-secondary text-secondary inline-block p-3 font-bold text-xl break-words;
+}

components/product/ProductCard/ProductCard.tsx

@@ -34,24 +34,20 @@ const ProductCard: FC<Props> = ({
     >
       {variant === 'slim' && (
         <>
-          <div className="relative overflow-hidden box-border ">
+          <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+            <span className={s.tag}>{product.name}</span>
-              <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"
-                src={product.images[0].url || placeholderImg}
-                alt={product.name || 'Product Image'}
-                height={320}
-                width={320}
-                layout="fixed"
-                {...imgProps}
-              />
-            )}
           </div>
+          {product?.images && (
+            <Image
+              quality="85"
+              src={product.images[0].url || placeholderImg}
+              alt={product.name || 'Product Image'}
+              height={320}
+              width={320}
+              layout="fixed"
+              {...imgProps}
+            />
+          )}
         </>
       )}
 

components/product/ProductOptions/ProductOptions.tsx

@@ -0,0 +1,51 @@
+import { Swatch } from '@components/product'
+import type { ProductOption } from '@commerce/types/product'
+import { SelectedOptions } from '../helpers'
+
+interface ProductOptionsProps {
+  options: ProductOption[]
+  selectedOptions: SelectedOptions
+  setSelectedOptions: React.Dispatch<React.SetStateAction<SelectedOptions>>
+}
+
+const ProductOptions: React.FC<ProductOptionsProps> = ({
+  options,
+  selectedOptions,
+  setSelectedOptions,
+}) => {
+  return (
+    <div>
+      {options.map((opt) => (
+        <div className="pb-4" key={opt.displayName}>
+          <h2 className="uppercase font-medium text-sm tracking-wide">
+            {opt.displayName}
+          </h2>
+          <div className="flex flex-row py-4">
+            {opt.values.map((v, i: number) => {
+              const active = selectedOptions[opt.displayName.toLowerCase()]
+              return (
+                <Swatch
+                  key={`${opt.id}-${i}`}
+                  active={v.label.toLowerCase() === active}
+                  variant={opt.displayName}
+                  color={v.hexColors ? v.hexColors[0] : ''}
+                  label={v.label}
+                  onClick={() => {
+                    setSelectedOptions((selectedOptions) => {
+                      return {
+                        ...selectedOptions,
+                        [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
+                      }
+                    })
+                  }}
+                />
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default ProductOptions

components/product/ProductOptions/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductOptions'

components/product/ProductView/ProductView.tsx

@@ -5,47 +5,46 @@ import s from './ProductView.module.css'
 import { FC, useEffect, useState } from 'react'
 import type { Product } from '@commerce/types/product'
 import usePrice from '@framework/product/use-price'
-import { getVariant, SelectedOptions } from '../helpers'
+import {
-import { Swatch, ProductSlider } from '@components/product'
+  getProductVariant,
-import { Button, Container, Text, useUI } from '@components/ui'
+  selectDefaultOptionFromProduct,
+  SelectedOptions,
+} from '../helpers'
 import { useAddItem } from '@framework/cart'
-import Rating from '@components/ui/Rating'
+import { WishlistButton } from '@components/wishlist'
-import Collapse from '@components/ui/Collapse'
+import { ProductSlider, ProductCard, ProductOptions } from '@components/product'
-import ProductCard from '@components/product/ProductCard'
+import {
-import WishlistButton from '@components/wishlist/WishlistButton'
+  Button,
+  Container,
+  Text,
+  useUI,
+  Rating,
+  Collapse,
+} from '@components/ui'
 
-interface Props {
+interface ProductViewProps {
-  children?: any
   product: Product
-  relatedProducts: Product[]
   className?: string
+  relatedProducts: Product[]
+  children?: React.ReactNode
 }
 
-const ProductView: FC<Props> = ({ product, relatedProducts }) => {
+const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
-  // TODO: fix this missing argument issue
+  const { openSidebar } = useUI()
-  /* @ts-ignore */
+  const [loading, setLoading] = useState(false)
+  const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({})
   const addItem = useAddItem()
   const { price } = usePrice({
     amount: product.price.value,
     baseAmount: product.price.retailPrice,
     currencyCode: product.price.currencyCode!,
   })
-  const { openSidebar } = useUI()
-  const [loading, setLoading] = useState(false)
-  const [choices, setChoices] = useState<SelectedOptions>({})
 
   useEffect(() => {
-    // Selects the default option
+    selectDefaultOptionFromProduct(product, setSelectedOptions)
-    product.variants[0].options?.forEach((v) => {
-      setChoices((choices) => ({
-        ...choices,
-        [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
-      }))
-    })
   }, [])
 
-  const variant = getVariant(product, choices)
+  const variant = getProductVariant(product, selectedOptions)
-
   const addToCart = async () => {
     setLoading(true)
     try {
@@ -84,9 +83,7 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
           <div className={s.nameBox}>
             <h1 className={s.name}>{product.name}</h1>
             <div className={s.price}>
-              {price}
+              {`${price} ${product.price?.currencyCode}`}
-              {` `}
-              {product.price?.currencyCode}
             </div>
           </div>
 
@@ -116,43 +113,15 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
           )}
         </div>
         <div className={s.sidebar}>
-          <section>
+          <ProductOptions
-            {product.options?.map((opt) => (
+            options={product.options}
-              <div className="pb-4" key={opt.displayName}>
+            selectedOptions={selectedOptions}
-                <h2 className="uppercase font-medium text-sm tracking-wide">
+            setSelectedOptions={setSelectedOptions}
-                  {opt.displayName}
+          />
-                </h2>
+          <Text
-                <div className="flex flex-row py-4">
+            className="pb-4 break-words w-full max-w-xl"
-                  {opt.values.map((v, i: number) => {
+            html={product.descriptionHtml || product.description}
-                    const active = (choices as any)[
+          />
-                      opt.displayName.toLowerCase()
-                    ]
-
-                    return (
-                      <Swatch
-                        key={`${opt.id}-${i}`}
-                        active={v.label.toLowerCase() === active}
-                        variant={opt.displayName}
-                        color={v.hexColors ? v.hexColors[0] : ''}
-                        label={v.label}
-                        onClick={() => {
-                          setChoices((choices) => {
-                            return {
-                              ...choices,
-                              [opt.displayName.toLowerCase()]: v.label.toLowerCase(),
-                            }
-                          })
-                        }}
-                      />
-                    )
-                  })}
-                </div>
-              </div>
-            ))}
-            <div className="pb-4 break-words w-full max-w-xl">
-              <Text html={product.descriptionHtml || product.description} />
-            </div>
-          </section>
           <div className="flex flex-row justify-between items-center">
             <Rating value={2} />
             <div className="text-accent-6 pr-1 font-medium select-none">
@@ -173,13 +142,12 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
                 : 'Add To Cart'}
             </Button>
           </div>
-
           <div className="mt-6">
-            <Collapse title="Details">
+            <Collapse title="Care">
               This is a limited edition production run. Printing starts when the
               drop ends.
             </Collapse>
-            <Collapse title="Care">
+            <Collapse title="Details">
               This is a limited edition production run. Printing starts when the
               drop ends. Reminder: Bad Boys For Life. Shipping may take 10+ days
               due to COVID-19.

components/product/helpers.ts

@@ -1,7 +1,8 @@
 import type { Product } from '@commerce/types/product'
 export type SelectedOptions = Record<string, string | null>
+import { Dispatch, SetStateAction } from 'react'
 
-export function getVariant(product: Product, opts: SelectedOptions) {
+export function getProductVariant(product: Product, opts: SelectedOptions) {
   const variant = product.variants.find((variant) => {
     return Object.entries(opts).every(([key, value]) =>
       variant.options.find((option) => {
@@ -16,3 +17,16 @@ export function getVariant(product: Product, opts: SelectedOptions) {
   })
   return variant
 }
+
+export function selectDefaultOptionFromProduct(
+  product: Product,
+  updater: Dispatch<SetStateAction<SelectedOptions>>
+) {
+  // Selects the default option
+  product.variants[0].options?.forEach((v) => {
+    updater((choices) => ({
+      ...choices,
+      [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
+    }))
+  })
+}

components/product/index.ts

@@ -2,3 +2,4 @@ export { default as Swatch } from './Swatch'
 export { default as ProductView } from './ProductView'
 export { default as ProductCard } from './ProductCard'
 export { default as ProductSlider } from './ProductSlider'
+export { default as ProductOptions } from './ProductOptions'

components/ui/Collapse/Collapse.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply border-b border-accent-2 py-4 flex flex-col;
+  @apply border-b border-accent-2 py-4 flex flex-col outline-none;
 }
 
 .header {

components/ui/Grid/Grid.module.css

@@ -1,6 +1,6 @@
 .root {
-  --row-height: calc(100vh - 88px);
   @apply grid grid-cols-1 gap-0;
+  --row-height: calc(100vh - 88px);
   min-height: var(--row-height);
 
   @screen lg {
@@ -27,9 +27,17 @@
 
 .layoutNormal {
   @apply gap-3;
+}
 
-  & > * {
+@screen md {
-    min-height: 325px;
+  .layoutNormal > * {
+    max-height: min-content !important;
+  }
+}
+
+@screen lg {
+  .layoutNormal > * {
+    max-height: 400px;
   }
 }
 

components/ui/Hero/Hero.module.css

@@ -1,6 +1,18 @@
 .root {
-  @apply mx-auto grid grid-cols-1 py-32 gap-4;
+  @apply flex flex-col py-32 mx-auto;
-  @screen md {
+}
-    @apply grid-cols-2;
+
+.headline {
+  @apply text-accent-0 font-extrabold text-5xl leading-none tracking-tight;
+}
+
+@screen md {
+  .root {
+    @apply flex-row items-center justify-center;
+  }
+
+  .headline {
+    @apply text-6xl max-w-xl text-right leading-10 -mt-3;
+    line-height: 4rem;
   }
 }

components/ui/Hero/Hero.tsx

@@ -11,18 +11,16 @@ interface HeroProps {
 
 const Hero: FC<HeroProps> = ({ headline, description }) => {
   return (
-    <div className="bg-black">
+    <div className="bg-accent-9 border-b border-t border-accent-2">
       <Container>
         <div className={s.root}>
-          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+          <h2 className={s.headline}>{headline}</h2>
-            {headline}
+          <div className="md:ml-6">
-          </h2>
+            <p className="mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl">
-          <div className="flex flex-col justify-between">
-            <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
               {description}
             </p>
-            <Link href="/blog">
+            <Link href="/">
-              <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+              <a className="text-accent-0 pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
                 Read it here
                 <RightArrow width="20" heigh="20" className="ml-1" />
               </a>

components/ui/Marquee/Marquee.module.css

@@ -1,6 +1,6 @@
 .root {
   @apply w-full relative;
-  height: 320px;
+  height: 360px;
   min-width: 100%;
 }
 
@@ -10,13 +10,13 @@
 
 .container > * {
   @apply relative flex-1 px-16 py-4 h-full;
-  min-height: 320px;
+  min-height: 360px;
 }
 
 .primary {
-  @apply bg-white;
+  @apply bg-accent-0;
 }
 
 .secondary {
-  @apply bg-black;
+  @apply bg-accent-9;
 }

components/ui/Marquee/Marquee.tsx

@@ -1,6 +1,6 @@
 import cn from 'classnames'
 import s from './Marquee.module.css'
-import { FC, ReactNode, Component } from 'react'
+import { FC, ReactNode, Component, Children, isValidElement } from 'react'
 import Ticker from 'react-ticker'
 
 interface MarqueeProps {
@@ -26,7 +26,22 @@ const Marquee: FC<MarqueeProps> = ({
   return (
     <div className={rootClassName}>
       <Ticker offset={80}>
-        {() => <div className={s.container}>{children}</div>}
+        {() => (
+          <div className={s.container}>
+            {Children.map(children, (child) => {
+              if (isValidElement(child)) {
+                return {
+                  ...child,
+                  props: {
+                    ...child.props,
+                    className: cn(child.props.className, `${variant}`),
+                  },
+                }
+              }
+              return child
+            })}
+          </div>
+        )}
       </Ticker>
     </div>
   )

components/ui/Quantity/Quantity.module.css

@@ -16,6 +16,10 @@
   @apply outline-none;
 }
 
+.actions:disabled {
+  @apply cursor-not-allowed;
+}
+
 .input {
   @apply bg-transparent px-4 w-full h-full focus:outline-none;
   user-select: none;

components/ui/Skeleton/Skeleton.module.css

@@ -2,9 +2,9 @@
   @apply block;
   background-image: linear-gradient(
     270deg,
-    var(--accent-1),
+    var(--accent-0),
-    var(--accent-2),
     var(--accent-2),
+    var(--accent-0),
     var(--accent-1)
   );
   background-size: 400% 100%;
@@ -28,9 +28,9 @@
     z-index: 100;
     background-image: linear-gradient(
       270deg,
-      var(--accent-1),
+      var(--accent-0),
-      var(--accent-2),
       var(--accent-2),
+      var(--accent-0),
       var(--accent-1)
     );
     background-size: 400% 100%;

components/ui/Skeleton/Skeleton.tsx

@@ -4,13 +4,13 @@ import px from '@lib/to-pixels'
 import s from './Skeleton.module.css'
 
 interface SkeletonProps {
-  width?: string | number
-  height?: string | number
-  boxHeight?: string | number
-  style?: CSSProperties
   show?: boolean
   block?: boolean
   className?: string
+  style?: CSSProperties
+  width?: string | number
+  height?: string | number
+  boxHeight?: string | number
 }
 
 const Skeleton: React.FC<SkeletonProps> = ({

framework/commerce/types/product.ts

@@ -5,7 +5,7 @@ export type ProductImage = {
 
 export type ProductPrice = {
   value: number
-  currencyCode?: 'USD' | 'ARS' | string
+  currencyCode?: 'USD' | 'EUR' | 'ARS' | string
   retailPrice?: number
   salePrice?: number
   listPrice?: number

package.json

@@ -19,65 +19,62 @@
     "node": "14.x"
   },
   "dependencies": {
-    "@reach/portal": "^0.11.2",
+    "@reach/portal": "^0.15.0",
     "@react-spring/web": "^9.2.1",
     "@vercel/fetch": "^6.1.0",
-    "autoprefixer": "^10.2.4",
+    "autoprefixer": "^10.2.6",
     "body-scroll-lock": "^3.1.5",
     "bowser": "^2.11.0",
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "cookie": "^0.4.1",
     "dot-object": "^2.1.4",
     "email-validator": "^2.0.4",
     "immutability-helper": "^3.1.1",
     "js-cookie": "^2.2.1",
-    "keen-slider": "^5.2.4",
+    "keen-slider": "^5.4.1",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^10.0.9-canary.5",
+    "next": "10.0.9-canary.5",
-    "next-seo": "^4.11.0",
+    "next-seo": "^4.24.0",
-    "next-themes": "^0.0.4",
+    "next-themes": "^0.0.14",
-    "postcss": "^8.2.8",
+    "postcss": "^8.3.0",
-    "postcss-nesting": "^7.0.1",
+    "postcss-nesting": "^8.0.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-merge-refs": "^1.1.0",
     "react-ticker": "^1.2.2",
     "react-use-measure": "^2.0.4",
     "shopify-buy": "^2.11.0",
     "swell-js": "^4.0.0-next.0",
-    "swr": "^0.4.0",
+    "swr": "^0.5.6",
-    "tabbable": "^5.1.5",
+    "tabbable": "^5.2.0",
-    "tailwindcss": "^2.0.4"
+    "tailwindcss": "^2.1.2"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^1.20.0",
+    "@graphql-codegen/cli": "^1.21.5",
-    "@graphql-codegen/schema-ast": "^1.18.1",
+    "@graphql-codegen/schema-ast": "^1.18.3",
-    "@graphql-codegen/typescript": "^1.19.0",
+    "@graphql-codegen/typescript": "^1.22.1",
-    "@graphql-codegen/typescript-operations": "^1.17.13",
+    "@graphql-codegen/typescript-operations": "^1.18.0",
-    "@manifoldco/swagger-to-ts": "^2.1.0",
+    "@next/bundle-analyzer": "^10.2.3",
-    "@next/bundle-analyzer": "^10.0.1",
-    "@tailwindcss/jit": "^0.1.3",
     "@types/body-scroll-lock": "^2.6.1",
-    "@types/classnames": "^2.2.10",
     "@types/cookie": "^0.4.0",
     "@types/js-cookie": "^2.2.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.random": "^3.2.6",
     "@types/lodash.throttle": "^4.1.6",
-    "@types/node": "^14.14.16",
+    "@types/node": "^15.6.1",
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.8",
     "@types/shopify-buy": "^2.10.5",
     "deepmerge": "^4.2.2",
-    "graphql": "^15.4.0",
+    "graphql": "^15.5.0",
-    "husky": "^4.3.8",
+    "husky": "^6.0.0",
-    "lint-staged": "^10.5.3",
+    "lint-staged": "^11.0.0",
-    "next-unused": "^0.0.3",
+    "next-unused": "^0.0.6",
-    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.2.1",
+    "prettier": "^2.3.0",
-    "typescript": "^4.0.3"
+    "typescript": "4.2.4"
   },
   "husky": {
     "hooks": {

pages/product/[slug].tsx

@@ -22,6 +22,7 @@ export async function getStaticProps({
     config,
     preview,
   })
+
   const allProductsPromise = commerce.getAllProducts({
     variables: { first: 4 },
     config,

pages/search.tsx

@@ -356,11 +356,7 @@ export default function Search({
           ) : (
             <Grid layout="normal">
               {rangeMap(12, (i) => (
-                <Skeleton
+                <Skeleton key={i} />
-                  key={i}
-                  className="w-full animated fadeIn"
-                  height={480}
-                />
               ))}
             </Grid>
           )}