PIN-8688 move 'how to get a voucher' section in developer tools

src/pages/ConsumerClientManagePage/ConsumerClientManage.page.tsx

@@ -7,7 +7,6 @@ import { TabContext, TabList, TabPanel } from '@mui/lab'
 import { Alert, Button, Grid, Link, Stack, Tab, Typography } from '@mui/material'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { VoucherInstructions } from './components/VoucherInstructions'
 import { useClientKind } from '@/hooks/useClientKind'
 import { ClientOperators } from './components/ClientOperators'
 import { ClientPublicKeys } from './components/ClientPublicKeys'
@@ -19,12 +18,16 @@ import SyncIcon from '@mui/icons-material/Sync'
 import { useDrawerState } from '@/hooks/useDrawerState'
 import { SetClientAdminDrawer } from './components/SetClientAdminDrawer/SetClientAdminDrawer'
 import { apiV2GuideLink } from '@/config/constants'
+import { useNavigate } from '@/router'
+import type { ActionItemButton } from '@/types/common.types'
 
 const ConsumerClientManagePage: React.FC = () => {
   const { t } = useTranslation('client', { keyPrefix: 'edit' })
+  const { t: tCommon } = useTranslation('common', { keyPrefix: 'actions' })
   const { clientId } = useParams<'SUBSCRIBE_CLIENT_EDIT' | 'SUBSCRIBE_INTEROP_M2M_CLIENT_EDIT'>()
   const clientKind = useClientKind()
-  const { activeTab, updateActiveTab } = useActiveTab('voucher')
+  const { activeTab, updateActiveTab } = useActiveTab('clientOperators')
+  const navigate = useNavigate()
 
   const { data: client, isLoading: isLoadingClient } = useQuery(ClientQueries.getSingle(clientId))
 
@@ -44,11 +47,18 @@ const ConsumerClientManagePage: React.FC = () => {
     })
   }
 
+  const voucherSimulationAction: ActionItemButton = {
+    action: () =>
+      navigate(clientKind === 'API' ? 'SIMULATE_GET_VOUCHER_API' : 'SIMULATE_GET_VOUCHER_CONSUMER'),
+    label: tCommon('simulateVoucher'),
+    variant: 'contained',
+  }
+
   return (
     <PageContainer
       title={client?.name ?? ''}
       description={client?.description}
-      topSideActions={actions}
+      topSideActions={[voucherSimulationAction, ...actions]}
       isLoading={isLoadingClient}
       backToAction={{
         label: t('actions.backToClientsLabel'),
@@ -103,15 +113,10 @@ const ConsumerClientManagePage: React.FC = () => {
       )}
       <TabContext value={activeTab}>
         <TabList onChange={updateActiveTab} aria-label={t('tabs.ariaLabel')} variant="fullWidth">
-          <Tab label={t('tabs.voucher')} value="voucher" />
           <Tab label={t('tabs.clientOperators')} value="clientOperators" />
           <Tab label={t('tabs.publicKeys')} value="publicKeys" />
         </TabList>
 
-        <TabPanel value="voucher">
-          <VoucherInstructions clientId={clientId} />
-        </TabPanel>
-
         <TabPanel value="clientOperators">
           <ClientOperators clientId={clientId} />
         </TabPanel>

src/pages/ConsumerSimulateGetVoucherPage/ConsumerSimulateGetVoucherPage.page.tsx

@@ -0,0 +1,15 @@
+import { PageContainer } from '@/components/layout/containers'
+import { useTranslation } from 'react-i18next'
+import { VoucherInstructions } from './components/VoucherInstructions'
+
+const ConsumerDebugVoucherPage: React.FC = () => {
+  const { t } = useTranslation('pages', { keyPrefix: 'consumerSimulateGetVoucher' })
+
+  return (
+    <PageContainer title={t('title')} description={t('description')}>
+      <VoucherInstructions />
+    </PageContainer>
+  )
+}
+
+export default ConsumerDebugVoucherPage

src/pages/ConsumerClientManagePage/components/VoucherInstructions/VoucherInstructions.tsx → src/pages/ConsumerSimulateGetVoucherPage/components/VoucherInstructions/VoucherInstructions.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Stepper } from '@/components/shared/Stepper'
 import { useActiveStep } from '@/hooks/useActiveStep'
-import { Grid } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { useClientKind } from '@/hooks/useClientKind'
 import { SectionContainerSkeleton } from '@/components/layout/containers'
@@ -11,13 +10,8 @@ import { VoucherInstructionsStep1 } from './VoucherInstructionsStep1'
 import { VoucherInstructionsStep2 } from './VoucherInstructionsStep2'
 import { VoucherInstructionsStep3 } from './VoucherInstructionsStep3'
 import { VoucherInstructionsStep4 } from './VoucherInstructionsStep4'
-import { HeadSection } from '@/components/shared/HeadSection'
 
-interface VoucherInstructionsProps {
-  clientId: string
-}
-
-export const VoucherInstructions: React.FC<VoucherInstructionsProps> = ({ clientId }) => {
+export const VoucherInstructions: React.FC = () => {
   const { t } = useTranslation('voucher')
   const clientKind = useClientKind()
   const { activeStep, forward, back } = useActiveStep()
@@ -38,23 +32,17 @@ export const VoucherInstructions: React.FC<VoucherInstructionsProps> = ({ client
   const contextProps = {
     goToPreviousStep: back,
     goToNextStep: forward,
-    clientId,
   }
 
   return (
     <>
-      <HeadSection title={t('title')} description={t('description')} headVariant="secondary" />
       <VoucherInstructionsContextProvider {...contextProps}>
-        <Grid container>
-          <Grid item xs={8}>
-            <Stepper steps={steps} activeIndex={activeStep} />
-            <React.Suspense
-              fallback={<SectionContainerSkeleton height={clientKind === 'CONSUMER' ? 356 : 297} />}
-            >
-              <Step />
-            </React.Suspense>
-          </Grid>
-        </Grid>
+        <Stepper steps={steps} activeIndex={activeStep} />
+        <React.Suspense
+          fallback={<SectionContainerSkeleton height={clientKind === 'CONSUMER' ? 356 : 297} />}
+        >
+          <Step />
+        </React.Suspense>
       </VoucherInstructionsContextProvider>
     </>
   )

src/pages/ConsumerSimulateGetVoucherPage/components/VoucherInstructions/VoucherInstructionsContext.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { createContext } from '@/utils/common.utils'
+import noop from 'lodash/noop'
+
+type VoucherInstructionsContextType = {
+  goToNextStep: VoidFunction
+  goToPreviousStep: VoidFunction
+}
+
+const initialState: VoucherInstructionsContextType = {
+  goToNextStep: noop,
+  goToPreviousStep: noop,
+}
+
+const { useContext, Provider } = createContext<VoucherInstructionsContextType>(
+  'VoucherInstructionsContext',
+  initialState
+)
+
+type VoucherInstructionsContextProviderProps = {
+  children: React.ReactNode
+  goToNextStep: VoidFunction
+  goToPreviousStep: VoidFunction
+}
+
+const VoucherInstructionsContextProvider: React.FC<VoucherInstructionsContextProviderProps> = ({
+  children,
+  goToNextStep,
+  goToPreviousStep,
+}) => {
+  const providerValue = React.useMemo(
+    () => ({
+      goToNextStep,
+      goToPreviousStep,
+    }),
+    [goToNextStep, goToPreviousStep]
+  )
+
+  return <Provider value={providerValue}>{children}</Provider>
+}
+
+export { useContext as useVoucherInstructionsContext, VoucherInstructionsContextProvider }