create-nextblock 0.16.1 → 0.16.3

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

@@ -1,188 +1,188 @@
-'use client';
-
-import { useActionState } from 'react';
-import { useFormStatus } from 'react-dom';
-import { Button } from '@nextblock-cms/ui';
-import { Input } from '@nextblock-cms/ui';
-import { Textarea } from '@nextblock-cms/ui';
-import { useTranslations } from '@nextblock-cms/utils';
-import { Loader2, Mail, CheckCircle2 } from 'lucide-react';
-
-import { AuthBotProtection } from './auth/AuthBotProtection';
-import {
-  submitProductInquiry,
-  type ContactSellerState,
-} from '../app/actions/contactSellerActions';
-
-/**
- * Shown in place of Add-to-Cart when the store cannot take payment for this product.
- *
- * The visitor never learns why — "online ordering isn't available yet" is true and
- * actionable, whereas "the merchant hasn't configured Stripe" is an internal detail.
- * No seller address appears anywhere in this component or its payload: the form posts
- * a product id, and the server resolves who to notify.
- */
-
-interface ContactSellerSectionProps {
-  productId: string;
-  botProtectionProvider: 'none' | 'turnstile' | 'recaptcha';
-  botProtectionSiteKey: string;
-  scriptNonce?: string;
-}
-
-const INITIAL_STATE: ContactSellerState = { success: false, messageKey: '' };
-
-// `t()` returns the key itself when a translation row is missing, so every string
-// carries the English literal it should fall back to.
-const FALLBACKS: Record<string, string> = {
-  'ecommerce.contact_seller_heading': 'Interested in this product?',
-  'ecommerce.contact_seller_intro':
-    "Online ordering isn't available for this item yet. Send the seller a message and they'll get back to you about buying it.",
-  'ecommerce.contact_seller_name': 'Your name',
-  'ecommerce.contact_seller_email': 'Your email',
-  'ecommerce.contact_seller_message': 'Message',
-  'ecommerce.contact_seller_send': 'Send message',
-  'ecommerce.contact_seller_sending': 'Sending…',
-  'ecommerce.contact_seller_sent':
-    "Thanks — your message has been sent to the seller. They'll reply to the email address you gave.",
-  'ecommerce.contact_seller_error':
-    "Sorry, your message couldn't be sent. Please try again in a moment.",
-  'ecommerce.contact_seller_throttled':
-    "You've sent several messages already. Please wait a few minutes before sending another.",
-  'ecommerce.contact_seller_invalid':
-    'Please check your name, email address and message, then try again.',
-};
-
-function SubmitButton({ label, pendingLabel }: { label: string; pendingLabel: string }) {
-  const { pending } = useFormStatus();
-  return (
-    <Button type="submit" disabled={pending} className="min-w-[150px]">
-      {pending ? (
-        <>
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          {pendingLabel}
-        </>
-      ) : (
-        <>
-          <Mail className="mr-2 h-4 w-4" />
-          {label}
-        </>
-      )}
-    </Button>
-  );
-}
-
-export default function ContactSellerSection({
-  productId,
-  botProtectionProvider,
-  botProtectionSiteKey,
-  scriptNonce,
-}: ContactSellerSectionProps) {
-  const { t, lang } = useTranslations();
-  const [state, formAction] = useActionState(submitProductInquiry, INITIAL_STATE);
-
-  // Resolve a key to its translation, falling back to the English literal.
-  const label = (key: string): string => {
-    const value = t(key);
-    return value === key ? (FALLBACKS[key] ?? key) : value;
-  };
-
-  if (state.success) {
-    return (
-      <div
-        id="contact-seller"
-        className="rounded-2xl border border-emerald-200 bg-emerald-50 p-6 dark:border-emerald-900/50 dark:bg-emerald-950/30"
-      >
-        <div className="flex items-start gap-3">
-          <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
-          <p className="text-sm text-emerald-900 dark:text-emerald-200">
-            {label('ecommerce.contact_seller_sent')}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  // Captcha failures carry provider-specific text; everything else is a keyed message.
-  const errorText =
-    state.message || (state.messageKey ? label(state.messageKey) : null);
-
-  return (
-    <div
-      id="contact-seller"
-      className="scroll-mt-24 rounded-2xl border border-border/80 bg-card/50 p-6 shadow-sm"
-    >
-      <h3 className="text-lg font-semibold text-foreground">
-        {label('ecommerce.contact_seller_heading')}
-      </h3>
-      <p className="mt-1 text-sm text-muted-foreground">
-        {label('ecommerce.contact_seller_intro')}
-      </p>
-
-      <form action={formAction} className="mt-5 space-y-4">
-        <input type="hidden" name="product_id" value={productId} />
-        <input type="hidden" name="locale" value={lang ?? ''} />
-
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="space-y-1.5">
-            <label
-              htmlFor="contact-seller-name"
-              className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
-            >
-              {label('ecommerce.contact_seller_name')}
-            </label>
-            <Input id="contact-seller-name" name="name" required maxLength={120} autoComplete="name" />
-          </div>
-
-          <div className="space-y-1.5">
-            <label
-              htmlFor="contact-seller-email"
-              className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
-            >
-              {label('ecommerce.contact_seller_email')}
-            </label>
-            <Input
-              id="contact-seller-email"
-              name="email"
-              type="email"
-              required
-              maxLength={254}
-              autoComplete="email"
-            />
-          </div>
-        </div>
-
-        <div className="space-y-1.5">
-          <label
-            htmlFor="contact-seller-message"
-            className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
-          >
-            {label('ecommerce.contact_seller_message')}
-          </label>
-          <Textarea
-            id="contact-seller-message"
-            name="message"
-            required
-            maxLength={2000}
-            className="min-h-[120px]"
-          />
-        </div>
-
-        <AuthBotProtection
-          provider={botProtectionProvider}
-          siteKey={botProtectionSiteKey}
-          scriptNonce={scriptNonce}
-        />
-
-        {errorText && <p className="text-sm font-semibold text-destructive">{errorText}</p>}
-
-        <div className="flex justify-end pt-1">
-          <SubmitButton
-            label={label('ecommerce.contact_seller_send')}
-            pendingLabel={label('ecommerce.contact_seller_sending')}
-          />
-        </div>
-      </form>
-    </div>
-  );
-}
+'use client';
+
+import { useActionState } from 'react';
+import { useFormStatus } from 'react-dom';
+import { Button } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Textarea } from '@nextblock-cms/ui';
+import { useTranslations } from '@nextblock-cms/utils';
+import { Loader2, Mail, CheckCircle2 } from 'lucide-react';
+
+import { AuthBotProtection } from './auth/AuthBotProtection';
+import {
+  submitProductInquiry,
+  type ContactSellerState,
+} from '../app/actions/contactSellerActions';
+
+/**
+ * Shown in place of Add-to-Cart when the store cannot take payment for this product.
+ *
+ * The visitor never learns why — "online ordering isn't available yet" is true and
+ * actionable, whereas "the merchant hasn't configured Stripe" is an internal detail.
+ * No seller address appears anywhere in this component or its payload: the form posts
+ * a product id, and the server resolves who to notify.
+ */
+
+interface ContactSellerSectionProps {
+  productId: string;
+  botProtectionProvider: 'none' | 'turnstile' | 'recaptcha';
+  botProtectionSiteKey: string;
+  scriptNonce?: string;
+}
+
+const INITIAL_STATE: ContactSellerState = { success: false, messageKey: '' };
+
+// `t()` returns the key itself when a translation row is missing, so every string
+// carries the English literal it should fall back to.
+const FALLBACKS: Record<string, string> = {
+  'ecommerce.contact_seller_heading': 'Interested in this product?',
+  'ecommerce.contact_seller_intro':
+    "Online ordering isn't available for this item yet. Send the seller a message and they'll get back to you about buying it.",
+  'ecommerce.contact_seller_name': 'Your name',
+  'ecommerce.contact_seller_email': 'Your email',
+  'ecommerce.contact_seller_message': 'Message',
+  'ecommerce.contact_seller_send': 'Send message',
+  'ecommerce.contact_seller_sending': 'Sending…',
+  'ecommerce.contact_seller_sent':
+    "Thanks — your message has been sent to the seller. They'll reply to the email address you gave.",
+  'ecommerce.contact_seller_error':
+    "Sorry, your message couldn't be sent. Please try again in a moment.",
+  'ecommerce.contact_seller_throttled':
+    "You've sent several messages already. Please wait a few minutes before sending another.",
+  'ecommerce.contact_seller_invalid':
+    'Please check your name, email address and message, then try again.',
+};
+
+function SubmitButton({ label, pendingLabel }: { label: string; pendingLabel: string }) {
+  const { pending } = useFormStatus();
+  return (
+    <Button type="submit" disabled={pending} className="min-w-[150px]">
+      {pending ? (
+        <>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          {pendingLabel}
+        </>
+      ) : (
+        <>
+          <Mail className="mr-2 h-4 w-4" />
+          {label}
+        </>
+      )}
+    </Button>
+  );
+}
+
+export default function ContactSellerSection({
+  productId,
+  botProtectionProvider,
+  botProtectionSiteKey,
+  scriptNonce,
+}: ContactSellerSectionProps) {
+  const { t, lang } = useTranslations();
+  const [state, formAction] = useActionState(submitProductInquiry, INITIAL_STATE);
+
+  // Resolve a key to its translation, falling back to the English literal.
+  const label = (key: string): string => {
+    const value = t(key);
+    return value === key ? (FALLBACKS[key] ?? key) : value;
+  };
+
+  if (state.success) {
+    return (
+      <div
+        id="contact-seller"
+        className="rounded-2xl border border-emerald-200 bg-emerald-50 p-6 dark:border-emerald-900/50 dark:bg-emerald-950/30"
+      >
+        <div className="flex items-start gap-3">
+          <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+          <p className="text-sm text-emerald-900 dark:text-emerald-200">
+            {label('ecommerce.contact_seller_sent')}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Captcha failures carry provider-specific text; everything else is a keyed message.
+  const errorText =
+    state.message || (state.messageKey ? label(state.messageKey) : null);
+
+  return (
+    <div
+      id="contact-seller"
+      className="scroll-mt-24 rounded-2xl border border-border/80 bg-card/50 p-6 shadow-sm"
+    >
+      <h3 className="text-lg font-semibold text-foreground">
+        {label('ecommerce.contact_seller_heading')}
+      </h3>
+      <p className="mt-1 text-sm text-muted-foreground">
+        {label('ecommerce.contact_seller_intro')}
+      </p>
+
+      <form action={formAction} className="mt-5 space-y-4">
+        <input type="hidden" name="product_id" value={productId} />
+        <input type="hidden" name="locale" value={lang ?? ''} />
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <label
+              htmlFor="contact-seller-name"
+              className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+            >
+              {label('ecommerce.contact_seller_name')}
+            </label>
+            <Input id="contact-seller-name" name="name" required maxLength={120} autoComplete="name" />
+          </div>
+
+          <div className="space-y-1.5">
+            <label
+              htmlFor="contact-seller-email"
+              className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+            >
+              {label('ecommerce.contact_seller_email')}
+            </label>
+            <Input
+              id="contact-seller-email"
+              name="email"
+              type="email"
+              required
+              maxLength={254}
+              autoComplete="email"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-1.5">
+          <label
+            htmlFor="contact-seller-message"
+            className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground"
+          >
+            {label('ecommerce.contact_seller_message')}
+          </label>
+          <Textarea
+            id="contact-seller-message"
+            name="message"
+            required
+            maxLength={2000}
+            className="min-h-[120px]"
+          />
+        </div>
+
+        <AuthBotProtection
+          provider={botProtectionProvider}
+          siteKey={botProtectionSiteKey}
+          scriptNonce={scriptNonce}
+        />
+
+        {errorText && <p className="text-sm font-semibold text-destructive">{errorText}</p>}
+
+        <div className="flex justify-end pt-1">
+          <SubmitButton
+            label={label('ecommerce.contact_seller_send')}
+            pendingLabel={label('ecommerce.contact_seller_sending')}
+          />
+        </div>
+      </form>
+    </div>
+  );
+}

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

@@ -1,23 +1,23 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { useEffect, useState } from 'react';
-import { useCartStore } from '@nextblock-cms/ecommerce/cart-store';
-
-const CartDrawer = dynamic(
-  () => import('./CartDrawerLoader').then((module) => module.CartDrawerLoader),
-  { ssr: false }
-);
-
-export function DeferredCartDrawer() {
-  const isOpen = useCartStore((state) => state.isOpen);
-  const [shouldLoadDrawer, setShouldLoadDrawer] = useState(false);
-
-  useEffect(() => {
-    if (isOpen) {
-      setShouldLoadDrawer(true);
-    }
-  }, [isOpen]);
-
-  return shouldLoadDrawer ? <CartDrawer /> : null;
-}
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import { useCartStore } from '@nextblock-cms/ecommerce/cart-store';
+
+const CartDrawer = dynamic(
+  () => import('./CartDrawerLoader').then((module) => module.CartDrawerLoader),
+  { ssr: false }
+);
+
+export function DeferredCartDrawer() {
+  const isOpen = useCartStore((state) => state.isOpen);
+  const [shouldLoadDrawer, setShouldLoadDrawer] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldLoadDrawer(true);
+    }
+  }, [isOpen]);
+
+  return shouldLoadDrawer ? <CartDrawer /> : null;
+}

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

@@ -1,51 +1,51 @@
-"use client";
-
-import { useEffect, useState, type ComponentType } from "react";
-
-type CartTranslatorComponent = ComponentType<Record<string, never>>;
-
-function scheduleIdleWork(callback: () => void) {
-  if (typeof window === "undefined") {
-    return undefined;
-  }
-
-  const browserWindow = window as Window & {
-    requestIdleCallback?: (
-      callback: IdleRequestCallback,
-      options?: IdleRequestOptions
-    ) => number;
-    cancelIdleCallback?: (handle: number) => void;
-  };
-
-  if (browserWindow.requestIdleCallback && browserWindow.cancelIdleCallback) {
-    const idleId = browserWindow.requestIdleCallback(callback, { timeout: 3_000 });
-    return () => browserWindow.cancelIdleCallback?.(idleId);
-  }
-
-  const timeoutId = window.setTimeout(callback, 2_000);
-  return () => window.clearTimeout(timeoutId);
-}
-
-export function DeferredCartTranslator() {
-  const [CartTranslator, setCartTranslator] =
-    useState<CartTranslatorComponent | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const cancelIdleWork = scheduleIdleWork(() => {
-      void import("./CartTranslator").then((module) => {
-        if (!cancelled) {
-          setCartTranslator(() => module.CartTranslator as CartTranslatorComponent);
-        }
-      });
-    });
-
-    return () => {
-      cancelled = true;
-      cancelIdleWork?.();
-    };
-  }, []);
-
-  return CartTranslator ? <CartTranslator /> : null;
-}
+"use client";
+
+import { useEffect, useState, type ComponentType } from "react";
+
+type CartTranslatorComponent = ComponentType<Record<string, never>>;
+
+function scheduleIdleWork(callback: () => void) {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+
+  const browserWindow = window as Window & {
+    requestIdleCallback?: (
+      callback: IdleRequestCallback,
+      options?: IdleRequestOptions
+    ) => number;
+    cancelIdleCallback?: (handle: number) => void;
+  };
+
+  if (browserWindow.requestIdleCallback && browserWindow.cancelIdleCallback) {
+    const idleId = browserWindow.requestIdleCallback(callback, { timeout: 3_000 });
+    return () => browserWindow.cancelIdleCallback?.(idleId);
+  }
+
+  const timeoutId = window.setTimeout(callback, 2_000);
+  return () => window.clearTimeout(timeoutId);
+}
+
+export function DeferredCartTranslator() {
+  const [CartTranslator, setCartTranslator] =
+    useState<CartTranslatorComponent | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const cancelIdleWork = scheduleIdleWork(() => {
+      void import("./CartTranslator").then((module) => {
+        if (!cancelled) {
+          setCartTranslator(() => module.CartTranslator as CartTranslatorComponent);
+        }
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      cancelIdleWork?.();
+    };
+  }, []);
+
+  return CartTranslator ? <CartTranslator /> : null;
+}

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

@@ -1,68 +1,68 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { Search } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Button } from "@nextblock-cms/ui";
-import { cn } from "@nextblock-cms/utils";
-
-type TriggerVariant = "desktop" | "mobile";
-
-interface DeferredGlobalSearchProps {
-  isEcommerceActive: boolean;
-  variant: TriggerVariant;
-}
-
-const GlobalSearch = dynamic(() => import("./GlobalSearch"), {
-  ssr: false,
-  loading: () => null,
-});
-
-export function DeferredGlobalSearch(props: DeferredGlobalSearchProps) {
-  const [shouldLoad, setShouldLoad] = useState(false);
-  const [openOnMount, setOpenOnMount] = useState(false);
-
-  const openSearch = () => {
-    setOpenOnMount(true);
-    setShouldLoad(true);
-  };
-
-  useEffect(() => {
-    if (props.variant !== "desktop") {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-        event.preventDefault();
-        openSearch();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [props.variant]);
-
-  if (shouldLoad) {
-    return <GlobalSearch {...props} openOnMount={openOnMount} />;
-  }
-
-  return (
-    <Button
-      type="button"
-      variant="outline"
-      size={props.variant === "mobile" ? "icon" : "default"}
-      className={cn(
-        "shrink-0 border-foreground/15 bg-background/70",
-        props.variant === "desktop" && "h-9 gap-2 px-3 text-sm",
-        props.variant === "mobile" && "h-10 w-10"
-      )}
-      aria-label="Search"
-      aria-keyshortcuts="Control+K Meta+K"
-      onClick={openSearch}
-    >
-      <Search className="h-4 w-4" />
-      {props.variant === "desktop" ? <span>Search</span> : null}
-    </Button>
-  );
-}
+"use client";
+
+import dynamic from "next/dynamic";
+import { Search } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@nextblock-cms/ui";
+import { cn } from "@nextblock-cms/utils";
+
+type TriggerVariant = "desktop" | "mobile";
+
+interface DeferredGlobalSearchProps {
+  isEcommerceActive: boolean;
+  variant: TriggerVariant;
+}
+
+const GlobalSearch = dynamic(() => import("./GlobalSearch"), {
+  ssr: false,
+  loading: () => null,
+});
+
+export function DeferredGlobalSearch(props: DeferredGlobalSearchProps) {
+  const [shouldLoad, setShouldLoad] = useState(false);
+  const [openOnMount, setOpenOnMount] = useState(false);
+
+  const openSearch = () => {
+    setOpenOnMount(true);
+    setShouldLoad(true);
+  };
+
+  useEffect(() => {
+    if (props.variant !== "desktop") {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        openSearch();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [props.variant]);
+
+  if (shouldLoad) {
+    return <GlobalSearch {...props} openOnMount={openOnMount} />;
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size={props.variant === "mobile" ? "icon" : "default"}
+      className={cn(
+        "shrink-0 border-foreground/15 bg-background/70",
+        props.variant === "desktop" && "h-9 gap-2 px-3 text-sm",
+        props.variant === "mobile" && "h-10 w-10"
+      )}
+      aria-label="Search"
+      aria-keyshortcuts="Control+K Meta+K"
+      onClick={openSearch}
+    >
+      <Search className="h-4 w-4" />
+      {props.variant === "desktop" ? <span>Search</span> : null}
+    </Button>
+  );
+}