fix: after rebase

Author: adam-strzelec

src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderTable/PaymentBuilderTable.tsx

@@ -304,7 +304,7 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
     return [...populatedItems, ...placeholderItems];
   }, [expendituresGlobalClaimDelay, items, expectedNumberOfPayouts]);
 
-  const newDataWithChanges = useMemo(() => {
+  const dataWithChanges = useMemo(() => {
     if (!expenditureSlotChanges) {
       return data.sort((a, b) => a.id - b.id);
     }
@@ -352,14 +352,14 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
     ];
   }, [expenditureSlotChanges, data]);
 
-  const filteredData = newDataWithChanges.filter((item) =>
+  const filteredData = dataWithChanges.filter((item) =>
     BigNumber.from(item.amount).gt(0),
   );
 
-  const dataToShow = isEditStepActive ? newDataWithChanges : filteredData;
+  const dataToShow = isEditStepActive ? dataWithChanges : filteredData;
 
   const columns = useGetPaymentBuilderColumns({
-    data: newDataWithChanges,
+    data: dataWithChanges,
     status,
     slots: items,
     finalizedTimestamp,
@@ -383,14 +383,17 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
 
     if (isEditStepActive && tableRefCurrent) {
       const tableRows = tableRefCurrent.querySelectorAll('tbody > tr');
+      const expandedRows = tableRefCurrent.querySelectorAll(
+        'tbody > tr.expanded-below',
+      );
       const tableBodys = tableRefCurrent.querySelectorAll('tbody');
 
-      const changedItemsCount = newDataWithChanges.filter(
+      const changedItemsCount = dataWithChanges.filter(
         (item) => item.newValues,
       ).length;
       const lastChangedTableRow =
         tableRows[changedItemsCount + expandedRowsIds.length - 1];
-      const hasAllRowsChanged = changedItemsCount === newDataWithChanges.length;
+      const hasAllRowsChanged = changedItemsCount === dataWithChanges.length;
       const rowsBeforeLastChanged = Array.from(tableRows).slice(
         0,
         changedItemsCount - 1,
@@ -402,7 +405,7 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
         });
       }
 
-      const editedRowsLength = changedItemsCount + expandedRowsIds.length;
+      const editedRowsLength = changedItemsCount + expandedRows.length;
       setAllRowsChanged(hasAllRowsChanged);
 
       if (isTablet) {
@@ -417,8 +420,12 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
         tableRows.forEach((row, index) => {
           if (index < editedRowsLength) {
             row.classList.add('edited');
+            if (index === editedRowsLength - 1) {
+              row.classList.add('last-expanded-row');
+            }
           } else {
             row.classList.remove('edited');
+            row.classList.remove('last-expanded-row');
           }
         });
       }
@@ -475,13 +482,14 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
             'last-row',
             'edited',
             'tablet-edited',
+            'last-expanded-row',
           );
         });
       };
     }
 
     return () => {};
-  }, [isEditStepActive, newDataWithChanges, expandedRowsIds, isTablet]);
+  }, [isEditStepActive, dataWithChanges, expandedRowsIds, isTablet]);
 
   return (
     <div className="mt-7" ref={tableRef}>
@@ -515,7 +523,7 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
               !isTablet && allRowsChanged,
           },
           {
-            '[&_tr.last-edited-row>td]:border-b-1 [&_tr.last-edited-row>td]:border [&_tr.last-edited-row>td]:border-l-0 [&_tr.last-edited-row>td]:border-r-0 [&_tr.last-edited-row>td]:border-t-0 [&_tr.last-edited-row>td]:border-blue-400':
+            '[&_tr.last-expanded-row>td]:border-b-1 [&_tr.last-expanded-row>td]:border [&_tr.last-expanded-row>td]:border-l-0 [&_tr.last-expanded-row>td]:border-r-0 [&_tr.last-expanded-row>td]:border-t-0 [&_tr.last-expanded-row>td]:border-blue-400':
               !isTablet && !allRowsChanged,
           },
         )}

src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderWidget/PaymentBuilderWidget.tsx

@@ -7,6 +7,7 @@ import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { usePaymentBuilderContext } from '~context/PaymentBuilderContext/PaymentBuilderContext.ts';
 import {
+  type ColonyActionFragment,
   ExpenditureStatus,
   ExpenditureType,
   useGetColonyExpendituresQuery,
@@ -18,8 +19,7 @@ import { type LockExpenditurePayload } from '~redux/sagas/expenditures/lockExpen
 import Numeral from '~shared/Numeral/Numeral.tsx';
 import SpinnerLoader from '~shared/Preloaders/SpinnerLoader.tsx';
 import { DecisionMethod } from '~types/actions.ts';
-import { type ColonyAction, type ExpenditureAction } from '~types/graphql.ts';
-import { type MultiSigAction } from '~types/motions.ts';
+import { type ExpenditureAction } from '~types/graphql.ts';
 import { notMaybe, notNull } from '~utils/arrays/index.ts';
 import { MotionState } from '~utils/colonyMotions.ts';
 import {
@@ -70,7 +70,6 @@ import {
   segregateFundingActions,
   segregateEditActions,
 } from './utils.ts';
-import MotionWidgetSkeleton from '~v5/shared/MotionWidgetSkeleton/MotionWidgetSkeleton.tsx';
 
 const PaymentBuilderWidget: FC<PaymentBuilderWidgetProps> = ({ action }) => {
   const { colony, refetchColony } = useColonyContext();
@@ -390,15 +389,15 @@ const PaymentBuilderWidget: FC<PaymentBuilderWidgetProps> = ({ action }) => {
             <MotionBox transactionId={selectedFundingMotion.transactionHash} />
           )}
 
-          {selectedFundingMultiSig &&
-            isMultiSig(selectedFundingAction as ColonyAction) && (
-              <MultiSigFunding
-                action={selectedFundingAction as MultiSigAction}
-                onMultiSigRejected={() => {
-                  setExpectedStepKey(null);
-                }}
-              />
-            )}
+          {selectedFundingMultiSig && selectedFundingAction.multiSigData && (
+            <MultiSigFunding
+              action={selectedFundingAction as ColonyActionFragment}
+              onMultiSigRejected={() => {
+                setExpectedStepKey(null);
+              }}
+              multiSigData={selectedFundingAction.multiSigData}
+            />
+          )}
 
           {selectedFundingAction &&
             isSelectedActionInCurrentActions &&
@@ -536,42 +535,6 @@ const PaymentBuilderWidget: FC<PaymentBuilderWidgetProps> = ({ action }) => {
         ),
       };
 
-  const getFundingStepContent = () => {
-    if (selectedFundingMotion) {
-      return (
-        <MotionBox transactionId={selectedFundingMotion.transactionHash} />
-      );
-    }
-    // since the multisig widget doesn't fetch its own action we need to handle the loader here
-    if (selectedFundingMultiSig) {
-      if (loadingAction || !fundingAction) {
-        return <MotionWidgetSkeleton />;
-      }
-
-      if (fundingAction && fundingAction.multiSigData) {
-        return (
-          <MultiSigFunding
-            action={fundingAction}
-            multiSigData={fundingAction.multiSigData}
-            onMultiSigRejected={() => {
-              setExpectedStepKey(null);
-            }}
-          />
-        );
-      }
-
-      console.warn(
-        "The provided assumed multiSig action doesn't pass the type guard, something is wrong",
-      );
-      return null;
-    }
-
-    if (selectedFundingAction) {
-      return <ActionWithPermissionsInfo action={selectedFundingAction} />;
-    }
-    return null;
-  };
-
   const items: StepperItem<ExpenditureStep>[] = [
     {
       key: ExpenditureStep.Create,

src/context/PaymentBuilderContext/PaymentBuilderContext.ts

@@ -55,8 +55,6 @@ export const PaymentBuilderContext = createContext<{
   selectedFinalizeAction: null,
   setSelectedFinalizeAction: noop,
   setSelectedReleaseAction: noop,
-  selectedMilestones: [],
-  setSelectedMilestones: noop,
   selectedEditingAction: null,
   setSelectedEditingAction: noop,
   currentStep: null,

src/context/PaymentBuilderContext/PaymentBuilderContextProvider.tsx

@@ -47,6 +47,12 @@ const PaymentBuilderContextProvider: FC<PropsWithChildren> = ({ children }) => {
     ExpenditureType | undefined
   >(undefined);
 
+  const [selectedEditingAction, setSelectedEditingAction] =
+    useState<ExpenditureAction | null>(null);
+  const [currentStep, setCurrentStep] = useState<
+    ExpenditureStep | string | null
+  >(null);
+
   const value = useMemo(
     () => ({
       toggleOnFundingModal,
@@ -65,8 +71,6 @@ const PaymentBuilderContextProvider: FC<PropsWithChildren> = ({ children }) => {
       selectedExpenditureMotion: null,
       expectedStepKey,
       setExpectedStepKey,
-      selectedMilestones,
-      setSelectedMilestones,
       selectedEditingAction,
       setSelectedEditingAction,
       currentStep,
@@ -93,8 +97,6 @@ const PaymentBuilderContextProvider: FC<PropsWithChildren> = ({ children }) => {
       expectedExpenditureType,
       isReleaseModalOpen,
       expectedStepKey,
-      selectedMilestones,
-      setSelectedMilestones,
       selectedEditingAction,
       setSelectedEditingAction,
       currentStep,