Support settings tabs via hash urls

Author: kkartunov

src/apps/accounts/src/settings/tabs/AccountSettingsTabs.tsx

@@ -1,9 +1,10 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
+import { useLocation } from 'react-router-dom'
 
 import { UserProfile } from '~/libs/core'
 import { TabsNavbar } from '~/libs/ui'
 
-import { AccountSettingsTabsConfig, AccountSettingsTabViews } from './config'
+import { AccountSettingsTabsConfig, AccountSettingsTabViews, getHashFromTabId, getTabIdFromHash } from './config'
 import { AccountTab } from './account'
 import { PreferencesTab } from './preferences'
 import styles from './AccountSettingsTabs.module.scss'
@@ -13,11 +14,16 @@ interface AccountSettingsTabsProps {
 }
 
 const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSettingsTabsProps) => {
+    const { hash }: { hash: string } = useLocation()
+
+    const activeTabHash: string = useMemo<string>(() => getTabIdFromHash(hash), [hash])
+
     const [activeTab, setActiveTab]: [string, Dispatch<SetStateAction<string>>]
-        = useState<string>(AccountSettingsTabViews.account)
+        = useState<string>(activeTabHash)
 
     function handleTabChange(tabId: string): void {
         setActiveTab(tabId)
+        window.location.hash = getHashFromTabId(tabId)
     }
 
     return (

src/apps/accounts/src/settings/tabs/config/account-settings-tabs-config.ts

@@ -20,3 +20,21 @@ export const AccountSettingsTabsConfig: TabsNavItem[] = [
         title: 'Payment',
     },
 ]
+
+export function getHashFromTabId(tabId: string): string {
+    switch (tabId) {
+        case AccountSettingsTabViews.account: return '#account'
+        case AccountSettingsTabViews.preferences: return '#preferences'
+        case AccountSettingsTabViews.payment: return '#payment'
+        default: return '#account'
+    }
+}
+
+export function getTabIdFromHash(hash: string): string {
+    switch (hash) {
+        case '#account': return AccountSettingsTabViews.account
+        case '#preferences': return AccountSettingsTabViews.preferences
+        case '#payment': return AccountSettingsTabViews.payment
+        default: return AccountSettingsTabViews.account
+    }
+}

src/apps/accounts/src/settings/tabs/preferences/PreferencesTab.tsx

@@ -78,8 +78,8 @@ const PreferencesTab: FC<PreferencesTabProps> = (props: PreferencesTabProps) =>
                                     <div className={styles.subAction}>
                                         <form action={mailChimpFormAction} method='post' id='mc-embedded-subscribe-form' name='mc-embedded-subscribe-form' noValidate>
                                             <input type='email' value={props.profile.email} readOnly name='EMAIL' id='mce-EMAIL' />
-                                            <input type='checkbox' id='gdpr_11101' name='gdpr[11101]' value='Y' />
-                                            <input type='text' name='b_65bd5a1857b73643aad556093_28bfd3c062' value='' />
+                                            <input type='checkbox' id='gdpr_11101' name='gdpr[11101]' value='Y' readOnly />
+                                            <input type='text' name='b_65bd5a1857b73643aad556093_28bfd3c062' value='' readOnly />
                                             <Button
                                                 label={emailPreferences.status === 'subscribed' ? 'Unsubscribe' : 'Subscribe'}
                                                 secondary