Merge pull request #720 from topcoder-platform/profiles-app

Profiles app QA fixes -> dev

Author: kkartunov

package.json

@@ -32,6 +32,7 @@
     "apexcharts": "^3.36.0",
     "axios": "^1.1.2",
     "browser-cookies": "^1.2.0",
+    "city-timezones": "^1.2.1",
     "classnames": "^2.3.2",
     "contentful": "^9.2.5",
     "country-calling-code": "0.0.3",

src/apps/profiles/src/member-profile/links/MemberLinks.module.scss

@@ -24,6 +24,10 @@
             svg {
                 width: 24px;
                 height: 24px;
+
+                path {
+                    fill: #333333;
+                }
             }
         }
     }

src/apps/profiles/src/member-profile/links/MemberLinks.tsx

@@ -6,8 +6,6 @@ import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } fro
 import {
     IconOutline,
     SocialIconFacebook,
-    SocialIconInstagram,
-    SocialIconLinkedIn,
     SocialIconTwitter,
     SocialIconYoutube,
 } from '~/libs/ui'
@@ -16,6 +14,9 @@ import { EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 
 import { ModifyMemberLinksModal } from './ModifyMemberLinksModal'
+import { ReactComponent as GitHubLinkIcon } from './assets/github-link-icon.svg'
+import { ReactComponent as InstagramLinkIcon } from './assets/instagram-link-icon.svg'
+import { ReactComponent as LinkedInLinkIcon } from './assets/linkedIn-link-icon.svg'
 import styles from './MemberLinks.module.scss'
 
 interface MemberLinksProps {
@@ -27,12 +28,14 @@ export function renderLinkIcon(linkName: string): JSX.Element {
     switch (linkName) {
         case 'Facebook':
             return <SocialIconFacebook />
+        case 'GitHub':
+            return <GitHubLinkIcon />
         case 'Twitter':
             return <SocialIconTwitter />
         case 'LinkedIn':
-            return <SocialIconLinkedIn />
+            return <LinkedInLinkIcon />
         case 'Instagram':
-            return <SocialIconInstagram />
+            return <InstagramLinkIcon />
         case 'YouTube':
             return <SocialIconYoutube />
         default:

src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/link-types.config.ts

@@ -3,7 +3,7 @@ export const linkTypes: Array<{[key: string]: string}> = [
         name: 'Facebook',
     },
     {
-        name: 'Twitter',
+        name: 'GitHub',
     },
     {
         name: 'Instagram',
@@ -12,9 +12,12 @@ export const linkTypes: Array<{[key: string]: string}> = [
         name: 'LinkedIn',
     },
     {
-        name: 'YouTube',
+        name: 'Twitter',
     },
     {
         name: 'Website',
     },
+    {
+        name: 'YouTube',
+    },
 ]

src/apps/profiles/src/member-profile/links/assets/github-link-icon.svg

@@ -1,4 +1,5 @@
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
+import cityTimezones from 'city-timezones'
 import moment from 'moment-timezone'
 
 import { useCountryName, UserProfile } from '~/libs/core'
@@ -12,22 +13,46 @@ interface MemberLocalInfoProps {
 
 const MemberLocalInfo: FC<MemberLocalInfoProps> = (props: MemberLocalInfoProps) => {
 
-    const memberCountry: string | undefined = useCountryName(props.profile?.homeCountryCode)
+    const memberCountry: string | undefined
+        = useCountryName(props.profile?.homeCountryCode || props.profile?.competitionCountryCode)
+
+    const city: string | undefined = props.profile?.addresses?.[0]?.city
+
+    const memberCityTimezone: string | undefined = useMemo(() => {
+        if (!city) {
+            return undefined
+        }
+
+        const cityTimezoneData: cityTimezones.CityData[] = cityTimezones.lookupViaCity(city)
+        let memberTimezone: string | undefined
+
+        if (!cityTimezoneData?.length) {
+            memberTimezone = `${memberCountry}/${city}`
+        } else {
+            memberTimezone = cityTimezoneData[0].timezone
+        }
+
+        return moment.tz.zone(memberTimezone) ? memberTimezone : undefined
+    }, [city, memberCountry])
 
     return (
         <div className={styles.container}>
             <div className={styles.localInfo}>
                 <IconSolid.LocationMarkerIcon />
-                {memberCountry}
-            </div>
-            <div className={styles.localInfo}>
-                <IconSolid.ClockIcon />
-                Local time:
-                {' '}
-                {moment()
-                    .tz('America/New_York')
-                    .format('HH:MM')}
+                {`${!!city ? `${city}, ` : ''}${memberCountry}`}
             </div>
+            {
+                !!memberCityTimezone && (
+                    <div className={styles.localInfo}>
+                        <IconSolid.ClockIcon />
+                        Local time:
+                        {' '}
+                        {moment()
+                            .tz(memberCityTimezone)
+                            .format('hh:mm')}
+                    </div>
+                )
+            }
         </div>
     )
 }

src/apps/profiles/src/member-profile/links/assets/instagram-link-icon.svg

@@ -3,7 +3,14 @@ import { toast } from 'react-toastify'
 import { reject } from 'lodash'
 
 import { BaseModal, Button, FormToggleSwitch } from '~/libs/ui'
-import { updateMemberTraitsAsync, UserProfile, UserTrait, UserTraitCategoryNames, UserTraitIds } from '~/libs/core'
+import {
+    createMemberTraitsAsync,
+    updateMemberTraitsAsync,
+    UserProfile,
+    UserTrait,
+    UserTraitCategoryNames,
+    UserTraitIds,
+} from '~/libs/core'
 
 import styles from './OpenForGigsModifyModal.module.scss'
 
@@ -15,6 +22,11 @@ interface OpenForGigsModifyModalProps {
     profile: UserProfile
 }
 
+const methodsMap: { [key: string]: any } = {
+    create: createMemberTraitsAsync,
+    update: updateMemberTraitsAsync,
+}
+
 const OpenForGigsModifyModal: FC<OpenForGigsModifyModalProps> = (props: OpenForGigsModifyModalProps) => {
     const [isSaving, setIsSaving]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -32,7 +44,7 @@ const OpenForGigsModifyModal: FC<OpenForGigsModifyModalProps> = (props: OpenForG
         const updatedPersonalizationTraits: UserTrait[]
             = reject(props.memberPersonalizationTraitsFullData, (trait: UserTrait) => !!trait.availableForGigs)
 
-        updateMemberTraitsAsync(props.profile.handle, [{
+        methodsMap[!!props.memberPersonalizationTraitsFullData ? 'update' : 'create'](props.profile.handle, [{
             categoryName: UserTraitCategoryNames.personalization,
             traitId: UserTraitIds.personalization,
             traits: {

src/apps/profiles/src/member-profile/links/assets/linkedIn-link-icon.svg

@@ -14,11 +14,16 @@
             position: absolute;
             right: 0;
             top: 0;
-            color: $turq-120;
+            color: $tc-white;
 
             svg {
                 width: 70px;
                 height: 70px;
+                fill: $turq-120;
+
+                path {
+                    fill: $turq-120;
+                }
             }
         }