Draft

AtB-AS · Nov 6, 2024 · c8b30e1 · c8b30e1
1 parent a13ee5f
commit c8b30e1
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 64 deletions.
diff --git a/src/page-modules/contact/components/form/index.ts b/src/page-modules/contact/components/form/index.ts
@@ -7,6 +7,7 @@ export { default as Radio } from './radio';
 export { default as Select } from './select';
 export { default as Textarea } from './textarea';
 export { default as DateSelector } from './date-selector';
+export { default as TimeSelector } from './time-selector';
 export {
   SearchableSelect,
   getLineOptions,

diff --git a/src/page-modules/contact/components/form/time-selector.tsx b/src/page-modules/contact/components/form/time-selector.tsx
@@ -0,0 +1,47 @@
+import style from './form.module.css';
+import { TranslatedString, useTranslation } from '@atb/translations';
+import { parseTime } from '@internationalized/date';
+import {
+  DateInput,
+  DateSegment,
+  Label,
+  TimeField,
+} from 'react-aria-components';
+
+export type TimeSelectorProps = {
+  label: TranslatedString;
+  value: string;
+  onChange: (value: string) => void;
+};
+export default function TimeSelector({
+  label,
+  value,
+  onChange,
+}: TimeSelectorProps) {
+  const { t } = useTranslation();
+  const parsedValue = parseTime(value);
+
+  return (
+    <div className={style.time_field_container}>
+      <Label>{t(label)}</Label>
+      <TimeField
+        value={parsedValue}
+        onChange={(change) => onChange(change.toString())}
+        hourCycle={24}
+        shouldForceLeadingZeros
+        className={style.timeSelector}
+        data-testid="searchTimeSelector-time"
+        granularity="minute"
+      >
+        <DateInput className={style.timeSelectorInput}>
+          {(segment) => (
+            <DateSegment
+              className={style.timeSelectorSegment}
+              segment={segment}
+            />
+          )}
+        </DateInput>
+      </TimeField>
+    </div>
+  );
+}
diff --git a/src/page-modules/contact/components/index.tsx b/src/page-modules/contact/components/index.tsx
@@ -11,5 +11,6 @@ export {
   getLineOptions,
   getStopOptions,
   DateSelector,
+  TimeSelector,
 } from './form';
 export { SectionCard } from './section-card';
diff --git a/src/page-modules/contact/means-of-transport/forms/delayForm.tsx b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx
@@ -15,6 +15,7 @@ import {
   getLineOptions,
   getStopOptions,
   DateSelector,
+  TimeSelector,
 } from '../../components';
 
 type DelayFormProps = {
@@ -141,19 +142,14 @@ export const DelayForm = ({ state, send }: DelayFormProps) => {
           }
         />
 
-        <Input
+        <TimeSelector
           label={PageText.Contact.input.plannedDepartureTime.label}
-          type="time"
-          name="time"
-          value={state.context.plannedDepartureTime}
-          errorMessage={
-            state.context?.errorMessages['plannedDepartureTime']?.[0]
-          }
-          onChange={(e) =>
+          value={state.context.plannedDepartureTime || ''}
+          onChange={(time: string) =>
             send({
               type: 'ON_INPUT_CHANGE',
               inputName: 'plannedDepartureTime',
-              value: e.target.value,
+              value: time,
             })
           }
         />

diff --git a/src/page-modules/contact/means-of-transport/forms/driverForm.tsx b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx
@@ -15,6 +15,7 @@ import {
   getLineOptions,
   getStopOptions,
   DateSelector,
+  TimeSelector,
 } from '../../components';
 
 type DriverFormProps = {
@@ -163,19 +164,14 @@ export const DriverForm = ({ state, send }: DriverFormProps) => {
           }
         />
 
-        <Input
+        <TimeSelector
           label={PageText.Contact.input.plannedDepartureTime.label}
-          type="time"
-          name="time"
-          value={state.context.plannedDepartureTime}
-          errorMessage={
-            state.context?.errorMessages['plannedDepartureTime']?.[0]
-          }
-          onChange={(e) =>
+          value={state.context.plannedDepartureTime || ''}
+          onChange={(time: string) =>
             send({
               type: 'ON_INPUT_CHANGE',
               inputName: 'plannedDepartureTime',
-              value: e.target.value,
+              value: time,
             })
           }
         />

diff --git a/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx
@@ -15,6 +15,7 @@ import {
   getLineOptions,
   getStopOptions,
   DateSelector,
+  TimeSelector,
 } from '../../components';
 
 type InjuryFormProps = {
@@ -162,19 +163,14 @@ export const InjuryForm = ({ state, send }: InjuryFormProps) => {
           }
         />
 
-        <Input
+        <TimeSelector
           label={PageText.Contact.input.plannedDepartureTime.label}
-          type="time"
-          name="time"
-          value={state.context.plannedDepartureTime}
-          errorMessage={
-            state.context?.errorMessages['plannedDepartureTime']?.[0]
-          }
-          onChange={(e) =>
+          value={state.context.plannedDepartureTime || ''}
+          onChange={(time: string) =>
             send({
               type: 'ON_INPUT_CHANGE',
               inputName: 'plannedDepartureTime',
-              value: e.target.value,
+              value: time,
             })
           }
         />

diff --git a/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx
@@ -16,6 +16,7 @@ import {
   getLineOptions,
   getStopOptions,
   DateSelector,
+  TimeSelector,
 } from '../../components';
 
 type TransportationFormProps = {
@@ -145,19 +146,14 @@ export const TransportationForm = ({
           }
         />
 
-        <Input
+        <TimeSelector
           label={PageText.Contact.input.plannedDepartureTime.label}
-          type="time"
-          name="time"
-          value={state.context.plannedDepartureTime}
-          errorMessage={
-            state.context?.errorMessages['plannedDepartureTime']?.[0]
-          }
-          onChange={(e) =>
+          value={state.context.plannedDepartureTime || ''}
+          onChange={(time: string) =>
             send({
               type: 'ON_INPUT_CHANGE',
               inputName: 'plannedDepartureTime',
-              value: e.target.value,
+              value: time,
             })
           }
         />

diff --git a/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx b/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx
@@ -15,6 +15,7 @@ import {
   getLineOptions,
   getStopOptions,
   DateSelector,
+  TimeSelector,
 } from '../../components';
 
 type FeedbackFormProps = {
@@ -131,19 +132,14 @@ export const FeedbackForm = ({ state, send }: FeedbackFormProps) => {
           }
         />
 
-        <Input
+        <TimeSelector
           label={PageText.Contact.input.plannedDepartureTime.label}
-          type="time"
-          name="time"
-          value={state.context.plannedDepartureTime}
-          errorMessage={
-            state.context?.errorMessages['plannedDepartureTime']?.[0]
-          }
-          onChange={(e) =>
+          value={state.context.plannedDepartureTime || ''}
+          onChange={(time: string) =>
             send({
               type: 'ON_INPUT_CHANGE',
               inputName: 'plannedDepartureTime',
-              value: e.target.value,
+              value: time,
             })
           }
         />

diff --git a/src/page-modules/contact/travel-guarantee/forms/refundCarForm.tsx b/src/page-modules/contact/travel-guarantee/forms/refundCarForm.tsx
@@ -15,6 +15,7 @@ import {
   getLineOptions,
   getStopOptions,
   DateSelector,
+  TimeSelector,
 } from '../../components';
 
 type RefundCarFormProps = {
@@ -182,20 +183,14 @@ export const RefundCarForm = ({ state, send }: RefundCarFormProps) => {
             })
           }
         />
-
-        <Input
+        <TimeSelector
           label={PageText.Contact.input.plannedDepartureTime.label}
-          type="time"
-          name="time"
-          value={state.context.plannedDepartureTime}
-          errorMessage={
-            state.context?.errorMessages['plannedDepartureTime']?.[0]
-          }
-          onChange={(e) =>
+          value={state.context.plannedDepartureTime || ''}
+          onChange={(time: string) =>
             send({
               type: 'ON_INPUT_CHANGE',
               inputName: 'plannedDepartureTime',
-              value: e.target.value,
+              value: time,
             })
           }
         />

diff --git a/src/page-modules/contact/travel-guarantee/forms/refundTaxiForm.tsx b/src/page-modules/contact/travel-guarantee/forms/refundTaxiForm.tsx
@@ -16,6 +16,7 @@ import {
   getLineOptions,
   getStopOptions,
   DateSelector,
+  TimeSelector,
 } from '../../components';
 
 type RefundTaxiFormProps = {
@@ -169,19 +170,14 @@ export const RefundTaxiForm = ({ state, send }: RefundTaxiFormProps) => {
           }
         />
 
-        <Input
+        <TimeSelector
           label={PageText.Contact.input.plannedDepartureTime.label}
-          type="time"
-          name="time"
-          value={state.context.plannedDepartureTime}
-          errorMessage={
-            state.context?.errorMessages['plannedDepartureTime']?.[0]
-          }
-          onChange={(e) =>
+          value={state.context.plannedDepartureTime || ''}
+          onChange={(time: string) =>
             send({
               type: 'ON_INPUT_CHANGE',
               inputName: 'plannedDepartureTime',
-              value: e.target.value,
+              value: time,
             })
           }
         />