Merge pull request #2075 from boxwise/cached-products-take-precedence-over-matched-products

Cached products take precedence over matched products

Author: HaGuesto

front/src/components/BoxReconciliationOverlay/components/BoxReconciliationAccordion.tsx

@@ -13,9 +13,9 @@ import { useState } from "react";
 import { BsFillCheckCircleFill } from "react-icons/bs";
 import { RiQuestionFill } from "react-icons/ri";
 import { ILocationData, IProductWithSizeRangeData } from "./BoxReconciliationView";
-import { IMatchProductsFormData, MatchProductsForm } from "./MatchProductsForm";
+import { MatchProductsFormData, MatchProductsForm } from "./MatchProductsForm";
 import { IReceiveLocationFormData, ReceiveLocationForm } from "./ReceiveLocationForm";
-import { useAtom, useSetAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   reconciliationMatchProductAtom,
   reconciliationReceiveLocationAtom,
@@ -55,8 +55,17 @@ export function BoxReconcilationAccordion({
   onBoxUndelivered,
   onBoxDelivered,
 }: IBoxReconcilationAccordionProps) {
+  const [reconciliationMatchProductCache, setReconciliationMatchProductCache] = useAtom(
+    reconciliationMatchProductAtom,
+  );
+  const cachedReconciliationMatchProduct = useAtomValue(reconciliationMatchProductAtom);
+  /** Matching Source Product ID to look up a matching product in the cache store to prefill the form input. */
+  const matchingProductSourceId = (shipmentDetail.sourceProduct?.id as `${number}`) || "0";
+  const isProductIdMatchedInCache = !!cachedReconciliationMatchProduct[matchingProductSourceId];
   const isProductAutoMatched = !!shipmentDetail?.autoMatchingTargetProduct;
-  const [accordionIndex, setAccordionIndex] = useState(isProductAutoMatched ? 1 : 0);
+  const [accordionIndex, setAccordionIndex] = useState(
+    isProductIdMatchedInCache ? 0 : isProductAutoMatched ? 1 : 0,
+  );
   const [productManuallyMatched, setProductManuallyMatched] = useState(false);
   const [locationSpecified, setLocationSpecified] = useState(false);
   const [productFormData, setProductFormData] = useState<IProductFormData>({
@@ -66,9 +75,6 @@ export function BoxReconcilationAccordion({
     sizeId: isProductAutoMatched ? parseInt(shipmentDetail.sourceSize?.id ?? "0") : undefined,
     numberOfItems: shipmentDetail?.sourceQuantity ?? undefined,
   });
-  const [reconciliationMatchProductCache, setReconciliationMatchProductCache] = useAtom(
-    reconciliationMatchProductAtom,
-  );
   const setReconciliationReceiveLocationCache = useSetAtom(reconciliationReceiveLocationAtom);
   const accordionHeaderColor = isProductAutoMatched || productManuallyMatched ? "#659A7E" : "#000";
   const accordionHeaderText = productManuallyMatched
@@ -119,7 +125,7 @@ export function BoxReconcilationAccordion({
             shipmentDetail={shipmentDetail}
             productAndSizesData={productAndSizesData}
             onBoxUndelivered={onBoxUndelivered}
-            onSubmitMatchProductsForm={(matchedProductsFormData: IMatchProductsFormData) => {
+            onSubmitMatchProductsForm={(matchedProductsFormData: MatchProductsFormData) => {
               setProductManuallyMatched(true);
               setAccordionIndex(1);
 

front/src/components/BoxReconciliationOverlay/components/MatchProductsForm.tsx

@@ -57,13 +57,13 @@ export const MatchProductsFormDataSchema = z.object({
     .nonnegative(),
 });
 
-export type IMatchProductsFormData = z.infer<typeof MatchProductsFormDataSchema>;
+export type MatchProductsFormData = z.infer<typeof MatchProductsFormDataSchema>;
 
 interface IMatchProductsFormProps {
   shipmentDetail: ShipmentDetailWithAutomatchProduct;
   productAndSizesData: IProductWithSizeRangeData[];
   loading: boolean;
-  onSubmitMatchProductsForm: (matchedProductsFormData: IMatchProductsFormData) => void;
+  onSubmitMatchProductsForm: (matchedProductsFormData: MatchProductsFormData) => void;
   onBoxUndelivered: (labelIdentifier: string) => void;
 }
 
@@ -81,25 +81,37 @@ export function MatchProductsForm({
   const isProductIdMatchedInCache = !!cachedReconciliationMatchProduct[matchingProductSourceId];
   /** Object key to match in the store to fetch the input values. */
   const cacheId = isProductIdMatchedInCache ? matchingProductSourceId : "0";
+  const cachedProductLabel = cachedReconciliationMatchProduct[cacheId]?.productId.label;
+  const cachedProductValue = cachedReconciliationMatchProduct[cacheId]?.productId.value;
+  const cachedProductSizeIdLabel = cachedReconciliationMatchProduct[cacheId]?.sizeId.label;
+  const cachedProductSizeIdValue = cachedReconciliationMatchProduct[cacheId]?.sizeId.value;
 
   // Default Values
-  // Automatched Products take precedence over cached products.
-  const defaultValues: IMatchProductsFormData = {
+  // Cached products take precedence over automatched products.
+  const defaultValues: MatchProductsFormData = {
     productId: {
       label:
-        shipmentDetail?.autoMatchingTargetProduct?.name ??
-        cachedReconciliationMatchProduct[cacheId]?.productId.label,
+        cachedProductLabel !== "Save Product As..."
+          ? cachedProductLabel
+          : (shipmentDetail?.autoMatchingTargetProduct?.name ?? "Save Product As..."),
       value:
-        shipmentDetail?.autoMatchingTargetProduct?.id ??
-        cachedReconciliationMatchProduct[cacheId]?.productId.value,
+        cachedProductValue !== ""
+          ? cachedProductValue
+          : (shipmentDetail?.autoMatchingTargetProduct?.id ?? ""),
     },
     sizeId: {
-      label: isProductAutoMatched
-        ? (shipmentDetail.sourceSize?.label ?? "")
-        : cachedReconciliationMatchProduct[cacheId]?.sizeId.label,
-      value: isProductAutoMatched
-        ? (shipmentDetail.sourceSize?.id ?? "")
-        : cachedReconciliationMatchProduct[cacheId]?.sizeId.value,
+      label:
+        cachedProductSizeIdLabel !== "Save Size As..."
+          ? cachedProductSizeIdLabel
+          : isProductAutoMatched
+            ? (shipmentDetail.sourceSize?.label ?? "")
+            : "Save Size As...",
+      value:
+        cachedProductSizeIdValue !== ""
+          ? cachedProductSizeIdValue
+          : isProductAutoMatched
+            ? (shipmentDetail.sourceSize?.id ?? "")
+            : "",
     },
     numberOfItems: shipmentDetail?.sourceQuantity ?? 0,
   };
@@ -116,7 +128,7 @@ export function MatchProductsForm({
     resetField,
     register,
     formState: { errors, isSubmitting },
-  } = useForm<IMatchProductsFormData>({
+  } = useForm<MatchProductsFormData>({
     resolver: zodResolver(MatchProductsFormDataSchema),
     defaultValues,
   });

front/src/stores/globalCacheStore.ts

@@ -1,10 +1,10 @@
-import { IMatchProductsFormData } from "components/BoxReconciliationOverlay/components/MatchProductsForm";
+import { MatchProductsFormData } from "components/BoxReconciliationOverlay/components/MatchProductsForm";
 import { IReceiveLocationFormData } from "components/BoxReconciliationOverlay/components/ReceiveLocationForm";
 import { atomWithStorage } from "jotai/utils";
 
 type ReconciliationMatchProductFields = Record<
   `${number}`,
-  Pick<IMatchProductsFormData, "productId" | "sizeId">
+  Pick<MatchProductsFormData, "productId" | "sizeId">
 >;
 
 /** Persisted atom to cache the value for the Match Product form input in the Box Reconciliation View. */