[email protected] Use Vue I18n (#2179)

* [email protected] Use Vue I18n * [email protected] Update maxBundleSize * [email protected] Bump minor version of package / update tests * [email protected] Further linting / test improvements * [email protected] Update CHANGELOG * [email protected] Add singular and plural error messages * [email protected] Use object shorthand Co-authored-by: Adam <[email protected]>
justeattakeaway · Oct 28, 2022 · 44c00c9 · 44c00c9
1 parent c0990b4
commit 44c00c9
Show file tree

Hide file tree

Showing 14 changed files with 461 additions and 406 deletions.
diff --git a/packages/components/pages/f-registration/CHANGELOG.md b/packages/components/pages/f-registration/CHANGELOG.md
@@ -3,6 +3,14 @@
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+v3.8.0
+------------------------------
+*October 27, 2022*
+
+### Changed
+- Update component to use Vue I18n.
+- Added translations for form error message.
+
 v3.7.2
 ------------------------------
 *October 13, 2022*

diff --git a/packages/components/pages/f-registration/package.json b/packages/components/pages/f-registration/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@justeat/f-registration",
   "description": "Fozzie Registration Form Component",
-  "version": "3.7.2",
+  "version": "3.8.0",
   "main": "dist/f-registration.umd.min.js",
-  "maxBundleSize": "70kB",
+  "maxBundleSize": "75kB",
   "files": [
     "dist",
     "test-utils",

diff --git a/packages/components/pages/f-registration/src/components/Registration.vue b/packages/components/pages/f-registration/src/components/Registration.vue
@@ -2,7 +2,7 @@
     <div :class="$style['c-registration']">
         <card-component
             :data-theme-registration="theme"
-            :card-heading="copy.labels.createAccountTitle"
+            :card-heading="$t('labels.createAccountTitle')"
             is-page-content-wrapper
             card-heading-position="center"
             data-test-id="registration-component"
@@ -20,7 +20,7 @@
                     is-bold
                     is-distinct
                     :href="loginUrl">
-                    {{ copy.navLinks.login.text }}
+                    {{ $t('navLinks.login.text') }}
                 </v-link>
             </p>
             <form
@@ -46,7 +46,7 @@
                     v-model="firstName"
                     name="firstName"
                     required
-                    :label-text="copy.labels.firstName"
+                    :label-text="$t('labels.firstName')"
                     input-type="text"
                     aria-describedby="error-message-firstname"
                     :aria-invalid="!!describeFirstnameErrorMessage"
@@ -67,7 +67,7 @@
                     v-model="lastName"
                     name="lastName"
                     input-type="text"
-                    :label-text="copy.labels.lastName"
+                    :label-text="$t('labels.lastName')"
                     required
                     aria-describedby="error-message-lastname"
                     :aria-invalid="!!describeLastnameErrorMessage"
@@ -89,7 +89,7 @@
                     v-model="email"
                     name="email"
                     input-type="email"
-                    :label-text="copy.labels.email"
+                    :label-text="$t('labels.email')"
                     required
                     aria-describedby="error-message-email"
                     :aria-invalid="!!describeEmailErrorMessage"
@@ -110,7 +110,7 @@
                     v-model="password"
                     name="password"
                     input-type="password"
-                    :label-text="copy.labels.password"
+                    :label-text="$t('labels.password')"
                     required
                     aria-describedby="error-message-password"
                     :aria-invalid="!!describePasswordErrorMessage"
@@ -134,49 +134,50 @@
                     is-full-width
                     action-type="submit"
                     :disabled="shouldDisableCreateAccountButton">
-                    {{ copy.labels.createAccountBtn }}
+                    {{ $t('labels.createAccountBtn') }}
                 </f-button>
             </form>
             <p
                 :class="[
                     $style['c-registration-link'],
                     $style['c-registration-link--bottomSpacing']]">
-                {{ copy.navLinks.termsAndConditions.prefix }}
+                {{ $t('navLinks.termsAndConditions.prefix') }}
                 <v-link
                     is-bold
                     is-distinct
                     data-test-id="ts-and-cs-link"
-                    :href="copy.navLinks.termsAndConditions.url"
+                    :href="$t('navLinks.termsAndConditions.url')"
                     target="_blank"
                     rel="noopener noreferrer">
-                    {{ copy.navLinks.termsAndConditions.text }}
-                </v-link>{{ copy.navLinks.termsAndConditions.suffix }}
-                {{ copy.navLinks.privacyPolicy.prefix }}
+                    {{ $t('navLinks.termsAndConditions.text') }}
+                </v-link>{{ $t('navLinks.termsAndConditions.suffix') }}
+                {{ $t('navLinks.privacyPolicy.prefix') }}
                 <v-link
                     is-bold
                     is-distinct
                     data-test-id="privacy-policy-link"
-                    :href="copy.navLinks.privacyPolicy.url"
+                    :href="$t('navLinks.privacyPolicy.url')"
                     target="_blank"
                     rel="noopener noreferrer">
-                    {{ copy.navLinks.privacyPolicy.text }}
+                    {{ $t('navLinks.privacyPolicy.text') }}
                 </v-link>
-                {{ copy.navLinks.cookiesPolicy.prefix }}
+                {{ $t('navLinks.cookiesPolicy.prefix') }}
                 <v-link
                     is-bold
                     is-distinct
                     data-test-id="cookies-policy-link"
-                    :href="copy.navLinks.cookiesPolicy.url"
+                    :href="$t('navLinks.cookiesPolicy.url')"
                     target="_blank"
                     rel="noopener noreferrer">
-                    {{ copy.navLinks.cookiesPolicy.text }}
-                </v-link>{{ copy.navLinks.cookiesPolicy.suffix }}
+                    {{ $t('navLinks.cookiesPolicy.text') }}
+                </v-link>{{ $t('navLinks.cookiesPolicy.suffix') }}
             </p>
         </card-component>
     </div>
 </template>
 
 <script>
+import { VueGlobalisationMixin } from '@justeat/f-globalisation';
 import { globalisationServices } from '@justeat/f-services';
 import { validationMixin } from 'vuelidate';
 import {
@@ -248,7 +249,10 @@ export default {
         VLink
     },
 
-    mixins: [validationMixin],
+    mixins: [
+        validationMixin,
+        VueGlobalisationMixin
+    ],
 
     props: {
         locale: {
@@ -270,12 +274,9 @@ export default {
     },
 
     data () {
-        const locale = globalisationServices.getLocale(tenantConfigs, this.locale, this.$i18n);
-        const localeConfig = tenantConfigs[locale];
-        const theme = globalisationServices.getTheme(locale);
+        const theme = globalisationServices.getTheme(this.locale);
 
         return {
-            copy: { ...localeConfig },
             theme,
             firstName: null,
             lastName: null,
@@ -284,7 +285,8 @@ export default {
             shouldDisableCreateAccountButton: false,
             genericErrorMessage: null,
             formStarted: false,
-            conflictedEmailAddress: ''
+            conflictedEmailAddress: '',
+            tenantConfigs
         };
     },
 
@@ -298,64 +300,64 @@ export default {
 
         describeFirstnameErrorMessage () {
             if (this.$v.firstName.$dirty) {
-                const messages = this.copy.validationMessages.firstName;
+                const textKeyPrefix = 'validationMessages.firstName.';
 
                 if (!this.$v.firstName.required) {
-                    return messages.requiredError;
+                    return this.$t(`${textKeyPrefix}requiredError`);
                 }
                 if (!this.$v.firstName.maxLength) {
-                    return messages.maxLengthError;
+                    return this.$t(`${textKeyPrefix}maxLengthError`);
                 }
                 if (!this.$v.firstName.meetsCharacterValidationRules) {
-                    return messages.invalidCharError;
+                    return this.$t(`${textKeyPrefix}invalidCharError`);
                 }
             }
             return '';
         },
         describeLastnameErrorMessage () {
             if (this.$v.lastName.$dirty) {
-                const messages = this.copy.validationMessages.lastName;
+                const textKeyPrefix = 'validationMessages.lastName.';
 
                 if (!this.$v.lastName.required) {
-                    return messages.requiredError;
+                    return this.$t(`${textKeyPrefix}requiredError`);
                 }
                 if (!this.$v.lastName.maxLength) {
-                    return messages.maxLengthError;
+                    return this.$t(`${textKeyPrefix}maxLengthError`);
                 }
                 if (!this.$v.lastName.meetsCharacterValidationRules) {
-                    return messages.invalidCharError;
+                    return this.$t(`${textKeyPrefix}invalidCharError`);
                 }
             }
             return '';
         },
         describeEmailErrorMessage () {
             if (this.$v.email.$dirty) {
-                const messages = this.copy.validationMessages.email;
+                const textKeyPrefix = 'validationMessages.email.';
 
                 if (!this.$v.email.required) {
-                    return messages.requiredError;
+                    return this.$t(`${textKeyPrefix}requiredError`);
                 }
                 if (!this.$v.email.maxLength) {
-                    return messages.maxLengthError;
+                    return this.$t(`${textKeyPrefix}maxLengthError`);
                 }
                 if (!this.$v.email.email) {
-                    return messages.invalidEmailError;
+                    return this.$t(`${textKeyPrefix}invalidEmailError`);
                 }
                 if (!this.$v.email.isValidEmailAddress) {
-                    return messages.alreadyExistsError;
+                    return this.$t(`${textKeyPrefix}alreadyExistsError`);
                 }
             }
             return '';
         },
         describePasswordErrorMessage () {
             if (this.$v.password.$dirty) {
-                const messages = this.copy.validationMessages.password;
+                const textKeyPrefix = 'validationMessages.password.';
 
                 if (!this.$v.password.required) {
-                    return messages.requiredError;
+                    return this.$t(`${textKeyPrefix}requiredError`);
                 }
                 if (!this.$v.password.minLength) {
-                    return messages.minLengthError;
+                    return this.$t(`${textKeyPrefix}minLengthError`);
                 }
             }
             return '';
@@ -518,7 +520,7 @@ export default {
                     }
                 }
 
-                this.genericErrorMessage = this.copy.genericErrorMessage;
+                this.genericErrorMessage = this.$t('genericErrorMessage');
                 this.$emit(EventNames.CreateAccountFailure, this.genericErrorMessage);
             } finally {
                 this.shouldDisableCreateAccountButton = false;
@@ -541,7 +543,12 @@ export default {
             v.email.$touch();
             v.password.$touch();
             if (v.$invalid) {
-                this.genericErrorMessage = `There are ${countErrors()} errors in the form.`;
+                const errorCount = countErrors();
+
+                this.genericErrorMessage = errorCount === 1
+                    ? this.$t('validationMessages.singleFieldError')
+                    : this.$t('validationMessages.multipleFieldErrors', { errorCount });
+
                 return true;
             }
             this.genericErrorMessage = '';