Bugfix/BUS 939 fix language switching (#94)

* Create new component for formatting links according to the current locale * Synchronize the back-end language with the front-end language * Accept RouteObject for the `to` prop * Lint * Rename `FormattedLink` to `LocaleLink` * Add usage example * Expand language synchronization comment * Remove redundant script tag
basecom · Dec 13, 2024 · c38ec87 · c38ec87
1 parent 88b3c7a
commit c38ec87
Show file tree

Hide file tree

Showing 27 changed files with 125 additions and 64 deletions.
diff --git a/components/Account/AccountLogin.vue b/components/Account/AccountLogin.vue
@@ -103,22 +103,22 @@ const handleLogin = async (fields: FormkitLoginFields) => {
         v-if="!signedIn"
         class="mt-2 flex justify-between"
     >
-        <NuxtLink
+        <LocaleLink
             v-if="showCreateLink"
             to="/account/register"
             class="hover:text-brand-primary"
         >
             {{ $t('account.login.createAccountLink') }}
-        </NuxtLink>
+        </LocaleLink>
 
-        <NuxtLink
+        <LocaleLink
             v-if="showRecoverLink"
             to="/account/recover"
             class="hover:text-brand-primary"
             :class="{ 'text-right': showCreateLink }"
             @click="$emit('closeModal')"
         >
             {{ $t('account.login.recoverPasswordLink') }}
-        </NuxtLink>
+        </LocaleLink>
     </div>
 </template>
diff --git a/components/Account/AccountRecoverPassword.vue b/components/Account/AccountRecoverPassword.vue
@@ -33,12 +33,12 @@ const handlePasswordChange = async (fields: FormkitFields) => {
 <template>
     <template v-if="!hashIsValid">
         <p class="text-center text-status-danger">{{ $t('account.recoverPassword.recover.linkNotValid') }}</p>
-        <NuxtLink
+        <LocaleLink
             to="/account/recover"
             class="m-auto mt-4 flex w-1/2 items-center justify-center rounded bg-brand-primary px-4 py-2 text-white hover:bg-brand-primary-dark"
         >
             {{ $t('account.recoverPassword.recover.requestNewLink') }}
-        </NuxtLink>
+        </LocaleLink>
     </template>
 
     <FormKit

diff --git a/components/Account/AccountResetPassword.vue b/components/Account/AccountResetPassword.vue
@@ -52,11 +52,11 @@ const getEnvironmentStorefrontUrl = (): string => {
         <p>
             {{ $t('account.recoverPassword.request.successMessage') }}
         </p>
-        <NuxtLink
+        <LocaleLink
             to="/account/login"
             class="mt-4 flex w-full justify-center rounded bg-brand-primary px-4 py-2 text-white hover:bg-brand-primary-dark"
         >
             {{ $t('account.recoverPassword.request.loginButtonLabel') }}
-        </NuxtLink>
+        </LocaleLink>
     </template>
 </template>
diff --git a/components/Account/AccountSideNavigation.vue b/components/Account/AccountSideNavigation.vue
@@ -53,13 +53,13 @@ const navItems = ref([
             class="mt-4 pb-4 pl-2"
             :class="{ 'border-b border-gray': index !== navItems.length - 1 }"
         >
-            <NuxtLink
+            <LocaleLink
                 :to="item.path"
                 class="text-lg"
                 :class="{ 'font-bold': isActive(item.path, true) }"
             >
                 {{ item.label }}
-            </NuxtLink>
+            </LocaleLink>
         </li>
         <li>
             <FormKit

diff --git a/components/Account/Order/AccountOrderItem.vue b/components/Account/Order/AccountOrderItem.vue
@@ -79,13 +79,13 @@ onMounted(async () => {
                         {{ status }}
                     </div>
 
-                    <NuxtLink
+                    <LocaleLink
                         v-if="isPaymentNeeded"
                         class="rounded-md bg-brand-primary px-2 py-2 text-white"
                         :to="`/account/order/edit/${orderId}`"
                     >
                         {{ $t('account.orders.changePaymentMethod') }}
-                    </NuxtLink>
+                    </LocaleLink>
                 </div>
 
                 <div class="gap-12 text-left lg:flex">

diff --git a/components/Checkout/CheckoutLineItem.vue b/components/Checkout/CheckoutLineItem.vue
@@ -98,7 +98,7 @@ const debounceUpdate = useDebounceFn(updateQuantity, 600);
 
 <template>
     <div class="mr-4 h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-medium bg-gray-light">
-        <NuxtLink
+        <LocaleLink
             v-if="!isPromotion"
             :to="getProductRoute(lineItem)"
         >
@@ -113,7 +113,7 @@ const debounceUpdate = useDebounceFn(updateQuantity, 600);
                     class="h-full w-full object-cover object-center"
                 />
             </template>
-        </NuxtLink>
+        </LocaleLink>
         <div
             v-else-if="isPromotion"
             class="flex h-full w-full items-center justify-center"
@@ -128,11 +128,11 @@ const debounceUpdate = useDebounceFn(updateQuantity, 600);
     <div class="flex flex-1 flex-col">
         <div>
             <div class="flex flex-col justify-between gap-4 lg:flex-row">
-                <NuxtLink :to="getProductRoute(lineItem)">
+                <LocaleLink :to="getProductRoute(lineItem)">
                     <p>
                         {{ lineItem.label }}
                     </p>
-                </NuxtLink>
+                </LocaleLink>
 
                 <span v-if="itemTotalPrice">
                     {{ getFormattedPrice(itemTotalPrice) }}

diff --git a/components/Cms/Element/CmsElementCategoryNavigation.vue b/components/Cms/Element/CmsElementCategoryNavigation.vue
@@ -20,25 +20,25 @@ const { isActive } = useActivePath();
             :key="item.id"
             class="mt-4 border-b border-gray pb-4 pl-2"
         >
-            <NuxtLink
+            <LocaleLink
                 :to="getCategoryRoute(item)"
                 class="text-lg"
                 :class="{ 'font-bold': isActive(item.seoUrls) }"
             >
                 {{ getTranslatedProperty(item, 'name') }}
-            </NuxtLink>
+            </LocaleLink>
             <ul v-if="item.children && item.children.length">
                 <li
                     v-for="child in item.children"
                     :key="child.id"
                     class="ml-3 mt-2 text-base"
                 >
-                    <NuxtLink
+                    <LocaleLink
                         :to="getCategoryRoute(child)"
                         :class="{ 'font-bold': isActive(child.seoUrls) }"
                     >
                         {{ getTranslatedProperty(child, 'name') }}
-                    </NuxtLink>
+                    </LocaleLink>
                 </li>
             </ul>
         </li>

diff --git a/components/Error/ErrorNotFound.vue b/components/Error/ErrorNotFound.vue
@@ -15,11 +15,11 @@
             {{ $t('error.404.detail') }}
         </p>
 
-        <NuxtLink
+        <LocaleLink
             class="bg-brand-primary p-4 text-white hover:bg-brand-primary-dark"
             :to="'/'"
         >
             {{ $t('global.homepageLinkLabel') }}
-        </NuxtLink>
+        </LocaleLink>
     </ErrorLayout>
 </template>
diff --git a/components/Error/ErrorServer.vue b/components/Error/ErrorServer.vue
@@ -19,11 +19,11 @@ defineProps<{
             {{ $t('error.server.detail') }}
         </p>
 
-        <NuxtLink
+        <LocaleLink
             class="bg-brand-primary p-4 text-white hover:bg-brand-primary-dark"
             :to="'/'"
         >
             {{ $t('global.homepageLinkLabel') }}
-        </NuxtLink>
+        </LocaleLink>
     </main>
 </template>
diff --git a/components/Error/ErrorUnknown.vue b/components/Error/ErrorUnknown.vue
@@ -19,11 +19,11 @@ defineProps<{
             {{ $t('error.unknown.detail') }}
         </p>
 
-        <NuxtLink
+        <LocaleLink
             class="bg-brand-primary p-4 text-white hover:bg-brand-primary-dark"
             :to="'/'"
         >
             {{ $t('global.homepageLinkLabel') }}
-        </NuxtLink>
+        </LocaleLink>
     </ErrorLayout>
 </template>
diff --git a/components/LanguageSwitch.vue b/components/LanguageSwitch.vue
@@ -15,7 +15,7 @@ const onLanguageChange = async (option: Event) => {
     }
 };
 
-const languageOptions = computed(() => entityArrayToOptions<Schemas['language']>(languages.value, 'name', true) ?? []);
+const languageOptions = computed(() => entityArrayToOptions<Schemas['Language']>(languages.value, 'name', true) ?? []);
 </script>
 
 <template>

diff --git a/components/Layout/Header/LayoutHeaderCart.vue b/components/Layout/Header/LayoutHeaderCart.vue
@@ -42,13 +42,13 @@ const { cartItemsWithProduct, cartItemsCount } = storeToRefs(cartItemsStore);
                 <CheckoutSummary :reduced-display="true" />
             </div>
 
-            <NuxtLink
+            <LocaleLink
                 to="/checkout/cart"
                 class="mt-4 flex items-center justify-center rounded-md bg-brand-primary px-6 py-3 text-white"
                 @click="offcanvasCartController.close()"
             >
                 {{ $t('checkout.offcanvasCart.toCartButtonLabel') }}
-            </NuxtLink>
+            </LocaleLink>
         </template>
     </LazyLayoutSidebar>
 </template>
diff --git a/components/Layout/Header/LayoutHeaderWishlist.vue b/components/Layout/Header/LayoutHeaderWishlist.vue
@@ -3,7 +3,7 @@ const { count: wishlistCount } = useWishlist();
 </script>
 
 <template>
-    <NuxtLink
+    <LocaleLink
         to="/wishlist"
         class="relative"
     >
@@ -15,5 +15,5 @@ const { count: wishlistCount } = useWishlist();
             :number="wishlistCount"
             class="absolute bottom-2.5 left-3"
         />
-    </NuxtLink>
+    </LocaleLink>
 </template>
diff --git a/components/Layout/Header/Search/LayoutHeaderSearchBar.vue b/components/Layout/Header/Search/LayoutHeaderSearchBar.vue
@@ -124,14 +124,14 @@ onMounted(() => {
             v-if="showSuggest"
             class="z-1 container fixed left-0 right-0 rounded-b-md border-t border-gray-medium bg-white p-0 shadow-md"
         >
-            <NuxtLink
+            <LocaleLink
                 v-for="product in getProducts?.slice(0, displayTotal)"
                 :key="product.id"
                 :to="getProductRoute(product)"
                 @click="onClickProduct(product)"
             >
                 <LayoutHeaderSearchSuggestions :product="product" />
-            </NuxtLink>
+            </LocaleLink>
 
             <div class="bg-gray-light text-center text-sm hover:bg-gray-medium">
                 <div
@@ -144,7 +144,7 @@ onMounted(() => {
                 </div>
 
                 <template v-else>
-                    <NuxtLink
+                    <LocaleLink
                         v-if="getTotal > 0"
                         :to="'/search?search=' + typingQuery"
                         class="block w-full py-3"
@@ -157,7 +157,7 @@ onMounted(() => {
                         <template v-else>
                             <span>{{ $t('search.searchBar.oneResultLinkLabel') }}</span>
                         </template>
-                    </NuxtLink>
+                    </LocaleLink>
 
                     <div
                         v-else

diff --git a/components/Layout/LayoutBreadcrumbs.vue b/components/Layout/LayoutBreadcrumbs.vue
@@ -23,7 +23,7 @@ withDefaults(
                 v-if="displayRoot"
                 class="inline-flex items-center gap-2"
             >
-                <NuxtLink
+                <LocaleLink
                     :to="'/'"
                     class="inline-flex items-center gap-2 text-sm font-medium last:text-brand-primary hover:text-brand-primary"
                 >
@@ -33,7 +33,7 @@ withDefaults(
                         class="h-4 w-4"
                     />
                     {{ $t('layout.breadcrumb.homeLinkLabel') }}
-                </NuxtLink>
+                </LocaleLink>
 
                 <FormKitIcon
                     v-if="breadcrumbs?.length > 0"
@@ -47,13 +47,13 @@ withDefaults(
                 :key="breadcrumb.path"
                 class="inline-flex items-center gap-2"
             >
-                <NuxtLink
+                <LocaleLink
                     v-if="breadcrumb.path"
                     :to="breadcrumb.path"
                     class="inline-flex items-center text-sm font-medium last:text-brand-primary hover:text-brand-primary"
                 >
                     {{ breadcrumb.name }}
-                </NuxtLink>
+                </LocaleLink>
 
                 <span
                     v-else

diff --git a/components/Layout/LayoutFooter.vue b/components/Layout/LayoutFooter.vue
@@ -24,26 +24,26 @@ onMounted(async () => {
                     >
                         <ul class="list-none">
                             <li class="mb-1 max-w-max font-bold hover:text-brand-primary hover:underline">
-                                <NuxtLink
+                                <LocaleLink
                                     :target="
                                         navigationElement.externalLink || navigationElement.linkNewTab ? '_blank' : ''
                                     "
                                     :to="getCategoryRoute(navigationElement)"
                                 >
                                     {{ getTranslatedProperty(navigationElement, 'name') }}
-                                </NuxtLink>
+                                </LocaleLink>
                             </li>
                             <li
                                 v-for="navigationChild in navigationElement.children"
                                 :key="navigationChild.id"
                             >
-                                <NuxtLink
+                                <LocaleLink
                                     :target="navigationChild.externalLink || navigationChild.linkNewTab ? '_blank' : ''"
                                     :to="getCategoryRoute(navigationChild)"
                                     class="text-sm font-normal transition duration-200 hover:text-brand-primary hover:underline"
                                 >
                                     {{ getTranslatedProperty(navigationChild, 'name') }}
-                                </NuxtLink>
+                                </LocaleLink>
                             </li>
                         </ul>
                     </template>
@@ -58,13 +58,13 @@ onMounted(async () => {
                         v-for="navigationElement in serviceNavigationElements"
                         :key="navigationElement.id"
                     >
-                        <NuxtLink
+                        <LocaleLink
                             :target="navigationElement.externalLink || navigationElement.linkNewTab ? '_blank' : ''"
                             :to="getCategoryRoute(navigationElement)"
                             class="text-sm font-normal transition duration-200 hover:text-brand-primary hover:underline"
                         >
                             {{ getTranslatedProperty(navigationElement, 'name') }}
-                        </NuxtLink>
+                        </LocaleLink>
                     </template>
                 </div>
             </div>

diff --git a/components/Layout/LayoutLogo.vue b/components/Layout/LayoutLogo.vue
@@ -17,7 +17,7 @@ const shopName = 'pond';
 </script>
 
 <template>
-    <NuxtLink
+    <LocaleLink
         :aria-label="shopName"
         :title="shopName"
         :to="withLink ? '/' : ''"
@@ -36,5 +36,5 @@ const shopName = 'pond';
             :alt="shopName"
             :class="logoClasses"
         />
-    </NuxtLink>
+    </LocaleLink>
 </template>