BodyContent.jsx

/** @jsx h */
import { h, Fragment } from 'preact';
import { useEffect, useState, useMemo } from 'preact/hooks';
import {
    useContent,
    useServerData,
    useProductMeta,
    useXProps,
    useScroll,
    useDidUpdateEffect,
    useTransitionState,
    isLander
} from '../lib';
import Header from './Header';
import { LongTerm, ShortTerm, NoInterest, ProductList, PayIn1 } from './views';
import CheckoutHeader from './CheckoutHeader';

const VIEW_IDS = {
    // TODO: add an error view in case we receive an invalid view?
    PAYPAL_CREDIT_NO_INTEREST: 'PAYPAL_CREDIT_NO_INTEREST',
    PAY_LATER_LONG_TERM: 'PAY_LATER_LONG_TERM',
    PAY_LATER_PAY_IN_1: 'PAY_LATER_PAY_IN_1',
    PAY_LATER_SHORT_TERM: 'PAY_LATER_SHORT_TERM',
    PRODUCT_LIST: 'PRODUCT_LIST'
};

const BodyContent = () => {
    const { views } = useServerData();
    const { offer, features } = useXProps();
    const { scrollTo } = useScroll();
    const [transitionState] = useTransitionState();
    const primaryViewName = useMemo(() => {
        if (offer) {
            const viewName = views.find(view => view.meta.product === offer)?.meta.product;

            if (viewName) {
                return viewName;
            }
        }

        let defaultViewName;

        const productViews = views.filter(view => view?.meta?.product !== VIEW_IDS.PRODUCT_LIST);
        const hasProductList = views.find(view => view?.meta?.product === VIEW_IDS.PRODUCT_LIST);
        if (productViews?.length === 1) {
            defaultViewName = productViews[0]?.meta?.product;
        } else if (productViews?.length > 1 && hasProductList) {
            defaultViewName = VIEW_IDS.PRODUCT_LIST;
        } else if (productViews?.length > 1 && !hasProductList) {
            defaultViewName = productViews[0]?.meta?.product;
        }

        return defaultViewName;
    }, [offer, ...views.map(view => view?.meta?.product)]);

    const [viewName, setViewName] = useState(primaryViewName);
    const content = useContent(viewName);
    const productMeta = useProductMeta(viewName);

    const { headline, subheadline, qualifyingSubheadline = '', closeButtonLabel, cta } = content;

    const isQualifying = productMeta?.qualifying;

    const useV4Design = productMeta?.useV4Design === 'true';
    const useV5Design = productMeta?.useV5Design === 'true';
    const use5Dot1Design = productMeta?.['v5.1'];
    const useNewCheckoutDesign = features?.includes('new-checkout-design') ? 'true' : 'false';

    // add v4Design or v5Design class to root html to update lander specific styles to v4 or v5 respectively
    const documentClassName = document.documentElement.className;
    if (useV4Design && isLander) {
        document.documentElement.className = `${documentClassName} v4Design`;
    }
    if (useV5Design && isLander) {
        document.documentElement.className = `${documentClassName} v5Design`;
    }
    const isPreapproved = productMeta?.preapproved;
    const preapprovalHeadline = content?.preapproval?.preapprovalHeadline;
    const preapprovalSubHeadline = content?.preapproval?.preapprovalSubHeadline;
    const preapprovalLabel = content?.preapproval?.preapprovalLabel;

    const openProductList = () => setViewName(VIEW_IDS.PRODUCT_LIST);

    useDidUpdateEffect(() => {
        scrollTo(0); // Reset scroll position to top when view changes
        if (transitionState === 'OPEN') {
            window.document.querySelector('#close-btn')?.focus();
        }
    }, [viewName]);

    useDidUpdateEffect(() => {
        // Update view when offer param dynamically changed
        setViewName(primaryViewName ?? viewName);
    }, [offer]);

    useEffect(() => {
        // Reset back to the primary view after closing the modal
        if (transitionState === 'CLOSED') {
            setViewName(primaryViewName);
        }
    }, [transitionState]);

    // Add views to viewComponents object where the keys are the product name and the values are the view component
    const viewComponents = {
        [VIEW_IDS.PAYPAL_CREDIT_NO_INTEREST]: <NoInterest content={content} openProductList={openProductList} />,
        [VIEW_IDS.PAY_LATER_LONG_TERM]: (
            <LongTerm
                content={content}
                productMeta={productMeta}
                useNewCheckoutDesign={useNewCheckoutDesign}
                openProductList={openProductList}
            />
        ),
        [VIEW_IDS.PAY_LATER_PAY_IN_1]: (
            <PayIn1 productMeta={productMeta} content={content} openProductList={openProductList} />
        ),
        [VIEW_IDS.PAY_LATER_SHORT_TERM]: (
            <ShortTerm
                content={content}
                productMeta={productMeta}
                useNewCheckoutDesign={useNewCheckoutDesign}
                openProductList={openProductList}
            />
        ),
        [VIEW_IDS.PRODUCT_LIST]: <ProductList content={content} useV5Design={useV5Design} setViewName={setViewName} />
    };

    // IMPORTANT: These elements cannot be nested inside of other elements.
    // They are using very precise CSS position sticky rules that require this
    // specific adjacent DOM structure
    return (
        <Fragment>
            {typeof cta !== 'undefined' && features?.includes('new-checkout-design') ? (
                <CheckoutHeader
                    headline={headline}
                    subheadline={subheadline}
                    isQualifying={isQualifying ?? 'false'}
                    qualifyingSubheadline={qualifyingSubheadline}
                    closeButtonLabel={closeButtonLabel}
                    viewName={viewName}
                    preapprovalHeadline={preapprovalHeadline}
                    preapprovalSubHeadline={preapprovalSubHeadline}
                    preapprovalLabel={preapprovalLabel}
                    // toggles preapproval content
                    isPreapproved={isPreapproved ?? 'false'}
                />
            ) : (
                <Header
                    logo="logo"
                    headline={headline}
                    subheadline={subheadline}
                    isQualifying={isQualifying ?? 'false'}
                    qualifyingSubheadline={qualifyingSubheadline}
                    closeButtonLabel={closeButtonLabel}
                    viewName={viewName}
                    useV4Design={useV4Design}
                    useV5Design={useV5Design}
                    use5Dot1Design={use5Dot1Design}
                />
            )}
            <div
                className={`content__container ${useV4Design ? 'v4Design' : ''} ${useV5Design ? 'v5Design' : ''} ${
                    useNewCheckoutDesign === 'true' ? 'checkout' : ''
                }`}
            >
                <main className="main">
                    <div className="content__body">{viewComponents[viewName]}</div>
                </main>
            </div>
        </Fragment>
    );
};

export default BodyContent;