image, cart item, type fixes

Author: Greg Hoskin

assets/components.css

@@ -1,3 +1,13 @@
 .fit {
   min-height: calc(100vh - 88px);
 }
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}

blocks/ProductGrid/ProductGrid.tsx

@@ -6,6 +6,7 @@ import { LoadingDots } from '@components/ui'
 import { Grid } from '@theme-ui/components'
 import { ProductCardProps } from '@components/common/ProductCard'
 import { ProductCardDemo, ProductCard } from '@components/common'
+import { Product } from '@lib/swell/storefront-data-hooks/src/types'
 
 import {
   getCollection,
@@ -46,10 +47,11 @@ export const ProductGrid: FC<ProductGridProps> = ({
         .filter((handle: string | undefined) => typeof handle === 'string')
         .map(
           async (handle: string) => {
-            return await getProduct(builderConfig, { slug: handle })
+            return await getProduct({ slug: handle })
           }
         )
-      setProducts(await Promise.all(promises))
+      const result = await Promise.all(promises)
+      setProducts(result)
       setLoading(false)
     }
     if (productsList && !initialProducts) {

blocks/ProductView/ProductLoader.tsx

@@ -24,7 +24,7 @@ const ProductLoader: React.FC<Props> = ({
   useEffect(() => {
     const fetchProduct = async () => {
       setLoading(true)
-      const result = await getProduct(builderConfig, {
+      const result = await getProduct({
         slug: String(product),
       })
       setProduct(result)

blocks/ProductView/ProductView.tsx

@@ -14,7 +14,17 @@ import {
 } from '@lib/swell/storefront-data-hooks/src/utils/product'
 import { ImageCarousel, LoadingDots } from '@components/ui'
 import ProductLoader from './ProductLoader'
-import { OptionInput, OptionValue, ProductOption, Product, ProductProps } from '@lib/swell/storefront-data-hooks/src/types'
+import { OptionInput, OptionValue, ProductOption, Product } from '@lib/swell/storefront-data-hooks/src/types'
+
+export interface ProductProps {
+  className?: string
+  children?: any
+  product: Product
+  renderSeo?: boolean
+  description?: string
+  title?: string
+}
+
 
 const ProductBox: React.FC<ProductProps> = ({
   product,

components/common/ProductCard.tsx

@@ -4,29 +4,12 @@ import { Themed, jsx } from 'theme-ui'
 import { Card, Text } from '@theme-ui/components'
 import { Link, ImageCarousel } from '@components/ui'
 import { getPrice } from '@lib/swell/storefront-data-hooks/src/utils/product'
-import { useState } from 'react'
+import { Product } from '@lib/swell/storefront-data-hooks/src/types'
 
-type SwellProductOption = {
-  id: string
-  name: string
-  values: any[]
-}
-
-export interface SwellProduct {
-  id: string
-  description: string
-  name: string
-  slug: string
-  currency: string
-  price: number
-  images: any[]
-  options: SwellProductOption[]
-  variants: any[]
-}
 
 export interface ProductCardProps {
   className?: string
-  product: SwellProduct
+  product: Product
   imgWidth: number | string
   imgHeight: number | string
   imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined
@@ -44,8 +27,7 @@ const ProductCard: React.FC<ProductCardProps> = ({
   imgSizes,
   imgLayout = 'responsive',
 }) => {
-  const handle = (product as any).slug
-
+  const handle = (product).slug
   const price = getPrice(
     product.price,
     product.currency ?? 'USD'

components/common/ProductCardDemo.tsx

@@ -37,7 +37,7 @@ const ProductCardDemo: React.FC<ProductCardProps> = ({
     productVariant.price,
     product.currency ?? 'USD'
   )
-  const alternateImage = product.images[1]?.src
+  const alternateImage = product.images[1]?.file.url
 
   return (
     <Card

components/common/UntilInteraction.tsx

@@ -10,7 +10,7 @@ const UntilInteraction: React.FC<{ skeleton: React.ReactNode }> = ({
   }
   return (
     <div
-      onMouseOver={() => setRender(true)}
+      // onMouseOver={() => setRender(true)}
       onClick={() => setRender(true)}
       onTouchStart={() => setRender(true)}
     >

lib/resolve-swell-content.ts

@@ -31,7 +31,7 @@ export async function resolveSwellContent(
             .filter((handle: string | undefined) => typeof handle === 'string')
             .map(
               async (handle: string) =>
-                await getProduct(builderConfig, { slug: handle })
+                await getProduct({ slug: handle })
             )
           products = await Promise.all(promises)
         }
@@ -55,7 +55,7 @@ export async function resolveSwellContent(
       async ProductBox(props) {
         let product = props.product
         if (product && typeof product === 'string') {
-          product = await getProduct(builderConfig, {
+          product = await getProduct({
             slug: product,
           })
         }

lib/swell/storefront-data-hooks/src/api/operations-swell.ts

@@ -63,8 +63,7 @@ export async function getAllProductPaths(
   return products?.map((entry: any) => entry.slug) || []
 }
 
-export async function getProduct(builderConfig: any,
-  options: { id?: string; slug?: string; withContent?: boolean }
+export async function getProduct(options: { id?: string; slug?: string; withContent?: boolean }
   ) {
     await swell.init(swellConfig.storeId, swellConfig.publicKey)
     if (Boolean(options.id) === Boolean(options.slug)) {

lib/swell/storefront-data-hooks/src/types.ts

@@ -49,8 +49,8 @@ export type CartItem = {
   product: Product
   price: number
   variant: {
-    name: string | null
-    sku: string | null
+    name?: string
+    sku?: string
     id: string
   }
   quantity: number
@@ -94,13 +94,3 @@ export type ProductOption = {
   name: string
   values: OptionValue[]
 }
-
-
-export interface ProductProps {
-  className?: string
-  children?: any
-  product: Product
-  renderSeo?: boolean
-  description?: string
-  title?: string
-}

pages/product/[handle].tsx

@@ -23,7 +23,7 @@ Builder.isStatic = true
 const builderModel = 'product-page'
 
 export async function getStaticProps(context: GetStaticPropsContext<{ handle: string }>) {
-  const product = await getProduct(builderConfig, {
+  const product = await getProduct({
     slug: context.params?.handle,
   })
   const page = await resolveSwellContent(builderModel, {