Add general-form translations (es and en).

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

@@ -928,6 +928,30 @@
   "general-form-location-name": "Location name",
   "general-form-flagship-store-warehouse": "Flagship store, warehouse",
   "general-form-name-is-required": "Name is required",
+  "general-form-title": "Title",
+  "general-form-title-placeholder-gift-card": "Gift Card",
+  "general-form-title-placeholder-winter-jacket": "Winter Jacket",
+  "general-form-title-is-required": "Title is required",
+  "general-form-title-min-length": "Title must be at least 1 character",
+  "general-form-title-hint-0-gift-card": "Give your gift card a short and clear title.",
+  "general-form-title-hint-0-product": "Give your product a short and clear title.",
+  "general-form-title-hint-1": "50-60 characters is the recommended length for search engines.",
+  "general-form-subtitle": "Subtitle",
+  "general-form-subtitle-placeholder": "Warm and cozy...",
+  "general-form-handle": "Handle",
+  "general-form-handle-placeholder-gift-card": "gift-card",
+  "general-form-handle-placeholder-winter-jacket": "winter-jacket",
+  "general-form-handle-tooltip-gift-card": "The handle is the part of the URL that identifies the gift card. If not specified, it will be generated from the title.",
+  "general-form-handle-tooltip-product": "The handle is the part of the URL that identifies the product. If not specified, it will be generated from the title.",
+  "general-form-material": "Material",
+  "general-form-material-placeholder-paper": "Paper",
+  "general-form-material-placeholder-cotton": "100% Cotton",
+  "general-form-description": "Description",
+  "general-form-description-placeholder-gift-card": "The gift card is...",
+  "general-form-description-placeholder-product": "A warm and cozy jacket...",
+  "general-form-description-hint-0-gift-card": "Give your gift card a short and clear description.",
+  "general-form-description-hint-0-product": "Give your product a short and clear description.",
+  "general-form-description-hint-1": "120-160 characters is the recommended length for search engines.",
   "location-card-delete-location": "Delete Location",
   "location-card-confirm-delete": "Are you sure you want to delete this location. This will also delete all inventory levels and reservations associated with this location.",
   "location-card-success": "Success",

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

@@ -920,6 +920,30 @@
   "general-form-location-name": "Nombre de la Sucursal",
   "general-form-flagship-store-warehouse": "Tienda principal, bodega",
   "general-form-name-is-required": "El nombre es requerido",
+  "general-form-title": "Título",
+  "general-form-title-placeholder-gift-card": "Tarjeta de Regalo",
+  "general-form-title-placeholder-winter-jacket": "Chaqueta de Invierno",
+  "general-form-title-is-required": "El título es obligatorio",
+  "general-form-title-min-length": "El título debe tener al menos 1 carácter",
+  "general-form-title-hint-0-gift-card": "Dale a tu tarjeta de regalo un título corto y claro.",
+  "general-form-title-hint-0-product": "Dale a tu producto un título corto y claro.",
+  "general-form-title-hint-1": "50-60 caracteres es la longitud recomendada para los motores de búsqueda.",
+  "general-form-subtitle": "Subtítulo",
+  "general-form-subtitle-placeholder": "Cálido y acogedor...",
+  "general-form-handle": "Identificador",
+  "general-form-handle-placeholder-gift-card": "tarjeta-de-regalo",
+  "general-form-handle-placeholder-winter-jacket": "chaqueta-de-invierno",
+  "general-form-handle-tooltip-gift-card": "El identificador es la parte de la URL que identifica la tarjeta de regalo. Si no se especifica, se generará a partir del título.",
+  "general-form-handle-tooltip-product": "El identificador es la parte de la URL que identifica el producto. Si no se especifica, se generará a partir del título.",
+  "general-form-material": "Material",
+  "general-form-material-placeholder-paper": "Papel",
+  "general-form-material-placeholder-cotton": "100% Algodón",
+  "general-form-description": "Descripción",
+  "general-form-description-placeholder-gift-card": "La tarjeta de regalo es...",
+  "general-form-description-placeholder-product": "Una chaqueta cálida y acogedora...",
+  "general-form-description-hint-0-gift-card": "Dale a tu tarjeta de regalo una descripción corta y clara.",
+  "general-form-description-hint-0-product": "Dale a tu producto una descripción corta y clara.",
+  "general-form-description-hint-1": "120-160 caracteres es la longitud recomendada para los motores de búsqueda.",
   "location-card-delete-location": "Eliminar Sucursal",
   "location-card-confirm-delete": "¿Verdaderamente deseas eliminar esta sucursal? Esto eliminará todo el inventario y reservaciones asociadas con la sucursal.",
   "location-card-success": "Éxito",

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

@@ -2,6 +2,7 @@ import FormValidator from "../../../../utils/form-validator"
 import { NestedForm } from "../../../../utils/nested-form"
 import InputField from "../../../molecules/input"
 import TextArea from "../../../molecules/textarea"
+import { useTranslation } from "react-i18next"
 
 export type GeneralFormType = {
   title: string
@@ -18,6 +19,7 @@ type Props = {
 }
 
 const GeneralForm = ({ form, requireHandle = true, isGiftCard }: Props) => {
+  const { t } = useTranslation()
   const {
     register,
     path,
@@ -28,45 +30,81 @@ const GeneralForm = ({ form, requireHandle = true, isGiftCard }: Props) => {
     <div>
       <div className="gap-x-large mb-small grid grid-cols-2">
         <InputField
-          label="Title"
-          placeholder={isGiftCard ? "Gift Card" : "Winter Jacket"}
+          label={t("general-form-title", "Title")}
+          placeholder={
+            isGiftCard
+              ? t("general-form-title-placeholder-gift-card", "Gift Card")
+              : t(
+                  "general-form-title-placeholder-winter-jacket",
+                  "Winter Jacket"
+                )
+          }
           required
           {...register(path("title"), {
-            required: "Title is required",
+            required: t("general-form-title-is-required", "Title is required"),
             minLength: {
               value: 1,
-              message: "Title must be at least 1 character",
+              message: t(
+                "general-form-title-min-length",
+                "Title must be at least 1 character"
+              ),
             },
             pattern: FormValidator.whiteSpaceRule("Title"),
           })}
           errors={errors}
         />
         <InputField
-          label="Subtitle"
-          placeholder="Warm and cozy..."
+          label={t("general-form-subtitle", "Subtitle")}
+          placeholder={t(
+            "general-form-subtitle-placeholder",
+            "Warm and cozy..."
+          )}
           {...register(path("subtitle"), {
             pattern: FormValidator.whiteSpaceRule("Subtitle"),
           })}
           errors={errors}
         />
       </div>
       <p className="inter-base-regular text-grey-50 mb-large">
-        Give your {isGiftCard ? "gift card" : "product"} a short and clear
-        title.
+        {isGiftCard
+          ? t(
+              "general-form-title-hint-0-gift-card",
+              "Give your gift card a short and clear title."
+            )
+          : t(
+              "general-form-title-hint-0-product",
+              "Give your product a short and clear title."
+            )}
         <br />
-        50-60 characters is the recommended length for search engines.
+        {t(
+          "general-form-title-hint-1",
+          "50-60 characters is the recommended length for search engines."
+        )}
       </p>
       <div className="gap-x-large mb-large grid grid-cols-2">
         <InputField
-          label="Handle"
+          label={t("general-form-handle", "Handle")}
           tooltipContent={
             !requireHandle
-              ? `The handle is the part of the URL that identifies the ${
-                  isGiftCard ? "gift card" : "product"
-                }. If not specified, it will be generated from the title.`
+              ? isGiftCard
+                ? t(
+                    "general-form-handle-tooltip-gift-card",
+                    "The handle is the part of the URL that identifies the gift card. If not specified, it will be generated from the title."
+                  )
+                : t(
+                    "general-form-handle-tooltip-product",
+                    "The handle is the part of the URL that identifies the product. If not specified, it will be generated from the title."
+                  )
               : undefined
           }
-          placeholder={isGiftCard ? "gift-card" : "winter-jacket"}
+          placeholder={
+            isGiftCard
+              ? t("general-form-handle-placeholder-gift-card", "gift-card")
+              : t(
+                  "general-form-handle-placeholder-winter-jacket",
+                  "winter-jacket"
+                )
+          }
           required={requireHandle}
           {...register(path("handle"), {
             required: requireHandle ? "Handle is required" : undefined,
@@ -77,8 +115,12 @@ const GeneralForm = ({ form, requireHandle = true, isGiftCard }: Props) => {
           errors={errors}
         />
         <InputField
-          label="Material"
-          placeholder={isGiftCard ? "Paper" : "100% Cotton"}
+          label={t("general-form-material", "Material")}
+          placeholder={
+            isGiftCard
+              ? t("general-form-material-placeholder-paper", "Paper")
+              : t("general-form-material-placeholder-cotton", "100% Cotton")
+          }
           {...register(path("material"), {
             minLength: FormValidator.minOneCharRule("Material"),
             pattern: FormValidator.whiteSpaceRule("Material"),
@@ -87,20 +129,38 @@ const GeneralForm = ({ form, requireHandle = true, isGiftCard }: Props) => {
         />
       </div>
       <TextArea
-        label="Description"
+        label={t("general-form-description", "Description")}
         placeholder={
-          isGiftCard ? "The gift card is..." : "A warm and cozy jacket..."
+          isGiftCard
+            ? t(
+                "general-form-description-placeholder-gift-card",
+                "The gift card is..."
+              )
+            : t(
+                "general-form-description-placeholder-product",
+                "A warm and cozy jacket..."
+              )
         }
         rows={3}
         className="mb-small"
         {...register(path("description"))}
         errors={errors}
       />
       <p className="inter-base-regular text-grey-50">
-        Give your {isGiftCard ? "gift card" : "product"} a short and clear
-        description.
+        {isGiftCard
+          ? t(
+              "general-form-description-hint-0-gift-card",
+              "Give your product a short and clear description."
+            )
+          : t(
+              "general-form-description-hint-0-product",
+              "Give your product a short and clear description."
+            )}
         <br />
-        120-160 characters is the recommended length for search engines.
+        {t(
+          "general-form-description-hint-1",
+          "120-160 characters is the recommended length for search engines."
+        )}
       </p>
     </div>
   )