@voyantjs/storefront-ui 0.50.0

package/dist/components/storefront-settings-page.d.ts

@@ -0,0 +1,5 @@
+export interface StorefrontSettingsPageProps {
+    className?: string;
+}
+export declare function StorefrontSettingsPage({ className }: StorefrontSettingsPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=storefront-settings-page.d.ts.map

package/dist/components/storefront-settings-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-settings-page.d.ts","sourceRoot":"","sources":["../../src/components/storefront-settings-page.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE,2BAA2B,2CA0EhF"}

package/dist/components/storefront-settings-page.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAdminStorefrontSettings, useAdminStorefrontSettingsMutation, } from "@voyantjs/storefront-react";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { useEffect, useMemo, useState } from "react";
+import { emptyForm, hasEmptySettings, toFormState, toPayload, validateForm, } from "../internal/storefront-settings-form.js";
+import { PaymentSection, StorefrontSettingsSaveButton, } from "../internal/storefront-settings-payment-section.js";
+import { BrandingSection, LegalLocalizationSection, StorefrontSettingsErrorState, StorefrontSettingsLoadingSections, StorefrontSettingsSaveError, SupportSection, } from "../internal/storefront-settings-sections.js";
+export function StorefrontSettingsPage({ className }) {
+    const settingsQuery = useAdminStorefrontSettings();
+    const mutation = useAdminStorefrontSettingsMutation();
+    const [form, setForm] = useState(emptyForm);
+    const [localError, setLocalError] = useState(null);
+    useEffect(() => {
+        if (settingsQuery.data?.data) {
+            setForm(toFormState(settingsQuery.data.data));
+            setLocalError(null);
+        }
+    }, [settingsQuery.data?.data]);
+    const isEmpty = useMemo(() => hasEmptySettings(settingsQuery.data?.data), [settingsQuery.data]);
+    const isSaving = mutation.isPending;
+    const setField = (key, value) => {
+        setForm((prev) => ({ ...prev, [key]: value }));
+    };
+    const updateSupportLink = (rowKey, patch) => {
+        setForm((prev) => ({
+            ...prev,
+            supportLinks: prev.supportLinks.map((link) => link.rowKey === rowKey ? { ...link, ...patch } : link),
+        }));
+    };
+    const save = async () => {
+        const validationError = validateForm(form);
+        setLocalError(validationError);
+        if (validationError)
+            return;
+        await mutation.mutateAsync(toPayload(form));
+    };
+    return (_jsxs("div", { "data-slot": "storefront-settings-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: "Storefront settings" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Manage customer-facing branding, support, legal, localization, and payment defaults." })] }), settingsQuery.isLoading ? (_jsx(StorefrontSettingsLoadingSections, {})) : settingsQuery.isError ? (_jsx(StorefrontSettingsErrorState, { error: settingsQuery.error, refetch: () => void settingsQuery.refetch() })) : (_jsxs(_Fragment, { children: [isEmpty ? (_jsx("p", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: "No storefront settings have been saved yet." })) : null, _jsxs("div", { className: "grid grid-cols-1 gap-4 xl:grid-cols-2", children: [_jsx(BrandingSection, { form: form, setField: setField }), _jsx(SupportSection, { form: form, setField: setField, updateSupportLink: updateSupportLink }), _jsx(LegalLocalizationSection, { form: form, setField: setField }), _jsx(PaymentSection, { form: form, setField: setField })] }), _jsx(StorefrontSettingsSaveError, { localError: localError, mutationError: mutation.error }), _jsx(StorefrontSettingsSaveButton, { isSaving: isSaving, save: () => void save() })] }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { StorefrontSettingsPage, type StorefrontSettingsPageProps, } from "./components/storefront-settings-page.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,0CAA0C,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+export { StorefrontSettingsPage, } from "./components/storefront-settings-page.js";

package/dist/internal/storefront-settings-form.d.ts

@@ -0,0 +1,46 @@
+import type { StorefrontSettingsPatchInput, StorefrontSettingsRecord } from "@voyantjs/storefront-react";
+export type SupportLinkRow = {
+    rowKey: string;
+    label: string;
+    url: string;
+};
+export type PaymentMethodCode = NonNullable<StorefrontSettingsRecord["payment"]["defaultMethod"]>;
+export type FormState = {
+    logoUrl: string;
+    faviconUrl: string;
+    brandMarkUrl: string;
+    primaryColor: string;
+    accentColor: string;
+    supportedLanguages: string;
+    supportEmail: string;
+    supportPhone: string;
+    supportLinks: SupportLinkRow[];
+    termsUrl: string;
+    privacyUrl: string;
+    cancellationUrl: string;
+    defaultContractTemplateId: string;
+    defaultLocale: string;
+    currencyDisplay: StorefrontSettingsRecord["localization"]["currencyDisplay"];
+    defaultMethod: PaymentMethodCode | "none";
+    enabledMethods: Record<PaymentMethodCode, boolean>;
+    depositPercent: string;
+    balanceDueDaysBeforeDeparture: string;
+    accountHolder: string;
+    bankName: string;
+    iban: string;
+    bic: string;
+    paymentReference: string;
+    bankInstructions: string;
+};
+export declare const paymentMethods: Array<{
+    code: PaymentMethodCode;
+    label: string;
+}>;
+export declare const loadingSectionKeys: readonly ["branding", "support", "legal", "payment"];
+export declare const nextSupportLinkKey: () => string;
+export declare const emptyForm: FormState;
+export declare function toFormState(settings?: StorefrontSettingsRecord): FormState;
+export declare function validateForm(form: FormState): "URLs must be valid http or https links." | "Brand colors must use #RGB or #RRGGBB format." | "Deposit percent must be between 0 and 100." | "Balance due days must be a whole number greater than or equal to 0." | "The default payment method must be enabled." | null;
+export declare function toPayload(form: FormState): StorefrontSettingsPatchInput;
+export declare function hasEmptySettings(settings?: StorefrontSettingsRecord): boolean;
+//# sourceMappingURL=storefront-settings-form.d.ts.map

package/dist/internal/storefront-settings-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-settings-form.d.ts","sourceRoot":"","sources":["../../src/internal/storefront-settings-form.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,4BAA4B,EAC5B,wBAAwB,EACzB,MAAM,4BAA4B,CAAA;AAEnC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC,eAAe,CAAC,CAAC,CAAA;AAEjG,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,cAAc,EAAE,CAAA;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,yBAAyB,EAAE,MAAM,CAAA;IACjC,aAAa,EAAE,MAAM,CAAA;IACrB,eAAe,EAAE,wBAAwB,CAAC,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAAA;IAC5E,aAAa,EAAE,iBAAiB,GAAG,MAAM,CAAA;IACzC,cAAc,EAAE,MAAM,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAA;IAClD,cAAc,EAAE,MAAM,CAAA;IACtB,6BAA6B,EAAE,MAAM,CAAA;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IACX,gBAAgB,EAAE,MAAM,CAAA;IACxB,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAM5E,CAAA;AAED,eAAO,MAAM,kBAAkB,sDAAuD,CAAA;AAGtF,eAAO,MAAM,kBAAkB,cAA2C,CAAA;AAE1E,eAAO,MAAM,SAAS,EAAE,SAgCvB,CAAA;AAqBD,wBAAgB,WAAW,CAAC,QAAQ,CAAC,EAAE,wBAAwB,GAAG,SAAS,CAwC1E;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,6QAmC3C;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,SAAS,GAAG,4BAA4B,CAgEvE;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,CAAC,EAAE,wBAAwB,WAUnE"}

package/dist/internal/storefront-settings-form.js

@@ -0,0 +1,202 @@
+export const paymentMethods = [
+    { code: "card", label: "Card" },
+    { code: "bank_transfer", label: "Bank transfer" },
+    { code: "cash", label: "Cash" },
+    { code: "voucher", label: "Voucher" },
+    { code: "invoice", label: "Invoice" },
+];
+export const loadingSectionKeys = ["branding", "support", "legal", "payment"];
+let supportLinkSeq = 0;
+export const nextSupportLinkKey = () => `support-link-${++supportLinkSeq}`;
+export const emptyForm = {
+    logoUrl: "",
+    faviconUrl: "",
+    brandMarkUrl: "",
+    primaryColor: "",
+    accentColor: "",
+    supportedLanguages: "",
+    supportEmail: "",
+    supportPhone: "",
+    supportLinks: [],
+    termsUrl: "",
+    privacyUrl: "",
+    cancellationUrl: "",
+    defaultContractTemplateId: "",
+    defaultLocale: "",
+    currencyDisplay: "code",
+    defaultMethod: "none",
+    enabledMethods: {
+        card: false,
+        bank_transfer: false,
+        cash: false,
+        voucher: false,
+        invoice: false,
+    },
+    depositPercent: "",
+    balanceDueDaysBeforeDeparture: "",
+    accountHolder: "",
+    bankName: "",
+    iban: "",
+    bic: "",
+    paymentReference: "",
+    bankInstructions: "",
+};
+function optional(value) {
+    const trimmed = value.trim();
+    return trimmed ? trimmed : null;
+}
+function urlLooksValid(value) {
+    if (!value.trim())
+        return true;
+    try {
+        const url = new URL(value);
+        return url.protocol === "http:" || url.protocol === "https:";
+    }
+    catch {
+        return false;
+    }
+}
+function colorLooksValid(value) {
+    return !value.trim() || /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value.trim());
+}
+export function toFormState(settings) {
+    if (!settings)
+        return emptyForm;
+    return {
+        logoUrl: settings.branding.logoUrl ?? "",
+        faviconUrl: settings.branding.faviconUrl ?? "",
+        brandMarkUrl: settings.branding.brandMarkUrl ?? "",
+        primaryColor: settings.branding.primaryColor ?? "",
+        accentColor: settings.branding.accentColor ?? "",
+        supportedLanguages: settings.branding.supportedLanguages.join(", "),
+        supportEmail: settings.support.email ?? "",
+        supportPhone: settings.support.phone ?? "",
+        supportLinks: settings.support.links.map((link) => ({
+            rowKey: nextSupportLinkKey(),
+            label: link.label,
+            url: link.url,
+        })),
+        termsUrl: settings.legal.termsUrl ?? "",
+        privacyUrl: settings.legal.privacyUrl ?? "",
+        cancellationUrl: settings.legal.cancellationUrl ?? "",
+        defaultContractTemplateId: settings.legal.defaultContractTemplateId ?? "",
+        defaultLocale: settings.localization.defaultLocale ?? "",
+        currencyDisplay: settings.localization.currencyDisplay,
+        defaultMethod: settings.payment.defaultMethod ?? "none",
+        enabledMethods: Object.fromEntries(paymentMethods.map((method) => [
+            method.code,
+            settings.payment.methods.some((stored) => stored.code === method.code && stored.enabled),
+        ])),
+        depositPercent: settings.payment.defaultSchedule?.depositPercent?.toString() ?? "",
+        balanceDueDaysBeforeDeparture: settings.payment.defaultSchedule?.balanceDueDaysBeforeDeparture?.toString() ?? "",
+        accountHolder: settings.payment.bankTransfer?.accountHolder ?? "",
+        bankName: settings.payment.bankTransfer?.bankName ?? "",
+        iban: settings.payment.bankTransfer?.iban ?? "",
+        bic: settings.payment.bankTransfer?.bic ?? "",
+        paymentReference: settings.payment.bankTransfer?.paymentReference ?? "",
+        bankInstructions: settings.payment.bankTransfer?.instructions ?? "",
+    };
+}
+export function validateForm(form) {
+    const urls = [
+        form.logoUrl,
+        form.faviconUrl,
+        form.brandMarkUrl,
+        form.termsUrl,
+        form.privacyUrl,
+        form.cancellationUrl,
+        ...form.supportLinks.map((link) => link.url),
+    ];
+    if (urls.some((url) => !urlLooksValid(url))) {
+        return "URLs must be valid http or https links.";
+    }
+    if (!colorLooksValid(form.primaryColor) || !colorLooksValid(form.accentColor)) {
+        return "Brand colors must use #RGB or #RRGGBB format.";
+    }
+    const deposit = form.depositPercent ? Number(form.depositPercent) : null;
+    if (deposit !== null && (!Number.isFinite(deposit) || deposit < 0 || deposit > 100)) {
+        return "Deposit percent must be between 0 and 100.";
+    }
+    const balanceDue = form.balanceDueDaysBeforeDeparture
+        ? Number(form.balanceDueDaysBeforeDeparture)
+        : null;
+    if (balanceDue !== null && (!Number.isInteger(balanceDue) || balanceDue < 0)) {
+        return "Balance due days must be a whole number greater than or equal to 0.";
+    }
+    if (form.defaultMethod !== "none" && !form.enabledMethods[form.defaultMethod]) {
+        return "The default payment method must be enabled.";
+    }
+    return null;
+}
+export function toPayload(form) {
+    const supportLinks = form.supportLinks
+        .map((link) => ({ label: link.label.trim(), url: link.url.trim() }))
+        .filter((link) => link.label || link.url);
+    return {
+        branding: {
+            logoUrl: optional(form.logoUrl),
+            faviconUrl: optional(form.faviconUrl),
+            brandMarkUrl: optional(form.brandMarkUrl),
+            primaryColor: optional(form.primaryColor),
+            accentColor: optional(form.accentColor),
+            supportedLanguages: form.supportedLanguages
+                .split(",")
+                .map((value) => value.trim())
+                .filter(Boolean),
+        },
+        support: {
+            email: optional(form.supportEmail),
+            phone: optional(form.supportPhone),
+            links: supportLinks,
+        },
+        legal: {
+            termsUrl: optional(form.termsUrl),
+            privacyUrl: optional(form.privacyUrl),
+            cancellationUrl: optional(form.cancellationUrl),
+            defaultContractTemplateId: optional(form.defaultContractTemplateId),
+        },
+        localization: {
+            defaultLocale: optional(form.defaultLocale),
+            currencyDisplay: form.currencyDisplay,
+        },
+        payment: {
+            defaultMethod: form.defaultMethod === "none" ? null : form.defaultMethod,
+            methods: paymentMethods
+                .filter((method) => form.enabledMethods[method.code])
+                .map((method) => ({ code: method.code })),
+            defaultSchedule: form.depositPercent || form.balanceDueDaysBeforeDeparture
+                ? {
+                    depositPercent: form.depositPercent ? Number(form.depositPercent) : null,
+                    balanceDueDaysBeforeDeparture: form.balanceDueDaysBeforeDeparture
+                        ? Number(form.balanceDueDaysBeforeDeparture)
+                        : null,
+                }
+                : null,
+            bankTransfer: form.accountHolder ||
+                form.bankName ||
+                form.iban ||
+                form.bic ||
+                form.paymentReference ||
+                form.bankInstructions
+                ? {
+                    accountHolder: optional(form.accountHolder),
+                    bankName: optional(form.bankName),
+                    iban: optional(form.iban),
+                    bic: optional(form.bic),
+                    paymentReference: optional(form.paymentReference),
+                    instructions: optional(form.bankInstructions),
+                }
+                : null,
+        },
+    };
+}
+export function hasEmptySettings(settings) {
+    if (!settings)
+        return true;
+    return (!settings.branding.logoUrl &&
+        !settings.support.email &&
+        !settings.support.phone &&
+        !settings.legal.termsUrl &&
+        !settings.payment.defaultMethod &&
+        settings.payment.methods.length === 0);
+}

package/dist/internal/storefront-settings-payment-section.d.ts

@@ -0,0 +1,12 @@
+import { type FormState } from "./storefront-settings-form.js";
+type SetField = <K extends keyof FormState>(key: K, value: FormState[K]) => void;
+export declare function PaymentSection({ form, setField }: {
+    form: FormState;
+    setField: SetField;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function StorefrontSettingsSaveButton({ isSaving, save, }: {
+    isSaving: boolean;
+    save: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=storefront-settings-payment-section.d.ts.map

package/dist/internal/storefront-settings-payment-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-settings-payment-section.d.ts","sourceRoot":"","sources":["../../src/internal/storefront-settings-payment-section.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,+BAA+B,CAAA;AAE9E,KAAK,QAAQ,GAAG,CAAC,CAAC,SAAS,MAAM,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;AAEhF,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,2CAmIzF;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,QAAQ,EACR,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB,2CASA"}

package/dist/internal/storefront-settings-payment-section.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Input, Textarea, } from "@voyantjs/ui/components";
+import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "@voyantjs/ui/components/field";
+import { Loader2, Save } from "lucide-react";
+import { paymentMethods } from "./storefront-settings-form.js";
+export function PaymentSection({ form, setField }) {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Payment defaults" }), _jsx(CardDescription, { children: "Default payment methods, schedules, and bank details." })] }), _jsx(CardContent, { children: _jsxs(FieldGroup, { children: [_jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: "Payment methods" }), _jsx("div", { className: "grid grid-cols-1 gap-2 md:grid-cols-2", children: paymentMethods.map((method) => (_jsxs(Field, { orientation: "horizontal", children: [_jsx(Checkbox, { id: `storefront-payment-${method.code}`, checked: form.enabledMethods[method.code], onCheckedChange: (checked) => setField("enabledMethods", {
+                                                    ...form.enabledMethods,
+                                                    [method.code]: checked === true,
+                                                }) }), _jsx(FieldLabel, { htmlFor: `storefront-payment-${method.code}`, children: method.label })] }, method.code))) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-default-method", children: "Default method" }), _jsxs("select", { id: "storefront-default-method", className: "h-9 rounded-md border bg-background px-3 text-sm", value: form.defaultMethod, onChange: (event) => setField("defaultMethod", event.target.value), children: [_jsx("option", { value: "none", children: "None" }), paymentMethods.map((method) => (_jsx("option", { value: method.code, children: method.label }, method.code)))] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-deposit-percent", children: "Deposit percent" }), _jsx(Input, { id: "storefront-deposit-percent", type: "number", min: 0, max: 100, value: form.depositPercent, onChange: (event) => setField("depositPercent", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-balance-due", children: "Balance due days" }), _jsx(Input, { id: "storefront-balance-due", type: "number", min: 0, value: form.balanceDueDaysBeforeDeparture, onChange: (event) => setField("balanceDueDaysBeforeDeparture", event.target.value) })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: "Bank transfer details" }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-account-holder", children: "Account holder" }), _jsx(Input, { id: "storefront-account-holder", value: form.accountHolder, onChange: (event) => setField("accountHolder", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-bank-name", children: "Bank name" }), _jsx(Input, { id: "storefront-bank-name", value: form.bankName, onChange: (event) => setField("bankName", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-iban", children: "IBAN or account number" }), _jsx(Input, { id: "storefront-iban", value: form.iban, onChange: (event) => setField("iban", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-bic", children: "BIC or routing code" }), _jsx(Input, { id: "storefront-bic", value: form.bic, onChange: (event) => setField("bic", event.target.value) })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-payment-reference", children: "Payment reference" }), _jsx(Input, { id: "storefront-payment-reference", value: form.paymentReference, onChange: (event) => setField("paymentReference", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-bank-instructions", children: "Instructions" }), _jsx(Textarea, { id: "storefront-bank-instructions", value: form.bankInstructions, onChange: (event) => setField("bankInstructions", event.target.value) })] })] })] }) })] }));
+}
+export function StorefrontSettingsSaveButton({ isSaving, save, }) {
+    return (_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", onClick: save, disabled: isSaving, children: [isSaving ? _jsx(Loader2, { className: "size-4 animate-spin" }) : _jsx(Save, { className: "size-4" }), "Save settings"] }) }));
+}

package/dist/internal/storefront-settings-sections.d.ts

@@ -0,0 +1,23 @@
+import { type FormState, type SupportLinkRow } from "./storefront-settings-form.js";
+type SetField = <K extends keyof FormState>(key: K, value: FormState[K]) => void;
+interface SettingsSectionProps {
+    form: FormState;
+    setField: SetField;
+}
+interface SupportSectionProps extends SettingsSectionProps {
+    updateSupportLink: (rowKey: string, patch: Partial<SupportLinkRow>) => void;
+}
+export declare function StorefrontSettingsLoadingSections(): import("react/jsx-runtime").JSX.Element;
+export declare function StorefrontSettingsErrorState({ error, refetch, }: {
+    error: unknown;
+    refetch: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function BrandingSection({ form, setField }: SettingsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SupportSection({ form, setField, updateSupportLink }: SupportSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function LegalLocalizationSection({ form, setField }: SettingsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function StorefrontSettingsSaveError({ localError, mutationError, }: {
+    localError: string | null;
+    mutationError: unknown;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=storefront-settings-sections.d.ts.map

package/dist/internal/storefront-settings-sections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storefront-settings-sections.d.ts","sourceRoot":"","sources":["../../src/internal/storefront-settings-sections.tsx"],"names":[],"mappings":"AAqBA,OAAO,EACL,KAAK,SAAS,EAGd,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAA;AAEtC,KAAK,QAAQ,GAAG,CAAC,CAAC,SAAS,MAAM,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;AAEhF,UAAU,oBAAoB;IAC5B,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,QAAQ,CAAA;CACnB;AAED,UAAU,mBAAoB,SAAQ,oBAAoB;IACxD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;CAC5E;AAED,wBAAgB,iCAAiC,4CAkBhD;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,2CAmBA;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAoEvE;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,EAAE,mBAAmB,2CAwFxF;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAuEhF;AAED,wBAAgB,2BAA2B,CAAC,EAC1C,UAAU,EACV,aAAa,GACd,EAAE;IACD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,aAAa,EAAE,OAAO,CAAA;CACvB,kDAWA"}

package/dist/internal/storefront-settings-sections.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, } from "@voyantjs/ui/components";
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet, } from "@voyantjs/ui/components/field";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { AlertCircle, Plus, Trash2 } from "lucide-react";
+import { loadingSectionKeys, nextSupportLinkKey, } from "./storefront-settings-form.js";
+export function StorefrontSettingsLoadingSections() {
+    return (_jsx("div", { className: "grid grid-cols-1 gap-4 xl:grid-cols-2", children: loadingSectionKeys.map((key) => (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(Skeleton, { className: "h-5 w-40" }), _jsx(Skeleton, { className: "h-4 w-64" })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(Skeleton, { className: "h-9 w-full" }), _jsx(Skeleton, { className: "h-9 w-full" }), _jsx(Skeleton, { className: "h-9 w-2/3" })] })] }, key))) }));
+}
+export function StorefrontSettingsErrorState({ error, refetch, }) {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "size-5 text-destructive" }), "Could not load settings"] }), _jsx(CardDescription, { children: error instanceof Error ? error.message : "The storefront settings request failed." })] }), _jsx(CardFooter, { children: _jsx(Button, { type: "button", variant: "outline", onClick: refetch, children: "Try again" }) })] }));
+}
+export function BrandingSection({ form, setField }) {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Branding" }), _jsx(CardDescription, { children: "Customer-facing assets and brand color tokens." })] }), _jsx(CardContent, { children: _jsxs(FieldGroup, { children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-logo-url", children: "Logo URL" }), _jsx(Input, { id: "storefront-logo-url", value: form.logoUrl, onChange: (event) => setField("logoUrl", event.target.value), placeholder: "https://cdn.example.com/logo.svg" })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-favicon-url", children: "Favicon URL" }), _jsx(Input, { id: "storefront-favicon-url", value: form.faviconUrl, onChange: (event) => setField("faviconUrl", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-brand-mark-url", children: "Brand mark URL" }), _jsx(Input, { id: "storefront-brand-mark-url", value: form.brandMarkUrl, onChange: (event) => setField("brandMarkUrl", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-primary-color", children: "Primary color" }), _jsx(Input, { id: "storefront-primary-color", value: form.primaryColor, onChange: (event) => setField("primaryColor", event.target.value), placeholder: "#0f766e" })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-accent-color", children: "Accent color" }), _jsx(Input, { id: "storefront-accent-color", value: form.accentColor, onChange: (event) => setField("accentColor", event.target.value), placeholder: "#f59e0b" })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-supported-languages", children: "Supported languages" }), _jsx(Input, { id: "storefront-supported-languages", value: form.supportedLanguages, onChange: (event) => setField("supportedLanguages", event.target.value), placeholder: "en, ro, fr-FR" }), _jsx(FieldDescription, { children: "Use comma-separated BCP 47 language tags." })] })] }) })] }));
+}
+export function SupportSection({ form, setField, updateSupportLink }) {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Support" }), _jsx(CardDescription, { children: "Contact channels shown to storefront customers." })] }), _jsx(CardContent, { children: _jsxs(FieldGroup, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-support-email", children: "Email" }), _jsx(Input, { id: "storefront-support-email", type: "email", value: form.supportEmail, onChange: (event) => setField("supportEmail", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-support-phone", children: "Phone" }), _jsx(Input, { id: "storefront-support-phone", value: form.supportPhone, onChange: (event) => setField("supportPhone", event.target.value) })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: "Contact links" }), _jsxs("div", { className: "space-y-2", children: [form.supportLinks.map((link) => (_jsxs("div", { className: "grid grid-cols-1 gap-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto]", children: [_jsx(Input, { value: link.label, onChange: (event) => updateSupportLink(link.rowKey, { label: event.target.value }), placeholder: "WhatsApp", "aria-label": "Contact link label" }), _jsx(Input, { value: link.url, onChange: (event) => updateSupportLink(link.rowKey, { url: event.target.value }), placeholder: "https://example.com/contact", "aria-label": "Contact link URL" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => setField("supportLinks", form.supportLinks.filter((row) => row.rowKey !== link.rowKey)), "aria-label": "Remove contact link", children: _jsx(Trash2, { className: "size-4" }) })] }, link.rowKey))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setField("supportLinks", [
+                                                ...form.supportLinks,
+                                                { rowKey: nextSupportLinkKey(), label: "", url: "" },
+                                            ]), children: [_jsx(Plus, { className: "size-4" }), "Add link"] })] })] })] }) })] }));
+}
+export function LegalLocalizationSection({ form, setField }) {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Legal and localization" }), _jsx(CardDescription, { children: "Policy links and default display preferences." })] }), _jsx(CardContent, { children: _jsx(FieldGroup, { children: _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-terms-url", children: "Terms URL" }), _jsx(Input, { id: "storefront-terms-url", value: form.termsUrl, onChange: (event) => setField("termsUrl", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-privacy-url", children: "Privacy URL" }), _jsx(Input, { id: "storefront-privacy-url", value: form.privacyUrl, onChange: (event) => setField("privacyUrl", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-cancellation-url", children: "Cancellation URL" }), _jsx(Input, { id: "storefront-cancellation-url", value: form.cancellationUrl, onChange: (event) => setField("cancellationUrl", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-contract-template", children: "Contract template ID" }), _jsx(Input, { id: "storefront-contract-template", value: form.defaultContractTemplateId, onChange: (event) => setField("defaultContractTemplateId", event.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-default-locale", children: "Default locale" }), _jsx(Input, { id: "storefront-default-locale", value: form.defaultLocale, onChange: (event) => setField("defaultLocale", event.target.value), placeholder: "en-US" })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "storefront-currency-display", children: "Currency display" }), _jsxs("select", { id: "storefront-currency-display", className: "h-9 rounded-md border bg-background px-3 text-sm", value: form.currencyDisplay, onChange: (event) => setField("currencyDisplay", event.target.value), children: [_jsx("option", { value: "code", children: "Code" }), _jsx("option", { value: "symbol", children: "Symbol" }), _jsx("option", { value: "name", children: "Name" })] })] })] }) }) })] }));
+}
+export function StorefrontSettingsSaveError({ localError, mutationError, }) {
+    if (!localError && !mutationError)
+        return null;
+    return (_jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive", children: localError ??
+            (mutationError instanceof Error
+                ? mutationError.message
+                : "Failed to save storefront settings.") }));
+}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@voyantjs/storefront-ui",
+  "version": "0.50.0",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyantjs/voyant.git",
+    "directory": "packages/storefront-ui"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./components/storefront-settings-page": "./src/components/storefront-settings-page.tsx"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "prepack": "pnpm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@voyantjs/storefront-react": "workspace:*",
+    "@voyantjs/ui": "workspace:*",
+    "lucide-react": "^0.475.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.96.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@voyantjs/storefront-react": "workspace:*",
+    "@voyantjs/ui": "workspace:*",
+    "@voyantjs/voyant-typescript-config": "workspace:*",
+    "lucide-react": "^1.7.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2",
+    "zod": "^4.3.6"
+  },
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "default": "./dist/index.js"
+      },
+      "./styles.css": {
+        "default": "./src/styles.css"
+      },
+      "./components/storefront-settings-page": {
+        "types": "./dist/components/storefront-settings-page.d.ts",
+        "import": "./dist/components/storefront-settings-page.js",
+        "default": "./dist/components/storefront-settings-page.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  }
+}

package/src/styles.css

@@ -0,0 +1 @@
+@source "./**/*.{ts,tsx}";