Zandura Meta
<script>
    /**
     * Presumptions:
     *  - there is only one region matching the current region
     *  - there is only one app-region matching the current app and the current region
     */
    const includes = [
        'regions',
        'regions.menus',
        'regions.menus.menu-items',
        'regions.footers',
        'regions.footers.menus',
        'regions.footers.menus.menu-items',
        'region-app-settings',
        'region-app-settings.menus',
        'region-app-settings.menus.menu-items',
        'region-app-settings.footers',
        'region-app-settings.footers.menus',
        'region-app-settings.footers.menus.menu-items'
    ];

            const appId = 'zappaccostg';
        const apiUrl = `https://meta.stage.zandura.com/api/v1/apps/${appId}?include=${includes.join(',')}`;
    
    const appRegion = 'de';

    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            console.log(getSimpleFooter(data));
            console.log(getMarketingFooter(data));
        });

    /**
     * Parses the given response and returns a menu that can be used for the simplemenu component
     * @param data
     */
    function getSimpleFooter(data) {
        let simpleFooter;

        // first check if the app / region has a custom footer
        let regionAppSettings = resolveRelations(
            data.data.relationships['region-app-settings'].data,
            data.included,
            (inc) => inc.attributes.regionId === appRegion
        )[0];

        if(regionAppSettings.relationships.footers.data.length > 0) {
            simpleFooter = extractSimpleFooter(regionAppSettings, data);
            if(simpleFooter !== null) {
                return simpleFooter;
            }
        }

        let region = resolveRelations(
            data.data.relationships['regions'].data,
            data.included,
            (inc) => inc.id === appRegion
        )[0];

        simpleFooter = extractSimpleFooter(region, data);
        if(simpleFooter !== null) {
            return simpleFooter;
        }

        throw 'No simple footer found in either the region or region-app-settings';
    }


    /**
     * Parses the given response and returns a menu that can be used for the simplemenu component
     * @param data
     */
    function getMarketingFooter(data) {
        let marketingFooter;

        // first check if the app / region has a custom footer
        let regionAppSettings = resolveRelations(
            data.data.relationships['region-app-settings'].data,
            data.included,
            (inc) => inc.attributes.regionId === appRegion
        )[0];

        if(regionAppSettings.relationships.footers.data.length > 0) {
            marketingFooter = extractMarketingFooter(regionAppSettings, data);
            if(marketingFooter !== null) {
                return marketingFooter;
            }
        }

        let region = resolveRelations(
            data.data.relationships['regions'].data,
            data.included,
            (inc) => inc.id === appRegion
        )[0];

        marketingFooter = extractMarketingFooter(region, data);
        if(marketingFooter !== null) {
            return marketingFooter;
        }

        throw 'No simple footer found in either the region or region-app-settings';
    }

    function resolveFooterByDisplayType(entityWithFooterRelationship, data, displayType) {
        let footers = resolveRelations(
            entityWithFooterRelationship.relationships.footers.data,
            data.included,
            (inc => inc.attributes.displayType === displayType)
        );

        if(footers.length === 0) {
            console.log(`No footer found in ${entityWithFooterRelationship.type}:${entityWithFooterRelationship.id} with displaytype ${displayType}!`);
            return null;
        }

        return footers[0];
    }
    function extractSimpleFooter(entityWithFooterRelationship, data) {
        let footer = resolveFooterByDisplayType(entityWithFooterRelationship, data, 'simple');
        let menus = resolveRelations(
            footer.relationships.menus.data,
            data.included
        );
        if(menus.length === 0) {
            console.log(`No menu found for footer ${footer.type}:${footer.id}!`);
            return null;
        }
        let menu = menus[0];
        let menuItems = resolveRelations(
            menu.relationships['menu-items'].data,
            data.included
        );

        if(menuItems.length === 0) {
            console.log(`No menu-items found for menu ${menu.type}:${menu.id}!`);
            return null;
        }

        let settings = {
            copyRight: menu.attributes.label,
            nav: {}
        };
        settings.nav[appRegion] = {
            list: []
        };
        menuItems.forEach(menuItem => {
            settings.nav[appRegion].list.push({
                text: menuItem.attributes.label,
                url: menuItem.attributes.url,
            });
        });

        return settings;
    }

    function extractMarketingFooter(entityWithFooterRelationship, data) {
        let footer = resolveFooterByDisplayType(entityWithFooterRelationship, data, 'marketing');

        let menus = resolveRelations(
            footer.relationships.menus.data,
            data.included
        );
        if(menus.length === 0) {
            console.log(`No menu found for footer ${footer.type}:${footer.id}!`);
            return null;
        }

        let settings = {
            description: {
                title: {
                    text: footer.attributes.teaserTitle,
                },
                description: {
                    text: footer.attributes.teaserDescription
                }
            },
            nav: {}
        };
        settings.nav[appRegion] = {};

        let mapping = {
            marketing_footer_legal_menu: 'legal',
            marketing_footer_socials_menu: 'social',
            marketing_footer_company_menu: 'company',
            marketing_footer_apps_menu: 'apps',
        }

        settings.nav[appRegion].home = {
            list: [
                {
                    icon: 'zandura_composite',
                    iconOnly: true,
                    imgUrl: footer.attributes.logo,
                    text: 'Zandura',
                    url: footer.attributes.homeUrl
                }
            ]
        }
        menus.forEach(menu => {
            let category = mapping[menu.attributes.ref] || null;
            if(category === null) {
                return;
            }

            let menuItems = resolveRelations(
                menu.relationships['menu-items'].data,
                data.included
            );

            settings.nav[appRegion][category] = {
                title: menu.attributes.label
            };

            switch(category) {
                case 'home':
                    settings.nav[appRegion][category].list = [];
                    menuItems.forEach(menuItem => {
                        settings.nav[appRegion][category].list.push({
                            imgUrl: menuItem.attributes.iconData,
                            text: menuItem.attributes.label,
                            url: menuItem.attributes.url,
                        });
                    });
                    break;
                case 'social':
                    settings.nav[appRegion][category].list = [];
                    menuItems.forEach(menuItem => {
                        settings.nav[appRegion][category].list.push({
                            attributes: {
                                target: '_blank',
                                'aria-label': menuItem.attributes.label,
                                class: 'flex'
                            },
                            text: menuItem.attributes.label,
                            iconOnly: true,
                            url: menuItem.attributes.url,
                            zuiIcon: `zui-icon zui-icon--${menuItem.attributes.iconData} filled color--brand color--surface-900`
                        });
                    });
                    break;
                case 'apps':
                    settings.nav[appRegion][category].links = [];
                    settings.nav[appRegion][category].title = menu.attributes.label;
                    menuItems.forEach(menuItem => {
                        settings.nav[appRegion][category].links.push({
                            attributes: {
                                class: 'align-items--center'
                            },
                            text: menuItem.attributes.label,
                            icon: menuItem.attributes.iconData,
                            url: menuItem.attributes.url
                        });
                    });
                    break;
                case 'legal':
                case 'company':
                    settings.nav[appRegion][category].links = [];
                    settings.nav[appRegion][category].title = menu.attributes.label;
                    menuItems.forEach(menuItem => {
                        settings.nav[appRegion][category].links.push({
                            icon: '',
                            text: menuItem.attributes.label,
                            url: menuItem.attributes.url,
                        });
                    });
                    break;
            }
        });

        return settings;
    }

    function resolveRelation(relation, included, callback) {
        return included.filter(include => {
            return include.type === relation.type &&
                include.id === relation.id &&
                (callback === undefined ? true : callback(include));
        });
    }

    function resolveRelations(relations, included, callback) {
        let result = [];
        relations.forEach(relation => result = result.concat(resolveRelation(relation, included, callback)));
        return result;
    }
</script>