feat: replace form for ordering travel card with link to webshop

src/page-modules/contact/ticketing/forms/travel-card/index.tsx

@@ -8,14 +8,14 @@ import {
 import { ticketingFormEvents } from '../../events';
 import { SectionCard, Radio } from '../../../components';
 import TravelCardQuestionForm from './travelCardQuestionForm';
-import OrderTravelCardForm from './orderTravelCardForm';
+import OrderTravelCard from './orderTravelCard';
 
-type TravelcardFormsProps = {
+type TravelCardFormsProps = {
   state: StateFrom<typeof ticketingStateMachine>;
   send: (event: typeof ticketingFormEvents) => void;
 };
 
-export const TravelCardForms = ({ state, send }: TravelcardFormsProps) => {
+export const TravelCardForms = ({ state, send }: TravelCardFormsProps) => {
   const { t } = useTranslation();
 
   return (
@@ -44,7 +44,7 @@ export const TravelCardForms = ({ state, send }: TravelcardFormsProps) => {
       </SectionCard>
 
       {state.matches({ editing: { travelCard: 'orderTravelCard' } }) && (
-        <OrderTravelCardForm state={state} send={send} />
+        <OrderTravelCard />
       )}
       {state.matches({ editing: { travelCard: 'travelCardQuestion' } }) && (
         <TravelCardQuestionForm state={state} send={send} />

src/page-modules/contact/ticketing/forms/travel-card/orderTravelCard.tsx

@@ -0,0 +1,45 @@
+import style from '../../../contact.module.css';
+import { PageText, TranslatedString, useTranslation } from '@atb/translations';
+import { Typo } from '@atb/components/typography';
+import { SectionCard } from '../../../components';
+import Link from 'next/link';
+
+export const OrderTravelCardForm = () => {
+  const { t } = useTranslation();
+
+  return (
+    <SectionCard
+      title={t(PageText.Contact.ticketing.travelCard.orderTravelCard.label)}
+    >
+      <ul className={style.rules__list}>
+        {PageText.Contact.ticketing.travelCard.orderTravelCard.detailsList.map(
+          (paragraph: TranslatedString, index: number) => (
+            <li key={`info-paragraph-${index}`}>
+              <Typo.p textType="body__primary">{t(paragraph)}</Typo.p>
+            </li>
+          ),
+        )}
+        <li>
+          {t(
+            PageText.Contact.ticketing.travelCard.orderTravelCard.detailWithUrl
+              .detail,
+          )}{' '}
+          <Link
+            href={t(
+              PageText.Contact.ticketing.travelCard.orderTravelCard
+                .detailWithUrl.href,
+            )}
+          >
+            {t(
+              PageText.Contact.ticketing.travelCard.orderTravelCard
+                .detailWithUrl.linkText,
+            )}
+          </Link>
+          .
+        </li>
+      </ul>
+    </SectionCard>
+  );
+};
+
+export default OrderTravelCardForm;

src/page-modules/contact/ticketing/index.tsx

@@ -14,6 +14,8 @@ import RefundForms from './forms/refund';
 const TicketingContent = () => {
   const { t } = useTranslation();
   const [state, send] = useMachine(ticketingStateMachine);
+  const displaySubmitButton =
+    state.context.formType && state.context.formType !== 'orderTravelCard';
 
   const onSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
@@ -61,7 +63,7 @@ const TicketingContent = () => {
         <RefundForms state={state} send={send} />
       )}
 
-      {state.context.formType && (
+      {displaySubmitButton && (
         <Button
           title={t(PageText.Contact.submit)}
           mode={'interactive_0--bordered'}

src/page-modules/contact/ticketing/ticketingStateMachine.ts

@@ -167,17 +167,6 @@ const setInputsToValidate = (context: TicketingContextType) => {
         phoneNumber,
       };
 
-    case FormType.OrderTravelCard:
-      return {
-        formType,
-        firstName,
-        lastName,
-        address,
-        postalCode,
-        city,
-        email,
-      };
-
     case FormType.WebshopTicketing:
       return { formType, orderId, question, ...(!customerNumber && { email }) };
 

src/translations/pages/contact.ts

@@ -547,23 +547,31 @@ export const Contact = {
 
       orderTravelCard: {
         label: _('Bestill reisekort', 'Order travel card', 'Bestill reisekort'),
-        info: [
+        detailsList: [
           _(
             'Et reisekort er et fysisk plastkort. På reisekortet kan du legge periodebilletter.',
             'A travel card is a physical plastic card. You can add period tickets to the travel card',
             'Eit reisekort er eit fysisk plastkort. På reisekortet kan du legge periodebillettar.',
           ),
           _(
-            'Fyll ut dette skjemaet hvis du vil bestille et reisekort og få det tilsendt. Merk at vi bare sender reisekort til adresser i Norge.',
-            'Fill in this form if you want to order a travel card and have it sent to you. Note that we only send travel cards to addresses in Norway.',
-            'Fyll ut dette skjemaet viss du vil bestille eit reisekort og få det tilsendt. Merk at vi berre sender reisekort til adresser i Noreg.',
-          ),
-          _(
-            'Du kan også få reisekort på bussen, hurtigbåten eller på en av trafikkterminalane. På de samme stedene og i nettbutikken kan du fylle på kortet med nye billetter.',
-            'You can also get a travel card on the bus, express boat or at one of the traffic terminals. At the same places and in the online shop, you can top up the card with new tickets.',
-            'Du kan også få reisekort på bussen, hurtigbåten eller på ein av trafikkterminalane. På dei same stadane og i nettbutikken kan du fylle på kortet med nye billettar.',
+            'Reisekort får du tak i hos sjåføren om bord i bussen, eller matrosen om bord i hurtigbåten. Det er også tilgjengelig på salgskontoret i Molde og Ålesund. De har tomme kort som er gratis ved utlevering.',
+            'Travel cards can be provided by the bus driver, or the sailor on board the express boat. They can also be obtained at sales offices in Molde and Ålesund. Blank cards are provided free of charge upon delivery.',
+            'Reisekort får du tak i hos sjåføren om bord i bussen, eller matrosen om bord i hurtigbåten. Det er også tilgjengeleg på salskontoret i Molde og Ålesund. Dei har tomme kort som er gratis ved utlevering.',
           ),
         ],
+        detailWithUrl: {
+          detail: _(
+            'Du trenger ikke kjøpe produktet hos sjåfør. Du kan ta med deg et kort og fylle på det produktet du vil i',
+            'You don’t need to purchase the product from the driver. You can take a card with you and top up the desired product later in the',
+            'Du treng ikkje kjøpe produktet hos sjåfør. Du kan ta med deg eit kort og fylle på det produktet du vil i',
+          ),
+          linkText: _('nettbutikken', 'webshop', 'nettbutikken'),
+          href: _(
+            'https://nettbutikk.frammr.no/',
+            'https://nettbutikk.frammr.no/',
+            'https://nettbutikk.frammr.no/',
+          ),
+        },
       },
       travelCardQuestion: {
         label: _(