AppBanner

import { AppBanner, AppBannerBody, AppBannerButton } from '@krakentech/coral-molecules';
 
<AppBanner open={true}>
    <AppBannerBody
        title="Octopus Energy App"
        content="GET - On the App Store"
    />
    <AppBannerButton title="View" href="https://octopus.energy/app" />
</AppBanner>

import { useEffect, useState } from 'react';
import { AppBanner as CoralAppBanner, AppBannerButton, AppBannerBody } from '@krakentech/coral-molecules';
 
export const AppBanner = () => {
    let [open, setOpen] = useState(false);
    let [content, setContent] = useState('');
    let [href, setHref] = useState('');
 
    let isMobileUA = false;
    let previouslyDismissed = false;
 
    useEffect(() => {
        // Android
        if (navigator.userAgent.match(/Android/i)) {
            setContent('GET - On the Play Store');
            setHref(
                'https://play.google.com/store/apps/details?id=energy.octopus.octopusenergy.android'
            );
            isMobileUA = true;
        }
 
        // iOS
        else if (navigator.userAgent.match(/iPhone/i)) {
            setContent('GET - On the App Store');
            setHref('https://apps.apple.com/{region}/app/octopus-energy/{id}');
            isMobileUA = true;
        }
 
        const previouslyDismissedCookie = document.cookie.replace(
            /(?:(?:^|.*;\s*)octopus-app-banner-dismissed\s*\=\s*([^;]*).*$)|^.*$/,
            '$1'
        );
 
        if (previouslyDismissedCookie !== '') {
            previouslyDismissed = true;
        }
 
        if (isMobileUA && !previouslyDismissed) {
            setOpen(true);
        }
    }, []);
 
    const onClose = () => {
        setOpen(false);
        let expiryDate = new Date();
        expiryDate.setDate(expiryDate.getDate() + 90);
        document.cookie = `octopus-app-banner-dismissed=true; expires=${expiryDate}; path=/`;
    };
 
    return (
        <CoralAppBanner open={open} onClose={onClose}>
            <CoralAppBannerBody title="Octopus Energy App" content={content} />
            <CoralAppBannerButton title="View" href={href} />
        </CoralAppBanner>
    );
};