@medusajs/dashboard 3.0.0-snapshot-20250410112222 → 3.0.0-snapshot-20251104011621

package/src/routes/campaigns/campaign-detail/components/campaign-spend/campaign-spend.tsx

@@ -19,10 +19,12 @@ export const CampaignSpend = ({ campaign }: CampaignSpendProps) => {
           </div>
         </div>
 
-        <Heading level="h3" className="text-ui-fg-subtle font-normal">
-          {campaign.budget?.type === "spend"
-            ? t("campaigns.fields.total_spend")
-            : t("campaigns.fields.total_used")}
+        <Heading level="h2">
+          {campaign.budget?.type === "use_by_attribute"
+            ? t("campaigns.fields.totalUsedByAttribute")
+            : campaign.budget?.type === "spend"
+              ? t("campaigns.fields.total_spend")
+              : t("campaigns.fields.total_used")}
         </Heading>
       </div>
 

package/src/routes/campaigns/campaign-list/components/campaign-list-table.tsx

@@ -50,7 +50,7 @@ export const CampaignListTable = () => {
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading level="h2">{t("campaigns.domain")}</Heading>
+        <Heading level="h1">{t("campaigns.domain")}</Heading>
         <Link to="/campaigns/create">
           <Button size="small" variant="secondary">
             {t("actions.create")}

package/src/routes/campaigns/common/components/create-campaign-form-fields/create-campaign-form-fields.tsx

@@ -14,15 +14,17 @@ import { useTranslation } from "react-i18next"
 
 import { Form } from "../../../../../components/common/form"
 import { useStore } from "../../../../../hooks/api/store"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 import {
   currencies,
   getCurrencySymbol,
 } from "../../../../../lib/data/currencies"
+import { Combobox } from "../../../../../components/inputs/combobox"
 
 export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
   const { t } = useTranslation()
   const { store } = useStore()
-
+  const direction = useDocumentDirection()
   const watchValueType = useWatch({
     control: form.control,
     name: `${fieldScope}budget.type`,
@@ -47,12 +49,10 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
 
     if (isTypeSpend) {
       form.setValue(`campaign.budget.currency_code`, promotionCurrencyValue)
-    }
-
-    if (watchValueType === "usage") {
+    } else {
       form.setValue(`campaign.budget.currency_code`, null)
     }
-  }, [watchValueType])
+  }, [promotionCurrencyValue, isTypeSpend])
 
   if (promotionCurrencyValue) {
     const formCampaignBudget = form.getValues().campaign?.budget
@@ -209,17 +209,20 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
 
               <Form.Control>
                 <RadioGroup
-                  className="flex gap-y-3"
+                  dir={direction}
+                  className="flex gap-x-4 gap-y-3"
                   {...field}
                   onValueChange={field.onChange}
                 >
                   <RadioGroup.ChoiceBox
+                    className="flex-1"
                     value={"usage"}
                     label={t("campaigns.budget.type.usage.title")}
                     description={t("campaigns.budget.type.usage.description")}
                   />
 
                   <RadioGroup.ChoiceBox
+                    className="flex-1"
                     value={"spend"}
                     label={t("campaigns.budget.type.spend.title")}
                     description={t("campaigns.budget.type.spend.description")}
@@ -252,6 +255,7 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
                   </Form.Label>
                   <Form.Control>
                     <Select
+                      dir={direction}
                       {...field}
                       onValueChange={onChange}
                       disabled={!!fieldScope.length}
@@ -341,6 +345,57 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
             )
           }}
         />
+
+        {!isTypeSpend && (
+          <Form.Field
+            control={form.control}
+            name={`${fieldScope}budget.attribute`}
+            render={({ field }) => {
+              return (
+                <Form.Item className="basis-1/2">
+                  <Form.Label
+                    tooltip={t(
+                      "campaigns.budget.fields.budgetAttributeTooltip"
+                    )}
+                  >
+                    {t("campaigns.budget.fields.budgetAttribute")}
+                  </Form.Label>
+
+                  <Form.Control>
+                    <Combobox
+                      key="attribute"
+                      {...field}
+                      onChange={(e) => {
+                        if (typeof e === "undefined") {
+                          field.onChange(null)
+                        } else {
+                          field.onChange(e)
+                        }
+                      }}
+                      allowClear
+                      options={[
+                        {
+                          label: t("fields.customer"),
+                          value: "customer_id",
+                        },
+                        {
+                          label: t("fields.email"),
+                          value: "customer_email",
+                        },
+                        // TEMP disable promotion code for now
+                        // {
+                        //   label: t("fields.promotionCode"),
+                        //   value: "promotion_code",
+                        // },
+                      ]}
+                    ></Combobox>
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
+        )}
       </div>
     </div>
   )

package/src/routes/campaigns/common/constants.ts

@@ -10,5 +10,6 @@ export const DEFAULT_CAMPAIGN_VALUES = {
     type: "usage" as CampaignBudgetTypeValues,
     currency_code: null,
     limit: null,
+    attribute: null,
   },
 }

package/src/routes/categories/category-create/components/create-category-form/create-category-details.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"
 
 import { Form } from "../../../../../components/common/form"
 import { HandleInput } from "../../../../../components/inputs/handle-input"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 import { CreateCategorySchema } from "./schema"
 
 type CreateCategoryDetailsProps = {
@@ -12,7 +13,7 @@ type CreateCategoryDetailsProps = {
 
 export const CreateCategoryDetails = ({ form }: CreateCategoryDetailsProps) => {
   const { t } = useTranslation()
-
+  const direction = useDocumentDirection()
   return (
     <div className="flex flex-col items-center p-16">
       <div className="flex w-full max-w-[720px] flex-col gap-y-8">
@@ -80,7 +81,11 @@ export const CreateCategoryDetails = ({ form }: CreateCategoryDetailsProps) => {
                 <Form.Item>
                   <Form.Label>{t("categories.fields.status.label")}</Form.Label>
                   <Form.Control>
-                    <Select {...field} onValueChange={onChange}>
+                    <Select
+                      dir={direction}
+                      {...field}
+                      onValueChange={onChange}
+                    >
                       <Select.Trigger ref={ref}>
                         <Select.Value />
                       </Select.Trigger>
@@ -109,7 +114,11 @@ export const CreateCategoryDetails = ({ form }: CreateCategoryDetailsProps) => {
                     {t("categories.fields.visibility.label")}
                   </Form.Label>
                   <Form.Control>
-                    <Select {...field} onValueChange={onChange}>
+                    <Select
+                      dir={direction}
+                      {...field}
+                      onValueChange={onChange}
+                    >
                       <Select.Trigger ref={ref}>
                         <Select.Value />
                       </Select.Trigger>

package/src/routes/categories/category-create/components/create-category-form/create-category-form.tsx

@@ -14,6 +14,7 @@ import { transformNullableFormData } from "../../../../../lib/form-helpers"
 import { CreateCategoryDetails } from "./create-category-details"
 import { CreateCategoryNesting } from "./create-category-nesting"
 import { CreateCategoryDetailsSchema, CreateCategorySchema } from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type CreateCategoryFormProps = {
   parentCategoryId: string | null
@@ -29,7 +30,7 @@ export const CreateCategoryForm = ({
 }: CreateCategoryFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const [activeTab, setActiveTab] = useState<Tab>(Tab.DETAILS)
   const [validDetails, setValidDetails] = useState(false)
   const [shouldFreeze, setShouldFreeze] = useState(false)
@@ -129,8 +130,8 @@ export const CreateCategoryForm = ({
         onSubmit={handleSubmit}
         className="flex size-full flex-col overflow-hidden"
       >
-        <ProgressTabs
-          value={activeTab}
+         <ProgressTabs
+        dir={direction}value={activeTab}
           onValueChange={(tab) => handleTabChange(tab as Tab)}
           className="flex size-full flex-col"
         >

package/src/routes/categories/category-detail/components/category-organize-section/category-organize-section.tsx

@@ -111,7 +111,7 @@ const PathDisplay = ({
             </button>
           </Tooltip>
           <div className="flex size-[15px] shrink-0 items-center justify-center">
-            <TriangleRightMini />
+            <TriangleRightMini className="rtl:rotate-180" />
           </div>
           <Text
             size="xsmall"

package/src/routes/categories/category-edit/components/edit-category-form/edit-category-form.tsx

@@ -10,6 +10,7 @@ import { HandleInput } from "../../../../../components/inputs/handle-input"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdateProductCategory } from "../../../../../hooks/api/categories"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 const EditCategorySchema = z.object({
   name: z.string().min(1),
@@ -26,7 +27,7 @@ type EditCategoryFormProps = {
 export const EditCategoryForm = ({ category }: EditCategoryFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const form = useForm<z.infer<typeof EditCategorySchema>>({
     defaultValues: {
       name: category.name,
@@ -126,7 +127,11 @@ export const EditCategoryForm = ({ category }: EditCategoryFormProps) => {
                         {t("categories.fields.status.label")}
                       </Form.Label>
                       <Form.Control>
-                        <Select {...field} onValueChange={onChange}>
+                        <Select
+                          dir={direction}
+                          {...field}
+                          onValueChange={onChange}
+                        >
                           <Select.Trigger ref={ref}>
                             <Select.Value />
                           </Select.Trigger>
@@ -155,7 +160,11 @@ export const EditCategoryForm = ({ category }: EditCategoryFormProps) => {
                         {t("categories.fields.visibility.label")}
                       </Form.Label>
                       <Form.Control>
-                        <Select {...field} onValueChange={onChange}>
+                        <Select
+                          dir={direction}
+                          {...field}
+                          onValueChange={onChange}
+                        >
                           <Select.Trigger ref={ref}>
                             <Select.Value />
                           </Select.Trigger>

package/src/routes/categories/category-products/components/edit-category-products-form/edit-category-products-form.tsx

@@ -148,14 +148,6 @@ export const EditCategoryProductsForm = ({
                 {form.formState.errors.product_ids.message}
               </Hint>
             )}
-            <RouteFocusModal.Close asChild>
-              <Button size="small" variant="secondary">
-                {t("actions.cancel")}
-              </Button>
-            </RouteFocusModal.Close>
-            <Button size="small" type="submit" isLoading={isMutating}>
-              {t("actions.save")}
-            </Button>
           </div>
         </RouteFocusModal.Header>
         <RouteFocusModal.Body className="size-full overflow-hidden">
@@ -178,6 +170,16 @@ export const EditCategoryProductsForm = ({
             search="autofocus"
           />
         </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <RouteFocusModal.Close asChild>
+            <Button size="small" variant="secondary">
+              {t("actions.cancel")}
+            </Button>
+          </RouteFocusModal.Close>
+          <Button size="small" type="submit" isLoading={isMutating}>
+            {t("actions.save")}
+          </Button>
+        </RouteFocusModal.Footer>
       </KeyboundForm>
     </RouteFocusModal.Form>
   )

package/src/routes/collections/collection-add-products/components/add-products-to-collection-form/add-products-to-collection-form.tsx

@@ -157,14 +157,6 @@ export const AddProductsToCollectionForm = ({
             {form.formState.errors.add && (
               <Hint variant="error">{form.formState.errors.add.message}</Hint>
             )}
-            <RouteFocusModal.Close asChild>
-              <Button size="small" variant="secondary">
-                {t("actions.cancel")}
-              </Button>
-            </RouteFocusModal.Close>
-            <Button size="small" type="submit" isLoading={isMutating}>
-              {t("actions.save")}
-            </Button>
           </div>
         </RouteFocusModal.Header>
         <RouteFocusModal.Body className="size-full overflow-hidden">
@@ -187,6 +179,16 @@ export const AddProductsToCollectionForm = ({
             search="autofocus"
           />
         </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <RouteFocusModal.Close asChild>
+            <Button size="small" variant="secondary">
+              {t("actions.cancel")}
+            </Button>
+          </RouteFocusModal.Close>
+          <Button size="small" type="submit" isLoading={isMutating}>
+            {t("actions.save")}
+          </Button>
+        </RouteFocusModal.Footer>
       </KeyboundForm>
     </RouteFocusModal.Form>
   )

package/src/routes/collections/collection-create/components/create-collection-form/create-collection-form.tsx

@@ -46,25 +46,13 @@ export const CreateCollectionForm = () => {
 
   return (
     <RouteFocusModal.Form form={form}>
-      <KeyboundForm onSubmit={handleSubmit}>
-        <RouteFocusModal.Header>
-          <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"
-              variant="primary"
-              type="submit"
-              isLoading={isPending}
-            >
-              {t("actions.create")}
-            </Button>
-          </div>
-        </RouteFocusModal.Header>
-        <RouteFocusModal.Body className="flex flex-col items-center p-16">
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <RouteFocusModal.Header />
+
+        <RouteFocusModal.Body className="flex size-full flex-col items-center p-16">
           <div className="flex w-full max-w-[720px] flex-col gap-y-8">
             <div>
               <Heading>{t("collections.createCollection")}</Heading>
@@ -111,6 +99,21 @@ export const CreateCollectionForm = () => {
             </div>
           </div>
         </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <RouteFocusModal.Close asChild>
+            <Button size="small" variant="secondary">
+              {t("actions.cancel")}
+            </Button>
+          </RouteFocusModal.Close>
+          <Button
+            size="small"
+            variant="primary"
+            type="submit"
+            isLoading={isPending}
+          >
+            {t("actions.create")}
+          </Button>
+        </RouteFocusModal.Footer>
       </KeyboundForm>
     </RouteFocusModal.Form>
   )

package/src/routes/customer-groups/customer-group-add-customers/components/add-customers-form/add-customers-form.tsx

@@ -66,7 +66,7 @@ export const AddCustomersForm = ({
   const filters = useCustomerTableFilters()
 
   const { customers, count, isLoading, isError, error } = useCustomers({
-    fields: "id,email,first_name,last_name,*groups",
+    fields: "id,email,first_name,last_name,has_account,*groups",
     ...searchParams,
   })
 
@@ -137,19 +137,6 @@ export const AddCustomersForm = ({
                 {form.formState.errors.customer_ids.message}
               </Hint>
             )}
-            <RouteFocusModal.Close asChild>
-              <Button variant="secondary" size="small">
-                {t("actions.cancel")}
-              </Button>
-            </RouteFocusModal.Close>
-            <Button
-              type="submit"
-              variant="primary"
-              size="small"
-              isLoading={isPending}
-            >
-              {t("actions.save")}
-            </Button>
           </div>
         </RouteFocusModal.Header>
         <RouteFocusModal.Body className="size-full overflow-hidden">
@@ -176,6 +163,21 @@ export const AddCustomersForm = ({
             }}
           />
         </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <RouteFocusModal.Close asChild>
+            <Button variant="secondary" size="small">
+              {t("actions.cancel")}
+            </Button>
+          </RouteFocusModal.Close>
+          <Button
+            type="submit"
+            variant="primary"
+            size="small"
+            isLoading={isPending}
+          >
+            {t("actions.save")}
+          </Button>
+        </RouteFocusModal.Footer>
       </KeyboundForm>
     </RouteFocusModal.Form>
   )

package/src/routes/inventory/inventory-create/components/inventory-create-form/inventory-create-form.tsx

@@ -36,6 +36,7 @@ import {
 import { queryClient } from "../../../../../lib/query-client"
 import { InventoryAvailabilityForm } from "./inventory-availability-form"
 import { CreateInventoryItemSchema } from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 enum Tab {
   DETAILS = "details",
@@ -54,7 +55,7 @@ export function InventoryCreateForm({ locations }: InventoryCreateFormProps) {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
   const [tab, setTab] = useState<Tab>(Tab.DETAILS)
-
+  const direction = useDocumentDirection()
   const form = useForm<CreateInventoryItemSchema>({
     defaultValues: {
       title: "",
@@ -201,6 +202,7 @@ export function InventoryCreateForm({ locations }: InventoryCreateFormProps) {
   return (
     <RouteFocusModal.Form form={form}>
       <ProgressTabs
+        dir={direction}
         value={tab}
         className="h-full"
         onValueChange={(tab) => onTabChange(tab as Tab)}

package/src/routes/inventory/inventory-detail/components/inventory-item-location-levels.tsx

@@ -15,7 +15,7 @@ export const InventoryItemLocationLevelsSection = ({
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{t("inventory.locationLevels")}</Heading>
+        <Heading level="h2">{t("inventory.locationLevels")}</Heading>
         <Button size="small" variant="secondary" asChild>
           <Link to="locations">{t("inventory.manageLocations")}</Link>
         </Button>

package/src/routes/inventory/inventory-detail/components/inventory-item-reservations.tsx

@@ -15,7 +15,7 @@ export const InventoryItemReservationsSection = ({
   return (
     <Container className="divide-y p-0">
       <div className="flex items-center justify-between px-6 py-4">
-        <Heading>{t("reservations.domain")}</Heading>
+        <Heading level="h2">{t("reservations.domain")}</Heading>
         <Button size="small" variant="secondary" asChild>
           <Link to={`/reservations/create?item_id=${inventoryItem.id}`}>
             {t("actions.create")}

package/src/routes/inventory/inventory-detail/components/inventory-item-variants/variants-section.tsx

@@ -46,7 +46,7 @@ export const InventoryItemVariantsSection = ({
                   </span>
                 </div>
                 <div className="size-7 flex items-center justify-center">
-                  <TriangleRightMini className="text-ui-fg-muted" />
+                  <TriangleRightMini className="text-ui-fg-muted rtl:rotate-180" />
                 </div>
               </div>
             </div>

package/src/routes/inventory/inventory-detail/components/location-levels-table/location-list-table.tsx

@@ -1,18 +1,19 @@
-import { _DataTable } from "../../../../../components/table/data-table"
+import { DataTable } from "../../../../../components/data-table"
 import { useInventoryItemLevels } from "../../../../../hooks/api/inventory"
-import { useDataTable } from "../../../../../hooks/use-data-table"
 import { useLocationListTableColumns } from "./use-location-list-table-columns"
 import { useLocationLevelTableQuery } from "./use-location-list-table-query"
 
 const PAGE_SIZE = 20
+const PREFIX = "invlvl"
 
 export const ItemLocationListTable = ({
   inventory_item_id,
 }: {
   inventory_item_id: string
 }) => {
-  const { searchParams, raw } = useLocationLevelTableQuery({
+  const searchParams = useLocationLevelTableQuery({
     pageSize: PAGE_SIZE,
+    prefix: PREFIX,
   })
 
   const {
@@ -23,33 +24,26 @@ export const ItemLocationListTable = ({
     error,
   } = useInventoryItemLevels(inventory_item_id, {
     ...searchParams,
-    fields: "*stock_locations",
+    fields: "+stock_locations.id,+stock_locations.name",
   })
 
   const columns = useLocationListTableColumns()
 
-  const { table } = useDataTable({
-    data: inventory_levels ?? [],
-    columns,
-    count,
-    enablePagination: true,
-    getRowId: (row) => row.id,
-    pageSize: PAGE_SIZE,
-  })
-
   if (isError) {
     throw error
   }
 
   return (
-    <_DataTable
-      table={table}
+    <DataTable
+      data={inventory_levels ?? []}
       columns={columns}
+      rowCount={count}
       pageSize={PAGE_SIZE}
-      count={count}
+      getRowId={(row) => row.id}
       isLoading={isLoading}
-      pagination
-      queryObject={raw}
+      prefix={PREFIX}
+      layout="fill"
+      enableSearch={false}
     />
   )
 }