fix: show staged payment (if it enabled) in payments list

src/components/v5/common/ActionSidebar/partials/PaymentGroup/GroupList.ts

@@ -6,13 +6,23 @@ import {
   // Waves,
   ArrowsOutLineHorizontal,
   // @TODO: uncomment when staged payment is ready
-  // Steps,
+  Steps,
+  type Icon,
 } from '@phosphor-icons/react';
 
 import { Action } from '~constants/actions.ts';
 import { formatText } from '~utils/intl.ts';
 
-export const GROUP_LIST = [
+type GroupListItem = {
+  title: string;
+  description: string;
+  Icon: Icon;
+  action: Action;
+  isNew?: boolean;
+  isHidden?: boolean;
+};
+
+export const GROUP_LIST: GroupListItem[] = [
   {
     title: formatText({ id: 'actions.simplePayment' }),
     description: formatText({
@@ -47,14 +57,13 @@ export const GROUP_LIST = [
     action: Action.SplitPayment,
     isNew: true,
   },
-  // @TODO: uncomment when staged payment is ready
-  // {
-  //   title: formatText({ id: 'actions.stagedPayment' }),
-  //   description: formatText({
-  //     id: 'actions.description.stagedPayment',
-  //   }),
-  //   Icon: Steps,
-  //   action: Action.StagedPayment,
-  //   isNew: true,
-  // },
+  {
+    title: formatText({ id: 'actions.stagedPayment' }),
+    description: formatText({
+      id: 'actions.description.stagedPayment',
+    }),
+    Icon: Steps,
+    action: Action.StagedPayment,
+    isNew: true,
+  },
 ];

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

@@ -5,28 +5,31 @@ import { formatText } from '~utils/intl.ts';
 import GroupedAction from '../GroupedAction/index.ts';
 import GroupedActionWrapper from '../GroupedActionWrapper/index.ts';
 
-import { GROUP_LIST } from './GroupList.ts';
+import { useGetGroupList } from './useGetGroupList.tsx';
 
 const PaymentGroup = () => {
+  const groupList = useGetGroupList();
   return (
     <GroupedActionWrapper
       title={formatText({ id: 'actions.payments' })}
       description={formatText({ id: 'actions.description.payments' })}
     >
       <GroupedAction.List>
-        {GROUP_LIST.map(({ Icon, title, description, action, isNew }) => {
-          return (
-            <GroupedAction.Item
-              color="blue"
-              Icon={Icon}
-              title={title}
-              description={description}
-              action={action}
-              key={`group-action-item-${action}`}
-              isNew={isNew}
-            />
-          );
-        })}
+        {groupList.map(
+          ({ Icon, title, description, action, isNew, isHidden }) => {
+            return !isHidden ? (
+              <GroupedAction.Item
+                color="blue"
+                Icon={Icon}
+                title={title}
+                description={description}
+                action={action}
+                key={`group-action-item-${action}`}
+                isNew={isNew}
+              />
+            ) : null;
+          },
+        )}
       </GroupedAction.List>
     </GroupedActionWrapper>
   );

src/components/v5/common/ActionSidebar/partials/PaymentGroup/useGetGroupList.tsx

@@ -0,0 +1,21 @@
+import { Action } from '~constants/actions.ts';
+import useEnabledExtensions from '~hooks/useEnabledExtensions.ts';
+
+import { GROUP_LIST } from './GroupList.ts';
+
+export const useGetGroupList = () => {
+  const { isStagedExpenditureEnabled } = useEnabledExtensions();
+  let groupListTransformed = [...GROUP_LIST];
+
+  if (!isStagedExpenditureEnabled) {
+    groupListTransformed = groupListTransformed.map(({ action, ...rest }) => {
+      return {
+        ...rest,
+        action,
+        isHidden: action === Action.StagedPayment,
+      };
+    });
+  }
+
+  return groupListTransformed;
+};