Merge branch 'custom-checkout' into improvements

2025-05-18 07:26:59 +00:00 · 2021-06-05 15:16:56 -03:00 · 2021-06-05 15:16:56 -03:00 · 6c1e3ab6ab
commit 6c1e3ab6ab
parent 46bb71cca1 813b1a86fd
22 changed files with 1155 additions and 1029 deletions
--- a/components/common/Searchbar/Searchbar.module.css
+++ b/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 {
-    min-width: 300px;
-  }
+.input::placeholder {
+  @apply text-accent-3;
 }

 .input:focus {
@ -21,3 +21,9 @@
 .icon {
  @apply h-5 w-5;
 }
+
+@screen sm {
+  .input {
+    min-width: 300px;
+  }
+}
--- a/components/product/ProductCard/ProductCard.module.css
+++ b/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;
+}
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/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">
-              <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 className="absolute inset-0 flex items-center justify-end mr-8 z-20">
+            <span className={s.tag}>{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}
+            />
+          )}
        </>
      )}

--- a/components/product/ProductOptions/ProductOptions.tsx
+++ b/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
--- a/components/product/ProductOptions/index.ts
+++ b/components/product/ProductOptions/index.ts
@ -0,0 +1 @@
+export { default } from './ProductOptions'
--- a/components/product/ProductView/ProductView.tsx
+++ b/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 { Swatch, ProductSlider } from '@components/product'
-import { Button, Container, Text, useUI } from '@components/ui'
+import {
+  getProductVariant,
+  selectDefaultOptionFromProduct,
+  SelectedOptions,
+} from '../helpers'
 import { useAddItem } from '@framework/cart'
-import Rating from '@components/ui/Rating'
-import Collapse from '@components/ui/Collapse'
-import ProductCard from '@components/product/ProductCard'
-import WishlistButton from '@components/wishlist/WishlistButton'
+import { WishlistButton } from '@components/wishlist'
+import { ProductSlider, ProductCard, ProductOptions } from '@components/product'
+import {
+  Button,
+  Container,
+  Text,
+  useUI,
+  Rating,
+  Collapse,
+} from '@components/ui'

-interface Props {
-  children?: any
+interface ProductViewProps {
  product: Product
-  relatedProducts: Product[]
  className?: string
+  relatedProducts: Product[]
+  children?: React.ReactNode
 }

-const ProductView: FC<Props> = ({ product, relatedProducts }) => {
-  // TODO: fix this missing argument issue
-  /* @ts-ignore */
+const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
+  const { openSidebar } = useUI()
+  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
-    product.variants[0].options?.forEach((v) => {
-      setChoices((choices) => ({
-        ...choices,
-        [v.displayName.toLowerCase()]: v.values[0].label.toLowerCase(),
-      }))
-    })
+    selectDefaultOptionFromProduct(product, setSelectedOptions)
  }, [])

-  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}
-              {` `}
-              {product.price?.currencyCode}
+              {`${price} ${product.price?.currencyCode}`}
            </div>
          </div>

@ -116,43 +113,15 @@ const ProductView: FC<Props> = ({ product, relatedProducts }) => {
          )}
        </div>
        <div className={s.sidebar}>
-          <section>
-            {product.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 = (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>
+          <ProductOptions
+            options={product.options}
+            selectedOptions={selectedOptions}
+            setSelectedOptions={setSelectedOptions}
+          />
+          <Text
+            className="pb-4 break-words w-full max-w-xl"
+            html={product.descriptionHtml || product.description}
+          />
          <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.
--- a/components/product/helpers.ts
+++ b/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(),
+    }))
+  })
+}
--- a/components/product/index.ts
+++ b/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'
--- a/components/ui/Collapse/Collapse.module.css
+++ b/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 {
--- a/components/ui/Grid/Grid.module.css
+++ b/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;
+}

-  & > * {
-    min-height: 325px;
+@screen md {
+  .layoutNormal > * {
+    max-height: min-content !important;
+  }
+}
+
+@screen lg {
+  .layoutNormal > * {
+    max-height: 400px;
  }
 }

--- a/components/ui/Hero/Hero.module.css
+++ b/components/ui/Hero/Hero.module.css
@ -1,6 +1,18 @@
 .root {
-  @apply mx-auto grid grid-cols-1 py-32 gap-4;
-  @screen md {
-    @apply grid-cols-2;
+  @apply flex flex-col py-32 mx-auto;
+}
+
+.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;
  }
 }
--- a/components/ui/Hero/Hero.tsx
+++ b/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">
-            {headline}
-          </h2>
-          <div className="flex flex-col justify-between">
-            <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
+          <h2 className={s.headline}>{headline}</h2>
+          <div className="md:ml-6">
+            <p className="mt-4 text-xl leading-8 text-accent-2 mb-1 lg:max-w-4xl">
              {description}
            </p>
-            <Link href="/blog">
-              <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+            <Link href="/">
+              <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>
--- a/components/ui/Marquee/Marquee.module.css
+++ b/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;
 }
--- a/components/ui/Marquee/Marquee.tsx
+++ b/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>
  )
--- a/components/ui/Quantity/Quantity.module.css
+++ b/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;
--- a/components/ui/Skeleton/Skeleton.module.css
+++ b/components/ui/Skeleton/Skeleton.module.css
@ -2,9 +2,9 @@
  @apply block;
  background-image: linear-gradient(
    270deg,
-    var(--accent-1),
-    var(--accent-2),
+    var(--accent-0),
    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-2),
+      var(--accent-0),
      var(--accent-2),
+      var(--accent-0),
      var(--accent-1)
    );
    background-size: 400% 100%;
--- a/components/ui/Skeleton/Skeleton.tsx
+++ b/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> = ({
--- a/framework/commerce/types/product.ts
+++ b/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
--- a/package.json
+++ b/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-seo": "^4.11.0",
-    "next-themes": "^0.0.4",
-    "postcss": "^8.2.8",
-    "postcss-nesting": "^7.0.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "next": "10.0.9-canary.5",
+    "next-seo": "^4.24.0",
+    "next-themes": "^0.0.14",
+    "postcss": "^8.3.0",
+    "postcss-nesting": "^8.0.1",
+    "react": "^17.0.2",
+    "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",
-    "tabbable": "^5.1.5",
-    "tailwindcss": "^2.0.4"
+    "swr": "^0.5.6",
+    "tabbable": "^5.2.0",
+    "tailwindcss": "^2.1.2"
  },
  "devDependencies": {
-    "@graphql-codegen/cli": "^1.20.0",
-    "@graphql-codegen/schema-ast": "^1.18.1",
-    "@graphql-codegen/typescript": "^1.19.0",
-    "@graphql-codegen/typescript-operations": "^1.17.13",
-    "@manifoldco/swagger-to-ts": "^2.1.0",
-    "@next/bundle-analyzer": "^10.0.1",
-    "@tailwindcss/jit": "^0.1.3",
+    "@graphql-codegen/cli": "^1.21.5",
+    "@graphql-codegen/schema-ast": "^1.18.3",
+    "@graphql-codegen/typescript": "^1.22.1",
+    "@graphql-codegen/typescript-operations": "^1.18.0",
+    "@next/bundle-analyzer": "^10.2.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/react": "^17.0.0",
+    "@types/node": "^15.6.1",
+    "@types/react": "^17.0.8",
    "@types/shopify-buy": "^2.10.5",
    "deepmerge": "^4.2.2",
-    "graphql": "^15.4.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3",
-    "next-unused": "^0.0.3",
-    "postcss-flexbugs-fixes": "^4.2.1",
+    "graphql": "^15.5.0",
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
+    "next-unused": "^0.0.6",
+    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.2.1",
-    "typescript": "^4.0.3"
+    "prettier": "^2.3.0",
+    "typescript": "4.2.4"
  },
  "husky": {
    "hooks": {
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@ -22,6 +22,7 @@ export async function getStaticProps({
    config,
    preview,
  })
+
  const allProductsPromise = commerce.getAllProducts({
    variables: { first: 4 },
    config,
--- a/pages/search.tsx
+++ b/pages/search.tsx
@ -356,11 +356,7 @@ export default function Search({
          ) : (
            <Grid layout="normal">
              {rangeMap(12, (i) => (
-                <Skeleton
-                  key={i}
-                  className="w-full animated fadeIn"
-                  height={480}
-                />
+                <Skeleton key={i} />
              ))}
            </Grid>
          )}
--- a/yarn.lock
+++ b/yarn.lock