refactor(TenderDetails): enhance country flag handling and validation

- Updated the TenderDetails component to validate country codes using a new utility function, isValidAlpha2CountryCode.
- Modified the useGetFlagQuery hook to accept an options parameter for conditional fetching based on the validity of the country code.
- Improved the rendering logic for the country flag to ensure it only displays when valid flag data is available.

src/app/tenders/[details]/page.tsx

@@ -1,12 +1,12 @@
 "use client";
-import Loading from "@/components/loading";
 import { LocationIcon } from "@/assets/icons";
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import Loading from "@/components/loading";
 import Status from "@/components/ui/Status";
 import { useTenderDetailQuery } from "@/hooks/queries";
 import { useGetFlagQuery } from "@/hooks/queries/useFlagsQueries";
-import { msToDate } from "@/utils/shared";
+import { isValidAlpha2CountryCode, msToDate } from "@/utils/shared";
 import getSymbolFromCurrency from "currency-symbol-map";
 import Link from "next/link";
 import { use } from "react";
@@ -20,12 +20,17 @@ interface IProps {
 const TenderDetails = ({ params }: IProps) => {
   const { details } = use(params);
   const { data, isLoading, isError } = useTenderDetailQuery(details);
+  const countryCodeNormalized =
+    data?.data.country_code?.trim().toUpperCase() ?? "";
+  const countryCodeValid = isValidAlpha2CountryCode(countryCodeNormalized);
+  const { data: flagData } = useGetFlagQuery(countryCodeNormalized, {
+    enabled: countryCodeValid,
+  });
   const breadcrumbItems = [
     { name: "Dashboard", href: "/" },
     { name: "Tenders", href: "/tenders" },
     { name: "Tender details", href: `/tenders/${details}` },
   ];
-  const { data: flagData } = useGetFlagQuery(data?.data.country_code ?? "EU");
   if (isLoading) return <Loading />;
   if (isError) return <div>Error</div>;
   return (
@@ -83,10 +88,12 @@ const TenderDetails = ({ params }: IProps) => {
             <div className="flex items-center gap-1">
               <LocationIcon />
               <p className="text-sm uppercase">{data?.data.country_code}</p>
-              <div
+              {flagData && (
-                dangerouslySetInnerHTML={{ __html: flagData }}
+                <div
-                className="flex w-7 items-center justify-center overflow-hidden rounded-md border p-0"
+                  dangerouslySetInnerHTML={{ __html: flagData }}
-              />
+                  className="flex w-7 items-center justify-center overflow-hidden rounded-md border p-0"
+                />
+              )}
             </div>
           </div>
           {data?.data.currency && (

src/hooks/queries/useFlagsQueries.ts

@@ -3,7 +3,10 @@ import { flagsService } from "@/lib/api/services/flags-service";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-export const useGetFlagQuery = (countryCode: string) => {
+export const useGetFlagQuery = (
+  countryCode: string,
+  options?: { enabled?: boolean },
+) => {
   const queryKey = useMemo(
     () => [API_ENDPOINTS.FLAGS(countryCode)],
     [countryCode],
@@ -12,5 +15,6 @@ export const useGetFlagQuery = (countryCode: string) => {
   return useQuery({
     queryKey,
     queryFn: () => flagsService.getCountryFlag(countryCode),
+    enabled: options?.enabled ?? true,
   });
 };

src/utils/shared.ts

@@ -110,3 +110,4 @@ export const deleteEmptyKeys = (obj: Record<string, any>) => {
   }
   return newObj;
 };
+export const isValidAlpha2CountryCode = (code: string) => /^[A-Za-z]{2}$/.test(code);