react-app/src/components/ActionForm/actionForm.components.tsx
import { FAQ_TAB } from "@/router";
import { Link } from "react-router";
import { z } from "zod";
export const AttachmentFileFormatInstructions = () => (
<p data-testid="accepted-files">
We accept the following file formats:{" "}
<span className="font-bold">.doc, .docx, .pdf, .jpg, .xlsx, and more. </span>{" "}
<Link
to={"/faq/acceptable-file-formats"}
target={FAQ_TAB}
rel="noopener noreferrer"
className="text-blue-900 underline"
>
See the full list
</Link>
.
</p>
);
export const AttachmentFAQInstructions = ({ faqLink }: { faqLink?: string }) => (
<p data-testid="attachments-instructions">
Maximum file size of 80 MB per attachment.{" "}
<span className="font-bold">You can add multiple files per attachment type.</span> Read the
description for each of the attachment types on the{" "}
<Link
to={faqLink || "/faq"}
target={FAQ_TAB}
rel="noopener noreferrer"
className="text-blue-900 underline"
>
FAQ Page
</Link>
.
</p>
);
const isZodArrayDef = (def: unknown): def is z.ZodArrayDef =>
def && typeof def === "object" && "typeName" in def && def.typeName === "ZodArray";
export const AttachmentInstructions = ({ fileValidation }: { fileValidation: z.ZodArray<any> }) => {
if (isZodArrayDef(fileValidation)) {
const { maxLength, minLength } = fileValidation;
if (maxLength?.value === 1 && minLength?.value === 1) {
return <p>One attachment is required</p>;
}
if (minLength?.value) {
return <p>At least one attachment is required</p>;
}
}
return null;
};