From 0de7b6d8dcadb5b2be8051b21e71d8c448b70636 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Fri, 25 Aug 2023 17:18:10 +0200
Subject: [PATCH] feat(shared): Ported account/newsletter to new inputs

---
 .../org/docs/site/account/newsletter/en.md    |  5 +++
 .../shared/components/account/newsletter.mjs  | 38 ++++++++++++-------
 2 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 markdown/org/docs/site/account/newsletter/en.md

diff --git a/markdown/org/docs/site/account/newsletter/en.md b/markdown/org/docs/site/account/newsletter/en.md
new file mode 100644
index 00000000000..b772fa9d745
--- /dev/null
+++ b/markdown/org/docs/site/account/newsletter/en.md
@@ -0,0 +1,5 @@
+---
+title: Newsletter
+---
+
+This allows you to subscribe to the FreeSewing newsletter. Or not.
diff --git a/sites/shared/components/account/newsletter.mjs b/sites/shared/components/account/newsletter.mjs
index 3801c98f84c..c06026367ac 100644
--- a/sites/shared/components/account/newsletter.mjs
+++ b/sites/shared/components/account/newsletter.mjs
@@ -8,6 +8,9 @@ import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
 // Components
 import { BackToAccountButton, Choice, Icons, welcomeSteps } from './shared.mjs'
 import { ContinueButton } from 'shared/components/buttons/continue-button.mjs'
+import { ListInput } from 'shared/components/inputs.mjs'
+import { DynamicOrgDocs } from 'shared/components/dynamic-docs/org.mjs'
+import { OkIcon, NoIcon } from 'shared/components/icons.mjs'
 
 export const ns = ['account', 'status']
 
@@ -15,7 +18,7 @@ export const NewsletterSettings = ({ title = false, welcome = false }) => {
   // Hooks
   const { account, setAccount } = useAccount()
   const backend = useBackend()
-  const { t } = useTranslation(ns)
+  const { t, i18n } = useTranslation(ns)
   const { LoadingStatus, setLoadingStatus } = useLoadingStatus()
   // State
   const [selection, setSelection] = useState(account?.newsletter ? 'yes' : 'no')
@@ -42,19 +45,26 @@ export const NewsletterSettings = ({ title = false, welcome = false }) => {
   return (
     <div className="max-w-xl">
       <LoadingStatus />
-      {title ? <h1 className="text-4xl">{t('newsletterTitle')}</h1> : null}
-      {['yes', 'no'].map((val) => (
-        <Choice val={val} t={t} update={update} current={selection} bool key={val}>
-          <span className="block text-lg leading-5">
-            {selection === 1 && val === 2
-              ? t('showMore')
-              : t(val === 'yes' ? 'newsletterYes' : 'noThanks')}
-          </span>
-          <span className="block text-normal font-light normal-case pt-1 leading-5">
-            {t(val === 'yes' ? 'newsletterYesd' : 'newsletterNod')}
-          </span>
-        </Choice>
-      ))}
+      <ListInput
+        label={t('newsletterTitle')}
+        list={['yes', 'no'].map((val) => ({
+          val,
+          label: (
+            <div className="flex flex-row items-center w-full justify-between">
+              <span>{t(val === 'yes' ? 'newsletterYes' : 'noThanks')}</span>
+              {val === 'yes' ? (
+                <OkIcon className="w-8 h-8 text-success" stroke={4} />
+              ) : (
+                <NoIcon className="w-8 h-8 text-error" stroke={3} />
+              )}
+            </div>
+          ),
+          desc: t(val === 'yes' ? 'newsletterYesd' : 'newsletterNod'),
+        }))}
+        current={selection}
+        update={update}
+        docs={<DynamicOrgDocs language={i18n.language} path={`site/account/newsletter`} />}
+      />
       {welcome ? (
         <>
           <ContinueButton btnProps={{ href: nextHref }} link />