Fixes

Fixed an issue where media manager only shows files uploaded in specific sections. Fixed an issue with icon picker names. Removed jumbo rounding and a few other style tweaks.
2026-08-05 09:25:59 +01:00
1 parent 9e39908ea7
commit d3bbad09c6
@@ -11,6 +11,9 @@ import { LoyaltyCard } from "@/components/ui/loyalty-card";
 import { Select } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { MediaPicker } from "@/features/media/components/media-picker";
+import { LoyaltyCardFont, LoyaltyCardTextSize, RewardPositionMode } from "@/generated/prisma/enums";
+import { cn } from "@/lib/utils/cn";
+import { MAX_STAMPS_REQUIRED, resolveRewardThreshold } from "@/services/loyalty/reward-threshold";
 import { updateLoyaltyConfigAction } from "../actions/loyalty-config";
 import type { ProgrammeConfigInput } from "@/services/loyalty/loyalty.service";

@@ -20,6 +23,18 @@ const REWARD_TYPES: { value: ProgrammeConfigInput["rewardType"]; label: string }
  { value: "FREE_SERVICE", label: "Free Service" },
 ];

+const FONT_OPTIONS: { value: LoyaltyCardFont; label: string }[] = [
+  { value: LoyaltyCardFont.SANS, label: "Sans Serif" },
+  { value: LoyaltyCardFont.SERIF, label: "Serif" },
+  { value: LoyaltyCardFont.MONO, label: "Monospace" },
+];
+
+const TEXT_SIZE_OPTIONS: { value: LoyaltyCardTextSize; label: string }[] = [
+  { value: LoyaltyCardTextSize.SM, label: "Small" },
+  { value: LoyaltyCardTextSize.MD, label: "Medium" },
+  { value: LoyaltyCardTextSize.LG, label: "Large" },
+];
+
 export interface LoyaltyConfigFormProps {
  businessName: string;
  initialConfig: ProgrammeConfigInput;
@@ -70,7 +85,7 @@ export function LoyaltyConfigForm({

  return (
    <div className="space-y-6 lg:grid lg:grid-cols-2 lg:items-start lg:gap-6 lg:space-y-0">
-      <section className="rounded-jumbo border-line border bg-white p-6 lg:col-span-2">
+      <section className="rounded-md border-line border bg-white p-6 lg:col-span-2">
        <Switch
          label="Loyalty programme enabled"
          description="Turn off to stop earning/redeeming everywhere, without losing the configuration below."
@@ -81,14 +96,56 @@ export function LoyaltyConfigForm({

      <section className="space-y-3">
        <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Reward Rules</h3>
-        <div className="rounded-jumbo border-line space-y-5 border bg-white p-6">
+        <div className="rounded-md border-line space-y-5 border bg-white p-6">
          <Input
-            label="Stamps required for reward"
+            label={`Stamps required for reward (1–${MAX_STAMPS_REQUIRED})`}
            type="number"
            min={1}
+            max={MAX_STAMPS_REQUIRED}
            value={config.stampsRequired}
-            onChange={(e) => set("stampsRequired", Number(e.target.value))}
+            onChange={(e) => {
+              const next = Number(e.target.value);
+              set("stampsRequired", Number.isFinite(next) ? Math.min(Math.max(next, 1), MAX_STAMPS_REQUIRED) : 1);
+            }}
          />
+
+          <div>
+            <p className="mb-2 ml-1 text-[10px] font-bold tracking-widest uppercase text-muted">Reward Timing</p>
+            <div className="space-y-2">
+              {(
+                [
+                  {
+                    value: RewardPositionMode.AFTER_ALL_STAMPS,
+                    title: "Reward after all stamps",
+                    description: `Collect all ${config.stampsRequired} stamps, then the reward is given as a separate perk — every position on the card is a normal stamp.`,
+                  },
+                  {
+                    value: RewardPositionMode.FINAL_SLOT_IS_REWARD,
+                    title: "Final position is the reward",
+                    description: `Collect ${resolveRewardThreshold({ stampsRequired: config.stampsRequired, rewardPosition: RewardPositionMode.FINAL_SLOT_IS_REWARD })} stamps — the last position on the card is the reward itself, marked visually, not a stamp to fill.`,
+                  },
+                ] as const
+              ).map((option) => {
+                const selected = config.rewardPosition === option.value;
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => set("rewardPosition", option.value)}
+                    aria-pressed={selected}
+                    className={cn(
+                      "w-full rounded-xl border p-4 text-left transition-colors",
+                      selected ? "border-accent-loyalty bg-accent-loyalty/10" : "border-line bg-white",
+                    )}
+                  >
+                    <p className="text-sm font-bold">{option.title}</p>
+                    <p className="text-muted mt-1 text-xs">{option.description}</p>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
          <Select label="Reward Type" value={config.rewardType} onChange={(e) => set("rewardType", e.target.value as ProgrammeConfigInput["rewardType"])}>
            {REWARD_TYPES.map((t) => (
              <option key={t.value} value={t.value}>
@@ -131,7 +188,7 @@ export function LoyaltyConfigForm({

      <section className="space-y-3 lg:col-span-2">
        <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Eligibility</h3>
-        <div className="rounded-jumbo border-line space-y-4 border bg-white p-6 lg:grid lg:grid-cols-2 lg:gap-6 lg:space-y-0">
+        <div className="rounded-md border-line space-y-4 border bg-white p-6 lg:grid lg:grid-cols-2 lg:gap-6 lg:space-y-0">
          <div>
            <p className="mb-2 text-xs font-bold">Eligible services (none checked = all services earn stamps)</p>
            <div className="space-y-2">
@@ -163,7 +220,7 @@ export function LoyaltyConfigForm({

      <section className="space-y-3">
        <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Rules &amp; Expiry</h3>
-        <div className="rounded-jumbo border-line space-y-5 border bg-white p-6">
+        <div className="rounded-md border-line space-y-5 border bg-white p-6">
          <Switch
            label="Apply reward automatically"
            description="Redemption is always staff-initiated this phase — this setting is saved but has no automatic effect yet."
@@ -199,19 +256,29 @@ export function LoyaltyConfigForm({

      <section className="space-y-3 lg:col-span-2">
        <h3 className="text-muted ml-1 text-[10px] font-bold tracking-widest uppercase">Card Appearance</h3>
-        <div className="rounded-jumbo border-line space-y-4 border bg-white p-6 lg:grid lg:grid-cols-[minmax(0,320px)_1fr] lg:gap-8 lg:space-y-0">
+        <div className="rounded-md border-line space-y-4 border bg-white p-6 lg:grid lg:grid-cols-[minmax(0,320px)_1fr] lg:gap-8 lg:space-y-0">
          <div>
            <p className="text-muted mb-2 ml-1 text-[10px] font-bold tracking-widest uppercase">Live Preview</p>
            <LoyaltyCard
              businessName={businessName}
              memberNumber="A1B2C3"
              stampsRequired={Math.max(config.stampsRequired, 1)}
-              stampsEarned={Math.min(3, Math.max(config.stampsRequired - 1, 0))}
+              stampsEarned={Math.max(
+                resolveRewardThreshold({ stampsRequired: Math.max(config.stampsRequired, 1), rewardPosition: config.rewardPosition }) - 1,
+                0,
+              )}
              rewardLabel={config.rewardLabel || "Reward"}
              termsLine={config.termsLine}
              cardBackgroundColor={config.cardBackgroundColor}
              cardBackgroundImageUrl={config.cardBackgroundImageUrl}
              stampIcon={config.stampIcon}
+              rewardPosition={config.rewardPosition}
+              cardTopRightText={config.cardTopRightText}
+              cardFont={config.cardFont}
+              cardTopRightTextSize={config.cardTopRightTextSize}
+              cardTopRightTextColor={config.cardTopRightTextColor}
+              cardBorderColor={config.cardBorderColor}
+              cardMemberNumberColor={config.cardMemberNumberColor}
            />
          </div>
          <div className="mt-4 space-y-4 lg:mt-0">
@@ -226,6 +293,11 @@ export function LoyaltyConfigForm({
              onChange={(url) => set("cardBackgroundImageUrl", url ?? undefined)}
              category="loyalty"
            />
+            <ColorPicker
+              label="Border colour"
+              value={config.cardBorderColor}
+              onChange={(hex) => set("cardBorderColor", hex)}
+            />
            <IconPicker label="Stamp icon" value={config.stampIcon} onChange={(iconName) => set("stampIcon", iconName)} />
            <Input
              label="Terms line"
@@ -233,6 +305,55 @@ export function LoyaltyConfigForm({
              onChange={(e) => set("termsLine", e.target.value)}
              placeholder="Valid for 12 months. One reward per visit."
            />
+
+            <div className="border-line border-t pt-4">
+              <p className="mb-3 text-xs font-bold">Top-right card text</p>
+              <div className="space-y-4">
+                <Input
+                  label="Text"
+                  value={config.cardTopRightText ?? ""}
+                  onChange={(e) => set("cardTopRightText", e.target.value)}
+                  placeholder="e.g. VIP Member"
+                  hint="Shown above the member number. Leave blank to show only the member number, as today."
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <Select
+                    label="Font"
+                    value={config.cardFont}
+                    onChange={(e) => set("cardFont", e.target.value as ProgrammeConfigInput["cardFont"])}
+                  >
+                    {FONT_OPTIONS.map((f) => (
+                      <option key={f.value} value={f.value}>
+                        {f.label}
+                      </option>
+                    ))}
+                  </Select>
+                  <Select
+                    label="Text size"
+                    value={config.cardTopRightTextSize}
+                    onChange={(e) => set("cardTopRightTextSize", e.target.value as ProgrammeConfigInput["cardTopRightTextSize"])}
+                  >
+                    {TEXT_SIZE_OPTIONS.map((s) => (
+                      <option key={s.value} value={s.value}>
+                        {s.label}
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+                <p className="text-muted -mt-2 text-[10px]">Font applies to the whole card, not just this text.</p>
+                <ColorPicker
+                  label="Text colour"
+                  value={config.cardTopRightTextColor}
+                  onChange={(hex) => set("cardTopRightTextColor", hex)}
+                />
+              </div>
+            </div>
+
+            <ColorPicker
+              label="Member number colour"
+              value={config.cardMemberNumberColor}
+              onChange={(hex) => set("cardMemberNumberColor", hex)}
+            />
          </div>
        </div>
      </section>