EmployeeWebClient - CreateFacilityMultiStepForm - add summary step

employee-web-client/src/modules/facility/application/CreateFacilityMapper.ts

@@ -40,4 +40,25 @@ export const CreateFacilityMapper = {
  })),
  };
  },
+ formToModel(form: CreateFacilityFormDto): IFacility {
+ return {
+ ...omit(form, ['facilityName', 'facilityDescription', 'mainBusinessCategory', 'subordinateBusinessCategories', 'availability']),
+ name: form.facilityName,
+ description: form.facilityDescription ?? null,
+ businessCategories: [
+ {
+ type: form.mainBusinessCategory,
+ degree: BusinessCategoryDegreeType.Main,
+ },
+ ...(form.subordinateBusinessCategories ?? []).map(type => ({
+ type,
+ degree: BusinessCategoryDegreeType.Subordinate,
+ })),
+ ],
+ workingDays: form.availability.map(availability => ({
+ dayName: availability.dayName,
+ hours: [availability.hours],
+ })),
+ } as unknown as IFacility;
+ },
 };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { FacilityFixture } from 'utils';
+
+import { SummaryStep as SummaryStepComponent } from './index';
+import { useFacilityFormStore } from '../createFacilityFormStore';
+import { CreateFacilityMapper } from '../../../application';
+
+export default {
+ title: 'modules/facility/AddFacilityForm/SummaryStep',
+ component: SummaryStepComponent,
+ decorators: [
+ Story => {
+ useFacilityFormStore.setState({ data: CreateFacilityMapper.modelToForm(FacilityFixture.toStructure()) });
+
+ return <Story />;
+ },
+ ],
+} as ComponentMeta<typeof SummaryStepComponent>;
+
+const Template: ComponentStory<typeof SummaryStepComponent> = () => {
+ return <SummaryStepComponent />;
+};
+
+export const SummaryStep = Template.bind({});

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { ListItem } from 'shared/DescriptionListV2';
+
+import { useFacilityFormStore } from '../createFacilityFormStore';
+import { CreateFacilityFormDto } from '../../../application/types';
+import { CreateFacilityMapper } from '../../../application';
+import { FacilityBody } from '../../FacilityBody';
+import { FormStepHeader } from '../FormStepHeader';
+
+const SummaryStep = () => {
+ const { formatMessage } = useIntl();
+ const data = useFacilityFormStore(store => store.data);
+
+ return (
+ <FacilityBody facility={CreateFacilityMapper.formToModel(data as CreateFacilityFormDto)}>
+ <ListItem>
+ <FormStepHeader>
+ {formatMessage({
+ id: 'summary-facility-step-three',
+ defaultMessage: 'Step 4: Summary',
+ })}
+ </FormStepHeader>
+ </ListItem>
+ </FacilityBody>
+ );
+};
+
+export { SummaryStep };

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Divider, Header, Heading, SubHeading } from 'shared/DescriptionListV2';
@@ -11,9 +11,10 @@ import { weekDayMessages } from '../../application/messages';
 
 interface IProps {
  facility: IFacility;
+ children?: ReactNode;
 }
 
-const FacilityBody = ({ facility }: IProps) => {
+const FacilityBody = ({ facility, children }: IProps) => {
  const { formatMessage } = useIntl();
 
  const mainBusinessCategory = facility.businessCategories.find(category => category.degree === BusinessCategoryDegreeType.Main)?.type;
@@ -24,6 +25,7 @@ const FacilityBody = ({ facility }: IProps) => {
 
  return (
  <List spacingY={4}>
+ {children}
  <IndentLabel>
  <Header>
  <Heading>

employee-web-client/src/utils/fixtures/FacilityFixture.ts

@@ -8,7 +8,7 @@ export const FacilityFixture = createFixture<IFacility>({
  slug: 'hardcut-barber',
  currency: Currency.Eu,
  name: 'Hardcut Barber',
- description: null,
+ description: "Lorem ipsum dolor",
  address: {
  city: 'Gdynia',
  postCode: '80-800',
@@ -20,7 +20,10 @@ export const FacilityFixture = createFixture<IFacility>({
  hours: [{ until: '9.00', to: '17.00' }],
  },
  ],
- businessCategories: [{ degree: BusinessCategoryDegreeType.Main, type: BusinessCategoryType.Barber }],
+ businessCategories: [
+ { degree: BusinessCategoryDegreeType.Main, type: BusinessCategoryType.Barber },
+ { degree: BusinessCategoryDegreeType.Subordinate, type: BusinessCategoryType.Hairdresser },
+ ],
  contacts: [
  {
  type: ContactType.Email,