@medusajs/dashboard 3.0.0-preview-20251203032421 → 3.0.0-preview-20251211172647

package/src/routes/store/store-add-locales/components/add-locales-form/add-locales-form.tsx

@@ -0,0 +1,240 @@
+import { HttpTypes } from "@medusajs/types"
+import { z } from "zod"
+import { useLocalesTableQuery } from "../../../common/hooks/use-locales-table-query"
+import { useRouteModal } from "../../../../../components/modals/route-modal-provider"
+import { useTranslation } from "react-i18next"
+import { useLocales, useUpdateStore } from "../../../../../hooks/api"
+import { keepPreviousData } from "@tanstack/react-query"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import {
+  createColumnHelper,
+  OnChangeFn,
+  RowSelectionState,
+} from "@tanstack/react-table"
+import { useMemo, useState } from "react"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { Button, Checkbox, Hint, toast, Tooltip } from "@medusajs/ui"
+import { RouteFocusModal } from "../../../../../components/modals/route-focus-modal"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { _DataTable } from "../../../../../components/table/data-table"
+import { useLocalesTableColumns } from "../../../common/hooks/use-locales-table-columns"
+
+type AddLocalesFormProps = {
+  store: HttpTypes.AdminStore
+}
+
+const AddLocalesSchema = z.object({
+  locales: z.array(z.string()).min(1),
+})
+
+const PAGE_SIZE = 50
+const PREFIX = "al"
+
+export const AddLocalesForm = ({ store }: AddLocalesFormProps) => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const { raw, searchParams } = useLocalesTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX,
+  })
+
+  const {
+    locales,
+    count,
+    isPending: isLoading,
+    isError,
+    error,
+  } = useLocales(searchParams, {
+    placeholderData: keepPreviousData,
+  })
+
+  const form = useForm<z.infer<typeof AddLocalesSchema>>({
+    defaultValues: {
+      locales: [],
+    },
+    resolver: zodResolver(AddLocalesSchema),
+  })
+
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { setValue } = form
+
+  const updater: OnChangeFn<RowSelectionState> = (fn) => {
+    const updated = typeof fn === "function" ? fn(rowSelection) : fn
+
+    const ids = Object.keys(updated)
+    setValue("locales", ids, {
+      shouldDirty: true,
+      shouldTouch: true,
+    })
+
+    setRowSelection(updated)
+  }
+
+  const preSelectedRows =
+    store.supported_locales?.map((l) => l.locale_code) ?? []
+
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: locales ?? [],
+    columns,
+    count: count,
+    getRowId: (row) => row.code,
+    enableRowSelection: (row) => !preSelectedRows.includes(row.original.code),
+    enablePagination: true,
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX,
+    rowSelection: {
+      state: rowSelection,
+      updater,
+    },
+  })
+
+  const { mutateAsync, isPending } = useUpdateStore(store.id)
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const locales = Array.from(
+      new Set([...data.locales, ...preSelectedRows])
+    ) as string[]
+
+    let defaultLocale = store.supported_locales?.find(
+      (l) => l.is_default
+    )?.locale_code
+
+    if (!locales.includes(defaultLocale ?? "")) {
+      defaultLocale = locales?.[0]
+    }
+
+    await mutateAsync(
+      {
+        supported_locales: locales.map((l) => ({
+          locale_code: l,
+          is_default: l === defaultLocale,
+        })),
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("store.toast.localesUpdated"))
+          handleSuccess()
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
+  })
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <RouteFocusModal.Header>
+          <div className="flex flex-1 items-center justify-between">
+            <div className="flex items-center">
+              {form.formState.errors.locales && (
+                <Hint variant="error">
+                  {form.formState.errors.locales.message}
+                </Hint>
+              )}
+            </div>
+          </div>
+        </RouteFocusModal.Header>
+        <RouteFocusModal.Body className="flex flex-1 flex-col overflow-hidden">
+          <_DataTable
+            table={table}
+            pageSize={PAGE_SIZE}
+            count={count}
+            columns={columns}
+            layout="fill"
+            pagination
+            search="autofocus"
+            prefix={PREFIX}
+            orderBy={[
+              { key: "name", label: t("fields.name") },
+              { key: "code", label: t("fields.code") },
+            ]}
+            isLoading={isLoading}
+            queryObject={raw}
+          />
+        </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteFocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("actions.cancel")}
+              </Button>
+            </RouteFocusModal.Close>
+            <Button size="small" type="submit" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteFocusModal.Footer>
+      </KeyboundForm>
+    </RouteFocusModal.Form>
+  )
+}
+
+const columnHelper = createColumnHelper<HttpTypes.AdminLocale>()
+
+const useColumns = () => {
+  const { t } = useTranslation()
+  const base = useLocalesTableColumns()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          const isPreSelected = !row.getCanSelect()
+          const isSelected = row.getIsSelected() || isPreSelected
+
+          const Component = (
+            <Checkbox
+              checked={isSelected}
+              disabled={isPreSelected}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+
+          if (isPreSelected) {
+            return (
+              <Tooltip content={t("store.localeAlreadyAdded")} side="right">
+                {Component}
+              </Tooltip>
+            )
+          }
+
+          return Component
+        },
+      }),
+      ...base,
+    ],
+    [t, base]
+  )
+}

package/src/routes/store/store-add-locales/index.ts

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

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

@@ -0,0 +1,29 @@
+import { RouteFocusModal } from "../../../components/modals/route-focus-modal"
+import { useStore } from "../../../hooks/api"
+import { AddLocalesForm } from "./components/add-locales-form/add-locales-form"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import { useNavigate } from "react-router-dom"
+
+export const StoreAddLocales = () => {
+  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/store/store-detail/components/store-general-section/store-general-section.tsx

@@ -7,6 +7,7 @@ import { Link } from "react-router-dom"
 import { ActionMenu } from "../../../../../components/common/action-menu"
 import { useSalesChannel, useStockLocation } from "../../../../../hooks/api"
 import { useRegion } from "../../../../../hooks/api/regions"
+import { useFeatureFlag } from "../../../../../providers/feature-flag-provider"
 
 type StoreGeneralSectionProps = {
   store: AdminStore
@@ -14,12 +15,14 @@ type StoreGeneralSectionProps = {
 
 export const StoreGeneralSection = ({ store }: StoreGeneralSectionProps) => {
   const { t } = useTranslation()
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { region } = useRegion(store.default_region_id!, undefined, {
     enabled: !!store.default_region_id,
   })
 
   const defaultCurrency = store.supported_currencies?.find((c) => c.is_default)
+  const defaultLocale = store.supported_locales?.find((l) => l.is_default)
 
   const { sales_channel } = useSalesChannel(store.default_sales_channel_id!, {
     enabled: !!store.default_sales_channel_id,
@@ -85,6 +88,27 @@ export const StoreGeneralSection = ({ store }: StoreGeneralSectionProps) => {
           </Text>
         )}
       </div>
+      {isTranslationsEnabled && (
+        <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
+          <Text size="small" leading="compact" weight="plus">
+            {t("store.defaultLocale")}
+          </Text>
+          {defaultLocale ? (
+            <div className="flex items-center gap-x-2">
+              <Badge size="2xsmall">
+                {defaultLocale.locale_code?.toUpperCase()}
+              </Badge>
+              <Text size="small" leading="compact">
+                {defaultLocale.locale?.name}
+              </Text>
+            </div>
+          ) : (
+            <Text size="small" leading="compact">
+              -
+            </Text>
+          )}
+        </div>
+      )}
       <div className="text-ui-fg-subtle grid grid-cols-2 px-6 py-4">
         <Text size="small" leading="compact" weight="plus">
           {t("store.defaultRegion")}

package/src/routes/store/store-detail/components/store-locale-section/index.ts

@@ -0,0 +1 @@
+export * from "./store-locale-section"

package/src/routes/store/store-detail/components/store-locale-section/store-locale-section.tsx

@@ -0,0 +1,290 @@
+import { Plus, Trash } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import {
+  Checkbox,
+  CommandBar,
+  Container,
+  Heading,
+  toast,
+  usePrompt,
+} from "@medusajs/ui"
+import { keepPreviousData } from "@tanstack/react-query"
+import { RowSelectionState, createColumnHelper } from "@tanstack/react-table"
+import { useMemo, useState } from "react"
+import { useTranslation } from "react-i18next"
+
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { _DataTable } from "../../../../../components/table/data-table"
+import { useUpdateStore } from "../../../../../hooks/api/store"
+import { useDataTable } from "../../../../../hooks/use-data-table"
+import { useLocalesTableColumns } from "../../../common/hooks/use-locales-table-columns"
+import { useLocalesTableQuery } from "../../../common/hooks/use-locales-table-query"
+import { useLocales } from "../../../../../hooks/api"
+
+type StoreLocaleSectionProps = {
+  store: HttpTypes.AdminStore
+}
+
+const PAGE_SIZE = 10
+
+export const StoreLocaleSection = ({ store }: StoreLocaleSectionProps) => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const { searchParams, raw } = useLocalesTableQuery({ pageSize: PAGE_SIZE })
+
+  const { locales, count, isPending, isError, error } = useLocales(
+    {
+      code: store.supported_locales?.map((l) => l.locale_code),
+      ...searchParams,
+    },
+    {
+      placeholderData: keepPreviousData,
+      enabled: !!store.supported_locales?.length,
+    }
+  )
+
+  const columns = useColumns()
+
+  const { table } = useDataTable({
+    data: locales ?? [],
+    columns,
+    count: count,
+    getRowId: (row) => row.code,
+    rowSelection: {
+      state: rowSelection,
+      updater: setRowSelection,
+    },
+    enablePagination: true,
+    enableRowSelection: true,
+    pageSize: PAGE_SIZE,
+    meta: {
+      storeId: store.id,
+      supportedLocales: store.supported_locales,
+      defaultLocaleCode: store.supported_locales?.find((l) => l.is_default)
+        ?.locale_code,
+    },
+  })
+
+  const { mutateAsync } = useUpdateStore(store.id)
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const handleDeleteLocales = async () => {
+    const ids = Object.keys(rowSelection)
+
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("store.removeLocaleWarning", {
+        count: ids.length,
+      }),
+      confirmText: t("actions.remove"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(
+      {
+        supported_locales:
+          store.supported_locales?.filter(
+            (l) => !ids.includes(l.locale_code)
+          ) ?? [],
+      },
+      {
+        onSuccess: () => {
+          setRowSelection({})
+          toast.success(t("store.toast.localesRemoved"))
+        },
+        onError: (e) => {
+          toast.error(e.message)
+        },
+      }
+    )
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  const isLoading = isPending
+
+  return (
+    <Container className="divide-y p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("store.locales")}</Heading>
+        <ActionMenu
+          groups={[
+            {
+              actions: [
+                {
+                  icon: <Plus />,
+                  label: t("actions.add"),
+                  to: "locales",
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <_DataTable
+        orderBy={[
+          { key: "name", label: t("fields.name") },
+          { key: "code", label: t("fields.code") },
+        ]}
+        search
+        pagination
+        table={table}
+        pageSize={PAGE_SIZE}
+        columns={columns}
+        count={!store.supported_locales?.length ? 0 : count}
+        isLoading={!store.supported_locales?.length ? false : isLoading}
+        queryObject={raw}
+      />
+      <CommandBar open={!!Object.keys(rowSelection).length}>
+        <CommandBar.Bar>
+          <CommandBar.Value>
+            {t("general.countSelected", {
+              count: Object.keys(rowSelection).length,
+            })}
+          </CommandBar.Value>
+          <CommandBar.Seperator />
+          <CommandBar.Command
+            action={handleDeleteLocales}
+            shortcut="r"
+            label={t("actions.remove")}
+          />
+        </CommandBar.Bar>
+      </CommandBar>
+    </Container>
+  )
+}
+
+const LocaleActions = ({
+  storeId,
+  locale,
+  supportedLocales,
+  defaultLocaleCode,
+}: {
+  storeId: string
+  locale: HttpTypes.AdminLocale
+  supportedLocales: HttpTypes.AdminStoreLocale[]
+  defaultLocaleCode: string
+}) => {
+  const { mutateAsync } = useUpdateStore(storeId)
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+
+  const handleRemove = async () => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("store.removeLocaleWarning", {
+        count: 1,
+      }),
+      verificationInstruction: t("general.typeToConfirm"),
+      verificationText: locale.name,
+      confirmText: t("actions.remove"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(
+      {
+        supported_locales: supportedLocales.filter(
+          (l) => l.locale_code !== locale.code
+        ),
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("store.toast.localesRemoved"))
+        },
+        onError: (e) => {
+          toast.error(e.message)
+        },
+      }
+    )
+  }
+
+  return (
+    <ActionMenu
+      groups={[
+        {
+          actions: [
+            {
+              icon: <Trash />,
+              label: t("actions.remove"),
+              onClick: handleRemove,
+              disabled: locale.code === defaultLocaleCode,
+            },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+const columnHelper = createColumnHelper<HttpTypes.AdminLocale>()
+
+const useColumns = () => {
+  const base = useLocalesTableColumns()
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      ...base,
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row, table }) => {
+          const { supportedLocales, storeId, defaultLocaleCode } = table.options
+            .meta as {
+            defaultLocaleCode: string
+            supportedLocales: HttpTypes.AdminStoreLocale[]
+            storeId: string
+          }
+
+          return (
+            <LocaleActions
+              storeId={storeId}
+              locale={row.original}
+              supportedLocales={supportedLocales}
+              defaultLocaleCode={defaultLocaleCode}
+            />
+          )
+        },
+      }),
+    ],
+    [base, t]
+  )
+}

package/src/routes/store/store-detail/store-detail.tsx

@@ -8,9 +8,12 @@ import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
 import { useExtension } from "../../../providers/extension-provider"
 import { StoreCurrencySection } from "./components/store-currency-section"
+import { StoreLocaleSection } from "./components/store-locale-section"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 
 export const StoreDetail = () => {
   const initialData = useLoaderData() as Awaited<ReturnType<typeof storeLoader>>
+  const isTranslationsEnabled = useFeatureFlag("translation")
 
   const { store, isPending, isError, error } = useStore(undefined, {
     initialData,
@@ -39,6 +42,7 @@ export const StoreDetail = () => {
     >
       <StoreGeneralSection store={store} />
       <StoreCurrencySection store={store} />
+      {isTranslationsEnabled && <StoreLocaleSection store={store} />}
     </SingleColumnPage>
   )
 }