Disable language selection for everything other than English GB

frontend/public/locales/en-GB/translation.json

@@ -104,6 +104,7 @@
   "green": "Green",
   "blue": "Blue",
   "custom": "Custom...",
+  "comingSoon": "Coming soon",
   "WorkInProgess": "Work in progress, May not work or be buggy, Please report any problems!",
   "poweredBy": "Powered by",
   "yes": "Yes",

frontend/src/components/shared/LanguageSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Menu, Button, ScrollArea, ActionIcon } from '@mantine/core';
+import { Menu, Button, ScrollArea, ActionIcon, Tooltip } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../../i18n';
 import LocalIcon from './LocalIcon';
@@ -33,6 +33,7 @@ interface LanguageItemProps {
   rippleEffect?: RippleEffect | null;
   pendingLanguage: string | null;
   compact: boolean;
+  disabled?: boolean;
 }
 
 const LanguageItem: React.FC<LanguageItemProps> = ({
@@ -43,8 +44,19 @@ const LanguageItem: React.FC<LanguageItemProps> = ({
   onClick,
   rippleEffect,
   pendingLanguage,
-  compact
+  compact,
+  disabled = false
 }) => {
+  const { t } = useTranslation();
+
+  const label = disabled ? (
+    <Tooltip label={t('comingSoon', 'Coming soon')} position="left" withArrow>
+      <p>{option.label}</p>
+    </Tooltip>
+  ) : (
+    <p>{option.label}</p>
+  );
+
   return (
     <div
       className={styles.languageItem}
@@ -58,8 +70,9 @@ const LanguageItem: React.FC<LanguageItemProps> = ({
         variant="subtle"
         size="sm"
         fullWidth
-        onClick={onClick}
+        onClick={disabled ? undefined : onClick}
         data-selected={isSelected}
+        disabled={disabled}
         styles={{
           root: {
             borderRadius: '4px',
@@ -71,17 +84,20 @@ const LanguageItem: React.FC<LanguageItemProps> = ({
             backgroundColor: isSelected
               ? 'light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))'
               : 'transparent',
-            color: isSelected
+            color: disabled
+              ? 'light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3))'
+              : isSelected
               ? 'light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))'
               : 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-white))',
             transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-            '&:hover': {
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            '&:hover': !disabled ? {
               backgroundColor: isSelected
                 ? 'light-dark(var(--mantine-color-blue-2), var(--mantine-color-blue-7))'
                 : 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
               transform: 'translateY(-1px)',
               boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-            }
+            } : {}
           },
           label: {
             fontSize: '13px',
@@ -95,7 +111,7 @@ const LanguageItem: React.FC<LanguageItemProps> = ({
           }
         }}
       >
-        {option.label}
+        {label}
         {!compact && rippleEffect && pendingLanguage === option.value && (
           <div
             key={rippleEffect.key}
@@ -252,19 +268,25 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({ position = 'bottom-
         >
           <ScrollArea h={190} type="scroll">
             <div className={styles.languageGrid}>
-              {languageOptions.map((option, index) => (
+              {languageOptions.map((option, index) => {
-                <LanguageItem
+                const isEnglishGB = option.value === 'en-GB'; // Currently only English GB has enough translations to use
-                  key={option.value}
+                const isDisabled = !isEnglishGB;
-                  option={option}
+
-                  index={index}
+                return (
-                  animationTriggered={animationTriggered}
+                  <LanguageItem
-                  isSelected={option.value === i18n.language}
+                    key={option.value}
-                  onClick={(event) => handleLanguageChange(option.value, event)}
+                    option={option}
-                  rippleEffect={rippleEffect}
+                    index={index}
-                  pendingLanguage={pendingLanguage}
+                    animationTriggered={animationTriggered}
-                  compact={compact}
+                    isSelected={option.value === i18n.language}
-                />
+                    onClick={(event) => handleLanguageChange(option.value, event)}
-              ))}
+                    rippleEffect={rippleEffect}
+                    pendingLanguage={pendingLanguage}
+                    compact={compact}
+                    disabled={isDisabled}
+                  />
+                );
+              })}
             </div>
           </ScrollArea>
         </Menu.Dropdown>