MP-38 account roles in settings

Author: kkartunov

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

@@ -28,7 +28,7 @@ const AccountSettingsTabs: FC<AccountSettingsTabsProps> = (props: AccountSetting
             />
 
             {activeTab === AccountSettingsTabViews.account && (
-                <AccountTab />
+                <AccountTab profile={props.profile} />
             )}
         </div>
     )

src/apps/accounts/src/settings/tabs/account/AccountTab.tsx

@@ -1,13 +1,19 @@
 import { FC } from 'react'
 
+import { UserProfile } from '~/libs/core'
+
 import { AccountRole } from './account-role'
 import styles from './AccountTab.module.scss'
 
-const AccountTab: FC<{}> = () => (
+interface AccountTabProps {
+    profile: UserProfile
+}
+
+const AccountTab: FC<AccountTabProps> = (props: AccountTabProps) => (
     <div className={styles.container}>
         <h3>ACCOUNT INFORMATION & SECURITY</h3>
 
-        <AccountRole />
+        <AccountRole profile={props.profile} />
     </div>
 )
 

src/apps/accounts/src/settings/tabs/account/account-role/AccountRole.module.scss

@@ -2,4 +2,60 @@
 
 .container {
     margin: $sp-8 0;
+
+    .content {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        margin-bottom: 0;
+
+        @include ltelg {
+            grid-template-columns: 1fr;
+        }
+
+        > p {
+            max-width: 380px;
+        }
+
+        form {
+            display: flex;
+            justify-self: flex-end;
+
+            @include ltelg {
+                flex-direction: column;
+                justify-self: auto;
+                margin-top: $sp-4;
+            }
+
+            .formControlWrap {
+                border: 1px solid $black-20;
+                border-radius: 8px;
+                padding: $sp-6 $sp-4;
+                min-width: 286px;
+                display: flex;
+                justify-content: space-between;
+                margin-right: $sp-8;
+
+                @include ltelg {
+                    margin-right: 0;
+                    margin-bottom: $sp-4;
+                }
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                label {
+                    font-weight: $font-weight-medium;
+                }
+
+                input {
+                    cursor: pointer;
+                }
+            }
+        }
+    }
 }
+
+:global(.react-responsive-modal-closeButton) {
+    display: none;
+}

src/apps/accounts/src/settings/tabs/account/account-role/AccountRole.tsx

@@ -1,14 +1,104 @@
-import { FC } from 'react'
+import { Dispatch, FC, SetStateAction, useState } from 'react'
 
-import { Collapsible } from '~/libs/ui'
+import { BaseModal, Button, Collapsible } from '~/libs/ui'
+import { authUrlLogout, updatePrimaryMemberRoleAsync, UserProfile } from '~/libs/core'
 
 import styles from './AccountRole.module.scss'
 
-const AccountRole: FC<{}> = () => (
-    <Collapsible
-        header={<h3>Account Role</h3>}
-        containerClass={styles.container}
-    />
-)
+interface AccountRoleProps {
+    profile: UserProfile
+}
+// TODO: move to libs/core after discussion
+// we need to have uniq list of TC roles
+enum AccountRoles {
+    CUSTOMER = 'Topcoder Customer',
+    TALENT = 'Topcoder Talent'
+}
+
+const AccountRole: FC<AccountRoleProps> = (props: AccountRoleProps) => {
+    const [memberRole, setMemberRole]: [string, Dispatch<SetStateAction<string>>]
+        = useState<string>(
+            props.profile.roles.includes(AccountRoles.CUSTOMER) ? AccountRoles.CUSTOMER : AccountRoles.TALENT,
+        )
+
+    const [isUpdating, setIsUpdating]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+
+    const [isRoleChangeConfirmed, setIsRoleChangeConfirmed]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
+    function handleRoleChange(): void {
+        const newRole: string = memberRole === AccountRoles.CUSTOMER ? AccountRoles.TALENT : AccountRoles.CUSTOMER
+
+        if (!isUpdating) {
+            setIsUpdating(true)
+            updatePrimaryMemberRoleAsync(newRole)
+                .then(() => {
+                    setMemberRole(newRole)
+                    setIsRoleChangeConfirmed(true)
+                })
+                .finally(() => {
+                    setIsUpdating(false)
+                })
+        }
+    }
+
+    function handleSignOut(): void {
+        window.location.href = authUrlLogout
+    }
+
+    return (
+        <Collapsible
+            header={<h3>Account Role</h3>}
+            containerClass={styles.container}
+            contentClass={styles.content}
+        >
+            <p>
+                Access to Topcoder tools and applications are based on your account role.
+                If you change this setting, you will be required to sign out of your account and login.
+            </p>
+
+            <form>
+                <div className={styles.formControlWrap}>
+                    <label htmlFor='role-1'>Topcoder Talent</label>
+                    <input
+                        type='radio'
+                        name='role'
+                        id='role-1'
+                        onChange={handleRoleChange}
+                        checked={memberRole === AccountRoles.TALENT}
+                    />
+                </div>
+                <div className={styles.formControlWrap}>
+                    <label htmlFor='role-2'>Topcoder Customer</label>
+                    <input
+                        type='radio'
+                        name='role'
+                        id='role-2'
+                        onChange={handleRoleChange}
+                        checked={memberRole === AccountRoles.CUSTOMER}
+                    />
+                </div>
+            </form>
+
+            {
+                isRoleChangeConfirmed && (
+                    <BaseModal
+                        title='Confirmed'
+                        open
+                        // eslint-disable-next-line react/jsx-no-bind, @typescript-eslint/no-empty-function
+                        onClose={() => { }}
+                        buttons={<Button primary onClick={handleSignOut}>Sign Out</Button>}
+                    >
+                        <p>
+                            You have successfully changed your account role.
+                            Please sign out of your account and login to complete this update.
+                        </p>
+                    </BaseModal>
+                )
+            }
+
+        </Collapsible>
+    )
+}
 
 export default AccountRole

src/libs/core/lib/profile/index.ts

@@ -8,3 +8,4 @@ export * from './country-lookup.model'
 export * from './data-providers'
 export * from './user-skill.model'
 export * from './user-badge.model'
+export * from './modify-user-role.model'

src/libs/core/lib/profile/modify-user-role.model.ts

@@ -0,0 +1,13 @@
+export interface ModifyUserRoleRequest {
+    param: {
+        primaryRole: string
+    }
+}
+
+export interface ModifyUserRoleResponse {
+    id: string
+    result: {
+        content: string
+        success: boolean
+    }
+}

src/libs/core/lib/profile/profile-functions/index.ts

@@ -6,6 +6,7 @@ export {
     getPublicAsync as profileGetPublicAsync,
     getVerificationStatusAsync,
     editNameAsync as profileEditNameAsync,
+    updatePrimaryMemberRoleAsync,
 } from './profile.functions'
 export * from './profile-store'
 export * from './rating.functions'

src/libs/core/lib/profile/profile-functions/profile-store/profile-endpoint.config.ts

@@ -25,3 +25,7 @@ export function learnBaseURL(): string {
 export function memberStatsDistroURL(): string {
     return `${EnvironmentConfig.API.V3}/members/stats/distribution`
 }
+
+export function memberModifyRoleURL(): string {
+    return `${EnvironmentConfig.API.V3}/users/updatePrimaryRole`
+}

src/libs/core/lib/profile/profile-functions/profile-store/profile-xhr.store.ts

@@ -1,11 +1,17 @@
-import { xhrGetAsync, xhrPutAsync } from '../../../xhr'
+import { xhrGetAsync, xhrPostAsync, xhrPutAsync } from '../../../xhr'
 import { CountryLookup } from '../../country-lookup.model'
 import { EditNameRequest } from '../../edit-name-request.model'
+import { ModifyUserRoleRequest, ModifyUserRoleResponse } from '../../modify-user-role.model'
 import { UserProfile } from '../../user-profile.model'
 import { UserStats } from '../../user-stats.model'
 import { UserVerify } from '../../user-verify.model'
 
-import { countryLookupURL, profile as profileUrl, verify as verifyUrl } from './profile-endpoint.config'
+import {
+    countryLookupURL,
+    memberModifyRoleURL,
+    profile as profileUrl,
+    verify as verifyUrl,
+} from './profile-endpoint.config'
 
 export function get(handle: string): Promise<UserProfile> {
     return xhrGetAsync<UserProfile>(profileUrl(handle))
@@ -31,3 +37,10 @@ export function getCountryLookup(): Promise<CountryLookup[]> {
     return xhrGetAsync<CountryLookup[]>(countryLookupURL())
         .then((countryLookup: any) => countryLookup.result?.content || [])
 }
+
+export async function updatePrimaryMemberRole(primaryRole: string): Promise<ModifyUserRoleResponse> {
+    return xhrPostAsync<ModifyUserRoleRequest, ModifyUserRoleResponse>(
+        memberModifyRoleURL(),
+        { param: { primaryRole } },
+    )
+}

src/libs/core/lib/profile/profile-functions/profile.functions.ts

@@ -1,13 +1,14 @@
 import { tokenGetAsync, TokenModel, userGetDiceStatusAsync } from '../../auth'
 import { CountryLookup } from '../country-lookup.model'
 import { EditNameRequest } from '../edit-name-request.model'
+import { ModifyUserRoleResponse } from '../modify-user-role.model'
 import { UserProfile } from '../user-profile.model'
 import { UserStats } from '../user-stats.model'
 import { UserVerify } from '../user-verify.model'
 
 import { profileFactoryCreate } from './profile-factory'
 import { getMemberStats, getVerification, profileStoreGet, profileStorePatchName } from './profile-store'
-import { getCountryLookup } from './profile-store/profile-xhr.store'
+import { getCountryLookup, updatePrimaryMemberRole } from './profile-store/profile-xhr.store'
 
 export async function getLoggedInAsync(handle?: string): Promise<UserProfile | undefined> {
 
@@ -63,3 +64,7 @@ export async function getMemberStatsAsync(handle: string): Promise<UserStats | u
 export async function getCountryLookupAsync(): Promise<CountryLookup[]> {
     return getCountryLookup()
 }
+
+export async function updatePrimaryMemberRoleAsync(primaryRole: string): Promise<ModifyUserRoleResponse> {
+    return updatePrimaryMemberRole(primaryRole)
+}