/* eslint-disable react/forbid-prop-types */
/**
 * mSupply Mobile
 * Sustainable Solutions (NZ) Ltd. 2021
 */
import React from 'react';
import { Wizard } from '../widgets';
import { PatientSelect } from '../widgets/Tabs/PatientSelect';
import { PatientEdit } from '../widgets/Tabs/PatientEdit';
import { VaccineSelect } from '../widgets/Tabs/VaccineSelect';

import { dispensingStrings } from '../localization';

const tabs = [
  {
    component: PatientSelect,
    name: 'patient',
    title: dispensingStrings.select_the_patient,
  },
  { component: PatientEdit, name: 'edit', title: dispensingStrings.edit_the_patient },
  { component: VaccineSelect, name: 'prescription', title: dispensingStrings.finalise },
];

export const VaccineDispensingPage = () => <Wizard captureUncaughtGestures={false} tabs={tabs} />;

@@ -754,16 +754,20 @@
  = () =%3E
+ (%0A 
  %3CWizard
@@ -767,16 +767,30 @@
 %3CWizard 
+useNewStepper 
 captureU
@@ -827,10 +827,12 @@
 tabs%7D /%3E
+%0A)
 ;%0A

Add use of the new stepper