feat: postpone payment sub page (#340)

* Saving progress

* Change from using hasTags instead of matches and simplify display of optional input description property.

* Remove unused toggle function and useState.

* Remove unused css class.

* Remove unused imports.

* Remove unused css class.

* Fix after feedback.

* Update bodywit context values.

* Update export and import logic.

* Extend validation logic to enable specifying multiple valid conditions. Also, move validation logic for travelGuarantee to seperate file.

* Update translation strings.

* Update state machine and form.

* Replace old validator.

* Remove description parameter from Input component. Will solve optinal description of input comonent in  a seperate pr.

* remove console.log

* Fix minor typo, name imrovment and move travelGuaranteeFieldValidator into the dir special-field-validators to make the distinction between validation of common form fields and special cases more clear.

* Update import/export of RefundForm and shouldShowContactPage.

* update url to endpoint.

* Update src/translations/pages/contact.ts

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>

---------

Co-authored-by: Morten Nordseth <43166974+mortennordseth@users.noreply.github.com>

src/layouts/shared/page-header.tsx

@@ -5,9 +5,9 @@ import { useDarkMode } from '@atb/modules/theme';
 import Image from 'next/image';
 import { getOrgData } from '@atb/modules/org-data';
 import { MonoIcon } from '@atb/components/icon';
-import { shouldShowContactPage } from '@atb/page-modules/contact/utils';
 import { andIf } from '@atb/utils/css';
 import { useRouter } from 'next/router';
+import { shouldShowContactPage } from '@atb/page-modules/contact';
 
 export default function PageHeader() {
   const { t } = useTranslation();

src/page-modules/contact/index.ts

@@ -5,5 +5,7 @@ export {
   type TicketControlPageLayoutProps,
 } from './layouts';
 
+export { PostponePaymentForm } from './ticket-control';
 export { RefundForm } from './travel-guarantee';
 export { type Line } from './server/journey-planner/validators';
+export { shouldShowContactPage } from './utils';

src/page-modules/contact/ticket-control/index.ts

@@ -0,0 +1 @@
+export { PostponePaymentForm } from './postpone-paymnet';

src/page-modules/contact/ticket-control/postpone-paymnet/index.tsx

@@ -0,0 +1,122 @@
+import { FormEventHandler, useState } from 'react';
+import { Button } from '@atb/components/button';
+import { Input } from '../../components/input';
+import { SectionCard } from '../../components/section-card';
+import { PageText, useTranslation } from '@atb/translations';
+import { useMachine } from '@xstate/react';
+import { postponePaymentForm } from './postponePaymentFormMachine';
+
+export const PostponePaymentForm = () => {
+  const { t } = useTranslation();
+  const [state, send] = useMachine(postponePaymentForm);
+
+  // Local state to force re-render to display errors.
+  const [forceRerender, setForceRerender] = useState(false);
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    send({ type: 'VALIDATE' });
+
+    // Force a re-render with dummy state.
+    if (Object.keys(state.context.errorMessages).length > 0) {
+      setForceRerender(!forceRerender);
+    }
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <SectionCard title={PageText.Contact.ticketControl.postponePayment.title}>
+        <p>{t(PageText.Contact.ticketControl.postponePayment.info)}</p>
+
+        <Input
+          label={PageText.Contact.inputFields.feeNumber.label}
+          type="text"
+          name="feeNumber"
+          value={state.context.feeNumber}
+          errorMessage={
+            state.context?.errorMessages['feeNumber']?.[0] || undefined
+          }
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'feeNumber',
+              value: e.target.value,
+            })
+          }
+        />
+
+        <Input
+          label={PageText.Contact.inputFields.invoiceNumber.label}
+          type="text"
+          name="invoiceNumber"
+          value={state.context.invoiceNumber}
+          errorMessage={
+            state.context?.errorMessages['invoiceNumber']?.[0] || undefined
+          }
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'invoiceNumber',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+      <SectionCard title={PageText.Contact.aboutYouInfo.title}>
+        <Input
+          label={PageText.Contact.inputFields.firstName.label}
+          type="text"
+          name="firstName"
+          value={state.context.firstName}
+          errorMessage={
+            state.context?.errorMessages['firstName']?.[0] || undefined
+          }
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'firstName',
+              value: e.target.value,
+            })
+          }
+        />
+        <Input
+          label={PageText.Contact.inputFields.lastName.label}
+          type="text"
+          name="lastName"
+          value={state.context.lastName}
+          errorMessage={
+            state.context?.errorMessages['lastName']?.[0] || undefined
+          }
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'lastName',
+              value: e.target.value,
+            })
+          }
+        />
+        <Input
+          label={PageText.Contact.inputFields.email.label}
+          type="email"
+          name="email"
+          value={state.context.email}
+          errorMessage={state.context?.errorMessages['email']?.[0] || undefined}
+          onChange={(e) =>
+            send({
+              type: 'UPDATE_FIELD',
+              field: 'email',
+              value: e.target.value,
+            })
+          }
+        />
+      </SectionCard>
+      <Button
+        title={t(PageText.Contact.submit)}
+        mode={'interactive_0--bordered'}
+        buttonProps={{ type: 'submit' }}
+      />
+    </form>
+  );
+};
+
+export default PostponePaymentForm;