@pradip1995/segment-product-reviews 0.2.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@pradip1995/segment-product-reviews",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@medusajs/types": "^2.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.2"
+  },
+  "devDependencies": {
+    "@medusajs/types": "^2.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "product-reviews",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "product",
+}
+
+export default manifest

package/src/segment.css

@@ -0,0 +1,135 @@
+.product-reviews {
+  padding: 2rem 0;
+  border-top: 1px solid var(--color-border);
+}
+
+.product-reviews__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+}
+
+.product-reviews__title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text-heading);
+}
+
+.product-reviews__summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.product-reviews__star--filled {
+  color: var(--color-brand-accent);
+}
+
+.product-reviews__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 1.25rem;
+}
+
+.product-reviews__item {
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.product-reviews__item-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.product-reviews__reviewer {
+  font-weight: 600;
+}
+
+.product-reviews__date {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+.product-reviews__review-title {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.product-reviews__review-body {
+  color: var(--color-text-body);
+  line-height: 1.6;
+}
+
+.product-reviews__modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 1rem;
+}
+
+.product-reviews__modal {
+  width: min(100%, 28rem);
+  background: var(--color-surface);
+  border-radius: 1rem;
+  padding: 1.5rem;
+}
+
+.product-reviews__form {
+  display: grid;
+  gap: 1rem;
+}
+
+.product-reviews__rating-input {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.product-reviews__rating-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--color-border);
+}
+
+.product-reviews__rating-btn--active {
+  color: var(--color-brand-accent);
+}
+
+.product-reviews__field {
+  display: grid;
+  gap: 0.375rem;
+}
+
+.product-reviews__field input,
+.product-reviews__field textarea {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+}
+
+.product-reviews__modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.product-reviews__status--success {
+  color: #059669;
+}
+
+.product-reviews__status--error {
+  color: #e11d48;
+}

package/src/segment.tsx

@@ -0,0 +1,233 @@
+"use client"
+
+import "./segment.css"
+import { FormEvent, useMemo, useState } from "react"
+import type { HttpTypes } from "@medusajs/types"
+
+type Review = {
+  id?: string
+  rating: number
+  title?: string | null
+  description?: string | null
+  created_at?: string | null
+  customer?: {
+    first_name?: string | null
+    last_name?: string | null
+    email?: string | null
+  } | null
+}
+
+type ReviewSummary = {
+  average_rating?: number
+  total_reviews?: number
+}
+
+export type ProductReviewsData = {
+  reviews?: Review[]
+  ratingSummary?: ReviewSummary | null
+}
+
+function StarRating({ rating, size = "text-lg" }: { rating: number; size?: string }) {
+  const fullStars = Math.floor(rating)
+  return (
+    <>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <span key={i} className={`product-reviews__star ${i < fullStars ? "product-reviews__star--filled" : ""} ${size}`}>
+          {i < fullStars ? "★" : "☆"}
+        </span>
+      ))}
+    </>
+  )
+}
+
+function formatDate(dateString?: string | null) {
+  if (!dateString) return ""
+  try {
+    return new Date(dateString).toLocaleDateString()
+  } catch {
+    return ""
+  }
+}
+
+function reviewerName(review: Review) {
+  const first = review.customer?.first_name || ""
+  const last = review.customer?.last_name || ""
+  const full = `${first} ${last}`.trim()
+  return full || review.customer?.email || "Anonymous"
+}
+
+export default function ProductReviews({
+  product,
+  reviewData,
+  customer,
+  title = "Customer reviews",
+  onSubmitReview,
+  onLoginRequired,
+}: {
+  product?: HttpTypes.StoreProduct | null
+  reviewData?: ProductReviewsData | null
+  customer?: HttpTypes.StoreCustomer | null
+  title?: string
+  onSubmitReview?: (input: {
+    productId: string
+    rating: number
+    title: string
+    description: string
+  }) => Promise<{ success: boolean; error?: string }>
+  onLoginRequired?: () => void
+}) {
+  const reviews = reviewData?.reviews || []
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [rating, setRating] = useState(0)
+  const [hoveredRating, setHoveredRating] = useState(0)
+  const [reviewTitle, setReviewTitle] = useState("")
+  const [reviewBody, setReviewBody] = useState("")
+  const [submitStatus, setSubmitStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+  const [submitMessage, setSubmitMessage] = useState("")
+
+  const { averageRating, totalReviews } = useMemo(() => {
+    const apiRating = reviewData?.ratingSummary?.average_rating
+    const apiTotal = reviewData?.ratingSummary?.total_reviews
+    if (apiRating && apiTotal) {
+      return { averageRating: apiRating, totalReviews: apiTotal }
+    }
+    if (reviews.length === 0) return { averageRating: 0, totalReviews: 0 }
+    const total = reviews.reduce((sum, review) => sum + (review.rating || 0), 0)
+    return { averageRating: total / reviews.length, totalReviews: reviews.length }
+  }, [reviewData?.ratingSummary, reviews])
+
+  const handleWriteReview = () => {
+    if (!customer) {
+      onLoginRequired?.()
+      return
+    }
+    setIsModalOpen(true)
+  }
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    if (!product?.id || !onSubmitReview || rating < 1) return
+
+    setSubmitStatus("loading")
+    setSubmitMessage("")
+
+    const result = await onSubmitReview({
+      productId: product.id,
+      rating,
+      title: reviewTitle,
+      description: reviewBody,
+    })
+
+    if (result.success) {
+      setSubmitStatus("success")
+      setSubmitMessage("Thank you for your review!")
+      setReviewTitle("")
+      setReviewBody("")
+      setRating(0)
+      setTimeout(() => {
+        setIsModalOpen(false)
+        setSubmitStatus("idle")
+        setSubmitMessage("")
+      }, 1500)
+    } else {
+      setSubmitStatus("error")
+      setSubmitMessage(result.error || "Failed to submit review.")
+    }
+  }
+
+  return (
+    <section className="product-reviews" aria-label={title}>
+      <div className="product-reviews__header">
+        <div>
+          <h2 className="product-reviews__title">{title}</h2>
+          {totalReviews > 0 ? (
+            <div className="product-reviews__summary">
+              <StarRating rating={averageRating} size="text-2xl" />
+              <span className="product-reviews__average">{averageRating.toFixed(1)}</span>
+              <span className="product-reviews__count">({totalReviews} reviews)</span>
+            </div>
+          ) : (
+            <p className="product-reviews__empty">No reviews yet.</p>
+          )}
+        </div>
+        {onSubmitReview ? (
+          <button type="button" onClick={handleWriteReview} className="btn-primary product-reviews__write-btn">
+            Write a review
+          </button>
+        ) : null}
+      </div>
+
+      {reviews.length > 0 ? (
+        <ul className="product-reviews__list">
+          {reviews.map((review, index) => (
+            <li key={review.id || `${reviewerName(review)}-${index}`} className="product-reviews__item">
+              <div className="product-reviews__item-header">
+                <StarRating rating={review.rating} />
+                <span className="product-reviews__reviewer">{reviewerName(review)}</span>
+                {review.created_at ? (
+                  <span className="product-reviews__date">{formatDate(review.created_at)}</span>
+                ) : null}
+              </div>
+              {review.title ? <h3 className="product-reviews__review-title">{review.title}</h3> : null}
+              {review.description ? <p className="product-reviews__review-body">{review.description}</p> : null}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {isModalOpen ? (
+        <div className="product-reviews__modal-backdrop" role="presentation" onClick={() => setIsModalOpen(false)}>
+          <div
+            className="product-reviews__modal"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Write a review"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <form onSubmit={handleSubmit} className="product-reviews__form">
+              <h3 className="product-reviews__modal-title">Write a review</h3>
+              <div className="product-reviews__rating-input">
+                {Array.from({ length: 5 }).map((_, i) => {
+                  const value = i + 1
+                  const active = value <= (hoveredRating || rating)
+                  return (
+                    <button
+                      key={value}
+                      type="button"
+                      className={`product-reviews__rating-btn${active ? " product-reviews__rating-btn--active" : ""}`}
+                      onMouseEnter={() => setHoveredRating(value)}
+                      onMouseLeave={() => setHoveredRating(0)}
+                      onClick={() => setRating(value)}
+                      aria-label={`${value} star${value > 1 ? "s" : ""}`}
+                    >
+                      ★
+                    </button>
+                  )
+                })}
+              </div>
+              <label className="product-reviews__field">
+                <span>Title</span>
+                <input value={reviewTitle} onChange={(e) => setReviewTitle(e.target.value)} required />
+              </label>
+              <label className="product-reviews__field">
+                <span>Review</span>
+                <textarea value={reviewBody} onChange={(e) => setReviewBody(e.target.value)} rows={4} required />
+              </label>
+              {submitMessage ? (
+                <p className={`product-reviews__status product-reviews__status--${submitStatus}`}>{submitMessage}</p>
+              ) : null}
+              <div className="product-reviews__modal-actions">
+                <button type="button" className="btn-outline" onClick={() => setIsModalOpen(false)}>
+                  Cancel
+                </button>
+                <button type="submit" className="btn-primary" disabled={submitStatus === "loading" || rating < 1}>
+                  {submitStatus === "loading" ? "Submitting…" : "Submit review"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+    </section>
+  )
+}