Skip to content

Commit 041979e

Browse files
antofoantofo
committed
feat: create own components for threshold and attributes sections
1 parent 8e871df commit 041979e

File tree

3 files changed

+111
-74
lines changed

3 files changed

+111
-74
lines changed

‎src/pages/ProviderEServiceCreatePage/components/EServiceCreateStepThresholds/EServiceCreateStepThresholds.tsx‎

Lines changed: 10 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { type ActiveStepProps } from '@/hooks/useActiveStep'
22
import { useTranslation } from 'react-i18next'
33
import { useEServiceCreateContext } from '../EServiceCreateContext'
44
import { EServiceMutations } from '@/api/eservice'
5-
import { SubmitHandler, useForm } from 'react-hook-form'
5+
import { type SubmitHandler, useForm } from 'react-hook-form'
66
import { FormProvider } from 'react-hook-form'
77
import React from 'react'
88
import { type AttributeKey } from '@/types/attribute.types'
@@ -12,13 +12,7 @@ import {
1212
type DescriptorAttributes,
1313
type UpdateEServiceDescriptorSeed,
1414
} from '@/api/api.generatedTypes'
15-
import { SectionContainer } from '@/components/layout/containers'
16-
import { Box, Stack } from '@mui/material'
17-
import { RHFTextField } from '@/components/shared/react-hook-form-inputs'
18-
import { TabContext, TabList, TabPanel } from '@mui/lab'
19-
import { Tab } from '@mui/material'
20-
import { useActiveTab } from '@/hooks/useActiveTab'
21-
import { AddAttributesToForm } from '@/components/shared/AddAttributesToForm'
15+
import { Box } from '@mui/material'
2216
import { StepActions } from '@/components/shared/StepActions'
2317
import ArrowBackIcon from '@mui/icons-material/ArrowBack'
2418
import SaveIcon from '@mui/icons-material/Save'
@@ -29,6 +23,8 @@ import {
2923
CustomizeThresholdDrawer,
3024
useCustomizeThresholdDrawer,
3125
} from '@/components/shared/CustomizeThresholdDrawer'
26+
import { ThresholdSection } from '../sections/ThresholdSection'
27+
import { AttributesSection } from '../sections/AttributesSection'
3228

3329
export type CreateStepThresholdsFormValues = {
3430
dailyCallsPerConsumer?: number
@@ -39,7 +35,6 @@ export type CreateStepThresholdsFormValues = {
3935
export const EServiceCreateStepThresholds: React.FC<ActiveStepProps> = () => {
4036
const { t } = useTranslation('eservice', { keyPrefix: 'create' })
4137
const { descriptor, forward, back } = useEServiceCreateContext()
42-
const { activeTab, updateActiveTab } = useActiveTab('certified')
4338

4439
const { mutate: updateVersionDraft } = EServiceMutations.useUpdateVersionDraft({
4540
suppressSuccessToast: true,
@@ -124,7 +119,6 @@ export const EServiceCreateStepThresholds: React.FC<ActiveStepProps> = () => {
124119
return
125120
}
126121

127-
// TODO: Check if it is correct to default some fields
128122
const payload: UpdateEServiceDescriptorSeed & {
129123
eserviceId: string
130124
descriptorId: string
@@ -147,70 +141,12 @@ export const EServiceCreateStepThresholds: React.FC<ActiveStepProps> = () => {
147141
<>
148142
<FormProvider {...formMethods}>
149143
<Box component={'form'} noValidate onSubmit={formMethods.handleSubmit(onSubmit)}>
150-
<SectionContainer title={t('step2.thresholdSection.title')} sx={{ mt: 3 }}>
151-
<Stack direction="row" spacing={2} sx={{ mt: 3 }}>
152-
<RHFTextField
153-
size="small"
154-
name="dailyCallsPerConsumer"
155-
label={t('step2.thresholdSection.dailyCallsPerConsumerField.label')}
156-
type="number"
157-
inputProps={{ min: '1' }}
158-
rules={{ required: true, min: 1 }}
159-
sx={{ my: 0, flex: 1 }}
160-
/>
161-
162-
<RHFTextField
163-
size="small"
164-
name="dailyCallsTotal"
165-
label={t('step2.thresholdSection.dailyCallsTotalField.label')}
166-
type="number"
167-
inputProps={{ min: '1' }}
168-
sx={{ my: 0, flex: 1 }}
169-
rules={{
170-
required: true,
171-
min: {
172-
value: dailyCallsPerConsumer ?? 1,
173-
message: t('step2.thresholdSection.dailyCallsTotalField.validation.min'),
174-
},
175-
}}
176-
/>
177-
</Stack>
178-
</SectionContainer>
179-
180-
<SectionContainer
181-
title={t('step3.attributesTitle', { versionNumber: descriptor?.version ?? '1' })}
182-
description={t('step3.attributesDescription')}
183-
sx={{ mt: 3 }}
184-
>
185-
<TabContext value={activeTab}>
186-
<TabList onChange={updateActiveTab} aria-label={t('step2.attributes.tabs.ariaLabel')}>
187-
<Tab label={t('step2.attributes.tabs.certified')} value="certified" />
188-
<Tab label={t('step2.attributes.tabs.verified')} value="verified" />
189-
<Tab label={t('step2.attributes.tabs.declared')} value="declared" />
190-
</TabList>
191-
<TabPanel value="certified">
192-
<AddAttributesToForm
193-
attributeKey="certified"
194-
readOnly={isEServiceCreatedFromTemplate}
195-
/>
196-
</TabPanel>
197-
<TabPanel value="verified">
198-
<AddAttributesToForm
199-
attributeKey="verified"
200-
readOnly={isEServiceCreatedFromTemplate}
201-
openCreateAttributeDrawer={handleOpenAttributeCreateDrawerFactory('verified')}
202-
/>
203-
</TabPanel>
204-
<TabPanel value="declared">
205-
<AddAttributesToForm
206-
attributeKey="declared"
207-
readOnly={isEServiceCreatedFromTemplate}
208-
openCreateAttributeDrawer={handleOpenAttributeCreateDrawerFactory('declared')}
209-
/>
210-
</TabPanel>
211-
</TabContext>
212-
</SectionContainer>
213-
144+
<ThresholdSection />
145+
<AttributesSection
146+
version={descriptor?.version}
147+
isEServiceCreatedFromTemplate={isEServiceCreatedFromTemplate}
148+
handleOpenAttributeCreateDrawerFactory={handleOpenAttributeCreateDrawerFactory}
149+
/>
214150
<StepActions
215151
back={{
216152
label: t('backWithoutSaveBtn'),

‎src/pages/ProviderEServiceCreatePage/components/sections/AttributesSection.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { SectionContainer } from '@/components/layout/containers'
2+
import { AddAttributesToForm } from '@/components/shared/AddAttributesToForm'
3+
import { useActiveTab } from '@/hooks/useActiveTab'
4+
import { type AttributeKey } from '@/types/attribute.types'
5+
import { TabContext, TabList, TabPanel } from '@mui/lab'
6+
import { Tab } from '@mui/material'
7+
import { useTranslation } from 'react-i18next'
8+
9+
type AttributesSectionProps = {
10+
version?: string
11+
isEServiceCreatedFromTemplate: boolean
12+
handleOpenAttributeCreateDrawerFactory: (
13+
attributeKey: Exclude<AttributeKey, 'certified'>
14+
) => () => void
15+
}
16+
17+
export const AttributesSection: React.FC<AttributesSectionProps> = ({
18+
version,
19+
isEServiceCreatedFromTemplate,
20+
handleOpenAttributeCreateDrawerFactory,
21+
}) => {
22+
const { t } = useTranslation('eservice', { keyPrefix: 'create' })
23+
24+
const { activeTab, updateActiveTab } = useActiveTab('certified')
25+
26+
return (
27+
<SectionContainer
28+
title={t('step3.attributesTitle', { versionNumber: version ?? '1' })}
29+
description={t('step3.attributesDescription')}
30+
sx={{ mt: 3 }}
31+
>
32+
<TabContext value={activeTab}>
33+
<TabList onChange={updateActiveTab} aria-label={t('step2.attributes.tabs.ariaLabel')}>
34+
<Tab label={t('step2.attributes.tabs.certified')} value="certified" />
35+
<Tab label={t('step2.attributes.tabs.verified')} value="verified" />
36+
<Tab label={t('step2.attributes.tabs.declared')} value="declared" />
37+
</TabList>
38+
<TabPanel value="certified">
39+
<AddAttributesToForm attributeKey="certified" readOnly={isEServiceCreatedFromTemplate} />
40+
</TabPanel>
41+
<TabPanel value="verified">
42+
<AddAttributesToForm
43+
attributeKey="verified"
44+
readOnly={isEServiceCreatedFromTemplate}
45+
openCreateAttributeDrawer={handleOpenAttributeCreateDrawerFactory('verified')}
46+
/>
47+
</TabPanel>
48+
<TabPanel value="declared">
49+
<AddAttributesToForm
50+
attributeKey="declared"
51+
readOnly={isEServiceCreatedFromTemplate}
52+
openCreateAttributeDrawer={handleOpenAttributeCreateDrawerFactory('declared')}
53+
/>
54+
</TabPanel>
55+
</TabContext>
56+
</SectionContainer>
57+
)
58+
}

‎src/pages/ProviderEServiceCreatePage/components/sections/ThresholdSection.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { SectionContainer } from '@/components/layout/containers'
2+
import { RHFTextField } from '@/components/shared/react-hook-form-inputs'
3+
import { Stack } from '@mui/material'
4+
import { useFormContext } from 'react-hook-form'
5+
import { useTranslation } from 'react-i18next'
6+
7+
export const ThresholdSection: React.FC = () => {
8+
const { t } = useTranslation('eservice', { keyPrefix: 'create' })
9+
const { watch } = useFormContext()
10+
11+
const dailyCallsPerConsumer = watch('dailyCallsPerConsumer')
12+
13+
return (
14+
<SectionContainer title={t('step2.thresholdSection.title')} sx={{ mt: 3 }}>
15+
<Stack direction="row" spacing={2} sx={{ mt: 3 }}>
16+
<RHFTextField
17+
size="small"
18+
name="dailyCallsPerConsumer"
19+
label={t('step2.thresholdSection.dailyCallsPerConsumerField.label')}
20+
type="number"
21+
inputProps={{ min: '1' }}
22+
rules={{ required: true, min: 1 }}
23+
sx={{ my: 0, flex: 1 }}
24+
/>
25+
<RHFTextField
26+
size="small"
27+
name="dailyCallsTotal"
28+
label={t('step2.thresholdSection.dailyCallsTotalField.label')}
29+
type="number"
30+
inputProps={{ min: '1' }}
31+
sx={{ my: 0, flex: 1 }}
32+
rules={{
33+
required: true,
34+
min: {
35+
value: dailyCallsPerConsumer ?? 1,
36+
message: t('step2.thresholdSection.dailyCallsTotalField.validation.min'),
37+
},
38+
}}
39+
/>
40+
</Stack>
41+
</SectionContainer>
42+
)
43+
}

0 commit comments

Comments
 (0)