fix: code review

Author: adam-strzelec

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

@@ -6,6 +6,7 @@ import {
   WarningCircle,
 } from '@phosphor-icons/react';
 import React, { useState, type FC } from 'react';
+import { defineMessages } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import { getRole } from '~constants/permissions.ts';
@@ -50,6 +51,22 @@ import RadioButtons from './partials/RadioButtons.tsx';
 import { PenaliseOptions } from './partials/types.ts';
 import { type CancelModalProps } from './types.ts';
 
+const displayName =
+  'v5.common.CompletedAction.partials.PaymentBuilder.partials.CancelModal';
+
+const MSG = defineMessages({
+  noPenaliseInfo: {
+    id: `${displayName}.noPenaliseInfot`,
+    defaultMessage:
+      'The payment creator will keep their full stake and reputation.',
+  },
+  penaliseInfo: {
+    id: `${displayName}.penaliseInfo`,
+    defaultMessage:
+      'The payment creator will lose their full stake and the relative amount of reputation. Penalised funds are burned.',
+  },
+});
+
 const CancelModal: FC<CancelModalProps> = ({
   isOpen,
   onClose,
@@ -114,7 +131,7 @@ const CancelModal: FC<CancelModalProps> = ({
   });
   const associatedActionId = getMotionAssociatedActionId(actionData);
 
-  const handleFundExpenditure = async ({ decisionMethod, penalise }) => {
+  const handleCancelExpenditure = async ({ decisionMethod, penalise }) => {
     setIsSubmitting(true);
     try {
       if (!expenditure) {
@@ -211,7 +228,7 @@ const CancelModal: FC<CancelModalProps> = ({
       {isExpenditureLocked ? (
         <Form
           className="flex flex-grow flex-col"
-          onSubmit={handleFundExpenditure}
+          onSubmit={handleCancelExpenditure}
           validationSchema={
             isActionStaked ? stakedValidationSchema : validationSchema
           }
@@ -252,8 +269,7 @@ const CancelModal: FC<CancelModalProps> = ({
                             className="shrink-0 text-success-400"
                           />
                           <p className="text-md">
-                            The payment creator will keep their full stake and
-                            reputation
+                            {formatText(MSG.noPenaliseInfo)}
                           </p>
                         </div>
                       )}
@@ -264,9 +280,7 @@ const CancelModal: FC<CancelModalProps> = ({
                             className="shrink-0 text-negative-400"
                           />
                           <p className="text-md">
-                            The payment creator will lose their full stake and
-                            the relative amount of reputation. Penalised funds
-                            are burned.
+                            {formatText(MSG.penaliseInfo)}
                           </p>
                         </div>
                       )}

src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/CancelModal/partials/RadioButtons.tsx

@@ -1,9 +1,30 @@
 import React from 'react';
 import { useController } from 'react-hook-form';
+import { defineMessages } from 'react-intl';
+
+import { formatText } from '~utils/intl.ts';
 
 import RadioButton from './RadioButton.tsx';
 import { PenaliseOptions } from './types.ts';
 
+const displayName =
+  'v5.common.CompletedAction.partials.PaymentBuilder.partials.CancelModal';
+
+const MSG = defineMessages({
+  noPenaliseRadio: {
+    id: `${displayName}.noPenaliseRadio`,
+    defaultMessage: `No, don't penalise`,
+  },
+  penaliseRadio: {
+    id: `${displayName}.penaliseRadio`,
+    defaultMessage: 'Yes, penalise',
+  },
+  requiredOptionInfo: {
+    id: `${displayName}.requiredOptionInfo`,
+    defaultMessage: 'A penalised option is required',
+  },
+});
+
 const RadioButtons = () => {
   const {
     field: { onChange },
@@ -23,7 +44,7 @@ const RadioButtons = () => {
             onChange={onChange}
             hasError={!!error}
           >
-            Yes, penalise
+            {formatText(MSG.penaliseRadio)}
           </RadioButton>
         </li>
         <li className="w-full sm:w-1/2">
@@ -34,13 +55,13 @@ const RadioButtons = () => {
             onChange={onChange}
             hasError={!!error}
           >
-            No, don&apos;t penalise
+            {formatText(MSG.noPenaliseRadio)}
           </RadioButton>
         </li>
       </ul>
       {!!error && (
         <p className="mt-1 text-sm text-negative-400">
-          A penalised option is required
+          {formatText(MSG.requiredOptionInfo)}
         </p>
       )}
     </div>

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

@@ -685,9 +685,12 @@ const PaymentBuilderWidget: FC<PaymentBuilderWidgetProps> = ({ action }) => {
       );
 
       items.splice(
-        fundingItemIndex + 1,
+        isExpenditureFunded ? fundingItemIndex + 1 : fundingItemIndex,
         0,
-        getCancelItem(2, segregatedCancelActions.funding),
+        getCancelItem(
+          isExpenditureFunded ? 2 : 1,
+          segregatedCancelActions.funding,
+        ),
       );
     }
   }

src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/PaymentBuilderWidget/utils.ts

@@ -253,6 +253,13 @@ export const getCancelStepIndex = (
     return fundingItemIndex;
   }
 
+  if (
+    isExpenditureFullFunded &&
+    expenditure.cancellingActions?.items?.[0]?.type === 'CANCEL_EXPENDITURE'
+  ) {
+    return fundingItemIndex + expenditure.cancellingActions.items.length + 1;
+  }
+
   if (isExpenditureFullFunded && !isExpenditureFinalized) {
     return fundingItemIndex + 2;
   }