Shop Data And Channel Setup

Note on shared code sample:
To prevent the code examples from getting long, we will replace code from the previous sections with 3 dots thus "..." and show only code from the current section.
You will however be able to view the Complete code here

Complete code (baselayer.js)

Click to view

const EVENTS = window.eventsLib.EVENTS
const dispatchAction = window.eventsLib.dispatchAction
const registerEvents = window.eventsLib.registerEvents

const sendingNotification = (event, message, status) => {
    dispatchAction({
        action: EVENTS.NOTIFICATION,
        payload: {
            event,
            message,
            status,
            type: 'save'
        },
    })
}

let credentials = { clientId: '', clientSecret: '' }

const storeDetails = [
    {
        id: 'shop-7e52920a-2722-4881-9908-ecec98c716e4',
        name: 'Shop 1',
        url: 'shop1.example.com',
        locale: 'de-DE'
    },
    {
        id: 'shop-1e570f63-10f8-4d5a-ae18-21d3d933eb93',
        name: 'Trustsurance',
        url: 'shop2.example.com',
        locale: 'fr-FR'
    },
]

const baseLayer = () => {
    registerEvents({
        [EVENTS.GET_INFORMATION_OF_SYSTEM]: () => {
            console.log('GET_INFORMATION_OF_SYSTEM')
            dispatchAction({
                action: EVENTS.SET_INFORMATION_OF_SYSTEM,
                payload: {
                    nameOfSystem: 'eCommercPlatformName',
                    versionNumberOfSystem: 'v-0.0.1',
                    versionNumberOfPlugin: 'v-0.0.1',
                    ...{}
                },
            })
        },
        [EVENTS.GET_LOCALE]: () => {
            dispatchAction({
                action: EVENTS.SET_LOCALE,
                payload: 'en-GB', // de-DE , en-EN, es-ES, fr-FR , it-IT , nl-NL , pl-PL , pt-PT
            })
        },
        [EVENTS.ERROR]: () => {
            console.log('eventError', error)
        },

        [EVENTS.SAVE_CREDENTIALS]: (event) => {
            try {
                console.log('SAVE_CREDENTIALS')
                sessionStorage.setItem('credentials', JSON.stringify(event.payload))
                setTimeout(() => {
                    sendingNotification(EVENTS.SAVE_CREDENTIALS, 'CREDENTIALS SAVED', 'success')
                }, 400)
            } catch (error) {
                setTimeout(() => {
                    sendingNotification(EVENTS.SAVE_CREDENTIALS, 'CREDENTIALS NOT SAVED', 'error')
                }, 400)
            }
        },
        [EVENTS.GET_CREDENTIALS_PROVIDED]: () => {
            console.log('GET_CREDENTIALS_PROVIDED')
            const savedCredentials = sessionStorage.getItem('credentials')
            console.log(savedCredentials, "credentials");
            setTimeout(() => {
                dispatchAction({
                    action: EVENTS.SET_CREDENTIALS_PROVIDED,
                    payload: savedCredentials ? JSON.parse(savedCredentials) : credentials,
                })
            }, 400)
        },

        [EVENTS.GET_SALES_CHANNELS_PROVIDED]: () => {
            console.log('EVENTS.SET_SALES_CHANNELS_PROVIDED');
            setTimeout(() => {
                dispatchAction({
                    action: EVENTS.SET_SALES_CHANNELS_PROVIDED,
                    payload: storeDetails,
                })
            }, 1000)

        },

        [EVENTS.GET_MAPPED_CHANNELS]: () => {
            console.log('GET_MAPPED_CHANNELS')
            const savedMappedChannels = sessionStorage.getItem('mappedChannelsData')

            setTimeout(() => {
                dispatchAction({
                    action: EVENTS.SET_MAPPED_CHANNELS,
                    payload: savedMappedChannels ? JSON.parse(savedMappedChannels) : []
                })
            }, 400)
        },

        [EVENTS.SAVE_MAPPED_CHANNEL]: (event) => {
            console.log('SAVE_MAPPED_CHANNEL', event.payload)
            sessionStorage.setItem('mappedChannelsData', JSON.stringify(event.payload))
            try {
                setTimeout(() => {
                    dispatchAction({
                        action: EVENTS.SET_MAPPED_CHANNELS,
                        payload: event.payload,
                    })
                    sendingNotification(EVENTS.SET_MAPPED_CHANNELS, 'MAPPED CHANNELS SAVED', 'success')
                }, 2000)
            } catch (error) {
                setTimeout(() => {
                    sendingNotification(EVENTS.SET_MAPPED_CHANNELS, 'MAPPED CHANNELS NOT SAVED', 'error')
                }, 400)
            }
        },

    })
}

baseLayer()

...
const storeDetails = [ // sample store details (line 2)
    {
        id: 'shop-7e52920a-2722-4881-9908-ecec98c716e4',
        name: 'Shop 1',
        url: 'shop1.example.com',
        locale: 'de-DE'
    },
    {
        id: 'shop-1e570f63-10f8-4d5a-ae18-21d3d933eb93',
        name: 'Trustsurance',
        url: 'shop2.example.com',
        locale: 'fr-FR'
    },
] //line 15

[EVENTS.GET_SALES_CHANNELS_PROVIDED]: () => { //line 17
    console.log('EVENTS.SET_SALES_CHANNELS_PROVIDED');
    setTimeout(() => {
        dispatchAction({
            action: EVENTS.SET_SALES_CHANNELS_PROVIDED,
            payload: storeDetails,
        })
    }, 1000)

},

[EVENTS.GET_MAPPED_CHANNELS]: () => {
    console.log('GET_MAPPED_CHANNELS')
    const savedMappedChannels = sessionStorage.getItem('mappedChannelsData') //line 30

    setTimeout(() => {
        dispatchAction({ //line 33
            action: EVENTS.SET_MAPPED_CHANNELS,
            payload: savedMappedChannels ? JSON.parse(savedMappedChannels) : []
        })
    }, 400)
},

[EVENTS.SAVE_MAPPED_CHANNEL]: (event) => {
    console.log('SAVE_MAPPED_CHANNEL', event.payload)
    sessionStorage.setItem('mappedChannelsData', JSON.stringify(event.payload)) //line 42
    try {
        setTimeout(() => {
            dispatchAction({
                action: EVENTS.SET_MAPPED_CHANNELS,
                payload: event.payload,
            })
            sendingNotification(EVENTS.SET_MAPPED_CHANNELS, 'MAPPED CHANNELS SAVED', 'success') //line 49
        }, 2000)
    } catch (error) {
        setTimeout(() => {
            sendingNotification(EVENTS.SET_MAPPED_CHANNELS, 'MAPPED CHANNELS NOT SAVED', 'error') //line 53
        }, 400)
    }
},
...

Setting store details

The store selector (labeled 1) in the diagram above allows the customer to select the shop they will like to configure. This is known as Channels. The first step is to map the different shops (if any) within the e-commerce platform to the channels the shop owner has with Trusted Shops.

For demonstration, the code above shows the store details stored as a constant variable storeDetails this may also be known as a sales channel (lines 2 to 15).
Your implementation should however pull this from the database. The store details should include a unique identifier (id), the shop name (name), the shop URL (url), and the shop owners display language preference (locale).

This should then be set using the [GET_SALES_CHANNELS_PROVIDED] event handler and [SET_SALES_CHANNELS_PROVIDED] dispatch action as shown on line 17 of the sample code above.

Saving Shop-Channel mapping data

The first time the shop owner visits the plugin dashboard they will receive a pop-up asking them to map their local stores to channels. Upon clicking on "Save", the [EVENTS.SAVE_MAPPED_CHANNEL] handler is fired. Here three things happen:

First, the function supplies us with the store to channel mapping data i.e: function parameter event which we then persist using session storage on line 42. In your implementation, this should be persisted in the database.

Secondly, we dispatch the [EVENTS.SET_MAPPED_CHANNELS] event action, this sets the mapped data immediately into the dashboard.

Finally, depending on the success state a notification is fired on lines 49 or an error on line 53.

Loading mapped data

Whenever the plugin page loads up the [EVENTS.GET_MAPPED_CHANNELS] event is fired up. This is meant to set the store to channel mapping if it's available in the database otherwise [EVENTS.SAVE_MAPPED_CHANNEL] is fired right after.

The fetching of the persisted mapping from session storage can be seen on (line 30) and the setting of that into the dashboard using the [EVENTS.SET_MAPPED_CHANNELS] action on line 33.

"Note:"

If you have completed the above section the dashboard components should now be visible but blurred out. This is expected as we need to implement a few more events to get a fully functioning page.

Demo app reference

Below are the reference points if you are following along using the demo app

What's next?

In the next section, we will look at the TrustBadge tab and how to display the TrustBadge on the storefront.