Loyalty Card updates

1. Card title fix: The "top-right text" feature was renamed and repositioned to be the actual card title (top-left, replacing the hardcoded "Loyalty Card"), matching what you asked for. This included a proper database migration (cardTopRightText → cardTitleText, etc., using CHANGE COLUMN so any already-configured value is preserved, not dropped) and updates through every layer — schema, service, owner form, and both the owner preview and customer-facing card. Verified live: typed "VIP Rewards" into the new "Card title" field and confirmed it renders top-left on both the owner's live preview and the real customer loyalty page, with the member number staying in its own badge top-right.

2. Tabs: The long "Card Appearance" control list is now split into Colours / Stamp / Text tabs (using the same Tabs component used elsewhere in the app), exactly as you suggested — Colours holds every colour + the background image, Stamp holds just the icon picker, Text holds the title, font, size, and terms line.

Along the way, while running full E2E regression, I found 6 test failures — but traced them via git stash to prove they're pre-existing bugs unrelated to this change (a booking/appointments-list bug), so I reverted-then-confirmed before restoring my work, and filed a separate follow-up task for them rather than mixing it into this change.

Both fixes are typechecked, linted, verified with the full unit (253) and integration (185) suites, confirmed live in a real browser end-to-end, and deployed to your running Docker container — the migration applied cleanly against your real database with no data loss.

src/app/(customer)/home/page.tsx

@@ -143,17 +143,17 @@ export default async function CustomerHomePage() {
     <div>
       {/* Hero — an owner-managed gallery (see /owner/settings/gallery), matching the content width rather than bleeding edge-to-edge. */}
       {heroGalleryImages.length > 0 && (
-        <div className="mx-auto max-w-2xl px-6 pt-4 bg-white">
+        <div className="mx-auto max-w-2xl px-6 pt-4 bg-white border-line border-b">
           <ImageGallery images={heroGalleryImages} />
         </div>
       )}
 
       <main className="mx-auto max-w-2xl bg-white px-6 py-6">
-        {session?.user && (
+        {/* {session?.user && (
           <p className="text-muted mb-1 text-sm">
             Good to see you, {session.user.name?.split(" ")[0] ?? "there"}
           </p>
-        )}
+        )} */}
         <h1 className="mb-1 text-2xl font-bold tracking-tight">{business.name}</h1>
         {location && (
           <p className="text-muted mb-3 text-xs">
@@ -176,9 +176,11 @@ export default async function CustomerHomePage() {
         {/* Upcoming appointment */}
         {upcomingAppointment && (
           <section className="mb-6">
+            {session?.user && (
             <h2 className="text-muted mb-3 text-xs font-bold tracking-widest uppercase">
-              Your Next Visit
-            </h2>
+           {session.user.name?.split(" ")[0] ?? "Your Next Appointment"}, Your Next Appointment
+           </h2>
+        )}
             <AppointmentCard
               status={STATUS_MAP[upcomingAppointment.status] ?? "confirmed"}
               serviceName={upcomingAppointment.services.map((s) => s.service.name).join(" + ")}

src/app/(customer)/loyalty/page.tsx

@@ -86,10 +86,10 @@ export default async function LoyaltyPage() {
           cardBackgroundImageUrl={loyalty.cardBackgroundImageUrl}
           stampIcon={loyalty.stampIcon}
           rewardPosition={loyalty.rewardPosition}
-          cardTopRightText={loyalty.cardTopRightText}
+          cardTitleText={loyalty.cardTitleText}
           cardFont={loyalty.cardFont}
-          cardTopRightTextSize={loyalty.cardTopRightTextSize}
-          cardTopRightTextColor={loyalty.cardTopRightTextColor}
+          cardTitleTextSize={loyalty.cardTitleTextSize}
+          cardTitleTextColor={loyalty.cardTitleTextColor}
           cardBorderColor={loyalty.cardBorderColor}
           cardMemberNumberColor={loyalty.cardMemberNumberColor}
         />

src/app/(owner)/owner/settings/loyalty/page.tsx

@@ -51,10 +51,10 @@ export default async function OwnerLoyaltyConfigPage() {
         cardBackgroundImageUrl: programme.cardBackgroundImageUrl ?? undefined,
         stampIcon: programme.stampIcon ?? undefined,
         termsLine: programme.termsLine ?? undefined,
-        cardTopRightText: programme.cardTopRightText ?? undefined,
+        cardTitleText: programme.cardTitleText ?? undefined,
         cardFont: programme.cardFont,
-        cardTopRightTextSize: programme.cardTopRightTextSize,
-        cardTopRightTextColor: programme.cardTopRightTextColor ?? undefined,
+        cardTitleTextSize: programme.cardTitleTextSize,
+        cardTitleTextColor: programme.cardTitleTextColor ?? undefined,
         cardBorderColor: programme.cardBorderColor ?? undefined,
         cardMemberNumberColor: programme.cardMemberNumberColor ?? undefined,
       }
@@ -68,7 +68,7 @@ export default async function OwnerLoyaltyConfigPage() {
         earnOnCancelled: false,
         earnOnNoShow: false,
         cardFont: LoyaltyCardFont.SANS,
-        cardTopRightTextSize: LoyaltyCardTextSize.MD,
+        cardTitleTextSize: LoyaltyCardTextSize.MD,
       };
 
   return (

src/components/ui/loyalty-card.tsx

@@ -13,10 +13,11 @@ const FONT_CLASSES: Record<LoyaltyCardFont, string> = {
   [LoyaltyCardFont.MONO]: "font-mono",
 };
 
-const TOP_RIGHT_TEXT_SIZE_CLASSES: Record<LoyaltyCardTextSize, string> = {
-  [LoyaltyCardTextSize.SM]: "text-[8px]",
-  [LoyaltyCardTextSize.MD]: "text-[10px]",
-  [LoyaltyCardTextSize.LG]: "text-[13px]",
+/** MD matches the size "Loyalty Card" rendered at before this was configurable, so leaving this unset doesn't change the default look. */
+const TITLE_TEXT_SIZE_CLASSES: Record<LoyaltyCardTextSize, string> = {
+  [LoyaltyCardTextSize.SM]: "text-base",
+  [LoyaltyCardTextSize.MD]: "text-lg",
+  [LoyaltyCardTextSize.LG]: "text-2xl",
 };
 
 export interface LoyaltyCardProps {
@@ -32,10 +33,11 @@ export interface LoyaltyCardProps {
   stampIcon?: string | null;
   /** See resolveRewardThreshold's doc comment — determines whether the final stamp position renders as a normal stamp or as the reward slot itself. */
   rewardPosition?: RewardPositionMode;
-  cardTopRightText?: string | null;
+  /** Replaces the "Loyalty Card" title (top-left) when set. */
+  cardTitleText?: string | null;
   cardFont?: LoyaltyCardFont;
-  cardTopRightTextSize?: LoyaltyCardTextSize;
-  cardTopRightTextColor?: string | null;
+  cardTitleTextSize?: LoyaltyCardTextSize;
+  cardTitleTextColor?: string | null;
   cardBorderColor?: string | null;
   cardMemberNumberColor?: string | null;
 }
@@ -63,10 +65,10 @@ export function LoyaltyCard({
   cardBackgroundImageUrl,
   stampIcon,
   rewardPosition = RewardPositionMode.AFTER_ALL_STAMPS,
-  cardTopRightText,
+  cardTitleText,
   cardFont = LoyaltyCardFont.SANS,
-  cardTopRightTextSize = LoyaltyCardTextSize.MD,
-  cardTopRightTextColor,
+  cardTitleTextSize = LoyaltyCardTextSize.MD,
+  cardTitleTextColor,
   cardBorderColor,
   cardMemberNumberColor,
 }: LoyaltyCardProps) {
@@ -111,23 +113,18 @@ export function LoyaltyCard({
 
       <div className="relative flex h-full flex-col justify-between p-4">
         <div className="flex items-start justify-between gap-2">
-          <h2 className="text-lg font-black italic tracking-tight text-white">Loyalty Card</h2>
-          <div className="flex flex-col items-end gap-1">
-            {cardTopRightText && (
-              <span
-                className={cn(TOP_RIGHT_TEXT_SIZE_CLASSES[cardTopRightTextSize], "text-right font-bold text-white")}
-                style={{ color: cardTopRightTextColor || undefined }}
-              >
-                {cardTopRightText}
-              </span>
-            )}
-            <span
-              className="border-accent-loyalty/30 text-accent-loyalty rounded border px-2 py-0.5 text-[8px] font-bold tracking-widest uppercase"
-              style={{ color: cardMemberNumberColor || undefined, borderColor: cardMemberNumberColor ? `${cardMemberNumberColor}4d` : undefined }}
-            >
-              Member #{memberNumber}
-            </span>
-          </div>
+          <h2
+            className={cn(TITLE_TEXT_SIZE_CLASSES[cardTitleTextSize], "font-black italic tracking-tight text-white")}
+            style={{ color: cardTitleTextColor || undefined }}
+          >
+            {cardTitleText || "Loyalty Card"}
+          </h2>
+          <span
+            className="border-accent-loyalty/30 text-accent-loyalty shrink-0 rounded border px-2 py-0.5 text-[8px] font-bold tracking-widest uppercase"
+            style={{ color: cardMemberNumberColor || undefined, borderColor: cardMemberNumberColor ? `${cardMemberNumberColor}4d` : undefined }}
+          >
+            Member #{memberNumber}
+          </span>
         </div>
         <div className="grid grid-cols-5 gap-2">
           {Array.from({ length: stampsRequired }, (_, i) => {
@@ -161,7 +158,7 @@ export function LoyaltyCard({
           })}
         </div>
         {termsLine && (
-          <p className="text-center text-[7px] mt-2 font-bold tracking-widest text-white/40 uppercase">{termsLine}</p>
+          <p className="mt-2 text-center text-[7px] font-bold tracking-widest text-white/40 uppercase">{termsLine}</p>
         )}
       </div>
     </div>

src/components/ui/tabs.tsx

@@ -14,7 +14,7 @@ export const Tabs = TabsPrimitive.Root;
 export function TabsList({ className, ...props }: TabsPrimitive.TabsListProps) {
   return (
     <TabsPrimitive.List
-      className={cn("flex gap-2 rounded-full bg-stone p-1", className)}
+      className={cn("flex gap-1 rounded-full bg-white p-1", className)}
       {...props}
     />
   );
@@ -24,7 +24,7 @@ export function TabsTrigger({ className, ...props }: TabsPrimitive.TabsTriggerPr
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        "flex-1 rounded-full px-4 py-2.5 text-xs font-bold uppercase tracking-widest text-muted transition-all",
+        "flex-1 rounded-md px-3 py-2.5 text-xs font-bold uppercase text-muted transition-all",
         "data-[state=active]:bg-ink data-[state=active]:text-white",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-stone",
         className,

src/features/owner/components/loyalty-config-form.tsx

@@ -10,6 +10,7 @@ import { Input } from "@/components/ui/input";
 import { LoyaltyCard } from "@/components/ui/loyalty-card";
 import { Select } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { MediaPicker } from "@/features/media/components/media-picker";
 import { LoyaltyCardFont, LoyaltyCardTextSize, RewardPositionMode } from "@/generated/prisma/enums";
 import { cn } from "@/lib/utils/cn";
@@ -29,7 +30,7 @@ const FONT_OPTIONS: { value: LoyaltyCardFont; label: string }[] = [
   { value: LoyaltyCardFont.MONO, label: "Monospace" },
 ];
 
-const TEXT_SIZE_OPTIONS: { value: LoyaltyCardTextSize; label: string }[] = [
+const TITLE_SIZE_OPTIONS: { value: LoyaltyCardTextSize; label: string }[] = [
   { value: LoyaltyCardTextSize.SM, label: "Small" },
   { value: LoyaltyCardTextSize.MD, label: "Medium" },
   { value: LoyaltyCardTextSize.LG, label: "Large" },
@@ -273,48 +274,62 @@ export function LoyaltyConfigForm({
               cardBackgroundImageUrl={config.cardBackgroundImageUrl}
               stampIcon={config.stampIcon}
               rewardPosition={config.rewardPosition}
-              cardTopRightText={config.cardTopRightText}
+              cardTitleText={config.cardTitleText}
               cardFont={config.cardFont}
-              cardTopRightTextSize={config.cardTopRightTextSize}
-              cardTopRightTextColor={config.cardTopRightTextColor}
+              cardTitleTextSize={config.cardTitleTextSize}
+              cardTitleTextColor={config.cardTitleTextColor}
               cardBorderColor={config.cardBorderColor}
               cardMemberNumberColor={config.cardMemberNumberColor}
             />
           </div>
-          <div className="mt-4 space-y-4 lg:mt-0">
-            <ColorPicker
-              label="Background colour"
-              value={config.cardBackgroundColor}
-              onChange={(hex) => set("cardBackgroundColor", hex)}
-            />
-            <MediaPicker
-              label="Background image (optional)"
-              value={config.cardBackgroundImageUrl}
-              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"
-              value={config.termsLine ?? ""}
-              onChange={(e) => set("termsLine", e.target.value)}
-              placeholder="Valid for 12 months. One reward per visit."
-            />
+          <div className="mt-4 lg:mt-0">
+            <Tabs defaultValue="colours">
+              <TabsList>
+                <TabsTrigger value="colours">Colours</TabsTrigger>
+                <TabsTrigger value="stamp">Stamp</TabsTrigger>
+                <TabsTrigger value="text">Text</TabsTrigger>
+              </TabsList>
 
-            <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">
+              <TabsContent value="colours" className="space-y-4">
+                <ColorPicker
+                  label="Background colour"
+                  value={config.cardBackgroundColor}
+                  onChange={(hex) => set("cardBackgroundColor", hex)}
+                />
+                <MediaPicker
+                  label="Background image (optional)"
+                  value={config.cardBackgroundImageUrl}
+                  onChange={(url) => set("cardBackgroundImageUrl", url ?? undefined)}
+                  category="loyalty"
+                />
+                <ColorPicker
+                  label="Border colour"
+                  value={config.cardBorderColor}
+                  onChange={(hex) => set("cardBorderColor", hex)}
+                />
+                <ColorPicker
+                  label="Title text colour"
+                  value={config.cardTitleTextColor}
+                  onChange={(hex) => set("cardTitleTextColor", hex)}
+                />
+                <ColorPicker
+                  label="Member number colour"
+                  value={config.cardMemberNumberColor}
+                  onChange={(hex) => set("cardMemberNumberColor", hex)}
+                />
+              </TabsContent>
+
+              <TabsContent value="stamp" className="space-y-4">
+                <IconPicker label="Stamp icon" value={config.stampIcon} onChange={(iconName) => set("stampIcon", iconName)} />
+              </TabsContent>
+
+              <TabsContent value="text" 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."
+                  label="Card title"
+                  value={config.cardTitleText ?? ""}
+                  onChange={(e) => set("cardTitleText", e.target.value)}
+                  placeholder="Loyalty Card"
+                  hint={`Shown top-left on the card, in place of the default "Loyalty Card". Leave blank to keep the default.`}
                 />
                 <div className="grid grid-cols-2 gap-4">
                   <Select
@@ -329,31 +344,26 @@ export function LoyaltyConfigForm({
                     ))}
                   </Select>
                   <Select
-                    label="Text size"
-                    value={config.cardTopRightTextSize}
-                    onChange={(e) => set("cardTopRightTextSize", e.target.value as ProgrammeConfigInput["cardTopRightTextSize"])}
+                    label="Title size"
+                    value={config.cardTitleTextSize}
+                    onChange={(e) => set("cardTitleTextSize", e.target.value as ProgrammeConfigInput["cardTitleTextSize"])}
                   >
-                    {TEXT_SIZE_OPTIONS.map((s) => (
+                    {TITLE_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)}
+                <p className="text-muted -mt-2 text-[10px]">Font applies to the whole card, not just the title.</p>
+                <Input
+                  label="Terms line"
+                  value={config.termsLine ?? ""}
+                  onChange={(e) => set("termsLine", e.target.value)}
+                  placeholder="Valid for 12 months. One reward per visit."
                 />
-              </div>
-            </div>
-
-            <ColorPicker
-              label="Member number colour"
-              value={config.cardMemberNumberColor}
-              onChange={(hex) => set("cardMemberNumberColor", hex)}
-            />
+              </TabsContent>
+            </Tabs>
           </div>
         </div>
       </section>

src/services/loyalty/__tests__/loyalty-config.test.ts

@@ -14,7 +14,7 @@ const base: ProgrammeConfigInput = {
   earnOnCancelled: false,
   earnOnNoShow: false,
   cardFont: LoyaltyCardFont.SANS,
-  cardTopRightTextSize: LoyaltyCardTextSize.MD,
+  cardTitleTextSize: LoyaltyCardTextSize.MD,
 };
 
 describe("validateProgrammeConfig", () => {

src/services/loyalty/__tests__/loyalty-owner.integration.test.ts

@@ -41,7 +41,7 @@ describe("LoyaltyService — owner configuration and redemption (integration)",
           earnOnCancelled: false,
           earnOnNoShow: false,
           cardFont: LoyaltyCardFont.SANS,
-          cardTopRightTextSize: LoyaltyCardTextSize.MD,
+          cardTitleTextSize: LoyaltyCardTextSize.MD,
         },
       });
       expect(first.success).toBe(true);
@@ -63,7 +63,7 @@ describe("LoyaltyService — owner configuration and redemption (integration)",
           earnOnCancelled: false,
           earnOnNoShow: false,
           cardFont: LoyaltyCardFont.SANS,
-          cardTopRightTextSize: LoyaltyCardTextSize.MD,
+          cardTitleTextSize: LoyaltyCardTextSize.MD,
         },
       });
       expect(second.success).toBe(true);
@@ -92,7 +92,7 @@ describe("LoyaltyService — owner configuration and redemption (integration)",
           earnOnCancelled: false,
           earnOnNoShow: false,
           cardFont: LoyaltyCardFont.SANS,
-          cardTopRightTextSize: LoyaltyCardTextSize.MD,
+          cardTitleTextSize: LoyaltyCardTextSize.MD,
         },
       });
       expect(result.success).toBe(false);

src/services/loyalty/loyalty.service.ts

@@ -56,10 +56,10 @@ export interface LoyaltySummary {
   cardBackgroundColor: string | null;
   cardBackgroundImageUrl: string | null;
   termsLine: string | null;
-  cardTopRightText: string | null;
+  cardTitleText: string | null;
   cardFont: LoyaltyCardFont;
-  cardTopRightTextSize: LoyaltyCardTextSize;
-  cardTopRightTextColor: string | null;
+  cardTitleTextSize: LoyaltyCardTextSize;
+  cardTitleTextColor: string | null;
   cardBorderColor: string | null;
   cardMemberNumberColor: string | null;
 }
@@ -105,10 +105,10 @@ export async function getLoyaltySummary(
     cardBackgroundColor: programme.cardBackgroundColor,
     cardBackgroundImageUrl: programme.cardBackgroundImageUrl,
     termsLine: programme.termsLine,
-    cardTopRightText: programme.cardTopRightText,
+    cardTitleText: programme.cardTitleText,
     cardFont: programme.cardFont,
-    cardTopRightTextSize: programme.cardTopRightTextSize,
-    cardTopRightTextColor: programme.cardTopRightTextColor,
+    cardTitleTextSize: programme.cardTitleTextSize,
+    cardTitleTextColor: programme.cardTitleTextColor,
     cardBorderColor: programme.cardBorderColor,
     cardMemberNumberColor: programme.cardMemberNumberColor,
   };
@@ -546,11 +546,11 @@ export interface ProgrammeConfigInput {
   cardBackgroundImageUrl?: string;
   stampIcon?: string;
   termsLine?: string;
-  /** Free text shown in the card's top-right area — see schema.prisma's cardTopRightText doc comment. */
-  cardTopRightText?: string;
+  /** Replaces the "Loyalty Card" title (top-left) when set — see schema.prisma's cardTitleText doc comment. */
+  cardTitleText?: string;
   cardFont: LoyaltyCardFont;
-  cardTopRightTextSize: LoyaltyCardTextSize;
-  cardTopRightTextColor?: string;
+  cardTitleTextSize: LoyaltyCardTextSize;
+  cardTitleTextColor?: string;
   cardBorderColor?: string;
   cardMemberNumberColor?: string;
 }
@@ -627,10 +627,10 @@ export async function updateProgrammeConfig(
     cardBackgroundImageUrl: params.input.cardBackgroundImageUrl || null,
     stampIcon: params.input.stampIcon || null,
     termsLine: params.input.termsLine?.trim() || null,
-    cardTopRightText: params.input.cardTopRightText?.trim() || null,
+    cardTitleText: params.input.cardTitleText?.trim() || null,
     cardFont: params.input.cardFont,
-    cardTopRightTextSize: params.input.cardTopRightTextSize,
-    cardTopRightTextColor: params.input.cardTopRightTextColor || null,
+    cardTitleTextSize: params.input.cardTitleTextSize,
+    cardTitleTextColor: params.input.cardTitleTextColor || null,
     cardBorderColor: params.input.cardBorderColor || null,
     cardMemberNumberColor: params.input.cardMemberNumberColor || null,
   };

src/services/reporting/owner-reporting.service.ts

@@ -227,7 +227,7 @@ export async function getConfigurationWarnings(prisma: PrismaClient, businessId:
       earnOnCancelled: loyaltyProgramme.earnOnCancelled,
       earnOnNoShow: loyaltyProgramme.earnOnNoShow,
       cardFont: loyaltyProgramme.cardFont,
-      cardTopRightTextSize: loyaltyProgramme.cardTopRightTextSize,
+      cardTitleTextSize: loyaltyProgramme.cardTitleTextSize,
     });
     if (!validation.valid) {
       warnings.push({