Display countries on trust center

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx

@@ -125,7 +125,7 @@ function VendorRow(props: {
   const { __ } = useTranslate();
 
   return (
-    <Tr to={`/organizations/${organizationId}/vendors/${vendor.id}`}>
+    <Tr to={`/organizations/${organizationId}/vendors/${vendor.id}/overview`}>
       <Td>
         <div className="flex gap-4 items-center">
           {vendor.name}

apps/console/src/hooks/useTrustCenterQueries.ts

@@ -1,6 +1,7 @@
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { GraphQLError } from "graphql";
 import { buildEndpoint } from "/providers/RelayProviders";
+import { type CountryCode } from "@probo/helpers";
 
 export interface TrustCenterDocument {
   id: string;
@@ -25,6 +26,7 @@ export interface TrustCenterVendor {
   category: string;
   privacyPolicyUrl?: string | null;
   websiteUrl?: string | null;
+  countries: CountryCode[];
 }
 
 interface TrustCenterQueryData {

apps/console/src/trust/components/PublicTrustCenterVendors.tsx

@@ -8,7 +8,7 @@ import {
   Th,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
-import { faviconUrl, sprintf } from "@probo/helpers";
+import { faviconUrl, sprintf, getCountryName, type CountryCode } from "@probo/helpers";
 import type { TrustCenterVendor } from "../pages/PublicTrustCenterPage";
 
 type Props = {
@@ -19,6 +19,8 @@ type Props = {
 export function PublicTrustCenterVendors({ vendors, organizationName }: Props) {
   const { __ } = useTranslate();
 
+  const hasCountriesData = vendors.some(vendor => vendor.countries && vendor.countries.length > 0);
+
   if (vendors.length === 0) {
     return (
       <Card padded>
@@ -50,6 +52,7 @@ export function PublicTrustCenterVendors({ vendors, organizationName }: Props) {
           <Tr>
             <Th>{__("Company")}</Th>
             <Th>{__("Website")}</Th>
+            {hasCountriesData && <Th>{__("Countries")}</Th>}
           </Tr>
         </Thead>
         <Tbody>
@@ -66,6 +69,10 @@ export function PublicTrustCenterVendors({ vendors, organizationName }: Props) {
               }
             };
 
+            const formatCountries = (countries: CountryCode[]) => {
+              return countries.map(code => getCountryName(__, code)).join(", ");
+            };
+
             return (
               <Tr key={vendor.id}>
                 <Td>
@@ -98,6 +105,13 @@ export function PublicTrustCenterVendors({ vendors, organizationName }: Props) {
                     </span>
                   )}
                 </Td>
+                {hasCountriesData && (
+                  <Td>
+                    <span className="text-txt-secondary text-sm">
+                      {formatCountries(vendor.countries)}
+                    </span>
+                  </Td>
+                )}
               </Tr>
             );
           })}