@medusajs/dashboard 3.0.0-snapshot-20251216145629 → 3.0.0-snapshot-20260102134455

package/src/routes/products/product-detail/components/product-option-section/product-option-section.tsx

@@ -1,38 +1,16 @@
-import { PencilSquare, Plus, Trash } from "@medusajs/icons"
-import { Badge, Container, Heading, usePrompt } from "@medusajs/ui"
+import { ArrowRight, PencilSquare } from "@medusajs/icons"
+import { Badge, Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { SectionRow } from "../../../../../components/common/section"
-import { useDeleteProductOption } from "../../../../../hooks/api/products"
 import { HttpTypes } from "@medusajs/types"
 
 const OptionActions = ({
-  product,
   option,
 }: {
-  product: HttpTypes.AdminProduct
   option: HttpTypes.AdminProductOption
 }) => {
   const { t } = useTranslation()
-  const { mutateAsync } = useDeleteProductOption(product.id, option.id)
-  const prompt = usePrompt()
-
-  const handleDelete = async () => {
-    const res = await prompt({
-      title: t("general.areYouSure"),
-      description: t("products.options.deleteWarning", {
-        title: option.title,
-      }),
-      confirmText: t("actions.delete"),
-      cancelText: t("actions.cancel"),
-    })
-
-    if (!res) {
-      return
-    }
-
-    await mutateAsync()
-  }
 
   return (
     <ActionMenu
@@ -40,18 +18,9 @@ const OptionActions = ({
         {
           actions: [
             {
-              label: t("actions.edit"),
-              to: `options/${option.id}/edit`,
-              icon: <PencilSquare />,
-            },
-          ],
-        },
-        {
-          actions: [
-            {
-              label: t("actions.delete"),
-              onClick: handleDelete,
-              icon: <Trash />,
+              label: t("actions.goToProductOption"),
+              to: `/product-options/${option.id}`,
+              icon: <ArrowRight />,
             },
           ],
         },
@@ -78,9 +47,9 @@ export const ProductOptionSection = ({
             {
               actions: [
                 {
-                  label: t("actions.create"),
-                  to: "options/create",
-                  icon: <Plus />,
+                  label: t("actions.manage"),
+                  to: "options/manage",
+                  icon: <PencilSquare />,
                 },
               ],
             },
@@ -93,18 +62,31 @@ export const ProductOptionSection = ({
           <SectionRow
             title={option.title}
             key={option.id}
-            value={option.values?.map((val) => {
-              return (
-                <Badge
-                  key={val.value}
-                  size="2xsmall"
-                  className="flex min-w-[20px] items-center justify-center"
-                >
-                  {val.value}
-                </Badge>
-              )
-            })}
-            actions={<OptionActions product={product} option={option} />}
+            value={option.values
+              ?.sort((a, b) => {
+                if (a.rank == null && b.rank == null) {
+                  return 0
+                }
+                if (a.rank == null) {
+                  return 1
+                }
+                if (b.rank == null) {
+                  return -1
+                }
+                return a.rank - b.rank
+              })
+              .map((val) => {
+                return (
+                  <Badge
+                    key={val.value}
+                    size="2xsmall"
+                    className="flex min-w-[20px] items-center justify-center"
+                  >
+                    {val.value}
+                  </Badge>
+                )
+              })}
+            actions={<OptionActions option={option} />}
           />
         )
       })}

package/src/routes/products/product-options-manage/components/product-options-manage-form/index.ts

@@ -0,0 +1 @@
+export { ProductOptionsManageForm } from "./product-options-manage-form"

package/src/routes/products/product-options-manage/components/product-options-manage-form/product-options-manage-form.tsx

@@ -0,0 +1,328 @@
+import { HttpTypes } from "@medusajs/types"
+import { Button, Hint, Label, toast, Tooltip } from "@medusajs/ui"
+import { useMemo, useState } from "react"
+import { InformationCircle } from "@medusajs/icons"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { Form } from "../../../../../components/common/form"
+import { Combobox } from "../../../../../components/inputs/combobox"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useExtendableForm } from "../../../../../dashboard-app"
+import {
+  productOptionsQueryKeys,
+  useLinkProductOptions,
+  useProductOptions,
+} from "../../../../../hooks/api"
+import { useExtension } from "../../../../../providers/extension-provider"
+import { useComboboxData } from "../../../../../hooks/use-combobox-data"
+import { sdk } from "../../../../../lib/client"
+
+type ProductOptionsManageFormProps = {
+  product: HttpTypes.AdminProduct
+}
+
+const ProductOptionsManageSchema = zod.object({
+  option_ids: zod.array(zod.string()),
+  option_values: zod.record(zod.array(zod.string())).optional(),
+})
+
+export const ProductOptionsManageForm = ({
+  product,
+}: ProductOptionsManageFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+  const { getFormConfigs } = useExtension()
+  const configs = getFormConfigs("product", "edit")
+
+  const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>(
+    product.options?.map((opt) => opt.id) || []
+  )
+
+  const { options: _productOptionChoices, isLoading } = useComboboxData({
+    queryKey: productOptionsQueryKeys.list({ is_exclusive: false }),
+    queryFn: (params) =>
+      sdk.admin.productOption.list({
+        ...params,
+        is_exclusive: false, // load all global options here
+      } as HttpTypes.AdminProductOptionListParams),
+    getOptions: (data) =>
+      data.product_options.map((option) => ({
+        label: option.title,
+        value: option.id,
+      })),
+  })
+
+  const productOptionChoices = useMemo(
+    () => [
+      // prepand product specific options
+      ...(product.options?.filter((opt) => opt.is_exclusive) || []).map(
+        (option) => ({
+          label: option.title,
+          value: option.id,
+        })
+      ),
+      ..._productOptionChoices,
+    ],
+    [_productOptionChoices, product.options]
+  )
+
+  const { product_options = [] } = useProductOptions(
+    {
+      id: selectedOptionIds,
+      limit: selectedOptionIds.length,
+    },
+    {
+      enabled: !!selectedOptionIds.length,
+    }
+  )
+
+  const [selectedOptionValues, setSelectedOptionValues] = useState<
+    Record<string, string[]>
+  >(() => {
+    // Initialize with existing product option values
+    const initialValues: Record<string, string[]> = {}
+    product.options?.forEach((opt) => {
+      initialValues[opt.id] = opt.values?.map((v) => v.id) || []
+    })
+    return initialValues
+  })
+
+  const form = useExtendableForm({
+    defaultValues: {
+      option_ids: product.options?.map((opt) => opt.id) || [],
+      option_values: (() => {
+        const initialValues: Record<string, string[]> = {}
+        product.options?.forEach((opt) => {
+          initialValues[opt.id] = opt.values?.map((v) => v.id) || []
+        })
+        return initialValues
+      })(),
+    },
+    schema: ProductOptionsManageSchema,
+    configs: configs,
+    data: product,
+  })
+
+  const { mutateAsync, isPending } = useLinkProductOptions(product.id)
+
+  const handleProductOptionSelect = (optionIds: string[]) => {
+    setSelectedOptionIds(optionIds)
+    form.setValue("option_ids", optionIds)
+
+    // Initialize selected values for new options (select all by default)
+    const newSelectedValues: Record<string, string[]> = {}
+    const selectedProductOptions = product_options.filter((option) =>
+      optionIds.includes(option.id)
+    )
+
+    selectedProductOptions.forEach((option) => {
+      // If option was already selected, keep its current value selection
+      if (selectedOptionValues[option.id]) {
+        newSelectedValues[option.id] = selectedOptionValues[option.id]
+      } else {
+        // New option - select all values by default
+        newSelectedValues[option.id] = option.values?.map((v) => v.id) || []
+      }
+    })
+
+    setSelectedOptionValues(newSelectedValues)
+    form.setValue("option_values", newSelectedValues)
+  }
+
+  const handleValueChange = (optionId: string, valueIds: string[]) => {
+    // Ensure at least one value is selected
+    if (valueIds.length === 0) {
+      return
+    }
+
+    const updatedSelectedValues = {
+      ...selectedOptionValues,
+      [optionId]: valueIds,
+    }
+
+    setSelectedOptionValues(updatedSelectedValues)
+    form.setValue("option_values", updatedSelectedValues)
+  }
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const currentOptionIds = product.options?.map((opt) => opt.id) || []
+    const newOptionIds = data.option_ids
+
+    const optionsToAdd: (string | { id: string; value_ids: string[] })[] = []
+    const optionsToRemove: string[] = []
+
+    // Check for completely removed options
+    for (const currentId of currentOptionIds) {
+      if (!newOptionIds.includes(currentId)) {
+        optionsToRemove.push(currentId)
+      }
+    }
+
+    // Check for new options or options with changed values
+    for (const newId of newOptionIds) {
+      const isNewOption = !currentOptionIds.includes(newId)
+
+      if (isNewOption) {
+        optionsToAdd.push(
+          data.option_values
+            ? {
+                id: newId,
+                value_ids: data.option_values[newId],
+              }
+            : newId
+        )
+      } else {
+        const currentOption = product.options?.find((opt) => opt.id === newId)
+        const currentValueIds =
+          currentOption?.values?.map((v) => v.id).sort() || []
+        const newValueIds = [...(data.option_values?.[newId] || [])].sort()
+
+        const valuesChanged =
+          currentValueIds.length !== newValueIds.length ||
+          currentValueIds.some((id, index) => id !== newValueIds[index])
+
+        if (valuesChanged) {
+          optionsToRemove.push(newId)
+          optionsToAdd.push(
+            data.option_values
+              ? {
+                  id: newId,
+                  value_ids: data.option_values[newId],
+                }
+              : newId
+          )
+        }
+      }
+    }
+
+    await mutateAsync(
+      {
+        add: optionsToAdd,
+        remove: optionsToRemove,
+      },
+      {
+        onSuccess: ({ product }) => {
+          toast.success(
+            t("products.organization.edit.toasts.success", {
+              title: product.title,
+            })
+          )
+          handleSuccess()
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
+  })
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm onSubmit={handleSubmit} className="flex h-full flex-col">
+        <RouteDrawer.Body>
+          <div className="flex h-full flex-col gap-y-4">
+            <Form.Field
+              control={form.control}
+              name="option_ids"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>
+                      {t("products.options.manage.label")}
+                    </Form.Label>
+                    <Form.Hint>{t("products.options.manage.hint")}</Form.Hint>
+                    <Form.Control>
+                      <Combobox
+                        {...field}
+                        value={selectedOptionIds}
+                        onChange={(value) =>
+                          handleProductOptionSelect(value as string[])
+                        }
+                        options={productOptionChoices}
+                        placeholder={t("products.options.manage.placeholder")}
+                        disabled={isLoading}
+                        displayMode="chips"
+                      />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            {selectedOptionIds.length > 0 && (
+              <div className="flex flex-col gap-y-4">
+                <div className="flex flex-col">
+                  <Label weight="plus">{t("fields.values")}</Label>
+                  <Hint>{t("products.create.variants.selectValuesHint")}</Hint>
+                </div>
+                <div className="flex flex-col gap-y-3">
+                  {product_options
+                    .filter((option) => selectedOptionIds.includes(option.id))
+                    .map((option) => {
+                      const valueOptions =
+                        option.values
+                          ?.sort((a, b) => {
+                            const rankA = a.rank ?? Number.MAX_VALUE
+                            const rankB = b.rank ?? Number.MAX_VALUE
+                            return rankA - rankB
+                          })
+                          .map((v) => ({
+                            value: v.id,
+                            label: v.value,
+                          })) || []
+
+                      return (
+                        <div key={option.id} className="flex flex-col gap-y-2">
+                          <Label
+                            className="flex items-center gap-x-1"
+                            size="small"
+                            weight="plus"
+                          >
+                            {option.title}
+                            {option.is_exclusive && (
+                              <Tooltip
+                                content={t(
+                                  "productOptions.manage.exclusiveOption"
+                                )}
+                              >
+                                <InformationCircle className="text-ui-fg-subtle pt-[1px]" />
+                              </Tooltip>
+                            )}
+                          </Label>
+                          <Combobox
+                            value={selectedOptionValues[option.id] || []}
+                            onChange={(value) =>
+                              handleValueChange(option.id, value as string[])
+                            }
+                            options={valueOptions}
+                            placeholder={t(
+                              "products.fields.options.variantionsPlaceholder"
+                            )}
+                            displayMode="chips"
+                          />
+                        </div>
+                      )
+                    })}
+                </div>
+              </div>
+            )}
+          </div>
+        </RouteDrawer.Body>
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+            <Button size="small" type="submit" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/products/product-options-manage/index.ts

@@ -0,0 +1 @@
+export { ProductOptionsManage as Component } from "./product-options-manage"

package/src/routes/products/product-options-manage/product-options-manage.tsx

@@ -0,0 +1,35 @@
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+
+import { RouteDrawer } from "../../../components/modals"
+import { useProduct } from "../../../hooks/api"
+import { PRODUCT_DETAIL_FIELDS } from "../product-detail/constants"
+import { ProductOptionsManageForm } from "./components/product-options-manage-form"
+
+export const ProductOptionsManage = () => {
+  const { id } = useParams()
+  const { t } = useTranslation()
+
+  const { product, isLoading, isError, error } = useProduct(id!, {
+    fields: PRODUCT_DETAIL_FIELDS,
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <RouteDrawer.Title asChild>
+          <Heading>{t("products.options.manage.header")}</Heading>
+        </RouteDrawer.Title>
+        <RouteDrawer.Description className="sr-only">
+          {t("products.options.manage.description")}
+        </RouteDrawer.Description>
+      </RouteDrawer.Header>
+      {!isLoading && product && <ProductOptionsManageForm product={product} />}
+    </RouteDrawer>
+  )
+}

package/src/routes/promotions/promotion-create/components/create-promotion-form/create-promotion-form.tsx

@@ -275,6 +275,12 @@ export const CreatePromotionForm = () => {
       }
     }
 
+    // if switching to `across` allocation, reset call above will set the max quantity to 1 which is forbidden for this allocation type
+    // but since there wasn't change in the `application_method.allocation` field, useEffect below responsible for resetting will not be triggered
+    if (currentTemplate.defaults?.application_method?.allocation === "across") {
+      setValue("application_method.max_quantity", null)
+    }
+
     return currentTemplate
   }, [watchTemplateId, setValue, reset])
 

package/src/routes/translations/add-locales/add-locales.tsx

@@ -0,0 +1,29 @@
+import { RouteFocusModal } from "../../../components/modals/route-focus-modal"
+import { useStore } from "../../../hooks/api"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import { useNavigate } from "react-router-dom"
+import { AddLocalesForm } from "../../store/store-add-locales/components/add-locales-form/add-locales-form"
+
+export const TranslationsAddLocales = () => {
+  const isEnabled = useFeatureFlag("translation")
+  const navigate = useNavigate()
+
+  if (!isEnabled) {
+    navigate(-1)
+    return null
+  }
+
+  const { store, isPending, isError, error } = useStore()
+
+  const ready = !!store && !isPending
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteFocusModal>
+      {ready && <AddLocalesForm store={store} />}
+    </RouteFocusModal>
+  )
+}

package/src/routes/translations/add-locales/index.tsx

@@ -0,0 +1 @@
+export { TranslationsAddLocales as Component } from "./add-locales"

package/src/routes/translations/translation-list/components/active-locales-section/active-locales-section.tsx

@@ -1,9 +1,16 @@
 import { PencilSquare, Language } from "@medusajs/icons"
-import { Container, Heading, IconButton, InlineTip, Text } from "@medusajs/ui"
+import {
+  Container,
+  Heading,
+  IconButton,
+  InlineTip,
+  Text,
+  Tooltip,
+} from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { IconAvatar } from "../../../../../components/common/icon-avatar"
 import { HttpTypes } from "@medusajs/types"
-import { useCallback } from "react"
+import { useCallback, useState } from "react"
 import { useNavigate } from "react-router-dom"
 
 type ActiveLocalesSectionProps = {
@@ -15,9 +22,10 @@ export const ActiveLocalesSection = ({
 }: ActiveLocalesSectionProps) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
+  const [isHovered, setIsHovered] = useState(false)
 
   const handleManageLocales = useCallback(() => {
-    navigate("/settings/store/locales")
+    navigate("/settings/translations/add-locales")
   }, [navigate])
 
   const renderLocales = useCallback(() => {
@@ -37,26 +45,43 @@ export const ActiveLocalesSection = ({
   return (
     <Container className="flex flex-col p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{t("translations.activeLocales.heading")}</Heading>
+        <Heading level="h2">{t("translations.activeLocales.heading")}</Heading>
         <IconButton variant="transparent" onClick={handleManageLocales}>
           <PencilSquare></PencilSquare>
         </IconButton>
       </div>
       <div className="px-1 pb-1">
         {hasLocales ? (
-          <Container className="bg-ui-bg-component flex items-center gap-x-4 px-6 py-2">
-            <IconAvatar>
-              <Language />
-            </IconAvatar>
-            <div className="flex flex-col">
-              <Text size="small" weight="plus">
-                {t("translations.activeLocales.subtitle")}
-              </Text>
-              <Text className="text-ui-fg-subtle" size="small">
-                {renderLocales()}
-              </Text>
-            </div>
-          </Container>
+          <Tooltip
+            open={isHovered}
+            content={
+              <div className="flex flex-col gap-y-1 p-1">
+                {locales.map((locale) => (
+                  <Text key={locale.code} size="small" weight="plus">
+                    {locale.name}
+                  </Text>
+                ))}
+              </div>
+            }
+          >
+            <Container
+              className="bg-ui-bg-component border-r-1 flex items-center gap-x-4 px-[19px] py-2"
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+            >
+              <IconAvatar className="border-ui-border-base border">
+                <Language />
+              </IconAvatar>
+              <div className="flex flex-col">
+                <Text size="small" weight="plus">
+                  {t("translations.activeLocales.subtitle")}
+                </Text>
+                <Text className="text-ui-fg-subtle" size="small">
+                  {renderLocales()}
+                </Text>
+              </div>
+            </Container>
+          </Tooltip>
         ) : (
           <InlineTip label="Tip">
             {t("translations.activeLocales.noLocalesTip")}

package/src/routes/translations/translation-list/components/translation-list-section/translation-list-section.tsx

@@ -33,7 +33,11 @@ export const TranslationListSection = ({
           <Link
             to={`/settings/translations/edit?reference=${entity.reference}`}
           >
-            <Button variant="secondary" size="small" disabled={!hasLocales}>
+            <Button
+              variant="secondary"
+              size="small"
+              disabled={!hasLocales || !entity.totalCount}
+            >
               Edit
             </Button>
           </Link>