Feat/15886093 reputation cancel

amplify/backend/api/colonycdapp/schema/schema.graphql

@@ -3010,6 +3010,12 @@ type ColonyMotion @model {
   the details of tokens and amounts to be funded
   """
   expenditureFunding: [ExpenditureFundingItem!]
+
+  """
+  In case of motions cancelling a staked expenditure, boolean indicating
+  whether the expenditure staker will be punished by losing their stake
+  """
+  willPunishExpenditureStaker: Boolean
 }
 
 type ExpenditureFundingItem {

src/components/v5/common/ActionSidebar/partials/Motions/MotionStep/FinalizeStep/FinalizeStep.tsx

@@ -7,9 +7,12 @@ import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { useColonyTriggersContext } from '~context/GlobalTriggersContext/ColonyTriggersContext.ts';
 import { ColonyActionType } from '~gql';
+import useAsyncFunction from '~hooks/useAsyncFunction.ts';
 import usePrevious from '~hooks/usePrevious.ts';
 import { ActionTypes } from '~redux/index.ts';
+import { type ReclaimExpenditureStakePayload } from '~redux/sagas/expenditures/reclaimExpenditureStake.ts';
 import { ActionForm } from '~shared/Fields/index.ts';
+import { getMotionAssociatedActionId } from '~utils/actions.ts';
 import { MotionState } from '~utils/colonyMotions.ts';
 import { formatText } from '~utils/intl.ts';
 import { useFinalizeSuccessCallback } from '~v5/common/ActionSidebar/partials/hooks.ts';
@@ -46,9 +49,7 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
   const { canInteract } = useAppContext();
 
   const [isPolling, setIsPolling] = useState(false);
-
-  const { refetchColony } = useColonyContext();
-
+  const { refetchColony, colony } = useColonyContext();
   const {
     isFinalizable,
     transform: finalizePayload,
@@ -65,7 +66,7 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
     canClaimStakes,
   } = useClaimConfig({ action, motionData });
 
-  const { type: actionType } = action;
+  const { type: actionType, expenditure } = action;
 
   const {
     isFinalized: isMotionFinalized,
@@ -85,10 +86,31 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
     isMotionFinalized ||
     isMotionFailedNotFinalizable ||
     (isMotionAgreement && !isClaimed);
+  const reclaimExpenditureStake = useAsyncFunction({
+    submit: ActionTypes.RECLAIM_EXPENDITURE_STAKE,
+    error: ActionTypes.RECLAIM_EXPENDITURE_STAKE_ERROR,
+    success: ActionTypes.RECLAIM_EXPENDITURE_STAKE_SUCCESS,
+  });
 
-  const handleSuccess = () => {
+  const handleSuccess = async () => {
     setIsPolling(true);
     onFinalizeSuccessCallback(action);
+
+    const associatedActionId = getMotionAssociatedActionId(action);
+
+    if (
+      actionType === ColonyActionType.CancelExpenditureMotion &&
+      !motionData.willPunishExpenditureStaker &&
+      expenditure?.isStaked
+    ) {
+      const payload: ReclaimExpenditureStakePayload = {
+        colonyAddress: colony.colonyAddress,
+        nativeExpenditureId: expenditure.nativeId,
+        associatedActionId,
+      };
+
+      await reclaimExpenditureStake(payload);
+    }
   };
 
   /* Update colony object when motion gets finalized or is agreement. */

src/components/v5/common/ActionSidebar/partials/Motions/MotionStep/FinalizeStep/hooks.tsx

@@ -178,7 +178,7 @@ export const useClaimConfig = ({
   const buttonTextId = isClaimed ? 'button.claimed' : 'button.claim';
   const remainingStakesNumber = remainingStakes.length;
   const canClaimStakes = userTotalStake ? !userTotalStake.isZero() : false;
-  const handleClaimSuccess = () => {
+  const handleClaimSuccess = async () => {
     setIsClaimed(true);
     pollLockedTokenBalance();
   };

src/components/v5/common/ActionSidebar/partials/Motions/MotionStep/RevealStep/RevealStep.tsx

@@ -25,7 +25,11 @@ import { type RevealStepProps } from './types.ts';
 const displayName =
   'v5.common.ActionSidebar.partials.motions.MotionSimplePayment.steps.RevealStep';
 
-const RevealStep: FC<RevealStepProps> = ({ action, motionState }) => {
+const RevealStep: FC<RevealStepProps> = ({
+  action,
+  motionState,
+  isActionCancelled,
+}) => {
   const { transactionHash, rootHash } = action;
   const { canInteract } = useAppContext();
   const [isInformationAccordionOpen, { toggle: toggleInformationAccordion }] =
@@ -103,6 +107,19 @@ const RevealStep: FC<RevealStepProps> = ({ action, motionState }) => {
         </>
       }
       sections={[
+        ...(isActionCancelled
+          ? [
+              {
+                key: '3',
+                content: (
+                  <p className="text-sm">
+                    {formatText({ id: 'motion.cancelled' })}
+                  </p>
+                ),
+                className: 'bg-negative-100 text-negative-400 !py-3',
+              },
+            ]
+          : []),
         {
           key: '1',
           content: (
@@ -164,7 +181,7 @@ const RevealStep: FC<RevealStepProps> = ({ action, motionState }) => {
                   : 'motion.revealStep.buttonShow',
               })}
               isOpen={isInformationAccordionOpen}
-              onToggle={toggleInformationAccordion}
+              onToggle={() => toggleInformationAccordion()}
               className={clsx(
                 `
                   [&_.accordion-toggler]:text-sm

src/components/v5/common/ActionSidebar/partials/Motions/MotionStep/RevealStep/types.ts

@@ -3,4 +3,5 @@ import { type ICompletedMotionAction } from '~v5/common/ActionSidebar/partials/M
 export interface RevealStepProps
   extends Pick<ICompletedMotionAction, 'action'> {
   motionState?: number;
+  isActionCancelled?: boolean;
 }

src/components/v5/common/ActionSidebar/partials/Motions/MotionStep/StakingStep/StakingStep.tsx

@@ -24,7 +24,11 @@ import { type StakingStepProps } from './types.ts';
 const displayName =
   'v5.common.ActionSidebar.partials.motions.MotionSimplePayment.steps.StakingStep';
 
-const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
+const StakingStep: FC<StakingStepProps> = ({
+  className,
+  isActive,
+  isActionCancelled,
+}) => {
   const { canInteract } = useAppContext();
   const { action, motionData } = useMotionContext();
   const [isAccordionOpen, { toggle: toggleAccordion }] = useToggle();
@@ -139,6 +143,19 @@ const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
                 },
               ]
             : []),
+          ...(isActionCancelled
+            ? [
+                {
+                  key: '3',
+                  content: (
+                    <p className="text-sm">
+                      {formatText({ id: 'motion.cancelled' })}
+                    </p>
+                  ),
+                  className: 'bg-negative-100 text-negative-400 !py-3',
+                },
+              ]
+            : []),
           {
             key: '2',
             content: (

src/components/v5/common/ActionSidebar/partials/Motions/MotionStep/StakingStep/types.ts

@@ -1,4 +1,5 @@
 export interface StakingStepProps {
   className?: string;
   isActive?: boolean;
+  isActionCancelled?: boolean;
 }

src/components/v5/common/ActionSidebar/partials/Motions/MotionStep/VotingStep/VotingStep.tsx

@@ -37,7 +37,11 @@ const MSG = defineMessages({
   },
 });
 
-const VotingStep: FC<ICompletedMotionAction> = ({ action, motionData }) => {
+const VotingStep: FC<ICompletedMotionAction> = ({
+  action,
+  motionData,
+  isActionCancelled,
+}) => {
   const {
     currentReputationPercent,
     currentUserVote,
@@ -116,6 +120,19 @@ const VotingStep: FC<ICompletedMotionAction> = ({ action, motionData }) => {
         </div>
       }
       sections={[
+        ...(isActionCancelled
+          ? [
+              {
+                key: '1',
+                content: (
+                  <p className="text-sm">
+                    {formatText({ id: 'motion.cancelled' })}
+                  </p>
+                ),
+                className: 'bg-negative-100 text-negative-400 !py-3',
+              },
+            ]
+          : []),
         {
           key: VotingStepSections.Vote,
           content: (

src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx

@@ -305,7 +305,7 @@ const Motions: FC<ICompletedMotionAction> = ({ action, motionData }) => {
     <MotionProvider action={action} motionData={motionData}>
       <Stepper<Steps>
         activeStepKey={activeStepKey}
-        setActiveStepKey={setActiveStepKey}
+        setActiveStepKey={(key: Steps) => setActiveStepKey(key)}
         items={items}
       />
     </MotionProvider>

src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/types.ts

@@ -0,0 +1,11 @@
+import { type ColonyAction } from '~types/graphql.ts';
+
+export interface RevealStepProps {
+  startPollingAction: (pollingInterval: number) => void;
+  stopPollingAction: () => void;
+  actionData: ColonyAction | undefined | null;
+  rootHash: string | undefined;
+  transactionId: string;
+  motionState?: number;
+  isActionCancelled?: boolean;
+}

src/components/v5/common/ActionSidebar/partials/Motions/types.ts

@@ -4,6 +4,7 @@ import { type ICompletedAction } from '~v5/common/CompletedAction/types.ts';
 
 export interface ICompletedMotionAction extends ICompletedAction {
   motionData: NonNullable<ICompletedAction['action']['motionData']>;
+  isActionCancelled?: boolean;
 }
 
 export enum CustomStep {

src/components/v5/common/ActionSidebar/partials/MultiSigSidebar/partials/MultiSigWidget/MultiSigWidget.tsx

@@ -155,7 +155,7 @@ const MultiSigWidget: FC<MultiSigWidgetProps> = ({
       <Stepper<MultiSigState>
         items={items}
         activeStepKey={activeStepKey}
-        setActiveStepKey={setActiveStepKey}
+        setActiveStepKey={(key: MultiSigState) => setActiveStepKey(key)}
       />
     );
   }

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

@@ -41,7 +41,6 @@ import { type MeatBallMenuItem } from '~v5/shared/MeatBallMenu/types.ts';
 
 import CompletedExpenditureContent from '../CompletedExpenditureContent/CompletedExpenditureContent.tsx';
 
-import CancelModal from './partials/CancelModal/CancelModal.tsx';
 import PaymentBuilderTable from './partials/PaymentBuilderTable/PaymentBuilderTable.tsx';
 import { ExpenditureStep } from './partials/PaymentBuilderWidget/types.ts';
 import { getExpenditureStep } from './partials/PaymentBuilderWidget/utils.ts';
@@ -76,18 +75,17 @@ const PaymentBuilder = ({ action }: PaymentBuilderProps) => {
   const { initiatorUser, transactionHash, fromDomain, annotation } = action;
   const allTokens = useGetAllTokens();
 
-  const { expenditure, loadingExpenditure, refetchExpenditure } =
-    useGetExpenditureData(action.expenditureId);
+  const { expenditure, loadingExpenditure } = useGetExpenditureData(
+    action.expenditureId,
+  );
   const expenditureStep = getExpenditureStep(expenditure);
   const { user: recipient } = useUserByAddress(
     expenditure?.slots?.[0]?.recipientAddress || '',
   );
   const {
     expectedExpenditureType,
     setExpectedExpenditureType,
-    isCancelModalOpen,
     toggleOnCancelModal,
-    toggleOffCancelModal,
   } = usePaymentBuilderContext();
 
   useEffect(() => {
@@ -214,12 +212,6 @@ const PaymentBuilder = ({ action }: PaymentBuilderProps) => {
           isLoading={!expenditure.metadata?.stages?.length}
           isPaymentStep={expenditureStep === ExpenditureStep.Payment}
         />
-        <CancelModal
-          isOpen={isCancelModalOpen}
-          expenditure={expenditure}
-          onClose={toggleOffCancelModal}
-          refetchExpenditure={refetchExpenditure}
-        />
       </>
     );
   }
@@ -268,12 +260,6 @@ const PaymentBuilder = ({ action }: PaymentBuilderProps) => {
         finalizedTimestamp={finalizedAt}
         expectedNumberOfPayouts={expectedNumberOfPayouts}
       />
-      <CancelModal
-        isOpen={isCancelModalOpen}
-        expenditure={expenditure}
-        onClose={toggleOffCancelModal}
-        refetchExpenditure={refetchExpenditure}
-      />
     </>
   );
 };