fix(admin-ui): Allow backorder update on variants (#4051)

.changeset/slimy-snails-run.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+feat(admin-ui): fix allow_backorder updates

packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variant-inventory-modal.tsx

@@ -17,7 +17,7 @@ import Modal from "../../molecules/modal"
 import { Option } from "../../../types/shared"
 import { countries } from "../../../utils/countries"
 import { queryClient } from "../../../constants/query-client"
-import { removeNullish } from "../../../utils/remove-nullish"
+import { removeFalsy, removeNullish } from "../../../utils/remove-nullish"
 import { useContext } from "react"
 import useEditProductActions from "../../../hooks/use-edit-product-actions"
 import { useForm } from "react-hook-form"
@@ -59,7 +59,7 @@ const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
     delete data.upc
     delete data.allow_backorder
 
-    return removeNullish({
+    return removeFalsy({
       ...updateDimensions,
       ...updateCustoms,
       ...data,
@@ -167,7 +167,8 @@ const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
     // @ts-ignore
     onUpdateVariant(
       variant.id,
-      removeNullish({
+      {
+        ...removeNullish({
           ...dimensions,
           ...customs,
           ...stock,
@@ -176,6 +177,7 @@ const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
           upc,
           allow_backorder,
         }),
+      },
       () => {
         refetch()
         if (shouldInvalidateCache) {
@@ -287,7 +289,7 @@ export const getEditVariantDefaultValues = (
       upc: variant?.upc || null,
       inventory_quantity: null,
       manage_inventory: false,
-      allow_backorder: false,
+      allow_backorder: variant?.allow_backorder ?? false,
       location_levels: null,
       dimensions: {
         height: null,
@@ -325,7 +327,7 @@ export const getEditVariantDefaultValues = (
     upc: variant?.upc || null,
     inventory_quantity: inventoryItem.inventory_quantity,
     manage_inventory: !!inventoryItem,
-    allow_backorder: inventoryItem.allow_backorder,
+    allow_backorder: !!variant?.allow_backorder,
     location_levels: inventoryItem.location_levels,
     dimensions: {
       height: inventoryItem.height,

packages/admin-ui/ui/src/components/templates/discount-table/use-copy-promotion.tsx

@@ -2,7 +2,7 @@ import { useAdminCreateDiscount } from "medusa-react"
 import { useNavigate } from "react-router-dom"
 import useNotification from "../../../hooks/use-notification"
 import { getErrorMessage } from "../../../utils/error-messages"
-import { removeNullish } from "../../../utils/remove-nullish"
+import { removeFalsy } from "../../../utils/remove-nullish"
 
 const useCopyPromotion = () => {
   const navigate = useNavigate()
@@ -47,7 +47,7 @@ const useCopyPromotion = () => {
     if (promotion.rule.conditions) {
       copy.rule.conditions = promotion.rule.conditions.map((cond) => ({
         operator: cond.operator,
-        ...removeNullish({
+        ...removeFalsy({
           products: cond.products,
           product_types: cond.product_types,
           product_tags: cond.product_tags,

packages/admin-ui/ui/src/domain/discounts/details/configurations/use-discount-configurations.tsx

@@ -7,7 +7,7 @@ import TrashIcon from "../../../../components/fundamentals/icons/trash-icon"
 import { getErrorMessage } from "../../../../utils/error-messages"
 import moment from "moment"
 import { parse } from "iso8601-duration"
-import { removeNullish } from "../../../../utils/remove-nullish"
+import { removeFalsy } from "../../../../utils/remove-nullish"
 import { useAdminUpdateDiscount } from "medusa-react"
 import useNotification from "../../../../hooks/use-notification"
 
@@ -103,7 +103,7 @@ const useDiscountConfigurations = (discount: Discount) => {
       title: "Duration",
       description: (
         <CommonDescription
-          text={Object.entries(removeNullish(parse(discount.valid_duration)))
+          text={Object.entries(removeFalsy(parse(discount.valid_duration)))
             .map(([key, value]) => `${value} ${key}`)
             .join(", ")}
         />

packages/admin-ui/ui/src/domain/orders/details/returns/index.tsx

@@ -32,7 +32,7 @@ import WarningCircleIcon from "../../../../components/fundamentals/icons/warning
 import { displayAmount } from "../../../../utils/prices"
 import { getAllReturnableItems } from "../utils/create-filtering"
 import { getErrorMessage } from "../../../../utils/error-messages"
-import { removeNullish } from "../../../../utils/remove-nullish"
+import { removeFalsy } from "../../../../utils/remove-nullish"
 import { useFeatureFlag } from "../../../../providers/feature-flag-provider"
 import useNotification from "../../../../hooks/use-notification"
 
@@ -181,7 +181,7 @@ const ReturnMenu: React.FC<ReturnMenuProps> = ({ order, onDismiss }) => {
         ...value,
       }
       delete toSet.reason
-      const clean = removeNullish(toSet)
+      const clean = removeFalsy(toSet)
       return {
         item_id: key,
         ...(clean as { quantity: number }),

packages/admin-ui/ui/src/hooks/use-edit-product-actions.tsx

@@ -13,10 +13,10 @@ import {
   useAdminUpdateVariant,
 } from "medusa-react"
 
-import { useNavigate } from "react-router-dom"
 import { getErrorMessage } from "../utils/error-messages"
-import { removeNullish } from "../utils/remove-nullish"
+import { removeFalsy } from "../utils/remove-nullish"
 import useImperativeDialog from "./use-imperative-dialog"
+import { useNavigate } from "react-router-dom"
 import useNotification from "./use-notification"
 
 const useEditProductActions = (productId: string) => {
@@ -74,8 +74,9 @@ const useEditProductActions = (productId: string) => {
     updateVariant.mutate(
       {
         variant_id: id,
-        ...removeNullish(payload),
+        ...removeFalsy(payload),
         manage_inventory: payload.manage_inventory,
+        allow_backorder: payload.allow_backorder,
       },
       {
         onSuccess: () => {

packages/admin-ui/ui/src/utils/remove-nullish.ts

@@ -1,2 +1,11 @@
-export const removeNullish = (obj: Record<string, unknown>) =>
+export const removeFalsy = (obj: Record<string, unknown>) =>
   Object.entries(obj).reduce((a, [k, v]) => (v ? ((a[k] = v), a) : a), {})
+
+// == null is also true for undefined
+export const removeNullish = (
+  obj: Record<string, unknown>
+): Record<string, unknown> =>
+  Object.entries(obj).reduce(
+    (a, [k, v]) => (v != null ? ((a[k] = v), a) : a),
+    {}
+  )