Skip to content

Commit

Permalink
Start using Date and Time Selector.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonasbrunvoll
jonasbrunvoll committed Nov 15, 2024
1 parent 9df1f43 commit 34b2684
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 49 deletions.
10 changes: 8 additions & 2 deletions src/page-modules/contact/group-travel/group-travel-state-machine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { Line } from '../server/journey-planner/validators';
export type GroupTravelContextType = {
travelType: 'bus' | 'boat' | null;
formData: {
dateOfTravel: string;
dateOfTravel?: string;
line: Line;
fromStop: Line['quays'][0];
departureTime: string;
departureTime?: string;
toStop: Line['quays'][0];

returnLine?: Line;
Expand Down Expand Up @@ -57,6 +57,12 @@ type GroupTravelEvents =
| { type: 'SUBMIT' };

const getFormDataErrors = (formData: GroupTravelContextType['formData']) => {
if (!formData) {
return Object.fromEntries(
Object.keys(defaultErrors).map((key) => [key, true]),
) as GroupTravelContextType['errors'];
}

const errors: GroupTravelContextType['errors'] = defaultErrors;

Object.keys(errors).forEach((key) => {
Expand Down
88 changes: 41 additions & 47 deletions src/page-modules/contact/group-travel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import {
SearchableSelect,
getLineOptions,
getStopOptions,
DateSelector,
TimeSelector,
} from '../components';

export default function GroupTravelContent() {
Expand Down Expand Up @@ -107,17 +109,13 @@ export default function GroupTravelContent() {
.title,
)}
>
<Input
label={t(
<DateSelector
label={
PageText.Contact.groupTravel.travelTypeBus.form
.travelInformation.dateOfTravel.title,
)}
type="date"
name="date"
value={formData.dateOfTravel}
onChange={(e) =>
handleInputChange('dateOfTravel', e.target.value)
.travelInformation.dateOfTravel.title
}
value={formData?.dateOfTravel}
onChange={(date) => handleInputChange('dateOfTravel', date)}
errorMessage={
errors.dateOfTravel
? PageText.Contact.input.date.errorMessages.empty
Expand All @@ -130,7 +128,7 @@ export default function GroupTravelContent() {
PageText.Contact.groupTravel.travelTypeBus.form
.travelInformation.line.title,
)}
value={formData.line}
value={formData?.line}
onChange={(value: Line | undefined) => {
if (!value) return;
handleInputChange('line', value);
Expand All @@ -149,31 +147,28 @@ export default function GroupTravelContent() {
PageText.Contact.groupTravel.travelTypeBus.form
.travelInformation.fromStop.title,
)}
value={formData.fromStop}
isDisabled={!formData.line}
value={formData?.fromStop}
isDisabled={!formData?.line}
onChange={(value) => {
if (!value) return;
handleInputChange('fromStop', value);
}}
options={getStopOptions(getQuaysByLine(formData.line?.id ?? ''))}
options={getStopOptions(getQuaysByLine(formData?.line?.id ?? ''))}
placeholder={t(PageText.Contact.input.fromStop.optionLabel)}
error={
errors.fromStop
? t(PageText.Contact.input.fromStop.errorMessages.empty)
: undefined
}
/>
<Input
label={t(

<TimeSelector
label={
PageText.Contact.groupTravel.travelTypeBus.form
.travelInformation.departureTime.title,
)}
type="time"
name="time"
value={formData.departureTime}
onChange={(e) =>
handleInputChange('departureTime', e.target.value)
.travelInformation.departureTime.title
}
value={formData?.departureTime}
onChange={(time) => handleInputChange('departureTime', time)}
errorMessage={
errors.departureTime
? PageText.Contact.input.plannedDepartureTime.errorMessages
Expand All @@ -187,14 +182,14 @@ export default function GroupTravelContent() {
PageText.Contact.groupTravel.travelTypeBus.form
.travelInformation.toStop.title,
)}
value={formData.toStop}
isDisabled={!formData.line}
value={formData?.toStop}
isDisabled={!formData?.line}
onChange={(value) => {
if (!value) return;
handleInputChange('toStop', value);
}}
placeholder={t(PageText.Contact.input.toStop.optionLabel)}
options={getStopOptions(getQuaysByLine(formData.line?.id ?? ''))}
options={getStopOptions(getQuaysByLine(formData?.line?.id ?? ''))}
error={
errors.toStop
? t(PageText.Contact.input.toStop.errorMessages.empty)
Expand All @@ -214,7 +209,7 @@ export default function GroupTravelContent() {
PageText.Contact.groupTravel.travelTypeBus.form.travelReturn
.line.title,
)}
value={formData.returnLine}
value={formData?.returnLine}
onChange={(value: Line | undefined) => {
if (!value) return;
handleInputChange('returnLine', value);
Expand All @@ -228,25 +223,24 @@ export default function GroupTravelContent() {
PageText.Contact.groupTravel.travelTypeBus.form.travelReturn
.fromStop.title,
)}
value={formData.returnFromStop}
isDisabled={!formData.returnLine}
value={formData?.returnFromStop}
isDisabled={!formData?.returnLine}
onChange={(value) => {
if (!value) return;
handleInputChange('returnFromStop', value);
}}
options={getStopOptions(getQuaysByLine(formData.line?.id ?? ''))}
options={getStopOptions(getQuaysByLine(formData?.line?.id ?? ''))}
placeholder={t(PageText.Contact.input.fromStop.optionLabel)}
/>
<Input
label={t(

<TimeSelector
label={
PageText.Contact.groupTravel.travelTypeBus.form.travelReturn
.departureTime.title,
)}
type="time"
name="time"
value={formData.returnDepartureTime}
onChange={(e) =>
handleInputChange('returnDepartureTime', e.target.value)
.departureTime.title
}
value={formData?.returnDepartureTime}
onChange={(time) =>
handleInputChange('returnDepartureTime', time)
}
/>

Expand All @@ -255,14 +249,14 @@ export default function GroupTravelContent() {
PageText.Contact.groupTravel.travelTypeBus.form.travelReturn
.toStop.title,
)}
value={formData.returnToStop}
isDisabled={!formData.returnLine}
value={formData?.returnToStop}
isDisabled={!formData?.returnLine}
onChange={(value) => {
if (!value) return;
handleInputChange('returnToStop', value);
}}
placeholder={t(PageText.Contact.input.toStop.optionLabel)}
options={getStopOptions(getQuaysByLine(formData.line?.id ?? ''))}
options={getStopOptions(getQuaysByLine(formData?.line?.id ?? ''))}
/>
</SectionCard>

Expand All @@ -279,7 +273,7 @@ export default function GroupTravelContent() {
)}
type="number"
name="groupSize"
value={formData.groupSize}
value={formData?.groupSize}
onChange={(e) => handleInputChange('groupSize', e.target.value)}
errorMessage={
errors.groupSize
Expand All @@ -295,7 +289,7 @@ export default function GroupTravelContent() {
)}
</Typo.p>
<Textarea
value={formData.groupInfo}
value={formData?.groupInfo}
onChange={(e) => handleInputChange('groupInfo', e.target.value)}
error={
errors.groupInfo
Expand All @@ -313,7 +307,7 @@ export default function GroupTravelContent() {
)}
type="text"
name="firstName"
value={formData.firstName}
value={formData?.firstName}
onChange={(e) => handleInputChange('firstName', e.target.value)}
errorMessage={
errors.firstName
Expand All @@ -329,7 +323,7 @@ export default function GroupTravelContent() {
)}
type="text"
name="lastName"
value={formData.lastName}
value={formData?.lastName}
onChange={(e) => handleInputChange('lastName', e.target.value)}
errorMessage={
errors.lastName
Expand All @@ -345,7 +339,7 @@ export default function GroupTravelContent() {
)}
type="tel"
name="responsiblePersonPhone"
value={formData.phoneNumber}
value={formData?.phoneNumber}
onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
errorMessage={
errors.phoneNumber
Expand All @@ -361,7 +355,7 @@ export default function GroupTravelContent() {
)}
type="email"
name="responsiblePersonEmail"
value={formData.email}
value={formData?.email}
onChange={(e) => handleInputChange('email', e.target.value)}
errorMessage={
errors.email
Expand Down

0 comments on commit 34b2684

Please sign in to comment.