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

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

@@ -8,43 +8,48 @@ import {
   Textarea,
   toast,
 } from "@medusajs/ui"
-import { useEffect, useMemo } from "react"
+import { useEffect, useMemo, useState } from "react"
+import { formatValue } from "react-currency-input-field"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
-import { useNavigate, useSearchParams } from "react-router-dom"
+import { useSearchParams } from "react-router-dom"
 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 { useRefundPayment } from "../../../../../hooks/api"
+import { useRefundPayment, useRefundReasons } 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 "../../../order-detail/components/order-payment-section"
-import { formatValue } from "react-currency-input-field"
+import { getPaymentsFromOrder } from "../../../../../lib/orders"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
+import { formatProvider } from "../../../../../lib/format-provider.ts"
 
 type CreateRefundFormProps = {
   order: HttpTypes.AdminOrder
-  refundReasons: HttpTypes.AdminRefundReason[]
 }
 
 const CreateRefundSchema = zod.object({
-  amount: zod.string().or(zod.number()),
-  refund_reason_id: zod.string().nullish(),
+  amount: zod.object({
+    value: zod.string().or(zod.number()),
+    float: zod.number().or(zod.null()),
+  }),
   note: zod.string().optional(),
+  refund_reason_id: zod.string().optional(),
 })
 
-export const CreateRefundForm = ({
-  order,
-  refundReasons,
-}: CreateRefundFormProps) => {
+export const CreateRefundForm = ({ order }: CreateRefundFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
-  const navigate = useNavigate()
+  const { refund_reasons } = useRefundReasons()
+
   const [searchParams] = useSearchParams()
-  const paymentId = searchParams.get("paymentId")
+  const hasPaymentIdInSearchParams = !!searchParams.get("paymentId")
+  const [paymentId, setPaymentId] = useState<string | undefined>(
+    searchParams.get("paymentId") || undefined
+  )
   const payments = getPaymentsFromOrder(order)
-  const payment = payments.find((p) => p.id === paymentId)!
+  const payment = payments.find((p) => p.id === paymentId)
   const paymentAmount = payment?.amount || 0
 
   const currency = useMemo(
@@ -52,10 +57,13 @@ export const CreateRefundForm = ({
     [order.currency_code]
   )
 
+  const direction = useDocumentDirection()
   const form = useForm<zod.infer<typeof CreateRefundSchema>>({
     defaultValues: {
-      amount: paymentAmount,
-      note: "",
+      amount: {
+        value: paymentAmount.toFixed(currency.decimal_digits),
+        float: paymentAmount,
+      },
     },
     resolver: zodResolver(CreateRefundSchema),
   })
@@ -65,29 +73,35 @@ export const CreateRefundForm = ({
     const paymentAmount = (payment?.amount || 0) as number
     const pendingAmount =
       pendingDifference < 0
-        ? Math.min(pendingDifference, paymentAmount)
+        ? Math.min(Math.abs(pendingDifference), paymentAmount)
         : paymentAmount
 
     const normalizedAmount =
       pendingAmount < 0 ? pendingAmount * -1 : pendingAmount
 
-    form.setValue("amount", normalizedAmount as number)
-  }, [payment])
+    form.setValue("amount", {
+      value: normalizedAmount.toFixed(currency.decimal_digits),
+      float: normalizedAmount,
+    })
+  }, [payment?.id || ""])
 
   const { mutateAsync, isPending } = useRefundPayment(order.id, payment?.id!)
 
   const handleSubmit = form.handleSubmit(async (data) => {
     await mutateAsync(
       {
-        amount: parseFloat(data.amount as string),
-        refund_reason_id: data.refund_reason_id,
+        amount: data.amount.float!,
         note: data.note,
+        refund_reason_id: data.refund_reason_id,
       },
       {
         onSuccess: () => {
           toast.success(
             t("orders.payment.refundPaymentSuccess", {
-              amount: formatCurrency(data.amount, payment?.currency_code!),
+              amount: formatCurrency(
+                data.amount.float!,
+                payment?.currency_code!
+              ),
             })
           )
 
@@ -108,53 +122,69 @@ export const CreateRefundForm = ({
       >
         <RouteDrawer.Body className="flex-1 overflow-auto">
           <div className="flex flex-col gap-y-4">
-            <Select
-              value={payment?.id}
-              onValueChange={(value) => {
-                navigate(`/orders/${order.id}/refund?paymentId=${value}`, {
-                  replace: true,
-                })
-              }}
-            >
-              <Label className="txt-compact-small mb-[-6px] font-sans font-medium">
-                {t("orders.payment.selectPaymentToRefund")}
-              </Label>
+            {!hasPaymentIdInSearchParams && (
+              <Select
+                dir={direction}
+                value={paymentId}
+                onValueChange={(value) => {
+                  setPaymentId(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.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
-                  )
+                <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>
+                    return (
+                      <Select.Item
+                        value={payment!.id}
+                        key={payment.id}
+                        disabled={
+                          !!payment.canceled_at ||
+                          totalRefunded >= payment.amount
+                        }
+                        className="flex items-center justify-center"
+                      >
+                        <span>
+                          {getLocaleAmount(
+                            payment.amount as number,
+                            payment.currency_code
+                          )}
+                          {" - "}
+                        </span>
+                        <span>{formatProvider(payment.provider_id)}</span>
+                        <span> - (#{payment.id.substring(23)})</span>
+                      </Select.Item>
+                    )
+                  })}
+                </Select.Content>
+              </Select>
+            )}
+            {hasPaymentIdInSearchParams && (
+              <div className="flex items-center">
+                <span>
+                  {getLocaleAmount(
+                    payment!.amount as number,
+                    payment!.currency_code
+                  )}
+                </span>
+                <span> - </span>
+                <span>(#{payment!.id.substring(23)})</span>
+              </div>
+            )}
 
             <Form.Field
               control={form.control}
@@ -180,9 +210,12 @@ export const CreateRefundForm = ({
                         decimalScale={currency.decimal_digits}
                         symbol={currency.symbol_native}
                         code={currency.code}
-                        value={field.value}
+                        value={field.value.value}
                         onValueChange={(_value, _name, values) =>
-                          onChange(values?.value ? values?.value : "")
+                          onChange({
+                            value: values?.value ?? "",
+                            float: values?.float ?? null,
+                          })
                         }
                         autoFocus
                       />
@@ -194,8 +227,7 @@ export const CreateRefundForm = ({
               }}
             />
 
-            {/* TODO: Bring this back when we have a refund reason management UI */}
-            {/* <Form.Field
+            <Form.Field
               control={form.control}
               name="refund_reason_id"
               render={({ field }) => {
@@ -204,19 +236,30 @@ export const CreateRefundForm = ({
                     <Form.Label>{t("fields.refundReason")}</Form.Label>
 
                     <Form.Control>
-                      <Combobox
-                        {...field}
-                        options={refundReasons.map((pp) => ({
-                          label: upperCaseFirst(pp.label),
-                          value: pp.id,
-                        }))}
-                      />
+                      <Select
+                        dir={direction}
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <Select.Trigger>
+                          <Select.Value />
+                        </Select.Trigger>
+
+                        <Select.Content>
+                          {refund_reasons?.map((reason) => (
+                            <Select.Item key={reason.id} value={reason.id}>
+                              {reason.label}
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select>
                     </Form.Control>
+
                     <Form.ErrorMessage />
                   </Form.Item>
                 )
               }}
-            /> */}
+            />
 
             <Form.Field
               control={form.control}

package/src/routes/orders/order-create-refund/order-create-refund.tsx

@@ -2,7 +2,9 @@ import { Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { useParams } from "react-router-dom"
 import { RouteDrawer } from "../../../components/modals"
-import { useOrder, useRefundReasons } from "../../../hooks/api"
+import { useOrder, usePlugins } from "../../../hooks/api"
+import { getLoyaltyPlugin } from "../../../lib/plugins"
+import { OrderBalanceSettlementForm } from "../order-balance-settlement"
 import { DEFAULT_FIELDS } from "../order-detail/constants"
 import { CreateRefundForm } from "./components/create-refund-form"
 
@@ -13,16 +15,8 @@ export const OrderCreateRefund = () => {
     fields: DEFAULT_FIELDS,
   })
 
-  const {
-    refund_reasons: refundReasons,
-    isLoading: isRefundReasonsLoading,
-    isError: isRefundReasonsError,
-    error: refundReasonsError,
-  } = useRefundReasons()
-
-  if (isRefundReasonsError) {
-    throw refundReasonsError
-  }
+  const { plugins = [] } = usePlugins()
+  const loyaltyPlugin = getLoyaltyPlugin(plugins)
 
   return (
     <RouteDrawer>
@@ -30,9 +24,8 @@ export const OrderCreateRefund = () => {
         <Heading>{t("orders.payment.createRefund")}</Heading>
       </RouteDrawer.Header>
 
-      {order && !isRefundReasonsLoading && refundReasons && (
-        <CreateRefundForm order={order} refundReasons={refundReasons} />
-      )}
+      {order && !loyaltyPlugin && <CreateRefundForm order={order} />}
+      {order && loyaltyPlugin && <OrderBalanceSettlementForm order={order} />}
     </RouteDrawer>
   )
 }

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

@@ -94,7 +94,13 @@ export const ReturnCreateForm = ({
    */
   const { setIsOpen } = useStackedModal()
   const [isShippingPriceEdit, setIsShippingPriceEdit] = useState(false)
-  const [customShippingAmount, setCustomShippingAmount] = useState(0)
+  const [customShippingAmount, setCustomShippingAmount] = useState<{
+    value: string
+    float: number | null
+  }>({
+    value: "0",
+    float: 0,
+  })
   const [inventoryMap, setInventoryMap] = useState<
     Record<string, InventoryLevelDTO[]>
   >({})
@@ -671,10 +677,7 @@ export const ReturnCreateForm = ({
                         if (actionId) {
                           updateReturnShipping({
                             actionId,
-                            custom_amount:
-                              typeof customShippingAmount === "string"
-                                ? null
-                                : customShippingAmount,
+                            custom_amount: customShippingAmount.float,
                           })
                         }
                         setIsShippingPriceEdit(false)
@@ -684,10 +687,13 @@ export const ReturnCreateForm = ({
                           .symbol_native
                       }
                       code={order.currency_code}
-                      onValueChange={(value) =>
-                        setCustomShippingAmount(value ? parseFloat(value) : "")
+                      onValueChange={(value, name, values) =>
+                        setCustomShippingAmount({
+                          value: values?.value ?? "",
+                          float: values?.float ?? null,
+                        })
                       }
-                      value={customShippingAmount}
+                      value={customShippingAmount.value}
                       disabled={showPlaceholder}
                     />
                   ) : (
@@ -720,7 +726,8 @@ export const ReturnCreateForm = ({
                       <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-shipment/components/order-create-shipment-form/order-create-shipment-form.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
 import { AdminFulfillment, AdminOrder } from "@medusajs/types"
-import { Button, Heading, Input, Switch, toast } from "@medusajs/ui"
+import { Button, clx, Heading, Input, Switch, toast } from "@medusajs/ui"
 import { useFieldArray, useForm } from "react-hook-form"
 
 import { Form } from "../../../../../components/common/form"
@@ -43,19 +43,21 @@ export function OrderCreateShipmentForm({
   })
 
   const handleSubmit = form.handleSubmit(async (data) => {
+    const addedLabels = data.labels
+      .filter((l) => !!l.tracking_number || !!l.tracking_url || !!l.label_url)
+      .map((l) => ({
+        tracking_number: l.tracking_number,
+        tracking_url: l.tracking_url || "#",
+        label_url: l.label_url || "#",
+      }))
+
     await createShipment(
       {
         items: fulfillment?.items?.map((i) => ({
           id: i.line_item_id,
           quantity: i.quantity,
         })),
-        labels: data.labels
-          .filter((l) => !!l.tracking_number)
-          .map((l) => ({
-            tracking_number: l.tracking_number,
-            tracking_url: "#",
-            label_url: "#",
-          })),
+        labels: [...addedLabels, ...(fulfillment?.labels || [])],
         no_notification: !data.send_notification,
       },
       {
@@ -76,18 +78,8 @@ export function OrderCreateShipmentForm({
         onSubmit={handleSubmit}
         className="flex h-full flex-col overflow-hidden"
       >
-        <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" type="submit" isLoading={isMutating}>
-              {t("actions.save")}
-            </Button>
-          </div>
-        </RouteFocusModal.Header>
+        <RouteFocusModal.Header />
+
         <RouteFocusModal.Body className="flex h-full w-full flex-col items-center divide-y overflow-y-auto">
           <div className="flex size-full flex-col items-center overflow-auto p-16">
             <div className="flex w-full max-w-[736px] flex-col justify-center px-2 pb-2">
@@ -97,33 +89,93 @@ export function OrderCreateShipmentForm({
                     {t("orders.shipment.title")}
                   </Heading>
 
-                  {labels.map((label, index) => (
-                    <Form.Field
-                      key={label.id}
-                      control={form.control}
-                      name={`labels.${index}.tracking_number`}
-                      render={({ field }) => {
-                        return (
-                          <Form.Item className="mb-4">
-                            {index === 0 && (
-                              <Form.Label>
-                                {t("orders.shipment.trackingNumber")}
-                              </Form.Label>
-                            )}
-                            <Form.Control>
-                              <Input {...field} placeholder="123-456-789" />
-                            </Form.Control>
-                            <Form.ErrorMessage />
-                          </Form.Item>
-                        )
-                      }}
-                    />
-                  ))}
+                  <div className="flex flex-col max-md:gap-y-2 max-md:divide-y">
+                    {labels.map((label, index) => (
+                      <div
+                        key={label.id}
+                        className={clx(
+                          "grid grid-cols-1 gap-x-4 md:grid-cols-3",
+                          { "max-md:pt-4": index > 0 }
+                        )}
+                      >
+                        <Form.Field
+                          control={form.control}
+                          name={`labels.${index}.tracking_number`}
+                          render={({ field }) => {
+                            return (
+                              <Form.Item className="mb-2">
+                                <Form.Label
+                                  className={clx({ "md:hidden": index > 0 })}
+                                >
+                                  {t("orders.shipment.trackingNumber")}
+                                </Form.Label>
+
+                                <Form.Control>
+                                  <Input {...field} placeholder="123-456-789" />
+                                </Form.Control>
+                                <Form.ErrorMessage />
+                              </Form.Item>
+                            )
+                          }}
+                        />
+                        <Form.Field
+                          control={form.control}
+                          name={`labels.${index}.tracking_url`}
+                          render={({ field }) => {
+                            return (
+                              <Form.Item className="mb-2">
+                                <Form.Label
+                                  className={clx({ "md:hidden": index > 0 })}
+                                >
+                                  {t("orders.shipment.trackingUrl")}
+                                </Form.Label>
+                                <Form.Control>
+                                  <Input
+                                    {...field}
+                                    placeholder="https://example.com/tracking/123"
+                                  />
+                                </Form.Control>
+                                <Form.ErrorMessage />
+                              </Form.Item>
+                            )
+                          }}
+                        />
+                        <Form.Field
+                          control={form.control}
+                          name={`labels.${index}.label_url`}
+                          render={({ field }) => {
+                            return (
+                              <Form.Item className="mb-2">
+                                <Form.Label
+                                  className={clx({ "md:hidden": index > 0 })}
+                                >
+                                  {t("orders.shipment.labelUrl")}
+                                </Form.Label>
+                                <Form.Control>
+                                  <Input
+                                    {...field}
+                                    placeholder="https://example.com/label/123"
+                                  />
+                                </Form.Control>
+                                <Form.ErrorMessage />
+                              </Form.Item>
+                            )
+                          }}
+                        />
+                      </div>
+                    ))}
+                  </div>
 
                   <Button
                     type="button"
-                    onClick={() => append({ tracking_number: "" })}
-                    className="self-end"
+                    onClick={() =>
+                      append({
+                        tracking_number: "",
+                        label_url: "",
+                        tracking_url: "",
+                      })
+                    }
+                    className="mt-2 self-end"
                     variant="secondary"
                   >
                     {t("orders.shipment.addTracking")}
@@ -144,6 +196,8 @@ export function OrderCreateShipmentForm({
                             <Form.Control>
                               <Form.Control>
                                 <Switch
+                                  dir="ltr"
+                                  className="rtl:rotate-180"
                                   checked={!!value}
                                   onCheckedChange={onChange}
                                   {...field}
@@ -164,6 +218,16 @@ export function OrderCreateShipmentForm({
             </div>
           </div>
         </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>
   )