EmployeeWebClient - complete summary step

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/FormStepProgressBar.tsx

@@ -9,10 +9,12 @@ const FormStepProgressBar = () => {
   const getProgress = () => {
     switch (step) {
       case FacilityFormStep.Base_info:
-        return 33.33;
+        return 25;
       case FacilityFormStep.Working_hours:
-        return 66.66;
+        return 50;
       case FacilityFormStep.Contact:
+        return 75;
+      case FacilityFormStep.Summary:
         return 100;
     }
   };

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/NextStepButton.tsx

@@ -20,7 +20,7 @@ const NextStepButton = ({ formStep }: IProps) => {
       variant='solid'
       colorScheme='primary'
       id={`go-to-${kebabCase(formStep)}`}
-      isDisabled={step === FacilityFormStep.Contact}
+      isDisabled={step === FacilityFormStep.Summary}
       type='submit'
       rightIcon={<ChevronRightIcon />}
     >

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/SubmitButton.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { Button } from 'shared/Button';
+
+import { ChevronRightIcon } from '@chakra-ui/icons';
+
+const SubmitButton = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Button variant='solid' colorScheme='green' id={`submit-facility-form`} rightIcon={<ChevronRightIcon />}>
+      {formatMessage({ id: 'submit', defaultMessage: 'Submit' })}
+    </Button>
+  );
+};
+
+export { SubmitButton };

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/SummaryStep/index.tsx

@@ -1,29 +1,45 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { ButtonGroup } from '@chakra-ui/react';
 
-import { ListItem } from 'shared/DescriptionListV2';
+import { ListItem, Divider } from 'shared/DescriptionListV2';
+import { List, IndentLabel } from 'shared/IndentiationList';
 
 import { useFacilityFormStore } from '../createFacilityFormStore';
 import { CreateFacilityFormDto } from '../../../application/types';
 import { CreateFacilityMapper } from '../../../application';
 import { FacilityBody } from '../../FacilityBody';
 import { FormStepHeader } from '../FormStepHeader';
+import { PreviousStepButton } from '../PreviousStepButton';
+import { SubmitButton } from '../SubmitButton';
 
 const SummaryStep = () => {
   const { formatMessage } = useIntl();
   const data = useFacilityFormStore(store => store.data);
+  const step = useFacilityFormStore(store => store.step);
 
   return (
-    <FacilityBody facility={CreateFacilityMapper.formToModel(data as CreateFacilityFormDto)}>
+    <List>
       <ListItem>
-        <FormStepHeader>
-          {formatMessage({
-            id: 'summary-facility-step-three',
-            defaultMessage: 'Step 4: Summary',
-          })}
-        </FormStepHeader>
+        <FacilityBody facility={CreateFacilityMapper.formToModel(data as CreateFacilityFormDto)}>
+          <ListItem>
+            <FormStepHeader>
+              {formatMessage({
+                id: 'summary-facility-step-three',
+                defaultMessage: 'Step 4: Summary',
+              })}
+            </FormStepHeader>
+          </ListItem>
+        </FacilityBody>
       </ListItem>
-    </FacilityBody>
+      <Divider />
+      <IndentLabel>
+        <ButtonGroup>
+          <PreviousStepButton formStep={step} />
+          <SubmitButton />
+        </ButtonGroup>
+      </IndentLabel>
+    </List>
   );
 };
 

employee-web-client/src/modules/facility/presentation/CreateFacilityMultiStepForm/createFacilityFormStore.ts

@@ -5,6 +5,7 @@ export enum FacilityFormStep {
   Base_info = 'base info',
   Working_hours = 'working hours',
   Contact = 'contact',
+  Summary = 'summary',
 }
 
 type FacilityFormStore = {
@@ -35,7 +36,9 @@ export const useFacilityFormStore = create<FacilityFormStore>((set, get) => {
           case FacilityFormStep.Working_hours:
             return FacilityFormStep.Contact;
           case FacilityFormStep.Contact:
-            return FacilityFormStep.Contact;
+            return FacilityFormStep.Summary;
+          case FacilityFormStep.Summary:
+            return FacilityFormStep.Summary;
         }
       };
 
@@ -44,19 +47,21 @@ export const useFacilityFormStore = create<FacilityFormStore>((set, get) => {
       });
     },
     previous() {
-      const getNextStep = () => {
+      const getPrevStep = () => {
         switch (get().step) {
           case FacilityFormStep.Base_info:
             return FacilityFormStep.Base_info;
           case FacilityFormStep.Working_hours:
             return FacilityFormStep.Base_info;
           case FacilityFormStep.Contact:
             return FacilityFormStep.Working_hours;
+          case FacilityFormStep.Summary:
+            return FacilityFormStep.Contact;
         }
       };
 
       set({
-        step: getNextStep(),
+        step: getPrevStep(),
       });
     },
   };

employee-web-client/src/shared/DescriptionListV2/ListItem.tsx

@@ -8,7 +8,7 @@ interface IProps extends GridItemProps {
 
 const ListItem = ({ children, ...props }: IProps) => {
   return (
-    <GridItem colSpan={3} {...props}>
+    <GridItem colStart={1} colEnd={-1} {...props}>
       {children}
     </GridItem>
   );