Language Dropdown (#9061)

libs/model/src/subscription/index.ts

@@ -9,6 +9,6 @@ export * from './GetCommunityAlerts.query';
 export * from './GetSubscriptionPreferences.query';
 export * from './GetThreadSubscriptions.query';
 export * from './RegisterClientRegistrationToken.command';
-export * from './UnSubscribeEmail.command';
 export * from './UnregisterClientRegistrationToken.command';
+export * from './UnSubscribeEmail.command';
 export * from './UpdateSubscriptionPreferences.command';

packages/commonwealth/client/scripts/helpers/feature-flags.ts

@@ -35,6 +35,9 @@ const featureFlags = {
   newMobileNav: buildFlag(process.env.FLAG_NEW_MOBILE_NAV),
   rewardsPage: buildFlag(process.env.FLAG_REWARDS_PAGE),
   growl: buildFlag(process.env.FLAG_GROWL),
+  languageSelectorEnabled: buildFlag(
+    process.env.FLAG_LANGUAGE_SELECTOR_ENABLED,
+  ),
 };
 
 export type AvailableFeatureFlag = keyof typeof featureFlags;

packages/commonwealth/client/scripts/state/ui/languagePreference/index.ts

@@ -0,0 +1,2 @@
+export * from './languagePreference';
+export { default } from './languagePreference';

packages/commonwealth/client/scripts/state/ui/languagePreference/languagePreference.ts

@@ -0,0 +1,97 @@
+import { createBoundedUseStore } from 'state/ui/utils';
+import { devtools, persist } from 'zustand/middleware';
+import { createStore } from 'zustand/vanilla';
+
+export const SUPPORTED_LANGUAGES = {
+  EN: {
+    value: 'en',
+    label: 'English',
+    flag: '🇺🇸',
+    abbr: 'EN',
+  },
+  RU: {
+    value: 'ru',
+    label: 'Русский',
+    flag: '🇷🇺',
+    abbr: 'RU',
+  },
+  DE: {
+    value: 'de',
+    label: 'Deutsch',
+    flag: '🇩🇪',
+    abbr: 'DE',
+  },
+  UK: {
+    value: 'uk',
+    label: 'Українська',
+    flag: '🇺🇦',
+    abbr: 'UK',
+  },
+  VI: {
+    value: 'vi',
+    label: 'Tiếng Việt',
+    flag: '🇻🇳',
+    abbr: 'VI',
+  },
+  TR: {
+    value: 'tr',
+    label: 'Türkçe',
+    flag: '🇹🇷',
+    abbr: 'TR',
+  },
+  HI: {
+    value: 'hi',
+    label: 'हिन्दी',
+    flag: '🇮🇳',
+    abbr: 'HI',
+  },
+  CN: {
+    value: 'cn',
+    label: '简体中文',
+    flag: '🇨🇳',
+    abbr: 'CN',
+  },
+} as const;
+
+export type SupportedLanguageKey = keyof typeof SUPPORTED_LANGUAGES;
+export type SupportedLanguage =
+  (typeof SUPPORTED_LANGUAGES)[SupportedLanguageKey];
+
+const DEFAULT_LANGUAGE = SUPPORTED_LANGUAGES.EN;
+
+interface LanguagePreferenceStore {
+  language: SupportedLanguage;
+  getCurrentLanguage: () => SupportedLanguage;
+  setLanguage: (language: SupportedLanguage) => void;
+}
+
+export const LanguagePreferenceStore = createStore<LanguagePreferenceStore>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        language: DEFAULT_LANGUAGE,
+        getCurrentLanguage: () => get().language,
+        setLanguage: (language: SupportedLanguage) => {
+          const isValidLanguage = Object.values(SUPPORTED_LANGUAGES).some(
+            (lang) => lang.value === language.value,
+          );
+          if (isValidLanguage) {
+            set({ language: language });
+          }
+        },
+      }),
+      {
+        name: 'user-language-preference',
+        partialize: (state) => ({
+          language: state.language,
+        }),
+      },
+    ),
+  ),
+);
+
+const useLanguagePreferenceStore = createBoundedUseStore(
+  LanguagePreferenceStore,
+);
+
+export default useLanguagePreferenceStore;

packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.scss

@@ -37,6 +37,20 @@
     gap: 8px;
     height: 100%;
 
+    .language-selector {
+      margin-right: 8px;
+
+      .dropdown-wrapper {
+        min-width: 140px;
+
+        .dropdown-options-display {
+          max-height: 250px;
+          overflow-y: auto;
+          @include visibleScrollbar(light);
+        }
+      }
+    }
+
     .header-loader {
       padding: 0 20px;
     }
@@ -114,3 +128,47 @@
     }
   }
 }
+
+.LanguageSelector {
+  width: 160px;
+
+  .language-menu-item {
+    justify-content: space-between;
+  }
+}
+
+.LanguageSelectorTriggerButton {
+  width: 80px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid $neutral-200;
+  background-color: $white;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+
+  .Text {
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  &:hover {
+    background-color: $neutral-50;
+  }
+
+  &.isOpen {
+    background-color: $neutral-100;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  .caret-icon {
+    fill: $neutral-500;
+    margin-left: 8px;
+  }
+}

packages/commonwealth/client/scripts/views/components/SublayoutHeader/DesktopHeader/DesktopHeader.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useState } from 'react';
 
+import { useFlag } from 'hooks/useFlag';
 import { useCommonNavigate } from 'navigation/helpers';
 import useSidebarStore from 'state/ui/sidebar';
 import KnockNotifications from 'views/components/KnockNotifications';
@@ -15,13 +16,17 @@ import { HelpMenuPopover } from 'views/menus/help_menu';
 
 import UserDropdown from './UserDropdown';
 
-import { useFlag } from 'hooks/useFlag';
 import { useFetchCustomDomainQuery } from 'state/api/configuration';
+import useLanguagePreferenceStore, {
+  SUPPORTED_LANGUAGES,
+} from 'state/ui/languagePreference';
 import useUserStore from 'state/ui/user';
 import AuthButtons from 'views/components/SublayoutHeader/AuthButtons';
 import { AuthModalType } from 'views/modals/AuthModal';
 import { capDecimals } from 'views/modals/ManageCommunityStakeModal/utils';
+import { PopoverMenu } from '../../component_kit/CWPopoverMenu';
 import { CWText } from '../../component_kit/cw_text';
+
 import './DesktopHeader.scss';
 
 interface DesktopHeaderProps {
@@ -32,10 +37,15 @@ interface DesktopHeaderProps {
 const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => {
   const navigate = useCommonNavigate();
   const rewardsEnabled = useFlag('rewardsPage');
+  const languageSelectorEnabled = useFlag('languageSelectorEnabled');
   const { menuVisible, setMenu, menuName, setUserToggledVisibility } =
     useSidebarStore();
+
+  const { getCurrentLanguage, setLanguage } = useLanguagePreferenceStore();
+
   const user = useUserStore();
   const { data: domain } = useFetchCustomDomainQuery();
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleToggle = () => {
     const isVisible = !menuVisible;
@@ -159,6 +169,39 @@ const DesktopHeader = ({ onMobile, onAuthModalOpen }: DesktopHeaderProps) => {
           )}
         </div>
 
+        {languageSelectorEnabled && (
+          <PopoverMenu
+            key={getCurrentLanguage().value}
+            className="LanguageSelector"
+            placement="bottom-end"
+            modifiers={[{ name: 'offset', options: { offset: [0, 3] } }]}
+            menuItems={Object.values(SUPPORTED_LANGUAGES).map((lang) => ({
+              type: 'element',
+              element: (
+                <div
+                  className="PopoverMenuItem language-menu-item"
+                  onClick={() => {
+                    setLanguage(lang);
+                    setIsOpen(false);
+                  }}
+                >
+                  <CWText type="b2">{lang.label}</CWText>
+                  <CWText>{lang.flag}</CWText>
+                </div>
+              ),
+            }))}
+            onOpenChange={(open) => setIsOpen(open)}
+            renderTrigger={(onClick) => (
+              <button
+                className={clsx('LanguageSelectorTriggerButton', { isOpen })}
+                onClick={onClick}
+              >
+                <CWText>{getCurrentLanguage().abbr}</CWText>
+                <CWText>{getCurrentLanguage().flag}</CWText>
+              </button>
+            )}
+          />
+        )}
         {user.isLoggedIn && (
           <UserDropdown onAuthModalOpen={() => onAuthModalOpen()} />
         )}

packages/commonwealth/client/scripts/views/components/SublayoutHeader/MobileHeader/MobileHeader.scss

@@ -54,6 +54,43 @@
   }
 }
 
+.LanguageDrawer {
+  .drawer-content {
+    padding: 16px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 24px;
+
+      h4 {
+        @include b1;
+        flex: 1;
+        text-align: center;
+      }
+    }
+
+    .language-options {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 16px;
+
+      .dropdown-wrapper {
+        min-width: 140px;
+
+        .dropdown-options-display {
+          max-height: 250px;
+          overflow-y: auto;
+          @include visibleScrollbar(light);
+        }
+      }
+    }
+  }
+}
+
 .InviteLinkDrawer {
   padding: 0 !important;
 

packages/commonwealth/client/scripts/views/components/SublayoutHeader/MobileHeader/MobileHeader.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { useFlag } from 'hooks/useFlag';
 import { useInviteLinkModal } from 'state/ui/modals';
 import useSidebarStore from 'state/ui/sidebar';
 import useUserStore from 'state/ui/user';
@@ -33,6 +34,7 @@ const MobileHeader = ({
 }: MobileHeaderProps) => {
   const [isUserDrawerOpen, setIsUserDrawerOpen] = useState(false);
   const [isModalOpen, isSetModalOpen] = useState(false);
+  const [isLanguageDrawerOpen, setIsLanguageDrawerOpen] = useState(false);
   const { menuVisible } = useSidebarStore();
   const userData = useUserStore();
   const user = userData.addresses?.[0];
@@ -55,6 +57,19 @@ const MobileHeader = ({
   });
 
   const mobileItems = [
+    {
+      type: 'default',
+      label: (
+        <div className="language-menu-item">
+          <span>Language</span>
+          {/* <span>{getLanguageLabel(getLanguagePreference())}</span> */}
+        </div>
+      ),
+      onClick: () => {
+        setIsUserDrawerOpen(false);
+        setIsLanguageDrawerOpen(true);
+      },
+    },
     ...userMenuItems,
     { type: 'divider' },
     {
@@ -152,6 +167,43 @@ const MobileHeader = ({
         onClose={() => isSetModalOpen(false)}
         open={isModalOpen}
       />
+
+      {useFlag('languageSelectorEnabled') && (
+        <CWDrawer
+          open={isLanguageDrawerOpen}
+          onClose={() => setIsLanguageDrawerOpen(false)}
+          direction="right"
+          className="LanguageDrawer"
+        >
+          <div className="drawer-content">
+            <div className="header">
+              <CWIconButton
+                iconName="close"
+                onClick={() => setIsLanguageDrawerOpen(false)}
+              />
+              <CWText type="h4">Select Language</CWText>
+            </div>
+            <div className="language-options">
+              {/* <CWDropdown
+                options={
+                  [...SUPPORTED_LANGUAGES] as Array<{
+                    label: string;
+                    value: string;
+                  }>
+                }
+                initialValue={{
+                  label: getLanguageLabel(getLanguagePreference()),
+                  value: getLanguagePreference(),
+                }}
+                onSelect={(item) => {
+                  setLanguagePreference(item.value as SupportedLanguage);
+                  setIsLanguageDrawerOpen(false);
+                }}
+              /> */}
+            </div>
+          </div>
+        </CWDrawer>
+      )}
     </>
   );
 };