npm - create-brainerce-store - Versions diffs - 1.14.3 → 1.14.4 - Mend

create-brainerce-store 1.14.3 → 1.14.4

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 (24) hide show

package/templates/nextjs/base/src/app/layout.tsx.ejs CHANGED Viewed

@@ -7,12 +7,34 @@ import './globals.css';
 <%- fontVariable %>
+const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
 export const metadata: Metadata = {
-  title: '<%= storeName %>',
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: '<%= storeName %>',
+    template: `%s | <%= storeName %>`,
+  },
   description: '<%= storeName %>',
+  alternates: {
+    canonical: '/',
+  },
   openGraph: {
+    siteName: '<%= storeName %>',
     locale: '<%= ogLocale %>',
+    type: 'website',
   },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: '<%= storeName %>',
+  url: baseUrl,
 };
 export default function RootLayout({
@@ -22,6 +44,12 @@ export default function RootLayout({
 }) {
   return (
     <html lang="<%= language %>" dir="<%= direction %>">
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationJsonLd) }}
+        />
+      </head>
       <body className={font.className}>
         <StoreProvider>
           <div className="min-h-screen flex flex-col">

package/templates/nextjs/base/src/app/login/layout.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import type { Metadata } from 'next';
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/app/order-confirmation/layout.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import type { Metadata } from 'next';
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/app/products/[slug]/page.tsx CHANGED Viewed

@@ -20,6 +20,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     return {
       title: product.name,
       description,
+      alternates: {
+        canonical: `/products/${slug}`,
+      },
       openGraph: {
         title: product.name,
         description,
@@ -53,10 +56,11 @@ export default async function ProductDetailPage({ params }: Props) {
   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
   const productUrl = `${baseUrl}/products/${slug}`;
+  const currency = process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
   return (
     <>
-      <ProductJsonLd product={product} url={productUrl} />
+      <ProductJsonLd product={product} url={productUrl} currency={currency} />
       <ProductClientSection product={product} />
     </>
   );

package/templates/nextjs/base/src/app/products/layout.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next';
+export const metadata: Metadata = {
+  title: 'Products',
+  description: 'Browse our full collection of products.',
+  alternates: {
+    canonical: '/products',
+  },
+  openGraph: {
+    title: 'Products',
+    description: 'Browse our full collection of products.',
+    type: 'website',
+  },
+};
+export default function ProductsLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/app/products/page.tsx CHANGED Viewed

@@ -29,6 +29,7 @@ const sortOptions: SortOption[] = [
 interface CategoryNode {
   id: string;
   name: string;
+  image?: string | null;
   parentId?: string | null;
   children: CategoryNode[];
 }

package/templates/nextjs/base/src/app/register/layout.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import type { Metadata } from 'next';
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/app/register/page.tsx CHANGED Viewed

@@ -20,6 +20,7 @@ export default function RegisterPage() {
     lastName: string;
     email: string;
     password: string;
+    acceptsMarketing: boolean;
   }) {
     try {
       setError(null);

package/templates/nextjs/base/src/app/verify-email/page.tsx CHANGED Viewed

@@ -180,7 +180,7 @@ function VerifyEmailContent() {
         <form onSubmit={handleFormSubmit} className="space-y-6">
           {/* Digit inputs */}
-          <div className="flex justify-center gap-2 sm:gap-3" onPaste={handlePaste}>
+          <div dir="ltr" className="flex justify-center gap-2 sm:gap-3" onPaste={handlePaste}>
             {digits.map((digit, index) => (
               <input
                 key={index}

package/templates/nextjs/base/src/components/account/address-book.tsx ADDED Viewed

@@ -0,0 +1,432 @@
+'use client';
+import { useState } from 'react';
+import type { CustomerAddress, CreateAddressDto } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+interface AddressBookProps {
+  addresses: CustomerAddress[];
+  onUpdate: (addresses: CustomerAddress[]) => void;
+  className?: string;
+}
+interface AddressFormState {
+  label: string;
+  firstName: string;
+  lastName: string;
+  line1: string;
+  line2: string;
+  city: string;
+  region: string;
+  postalCode: string;
+  country: string;
+  phone: string;
+  isDefault: boolean;
+}
+const emptyForm: AddressFormState = {
+  label: '',
+  firstName: '',
+  lastName: '',
+  line1: '',
+  line2: '',
+  city: '',
+  region: '',
+  postalCode: '',
+  country: '',
+  phone: '',
+  isDefault: false,
+};
+function addressToForm(a: CustomerAddress): AddressFormState {
+  return {
+    label: a.label || '',
+    firstName: a.firstName,
+    lastName: a.lastName,
+    line1: a.line1,
+    line2: a.line2 || '',
+    city: a.city,
+    region: a.region || '',
+    postalCode: a.postalCode,
+    country: a.country,
+    phone: a.phone || '',
+    isDefault: a.isDefault,
+  };
+}
+interface AddressFormProps {
+  initial: AddressFormState;
+  onSave: (data: AddressFormState) => Promise<void>;
+  onCancel: () => void;
+  saving: boolean;
+  t: (key: string) => string;
+  tc: (key: string) => string;
+}
+function AddressForm({ initial, onSave, onCancel, saving, t, tc }: AddressFormProps) {
+  const [form, setForm] = useState<AddressFormState>(initial);
+  const set = (field: keyof AddressFormState, value: string | boolean) =>
+    setForm((f) => ({ ...f, [field]: value }));
+  const inputClass =
+    'border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none';
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSave(form);
+      }}
+      className="space-y-3"
+    >
+      <div>
+        <label className="text-muted-foreground mb-1 block text-xs font-medium">
+          {t('addressLabel')}
+        </label>
+        <input
+          type="text"
+          value={form.label}
+          onChange={(e) => set('label', e.target.value)}
+          className={inputClass}
+          placeholder="Home, Work..."
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="text-muted-foreground mb-1 block text-xs font-medium">
+            {t('firstName')}
+          </label>
+          <input
+            type="text"
+            value={form.firstName}
+            onChange={(e) => set('firstName', e.target.value)}
+            className={inputClass}
+            required
+          />
+        </div>
+        <div>
+          <label className="text-muted-foreground mb-1 block text-xs font-medium">
+            {t('lastName')}
+          </label>
+          <input
+            type="text"
+            value={form.lastName}
+            onChange={(e) => set('lastName', e.target.value)}
+            className={inputClass}
+            required
+          />
+        </div>
+      </div>
+      <div>
+        <label className="text-muted-foreground mb-1 block text-xs font-medium">{t('line1')}</label>
+        <input
+          type="text"
+          value={form.line1}
+          onChange={(e) => set('line1', e.target.value)}
+          className={inputClass}
+          required
+        />
+      </div>
+      <div>
+        <label className="text-muted-foreground mb-1 block text-xs font-medium">{t('line2')}</label>
+        <input
+          type="text"
+          value={form.line2}
+          onChange={(e) => set('line2', e.target.value)}
+          className={inputClass}
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="text-muted-foreground mb-1 block text-xs font-medium">
+            {t('city')}
+          </label>
+          <input
+            type="text"
+            value={form.city}
+            onChange={(e) => set('city', e.target.value)}
+            className={inputClass}
+            required
+          />
+        </div>
+        <div>
+          <label className="text-muted-foreground mb-1 block text-xs font-medium">
+            {t('postalCode')}
+          </label>
+          <input
+            type="text"
+            value={form.postalCode}
+            onChange={(e) => set('postalCode', e.target.value)}
+            className={inputClass}
+            required
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="text-muted-foreground mb-1 block text-xs font-medium">
+            {t('region')}
+          </label>
+          <input
+            type="text"
+            value={form.region}
+            onChange={(e) => set('region', e.target.value)}
+            className={inputClass}
+          />
+        </div>
+        <div>
+          <label className="text-muted-foreground mb-1 block text-xs font-medium">
+            {t('country')}
+          </label>
+          <input
+            type="text"
+            value={form.country}
+            onChange={(e) => set('country', e.target.value)}
+            className={inputClass}
+            required
+          />
+        </div>
+      </div>
+      <div>
+        <label className="text-muted-foreground mb-1 block text-xs font-medium">{t('phone')}</label>
+        <input
+          type="tel"
+          value={form.phone}
+          onChange={(e) => set('phone', e.target.value)}
+          className={inputClass}
+        />
+      </div>
+      <label className="flex cursor-pointer items-center gap-2">
+        <input
+          type="checkbox"
+          checked={form.isDefault}
+          onChange={(e) => set('isDefault', e.target.checked)}
+          className="accent-primary"
+        />
+        <span className="text-sm">{t('isDefault')}</span>
+      </label>
+      <div className="flex gap-2 pt-1">
+        <button
+          type="submit"
+          disabled={saving}
+          className="bg-primary text-primary-foreground rounded-md px-4 py-1.5 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
+        >
+          {saving ? '...' : tc('save')}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          disabled={saving}
+          className="text-muted-foreground hover:text-foreground rounded-md px-4 py-1.5 text-sm transition-colors"
+        >
+          {tc('cancel')}
+        </button>
+      </div>
+    </form>
+  );
+}
+export function AddressBook({ addresses, onUpdate, className }: AddressBookProps) {
+  const t = useTranslations('account');
+  const tc = useTranslations('common');
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [adding, setAdding] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  async function handleAdd(data: AddressFormState) {
+    setSaving(true);
+    try {
+      const client = getClient();
+      const dto: CreateAddressDto = {
+        label: data.label || undefined,
+        firstName: data.firstName,
+        lastName: data.lastName,
+        line1: data.line1,
+        line2: data.line2 || undefined,
+        city: data.city,
+        region: data.region || undefined,
+        postalCode: data.postalCode,
+        country: data.country,
+        phone: data.phone || undefined,
+        isDefault: data.isDefault,
+      };
+      await client.addMyAddress(dto);
+      const updated = await client.getMyAddresses();
+      onUpdate(updated);
+      setAdding(false);
+    } catch {
+      // ignore — could show error
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function handleEdit(id: string, data: AddressFormState) {
+    setSaving(true);
+    try {
+      const client = getClient();
+      await client.updateMyAddress(id, {
+        label: data.label || undefined,
+        firstName: data.firstName,
+        lastName: data.lastName,
+        line1: data.line1,
+        line2: data.line2 || undefined,
+        city: data.city,
+        region: data.region || undefined,
+        postalCode: data.postalCode,
+        country: data.country,
+        phone: data.phone || undefined,
+        isDefault: data.isDefault,
+      });
+      const updated = await client.getMyAddresses();
+      onUpdate(updated);
+      setEditingId(null);
+    } catch {
+      // ignore
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function handleDelete(id: string) {
+    setDeletingId(id);
+    try {
+      const client = getClient();
+      await client.deleteMyAddress(id);
+      onUpdate(addresses.filter((a) => a.id !== id));
+    } catch {
+      // ignore
+    } finally {
+      setDeletingId(null);
+    }
+  }
+  async function handleSetDefault(id: string) {
+    try {
+      const client = getClient();
+      await client.updateMyAddress(id, { isDefault: true });
+      const updated = await client.getMyAddresses();
+      onUpdate(updated);
+    } catch {
+      // ignore
+    }
+  }
+  return (
+    <div className={cn('border-border rounded-lg border p-6', className)}>
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-foreground text-lg font-semibold">{t('addressBook')}</h2>
+        {!adding && (
+          <button
+            type="button"
+            onClick={() => setAdding(true)}
+            className="text-primary hover:text-primary/80 text-sm font-medium transition-colors"
+          >
+            + {t('addAddress')}
+          </button>
+        )}
+      </div>
+      {/* Add form */}
+      {adding && (
+        <div className="border-border mb-4 rounded-lg border p-4">
+          <h3 className="text-foreground mb-3 text-sm font-medium">{t('addAddress')}</h3>
+          <AddressForm
+            initial={emptyForm}
+            onSave={handleAdd}
+            onCancel={() => setAdding(false)}
+            saving={saving}
+            t={t}
+            tc={tc}
+          />
+        </div>
+      )}
+      {/* Address list */}
+      {addresses.length === 0 && !adding ? (
+        <p className="text-muted-foreground text-sm">{t('noAddresses')}</p>
+      ) : (
+        <div className="space-y-3">
+          {addresses.map((address) => (
+            <div
+              key={address.id}
+              className={cn(
+                'border-border rounded-lg border p-4',
+                address.isDefault && 'border-primary/40 bg-primary/5'
+              )}
+            >
+              {editingId === address.id ? (
+                <>
+                  <h3 className="text-foreground mb-3 text-sm font-medium">{t('editAddress')}</h3>
+                  <AddressForm
+                    initial={addressToForm(address)}
+                    onSave={(data) => handleEdit(address.id, data)}
+                    onCancel={() => setEditingId(null)}
+                    saving={saving}
+                    t={t}
+                    tc={tc}
+                  />
+                </>
+              ) : (
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0 text-sm">
+                    {address.label && (
+                      <p className="text-foreground mb-1 font-medium">{address.label}</p>
+                    )}
+                    <p className="text-foreground">
+                      {address.firstName} {address.lastName}
+                    </p>
+                    <p className="text-muted-foreground">
+                      {address.line1}
+                      {address.line2 ? `, ${address.line2}` : ''}
+                    </p>
+                    <p className="text-muted-foreground">
+                      {address.city}
+                      {address.region ? `, ${address.region}` : ''} {address.postalCode}
+                    </p>
+                    <p className="text-muted-foreground">{address.country}</p>
+                    {address.phone && <p className="text-muted-foreground">{address.phone}</p>}
+                    {address.isDefault && (
+                      <span className="bg-primary/10 text-primary mt-2 inline-block rounded px-2 py-0.5 text-xs font-medium">
+                        {t('defaultAddress')}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex flex-shrink-0 flex-col items-end gap-1">
+                    <button
+                      type="button"
+                      onClick={() => setEditingId(address.id)}
+                      className="text-muted-foreground hover:text-foreground text-xs transition-colors"
+                    >
+                      {t('editAddress')}
+                    </button>
+                    {!address.isDefault && (
+                      <button
+                        type="button"
+                        onClick={() => handleSetDefault(address.id)}
+                        className="text-muted-foreground hover:text-foreground text-xs transition-colors"
+                      >
+                        {t('setDefault')}
+                      </button>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => handleDelete(address.id)}
+                      disabled={deletingId === address.id}
+                      className="text-destructive hover:text-destructive/80 text-xs transition-colors disabled:opacity-50"
+                    >
+                      {deletingId === address.id ? '...' : t('deleteAddress')}
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}