@open-mercato/core 0.9.1-develop.7473.1.de5b22888f → 0.9.1-develop.7475.1.28ca93ed97

package/dist/modules/ecommerce/components/StoreBrandingControls.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Slider } from "@open-mercato/ui/primitives/slider";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { normalizeBrandingColor } from "../lib/brandingStyles.js";
+import {
+  RADIUS_SLIDER_MAX,
+  RADIUS_SLIDER_MIN,
+  RADIUS_SLIDER_STEP,
+  formatRadiusRem,
+  parseRadiusRem
+} from "./storeBrandingForm.js";
+function readText(value) {
+  return typeof value === "string" ? value : "";
+}
+function BrandingColorInput({ id, value, error, disabled, setValue }) {
+  const t = useT();
+  const text = readText(value);
+  const swatch = normalizeBrandingColor(text.trim());
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      value: text,
+      disabled,
+      "aria-invalid": error ? true : void 0,
+      placeholder: t("ecommerce.backend.store.branding.colorPlaceholder", "oklch(0.3 0.15 270) or #1a2b3c"),
+      leading: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-testid": `branding-swatch-${id}`,
+          className: "size-5 rounded-sm border border-input",
+          style: swatch ? { backgroundColor: swatch } : void 0
+        }
+      ),
+      onChange: (event) => setValue(event.target.value)
+    }
+  );
+}
+function BrandingRadiusSlider({ id, value, disabled, setValue }) {
+  const t = useT();
+  const text = readText(value);
+  const rem = parseRadiusRem(text);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        id,
+        min: RADIUS_SLIDER_MIN,
+        max: RADIUS_SLIDER_MAX,
+        step: RADIUS_SLIDER_STEP,
+        value: [rem],
+        disabled,
+        "aria-label": t("ecommerce.backend.store.branding.radius", "Corner radius"),
+        onValueChange: (next) => setValue(formatRadiusRem(next[0] ?? rem))
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "w-20 shrink-0 text-right text-sm tabular-nums text-muted-foreground", "data-testid": "branding-radius-value", children: text })
+  ] });
+}
+export {
+  BrandingColorInput,
+  BrandingRadiusSlider
+};
+//# sourceMappingURL=StoreBrandingControls.js.map

package/dist/modules/ecommerce/components/StoreBrandingControls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/ecommerce/components/StoreBrandingControls.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Slider } from '@open-mercato/ui/primitives/slider'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { normalizeBrandingColor } from '../lib/brandingStyles'\nimport {\n  RADIUS_SLIDER_MAX,\n  RADIUS_SLIDER_MIN,\n  RADIUS_SLIDER_STEP,\n  formatRadiusRem,\n  parseRadiusRem,\n} from './storeBrandingForm'\n\ntype ControlProps = {\n  id: string\n  value: unknown\n  error?: string\n  disabled?: boolean\n  setValue: (value: unknown) => void\n}\n\nfunction readText(value: unknown): string {\n  return typeof value === 'string' ? value : ''\n}\n\nexport function BrandingColorInput({ id, value, error, disabled, setValue }: ControlProps) {\n  const t = useT()\n  const text = readText(value)\n  const swatch = normalizeBrandingColor(text.trim())\n  return (\n    <Input\n      id={id}\n      value={text}\n      disabled={disabled}\n      aria-invalid={error ? true : undefined}\n      placeholder={t('ecommerce.backend.store.branding.colorPlaceholder', 'oklch(0.3 0.15 270) or #1a2b3c')}\n      leading={\n        <span\n          aria-hidden=\"true\"\n          data-testid={`branding-swatch-${id}`}\n          className=\"size-5 rounded-sm border border-input\"\n          style={swatch ? { backgroundColor: swatch } : undefined}\n        />\n      }\n      onChange={(event) => setValue(event.target.value)}\n    />\n  )\n}\n\nexport function BrandingRadiusSlider({ id, value, disabled, setValue }: ControlProps) {\n  const t = useT()\n  const text = readText(value)\n  const rem = parseRadiusRem(text)\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Slider\n        id={id}\n        min={RADIUS_SLIDER_MIN}\n        max={RADIUS_SLIDER_MAX}\n        step={RADIUS_SLIDER_STEP}\n        value={[rem]}\n        disabled={disabled}\n        aria-label={t('ecommerce.backend.store.branding.radius', 'Corner radius')}\n        onValueChange={(next) => setValue(formatRadiusRem(next[0] ?? rem))}\n      />\n      <span className=\"w-20 shrink-0 text-right text-sm tabular-nums text-muted-foreground\" data-testid=\"branding-radius-value\">\n        {text}\n      </span>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAuCQ,cAiBJ,YAjBI;AApCR,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUP,SAAS,SAAS,OAAwB;AACxC,SAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEO,SAAS,mBAAmB,EAAE,IAAI,OAAO,OAAO,UAAU,SAAS,GAAiB;AACzF,QAAM,IAAI,KAAK;AACf,QAAM,OAAO,SAAS,KAAK;AAC3B,QAAM,SAAS,uBAAuB,KAAK,KAAK,CAAC;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,gBAAc,QAAQ,OAAO;AAAA,MAC7B,aAAa,EAAE,qDAAqD,gCAAgC;AAAA,MACpG,SACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,eAAa,mBAAmB,EAAE;AAAA,UAClC,WAAU;AAAA,UACV,OAAO,SAAS,EAAE,iBAAiB,OAAO,IAAI;AAAA;AAAA,MAChD;AAAA,MAEF,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA;AAAA,EAClD;AAEJ;AAEO,SAAS,qBAAqB,EAAE,IAAI,OAAO,UAAU,SAAS,GAAiB;AACpF,QAAM,IAAI,KAAK;AACf,QAAM,OAAO,SAAS,KAAK;AAC3B,QAAM,MAAM,eAAe,IAAI;AAC/B,SACE,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,OAAO,CAAC,GAAG;AAAA,QACX;AAAA,QACA,cAAY,EAAE,2CAA2C,eAAe;AAAA,QACxE,eAAe,CAAC,SAAS,SAAS,gBAAgB,KAAK,CAAC,KAAK,GAAG,CAAC;AAAA;AAAA,IACnE;AAAA,IACA,oBAAC,UAAK,WAAU,uEAAsE,eAAY,yBAC/F,gBACH;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/modules/ecommerce/components/StoreBrandingPreview.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useLocale, useT } from "@open-mercato/shared/lib/i18n/context";
+import { buildBrandingPreviewDocument } from "./storeBrandingForm.js";
+const BRANDING_PREVIEW_DEBOUNCE_MS = 250;
+const SAMPLE_PRODUCT_PRICE = 29;
+function formatPreviewPrice(amount, currencyCode, locale) {
+  const code = currencyCode.trim().toUpperCase();
+  try {
+    return new Intl.NumberFormat(locale, { style: "currency", currency: code }).format(amount);
+  } catch {
+    const formatted = new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount);
+    return code ? `${formatted} ${code}` : formatted;
+  }
+}
+function useDebouncedValue(value, delayMs) {
+  const [debounced, setDebounced] = React.useState(value);
+  React.useEffect(() => {
+    const handle = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(handle);
+  }, [value, delayMs]);
+  return debounced;
+}
+function StoreBrandingPreview({ values, storeName, currencyCode }) {
+  const t = useT();
+  const locale = useLocale();
+  const debouncedValues = useDebouncedValue(values, BRANDING_PREVIEW_DEBOUNCE_MS);
+  const document = React.useMemo(
+    () => buildBrandingPreviewDocument(debouncedValues, {
+      storeName,
+      navShop: t("ecommerce.backend.store.branding.preview.navShop", "Shop"),
+      navCategories: t("ecommerce.backend.store.branding.preview.navCategories", "Categories"),
+      navCart: t("ecommerce.backend.store.branding.preview.navCart", "Cart"),
+      heroTitle: t("ecommerce.backend.store.branding.preview.heroTitle", "New arrivals"),
+      heroText: t(
+        "ecommerce.backend.store.branding.preview.heroText",
+        "A preview of your storefront with the colours, corners and fonts you chose."
+      ),
+      heroButton: t("ecommerce.backend.store.branding.preview.heroButton", "Shop now"),
+      productName: t("ecommerce.backend.store.branding.preview.productName", "Sample product"),
+      productPrice: formatPreviewPrice(SAMPLE_PRODUCT_PRICE, currencyCode, locale)
+    }),
+    [currencyCode, debouncedValues, locale, storeName, t]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t(
+      "ecommerce.backend.store.branding.preview.hint",
+      "The preview updates as you edit and is never saved until you save the branding."
+    ) }),
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        title: t("ecommerce.backend.store.branding.preview.title", "Storefront preview"),
+        sandbox: "",
+        referrerPolicy: "no-referrer",
+        srcDoc: document,
+        "data-testid": "branding-preview-frame",
+        className: "h-96 w-full rounded-md border border-border bg-background"
+      }
+    )
+  ] });
+}
+export {
+  BRANDING_PREVIEW_DEBOUNCE_MS,
+  StoreBrandingPreview,
+  formatPreviewPrice
+};
+//# sourceMappingURL=StoreBrandingPreview.js.map

package/dist/modules/ecommerce/components/StoreBrandingPreview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/ecommerce/components/StoreBrandingPreview.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'\nimport { buildBrandingPreviewDocument } from './storeBrandingForm'\n\nexport const BRANDING_PREVIEW_DEBOUNCE_MS = 250\n\nconst SAMPLE_PRODUCT_PRICE = 29\n\nexport function formatPreviewPrice(amount: number, currencyCode: string, locale: string): string {\n  const code = currencyCode.trim().toUpperCase()\n  try {\n    return new Intl.NumberFormat(locale, { style: 'currency', currency: code }).format(amount)\n  } catch {\n    const formatted = new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount)\n    return code ? `${formatted} ${code}` : formatted\n  }\n}\n\ntype StoreBrandingPreviewProps = {\n  values: Record<string, unknown>\n  storeName: string\n  currencyCode: string\n}\n\nfunction useDebouncedValue<TValue>(value: TValue, delayMs: number): TValue {\n  const [debounced, setDebounced] = React.useState(value)\n  React.useEffect(() => {\n    const handle = setTimeout(() => setDebounced(value), delayMs)\n    return () => clearTimeout(handle)\n  }, [value, delayMs])\n  return debounced\n}\n\nexport function StoreBrandingPreview({ values, storeName, currencyCode }: StoreBrandingPreviewProps) {\n  const t = useT()\n  const locale = useLocale()\n  const debouncedValues = useDebouncedValue(values, BRANDING_PREVIEW_DEBOUNCE_MS)\n  const document = React.useMemo(\n    () =>\n      buildBrandingPreviewDocument(debouncedValues, {\n        storeName,\n        navShop: t('ecommerce.backend.store.branding.preview.navShop', 'Shop'),\n        navCategories: t('ecommerce.backend.store.branding.preview.navCategories', 'Categories'),\n        navCart: t('ecommerce.backend.store.branding.preview.navCart', 'Cart'),\n        heroTitle: t('ecommerce.backend.store.branding.preview.heroTitle', 'New arrivals'),\n        heroText: t(\n          'ecommerce.backend.store.branding.preview.heroText',\n          'A preview of your storefront with the colours, corners and fonts you chose.',\n        ),\n        heroButton: t('ecommerce.backend.store.branding.preview.heroButton', 'Shop now'),\n        productName: t('ecommerce.backend.store.branding.preview.productName', 'Sample product'),\n        productPrice: formatPreviewPrice(SAMPLE_PRODUCT_PRICE, currencyCode, locale),\n      }),\n    [currencyCode, debouncedValues, locale, storeName, t],\n  )\n\n  return (\n    <div className=\"space-y-2\">\n      <p className=\"text-sm text-muted-foreground\">\n        {t(\n          'ecommerce.backend.store.branding.preview.hint',\n          'The preview updates as you edit and is never saved until you save the branding.',\n        )}\n      </p>\n      <iframe\n        title={t('ecommerce.backend.store.branding.preview.title', 'Storefront preview')}\n        sandbox=\"\"\n        referrerPolicy=\"no-referrer\"\n        srcDoc={document}\n        data-testid=\"branding-preview-frame\"\n        className=\"h-96 w-full rounded-md border border-border bg-background\"\n      />\n    </div>\n  )\n}\n"],
+  "mappings": ";AA2DI,SACE,KADF;AAzDJ,YAAY,WAAW;AACvB,SAAS,WAAW,YAAY;AAChC,SAAS,oCAAoC;AAEtC,MAAM,+BAA+B;AAE5C,MAAM,uBAAuB;AAEtB,SAAS,mBAAmB,QAAgB,cAAsB,QAAwB;AAC/F,QAAM,OAAO,aAAa,KAAK,EAAE,YAAY;AAC7C,MAAI;AACF,WAAO,IAAI,KAAK,aAAa,QAAQ,EAAE,OAAO,YAAY,UAAU,KAAK,CAAC,EAAE,OAAO,MAAM;AAAA,EAC3F,QAAQ;AACN,UAAM,YAAY,IAAI,KAAK,aAAa,QAAQ,EAAE,uBAAuB,GAAG,uBAAuB,EAAE,CAAC,EAAE,OAAO,MAAM;AACrH,WAAO,OAAO,GAAG,SAAS,IAAI,IAAI,KAAK;AAAA,EACzC;AACF;AAQA,SAAS,kBAA0B,OAAe,SAAyB;AACzE,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,QAAM,UAAU,MAAM;AACpB,UAAM,SAAS,WAAW,MAAM,aAAa,KAAK,GAAG,OAAO;AAC5D,WAAO,MAAM,aAAa,MAAM;AAAA,EAClC,GAAG,CAAC,OAAO,OAAO,CAAC;AACnB,SAAO;AACT;AAEO,SAAS,qBAAqB,EAAE,QAAQ,WAAW,aAAa,GAA8B;AACnG,QAAM,IAAI,KAAK;AACf,QAAM,SAAS,UAAU;AACzB,QAAM,kBAAkB,kBAAkB,QAAQ,4BAA4B;AAC9E,QAAM,WAAW,MAAM;AAAA,IACrB,MACE,6BAA6B,iBAAiB;AAAA,MAC5C;AAAA,MACA,SAAS,EAAE,oDAAoD,MAAM;AAAA,MACrE,eAAe,EAAE,0DAA0D,YAAY;AAAA,MACvF,SAAS,EAAE,oDAAoD,MAAM;AAAA,MACrE,WAAW,EAAE,sDAAsD,cAAc;AAAA,MACjF,UAAU;AAAA,QACR;AAAA,QACA;AAAA,MACF;AAAA,MACA,YAAY,EAAE,uDAAuD,UAAU;AAAA,MAC/E,aAAa,EAAE,wDAAwD,gBAAgB;AAAA,MACvF,cAAc,mBAAmB,sBAAsB,cAAc,MAAM;AAAA,IAC7E,CAAC;AAAA,IACH,CAAC,cAAc,iBAAiB,QAAQ,WAAW,CAAC;AAAA,EACtD;AAEA,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,OAAE,WAAU,iCACV;AAAA,MACC;AAAA,MACA;AAAA,IACF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,kDAAkD,oBAAoB;AAAA,QAC/E,SAAQ;AAAA,QACR,gBAAe;AAAA,QACf,QAAQ;AAAA,QACR,eAAY;AAAA,QACZ,WAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/modules/ecommerce/components/StoreBrandingTab.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CrudForm } from "@open-mercato/ui/backend/CrudForm";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { raiseCrudError } from "@open-mercato/ui/backend/utils/serverErrors";
+import { Alert, AlertDescription } from "@open-mercato/ui/primitives/alert";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@open-mercato/ui/primitives/card";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { ECOMMERCE_BRANDING_FONTS } from "../lib/brandingStyles.js";
+import { BrandingColorInput, BrandingRadiusSlider } from "./StoreBrandingControls.js";
+import { StoreBrandingPreview } from "./StoreBrandingPreview.js";
+import {
+  BRANDING_COLOR_KEYS,
+  BRANDING_FONT_INHERIT,
+  STORE_BRANDING_API_PATH,
+  buildStoreBrandingInitialValues,
+  buildStoreBrandingPayload,
+  storeBrandingFormSchema
+} from "./storeBrandingForm.js";
+import { useStoreAccess } from "./useStoreAccess.js";
+const COLOR_LABELS = {
+  primaryColor: { key: "ecommerce.backend.store.branding.primaryColor", fallback: "Primary colour" },
+  primaryForeground: { key: "ecommerce.backend.store.branding.primaryForeground", fallback: "Text on primary" },
+  accentColor: { key: "ecommerce.backend.store.branding.accentColor", fallback: "Accent colour" },
+  accentForeground: { key: "ecommerce.backend.store.branding.accentForeground", fallback: "Text on accent" },
+  backgroundColor: { key: "ecommerce.backend.store.branding.backgroundColor", fallback: "Background colour" },
+  foregroundColor: { key: "ecommerce.backend.store.branding.foregroundColor", fallback: "Text colour" }
+};
+const SYSTEM_FONT_LABELS = {
+  "system-sans": { key: "ecommerce.backend.store.branding.font.systemSans", fallback: "System sans-serif" },
+  "system-serif": { key: "ecommerce.backend.store.branding.font.systemSerif", fallback: "System serif" },
+  "system-mono": { key: "ecommerce.backend.store.branding.font.systemMono", fallback: "System monospace" }
+};
+function StoreBrandingTab({ store, reload }) {
+  const t = useT();
+  const { canManageBranding } = useStoreAccess();
+  const [formKey, setFormKey] = React.useState(0);
+  const fontOptions = React.useMemo(
+    () => ECOMMERCE_BRANDING_FONTS.map((font) => {
+      const system = SYSTEM_FONT_LABELS[font.id];
+      return { value: font.id, label: system ? t(system.key, system.fallback) : font.label };
+    }),
+    [t]
+  );
+  const fields = React.useMemo(() => {
+    const colorFields = BRANDING_COLOR_KEYS.map((key) => ({
+      id: key,
+      type: "custom",
+      label: t(COLOR_LABELS[key].key, COLOR_LABELS[key].fallback),
+      layout: "half",
+      disabled: !canManageBranding,
+      component: (props) => /* @__PURE__ */ jsx(
+        BrandingColorInput,
+        {
+          id: props.id,
+          value: props.value,
+          error: props.error,
+          disabled: props.disabled || !canManageBranding,
+          setValue: props.setValue
+        }
+      )
+    }));
+    return [
+      ...colorFields,
+      {
+        id: "borderRadius",
+        type: "custom",
+        label: t("ecommerce.backend.store.branding.radius", "Corner radius"),
+        description: t(
+          "ecommerce.backend.store.branding.radiusHint",
+          "How rounded buttons, cards and inputs are, from square (0) to 5rem."
+        ),
+        disabled: !canManageBranding,
+        component: (props) => /* @__PURE__ */ jsx(
+          BrandingRadiusSlider,
+          {
+            id: props.id,
+            value: props.value,
+            error: props.error,
+            disabled: props.disabled || !canManageBranding,
+            setValue: props.setValue
+          }
+        )
+      },
+      {
+        id: "fontFamilyBase",
+        type: "select",
+        label: t("ecommerce.backend.store.branding.fontBase", "Body font"),
+        options: fontOptions,
+        layout: "half",
+        disabled: !canManageBranding
+      },
+      {
+        id: "fontFamilyHeading",
+        type: "select",
+        label: t("ecommerce.backend.store.branding.fontHeading", "Heading font"),
+        options: [
+          { value: BRANDING_FONT_INHERIT, label: t("ecommerce.backend.store.branding.fontInherit", "Same as body font") },
+          ...fontOptions
+        ],
+        layout: "half",
+        disabled: !canManageBranding
+      },
+      {
+        id: "logoUrl",
+        type: "text",
+        label: t("ecommerce.backend.store.branding.logoUrl", "Logo URL"),
+        description: t(
+          "ecommerce.backend.store.branding.assetUrlHint",
+          "An http(s) address or a path starting with /. Leave empty for none."
+        ),
+        maxLength: 2048,
+        disabled: !canManageBranding
+      },
+      {
+        id: "faviconUrl",
+        type: "text",
+        label: t("ecommerce.backend.store.branding.faviconUrl", "Favicon URL"),
+        description: t(
+          "ecommerce.backend.store.branding.assetUrlHint",
+          "An http(s) address or a path starting with /. Leave empty for none."
+        ),
+        maxLength: 2048,
+        disabled: !canManageBranding
+      }
+    ];
+  }, [canManageBranding, fontOptions, t]);
+  const groups = React.useMemo(
+    () => [
+      {
+        id: "colours",
+        title: t("ecommerce.backend.store.branding.coloursTitle", "Colours"),
+        column: 1,
+        fields: [...BRANDING_COLOR_KEYS]
+      },
+      {
+        id: "style",
+        title: t("ecommerce.backend.store.branding.styleTitle", "Shape and typography"),
+        column: 1,
+        fields: ["borderRadius", "fontFamilyBase", "fontFamilyHeading"]
+      },
+      {
+        id: "assets",
+        title: t("ecommerce.backend.store.branding.assetsTitle", "Logo and favicon"),
+        column: 1,
+        fields: ["logoUrl", "faviconUrl"]
+      },
+      {
+        id: "preview",
+        title: t("ecommerce.backend.store.branding.preview.groupTitle", "Live preview"),
+        column: 2,
+        component: ({ values }) => /* @__PURE__ */ jsx(StoreBrandingPreview, { values, storeName: store.name, currencyCode: store.defaultCurrencyCode })
+      }
+    ],
+    [store.defaultCurrencyCode, store.name, t]
+  );
+  const initialValues = React.useMemo(() => buildStoreBrandingInitialValues(store), [store]);
+  const handleSubmit = React.useCallback(
+    async (values) => {
+      const payload = buildStoreBrandingPayload(values, store);
+      const call = await apiCall(STORE_BRANDING_API_PATH(store.id), {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (!call.ok) {
+        await raiseCrudError(call.response, t("ecommerce.backend.store.branding.errors.save", "Failed to save the branding."));
+      }
+      flash(t("ecommerce.backend.store.branding.flash.saved", "Branding saved"), "success");
+      await reload();
+    },
+    [reload, store, t]
+  );
+  const resetForm = React.useCallback(() => setFormKey((current) => current + 1), []);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      resetForm();
+    },
+    [resetForm]
+  );
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: t("ecommerce.backend.store.branding.title", "Branding") }),
+      /* @__PURE__ */ jsx(CardDescription, { children: t(
+        "ecommerce.backend.store.branding.description",
+        "The colours, corner radius, fonts and logo your storefront uses. Empty values use the defaults shown."
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      canManageBranding ? null : /* @__PURE__ */ jsx(Alert, { status: "information", children: /* @__PURE__ */ jsx(AlertDescription, { children: t(
+        "ecommerce.backend.store.branding.readOnly",
+        "You can view this branding but not change it. Changing it requires permission to manage store branding."
+      ) }) }),
+      /* @__PURE__ */ jsx("div", { onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsx(
+        CrudForm,
+        {
+          schema: storeBrandingFormSchema,
+          fields,
+          groups,
+          initialValues,
+          optimisticLockUpdatedAt: store.updatedAt,
+          submitLabel: t("ecommerce.backend.store.branding.save", "Save branding"),
+          onSubmit: handleSubmit,
+          hideFooterActions: !canManageBranding,
+          embedded: true
+        },
+        `${formKey}:${store.updatedAt ?? "new"}`
+      ) })
+    ] })
+  ] });
+}
+export {
+  StoreBrandingTab
+};
+//# sourceMappingURL=StoreBrandingTab.js.map

package/dist/modules/ecommerce/components/StoreBrandingTab.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/ecommerce/components/StoreBrandingTab.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { CrudForm, type CrudCustomFieldRenderProps, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'\nimport { flash } from '@open-mercato/ui/backend/FlashMessages'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { raiseCrudError } from '@open-mercato/ui/backend/utils/serverErrors'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { ECOMMERCE_BRANDING_FONTS } from '../lib/brandingStyles'\nimport { BrandingColorInput, BrandingRadiusSlider } from './StoreBrandingControls'\nimport { StoreBrandingPreview } from './StoreBrandingPreview'\nimport {\n  BRANDING_COLOR_KEYS,\n  BRANDING_FONT_INHERIT,\n  STORE_BRANDING_API_PATH,\n  buildStoreBrandingInitialValues,\n  buildStoreBrandingPayload,\n  storeBrandingFormSchema,\n  type StoreBrandingFormValues,\n} from './storeBrandingForm'\nimport type { StoreAdminRecord } from './storeAdmin'\nimport { useStoreAccess } from './useStoreAccess'\n\ntype StoreBrandingTabProps = {\n  store: StoreAdminRecord\n  reload: () => Promise<void>\n}\n\nconst COLOR_LABELS: Record<(typeof BRANDING_COLOR_KEYS)[number], { key: string; fallback: string }> = {\n  primaryColor: { key: 'ecommerce.backend.store.branding.primaryColor', fallback: 'Primary colour' },\n  primaryForeground: { key: 'ecommerce.backend.store.branding.primaryForeground', fallback: 'Text on primary' },\n  accentColor: { key: 'ecommerce.backend.store.branding.accentColor', fallback: 'Accent colour' },\n  accentForeground: { key: 'ecommerce.backend.store.branding.accentForeground', fallback: 'Text on accent' },\n  backgroundColor: { key: 'ecommerce.backend.store.branding.backgroundColor', fallback: 'Background colour' },\n  foregroundColor: { key: 'ecommerce.backend.store.branding.foregroundColor', fallback: 'Text colour' },\n}\n\nconst SYSTEM_FONT_LABELS: Record<string, { key: string; fallback: string }> = {\n  'system-sans': { key: 'ecommerce.backend.store.branding.font.systemSans', fallback: 'System sans-serif' },\n  'system-serif': { key: 'ecommerce.backend.store.branding.font.systemSerif', fallback: 'System serif' },\n  'system-mono': { key: 'ecommerce.backend.store.branding.font.systemMono', fallback: 'System monospace' },\n}\n\nexport function StoreBrandingTab({ store, reload }: StoreBrandingTabProps) {\n  const t = useT()\n  const { canManageBranding } = useStoreAccess()\n  const [formKey, setFormKey] = React.useState(0)\n\n  const fontOptions = React.useMemo(\n    () =>\n      ECOMMERCE_BRANDING_FONTS.map((font) => {\n        const system = SYSTEM_FONT_LABELS[font.id]\n        return { value: font.id, label: system ? t(system.key, system.fallback) : font.label }\n      }),\n    [t],\n  )\n\n  const fields = React.useMemo<CrudField[]>(() => {\n    const colorFields: CrudField[] = BRANDING_COLOR_KEYS.map((key) => ({\n      id: key,\n      type: 'custom',\n      label: t(COLOR_LABELS[key].key, COLOR_LABELS[key].fallback),\n      layout: 'half',\n      disabled: !canManageBranding,\n      component: (props: CrudCustomFieldRenderProps) => (\n        <BrandingColorInput\n          id={props.id}\n          value={props.value}\n          error={props.error}\n          disabled={props.disabled || !canManageBranding}\n          setValue={props.setValue}\n        />\n      ),\n    }))\n    return [\n      ...colorFields,\n      {\n        id: 'borderRadius',\n        type: 'custom',\n        label: t('ecommerce.backend.store.branding.radius', 'Corner radius'),\n        description: t(\n          'ecommerce.backend.store.branding.radiusHint',\n          'How rounded buttons, cards and inputs are, from square (0) to 5rem.',\n        ),\n        disabled: !canManageBranding,\n        component: (props: CrudCustomFieldRenderProps) => (\n          <BrandingRadiusSlider\n            id={props.id}\n            value={props.value}\n            error={props.error}\n            disabled={props.disabled || !canManageBranding}\n            setValue={props.setValue}\n          />\n        ),\n      },\n      {\n        id: 'fontFamilyBase',\n        type: 'select',\n        label: t('ecommerce.backend.store.branding.fontBase', 'Body font'),\n        options: fontOptions,\n        layout: 'half',\n        disabled: !canManageBranding,\n      },\n      {\n        id: 'fontFamilyHeading',\n        type: 'select',\n        label: t('ecommerce.backend.store.branding.fontHeading', 'Heading font'),\n        options: [\n          { value: BRANDING_FONT_INHERIT, label: t('ecommerce.backend.store.branding.fontInherit', 'Same as body font') },\n          ...fontOptions,\n        ],\n        layout: 'half',\n        disabled: !canManageBranding,\n      },\n      {\n        id: 'logoUrl',\n        type: 'text',\n        label: t('ecommerce.backend.store.branding.logoUrl', 'Logo URL'),\n        description: t(\n          'ecommerce.backend.store.branding.assetUrlHint',\n          'An http(s) address or a path starting with /. Leave empty for none.',\n        ),\n        maxLength: 2048,\n        disabled: !canManageBranding,\n      },\n      {\n        id: 'faviconUrl',\n        type: 'text',\n        label: t('ecommerce.backend.store.branding.faviconUrl', 'Favicon URL'),\n        description: t(\n          'ecommerce.backend.store.branding.assetUrlHint',\n          'An http(s) address or a path starting with /. Leave empty for none.',\n        ),\n        maxLength: 2048,\n        disabled: !canManageBranding,\n      },\n    ]\n  }, [canManageBranding, fontOptions, t])\n\n  const groups = React.useMemo<CrudFormGroup[]>(\n    () => [\n      {\n        id: 'colours',\n        title: t('ecommerce.backend.store.branding.coloursTitle', 'Colours'),\n        column: 1,\n        fields: [...BRANDING_COLOR_KEYS],\n      },\n      {\n        id: 'style',\n        title: t('ecommerce.backend.store.branding.styleTitle', 'Shape and typography'),\n        column: 1,\n        fields: ['borderRadius', 'fontFamilyBase', 'fontFamilyHeading'],\n      },\n      {\n        id: 'assets',\n        title: t('ecommerce.backend.store.branding.assetsTitle', 'Logo and favicon'),\n        column: 1,\n        fields: ['logoUrl', 'faviconUrl'],\n      },\n      {\n        id: 'preview',\n        title: t('ecommerce.backend.store.branding.preview.groupTitle', 'Live preview'),\n        column: 2,\n        component: ({ values }) => (\n          <StoreBrandingPreview values={values} storeName={store.name} currencyCode={store.defaultCurrencyCode} />\n        ),\n      },\n    ],\n    [store.defaultCurrencyCode, store.name, t],\n  )\n\n  const initialValues = React.useMemo(() => buildStoreBrandingInitialValues(store), [store])\n\n  const handleSubmit = React.useCallback(\n    async (values: StoreBrandingFormValues) => {\n      const payload = buildStoreBrandingPayload(values, store)\n      const call = await apiCall(STORE_BRANDING_API_PATH(store.id), {\n        method: 'PUT',\n        headers: { 'content-type': 'application/json' },\n        body: JSON.stringify(payload),\n      })\n      if (!call.ok) {\n        await raiseCrudError(call.response, t('ecommerce.backend.store.branding.errors.save', 'Failed to save the branding.'))\n      }\n      flash(t('ecommerce.backend.store.branding.flash.saved', 'Branding saved'), 'success')\n      await reload()\n    },\n    [reload, store, t],\n  )\n\n  const resetForm = React.useCallback(() => setFormKey((current) => current + 1), [])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key !== 'Escape' || event.defaultPrevented) return\n      resetForm()\n    },\n    [resetForm],\n  )\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>{t('ecommerce.backend.store.branding.title', 'Branding')}</CardTitle>\n        <CardDescription>\n          {t(\n            'ecommerce.backend.store.branding.description',\n            'The colours, corner radius, fonts and logo your storefront uses. Empty values use the defaults shown.',\n          )}\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        {canManageBranding ? null : (\n          <Alert status=\"information\">\n            <AlertDescription>\n              {t(\n                'ecommerce.backend.store.branding.readOnly',\n                'You can view this branding but not change it. Changing it requires permission to manage store branding.',\n              )}\n            </AlertDescription>\n          </Alert>\n        )}\n        <div onKeyDown={handleKeyDown}>\n          <CrudForm<StoreBrandingFormValues>\n            key={`${formKey}:${store.updatedAt ?? 'new'}`}\n            schema={storeBrandingFormSchema}\n            fields={fields}\n            groups={groups}\n            initialValues={initialValues}\n            optimisticLockUpdatedAt={store.updatedAt}\n            submitLabel={t('ecommerce.backend.store.branding.save', 'Save branding')}\n            onSubmit={handleSubmit}\n            hideFooterActions={!canManageBranding}\n            embedded\n          />\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}