VisitorInfoModal, Inline PDF, & Analytics

[mahid797]

Goal

Implement dynamic forms from minimal visitorFields (keys only), an inline PDF viewer for application/pdf, and a consistent analytics approach to track downloads/views.

Detailed Guidelines

1. VisitorInfoModal

   • Reads visitorFields from linkData. For each key (e.g., "name","email"), look up visitorFieldsConfig to figure out labels/types.
   • If passwordProtected, show a password field.
   • On submit, calls useVisitorSubmission with { visitorData, password? }. The server logs them in DocumentLinkVisitor.visitorData.

2. FileDisplay & PDFViewer

   • If fileType === 'application/pdf', show a “View” button that toggles <PDFViewer />.
   • Provide a “Download” button that calls an analytics endpoint before or after fetching the file, e.g. POST /api/public_links/[linkId]/events?type=DOWNLOAD.
   • Hide or override default pdf.js download controls in PDFViewer.tsx, ensuring all downloads go through our tracked button.

3. Analytics

   • As the Analytics API is currently under development, consider calling placeholders like trackDownload(linkId) or trackView(linkId) from hooks (useDocumentAccess) or components (FileDisplay).
   • The final server approach for storing analytics can be implemented later, but placeholders ensure the logic is consistent.

4. Styling:

   • Remove ephemeral styled wrappers where possible, using inline sx or small local components.
   • Use global components/hooks (e.g., <LoadingButton> or <FormInput>) if suitable.
   • Use <FormInput> or other global components for generating each field from visitorFieldsConfig. Tweak <FormInput> if needed to make it work.

Example (generating multiple fields):

const selectedFields = linkData.visitorFields; // e.g. ["name","email"]

return (
	<>
		{selectedFields.map((fieldKey) => {
			const cfg = visitorFieldsConfig[fieldKey];
			return (
				<FormInput
					key={fieldKey}
					label={cfg.label}
					type={cfg.type}
					// ...
				/>
			);
		})}
	</>
);

Tasks

1. VisitorInfoModal:
   • Dynamically build fields from visitorFields.
   • Add password input if passwordProtected.
   • On success, pass file data (e.g., signedUrl) back to AccessPage.
2. FileDisplay:
   • Show “View” if PDF → <PDFViewer />.
   • On “Download” click, optionally call an analytics hook/endpoint before delivering the file.
3. PDFViewer (global or local):
   • Hide pdf.js default download so the user must click the tracked “Download” button.
4. Analytics & Event Tracking:
   • Create placeholders or minor hooks to log “view” or “download” actions.
   • Possibly create useDocumentAnalytics hook if multiple analytics calls exist.
   • Ensure consistent naming: “downloadEvent,” “viewEvent,” etc.