Removed success page for minimal signup form

no issue Shows the success state in the button now.
2025-01-06 22:40:14 -05:00 · 2023-06-09 10:15:03 +02:00 · 2023-06-09 10:15:03 +02:00 · f4a822e7e0
commit f4a822e7e0
parent c507ea9600
42 changed files with 101 additions and 32 deletions
--- a/ghost/i18n/locales/af/signup-form.json
+++ b/ghost/i18n/locales/af/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "Kyk nou in jou e-pos!",
    "Please enter a valid email address": "Vul 'n geldige e-posadres in",
    "Something went wrong, please try again.": "Iets is fout, probeer asseblief weer.",
--- a/ghost/i18n/locales/bg/signup-form.json
+++ b/ghost/i18n/locales/bg/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/ca/signup-form.json
+++ b/ghost/i18n/locales/ca/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/context.json
+++ b/ghost/i18n/locales/context.json
@ -48,6 +48,7 @@
    "Email newsletter": "Title for the email newsletter settings",
    "Email preference updated.": "A confirmation message when email settings have been changed",
    "Email preferences": "A label for email settings",
+    "Email sent": "",
    "Emails": "A label for a list of emails",
    "Emails disabled": "Title for a message in portal telling members that they are not receiving emails, due to repeated delivery failures to their address",
    "Ends {{offerEndDate}}": "Label for an offer which expires",
--- a/ghost/i18n/locales/cs/signup-form.json
+++ b/ghost/i18n/locales/cs/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/da/signup-form.json
+++ b/ghost/i18n/locales/da/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/de/signup-form.json
+++ b/ghost/i18n/locales/de/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/en/signup-form.json
+++ b/ghost/i18n/locales/en/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/eo/signup-form.json
+++ b/ghost/i18n/locales/eo/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/es/signup-form.json
+++ b/ghost/i18n/locales/es/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "Ahora, ¡revisa tu email!",
    "Please enter a valid email address": "Por favor, ingresa una dirección de email válida",
    "Something went wrong, please try again.": "Algo salió mal, por favor intenta nuevamente.",
--- a/ghost/i18n/locales/fi/signup-form.json
+++ b/ghost/i18n/locales/fi/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/fr/signup-form.json
+++ b/ghost/i18n/locales/fr/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "Maintenant, vérifiez votre e-mail!",
    "Please enter a valid email address": "S'il vous plaît, mettez une adresse e-mail valide",
    "Something went wrong, please try again.": "Un problème est survenu, veuillez réessayer.",
--- a/ghost/i18n/locales/hu/signup-form.json
+++ b/ghost/i18n/locales/hu/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/id/signup-form.json
+++ b/ghost/i18n/locales/id/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "Sekarang periksa email Anda!",
    "Please enter a valid email address": "Harap masukkan alamat email yang valid",
    "Something went wrong, please try again.": "Ada kesalahan, harap coba lagi.",
--- a/ghost/i18n/locales/it/signup-form.json
+++ b/ghost/i18n/locales/it/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "Ora controlla la tua email!",
    "Please enter a valid email address": "Inserisci un indirizzo email valido",
    "Something went wrong, please try again.": "Qualcosa è andato storto, si prega di riprovare.",
--- a/ghost/i18n/locales/ko/signup-form.json
+++ b/ghost/i18n/locales/ko/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/mn/signup-form.json
+++ b/ghost/i18n/locales/mn/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/nl/signup-form.json
+++ b/ghost/i18n/locales/nl/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "E-mail verzonden",
    "Now check your email!": "Bekijk nu jouw e-mails!",
    "Please enter a valid email address": "Vul een geldig e-mailadres in",
    "Something went wrong, please try again.": "Er ginet is mis, probeer het opnieuw.",
--- a/ghost/i18n/locales/no/signup-form.json
+++ b/ghost/i18n/locales/no/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/pl/signup-form.json
+++ b/ghost/i18n/locales/pl/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/pt-BR/signup-form.json
+++ b/ghost/i18n/locales/pt-BR/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/pt/signup-form.json
+++ b/ghost/i18n/locales/pt/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/ro/signup-form.json
+++ b/ghost/i18n/locales/ro/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/ru/signup-form.json
+++ b/ghost/i18n/locales/ru/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/si/signup-form.json
+++ b/ghost/i18n/locales/si/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/sl/signup-form.json
+++ b/ghost/i18n/locales/sl/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/sq/signup-form.json
+++ b/ghost/i18n/locales/sq/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/sr/signup-form.json
+++ b/ghost/i18n/locales/sr/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/sv/signup-form.json
+++ b/ghost/i18n/locales/sv/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "Titta i din e-post nu!",
    "Please enter a valid email address": "Skriv in en giltig e-postadress",
    "Something went wrong, please try again.": "Något gick fel. Försök igen.",
--- a/ghost/i18n/locales/tr/signup-form.json
+++ b/ghost/i18n/locales/tr/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "Şimdi e-postanı kontrol et!",
    "Please enter a valid email address": "Lütfen geçerli bir e-posta adresi girin",
    "Something went wrong, please try again.": "Bir şeyler ters gitti lütfen tekrar deneyin.",
--- a/ghost/i18n/locales/uk/signup-form.json
+++ b/ghost/i18n/locales/uk/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/uz/signup-form.json
+++ b/ghost/i18n/locales/uz/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/vi/signup-form.json
+++ b/ghost/i18n/locales/vi/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/i18n/locales/zh-Hant/signup-form.json
+++ b/ghost/i18n/locales/zh-Hant/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "請檢查你的 email 收件夾",
    "Please enter a valid email address": "請輸入正確的 email 地址",
    "Something went wrong, please try again.": "錯誤發生，請再試一次",
--- a/ghost/i18n/locales/zh/signup-form.json
+++ b/ghost/i18n/locales/zh/signup-form.json
@ -1,4 +1,5 @@
 {
+    "Email sent": "",
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
--- a/ghost/signup-form/preview.html
+++ b/ghost/signup-form/preview.html
@ -94,6 +94,18 @@
                async
            ></script>
        </div>
+
+        <div style="min-height: 58px">
+            <script
+                src="http://localhost:6174/signup-form.min.js"
+                data-button-color="#ff0095"
+                data-site="%VITE_SITE_URL%"
+                data-label-1="Signup form"
+                data-label-2="Minimal"
+                data-locale="nl-BE"
+                async
+            ></script>
+        </div>
    </div>
  </body>
 </html>
--- a/ghost/signup-form/src/components/pages/FormPage.tsx
+++ b/ghost/signup-form/src/components/pages/FormPage.tsx
@ -7,7 +7,9 @@ import {useAppContext} from '../../AppContext';
 export const FormPage: React.FC = () => {
    const [error, setError] = React.useState('');
    const [loading, setLoading] = React.useState(false);
+    const [success, setSuccess] = React.useState(false);
    const {api, setPage, options, t} = useAppContext();
+    const minimal = isMinimal(options);

    const submit = async ({email}: { email: string }) => {
        if (!isValidEmail(email)) {
@ -20,9 +22,16 @@ export const FormPage: React.FC = () => {

        try {
            await api.sendMagicLink({email, labels: options.labels});
-            setPage('SuccessPage', {
-                email
-            });
+
+            if (minimal) {
+                // Don't go to the success page, but show the success state in the form
+                setSuccess(true);
+                setLoading(false);
+            } else {
+                setPage('SuccessPage', {
+                    email
+                });
+            }
        } catch (_) {
            setLoading(false);
            setError(t(`Something went wrong, please try again.`));
@ -36,8 +45,9 @@ export const FormPage: React.FC = () => {
        description={options.description}
        error={error}
        icon={options.icon}
-        isMinimal={isMinimal(options)}
+        isMinimal={minimal}
        loading={loading}
+        success={success}
        textColor={options.textColor}
        title={options.title}
        onSubmit={submit}
--- a/ghost/signup-form/src/components/pages/FormView.stories.ts
+++ b/ghost/signup-form/src/components/pages/FormView.stories.ts
@ -23,6 +23,7 @@ export const Full: Story = {
        loading: false,
        error: '',
        isMinimal: false,
+        success: false,
        onSubmit: () => {}
    }
 };
@ -39,6 +40,7 @@ export const FullDark: Story = {
        loading: false,
        error: '',
        isMinimal: false,
+        success: false,
        onSubmit: () => {}
    }
 };
@ -50,6 +52,33 @@ export const Minimal: Story = {
        loading: false,
        error: '',
        isMinimal: true,
+        success: false,
+        onSubmit: () => {}
+    },
+    tags: ['transparency-grid']
+};
+
+export const MinimalLoading: Story = {
+    args: {
+        buttonColor: '#ff0095',
+        buttonTextColor: '#ffffff',
+        loading: true,
+        error: '',
+        isMinimal: true,
+        success: false,
+        onSubmit: () => {}
+    },
+    tags: ['transparency-grid']
+};
+
+export const MinimalSucceeded: Story = {
+    args: {
+        buttonColor: '#ff0095',
+        buttonTextColor: '#ffffff',
+        loading: false,
+        error: '',
+        isMinimal: true,
+        success: true,
        onSubmit: () => {}
    },
    tags: ['transparency-grid']
--- a/ghost/signup-form/src/components/pages/FormView.tsx
+++ b/ghost/signup-form/src/components/pages/FormView.tsx
@ -13,7 +13,7 @@ export const FormView: React.FC<FormProps & {
    if (isMinimal) {
        return (
            <>
-                <Form error={error} {...formProps} />
+                <Form error={error} isMinimal={isMinimal} {...formProps} />
                {error && <p className='text-red-500' data-testid="error-message">{error}</p>}
            </>
        );
@ -40,12 +40,14 @@ export const FormView: React.FC<FormProps & {
 type FormProps = {
    buttonColor?: string
    buttonTextColor?: string
+    isMinimal?: boolean
    loading: boolean
+    success: boolean
    error?: string
    onSubmit: (values: { email: string }) => void
 }

-const Form: React.FC<FormProps> = ({loading, error, buttonColor, buttonTextColor, onSubmit}) => {
+const Form: React.FC<FormProps> = ({isMinimal, loading, success, error, buttonColor, buttonTextColor, onSubmit}) => {
    const [email, setEmail] = React.useState('');
    const {t} = useAppContext();

@ -60,21 +62,22 @@ const Form: React.FC<FormProps> = ({loading, error, buttonColor, buttonTextColor
                <input
                    className={`flex-1 rounded-[.5rem] border bg-white p-2 text-grey-900 transition hover:border-grey-400 focus-visible:border-grey-500 focus-visible:outline-none disabled:bg-white sm:px-3 sm:py-[1rem] ${error ? '!border-red-500' : 'border-grey-300'}`}
                    data-testid="input"
-                    disabled={loading}
+                    disabled={loading || success}
                    placeholder='jamie@example.com'
                    type="text"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                />
                <button
-                    className='absolute inset-y-0 right-[.2rem] my-auto h-7 rounded-[.3rem] px-2 font-medium text-white sm:right-[.3rem] sm:h-[3rem] sm:px-3'
+                    className='absolute inset-y-0 right-[.2rem] my-auto grid h-7 items-center justify-items-center rounded-[.3rem] px-2 font-medium text-white sm:right-[.3rem] sm:h-[3rem] sm:px-3'
                    data-testid="button"
-                    disabled={loading}
+                    disabled={loading || success}
                    style={{backgroundColor: buttonColor, color: buttonTextColor}}
                    type='submit'
                >
-                    <span className={`${loading ? 'invisible' : 'visible'}`}>{t('Subscribe')}</span>
-                    {loading && <span className='absolute inset-0 flex items-center justify-center'><LoadingIcon /></span>}
+                    <span className={`col-start-1 row-start-1 ${loading || success ? 'invisible' : 'visible'}`}>{t('Subscribe')}</span>
+                    {isMinimal && <span className={`col-start-1 row-start-1 ${loading || !success ? 'invisible' : 'visible'}`}>{t('Email sent')}</span>}
+                    {loading && <span className='inset-0 col-start-1 row-start-1 flex items-center justify-center'><LoadingIcon /></span>}
                </button>
            </form>
        </>
--- a/ghost/signup-form/src/components/pages/SuccessPage.tsx
+++ b/ghost/signup-form/src/components/pages/SuccessPage.tsx
@ -1,6 +1,5 @@
 import React from 'react';
 import {SuccessView} from './SuccessView';
-import {isMinimal} from '../../utils/helpers';
 import {useAppContext} from '../../AppContext';

 type SuccessPageProps = {
@ -14,7 +13,6 @@ export const SuccessPage: React.FC<SuccessPageProps> = ({email}) => {
        backgroundColor={options.backgroundColor}
        email={email}
        icon={options.icon}
-        isMinimal={isMinimal(options)}
        textColor={options.textColor}
        title={options.title} />;
 };
--- a/ghost/signup-form/src/components/pages/SuccessView.stories.ts
+++ b/ghost/signup-form/src/components/pages/SuccessView.stories.ts
@ -14,7 +14,6 @@ type Story = StoryObj<typeof meta>;
 export const Full: Story = {
    args: {
        email: 'test@example.com',
-        isMinimal: false,
        backgroundColor: '#eeeeee',
        textColor: '#000000'
    }
@ -23,16 +22,7 @@ export const Full: Story = {
 export const FullDark: Story = {
    args: {
        email: 'test@example.com',
-        isMinimal: false,
        backgroundColor: '#333333',
        textColor: '#ffffff'
    }
 };
-
-export const Minimal: Story = {
-    args: {
-        email: 'test@example.com',
-        isMinimal: true
-    },
-    tags: ['transparency-grid']
-};
--- a/ghost/signup-form/src/components/pages/SuccessView.tsx
+++ b/ghost/signup-form/src/components/pages/SuccessView.tsx
@ -3,20 +3,12 @@ import {useAppContext} from '../../AppContext';

 export const SuccessView: React.FC<{
    email: string;
-    isMinimal: boolean;
    title?: string;
    icon?: string;
    backgroundColor?: string;
    textColor?: string;
-}> = ({isMinimal, title, icon, backgroundColor, textColor}) => {
+}> = ({title, icon, backgroundColor, textColor}) => {
    const {t} = useAppContext();
-    if (isMinimal) {
-        return (
-            <div>
-                <h1 className="text-xl font-bold">{t(`Now check your email!`)}</h1>
-            </div>
-        );
-    }
    return (
        <div
            className='flex h-[100vh] flex-col items-center justify-center bg-grey-200 px-4 sm:px-6 md:px-10'