edde637c8e
- C1-09: Create CloudPage with folder tree, file list, and /cloud route - C1-10: Create CloudUploadModal with drag-and-drop and progress - C1-11: Create CloudFilePreview mini player inline - C1-12: Add Cloud stories (loading, empty, populated, quota full) - G1-01: Add is_public toggle, public gear endpoint, GearShowcase - G1-02: Add gear image upload endpoints, GearImageGallery component - G1-03: Add gear search with ILIKE + SearchBar in toolbar - G1-04: Add stories for GearShowcase and GearImageGallery
69 lines
2 KiB
TypeScript
69 lines
2 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { CheckoutSuccessView } from './CheckoutSuccessView';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
const meta: Meta<typeof CheckoutSuccessView> = {
|
|
title: 'Features/Checkout/CheckoutSuccessView',
|
|
component: CheckoutSuccessView,
|
|
parameters: { layout: 'fullscreen' },
|
|
tags: ['autodocs'],
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="bg-background min-h-layout-page">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
const mockOrder = {
|
|
id: 'ord-abc12345',
|
|
status: 'completed',
|
|
total_amount: 29.99,
|
|
currency: 'EUR',
|
|
items: [
|
|
{ product_id: 'prod-1', price: 19.99 },
|
|
{ product_id: 'prod-2', price: 10 },
|
|
],
|
|
created_at: new Date().toISOString(),
|
|
};
|
|
|
|
export const Default: Story = {
|
|
args: { order: mockOrder },
|
|
};
|
|
|
|
export const Loading: Story = {
|
|
render: () => (
|
|
<div className="flex flex-col items-center justify-center min-h-layout-page px-4 py-12">
|
|
<div className="max-w-md w-full space-y-8 text-center">
|
|
<Skeleton className="h-24 w-24 rounded-full mx-auto" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-8 w-48 mx-auto" />
|
|
<Skeleton className="h-4 w-64 mx-auto" />
|
|
</div>
|
|
<Skeleton className="h-32 w-full rounded-xl" />
|
|
</div>
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const Error: Story = {
|
|
render: () => (
|
|
<div className="flex flex-col items-center justify-center min-h-layout-page px-4 py-12">
|
|
<div className="max-w-md w-full space-y-8 text-center">
|
|
<div className="rounded-full bg-destructive/10 p-4 mx-auto w-fit">
|
|
<div className="h-16 w-16 rounded-full bg-destructive/30" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-bold text-foreground">Commande introuvable</h1>
|
|
<p className="text-muted-foreground">
|
|
Cette commande n'existe pas ou a expiré.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
};
|