language display and selection

Author: mark-prins

client/packages/common/src/intl/locales/en/app.json

@@ -80,6 +80,7 @@
   "searching": "Searching...",
   "select-report": "Select Template",
   "select-store": "Select store",
+  "select-language": "Select language",
   "stock": "View Stock",
   "stocktakes": "Stocktakes",
   "store-details": "Store code: {{code}}",

client/packages/common/src/intl/utils/IntlUtils.ts

@@ -5,6 +5,14 @@ import { LanguageType } from '../../types/schema';
 
 export { useTranslationNext };
 
+const languageOptions = [
+  { label: 'عربي', value: 'ar' },
+  { label: 'Français', value: 'fr' },
+  { label: 'English', value: 'en' },
+  { label: 'Española', value: 'es' },
+  { label: 'Tetum', value: 'tet' },
+];
+
 const locales = [
   'ar' as const,
   'en' as const,
@@ -53,6 +61,9 @@ export const IntlUtils = {
     }
     return 'en';
   },
+  languageOptions,
+  getLanguageName: (language: string) =>
+    languageOptions.find(option => option.value === language)?.label,
 };
 
 const parseLanguage = (language?: LanguageType) => {

client/packages/host/src/components/Footer/Footer.tsx

@@ -2,18 +2,22 @@ import React from 'react';
 import {
   Box,
   HomeIcon,
+  IntlUtils,
   styled,
   Tooltip,
+  TranslateIcon,
   Typography,
   useAuthContext,
   UserIcon,
   useTranslation,
 } from '@openmsupply-client/common';
 import { StoreSelector } from './StoreSelector';
+import { LanguageSelector } from './LanguageSelector';
 
 export const Footer: React.FC = () => {
   const { user, store } = useAuthContext();
   const t = useTranslation('app');
+  const i18n = IntlUtils.useI18N();
   const PaddedCell = styled(Box)({ display: 'flex' });
   const iconStyles = { color: 'gray.main', height: '16px', width: '16px' };
   const textStyles = {
@@ -38,6 +42,16 @@ export const Footer: React.FC = () => {
           <Typography sx={textStyles}>{user.name}</Typography>
         </PaddedCell>
       ) : null}
+      <LanguageSelector>
+        <PaddedCell>
+          <TranslateIcon sx={iconStyles} />
+          <Tooltip title={t('select-language', { ...store })}>
+            <Typography sx={textStyles}>
+              {IntlUtils.getLanguageName(i18n.language)}
+            </Typography>
+          </Tooltip>
+        </PaddedCell>
+      </LanguageSelector>
     </Box>
   );
 };

client/packages/host/src/components/Footer/LanguageSelector.tsx

@@ -0,0 +1,61 @@
+import React, { FC } from 'react';
+import {
+  Box,
+  FlatButton,
+  PaperPopoverSection,
+  usePaperClickPopover,
+  useTranslation,
+  IntlUtils,
+  useNavigate,
+} from '@openmsupply-client/common';
+
+import { PropsWithChildrenOnly } from '@common/types';
+
+export const LanguageSelector: FC<PropsWithChildrenOnly> = ({ children }) => {
+  const navigate = useNavigate();
+  const { hide, PaperClickPopover } = usePaperClickPopover();
+  const t = useTranslation('app');
+
+  const i18n = IntlUtils.useI18N();
+
+  const languageButtons = IntlUtils.languageOptions.map(l => (
+    <FlatButton
+      label={l.label}
+      disabled={l.value === i18n.language}
+      onClick={() => {
+        i18n.changeLanguage(l.value);
+        hide();
+        navigate(0);
+      }}
+      key={l.value}
+      sx={{
+        whiteSpace: 'nowrap',
+        overflowX: 'hidden',
+        overflowY: 'visible',
+        textOverflow: 'ellipsis',
+        display: 'block',
+        textAlign: 'left',
+      }}
+    />
+  ));
+  return (
+    <PaperClickPopover
+      placement="top"
+      width={300}
+      Content={
+        <PaperPopoverSection label={t('select-language')}>
+          <Box
+            style={{
+              overflowY: 'auto',
+              maxHeight: 300,
+            }}
+          >
+            {languageButtons}
+          </Box>
+        </PaperPopoverSection>
+      }
+    >
+      {children}
+    </PaperClickPopover>
+  );
+};

client/packages/host/src/components/LanguageMenu.tsx

@@ -16,14 +16,6 @@ export const LanguageMenu: React.FC = () => {
     navigate(0);
   };
 
-  const options = [
-    { label: 'عربي', value: 'ar' },
-    { label: 'Français', value: 'fr' },
-    { label: 'English', value: 'en' },
-    { label: 'Española', value: 'es' },
-    { label: 'Tetum', value: 'tet' },
-  ];
-
   const renderOption = (option: Option) => (
     <MenuItem
       key={option.value}
@@ -37,7 +29,7 @@ export const LanguageMenu: React.FC = () => {
   return (
     <Select
       onChange={handleChange}
-      options={options}
+      options={IntlUtils.languageOptions}
       value={i18n.language}
       renderOption={renderOption}
     />