Reviews

import type { Review, ReviewFit } from "@/components/blocks/reviews/review"

type JudgeMeReview = {
  id: number
  rating: number
  title: string | null
  body: string | null
  created_at: string
  verified: "buyer" | "nothing" | "email"
  reviewer: { name: string }
  pictures: { urls: { original: string; small: string } }[]
  votes?: { up: number; down: number }
  reply?: { content: string; created_at: string } | null
}

type YotpoReview = {
  id: number
  score: number
  title: string
  content: string
  created_at: string
  verified_buyer: boolean
  user: { display_name: string }
  votes_up: number
  votes_down: number
  images_data?: { id: number; original_url: string; thumb_url: string }[]
  custom_fields?: Record<string, { title: string; value: string }>
  comment?: { content: string; created_at: string } | null
}

type ShopifyReviewMetaobject = {
  id: string
  rating: { value: string }
  title?: { value: string }
  body?: { value: string }
  author: { value: string }
  createdAt: string
  verified?: { value: string }
}

const fits: Record<string, ReviewFit> = {
  "Runs small": -1,
  "True to size": 0,
  "Runs large": 1,
}

export function fromJudgeMe(review: JudgeMeReview): Review {
  return {
    id: String(review.id),
    rating: review.rating,
    title: review.title ?? undefined,
    body: review.body ?? undefined,
    author: review.reviewer.name,
    verified: review.verified === "buyer",
    createdAt: review.created_at,
    photos: review.pictures.map((picture, index) => ({
      id: `${review.id}-${index}`,
      src: picture.urls.original,
      thumbnail: picture.urls.small,
    })),
    helpful: review.votes,
    reply: review.reply
      ? { author: "", body: review.reply.content, createdAt: review.reply.created_at }
      : undefined,
  }
}

export function fromYotpo(review: YotpoReview): Review {
  const fields = Object.values(review.custom_fields ?? {})
  const fit = fields.find((field) => field.title === "Fit")?.value
  return {
    id: String(review.id),
    rating: review.score,
    title: review.title || undefined,
    body: review.content || undefined,
    author: review.user.display_name,
    verified: review.verified_buyer,
    createdAt: review.created_at,
    fit: fit ? fits[fit] : undefined,
    photos: review.images_data?.map((image) => ({
      id: String(image.id),
      src: image.original_url,
      thumbnail: image.thumb_url,
    })),
    helpful: { up: review.votes_up, down: review.votes_down },
    reply: review.comment
      ? { author: "", body: review.comment.content, createdAt: review.comment.created_at }
      : undefined,
  }
}

export function fromShopifyMetaobject(review: ShopifyReviewMetaobject): Review {
  const rating = JSON.parse(review.rating.value) as { value: string }
  return {
    id: review.id,
    rating: Number(rating.value),
    title: review.title?.value,
    body: review.body?.value,
    author: review.author.value,
    verified: review.verified?.value === "true",
    createdAt: review.createdAt,
  }
}

"use client"

import * as React from "react"

import { defaultQuery, type Review, type ReviewQuery, type ReviewStats } from "@/components/blocks/reviews/review"
import { Reviews } from "@/components/blocks/reviews/reviews"

type Page = { reviews: Review[]; total: number; cursor: string | null }

async function fetchReviews(
  productId: string,
  query: ReviewQuery,
  cursor: string | null
): Promise<Page> {
  const params = new URLSearchParams({
    sort: query.sort,
    q: query.search,
    photos: String(query.withPhotos),
    limit: "10",
  })
  if (query.rating !== null) params.set("rating", String(query.rating))
  if (cursor) params.set("cursor", cursor)
  const response = await fetch(`/api/products/${productId}/reviews?${params}`)
  if (!response.ok) throw new Error("Couldn’t load reviews")
  return response.json()
}

export function ProductReviews({
  productId,
  stats,
  firstPage,
}: {
  productId: string
  stats: ReviewStats
  firstPage: Page
}) {
  const [query, setQuery] = React.useState<ReviewQuery>(defaultQuery)
  const [page, setPage] = React.useState(firstPage)
  const [loading, setLoading] = React.useState(false)
  const request = React.useRef(0)

  const changeQuery = async (next: ReviewQuery) => {
    setQuery(next)
    const id = ++request.current
    setLoading(true)
    try {
      const result = await fetchReviews(productId, next, null)
      if (id === request.current) setPage(result)
    } finally {
      if (id === request.current) setLoading(false)
    }
  }

  return (
    <Reviews
      manual
      stats={stats}
      reviews={page.reviews}
      total={page.total}
      query={query}
      onQueryChange={changeQuery}
      loading={loading}
      hasMore={page.cursor !== null}
      onLoadMore={async () => {
        const next = await fetchReviews(productId, query, page.cursor)
        setPage((current) => ({
          ...next,
          reviews: [...current.reviews, ...next.reviews],
        }))
      }}
      onVote={async (review, vote) => {
        const response = await fetch(`/api/reviews/${review.id}/vote`, {
          method: "POST",
          body: JSON.stringify({ vote }),
        })
        if (!response.ok) throw new Error("Vote failed")
      }}
    />
  )
}

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"

import type { ReviewDraft } from "@/components/blocks/reviews/review"
import { WriteReview } from "@/components/blocks/reviews/write-review"

async function submitReview(productId: string, draft: ReviewDraft) {
  const form = new FormData()
  form.set("productId", productId)
  form.set("rating", String(draft.rating))
  form.set("title", draft.title)
  form.set("body", draft.body)
  form.set("name", draft.name)
  form.set("email", draft.email)
  if (draft.fit !== null) form.set("fit", String(draft.fit))
  for (const photo of draft.photos) form.append("photos", photo, photo.name)

  const response = await fetch("/api/reviews", { method: "POST", body: form })
  if (response.status === 409) {
    throw new Error("You’ve already reviewed this product with that email.")
  }
  if (!response.ok) {
    throw new Error("Couldn’t send your review. Try again in a moment.")
  }
}

export function ReviewButton({ productId, title }: { productId: string; title: string }) {
  const [open, setOpen] = React.useState(false)
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Write a review
      </Button>
      <WriteReview
        open={open}
        onOpenChange={setOpen}
        product={{ title }}
        maxPhotos={4}
        onSubmit={(draft) => submitReview(productId, draft)}
      />
    </>
  )
}