PROD - Talent search deploy and member profile fixes

package.json

@@ -24,6 +24,7 @@
     "@datadog/browser-logs": "^4.21.2",
     "@heroicons/react": "^1.0.6",
     "@popperjs/core": "^2.11.8",
+    "@segment/analytics-next": "^1.53.3",
     "@sprig-technologies/sprig-browser": "^2.20.1",
     "@storybook/addon-actions": "^7.0.5",
     "@storybook/react": "^7.0.5",
@@ -163,7 +164,6 @@
     "@types/redux-logger": "^3.0.9",
     "@types/redux-promise": "^0.5.29",
     "@types/sanitize-html": "^2.6.2",
-    "@types/segment-analytics": "^0.0.34",
     "@types/systemjs": "^6.1.1",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.30.6",

src/apps/platform/src/PlatformApp.tsx

@@ -1,13 +1,19 @@
 import { FC } from 'react'
 import { toast, ToastContainer } from 'react-toastify'
 
+import { AnalyticsBrowser } from '@segment/analytics-next'
 import { useViewportUnitsFix } from '~/libs/shared'
+import { EnvironmentConfig } from '~/config'
 
 import { AppFooter } from './components/app-footer'
 import { AppHeader } from './components/app-header'
 import { Providers } from './providers'
 import { PlatformRouter } from './platform-router'
 
+if (EnvironmentConfig.SEGMENT_ANALYTICS_KEY) {
+    window.tcSegment = AnalyticsBrowser.load({ writeKey: EnvironmentConfig.SEGMENT_ANALYTICS_KEY }) as any
+}
+
 const PlatformApp: FC<{}> = () => {
     useViewportUnitsFix()
 

src/apps/platform/src/components/app-header/AppHeader.tsx

@@ -17,13 +17,13 @@ import classNames from 'classnames'
 import { EnvironmentConfig, PageSubheaderPortalId } from '~/config'
 import {
     authUrlLogin,
-    authUrlLogout,
     authUrlSignup,
     profileContext,
     ProfileContextData,
     routerContext,
     RouterContextData,
 } from '~/libs/core'
+import { ConfigContextValue, useConfigContext } from '~/libs/shared'
 
 import UniNavSnippet from './universal-nav-snippet'
 
@@ -39,6 +39,7 @@ const AppHeader: FC<{}> = () => {
 
     const { activeToolName, activeToolRoute }: RouterContextData = useContext(routerContext)
     const { profile, initialized: profileReady }: ProfileContextData = useContext(profileContext)
+    const { logoutUrl }: ConfigContextValue = useConfigContext()
     const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const headerInit: MutableRefObject<boolean> = useRef(false)
     const navElementId: string = PageSubheaderPortalId
@@ -95,7 +96,7 @@ const AppHeader: FC<{}> = () => {
                 },
                 onReady() { setReady(true) },
                 signIn() { window.location.href = authUrlLogin() },
-                signOut() { window.location.href = authUrlLogout },
+                signOut() { window.location.href = logoutUrl },
                 signUp() { window.location.href = authUrlSignup() },
                 toolName: activeToolName,
                 toolRoot: activeToolRoute,
@@ -110,6 +111,7 @@ const AppHeader: FC<{}> = () => {
         navigationHandler,
         userInfo,
         profileReady,
+        logoutUrl,
     ])
 
     // update uni-nav's tool details
@@ -141,12 +143,14 @@ const AppHeader: FC<{}> = () => {
             navElementId,
             {
                 ...userInfo,
+                signOut() { window.location.href = logoutUrl },
             },
         )
     }, [
         profileReady,
         userInfo,
         navElementId,
+        logoutUrl,
     ])
 
     return (

src/apps/platform/src/providers/Providers.tsx

@@ -1,6 +1,7 @@
 import { FC, ReactNode } from 'react'
 
-import { ProfileProvider } from '~/libs/core'
+import { authUrlLogout, ProfileProvider } from '~/libs/core'
+import { ConfigContextProvider } from '~/libs/shared'
 
 import { PlatformRouterProvider } from './platform-router.provider'
 
@@ -9,11 +10,13 @@ interface ProvidersProps {
 }
 
 const Providers: FC<ProvidersProps> = props => (
-    <ProfileProvider>
-        <PlatformRouterProvider>
-            {props.children}
-        </PlatformRouterProvider>
-    </ProfileProvider>
+    <ConfigContextProvider logoutUrl={authUrlLogout}>
+        <ProfileProvider>
+            <PlatformRouterProvider>
+                {props.children}
+            </PlatformRouterProvider>
+        </ProfileProvider>
+    </ConfigContextProvider>
 )
 
 export default Providers

src/apps/profiles/src/ProfilesApp.tsx

@@ -1,14 +1,19 @@
-import { FC, useContext } from 'react'
+import { FC, useContext, useEffect } from 'react'
 import { Outlet, Routes } from 'react-router-dom'
 
-import { routerContext, RouterContextData } from '~/libs/core'
-import { SharedSwrConfig } from '~/libs/shared'
+import { authUrlLogin, authUrlLogoutFn, routerContext, RouterContextData } from '~/libs/core'
+import { ConfigContextValue, SharedSwrConfig, useConfigContext } from '~/libs/shared'
 
-import { toolTitle } from './profiles.routes'
+import { absoluteRootRoute, toolTitle } from './profiles.routes'
 
 const ProfilesApp: FC<{}> = () => {
+    const { setLogoutUrl }: ConfigContextValue = useConfigContext()
     const { getChildRoutes }: RouterContextData = useContext(routerContext)
 
+    useEffect(() => {
+        setLogoutUrl(authUrlLogoutFn(authUrlLogin(absoluteRootRoute)))
+    }, [setLogoutUrl])
+
     return (
         <SharedSwrConfig>
             <Outlet />

src/apps/profiles/src/lib/helpers.ts

@@ -80,11 +80,23 @@ export function subTrackLabelToHumanName(label: string): string {
 }
 
 export function isValidURL(urlToValidate: string): boolean {
+    const pattern = new RegExp(
+        '^(https?:\\/\\/)?' // protocol
+        + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' // domain name
+        + '((\\d{1,3}\\.){3}\\d{1,3}))' // OR IP (v4) address
+        + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' // port and path
+        + '(\\?[;&a-z\\d%_.~+=-]*)?' // query string
+        + '(\\#[-a-z\\d_]*)?$', // fragment locator
+        'i',
+    )
+
     let url: URL
     try {
         url = new URL(urlToValidate)
     } catch (e) {
-        return false
+        // try to validate with regex
+        // as sometimes new URL is wonky with some urls
+        return pattern.test(urlToValidate)
     }
 
     if (!url.protocol || !url.hostname) {

src/apps/profiles/src/member-badges/MemberBadgesPage.module.scss

@@ -2,16 +2,7 @@
 
 .container {
     .backLink {
-        text-transform: uppercase;
-        color: $turq-160;
-        font-weight: $font-weight-bold;
         margin: $sp-6 0;
-        display: flex;
-        align-items: center;
-
-        svg {
-            margin-right: $sp-2;
-        }
     }
 
     .badgesWrapper {
@@ -67,4 +58,4 @@
             }
         }
     }
-}
+}

src/apps/profiles/src/member-badges/MemberBadgesPage.tsx

@@ -1,16 +1,17 @@
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'
-import { Link, Params, useParams } from 'react-router-dom'
+import { Params, useNavigate, useParams } from 'react-router-dom'
 import { bind } from 'lodash'
 
 import { profileGetPublicAsync, useMemberBadges, UserBadge, UserBadgesResponse, UserProfile } from '~/libs/core'
-import { ContentLayout, LoadingSpinner } from '~/libs/ui'
+import { Button, ContentLayout, IconSolid, LoadingSpinner } from '~/libs/ui'
 
 import { MemberBadgeModal } from '../components'
 
 import styles from './MemberBadgesPage.module.scss'
 
 const MemberBadgesPage: FC<{}> = () => {
     const routeParams: Params<string> = useParams()
+    const navigate = useNavigate()
 
     const [profile, setProfile]: [
         UserProfile | undefined,
@@ -32,6 +33,10 @@ const MemberBadgesPage: FC<{}> = () => {
         setSelectedBadge(badge)
     }, [])
 
+    const handleBackBtn = useCallback(() => {
+        navigate(-1)
+    }, [navigate])
+
     useEffect(() => {
         if (routeParams.memberHandle) {
             profileGetPublicAsync(routeParams.memberHandle)
@@ -55,24 +60,17 @@ const MemberBadgesPage: FC<{}> = () => {
                 <ContentLayout
                     outerClass={styles.container}
                 >
-                    <Link to={`/${profile?.handle}`} className={styles.backLink}>
-                        <svg
-                            xmlns='http://www.w3.org/2000/svg'
-                            width='14'
-                            height='12'
-                            fill='none'
-                            viewBox='0 0 14 12'
+                    <div className={styles.backLink}>
+                        <Button
+                            link
+                            size='lg'
+                            iconToLeft
+                            icon={IconSolid.ArrowLeftIcon}
+                            onClick={handleBackBtn}
                         >
-                            <path
-                                fill='#137D60'
-                                fillRule='evenodd'
-                                // eslint-disable-next-line max-len
-                                d='M6.766 11.366a.8.8 0 01-1.132 0l-4.8-4.8a.8.8 0 010-1.132l4.8-4.8a.8.8 0 111.132 1.132L3.33 5.2h9.27a.8.8 0 010 1.6H3.33l3.435 3.434a.8.8 0 010 1.132z'
-                                clipRule='evenodd'
-                            />
-                        </svg>
-                        Return to Profile
-                    </Link>
+                            Return to profile
+                        </Button>
+                    </div>
 
                     <div className={styles.badgesWrapper}>
                         <h3>COMMUNITY AWARDS & HONORS</h3>

src/apps/profiles/src/member-profile/MemberProfilePage.tsx

@@ -1,7 +1,9 @@
 import { Dispatch, FC, SetStateAction, useCallback, useContext, useEffect, useState } from 'react'
 import { Params, useNavigate, useParams } from 'react-router-dom'
+import { AxiosError } from 'axios'
 
 import { profileContext, ProfileContextData, profileGetPublicAsync, UserProfile } from '~/libs/core'
+import { TALENT_SEARCH_PATHS } from '~/apps/talent-search'
 import { LoadingSpinner } from '~/libs/ui'
 
 import { notifyUniNavi, triggerSprigSurvey } from '../lib'
@@ -34,7 +36,11 @@ const MemberProfilePage: FC<{}> = () => {
                     setProfile({ ...userProfile } as UserProfile)
                     setProfileReady(true)
                 })
-            // TODO: NOT FOUND PAGE redirect/dispaly
+                .catch((e: AxiosError) => {
+                    if (e.code === AxiosError.ERR_BAD_REQUEST && e.response?.status === 404) {
+                        window.location.href = `${TALENT_SEARCH_PATHS.absoluteUrl}?memberNotFound`
+                    }
+                })
         }
     }, [routeParams.memberHandle])
 

src/apps/profiles/src/member-profile/about-me/AboutMe.tsx

@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom'
 import { KeyedMutator } from 'swr'
 import classNames from 'classnames'
 
-import { useMemberTraits, UserProfile, UserTraitIds, UserTraits } from '~/libs/core'
+import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
 
 import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
@@ -38,6 +38,11 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
         props.profile && !props.profile.description
     ), [props.profile])
 
+    const namesAndHandleAppearanceData: UserTrait | undefined
+        = useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
+            (trait: UserTrait) => trait.namesAndHandleAppearance,
+        ), [memberPersonalizationTraits])
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.aboutMe) {
             setIsEditMode(true)
@@ -70,7 +75,11 @@ const AboutMe: FC<AboutMeProps> = (props: AboutMeProps) => {
                 {' '}
                 I&apos;m
                 {' '}
-                {props.profile?.firstName || props.profile?.handle}
+                {
+                    namesAndHandleAppearanceData?.namesAndHandleAppearance === 'handleOnly'
+                        ? props.profile?.handle
+                        : props.profile?.firstName
+                }
             </p>
 
             <MemberRatingCard profile={props.profile} />

src/apps/profiles/src/member-profile/links/ModifyMemberLinksModal/LinkForm/LinkForm.tsx

@@ -52,10 +52,22 @@ const LinkForm: FC<LinkFormProps> = props => {
             return
         }
 
-        props.onSave({
-            name: selectedLinkType,
-            url: trim(selectedLinkURL) || '',
-        })
+        let absoluteURL = trim(selectedLinkURL) || ''
+
+        if (absoluteURL.indexOf('://') > 0 || absoluteURL.indexOf('//') === 0) {
+
+            props.onSave({
+                name: selectedLinkType,
+                url: absoluteURL,
+            })
+        } else {
+            absoluteURL = `https://${absoluteURL}`
+
+            props.onSave({
+                name: selectedLinkType,
+                url: absoluteURL,
+            })
+        }
     }
 
     function handleDiscardClick(): void {

src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
-import { bind, trim } from 'lodash'
+import { bind, omit, trim } from 'lodash'
 import { toast } from 'react-toastify'
 
 import { BaseModal, Button, InputSelect, InputText } from '~/libs/ui'
@@ -18,6 +18,10 @@ interface ModifyLocationModalProps {
     profile: UserProfile
 }
 
+const OMIT_ADDRESS_KEYS_ON_UPDATE = [
+    'createdAt', 'createdBy', 'updatedAt', 'updatedBy',
+]
+
 const ModifyLocationModal: FC<ModifyLocationModalProps> = (props: ModifyLocationModalProps) => {
     const countryLookup: CountryLookup[] | undefined
         = useCountryLookup()
@@ -59,7 +63,7 @@ const ModifyLocationModal: FC<ModifyLocationModalProps> = (props: ModifyLocation
             props.profile.handle,
             {
                 addresses: [{
-                    ...props.profile.addresses ? props.profile.addresses[0] : {},
+                    ...props.profile.addresses ? omit(props.profile.addresses[0], OMIT_ADDRESS_KEYS_ON_UPDATE) : {},
                     city: trim(formValues.city),
                 }],
                 competitionCountryCode: formValues.country,

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx

@@ -76,7 +76,9 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
                         refreshProfile={props.refreshProfile}
                     />
 
-                    <MemberLinks profile={props.profile} authProfile={props.authProfile} />
+                    {props.profile.userId === props.authProfile?.userId && (
+                        <MemberLinks profile={props.profile} authProfile={props.authProfile} />
+                    )}
                 </div>
                 <div className={styles.profileInfoRight}>
                     {props.authProfile?.handle === props.profile.handle && (

src/apps/profiles/src/member-profile/profile-header/HiringFormModal/HiringFormModal.module.scss

@@ -0,0 +1,14 @@
+@import "@libs/ui/styles/includes";
+
+.successSubmit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+    gap: $sp-2;
+
+    > svg {
+        color: $turq-160;
+    }
+}