diff --git a/apps/web/layouts/organization/standalone/components/AlertBanner.tsx b/apps/web/layouts/organization/standalone/components/AlertBanner.tsx new file mode 100644 index 000000000000..32d09cec0150 --- /dev/null +++ b/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 ( + { + 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 + } + /> + ) +} diff --git a/apps/web/layouts/organization/standalone/standalone.tsx b/apps/web/layouts/organization/standalone/standalone.tsx index 9007c3db63a1..5053000cbff6 100644 --- a/apps/web/layouts/organization/standalone/standalone.tsx +++ b/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 = ({ } /> +