feat(dashboard): refactor dismissed quantity (#8842)

**What**
- refactor Receive return flow to use dismissed quantity instead of written off quantity 
- fix a few more edge cases

---

FIXES CC-392
This commit is contained in:
Frane Polić authored and GitHub committed 2024-08-29 16:47:07 +00:00
1 parent 074b4ae0da
commit f2496ef783
3 files changed
+41 -28

No files matched your search

@@ -4,7 +4,7 @@ export const ReceiveReturnSchema = z.object({
items: z.array( items: z.array(
z.object({ z.object({
quantity: z.number().nullable(), quantity: z.number().nullable(),
written_off_quantity: z.number().nullable(), dismissed_quantity: z.number().nullable(),
item_id: z.string(), item_id: z.string(),
}) })
), ),
@@ -1,4 +1,4 @@
import React, { useState } from "react" import { useMemo, useState } from "react"
import { HeartBroken } from "@medusajs/icons" import { HeartBroken } from "@medusajs/icons"
import { UseFormReturn } from "react-hook-form" import { UseFormReturn } from "react-hook-form"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
@@ -14,7 +14,7 @@ import {
useUpdateDismissItem, useUpdateDismissItem,
} from "../../../../../hooks/api/returns" } from "../../../../../hooks/api/returns"
type WriteOffQuantityProps = { type DismissedQuantityProps = {
returnId: string returnId: string
orderId: string orderId: string
index: number index: number
@@ -22,13 +22,13 @@ type WriteOffQuantityProps = {
form: UseFormReturn<typeof ReceiveReturnSchema> form: UseFormReturn<typeof ReceiveReturnSchema>
} }
function WrittenOffQuantity({ function DismissedQuantity({
form, form,
item, item,
index, index,
returnId, returnId,
orderId, orderId,
}: WriteOffQuantityProps) { }: DismissedQuantityProps) {
const { t } = useTranslation() const { t } = useTranslation()
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
@@ -47,6 +47,18 @@ function WrittenOffQuantity({
orderId orderId
) )
// quantities only for this return
const [receivedQuantity, dismissedQuantity] = useMemo(() => {
const receivedAction = item.actions?.find(
(a) => a.action === "RECEIVE_RETURN_ITEM"
)
const dismissedAction = item.actions?.find(
(a) => a.action === "RECEIVE_DAMAGED_RETURN_ITEM"
)
return [receivedAction?.details.quantity, dismissedAction?.details.quantity]
}, [item])
const onDismissedQuantityChanged = async (value: number | null) => { const onDismissedQuantityChanged = async (value: number | null) => {
// TODO: if out of bounds prevent sending and notify user // TODO: if out of bounds prevent sending and notify user
@@ -55,11 +67,10 @@ function WrittenOffQuantity({
) )
if (typeof value === "number" && value < 0) { if (typeof value === "number" && value < 0) {
form.setValue( form.setValue(`items.${index}.dismissed_quantity`, dismissedQuantity, {
`items.${index}.written_off_quantity`, shouldTouch: true,
item.detail.written_off_quantity, shouldDirty: true,
{ shouldTouch: true, shouldDirty: true } })
)
toast.error(t("orders.returns.receive.toast.errorNegativeValue")) toast.error(t("orders.returns.receive.toast.errorNegativeValue"))
@@ -68,13 +79,12 @@ function WrittenOffQuantity({
if ( if (
typeof value === "number" && typeof value === "number" &&
value > item.quantity - item.detail.return_received_quantity value > item.quantity - item.detail.return_received_quantity // total received quantity across multiple returns
) { ) {
form.setValue( form.setValue(`items.${index}.dismissed_quantity`, dismissedQuantity, {
`items.${index}.written_off_quantity`, shouldTouch: true,
item.detail.written_off_quantity, shouldDirty: true,
{ shouldTouch: true, shouldDirty: true } })
)
toast.error(t("orders.returns.receive.toast.errorLargeDamagedValue")) toast.error(t("orders.returns.receive.toast.errorLargeDamagedValue"))
@@ -108,9 +118,7 @@ function WrittenOffQuantity({
<div> <div>
<HeartBroken /> <HeartBroken />
</div> </div>
{!!item.detail.written_off_quantity && ( {!!dismissedQuantity && <span>{dismissedQuantity}</span>}
<span>{item.detail.written_off_quantity}</span>
)}
</Button> </Button>
</Popover.Trigger> </Popover.Trigger>
<Popover.Content align="center"> <Popover.Content align="center">
@@ -120,7 +128,7 @@ function WrittenOffQuantity({
</span> </span>
<Form.Field <Form.Field
control={form.control} control={form.control}
name={`items.${index}.written_off_quantity`} name={`items.${index}.dismissed_quantity`}
render={({ field: { onChange, value, ...field } }) => { render={({ field: { onChange, value, ...field } }) => {
return ( return (
<Form.Item className="w-full"> <Form.Item className="w-full">
@@ -156,4 +164,4 @@ function WrittenOffQuantity({
) )
} }
export default WrittenOffQuantity export default DismissedQuantity
@@ -20,7 +20,7 @@ import {
} from "../../../../../hooks/api/returns" } from "../../../../../hooks/api/returns"
import { getStylizedAmount } from "../../../../../lib/money-amount-helpers" import { getStylizedAmount } from "../../../../../lib/money-amount-helpers"
import { ReceiveReturnSchema } from "./constants" import { ReceiveReturnSchema } from "./constants"
import WrittenOffQuantity from "./written-off-quantity" import DismissedQuantity from "./dismissed-quantity"
type OrderAllocateItemsFormProps = { type OrderAllocateItemsFormProps = {
order: AdminOrder order: AdminOrder
@@ -90,8 +90,6 @@ export function OrderReceiveReturnForm({
?.sort((i1, i2) => i1.id.localeCompare(i2.id)) ?.sort((i1, i2) => i1.id.localeCompare(i2.id))
.map((i) => ({ .map((i) => ({
item_id: i.id, item_id: i.id,
quantity: i.detail.return_received_quantity,
written_off_quantity: i.detail.written_off_quantity,
})), })),
send_notification: false, send_notification: false,
}, },
@@ -102,14 +100,21 @@ export function OrderReceiveReturnForm({
previewItems previewItems
?.sort((i1, i2) => i1.id.localeCompare(i2.id)) ?.sort((i1, i2) => i1.id.localeCompare(i2.id))
.forEach((item, index) => { .forEach((item, index) => {
const receivedAction = item.actions?.find(
(a) => a.action === "RECEIVE_RETURN_ITEM"
)
const dismissedAction = item.actions?.find(
(a) => a.action === "RECEIVE_DAMAGED_RETURN_ITEM"
)
form.setValue( form.setValue(
`items.${index}.quantity`, `items.${index}.quantity`,
item.detail.return_received_quantity, receivedAction?.details.quantity,
{ shouldTouch: true, shouldDirty: true } { shouldTouch: true, shouldDirty: true }
) )
form.setValue( form.setValue(
`items.${index}.written_off_quantity`, `items.${index}.dismissed_quantity`,
item.detail.written_off_quantity, dismissedAction?.details.quantity,
{ shouldTouch: true, shouldDirty: true } { shouldTouch: true, shouldDirty: true }
) )
}) })
@@ -255,7 +260,7 @@ export function OrderReceiveReturnForm({
</div> </div>
<div className="flex flex-1 flex-row items-center gap-2"> <div className="flex flex-1 flex-row items-center gap-2">
<WrittenOffQuantity <DismissedQuantity
form={form} form={form}
item={item} item={item}
index={ind} index={ind}