@medusajs/dashboard 0.0.1

package/src/routes/orders/order-edit/components/order-edit-form/order-edit-form.tsx

@@ -0,0 +1,359 @@
+import React, { useEffect, useMemo, useState } from "react"
+import { useForm } from "react-hook-form"
+import * as zod from "zod"
+import { useTranslation } from "react-i18next"
+import { useSearchParams } from "react-router-dom"
+import {
+  adminOrderEditsKeys,
+  adminOrderKeys,
+  useAdminCancelOrderEdit,
+  useAdminConfirmOrderEdit,
+  useAdminOrderEditAddLineItem,
+  useAdminUpdateOrderEdit,
+} from "medusa-react"
+
+import { Button, clx, Heading, Text, Textarea } from "@medusajs/ui"
+import { Order, OrderEdit } from "@medusajs/medusa"
+
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../components/route-modal"
+import { SplitView } from "../../../../../components/layout/split-view"
+import { VariantTable } from "../variant-table"
+
+import { medusa, queryClient } from "../../../../../lib/medusa.ts"
+import { MoneyAmountCell } from "../../../../../components/table/table-cells/common/money-amount-cell"
+import { Form } from "../../../../../components/common/form"
+import { OrderEditItem } from "./order-edit-item"
+
+type OrderEditFormProps = {
+  order: Order
+  orderEdit: OrderEdit
+}
+
+const QuantitiesSchema = zod.union(
+  zod.record(zod.string(), zod.number().optional()),
+  zod.object({ note: zod.string().optional() })
+)
+
+export function OrderEditForm({ order, orderEdit }: OrderEditFormProps) {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+  const [, setSearchParams] = useSearchParams()
+
+  /**
+   * STATE
+   */
+  const [open, setOpen] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isAddingItems, setIsAddingItems] = useState(false)
+
+  /**
+   * FORM
+   */
+  const form = useForm<zod.infer<typeof QuantitiesSchema>>({
+    defaultValues: order.items.reduce(
+      (acc, i) => {
+        acc[i.id] = i.quantity
+        return acc
+      },
+      { note: orderEdit.internal_note || "" }
+    ),
+  })
+
+  /**
+   * CRUD HOOKS
+   */
+  const { mutateAsync: confirmOrderEdit } = useAdminConfirmOrderEdit(
+    orderEdit.id
+  )
+  const { mutateAsync: cancelOrderEdit } = useAdminCancelOrderEdit(orderEdit.id)
+  const { mutateAsync: addLineItemToOrderEdit } = useAdminOrderEditAddLineItem(
+    orderEdit.id
+  )
+  const { mutateAsync: updateOrderEdit } = useAdminUpdateOrderEdit(orderEdit.id)
+
+  const onQuantityChangeComplete = async (itemId: string) => {
+    setIsSubmitting(true)
+
+    const quantity = form.getValues()[itemId]
+
+    // if (form.getValues()[itemId] === 0) {
+    //   await medusa.admin.orderEdits.removeLineItem(orderEdit.id, itemId)
+    // } else
+
+    if (quantity > 0) {
+      await medusa.admin.orderEdits.updateLineItem(orderEdit.id, itemId, {
+        quantity,
+      })
+    }
+    await queryClient.invalidateQueries(
+      adminOrderEditsKeys.detail(orderEdit.id)
+    )
+
+    setIsSubmitting(false)
+  }
+
+  const currentItems = useMemo(
+    () =>
+      orderEdit?.items
+        .sort((i1, i2) => i1.id.localeCompare(i2.id))
+        .filter((i) => i.original_item_id) || [],
+    [orderEdit]
+  )
+  const addedItems = useMemo(
+    () =>
+      orderEdit?.items
+        .sort((i1, i2) => i1.id.localeCompare(i2.id))
+        .filter((i) => !i.original_item_id) || [],
+    [orderEdit]
+  )
+
+  /**
+   * EFFECTS
+   */
+  useEffect(() => {
+    if (orderEdit) {
+      orderEdit?.items.forEach((i) => {
+        form.setValue(i.id, i.quantity)
+      })
+    }
+  }, [orderEdit?.items.length])
+
+  /**
+   * HANDLERS
+   */
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setSearchParams(
+        {},
+        {
+          replace: true,
+        }
+      )
+    }
+
+    setOpen(open)
+  }
+
+  const onVariantsSelect = async (variantIds: string[]) => {
+    setIsAddingItems(true)
+    try {
+      await Promise.all(
+        variantIds.map((id) =>
+          addLineItemToOrderEdit({ variant_id: id, quantity: 1 })
+        )
+      )
+
+      await queryClient.invalidateQueries(adminOrderKeys.detail(order.id))
+    } finally {
+      setIsAddingItems(false)
+    }
+
+    setOpen(false)
+  }
+
+  const onItemRemove = async (itemId: string) => {
+    setIsSubmitting(true)
+
+    const change = orderEdit.changes.find(
+      (change) =>
+        change.line_item_id === itemId ||
+        change.original_line_item_id === itemId
+    )
+    try {
+      if (change) {
+        if (change.type === "item_add") {
+          await medusa.admin.orderEdits.deleteItemChange(
+            orderEdit.id,
+            change.id
+          )
+        }
+        if (change.type === "item_update") {
+          await medusa.admin.orderEdits.deleteItemChange(
+            orderEdit.id,
+            change.id
+          )
+          await medusa.admin.orderEdits.removeLineItem(orderEdit.id, itemId)
+        }
+      } else {
+        await medusa.admin.orderEdits.removeLineItem(orderEdit.id, itemId)
+      }
+
+      await queryClient.invalidateQueries(
+        adminOrderEditsKeys.detail(orderEdit.id)
+      )
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleSubmit = form.handleSubmit(async (data) => {
+    setIsSubmitting(true)
+
+    try {
+      if (data.note !== orderEdit?.internal_note) {
+        await updateOrderEdit({ internal_note: data.note })
+      }
+
+      await confirmOrderEdit() // TODO error notification if fails
+    } finally {
+      setIsSubmitting(false)
+    }
+
+    handleSuccess(`/orders/${order.id}`)
+  })
+
+  // TODO pass on "cancel" close
+  const handlCancel = async () => {
+    await cancelOrderEdit()
+
+    handleSuccess(`/orders/${order.id}`)
+  }
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <form className="flex h-full flex-col" onSubmit={handleSubmit}>
+        <RouteFocusModal.Header>
+          <div className="flex   h-full items-center justify-end gap-x-2">
+            <RouteFocusModal.Close asChild>
+              <Button variant="secondary" size="small">
+                {t("actions.cancel")}
+              </Button>
+            </RouteFocusModal.Close>
+            <Button type="submit" size="small" isLoading={isSubmitting}>
+              {t("actions.confirm")}
+            </Button>
+          </div>
+        </RouteFocusModal.Header>
+        <RouteFocusModal.Body className="flex h-full w-full flex-col items-center overflow-hidden">
+          <SplitView open={open} onOpenChange={handleOpenChange}>
+            <SplitView.Content>
+              <div className="conatiner mx-auto max-w-[720px]">
+                <div className={clx("flex h-full w-full flex-col pt-16")}>
+                  <Heading level="h1" className="pb-8 text-left">
+                    {t("orders.edits.title")}
+                  </Heading>
+
+                  <Text className="text-ui-fg-base mb-1" weight="plus">
+                    {t("orders.edits.currentItems")}
+                  </Text>
+                  <Text className="text-ui-fg-subtle mb-4">
+                    {t("orders.edits.currentItemsDescription")}
+                  </Text>
+
+                  {currentItems.map((item) => (
+                    <OrderEditItem
+                      key={item.id}
+                      item={item}
+                      form={form}
+                      currencyCode={order.currency_code}
+                      onRemove={onItemRemove}
+                      onQuantityChangeComplete={onQuantityChangeComplete}
+                    />
+                  ))}
+
+                  <div className="border-b border-dashed pb-10 ">
+                    <Text className="text-ui-fg-base mb-1 mt-8" weight="plus">
+                      {t("orders.edits.addItems")}
+                    </Text>
+                    <Text className="text-ui-fg-subtle mb-2">
+                      {t("orders.edits.addItemsDescription")}
+                    </Text>
+
+                    {!!addedItems.length &&
+                      addedItems.map((item) => (
+                        <div key={item.id} className="pb-4 pt-2">
+                          <OrderEditItem
+                            item={item}
+                            form={form}
+                            currencyCode={order.currency_code}
+                            onRemove={onItemRemove}
+                            onQuantityChangeComplete={onQuantityChangeComplete}
+                          />
+                        </div>
+                      ))}
+
+                    <div className="m mt-2 flex justify-end">
+                      <Button
+                        variant="secondary"
+                        type="button"
+                        onClick={() => setOpen(true)}
+                      >
+                        {t("orders.edits.addItems")}
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-y-2 border-b border-dashed py-10">
+                    <div className="text-ui-fg-subtle flex justify-between text-sm">
+                      <Text className="min-w-[50%] ">
+                        {t("orders.edits.amountPaid")}
+                      </Text>
+                      <MoneyAmountCell
+                        align="right"
+                        currencyCode={order.currency_code}
+                        amount={order.paid_total - order.refunded_total}
+                      />
+                    </div>
+                    <div className="text-ui-fg-subtle flex justify-between text-sm ">
+                      <Text className="min-w-[50%] ">
+                        {t("orders.edits.newTotal")}
+                      </Text>
+                      <MoneyAmountCell
+                        align="right"
+                        currencyCode={order.currency_code}
+                        amount={orderEdit.total}
+                      />
+                    </div>
+                    <div className="text-ui-fg-base flex justify-between text-sm">
+                      <Text className="min-w-[50%]" weight="plus">
+                        {t("orders.edits.differenceDue")}
+                      </Text>
+                      <MoneyAmountCell
+                        align="right"
+                        currencyCode={order.currency_code}
+                        amount={orderEdit.total - order.paid_total}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="py-10">
+                    <Form.Field
+                      control={form.control}
+                      name="note"
+                      render={({ field }) => {
+                        return (
+                          <Form.Item>
+                            <Text
+                              className="text-ui-fg-base mb-1"
+                              weight="plus"
+                            >
+                              {t("fields.note")}
+                            </Text>
+                            <Form.Control>
+                              <Textarea {...field} />
+                            </Form.Control>
+                            <Form.ErrorMessage />
+                          </Form.Item>
+                        )
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </SplitView.Content>
+            <SplitView.Drawer>
+              <VariantTable
+                isAddingItems={isAddingItems}
+                onSave={onVariantsSelect}
+                order={order}
+              />
+            </SplitView.Drawer>
+          </SplitView>
+        </RouteFocusModal.Body>
+      </form>
+    </RouteFocusModal.Form>
+  )
+}

package/src/routes/orders/order-edit/components/order-edit-form/order-edit-item.tsx

@@ -0,0 +1,112 @@
+import React from "react"
+import { useTranslation } from "react-i18next"
+import { UseFormReturn } from "react-hook-form"
+
+import { Input, Text } from "@medusajs/ui"
+import { LineItem } from "@medusajs/medusa"
+
+import { MoneyAmountCell } from "../../../../../components/table/table-cells/common/money-amount-cell"
+import { Thumbnail } from "../../../../../components/common/thumbnail"
+import { Trash } from "@medusajs/icons"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { Form } from "../../../../../components/common/form"
+
+type OrderEditItemProps = {
+  item: LineItem
+  currencyCode: string
+
+  form: UseFormReturn<Record<string, number>>
+  onQuantityChangeComplete: (id: string) => void
+  onRemove: (id: string) => void
+}
+
+function OrderEditItem({
+  item,
+  currencyCode,
+  form,
+  onQuantityChangeComplete,
+  onRemove,
+}: OrderEditItemProps) {
+  const { t } = useTranslation()
+
+  const thumbnail = item.thumbnail
+
+  return (
+    <div className="bg-ui-bg-subtle shadow-elevation-card-rest my-2 rounded-xl">
+      <div className="flex gap-x-2 border-b p-3 text-sm">
+        <div className="flex flex-grow items-center gap-x-3">
+          <Thumbnail src={thumbnail} />
+          <div className="flex flex-col">
+            <div>
+              <Text as="span" weight="plus">
+                {item.title}
+              </Text>
+              {item.variant.sku && <span>(${item.variant.sku})</span>}
+            </div>
+            <Text as="div" className="text-ui-fg-subtle">
+              {item.variant.title}
+            </Text>
+          </div>
+        </div>
+
+        <div className="text-ui-fg-subtle flex flex-shrink-0">
+          <MoneyAmountCell currencyCode={currencyCode} amount={item.total} />
+        </div>
+
+        <div className="flex items-center">
+          <ActionMenu
+            groups={[
+              {
+                actions: [
+                  {
+                    label: t("actions.remove"),
+                    icon: <Trash />,
+                    onClick: () => onRemove(item.id),
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+      </div>
+
+      <div className="block p-3 text-sm">
+        <Text weight="plus" className="mb-2">
+          {t("fields.quantity")}
+        </Text>
+
+        <Form.Field
+          control={form.control}
+          name={item.id}
+          render={({ field }) => {
+            return (
+              <Form.Item>
+                <Form.Control>
+                  <Input
+                    className="bg-ui-bg-base w-full rounded-lg"
+                    min={1}
+                    type="number"
+                    {...field}
+                    onChange={(e) => {
+                      const val = e.target.value
+                      field.onChange(val === "" ? null : Number(val))
+                    }}
+                    onBlur={() => {
+                      if (typeof form.getValues()[item.id] === "undefined") {
+                        field.onChange(1)
+                      }
+                      onQuantityChangeComplete(item.id)
+                    }}
+                  />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { OrderEditItem }

package/src/routes/orders/order-edit/components/variant-table/index.tsx

@@ -0,0 +1 @@
+export * from "./variant-table"

package/src/routes/orders/order-edit/components/variant-table/use-variant-table-columns.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { createColumnHelper } from "@tanstack/react-table"
+import { Checkbox } from "@medusajs/ui"
+import {
+  ProductCell,
+  ProductHeader,
+} from "../../../../../components/table/table-cells/product/product-cell"
+import { MoneyAmountCell } from "../../../../../components/table/table-cells/common/money-amount-cell"
+
+type PricedVariant = any // TODO: PricedVariant
+
+const columnHelper = createColumnHelper<PricedVariant>()
+
+export const useVariantTableColumns = (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 }) => {
+          return (
+            <Checkbox
+              checked={row.getIsSelected()}
+              onCheckedChange={(value) => row.toggleSelected(!!value)}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            />
+          )
+        },
+      }),
+      columnHelper.display({
+        id: "product",
+        header: () => <ProductHeader />,
+        cell: ({ row }) => <ProductCell product={row.original.product} />,
+      }),
+      columnHelper.accessor("sku", {
+        header: t("fields.sku"),
+      }),
+      columnHelper.accessor("title", {
+        header: t("fields.variant"),
+      }),
+      columnHelper.display({
+        id: "amount",
+        header: () => (
+          <div className="text-small text-right font-semibold text-gray-500">
+            {t("fields.price")}
+          </div>
+        ),
+        cell: ({ row: { original } }) => {
+          if (!original.original_price_incl_tax) {
+            return null
+          }
+
+          const showOriginal = original.calculated_price_type !== "default"
+
+          return (
+            <div className="flex items-center justify-end gap-2">
+              <div className="flex flex-col items-end">
+                {showOriginal && (
+                  <span className="text-gray-400 line-through">
+                    <MoneyAmountCell
+                      currencyCode={currencyCode}
+                      amount={original.original_price_incl_tax}
+                    />
+                  </span>
+                )}
+                <span>
+                  <MoneyAmountCell
+                    currencyCode={currencyCode}
+                    amount={original.calculated_price_incl_tax}
+                  />
+                </span>
+              </div>
+            </div>
+          )
+        },
+      }),
+    ],
+    [t]
+  )
+}

package/src/routes/orders/order-edit/components/variant-table/use-variant-table-filters.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next"
+import { Filter } from "../../../../../components/table/data-table"
+
+export const useVariantTableFilters = () => {
+  const { t } = useTranslation()
+
+  const filters: Filter[] = [
+    { label: t("fields.createdAt"), key: "created_at" },
+    { label: t("fields.updatedAt"), key: "updated_at" },
+  ].map((f) => ({
+    key: f.key,
+    label: f.label,
+    type: "date",
+  }))
+
+  return filters
+}

package/src/routes/orders/order-edit/components/variant-table/use-variant-table-query.tsx

@@ -0,0 +1,32 @@
+import { AdminGetVariantsParams } from "@medusajs/medusa"
+
+import { useQueryParams } from "../../../../../hooks/use-query-params"
+
+export const useVariantTableQuery = ({
+  pageSize = 50,
+  prefix,
+}: {
+  pageSize?: number
+  prefix: string
+}) => {
+  const raw = useQueryParams(
+    ["offset", "q", "title", "customer_id", "inventory_quantity"],
+    prefix
+  )
+
+  const searchParams: AdminGetVariantsParams = {
+    limit: pageSize,
+    offset: raw.offset ? Number(raw.offset) : 0,
+    q: raw.q,
+    title: raw.title,
+    customer_id: raw.customer_id,
+    inventory_quantity: raw.inventory_quantity
+      ? Number(raw.inventory_quantity)
+      : undefined,
+  }
+
+  return {
+    searchParams,
+    raw,
+  }
+}