feat: add edit to payment builder action

Author: CzarekDryl

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

@@ -65,6 +65,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
   } = useGetActionData(transactionId);
 
   const {
+    isEditMode,
     actionSidebarToggle: [
       isActionSidebarOpen,
       { toggle: toggleActionSidebarOff, registerContainerRef },
@@ -262,7 +263,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"
@@ -293,6 +294,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
                   !isMotion &&
                   !isMultiSig &&
                   !expenditure &&
+                  !isEditMode &&
                   !loadingExpenditure && (
                     <PillsBase
                       className="bg-success-100 text-success-400"
@@ -310,6 +312,25 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
                 {(!!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/ActionSidebarContent/ActionSidebarContent.tsx

@@ -283,7 +283,7 @@ const ActionSidebarContent: FC<ActionSidebarContentProps> = ({
 
   return (
     <div
-      className={clsx('flex w-full flex-grow', {
+      className={clsx('flex w-full flex-grow border-t border-gray-200', {
         'flex-col-reverse overflow-auto sm:overflow-hidden md:flex-row':
           !!transactionId,
         'overflow-hidden': !transactionId,

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

@@ -339,7 +339,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
     >
       <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

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

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,12 +15,14 @@ import MultiSigSidebar from '../ActionSidebar/partials/MultiSigSidebar/MultiSigS
 import AddVerifiedMembers from './partials/AddVerifiedMembers/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';
 import MintTokens from './partials/MintTokens/index.ts';
 import PaymentBuilderWidget from './partials/PaymentBuilder/partials/PaymentBuilderWidget/PaymentBuilderWidget.tsx';
 import PaymentBuilder from './partials/PaymentBuilder/PaymentBuilder.tsx';
+import PaymentBuilderEdit from './partials/PaymentBuilderEdit/PaymentBuilderEdit.tsx';
 import RemoveVerifiedMembers from './partials/RemoveVerifiedMembers/index.ts';
 import SetUserRoles from './partials/SetUserRoles/index.ts';
 import SimplePayment from './partials/SimplePayment/index.ts';
@@ -39,6 +42,13 @@ const CompletedAction = ({ action }: CompletedActionProps) => {
   const { colony } = useColonyContext();
 
   const actionType = getExtendedActionType(action, colony.metadata);
+  const {
+    isEditMode,
+    cancelEditModalToggle: [
+      isCancelModalOpen,
+      { toggleOff: toggleOffCancelModal },
+    ],
+  } = useActionSidebarContext();
 
   const getActionContent = () => {
     switch (actionType) {
@@ -156,36 +166,47 @@ const CompletedAction = ({ action }: CompletedActionProps) => {
     }
   };
 
+  const getEditContent = () => {
+    switch (actionType) {
+      case ColonyActionType.CreateExpenditure:
+        return <PaymentBuilderEdit action={action} />;
+      default:
+        return <div>Not implemented yet</div>;
+    }
+  };
+
   return (
-    <div className="flex flex-grow flex-col-reverse justify-end overflow-auto sm:flex-row sm:justify-start">
-      <div
-        className={clsx('w-full overflow-y-auto px-6 pb-6 pt-8', {
-          'sm:w-[calc(100%-23.75rem)]': action.isMotion,
-        })}
-      >
-        {getActionContent()}
-      </div>
+    <>
+      <div className="relative flex flex-grow flex-col-reverse justify-end overflow-auto sm:flex-row sm:justify-start">
+        <div
+          className={clsx(
+            'w-full overflow-y-auto px-6 pb-6 pt-8 sm:border sm:border-gray-200',
+            {
+              'sm:w-[calc(100%-23.75rem)]': action.isMotion,
+              'mb-[8.5rem] sm:mb-[5.5rem] sm:border-warning-400': isEditMode,
+              'sm:border-b-0 sm:border-l-0': !isEditMode,
+            },
+          )}
+        >
+          {isEditMode ? getEditContent() : 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
-          `}
-      >
-        {getSidebarWidgetContent()}
+        <div
+          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>
       </div>
-    </div>
+      <ExitEditModeModal
+        isOpen={isCancelModalOpen}
+        onClose={toggleOffCancelModal}
+      />
+    </>
   );
 };