fix(dashboard): Use ChipInput for option forms (#7603)

Resolves CORE-2069, CORE-2068

packages/admin-next/dashboard/src/components/inputs/chip-input/chip-input.tsx

@@ -19,6 +19,7 @@ type ChipInputProps = {
   allowDuplicates?: boolean
   showRemove?: boolean
   variant?: "base" | "contrast"
+  placeholder?: string
   className?: string
 }
 
@@ -33,6 +34,7 @@ export const ChipInput = forwardRef<HTMLInputElement, ChipInputProps>(
       showRemove = true,
       variant = "base",
       allowDuplicates = false,
+      placeholder,
       className,
     },
     ref
@@ -178,6 +180,8 @@ export const ChipInput = forwardRef<HTMLInputElement, ChipInputProps>(
           disabled={disabled}
           name={name}
           ref={innerRef}
+          placeholder={chips.length === 0 ? placeholder : undefined}
+          autoComplete="off"
         />
       </div>
     )

packages/admin-next/dashboard/src/i18n/translations/en.json

@@ -291,7 +291,9 @@
         "hint": "Options are used to define the color, size, etc. of the product",
         "add": "Add option",
         "optionTitle": "Option title",
-        "variations": "Variations (comma-separated)"
+        "optionTitlePlaceholder": "Color",
+        "variations": "Variations (comma-separated)",
+        "variantionsPlaceholder": "Red, Blue, Green"
       },
       "variants": {
         "label": "Product variants",

packages/admin-next/dashboard/src/routes/products/product-create-option/components/create-product-option-form/create-product-option-form.tsx

@@ -64,7 +64,7 @@ export const CreateProductOptionForm = ({
         onSubmit={handleSubmit}
         className="flex flex-1 flex-col overflow-hidden"
       >
-        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-8 overflow-auto">
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
           <Form.Field
             control={form.control}
             name="title"
@@ -75,7 +75,12 @@ export const CreateProductOptionForm = ({
                     {t("products.fields.options.optionTitle")}
                   </Form.Label>
                   <Form.Control>
-                    <Input {...field} />
+                    <Input
+                      {...field}
+                      placeholder={t(
+                        "products.fields.options.optionTitlePlaceholder"
+                      )}
+                    />
                   </Form.Control>
                   <Form.ErrorMessage />
                 </Form.Item>
@@ -92,7 +97,12 @@ export const CreateProductOptionForm = ({
                     {t("products.fields.options.variations")}
                   </Form.Label>
                   <Form.Control>
-                    <ChipInput {...field} />
+                    <ChipInput
+                      {...field}
+                      placeholder={t(
+                        "products.fields.options.variantionsPlaceholder"
+                      )}
+                    />
                   </Form.Control>
                   <Form.ErrorMessage />
                 </Form.Item>

packages/admin-next/dashboard/src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx

@@ -8,9 +8,9 @@ import {
   IconButton,
   Input,
   Label,
+  Switch,
   Text,
   clx,
-  Switch,
 } from "@medusajs/ui"
 import {
   Controller,
@@ -388,6 +388,9 @@ export const ProductCreateVariantsSection = ({
                                   {...form.register(
                                     `options.${index}.title` as const
                                   )}
+                                  placeholder={t(
+                                    "products.fields.options.optionTitlePlaceholder"
+                                  )}
                                 />
                                 <div className="flex items-center px-2 py-1.5">
                                   <Label
@@ -417,6 +420,9 @@ export const ProductCreateVariantsSection = ({
                                         {...field}
                                         variant="contrast"
                                         onChange={handleValueChange}
+                                        placeholder={t(
+                                          "products.fields.options.variantionsPlaceholder"
+                                        )}
                                       />
                                     )
                                   }}

packages/admin-next/dashboard/src/routes/products/product-edit-option/components/edit-product-option-form/edit-product-option-form.tsx

@@ -4,7 +4,9 @@ import { Button, Input } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
+
 import { Form } from "../../../../../components/common/form"
+import { ChipInput } from "../../../../../components/inputs/chip-input"
 import {
   RouteDrawer,
   useRouteModal,
@@ -34,7 +36,7 @@ export const CreateProductOptionForm = ({
     resolver: zodResolver(CreateProductOptionSchema),
   })
 
-  const { mutateAsync, isLoading } = useUpdateProductOption(
+  const { mutateAsync, isPending } = useUpdateProductOption(
     option.product_id,
     option.id
   )
@@ -59,7 +61,7 @@ export const CreateProductOptionForm = ({
         onSubmit={handleSubmit}
         className="flex flex-1 flex-col overflow-hidden"
       >
-        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-8 overflow-auto">
+        <RouteDrawer.Body className="flex flex-1 flex-col gap-y-4 overflow-auto">
           <Form.Field
             control={form.control}
             name="title"
@@ -70,7 +72,12 @@ export const CreateProductOptionForm = ({
                     {t("products.fields.options.optionTitle")}
                   </Form.Label>
                   <Form.Control>
-                    <Input {...field} />
+                    <Input
+                      {...field}
+                      placeholder={t(
+                        "products.fields.options.optionTitlePlaceholder"
+                      )}
+                    />
                   </Form.Control>
                   <Form.ErrorMessage />
                 </Form.Item>
@@ -80,20 +87,18 @@ export const CreateProductOptionForm = ({
           <Form.Field
             control={form.control}
             name="values"
-            render={({ field: { value, onChange, ...field } }) => {
+            render={({ field: { ...field } }) => {
               return (
                 <Form.Item>
                   <Form.Label>
                     {t("products.fields.options.variations")}
                   </Form.Label>
                   <Form.Control>
-                    <Input
+                    <ChipInput
                       {...field}
-                      value={(value ?? []).join(",")}
-                      onChange={(e) => {
-                        const val = e.target.value
-                        onChange(val.split(",").map((v) => v.trim()))
-                      }}
+                      placeholder={t(
+                        "products.fields.options.variantionsPlaceholder"
+                      )}
                     />
                   </Form.Control>
                   <Form.ErrorMessage />
@@ -109,7 +114,7 @@ export const CreateProductOptionForm = ({
                 {t("actions.cancel")}
               </Button>
             </RouteDrawer.Close>
-            <Button type="submit" size="small" isLoading={isLoading}>
+            <Button type="submit" size="small" isLoading={isPending}>
               {t("actions.save")}
             </Button>
           </div>