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,15 @@ 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'
 
 const ConsumerClientManagePage: React.FC = () => {
   const { t } = useTranslation('client', { keyPrefix: 'edit' })
+  const { t: actionT } = 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))
 
@@ -48,7 +50,17 @@ const ConsumerClientManagePage: React.FC = () => {
     <PageContainer
       title={client?.name ?? ''}
       description={client?.description}
-      topSideActions={actions}
+      topSideActions={[
+        {
+          action: () =>
+            navigate(
+              clientKind === 'API' ? 'SIMULATE_GET_VOUCHER_API' : 'SIMULATE_GET_VOUCHER_CONSUMER'
+            ),
+          label: actionT('simulateVoucher'),
+          variant: 'contained',
+        },
+        ...actions,
+      ]}
       isLoading={isLoadingClient}
       backToAction={{
         label: t('actions.backToClientsLabel'),
@@ -103,15 +115,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/ConsumerClientManagePage/components/VoucherInstructions/VoucherInstructionsContext.tsx → src/pages/ConsumerSimulateGetVoucherPage/components/VoucherInstructions/VoucherInstructionsContext.tsx

@@ -6,19 +6,21 @@ import { useSearchParams } from 'react-router-dom'
 type VoucherInstructionsContextType = {
   selectedPurposeId: string | undefined
   selectedKeyId: string | undefined
+  selectedClientId: string | undefined
   handleSelectedPurposeIdChange: (purpose: string) => void
   handleSelectedKeyIdChange: (key: string) => void
-  clientId: string
+  handleSelectedClientIdChange: (cliendId: string) => void
   goToNextStep: VoidFunction
   goToPreviousStep: VoidFunction
 }
 
 const initialState: VoucherInstructionsContextType = {
   selectedPurposeId: undefined,
   selectedKeyId: undefined,
+  selectedClientId: undefined,
   handleSelectedPurposeIdChange: noop,
   handleSelectedKeyIdChange: noop,
-  clientId: '',
+  handleSelectedClientIdChange: noop,
   goToNextStep: noop,
   goToPreviousStep: noop,
 }
@@ -30,14 +32,12 @@ const { useContext, Provider } = createContext<VoucherInstructionsContextType>(
 
 type VoucherInstructionsContextProviderProps = {
   children: React.ReactNode
-  clientId: string
   goToNextStep: VoidFunction
   goToPreviousStep: VoidFunction
 }
 
 const VoucherInstructionsContextProvider: React.FC<VoucherInstructionsContextProviderProps> = ({
   children,
-  clientId,
   goToNextStep,
   goToPreviousStep,
 }) => {
@@ -63,16 +63,28 @@ const VoucherInstructionsContextProvider: React.FC<VoucherInstructionsContextPro
     [setSearchParams]
   )
 
+  const handleSelectedClientIdChange = React.useCallback(
+    (clientId: string) => {
+      setSearchParams((prev) => {
+        prev.set('clientId', clientId)
+        return prev
+      })
+    },
+    [setSearchParams]
+  )
+
   const selectedPurposeId = searchParams.get('purposeId') || undefined
   const selectedKeyId = searchParams.get('keyId') || undefined
+  const selectedClientId = searchParams.get('clientId') || undefined
 
   const providerValue = React.useMemo(
     () => ({
       selectedPurposeId,
       handleSelectedPurposeIdChange,
       selectedKeyId,
       handleSelectedKeyIdChange,
-      clientId,
+      selectedClientId,
+      handleSelectedClientIdChange,
       goToNextStep,
       goToPreviousStep,
     }),
@@ -81,7 +93,8 @@ const VoucherInstructionsContextProvider: React.FC<VoucherInstructionsContextPro
       handleSelectedPurposeIdChange,
       selectedKeyId,
       handleSelectedKeyIdChange,
-      clientId,
+      selectedClientId,
+      handleSelectedClientIdChange,
       goToNextStep,
       goToPreviousStep,
     ]