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

package/src/routes/orders/order-allocate-items/components/order-create-fulfillment-form/order-allocate-items-form.tsx

@@ -19,6 +19,8 @@ import { useStockLocations } from "../../../../../hooks/api/stock-locations"
 import { queryClient } from "../../../../../lib/query-client"
 import { AllocateItemsSchema } from "./constants"
 import { OrderAllocateItemsItem } from "./order-allocate-items-item"
+import { checkInventoryKit } from "./utils"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 type OrderAllocateItemsFormProps = {
   order: AdminOrder
@@ -27,7 +29,7 @@ type OrderAllocateItemsFormProps = {
 export function OrderAllocateItemsForm({ order }: OrderAllocateItemsFormProps) {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-
+  const direction = useDocumentDirection()
   const [disableSubmit, setDisableSubmit] = useState(false)
   const [filterTerm, setFilterTerm] = useState("")
 
@@ -84,16 +86,18 @@ export function OrderAllocateItemsForm({ order }: OrderAllocateItemsFormProps) {
       const promises = payload.map(([itemId, inventoryId, quantity]) =>
         allocateItems({
           location_id: data.location_id,
-          inventory_item_id: inventoryId,
-          line_item_id: itemId,
-          quantity,
+          inventory_item_id: inventoryId as string,
+          line_item_id: itemId as string,
+          quantity: Number(quantity),
         })
+          .then(() => ({ success: true, inventory_item_id: inventoryId }))
+          .catch(() => ({ success: false, inventory_item_id: inventoryId }))
       )
 
       /**
        * TODO: we should have bulk endpoint for this so this is executed in a workflow and can be reverted
        */
-      await Promise.all(promises)
+      const results = await Promise.all(promises)
 
       // invalidate order details so we get new item.variant.inventory items
       await queryClient.invalidateQueries({
@@ -102,10 +106,19 @@ export function OrderAllocateItemsForm({ order }: OrderAllocateItemsFormProps) {
 
       handleSuccess(`/orders/${order.id}`)
 
-      toast.success(t("general.success"), {
-        description: t("orders.allocateItems.toast.created"),
-        dismissLabel: t("actions.close"),
-      })
+      if (results.some((r) => !r.success)) {
+        const failedItems = results
+          .filter((r) => !r.success)
+          .map((r) => r.inventory_item_id)
+          .join(", ")
+
+        toast.error(t("general.error"), {
+          description: t("orders.allocateItems.toast.error", {
+            items: failedItems,
+          }),
+          dismissLabel: t("actions.close"),
+        })
+      }
     } catch (e) {
       toast.error(t("general.error"), {
         description: e.message,
@@ -219,7 +232,11 @@ export function OrderAllocateItemsForm({ order }: OrderAllocateItemsFormProps) {
                             </div>
                             <div className="flex-1">
                               <Form.Control>
-                                <Select onValueChange={onChange} {...field}>
+                                <Select
+                                  dir={direction}
+                                  onValueChange={onChange}
+                                  {...field}
+                                >
                                   <Select.Trigger
                                     className="bg-ui-bg-base"
                                     ref={ref}
@@ -313,7 +330,7 @@ function defaultAllocations(items: OrderLineItemDTO) {
   const ret = {}
 
   items.forEach((item) => {
-    const hasInventoryKit = item.variant?.inventory_items.length > 1
+    const hasInventoryKit = checkInventoryKit(item)
 
     ret[
       hasInventoryKit

package/src/routes/orders/order-allocate-items/components/order-create-fulfillment-form/order-allocate-items-item.tsx

@@ -14,6 +14,7 @@ import { Thumbnail } from "../../../../../components/common/thumbnail"
 import { getFulfillableQuantity } from "../../../../../lib/order-item"
 import { Form } from "../../../../../components/common/form"
 import { AllocateItemsSchema } from "./constants"
+import { checkInventoryKit } from "./utils"
 
 type OrderEditItemProps = {
   item: OrderLineItemDTO
@@ -46,8 +47,7 @@ export function OrderAllocateItemsItem({
     name: "quantity",
   })
 
-  const hasInventoryKit =
-    !!variant?.inventory_items.length && variant?.inventory_items.length > 1
+  const hasInventoryKit = checkInventoryKit(item)
 
   const { availableQuantity, inStockQuantity } = useMemo(() => {
     if (!variant || !locationId) {

package/src/routes/orders/order-allocate-items/components/order-create-fulfillment-form/utils.ts

@@ -0,0 +1,28 @@
+import {
+  AdminProductVariant,
+  AdminProductVariantInventoryItemLink,
+  OrderLineItemDTO,
+} from "@medusajs/types"
+
+/**
+ * Check if the line item has inventory kit.
+ */
+export function checkInventoryKit(
+  item: OrderLineItemDTO & {
+    variant?: AdminProductVariant & {
+      inventory_items: AdminProductVariantInventoryItemLink[]
+    }
+  }
+) {
+  const variant = item.variant
+
+  if (!variant) {
+    return false
+  }
+
+  return (
+    (!!variant.inventory_items.length && variant.inventory_items.length > 1) ||
+    (variant.inventory_items.length === 1 &&
+      variant.inventory_items[0].required_quantity! > 1)
+  )
+}

package/src/routes/orders/order-balance-settlement/components/order-balance-settlement-form/index.ts

@@ -0,0 +1 @@
+export * from "./order-balance-settlement-form"

package/src/routes/orders/order-balance-settlement/components/order-balance-settlement-form/order-balance-settlement-form.tsx

@@ -0,0 +1,396 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { AdminOrder, AdminPayment } from "@medusajs/types"
+import {
+  Button,
+  clx,
+  CurrencyInput,
+  Divider,
+  Label,
+  RadioGroup,
+  Select,
+  Textarea,
+  toast,
+} from "@medusajs/ui"
+import { useEffect, useMemo, useState } from "react"
+import { formatValue } from "react-currency-input-field"
+import { useForm } from "react-hook-form"
+import { useSearchParams } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { Form } from "../../../../../components/common/form"
+import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import {
+  useCreateOrderCreditLine,
+  useRefundPayment,
+} from "../../../../../hooks/api"
+import { currencies } from "../../../../../lib/data/currencies"
+import { formatCurrency } from "../../../../../lib/format-currency"
+import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
+import { getPaymentsFromOrder } from "../../../../../lib/orders"
+
+const OrderBalanceSettlementSchema = zod.object({
+  settlement_type: zod.enum(["credit_line", "refund"]),
+  refund: zod
+    .object({
+      amount: zod.object({
+        value: zod.string().or(zod.number()).optional(),
+        float: zod.number().or(zod.null()),
+      }),
+      note: zod.string().optional(),
+    })
+    .optional(),
+  credit_line: zod
+    .object({
+      amount: zod.object({
+        value: zod.string().or(zod.number()).optional(),
+        float: zod.number().or(zod.null()),
+      }),
+      note: zod.string().optional(),
+    })
+    .optional(),
+})
+
+export const OrderBalanceSettlementForm = ({
+  order,
+}: {
+  order: AdminOrder
+}) => {
+  const { t } = useTranslation()
+  const [searchParams] = useSearchParams()
+  const { handleSuccess } = useRouteModal()
+  const paymentId = searchParams.get("paymentId")
+  const payments = getPaymentsFromOrder(order)
+  const pendingDifference = order.summary.pending_difference * -1
+
+  const [activePayment, setActivePayment] = useState<AdminPayment | null>(
+    paymentId ? payments.find((p) => p.id === paymentId) || null : null
+  )
+
+  const form = useForm<zod.infer<typeof OrderBalanceSettlementSchema>>({
+    defaultValues: {
+      settlement_type: "refund",
+      refund: {
+        amount: {
+          value: "",
+          float: null,
+        },
+      },
+      credit_line: {
+        amount: {
+          value: "",
+          float: null,
+        },
+      },
+    },
+    resolver: zodResolver(OrderBalanceSettlementSchema),
+  })
+
+  const { mutateAsync: createCreditLine, isPending: isCreditLinePending } =
+    useCreateOrderCreditLine(order.id)
+
+  const { mutateAsync: createRefund, isPending: isRefundPending } =
+    useRefundPayment(order.id, activePayment?.id!)
+
+  const settlementType = form.watch("settlement_type")
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    if (data.settlement_type === "credit_line") {
+      if (data.credit_line?.amount.float === null) {
+        return
+      }
+      await createCreditLine(
+        {
+          amount: data.credit_line!.amount.float! * -1,
+          reference: "refund",
+          reference_id: order.id,
+        },
+        {
+          onSuccess: () => {
+            toast.success(t("orders.creditLines.createCreditLineSuccess"))
+
+            handleSuccess()
+          },
+          onError: (error) => {
+            toast.error(error.message)
+          },
+        }
+      )
+    }
+
+    if (data.settlement_type === "refund") {
+      if (data.refund?.amount.float === null) {
+        return
+      }
+      await createRefund(
+        {
+          amount: data.refund!.amount!.float!,
+          note: data.refund!.note,
+        },
+        {
+          onSuccess: () => {
+            toast.success(
+              t("orders.payment.refundPaymentSuccess", {
+                amount: formatCurrency(
+                  data.refund!.amount!.float!,
+                  order.currency_code!
+                ),
+              })
+            )
+
+            handleSuccess()
+          },
+          onError: (error) => {
+            toast.error(error.message)
+          },
+        }
+      )
+    }
+  })
+
+  const currency = useMemo(
+    () => currencies[order.currency_code.toUpperCase()],
+    [order.currency_code]
+  )
+
+  useEffect(() => {
+    form.clearErrors()
+
+    const _minimum = activePayment?.amount
+      ? Math.min(pendingDifference, activePayment.amount)
+      : pendingDifference
+
+    const minimum = {
+      value: _minimum.toFixed(currency.decimal_digits),
+      float: _minimum,
+    }
+
+    if (settlementType === "refund") {
+      form.setValue("refund.amount", minimum)
+    }
+
+    if (settlementType === "credit_line") {
+      form.setValue("credit_line.amount", minimum)
+    }
+  }, [settlementType, activePayment, pendingDifference, form, currency])
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex size-full flex-col overflow-hidden"
+      >
+        <RouteDrawer.Body className="flex-1 overflow-auto">
+          <div className="flex flex-col gap-y-4">
+            <div className="flex flex-col gap-y-4">
+              <Label className="txt-compact-small font-sans font-medium">
+                {t("orders.balanceSettlement.settlementType")}
+              </Label>
+
+              <RadioGroup
+                className="flex flex-col gap-y-3"
+                value={settlementType}
+                onValueChange={(value: "credit_line" | "refund") =>
+                  form.setValue("settlement_type", value)
+                }
+              >
+                <RadioGroup.ChoiceBox
+                  value={"refund"}
+                  description={t(
+                    "orders.balanceSettlement.settlementTypes.paymentMethodDescription"
+                  )}
+                  label={t(
+                    "orders.balanceSettlement.settlementTypes.paymentMethod"
+                  )}
+                  className={clx("basis-1/2")}
+                />
+
+                <RadioGroup.ChoiceBox
+                  value={"credit_line"}
+                  description={t(
+                    "orders.balanceSettlement.settlementTypes.creditLineDescription"
+                  )}
+                  label={t(
+                    "orders.balanceSettlement.settlementTypes.creditLine"
+                  )}
+                  className={clx("basis-1/2")}
+                />
+              </RadioGroup>
+            </div>
+
+            <Divider />
+
+            {settlementType === "refund" && (
+              <>
+                <div className="flex flex-col gap-y-4">
+                  <Select
+                    defaultValue={activePayment?.id}
+                    onValueChange={(value) => {
+                      setActivePayment(payments.find((p) => p.id === value)!)
+                    }}
+                  >
+                    <Label className="txt-compact-small mb-[-6px] font-sans font-medium">
+                      {t("orders.payment.selectPaymentToRefund")}
+                    </Label>
+
+                    <Select.Trigger>
+                      <Select.Value
+                        placeholder={t("orders.payment.selectPaymentToRefund")}
+                      />
+                    </Select.Trigger>
+
+                    <Select.Content>
+                      {payments.map((payment) => {
+                        const totalRefunded =
+                          payment.refunds?.reduce(
+                            (acc, next) => next.amount + acc,
+                            0
+                          ) ?? 0
+
+                        return (
+                          <Select.Item
+                            value={payment!.id}
+                            key={payment.id}
+                            disabled={
+                              !!payment.canceled_at ||
+                              totalRefunded >= payment.amount
+                            }
+                          >
+                            <span>
+                              {getLocaleAmount(
+                                payment.amount as number,
+                                payment.currency_code
+                              )}
+                              {" - "}
+                            </span>
+                            <span>{payment.provider_id}</span>
+                            <span> - ({payment.id.replace("pay_", "")})</span>
+                          </Select.Item>
+                        )
+                      })}
+                    </Select.Content>
+                  </Select>
+                </div>
+
+                <Form.Field
+                  control={form.control}
+                  name="refund.amount"
+                  render={({ field: { onChange, ...field } }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.amount")}</Form.Label>
+
+                        <Form.Control>
+                          <CurrencyInput
+                            {...field}
+                            min={0}
+                            placeholder={formatValue({
+                              value: "0",
+                              decimalScale: currency.decimal_digits,
+                            })}
+                            decimalScale={currency.decimal_digits}
+                            symbol={currency.symbol_native}
+                            code={currency.code}
+                            value={field.value.value}
+                            onValueChange={(_value, _name, values) =>
+                              onChange({
+                                value: values?.value ?? "",
+                                float: values?.float ?? null,
+                              })
+                            }
+                            autoFocus
+                          />
+                        </Form.Control>
+
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+
+                <Form.Field
+                  control={form.control}
+                  name={`refund.note`}
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.note")}</Form.Label>
+
+                        <Form.Control>
+                          <Textarea {...field} />
+                        </Form.Control>
+
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </>
+            )}
+
+            {settlementType === "credit_line" && (
+              <>
+                <Form.Field
+                  control={form.control}
+                  name="credit_line.amount"
+                  render={({ field: { onChange, ...field } }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.amount")}</Form.Label>
+
+                        <Form.Control>
+                          <CurrencyInput
+                            {...field}
+                            min={0}
+                            placeholder={formatValue({
+                              value: "0",
+                              decimalScale: currency.decimal_digits,
+                            })}
+                            decimalScale={currency.decimal_digits}
+                            symbol={currency.symbol_native}
+                            code={currency.code}
+                            value={field.value.value}
+                            onValueChange={(_value, _name, values) => {
+                              onChange({
+                                value: values?.value ?? "",
+                                float: values?.float ?? null,
+                              })
+                            }}
+                            autoFocus
+                          />
+                        </Form.Control>
+
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </>
+            )}
+          </div>
+        </RouteDrawer.Body>
+
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+
+            <Button
+              isLoading={isCreditLinePending || isRefundPending}
+              type="submit"
+              variant="primary"
+              size="small"
+              disabled={!!Object.keys(form.formState.errors || {}).length}
+            >
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </KeyboundForm>
+    </RouteDrawer.Form>
+  )
+}

package/src/routes/orders/order-balance-settlement/index.ts

@@ -0,0 +1 @@
+export * from "./components/order-balance-settlement-form"

package/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx

@@ -87,10 +87,16 @@ export const ClaimCreateForm = ({
     useState(false)
 
   const [customInboundShippingAmount, setCustomInboundShippingAmount] =
-    useState<number | string>(0)
+    useState<{ value: string; float: number | null }>({
+      value: "0",
+      float: 0,
+    })
 
   const [customOutboundShippingAmount, setCustomOutboundShippingAmount] =
-    useState<number | string>(0)
+    useState<{ value: string; float: number | null }>({
+      value: "0",
+      float: 0,
+    })
 
   const [inventoryMap, setInventoryMap] = useState<
     Record<string, InventoryLevelDTO[]>
@@ -263,13 +269,23 @@ export const ClaimCreateForm = ({
 
   useEffect(() => {
     if (inboundShipping) {
-      setCustomInboundShippingAmount(inboundShipping.total)
+      setCustomInboundShippingAmount({
+        value: inboundShipping.total.toFixed(
+          currencies[order.currency_code.toUpperCase()].decimal_digits
+        ),
+        float: inboundShipping.total,
+      })
     }
   }, [inboundShipping])
 
   useEffect(() => {
     if (outboundShipping) {
-      setCustomOutboundShippingAmount(outboundShipping.total)
+      setCustomOutboundShippingAmount({
+        value: outboundShipping.total.toFixed(
+          currencies[order.currency_code.toUpperCase()].decimal_digits
+        ),
+        float: outboundShipping.total,
+      })
     }
   }, [outboundShipping])
 
@@ -519,6 +535,7 @@ export const ClaimCreateForm = ({
       ).variants
 
       variants.forEach((variant) => {
+        // TODO: fix this for inventory kits
         ret[variant.id] = variant.inventory?.[0]?.location_levels || []
       })
 
@@ -560,6 +577,15 @@ export const ClaimCreateForm = ({
     return (method?.total as number) || 0
   }, [preview.shipping_methods])
 
+  const outboundShippingTotal = useMemo(() => {
+    const method = preview.shipping_methods.find(
+      (sm) =>
+        !!sm.actions?.find((a) => a.action === "SHIPPING_ADD" && !a.return_id)
+    )
+
+    return (method?.total as number) || 0
+  }, [preview.shipping_methods])
+
   return (
     <RouteFocusModal.Form form={form}>
       <KeyboundForm onSubmit={handleSubmit} className="flex h-full flex-col">
@@ -866,10 +892,7 @@ export const ClaimCreateForm = ({
                           }
                         })
 
-                        const customPrice =
-                          customInboundShippingAmount === ""
-                            ? null
-                            : parseFloat(customInboundShippingAmount)
+                        const customPrice = customInboundShippingAmount.float
 
                         if (actionId) {
                           updateInboundShipping(
@@ -891,8 +914,13 @@ export const ClaimCreateForm = ({
                           .symbol_native
                       }
                       code={order.currency_code}
-                      onValueChange={setCustomInboundShippingAmount}
-                      value={customInboundShippingAmount}
+                      onValueChange={(value, _name, values) => {
+                        setCustomInboundShippingAmount({
+                          value: values?.value ?? "",
+                          float: values?.float ?? null,
+                        })
+                      }}
+                      value={customInboundShippingAmount.value}
                       disabled={showInboundItemsPlaceholder}
                     />
                   ) : (
@@ -937,10 +965,7 @@ export const ClaimCreateForm = ({
                           }
                         })
 
-                        const customPrice =
-                          customOutboundShippingAmount === ""
-                            ? null
-                            : parseFloat(customOutboundShippingAmount)
+                        const customPrice = customOutboundShippingAmount.float
 
                         if (actionId) {
                           updateOutboundShipping(
@@ -962,13 +987,18 @@ export const ClaimCreateForm = ({
                           .symbol_native
                       }
                       code={order.currency_code}
-                      onValueChange={setCustomOutboundShippingAmount}
-                      value={customOutboundShippingAmount}
+                      onValueChange={(value, _name, values) => {
+                        setCustomOutboundShippingAmount({
+                          value: values?.value ?? "",
+                          float: values?.float ?? null,
+                        })
+                      }}
+                      value={customOutboundShippingAmount.value}
                       disabled={showOutboundItemsPlaceholder}
                     />
                   ) : (
                     getStylizedAmount(
-                      outboundShipping?.amount ?? 0,
+                      outboundShippingTotal,
                       order.currency_code
                     )
                   )}
@@ -998,7 +1028,8 @@ export const ClaimCreateForm = ({
                       <div className="flex items-center">
                         <Form.Control className="mr-4 self-start">
                           <Switch
-                            className="mt-[2px]"
+                            dir="ltr"
+                            className="mt-[2px] rtl:rotate-180"
                             checked={!!value}
                             onCheckedChange={onChange}
                             {...field}

package/src/routes/orders/order-create-claim/components/claim-create-form/claim-outbound-item.tsx

@@ -49,7 +49,7 @@ function ClaimOutboundItem({
               )}
             </div>
             <Text as="div" className="text-ui-fg-subtle txt-small">
-              {previewItem.product_title}
+              {previewItem.subtitle}
             </Text>
           </div>
         </div>