feat: added cancel with reputation

JoinColony · Oct 24, 2024 · 4113c5c · 4113c5c
1 parent 03c80d5
commit 4113c5c
Show file tree

Hide file tree

Showing 28 changed files with 944 additions and 161 deletions.
diff --git a/...ents/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx b/...ents/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx
@@ -1,11 +1,9 @@
-import { isToday, isYesterday } from 'date-fns';
 import React, { type FC } from 'react';
-import { FormattedDate, defineMessages } from 'react-intl';
 
 import PermissionRow from '~frame/v5/pages/VerifiedPage/partials/PermissionRow/index.ts';
-import { getFormattedDateFrom } from '~utils/getFormattedDateFrom.ts';
 import { formatText } from '~utils/intl.ts';
 import useGetColonyAction from '~v5/common/ActionSidebar/hooks/useGetColonyAction.ts';
+import FormatDate from '~v5/common/CompletedAction/partials/PaymentBuilder/partials/FormatDate/FormatDate.tsx';
 import MenuWithStatusText from '~v5/shared/MenuWithStatusText/index.ts';
 import { StatusTypes } from '~v5/shared/StatusText/consts.ts';
 import StatusText from '~v5/shared/StatusText/StatusText.tsx';
@@ -15,61 +13,11 @@ import { type PermissionSidebarProps } from '../types.ts';
 
 const displayName = 'v5.PermissionSidebar';
 
-const MSG = defineMessages({
-  todayAt: {
-    id: `${displayName}.todayAt`,
-    defaultMessage: 'Today at',
-  },
-  yestardayAt: {
-    id: `${displayName}.yestardayAt`,
-    defaultMessage: 'Yesterday at',
-  },
-  at: {
-    id: `${displayName}.at`,
-    defaultMessage: 'at',
-  },
-});
-
-const formatDate = (value: string | undefined) => {
-  if (!value) {
-    return undefined;
-  }
-
-  const date = new Date(value);
-
-  if (isToday(date)) {
-    return (
-      <>
-        {formatText(MSG.todayAt)}{' '}
-        <FormattedDate value={date} hour="numeric" minute="numeric" />
-      </>
-    );
-  }
-
-  if (isYesterday(date)) {
-    return (
-      <>
-        {formatText(MSG.yestardayAt)}{' '}
-        <FormattedDate value={date} hour="numeric" minute="numeric" />
-      </>
-    );
-  }
-
-  return (
-    <>
-      {getFormattedDateFrom(value)} {formatText(MSG.at)}{' '}
-      <FormattedDate value={date} hour="numeric" minute="numeric" />
-    </>
-  );
-};
-
 const PermissionSidebar: FC<PermissionSidebarProps> = ({ transactionId }) => {
   const { action } = useGetColonyAction(transactionId);
 
   const { initiatorAddress, createdAt } = action || {};
 
-  const formattedDate = formatDate(createdAt);
-
   return (
     <MenuWithStatusText
       statusText={
@@ -126,7 +74,9 @@ const PermissionSidebar: FC<PermissionSidebarProps> = ({ transactionId }) => {
                       id: 'action.executed.permissions.date',
                     })}
                   </span>
-                  <span className="text-sm text-gray-900">{formattedDate}</span>
+                  <span className="text-sm text-gray-900">
+                    <FormatDate value={createdAt} />
+                  </span>
                 </div>
               )}
             </>
@@ -137,4 +87,6 @@ const PermissionSidebar: FC<PermissionSidebarProps> = ({ transactionId }) => {
   );
 };
 
+PermissionSidebar.displayName = displayName;
+
 export default PermissionSidebar;
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx b/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>

diff --git a/.../common/ActionSidebar/partials/MultiSigSidebar/partials/MultiSigWidget/MultiSigWidget.tsx b/.../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>
   );

diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/PaymentBuilder.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/PaymentBuilder.tsx
@@ -228,6 +228,7 @@ const PaymentBuilder = ({ action }: PaymentBuilderProps) => {
           expenditure={expenditure}
           onClose={toggleOffCancelModal}
           refetchExpenditure={refetchExpenditure}
+          isActionStaked={expenditure.isStaked}
         />
       </>
     );
@@ -282,6 +283,7 @@ const PaymentBuilder = ({ action }: PaymentBuilderProps) => {
         expenditure={expenditure}
         onClose={toggleOffCancelModal}
         refetchExpenditure={refetchExpenditure}
+        isActionStaked={expenditure.isStaked}
       />
     </>
   );

diff --git a/.../partials/PaymentBuilder/partials/ActionWithPermissionsInfo/ActionWithPermissionsInfo.tsx b/.../partials/PaymentBuilder/partials/ActionWithPermissionsInfo/ActionWithPermissionsInfo.tsx
@@ -1,77 +1,25 @@
-import { isToday, isYesterday } from 'date-fns';
 import React, { type FC } from 'react';
-import { FormattedDate, defineMessages } from 'react-intl';
 
 import PermissionRow from '~frame/v5/pages/VerifiedPage/partials/PermissionRow/index.ts';
-import { getFormattedDateFrom } from '~utils/getFormattedDateFrom.ts';
 import { formatText } from '~utils/intl.ts';
 import MenuWithStatusText from '~v5/shared/MenuWithStatusText/index.ts';
 import { StatusTypes } from '~v5/shared/StatusText/consts.ts';
 import StatusText from '~v5/shared/StatusText/StatusText.tsx';
 import UserPopover from '~v5/shared/UserPopover/UserPopover.tsx';
 
-import { type ActionWithPermissionsInfoProps } from './types.ts';
-
-const displayName =
-  'v5.common.CompletedAction.partials.ActionWithPermissionsInfoProps';
-
-const MSG = defineMessages({
-  todayAt: {
-    id: `${displayName}.todayAt`,
-    defaultMessage: 'Today at',
-  },
-  yestardayAt: {
-    id: `${displayName}.yestardayAt`,
-    defaultMessage: 'Yesterday at',
-  },
-  at: {
-    id: `${displayName}.at`,
-    defaultMessage: 'at',
-  },
-});
-
-const formatDate = (value: string | undefined) => {
-  if (!value) {
-    return undefined;
-  }
-
-  const date = new Date(value);
-
-  if (isToday(date)) {
-    return (
-      <>
-        {formatText(MSG.todayAt)}{' '}
-        <FormattedDate value={date} hour="numeric" minute="numeric" />
-      </>
-    );
-  }
+import FormatDate from '../FormatDate/FormatDate.tsx';
 
-  if (isYesterday(date)) {
-    return (
-      <>
-        {formatText(MSG.yestardayAt)}{' '}
-        <FormattedDate value={date} hour="numeric" minute="numeric" />
-      </>
-    );
-  }
-
-  return (
-    <>
-      {getFormattedDateFrom(value)} {formatText(MSG.at)}{' '}
-      <FormattedDate value={date} hour="numeric" minute="numeric" />
-    </>
-  );
-};
+import { type ActionWithPermissionsInfoProps } from './types.ts';
 
 const ActionWithPermissionsInfo: FC<ActionWithPermissionsInfoProps> = ({
   action,
+  title,
 }) => {
   if (!action) {
     return null;
   }
 
   const { createdAt, initiatorAddress } = action ?? {};
-  const formattedDate = formatDate(createdAt);
 
   return (
     <MenuWithStatusText
@@ -83,9 +31,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={[
@@ -131,7 +80,9 @@ const ActionWithPermissionsInfo: FC<ActionWithPermissionsInfoProps> = ({
                       id: 'action.executed.permissions.date',
                     })}
                   </span>
-                  <span className="text-sm text-gray-900">{formattedDate}</span>
+                  <span className="text-sm text-gray-900">
+                    <FormatDate value={createdAt} />
+                  </span>
                 </div>
               )}
             </>

diff --git a/...ommon/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/types.ts b/...ommon/CompletedAction/partials/PaymentBuilder/partials/ActionWithPermissionsInfo/types.ts
@@ -2,4 +2,5 @@ import { type ExpenditureAction } from '~types/graphql.ts';
 
 export interface ActionWithPermissionsInfoProps {
   action?: ExpenditureAction | null;
+  title?: string;
 }