From cc4b7a7cce0b248107f0c0dc1b0f213028770c7c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:40:38 -0500
Subject: [PATCH] refactor(CompanionRefactor): Format invalid
 companion/observer references

---
 .../mobility-profile/companion-selector.tsx   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/lib/components/user/mobility-profile/companion-selector.tsx b/lib/components/user/mobility-profile/companion-selector.tsx
index b6de4a08d..fbd5bb415 100644
--- a/lib/components/user/mobility-profile/companion-selector.tsx
+++ b/lib/components/user/mobility-profile/companion-selector.tsx
@@ -3,6 +3,7 @@ import React, { lazy, Suspense, useCallback } from 'react'
 
 import { AppReduxState } from '../../../util/state-types'
 import { CompanionInfo, User } from '../types'
+import StatusBadge from '../../util/status-badge'
 
 export interface Option {
   label: string
@@ -23,6 +24,22 @@ function makeOption(companion?: CompanionInfo) {
   }
 }
 
+function isConfirmed({ status = '' }: CompanionInfo) {
+  return status === 'CONFIRMED'
+}
+
+function formatOptionLabel(option: Option) {
+  if (!isConfirmed(option.value)) {
+    return (
+      <>
+        {option.label} <StatusBadge status={option.value.status} />
+      </>
+    )
+  } else {
+    return option.label
+  }
+}
+
 const CompanionSelector = ({
   disabled,
   excludedUsers = [],
@@ -40,7 +57,7 @@ const CompanionSelector = ({
 }): JSX.Element => {
   const companionOptions = (loggedInUser?.relatedUsers || [])
     .filter(notNull)
-    .filter(({ status = '' }) => status === 'CONFIRMED')
+    .filter(isConfirmed)
     .map(makeOption)
   const companionValues = multi
     ? selectedCompanions?.filter(notNull).map(makeOption)
@@ -56,6 +73,7 @@ const CompanionSelector = ({
   return (
     <Suspense fallback={<span>...</span>}>
       <Select
+        formatOptionLabel={formatOptionLabel}
         isClearable
         isDisabled={disabled}
         isMulti={multi}