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

[antofo]

• Create new page for voucher simulation
• Move voucher instructions related components
• Implement client selection in step 1 of voucher instructions

[borgesis95]

can i suggest to move singleAction like this ?

 const voucherSimulationAction: ActionItemButton = {
    action: () =>
      navigate(clientKind === 'API' ? 'SIMULATE_GET_VOUCHER_API' : 'SIMULATE_GET_VOUCHER_CONSUMER'),
    label: actionT('simulateVoucher'),
    variant: 'contained',
  }

[borgesis95]

formMethods

Suggested change

	<FormProvider {...methods}>
	<FormProvider {...formMethods}>

[borgesis95]

[general]: Do you think it makes sense to abstract this component? I see a lot of "if" related to clientKind. Maybe an idea could be have two component within this.

[borgesis95]

same of : https://github.com/pagopa/pdnd-interop-frontend/pull/1584/changes#r2623349051

[Carminepo2]

A couple of considerations:

• Empty string is still used as a values that represent the absence of user choice, which is not correct, let's use null;
• We have the clientId, etc..., states contained in two different parts, the context and the form, those states are synced with an useEffect. Using the ´useEffect´ to sync internal react states is not a good practice. My suggestion is to remove the state inside the context, and only use the form state. Then use the watch method to subscribe to form states to handle side effects which is writing the state in the url params and reset the other states. You can see an example of using watch to subscribe to form changes in /src/hooks/useRiskAnalysisForm.ts

[sonarqubecloud]

Quality Gate failed

Failed conditions
41.7% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud