guide

src/features/onboarding/OnboardingPage.tsx

@@ -25,6 +25,7 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Card } from '@astryxdesign/core/Card';
+import { Boxes, LayoutDashboard, PackageSearch } from 'lucide-react';
 import { Text } from '@astryxdesign/core/Text';
 import { errorMessage } from '@/api/client';
 import { tenantsApi } from '@/api/tenants';
@@ -35,6 +36,8 @@ import { useLocationProducts, useOwnTenant } from '@/queries/hooks';
 import { StepFrame } from './StepFrame';
 import { Stepper } from './Stepper';
 import {
+  PROGRESS_STEPS,
+  STEP_LABEL,
   completeStep,
   progressOf,
   readOnboarding,
@@ -236,7 +239,15 @@ export function OnboardingPage() {
 
   return (
     <PageBody measure="reading">
-      {!isFirst && !isLast ? <Stepper current={step} completed={state.completed} /> : null}
+      {!isFirst && !isLast ? (
+        <Stepper
+          steps={PROGRESS_STEPS}
+          labels={STEP_LABEL}
+          current={step}
+          completed={state.completed}
+          lastId="done"
+        />
+      ) : null}
 
       {step === 'welcome' ? (
         <WelcomeStep
@@ -250,7 +261,8 @@ export function OnboardingPage() {
 
       {!isFirst && !isLast ? (
         <StepFrame
-          step={step}
+          position={PROGRESS_STEPS.indexOf(step as (typeof PROGRESS_STEPS)[number]) + 1}
+          total={PROGRESS_STEPS.length}
           title={heading.title}
           {...(heading.blurb ? { blurb: heading.blurb } : {})}
           continueLabel={step === 'review' ? 'Complete setup' : 'Save & continue'}
@@ -319,10 +331,34 @@ export function OnboardingPage() {
 
       {step === 'done' ? (
         <DoneStep
-          productCount={productCount}
-          onCatalogue={() => navigate('/admin/inventory?tab=catalogue')}
-          onInventory={() => navigate('/admin/inventory?tab=stock')}
-          onStorefront={() => navigate('/admin/inventory?tab=products')}
+          blurb={
+            productCount > 0
+              ? 'Your store is set up and your products are ready for customers.'
+              : 'Your store is set up. Add some products and they will be ready for customers.'
+          }
+          actions={[
+            {
+              icon: <Boxes size={20} />,
+              title: 'Manage your catalogue',
+              body: 'Add products, set prices, and release them to your shops.',
+              cta: 'Open catalogue',
+              onClick: () => navigate('/admin/inventory?tab=catalogue'),
+            },
+            {
+              icon: <PackageSearch size={20} />,
+              title: 'Update your stock',
+              body: 'Upload your latest counts so customers see what is really there.',
+              cta: 'Update stock',
+              onClick: () => navigate('/admin/inventory?tab=stock'),
+            },
+            {
+              icon: <LayoutDashboard size={20} />,
+              title: 'See your shop',
+              body: 'Check what a customer sees, and which products are on sale.',
+              cta: 'View products',
+              onClick: () => navigate('/admin/inventory?tab=products'),
+            },
+          ]}
           onDashboard={() => navigate('/admin/console')}
         />
       ) : null}