Solution attempt

src/OrderLinesList/Details/OrderLineDetails.js

@@ -92,6 +92,17 @@ const OrderLineDetails = ({
     [lineId, order],
   );
 
+  const goToReceive = useCallback(
+    () => {
+      history.push({
+        pathname: '/receiving',
+        search: `qindex=poLine.poLineNumber&query=${line.poLineNumber}`,
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [lineId, line],
+  );
+
   const deleteLine = useCallback(
     () => {
       const lineNumber = line.poLineNumber;
@@ -206,6 +217,7 @@ const OrderLineDetails = ({
         materialTypes={materialTypes}
         funds={funds}
         goToOrderDetails={goToOrderDetails}
+        goToReceive={goToReceive}
         deleteLine={deleteLine}
         cancelLine={cancelLine}
         tagsToggle={toggleTagsPane}

src/components/POLine/POLine.js

@@ -93,6 +93,17 @@ function POLine({
     [orderId],
   );
 
+  const goToReceive = useCallback(
+    () => {
+      history.push({
+        pathname: '/receiving',
+        search: `qindex=poLine.poLineNumber&query=${line.poLineNumber}`,
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [lineId, line],
+  );
+
   const deleteLine = useCallback(
     () => {
       const lineNumber = line?.poLineNumber;
@@ -211,6 +222,7 @@ function POLine({
         locations={locations}
         poURL={poURL}
         funds={funds}
+        goToReceive={goToReceive}
         deleteLine={deleteLine}
         cancelLine={cancelLine}
         tagsToggle={toggleTagsPane}

src/components/POLine/POLineActionMenu/POLineActionMenu.js

@@ -28,6 +28,7 @@ export const POLineActionMenu = ({
   onDeleteLine,
   onEditLine,
   onNavigateToOrder,
+  onReceive,
   onPrintLine,
   onPrintOrder,
   onReexport,
@@ -56,6 +57,11 @@ export const POLineActionMenu = ({
     onNavigateToOrder();
   }, [onNavigateToOrder, onToggle]);
 
+  const onClickReceive = useCallback(() => {
+    onToggle();
+    onReceive();
+  }, [onReceive, onToggle]);
+
   const onClickReexport = useCallback(() => {
     onToggle();
     onReexport();
@@ -137,7 +143,7 @@ export const POLineActionMenu = ({
             data-testid="line-details-receive-action"
             buttonStyle="dropdownItem"
             data-test-line-receive-button
-            to={`/receiving?qindex=poLine.poLineNumber&query=${line.poLineNumber}`}
+            onClick={onClickReceive}
           >
             <Icon size="small" icon="receive">
               <FormattedMessage id="ui-orders.paneBlock.receiveBtn" />
@@ -232,6 +238,7 @@ POLineActionMenu.propTypes = {
   onDeleteLine: PropTypes.func.isRequired,
   onEditLine: PropTypes.func.isRequired,
   onNavigateToOrder: PropTypes.func,
+  onReceive: PropTypes.func,
   onPrintLine: PropTypes.func.isRequired,
   onPrintOrder: PropTypes.func.isRequired,
   onReexport: PropTypes.func.isRequired,

src/components/POLine/POLineView.js

@@ -127,6 +127,7 @@ const POLineView = ({
   deleteLine,
   editable,
   goToOrderDetails,
+  goToReceive,
   history,
   line,
   location,
@@ -265,6 +266,7 @@ const POLineView = ({
         onDeleteLine={toggleConfirmDelete}
         onEditLine={onEditPOLine}
         onNavigateToOrder={goToOrderDetails}
+        onReceive={goToReceive}
         onPrintLine={togglePrintLineModal}
         onPrintOrder={togglePrintOrderModal}
         onReexport={toggleOrderLineReexportModal}
@@ -274,6 +276,7 @@ const POLineView = ({
   }, [
     editable,
     goToOrderDetails,
+    goToReceive,
     hiddenFields,
     isCancelable,
     isRestrictionsLoading,
@@ -646,6 +649,7 @@ POLineView.propTypes = {
   onClose: PropTypes.func,
   editable: PropTypes.bool,
   goToOrderDetails: PropTypes.func,
+  goToReceive: PropTypes.func,
   deleteLine: PropTypes.func,
   cancelLine: PropTypes.func,
   tagsToggle: PropTypes.func.isRequired,

src/components/PurchaseOrder/getPOActionMenu.js

@@ -152,7 +152,10 @@ export function getPOActionMenu({
             buttonStyle="dropdownItem"
             data-test-receiving-button
             data-testid="order-receiving-button"
-            onClick={clickReceive}
+            onClick={() => {
+              onToggle();
+              clickReceive();
+            }}
           >
             <Icon size="small" icon="receive">
               <FormattedMessage id="ui-orders.paneBlock.receiveBtn" />