fixup! feat(eap): create timespan component

Author: shreeyash07

app/src/components/TimespanInput/i18n.json

@@ -0,0 +1,7 @@
+{
+    "namespace": "common",
+    "strings": {
+        "timeframeLabel": "Timeframe",
+        "timespanLabel": "Time Span"
+    }
+}

app/src/components/TimespanInput/index.tsx

@@ -3,9 +3,12 @@ import {
     Checklist,
     SelectInput,
 } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 import { stringValueSelector } from '@ifrc-go/ui/utils';
 import { isNotDefined } from '@togglecorp/fujs';
 
+import i18n from './i18n.json';
+
 type Timeframe = 'hours' | 'days' | 'months' | 'years';
 
 type TimeframeOptions = {
@@ -75,6 +78,8 @@ function TimespanInput(props: Props) {
         onChange,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     const timespanOptions = useMemo(() => {
         if (isNotDefined(value?.timeframe)) {
             return undefined;
@@ -100,7 +105,7 @@ function TimespanInput(props: Props) {
         <>
             <SelectInput
                 name="timeframe"
-                label="Timeframe"
+                label={strings.timeframeLabel}
                 value={value?.timeframe}
                 onChange={handleTimeframeChange}
                 options={timeframeOptions}
@@ -109,7 +114,7 @@ function TimespanInput(props: Props) {
             />
             <Checklist
                 name="timespan"
-                label="Time span"
+                label={strings.timespanLabel}
                 value={value?.timespan}
                 options={timespanOptions}
                 keySelector={timeSpanKeySelector}

app/src/views/EapRegistration/index.tsx

@@ -2,6 +2,7 @@ import {
     type ElementRef,
     useCallback,
     useRef,
+    useState,
 } from 'react';
 import {
     useLocation,
@@ -39,6 +40,7 @@ import NationalSocietyMultiSelectInput from '#components/domain/NationalSocietyM
 import NationalSocietySelectInput from '#components/domain/NationalSocietySelectInput';
 import Link from '#components/Link';
 import Page from '#components/Page';
+import TimespanInput, { type TimespanInputValue } from '#components/TimespanInput';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useAlert from '#hooks/useAlert';
 import useRouting from '#hooks/useRouting';
@@ -74,6 +76,8 @@ export function Component() {
     const { navigate } = useRouting();
     const { eapId: eapIdFromParams } = useParams<{ eapId: string }>();
 
+    const [timespanValue, setTimespanValue] = useState<TimespanInputValue>();
+
     const { state } = useLocation();
     const eapId = eapIdFromParams ?? state?.eapId as string | undefined;
     const isReadOnly = state?.mode === 'view';
@@ -520,6 +524,11 @@ export function Component() {
                             disabled={disabled}
                             readOnly={isReadOnly}
                         />
+                        {/* NOTE: Just for testing purpose */}
+                        <TimespanInput
+                            value={timespanValue}
+                            onChange={setTimespanValue}
+                        />
                     </InputSection>
                 </Container>
             </div>