Jim/80748/account settings is having reports option for all other languages

packages/account/src/Components/language-settings/index.ts

@@ -0,0 +1,3 @@
+import LanguageRadioButton from './language-radio-button';
+
+export default LanguageRadioButton;

packages/account/src/Components/language-settings/language-radio-button.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Text, Icon } from '@deriv/components';
+import classNames from 'classnames';
+import { getAllowedLanguages } from '@deriv/translations';
+
+type TLanguageRadioButton = {
+    is_current_language: boolean;
+    id: string;
+    language_code: string;
+    name: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+};
+
+const LanguageRadioButton = ({ is_current_language, id, language_code, name, onChange }: TLanguageRadioButton) => {
+    const allowed_languages: Record<string, string> = getAllowedLanguages();
+    return (
+        <div
+            className={classNames('settings-language__language-link', {
+                'settings-language__language-link--active': is_current_language,
+            })}
+            id={`dt_settings_${language_code}_button`}
+        >
+            <input
+                type='radio'
+                id={id}
+                name={name}
+                onChange={onChange}
+                value={language_code}
+                className='settings-language__language--radio-button'
+            />
+            <label htmlFor={id}>
+                <div>
+                    <Icon
+                        icon={`IcFlag${id.replace('_', '-')}`}
+                        className='settings-language__language-link-flag settings-language__language-flag'
+                    />
+                </div>
+                <div>
+                    <Text
+                        size='xs'
+                        className={classNames('settings-language__language-name', {
+                            'settings-language__language-name--active': is_current_language,
+                        })}
+                    >
+                        {allowed_languages[language_code]}
+                    </Text>
+                </div>
+            </label>
+        </div>
+    );
+};
+
+export default LanguageRadioButton;

packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, DesktopWrapper, ThemedScrollbars } from '@deriv/components';
+import { localize, getAllowedLanguages } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import FormSubHeader from 'Components/form-sub-header';
+import TCoreStore from '../../../Stores';
+import { Formik, FormikHandlers, FormikHelpers, FormikValues } from 'formik';
+import FormFooter from 'Components/form-footer';
+import LanguageRadioButton from 'Components/language-settings';
+
+type TchangeCurrentLanguage = (lang: string) => void;
+
+type TLanguageSettings = {
+    current_language: string;
+    changeCurrentLanguage: TchangeCurrentLanguage;
+    changeLanguage: (lang: string, changeCurrentLanguage: TchangeCurrentLanguage) => Promise<void>;
+    isCurrentLanguage: (lang: string) => boolean;
+};
+
+const LanguageSettings = ({
+    changeCurrentLanguage,
+    changeLanguage,
+    current_language,
+    isCurrentLanguage,
+}: TLanguageSettings) => {
+    const { i18n } = useTranslation();
+    const allowed_language_keys: string[] = Object.keys(getAllowedLanguages());
+    const initial_values = { language_code: current_language };
+    return (
+        <Formik
+            initialValues={initial_values}
+            onSubmit={async values => {
+                const { language_code } = values;
+                await changeLanguage(language_code, changeCurrentLanguage);
+                await i18n.changeLanguage?.(language_code);
+            }}
+        >
+            {({ handleSubmit, setFieldValue, values }: FormikHandlers & FormikHelpers<FormikValues> & FormikValues) => {
+                return (
+                    <form onSubmit={handleSubmit} className='account-form account-form--language-settings'>
+                        <div className='settings-language'>
+                            <DesktopWrapper>
+                                <FormSubHeader title={localize('Select Language')} />
+                            </DesktopWrapper>
+                            <div className='settings-language__language-container'>
+                                {allowed_language_keys.map(language_key => {
+                                    return (
+                                        <LanguageRadioButton
+                                            key={language_key}
+                                            id={language_key}
+                                            language_code={language_key}
+                                            is_current_language={values.language_code === language_key}
+                                            name='language-radio-group'
+                                            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                                                setFieldValue('language_code', event.target.value)
+                                            }
+                                        />
+                                    );
+                                })}
+                            </div>
+                        </div>
+                        <FormFooter>
+                            <Button
+                                className='account-form__footer-btn'
+                                type='submit'
+                                data-testid={'submit-button'}
+                                has_effect
+                                text={localize('Submit')}
+                                large
+                                primary
+                                is_disabled={isCurrentLanguage(values.language_code)}
+                            />
+                        </FormFooter>
+                    </form>
+                );
+            }}
+        </Formik>
+    );
+};
+
+export default connect(({ common, ui }: TCoreStore) => ({
+    changeCurrentLanguage: common.changeCurrentLanguage,
+    current_language: common.current_language,
+    toggleSettingsModal: ui.toggleSettingsModal,
+    changeLanguage: common.changeLanguage,
+    isCurrentLanguage: common.isCurrentLanguage,
+}))(LanguageSettings);

packages/core/src/App/Components/Layout/Header/menu-links.jsx

@@ -37,7 +37,7 @@ const MenuLinks = ({ is_logged_in, items, is_pre_appstore }) => (
                             <MenuItems
                                 key={`${item.icon}${item.id}`}
                                 item={item}
-                                hide_menu_item={item.text() === 'Reports' && is_pre_appstore}
+                                hide_menu_item={item?.link_to?.toLowerCase() === '/reports' && is_pre_appstore}
                             />
                         )
                     );

packages/core/src/Stores/common-store.js

@@ -289,6 +289,8 @@ export default class CommonStore extends BaseStore {
         });
     };
 
+    isCurrentLanguage = lang => lang === this.current_language;
+
     getExchangeRate = async (from_currency, to_currency) => {
         const { exchange_rates } = await BinarySocket.exchange_rates(from_currency);
 

packages/core/src/sass/app/_common/components/settings-language.scss

@@ -2,6 +2,7 @@
 .settings-language {
     @include mobile {
         display: flex;
+        padding: 1.5rem 1.5rem 8rem;
     }
 
     &__language-container {
@@ -24,6 +25,9 @@
             align-items: center;
             border-radius: $BORDER_RADIUS;
             padding: 16px;
+            @include mobile {
+                padding: 8px;
+            }
             text-decoration: none;
             background-color: var(--state-normal);
             cursor: pointer;
@@ -57,5 +61,13 @@
                 font-size: 1.4rem;
             }
         }
+        &--radio-button {
+            display: none;
+        }
+    }
+}
+.account-form {
+    &--language-settings {
+        overflow: auto !important;
     }
 }