Add CountryFlag component

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;
+`

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
+  }
+}

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

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;
   }
 `
 

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`