diff --git a/components/CommentModal/Attachment.tsx b/components/CommentModal/Attachment.tsx index a262a9f7c..f65d4905c 100644 --- a/components/CommentModal/Attachment.tsx +++ b/components/CommentModal/Attachment.tsx @@ -4,6 +4,7 @@ import { ChangeEventHandler, useCallback, useEffect, useState } from "react" import { Button, Col, Form, InputGroup, Row, Spinner } from "../bootstrap" import { AttachmentInfo, UseDraftTestimonyAttachment } from "../db" import { External } from "../links" +import { useTranslation } from "next-i18next" export function Attachment({ attachment, @@ -65,11 +66,10 @@ const Label = ({ }: { attachment: UseDraftTestimonyAttachment }) => { + const { t } = useTranslation("attachment") return ( - - (Optional) Provide your testimony as a file attachment - + {t("provide_testimony_as_file")} {status === "loading" && } {status === "error" && ( @@ -85,13 +85,10 @@ export const AttachmentLink = ({ attachment: AttachmentInfo className?: string }) => { - const linkLabel = [ - "Attached", - name ?? "Testimony", - size ? formatSize(size) : null - ] - .filter(Boolean) - .join(" - ") + const { t } = useTranslation("attachment") + const linkLabelParts = [t("attached"), name ?? t("testimony")] + if (size) linkLabelParts.push(formatSize(size)) + const linkLabel = linkLabelParts.join(" - ") return ( {linkLabel} @@ -106,13 +103,10 @@ const Attached = ({ attachment: UseDraftTestimonyAttachment confirmRemove: boolean }) => { + const { t } = useTranslation("attachment") const { url, name, size, id, remove, status } = attachment const onClick = () => { - if ( - !confirmRemove || - confirm("Are you sure you want to remove your attachment?") - ) - remove() + if (!confirmRemove || confirm(t("confirm_remove"))) remove() } return ( @@ -128,7 +122,7 @@ const Attached = ({ onClick={onClick} disabled={status === "loading"} > - Remove + {t("remove")} @@ -140,19 +134,18 @@ const StatusMessage = ({ }: { attachment: UseDraftTestimonyAttachment }) => { + const { t } = useTranslation("attachment") if (status === "error") { let message: string if (error?.code === "storage/unauthorized") { - message = "Invalid file. Please upload PDF's less than 10 MB" + message = t("error.storage_unauthorized") } else { - message = "Something went wrong. Please try again." + message = t("error.generic") } return {message} } else if (status === "ok" && !id) { - return ( - Files must be PDF documents and less than 10 MB. - ) + return {t("file_requirements")} } else { return null } diff --git a/pages/submit-testimony.tsx b/pages/submit-testimony.tsx index bb46782cf..909d94ee0 100644 --- a/pages/submit-testimony.tsx +++ b/pages/submit-testimony.tsx @@ -23,6 +23,7 @@ export default createPage({ export const getStaticProps = createGetStaticTranslationProps([ "auth", + "attachment", "common", "footer", "testimony", diff --git a/public/locales/en/attachment.json b/public/locales/en/attachment.json new file mode 100644 index 000000000..1311f1ea0 --- /dev/null +++ b/public/locales/en/attachment.json @@ -0,0 +1,9 @@ +{ + "attached": "Attached", + "confirm_remove": "Are you sure you want to remove your attachment?", + "error.generic": "Something went wrong. Please try again.", + "error.storage_unauthorized": "Invalid file. Please upload PDF's less than 10 MB", + "file_requirements": "Files must be PDF documents and less than 10 MB.", + "provide_testimony_as_file": "(Optional) Provide your testimony as a file attachment", + "remove": "Remove" +}