feat(web): Standalone organization pages - Read alert banner field fr…

…om organization page (#17031)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/layouts/organization/standalone/components/AlertBanner.tsx

@@ -0,0 +1,56 @@
+import Cookies from 'js-cookie'
+
+import { AlertBanner, AlertBannerVariants } from '@island.is/island-ui/core'
+import { stringHash } from '@island.is/shared/utils'
+import { OrganizationPage } from '@island.is/web/graphql/schema'
+import { linkResolver, LinkType } from '@island.is/web/hooks'
+import { useI18n } from '@island.is/web/i18n'
+
+interface StandaloneAlertBannerProps {
+  alertBanner: OrganizationPage['alertBanner'] | null | undefined
+}
+
+export const StandaloneAlertBanner = ({
+  alertBanner,
+}: StandaloneAlertBannerProps) => {
+  const { activeLocale } = useI18n()
+
+  if (!alertBanner) {
+    return null
+  }
+
+  const bannerId = `standalone-alert-${stringHash(
+    JSON.stringify(alertBanner ?? {}),
+  )}`
+
+  if (Cookies.get(bannerId) || !alertBanner.showAlertBanner) {
+    return null
+  }
+
+  return (
+    <AlertBanner
+      title={alertBanner.title ?? undefined}
+      description={alertBanner.description ?? undefined}
+      variant={alertBanner.bannerVariant as AlertBannerVariants}
+      dismissable={alertBanner.isDismissable}
+      onDismiss={() => {
+        if (alertBanner.dismissedForDays !== 0) {
+          Cookies.set(bannerId, 'hide', {
+            expires: alertBanner.dismissedForDays,
+          })
+        }
+      }}
+      closeButtonLabel={activeLocale === 'is' ? 'Loka' : 'Close'}
+      link={
+        alertBanner.linkTitle && alertBanner.link?.type && alertBanner.link.slug
+          ? {
+              href: linkResolver(alertBanner.link.type as LinkType, [
+                alertBanner.link.slug,
+              ]).href,
+              title: alertBanner.linkTitle,
+            }
+          : undefined
+      }
+    />
+  )
+}

apps/web/layouts/organization/standalone/standalone.tsx

@@ -15,6 +15,7 @@ import { useLinkResolver } from '@island.is/web/hooks'
 import { useI18n } from '@island.is/web/i18n'
 import { getBackgroundStyle } from '@island.is/web/utils/organization'
 
+import { StandaloneAlertBanner } from './components/AlertBanner'
 import { Header, HeaderProps } from './components/Header'
 import { Navigation, NavigationProps } from './components/Navigation'
 
@@ -204,6 +205,7 @@ export const StandaloneLayout = ({
         }
       />
       <PageLoader />
+      <StandaloneAlertBanner alertBanner={organizationPage.alertBanner} />
       <Navigation {...navigationProps} />
       <Header {...headerProps} />
       <Box component="main" id="main-content" paddingY={8}>