Circular Overview

The Circular project is a React 17 based web app using TypeScript 4.x.

Circular is part of the Checkout project/repo and can be found here:
Magpie.Store.Checkout.Frontend/src/Circular.Frontend

Usage

The Circular app is intended to be embedded on other sites using a small script which injects an iframe into a container on the parent page. the iframe then loads the app isolating it from the parent.

The parent page has access to a limited number of settings which are passed into the Circular.init() function.

embed.js / Circular.init()

To aid with mounting/initialising the app, there's an intermediate script called embed.ts (transpiles to embed.js) which creates the iframe element and adds it to the parent page via the provided parent setting containerId.

This public config is designed to have absolute minimum number of options, additional site options can be passed in via App.Init() (see below).

<script>
    const circularConfig = {
        container: 'circularContainer',
        partnerId: 'MM12345678',
    }; 
</script>
<script src="../js/embed.js" onload="Circular.init(circularConfig)" defer></script>

See integration guide for more info

App.Init()

From the iframe index.html we're able to provide additional tenant settings to the app.

We send a postMessage to embed.js as soon as the page is loaded to insure the the iframe index has fully loaded before embed.js tries to call it. There's also a check that circularConfig is a valid object before calling App.init().

This configuration object is pushed into the Context object so available throughout the app wide with prop drilling.

<script>
    window.addEventListener("message", (e) => {
        const circularConfig = e?.data?.circularConfig;
        if (typeof circularConfig === "object") { 
            App.init({ 
                circularConfig,
                settings: {
                    apiPath: '/api/circular',
                    appContainerId: 'app', 
                    appVersion: 'v1',
                    baseName: window.location.pathname, 
                    branding: {
                        companyName: 'musicMagpie',
                        logo: 'https://emmmuksstorestorage.z33.web.core.windows.net/latest/assets/logo-musicmagpie.svg',
                    },
                    searchFacet: 'Mobile%20phones',
                    searchProvider: 'https://api.empathybroker.com/search/v1/query/musicmagpie/search', 
                    site: { 
                        currency: 'GBP',
                        language: 'en-GB',
                        url: 'https://www.musicmagpie.co.uk',
                    },
                },  
            });
        }
    });
    window.parent.postMessage({status: 'loaded'}, '*'); // send loaded message to parent
</script>