Add translation to product organize section (es and en)

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

@@ -1638,6 +1638,7 @@
   "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-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 +2008,16 @@
   "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}}",
+  "discountable-form-discountable": "Discountable",
+  "discountable-form-hint-gift-card": "When unchecked discounts will not be applied to this gift card.",
+  "discountable-form-hint-product": "When unchecked discounts will not be applied to this product.",
+  "organize-form-type-label": "Type",
+  "organize-form-type-placeholder": "Choose a type",
+  "organize-form-collection-label": "Collection",
+  "organize-form-collection-placeholder": "Choose a collection",
+  "organize-form-categories-label": "Categories",
+  "organize-form-categories-placeholder": "Choose categories",
+  "organize-form-categories-placeholder-no-categories": "No categories available",
+  "tag-input-label": "Tags (comma separated)"
 }

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

@@ -1551,6 +1551,7 @@
   "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-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 +1921,16 @@
   "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}}",
+  "discountable-form-discountable": "Descontable",
+  "discountable-form-hint-gift-card": "Cuando no esté marcado, esta tarjeta de regalo no se descontará del inventario.",
+  "discountable-form-hint-product": "Cuando no esté marcado, este producto no se descontará del inventario.",
+  "organize-form-type-label": "Tipo",
+  "organize-form-type-placeholder": "Elige un tipo",
+  "organize-form-collection-label": "Colección",
+  "organize-form-collection-placeholder": "Elige una colección",
+  "organize-form-categories-label": "Categorías",
+  "organize-form-categories-placeholder": "Elige categorías",
+  "organize-form-categories-placeholder-no-categories": "No hay categorías disponibles",
+  "tag-input-label": "Etiquetas (separadas por comas)"
 }

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

@@ -13,6 +13,7 @@ import {
 } from "../../../molecules/select/next-select"
 import TagInput from "../../../molecules/tag-input"
 import useOrganizeData from "./use-organize-data"
+import { useTranslation } from "react-i18next"
 
 export type OrganizeFormType = {
   type: Option | null
@@ -26,6 +27,7 @@ type Props = {
 }
 
 const OrganizeForm = ({ form }: Props) => {
+  const { t } = useTranslation()
   const { control, path, setValue } = form
   const {
     productTypeOptions,
@@ -57,11 +59,14 @@ const OrganizeForm = ({ form }: Props) => {
           render={({ field: { value, onChange } }) => {
             return (
               <NextCreateableSelect
-                label="Type"
+                label={t("organize-form-type-label", "Type")}
                 onChange={onChange}
                 options={productTypeOptions}
                 value={value || null}
-                placeholder="Choose a type"
+                placeholder={t(
+                  "organize-form-type-placeholder",
+                  "Choose a type"
+                )}
                 onCreateOption={onCreateOption}
                 isClearable
               />
@@ -74,11 +79,14 @@ const OrganizeForm = ({ form }: Props) => {
           render={({ field: { value, onChange } }) => {
             return (
               <NextSelect
-                label="Collection"
+                label={t("organize-form-collection-label", "Collection")}
                 onChange={onChange}
                 options={collectionOptions}
                 value={value}
-                placeholder="Choose a collection"
+                placeholder={t(
+                  "organize-form-collection-placeholder",
+                  "Choose a collection"
+                )}
                 isClearable
               />
             )
@@ -88,7 +96,10 @@ const OrganizeForm = ({ form }: Props) => {
 
       {isFeatureEnabled(FeatureFlag.PRODUCT_CATEGORIES) ? (
         <>
-          <InputHeader label="Categories" className="mb-2" />
+          <InputHeader
+            label={t("organize-form-categories-label", "Categories")}
+            className="mb-2"
+          />
           <Controller
             name={path("categories")}
             control={control}
@@ -102,8 +113,14 @@ const OrganizeForm = ({ form }: Props) => {
                 <NestedMultiselect
                   placeholder={
                     !!categoriesOptions?.length
-                      ? "Choose categories"
-                      : "No categories available"
+                      ? t(
+                          "organize-form-categories-placeholder",
+                          "Choose categories"
+                        )
+                      : t(
+                          "organize-form-categories-placeholder-no-categories",
+                          "No categories available"
+                        )
                   }
                   onSelect={onChange}
                   options={categoriesOptions}

packages/admin-ui/ui/src/components/molecules/tag-input/index.tsx

@@ -3,6 +3,7 @@ import React, { useRef, useState } from "react"
 import Tooltip from "../../atoms/tooltip"
 import CrossIcon from "../../fundamentals/icons/cross-icon"
 import InputHeader from "../../fundamentals/input-header"
+import { useTranslation } from "react-i18next"
 
 const ENTER_KEY = 13
 const TAB_KEY = 9
@@ -39,6 +40,7 @@ const TagInput: React.FC<TagInputProps> = ({
   invalidMessage = "is not a valid tag",
   ...props
 }) => {
+  const { t } = useTranslation()
   const [invalid, setInvalid] = useState(false)
   const [highlighted, setHighlighted] = useState(-1)
   const inputRef = useRef<HTMLInputElement>(null)
@@ -158,7 +160,7 @@ const TagInput: React.FC<TagInputProps> = ({
     <div className={className}>
       {showLabel && (
         <InputHeader
-          label={label || "Tags (comma separated)"}
+          label={label || t("tag-input-label", "Tags (comma separated)")}
           {...{ required, tooltipContent, tooltip }}
           className="mb-2"
         />

packages/admin-ui/ui/src/domain/products/new/index.tsx

@@ -294,7 +294,10 @@ const NewProduct = ({ onClose }: Props) => {
                   <DiscountableForm form={nestedForm(form, "discounted")} />
                 </div>
               </Accordion.Item>
-              <Accordion.Item title="Organize" value="organize">
+              <Accordion.Item
+                title={t("new-organize-title", "Organize")}
+                value="organize"
+              >
                 <p className="inter-base-regular text-grey-50">
                   {t(
                     "new-to-start-selling-all-you-need-is-a-name-and-a-price",