@medusajs/dashboard 2.10.4-preview-20250927210155 → 2.10.4-snapshot-20250918173105

package/src/routes/products/product-edit/components/edit-product-form/edit-product-form.tsx

@@ -13,7 +13,6 @@ import { transformNullableFormData } from "../../../../../lib/form-helpers"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { FormExtensionZone } from "../../../../../dashboard-app"
 import { useExtension } from "../../../../../providers/extension-provider"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditProductFormProps = {
   product: HttpTypes.AdminProduct
@@ -32,7 +31,7 @@ const EditProductSchema = zod.object({
 export const EditProductForm = ({ product }: EditProductFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const { getFormFields, getFormConfigs } = useExtension()
   const fields = getFormFields("product", "edit")
   const configs = getFormConfigs("product", "edit")
@@ -98,11 +97,7 @@ export const EditProductForm = ({ product }: EditProductFormProps) => {
                     <Form.Item>
                       <Form.Label>{t("fields.status")}</Form.Label>
                       <Form.Control>
-                        <Select
-                          dir={direction}
-                          {...field}
-                          onValueChange={onChange}
-                        >
+                        <Select {...field} onValueChange={onChange}>
                           <Select.Trigger ref={ref}>
                             <Select.Value />
                           </Select.Trigger>

package/src/routes/products/product-media/components/product-media-gallery/product-media-gallery.tsx

@@ -261,7 +261,7 @@ const Preview = ({
         type="button"
         onClick={prev}
       >
-        <TriangleLeftMini className="rtl:rotate-180" />
+        <TriangleLeftMini />
       </IconButton>
       <div className="flex items-center gap-x-2">
         {visibleItems.map((item) => {
@@ -292,7 +292,7 @@ const Preview = ({
         type="button"
         onClick={next}
       >
-        <TriangleRightMini className="rtl:rotate-180" />
+        <TriangleRightMini />
       </IconButton>
     </div>
   )

package/src/routes/products/product-stock/hooks/use-product-stock-columns.tsx

@@ -192,8 +192,7 @@ export const useProductStockColumns = (
                     return (
                       <div className="flex size-full items-center gap-x-2">
                         <Switch
-                          dir="ltr"
-                          className="shrink-0 cursor-not-allowed rtl:rotate-180"
+                          className="shrink-0 cursor-not-allowed"
                           tabIndex={-1}
                           size="small"
                           checked={checked}

package/src/routes/profile/profile-edit/components/edit-profile-form/edit-profile-form.tsx

@@ -10,7 +10,6 @@ import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdateUser } from "../../../../../hooks/api/users"
 import { languages } from "../../../../../i18n/languages"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditProfileProps = {
   user: HttpTypes.AdminUser
@@ -27,7 +26,7 @@ const EditProfileSchema = zod.object({
 export const EditProfileForm = ({ user }: EditProfileProps) => {
   const { t, i18n } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const form = useForm<zod.infer<typeof EditProfileSchema>>({
     defaultValues: {
       first_name: user.first_name ?? "",
@@ -112,11 +111,7 @@ export const EditProfileForm = ({ user }: EditProfileProps) => {
                   </div>
                   <div>
                     <Form.Control>
-                      <Select
-                        dir={direction}
-                        {...field}
-                        onValueChange={field.onChange}
-                      >
+                      <Select {...field} onValueChange={field.onChange}>
                         <Select.Trigger ref={ref} className="py-1 text-[13px]">
                           <Select.Value
                             placeholder={t("profile.edit.languagePlaceholder")}
@@ -156,8 +151,7 @@ export const EditProfileForm = ({ user }: EditProfileProps) => {
                       {t("profile.fields.usageInsightsLabel")}
                     </Form.Label>
                     <Form.Control>
-                      <Switch dir="ltr"
-                        className="rtl:rotate-180"
+                      <Switch
                         {...rest}
                         checked={value}
                         onCheckedChange={onChange}

package/src/routes/promotions/common/edit-rules/components/rules-form-field/rules-form-field.tsx

@@ -14,7 +14,6 @@ import {
   usePromotionRuleAttributes,
   usePromotionRules,
 } from "../../../../../../hooks/api/promotions"
-import { useDocumentDirection } from "../../../../../../hooks/use-document-direction"
 import { CreatePromotionSchemaType } from "../../../../promotion-create/components/create-promotion-form/form-schema"
 import { generateRuleAttributes } from "../edit-rules-form/utils"
 import { RuleValueFormField } from "../rule-value-form-field"
@@ -45,7 +44,6 @@ export const RulesFormField = ({
   const initialRulesSet = useRef(false)
 
   const { t } = useTranslation()
-  const direction = useDocumentDirection()
   const formData = form.getValues()
   const { attributes } = usePromotionRuleAttributes(
     ruleType,
@@ -226,7 +224,6 @@ export const RulesFormField = ({
                         <Form.Control>
                           {!disabled ? (
                             <Select
-                              dir={direction}
                               {...fieldProps}
                               onValueChange={onValueChange}
                               disabled={fieldRule.required}
@@ -297,7 +294,6 @@ export const RulesFormField = ({
                           <Form.Control>
                             {!disabled ? (
                               <Select
-                                dir= {direction}
                                 {...fieldProps}
                                 disabled={!fieldRule.attribute}
                                 onValueChange={onChange}

package/src/routes/promotions/promotion-add-campaign/components/add-campaign-promotion-form/add-campaign-promotion-form.tsx

@@ -1,9 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { AdminCampaign, AdminPromotion } from "@medusajs/types"
-import { Button, RadioGroup, toast } from "@medusajs/ui"
+import { Button, RadioGroup, Select, Text, toast } from "@medusajs/ui"
 import { useEffect } from "react"
 import { useForm, useWatch } from "react-hook-form"
-import { useTranslation } from "react-i18next"
+import { Trans, useTranslation } from "react-i18next"
 import * as zod from "zod"
 import { Form } from "../../../../../components/common/form"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
@@ -11,14 +11,10 @@ import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdatePromotion } from "../../../../../hooks/api/promotions"
 import { CreateCampaignFormFields } from "../../../../campaigns/common/components/create-campaign-form-fields"
 import { CampaignDetails } from "./campaign-details"
-import { sdk } from "../../../../../lib/client"
-import { useComboboxData } from "../../../../../hooks/use-combobox-data"
-import { Combobox } from "../../../../../components/inputs/combobox"
-import { useCampaign } from "../../../../../hooks/api/campaigns"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditPromotionFormProps = {
   promotion: AdminPromotion
+  campaigns: AdminCampaign[]
 }
 
 const EditPromotionSchema = zod.object({
@@ -28,16 +24,14 @@ const EditPromotionSchema = zod.object({
 
 export const AddCampaignPromotionFields = ({
   form,
+  campaigns,
   withNewCampaign = true,
-  promotionCurrencyCode,
 }: {
   form: any
+  campaigns: AdminCampaign[]
   withNewCampaign?: boolean
-  promotionCurrencyCode?: string
 }) => {
   const { t } = useTranslation()
-  const direction = useDocumentDirection()
-
   const watchCampaignId = useWatch({
     control: form.control,
     name: "campaign_id",
@@ -48,30 +42,7 @@ export const AddCampaignPromotionFields = ({
     name: "campaign_choice",
   })
 
-  const campaignsCombobox = useComboboxData({
-    queryFn: (params) =>
-      sdk.admin.campaign.list({
-        ...params,
-      }),
-    queryKey: ["campaigns"],
-    getOptions: (data) =>
-      data.campaigns.map((campaign) => ({
-        label: campaign.name.toUpperCase(),
-        value: campaign.id,
-        disabled:
-          campaign.budget?.currency_code &&
-          campaign.budget?.currency_code?.toLowerCase() !==
-            promotionCurrencyCode?.toLowerCase(), // also cannot add promotion which doesn't have currency defined to a campaign with a currency amount budget
-      })),
-  })
-
-  const { campaign: selectedCampaign } = useCampaign(
-    watchCampaignId as string,
-    undefined,
-    {
-      enabled: !!watchCampaignId,
-    }
-  )
+  const selectedCampaign = campaigns.find((c) => c.id === watchCampaignId)
 
   return (
     <div className="flex flex-col gap-y-8">
@@ -85,7 +56,6 @@ export const AddCampaignPromotionFields = ({
 
               <Form.Control>
                 <RadioGroup
-                  dir={direction}
                   className="grid grid-cols-1 gap-3"
                   {...field}
                   value={field.value}
@@ -127,24 +97,54 @@ export const AddCampaignPromotionFields = ({
         <Form.Field
           control={form.control}
           name="campaign_id"
-          render={({ field: { onChange, ...field } }) => {
+          render={({ field: { onChange, ref, ...field } }) => {
             return (
               <Form.Item>
-                <Form.Label tooltip={t("campaigns.fields.campaign_id.hint")}>
+                <Form.Label>
                   {t("promotions.form.campaign.existing.title")}
                 </Form.Label>
 
                 <Form.Control>
-                  <Combobox
-                    dir={direction}
-                    options={campaignsCombobox.options}
-                    searchValue={campaignsCombobox.searchValue}
-                    onSearchValueChange={campaignsCombobox.onSearchValueChange}
-                    onChange={onChange}
-                    {...field}
-                  ></Combobox>
+                  <Select onValueChange={onChange} {...field}>
+                    <Select.Trigger ref={ref}>
+                      <Select.Value />
+                    </Select.Trigger>
+
+                    <Select.Content>
+                      {!campaigns.length && (
+                        <div className="flex h-[120px] flex-col items-center justify-center gap-2 p-2">
+                          <span className="txt-small text-ui-fg-subtle font-medium">
+                            {t(
+                              "promotions.form.campaign.existing.placeholder.title"
+                            )}
+                          </span>
+                          <span className="txt-small text-ui-fg-muted">
+                            {t(
+                              "promotions.form.campaign.existing.placeholder.desc"
+                            )}
+                          </span>
+                        </div>
+                      )}
+                      {campaigns.map((c) => (
+                        <Select.Item key={c.id} value={c.id}>
+                          {c.name?.toUpperCase()}
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select>
                 </Form.Control>
 
+                <Text
+                  size="small"
+                  leading="compact"
+                  className="text-ui-fg-subtle"
+                >
+                  <Trans
+                    t={t}
+                    i18nKey="campaigns.fields.campaign_id.hint"
+                    components={[<br key="break" />]}
+                  />
+                </Text>
                 <Form.ErrorMessage />
               </Form.Item>
             )
@@ -156,13 +156,14 @@ export const AddCampaignPromotionFields = ({
         <CreateCampaignFormFields form={form} fieldScope="campaign." />
       )}
 
-      <CampaignDetails campaign={selectedCampaign as AdminCampaign} />
+      <CampaignDetails campaign={selectedCampaign} />
     </div>
   )
 }
 
 export const AddCampaignPromotionForm = ({
   promotion,
+  campaigns,
 }: EditPromotionFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
@@ -220,8 +221,8 @@ export const AddCampaignPromotionForm = ({
         <RouteDrawer.Body className="size-full overflow-auto">
           <AddCampaignPromotionFields
             form={form}
+            campaigns={campaigns}
             withNewCampaign={false}
-            promotionCurrencyCode={promotion.application_method?.currency_code}
           />
         </RouteDrawer.Body>
 

package/src/routes/promotions/promotion-add-campaign/promotion-add-campaign.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"
 import { useParams } from "react-router-dom"
 
 import { RouteDrawer } from "../../../components/modals"
+import { useCampaigns } from "../../../hooks/api/campaigns"
 import { usePromotion } from "../../../hooks/api/promotions"
 import { AddCampaignPromotionForm } from "./components/add-campaign-promotion-form"
 
@@ -11,8 +12,24 @@ export const PromotionAddCampaign = () => {
   const { t } = useTranslation()
   const { promotion, isPending, isError, error } = usePromotion(id!)
 
-  if (isError) {
-    throw error
+  let campaignQuery = {}
+
+  if (promotion?.application_method?.currency_code) {
+    campaignQuery = {
+      budget: {
+        currency_code: promotion?.application_method?.currency_code,
+      },
+    }
+  }
+
+  const {
+    campaigns,
+    isPending: areCampaignsLoading,
+    isError: isCampaignError,
+    error: campaignError,
+  } = useCampaigns(campaignQuery)
+  if (isError || isCampaignError) {
+    throw error || campaignError
   }
 
   return (
@@ -21,8 +38,8 @@ export const PromotionAddCampaign = () => {
         <Heading>{t("promotions.campaign.edit.header")}</Heading>
       </RouteDrawer.Header>
 
-      {!isPending && promotion && (
-        <AddCampaignPromotionForm promotion={promotion} />
+      {!isPending && !areCampaignsLoading && promotion && campaigns && (
+        <AddCampaignPromotionForm promotion={promotion} campaigns={campaigns} />
       )}
     </RouteDrawer>
   )

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

@@ -46,7 +46,6 @@ import { AddCampaignPromotionFields } from "../../../promotion-add-campaign/comp
 import { Tab } from "./constants"
 import { CreatePromotionSchema } from "./form-schema"
 import { templates } from "./templates"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 const defaultValues = {
   campaign_id: undefined,
@@ -81,7 +80,7 @@ export const CreatePromotionForm = () => {
 
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const form = useForm<z.infer<typeof CreatePromotionSchema>>({
     defaultValues,
     resolver: zodResolver(CreatePromotionSchema),
@@ -365,7 +364,6 @@ export const CreatePromotionForm = () => {
     <RouteFocusModal.Form form={form}>
       <KeyboundForm className="flex h-full flex-col" onSubmit={handleSubmit}>
         <ProgressTabs
-          dir={direction}
           value={tab}
           onValueChange={(tab) => handleTabChange(tab as Tab)}
           className="flex h-full flex-col overflow-hidden"
@@ -419,7 +417,6 @@ export const CreatePromotionForm = () => {
 
                           <Form.Control>
                             <RadioGroup
-                              dir={direction}
                               key={"template_id"}
                               className="flex-col gap-y-3"
                               {...field}
@@ -489,7 +486,6 @@ export const CreatePromotionForm = () => {
 
                           <Form.Control>
                             <RadioGroup
-                              dir={direction}
                               className="flex gap-y-3"
                               {...field}
                               value={field.value}
@@ -534,7 +530,6 @@ export const CreatePromotionForm = () => {
 
                           <Form.Control>
                             <RadioGroup
-                              dir={direction}
                               className="flex gap-y-3"
                               {...field}
                               value={field.value}
@@ -624,8 +619,7 @@ export const CreatePromotionForm = () => {
                                   </div>
                                   <Form.Control className="mr-2 self-center">
                                     <Switch
-                                      dir="ltr"
-                                      className="mt-[2px] rtl:rotate-180"
+                                      className="mt-[2px]"
                                       checked={!!value}
                                       onCheckedChange={onChange}
                                       {...field}
@@ -653,7 +647,6 @@ export const CreatePromotionForm = () => {
                             </Form.Label>
                             <Form.Control>
                               <RadioGroup
-                                dir={direction}
                                 className="flex gap-y-3"
                                 {...field}
                                 onValueChange={field.onChange}
@@ -706,8 +699,7 @@ export const CreatePromotionForm = () => {
                               </Form.Label>
                               <Form.Control>
                                 <RadioGroup
-                                  dir={direction}
-                                className="flex gap-y-3"
+                                  className="flex gap-y-3"
                                   {...field}
                                   onValueChange={field.onChange}
                                 >
@@ -897,7 +889,6 @@ export const CreatePromotionForm = () => {
 
                               <Form.Control>
                                 <RadioGroup
-                                  dir={direction}
                                   className="flex gap-y-3"
                                   {...field}
                                   onValueChange={field.onChange}

package/src/routes/promotions/promotion-edit-details/components/edit-promotion-form/edit-promotion-details-form.tsx

@@ -16,7 +16,6 @@ import {
   getCurrencySymbol,
 } from "../../../../../lib/data/currencies"
 import { SwitchBox } from "../../../../../components/common/switch-box"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type EditPromotionFormProps = {
   promotion: AdminPromotion
@@ -100,7 +99,7 @@ export const EditPromotionDetailsForm = ({
       form.setValue("is_tax_inclusive", false)
     }
   }, [allocationWatchValue, form, promotion])
-  const direction = useDocumentDirection()
+
   return (
     <RouteDrawer.Form form={form}>
       <KeyboundForm
@@ -118,7 +117,6 @@ export const EditPromotionDetailsForm = ({
                     <Form.Label>{t("promotions.form.status.label")}</Form.Label>
                     <Form.Control>
                       <RadioGroup
-                        dir={direction}
                         className="flex-col gap-y-3"
                         {...field}
                         value={field.value}
@@ -164,7 +162,6 @@ export const EditPromotionDetailsForm = ({
                     <Form.Label>{t("promotions.form.method.label")}</Form.Label>
                     <Form.Control>
                       <RadioGroup
-                        dir={direction}
                         className="flex-col gap-y-3"
                         {...field}
                         value={field.value}
@@ -245,7 +242,6 @@ export const EditPromotionDetailsForm = ({
                         </Form.Label>
                         <Form.Control>
                           <RadioGroup
-                            dir={direction}
                             className="flex-col gap-y-3"
                             {...field}
                             onValueChange={field.onChange}
@@ -340,7 +336,6 @@ export const EditPromotionDetailsForm = ({
                         </Form.Label>
                         <Form.Control>
                           <RadioGroup
-                            dir={direction}
                             className="flex-col gap-y-3"
                             {...field}
                             onValueChange={field.onChange}

package/src/routes/regions/region-create/components/create-region-form/create-region-form.tsx

@@ -17,7 +17,7 @@ import { useForm, useWatch } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
-import { RegionCountryDTO } from "@medusajs/types"
+import { PaymentProviderDTO, RegionCountryDTO } from "@medusajs/types"
 
 import { Form } from "../../../../../components/common/form"
 import { Combobox } from "../../../../../components/inputs/combobox"
@@ -37,12 +37,10 @@ import { formatProvider } from "../../../../../lib/format-provider"
 import { useCountries } from "../../../common/hooks/use-countries"
 import { useCountryTableColumns } from "../../../common/hooks/use-country-table-columns"
 import { useCountryTableQuery } from "../../../common/hooks/use-country-table-query"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
-import { useComboboxData } from "../../../../../hooks/use-combobox-data"
-import { sdk } from "../../../../../lib/client"
 
 type CreateRegionFormProps = {
   currencies: CurrencyInfo[]
+  paymentProviders: PaymentProviderDTO[]
 }
 
 const CreateRegionSchema = zod.object({
@@ -59,11 +57,14 @@ const PAGE_SIZE = 50
 
 const STACKED_MODAL_ID = "countries-modal"
 
-export const CreateRegionForm = ({ currencies }: CreateRegionFormProps) => {
+export const CreateRegionForm = ({
+  currencies,
+  paymentProviders,
+}: CreateRegionFormProps) => {
   const { setIsOpen } = useStackedModal()
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
   const { handleSuccess } = useRouteModal()
-  const direction = useDocumentDirection()
+
   const form = useForm<zod.infer<typeof CreateRegionSchema>>({
     defaultValues: {
       name: "",
@@ -179,17 +180,6 @@ export const CreateRegionForm = ({ currencies }: CreateRegionFormProps) => {
     setRowSelection({})
   }
 
-  const comboboxProviders = useComboboxData({
-    queryFn: (params) =>
-      sdk.admin.payment.listPaymentProviders({ ...params, is_enabled: true }),
-    queryKey: ["payment_providers"],
-    getOptions: (data) =>
-      data.payment_providers.map((pp) => ({
-        label: formatProvider(pp.id),
-        value: pp.id,
-      })),
-  })
-
   return (
     <RouteFocusModal.Form form={form}>
       <KeyboundForm
@@ -236,11 +226,7 @@ export const CreateRegionForm = ({ currencies }: CreateRegionFormProps) => {
                         <Form.Item>
                           <Form.Label>{t("fields.currency")}</Form.Label>
                           <Form.Control>
-                            <Select
-                              dir={direction}
-                              {...field}
-                              onValueChange={onChange}
-                            >
+                            <Select {...field} onValueChange={onChange}>
                               <Select.Trigger ref={ref}>
                                 <Select.Value />
                               </Select.Trigger>
@@ -274,8 +260,6 @@ export const CreateRegionForm = ({ currencies }: CreateRegionFormProps) => {
                           <Form.Label>{t("fields.automaticTaxes")}</Form.Label>
                           <Form.Control>
                             <Switch
-                              dir="ltr"
-                              className="rtl:rotate-180"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}
@@ -303,8 +287,6 @@ export const CreateRegionForm = ({ currencies }: CreateRegionFormProps) => {
                           </Form.Label>
                           <Form.Control>
                             <Switch
-                              className="rtl:rotate-180"
-                              dir="ltr"
                               {...field}
                               checked={value}
                               onCheckedChange={onChange}
@@ -424,9 +406,10 @@ export const CreateRegionForm = ({ currencies }: CreateRegionFormProps) => {
                           </Form.Label>
                           <Form.Control>
                             <Combobox
-                              forceHideInput
-                              options={comboboxProviders.options}
-                              fetchNextPage={comboboxProviders.fetchNextPage}
+                              options={paymentProviders.map((pp) => ({
+                                label: formatProvider(pp.id),
+                                value: pp.id,
+                              }))}
                               {...field}
                             />
                           </Form.Control>

package/src/routes/regions/region-create/region-create.tsx

@@ -1,4 +1,5 @@
 import { RouteFocusModal } from "../../../components/modals/route-focus-modal"
+import { usePaymentProviders } from "../../../hooks/api/payments"
 import { useStore } from "../../../hooks/api/store"
 import { currencies } from "../../../lib/data/currencies"
 import { CreateRegionForm } from "./components/create-region-form"
@@ -9,6 +10,9 @@ export const RegionCreate = () => {
   const storeCurrencies = (store?.supported_currencies ?? []).map(
     (c) => currencies[c.currency_code.toUpperCase()]
   )
+  const { payment_providers: paymentProviders = [] } = usePaymentProviders({
+    is_enabled: true,
+  })
 
   if (isError) {
     throw error
@@ -16,7 +20,12 @@ export const RegionCreate = () => {
 
   return (
     <RouteFocusModal>
-      {!isLoading && store && <CreateRegionForm currencies={storeCurrencies} />}
+      {!isLoading && store && (
+        <CreateRegionForm
+          currencies={storeCurrencies}
+          paymentProviders={paymentProviders}
+        />
+      )}
     </RouteFocusModal>
   )
 }