fix: edit changes

Author: CzarekDryl

src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/PaymentBuilderRecipientsField.tsx

@@ -80,6 +80,8 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
   const isMobile = useMobile();
   const getMenuProps = ({ index }) => ({
     cardClassName: 'sm:min-w-[9.625rem]',
+    contentWrapperClassName:
+      '!left-6 right-6 !z-[65] sm:!left-auto sm:!right-0',
     items: [
       {
         key: 'add-token',

src/components/v5/common/CompletedAction/partials/EditModeModal/consts.ts

@@ -12,9 +12,9 @@ export const getEditDecisionMethodDescriptions = (userRole: string) => ({
       permission: userRole,
     },
   ),
-  [DecisionMethod.Reputation]: formatText({
-    id: 'fundingModal.reputationDescription',
-  }),
+  // [DecisionMethod.Reputation]: formatText({
+  //   id: 'fundingModal.reputationDescription',
+  // }),
 });
 
 export const validationSchema = object()

src/components/v5/common/CompletedAction/partials/EditModeModal/hooks.ts

@@ -1,5 +1,5 @@
 import { Action } from '~constants/actions.ts';
-import useEnabledExtensions from '~hooks/useEnabledExtensions.ts';
+// import useEnabledExtensions from '~hooks/useEnabledExtensions.ts';
 import { DecisionMethod } from '~types/actions.ts';
 import { formatText } from '~utils/intl.ts';
 
@@ -10,23 +10,23 @@ export const useEditDecisionMethods = (): DecisionMethodOption[] => {
   const userHasPermissions = useCheckIfUserHasPermissions(
     Action.PaymentBuilder,
   );
-  const { isVotingReputationEnabled } = useEnabledExtensions();
+  // const { isVotingReputationEnabled } = useEnabledExtensions();
 
   return [
     {
       label: formatText({ id: 'decisionMethod.permissions' }),
       value: DecisionMethod.Permissions,
       isDisabled: !userHasPermissions,
     },
-    ...(isVotingReputationEnabled
-      ? [
-          {
-            label: formatText({
-              id: 'decisionMethod.reputation',
-            }),
-            value: DecisionMethod.Reputation,
-          },
-        ]
-      : []),
+    // ...(isVotingReputationEnabled
+    //   ? [
+    //       {
+    //         label: formatText({
+    //           id: 'decisionMethod.reputation',
+    //         }),
+    //         value: DecisionMethod.Reputation,
+    //       },
+    //     ]
+    //   : []),
   ];
 };

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

@@ -310,8 +310,7 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
           oldValues: oldSlot,
         };
       })
-      .sort((a, b) => a.id - b.id)
-      .filter((item) => BigNumber.from(item.amount).gt(0));
+      .sort((a, b) => a.id - b.id);
 
     const unchangedData = data
       .filter((item) => !changedSlots.map((slot) => slot.id).includes(item.id))
@@ -324,8 +323,10 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
     BigNumber.from(item.amount).gt(0),
   );
 
+  const dataToShow = isEditStepActive ? dataWithChanges : filteredData;
+
   const columns = useGetPaymentBuilderColumns({
-    data: filteredData,
+    data: dataWithChanges,
     status,
     slots: items,
     finalizedTimestamp,
@@ -447,7 +448,7 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
         )}
         renderSubComponent={renderSubComponent}
         data={
-          !filteredData.length
+          !data.length
             ? [
                 {
                   recipient: '0x000',
@@ -477,7 +478,7 @@ const PaymentBuilderTable: FC<PaymentBuilderTableProps> = ({
                   isLoading: true,
                 },
               ]
-            : filteredData
+            : dataToShow
         }
         columns={columns}
         renderCellWrapper={(_, content) => content}

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

@@ -82,7 +82,7 @@ const renderElement = (
 
   if (key === 'claimDelay') {
     if (!value.old && !isNew) {
-      return <p className="text3">-</p>;
+      return <p className="text-3">-</p>;
     }
 
     const delay = convertPeriodToHours(isNew ? value.new : value.old);
@@ -96,7 +96,7 @@ const renderElement = (
         >
           {delay}
         </p>
-        <p className="text-md">{formatText(MSG.hours, { hours: delay })}</p>
+        <p className="text-3">{formatText(MSG.hours, { hours: delay })}</p>
       </div>
     );
   }

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

@@ -19,7 +19,7 @@ const TokenField: FC<TokenFieldProps> = ({ amount, tokenAddress, isNew }) => {
   const { colony } = useColonyContext();
   const tokenData = getSelectedToken(colony, tokenAddress);
 
-  return amount ? (
+  return amount && amount !== '0' ? (
     <div className="flex items-center gap-1 text-3">
       <span
         className={clsx({

src/components/v5/common/CompletedAction/partials/PaymentBuilderEdit/PaymentBuilderEdit.tsx

@@ -134,7 +134,8 @@ const PaymentBuilderEdit: FC<PaymentBuilderEditProps> = ({ action }) => {
         slotId: slot.id,
       };
     })
-    .sort((a, b) => a.slotId - b.slotId);
+    .sort((a, b) => a.slotId - b.slotId)
+    .filter((item) => item.amount !== '0');
 
   return (
     <>

src/components/v5/common/Table/Table.tsx

@@ -236,7 +236,7 @@ const Table = <T,>({
                                 buttonClassName="ml-auto"
                                 contentWrapperClassName={clsx(
                                   meatBallMenuProps?.contentWrapperClassName,
-                                  '!left-6 right-6 !z-[65] sm:!left-auto',
+                                  '!left-6 right-6 !z-[65] sm:!left-auto sm:!right-0',
                                 )}
                               />
                             </td>