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"
+}