create-nextblock 0.11.1 → 0.11.3

package/templates/nextblock-template/components/ProductReviewsSection.tsx

@@ -0,0 +1,419 @@
+"use client";
+
+import React, { useState, useEffect, useTransition, useOptimistic } from "react";
+import { createClient } from "@nextblock-cms/db";
+import { Button } from "@nextblock-cms/ui";
+import { Textarea } from "@nextblock-cms/ui";
+import { Avatar, AvatarFallback, AvatarImage } from "@nextblock-cms/ui";
+import { submitInteraction, toggleReaction } from "../app/actions/interactions";
+import { cn, useTranslations } from "@nextblock-cms/utils";
+import { MessageSquare, ThumbsUp, Star, Loader2, PenTool } from "lucide-react";
+
+interface ProductReviewsSectionProps {
+  productId: string;
+}
+
+export default function ProductReviewsSection({ productId }: ProductReviewsSectionProps) {
+  const { t, lang } = useTranslations();
+  const [reviews, setReviews] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const [user, setUser] = useState<any>(null);
+
+  // Form states
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [rating, setRating] = useState(5);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [content, setContent] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  // Liked interactions tracking
+  const [likedIds, setLikedIds] = useState<string[]>([]);
+  const [, startTransition] = useTransition();
+
+  // Optimistic reviews list
+  const [optimisticReviews, setOptimisticReviews] = useOptimistic(
+    reviews,
+    (state, { reviewId, hasReacted, count }: { reviewId: string; hasReacted: boolean; count: number }) =>
+      state.map((r) => {
+        if (r.id === reviewId) {
+          const reactions = { ...((r.reactions as Record<string, number>) || {}) };
+          reactions.likes = count;
+          return { ...r, reactions, tempHasReacted: hasReacted };
+        }
+        return r;
+      })
+  );
+
+  useEffect(() => {
+    // 1. Fetch user
+    const supabase = createClient();
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      setUser(user);
+    });
+
+    // 2. Read liked interactions from cookies
+    const match = document.cookie.match(/reacted_interactions=([^;]+)/);
+    if (match) {
+      try {
+        setLikedIds(JSON.parse(decodeURIComponent(match[1])));
+      } catch (err) {
+        console.warn("Failed to parse liked interactions cookie:", err);
+      }
+    }
+
+    // 3. Load initial reviews
+    fetchReviews(0, true);
+  }, [productId]);
+
+  const fetchReviews = async (pageNum: number, isInitial = false) => {
+    setLoading(true);
+    const supabase = createClient();
+    const limit = 5;
+    const start = pageNum * limit;
+    const end = start + limit - 1;
+
+    try {
+      const { data, error: dbError } = await supabase
+        .from("cms_interactions" as any)
+        .select("*, profiles(full_name, avatar_url, github_username)")
+        .eq("product_id", productId)
+        .eq("type", "review")
+        .eq("status", "approved")
+        .order("created_at", { ascending: false })
+        .range(start, end);
+
+      if (dbError) throw dbError;
+
+      if (data) {
+        if (isInitial) {
+          setReviews(data);
+          setPage(0);
+        } else {
+          setReviews((prev) => [...prev, ...data]);
+          setPage(pageNum);
+        }
+        setHasMore(data.length === limit);
+      }
+    } catch (err) {
+      console.error("Error fetching reviews:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLoadMore = () => {
+    fetchReviews(page + 1);
+  };
+
+  const handleLike = async (reviewId: string) => {
+    const isLiked = likedIds.includes(reviewId);
+    const review = reviews.find((r) => r.id === reviewId);
+    if (!review) return;
+
+    const currentLikes = (review.reactions as Record<string, number>)?.likes || 0;
+    const nextCount = isLiked ? Math.max(0, currentLikes - 1) : currentLikes + 1;
+
+    startTransition(async () => {
+      // Apply optimistic update
+      setOptimisticReviews({ reviewId, hasReacted: !isLiked, count: nextCount });
+
+      const res = await toggleReaction(reviewId);
+      if (res.success) {
+        // Update liked cookie state locally
+        if (isLiked) {
+          setLikedIds((prev) => prev.filter((id) => id !== reviewId));
+        } else {
+          setLikedIds((prev) => [...prev, reviewId]);
+        }
+        // Sync actual state
+        setReviews((prev) =>
+          prev.map((r) => {
+            if (r.id === reviewId) {
+              const reactions = { ...((r.reactions as Record<string, number>) || {}) };
+              reactions.likes = res.count ?? nextCount;
+              return { ...r, reactions };
+            }
+            return r;
+          })
+        );
+      }
+    });
+  };
+
+  const handleSubmitReview = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user) {
+      setError(t("reviews.login_to_write"));
+      return;
+    }
+
+    if (content.trim().length < 5) {
+      setError(lang === "fr" ? "Votre avis doit faire au moins 5 caractères." : "Your review must be at least 5 characters long.");
+      return;
+    }
+
+    setSubmitting(true);
+    setError(null);
+    setSuccess(null);
+
+    const res = await submitInteraction({
+      type: "review",
+      content: content.trim(),
+      rating,
+      productId,
+    });
+
+    setSubmitting(false);
+
+    if (res.error) {
+      setError(res.error);
+    } else {
+      setSuccess(t("reviews.success_pending"));
+      setContent("");
+      setRating(5);
+      // Close form after a brief delay
+      setTimeout(() => {
+        setIsFormOpen(false);
+        setSuccess(null);
+      }, 3000);
+    }
+  };
+
+  const getInitials = (profile: any) => {
+    if (profile?.full_name) {
+      return profile.full_name
+        .split(" ")
+        .map((n: string) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2);
+    }
+    return "U";
+  };
+
+  return (
+    <div className="space-y-8 max-w-4xl mx-auto px-4">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b pb-6 gap-4">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
+            <MessageSquare className="h-6 w-6 text-primary" />
+            {t("reviews.customer_reviews")}
+          </h2>
+          <p className="text-sm text-muted-foreground mt-1 text-left">
+            {t("reviews.share_thoughts")}
+          </p>
+        </div>
+
+        {user ? (
+          <Button
+            onClick={() => setIsFormOpen(!isFormOpen)}
+            className="flex items-center gap-2 transition-all"
+            variant={isFormOpen ? "outline" : "default"}
+          >
+            <PenTool className="h-4 w-4" />
+            {isFormOpen ? t("reviews.cancel_review") : t("reviews.write_review")}
+          </Button>
+        ) : (
+          <p className="text-sm text-muted-foreground italic">
+            {t("reviews.login_to_write")}
+          </p>
+        )}
+      </div>
+
+      {/* Submission Form */}
+      {isFormOpen && (
+        <form
+          onSubmit={handleSubmitReview}
+          className="bg-card/50 border border-border/80 rounded-2xl p-6 shadow-sm space-y-4 animate-in fade-in slide-in-from-top-4 duration-300"
+        >
+          <h3 className="text-lg font-semibold text-foreground">{t("reviews.write_your_review")}</h3>
+
+          {/* Stars Selection */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block">
+              {t("reviews.rating")}
+            </label>
+            <div className="flex items-center gap-1.5">
+              {Array.from({ length: 5 }).map((_, i) => {
+                const starVal = i + 1;
+                const isActive = starVal <= (hoverRating || rating);
+                return (
+                  <button
+                    key={i}
+                    type="button"
+                    onClick={() => setRating(starVal)}
+                    onMouseEnter={() => setHoverRating(starVal)}
+                    onMouseLeave={() => setHoverRating(0)}
+                    className="transition-transform active:scale-95 focus:outline-none"
+                    aria-label={`Rate ${starVal} stars`}
+                  >
+                    <Star
+                      className={cn(
+                        "h-7 w-7 transition-colors",
+                        isActive
+                          ? "text-amber-500 fill-amber-500"
+                          : "text-slate-300 dark:text-slate-700"
+                      )}
+                    />
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Text Area */}
+          <div className="space-y-1.5">
+            <label
+              htmlFor="review-content"
+              className="text-xs font-semibold text-muted-foreground uppercase tracking-wider block"
+            >
+              {t("reviews.description")}
+            </label>
+            <Textarea
+              id="review-content"
+              placeholder={t("reviews.description_placeholder")}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              className="min-h-[120px] focus:ring-1 focus:ring-primary"
+              disabled={submitting}
+              required
+            />
+          </div>
+
+          {error && <div className="text-sm font-semibold text-destructive">{error}</div>}
+          {success && <div className="text-sm font-semibold text-emerald-600">{success}</div>}
+
+          <div className="flex justify-end gap-3 pt-2">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => setIsFormOpen(false)}
+              disabled={submitting}
+            >
+              {t("reviews.cancel")}
+            </Button>
+            <Button type="submit" disabled={submitting} className="min-w-[120px]">
+              {submitting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  {t("reviews.submitting")}
+                </>
+              ) : (
+                t("reviews.submit_review")
+              )}
+            </Button>
+          </div>
+        </form>
+      )}
+
+      {/* Reviews List */}
+      <div className="space-y-6">
+        {optimisticReviews.length > 0 ? (
+          optimisticReviews.map((review) => {
+            const hasLiked = likedIds.includes(review.id) || review.tempHasReacted;
+            const likeCount = (review.reactions as Record<string, number>)?.likes || 0;
+            const reviewerName = review.profiles?.full_name || review.profiles?.github_username || "Anonymous";
+            const dateStr = new Date(review.created_at).toLocaleDateString(lang, {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            });
+
+            return (
+              <div
+                key={review.id}
+                className="bg-card border border-border/60 rounded-2xl p-5 shadow-sm space-y-4 hover:border-border/100 transition-all duration-300"
+              >
+                {/* Reviewer Header */}
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex items-center gap-3">
+                    <Avatar className="h-10 w-10 border">
+                      <AvatarImage src={review.profiles?.avatar_url || undefined} alt={reviewerName} />
+                      <AvatarFallback className="bg-primary/5 text-primary text-xs font-semibold">
+                        {getInitials(review.profiles)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <h4 className="text-sm font-semibold text-foreground leading-none">
+                        {reviewerName}
+                      </h4>
+                      <span className="text-[10px] text-muted-foreground mt-1.5 block" suppressHydrationWarning>
+                        {dateStr}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Rating Stars */}
+                  <div className="flex items-center gap-0.5 text-amber-500">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <Star
+                        key={i}
+                        className={cn(
+                          "h-4 w-4",
+                          i < review.rating ? "fill-amber-500 text-amber-500" : "text-slate-200 dark:text-slate-800"
+                        )}
+                      />
+                    ))}
+                  </div>
+                </div>
+
+                {/* Review Content */}
+                <p className="text-sm text-slate-600 dark:text-slate-350 leading-relaxed whitespace-pre-line text-left">
+                  {review.content}
+                </p>
+
+                {/* Reaction Actions */}
+                <div className="flex items-center pt-2">
+                  <button
+                    onClick={() => handleLike(review.id)}
+                    className={cn(
+                      "flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-full border transition-all active:scale-95",
+                      hasLiked
+                        ? "bg-primary/5 border-primary/20 text-primary"
+                        : "bg-background border-border text-muted-foreground hover:text-foreground hover:border-border/100"
+                    )}
+                  >
+                    <ThumbsUp className={cn("h-3.5 w-3.5", hasLiked && "fill-current")} />
+                    <span>{t("reviews.helpful")}</span>
+                    {likeCount > 0 && <span className="font-semibold ml-0.5">{likeCount}</span>}
+                  </button>
+                </div>
+              </div>
+            );
+          })
+        ) : (
+          !loading && (
+            <div className="text-center py-12 border border-dashed rounded-2xl bg-slate-50/50 dark:bg-slate-900/10">
+              <Star className="mx-auto h-8 w-8 text-slate-300 dark:text-slate-700" />
+              <h3 className="mt-4 text-sm font-semibold text-foreground">{t("reviews.no_reviews")}</h3>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {t("reviews.be_the_first")}
+              </p>
+            </div>
+          )
+        )}
+
+        {/* Loading Spinner */}
+        {loading && (
+          <div className="flex justify-center py-6">
+            <Loader2 className="h-6 w-6 animate-spin text-primary" />
+          </div>
+        )}
+
+        {/* Load More */}
+        {hasMore && !loading && (
+          <div className="flex justify-center pt-2">
+            <Button variant="outline" size="sm" onClick={handleLoadMore}>
+              {t("reviews.load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/components/blocks/renderers/ProductDetailsBlockRenderer.tsx

@@ -3,6 +3,7 @@ import { ProductDetailsLayout } from '@nextblock-cms/ecommerce/components/Produc
 import type { VisualEditAttributes, VisualEditingDocumentContext } from '../../../lib/visual-editing/types';
 import { createClient } from "@nextblock-cms/db/server";
 import BlockRenderer from "../../BlockRenderer";
+import ProductReviewsSection from "../../ProductReviewsSection";
 
 interface ProductDetailsBlockRendererProps {
   visualEditAttributes?: VisualEditAttributes;
@@ -84,6 +85,7 @@ export default async function ProductDetailsBlockRenderer({
       <ProductDetailsLayout 
         visualEditingEnabled={productVisualEditingEnabled} 
         descriptionNode={descriptionNode}
+        reviewsNode={excludeProductId ? <ProductReviewsSection productId={excludeProductId} /> : undefined}
       />
     </div>
   );

package/templates/nextblock-template/components/privacy/ConsentBanner.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import { useTranslations } from '@nextblock-cms/utils';
 import { logConsentDecision } from '../../app/actions/consent';
 import { readConsent, writeConsent } from '../../lib/privacy/consent-client';
 
@@ -11,10 +12,22 @@ import { readConsent, writeConsent } from '../../lib/privacy/consent-client';
  * are mirrored to privacy_consent_logs for accountability.
  */
 export function ConsentBanner() {
+  const { lang, t } = useTranslations();
   const [visible, setVisible] = useState(false);
   const [managing, setManaging] = useState(false);
   const [analytics, setAnalytics] = useState(true);
   const [marketing, setMarketing] = useState(false);
+  const isFrench = lang.toLowerCase().startsWith('fr');
+
+  const translate = (key: string, fallback: string) => {
+    const translated = t(key);
+    return translated === key ? fallback : translated;
+  };
+
+  const privacyPolicyHref = translate(
+    'privacy.consent.privacy_policy_href',
+    isFrench ? '/politique-de-confidentialite' : '/privacy-policy',
+  );
 
   useEffect(() => {
     if (!readConsent()) setVisible(true);
@@ -35,35 +48,56 @@ export function ConsentBanner() {
   return (
     <div
       role="dialog"
-      aria-label="Privacy consent"
+      aria-label={translate('privacy.consent.aria_label', 'Privacy consent')}
       className="fixed bottom-4 right-4 z-[70] w-[min(92vw,360px)] animate-in fade-in slide-in-from-bottom-2 duration-300"
     >
       <div className="rounded-2xl border border-slate-200/70 bg-white/95 p-4 shadow-[0_8px_30px_rgba(15,23,42,0.12)] backdrop-blur-md dark:border-slate-700/60 dark:bg-slate-900/95 dark:shadow-[0_8px_30px_rgba(0,0,0,0.5)]">
         <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
-          We value your privacy
+          {translate('privacy.consent.title', 'We value your privacy')}
         </p>
         <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">
-          We use only essential cookies by default. With your consent we also use
-          analytics to improve the site. See our{' '}
-          <Link href="/privacy-policy" className="underline underline-offset-2 hover:text-slate-700 dark:hover:text-slate-200">
-            Privacy Policy
+          {translate(
+            'privacy.consent.description_before_policy_link',
+            'We use only essential cookies by default. With your consent we also use analytics to improve the site. See our',
+          )}{' '}
+          <Link
+            href={privacyPolicyHref}
+            className="underline underline-offset-2 hover:text-slate-700 dark:hover:text-slate-200"
+          >
+            {translate('privacy.consent.privacy_policy_link', 'Privacy Policy')}
           </Link>
-          .
+          {translate('privacy.consent.description_after_policy_link', '.')}
         </p>
 
         {managing && (
           <div className="mt-3 space-y-2 rounded-lg bg-slate-50 p-3 dark:bg-slate-800/60">
             <label className="flex items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
               <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">Necessary</span>
-                <span className="block text-[11px] text-slate-400">Always on</span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.necessary_label', 'Necessary')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate('privacy.consent.necessary_help', 'Always on')}
+                </span>
               </span>
-              <input type="checkbox" checked disabled className="h-4 w-4 accent-slate-400" />
+              <input
+                type="checkbox"
+                checked
+                disabled
+                className="h-4 w-4 accent-slate-400"
+              />
             </label>
             <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
               <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">Analytics</span>
-                <span className="block text-[11px] text-slate-400">Usage insights</span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.analytics_label', 'Analytics')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate(
+                    'privacy.consent.analytics_help',
+                    'Usage insights',
+                  )}
+                </span>
               </span>
               <input
                 type="checkbox"
@@ -74,8 +108,15 @@ export function ConsentBanner() {
             </label>
             <label className="flex cursor-pointer items-center justify-between gap-3 text-xs text-slate-600 dark:text-slate-300">
               <span>
-                <span className="font-medium text-slate-800 dark:text-slate-200">Marketing</span>
-                <span className="block text-[11px] text-slate-400">Personalized content</span>
+                <span className="font-medium text-slate-800 dark:text-slate-200">
+                  {translate('privacy.consent.marketing_label', 'Marketing')}
+                </span>
+                <span className="block text-[11px] text-slate-400">
+                  {translate(
+                    'privacy.consent.marketing_help',
+                    'Personalized content',
+                  )}
+                </span>
               </span>
               <input
                 type="checkbox"
@@ -94,7 +135,7 @@ export function ConsentBanner() {
               onClick={() => decide({ analytics, marketing })}
               className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
             >
-              Save choices
+              {translate('privacy.consent.save_choices', 'Save choices')}
             </button>
           ) : (
             <button
@@ -102,7 +143,7 @@ export function ConsentBanner() {
               onClick={() => decide({ analytics: true, marketing: true })}
               className="flex-1 rounded-lg bg-slate-900 px-3 py-2 text-xs font-medium text-white transition hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
             >
-              Accept all
+              {translate('privacy.consent.accept_all', 'Accept all')}
             </button>
           )}
           <button
@@ -110,16 +151,18 @@ export function ConsentBanner() {
             onClick={() => decide({ analytics: false, marketing: false })}
             className="rounded-lg border border-slate-200 px-3 py-2 text-xs font-medium text-slate-600 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
           >
-            Reject all
+            {translate('privacy.consent.reject_all', 'Reject all')}
           </button>
         </div>
 
         <button
           type="button"
           onClick={() => setManaging((prev) => !prev)}
-          className="mt-2 w-full text-center text-[11px] text-slate-400 underline underline-offset-2 transition hover:text-slate-600 dark:hover:text-slate-300"
+          className="mt-2 w-full text-center text-[11px] text-slate-800 underline underline-offset-2 transition hover:text-slate-600 dark:hover:text-slate-300"
         >
-          {managing ? 'Hide options' : 'Manage options'}
+          {managing
+            ? translate('privacy.consent.hide_options', 'Hide options')
+            : translate('privacy.consent.manage_options', 'Manage options')}
         </button>
       </div>
     </div>