Add consent details section inside preferencesModal

This snippet can be used in cookieconsent v3 only.

Add a new section inside preferencesModal.sections:

{
    title: 'Consent details',
    description: `
        <p>consent id: <span id="consent-id">-</span></p>
        <p>consent date: <span id="consent-timestamp">-</span></p>
        <p>last update: <span id="last-consent-timestamp">-</span></p>
    `
}

Example

CookieConsent.run({
    // ...
    language: {
        // ...
        translations: {
            //...
            en: {
                // ...
                preferencesModal: {
                    // ...
                    sections: [
                        // ...
                        {
                            title: 'Consent details',
                            description: `
                                <p>consent id: <span id="consent-id">-</span></p>
                                <p>consent date: <span id="consent-timestamp">-</span></p>
                                <p>last update: <span id="last-consent-timestamp">-</span></p>
                            `
                        }
                    ]
                }
            }
        }
    }
});

If preferencesModal is ready/visible, set/update details:

const updateConsentDetails = (modal) => {

    const { consentId, consentTimestamp, lastConsentTimestamp } = CookieConsent.getCookie();

    const id = modal.querySelector('#consent-id');
    const timestamp = modal.querySelector('#consent-timestamp');
    const lastTimestamp = modal.querySelector('#last-consent-timestamp');

    id && (id.innerText = consentId);
    timestamp && (timestamp.innerText = new Date(consentTimestamp).toLocaleString());
    lastTimestamp && (lastTimestamp.innerText = new Date(lastConsentTimestamp).toLocaleString());
};

window.addEventListener('cc:onModalReady', ({ detail }) => {
    const { modalName, modal } = detail;

    if(modalName === 'preferencesModal'){
        CookieConsent.validConsent()
            ? updateConsentDetails(modal)
            : addEventListener('cc:onConsent', () => updateConsentDetails(modal));

        addEventListener('cc:onChange', () => updateConsentDetails(modal));
    }
});