AUT-3779: Introduce mobile landing page

Phase 2 of the strategic app introduces a mobile specific landing
pages. This commit introduces the page, making use of a new constant
that holds the mappings between web and mobile templates.

src/app.constants.ts

@@ -295,3 +295,7 @@ const DYNATRACE_RUM_COOKIES = [
   "rxvt",
 ];
 export const ANALYTICS_COOKIES = [...GA_COOKIES, ...DYNATRACE_RUM_COOKIES];
+
+export const WEB_TO_MOBILE_TEMPLATE_MAPPINGS: Record<string, string> = {
+  "sign-in-or-create/index.njk": "sign-in-or-create/index-mobile.njk",
+};

src/components/sign-in-or-create/index-mobile.njk

@@ -0,0 +1,28 @@
+{% extends "common/layout/base.njk" %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{% set pageTitleName = 'mobileAppPages.signIn.title' | translate %}
+
+{% block content %}
+
+    <h1 class="govuk-heading-l govuk-!-margin-top-0 govuk-!-margin-bottom-3">{{ 'mobileAppPages.signIn.header' | translate }} </h1>
+
+    <p class="govuk-body">{{ 'mobileAppPages.signIn.paragraph' | translate }}</p>
+
+    <form action="/sign-in-or-create" method="post" novalidate="novalidate">
+
+        <input type="hidden" name="_csrf" value="{{ csrfToken }}" />
+        <input type="hidden" name="supportInternationalNumbers" value="{{ supportInternationalNumbers }}" />
+
+        {{ govukButton({
+            text: 'mobileAppPages.signIn.button' | translate,
+            classes: "govuk-button--primary",
+            attributes: {
+                "id": "sign-in-button"
+            }
+        }) }}
+
+    </form>
+
+    {{ga4OnPageLoad({ nonce: scriptNonce, statusCode: "200", englishPageTitle: pageTitleName, taxonomyLevel1: "authentication", taxonomyLevel2: "Home", contentId: "9cd55996-3f12-4e79-adf3-0ec3c4faf7ce", loggedInStatus: false, dynamic: true })}}
+{% endblock %}

src/components/sign-in-or-create/sign-in-or-create-controller.ts

@@ -1,6 +1,8 @@
 import { Request, Response } from "express";
 import { getNextPathAndUpdateJourney } from "../common/constants";
 import { USER_JOURNEY_EVENTS } from "../common/state-machine/state-machine";
+import { getChannelSpecificTemplate } from "../../utils/get-channel-specific-template";
+import { WEB_TO_MOBILE_TEMPLATE_MAPPINGS } from "../../app.constants";
 
 export async function signInOrCreateGet(
   req: Request,
@@ -12,7 +14,14 @@ export async function signInOrCreateGet(
   if (req.query.redirectPost) {
     return await signInOrCreatePost(req, res);
   }
-  res.render("sign-in-or-create/index.njk", {
+
+  const template = getChannelSpecificTemplate(
+    "sign-in-or-create/index.njk",
+    res.locals.strategicAppChannel,
+    WEB_TO_MOBILE_TEMPLATE_MAPPINGS
+  );
+
+  res.render(template, {
     serviceType: req.session.client.serviceType,
   });
 }

src/components/sign-in-or-create/tests/sign-in-or-create-controller.test.ts

@@ -31,6 +31,18 @@ describe("sign in or create controller", () => {
 
       expect(res.render).to.have.calledWith("sign-in-or-create/index.njk");
     });
+
+    describe("where the context is mobile", () => {
+      it("should render the mobile template", async () => {
+        res.locals.strategicAppChannel = true;
+
+        signInOrCreateGet(req as Request, res as Response);
+
+        expect(res.render).to.have.calledWith(
+          "sign-in-or-create/index-mobile.njk"
+        );
+      });
+    });
   });
   describe("signInOrCreatePost", () => {
     it("should redirect to enter email new create account", async () => {