Add product variant create/update forms translations

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

@@ -184,6 +184,7 @@
   "product-variant-tree-count_one": "{{count}}",
   "product-variant-tree-count_other": "{{count}}",
   "product-variant-tree-add-prices": "Add prices",
+  "product-variants-section-variants": "Variants",
   "product-variants-section-add-variant": "Add Variant",
   "product-variants-section-cancel": "Cancel",
   "product-variants-section-save-and-close": "Save and close",
@@ -1638,6 +1639,9 @@
   "new-general-information-title": "General information",
   "new-to-start-selling-all-you-need-is-a-name-and-a-price": "To start selling, all you need is a name and a price.",
   "new-organize-product": "Organize Product",
+  "new-organize-title": "Organize",
+  "new-variants-title": "Variants",
+  "new-attributes-title": "Attributes",
   "new-add-variations-of-this-product": "Add variations of this product.",
   "new-offer-your-customers-different-options-for-color-format-size-shape-etc": "Offer your customers different options for color, format, size, shape, etc.",
   "new-used-for-shipping-and-customs-purposes": "Used for shipping and customs purposes.",
@@ -2007,5 +2011,63 @@
   "users-the-team": "The Team",
   "users-manage-users-of-your-medusa-store": "Manage users of your Medusa Store",
   "users-count_one": "{{count}}",
-  "users-count_other": "{{count}}"
+  "users-count_other": "{{count}}",
+  "create-flow-variant-form-general-title": "General",
+  "create-flow-variant-form-options-title": "Options",
+  "create-flow-variant-form-options-tooltip": "Options are used to define the color, size, etc. of the variant.",
+  "create-flow-variant-form-stock-inventory-title": "Stock & Inventory",
+  "create-flow-variant-form-shipping-title": "Shipping",
+  "create-flow-variant-form-shipping-description": "Shipping information can be required depending on your shipping provider, and whether or not you are shipping internationally.",
+  "create-flow-variant-form-dimensions-title": "Dimensions",
+  "create-flow-variant-form-dimensions-description": "Configure to calculate the most accurate shipping rates.",
+  "create-flow-variant-form-customs-title": "Customs",
+  "create-flow-variant-form-customs-description": "Configure if you are shipping internationally.",
+  "edit-flow-variant-form-general-title": "General",
+  "edit-flow-variant-form-options-title": "Options",
+  "edit-flow-variant-form-options-tooltip": "Options are used to define the color, size, etc. of the variant.",
+  "edit-flow-variant-form-option-input-error": "Option value for {{field}} is required",
+  "edit-flow-variant-form-stock-inventory-title": "Stock & Inventory",
+  "edit-flow-variant-form-shipping-title": "Shipping",
+  "edit-flow-variant-form-shipping-description": "Shipping information can be required depending on your shipping provider, and whether or not you are shipping internationally.",
+  "edit-flow-variant-form-dimensions-title": "Dimensions",
+  "edit-flow-variant-form-dimensions-description": "Configure to calculate the most accurate shipping rates.",
+  "edit-flow-variant-form-customs-title": "Customs",
+  "edit-flow-variant-form-customs-description": "Configure if you are shipping internationally.",
+  "edit-flow-variant-form-metadata-title": "Metadata",
+  "edit-flow-variant-form-metadata-description": "Metadata can be used to store additional information about the variant.",
+  "variant-general-form-description": "Configure the general information for this variant.",
+  "variant-general-form-title-input-label": "Custom title",
+  "variant-general-form-title-input-placeholder": "Green / XL...",
+  "variant-general-form-material-input-label": "Material",
+  "variant-general-form-material-input-placeholder": "80% wool, 20% cotton...",
+  "variant-stock-form-description": "Configure the inventory and stock for this variant.",
+  "variant-stock-form-stock-input-label": "Stock keeping unit (SKU)",
+  "variant-stock-form-qty-input-label": "Quantity in stock",
+  "variant-stock-form-ean-input-label": "EAN (Barcode)",
+  "variant-stock-form-barcode-input-label": "Barcode",
+  "variant-stock-form-manage-inventory-title": "Manage inventory",
+  "variant-stock-form-manage-inventory-description": "When checked Medusa will regulate the inventory when orders and returns are made.",
+  "variant-stock-form-allow-backorders-title": "Allow backorders",
+  "variant-stock-form-allow-backorders-description": "When checked the product will be available for purchase despite the product being sold out",
+  "variant-stock-form-inventory-service-quantity": "Quantity",
+  "variant-stock-form-inventory-service-location": "Location",
+  "variant-stock-form-inventory-service-location-availability-title": "Total inventory at all locations",
+  "variant-stock-form-inventory-service-location-availability-value": "{{qty}} available",
+  "dimensions-form-width-input-label": "Width",
+  "dimensions-form-length-input-label": "Length",
+  "dimensions-form-height-input-label": "Height",
+  "dimensions-form-weight-input-label": "Weight",
+  "customs-form-mid-input-label": "MID Code",
+  "customs-form-hs-input-label": "HS Code",
+  "customs-form-origin-country-input-label": "Country of origin",
+  "customs-form-origin-country-input-placeholder": "Choose a country",
+  "metadata-form-key": "Key",
+  "metadata-form-value": "Value",
+  "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

@@ -190,6 +190,7 @@
   "edit-variants-modal-product-variants": "Variantes del producto",
   "edit-variants-modal-variant": "Variante",
   "edit-variants-modal-inventory": "Inventario",
+  "product-variants-section-variants": "Variantes",
   "product-variants-section-edit-prices": "Editar Precios",
   "product-variants-section-edit-variants": "Editar Variantes",
   "product-variants-section-edit-options": "Editar Opciones",
@@ -1551,6 +1552,9 @@
   "new-general-information-title": "Información General",
   "new-to-start-selling-all-you-need-is-a-name-and-a-price": "Para comenzar a vender, solo necesitas un nombre y un precio.",
   "new-organize-product": "Organizar Producto",
+  "new-organize-title": "Organizar",
+  "new-variants-title": "Variantes",
+  "new-attributes-title": "Atributos",
   "new-add-variations-of-this-product": "Añadir variaciones del producto.",
   "new-offer-your-customers-different-options-for-color-format-size-shape-etc": "Ofrece diferentes opciones de color, formato, tamaño, etc. a tus clientes.",
   "new-used-for-shipping-and-customs-purposes": "Utilizado con propósitos de envíos y aduana",
@@ -1920,5 +1924,63 @@
   "users-the-team": "El Equipo",
   "users-manage-users-of-your-medusa-store": "Administrar usuarios de tu Tienda Medusa",
   "users-count_one": "{{count}}",
-  "users-count_other": "{{count}}"
+  "users-count_other": "{{count}}",
+  "create-flow-variant-form-general-title": "General",
+  "create-flow-variant-form-options-title": "Opciones",
+  "create-flow-variant-form-options-tooltip": "Las opciones se utilizan para definir el color, tamaño, etc. de la variante.",
+  "create-flow-variant-form-stock-inventory-title": "Inventario & Stock",
+  "create-flow-variant-form-shipping-title": "Envío",
+  "create-flow-variant-form-shipping-description": "La información de envío puede ser requerida dependiendo de tu proveedor de envíos, y si estás enviando internacionalmente o no.",
+  "create-flow-variant-form-dimensions-title": "Dimensiones",
+  "create-flow-variant-form-dimensions-description": "Configura para calcular las tarifas de envío más precisas.",
+  "create-flow-variant-form-customs-title": "Aduanas",
+  "create-flow-variant-form-customs-description": "Configura si estás enviando internacionalmente.",
+  "edit-flow-variant-form-general-title": "General",
+  "edit-flow-variant-form-options-title": "Opciones",
+  "edit-flow-variant-form-options-tooltip": "Las opciones se utilizan para definir el color, tamaño, etc. de la variante.",
+  "edit-flow-variant-form-option-input-error": "Se requiere un valor de opción para {{field}}",
+  "edit-flow-variant-form-stock-inventory-title": "Inventario & Stock",
+  "edit-flow-variant-form-shipping-title": "Envío",
+  "edit-flow-variant-form-shipping-description": "La información de envío puede ser requerida dependiendo de tu proveedor de envíos, y si estás enviando internacionalmente o no.",
+  "edit-flow-variant-form-dimensions-title": "Dimensiones",
+  "edit-flow-variant-form-dimensions-description": "Configurar para calcular las tarifas de envío más precisas.",
+  "edit-flow-variant-form-customs-title": "Aduanas",
+  "edit-flow-variant-form-customs-description": "Configurar si estás enviando internacionalmente.",
+  "edit-flow-variant-form-metadata-title": "Metadatos",
+  "edit-flow-variant-form-metadata-description": "Los metadatos se pueden utilizar para almacenar información adicional sobre la variante.",
+  "variant-general-form-description": "Configura la información general para esta variante.",
+  "variant-general-form-title-input-label": "Título personalizado",
+  "variant-general-form-title-input-placeholder": "Verde / XL...",
+  "variant-general-form-material-input-label": "Material",
+  "variant-general-form-material-input-placeholder": "80% lana, 20% algodón...",
+  "variant-stock-form-description": "Configura el inventario y stock para esta variante.",
+  "variant-stock-form-stock-input-label": "Unidad de Mantenimiento de Existencias (SKU)",
+  "variant-stock-form-qty-input-label": "Cantidad en stock",
+  "variant-stock-form-ean-input-label": "EAN (Código de Barras)",
+  "variant-stock-form-barcode-input-label": "Código de Barras",
+  "variant-stock-form-manage-inventory-title": "Gestionar inventario",
+  "variant-stock-form-manage-inventory-description": "Cuando esté marcado, Medusa regulará el inventario cuando se realicen pedidos y devoluciones.",
+  "variant-stock-form-allow-backorders-title": "Permitir pedidos pendientes",
+  "variant-stock-form-allow-backorders-description": "Cuando esté marcado, el producto estará disponible para compra a pesar de que el producto esté agotado",
+  "variant-stock-form-inventory-service-quantity": "Cantidad",
+  "variant-stock-form-inventory-service-location": "Ubicación",
+  "variant-stock-form-inventory-service-location-availability-title": "Inventario total en todas las ubicaciones",
+  "variant-stock-form-inventory-service-location-availability-value": "{{qty}} disponible",
+  "dimensions-form-width-input-label": "Ancho",
+  "dimensions-form-length-input-label": "Largo",
+  "dimensions-form-height-input-label": "Alto",
+  "dimensions-form-weight-input-label": "Peso",
+  "customs-form-mid-input-label": "Código MID",
+  "customs-form-hs-input-label": "Código HS",
+  "customs-form-origin-country-input-label": "País de origen",
+  "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",
+  "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/general/metadata-form/index.tsx

@@ -11,6 +11,7 @@ import EllipsisVerticalIcon from "../../../fundamentals/icons/ellipsis-vertical-
 import TrashIcon from "../../../fundamentals/icons/trash-icon"
 import WarningCircleIcon from "../../../fundamentals/icons/warning-circle"
 import XCircleIcon from "../../../fundamentals/icons/x-circle-icon"
+import { useTranslation } from "react-i18next"
 
 export type MetadataField = {
   key: string
@@ -29,6 +30,8 @@ type MetadataProps = {
 }
 
 const MetadataForm = ({ form }: MetadataProps) => {
+  const { t } = useTranslation()
+
   const { control, path, register, setValue, getValues } = form
 
   const { fields, remove, insert } = useFieldArray({
@@ -123,10 +126,10 @@ const MetadataForm = ({ form }: MetadataProps) => {
           )}
         >
           <div>
-            <p>Key</p>
+            <p>{t("metadata-form-key", "Key")}</p>
           </div>
           <div className="">
-            <p>Value</p>
+            <p>{t("metadata-form-value", "Value")}</p>
           </div>
         </div>
         <div className="divide-grey-20 divide-y">
@@ -167,13 +170,13 @@ const MetadataForm = ({ form }: MetadataProps) => {
                   <div>
                     <MetadataInput
                       {...register(path(`entries.${index}.key`))}
-                      placeholder="Key"
+                      placeholder={t("metadata-form-key", "Key")}
                     />
                   </div>
                   <div>
                     <MetadataInput
                       {...register(path(`entries.${index}.value`))}
-                      placeholder="Value"
+                      placeholder={t("metadata-form-value", "Value")}
                     />
                   </div>
                 </MetadataRow>

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

@@ -5,6 +5,7 @@ import FormValidator from "../../../../utils/form-validator"
 import { NestedForm } from "../../../../utils/nested-form"
 import InputField from "../../../molecules/input"
 import { NextSelect } from "../../../molecules/select/next-select"
+import { useTranslation } from "react-i18next"
 
 export type CustomsFormType = {
   mid_code: string | null
@@ -22,6 +23,7 @@ type CustomsFormProps = {
  * <CustomsForm form={nestedForm(form, "customs")} />
  */
 const CustomsForm = ({ form }: CustomsFormProps) => {
+  const { t } = useTranslation()
   const {
     register,
     path,
@@ -37,15 +39,15 @@ const CustomsForm = ({ form }: CustomsFormProps) => {
   return (
     <div className="gap-large pb-2xsmall grid grid-cols-2">
       <InputField
-        label="MID Code"
+        label={t("customs-form-mid-input-label", "MID Code")}
         placeholder="XDSKLAD9999..."
         {...register(path("mid_code"), {
           pattern: FormValidator.whiteSpaceRule("MID Code"),
         })}
         errors={errors}
       />
       <InputField
-        label="HS Code"
+        label={t("customs-form-hs-input-label", "HS Code")}
         placeholder="BDJSK39277W..."
         {...register(path("hs_code"), {
           pattern: FormValidator.whiteSpaceRule("HS Code"),
@@ -58,8 +60,14 @@ const CustomsForm = ({ form }: CustomsFormProps) => {
         render={({ field }) => {
           return (
             <NextSelect
-              label="Country of origin"
-              placeholder="Choose a country"
+              label={t(
+                "customs-form-origin-country-input-label",
+                "Country of origin"
+              )}
+              placeholder={t(
+                "customs-form-origin-country-input-placeholder",
+                "Choose a country"
+              )}
               options={countryOptions}
               isSearchable
               isClearable

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

@@ -1,6 +1,7 @@
 import FormValidator from "../../../../utils/form-validator"
 import { NestedForm } from "../../../../utils/nested-form"
 import InputField from "../../../molecules/input"
+import { useTranslation } from "react-i18next"
 
 export type DimensionsFormType = {
   length: number | null
@@ -19,6 +20,7 @@ type DimensionsFormProps = {
  * <DimensionsForm form={nestedForm(form, "dimensions")} />
  */
 const DimensionsForm = ({ form }: DimensionsFormProps) => {
+  const { t } = useTranslation()
   const {
     register,
     path,
@@ -28,7 +30,7 @@ const DimensionsForm = ({ form }: DimensionsFormProps) => {
   return (
     <div className="gap-x-large grid grid-cols-4">
       <InputField
-        label="Width"
+        label={t("dimensions-form-width-input-label", "Width")}
         placeholder="100..."
         type="number"
         {...register(path("width"), {
@@ -38,7 +40,7 @@ const DimensionsForm = ({ form }: DimensionsFormProps) => {
         errors={errors}
       />
       <InputField
-        label="Length"
+        label={t("dimensions-form-length-input-label", "Length")}
         placeholder="100..."
         type="number"
         {...register(path("length"), {
@@ -48,7 +50,7 @@ const DimensionsForm = ({ form }: DimensionsFormProps) => {
         errors={errors}
       />
       <InputField
-        label="Height"
+        label={t("dimensions-form-height-input-label", "Height")}
         placeholder="100..."
         type="number"
         {...register(path("height"), {
@@ -58,7 +60,7 @@ const DimensionsForm = ({ form }: DimensionsFormProps) => {
         errors={errors}
       />
       <InputField
-        label="Weight"
+        label={t("dimensions-form-weight-input-label", "Weight")}
         placeholder="100..."
         type="number"
         {...register(path("weight"), {