Feat/15873666 edit

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

@@ -63,6 +63,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
   } = useActionContext();
 
   const {
+    isEditMode,
     actionSidebarToggle: [
       isActionSidebarOpen,
       { toggle: toggleActionSidebarOff, registerContainerRef },
@@ -209,7 +210,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
       ref={registerContainerRef}
     >
       <div className="relative">
-        <div className="flex w-full items-center justify-between border-b border-gray-200 px-6 py-4">
+        <div className="flex w-full items-center justify-between px-6 py-4">
           <div className="flex items-center gap-2">
             <button
               type="button"
@@ -250,6 +251,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
                   !isMotion &&
                   !isMultiSig &&
                   !expenditure &&
+                  !isEditMode &&
                   !loadingExpenditure && (
                     <PillsBase
                       className="bg-success-100 text-success-400"
@@ -264,13 +266,28 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
                     withAdditionalStatuses
                   />
                 )}
-                {(!!(
-                  isMotion && action?.motionData?.motionStateHistory.endedAt
-                ) ||
-                  !!isMultiSig) &&
-                  motionState && (
-                    <MotionOutcomeBadge motionState={motionState} />
-                  )}
+                {(!!isMotion || !!isMultiSig) && motionState && (
+                  <MotionOutcomeBadge motionState={motionState} />
+                )}
+                {!!expenditure && isEditMode && (
+                  <Tooltip
+                    tooltipContent={
+                      <span className="font-medium">
+                        {formatText({
+                          id: 'expenditure.edit.tooltip',
+                        })}
+                      </span>
+                    }
+                    placement="bottom-start"
+                  >
+                    <PillsBase
+                      className="bg-warning-100 text-warning-400"
+                      isCapitalized={false}
+                    >
+                      {formatText({ id: 'badge.edit' })}
+                    </PillsBase>
+                  </Tooltip>
+                )}
               </div>
             )}
             {isMobile && getShareButton()}

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/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/ActionSidebar/partials/forms/PaymentBuilderForm/hooks.ts

@@ -29,6 +29,117 @@ import {
   getPaymentBuilderPayload,
 } from './utils.ts';
 
+export const useGetPaymentsValidationSchema = () => {
+  const { colony } = useColonyContext();
+  const tokenLockStatesMap = useTokenLockStates();
+
+  return useMemo(
+    () =>
+      array()
+        .of(
+          object()
+            .shape({
+              recipient: string()
+                .required(({ path }) => {
+                  const index = getLastIndexFromPath(path);
+                  if (index === undefined) {
+                    return formatText({ id: 'errors.recipient.required' });
+                  }
+                  return formatText(
+                    { id: 'errors.recipient.requiredIn' },
+                    { paymentIndex: index + 1 },
+                  );
+                })
+                .address(),
+              slotId: number(),
+              amount: string()
+                .required(formatText({ id: 'errors.amount' }))
+                .test(
+                  'more-than-zero',
+                  ({ path }) => {
+                    const index = getLastIndexFromPath(path);
+                    if (index === undefined) {
+                      return formatText({
+                        id: 'errors.amount.greaterThanZero',
+                      });
+                    }
+                    return formatText(
+                      { id: 'errors.amount.greaterThanZeroIn' },
+                      { paymentIndex: index + 1 },
+                    );
+                  },
+                  (value, context) =>
+                    amountGreaterThanZeroValidation({
+                      value,
+                      context,
+                      colony,
+                    }),
+                )
+                .test('tokens-sum-exceeded', '', (value, context) =>
+                  allTokensAmountValidation({
+                    value,
+                    context,
+                    colony,
+                  }),
+                ),
+              tokenAddress: string()
+                .required()
+                .test(
+                  'token-unlocked',
+                  formatText({ id: 'errors.amount.tokenIsLocked' }) || '',
+                  (value) =>
+                    !shouldPreventPaymentsWithTokenInColony(
+                      value || '',
+                      colony,
+                      tokenLockStatesMap,
+                    ),
+                ),
+              delay: string()
+                .test(
+                  'is-bigger-than-max',
+                  ({ path }) => {
+                    const index = getLastIndexFromPath(path);
+
+                    return formatText(
+                      { id: 'errors.delay.max' },
+                      {
+                        paymentIndex: index === undefined ? 1 : index + 1,
+                        max: CLAIM_DELAY_MAX_VALUE,
+                      },
+                    );
+                  },
+                  (value) => {
+                    if (!value) {
+                      return true;
+                    }
+
+                    const unformattedValue = unformatNumeral(value);
+
+                    return BigNumber.from(moveDecimal(unformattedValue, 4)).lte(
+                      moveDecimal(CLAIM_DELAY_MAX_VALUE, 4),
+                    );
+                  },
+                )
+                .required(({ path }) => {
+                  const index = getLastIndexFromPath(path);
+                  if (index === undefined) {
+                    return formatText({ id: 'errors.delay.empty' });
+                  }
+                  return formatText(
+                    { id: 'errors.delay.emptyIndex' },
+                    { paymentIndex: index + 1 },
+                  );
+                }),
+            })
+            .defined()
+            .required(),
+        )
+        .defined()
+        .required(),
+    [colony, tokenLockStatesMap],
+  );
+};
+
 export const useValidationSchema = () => {
   const { colony } = useColonyContext();
   const colonyTokens = useMemo(
@@ -189,7 +300,7 @@ export const useValidationSchema = () => {
         )
         .defined()
         .concat(ACTION_BASE_VALIDATION_SCHEMA),
-    [colony, colonyTokens, tokenLockStatesMap],
+    [colonyTokens, colony, tokenLockStatesMap],
   );
 };
 

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

@@ -84,6 +84,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',
@@ -140,6 +142,12 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
       item.tokenAddress === nativeToken?.tokenAddress,
   );
 
+  const latestSlotId = value.sort((a, b) => {
+    if (!a.slotId || !b.slotId) return 0;
+
+    return b.slotId - a.slotId;
+  })[0]?.slotId;
+
   return (
     <div data-testid="payment-builder-recipients-field">
       <h5 className="mb-3 mt-6 text-2">
@@ -160,13 +168,6 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
           columns={columns}
           data={data}
           layout={isTablet ? 'vertical' : 'horizontal'}
-          rows={
-            data.length > 10
-              ? {
-                  virtualizedRowHeight: isTablet ? 46 : 54,
-                }
-              : undefined
-          }
           borders={{
             visible: true,
             type: 'unset',
@@ -204,6 +205,7 @@ const PaymentBuilderRecipientsField: FC<PaymentBuilderRecipientsFieldProps> = ({
               amount: '',
               tokenAddress: nativeToken?.tokenAddress || '',
               delay: '',
+              slotId: latestSlotId ? latestSlotId + 1 : undefined,
             });
           }}
           disabled={hasNoDecisionMethods || data.length === 400}

src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderRecipientsField/types.ts

@@ -11,4 +11,5 @@ export interface PaymentBuilderRecipientsFieldModel {
   amount?: string;
   tokenAddress?: string;
   delay?: string;
+  slotId?: number;
 }

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

@@ -74,7 +74,7 @@ export const allTokensAmountValidation = ({
   const { from, _tokenSums } = formValues || {};
   const { tokenAddress: fieldTokenAddress } = parent || {};
 
-  if (!fieldTokenAddress || !from || !_tokenSums) {
+  if (!fieldTokenAddress || !_tokenSums) {
     return false;
   }
 

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
+import { useActionSidebarContext } from '~context/ActionSidebarContext/ActionSidebarContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { ColonyActionType } from '~gql';
 import { ExtendedColonyActionType } from '~types/actions.ts';
@@ -14,6 +15,7 @@ import AddVerifiedMembers from './partials/AddVerifiedMembers/index.ts';
 import ArbitraryTransaction from './partials/ArbitraryTransaction/index.ts';
 import CreateDecision from './partials/CreateDecision/index.ts';
 import EditColonyDetails from './partials/EditColonyDetails/index.ts';
+import ExitEditModeModal from './partials/ExitEditModeModal/ExitEditModeModal.tsx';
 import ManageReputation from './partials/ManageReputation/index.ts';
 import ManageTeam from './partials/ManageTeam/index.ts';
 import ManageTokens from './partials/ManageTokens/ManageTokens.tsx';
@@ -36,6 +38,13 @@ const CompletedAction = ({ action }: ICompletedAction) => {
   const { colony } = useColonyContext();
 
   const actionType = getExtendedActionType(action, colony.metadata);
+  const {
+    isEditMode,
+    cancelEditModalToggle: [
+      isCancelModalOpen,
+      { toggleOff: toggleOffCancelModal },
+    ],
+  } = useActionSidebarContext();
 
   const getActionContent = () => {
     switch (actionType) {
@@ -176,30 +185,28 @@ const CompletedAction = ({ action }: ICompletedAction) => {
       <div
         className={clsx('w-full overflow-y-auto px-6 pb-6 pt-8', {
           'sm:w-[calc(100%-23.75rem)]': action.isMotion,
+          'mb-[8.5rem] sm:mb-[5.5rem] sm:border sm:border-warning-400':
+            isEditMode,
+          'sm:border-b-0 sm:border-l-0': !isEditMode,
         })}
       >
         {getActionContent()}
       </div>
 
       <div
-        className={`
-            w-full
-            border-b
-            border-b-gray-200
-            bg-gray-25
-            px-6
-            py-8
-            sm:h-full
-            sm:w-[23.75rem]
-            sm:flex-shrink-0
-            sm:overflow-y-auto
-            sm:border-b-0
-            sm:border-l
-            sm:border-l-gray-200
-          `}
+        className={clsx(
+          'w-full border-b border-b-gray-200 bg-gray-25 px-6 py-8 sm:h-full sm:w-[23.75rem] sm:flex-shrink-0 sm:overflow-y-auto sm:border-b-0 sm:border-t sm:border-gray-200',
+          {
+            'border-b-warning-400': isEditMode,
+          },
+        )}
       >
         {getSidebarWidgetContent()}
       </div>
+      <ExitEditModeModal
+        isOpen={isCancelModalOpen}
+        onClose={toggleOffCancelModal}
+      />
     </div>
   );
 };