Merge branch 'main' into dependabot_docker_node-20.3.1-bullseye-slim

.env.example

@@ -10,5 +10,8 @@ NEXT_PUBLIC_APP_BASE_URI=https://example.com
 # Base URI for the Passport Status API
 PASSPORT_STATUS_API_BASE_URI=https://api.example.com
 
+# Base URI for fetching Alerts from Principle Publisher
+ALERT_JSON_URI=https://api.example.com/testAlerts.json
+
 # Variable to specify what environment app is currently deployed to (dev, staging, test, prod, etc.)
 NEXT_PUBLIC_ENVIRONMENT=dev

__tests__/components/CheckStatusInfo.test.tsx

@@ -9,6 +9,14 @@ expect.extend(toHaveNoViolations)
 
 jest.mock('../../src/components/ActionButton')
 
+jest.mock('../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 describe('StatusInfo', () => {
   const handleOnGoBackClick = jest.fn()
   const sut = (

__tests__/components/Layout.test.tsx

@@ -11,6 +11,14 @@ import Layout from '../../src/components/Layout'
 jest.mock('../../src/components/Header')
 jest.mock('../../src/components/Footer')
 
+jest.mock('../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 expect.extend(toHaveNoViolations)
 
 describe('Layout with default text', () => {

__tests__/components/check-status-responses/CheckStatusFileBeingProcessed.test.tsx

@@ -7,6 +7,14 @@ import CheckStatusFileBeingProcessed from '../../../src/components/check-status-
 
 expect.extend(toHaveNoViolations)
 
+jest.mock('../../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 describe('CheckStatusFileBeingProcessed', () => {
   const sut = <CheckStatusFileBeingProcessed />
 

__tests__/components/check-status-responses/CheckStatusNoRecord.test.tsx

@@ -7,6 +7,14 @@ import CheckStatusNoRecord from '../../../src/components/check-status-responses/
 
 expect.extend(toHaveNoViolations)
 
+jest.mock('../../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 describe('CheckStatusNoRecord', () => {
   const sut = <CheckStatusNoRecord />
 

__tests__/components/check-status-responses/CheckStatusNotAcceptable.test.tsx

@@ -7,6 +7,14 @@ import CheckStatusNotAcceptable from '../../../src/components/check-status-respo
 
 expect.extend(toHaveNoViolations)
 
+jest.mock('../../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 describe('CheckStatusNotAcceptable', () => {
   const sut = <CheckStatusNotAcceptable />
 

__tests__/components/check-status-responses/CheckStatusReadyForPickup.test.tsx

@@ -7,6 +7,14 @@ import CheckStatusReadyForPickup from '../../../src/components/check-status-resp
 
 expect.extend(toHaveNoViolations)
 
+jest.mock('../../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 describe('CheckStatusReadyForPickup', () => {
   const sut = <CheckStatusReadyForPickup />
 

__tests__/components/check-status-responses/CheckStatusShippingCanadaPost.test.tsx

@@ -7,6 +7,14 @@ import CheckStatusShippingFedex from '../../../src/components/check-status-respo
 
 expect.extend(toHaveNoViolations)
 
+jest.mock('../../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 describe('CheckStatusShippingFedex', () => {
   const sut = <CheckStatusShippingFedex />
 

__tests__/components/check-status-responses/CheckStatusShippingFedex.test.tsx

@@ -7,6 +7,14 @@ import CheckStatusFileBeingProcessed from '../../../src/components/check-status-
 
 expect.extend(toHaveNoViolations)
 
+jest.mock('../../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 describe('CheckStatusFileBeingProcessed', () => {
   const sut = <CheckStatusFileBeingProcessed />
 

__tests__/pages/email.test.tsx

@@ -28,6 +28,14 @@ jest.mock('../../src/lib/useEmailEsrf', () => {
   }))
 })
 
+jest.mock('../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
+
 describe('Check email page', () => {
   it('should render the page', () => {
     render(<Email />)

__tests__/pages/expectations.test.tsx

@@ -12,6 +12,13 @@ expect.extend(toHaveNoViolations)
 
 jest.mock('../../src/components/Layout')
 jest.mock('../../src/components/LinkButton')
+jest.mock('../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
 
 describe('expectations page', () => {
   it('should render the page', () => {

__tests__/pages/landing.test.tsx

@@ -13,6 +13,13 @@ expect.extend(toHaveNoViolations)
 jest.mock('../../src/components/ExampleImage')
 jest.mock('../../src/components/Layout')
 jest.mock('../../src/components/LinkButton')
+jest.mock('../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
 
 describe('landing page', () => {
   it('should render the page', () => {

__tests__/pages/status.test.tsx

@@ -29,6 +29,13 @@ jest.mock('../../src/lib/useCheckStatus', () => ({
     remove: jest.fn(),
   }),
 }))
+jest.mock('../../src/lib/useAlerts', () => ({
+  useAlerts: () => ({
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+  }),
+}))
 
 describe('Check status page', () => {
   it('should render the page', () => {

jest.config.ts

@@ -14,6 +14,10 @@ const config: Config = {
     /* Handle image imports
       https://jestjs.io/docs/webpack#handling-static-assets */
     '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js',
+
+    /* Handle React markdown not being pre-compiled */
+    'react-markdown':
+      '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
   },
   coverageReporters: [
     'clover',

package.json

@@ -24,6 +24,7 @@
     "date-fns": "^2.30.0",
     "formik": "^2.4.2",
     "i18next": "^23.2.3",
+    "markdown-to-jsx": "^7.2.1",
     "next": "13.4.7",
     "next-i18next": "^14.0.0",
     "next-seo": "^6.1.0",

src/components/AlertBlock.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react'
+
+import { useTranslation } from 'next-i18next'
+
+import { AlertPage } from '../lib/types'
+import { useAlerts } from '../lib/useAlerts'
+import AlertSection from './AlertSection'
+import MarkdownContent from './MarkdownContent'
+
+export interface AlertBlockProps {
+  page: AlertPage
+  className?: string
+}
+
+const AlertBlock: FC<AlertBlockProps> = ({ page, className }) => {
+  const { data } = useAlerts({ page })
+  const { i18n } = useTranslation()
+
+  return (
+    <div className={className}>
+      {data?.map((alert) => {
+        return (
+          <AlertSection key={alert.uid} type={alert.type} className="mt-4 mb-4">
+            <MarkdownContent
+              markdown={i18n.language === 'fr' ? alert.textFr : alert.textEn}
+              header={page === 'all'}
+            />
+          </AlertSection>
+        )
+      })}
+    </div>
+  )
+}
+
+export default AlertBlock

src/components/AlertSection.tsx

@@ -1,30 +1,43 @@
 import { FC, PropsWithChildren } from 'react'
 
-export type AlertType = 'success' | 'warning' | 'info'
+import { AlertType } from '../lib/types'
 
 export interface AlertSectionProps {
   type: AlertType
   className?: string
 }
 
 const borderColors = {
+  danger: 'border-accent-error',
   warning: 'border-accent-warning',
-  success: 'border-green-500',
+  success: 'border-accent-success',
   info: 'border-accent-info',
 }
 
 const svgStyles = {
+  danger: '-translate-x-3 translate-y-10',
   warning: '-translate-x-3 translate-y-10',
   success: '-translate-x-3 translate-y-10',
   info: '-translate-x-3 translate-y-10',
 }
 
 const svg = (type: AlertType) => {
   switch (type) {
+    case 'danger': {
+      return (
+        <svg
+          className="bg-white p-1 fill-accent-error w-8 h-8"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M50,5C25.1,5,5,25.1,5,50c0,24.9,20.1,45,45,45c24.9,0,45-20.1,45-45C95,25.1,74.9,5,50,5L50,5z M55.6,77  c0,3.2-2.5,5.6-5.6,5.6c-3.1,0-5.5-2.5-5.5-5.6v-1.1c0-3.1,2.5-5.6,5.5-5.6c3.1,0,5.6,2.5,5.6,5.6V77z M58.3,26.3l-2.8,34.2  c-0.3,3.2-3,5.4-6.1,5.2c-2.8-0.2-4.9-2.5-5.1-5.2l-2.8-34.2c-0.5-4.5,3.7-8.9,8.2-8.9C54.7,17.4,58.7,21.8,58.3,26.3z"></path>
+        </svg>
+      )
+    }
     case 'success': {
       return (
         <svg
-          className="bg-white p-1 fill-green-500 w-8 h-8"
+          className="bg-white p-1 fill-accent-success w-8 h-8"
           viewBox="0 0 512 512"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -68,9 +81,9 @@ const AlertSection: FC<PropsWithChildren<AlertSectionProps>> = ({
 
   return (
     <div className={className}>
-      <div className={`${svgStyles[type]}`}>{svg(type)}</div>
+      <div className={`${svgStyles[type]} -mt-8`}>{svg(type)}</div>
       <section className={`pb-0.5 pt-2 border-l-8 ${borderColor}`}>
-        <div className="ml-4">{children}</div>
+        <div className="ml-4 mb-2">{children}</div>
       </section>
     </div>
   )

src/components/Layout.tsx

@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react'
 
 import { useTranslation } from 'next-i18next'
 
+import AlertBlock from './AlertBlock'
 import Footer from './Footer'
 import Header from './Header'
 
@@ -11,6 +12,7 @@ export interface LayoutProps {
 
 const Layout: FC<LayoutProps> = ({ children }) => {
   const { t } = useTranslation('common')
+
   return (
     <div className="flex min-h-screen flex-col">
       <Header
@@ -22,9 +24,9 @@ const Layout: FC<LayoutProps> = ({ children }) => {
         id="mainContent"
         className="container mx-auto mt-5 flex-1 px-4 pb-8"
       >
+        <AlertBlock page="all" />
         {children}
       </main>
-
       <Footer
         dateModifiedText={t('footer.date-modified-text')}
         footerHeader={t('footer.header')}