@medusajs/dashboard 0.0.1

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

@@ -0,0 +1,286 @@
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { useForm } from "react-hook-form"
+
+import {
+  AdminPostOrdersOrderReturnsReq,
+  LineItem,
+  Order,
+} from "@medusajs/medusa"
+import { Button, ProgressStatus, ProgressTabs } from "@medusajs/ui"
+import { useAdminRequestReturn, useAdminShippingOptions } from "medusa-react"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+
+import { OrdersReturnItem } from "@medusajs/medusa/dist/types/orders"
+import { PricedShippingOption } from "@medusajs/medusa/dist/types/pricing"
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../components/route-modal"
+import { castNumber } from "../../../../../lib/cast-number"
+import { getDbAmount } from "../../../../../lib/money-amount-helpers"
+import { getAllReturnableItems } from "../../../../../lib/rma"
+import { CreateReturnSchema } from "./constants"
+import { OrderCreateReturnDetails } from "./order-create-return-details"
+import { CreateReturnItemTable } from "./order-create-return-item-table"
+
+type OrderCreateReturnsFormProps = {
+  order: Order
+}
+
+enum Tab {
+  ITEMS = "items",
+  DETAILS = "details",
+}
+
+type StepStatus = {
+  [key in Tab]: ProgressStatus
+}
+
+export function OrderCreateReturnForm({ order }: OrderCreateReturnsFormProps) {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+
+  const [selectedItems, setSelectedItems] = useState<string[]>([])
+  const [tab, setTab] = React.useState<Tab>(Tab.ITEMS)
+
+  const { mutateAsync: requestReturnOrder, isLoading } = useAdminRequestReturn(
+    order.id
+  )
+
+  const { shipping_options = [] } = useAdminShippingOptions({
+    region_id: order.region_id,
+    is_return: true,
+  })
+
+  const refundableAmount = useRef(0)
+
+  // List of line items that can be returned with updated quantities
+  const returnableItems = useMemo(() => getAllReturnableItems(order, false), [])
+  // Line items that are selected for return
+  const selected = returnableItems.filter((i) => selectedItems.includes(i.id))
+
+  const form = useForm<zod.infer<typeof CreateReturnSchema>>({
+    defaultValues: {
+      // Items not selected so we don't know defaults yet
+      quantity: {},
+      reason: {},
+      note: {},
+
+      location: "",
+      shipping: "",
+      send_notification: !order.no_notification,
+
+      enable_custom_refund: false,
+      enable_custom_shipping_price: false,
+
+      custom_refund: "",
+      custom_shipping_price: "",
+    },
+  })
+
+  const {
+    formState: { isDirty },
+    setValue,
+  } = form
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    const items = selected.map((item) => {
+      const ret: OrdersReturnItem = {
+        item_id: item.id,
+        quantity: data.quantity[item.id],
+      }
+
+      if (data.reason[item.id]) {
+        ret["reason_id"] = data.reason[item.id]
+      }
+
+      if (data.note[item.id]) {
+        ret["note"] = data.note[item.id]
+      }
+
+      return ret
+    })
+
+    let refund = refundableAmount.current
+
+    if (data.enable_custom_refund && data.custom_refund) {
+      const customRefund =
+        data.custom_refund === "" ? 0 : castNumber(data.custom_refund)
+      refund = getDbAmount(customRefund, order.currency_code)
+    }
+
+    const payload: AdminPostOrdersOrderReturnsReq = {
+      items,
+      no_notification: !data.send_notification,
+      refund,
+    }
+
+    if (data.location) {
+      payload["location_id"] = data.location
+    }
+
+    if (data.shipping) {
+      const option = shipping_options.find((o) => o.id === data.shipping) as
+        | PricedShippingOption
+        | undefined
+
+      const taxRate =
+        option?.tax_rates?.reduce((acc, curr) => {
+          return acc + (curr.rate || 0) / 100
+        }, 0) || 0
+
+      let price = option?.price_incl_tax
+        ? Math.round(option.price_incl_tax / (1 + taxRate))
+        : 0
+
+      if (data.enable_custom_shipping_price) {
+        const customShipping = data.custom_shipping_price
+          ? castNumber(data.custom_shipping_price)
+          : 0
+        price = getDbAmount(customShipping, order.currency_code)
+      }
+
+      // TODO: do we send shipping if custom refund is set?
+      payload["return_shipping"] = {
+        option_id: data.shipping,
+        price,
+      }
+    }
+
+    await requestReturnOrder(payload)
+
+    handleSuccess(`/orders/${order.id}`)
+  })
+
+  const [status, setStatus] = React.useState<StepStatus>({
+    [Tab.ITEMS]: "not-started",
+    [Tab.DETAILS]: "not-started",
+  })
+
+  const onTabChange = React.useCallback(async (value: Tab) => {
+    setTab(value)
+  }, [])
+
+  const onNext = React.useCallback(async () => {
+    switch (tab) {
+      case Tab.ITEMS: {
+        selected.forEach((item) => {
+          setValue(`quantity.${item.id}`, item.quantity, {
+            shouldDirty: true,
+            shouldTouch: true,
+          })
+          setValue(`reason.${item.id}`, "", {
+            shouldDirty: true,
+            shouldTouch: true,
+          })
+          setValue(`note.${item.id}`, "", {
+            shouldDirty: true,
+            shouldTouch: true,
+          })
+        })
+        setTab(Tab.DETAILS)
+        break
+      }
+      case Tab.DETAILS:
+        await onSubmit()
+        break
+    }
+  }, [tab, selected, setValue, onSubmit])
+
+  const onSelectionChange = (ids: string[]) => {
+    setSelectedItems(ids)
+
+    if (ids.length) {
+      setStatus((prev) => ({ ...prev, [Tab.ITEMS]: "in-progress" }))
+    }
+  }
+
+  const onRefundableAmountChange = (amount: number) => {
+    refundableAmount.current = amount
+  }
+
+  useEffect(() => {
+    if (tab === Tab.DETAILS) {
+      setStatus({ [Tab.ITEMS]: "completed", [Tab.DETAILS]: "not-started" })
+    }
+  }, [tab])
+
+  useEffect(() => {
+    if (isDirty) {
+      setStatus({ [Tab.ITEMS]: "completed", [Tab.DETAILS]: "in-progress" })
+    }
+  }, [isDirty])
+
+  const canMoveToDetails = selectedItems.length
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <ProgressTabs
+        value={tab}
+        className="h-full"
+        onValueChange={(tab) => onTabChange(tab as Tab)}
+      >
+        <RouteFocusModal.Header className="flex w-full items-center justify-between">
+          <ProgressTabs.List className="border-ui-border-base -my-2 ml-2 min-w-0 flex-1 border-l">
+            <ProgressTabs.Trigger
+              value={Tab.ITEMS}
+              className="w-full max-w-[200px]"
+              status={status[Tab.ITEMS]}
+              disabled={tab === Tab.DETAILS}
+            >
+              <span className="w-full cursor-auto overflow-hidden text-ellipsis whitespace-nowrap">
+                {t("orders.returns.chooseItems")}
+              </span>
+            </ProgressTabs.Trigger>
+            <ProgressTabs.Trigger
+              value={Tab.DETAILS}
+              className="w-full max-w-[200px]"
+              status={status[Tab.DETAILS]}
+              disabled={!canMoveToDetails}
+            >
+              <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
+                {t("orders.returns.details")}
+              </span>
+            </ProgressTabs.Trigger>
+          </ProgressTabs.List>
+          <div className="flex flex-1 items-center justify-end gap-x-2">
+            <RouteFocusModal.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("actions.cancel")}
+              </Button>
+            </RouteFocusModal.Close>
+            <Button
+              size="small"
+              className="whitespace-nowrap"
+              isLoading={isLoading}
+              onClick={onNext}
+              disabled={!canMoveToDetails}
+              type={tab === Tab.DETAILS ? "submit" : "button"}
+            >
+              {tab === Tab.DETAILS ? t("actions.save") : t("general.next")}
+            </Button>
+          </div>
+        </RouteFocusModal.Header>
+        <RouteFocusModal.Body className="flex h-[calc(100%-56px)] w-full flex-col items-center overflow-y-auto">
+          <ProgressTabs.Content value={Tab.ITEMS} className="h-full w-full">
+            <CreateReturnItemTable
+              items={returnableItems as LineItem[]}
+              selectedItems={selectedItems}
+              onSelectionChange={onSelectionChange}
+              currencyCode={order.currency_code}
+            />
+          </ProgressTabs.Content>
+          <ProgressTabs.Content value={Tab.DETAILS} className="h-full w-full">
+            <OrderCreateReturnDetails
+              form={form}
+              items={selected as LineItem[]}
+              order={order}
+              onRefundableAmountChange={onRefundableAmountChange}
+            />
+          </ProgressTabs.Content>
+        </RouteFocusModal.Body>
+      </ProgressTabs>
+    </RouteFocusModal.Form>
+  )
+}

package/src/routes/orders/order-create-return/components/order-create-return-form/order-create-return-item-table/index.ts

@@ -0,0 +1 @@
+export * from "./order-create-return-item-table"

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

@@ -0,0 +1,277 @@
+import { LineItem } from "@medusajs/medusa"
+import { OnChangeFn, RowSelectionState } from "@tanstack/react-table"
+import { useMemo, useState } from "react"
+
+import { DataTable } from "../../../../../../components/table/data-table/index.ts"
+import { useDataTable } from "../../../../../../hooks/use-data-table.tsx"
+
+import {
+  DateComparisonOperator,
+  NumericalComparisonOperator,
+} from "@medusajs/types"
+import { getPresentationalAmount } from "../../../../../../lib/money-amount-helpers.ts"
+import { useReturnItemTableColumns } from "./use-return-item-table-columns.tsx"
+import { useReturnItemTableFilters } from "./use-return-item-table-filters.tsx"
+import { useReturnItemTableQuery } from "./use-return-item-table-query.tsx"
+
+const PAGE_SIZE = 50
+const PREFIX = "rit"
+
+type CreateReturnItemTableProps = {
+  onSelectionChange: (ids: string[]) => void
+  selectedItems: string[]
+  items: LineItem[]
+  currencyCode: string
+}
+
+export const CreateReturnItemTable = ({
+  onSelectionChange,
+  selectedItems,
+  items,
+  currencyCode,
+}: CreateReturnItemTableProps) => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>(
+    selectedItems.reduce((acc, id) => {
+      acc[id] = true
+      return acc
+    }, {} as RowSelectionState)
+  )
+
+  const updater: OnChangeFn<RowSelectionState> = (fn) => {
+    const newState: RowSelectionState =
+      typeof fn === "function" ? fn(rowSelection) : fn
+
+    setRowSelection(newState)
+    onSelectionChange(Object.keys(newState))
+  }
+
+  const { searchParams, raw } = useReturnItemTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX,
+  })
+
+  const queriedItems = useMemo(() => {
+    const {
+      order,
+      offset,
+      limit,
+      q,
+      created_at,
+      updated_at,
+      refundable_amount,
+      returnable_quantity,
+    } = searchParams
+
+    let results: LineItem[] = items
+
+    if (q) {
+      results = results.filter((i) => {
+        return (
+          i.variant.product.title.toLowerCase().includes(q.toLowerCase()) ||
+          i.variant.title.toLowerCase().includes(q.toLowerCase()) ||
+          i.variant.sku?.toLowerCase().includes(q.toLowerCase())
+        )
+      })
+    }
+
+    if (order) {
+      const direction = order[0] === "-" ? "desc" : "asc"
+      const field = order.replace("-", "")
+
+      results = sortItems(results, field, direction)
+    }
+
+    if (created_at) {
+      results = filterByDate(results, created_at, "created_at")
+    }
+
+    if (updated_at) {
+      results = filterByDate(results, updated_at, "updated_at")
+    }
+
+    if (returnable_quantity) {
+      results = filterByNumber(
+        results,
+        returnable_quantity,
+        "returnable_quantity",
+        currencyCode
+      )
+    }
+
+    if (refundable_amount) {
+      results = filterByNumber(
+        results,
+        refundable_amount,
+        "refundable_amount",
+        currencyCode
+      )
+    }
+
+    return results.slice(offset, offset + limit)
+  }, [items, currencyCode, searchParams])
+
+  const columns = useReturnItemTableColumns(currencyCode)
+  const filters = useReturnItemTableFilters()
+
+  const { table } = useDataTable({
+    data: queriedItems as LineItem[],
+    columns: columns,
+    count: items.length,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+    enableRowSelection: (row) => {
+      return row.original.quantity - (row.original.returned_quantity || 0) > 0
+    },
+    rowSelection: {
+      state: rowSelection,
+      updater,
+    },
+  })
+
+  return (
+    <div className="flex size-full flex-col overflow-hidden">
+      <DataTable
+        table={table}
+        columns={columns}
+        pageSize={PAGE_SIZE}
+        count={queriedItems.length}
+        filters={filters}
+        pagination
+        layout="fill"
+        search
+        orderBy={[
+          "product_title",
+          "variant_title",
+          "sku",
+          "returnable_quantity",
+          "refundable_amount",
+        ]}
+        prefix={PREFIX}
+        queryObject={raw}
+      />
+    </div>
+  )
+}
+
+const sortItems = (
+  items: LineItem[],
+  field: string,
+  direction: "asc" | "desc"
+) => {
+  return items.sort((a, b) => {
+    let aValue: any
+    let bValue: any
+
+    if (field === "product_title") {
+      aValue = a.variant.product.title
+      bValue = b.variant.product.title
+    } else if (field === "variant_title") {
+      aValue = a.variant.title
+      bValue = b.variant.title
+    } else if (field === "sku") {
+      aValue = a.variant.sku
+      bValue = b.variant.sku
+    } else if (field === "returnable_quantity") {
+      aValue = a.quantity - (a.returned_quantity || 0)
+      bValue = b.quantity - (b.returned_quantity || 0)
+    } else if (field === "refundable_amount") {
+      aValue = a.refundable || 0
+      bValue = b.refundable || 0
+    }
+
+    if (aValue < bValue) {
+      return direction === "asc" ? -1 : 1
+    }
+    if (aValue > bValue) {
+      return direction === "asc" ? 1 : -1
+    }
+    return 0
+  })
+}
+
+const filterByDate = (
+  items: LineItem[],
+  date: DateComparisonOperator,
+  field: "created_at" | "updated_at"
+) => {
+  const { gt, gte, lt, lte } = date
+
+  return items.filter((i) => {
+    const itemDate = new Date(i[field])
+    let isValid = true
+
+    if (gt) {
+      isValid = isValid && itemDate > new Date(gt)
+    }
+
+    if (gte) {
+      isValid = isValid && itemDate >= new Date(gte)
+    }
+
+    if (lt) {
+      isValid = isValid && itemDate < new Date(lt)
+    }
+
+    if (lte) {
+      isValid = isValid && itemDate <= new Date(lte)
+    }
+
+    return isValid
+  })
+}
+
+const defaultOperators = {
+  eq: undefined,
+  gt: undefined,
+  gte: undefined,
+  lt: undefined,
+  lte: undefined,
+}
+
+const filterByNumber = (
+  items: LineItem[],
+  value: NumericalComparisonOperator | number,
+  field: "returnable_quantity" | "refundable_amount",
+  currency_code: string
+) => {
+  const { eq, gt, lt, gte, lte } =
+    typeof value === "object"
+      ? { ...defaultOperators, ...value }
+      : { ...defaultOperators, eq: value }
+
+  return items.filter((i) => {
+    const returnableQuantity = i.quantity - (i.returned_quantity || 0)
+    const refundableAmount = getPresentationalAmount(
+      i.refundable || 0,
+      currency_code
+    )
+
+    const itemValue =
+      field === "returnable_quantity" ? returnableQuantity : refundableAmount
+
+    if (eq) {
+      return itemValue === eq
+    }
+
+    let isValid = true
+
+    if (gt) {
+      isValid = isValid && itemValue > gt
+    }
+
+    if (gte) {
+      isValid = isValid && itemValue >= gte
+    }
+
+    if (lt) {
+      isValid = isValid && itemValue < lt
+    }
+
+    if (lte) {
+      isValid = isValid && itemValue <= lte
+    }
+
+    return isValid
+  })
+}

package/src/routes/orders/order-create-return/components/order-create-return-form/order-create-return-item-table/use-return-item-table-columns.tsx

@@ -0,0 +1,103 @@
+import { Checkbox } from "@medusajs/ui"
+import { createColumnHelper } from "@tanstack/react-table"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import {
+  ProductCell,
+  ProductHeader,
+} from "../../../../../../components/table/table-cells/product/product-cell"
+import { getStylizedAmount } from "../../../../../../lib/money-amount-helpers"
+
+const columnHelper = createColumnHelper<any>()
+
+export const useReturnItemTableColumns = (currencyCode: string) => {
+  const { t } = useTranslation()
+
+  return useMemo(
+    () => [
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => {
+          return (
+            <Checkbox
+              checked={
+                table.getIsSomePageRowsSelected()
+                  ? "indeterminate"
+                  : table.getIsAllPageRowsSelected()
+              }
+              onCheckedChange={(value) =>
+                table.toggleAllPageRowsSelected(!!value)
+              }
+            />
+          )
+        },
+        cell: ({ row }) => {
+          const isSelectable = row.getCanSelect()
+
+          return (
+            <Checkbox
+              disabled={!isSelectable}
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "product",
+        header: () => <ProductHeader />,
+        cell: ({ row }) => (
+          <ProductCell product={row.original.variant.product} />
+        ),
+      }),
+      columnHelper.accessor("variant.sku", {
+        header: t("fields.sku"),
+        cell: ({ getValue }) => {
+          return getValue() || "-"
+        },
+      }),
+      columnHelper.accessor("variant.title", {
+        header: t("fields.variant"),
+      }),
+      columnHelper.accessor("quantity", {
+        header: () => (
+          <div className="flex size-full items-center overflow-hidden text-right">
+            <span className="truncate">
+              {t("orders.returns.returnableQuantityHeader")}
+            </span>
+          </div>
+        ),
+        cell: ({ getValue, row }) => {
+          const returnableQuantity =
+            getValue() - (row.original.returned_quantity || 0)
+
+          return returnableQuantity
+        },
+      }),
+      columnHelper.accessor("refundable", {
+        header: () => (
+          <div className="flex size-full items-center justify-end overflow-hidden text-right">
+            <span className="truncate">
+              {t("orders.returns.refundableAmountHeader")}
+            </span>
+          </div>
+        ),
+        cell: ({ getValue }) => {
+          const amount = getValue() || 0
+
+          const stylized = getStylizedAmount(amount, currencyCode)
+
+          return (
+            <div className="flex size-full items-center justify-end overflow-hidden text-right">
+              <span className="truncate">{stylized}</span>
+            </div>
+          )
+        },
+      }),
+    ],
+    [t, currencyCode]
+  )
+}

package/src/routes/orders/order-create-return/components/order-create-return-form/order-create-return-item-table/use-return-item-table-filters.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../../../../components/table/data-table"
+
+export const useReturnItemTableFilters = () => {
+  const { t } = useTranslation()
+
+  const filters: Filter[] = [
+    {
+      key: "returnable_quantity",
+      label: t("orders.returns.returnableQuantityLabel"),
+      type: "number",
+    },
+    {
+      key: "refundable_amount",
+      label: t("orders.returns.refundableAmountLabel"),
+      type: "number",
+    },
+    {
+      key: "created_at",
+      label: t("fields.createdAt"),
+      type: "date",
+    },
+    {
+      key: "updated_at",
+      label: t("fields.updatedAt"),
+      type: "date",
+    },
+  ]
+
+  return filters
+}