Add landing page before token exchange (#1255)

<!-- 
To link the branch/PR to a Jira issue either
1. (preferred) add the issue key to the name of your branch (e.g. GRW-123/fix/some-annoying-bug)
2. prefix your PR title with it

Also, if applicable, include whether this is a Fix, Feature or Chore.

Example PR title: GRW-123 / Feature / Awesome new thing
-->

## What?

Add a landing page before we do the token exchange.

## Why?

There has been issues with links that become invalid after being visited multiple times.

With this solution we can send out the link to the landing page, and the user can then click on the button to get to the token exchange.


**Ticket(s): []**
<!-- If there is a Jira issue, add the key (e.g. GRW-123) between the brackets, and a link to that issue will automatically be created. -->


<!-- If it makes sense, add screenshots and/or screen recordings below, with headlines and/or descriptions if needed. -->
<!--
## Screenshots / recordings 
-->

<!-- Finally, you can create a review app on Heroku to make it easier to review and/or get input from the design team before merging. -->
<!--
### [Review app]()
-->

src/client/pages/ExchangeToken/index.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react'
+import styled from '@emotion/styled'
+import { colorsV3 } from '@hedviginsurance/brand'
+import { useParams } from 'react-router-dom'
+import { TopBar } from 'components/TopBar'
+import { Page } from 'components/utils/Page'
+import { LanguagePicker } from 'components/LanguagePicker/LanguagePicker'
+import { Button } from 'components/buttons'
+import { useTextKeys } from 'utils/textKeys'
+
+export const ExchangeTokenPage = () => {
+  const textKeys = useTextKeys()
+  const params = useParams<{ locale: string }>()
+
+  const exchangeUrl = useMemo(() => {
+    return `/${params.locale}/new-member/exchange-auth-token${window.location.search}`
+  }, [params.locale])
+
+  return (
+    <Page>
+      <TopBar>
+        <LanguagePicker color="white" />
+      </TopBar>
+      <Wrapper>
+        <ButtonLink
+          href={exchangeUrl}
+          foreground={colorsV3.gray900}
+          background={colorsV3.purple500}
+        >
+          {textKeys.ONBOARDING_CONNECT_DD_CTA()}
+        </ButtonLink>
+      </Wrapper>
+    </Page>
+  )
+}
+
+const Wrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  min-height: 100vh;
+  background-color: ${colorsV3.gray900};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const ButtonLink = Button.withComponent('a')

src/routes.tsx

@@ -14,6 +14,7 @@ import { Landing } from './client/pages/Landing/Landing'
 import { SignLoading } from './client/pages/SignLoading'
 import { OfferPage } from './client/pages/Offer'
 import { CheckoutDetails } from './client/pages/Checkout/CheckoutDetails/CheckoutDetails'
+import { ExchangeTokenPage } from './client/pages/ExchangeToken/index'
 import { Checkout } from './client/pages/Checkout/CheckoutPayment'
 import { Confirmation } from './client/pages/Confirmation'
 import { LocalePath } from './client/components/utils/CurrentLocale'
@@ -252,6 +253,16 @@ export const routes: Route[] = [
       exact: true,
     },
   },
+  {
+    path: `${onboardingLocaleBaseRoute}/exchange-token`,
+    serverRouteData: {
+      titleTextKey: 'ONBOARDING_CONNECT_DD_PAGE_TITLE',
+    },
+    clientRouteData: {
+      Component: ExchangeTokenPage,
+      exact: true,
+    },
+  },
   {
     path: `${onboardingLocaleBaseRoute}/:name/:id?`,
     serverRouteData: {

src/server/serverEntry.tsx

@@ -114,7 +114,7 @@ router.post(
 )
 
 router.get(
-  localePathPattern + '/new-member/exchange-token',
+  localePathPattern + '/new-member/exchange-auth-token',
   exchangeTokenMiddleware,
 )