MP-73 allow members to select how to display names

kkartunov · kkartunov · commit 64f4a19ebde5 · 2023-07-19T11:51:55.000+03:00
diff --git a/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss b/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.module.scss
@@ -6,8 +6,30 @@
     width: 100%;
 }
 
-.nameToggle {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
+.modalContent {
+    :global(.input-el) {
+        @include ltelg {
+            margin-bottom: $sp-4;
+        }
+    }
+
+    .radioButtons {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin-top: $sp-4;
+
+        @include ltelg {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        >div:not(:last-child) {
+            margin-right: $sp-8;
+
+            @include ltelg {
+                margin-bottom: $sp-2;
+            }
+        }
+    }
+}
diff --git a/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx b/src/apps/profiles/src/member-profile/profile-header/ModifyMemberNameModal/ModifyMemberNameModal.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { Dispatch, FC, FocusEvent, SetStateAction, useState } from 'react'
 import { reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
 
@@ -11,7 +11,9 @@ import {
     UserTraitCategoryNames,
     UserTraitIds,
 } from '~/libs/core'
-import { BaseModal, Button, FormToggleSwitch, InputText } from '~/libs/ui'
+import { BaseModal, Button, InputRadio, InputText } from '~/libs/ui'
+
+import { NamesAndHandleAppearance } from '../ProfileHeader'
 
 import styles from './ModifyMemberNameModal.module.scss'
 
@@ -20,7 +22,7 @@ interface ModifyMemberNameModalProps {
     onClose: () => void
     onSave: () => void
     memberPersonalizationTraitsData: UserTrait[] | undefined
-    hideMyNameInProfile: boolean
+    namesAndHandleAppearance: NamesAndHandleAppearance | undefined
 }
 
 const methodsMap: { [key: string]: any } = {
@@ -47,8 +49,10 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
     const [currentLastName, setCurrentLastName]: [string, Dispatch<SetStateAction<string>>]
         = useState<string>(props.profile.lastName)
 
-    const [hideMyNameInProfile, setHideMyNameInProfile]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(props.hideMyNameInProfile)
+    const [namesAndHandleAppearance, setNamesAndHandleAppearance]: [
+        NamesAndHandleAppearance | undefined, Dispatch<SetStateAction<NamesAndHandleAppearance | undefined>>
+    ]
+        = useState<NamesAndHandleAppearance | undefined>(props.namesAndHandleAppearance)
 
     function handleFirstNameChange(e: React.ChangeEvent<HTMLInputElement>): void {
         setCurrentFirstName(e.target.value)
@@ -60,8 +64,8 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
         setIsFormChanged(true)
     }
 
-    function handleShowMyNameInProfileToggle(): void {
-        setHideMyNameInProfile(!hideMyNameInProfile)
+    function handleShowMyNameInProfileToggle(event: FocusEvent<HTMLInputElement>): void {
+        setNamesAndHandleAppearance(event.target.value as NamesAndHandleAppearance)
         setIsFormChanged(true)
     }
 
@@ -99,9 +103,9 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
                     data: [
                         ...reject(
                             props.memberPersonalizationTraitsData,
-                            (trait: any) => trait.hideNamesOnProfile,
+                            (trait: any) => trait.namesAndHandleAppearance,
                         ),
-                        { hideNamesOnProfile: hideMyNameInProfile },
+                        { namesAndHandleAppearance },
                     ],
                 },
             }]),
@@ -121,6 +125,7 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
             onClose={props.onClose}
             open
             title='My Name'
+            size='lg'
             buttons={(
                 <div className={styles.modalButtons}>
                     <Button
@@ -160,12 +165,31 @@ const ModifyMemberNameModal: FC<ModifyMemberNameModalProps> = (props: ModifyMemb
                     onChange={handleLastNameChange}
                     value={currentLastName}
                 />
-                <div className={styles.nameToggle}>
-                    <p>Hide my names on profile</p>
-                    <FormToggleSwitch
-                        name='hideMyNameInProfile'
+                <p className='body-main-bold'>Choose a combination to show:</p>
+                <div className={styles.radioButtons}>
+                    <InputRadio
+                        name='showMyNameInProfile'
+                        label='First and Last Name Only'
+                        value='namesOnly'
+                        checked={namesAndHandleAppearance === 'namesOnly'}
+                        onChange={handleShowMyNameInProfileToggle}
+                        id='namesOnly'
+                    />
+                    <InputRadio
+                        name='showMyNameInProfile'
+                        label='Handle Only'
+                        value='handleOnly'
+                        checked={namesAndHandleAppearance === 'handleOnly'}
+                        onChange={handleShowMyNameInProfileToggle}
+                        id='handleOnly'
+                    />
+                    <InputRadio
+                        name='showMyNameInProfile'
+                        label='Both'
+                        value='namesAndHandle'
+                        checked={namesAndHandleAppearance === 'namesAndHandle'}
                         onChange={handleShowMyNameInProfileToggle}
-                        value={hideMyNameInProfile}
+                        id='namesAndHandle'
                     />
                 </div>
             </div>
diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
@@ -27,6 +27,8 @@ interface ProfileHeaderProps {
     refreshProfile: (handle: string) => void
 }
 
+export type NamesAndHandleAppearance = 'namesOnly' | 'handleOnly' | 'namesAndHandle'
+
 const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     const isMobile: boolean = useCheckIsMobile()
 
@@ -56,9 +58,9 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
             (trait: UserTrait) => trait.availableForGigs,
         ), [memberPersonalizationTraits])
 
-    const hideNamesOnProfile: UserTrait | undefined
+    const namesAndHandleAppearanceData: UserTrait | undefined
         = useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
-            (trait: UserTrait) => trait.hideNamesOnProfile,
+            (trait: UserTrait) => trait.namesAndHandleAppearance,
         ), [memberPersonalizationTraits])
 
     useEffect(() => {
@@ -172,7 +174,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                     <div className={styles.nameWrap}>
                         <p>
                             {
-                                hideNamesOnProfile
+                                namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly'
                                     ? props.profile.handle
                                     : `${props.profile.firstName} ${props.profile.lastName}`
                             }
@@ -188,7 +190,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
 
                     <p className={styles.memberSince}>
                         {
-                            !hideNamesOnProfile ? (
+                            namesAndHandleAppearanceData?.namesAndHandleAppearance === 'namesAndHandle' ? (
                                 <>
                                     <span>{props.profile.handle}</span>
                                     {' '}
@@ -220,7 +222,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                         onSave={handleModifyNameModalSave}
                         profile={props.profile}
                         memberPersonalizationTraitsData={memberPersonalizationTraits?.[0]?.traits?.data}
-                        hideMyNameInProfile={hideNamesOnProfile?.hideNamesOnProfile || false}
+                        namesAndHandleAppearance={namesAndHandleAppearanceData?.namesAndHandleAppearance}
                     />
                 )
             }
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/index.ts b/src/libs/ui/lib/components/form/form-groups/form-input/index.ts
@@ -8,3 +8,4 @@ export * from './input-text'
 export * from './input-textarea'
 export { inputOptional, InputWrapper } from './input-wrapper'
 export * from './input-date-picker'
+export * from './input-radio'
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-radio/InputRadio.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-radio/InputRadio.module.scss
@@ -0,0 +1,57 @@
+@import '../../../../../styles/includes';
+
+.container {
+    display: flex;
+    align-items: center;
+
+    input[type="radio"] {
+        -webkit-appearance: none;
+        appearance: none;
+        /* For iOS < 15 to remove gradient background */
+        background-color: #fff;
+        /* Not removed via appearance */
+        margin: 0;
+        font: inherit;
+        color: $black-60;
+        width: 20px;
+        height: 20px;
+        border: 1.5px solid $black-60;
+        border-radius: 50%;
+        transform: translateY(-0.075em);
+        display: grid;
+        place-content: center;
+    }
+
+    input[type="radio"]::before {
+        content: "";
+        width: 0.65em;
+        height: 0.65em;
+        border-radius: 50%;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 1em 1em $turq-160;
+    }
+
+    input[type="radio"]:checked::before {
+        transform: scale(1);
+    }
+
+    &:has(input[disabled]) {
+        input[type="radio"] {
+            border-color: $black-20;
+
+            &::before {
+                box-shadow: inset 1em 1em $black-20;
+            }
+        }
+
+        label {
+            color: $black-60;
+        }
+    }
+
+    label {
+        color: $black-100;
+        margin-left: $sp-2;
+    }
+}
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-radio/InputRadio.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-radio/InputRadio.tsx
@@ -0,0 +1,34 @@
+import { FC, FocusEvent } from 'react'
+
+import styles from './InputRadio.module.scss'
+
+interface InputRadioProps {
+    readonly checked?: boolean
+    readonly disabled?: boolean
+    readonly name: string
+    readonly onChange: (event: FocusEvent<HTMLInputElement>) => void
+    readonly value: string
+    readonly id: string
+    readonly label?: string
+}
+
+const InputRadio: FC<InputRadioProps> = (props: InputRadioProps) => (
+    <div className={styles.container}>
+        <input
+            checked={props.checked}
+            disabled={!!props.disabled}
+            name={props.name}
+            onChange={props.onChange}
+            type='radio'
+            value={props.value}
+            id={props.id}
+        />
+        {
+            props.label && (
+                <label htmlFor={props.id}>{props.label}</label>
+            )
+        }
+    </div>
+)
+
+export default InputRadio
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-radio/index.ts b/src/libs/ui/lib/components/form/form-groups/form-input/input-radio/index.ts
@@ -0,0 +1 @@
+export { default as InputRadio } from './InputRadio'

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as InputRadio } from './InputRadio'`