Overhaul CreateLink Modal with Typed Models & Dynamic Checkboxes

[mahid797]

Remove any old numeric toggles (requiredUserDetailsOption), adopt typed data models (e.g. CreateDocumentLinkPayload), and dynamically render checkboxes for “Name,” “Email,” etc. from visitorFieldsConfig.ts. The user can also set alias, password (if not public), expirationTime, etc.

Detailed Tasks

1. Create or Update CreateDocumentLinkPayload

   • Place it under src/shared/models/links.ts or a similar path.
   • Include fields like alias, isPublic, expirationTime, visitorFields (as an array of strings), etc.

2. Use visitorFieldsConfig.ts

   • In CreateLink.tsx, import the config keys (e.g. visitorFieldKeys) to render checkboxes for each potential field.
   • The final chosen fields become visitorFields: string[] in the request payload.

3. Typed useState

   • Instead of untyped useState({ alias: '', ... }), define an interface, e.g. CreateLinkFormValues. Example:

     interface CreateLinkFormValues {
     	alias: string;
     	isPublic: boolean;
     	password?: string;
     	askForVisitorInfo: boolean;
     	[key: string]: any; // for dynamic checkboxes
     }

   • Then do const [values, setValues] = useState<CreateLinkFormValues>({...}).

4. Expiration Handling

   • If the user picks “days from now” or a date, the final payload should always pass expirationTime as an ISO string or omit it if not set.

5. Remove Numeric Toggles

   • Delete references to requiredUserDetailsOption=1|2. Use the new dynamic checkboxes approach.

6. Validation (Optional)

   • Use existing useValidatedFormData or a similar approach to ensure typed form data, minimal password length, etc.

Acceptance Criteria

• CreateLink.tsx no longer references numeric toggles for visitor info.
• A typed CreateDocumentLinkPayload model is defined under src/shared/models/links.ts.
• The final payload uses an array of strings for visitorFields.
• The UI renders dynamic checkboxes from visitorFieldsConfig.ts, storing the user’s selected fields in state.
• Any errors (e.g., password too short) use typed form validations.
• Code is clean, with ephemeral styled usage removed or replaced by sx props or small shared components.