121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
import { Button } from '@astryxdesign/core/Button';
|
|
import { HStack } from '@astryxdesign/core/HStack';
|
|
import { Text } from '@astryxdesign/core/Text';
|
|
import { VStack } from '@astryxdesign/core/VStack';
|
|
import { ArrowRight, Boxes, Check, LayoutDashboard, PackageSearch } from 'lucide-react';
|
|
|
|
/**
|
|
* The end.
|
|
*
|
|
* One quiet animation — a tick that draws itself once — and then straight to
|
|
* what comes next. Confetti on a business tool is a celebration the user did
|
|
* not ask for, and it delays the three things they actually came here to do.
|
|
*
|
|
* The three cards are the real next actions, not a tour: each is a screen that
|
|
* exists and does something.
|
|
*/
|
|
export interface DoneStepProps {
|
|
productCount: number;
|
|
onCatalogue: () => void;
|
|
onInventory: () => void;
|
|
onStorefront: () => void;
|
|
onDashboard: () => void;
|
|
}
|
|
|
|
export function DoneStep({
|
|
productCount,
|
|
onCatalogue,
|
|
onInventory,
|
|
onStorefront,
|
|
onDashboard,
|
|
}: DoneStepProps) {
|
|
return (
|
|
<VStack gap={4} className="ob-panel">
|
|
<VStack gap={1.5} style={{ textAlign: 'center', alignItems: 'center' }}>
|
|
<span className="ob-tick" aria-hidden>
|
|
<Check size={30} strokeWidth={3} />
|
|
</span>
|
|
<Text
|
|
type="display-2"
|
|
weight="semibold"
|
|
style={{ fontFamily: 'var(--font-display)', textWrap: 'balance' }}
|
|
>
|
|
You’re all set 🎉
|
|
</Text>
|
|
<Text type="body" color="secondary" style={{ maxWidth: '48ch', lineHeight: 1.65 }}>
|
|
{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.'}
|
|
</Text>
|
|
</VStack>
|
|
|
|
<div className="ob-benefits">
|
|
<NextCard
|
|
icon={<Boxes size={20} />}
|
|
title="Manage your catalogue"
|
|
body="Add products, set prices, and release them to your shops."
|
|
cta="Open catalogue"
|
|
onClick={onCatalogue}
|
|
/>
|
|
<NextCard
|
|
icon={<PackageSearch size={20} />}
|
|
title="Update your stock"
|
|
body="Upload your latest counts so customers see what is really there."
|
|
cta="Update stock"
|
|
onClick={onInventory}
|
|
/>
|
|
<NextCard
|
|
icon={<LayoutDashboard size={20} />}
|
|
title="See your shop"
|
|
body="Check what a customer sees, and which products are on sale."
|
|
cta="View products"
|
|
onClick={onStorefront}
|
|
/>
|
|
</div>
|
|
|
|
<HStack justify="center">
|
|
<Button
|
|
label="Go to the console"
|
|
variant="primary"
|
|
size="lg"
|
|
endContent={<ArrowRight size={15} />}
|
|
onClick={onDashboard}
|
|
/>
|
|
</HStack>
|
|
</VStack>
|
|
);
|
|
}
|
|
|
|
function NextCard({
|
|
icon,
|
|
title,
|
|
body,
|
|
cta,
|
|
onClick,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
body: string;
|
|
cta: string;
|
|
onClick: () => void;
|
|
}) {
|
|
return (
|
|
<button type="button" className="ob-choice" onClick={onClick}>
|
|
<VStack gap={1}>
|
|
<span style={{ color: 'var(--color-brand)' }} aria-hidden>
|
|
{icon}
|
|
</span>
|
|
<Text type="label" size="sm" weight="semibold">
|
|
{title}
|
|
</Text>
|
|
<Text type="body" size="sm" color="secondary" style={{ lineHeight: 1.6 }}>
|
|
{body}
|
|
</Text>
|
|
<Text type="label" size="sm" weight="semibold" style={{ color: 'var(--color-brand)' }}>
|
|
{cta} →
|
|
</Text>
|
|
</VStack>
|
|
</button>
|
|
);
|
|
}
|