From bbf3ddb6f4d738919ca74358fa66b743748155f4 Mon Sep 17 00:00:00 2001 From: Jonas Brunvoll Larsson Date: Tue, 5 Aug 2025 13:56:32 +0200 Subject: [PATCH] Extend FileInput with IconLabel and include optional required indicator. Lastly, pass errorMessage as string instead of TranslatedString. --- .../contact/components/form/file-input.tsx | 25 +++++++++++++------ .../means-of-transport/forms/delayForm.tsx | 2 +- .../means-of-transport/forms/driverForm.tsx | 2 +- .../means-of-transport/forms/injuryForm.tsx | 2 +- .../forms/serviceOfferingForm.tsx | 2 +- .../means-of-transport/forms/stopForm.tsx | 2 +- .../forms/transportationForm.tsx | 2 +- .../refundCarForm.tsx | 2 +- .../refundTaxiForm.tsx | 6 ++--- .../forms/refund-ticket/appTicketRefund.tsx | 2 +- .../forms/refund-ticket/otherTicketRefund.tsx | 2 +- .../ticket-control/forms/feeComplaintForm.tsx | 2 +- .../ticket-control/forms/feedbackForm.tsx | 2 +- .../ticketing/forms/app/appAccountForm.tsx | 2 +- .../ticketing/forms/app/appTicketingForm.tsx | 2 +- .../forms/app/appTravelSuggestionForm.tsx | 2 +- .../forms/priceAndTicketTypesForm.tsx | 2 +- .../travel-card/travelCardQuestionForm.tsx | 2 +- .../forms/webshop/webshopAccountForm.tsx | 2 +- .../forms/webshop/webshopTicketingForm.tsx | 2 +- 20 files changed, 39 insertions(+), 28 deletions(-) diff --git a/src/page-modules/contact/components/form/file-input.tsx b/src/page-modules/contact/components/form/file-input.tsx index 477a07249..2fe02e483 100644 --- a/src/page-modules/contact/components/form/file-input.tsx +++ b/src/page-modules/contact/components/form/file-input.tsx @@ -1,16 +1,19 @@ -import { ChangeEvent, DragEvent, useId, useState } from 'react'; +import { ChangeEvent, DragEvent, useState } from 'react'; import style from './form.module.css'; import { Typo } from '@atb/components/typography'; import { Button } from '@atb/components/button'; import { MonoIcon } from '@atb/components/icon'; -import { PageText, TranslatedString, useTranslation } from '@atb/translations'; +import { PageText, useTranslation } from '@atb/translations'; import { useTheme } from '@atb/modules/theme'; import { ErrorMessage } from '@atb/components/error-message'; +import FormComponentLabel from './form-component-label'; export type FileInputProps = { id: string; - label: string; - errorMessage?: TranslatedString; + iconLabel: string; + label?: string; + isRequired?: boolean; + errorMessage?: string; onChange?: (files: File[]) => void; } & Omit; @@ -19,7 +22,9 @@ const MAX_ALLOWED_FILE_SIZE = 10 * 1024 * 1024; // 10MB export default function FileInput({ id, onChange, + iconLabel, label, + isRequired = false, name, errorMessage, }: FileInputProps) { @@ -93,7 +98,13 @@ export default function FileInput({ multiple accept="image/*,.pdf,.doc,docx,.txt" /> - + {label && ( + + )} {files.length > 0 && ( @@ -125,7 +136,7 @@ export default function FileInput({ ))} )} - {errorMessage && } + {errorMessage && } ); } diff --git a/src/page-modules/contact/means-of-transport/forms/delayForm.tsx b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx index bbe72321d..302e6786f 100644 --- a/src/page-modules/contact/means-of-transport/forms/delayForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/delayForm.tsx @@ -188,7 +188,7 @@ export const DelayForm = ({ state, send }: DelayFormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/means-of-transport/forms/driverForm.tsx b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx index d8a7b598c..4a674a577 100644 --- a/src/page-modules/contact/means-of-transport/forms/driverForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/driverForm.tsx @@ -188,7 +188,7 @@ export const DriverForm = ({ state, send }: DriverFormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx index 37a4154a8..28ab20455 100644 --- a/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/injuryForm.tsx @@ -187,7 +187,7 @@ export const InjuryForm = ({ state, send }: InjuryFormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx b/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx index ae52a94ea..abc3d18e5 100644 --- a/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/serviceOfferingForm.tsx @@ -118,7 +118,7 @@ export const ServiceOfferingForm = ({ fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/means-of-transport/forms/stopForm.tsx b/src/page-modules/contact/means-of-transport/forms/stopForm.tsx index 2bdc2680c..4400aaeac 100644 --- a/src/page-modules/contact/means-of-transport/forms/stopForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/stopForm.tsx @@ -147,7 +147,7 @@ export const StopForm = ({ state, send }: StopFormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx index 4e2bf2445..cdae47312 100644 --- a/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx +++ b/src/page-modules/contact/means-of-transport/forms/transportationForm.tsx @@ -195,7 +195,7 @@ export const TransportationForm = ({ fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundCarForm.tsx b/src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundCarForm.tsx index 0bf455476..499718ecb 100644 --- a/src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundCarForm.tsx +++ b/src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundCarForm.tsx @@ -258,7 +258,7 @@ export const RefundCarForm = ({ state, send }: RefundCarFormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundTaxiForm.tsx b/src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundTaxiForm.tsx index 02d84c306..5f7f463e6 100644 --- a/src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundTaxiForm.tsx +++ b/src/page-modules/contact/refund/forms/refund-and-travel-guarantee/refundTaxiForm.tsx @@ -37,7 +37,7 @@ export const RefundTaxiForm = ({ state, send }: RefundTaxiFormProps) => { { send({ @@ -46,7 +46,7 @@ export const RefundTaxiForm = ({ state, send }: RefundTaxiFormProps) => { value: files, }); }} - errorMessage={state.context?.errorMessages['attachments']?.[0]} + errorMessage={t(state.context?.errorMessages['attachments']?.[0])} /> { } fileInputProps={{ id: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), name: 'attachments', onChange: (files) => { send({ diff --git a/src/page-modules/contact/refund/forms/refund-ticket/appTicketRefund.tsx b/src/page-modules/contact/refund/forms/refund-ticket/appTicketRefund.tsx index 4dc1076a6..a301e223f 100644 --- a/src/page-modules/contact/refund/forms/refund-ticket/appTicketRefund.tsx +++ b/src/page-modules/contact/refund/forms/refund-ticket/appTicketRefund.tsx @@ -106,7 +106,7 @@ export const AppTicketRefund = ({ state, send }: AppTicketRefundProps) => { } fileInputProps={{ id: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), name: 'attachments', onChange: (files) => { send({ diff --git a/src/page-modules/contact/refund/forms/refund-ticket/otherTicketRefund.tsx b/src/page-modules/contact/refund/forms/refund-ticket/otherTicketRefund.tsx index e2c35abe2..b4fa89b3e 100644 --- a/src/page-modules/contact/refund/forms/refund-ticket/otherTicketRefund.tsx +++ b/src/page-modules/contact/refund/forms/refund-ticket/otherTicketRefund.tsx @@ -187,7 +187,7 @@ const RefundSection = ({ state, send }: RefundSectionProps) => { { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx b/src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx index 403850336..9adbd21e5 100644 --- a/src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx +++ b/src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx @@ -244,7 +244,7 @@ const FormContent = ({ state, send }: FormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx b/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx index 8e9be09f8..ed15d3185 100644 --- a/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx +++ b/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx @@ -167,7 +167,7 @@ export const FeedbackForm = ({ state, send }: FeedbackFormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.feedback.attachment), + iconLabel: t(PageText.Contact.input.feedback.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticketing/forms/app/appAccountForm.tsx b/src/page-modules/contact/ticketing/forms/app/appAccountForm.tsx index fc18d14d8..812f145ab 100644 --- a/src/page-modules/contact/ticketing/forms/app/appAccountForm.tsx +++ b/src/page-modules/contact/ticketing/forms/app/appAccountForm.tsx @@ -33,7 +33,7 @@ export const AppAccountForm = ({ state, send }: AppAccountFormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.question.attachment), + iconLabel: t(PageText.Contact.input.question.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticketing/forms/app/appTicketingForm.tsx b/src/page-modules/contact/ticketing/forms/app/appTicketingForm.tsx index e32705857..94aab94cd 100644 --- a/src/page-modules/contact/ticketing/forms/app/appTicketingForm.tsx +++ b/src/page-modules/contact/ticketing/forms/app/appTicketingForm.tsx @@ -59,7 +59,7 @@ export const AppTicketingForm = ({ state, send }: AppTicketingFormProps) => { fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.question.attachment), + iconLabel: t(PageText.Contact.input.question.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticketing/forms/app/appTravelSuggestionForm.tsx b/src/page-modules/contact/ticketing/forms/app/appTravelSuggestionForm.tsx index b02944859..eb68e7876 100644 --- a/src/page-modules/contact/ticketing/forms/app/appTravelSuggestionForm.tsx +++ b/src/page-modules/contact/ticketing/forms/app/appTravelSuggestionForm.tsx @@ -36,7 +36,7 @@ export const AppTravelSuggestionForm = ({ fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.question.attachment), + iconLabel: t(PageText.Contact.input.question.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticketing/forms/priceAndTicketTypesForm.tsx b/src/page-modules/contact/ticketing/forms/priceAndTicketTypesForm.tsx index cb3a3059a..4c51cb1c1 100644 --- a/src/page-modules/contact/ticketing/forms/priceAndTicketTypesForm.tsx +++ b/src/page-modules/contact/ticketing/forms/priceAndTicketTypesForm.tsx @@ -36,7 +36,7 @@ export const PriceAndTicketTypesForm = ({ fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.question.attachment), + iconLabel: t(PageText.Contact.input.question.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticketing/forms/travel-card/travelCardQuestionForm.tsx b/src/page-modules/contact/ticketing/forms/travel-card/travelCardQuestionForm.tsx index 6b2030e51..419cdf6fd 100644 --- a/src/page-modules/contact/ticketing/forms/travel-card/travelCardQuestionForm.tsx +++ b/src/page-modules/contact/ticketing/forms/travel-card/travelCardQuestionForm.tsx @@ -65,7 +65,7 @@ export const TravelCardQuestionForm = ({ fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.question.attachment), + iconLabel: t(PageText.Contact.input.question.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticketing/forms/webshop/webshopAccountForm.tsx b/src/page-modules/contact/ticketing/forms/webshop/webshopAccountForm.tsx index cbc3b3c77..4729283d6 100644 --- a/src/page-modules/contact/ticketing/forms/webshop/webshopAccountForm.tsx +++ b/src/page-modules/contact/ticketing/forms/webshop/webshopAccountForm.tsx @@ -36,7 +36,7 @@ export const WebshopAccountForm = ({ fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.question.attachment), + iconLabel: t(PageText.Contact.input.question.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE', diff --git a/src/page-modules/contact/ticketing/forms/webshop/webshopTicketingForm.tsx b/src/page-modules/contact/ticketing/forms/webshop/webshopTicketingForm.tsx index 173460eac..67411b9ef 100644 --- a/src/page-modules/contact/ticketing/forms/webshop/webshopTicketingForm.tsx +++ b/src/page-modules/contact/ticketing/forms/webshop/webshopTicketingForm.tsx @@ -64,7 +64,7 @@ export const WebshopTicketingForm = ({ fileInputProps={{ id: 'attachments', name: 'attachments', - label: t(PageText.Contact.input.question.attachment), + iconLabel: t(PageText.Contact.input.question.attachment), onChange: (files) => { send({ type: 'ON_INPUT_CHANGE',