@licklist/design 0.78.5-dev.69 → 0.78.5-dev.70

package/src/v2/pages/CreateUser/CreateUserPage.stories.tsx

@@ -0,0 +1,157 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { CreateUserPage } from './CreateUserPage'
+import type { ExistingUser, EntityResult, VenueAssignment } from './CreateUserPage'
+
+// ─── Mock data ────────────────────────────────────────────────────────────────
+
+const mockExistingUser: ExistingUser = {
+  id: 'usr-001',
+  fullName: 'Jane Smith',
+  email: 'jane.smith@example.com',
+  userNumber: 1042,
+  assignments: [
+    { id: 'venue-001', name: 'The Grand Arena', type: 'venue', friendlyId: 'V-10203', role: 'admin' },
+    { id: 'company-001', name: 'Events Co.', type: 'company', friendlyId: 'C-7890', role: 'manager' },
+  ],
+}
+
+const mockEntityResults: EntityResult[] = [
+  { id: 'venue-002', name: 'Sunset Pavilion', type: 'venue', friendlyId: 'V-20101' },
+  { id: 'company-002', name: 'Live Events Group', type: 'company', friendlyId: 'C-5501' },
+  { id: 'venue-003', name: 'City Bowl Stadium', type: 'venue', friendlyId: 'V-30302' },
+]
+
+const mockNestedProviders: EntityResult[] = [
+  { id: 'venue-004', name: 'North Wing Venue', type: 'venue', friendlyId: 'V-40101' },
+  { id: 'venue-005', name: 'South Hall', type: 'venue', friendlyId: 'V-40202' },
+  { id: 'promo-001', name: 'Live Events Promoter', type: 'promoter', friendlyId: 'P-40303' },
+]
+
+const mockVenues: VenueAssignment[] = [
+  { id: 'venue-101', name: 'Main Arena', type: 'venue', friendlyId: 'V-1001', role: 'admin', selected: true },
+  { id: 'venue-102', name: 'North Pavilion', type: 'venue', friendlyId: 'V-1002', role: 'admin', selected: true },
+  { id: 'venue-103', name: 'South Court', type: 'venue', friendlyId: 'V-1003', role: 'admin', selected: false },
+  { id: 'promo-101', name: 'Events Promoter', type: 'promoter', friendlyId: 'P-1001', role: 'admin', selected: true },
+]
+
+// ─── Shared mock handlers ────────────────────────────────────────────────────
+
+/** Type "existing" in the email field to trigger the existing-user path */
+async function checkEmail(email: string): Promise<ExistingUser | null> {
+  await delay(600)
+  return email.toLowerCase().includes('existing') ? mockExistingUser : null
+}
+
+async function searchEntities(query: string): Promise<EntityResult[]> {
+  await delay(400)
+  return mockEntityResults.filter((e) => e.name.toLowerCase().includes(query.toLowerCase()))
+}
+
+async function fetchCompanyProviders(): Promise<EntityResult[]> {
+  await delay(300)
+  return mockNestedProviders
+}
+
+async function fetchCompanyVenues(): Promise<VenueAssignment[]> {
+  await delay(300)
+  return mockVenues
+}
+
+function delay(ms: number) {
+  return new Promise<void>((r) => setTimeout(r, ms))
+}
+
+// ─── Meta ─────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof CreateUserPage> = {
+  title: 'v2/Pages/CreateUser',
+  component: CreateUserPage,
+  parameters: { layout: 'fullscreen' },
+}
+
+export default meta
+type Story = StoryObj<typeof CreateUserPage>
+
+// ─── Stories — one per real entry context ────────────────────────────────────
+
+/**
+ * **Admin Panel** — `/admin/users/add`
+ *
+ * A super or system admin adds any kind of user to the platform.
+ *
+ * Flow:
+ * - Email → Name → **Role selection** (Super Admin / System Admin / Provider User)
+ * - If Provider User: → Search & select companies/venues → Set role per entity → Create User
+ * - If Super/System Admin: → Send Invitation
+ * - If existing email: → Existing user card → View User (flow ends)
+ *
+ * Try typing "existing" in the email field to trigger the existing-user path.
+ * Try searching "sunset" or "city" on the Providers step.
+ */
+export const AdminPanel: Story = {
+  name: 'Admin Panel',
+  args: {
+    mode: 'admin-panel',
+    onCheckEmail: checkEmail,
+    onSearchEntities: searchEntities,
+    onFetchCompanyProviders: fetchCompanyProviders,
+    onInviteUser: async (data) => { await delay(1000); console.log('Invite sent:', data) },
+    onViewUser: (id) => console.log('Navigate to user:', id),
+    onCancel: () => console.log('Cancel'),
+  },
+}
+
+/**
+ * **Provider Team** — `/venue|promoter/{id}/settings/team-settings/add`
+ *
+ * A provider admin adds a team member to their single provider.
+ *
+ * Flow:
+ * - Email → Name (new) or User card (existing) → **Role selection** (provider roles) → Send Invitation / Add User
+ *
+ * The role is always chosen inside the wizard — there is no pre-selection.
+ * Try typing "existing" in the email field to see the existing-user card path.
+ */
+export const ProviderTeam: Story = {
+  name: 'Provider Team',
+  args: {
+    mode: 'provider-team',
+    entityContext: {
+      id: 'venue-001',
+      name: 'The Grand Arena',
+      type: 'venue',
+    },
+    onCheckEmail: checkEmail,
+    onInviteUser: async (data) => { await delay(1000); console.log('Invite sent:', data) },
+    onCancel: () => console.log('Cancel'),
+  },
+}
+
+/**
+ * **Company Team** — `/company/{id}/settings/team/add`
+ *
+ * A company admin adds a team member, choosing which venues to grant access to
+ * and setting a role for each.
+ *
+ * Flow:
+ * - Email → Name (new) or User card (existing) → **Venue & company access selection** → Set role per entity → Send Invitation / Add User
+ *
+ * The venues are pre-loaded from the company context (some pre-selected, some not).
+ * Try typing "existing" in the email field to see the existing-user card path.
+ */
+export const CompanyTeam: Story = {
+  name: 'Company Team',
+  args: {
+    mode: 'company-team',
+    entityContext: {
+      id: 'company-001',
+      name: 'Live Events Group',
+      type: 'company',
+    },
+    onCheckEmail: checkEmail,
+    onFetchCompanyVenues: fetchCompanyVenues,
+    onInviteUser: async (data) => { await delay(1000); console.log('Invite sent:', data) },
+    onCancel: () => console.log('Cancel'),
+  },
+}