EmployeeWebCLient - CreateFacilityMultiStepForm - create first step

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

@@ -0,0 +1,14 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { BaseInfoStep } from './index';
+
+export default {
+ title: 'modules/facility/AddFacilityForm/BaseInfoStep',
+ component: BaseInfoStep,
+} as ComponentMeta<typeof BaseInfoStep>;
+
+const Template: ComponentStory<typeof BaseInfoStep> = () => {
+ return <BaseInfoStep />;
+};
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { CurrencyInput, Select, Textarea, TextInput } from 'shared/FormV2';
+import { OptionType } from 'shared/FormV2/presentation/Select';
+
+import { BusinessCategoryType } from '../../../application/types';
+import { businessCategoryTypeMessages } from '../../../application/messages';
+
+const BaseInfoStepInputs = () => {
+ const { formatMessage } = useIntl();
+
+ return (
+ <>
+ <TextInput name='offerName' colSpan={{ base: 6, md: 4 }} isRequired>
+ {formatMessage({ id: 'facility-name', defaultMessage: 'Facility name' })}
+ </TextInput>
+ <TextInput name='slug' colSpan={{ base: 6, md: 4 }} isRequired>
+ {formatMessage({ id: 'slug', defaultMessage: 'Slug' })}
+ </TextInput>
+ <Textarea name='facilityDescription' colSpan={6} isRequired>
+ {formatMessage({ id: 'description', defaultMessage: 'Description' })}
+ </Textarea>
+ <CurrencyInput name='currency' colSpan={{ base: 4, md: 3 }} isRequired />
+ <MainBusinessCategorySelect />
+ <SubordinateBusinessCategorySelect />
+ </>
+ );
+};
+
+const useBusinessCategoryOptions = () => {
+ const { formatMessage } = useIntl();
+
+ return Object.values(BusinessCategoryType).map(
+ category =>
+ ({
+ value: category,
+ label: formatMessage({ ...businessCategoryTypeMessages[category] }),
+ } as OptionType<string>),
+ );
+};
+
+const MainBusinessCategorySelect = () => {
+ const { formatMessage } = useIntl();
+ const categoryOptions = useBusinessCategoryOptions();
+
+ return (
+ <Select options={categoryOptions} name='mainBusinessCategory' colSpan={{ base: 6, md: 4 }} colStart={1} isRequired>
+ {formatMessage({ id: 'main-business-category', defaultMessage: 'Main business category' })}
+ </Select>
+ );
+};
+
+const SubordinateBusinessCategorySelect = () => {
+ const { formatMessage } = useIntl();
+ const categoryOptions = useBusinessCategoryOptions();
+
+ return (
+ <Select options={categoryOptions} name='subordinateBusinessCategories' colSpan={6} isMulti>
+ {formatMessage({ id: 'subordinate-business-category', defaultMessage: 'Subordinate business category' })}
+ </Select>
+ );
+};
+
+export { BaseInfoStepInputs };

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { ButtonGroup, chakra } from '@chakra-ui/react';
+
+import { List, IndentList, IndentLabel } from 'shared/IndentiationList';
+import { Header, Heading, SubHeading, Divider } from 'shared/DescriptionListV2';
+import { useForm, FormProvider } from 'shared/FormV2';
+
+import { useFacilityFormStore } from '../createFacilityFormStore';
+import { PreviousStepButton } from '../PreviousStepButton';
+import { NextStepButton } from '../NextStepButton';
+import { BaseInfoStepInputs } from './BaseInfoStepInputs';
+import { CreateFacilityFormDto } from '../../../application/types';
+
+const BaseInfoStep = () => {
+ const { formatMessage } = useIntl();
+ const step = useFacilityFormStore(store => store.step);
+ const data = useFacilityFormStore(store => store.data);
+ const setData = useFacilityFormStore(store => store.setData);
+
+ const methods = useForm<Partial<CreateFacilityFormDto>>({
+ defaultValues: data,
+ });
+
+ return (
+ <chakra.form
+ id='add-facility-base-info-step'
+ data-testid='add-facility-base-info-step'
+ noValidate
+ onSubmit={methods.handleSubmit(model => setData(model))}
+ >
+ <FormProvider {...methods}>
+ <List>
+ <IndentLabel>
+ <Header>
+ <Heading>{formatMessage({ id: 'facility-base-data', defaultMessage: 'Base information' })}</Heading>
+ <SubHeading>
+ {formatMessage({
+ id: 'facility-base-data-description',
+ defaultMessage: 'Base data about facility.This fields identifies your facility in the system and on the market.',
+ })}
+ </SubHeading>
+ </Header>
+ </IndentLabel>
+ <IndentList columns={6} spacingY={6}>
+ <BaseInfoStepInputs />
+ </IndentList>
+ <Divider />
+ <IndentLabel>
+ <ButtonGroup>
+ <PreviousStepButton formStep={step} />
+ <NextStepButton formStep={step} />
+ </ButtonGroup>
+ </IndentLabel>
+ </List>
+ </FormProvider>
+ </chakra.form>
+ );
+};
+
+export { BaseInfoStep };

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Progress } from '@chakra-ui/react';
+
+import { FacilityFormStep, useFacilityFormStore } from './createFacilityFormStore';
+
+const FormStepProgressBar = () => {
+ const step = useFacilityFormStore(store => store.step);
+
+ const getProgress = () => {
+ switch (step) {
+ case FacilityFormStep.Base_info:
+ return 33.33;
+ case FacilityFormStep.Working_hours:
+ return 66.66;
+ case FacilityFormStep.Contact:
+ return 100;
+ }
+ };
+
+ return <Progress hasStripe value={getProgress()} mb='5%' mx='5%' isAnimated />;
+};
+
+export { FormStepProgressBar };

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { kebabCase } from 'lodash';
+
+import { Button } from 'shared/Button';
+
+import { FacilityFormStep, useFacilityFormStore } from './createFacilityFormStore';
+import { ChevronRightIcon } from "@chakra-ui/icons";
+
+interface IProps {
+ formStep: FacilityFormStep;
+}
+
+const NextStepButton = ({ formStep }: IProps) => {
+ const { formatMessage } = useIntl();
+ const step = useFacilityFormStore(store => store.step);
+
+ return (
+ <Button
+ variant='solid'
+ colorScheme='primary'
+ id={`go-to-${kebabCase(formStep)}`}
+ isDisabled={step === FacilityFormStep.Contact}
+ type='submit'
+ rightIcon={<ChevronRightIcon />}
+ >
+ {formatMessage({ id: 'next-step', defaultMessage: 'Next' })}
+ </Button>
+ );
+};
+
+export { NextStepButton };

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { kebabCase } from 'lodash';
+import { ChevronLeftIcon } from '@chakra-ui/icons';
+
+import { Button } from 'shared/Button';
+
+import { FacilityFormStep, useFacilityFormStore } from './createFacilityFormStore';
+
+interface IProps {
+ formStep: FacilityFormStep;
+}
+
+const PreviousStepButton = ({ formStep }: IProps) => {
+ const { formatMessage } = useIntl();
+ const previous = useFacilityFormStore(store => store.previous);
+ const step = useFacilityFormStore(store => store.step);
+
+ return (
+ <Button
+ variant='outline'
+ colorScheme='primary'
+ id={`back-to-${kebabCase(formStep)}`}
+ isDisabled={step === FacilityFormStep.Base_info}
+ onClick={previous}
+ leftIcon={<ChevronLeftIcon />}
+ >
+ {formatMessage({ id: 'previous-step', defaultMessage: 'Back' })}
+ </Button>
+ );
+};
+
+export { PreviousStepButton };

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

@@ -0,0 +1,63 @@
+import create from 'zustand';
+import { CreateFacilityFormDto } from '../../application/types';
+
+export enum FacilityFormStep {
+ Base_info = 'base info',
+ Working_hours = 'working hours',
+ Contact = 'contact',
+}
+
+type FacilityFormStore = {
+ step: FacilityFormStep;
+ data: Partial<CreateFacilityFormDto>;
+ setData: (partial: Partial<CreateFacilityFormDto>) => void;
+ next: () => void;
+ previous: () => void;
+};
+
+export const useFacilityFormStore = create<FacilityFormStore>((set, get) => {
+ return {
+ step: FacilityFormStep.Base_info,
+ data: {},
+ setData(partial) {
+ set({
+ data: {
+ ...get().data,
+ ...partial,
+ },
+ });
+ },
+ next() {
+ const getNextStep = () => {
+ switch (get().step) {
+ case FacilityFormStep.Base_info:
+ return FacilityFormStep.Working_hours;
+ case FacilityFormStep.Working_hours:
+ return FacilityFormStep.Contact;
+ case FacilityFormStep.Contact:
+ return FacilityFormStep.Contact;
+ }
+ };
+
+ set({
+ step: getNextStep(),
+ });
+ },
+ previous() {
+ const getNextStep = () => {
+ 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;
+ }
+ };
+
+ set({
+ step: getNextStep(),
+ });
+ },
+ };
+});