_layout.html

{#if path.startsWith('/blog') || path.startsWith('/posts')}
	<BlogHeader {path}/>
	<Omniconvert/>
{:elseif !hideHeader}
	<Header {path}/>
{/if}

{#if pageContainsPostHeader && !hidePostHeader}
	<Feature primary={primaryPostHeader} isPostHeader {home}/>
{/if}

<CookieBanner/>

<main style="--bottom: 20px">
	<svelte:component this={child.component} {...child.props}/>
</main>

{#if !hidePreFooterTeaser}
	<TeaserWithCTA primary={primaryPreFooter} />
{/if}

<Footer/>

{#if $isMobile}
	<MobileDiscountPanel/>
	{#if !hideStickyCTASignup}
		<div class="cta wrap">
			<CTALink link={$header_cta_link} label={$header_cta_button_label} size="full"/>
		</div>
	{/if}
{/if}

<style lang="scss">
	@import 'src/style/system';

	@global {
		@import 'src/style/globals';
	}

	:global(#intercom-container) {
		@media (max-width: $tablet) {
			:global(.intercom-launcher-frame) {
				bottom: var(--bottom);
			}
		}
	}

	.cta {
		position: fixed;
		z-index: 2;
		bottom: 16px;
		width: 100%;
	}
</style>

<script>
	import Header from '../view/ui/header/Header.html';
	import BlogHeader from '../view/ui/header/BlogHeader.html';
	import Footer from '../view/ui/footer/Footer.html';
	import CookieBanner from '../view/ui/cookie-banner/CookieBanner.html';
	import MobileDiscountPanel from '../view/components/MobileDiscountPanel.html';
	import Omniconvert from '../view/components/Omniconvert.html';
	import TeaserWithCTA from '../view/components/TeaserWithCTA.html';
	import CTALink from '../view/components/CTALink.html';
	import Feature from '../view/components/Feature.html';

	export default {
		components: {
			BlogHeader,
			CookieBanner,
			Footer,
			Header,
			MobileDiscountPanel,
			Omniconvert,
			TeaserWithCTA,
			CTALink,
			Feature
		},
		data() {
			return {
				appID: 'yapfdl4o'
			};
		},
		computed: {
			primaryPostHeader: ({
				$post_header_css_classes,
				$post_header_graphic,
				$post_header_behavior,
				$post_header_subheading,
				$post_header_heading,
				$post_header_text,
				$post_header_cta_button_color,
				$post_header_cta_button_label,
				$post_header_cta_link
			}) => {
				return {
					css_classes: $post_header_css_classes,
					graphic: $post_header_graphic,
					behavior: $post_header_behavior,
					subheading: $post_header_subheading,
					heading: $post_header_heading,
					text: $post_header_text,
					cta_button_color: $post_header_cta_button_color,
					cta_button_label: $post_header_cta_button_label,
					cta_link: $post_header_cta_link
				}
			},
			home: ({ path }) => path === '/',
			pageContainsPostHeader: ({ path }) => (['/', '/pricing', '/blog'].includes(path) || path.startsWith('/product')),
			primaryPreFooter: ({ $footer_teaser_image, $footer_teaser_text, $footer_teaser_url, $footer_teaser_cta_label, $footer_teaser_text_color, $footer_teaser_background_color, $footer_teaser_cta_color, $footer_teaser_form_field_placeholder }) => {
				return {
					type: "signup",
					image: $footer_teaser_image,
					text: $footer_teaser_text,
					cta_link: $footer_teaser_url,
					cta_button_label: $footer_teaser_cta_label,
					text_color: $footer_teaser_text_color,
					background_color: $footer_teaser_background_color,
					cta_color: $footer_teaser_cta_color,
					placeholder: $footer_teaser_form_field_placeholder
				}
			},
			hidePreFooterTeaser: ({ child }) => hideElement(child, "show_pre_footer"),
			hideHeader: ({ child }) => hideElement(child, "show_header"),
			hideStickyCTASignup: ({ child }) => hideElement(child, "show_sticky_cta_signup"),
			hidePostHeader: ({ child }) => hideElement(child, "show_post_header"),
		},
		oncreate() {
			document.documentElement.classList.add('js');

			const { lang } = this.store.get();
			document.documentElement.lang = lang;
		},
		onstate({ changed, current, previous }) {
			if (changed.path) {
				this.store.set({ path: current.path });

				this.store.fire('navigate');

				if (previous) {
					this.store.fire('navigate:subsequent');
				}
			}
		}
	};

	const hideElement = (child, name) => {
		if (!child) return false;

		const { segment, props } = child;
		if (!props) return false;

		let pageType = segment;
		if (['/', '/pricing', '/taxator'].includes(props.path)) {
			pageType = 'page';
		} else if (segment === 'offers') {
			pageType = 'offer';
		};

		return props[pageType] && props[pageType].data && props[pageType].data[name] === 'no';
	}
</script>