Merge branch 'next-streamline' into 704-add-events-page

packages/api/src/fetchOption.ts

@@ -1,9 +1,9 @@
-import { ApiRequest, GetQuestionOptionResponse } from './types';
+import { ApiRequest, GetOptionResponse } from './types';
 
 export async function fetchOption({
   serverUrl,
   optionId,
-}: ApiRequest<{ optionId: string }>): Promise<GetQuestionOptionResponse | null> {
+}: ApiRequest<{ optionId: string }>): Promise<GetOptionResponse | null> {
   try {
     const response = await fetch(`${serverUrl}/api/options/${optionId}`, {
       credentials: 'include',
@@ -15,7 +15,7 @@ export async function fetchOption({
       throw new Error(`HTTP Error!, Status: ${response.status}`);
     }
 
-    const option = (await response.json()) as { data: GetQuestionOptionResponse };
+    const option = (await response.json()) as { data: GetOptionResponse };
     return option.data;
   } catch (error) {
     console.error('Error fetching option:', error);

packages/api/src/postRegistration.ts

@@ -5,7 +5,7 @@ export async function postRegistration({
   serverUrl,
 }: ApiRequest<{
   body: PostRegistrationRequest;
-}>): Promise<PostRegistrationResponse | null> {
+}>): Promise<PostRegistrationResponse | { errors: string[] } | null> {
   try {
     const response = await fetch(`${serverUrl}/api/registrations`, {
       method: 'POST',
@@ -17,6 +17,10 @@ export async function postRegistration({
     });
 
     if (!response.ok) {
+      if (response.status < 500) {
+        const errors = (await response.json()) as { errors: string[] };
+        return errors;
+      }
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
 

packages/api/src/putRegistration.ts

@@ -7,7 +7,7 @@ export async function putRegistration({
 }: ApiRequest<{
   registrationId: string;
   body: PutRegistrationRequest;
-}>): Promise<PutRegistrationResponse | null> {
+}>): Promise<PutRegistrationResponse | { errors: string[] } | null> {
   try {
     const response = await fetch(`${serverUrl}/api/registrations/${registrationId}`, {
       method: 'PUT',
@@ -19,6 +19,10 @@ export async function putRegistration({
     });
 
     if (!response.ok) {
+      if (response.status < 500) {
+        const errors = (await response.json()) as { errors: string[] };
+        return errors;
+      }
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
 

packages/api/src/types/Events.ts

@@ -7,6 +7,7 @@ export type GetEventResponse = {
   createdAt: string;
   updatedAt: string;
   description: string | null;
+  fields: unknown;
   status: 'OPEN' | 'CLOSED' | 'UPCOMING' | null;
 };
 

packages/api/src/types/Options.ts

@@ -1,4 +1,4 @@
-export type QuestionOption = {
+export type Option = {
   id: string;
   createdAt: string;
   updatedAt: string;
@@ -7,11 +7,12 @@ export type QuestionOption = {
   userId?: string;
   optionSubTitle?: string;
   accepted: boolean;
+  data: unknown;
   fundingRequest: string;
 };
 
-export type GetQuestionOptionRequest = {
+export type GetOptionRequest = {
   optionId: string;
 };
 
-export type GetQuestionOptionResponse = QuestionOption;
+export type GetOptionResponse = Option;

packages/api/src/types/Questions.ts

@@ -25,4 +25,5 @@ export type Question = {
   description: string | null;
   cycleId: string;
   title: string;
+  fields: unknown;
 };

packages/api/src/types/RegistrationData.ts

@@ -13,33 +13,32 @@ export type PostRegistrationRequest = {
   eventId: string;
   groupId: string | null;
   status: RegistrationStatus;
-  registrationData: {
-    registrationFieldId: string;
-    value: string;
-  }[];
+  data: Record<
+    string,
+    {
+      value: string | number | boolean | string[] | null;
+      type: 'TEXT' | 'TEXTAREA' | 'SELECT' | 'CHECKBOX' | 'MULTI_SELECT' | 'NUMBER';
+      fieldId: string;
+    }
+  >;
 };
 
 export type PutRegistrationRequest = {
   eventId: string;
   groupId: string | null;
   status: RegistrationStatus;
-  registrationData: {
-    registrationFieldId: string;
-    value: string;
-  }[];
+  data: Record<
+    string,
+    {
+      value: string | number | boolean | string[] | null;
+      type: 'TEXT' | 'TEXTAREA' | 'SELECT' | 'CHECKBOX' | 'MULTI_SELECT' | 'NUMBER';
+      fieldId: string;
+    }
+  >;
 };
 
 export type PostRegistrationResponse = {
-  registrationData:
-    | {
-        id: string;
-        createdAt: string;
-        updatedAt: string;
-        registrationId: string;
-        registrationFieldId: string;
-        value: string;
-      }[]
-    | null;
+  data: unknown | null;
   id: string;
   createdAt: string;
   updatedAt: string;
@@ -49,16 +48,7 @@ export type PostRegistrationResponse = {
 };
 
 export type PutRegistrationResponse = {
-  registrationData:
-    | {
-        id: string;
-        createdAt: string;
-        updatedAt: string;
-        registrationId: string;
-        registrationFieldId: string;
-        value: string;
-      }[]
-    | null;
+  registrationData: unknown | null;
   id: string;
   createdAt: string;
   updatedAt: string;

packages/api/src/types/Registrations.ts

@@ -7,6 +7,7 @@ export type GetRegistrationResponseType = {
   groupId: string | null;
   eventId?: string | undefined;
   createdAt: string;
+  data: unknown;
   updatedAt: string;
   event?: {
     id: string;

packages/berlin/package.json

@@ -63,4 +63,4 @@
   "engines": {
     "node": "^20"
   }
-}
+}

packages/berlin/src/_components/ui/command.tsx

@@ -15,7 +15,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
@@ -85,7 +85,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
       className,
     )}
     {...props}
@@ -100,7 +100,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 h-px bg-border', className)}
+    className={cn('bg-border -mx-1 h-px', className)}
     {...props}
   />
 ));
@@ -113,7 +113,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}
@@ -125,7 +125,7 @@ CommandItem.displayName = CommandPrimitive.Item.displayName;
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
       {...props}
     />
   );

packages/berlin/src/_components/ui/dialog.tsx

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
       className,
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <Cross2Icon className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -84,7 +84,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn('text-muted-foreground text-sm', className)}
     {...props}
   />
 ));

packages/berlin/src/_components/ui/popover.tsx

@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
         className,
       )}
       {...props}

packages/berlin/src/_components/ui/separator.tsx

@@ -14,7 +14,7 @@ const Separator = React.forwardRef<
     decorative={decorative}
     orientation={orientation}
     className={cn(
-      'shrink-0 bg-border',
+      'bg-border shrink-0',
       orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
       className,
     )}

packages/berlin/src/components/form/AccountForm.tsx

@@ -15,7 +15,7 @@ import { Subtitle } from '../typography/Subtitle.styled';
 import { FlexRowToColumn } from '../containers/FlexRowToColumn.styled';
 import { FormTextInput } from '../form-input';
 import { z } from 'zod';
-import { returnZodError } from '../../utils/validation';
+import { returnZodError } from '../../utils/zod-error-handler';
 
 type InitialUser = {
   username: string;

packages/berlin/src/components/header/Header.tsx

@@ -143,8 +143,10 @@ const UserMenu = () => {
           <User />
         </Icon>
       </NavigationMenuTrigger>
-      <NavigationMenuContent className="flex flex-col gap-4 p-4">
-        <UserMenuLinks />
+      <NavigationMenuContent>
+        <NavigationMenuList className="flex flex-col gap-4 p-4">
+          <UserMenuLinks />
+        </NavigationMenuList>
       </NavigationMenuContent>
     </NavigationMenuItem>
   );

packages/berlin/src/pages/Account.tsx

@@ -19,10 +19,13 @@ import { Body } from '../components/typography/Body.styled';
 import { useQueries, useQuery } from '@tanstack/react-query';
 import Link from '../components/link';
 import { Underline } from '../components/typography/Underline.styled';
+import { useNavigate } from 'react-router-dom';
 
 function Account() {
-  const { user, isLoading: userIsLoading } = useUser();
-  const [tab, setTab] = useState<'view' | 'edit'>('view');
+  const { user: initialUser, isLoading: userIsLoading } = useUser();
+  const isFirstLogin = !initialUser?.username;
+  const [tab, setTab] = useState<'view' | 'edit'>(isFirstLogin ? 'edit' : 'view');
+  const navigate = useNavigate();
 
   if (userIsLoading) {
     return <Title>Loading...</Title>;
@@ -31,20 +34,24 @@ function Account() {
   const tabs = {
     edit: (
       <AccountForm
-        user={user}
+        user={initialUser}
         initialUser={{
-          email: user?.email ?? '',
-          firstName: user?.firstName ?? '',
-          lastName: user?.lastName ?? '',
-          username: user?.username ?? '',
+          email: initialUser?.email ?? '',
+          firstName: initialUser?.firstName ?? '',
+          lastName: initialUser?.lastName ?? '',
+          username: initialUser?.username ?? '',
         }}
-        title="Edit Account"
+        title={isFirstLogin ? 'Complete Account' : 'Edit Account'}
         afterSubmit={() => {
+          if (isFirstLogin) {
+            navigate('/events');
+          }
+
           setTab('view');
         }}
       />
     ),
-    view: <AccountHub user={user} />,
+    view: <AccountHub user={initialUser} />,
   };
 
   return (