guide

src/features/onboarding/steps/WelcomeStep.tsx

@@ -3,7 +3,7 @@ import { Card } from '@astryxdesign/core/Card';
 import { HStack } from '@astryxdesign/core/HStack';
 import { Text } from '@astryxdesign/core/Text';
 import { VStack } from '@astryxdesign/core/VStack';
-import { ArrowRight, Boxes, Rocket, Store } from 'lucide-react';
+import { ArrowRight, Boxes, Rocket, Store, type LucideIcon } from 'lucide-react';
 
 /**
  * The first screen, and the only one whose job is not to collect anything.
@@ -16,11 +16,30 @@ import { ArrowRight, Boxes, Rocket, Store } from 'lucide-react';
  * The one promise made in words is the one the state layer actually keeps:
  * progress is saved, so leaving is safe.
  */
+/** One of the three cards under the greeting. */
+export interface WelcomeBenefit {
+  icon: LucideIcon;
+  title: string;
+  body: string;
+}
+
 export interface WelcomeStepProps {
   shopName?: string;
   done: number;
   total: number;
   isReturning: boolean;
+  /**
+   * What setup is worth, in three cards.
+   *
+   * Given by the caller because the two roles are promised different things: a
+   * merchant is told about the catalogue and going on sale, a branch user about
+   * their own account and their shelf. The SHAPE is shared — that is the point
+   * of this component — and only the words differ.
+   */
+  benefits?: readonly WelcomeBenefit[];
+  /** The greeting, when the default merchant wording is not the right one. */
+  greeting?: string;
+  blurb?: string;
   onStart: () => void;
 }
 
@@ -42,7 +61,16 @@ const BENEFITS = [
   },
 ] as const;
 
-export function WelcomeStep({ shopName, done, total, isReturning, onStart }: WelcomeStepProps) {
+export function WelcomeStep({
+  shopName,
+  done,
+  total,
+  isReturning,
+  benefits = BENEFITS,
+  greeting,
+  blurb,
+  onStart,
+}: WelcomeStepProps) {
   const pct = total === 0 ? 0 : Math.round((done / total) * 100);
 
   return (
@@ -70,7 +98,7 @@ export function WelcomeStep({ shopName, done, total, isReturning, onStart }: Wel
           weight="semibold"
           style={{ fontFamily: 'var(--font-display)', textWrap: 'balance' }}
         >
-          {isReturning ? 'Welcome back 👋' : `Welcome${shopName ? ` to ${shopName}` : ''}! 👋`}
+          {isReturning ? 'Welcome back 👋' : (greeting ?? `Welcome${shopName ? ` to ${shopName}` : ''}! 👋`)}
         </Text>
         <Text
           type="body"
@@ -79,12 +107,12 @@ export function WelcomeStep({ shopName, done, total, isReturning, onStart }: Wel
         >
           {isReturning
             ? `You have completed ${done} of ${total} setup steps. Pick up where you left off.`
-            : "Let's get your store ready to start selling."}
+            : (blurb ?? "Let's get your store ready to start selling.")}
         </Text>
       </VStack>
 
       <div className="ob-benefits">
-        {BENEFITS.map(({ icon: Icon, title, body }) => (
+        {benefits.map(({ icon: Icon, title, body }) => (
           <Card key={title} padding={3} elevation="low">
             <VStack gap={1}>
               <span style={{ color: 'var(--color-brand)' }} aria-hidden>