From fa0db242afeb86772cec7c61cf9026784e0817d2 Mon Sep 17 00:00:00 2001 From: fPolic Date: Fri, 30 Aug 2024 15:29:41 +0200 Subject: [PATCH 1/4] feat: claims outbound price edit --- .../claim-create-form/claim-create-form.tsx | 129 +++++++++++++++--- 1 file changed, 107 insertions(+), 22 deletions(-) diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx index 6b63cc8ae9187..ccdd76719d3eb 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx @@ -47,6 +47,7 @@ import { useRemoveClaimInboundItem, useUpdateClaimInboundItem, useUpdateClaimInboundShipping, + useUpdateClaimOutboundShipping, } from "../../../../../hooks/api/claims" import { useUpdateReturn } from "../../../../../hooks/api/returns.tsx" import { sdk } from "../../../../../lib/client" @@ -78,10 +79,17 @@ export const ClaimCreateForm = ({ * STATE */ const { setIsOpen } = useStackedModal() - const [isShippingPriceEdit, setIsShippingPriceEdit] = useState(false) - const [customShippingAmount, setCustomShippingAmount] = useState< - number | string - >(0) + const [isShippingInboundPriceEdit, setIsShippingInboundPriceEdit] = + useState(false) + const [isShippingOutboundPriceEdit, setIsShippingOutboundPriceEdit] = + useState(false) + + const [customInboundShippingAmount, setCustomInboundShippingAmount] = + useState(0) + + const [customOutboundShippingAmount, setCustomOutboundShippingAmount] = + useState(0) + const [inventoryMap, setInventoryMap] = useState< Record >({}) @@ -113,6 +121,11 @@ export const ClaimCreateForm = ({ isPending: isUpdatingInboundShipping, } = useUpdateClaimInboundShipping(claim.id, order.id) + const { + mutateAsync: updateOutboundShipping, + isPending: isUpdatingOutboundShipping, + } = useUpdateClaimOutboundShipping(claim.id, order.id) + const { mutateAsync: deleteInboundShipping, isPending: isDeletingInboundShipping, @@ -133,6 +146,7 @@ export const ClaimCreateForm = ({ isAddingInboundShipping || isUpdatingInboundShipping || isDeletingInboundShipping || + isUpdatingOutboundShipping || isAddingInboundItem || isRemovingInboundItem || isUpdatingInboundItem || @@ -305,8 +319,12 @@ export const ClaimCreateForm = ({ form.setValue("location_id", orderReturn?.location_id) }, [orderReturn]) - const showInboundItemsPlaceholder = !inboundItems.length - const shippingOptionId = form.watch("inbound_option_id") + const showInboundItemsPlaceholder = !inboundPreviewItems.length + const showOutboundItemsPlaceholder = !outboundPreviewItems.length + + const inboundShippingOptionId = form.watch("inbound_option_id") + const outboundShippingOptionId = form.watch("outbound_option_id") + const prompt = usePrompt() const handleSubmit = form.handleSubmit(async (data) => { @@ -393,10 +411,16 @@ export const ClaimCreateForm = ({ } useEffect(() => { - if (isShippingPriceEdit) { - document.getElementById("js-shipping-input")?.focus() + if (isShippingInboundPriceEdit) { + document.getElementById("js-shipping-inbound-input")?.focus() } - }, [isShippingPriceEdit]) + }, [isShippingInboundPriceEdit]) + + useEffect(() => { + if (isShippingOutboundPriceEdit) { + document.getElementById("js-shipping-outbound-input")?.focus() + } + }, [isShippingOutboundPriceEdit]) const showLevelsWarning = useMemo(() => { if (!locationId) { @@ -753,22 +777,22 @@ export const ClaimCreateForm = ({ - {!isShippingPriceEdit && ( + {!isShippingInboundPriceEdit && ( setIsShippingPriceEdit(true)} + onClick={() => setIsShippingInboundPriceEdit(true)} variant="transparent" className="text-ui-fg-muted" disabled={ - showInboundItemsPlaceholder || !shippingOptionId + showInboundItemsPlaceholder || !inboundShippingOptionId } > )} - {isShippingPriceEdit ? ( + {isShippingInboundPriceEdit ? ( { let actionId @@ -786,9 +810,9 @@ export const ClaimCreateForm = ({ }) const customPrice = - customShippingAmount === "" + customInboundShippingAmount === "" ? null - : parseFloat(customShippingAmount) + : parseFloat(customInboundShippingAmount) if (actionId) { updateInboundShipping( @@ -803,15 +827,15 @@ export const ClaimCreateForm = ({ } ) } - setIsShippingPriceEdit(false) + setIsShippingInboundPriceEdit(false) }} symbol={ currencies[order.currency_code.toUpperCase()] .symbol_native } code={order.currency_code} - onValueChange={setCustomShippingAmount} - value={customShippingAmount} + onValueChange={setCustomInboundShippingAmount} + value={customInboundShippingAmount} disabled={showInboundItemsPlaceholder} /> ) : ( @@ -826,9 +850,70 @@ export const ClaimCreateForm = ({ - {getStylizedAmount( - outboundShipping?.amount ?? 0, - order.currency_code + {!isShippingOutboundPriceEdit && ( + setIsShippingOutboundPriceEdit(true)} + variant="transparent" + className="text-ui-fg-muted" + disabled={ + showOutboundItemsPlaceholder || + !outboundShippingOptionId + } + > + + + )} + + {isShippingOutboundPriceEdit ? ( + { + let actionId + + preview.shipping_methods.forEach((s) => { + if (s.actions) { + for (const a of s.actions) { + if (a.action === "SHIPPING_ADD" && !a.return_id) { + actionId = a.id + } + } + } + }) + + const customPrice = + customOutboundShippingAmount === "" + ? null + : parseFloat(customOutboundShippingAmount) + + if (actionId) { + updateOutboundShipping( + { + actionId, + custom_price: customPrice, + }, + { + onError: (error) => { + toast.error(error.message) + }, + } + ) + } + setIsShippingOutboundPriceEdit(false) + }} + symbol={ + currencies[order.currency_code.toUpperCase()] + .symbol_native + } + code={order.currency_code} + onValueChange={setCustomOutboundShippingAmount} + value={customOutboundShippingAmount} + disabled={showOutboundItemsPlaceholder} + /> + ) : ( + getStylizedAmount( + outboundShipping?.amount ?? 0, + order.currency_code + ) )} From 92f7e130f4d981497d1d1ff1c2ac06c46e8a3a11 Mon Sep 17 00:00:00 2001 From: fPolic Date: Fri, 30 Aug 2024 16:34:02 +0200 Subject: [PATCH 2/4] fix: corner cases with claims on update --- .../claim-create-form/claim-create-form.tsx | 11 ++++++++++- .../components/claim-create-form/schema.ts | 1 + .../components/exchange-create-form/schema.ts | 3 ++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx index ccdd76719d3eb..96140adc87b5c 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx @@ -305,7 +305,7 @@ export const ClaimCreateForm = ({ }, [previewItems]) useEffect(() => { - const method = preview.shipping_methods.find( + let method = preview.shipping_methods.find( (s) => !!s.actions?.find((a) => a.action === "SHIPPING_ADD" && !!a.return_id) ) @@ -313,6 +313,15 @@ export const ClaimCreateForm = ({ if (method) { form.setValue("inbound_option_id", method.shipping_option_id) } + + method = preview.shipping_methods.find( + (s) => + !!s.actions?.find((a) => a.action === "SHIPPING_ADD" && !a.return_id) + ) + + if (method) { + form.setValue("outbound_option_id", method.shipping_option_id) + } }, [preview.shipping_methods]) useEffect(() => { diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/schema.ts b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/schema.ts index 283872871dc53..0cc035bffba19 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/schema.ts +++ b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/schema.ts @@ -17,6 +17,7 @@ export const ClaimCreateSchema = z.object({ ), location_id: z.string().optional(), inbound_option_id: z.string().nullish(), + outbound_option_id: z.string().nullish(), send_notification: z.boolean().optional(), }) diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/schema.ts b/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/schema.ts index 3bb35072c185a..0b0ec70326ff2 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/schema.ts +++ b/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/schema.ts @@ -11,12 +11,13 @@ export const ExchangeCreateSchema = z.object({ ), outbound_items: z.array( z.object({ - item_id: z.string(), // TODO: variant id? + item_id: z.string(), quantity: z.number(), }) ), location_id: z.string().optional(), inbound_option_id: z.string().nullish(), + outbound_option_id: z.string().nullish(), send_notification: z.boolean().optional(), }) From 4605c33fd622ac9f5239246cf3d2e5b6803892df Mon Sep 17 00:00:00 2001 From: fPolic Date: Fri, 30 Aug 2024 16:44:58 +0200 Subject: [PATCH 3/4] feat: edit exchange custom price --- .../exchange-create-form.tsx | 128 ++++++++++++++---- 1 file changed, 105 insertions(+), 23 deletions(-) diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx index 4a5643640102d..3736e72ef38c7 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx @@ -28,6 +28,7 @@ import { useCancelExchangeRequest, useExchangeConfirmRequest, useUpdateExchangeInboundShipping, + useUpdateExchangeOutboundShipping, } from "../../../../../hooks/api/exchanges" import { currencies } from "../../../../../lib/data/currencies" import { ExchangeInboundSection } from "./exchange-inbound-section.tsx" @@ -54,10 +55,14 @@ export const ExchangeCreateForm = ({ /** * STATE */ - const [isShippingPriceEdit, setIsShippingPriceEdit] = useState(false) - const [customShippingAmount, setCustomShippingAmount] = useState< - number | string - >(0) + const [isInboundShippingPriceEdit, setIsInboundShippingPriceEdit] = + useState(false) + const [isOutboundShippingPriceEdit, setIsOutboundShippingPriceEdit] = + useState(false) + const [customInboundShippingAmount, setCustomInboundShippingAmount] = + useState(0) + const [customOutboundShippingAmount, setCustomOutboundShippingAmount] = + useState(0) /** * MUTATIONS @@ -70,11 +75,19 @@ export const ExchangeCreateForm = ({ const { mutateAsync: updateInboundShipping, - isPending: isUpdatingInboundShipping, + isPending: isUpdatingOutboundShipping, } = useUpdateExchangeInboundShipping(exchange.id, order.id) + const { + mutateAsync: updateOutboundShipping, + isPending: isUpdatingInboundShipping, + } = useUpdateExchangeOutboundShipping(exchange.id, order.id) + const isRequestLoading = - isConfirming || isCanceling || isUpdatingInboundShipping + isConfirming || + isCanceling || + isUpdatingInboundShipping || + isUpdatingOutboundShipping /** * Only consider items that belong to this exchange. @@ -148,7 +161,9 @@ export const ExchangeCreateForm = ({ return !!s.actions?.find((a) => a.action === "SHIPPING_ADD" && !a.return_id) }) - const shippingOptionId = form.watch("inbound_option_id") + const inboundShippingOptionId = form.watch("inbound_option_id") + const outboundShippingOptionId = form.watch("outbound_option_id") + const prompt = usePrompt() const handleSubmit = form.handleSubmit(async (data) => { @@ -176,10 +191,16 @@ export const ExchangeCreateForm = ({ }) useEffect(() => { - if (isShippingPriceEdit) { - document.getElementById("js-shipping-input")?.focus() + if (isInboundShippingPriceEdit) { + document.getElementById("js-inbound-shipping-input")?.focus() + } + }, [isInboundShippingPriceEdit]) + + useEffect(() => { + if (isOutboundShippingPriceEdit) { + document.getElementById("js-outbound-shipping-input")?.focus() } - }, [isShippingPriceEdit]) + }, [isOutboundShippingPriceEdit]) useEffect(() => { /** @@ -284,22 +305,22 @@ export const ExchangeCreateForm = ({ - {!isShippingPriceEdit && ( + {!isInboundShippingPriceEdit && ( setIsShippingPriceEdit(true)} + onClick={() => setIsInboundShippingPriceEdit(true)} variant="transparent" className="text-ui-fg-muted" disabled={ - !inboundPreviewItems?.length || !shippingOptionId + !inboundPreviewItems?.length || !inboundShippingOptionId } > )} - {isShippingPriceEdit ? ( + {isInboundShippingPriceEdit ? ( { let actionId @@ -317,9 +338,9 @@ export const ExchangeCreateForm = ({ }) const customPrice = - customShippingAmount === "" + customInboundShippingAmount === "" ? null - : parseFloat(customShippingAmount) + : parseFloat(customInboundShippingAmount) if (actionId) { updateInboundShipping( @@ -334,15 +355,15 @@ export const ExchangeCreateForm = ({ } ) } - setIsShippingPriceEdit(false) + setIsInboundShippingPriceEdit(false) }} symbol={ currencies[order.currency_code.toUpperCase()] .symbol_native } code={order.currency_code} - onValueChange={setCustomShippingAmount} - value={customShippingAmount} + onValueChange={setCustomInboundShippingAmount} + value={customInboundShippingAmount} disabled={!inboundPreviewItems?.length} /> ) : ( @@ -357,9 +378,70 @@ export const ExchangeCreateForm = ({ - {getStylizedAmount( - outboundShipping?.amount ?? 0, - order.currency_code + {!isOutboundShippingPriceEdit && ( + setIsOutboundShippingPriceEdit(true)} + variant="transparent" + className="text-ui-fg-muted" + disabled={ + !outboundPreviewItems?.length || + !outboundShippingOptionId + } + > + + + )} + + {isOutboundShippingPriceEdit ? ( + { + let actionId + + preview.shipping_methods.forEach((s) => { + if (s.actions) { + for (const a of s.actions) { + if (a.action === "SHIPPING_ADD" && !a.return_id) { + actionId = a.id + } + } + } + }) + + const customPrice = + customOutboundShippingAmount === "" + ? null + : parseFloat(customOutboundShippingAmount) + + if (actionId) { + updateOutboundShipping( + { + actionId, + custom_price: customPrice, + }, + { + onError: (error) => { + toast.error(error.message) + }, + } + ) + } + setIsOutboundShippingPriceEdit(false) + }} + symbol={ + currencies[order.currency_code.toUpperCase()] + .symbol_native + } + code={order.currency_code} + onValueChange={setCustomOutboundShippingAmount} + value={customOutboundShippingAmount} + disabled={!outboundPreviewItems?.length} + /> + ) : ( + getStylizedAmount( + outboundShipping?.amount ?? 0, + order.currency_code + ) )} From df302ae50e07259652bf3962b0ed2a6ffde9d37f Mon Sep 17 00:00:00 2001 From: fPolic Date: Mon, 2 Sep 2024 08:37:30 +0200 Subject: [PATCH 4/4] feat: keep shipping price value in input --- .../claim-create-form/claim-create-form.tsx | 18 ++++++++++++++++++ .../exchange-create-form.tsx | 18 ++++++++++++++++++ 2 files changed, 36 insertions(+) diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx index 96140adc87b5c..7ecaed3416428 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-create-claim/components/claim-create-form/claim-create-form.tsx @@ -249,10 +249,28 @@ export const ClaimCreateForm = ({ ) ) + const inboundShipping = preview.shipping_methods.find((s) => { + return !!s.actions?.find( + (a) => a.action === "SHIPPING_ADD" && !!a.return_id + ) + }) + const outboundShipping = preview.shipping_methods.find((s) => { return !!s.actions?.find((a) => a.action === "SHIPPING_ADD" && !a.return_id) }) + useEffect(() => { + if (inboundShipping) { + setCustomInboundShippingAmount(inboundShipping.total) + } + }, [inboundShipping]) + + useEffect(() => { + if (outboundShipping) { + setCustomOutboundShippingAmount(outboundShipping.total) + } + }, [outboundShipping]) + const { fields: inboundItems, append, diff --git a/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx b/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx index 3736e72ef38c7..ba79b9a57a5a1 100644 --- a/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx +++ b/packages/admin-next/dashboard/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-create-form.tsx @@ -157,10 +157,28 @@ export const ExchangeCreateForm = ({ resolver: zodResolver(ExchangeCreateSchema), }) + const inboundShipping = preview.shipping_methods.find((s) => { + return !!s.actions?.find( + (a) => a.action === "SHIPPING_ADD" && !!a.return_id + ) + }) + const outboundShipping = preview.shipping_methods.find((s) => { return !!s.actions?.find((a) => a.action === "SHIPPING_ADD" && !a.return_id) }) + useEffect(() => { + if (inboundShipping) { + setCustomInboundShippingAmount(inboundShipping.total) + } + }, [inboundShipping]) + + useEffect(() => { + if (outboundShipping) { + setCustomOutboundShippingAmount(outboundShipping.total) + } + }, [outboundShipping]) + const inboundShippingOptionId = form.watch("inbound_option_id") const outboundShippingOptionId = form.watch("outbound_option_id")