feat(client): add KYC for event joining

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/stories/events/event-card.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { EventCardSkeleton } from '@/components/events/event-card.skeleton';
 import { EventCardView } from '@/components/events/event-card.view';
+import { Button } from '@/components/ui/button';
 
 const meta = {
   title: 'Events/EventCard',
@@ -12,25 +13,35 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    type: 'official',
-    coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-watersplash.png?raw=true',
-    eventName: 'Nix CN Conference 26.05',
-    description: 'Event Description',
-    startTime: new Date('2026-06-13T04:00:00.000Z'),
-    endTime: new Date('2026-06-14T04:00:00.000Z'),
-    onJoinEvent: () => { },
+    eventInfo: {
+      eventId: '1',
+      type: 'official',
+      requireKyc: true,
+      isJoined: false,
+      coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-watersplash.png?raw=true',
+      eventName: 'Nix CN Conference 26.05',
+      description: 'Event Description',
+      startTime: new Date('2026-06-13T04:00:00.000Z'),
+      endTime: new Date('2026-06-14T04:00:00.000Z'),
+    },
+    actionFooter: <Button className="w-full">加入活动（示例）</Button>,
   },
 };
 
 export const Loading: Story = {
   render: () => <EventCardSkeleton />,
   args: {
-    type: 'official',
-    coverImage: '',
-    eventName: '',
-    description: '',
-    startTime: new Date(0),
-    endTime: new Date(0),
-    onJoinEvent: () => { },
+    eventInfo: {
+      eventId: '1',
+      type: 'official',
+      requireKyc: true,
+      coverImage: '',
+      isJoined: false,
+      eventName: '',
+      description: '',
+      startTime: new Date(0),
+      endTime: new Date(0),
+    },
+    actionFooter: <Button className="w-full">加入活动（示例）</Button>,
   },
 };

client/cms/src/stories/events/event-grid.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { EventGridSkeleton } from '@/components/events/event-grid.skeleton';
 import { EventGridView } from '@/components/events/event-grid.view';
+import { Button } from '@/components/ui/button';
+import { Skeleton as UiSkeleton } from '@/components/ui/skeleton';
 
 const meta = {
   title: 'Events/EventGrid',
@@ -14,42 +16,51 @@ export const Primary: Story = {
   args: {
     events: [
       {
+        eventId: '1',
+        requireKyc: true,
+        isJoined: false,
         type: 'official',
         coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-watersplash.png?raw=true',
         eventName: 'Nix CN Conference 26.05',
         description: 'Event Description',
         startTime: new Date('2026-06-13T04:00:00.000Z'),
         endTime: new Date('2026-06-14T04:00:00.000Z'),
-        onJoinEvent: () => { },
       },
       {
+        eventId: '2',
+        requireKyc: true,
+        isJoined: false,
         type: 'official',
         coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-moonscape.png?raw=true',
         eventName: 'Nix CN Conference 26.05',
         description: 'Event Description',
         startTime: new Date('2026-06-13T04:00:00.000Z'),
         endTime: new Date('2026-06-14T04:00:00.000Z'),
-        onJoinEvent: () => { },
       },
       {
+        eventId: '3',
+        requireKyc: true,
+        isJoined: false,
         type: 'official',
         coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-nineish-catppuccin-latte.png?raw=true',
         eventName: 'Nix CN Conference 26.05',
         description: 'Event Description',
         startTime: new Date('2026-06-13T04:00:00.000Z'),
         endTime: new Date('2026-06-14T04:00:00.000Z'),
-        onJoinEvent: () => { },
       },
       {
+        eventId: '4',
+        requireKyc: true,
+        isJoined: false,
         type: 'official',
         coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nixos-wallpaper-catppuccin-macchiato.png?raw=true',
         eventName: 'Nix CN Conference 26.05',
         description: 'Event Description',
         startTime: new Date('2026-06-13T04:00:00.000Z'),
         endTime: new Date('2026-06-14T04:00:00.000Z'),
-        onJoinEvent: () => { },
       },
     ],
+    assembleFooter: () => <Button className="w-full">加入活动</Button>,
   },
 };
 
@@ -57,5 +68,6 @@ export const Skeleton: Story = {
   render: () => <EventGridSkeleton />,
   args: {
     events: [],
+    assembleFooter: () => <UiSkeleton className="w-full" />,
   },
 };

client/cms/src/stories/events/kyc-dialog.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { KycFailedDialogView } from '@/components/events/kyc/kyc-failed.dialog.view';
+import { KycMethodSelectionDialogView } from '@/components/events/kyc/kyc-method-selection.dialog.view';
+import { KycPendingDialogView } from '@/components/events/kyc/kyc-pending.dialog.view';
+import { KycPromptDialogView } from '@/components/events/kyc/kyc-prompt.dialog.view';
+import { KycSuccessDialogView } from '@/components/events/kyc/kyc-success.dialog.view';
+import { Dialog } from '@/components/ui/dialog';
+
+const meta = {
+  title: 'Events/KycDialog',
+  component: KycPromptDialogView,
+  decorators: [
+    Story => (
+      <Dialog open={true}>
+        <Story />
+      </Dialog>
+    ),
+  ],
+} satisfies Meta<typeof KycPromptDialogView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Prompt: Story = {
+  args: {
+  },
+};
+
+export const MethodSelection: Story = {
+  render: () => <KycMethodSelectionDialogView onSubmit={async () => Promise.resolve()} />,
+  args: {
+  },
+};
+
+export const Pending: Story = {
+  render: () => <KycPendingDialogView />,
+  args: {
+  },
+};
+
+export const Success: Story = {
+  render: () => <KycSuccessDialogView />,
+  args: {
+  },
+};
+
+export const Failed: Story = {
+  render: () => <KycFailedDialogView />,
+  args: {
+  },
+};