feat: add page with link to form for retrieving residual value on tra…

…vel cards (#474) * Add page for residual value on the travel card. * Update src/translations/pages/contact.ts Co-authored-by: Mathias Oterhals Myklebust <[email protected]> * Update src/translations/pages/contact.ts Co-authored-by: Mathias Oterhals Myklebust <[email protected]> * Update src/translations/pages/contact.ts Co-authored-by: Mathias Oterhals Myklebust <[email protected]> * Update src/translations/pages/contact.ts Co-authored-by: Mathias Oterhals Myklebust <[email protected]> --------- Co-authored-by: Mathias Oterhals Myklebust <[email protected]>
AtB-AS · Jan 15, 2025 · 53c5513 · 53c5513
1 parent 07126ba
commit 53c5513
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 2 deletions.
diff --git a/src/page-modules/contact/refund/forms/residualValueOnTravelCard/index.tsx b/src/page-modules/contact/refund/forms/residualValueOnTravelCard/index.tsx
@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import { Typo } from '@atb/components/typography';
+import { PageText, useTranslation } from '@atb/translations';
+import { SectionCard } from '@atb/page-modules/contact/components';
+
+export const ResidualValueOnTravelCard = ({}) => {
+  const { t } = useTranslation();
+  return (
+    <SectionCard
+      title={t(PageText.Contact.refund.residualValueOnTravelCard.title)}
+    >
+      <Typo.p textType="body__primary">
+        <Link
+          href={t(PageText.Contact.refund.residualValueOnTravelCard.link.href)}
+        >
+          {t(PageText.Contact.refund.residualValueOnTravelCard.link.text)}
+        </Link>
+      </Typo.p>
+
+      <Typo.p textType="body__primary">
+        {t(
+          PageText.Contact.refund.residualValueOnTravelCard
+            .monthlyPayoutDetails,
+        )}
+      </Typo.p>
+
+      <div>
+        <Typo.p textType="body__primary--bold">
+          {t(
+            PageText.Contact.refund.residualValueOnTravelCard
+              .automatedProcessNotice.note,
+          )}
+        </Typo.p>
+        <Typo.p textType="body__primary">
+          {t(
+            PageText.Contact.refund.residualValueOnTravelCard
+              .automatedProcessNotice.text,
+          )}
+        </Typo.p>
+      </div>
+    </SectionCard>
+  );
+};
diff --git a/src/page-modules/contact/refund/index.tsx b/src/page-modules/contact/refund/index.tsx
@@ -7,10 +7,14 @@ import style from '../contact.module.css';
 import { SectionCard, Radio } from '../components';
 import RefundAndTravelGuaranteeForms from './forms/refund-and-travel-guarantee';
 import RefundTicketForms from './forms/refund-ticket';
+import { ResidualValueOnTravelCard } from './forms/residualValueOnTravelCard';
 
 const RefundContent = () => {
   const { t } = useTranslation();
   const [state, send] = useMachine(refundStateMachine);
+  const displaySubmitButton =
+    state.context.formType &&
+    state.context.formType !== 'residualValueOnTravelCard';
 
   const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
@@ -46,7 +50,11 @@ const RefundContent = () => {
         <RefundAndTravelGuaranteeForms state={state} send={send} />
       )}
 
-      {state.context.formType && (
+      {state.matches({ editing: 'residualValueOnTravelCard' }) && (
+        <ResidualValueOnTravelCard />
+      )}
+
+      {displaySubmitButton && (
         <Button
           title={t(PageText.Contact.submit)}
           mode={'interactive_0--bordered'}

diff --git a/src/page-modules/contact/refund/refundFormMachine.ts b/src/page-modules/contact/refund/refundFormMachine.ts
@@ -14,6 +14,7 @@ import { RefundFormEvents } from './events';
 export enum FormCategory {
   RefundOfTicket = 'refundOfTicket',
   RefundAndTravelGuarantee = 'refundAndTravelGuarantee',
+  ResidualValueOnTravelCard = 'residualValueOnTravelCard',
 }
 
 export enum RefundTicketForm {
@@ -30,6 +31,7 @@ export enum FormType {
   RefundCar = 'refundCar',
   AppTicketRefund = 'appTicketRefund',
   OtherTicketRefund = 'otherTicketRefund',
+  ResidualValueOnTravelCard = 'residualValueOnTravelCard',
 }
 
 type SubmitInput = {
@@ -370,6 +372,12 @@ export const refundStateMachine = setup({
             event.formCategory === FormCategory.RefundAndTravelGuarantee,
           target: `#${FormCategory.RefundAndTravelGuarantee}`,
         },
+        {
+          guard: ({ event }) =>
+            event.type === 'SELECT_FORM_CATEGORY' &&
+            event.formCategory === FormCategory.ResidualValueOnTravelCard,
+          target: `#${FormCategory.ResidualValueOnTravelCard}`,
+        },
       ],
     },
     refundTicketFormHandler: {
@@ -460,6 +468,12 @@ export const refundStateMachine = setup({
             },
           },
         },
+        residualValueOnTravelCard: {
+          id: 'residualValueOnTravelCard',
+          entry: assign({
+            formType: () => FormType.ResidualValueOnTravelCard,
+          }),
+        },
         history: {
           type: 'history',
           history: 'deep',

diff --git a/src/translations/pages/contact.ts b/src/translations/pages/contact.ts
@@ -213,6 +213,46 @@ const ContactInternal = {
       },
     },
 
+    residualValueOnTravelCard: {
+      description: _(
+        'Restverdi på reisekort (reisepenger)',
+        'Residual value on travel card (travel allowance)',
+        'Restverdi på reisekort (reisepengar)',
+      ),
+
+      title: _(
+        'Søk refusjon av restverdien på et reisekort',
+        'Apply for a refund of the residual value on a travel card',
+        'Søk refusjon av restverdien på eit reisekort',
+      ),
+
+      link: {
+        text: _(
+          'Skjema for refusjon av restverdien på et reisekort',
+          'Form for refund of residual value on a travel card',
+          'Skjema for refusjon av restverdien på eit reisekort',
+        ),
+        href: _(
+          'https://forms.office.com/Pages/ResponsePage.aspx?id=5-wyud-clE20wRUlbkPH6qGF2mFbrapOg9lnALAiJk9UMkROS0dORUdaTTZURzJHNFNSSVhVTzE4Ti4u',
+          'https://forms.office.com/Pages/ResponsePage.aspx?id=5-wyud-clE20wRUlbkPH6qGF2mFbrapOg9lnALAiJk9UMkROS0dORUdaTTZURzJHNFNSSVhVTzE4Ti4u',
+          'https://forms.office.com/Pages/ResponsePage.aspx?id=5-wyud-clE20wRUlbkPH6qGF2mFbrapOg9lnALAiJk9UMkROS0dORUdaTTZURzJHNFNSSVhVTzE4Ti4u',
+        ),
+      },
+      monthlyPayoutDetails: _(
+        'Restverdien blir betalt ut i slutten av hver måned (med forbehold). Hvis du har flere reisekort du vil ha refundert, må du sende inn ett skjema per reisekort.',
+        'The residual value is paid out at the end of each month (with reservations). If you have multiple travel cards that you want refunded, you must submit one form per travel card.',
+        'Restverdien blir betalt ut i slutten av kvar månad (med atterhald). Viss du har fleire reisekort du vil ha refundert, må du sende inn eitt skjema per reisekort.',
+      ),
+      automatedProcessNotice: {
+        note: _('Merk!', 'Note!', 'Merk!'),
+        text: _(
+          'Dette skjemaet gjelder bare for refusjon av restverdi på reisekort. Det er en automatisert prosess som bare fungerer for denne typen refusjon.',
+          'This form only applies to refunds of residual value on travel cards. It is an automated process that only works for this type of refund.',
+          'Dette skjemaet gjeld berre for refusjon av restverdi på reisekort. Det er ein automatisert prosess som berre fungerar for denne typen refusjon.',
+        ),
+      },
+    },
+
     agreement: {
       title: _(
         'Refusjon og reisegaranti',
@@ -1369,7 +1409,7 @@ const ContactInternal = {
         },
         {
           id: 'framSenior',
-          name: _('FRAM HONNØR', 'FRAM HONNØR', 'FRAM HONNØR'),
+          name: _('FRAM Honnør', 'FRAM Honnør', 'FRAM Honnør'),
         },
       ] as TicketType[],
       errorMessages: {