VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(shared): Ported account/newsletter to new inputs

Browse source
This commit is contained in:
joostdecock 2023-08-25 17:18:10 +02:00
parent cb531dcc62
commit 0de7b6d8dc
2 changed files with 29 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

5
markdown/org/docs/site/account/newsletter/en.md Normal file
View file

@ -0,0 +1,5 @@
---
title: Newsletter
---
This allows you to subscribe to the FreeSewing newsletter. Or not.

38
sites/shared/components/account/newsletter.mjs
View file

@ -8,6 +8,9 @@ import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
// Components // Components
import { BackToAccountButton, Choice, Icons, welcomeSteps } from './shared.mjs' import { BackToAccountButton, Choice, Icons, welcomeSteps } from './shared.mjs'
import { ContinueButton } from 'shared/components/buttons/continue-button.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'] export const ns = ['account', 'status']
@ -15,7 +18,7 @@ export const NewsletterSettings = ({ title = false, welcome = false }) => {
// Hooks // Hooks
const { account, setAccount } = useAccount() const { account, setAccount } = useAccount()
const backend = useBackend() const backend = useBackend()
const { t } = useTranslation(ns) const { t, i18n } = useTranslation(ns)
const { LoadingStatus, setLoadingStatus } = useLoadingStatus() const { LoadingStatus, setLoadingStatus } = useLoadingStatus()
// State // State
const [selection, setSelection] = useState(account?.newsletter ? 'yes' : 'no') const [selection, setSelection] = useState(account?.newsletter ? 'yes' : 'no')
@ -42,19 +45,26 @@ export const NewsletterSettings = ({ title = false, welcome = false }) => {
return ( return (
<div className="max-w-xl"> <div className="max-w-xl">
<LoadingStatus /> <LoadingStatus />
{title ? <h1 className="text-4xl">{t('newsletterTitle')}</h1> : null} <ListInput
{['yes', 'no'].map((val) => ( label={t('newsletterTitle')}
<Choice val={val} t={t} update={update} current={selection} bool key={val}> list={['yes', 'no'].map((val) => ({
<span className="block text-lg leading-5"> val,
{selection === 1 && val === 2 label: (
? t('showMore') <div className="flex flex-row items-center w-full justify-between">
: t(val === 'yes' ? 'newsletterYes' : 'noThanks')} <span>{t(val === 'yes' ? 'newsletterYes' : 'noThanks')}</span>
</span> {val === 'yes' ? (
<span className="block text-normal font-light normal-case pt-1 leading-5"> <OkIcon className="w-8 h-8 text-success" stroke={4} />
{t(val === 'yes' ? 'newsletterYesd' : 'newsletterNod')} ) : (
</span> <NoIcon className="w-8 h-8 text-error" stroke={3} />
</Choice> )}
))} </div>
),
desc: t(val === 'yes' ? 'newsletterYesd' : 'newsletterNod'),
}))}
current={selection}
update={update}
docs={<DynamicOrgDocs language={i18n.language} path={`site/account/newsletter`} />}
/>
{welcome ? ( {welcome ? (
<> <>
<ContinueButton btnProps={{ href: nextHref }} link /> <ContinueButton btnProps={{ href: nextHref }} link />