From 1aba0b760efebeb420dff739300063003a31881a Mon Sep 17 00:00:00 2001
From: Ivan Gabriele <ivan.gabriele@protonmail.com>
Date: Tue, 9 Apr 2024 01:22:50 +0200
Subject: [PATCH] Add CountryFlag component

---
 frontend/src/components/CountryFlag/index.tsx | 24 +++++++++++++++++++
 frontend/src/components/CountryFlag/utils.ts  | 13 ++++++++++
 .../features/Logbook/LogbookMessage.types.ts  |  2 +-
 .../PriorNotificationCard/Header.tsx          | 12 +++-------
 .../PriorNotificationCard/index.tsx           |  2 +-
 5 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/CountryFlag/index.tsx
 create mode 100644 frontend/src/components/CountryFlag/utils.ts

diff --git a/frontend/src/components/CountryFlag/index.tsx b/frontend/src/components/CountryFlag/index.tsx
new file mode 100644
index 0000000000..463f623d8d
--- /dev/null
+++ b/frontend/src/components/CountryFlag/index.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+import { getAlpha2CodeFromAlpha2or3Code } from './utils'
+
+type CountryFlagProps = Readonly<{
+  countryCode: string | undefined
+  size: [number, number]
+}>
+export function CountryFlag({ countryCode, size }: CountryFlagProps) {
+  const countryAlpha2Code = getAlpha2CodeFromAlpha2or3Code(countryCode)
+  const [width, height] = size
+
+  const url = countryAlpha2Code ? `/flags/${countryAlpha2Code}.svg` : `https://placehold.co/${width}x${height}?text=%3F`
+
+  return <Img $height={height} $width={width} alt={String(countryCode)} src={url} title={url} />
+}
+
+const Img = styled.img<{
+  $height: number
+  $width: number
+}>`
+  height: ${p => p.$height}px;
+  width: ${p => p.$width}px;
+`
diff --git a/frontend/src/components/CountryFlag/utils.ts b/frontend/src/components/CountryFlag/utils.ts
new file mode 100644
index 0000000000..be3d885c0b
--- /dev/null
+++ b/frontend/src/components/CountryFlag/utils.ts
@@ -0,0 +1,13 @@
+import countries from 'i18n-iso-countries'
+
+export function getAlpha2CodeFromAlpha2or3Code(countryCode: string | undefined): string | undefined {
+  if (!countryCode) {
+    return undefined
+  }
+
+  try {
+    return (countryCode.length === 3 ? countries.alpha3ToAlpha2(countryCode) : countryCode).toLowerCase()
+  } catch (err) {
+    return undefined
+  }
+}
diff --git a/frontend/src/features/Logbook/LogbookMessage.types.ts b/frontend/src/features/Logbook/LogbookMessage.types.ts
index 752e6ecd50..5bac591f11 100644
--- a/frontend/src/features/Logbook/LogbookMessage.types.ts
+++ b/frontend/src/features/Logbook/LogbookMessage.types.ts
@@ -5,7 +5,7 @@ export namespace LogbookMessage {
     acknowledge: Acknowledge | undefined
     deleted: boolean
     externalReferenceNumber: string
-    flagState: string
+    flagState: string | undefined
     imo: string | undefined
     integrationDateTime: string
     internalReferenceNumber: string
diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationCard/Header.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationCard/Header.tsx
index fcb36d768b..ec28f0b723 100644
--- a/frontend/src/features/PriorNotification/components/PriorNotificationCard/Header.tsx
+++ b/frontend/src/features/PriorNotification/components/PriorNotificationCard/Header.tsx
@@ -1,5 +1,5 @@
+import { CountryFlag } from '@components/CountryFlag'
 import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
-import countries from 'i18n-iso-countries'
 import styled from 'styled-components'
 
 import type { PriorNotification } from '@features/PriorNotification/PriorNotification.types'
@@ -27,13 +27,7 @@ export function Header({ onClose, priorNotificationDetail }: HeaderProps) {
 
         <TitleRow>
           <TitleRowIconBox>
-            <img
-              alt={priorNotificationDetail.logbookMessage.flagState}
-              src={`/flags/${countries
-                .alpha3ToAlpha2(priorNotificationDetail.logbookMessage.flagState)
-                .toLowerCase()}.png`}
-              title={priorNotificationDetail.logbookMessage.flagState}
-            />
+            <CountryFlag countryCode={priorNotificationDetail.logbookMessage.flagState} size={[24, 18]} />
           </TitleRowIconBox>
 
           <span>
@@ -91,7 +85,7 @@ const TitleRowIconBox = styled.span`
   }
 
   > img {
-    vertical-align: -2px;
+    vertical-align: -3.5px;
   }
 `
 
diff --git a/frontend/src/features/PriorNotification/components/PriorNotificationCard/index.tsx b/frontend/src/features/PriorNotification/components/PriorNotificationCard/index.tsx
index 5a9af600ae..9a38fceafd 100644
--- a/frontend/src/features/PriorNotification/components/PriorNotificationCard/index.tsx
+++ b/frontend/src/features/PriorNotification/components/PriorNotificationCard/index.tsx
@@ -86,7 +86,7 @@ const Card = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  width: 600px;
+  width: 640px;
 `
 
 const Body = styled.div`