fix: add overview info and change copy for advanced payment review

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

@@ -64,6 +64,7 @@ const formatDate = (value: string | undefined) => {
 };
 
 const ActionWithPermissionsInfo: FC<ActionWithPermissionsInfoProps> = ({
+  title,
   action,
 }) => {
   if (!action) {
@@ -83,9 +84,10 @@ const ActionWithPermissionsInfo: FC<ActionWithPermissionsInfoProps> = ({
           iconSize={16}
           iconClassName="text-gray-500"
         >
-          {formatText({
-            id: 'action.executed.permissions.description',
-          })}
+          {title ??
+            formatText({
+              id: 'action.executed.permissions.description',
+            })}
         </StatusText>
       }
       sections={[

src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/types.ts

@@ -1,5 +1,6 @@
 import { type ExpenditureAction } from '~types/graphql.ts';
 
 export interface ActionWithPermissionsInfoProps {
+  title?: string;
   action?: ExpenditureAction | null;
 }

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

@@ -37,6 +37,7 @@ const MSG = defineMessages({
 const ActionWithStakingInfo: FC<ActionWithStakingInfoProps> = ({
   userAdddress,
   stakeAmount,
+  title,
 }) => {
   const { colony } = useColonyContext();
   const { nativeToken } = colony;
@@ -58,7 +59,7 @@ const ActionWithStakingInfo: FC<ActionWithStakingInfoProps> = ({
           iconSize={16}
           iconClassName="text-gray-500"
         >
-          {formatText(MSG.info)}
+          {title ?? formatText(MSG.info)}
         </StatusText>
       }
       sections={[

src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/ActionWithStakingInfo/types.ts

@@ -1,4 +1,5 @@
 export interface ActionWithStakingInfoProps {
+  title?: string;
   userAdddress: string | undefined | null;
   stakeAmount: string;
 }

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

@@ -14,6 +14,7 @@ import useEnabledExtensions from '~hooks/useEnabledExtensions.ts';
 import usePrevious from '~hooks/usePrevious.ts';
 import { ActionTypes } from '~redux';
 import { type LockExpenditurePayload } from '~redux/sagas/expenditures/lockExpenditure.ts';
+import Numeral from '~shared/Numeral/Numeral.tsx';
 import SpinnerLoader from '~shared/Preloaders/SpinnerLoader.tsx';
 import { DecisionMethod } from '~types/actions.ts';
 import { notMaybe, notNull } from '~utils/arrays/index.ts';
@@ -25,6 +26,7 @@ import {
   getSafePollingInterval,
   removeCacheEntry,
 } from '~utils/queries.ts';
+import { getSelectedToken } from '~utils/tokens.ts';
 import useGetColonyAction from '~v5/common/ActionSidebar/hooks/useGetColonyAction.ts';
 import { useGetExpenditureData } from '~v5/common/ActionSidebar/hooks/useGetExpenditureData.ts';
 import MotionCountDownTimer from '~v5/common/ActionSidebar/partials/Motions/partials/MotionCountDownTimer/MotionCountDownTimer.tsx';
@@ -35,6 +37,7 @@ import { LoadingBehavior } from '~v5/shared/Button/types.ts';
 import MotionWidgetSkeleton from '~v5/shared/MotionWidgetSkeleton/MotionWidgetSkeleton.tsx';
 import Stepper from '~v5/shared/Stepper/index.ts';
 import { type StepperItem } from '~v5/shared/Stepper/types.ts';
+import UserPopover from '~v5/shared/UserPopover/UserPopover.tsx';
 
 import ActionWithPermissionsInfo from '../ActionWithPermissionsInfo/ActionWithPermissionsInfo.tsx';
 import ActionWithStakingInfo from '../ActionWithStakingInfo/ActionWithStakingInfo.tsx';
@@ -92,6 +95,11 @@ const PaymentBuilderWidget: FC<PaymentBuilderWidgetProps> = ({ action }) => {
     stopPolling,
   } = useGetExpenditureData(expenditureId, { pollUntilUnmount: true });
 
+  const tokenData = getSelectedToken(
+    colony,
+    expenditure?.slots?.[0]?.payouts?.[0]?.tokenAddress ?? '',
+  );
+
   const {
     fundingActions,
     cancellingActions,
@@ -369,27 +377,75 @@ const PaymentBuilderWidget: FC<PaymentBuilderWidgetProps> = ({ action }) => {
             ) : (
               <StepDetailsBlock
                 text={formatText({
-                  id: 'expenditure.reviewStage.confirmDetails.info',
+                  id:
+                    !expenditure?.ownerAddress ||
+                    walletAddress !== expenditure?.ownerAddress
+                      ? 'expenditure.reviewStage.confirmDetails.info'
+                      : 'expenditure.reviewStage.confirmDetails.creatorInfo',
                 })}
                 content={
-                  <ActionButton
-                    disabled={
-                      !expenditure?.ownerAddress ||
-                      walletAddress !== expenditure?.ownerAddress
-                    }
-                    onSuccess={() => {
-                      setExpectedStepKey(ExpenditureStep.Funding);
-                    }}
-                    loadingBehavior={LoadingBehavior.TxLoader}
-                    text={formatText({
-                      id: 'expenditure.reviewStage.confirmDetails.button',
-                    })}
-                    values={lockExpenditurePayload}
-                    actionType={ActionTypes.EXPENDITURE_LOCK}
-                    mode="primarySolid"
-                    isFullSize
-                    isLoading={expectedStepKey === ExpenditureStep.Funding}
-                  />
+                  !expenditure?.ownerAddress ||
+                  walletAddress !== expenditure?.ownerAddress ? (
+                    <div>
+                      <h4 className="mb-3 flex items-center justify-between text-1">
+                        {formatText({
+                          id: 'expenditure.reviewStage.confirmDetails.title',
+                        })}
+                      </h4>
+
+                      <div className="mb-2 flex items-center justify-between gap-2 text-sm last:mb-0">
+                        <dt className="text-gray-600">
+                          {formatText({
+                            id: 'expenditure.reviewStage.confirmDetails.creator',
+                          })}
+                        </dt>
+                        <dd>
+                          <div className="flex w-full items-center">
+                            <UserPopover
+                              walletAddress={action.initiatorAddress}
+                              size={18}
+                            />
+                          </div>
+                        </dd>
+                      </div>
+                      {isStaked && (
+                        <div className="mb-2 flex items-center justify-between gap-2 text-sm last:mb-0">
+                          <dt className="text-gray-600">
+                            {formatText({
+                              id: 'expenditure.reviewStage.confirmDetails.stakeAmount',
+                            })}
+                          </dt>
+                          <dd>
+                            <Numeral
+                              value={stakeAmount}
+                              decimals={tokenData?.decimals}
+                            />{' '}
+                            {tokenData?.symbol}
+                          </dd>
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <ActionButton
+                      disabled={
+                        !expenditure?.ownerAddress ||
+                        walletAddress !== expenditure?.ownerAddress
+                      }
+                      onSuccess={() => {
+                        setExpectedStepKey(ExpenditureStep.Funding);
+                      }}
+                      loadingBehavior={LoadingBehavior.TxLoader}
+                      text={formatText({
+                        id: 'expenditure.reviewStage.confirmDetails.button',
+                      })}
+                      values={lockExpenditurePayload}
+                      actionType={ActionTypes.EXPENDITURE_LOCK}
+                      mode="primarySolid"
+                      className="w-full"
+                      isLoading={expectedStepKey === ExpenditureStep.Funding}
+                      isFullSize
+                    />
+                  )
                 }
               />
             )}
@@ -400,10 +456,16 @@ const PaymentBuilderWidget: FC<PaymentBuilderWidgetProps> = ({ action }) => {
               <ActionWithStakingInfo
                 userAdddress={expenditure?.ownerAddress}
                 stakeAmount={stakeAmount ?? ''}
+                title={formatText({
+                  id: 'expenditure.reviewStage.confirmDetails.completedInfo',
+                })}
               />
             ) : (
               <ActionWithPermissionsInfo
                 action={expenditure?.lockingActions?.items[0]}
+                title={formatText({
+                  id: 'expenditure.reviewStage.confirmDetails.completedInfo',
+                })}
               />
             )}
           </>

src/i18n/en.json

@@ -1887,7 +1887,12 @@
     "expenditure.cancelPayment": "Cancel payment",
     "expenditure.copyLink": "Copy link",
     "expenditure.reviewStage.tooltip": "Payment is currently in review. The payment creator can make changes freely until details are confirmed.",
-    "expenditure.reviewStage.confirmDetails.info": "If all details are correct, confirm the payment details to move onto funding. Changing after this point will require a governance process.",
+    "expenditure.reviewStage.confirmDetails.creatorInfo": "Payment is in Review. While in review, changes can be freely made by the Payment creator. If correct, confirm details and proceed to funding.",
+    "expenditure.reviewStage.confirmDetails.info": "Payment is in Review. While in review, changes can be freely made by the Payment creator.",
+    "expenditure.reviewStage.confirmDetails.completedInfo": "Payment creator completed the review step.",
+    "expenditure.reviewStage.confirmDetails.title": "Overview",
+    "expenditure.reviewStage.confirmDetails.creator": "Payment creator",
+    "expenditure.reviewStage.confirmDetails.stakeAmount": "Stake amount",
     "expenditure.reviewStage.confirmDetails.button": "Confirm details",
     "expenditure.finalizeRequest.title": "Release requests",
     "expenditure.fundingRequest.title": "Funding requests",