Add thumbnail/media placeholders translations

packages/admin-ui/ui/public/locales/en/translation.json

@@ -2063,5 +2063,11 @@
   "customs-form-origin-country-input-placeholder": "Choose a country",
   "metadata-form-key": "Key",
   "metadata-form-value": "Value",
-  "variant-select-options-form": "Choose an option"
+  "variant-select-options-form": "Choose an option",
+  "file-upload-field-drop-your-images-here-or": "Drop your images here, or",
+  "file-upload-field-click-to-browse": "click to browse",
+  "media-form-image-size-recommended": "1200 x 1600 (3:4) recommended, up to 10MB each",
+  "media-form-uploads": "Uploads",
+  "thumbnail-form-image-recommended-size": "1200 x 1600 (3:4) recommended, up to 10MB each",
+  "thumbnail-form-upload": "Upload"
 }

packages/admin-ui/ui/public/locales/es/translation.json

@@ -1976,5 +1976,11 @@
   "customs-form-origin-country-input-placeholder": "Elige un país",
   "metadata-form-key": "Clave",
   "metadata-form-value": "Valor",
-  "variant-select-options-form": "Seleccione una opción"
+  "variant-select-options-form": "Seleccione una opción",
+  "file-upload-field-drop-your-images-here-or": "Suelta tus imágenes aquí, o",
+  "file-upload-field-click-to-browse": "haz clic para explorar",
+  "media-form-image-size-recommended": "Se recomienda 1200 x 1600 (3:4), hasta 10MB cada una",
+  "media-form-uploads": "Subidas",
+  "thumbnail-form-image-recommended-size": "Se recomienda 1200 x 1600 (3:4), hasta 10MB cada una",
+  "thumbnail-form-upload": "Subida"
 }

packages/admin-ui/ui/src/components/atoms/file-upload-field/index.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx"
 import React, { useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
 
 type FileUploadFieldProps = {
   onFileChosen: (files: File[]) => void
@@ -11,22 +12,17 @@ type FileUploadFieldProps = {
   text?: React.ReactElement | string
 }
 
-const defaultText = (
-  <span>
-    Drop your images here, or{" "}
-    <span className="text-violet-60">click to browse</span>
-  </span>
-)
-
 const FileUploadField: React.FC<FileUploadFieldProps> = ({
   onFileChosen,
   filetypes,
   errorMessage,
   className,
-  text = defaultText,
+  text,
   placeholder = "",
   multiple = false,
 }) => {
+  const { t } = useTranslation()
+
   const inputRef = useRef<HTMLInputElement>(null)
   const [fileUploadError, setFileUploadError] = useState(false)
 
@@ -71,6 +67,18 @@ const FileUploadField: React.FC<FileUploadFieldProps> = ({
     }
   }
 
+  const defaultText = (
+    <span>
+      {t(
+        "file-upload-field-drop-your-images-here-or",
+        "Drop your images here, or"
+      )}{" "}
+      <span className="text-violet-60">
+        {t("file-upload-field-click-to-browse", "click to browse")}
+      </span>
+    </span>
+  )
+
   return (
     <div
       onClick={() => inputRef?.current?.click()}
@@ -82,7 +90,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = ({
       )}
     >
       <div className="flex flex-col items-center">
-        <p>{text}</p>
+        <p>{text ?? defaultText}</p>
         {placeholder}
       </div>
       {fileUploadError && (

packages/admin-ui/ui/src/components/forms/product/media-form/index.tsx

@@ -13,6 +13,7 @@ import Button from "../../../fundamentals/button"
 import CheckCircleFillIcon from "../../../fundamentals/icons/check-circle-fill-icon"
 import TrashIcon from "../../../fundamentals/icons/trash-icon"
 import Actionables, { ActionType } from "../../../molecules/actionables"
+import { useTranslation } from "react-i18next"
 
 type ImageType = { selected: boolean } & FormImage
 
@@ -25,6 +26,8 @@ type Props = {
 }
 
 const MediaForm = ({ form }: Props) => {
+  const { t } = useTranslation()
+
   const { control, path, setValue } = form
 
   const { fields, append, remove } = useFieldArray({
@@ -80,7 +83,10 @@ const MediaForm = ({ form }: Props) => {
         <div>
           <FileUploadField
             onFileChosen={handleFilesChosen}
-            placeholder="1200 x 1600 (3:4) recommended, up to 10MB each"
+            placeholder={t(
+              "media-form-image-size-recommended",
+              "1200 x 1600 (3:4) recommended, up to 10MB each"
+            )}
             multiple
             filetypes={["image/gif", "image/jpeg", "image/png", "image/webp"]}
             className="py-large"
@@ -90,7 +96,9 @@ const MediaForm = ({ form }: Props) => {
       {fields.length > 0 && (
         <div className="mt-large">
           <div className="mb-small flex items-center justify-between">
-            <h2 className="inter-large-semibold">Uploads</h2>
+            <h2 className="inter-large-semibold">
+              {t("media-form-uploads", "Uploads")}
+            </h2>
             <ModalActions
               number={selected.length}
               onDeselect={handleDeselect}
@@ -177,7 +185,7 @@ const Image = ({ image, index, form, remove }: ImageProps) => {
                 </span>
               </div>
             </button>
-            <div className="right-base absolute top-0 bottom-0 flex items-center">
+            <div className="right-base absolute bottom-0 top-0 flex items-center">
               <Actionables actions={actions} forceDropdown />
             </div>
           </div>

packages/admin-ui/ui/src/components/forms/product/thumbnail-form/index.tsx

@@ -4,6 +4,7 @@ import { NestedForm } from "../../../../utils/nested-form"
 import FileUploadField from "../../../atoms/file-upload-field"
 import TrashIcon from "../../../fundamentals/icons/trash-icon"
 import Actionables, { ActionType } from "../../../molecules/actionables"
+import { useTranslation } from "react-i18next"
 
 export type ThumbnailFormType = {
   images: FormImage[]
@@ -14,6 +15,7 @@ type Props = {
 }
 
 const ThumbnailForm = ({ form }: Props) => {
+  const { t } = useTranslation()
   const { control, path } = form
 
   const { fields, remove, replace, append } = useFieldArray({
@@ -43,15 +45,20 @@ const ThumbnailForm = ({ form }: Props) => {
         <div className="mt-large">
           <FileUploadField
             onFileChosen={handleFilesChosen}
-            placeholder="1200 x 1600 (3:4) recommended, up to 10MB each"
+            placeholder={t(
+              "thumbnail-form-image-recommended-size",
+              "1200 x 1600 (3:4) recommended, up to 10MB each"
+            )}
             filetypes={["image/gif", "image/jpeg", "image/png", "image/webp"]}
             className="py-large"
           />
         </div>
       </div>
       {fields.length > 0 && (
         <div className="mt-large">
-          <h2 className="inter-large-semibold mb-small">Upload</h2>
+          <h2 className="inter-large-semibold mb-small">
+            {t("thumbnail-form-upload", "Upload")}
+          </h2>
 
           <div className="gap-y-2xsmall flex flex-col">
             {fields.map((field, index) => {