From 831963903aaa1c13b3bbab090a66daf066a207e8 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Fri, 25 Aug 2023 18:48:34 +0200
Subject: [PATCH] chore(org): Updates to welcome pages

---
 sites/org/pages/welcome/bio.mjs        | 13 ++++---------
 sites/org/pages/welcome/compare.mjs    | 13 ++++---------
 sites/org/pages/welcome/img.mjs        | 25 ++++++++-----------------
 sites/org/pages/welcome/index.mjs      | 14 +++++++++-----
 sites/org/pages/welcome/newsletter.mjs | 26 ++++++++------------------
 sites/org/pages/welcome/units.mjs      | 13 ++++---------
 sites/org/pages/welcome/username.mjs   | 25 ++++++++-----------------
 7 files changed, 45 insertions(+), 84 deletions(-)

diff --git a/sites/org/pages/welcome/bio.mjs b/sites/org/pages/welcome/bio.mjs
index e6a23a06d44..5e501e81bf9 100644
--- a/sites/org/pages/welcome/bio.mjs
+++ b/sites/org/pages/welcome/bio.mjs
@@ -6,6 +6,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { ns as bioNs } from 'shared/components/account/bio.mjs'
+import { WelcomeWrapper } from './index.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...bioNs, ...authNs, ...pageNs])]
@@ -14,10 +15,6 @@ const namespaces = [...new Set([...bioNs, ...authNs, ...pageNs])]
  * Some things should never generated as SSR
  * So for these, we run a dynamic import and disable SSR rendering
  */
-const DynamicAuthWrapper = dynamic(
-  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
-  { ssr: false }
-)
 const DynamicBio = dynamic(
   () => import('shared/components/account/bio.mjs').then((mod) => mod.BioSettings),
   { ssr: false }
@@ -31,11 +28,9 @@ const DynamicBio = dynamic(
  */
 const WelcomeBioPage = ({ page }) => (
   <PageWrapper {...page} layout={BareLayout} footer={false}>
-    <DynamicAuthWrapper>
-      <div className="m-auto max-w-lg text-center lg:mt-4 p-8">
-        <DynamicBio title welcome />
-      </div>
-    </DynamicAuthWrapper>
+    <WelcomeWrapper>
+      <DynamicBio title welcome />
+    </WelcomeWrapper>
   </PageWrapper>
 )
 
diff --git a/sites/org/pages/welcome/compare.mjs b/sites/org/pages/welcome/compare.mjs
index 7ee01d5f3fd..68d01964496 100644
--- a/sites/org/pages/welcome/compare.mjs
+++ b/sites/org/pages/welcome/compare.mjs
@@ -6,6 +6,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { ns as compareNs } from 'shared/components/account/compare.mjs'
+import { WelcomeWrapper } from './index.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...compareNs, ...authNs, ...pageNs])]
@@ -14,10 +15,6 @@ const namespaces = [...new Set([...compareNs, ...authNs, ...pageNs])]
  * Some things should never generated as SSR
  * So for these, we run a dynamic import and disable SSR rendering
  */
-const DynamicAuthWrapper = dynamic(
-  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
-  { ssr: false }
-)
 const DynamicCompare = dynamic(
   () => import('shared/components/account/compare.mjs').then((mod) => mod.CompareSettings),
   { ssr: false }
@@ -31,11 +28,9 @@ const DynamicCompare = dynamic(
  */
 const WelcomeComparePage = ({ page }) => (
   <PageWrapper {...page} layout={BareLayout} footer={false}>
-    <DynamicAuthWrapper>
-      <div className="m-auto max-w-lg text-center lg:mt-4 p-8">
-        <DynamicCompare title welcome />
-      </div>
-    </DynamicAuthWrapper>
+    <WelcomeWrapper>
+      <DynamicCompare title welcome />
+    </WelcomeWrapper>
   </PageWrapper>
 )
 
diff --git a/sites/org/pages/welcome/img.mjs b/sites/org/pages/welcome/img.mjs
index 1938bbfcbec..a7489cc6f62 100644
--- a/sites/org/pages/welcome/img.mjs
+++ b/sites/org/pages/welcome/img.mjs
@@ -8,6 +8,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { ns as imgNs } from 'shared/components/account/img.mjs'
+import { WelcomeWrapper } from './index.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...imgNs, ...authNs, ...pageNs])]
@@ -16,10 +17,6 @@ const namespaces = [...new Set([...imgNs, ...authNs, ...pageNs])]
  * Some things should never generated as SSR
  * So for these, we run a dynamic import and disable SSR rendering
  */
-const DynamicAuthWrapper = dynamic(
-  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
-  { ssr: false }
-)
 const DynamicImg = dynamic(
   () => import('shared/components/account/img.mjs').then((mod) => mod.ImgSettings),
   { ssr: false }
@@ -31,19 +28,13 @@ const DynamicImg = dynamic(
  * when path and locale come from static props (as here)
  * or set them manually.
  */
-const WelcomeImgPage = ({ page }) => {
-  const { t } = useTranslation(namespaces)
-
-  return (
-    <PageWrapper {...page} title={t('imgTitle')} layout={BareLayout} footer={false}>
-      <DynamicAuthWrapper>
-        <div className="m-auto max-w-lg text-center lg:mt-4 p-8">
-          <DynamicImg title welcome />
-        </div>
-      </DynamicAuthWrapper>
-    </PageWrapper>
-  )
-}
+const WelcomeImgPage = ({ page }) => (
+  <PageWrapper {...page} layout={BareLayout} footer={false}>
+    <WelcomeWrapper>
+      <DynamicImg title welcome />
+    </WelcomeWrapper>
+  </PageWrapper>
+)
 
 export default WelcomeImgPage
 
diff --git a/sites/org/pages/welcome/index.mjs b/sites/org/pages/welcome/index.mjs
index 068e4c0c9a4..1f393a6667f 100644
--- a/sites/org/pages/welcome/index.mjs
+++ b/sites/org/pages/welcome/index.mjs
@@ -23,6 +23,12 @@ const DynamicControl = dynamic(
   { ssr: false }
 )
 
+export const WelcomeWrapper = ({ children }) => (
+  <DynamicAuthWrapper>
+    <div className="m-auto max-w-2xl lg:mt-24 p-8">{children}</div>
+  </DynamicAuthWrapper>
+)
+
 /*
  * Each page MUST be wrapped in the PageWrapper component.
  * You also MUST spread props.page into this wrapper component
@@ -31,11 +37,9 @@ const DynamicControl = dynamic(
  */
 const WelcomePage = ({ page }) => (
   <PageWrapper {...page} layout={BareLayout} footer={false}>
-    <DynamicAuthWrapper>
-      <div className="m-auto max-w-lg text-center lg:mt-4 p-8">
-        <DynamicControl title welcome />
-      </div>
-    </DynamicAuthWrapper>
+    <WelcomeWrapper>
+      <DynamicControl title welcome />
+    </WelcomeWrapper>
   </PageWrapper>
 )
 
diff --git a/sites/org/pages/welcome/newsletter.mjs b/sites/org/pages/welcome/newsletter.mjs
index c84d67dc15c..cfa099585a7 100644
--- a/sites/org/pages/welcome/newsletter.mjs
+++ b/sites/org/pages/welcome/newsletter.mjs
@@ -8,6 +8,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { ns as newsletterNs } from 'shared/components/account/newsletter.mjs'
+import { WelcomeWrapper } from './index.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...newsletterNs, ...authNs, ...pageNs])]
@@ -16,11 +17,6 @@ const namespaces = [...new Set([...newsletterNs, ...authNs, ...pageNs])]
  * Some things should never generated as SSR
  * So for these, we run a dynamic import and disable SSR rendering
  */
-const DynamicAuthWrapper = dynamic(
-  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
-  { ssr: false }
-)
-
 const DynamicNewsletter = dynamic(
   () => import('shared/components/account/newsletter.mjs').then((mod) => mod.NewsletterSettings),
   { ssr: false }
@@ -32,19 +28,13 @@ const DynamicNewsletter = dynamic(
  * when path and locale come from static props (as here)
  * or set them manually.
  */
-const WelcomeNewsletterPage = ({ page }) => {
-  const { t } = useTranslation(namespaces)
-
-  return (
-    <PageWrapper {...page} title={t('title')} layout={BareLayout} footer={false}>
-      <DynamicAuthWrapper>
-        <div className="m-auto max-w-lg text-center lg:mt-4 p-8">
-          <DynamicNewsletter title welcome />
-        </div>
-      </DynamicAuthWrapper>
-    </PageWrapper>
-  )
-}
+const WelcomeNewsletterPage = ({ page }) => (
+  <PageWrapper {...page} layout={BareLayout} footer={false}>
+    <WelcomeWrapper>
+      <DynamicNewsletter title welcome />
+    </WelcomeWrapper>
+  </PageWrapper>
+)
 
 export default WelcomeNewsletterPage
 
diff --git a/sites/org/pages/welcome/units.mjs b/sites/org/pages/welcome/units.mjs
index 53aa2c38f62..a66f3828039 100644
--- a/sites/org/pages/welcome/units.mjs
+++ b/sites/org/pages/welcome/units.mjs
@@ -6,6 +6,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { ns as imperialNs } from 'shared/components/account/imperial.mjs'
+import { WelcomeWrapper } from './index.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...imperialNs, ...authNs, ...pageNs])]
@@ -14,10 +15,6 @@ const namespaces = [...new Set([...imperialNs, ...authNs, ...pageNs])]
  * Some things should never generated as SSR
  * So for these, we run a dynamic import and disable SSR rendering
  */
-const DynamicAuthWrapper = dynamic(
-  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
-  { ssr: false }
-)
 const DynamicImperial = dynamic(
   () => import('shared/components/account/imperial.mjs').then((mod) => mod.ImperialSettings),
   { ssr: false }
@@ -31,11 +28,9 @@ const DynamicImperial = dynamic(
  */
 const WelcomeUnitsPage = ({ page }) => (
   <PageWrapper {...page} layout={BareLayout} footer={false}>
-    <DynamicAuthWrapper>
-      <div className="m-auto max-w-lg text-center lg:mt-4 p-8">
-        <DynamicImperial title welcome />
-      </div>
-    </DynamicAuthWrapper>
+    <WelcomeWrapper>
+      <DynamicImperial title welcome />
+    </WelcomeWrapper>
   </PageWrapper>
 )
 
diff --git a/sites/org/pages/welcome/username.mjs b/sites/org/pages/welcome/username.mjs
index 10745df4fb4..5ba2f105a55 100644
--- a/sites/org/pages/welcome/username.mjs
+++ b/sites/org/pages/welcome/username.mjs
@@ -8,6 +8,7 @@ import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { BareLayout } from 'site/components/layouts/bare.mjs'
 import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
 import { ns as usernameNs } from 'shared/components/account/username.mjs'
+import { WelcomeWrapper } from './index.mjs'
 
 // Translation namespaces used on this page
 const namespaces = [...new Set([...usernameNs, ...authNs, ...pageNs])]
@@ -16,10 +17,6 @@ const namespaces = [...new Set([...usernameNs, ...authNs, ...pageNs])]
  * Some things should never generated as SSR
  * So for these, we run a dynamic import and disable SSR rendering
  */
-const DynamicAuthWrapper = dynamic(
-  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
-  { ssr: false }
-)
 const DynamicUsername = dynamic(
   () => import('shared/components/account/username.mjs').then((mod) => mod.UsernameSettings),
   { ssr: false }
@@ -31,19 +28,13 @@ const DynamicUsername = dynamic(
  * when path and locale come from static props (as here)
  * or set them manually.
  */
-const WelcomeUsernamePage = ({ page }) => {
-  const { t } = useTranslation(namespaces)
-
-  return (
-    <PageWrapper {...page} title={t('title')} layout={BareLayout} footer={false}>
-      <DynamicAuthWrapper>
-        <div className="m-auto max-w-lg text-center lg:mt-4 p-8">
-          <DynamicUsername title welcome />
-        </div>
-      </DynamicAuthWrapper>
-    </PageWrapper>
-  )
-}
+const WelcomeUsernamePage = ({ page }) => (
+  <PageWrapper {...page} layout={BareLayout} footer={false}>
+    <WelcomeWrapper>
+      <DynamicUsername title welcome />
+    </WelcomeWrapper>
+  </PageWrapper>
+)
 
 export default WelcomeUsernamePage