Feat/finish helper enrollment (#967)

Author: wp99cp

src/app/(payload)/admin/importMap.js

@@ -3,7 +3,7 @@ import { z } from 'zod';
 
 export const environmentVariables = createEnv({
   /*
-   * Serverside Environment variables, not available on the client.
+   * Server-side environment variables, not available on the client.
    * Will throw if you access these variables on the client.
    */
   server: {
@@ -20,7 +20,6 @@ export const environmentVariables = createEnv({
     HITOBITO_BASE_URL: z.string().url(),
     HITOBITO_FORWARD_URL: z.string().url(),
     API_TOKEN: z.string().default(''),
-    BROWSER_COOKIE: z.string().default(''),
     HELPER_GROUP: z.string().optional(),
     EVENT_ID: z.string().optional(),
     GROUPS_WITH_API_ACCESS: z.string().transform((value) =>

src/config/environment-variables.ts

@@ -221,6 +221,8 @@ async function refreshAccessToken(token: JWT): Promise<JWT> {
         email: profile.email,
         name: profile.first_name + ' ' + profile.last_name,
         nickname: profile.nickname,
+        firstName: profile.first_name,
+        lastName: profile.last_name,
       };
     } else {
       console.error('Failed to refetch user profile after token refresh');
@@ -303,6 +305,8 @@ export const authOptions: NextAuthConfig = {
         cevi_db_uuid: token.cevi_db_uuid,
         group_ids: token.group_ids,
         nickname: token.nickname,
+        firstName: token.firstName,
+        lastName: token.lastName,
       };
       return session;
     },
@@ -333,6 +337,8 @@ export const authOptions: NextAuthConfig = {
           email: profile.email,
           name: profile.first_name + ' ' + profile.last_name,
           nickname: profile.nickname,
+          firstName: profile.first_name,
+          lastName: profile.last_name,
         };
       }
 

src/features/next-auth/utils/next-auth-config.ts

@@ -47,18 +47,9 @@ export const getJobs = async (
         const currentSubmissionsCount = await payload.count({
           collection: 'form-submissions',
           where: {
-            or: [
-              {
-                'helper-job': {
-                  equals: job.id,
-                },
-              },
-              {
-                'helper-jobs': {
-                  contains: job.id,
-                },
-              },
-            ],
+            'helper-jobs': {
+              contains: job.id,
+            },
           },
         });
         availableQuota = Math.max(0, job.maxQuota - currentSubmissionsCount.totalDocs);

src/features/payload-cms/components/form/actions/get-jobs.ts

@@ -6,21 +6,25 @@ import {
   loggedInAsText,
   loginWithCeviDatabaseText,
 } from '@/features/payload-cms/components/form/static-form-texts';
+import { getFormStorageKey } from '@/features/payload-cms/components/form/utils/get-form-storage-key';
 import type { StaticTranslationString } from '@/types/types';
 import { i18nConfig, type Locale } from '@/types/types';
 import { cn } from '@/utils/tailwindcss-override';
 import { signIn, signOut, useSession } from 'next-auth/react';
 import { useCurrentLocale } from 'next-i18n-router/client';
 import React, { useEffect } from 'react';
+import type { FieldError, FieldErrorsImpl, FieldValues, Merge } from 'react-hook-form';
 import { useFormContext } from 'react-hook-form';
 
 interface CeviDatabaseLoginProperties {
   name: string;
   label?: string;
   saveField?: 'name' | 'uuid' | 'email' | 'nickname';
+  fieldMapping?: { jwtField: string; formField: string }[];
   formId?: string;
   required?: boolean;
   currentStepIndex?: number;
+  error?: FieldError | Merge<FieldError, FieldErrorsImpl<FieldValues>>;
 }
 
 const loginRequiredMessage: StaticTranslationString = {
@@ -34,25 +38,22 @@ export const CeviDatabaseLogin: React.FC<CeviDatabaseLoginProperties> = ({
   label,
   required,
   saveField,
+  fieldMapping,
   formId,
   currentStepIndex,
+  error,
 }) => {
-  const {
-    register,
-    setValue,
-    getValues,
-    formState: { errors },
-  } = useFormContext();
+  const { register, setValue, getValues } = useFormContext();
   const { data: session } = useSession();
   const currentLocale = useCurrentLocale(i18nConfig);
   const locale = (currentLocale ?? 'en') as Locale;
 
   const handleLogin = (): void => {
     const values = getValues();
     if (typeof formId === 'string' && formId !== '') {
-      sessionStorage.setItem(`form-state-${formId}`, JSON.stringify(values));
+      sessionStorage.setItem(getFormStorageKey(formId, 'state'), JSON.stringify(values));
       if (currentStepIndex !== undefined) {
-        sessionStorage.setItem(`form_step_${formId}`, String(currentStepIndex));
+        sessionStorage.setItem(getFormStorageKey(formId, 'step'), String(currentStepIndex));
       }
     }
     // Inform browser to replace the current history entry so the back button skips the login trigger
@@ -71,9 +72,9 @@ export const CeviDatabaseLogin: React.FC<CeviDatabaseLoginProperties> = ({
   const handleChangeUser = (): void => {
     const values = getValues();
     if (typeof formId === 'string' && formId !== '') {
-      sessionStorage.setItem(`form-state-${formId}`, JSON.stringify(values));
+      sessionStorage.setItem(getFormStorageKey(formId, 'state'), JSON.stringify(values));
       if (currentStepIndex !== undefined) {
-        sessionStorage.setItem(`form_step_${formId}`, String(currentStepIndex));
+        sessionStorage.setItem(getFormStorageKey(formId, 'step'), String(currentStepIndex));
       }
     }
     const callbackUrl = typeof globalThis === 'undefined' ? undefined : globalThis.location.href;
@@ -86,6 +87,8 @@ export const CeviDatabaseLogin: React.FC<CeviDatabaseLoginProperties> = ({
     });
   };
 
+  const fieldMappingString = fieldMapping ? JSON.stringify(fieldMapping) : undefined;
+
   useEffect(() => {
     if (session?.user) {
       let valueToSave: string | number | undefined | null;
@@ -108,10 +111,78 @@ export const CeviDatabaseLogin: React.FC<CeviDatabaseLoginProperties> = ({
         }
       }
       setValue(name, valueToSave ?? '', { shouldValidate: true });
+
+      const parsedFieldMapping = fieldMappingString
+        ? (JSON.parse(fieldMappingString) as { jwtField: string; formField: string }[])
+        : undefined;
+
+      if (parsedFieldMapping && parsedFieldMapping.length > 0) {
+        let didPrefill = false;
+        for (const { jwtField, formField } of parsedFieldMapping) {
+          let jwtValue: string | number | null | undefined;
+          switch (jwtField) {
+            case 'name': {
+              jwtValue = session.user.name;
+              break;
+            }
+            case 'firstName': {
+              jwtValue = session.user.firstName;
+              break;
+            }
+            case 'lastName': {
+              jwtValue = session.user.lastName;
+              break;
+            }
+            case 'email': {
+              jwtValue = session.user.email;
+              break;
+            }
+            case 'nickname': {
+              jwtValue = session.user.nickname;
+              break;
+            }
+            case 'uuid': {
+              jwtValue = session.user.uuid;
+              break;
+            }
+            case 'cevi_db_uuid': {
+              jwtValue = session.user.cevi_db_uuid;
+              break;
+            }
+            default: {
+              break;
+            }
+          }
+          const jwtValueString =
+            jwtValue !== undefined && jwtValue !== null ? String(jwtValue).trim() : '';
+
+          if (jwtValueString.length > 0) {
+            const currentValue = getValues(formField) as unknown;
+            let currentValueString = '';
+            if (typeof currentValue === 'string' || typeof currentValue === 'number') {
+              currentValueString = String(currentValue).trim();
+            } else if (currentValue !== undefined && currentValue !== null) {
+              currentValueString = 'has_value';
+            }
+
+            if (currentValueString.length === 0) {
+              setValue(formField, String(jwtValue), { shouldValidate: true });
+              didPrefill = true;
+            }
+          }
+        }
+
+        if (didPrefill && typeof formId === 'string' && currentStepIndex !== undefined) {
+          sessionStorage.setItem(
+            getFormStorageKey(formId, 'prefill'),
+            String(currentStepIndex + 1),
+          );
+        }
+      }
     }
-  }, [session, saveField, setValue, name]);
+  }, [session, saveField, setValue, name, fieldMappingString, getValues, formId, currentStepIndex]);
 
-  const errorMessage = errors[name]?.message as string | undefined;
+  const errorMessage = error ? (error as FieldError).message : undefined;
 
   const nickname = session?.user.nickname;
   const hasNickname = typeof nickname === 'string' && nickname.length > 0;

src/features/payload-cms/components/form/cevi-db-login.tsx

@@ -7,22 +7,24 @@ import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical
 import { useCurrentLocale } from 'next-i18n-router/client';
 import type { CheckboxField } from 'payload';
 import type React from 'react';
-import type { FieldErrorsImpl, FieldValues, UseFormRegister } from 'react-hook-form';
+import type {
+  FieldError,
+  FieldErrorsImpl,
+  FieldValues,
+  Merge,
+  UseFormRegister,
+} from 'react-hook-form';
 
 export const Checkbox: React.FC<
   {
-    errors: Partial<
-      FieldErrorsImpl<{
-        [x: string]: never;
-      }>
-    >;
+    error?: FieldError | Merge<FieldError, FieldErrorsImpl<FieldValues>>;
     registerAction: UseFormRegister<string & FieldValues>;
     label: SerializedEditorState;
   } & CheckboxField
-> = ({ name, label, registerAction, required: requiredFromProperties, errors }) => {
+> = ({ name, label, registerAction, required: requiredFromProperties, error }) => {
   // set default values
   requiredFromProperties ??= false;
-  const hasError = errors[name];
+  const hasError = error !== undefined;
   const locale = useCurrentLocale(i18nConfig);
 
   return (
@@ -38,14 +40,16 @@ export const Checkbox: React.FC<
         />
 
         <label
-          className="ml-2 font-['Inter'] text-sm font-medium text-balance text-gray-500 hover:text-gray-900 [&_div]:inline [&_p]:inline"
+          className="ml-2 min-w-0 flex-1 font-['Inter'] text-sm font-medium text-balance break-words text-gray-500 hover:text-gray-900 [&_div]:inline [&_p]:inline"
           htmlFor={name}
         >
           <LexicalRichTextSection richTextSection={label} locale={locale as Locale} />
           {requiredFromProperties && <Required />}
         </label>
       </div>
-      {hasError && <p className="mt-1 text-xs text-red-600">{hasError.message as string}</p>}
+      {hasError && (
+        <p className="mt-1 text-xs text-red-600">{(error as { message?: string }).message}</p>
+      )}
     </div>
   );
 };

src/features/payload-cms/components/form/checkbox.tsx

@@ -7,7 +7,7 @@ import type {
   JobSelectionBlock,
 } from '@/features/payload-cms/components/form/types';
 import React, { useEffect } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useFormContext, useFormState, useWatch } from 'react-hook-form';
 
 interface FormFieldRendererProperties {
   section: FormSection;
@@ -36,7 +36,7 @@ const ConditionedField: React.FC<{
   useEffect(() => {
     if (!isVisible) {
       for (const f of block.fields) {
-        if ('name' in f && f.name) {
+        if ('name' in f && typeof f.name === 'string' && f.name !== '') {
           resetField(f.name);
         }
       }
@@ -49,7 +49,11 @@ const ConditionedField: React.FC<{
     <>
       {block.fields.map((field, index) => (
         <SingleField
-          key={('id' in field && typeof field.id === 'string' ? field.id : undefined) || index}
+          key={
+            ('id' in field && typeof field.id === 'string' && field.id !== ''
+              ? field.id
+              : undefined) ?? index
+          }
           field={field}
           currentStepIndex={currentStepIndex}
           formId={formId}
@@ -67,16 +71,15 @@ const SingleField: React.FC<{
   renderMode: 'all' | 'sidebar' | 'main';
 }> = ({ field, currentStepIndex, formId, renderMode }) => {
   const Component = fieldComponents[field.blockType];
-  const {
-    register,
-    control,
-    formState: { errors },
-  } = useFormContext();
+  const { register, control } = useFormContext();
 
   const fieldName = 'name' in field && typeof field.name === 'string' ? field.name : undefined;
 
-  // Force React Hook Form to track the error for this specific field by reading the proxy
-  void (fieldName ? Boolean(errors[fieldName]) : false);
+  const { errors } = useFormState({
+    name: fieldName ?? '',
+  });
+
+  const fieldError = fieldName !== undefined && fieldName !== '' ? errors[fieldName] : undefined;
 
   if (!Component) {
     console.error(`Field type ${field.blockType} is not supported`);
@@ -96,7 +99,7 @@ const SingleField: React.FC<{
       {...field}
       registerAction={register}
       control={control}
-      errors={errors}
+      error={fieldError}
       required={field.required}
       currentStepIndex={currentStepIndex}
       formId={formId}
@@ -113,15 +116,19 @@ export const FormFieldRenderer: React.FC<FormFieldRendererProperties> = ({
 }) => {
   return (
     <div className="space-y-4">
-      {renderMode !== 'main' && section.sectionTitle && (
-        <SubheadingH3 className="mt-0">{section.sectionTitle}</SubheadingH3>
-      )}
+      {renderMode !== 'main' &&
+        typeof section.sectionTitle === 'string' &&
+        section.sectionTitle !== '' && (
+          <SubheadingH3 className="mt-0">{section.sectionTitle}</SubheadingH3>
+        )}
 
       {section.fields.map((field, index) => {
         if (field.blockType === 'conditionedBlock') {
           return (
             <ConditionedField
-              key={field.id || index}
+              key={
+                (typeof field.id === 'string' && field.id !== '' ? field.id : undefined) ?? index
+              }
               block={field}
               currentStepIndex={currentStepIndex}
               formId={formId}
@@ -131,7 +138,11 @@ export const FormFieldRenderer: React.FC<FormFieldRendererProperties> = ({
         }
         return (
           <SingleField
-            key={('id' in field && typeof field.id === 'string' ? field.id : undefined) || index}
+            key={
+              ('id' in field && typeof field.id === 'string' && field.id !== ''
+                ? field.id
+                : undefined) ?? index
+            }
             field={field}
             currentStepIndex={currentStepIndex}
             formId={formId}