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

package/src/v2/pages/UserDetails/UserDetailsPage.stories.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { UserDetailsPage } from './UserDetailsPage'
+import type { ExistingUserInfo } from './UserDetailsPage'
+
+// ─── Mock data ────────────────────────────────────────────────────────────────
+
+const mockExistingUser: ExistingUserInfo = {
+  id: 'usr-001',
+  fullName: 'Jane Smith',
+  email: 'jane.smith@example.com',
+  userNumber: 1042,
+  assignments: [
+    { id: 'v-001', name: 'The Grand Arena', type: 'venue', friendlyId: 'V-10203', role: 'Admin' },
+    { id: 'c-001', name: 'Live Events Co.', type: 'company', friendlyId: 'C-7890', role: 'Manager' },
+    { id: 'p-001', name: 'City Promotions', type: 'promoter', friendlyId: 'P-4405', role: 'Staff' },
+  ],
+}
+
+// ─── Meta ─────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof UserDetailsPage> = {
+  title: 'v2/Pages/UserDetails',
+  component: UserDetailsPage,
+  parameters: { layout: 'fullscreen' },
+}
+
+export default meta
+type Story = StoryObj<typeof UserDetailsPage>
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+/**
+ * **New User** — no existing account found for this email.
+ *
+ * Shows the "User Details" form where the admin enters the new user's
+ * first and last name before advancing to role selection.
+ */
+export const NewUser: Story = {
+  name: 'New User',
+  args: {
+    pageTitle: 'Add Team Member',
+    onNext: (firstName, lastName) => console.log('Next:', firstName, lastName),
+    onBack: () => console.log('Back'),
+    onCancel: () => console.log('Cancel'),
+  },
+}
+
+/**
+ * **Existing User Found** — an account already exists for this email.
+ *
+ * Shows the user card (name, email, user number) plus their current
+ * assignments. The admin can continue to assign a role to this user.
+ */
+export const ExistingUserFound: Story = {
+  name: 'Existing User Found',
+  args: {
+    pageTitle: 'Add Team Member',
+    existingUser: mockExistingUser,
+    onNext: (firstName, lastName) => console.log('Continue with:', firstName, lastName),
+    onBack: () => console.log('Back'),
+    onCancel: () => console.log('Cancel'),
+  },
+}
+
+/**
+ * **Existing User — No Assignments** — account exists but has no prior assignments.
+ *
+ * The assignment section is hidden when there are no prior assignments.
+ */
+export const ExistingUserNoAssignments: Story = {
+  name: 'Existing User — No Assignments',
+  args: {
+    pageTitle: 'Add Team Member',
+    existingUser: {
+      id: 'usr-002',
+      fullName: 'Tom Baker',
+      email: 'tom.baker@example.com',
+    },
+    onNext: (firstName, lastName) => console.log('Continue with:', firstName, lastName),
+    onBack: () => console.log('Back'),
+    onCancel: () => console.log('Cancel'),
+  },
+}

package/src/v2/pages/UserDetails/UserDetailsPage.tsx

@@ -0,0 +1,210 @@
+import React, { useState } from 'react'
+import { Button } from '../../components/Button'
+import { FormField } from '../../components/FormField'
+import { UserAvatar } from '../../components/UserAvatar'
+import { ArrowLeftIcon } from '../../icons'
+import './UserDetailsPage.scss'
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface UserAssignmentItem {
+  id: string
+  name: string
+  type: 'company' | 'venue' | 'promoter'
+  role?: string
+  friendlyId: string
+}
+
+export interface ExistingUserInfo {
+  id: string
+  fullName: string
+  email: string
+  userNumber?: number
+  assignments?: UserAssignmentItem[]
+}
+
+export interface UserDetailsPageProps {
+  /** Page-level title shown in the sticky header */
+  pageTitle?: string
+  /**
+   * When provided the page shows the "Existing User Found" card view.
+   * When absent the page shows the "User Details" name-entry form.
+   */
+  existingUser?: ExistingUserInfo
+  /** Pre-fill first name (only used in the new-user form) */
+  defaultFirstName?: string
+  /** Pre-fill last name (only used in the new-user form) */
+  defaultLastName?: string
+  /** Called with (firstName, lastName) — for new users these are the form values; for existing users they come from the existing user record */
+  onNext: (firstName: string, lastName: string) => void
+  onBack?: () => void
+  onCancel?: () => void
+  isLoading?: boolean
+  error?: string
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function getInitials(fullName: string): string {
+  return fullName
+    .split(' ')
+    .map((n) => n[0] ?? '')
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export const UserDetailsPage: React.FC<UserDetailsPageProps> = ({
+  pageTitle = 'Add User',
+  existingUser,
+  defaultFirstName = '',
+  defaultLastName = '',
+  onNext,
+  onBack,
+  onCancel,
+  isLoading = false,
+  error,
+}) => {
+  const [firstName, setFirstName] = useState(defaultFirstName)
+  const [lastName, setLastName] = useState(defaultLastName)
+  const [fieldErrors, setFieldErrors] = useState<{ firstName?: string; lastName?: string }>({})
+
+  const handleNext = () => {
+    if (existingUser) {
+      const parts = existingUser.fullName.trim().split(' ')
+      onNext(parts[0] ?? '', parts.slice(1).join(' '))
+      return
+    }
+
+    const errs: { firstName?: string; lastName?: string } = {}
+    if (!firstName.trim()) errs.firstName = 'First name is required'
+    if (!lastName.trim()) errs.lastName = 'Last name is required'
+
+    if (Object.keys(errs).length > 0) {
+      setFieldErrors(errs)
+      return
+    }
+
+    setFieldErrors({})
+    onNext(firstName.trim(), lastName.trim())
+  }
+
+  return (
+    <div className="user-details-page">
+      {/* ── Header ── */}
+      <header className="user-details-page__header">
+        <h1 className="user-details-page__title">{pageTitle}</h1>
+        {onCancel && (
+          <Button variant="secondary-soft" onClick={onCancel}>
+            Cancel
+          </Button>
+        )}
+      </header>
+
+      {/* ── Body ── */}
+      <div className="user-details-page__body">
+        {onBack && (
+          <button className="user-details-page__back" type="button" onClick={onBack}>
+            <ArrowLeftIcon />
+            Back
+          </button>
+        )}
+
+        {error && (
+          <div className="user-details-page__error-banner" role="alert">
+            {error}
+          </div>
+        )}
+
+        {existingUser ? (
+          /* ── Existing user found ── */
+          <div className="user-details-page__existing">
+            <div className="user-details-page__step-header">
+              <h2 className="user-details-page__step-title">Existing User Found</h2>
+              <p className="user-details-page__step-desc">
+                A user with this email already exists in the system.
+              </p>
+            </div>
+
+            <div className="user-details-page__user-card">
+              <UserAvatar initials={getInitials(existingUser.fullName)} size="lg" />
+              <div className="user-details-page__user-info">
+                <span className="user-details-page__user-name">{existingUser.fullName}</span>
+                <span className="user-details-page__user-email">{existingUser.email}</span>
+                {existingUser.userNumber != null && (
+                  <span className="user-details-page__user-number">#{existingUser.userNumber}</span>
+                )}
+              </div>
+            </div>
+
+            {existingUser.assignments && existingUser.assignments.length > 0 && (
+              <div className="user-details-page__assignments">
+                <p className="user-details-page__assignments-label">Current assignments</p>
+                <ul className="user-details-page__assignment-list">
+                  {existingUser.assignments.map((a) => (
+                    <li key={a.id} className="user-details-page__assignment-item">
+                      <span
+                        className={`user-details-page__entity-badge user-details-page__entity-badge--${a.type}`}
+                      >
+                        {a.type}
+                      </span>
+                      <span className="user-details-page__assignment-name">{a.name}</span>
+                      <span className="user-details-page__assignment-id">{a.friendlyId}</span>
+                      {a.role && (
+                        <span className="user-details-page__assignment-role">{a.role}</span>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            <Button variant="primary" onClick={handleNext} isLoading={isLoading} disabled={isLoading}>
+              Continue
+            </Button>
+          </div>
+        ) : (
+          /* ── New user — name form ── */
+          <div className="user-details-page__form">
+            <div className="user-details-page__step-header">
+              <h2 className="user-details-page__step-title">User Details</h2>
+            </div>
+
+            <div className="user-details-page__fields">
+              <FormField
+                label="First Name"
+                value={firstName}
+                onChange={(e) => {
+                  setFirstName(e.target.value)
+                  if (fieldErrors.firstName) {
+                    setFieldErrors((prev) => ({ ...prev, firstName: undefined }))
+                  }
+                }}
+                error={fieldErrors.firstName}
+                disabled={isLoading}
+              />
+              <FormField
+                label="Last Name"
+                value={lastName}
+                onChange={(e) => {
+                  setLastName(e.target.value)
+                  if (fieldErrors.lastName) {
+                    setFieldErrors((prev) => ({ ...prev, lastName: undefined }))
+                  }
+                }}
+                error={fieldErrors.lastName}
+                disabled={isLoading}
+              />
+            </div>
+
+            <Button variant="primary" onClick={handleNext} isLoading={isLoading} disabled={isLoading}>
+              Next
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/v2/pages/UserDetails/index.ts

@@ -0,0 +1,2 @@
+export { UserDetailsPage } from './UserDetailsPage'
+export type { UserDetailsPageProps, ExistingUserInfo, UserAssignmentItem } from './UserDetailsPage'

package/src/v2/pages/auth/AuthLayout/AuthLayout.scss

@@ -7,7 +7,8 @@
   align-items: center;
   justify-content: flex-start;
   background-color: var(--surface-secondary);
-  padding: 0 16px 40px;
+  padding: 0 16px;
+  padding-bottom: 0;
 
   &__alert {
     width: 846px;
@@ -54,6 +55,11 @@
     justify-content: space-between;
     padding: 16px;
     border-bottom: 1px solid var(--border-primary);
+
+    .new-badge {
+      padding: 6px 10px;
+      font-size: 11px;
+    }
   }
 
   &__body {
@@ -111,12 +117,8 @@
     font-weight: 400;
     line-height: 1;
     color: var(--label-secondary);
-    margin: 8px 0 0;
+    margin: 16px 0 0;
     padding: 0;
-
-    @media (max-width: 768px) {
-      margin-top: 4px;
-    }
   }
 
   &__form-area {

package/src/v2/pages/auth/CreatePassword/CreatePasswordPage.tsx

@@ -26,7 +26,7 @@ export const CreatePasswordPage: React.FC<CreatePasswordPageProps> = ({
   error,
 }) => {
   const { t } = useTranslation(['Validation', 'User'])
-  const { register, handleSubmit, watch, formState: { errors, touchedFields } } = useForm<FormValues>({ mode: 'onChange' })
+  const { register, handleSubmit, watch, formState: { errors } } = useForm<FormValues>({ mode: 'onChange' })
 
   const password = watch('password', '')
   const confirmPassword = watch('confirmPassword', '')
@@ -101,7 +101,6 @@ export const CreatePasswordPage: React.FC<CreatePasswordPageProps> = ({
             type="password"
             disabled={isLoading}
             error={errors.password?.message}
-            success={!!touchedFields.password && !errors.password}
             {...register('password', {
               required: t('Validation:fieldRequired', { attribute: t('User:password') }) as string,
               minLength: {
@@ -135,7 +134,6 @@ export const CreatePasswordPage: React.FC<CreatePasswordPageProps> = ({
             type="password"
             disabled={isLoading}
             error={errors.confirmPassword?.message}
-            success={!!touchedFields.confirmPassword && !errors.confirmPassword}
             {...register('confirmPassword', {
               required: t('Validation:fieldRequired', { attribute: t('User:confirmPassword') }) as string,
               validate: (value) =>

package/src/v2/pages/auth/Login/LoginPage.tsx

@@ -29,7 +29,7 @@ export const LoginPage: React.FC<LoginPageProps> = ({
   version,
 }) => {
   const { t } = useTranslation(['Validation', 'User'])
-  const { register, handleSubmit, formState: { errors, touchedFields } } = useForm<FormValues>({ mode: 'onChange' })
+  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({ mode: 'onChange' })
 
   const onFormSubmit = async (data: FormValues) => {
     await onSubmit(data.email, data.password)
@@ -51,7 +51,6 @@ export const LoginPage: React.FC<LoginPageProps> = ({
           type="email"
           disabled={isLoading}
           error={errors.email?.message}
-          success={!!touchedFields.email && !errors.email}
           {...register('email', {
             required: t('Validation:fieldRequired', { attribute: t('User:email') }) as string,
             pattern: {
@@ -67,7 +66,6 @@ export const LoginPage: React.FC<LoginPageProps> = ({
             type="password"
             disabled={isLoading}
             error={errors.password?.message}
-            success={!!touchedFields.password && !errors.password}
             {...register('password', {
               required: t('Validation:fieldRequired', { attribute: t('User:password') }) as string,
             })}

package/src/v2/pages/auth/ResetPassword/ResetPasswordPage.scss

@@ -48,6 +48,8 @@
     font-weight: inherit;
 
     &:hover {
+      color: var(--label-action);
+      text-decoration: underline;
       opacity: 0.8;
     }
   }

package/src/v2/pages/auth/ResetPassword/ResetPasswordPage.tsx

@@ -30,7 +30,7 @@ export const ResetPasswordPage: React.FC<ResetPasswordPageProps> = ({
   version,
 }) => {
   const { t } = useTranslation(['Validation', 'User'])
-  const { register, handleSubmit, formState: { errors, touchedFields } } = useForm<FormValues>({ mode: 'onChange' })
+  const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({ mode: 'onChange' })
 
   const onFormSubmit = async (data: FormValues) => {
     await onSubmit(data.email)
@@ -57,7 +57,6 @@ export const ResetPasswordPage: React.FC<ResetPasswordPageProps> = ({
           type="email"
           disabled={isLoading}
           error={errors.email?.message}
-          success={!!touchedFields.email && !errors.email}
           {...register('email', {
             required: t('Validation:fieldRequired', { attribute: t('User:email') }) as string,
             pattern: {

package/src/v2/styles/components/Button.scss

@@ -47,6 +47,33 @@
     }
   }
 
+  // Neutral Outline (border-primary border, label-primary text)
+  &--outline {
+    border: 1px solid var(--border-primary, #e8e9ef);
+    background-color: var(--surface-primary, #ffffff);
+    color: var(--label-primary, #121e52);
+    font-weight: 500;
+    min-height: 40px;
+    padding: 8px 16px 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    line-height: 20px;
+
+    svg {
+      fill: currentColor;
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      background-color: var(--surface-secondary, #f8f8fa);
+      border-color: var(--border-secondary, #d0d3e3);
+    }
+
+    &:active {
+      background-color: var(--surface-tertiary, #f0f0f5);
+    }
+  }
+
   // Primary - Outline
   &--primary-outline {
     border: 2px solid var(--fills-main-fill-action, #6200ee);