Product Card

import { fromShopify } from "../variant-picker/shopify"
import { ProductCard, ProductGrid } from "@/components/blocks/product-card/product-card"

type ShopifyProduct = Parameters<typeof fromShopify>[0] & {
  rating: { value: string } | null
  ratingCount: { value: string } | null
}

type Collection = {
  title: string
  products: { nodes: ShopifyProduct[] }
}

async function addToCart(merchandiseId: string) {
  const response = await fetch("/api/cart/lines", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ merchandiseId, quantity: 1 }),
  })
  if (!response.ok) {
    const { message } = await response.json()
    throw new Error(message ?? "Couldn’t add this to your bag. Try again.")
  }
}

export function CollectionGrid({ collection }: { collection: Collection }) {
  return (
    <ProductGrid columns={4} aria-label={collection.title}>
      {collection.products.nodes.map((node, index) => {
        const product = fromShopify(node)
        const count = Number(node.ratingCount?.value ?? 0)
        return (
          <ProductCard
            key={product.id}
            product={product}
            href={`/products/${node.handle}`}
            priority={index < 4}
            rating={count > 0 ? { value: Number(JSON.parse(node.rating?.value ?? "{}").value ?? 0), count } : null}
            onQuickAdd={(variant) => addToCart(variant.id)}
          />
        )
      })}
    </ProductGrid>
  )
}

import type { Product, ProductVariant } from "../variant-picker/product"
import { ProductCard } from "@/components/blocks/product-card/product-card"

type RecommendationsProps = {
  title: string
  products: Product[]
  addToBag: (variantId: string) => Promise<void>
}

export function Recommendations({ title, products, addToBag }: RecommendationsProps) {
  if (products.length === 0) return null
  return (
    <section aria-labelledby="recommendations" className="flex flex-col gap-4">
      <h2 id="recommendations" className="text-lg font-medium">
        {title}
      </h2>
      <ul
        role="list"
        className="-mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-2"
      >
        {products.map((product) => (
          <li key={product.id} className="w-44 shrink-0 snap-start sm:w-56">
            <ProductCard
              product={product}
              size="sm"
              headingLevel={3}
              onQuickAdd={(variant: ProductVariant) => addToBag(variant.id)}
            />
          </li>
        ))}
      </ul>
    </section>
  )
}

"use client"

import * as React from "react"

import type { Product } from "../variant-picker/product"
import { ProductCard, ProductGrid } from "@/components/blocks/product-card/product-card"

const storageKey = "wishlist"

function readLocal(): string[] {
  try {
    return JSON.parse(localStorage.getItem(storageKey) ?? "[]")
  } catch {
    return []
  }
}

export function WishlistGrid({
  products,
  signedIn,
}: {
  products: Product[]
  signedIn: boolean
}) {
  const [saved, setSaved] = React.useState<string[]>([])

  React.useEffect(() => {
    if (!signedIn) {
      setSaved(readLocal())
      return
    }
    fetch("/api/wishlist")
      .then((response) => response.json())
      .then((data: { productIds: string[] }) => setSaved(data.productIds))
  }, [signedIn])

  const change = async (next: boolean, product: Product) => {
    const ids = next
      ? [...saved, product.id]
      : saved.filter((id) => id !== product.id)
    if (signedIn) {
      const response = await fetch(`/api/wishlist/${encodeURIComponent(product.id)}`, {
        method: next ? "PUT" : "DELETE",
      })
      if (!response.ok) throw new Error("Couldn’t update your wishlist. Try again.")
    } else {
      localStorage.setItem(storageKey, JSON.stringify(ids))
    }
    setSaved(ids)
  }

  return (
    <ProductGrid columns={3}>
      {products.map((product) => (
        <ProductCard
          key={product.id}
          product={product}
          wishlisted={saved.includes(product.id)}
          onWishlistChange={change}
        />
      ))}
    </ProductGrid>
  )
}