Refactor BannerComponent.vue to handle caller data via a computed property and define type-checking utility for Thirdparty.

- Replaced inline caller logic with a reusable `caller` computed property in `BannerComponent.vue`.
- Added `isThirdparty` and `isBaseThirdParty` utility functions to validate `Thirdparty` types in `types.ts`.

src/Bundle/ChillThirdPartyBundle/Resources/public/types.ts

@@ -28,6 +28,18 @@ export interface BaseThirdParty {
   updatedBy: User | null;
 }
 
+function isBaseThirdParty(t: unknown): t is BaseThirdParty {
+  if (typeof t !== "object" || t === null) return false;
+  const o = t as Partial<BaseThirdParty>;
+  return (
+    (o as any).type === "thirdparty" &&
+    typeof o.id === "number" &&
+    typeof o.text === "string" &&
+    (o.kind === "" || o.kind === "contact" || o.kind === "child" || o.kind === "company") &&
+    typeof o.active === "boolean"
+  );
+}
+
 export interface ThirdpartyCompany extends BaseThirdParty {
   kind: "company";
   text: string;
@@ -98,6 +110,15 @@ export function isThirdpartyContact(
 
 export type Thirdparty = ThirdpartyCompany | ThirdpartyContact | ThirdpartyChild;
 
+
+export function isThirdparty(t: unknown): t is Thirdparty {
+  if (!isBaseThirdParty(t)) {
+    return false;
+  }
+
+  return (isThirdpartyCompany(t) || isThirdpartyContact(t) || isThirdpartyChild(t));
+}
+
 interface ThirdpartyType {
   key: string;
   value: string;

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue

@@ -55,7 +55,7 @@
               })
             }}
           </h3>
-          <person-component :entities="[ticket.caller] as Person[]" />
+          <person-component :entities="caller" />
         </div>
         <div
           class="col-md-4 col-sm-12 d-flex flex-column align-items-start"
@@ -131,6 +131,7 @@ import { useStore } from "vuex";
 
 // Utils
 import { getTicketTitle, motiveHierarchyLabel } from "../utils/utils";
+import {isThirdparty, Thirdparty} from "../../../../../../../ChillThirdPartyBundle/Resources/public/types";
 
 const props = defineProps<{
   ticket: Ticket;
@@ -196,6 +197,17 @@ const isEmergency = computed({
     }
   },
 });
+const caller = computed<Person[]|Thirdparty[]>(() => {
+  if (null === props.ticket.caller) {
+    return [];
+  }
+
+  if (isThirdparty(props.ticket.caller)) {
+    return [props.ticket.caller];
+  } else {
+    return [props.ticket.caller];
+  }
+})
 
 const since = computed(() => {
   return store.getters.getSinceCreated(today.value);