diff --git a/src/components/v5/common/ActionSidebar/partials/PaymentGroup/GroupList.ts b/src/components/v5/common/ActionSidebar/partials/PaymentGroup/GroupList.ts index 66d442206f..fae3e23e66 100644 --- a/src/components/v5/common/ActionSidebar/partials/PaymentGroup/GroupList.ts +++ b/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, + }, ]; diff --git a/src/components/v5/common/ActionSidebar/partials/PaymentGroup/PaymentGroup.tsx b/src/components/v5/common/ActionSidebar/partials/PaymentGroup/PaymentGroup.tsx index 0c0a474bbb..afa5638cf0 100644 --- a/src/components/v5/common/ActionSidebar/partials/PaymentGroup/PaymentGroup.tsx +++ b/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 ( - {GROUP_LIST.map(({ Icon, title, description, action, isNew }) => { - return ( - - ); - })} + {groupList.map( + ({ Icon, title, description, action, isNew, isHidden }) => { + return !isHidden ? ( + + ) : null; + }, + )} ); diff --git a/src/components/v5/common/ActionSidebar/partials/PaymentGroup/useGetGroupList.tsx b/src/components/v5/common/ActionSidebar/partials/PaymentGroup/useGetGroupList.tsx new file mode 100644 index 0000000000..08d3dc8548 --- /dev/null +++ b/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; +};