create-brainerce-store 1.79.0 → 1.80.0

package/dist/index.js

@@ -31,8 +31,17 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.79.0",
+      version: "1.80.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
+      homepage: "https://brainerce.com",
+      repository: {
+        type: "git",
+        url: "https://github.com/brainerce/brainerce.git",
+        directory: "packages/create-brainerce-store"
+      },
+      bugs: {
+        url: "https://github.com/brainerce/brainerce/issues"
+      },
       bin: {
         "create-brainerce-store": "dist/index.js"
       },
@@ -315,7 +324,13 @@ var BRAINERCE_RUNTIME_DEPS = Object.freeze({
   // off an SDK-typed `Product`, so on an older SDK a scaffolded store fails
   // type-check at creation. Verified against the published 2.4.0 tarball: zero
   // files mention either field.
-  brainerce: "^2.5.0",
+  //
+  // 2.7.0 is the first SDK with `marketing.getBenefit()` and
+  // `PublicNewsletterBenefitOffer`, and the scaffolded newsletter signup reads
+  // both to show the merchant's welcome offer beside the field. On an older
+  // SDK a scaffolded store fails type-check at creation, exactly like the KIT
+  // floor above — so this floor is load-bearing, not cosmetic.
+  brainerce: "^2.7.0",
   "isomorphic-dompurify": "^3.8.0"
 });
 

package/messages/en.json

@@ -42,7 +42,7 @@
     "birthday": "Birthday",
     "birthdayMonth": "Month",
     "birthdayDay": "Day",
-    "birthdayGiftNote": "Add your birthday and a gift arrives by email on the day.",
+    "birthdayGiftNote": "Add your birthday and a gift arrives by email on the day, as long as you are signed up for our emails.",
     "birthdayIncomplete": "Choose both a month and a day, or leave both empty.",
     "birthdayRequired": "Choose your birthday month and day to continue.",
     "birthdayPlaceholder": "Choose your birthday",
@@ -122,7 +122,7 @@
     "addSelectedToCart": "Add Selected to Cart",
     "totalPrice": "Total: {price}",
     "addingAll": "Adding...",
-      "whatsInTheBox": "What's in the box",
+    "whatsInTheBox": "What's in the box",
     "by": "By"
   },
   "reviews": {
@@ -569,7 +569,9 @@
     "submitting": "Sending...",
     "checkEmailTitle": "Almost there — check your email",
     "checkEmailBody": "We've sent you a link to confirm. Look in your spam folder too; you won't get another copy for 24 hours.",
-    "discountCode": "Your code: {code}",
+    "offerPercent": "{value}% off your first order",
+    "offerAmount": "{value} off your first order",
+    "offerByEmail": "Your personal code is in that email too. It is one per address.",
     "genericError": "Something went wrong. Please try again."
   },
   "loyalty": {

package/messages/he.json

@@ -42,7 +42,7 @@
     "birthday": "יום הולדת",
     "birthdayMonth": "חודש",
     "birthdayDay": "יום",
-    "birthdayGiftNote": "הוסיפו את יום ההולדת ותקבלו מתנה במייל ביום עצמו.",
+    "birthdayGiftNote": "הוסיפו את יום ההולדת ותקבלו מתנה במייל ביום עצמו, בתנאי שאתם רשומים לדיוור שלנו.",
     "birthdayIncomplete": "בחרו גם חודש וגם יום, או השאירו את שניהם ריקים.",
     "birthdayRequired": "בחרו את חודש ויום ההולדת כדי להמשיך.",
     "birthdayPlaceholder": "בחרו את יום ההולדת",
@@ -122,7 +122,7 @@
     "addSelectedToCart": "הוסף הנבחרים לעגלה",
     "totalPrice": "סה\"כ: {price}",
     "addingAll": "מוסיף...",
-      "whatsInTheBox": "מה יש בקופסה",
+    "whatsInTheBox": "מה יש בקופסה",
     "by": "מאת"
   },
   "reviews": {
@@ -569,7 +569,9 @@
     "submitting": "שולח...",
     "checkEmailTitle": "כמעט סיימנו — בדקו את המייל",
     "checkEmailBody": "שלחנו לכם קישור לאישור. בדקו גם בתיקיית הספאם; עותק נוסף לא יישלח ב-24 השעות הקרובות.",
-    "discountCode": "הקוד שלכם: {code}",
+    "offerPercent": "{value}% הנחה על ההזמנה הראשונה",
+    "offerAmount": "{value} הנחה על ההזמנה הראשונה",
+    "offerByEmail": "הקוד האישי שלכם נמצא באותו מייל. הטבה אחת לכל כתובת.",
     "genericError": "משהו השתבש. נסו שוב."
   },
   "loyalty": {

package/package.json

@@ -1,7 +1,16 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.79.0",
+  "version": "1.80.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
+  "homepage": "https://brainerce.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brainerce/brainerce.git",
+    "directory": "packages/create-brainerce-store"
+  },
+  "bugs": {
+    "url": "https://github.com/brainerce/brainerce/issues"
+  },
   "bin": {
     "create-brainerce-store": "dist/index.js"
   },

package/templates/nextjs/base/src/components/account/profile-section.tsx

@@ -7,6 +7,7 @@ import { useTranslations } from '@/core/lib/translations';
 import { cn } from '@/core/lib/utils';
 import { birthMonthKey, toBirthdayNumber } from '@/core/lib/birthday';
 import { BirthdayPicker } from '@/components/shared/birthday-picker';
+import { useStoreCapabilities } from '@/core/providers/store-provider';
 
 interface ProfileSectionProps {
   profile: CustomerProfile;
@@ -17,6 +18,9 @@ interface ProfileSectionProps {
 export function ProfileSection({ profile, onProfileUpdate, className }: ProfileSectionProps) {
   const t = useTranslations('account');
   const tc = useTranslations('common');
+  const { capabilities } = useStoreCapabilities();
+  /** Explicit `true` only — see the note on the same gate in `register-form.tsx`. */
+  const birthdayGiftOn = capabilities?.features.hasBirthdayRewards === true;
   const [editing, setEditing] = useState(false);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
@@ -182,7 +186,9 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
                   onChange={selectBirthday}
                   triggerClassName="rounded-md"
                 />
-                <p className="text-muted-foreground mt-1 text-xs">{tc('birthdayGiftNote')}</p>
+                {birthdayGiftOn && (
+                  <p className="text-muted-foreground mt-1 text-xs">{tc('birthdayGiftNote')}</p>
+                )}
               </div>
               <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
               <div className="flex items-center gap-2">

package/templates/nextjs/base/src/components/auth/register-form.tsx

@@ -9,6 +9,7 @@ import { useStoreInfo } from '@/core/providers/store-provider';
 import { toBirthdayNumber } from '@/core/lib/birthday';
 import { BirthdayPicker } from '@/components/shared/birthday-picker';
 import { readReferralCookie } from '@/core/lib/referral';
+import { useStoreCapabilities } from '@/core/providers/store-provider';
 
 interface RegisterData {
   firstName: string;
@@ -66,6 +67,20 @@ export function RegisterForm({ onSubmit, error, className }: RegisterFormProps)
   const [privacyError, setPrivacyError] = useState(false);
   const [passwordError, setPasswordError] = useState<string | null>(null);
   const [acceptsMarketing, setAcceptsMarketing] = useState(false);
+  const { capabilities } = useStoreCapabilities();
+
+  /**
+   * Whether to promise a birthday gift beside the picker.
+   *
+   * The gate is inverted relative to `ReferralGreeting`, and deliberately so.
+   * There, an undecided capability must not suppress a real referral, so only
+   * an explicit `false` hides anything. Here the text makes a PROMISE, and a
+   * promise may only be printed on an explicit `true`: a store with birthday
+   * rewards switched off — which is the default — would otherwise tell every
+   * customer a gift is coming and send nothing, and `requireBirthday` can make
+   * handing over the date compulsory on top of that.
+   */
+  const birthdayGiftOn = capabilities?.features.hasBirthdayRewards === true;
   const [birthMonth, setBirthMonth] = useState('');
   const [birthDay, setBirthDay] = useState('');
   const [birthdayError, setBirthdayError] = useState<string | null>(null);
@@ -293,7 +308,9 @@ export function RegisterForm({ onSubmit, error, className }: RegisterFormProps)
           required={birthdayRequired}
           invalid={birthdayError !== null}
         />
-        <p className="text-muted-foreground mt-1.5 text-xs">{tc('birthdayGiftNote')}</p>
+        {birthdayGiftOn && (
+          <p className="text-muted-foreground mt-1.5 text-xs">{tc('birthdayGiftNote')}</p>
+        )}
         {birthdayError && <p className="text-destructive mt-1 text-xs">{birthdayError}</p>}
       </div>
 

package/templates/nextjs/base/src/components/tracking-bootstrap.tsx

@@ -12,7 +12,7 @@ import { useStoreInfo } from '@/core/providers/store-provider';
  *
  * There is nothing to configure here and no environment variable to set. The
  * tag ids arrive inside `storeInfo.tracking`, which the backend resolves from
- * the merchant's connected marketplace apps: connecting the Google & YouTube
+ * the merchant's connected marketplace apps: connecting the Google
  * app runs GA4 discovery and the measurement id shows up on its own, likewise
  * the Meta and TikTok pixels. Connect an app in the dashboard and this file
  * starts loading its tag within a minute — no redeploy, no code change.

package/templates/nextjs/base/src/ui/layout/newsletter-signup.tsx

@@ -21,17 +21,26 @@
  * commonest reason a signup never becomes a subscriber, and the resend cooldown
  * means no second copy arrives for 24 hours.
  *
- * **Discount codes.** Subscribing mints nothing. For a "10% off your first
- * order" offer, the merchant creates a coupon in the dashboard with the
- * `customer_first_order` condition and you render that fixed code in the
- * success state — see the commented line below. Show it immediately: it must
- * not wait for the confirmation click, or the shopper loses the reason they
- * filled the form in.
+ * **The welcome offer.** `marketing.getBenefit()` returns what the merchant is
+ * offering people who confirm, or `null` when they offer nothing. Show its
+ * terms beside the field so the shopper knows what they are signing up for.
+ *
+ * ⛔ DO NOT RENDER A COUPON CODE HERE, now or after the success state. No coupon
+ * exists at either moment. It is minted when the recipient clicks the link in
+ * their own mailbox and is emailed to them there — which is exactly what stops a
+ * forwarded link handing the discount to someone who never asked. The
+ * confirmation page is served by the API and already shows the code, its expiry
+ * and its terms, so there is nothing here to poll for either.
+ *
+ * ⛔ There is no eligibility check to call, deliberately: a per-address answer
+ * would let anyone test who already subscribed. The offer is one per address per
+ * store, forever. Say so in the terms rather than trying to detect it.
  *
  * Rate limited to 3 requests / 60s per IP.
  */
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import type { PublicNewsletterBenefitOffer } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
 import { useTranslations } from '@/core/lib/translations';
 
@@ -42,6 +51,10 @@ export function NewsletterSignup() {
   const [loading, setLoading] = useState(false);
   const [done, setDone] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // null covers both "no offer configured" and "the read failed". Neither is
+  // worth an error state on a footer signup: the form still works, it just
+  // promises nothing, and promising nothing is always safe.
+  const [offer, setOffer] = useState<PublicNewsletterBenefitOffer | null>(null);
 
   // Same source the contact form uses — <html lang> is set from the active
   // locale, and passing it is what decides the language of the confirmation
@@ -51,6 +64,31 @@ export function NewsletterSignup() {
     return undefined;
   }, []);
 
+  // Read once per mount. The offer belongs to the store, not to the visitor,
+  // so re-reading it per keystroke or per submit is wasted work.
+  useEffect(() => {
+    let cancelled = false;
+    getClient()
+      .marketing.getBenefit(locale)
+      .then((result) => {
+        if (!cancelled) setOffer(result);
+      })
+      .catch(() => {
+        // Silent on purpose. A failed offer read must not stop someone
+        // subscribing, and there is nothing the shopper could do about it.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [locale]);
+
+  const offerHeadline = offer
+    ? offer.headline?.trim() ||
+      (offer.discountType === 'PERCENTAGE'
+        ? t('offerPercent', { value: String(offer.discountValue) })
+        : t('offerAmount', { value: String(offer.discountValue) }))
+    : null;
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (loading || !email.trim()) return;
@@ -80,11 +118,10 @@ export function NewsletterSignup() {
       <div className="space-y-1">
         <p className="text-sm font-medium">{t('checkEmailTitle')}</p>
         <p className="text-sm opacity-70">{t('checkEmailBody')}</p>
-        {/*
-          Merchant offering a signup discount? Render the coupon code here, now
-          — not after the confirmation click, which may never come:
-          <p className="text-sm font-medium">{t('discountCode', { code: 'WELCOME10' })}</p>
-        */}
+        {/* Says where the code comes from, without ever showing one. The coupon
+            is created by the confirmation click and arrives in the same inbox,
+            so "check your email" is the whole instruction. */}
+        {offer ? <p className="text-sm opacity-70">{t('offerByEmail')}</p> : null}
       </div>
     );
   }
@@ -96,6 +133,16 @@ export function NewsletterSignup() {
       </label>
       <p className="text-sm opacity-70">{t('subtitle')}</p>
 
+      {/* The merchant's own words when they wrote any, a plain statement of the
+          discount when they did not. Both are the promise the shopper is
+          agreeing to, so they belong above the input, not under the button. */}
+      {offerHeadline ? (
+        <div className="space-y-0.5">
+          <p className="text-sm font-medium">{offerHeadline}</p>
+          {offer?.terms ? <p className="text-xs opacity-70">{offer.terms}</p> : null}
+        </div>
+      ) : null}
+
       <div className="flex flex-wrap gap-2">
         <input
           id="newsletter-email"

package/templates/nextjs/ui-canvas/layout/newsletter-signup.tsx

@@ -17,9 +17,18 @@
  *
  * ⛔ KEEP THE HONEYPOT. It is the bot filter; deleting the input silently opens
  * the form up.
+ *
+ * **The welcome offer.** `marketing.getBenefit()` returns what the merchant
+ * offers people who confirm, or `null` when they offer nothing. Show its terms
+ * beside the field. ⛔ NEVER RENDER A COUPON CODE — none exists here or in the
+ * success state; it is minted by the confirmation click and emailed to the
+ * recipient, which is what stops a forwarded link handing the discount to
+ * someone who never asked. There is no eligibility check to call either: a
+ * per-address answer would let anyone test who already subscribed.
  */
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import type { PublicNewsletterBenefitOffer } from 'brainerce';
 import { getClient } from '@/core/lib/brainerce';
 import { useTranslations } from '@/core/lib/translations';
 
@@ -30,6 +39,9 @@ export function NewsletterSignup() {
   const [loading, setLoading] = useState(false);
   const [done, setDone] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // null covers "no offer" and "the read failed" alike. Neither deserves an
+  // error state: the form still works and simply promises nothing.
+  const [offer, setOffer] = useState<PublicNewsletterBenefitOffer | null>(null);
 
   // <html lang> carries the active locale, and passing it decides the language
   // of the confirmation email. Omit it and a Hebrew shopper gets English.
@@ -38,6 +50,29 @@ export function NewsletterSignup() {
     return undefined;
   }, []);
 
+  // Once per mount. The offer belongs to the store, not the visitor.
+  useEffect(() => {
+    let cancelled = false;
+    getClient()
+      .marketing.getBenefit(locale)
+      .then((result) => {
+        if (!cancelled) setOffer(result);
+      })
+      .catch(() => {
+        // Silent: a failed offer read must not stop anyone subscribing.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [locale]);
+
+  const offerHeadline = offer
+    ? offer.headline?.trim() ||
+      (offer.discountType === 'PERCENTAGE'
+        ? t('offerPercent', { value: String(offer.discountValue) })
+        : t('offerAmount', { value: String(offer.discountValue) }))
+    : null;
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (loading || !email.trim()) return;
@@ -68,13 +103,9 @@ export function NewsletterSignup() {
         {/* DESIGN ME — newsletter success state. Do NOT reword to "you're subscribed": the address is not on the list until the recipient clicks the emailed link. Naming the spam folder is deliberate — a filtered confirmation is the commonest reason a signup never converts, and no second copy is sent for 24 hours. */}
         <p>{t('checkEmailTitle')}</p>
         <p>{t('checkEmailBody')}</p>
-        {/*
-          Merchant offering a signup discount? Render the coupon code here, now
-          — not after the confirmation click, which may never come:
-          <p>{t('discountCode', { code: 'WELCOME10' })}</p>
-          The code comes from a dashboard coupon with the `customer_first_order`
-          condition; subscribing mints nothing on its own.
-        */}
+        {/* Says where the code comes from without ever showing one: the coupon
+            is created by the confirmation click and lands in the same inbox. */}
+        {offer ? <p>{t('offerByEmail')}</p> : null}
       </div>
     );
   }
@@ -85,6 +116,17 @@ export function NewsletterSignup() {
       <label htmlFor="newsletter-email">{t('title')}</label>
       <p>{t('subtitle')}</p>
 
+      {/* DESIGN ME — the welcome offer, when the merchant configured one. Keep
+          both lines: the headline is the promise and the terms are its
+          conditions, and a shopper who reads one without the other is being
+          mis-sold. Never add a coupon code here. */}
+      {offerHeadline ? (
+        <div>
+          <p>{offerHeadline}</p>
+          {offer?.terms ? <p>{offer.terms}</p> : null}
+        </div>
+      ) : null}
+
       <input
         id="newsletter-email"
         type="email"