Merge pull request #4201 from JoinColony/fix/#3856-fix-split-payment-…

…percentages

Fix: changing distribution type should show accurate percentage

src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/hooks.ts

@@ -25,7 +25,10 @@ import useActionFormBaseHook from '~v5/common/ActionSidebar/hooks/useActionFormB
 import { useShowCreateStakedExpenditureModal } from '~v5/common/ActionSidebar/partials/CreateStakedExpenditureModal/hooks.tsx';
 import { type ActionFormBaseProps } from '~v5/common/ActionSidebar/types.ts';
 
-import { getSplitPaymentPayload } from './utils.ts';
+import {
+  getSplitPaymentPayload,
+  getUnevenSplitPaymentTotalPercentage,
+} from './utils.ts';
 
 export const useValidationSchema = () => {
   const { colony } = useColonyContext();
@@ -209,12 +212,12 @@ export const useValidationSchema = () => {
                 return true;
               }
 
-              const sum = value.reduce(
-                (acc, curr) => acc + (curr?.percent || 0),
-                0,
+              const percentage = getUnevenSplitPaymentTotalPercentage(
+                Number(parent?.amount || 0),
+                value,
               );
 
-              return sum === 100;
+              return percentage === 100;
             },
           )
           .test(

src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/partials/SplitPaymentRecipientsField/hooks.tsx

@@ -19,6 +19,7 @@ import useWrapWithRef from '~hooks/useWrapWithRef.ts';
 import { type ColonyContributor, type Token } from '~types/graphql.ts';
 import { formatText } from '~utils/intl.ts';
 import { getSelectedToken } from '~utils/tokens.ts';
+import { getUnevenSplitPaymentTotalPercentage } from '~v5/common/ActionSidebar/partials/forms/SplitPaymentForm/utils.ts';
 import UserSelect, {
   type UserSearchSelectOption,
 } from '~v5/common/ActionSidebar/partials/UserSelect/index.ts';
@@ -156,16 +157,10 @@ export const useRecipientsFieldTableColumns = ({
               />
               {isTablet && (
                 <span className="text-md font-medium text-gray-900">
-                  {parseFloat(
-                    (
-                      dataRef.current?.reduce(
-                        (acc, _, index) =>
-                          Number(acc) + Number(getPercentValue(index)),
-                        0,
-                      ) || 0
-                    ).toFixed(4),
-                  )}
-                  %
+                  {distributionMethodRef?.current ===
+                  SplitPaymentDistributionType.Equal
+                    ? '100%'
+                    : `${getUnevenSplitPaymentTotalPercentage(Number(amount || 0), dataRef.current)}%`}
                 </span>
               )}
             </div>
@@ -219,15 +214,7 @@ export const useRecipientsFieldTableColumns = ({
                     {distributionMethodRef?.current ===
                     SplitPaymentDistributionType.Equal
                       ? '100%'
-                      : `${Number(
-                          dataRef.current
-                            ?.reduce(
-                              (acc, _, index) =>
-                                Number(acc) + Number(getPercentValue(index)),
-                              0,
-                            )
-                            .toFixed(4) || 0,
-                        )}%`}
+                      : `${getUnevenSplitPaymentTotalPercentage(Number(amount || 0), dataRef.current)}%`}
                   </span>
                 );
               }

src/components/v5/common/ActionSidebar/partials/forms/SplitPaymentForm/utils.ts

@@ -11,6 +11,7 @@ import { findDomainByNativeId } from '~utils/domains.ts';
 import { getEnumValueFromKey } from '~utils/getEnumValueFromKey.ts';
 
 import { type SplitPaymentFormValues } from './hooks.ts';
+import { type SplitPaymentRecipientsFieldModel } from './partials/SplitPaymentRecipientsField/types.ts';
 
 export const getSplitPaymentPayload = (
   colony: Colony,
@@ -62,3 +63,21 @@ export const getSplitPaymentPayload = (
       })) || [],
   };
 };
+
+export const getUnevenSplitPaymentTotalPercentage = (
+  amount: number,
+  recipients: SplitPaymentRecipientsFieldModel[],
+) => {
+  if (!amount) {
+    return 0;
+  }
+
+  const total =
+    recipients?.reduce((acc, recipient) => {
+      return acc + Number(recipient.amount);
+    }, 0) || 0;
+
+  const percentage = (100 * total) / amount;
+
+  return Number(percentage.toFixed(4));
+};