feat: autocomplete help for the ticket-control form (#360)

AtB-AS · Sep 26, 2024 · ece1d1e · ece1d1e
1 parent ff4ded1
commit ece1d1e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx b/src/page-modules/contact/ticket-control/forms/feeComplaintForm.tsx
@@ -167,7 +167,7 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
                     PageText.Contact.inputFields.ticketStorage.app
                       .appPhoneNumber.label
                   }
-                  type="text"
+                  type="tel"
                   name="appPhoneNumber"
                   value={state.context.appPhoneNumber || ''}
                   errorMessage={
@@ -209,7 +209,7 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
                   PageText.Contact.inputFields.ticketStorage.travelCardNumber
                     .label
                 }
-                type="text"
+                type="number"
                 name="travelCardNumber"
                 value={state.context.travelCardNumber || ''}
                 errorMessage={
@@ -258,6 +258,7 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
             <Input
               label={PageText.Contact.inputFields.firstName.label}
               type="text"
+              autoComplete="given-name additional-name"
               name="firstName"
               value={state.context.firstName || ''}
               errorMessage={state.context?.errorMessages['firstName']?.[0]}
@@ -273,6 +274,7 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
             <Input
               label={PageText.Contact.inputFields.lastName.label}
               type="text"
+              autoComplete="family-name"
               name="lastName"
               value={state.context.lastName || ''}
               errorMessage={state.context?.errorMessages['lastName']?.[0]}
@@ -287,6 +289,7 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
             <Input
               label={PageText.Contact.inputFields.address.label}
               type="text"
+              autoComplete="street-address"
               name="address"
               value={state.context.address || ''}
               errorMessage={state.context?.errorMessages['address']?.[0]}
@@ -301,6 +304,7 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
             <Input
               label={PageText.Contact.inputFields.postalCode.label}
               type="number"
+              autoComplete="postal-code"
               name="postalCode"
               value={state.context.postalCode || ''}
               errorMessage={state.context?.errorMessages['postalCode']?.[0]}
@@ -329,6 +333,7 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
             <Input
               label={PageText.Contact.inputFields.email.label}
               type="email"
+              autoComplete="email"
               name="email"
               value={state.context.email || ''}
               errorMessage={state.context?.errorMessages['email']?.[0]}
@@ -360,7 +365,7 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
                 label={
                   PageText.Contact.inputFields.bankAccountNumber.notForeignLabel
                 }
-                type="text"
+                type="number"
                 name="bankAccountNumber"
                 value={state.context.bankAccountNumber || ''}
                 errorMessage={
@@ -392,8 +397,8 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
               <div>
                 <Input
                   label={PageText.Contact.inputFields.bankAccountNumber.IBAN}
-                  type="text"
-                  name="bankAccountNumber"
+                  type="number"
+                  name="IBAN"
                   value={state.context.IBAN || ''}
                   onChange={(e) =>
                     send({
@@ -406,8 +411,8 @@ export const FeeComplaintForm = ({ state, send }: FeeComplaintFormProps) => {
 
                 <Input
                   label={PageText.Contact.inputFields.bankAccountNumber.SWIFT}
-                  type="text"
-                  name="bankAccountNumber"
+                  type="number"
+                  name="SWIFT"
                   value={state.context.SWIFT || ''}
                   onChange={(e) =>
                     send({

diff --git a/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx b/src/page-modules/contact/ticket-control/forms/feedbackForm.tsx
@@ -185,6 +185,7 @@ export const FeedbackForm = ({ state, send }: FeedbackFormProps) => {
         <Input
           label={PageText.Contact.inputFields.firstName.label}
           type="text"
+          autoComplete="given-name additonal-name"
           name="firstName"
           value={state.context.firstName || ''}
           errorMessage={
@@ -201,6 +202,7 @@ export const FeedbackForm = ({ state, send }: FeedbackFormProps) => {
         <Input
           label={PageText.Contact.inputFields.lastName.label}
           type="text"
+          autoComplete="family-name"
           name="lastName"
           value={state.context.lastName || ''}
           errorMessage={

diff --git a/src/page-modules/contact/ticket-control/forms/postponePayment.tsx b/src/page-modules/contact/ticket-control/forms/postponePayment.tsx
@@ -59,6 +59,7 @@ export const PostponePaymentForm = ({
         <Input
           label={PageText.Contact.inputFields.firstName.label}
           type="text"
+          autoComplete="given-name additional-name"
           name="firstName"
           value={state.context.firstName || ''}
           errorMessage={state.context?.errorMessages['firstName']?.[0]}
@@ -73,6 +74,7 @@ export const PostponePaymentForm = ({
         <Input
           label={PageText.Contact.inputFields.lastName.label}
           type="text"
+          autoComplete="family-name"
           name="lastName"
           value={state.context.lastName || ''}
           errorMessage={state.context?.errorMessages['lastName']?.[0]}