@rovela-ai/sdk 0.20.0 → 0.22.0

package/templates/store-template/app/privacy/page.tsx

@@ -1,12 +1,20 @@
 import type { Metadata } from 'next'
-import { LocaleLink as Link } from '@rovela-ai/sdk/core'
-import { getBlueprint, localizedAlternates, findSettings } from '@rovela-ai/sdk/core/server'
+import { LocaleLink as Link, getT } from '@rovela-ai/sdk/core'
+import {
+  getBlueprint,
+  localizedAlternates,
+  findSettings,
+  getRequestLocale,
+} from '@rovela-ai/sdk/core/server'
 
 /**
  * Privacy Policy Page
  *
- * Static privacy policy page with standard e-commerce sections.
- * Store name is pulled from blueprint for personalization.
+ * Standard e-commerce privacy policy, personalized with the store name. All
+ * copy comes from the i18n catalogs (`privacy.*` keys) so a French-default
+ * store serves a French policy — the body was English literals pre-0.21.
+ * The #cookies section's copy stays in lockstep with the cookie banner's
+ * three categories (see the cookie-consent module).
  */
 
 // =============================================================================
@@ -14,6 +22,8 @@ import { getBlueprint, localizedAlternates, findSettings } from '@rovela-ai/sdk/
 // =============================================================================
 
 export async function generateMetadata(): Promise<Metadata> {
+  const { locale } = await getRequestLocale()
+  const t = getT(locale)
   let storeName = 'Our Store'
   try {
     const blueprint = getBlueprint()
@@ -23,8 +33,8 @@ export async function generateMetadata(): Promise<Metadata> {
   }
 
   return {
-    title: 'Privacy Policy',
-    description: `Privacy Policy for ${storeName}. Learn how we collect, use, and protect your personal information.`,
+    title: t('privacy.title'),
+    description: t('privacy.metaDescription', { storeName }),
     alternates: await localizedAlternates('/privacy'),
   }
 }
@@ -34,6 +44,9 @@ export async function generateMetadata(): Promise<Metadata> {
 // =============================================================================
 
 export default async function PrivacyPage() {
+  const { locale } = await getRequestLocale()
+  const t = getT(locale)
+
   // Get store name for display — LIVE settings first (store_settings is what
   // the merchant edits in /admin; blueprint + env are build-time fallbacks
   // that go stale after a rename). Fail-open on DB errors.
@@ -77,7 +90,7 @@ export default async function PrivacyPage() {
       <div className="max-w-3xl mx-auto">
         {/* Header */}
         <div className="mb-12">
-          <h1 className="text-3xl font-bold font-heading">Privacy Policy</h1>
+          <h1 className="text-3xl font-bold font-heading">{t('privacy.title')}</h1>
         </div>
 
         {/* Content */}
@@ -85,181 +98,128 @@ export default async function PrivacyPage() {
           {/* Introduction */}
           <section className="mb-10">
             <p className="text-muted-foreground leading-relaxed">
-              At {storeName}, we are committed to protecting your privacy and ensuring the
-              security of your personal information. This Privacy Policy explains how we collect,
-              use, disclose, and safeguard your information when you visit our website or make
-              a purchase.
+              {t('privacy.intro', { storeName })}
             </p>
           </section>
 
           {/* Information We Collect */}
           <section className="mb-10">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              Information We Collect
+              {t('privacy.collect.title')}
             </h2>
-            <p className="text-muted-foreground mb-4">
-              We collect information that you provide directly to us, including:
-            </p>
+            <p className="text-muted-foreground mb-4">{t('privacy.collect.intro')}</p>
             <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
-              <li>Name and contact information (email address, phone number, shipping address)</li>
-              <li>Payment information (processed securely through our payment provider)</li>
-              <li>Order history and preferences</li>
-              <li>Communications you send to us</li>
-              <li>Account information if you create an account</li>
+              {[1, 2, 3, 4, 5].map((i) => (
+                <li key={i}>{t(`privacy.collect.li${i}`)}</li>
+              ))}
             </ul>
-            <p className="text-muted-foreground mt-4">
-              We also automatically collect certain information when you visit our website,
-              including your IP address, browser type, device information, and browsing behavior.
-            </p>
+            <p className="text-muted-foreground mt-4">{t('privacy.collect.auto')}</p>
           </section>
 
           {/* How We Use Your Information */}
           <section className="mb-10">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              How We Use Your Information
+              {t('privacy.use.title')}
             </h2>
-            <p className="text-muted-foreground mb-4">
-              We use the information we collect to:
-            </p>
+            <p className="text-muted-foreground mb-4">{t('privacy.use.intro')}</p>
             <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
-              <li>Process and fulfill your orders</li>
-              <li>Send you order confirmations and shipping updates</li>
-              <li>Respond to your questions and provide customer support</li>
-              <li>Send promotional communications (with your consent)</li>
-              <li>Improve our website and services</li>
-              <li>Detect and prevent fraud</li>
-              <li>Comply with legal obligations</li>
+              {[1, 2, 3, 4, 5, 6, 7].map((i) => (
+                <li key={i}>{t(`privacy.use.li${i}`)}</li>
+              ))}
             </ul>
           </section>
 
           {/* Information Sharing */}
           <section className="mb-10">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              Information Sharing
+              {t('privacy.share.title')}
             </h2>
-            <p className="text-muted-foreground mb-4">
-              We do not sell your personal information. We may share your information with:
-            </p>
+            <p className="text-muted-foreground mb-4">{t('privacy.share.intro')}</p>
             <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
-              <li>Service providers who assist in our operations (payment processors, shipping carriers)</li>
-              <li>Analytics providers to help us understand website usage</li>
-              <li>Legal authorities when required by law</li>
+              {[1, 2, 3].map((i) => (
+                <li key={i}>{t(`privacy.share.li${i}`)}</li>
+              ))}
             </ul>
           </section>
 
           {/* Data Security */}
           <section className="mb-10">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              Data Security
+              {t('privacy.security.title')}
             </h2>
-            <p className="text-muted-foreground">
-              We implement appropriate technical and organizational measures to protect your
-              personal information against unauthorized access, alteration, disclosure, or
-              destruction. All payment transactions are encrypted using SSL technology and
-              processed through secure payment providers.
-            </p>
+            <p className="text-muted-foreground">{t('privacy.security.body')}</p>
           </section>
 
           {/* Cookies */}
           <section id="cookies" className="mb-10 scroll-mt-24">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              Cookies and Tracking
+              {t('privacy.cookies.title')}
             </h2>
-            <p className="text-muted-foreground mb-4">
-              We use cookies and similar technologies to make this store work
-              and, with your consent, to understand how it is used and show
-              you relevant content. Cookies are grouped into three categories:
-            </p>
+            <p className="text-muted-foreground mb-4">{t('privacy.cookies.intro')}</p>
             <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
-              <li>
-                <strong className="text-foreground">Essential.</strong> Required
-                for the store to work — including your cart, session, and
-                sign-in state. Always on; cannot be disabled.
-              </li>
-              <li>
-                <strong className="text-foreground">Analytics.</strong> Help us
-                understand how the store is used so we can improve it.
-                Optional; off unless you choose to allow them.
-              </li>
-              <li>
-                <strong className="text-foreground">Marketing.</strong> Used to
-                measure ads and show you relevant content across sites.
-                Optional; off unless you choose to allow them.
-              </li>
+              {(['essential', 'analytics', 'marketing'] as const).map((cat) => (
+                <li key={cat}>
+                  <strong className="text-foreground">{t(`privacy.cookies.${cat}.label`)}</strong>{' '}
+                  {t(`privacy.cookies.${cat}.text`)}
+                </li>
+              ))}
             </ul>
-            <p className="text-muted-foreground mt-4">
-              You can change your preferences at any time by clicking
-              &ldquo;Cookie preferences&rdquo; in the footer of any page. If
-              you reject non-essential cookies, some features that rely on
-              analytics or personalization may be limited.
-            </p>
+            <p className="text-muted-foreground mt-4">{t('privacy.cookies.manage')}</p>
           </section>
 
           {/* Your Rights */}
           <section className="mb-10">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              Your Rights
+              {t('privacy.rights.title')}
             </h2>
-            <p className="text-muted-foreground mb-4">
-              Depending on your location, you may have the right to:
-            </p>
+            <p className="text-muted-foreground mb-4">{t('privacy.rights.intro')}</p>
             <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
-              <li>Access the personal information we hold about you</li>
-              <li>Request correction of inaccurate information</li>
-              <li>Request deletion of your personal information</li>
-              <li>Opt out of marketing communications</li>
-              <li>Data portability</li>
+              {[1, 2, 3, 4, 5].map((i) => (
+                <li key={i}>{t(`privacy.rights.li${i}`)}</li>
+              ))}
             </ul>
           </section>
 
           {/* Children's Privacy */}
           <section className="mb-10">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              Children&apos;s Privacy
+              {t('privacy.children.title')}
             </h2>
-            <p className="text-muted-foreground">
-              Our website is not intended for children under 13 years of age. We do not
-              knowingly collect personal information from children. If you believe we have
-              collected information from a child, please contact us immediately.
-            </p>
+            <p className="text-muted-foreground">{t('privacy.children.body')}</p>
           </section>
 
           {/* Changes to Policy */}
           <section className="mb-10">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              Changes to This Policy
+              {t('privacy.changes.title')}
             </h2>
-            <p className="text-muted-foreground">
-              We may update this Privacy Policy from time to time. We will notify you of any
-              changes by posting the new policy on this page and updating the &quot;Last updated&quot;
-              date. We encourage you to review this policy periodically.
-            </p>
+            <p className="text-muted-foreground">{t('privacy.changes.body')}</p>
           </section>
 
           {/* Contact Us */}
           <section className="mb-10">
             <h2 className="text-xl font-semibold font-heading mb-4">
-              Contact Us
+              {t('privacy.contact.title')}
             </h2>
             <p className="text-muted-foreground">
-              If you have any questions about this Privacy Policy or our privacy
-              practices, please
+              {t('privacy.contact.lead')}
               {supportEmail ? (
                 <>
-                  {' '}contact us at{' '}
+                  {' '}
+                  {t('legal.contactVia.email')}{' '}
                   <a
                     href={`mailto:${supportEmail}`}
                     className="text-primary hover:underline"
                   >
                     {supportEmail}
                   </a>{' '}
-                  or visit our{' '}
+                  {t('legal.contactVia.or')}{' '}
                 </>
               ) : (
-                <>{' '}reach us through our{' '}</>
+                <> {t('legal.contactVia.page')} </>
               )}
               <Link href="/contact" className="text-primary hover:underline">
-                contact page
+                {t('legal.contactPageLink')}
               </Link>
               .
             </p>
@@ -272,7 +232,7 @@ export default async function PrivacyPage() {
             href="/"
             className="text-sm text-primary hover:underline"
           >
-            &larr; Back to Home
+            &larr; {t('legal.backToHome')}
           </Link>
         </div>
       </div>

package/templates/store-template/app/products/[slug]/ProductDetailClient.tsx

@@ -62,9 +62,12 @@ export function ProductDetailClient({ slug }: { slug: string }) {
   // Generate a key to reset gallery when variant changes
   const galleryKey = currentVariant?.id || 'no-variant'
 
-  // Determine price and stock (safe if product is null)
-  const price = currentVariant?.price ?? product?.price ?? 0
-  const comparePrice = product?.comparePrice
+  // Determine price and stock (safe if product is null). Prices arrive as
+  // DECIMAL STRINGS from the API — coerce to numbers before any comparison
+  // ('185.00' > '55.50' is lexicographically FALSE, which hid the
+  // strikethrough on every sale product).
+  const price = Number(currentVariant?.price ?? product?.price ?? 0)
+  const comparePrice = product?.comparePrice != null ? Number(product.comparePrice) : null
   const inStock = currentVariant
     ? (currentVariant.inventory ?? 0) > 0
     : true

package/templates/store-template/app/products/page.tsx

@@ -8,9 +8,19 @@
  * - ProductSearch: Search input with debouncing
  * - ProductSort: Sort dropdown
  * - useProducts: Data fetching hook
+ *
+ * URL filters (the contract store-authored nav links rely on):
+ * - ?category=<slug|id> — mega-menu / collection links carry slugs; the
+ *   products API resolves either. Without this read, category links
+ *   silently showed the full catalog.
+ * - ?sale=1 — on-sale products only (comparePrice > price).
+ *
+ * `useSearchParams` requires a Suspense boundary or the page fails static
+ * prerender at build time — hence the thin default-export wrapper.
  */
 
-import { useState } from 'react'
+import { Suspense, useState } from 'react'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import {
   ProductGrid,
   ProductSearch,
@@ -21,7 +31,25 @@ import type { SortOption } from '@rovela-ai/sdk/products'
 import { useT } from '@rovela-ai/sdk/core'
 
 export default function ProductsPage() {
+  return (
+    <Suspense fallback={null}>
+      <ProductsPageContent />
+    </Suspense>
+  )
+}
+
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+
+function ProductsPageContent() {
   const t = useT()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const category = searchParams.get('category') ?? undefined
+  const saleParam = searchParams.get('sale') ?? searchParams.get('onSale')
+  const onSale = saleParam === '1' || saleParam === 'true' ? true : undefined
+
   const [search, setSearch] = useState('')
   const [sort, setSort] = useState<SortOption>('newest')
 
@@ -34,9 +62,20 @@ export default function ProductsPage() {
   } = useProducts({
     search,
     sort,
+    category,
+    onSale,
     limit: 12,
   })
 
+  // Chip label: a slug reads fine prettified; a raw UUID falls back to the
+  // generic "Category" label.
+  const categoryLabel =
+    category && !UUID_RE.test(category)
+      ? category.replace(/[-_]+/g, ' ').replace(/^\w/, (c) => c.toUpperCase())
+      : t('listing.category')
+
+  const clearFilters = () => router.replace(pathname)
+
   return (
     <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
       {/* Page Header */}
@@ -61,6 +100,29 @@ export default function ProductsPage() {
         />
       </div>
 
+      {/* Active URL filters (category link / sale link) */}
+      {(category || onSale) && (
+        <div className="mb-6 flex flex-wrap items-center gap-2">
+          {category && (
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
+              {categoryLabel}
+            </span>
+          )}
+          {onSale && (
+            <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
+              {t('listing.onSale')}
+            </span>
+          )}
+          <button
+            type="button"
+            onClick={clearFilters}
+            className="text-sm text-muted-foreground underline underline-offset-2 hover:text-foreground"
+          >
+            {t('listing.clearFilter')}
+          </button>
+        </div>
+      )}
+
       {/* One message per state: on error, ONLY the error renders (the grid
           is skipped — its built-in empty state would double the message);
           when empty, the page's copy rides the grid's emptyState slot. */}