npm - create-brainerce-store - Versions diffs - 1.68.0 → 1.71.0 - Mend

create-brainerce-store 1.68.0 → 1.71.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/templates/nextjs/base/src/ui/product/back-in-stock-form.tsx ADDED Viewed

@@ -0,0 +1,173 @@
+'use client';
+/**
+ * Back-in-stock alert — "email me when this is back".
+ *
+ * ⛔ THIS IS NOT A NEWSLETTER SIGNUP. `stockAlerts.subscribe()` grants no
+ * marketing consent, creates no customer account, and the person receives
+ * exactly one message: the alert itself, about this item, carrying a link that
+ * stops it. That is why the button says "Notify me" and never "Subscribe" —
+ * and why a shopper who unsubscribed from the store's marketing can still use
+ * it. Never gate it on consent.
+ *
+ * ⛔ RENDER IT ONLY WHERE IT APPLIES. `canOfferStockAlert()` below is the whole
+ * gate. Requests for anything else are silently discarded server-side (the
+ * response is uniform on purpose, so it cannot be used to read a store's stock
+ * levels), which means a button in the wrong place looks like it worked and
+ * does nothing.
+ *
+ * ⛔ THE RESPONSE CARRIES NO INFORMATION. `{ ok: true }` comes back identically
+ * for a new request, a duplicate, a product id that does not exist, an item
+ * already in stock, and an address suppressed after a hard bounce. There is
+ * nothing to branch on — render one success state and stop.
+ *
+ * ⛔ DO NOT PROMISE TIMING. Availability is `total - reserved`, so an expiring
+ * cart briefly lifts a sold-out item above zero; the alert waits for stock to
+ * hold, then goes out in waves sized to the units that came back, oldest
+ * request first. A shopper can sit through a restock without hearing. "We'll
+ * email you when it's back" is true; "you'll be the first to know" is not.
+ *
+ * Rate limited to 5 requests / 60s per IP, 25 open alerts per address per store.
+ */
+import { useMemo, useState } from 'react';
+import type { InventoryInfo } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+/**
+ * The gate. Four ways the answer is no, and every one of them matters:
+ *
+ *  - the merchant switched the feature off for this storefront
+ *    (`storeInfo.stockAlertsEnabled`, read once at boot);
+ *  - the item is in stock, so there is nothing to wait for;
+ *  - stock is not TRACKED — UNLIMITED never runs out, DISABLED is not for sale
+ *    and no restock changes that;
+ *  - the merchant allows backorders on it, so the storefront can already sell
+ *    it while out of stock and an alert would tell someone to come back and do
+ *    what they can already do.
+ */
+export function canOfferStockAlert(
+  inventory: InventoryInfo | null | undefined,
+  stockAlertsEnabled: boolean | undefined
+): boolean {
+  if (stockAlertsEnabled === false) return false;
+  if (!inventory) return false;
+  if (inventory.trackingMode !== 'TRACKED') return false;
+  if (inventory.canPurchase) return false;
+  // Older backends omit the field entirely; absent means no backorder.
+  return (inventory.backorderMode ?? 'NONE') === 'NONE';
+}
+interface BackInStockFormProps {
+  productId: string;
+  /**
+   * ⛔ Pass the SELECTED variant on any product with variants. Without it the
+   * alert waits on the product as a whole, so a shopper who wanted the medium
+   * is mailed when the small returns and arrives to find their size still gone.
+   */
+  variantId?: string;
+}
+export function BackInStockForm({ productId, variantId }: BackInStockFormProps) {
+  const t = useTranslations('backInStock');
+  const [email, setEmail] = useState('');
+  const [honeypot, setHoneypot] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Same source the newsletter form uses — <html lang> is set from the active
+  // locale, and passing it is what decides the language of the alert email.
+  // Omit it on a Hebrew storefront and the shopper gets English.
+  const locale = useMemo(() => {
+    if (typeof document !== 'undefined') return document.documentElement.lang || undefined;
+    return undefined;
+  }, []);
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading || !email.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await getClient().stockAlerts.subscribe({
+        email: email.trim(),
+        productId,
+        variantId,
+        locale,
+        honeypot,
+      });
+      setDone(true);
+      setEmail('');
+    } catch {
+      // A 429 lands here too — the copy stays generic rather than explaining
+      // the rate limit, which would only tell an abuser where the edge is.
+      setError(t('genericError'));
+    } finally {
+      setLoading(false);
+    }
+  }
+  if (done) {
+    return (
+      <div className="border-border space-y-1 rounded border p-4">
+        <p className="text-sm font-medium">{t('doneTitle')}</p>
+        <p className="text-sm opacity-70">{t('doneBody')}</p>
+      </div>
+    );
+  }
+  return (
+    <form onSubmit={handleSubmit} className="border-border space-y-2 rounded border p-4">
+      <label htmlFor="back-in-stock-email" className="block text-sm font-medium">
+        {t('title')}
+      </label>
+      <p className="text-sm opacity-70">{t('subtitle')}</p>
+      <div className="flex flex-wrap gap-2">
+        <input
+          id="back-in-stock-email"
+          type="email"
+          required
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={t('placeholder')}
+          className="border-border min-w-0 flex-1 rounded border px-3 py-2 text-sm"
+        />
+        <button
+          type="submit"
+          disabled={loading}
+          className="bg-primary text-primary-foreground rounded px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-60"
+        >
+          {loading ? t('submitting') : t('submit')}
+        </button>
+      </div>
+      {/*
+        Honeypot. Bots complete every text input; a human never sees this one, so
+        a non-empty value rejects the request server-side. Positioned off-screen
+        rather than `display:none` — some bots skip hidden inputs — and kept out
+        of the tab order and the accessibility tree.
+      */}
+      <input
+        type="text"
+        name="company_website"
+        tabIndex={-1}
+        autoComplete="off"
+        aria-hidden="true"
+        value={honeypot}
+        onChange={(e) => setHoneypot(e.target.value)}
+        style={{ position: 'absolute', left: '-9999px', width: 1, height: 1 }}
+      />
+      {error ? (
+        <p role="alert" className="text-sm text-red-600">
+          {error}
+        </p>
+      ) : null}
+    </form>
+  );
+}