wip(getting-started): Refactor GettingStarted page and add title

AppQuality · Dec 29, 2023 · 8873c0b · 8873c0b
1 parent d22888a
commit 8873c0b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 35 deletions.
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -254,7 +254,6 @@
     "Other": "Non-conforming"
   },
   "Generic error": "Generic error",
-  "Getting Started": "Getting Started",
   "Great job!": "Great job!",
   "Great, next month you'll be {{level}}, give your best and conquer {{nextLevel}}": {
     "__RANKING_PROGRESS_MESSAGE_OVER_MAX:70": "Great, you're going to be {{level}} in the next month!<br></br>Now try your best and reach {{nextLevel}}!"
@@ -713,6 +712,7 @@
     "BUGFORM_UPLOAD_PROGRESS": "{{num}} uploaded",
     "BUGFORM_UPLOAD_PROGRESS_plural": "{{num}} uploaded"
   },
+  "Getting Started": "Getting Started",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_INVALID MAX: 20": "VAT registred or more than € 5,000 gross / year with occasional services",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_NON_ITALIAN MAX: 20": "other (not Italian)",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_WITHHOLDING MAX: 20": "less than € 5,000 gross / year with occasional services",

diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json
@@ -254,7 +254,6 @@
     "Other": "No binario"
   },
   "Generic error": "Error genérico",
-  "Getting Started": "Empezando",
   "Great job!": "¡Buen Trabajo!",
   "Great, next month you'll be {{level}}, give your best and conquer {{nextLevel}}": {
     "__RANKING_PROGRESS_MESSAGE_OVER_MAX:70": "Genial, el próximo mes serás {{level}}!<br></br>Da lo mejor de ti y llega al nivel {{nextLevel}}"
@@ -713,6 +712,7 @@
     "BUGFORM_UPLOAD_PROGRESS": "{{num}} subido",
     "BUGFORM_UPLOAD_PROGRESS_plural": "{{num}} subidos"
   },
+  "Getting Started": "Empezando",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_INVALID MAX: 20": "IVA registrado o más de 5.000 brutos € / año con servicios ocasionales",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_NON_ITALIAN MAX: 20": "otro (no italiano)",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_WITHHOLDING MAX: 20": "menos de 5.000 brutos € / año con servicios ocasionales",

diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json
@@ -254,7 +254,6 @@
     "Other": "Non binario"
   },
   "Generic error": "Errore generico",
-  "Getting Started": "Iniziare",
   "Great job!": "Ottimo lavoro!",
   "Great, next month you'll be {{level}}, give your best and conquer {{nextLevel}}": {
     "__RANKING_PROGRESS_MESSAGE_OVER_MAX:70": "Grande, il prossimo mese sarai {{level}}!<br></br>Dai il tuo meglio e conquista {{nextLevel}}!"
@@ -713,6 +712,7 @@
     "BUGFORM_UPLOAD_PROGRESS": "{{num}} caricato",
     "BUGFORM_UPLOAD_PROGRESS_plural": "{{num}} caricati"
   },
+  "Getting Started": "Iniziare",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_INVALID MAX: 20": "partita IVA o più di € 5,000 lordi / anno con prestazioni occasionali",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_NON_ITALIAN MAX: 20": "estero",
   "__WALLET_MODAL-REQUEST_FISCAL-TYPE_WITHHOLDING MAX: 20": "meno di € 5.000 lordi / anno con prestazioni occasionali",

diff --git a/src/pages/GettingStarted/index.tsx b/src/pages/GettingStarted/index.tsx
@@ -4,45 +4,38 @@ import {
   Card,
   Container,
   DatepickerGlobalStyle,
-  PageTitle,
+  Title,
 } from "@appquality/appquality-design-system";
 import { useTranslation } from "react-i18next";
-import GoogleTagManager from "src/features/GoogleTagManager";
 import { LangMenu } from "src/features/LangMenu";
-import NotLoggedOnly from "src/features/NotLoggedOnly";
 import { useLocalizeRoute } from "src/hooks/useLocalizedRoute";
 import { SignupMailSocial } from "./SignupMailSocial";
+import { PageTemplate } from "src/features/PageTemplate";
 
 export default function GettingStarted() {
   const { t } = useTranslation();
   const redirectUrl = useLocalizeRoute("my-dashboard");
   return (
-    <GoogleTagManager title={t("Getting Started")}>
-      <NotLoggedOnly redirect={{ url: useLocalizeRoute("my-dashboard") }}>
-        <DatepickerGlobalStyle />
-        <Container className="aq-pb-3">
-          <LangMenu
-            className="aq-mt-3"
-            itLink="/it/getting-started/"
-            esLink="/es/getting-started/"
-            enLink="/getting-started/"
-          />
-          <BSGrid>
-            <BSCol size="col-12">
-              <PageTitle size="regular" as="h2">
-                {t("Become an AppQuality Tester")}
-              </PageTitle>
-            </BSCol>
-          </BSGrid>
-          <BSGrid>
-            <BSCol size="col-lg-9 col-xxl-8">
-              <Card>
-                <SignupMailSocial redirectUrl={redirectUrl} />
-              </Card>
-            </BSCol>
-          </BSGrid>
-        </Container>
-      </NotLoggedOnly>
-    </GoogleTagManager>
+    <PageTemplate route="getting-started">
+      <DatepickerGlobalStyle />
+      <Container className="aq-pb-3">
+        <LangMenu
+          className="aq-mt-3"
+          itLink="/it/getting-started/"
+          esLink="/es/getting-started/"
+          enLink="/getting-started/"
+        />
+        <Title size="l" as={"h1"}>
+          {t("Become an AppQuality Tester")}
+        </Title>
+        <BSGrid>
+          <BSCol size="col-lg-9 col-xxl-8">
+            <Card>
+              <SignupMailSocial redirectUrl={redirectUrl} />
+            </Card>
+          </BSCol>
+        </BSGrid>
+      </Container>
+    </PageTemplate>
   );
 }
diff --git a/tests/e2e/getting-started/getting-started.spec.ts b/tests/e2e/getting-started/getting-started.spec.ts
@@ -1,7 +1,6 @@
-import { test, expect } from "@playwright/test";
+import { test, expect } from "../../fixtures/I18n";
 import {
   GettingStarted,
-  confirmationUrl,
   gettingStartedUrl,
   signupUrl,
 } from "../../fixtures/GettingStarted";
@@ -26,6 +25,16 @@ test.describe("if the user is logged out", () => {
 });
 
 test.describe("The getting started page", () => {
+  test.beforeEach(async ({ page }) => {
+    gettingStarted = new GettingStarted(page);
+    await gettingStarted.loggedOut();
+    await gettingStarted.visitSignupChoicePage();
+  });
+  test(`should display a title`, async ({ page, i18n }) => {
+    await expect(
+      page.getByRole("heading", { name: i18n.t("Become an AppQuality Tester") })
+    ).toBeVisible();
+  });
   test(`should display a navigation to change language`, async ({}) => {});
   test(`should display a button to signup with facebook`, async ({}) => {});
   test(`if the user click to facebook login is redirected to facebook login page`, async ({}) => {});