Added locale data option to signup form script

refs https://github.com/TryGhost/Team/issues/3307
2025-02-10 23:36:14 -05:00 · 2023-06-02 14:29:04 +02:00 · 2023-06-02 14:29:04 +02:00 · 258dc2f8f2
commit 258dc2f8f2
parent 82b56c319e
42 changed files with 76 additions and 11 deletions
--- a/ghost/admin/app/components/modals/settings/signup-form-embed.js
+++ b/ghost/admin/app/components/modals/settings/signup-form-embed.js
@ -79,7 +79,8 @@ export default class SignupFormEmbedModal extends Component {
        const options = {
            site: siteUrl,
            'button-color': this.settings.accentColor,
-            'button-text-color': textColorForBackgroundColor(this.settings.accentColor).hex()
+            'button-text-color': textColorForBackgroundColor(this.settings.accentColor).hex(),
+            locale: this.settings.locale
        };

        for (const [i, label] of this.labels.entries()) {
--- a/ghost/i18n/locales/af/signup-form.json
+++ b/ghost/i18n/locales/af/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "Nou kyk na u e-pos!",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/bg/signup-form.json
+++ b/ghost/i18n/locales/bg/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/ca/signup-form.json
+++ b/ghost/i18n/locales/ca/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/cs/signup-form.json
+++ b/ghost/i18n/locales/cs/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/da/signup-form.json
+++ b/ghost/i18n/locales/da/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/de/signup-form.json
+++ b/ghost/i18n/locales/de/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/en/signup-form.json
+++ b/ghost/i18n/locales/en/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/eo/signup-form.json
+++ b/ghost/i18n/locales/eo/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/es/signup-form.json
+++ b/ghost/i18n/locales/es/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/fi/signup-form.json
+++ b/ghost/i18n/locales/fi/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/fr/signup-form.json
+++ b/ghost/i18n/locales/fr/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/hu/signup-form.json
+++ b/ghost/i18n/locales/hu/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/id/signup-form.json
+++ b/ghost/i18n/locales/id/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/it/signup-form.json
+++ b/ghost/i18n/locales/it/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/ko/signup-form.json
+++ b/ghost/i18n/locales/ko/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/mn/signup-form.json
+++ b/ghost/i18n/locales/mn/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/nl/signup-form.json
+++ b/ghost/i18n/locales/nl/signup-form.json
@ -1,6 +1,7 @@
 {
-    "Now check your email!": "",
-    "Please enter a valid email address": "",
-    "Something went wrong, please try again.": "",
-    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
+    "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.",
+    "Subscribe": "Inschrijven",
+    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": "Om jouw inschrijving te voltooien, klik op de bevestigingslink in jouw inbox. Als het niet binnen 3 minuten aankomt, controleer dan jouw spamfolder!"
 }
--- a/ghost/i18n/locales/no/signup-form.json
+++ b/ghost/i18n/locales/no/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/pl/signup-form.json
+++ b/ghost/i18n/locales/pl/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/pt-BR/signup-form.json
+++ b/ghost/i18n/locales/pt-BR/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/pt/signup-form.json
+++ b/ghost/i18n/locales/pt/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/ro/signup-form.json
+++ b/ghost/i18n/locales/ro/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/ru/signup-form.json
+++ b/ghost/i18n/locales/ru/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/si/signup-form.json
+++ b/ghost/i18n/locales/si/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/sl/signup-form.json
+++ b/ghost/i18n/locales/sl/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/sq/signup-form.json
+++ b/ghost/i18n/locales/sq/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/sr/signup-form.json
+++ b/ghost/i18n/locales/sr/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/sv/signup-form.json
+++ b/ghost/i18n/locales/sv/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/tr/signup-form.json
+++ b/ghost/i18n/locales/tr/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/uk/signup-form.json
+++ b/ghost/i18n/locales/uk/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/uz/signup-form.json
+++ b/ghost/i18n/locales/uz/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/vi/signup-form.json
+++ b/ghost/i18n/locales/vi/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/zh-Hant/signup-form.json
+++ b/ghost/i18n/locales/zh-Hant/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/i18n/locales/zh/signup-form.json
+++ b/ghost/i18n/locales/zh/signup-form.json
@ -2,5 +2,6 @@
    "Now check your email!": "",
    "Please enter a valid email address": "",
    "Something went wrong, please try again.": "",
+    "Subscribe": "",
    "To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!": ""
 }
--- a/ghost/signup-form/index.html
+++ b/ghost/signup-form/index.html
@ -80,6 +80,10 @@
                async
            ></script>
        </div>
+
+        <hr>
+        <h1>Translated</h1>
+        <p>Use production build, since the multiple languages aren't working well with modules.</p>
    </div>
  </body>
 </html>
--- a/ghost/signup-form/preview.html
+++ b/ghost/signup-form/preview.html
@ -75,6 +75,25 @@
                async
            ></script>
        </div>
+
+        <hr>
+        <h1>Translated</h1>
+
+        <div style="height: 40vmin; min-height: 360px;">
+            <script
+                src="http://localhost:6174/signup-form.min.js"
+                data-title="My site name"
+                data-description="An independent publication about embeddable signup forms."
+                data-logo="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png"
+                data-background-color="#F1F3F4"
+                data-button-color="#ff0095"
+                data-site="%VITE_SITE_URL%"
+                data-label-1="Signup form"
+                data-label-2="With logo"
+                data-locale="nl-BE"
+                async
+            ></script>
+        </div>
    </div>
  </body>
 </html>
--- a/ghost/signup-form/src/App.tsx
+++ b/ghost/signup-form/src/App.tsx
@ -30,7 +30,7 @@ const App: React.FC<AppProps> = ({scriptTag}) => {
        } as Page);
    };

-    const i18n = i18nLib.default('en', 'signup-form');
+    const i18n = i18nLib.default(options.locale, 'signup-form');
    const context: AppContextType = {
        page,
        api,
--- a/ghost/signup-form/src/AppContext.ts
+++ b/ghost/signup-form/src/AppContext.ts
@ -13,6 +13,7 @@ export type SignupFormOptions = {
    buttonTextColor?: string,
    site: string,
    labels: string[],
+    locale: string
 };

 export type AppContextType = {
--- a/ghost/signup-form/src/Preview.stories.tsx
+++ b/ghost/signup-form/src/Preview.stories.tsx
@ -88,7 +88,8 @@ export const Full: Story = {
        labels: ['label-1', 'label-2'],
        simulateApiError: false,
        pageBackgroundColor: '#ffffff',
-        pageTextColor: '#000000'
+        pageTextColor: '#000000',
+        locale: 'en'
    },

    play
@ -102,7 +103,8 @@ export const Minimal: Story = {
        buttonTextColor: '#ffffff',
        simulateApiError: false,
        pageBackgroundColor: '#ffffff',
-        pageTextColor: '#000000'
+        pageTextColor: '#000000',
+        locale: 'en'
    },

    play
@ -116,7 +118,8 @@ export const MinimalOnDark: Story = {
        buttonTextColor: '#ffffff',
        simulateApiError: false,
        pageBackgroundColor: '#122334',
-        pageTextColor: '#f7f7f7'
+        pageTextColor: '#f7f7f7',
+        locale: 'en'
    },

    play
--- a/ghost/signup-form/src/components/pages/FormView.tsx
+++ b/ghost/signup-form/src/components/pages/FormView.tsx
@ -1,4 +1,5 @@
 import React, {FormEventHandler} from 'react';
+import {useAppContext} from '../../AppContext';

 export const FormView: React.FC<FormProps & {
    isMinimal: boolean
@ -39,6 +40,7 @@ type FormProps = {

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

    const borderStyle = error ? '!border-red-500' : 'border-grey-300';

@ -65,7 +67,7 @@ const Form: React.FC<FormProps> = ({loading, error, buttonColor, buttonTextColor
                    disabled={loading}
                    style={{backgroundColor: buttonColor, color: buttonTextColor}}
                    type='submit'
-                >Subscribe</button>
+                >{t('Subscribe')}</button>
                {error && <p className='absolute -bottom-4 left-0 pt-0.5 text-red-500' data-testid="error-message">{error}</p>}
            </form>
        </>
--- a/ghost/signup-form/src/utils/options.tsx
+++ b/ghost/signup-form/src/utils/options.tsx
@ -18,7 +18,8 @@ export function useOptions(scriptTag: HTMLElement) {
            buttonColor: scriptTag.dataset.buttonColor || undefined,
            buttonTextColor: scriptTag.dataset.buttonTextColor || undefined,
            site: scriptTag.dataset.site || window.location.origin,
-            labels
+            labels,
+            locale: scriptTag.dataset.locale || 'en'
        };
    }, [scriptTag]);