@highfivve/ad-tag 5.5.4

package/lib/console/components/adSlotConfig.js

@@ -0,0 +1,225 @@
+import React, { Fragment } from 'react';
+import { classList } from '../util/stringUtils';
+import { SizeConfigDebug } from './sizeConfigDebug';
+import { Tag } from './tag';
+import { extractPrebidAdSlotConfigs } from '../util/prebid';
+import { SizeConfigService } from '../../ads/sizeConfigService';
+const defaultPanelState = {
+    showA9: false,
+    showPrebid: false,
+    showGeneral: false,
+    showSizeConfig: false
+};
+export class AdSlotConfig extends React.Component {
+    constructor(props) {
+        super(props);
+        this.prebidConfig = (prebid) => {
+            const labels = this.props.labelConfigService.getSupportedLabels();
+            const prebidAdUnits = extractPrebidAdSlotConfigs(prebid).map(config => config.adUnit);
+            const hasMultipleBids = prebidAdUnits.length > 1;
+            const elements = prebidAdUnits.map((prebidAdUnit, index) => {
+                const slotSizeConfig = this.props.slot.sizeConfig;
+                const banner = prebidAdUnit.mediaTypes.banner;
+                const video = prebidAdUnit.mediaTypes.video;
+                const native = prebidAdUnit.mediaTypes.native;
+                return (React.createElement("div", { key: index },
+                    index > 0 && React.createElement("hr", null),
+                    hasMultipleBids && React.createElement("h5", null,
+                        index + 1,
+                        ". config"),
+                    React.createElement("div", { className: "MoliDebug-tagContainer" },
+                        React.createElement("span", { className: "MoliDebug-tagLabel" }, "Code"),
+                        React.createElement(Tag, { variant: "green" }, prebidAdUnit.code || this.props.slot.domId)),
+                    banner && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                        React.createElement("span", { className: "MoliDebug-tagLabel" }, "Banner sizes"),
+                        this.validateSlotSizes(banner.sizes).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slotSizeConfig)))),
+                    video && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                        React.createElement("span", { className: "MoliDebug-tagLabel" }, "Video"),
+                        React.createElement(Tag, { variant: "green" }, video.context),
+                        !!video.playerSize &&
+                            this.validateSlotSizes(this.isSingleVideoSize(video.playerSize) ? [video.playerSize] : video.playerSize).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slotSizeConfig)))),
+                    native && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                        React.createElement("span", { className: "MoliDebug-tagLabel" }, "Native"),
+                        React.createElement(Tag, { variant: "green" }, "true"))),
+                    prebidAdUnit.bids.map((bid, idx) => (React.createElement(Fragment, { key: idx },
+                        React.createElement("hr", null),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement("span", { className: "MoliDebug-tagLabel" },
+                                "Bidder #",
+                                idx + 1),
+                            React.createElement(Tag, { variant: "blue" }, bid.bidder ?? bid.module)),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" }, this.labelConfig(bid)),
+                        React.createElement("div", { className: "MoliDebug-tagContainer" },
+                            React.createElement("span", { className: "MoliDebug-tagLabel" }, "Params"),
+                            React.createElement(Tag, null, JSON.stringify(bid.params))))))));
+            });
+            if (elements.length === 1) {
+                return elements[0];
+            }
+            else {
+                return (React.createElement("div", null,
+                    React.createElement("h5", null,
+                        elements.length,
+                        " bid configurations"),
+                    elements));
+            }
+        };
+        this.a9Config = (a9) => {
+            const slotSizeConfig = this.props.slot.sizeConfig;
+            return (React.createElement("div", null,
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "Sizes"),
+                    this.validateSlotSizes(this.props.slot.sizes.filter(AdSlotConfig.isFixedSize)).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slotSizeConfig))),
+                React.createElement("div", { className: "MoliDebug-tagContainer" }, this.labelConfig(a9))));
+        };
+        this.toggleGeneral = () => this.setState({ showGeneral: !this.state.showGeneral });
+        this.toggleA9 = () => this.setState({ showA9: !this.state.showA9 });
+        this.togglePrebid = () => this.setState({ showPrebid: !this.state.showPrebid });
+        this.toggleSizeConfig = () => this.setState({ showSizeConfig: !this.state.showSizeConfig });
+        this.isVisiblePrebid = () => {
+            const prebid = this.props.slot.prebid;
+            if (prebid) {
+                const labels = this.props.labelConfigService.getSupportedLabels();
+                return extractPrebidAdSlotConfigs(prebid)
+                    .map(config => config.adUnit)
+                    .some(prebidAdUnit => {
+                    const video = prebidAdUnit.mediaTypes.video;
+                    const banner = prebidAdUnit.mediaTypes.banner;
+                    const native = prebidAdUnit.mediaTypes.native;
+                    const videoValid = !!video &&
+                        (!video.playerSize ||
+                            this.validateSlotSizes(this.isSingleVideoSize(video.playerSize) ? [video.playerSize] : video.playerSize).some(validatedSlotSize => validatedSlotSize.valid));
+                    return (!!native ||
+                        videoValid ||
+                        (!!banner &&
+                            this.validateSlotSizes(banner.sizes).some(validatedSlotSize => validatedSlotSize.valid)));
+                });
+            }
+            return true;
+        };
+        this.isVisibleA9 = () => {
+            const a9 = this.props.slot.a9;
+            if (a9) {
+                const supportedLabels = this.props.labelConfigService.getSupportedLabels();
+                if (a9.labelAll) {
+                    return a9.labelAll.every(label => supportedLabels.indexOf(label) > -1);
+                }
+                if (a9.labelAny) {
+                    return a9.labelAny.some(label => supportedLabels.indexOf(label) > -1);
+                }
+            }
+            return true;
+        };
+        this.isSingleVideoSize = (playerSize) => {
+            return (playerSize.length === 2 &&
+                typeof playerSize[0] === 'number' &&
+                typeof playerSize[1] === 'number');
+        };
+        this.validateSlotSizes = (sizes) => {
+            const slotSizeConfig = this.props.slot.sizeConfig;
+            const sizeConfigService = new SizeConfigService(slotSizeConfig, this.props.labelConfigService.getSupportedLabels(), window);
+            return sizes.map(size => ({
+                valid: sizeConfigService.filterSupportedSizes([size]).length > 0,
+                size
+            }));
+        };
+        this.tagFromValidatedSlotSize = (slotSize, hasSlotSizeConfig) => {
+            const sizeString = slotSize.size === 'fluid' ? slotSize.size : `${slotSize.size[0]}x${slotSize.size[1]}`;
+            return (React.createElement(Tag, { key: sizeString, variant: slotSize.valid ? 'green' : 'red', title: `${slotSize.valid ? 'Valid' : 'Invalid'} (${hasSlotSizeConfig ? 'slot' : 'global'} sizeConfig)` },
+                sizeString,
+                " ",
+                hasSlotSizeConfig ? 'Ⓢ' : 'Ⓖ'));
+        };
+        this.labelConfig = (labelledSlot) => {
+            const labelAll = labelledSlot.labelAll;
+            const labelAny = labelledSlot.labelAny;
+            const supportedLabels = this.props.labelConfigService.getSupportedLabels();
+            const labelAllMatches = !!labelAll && labelAll.every(label => supportedLabels.indexOf(label) > -1);
+            const labelAnyMatches = !!labelAny && labelAny.some(label => supportedLabels.indexOf(label) > -1);
+            return (React.createElement("div", null,
+                labelAll && labelAll.length > 0 && (React.createElement("div", null,
+                    React.createElement("span", { className: classList('MoliDebug-tagLabel', [labelAllMatches, 'MoliDebug-tag--greenText'], [!labelAllMatches, 'MoliDebug-tag--redText']) }, "labelAll"),
+                    labelAll.map(label => (React.createElement(Tag, { key: label, variant: supportedLabels.indexOf(label) > -1 ? 'green' : 'red' }, label))))),
+                labelAny && labelAny.length > 0 && (React.createElement("div", null,
+                    React.createElement("span", { className: classList('MoliDebug-tagLabel', [labelAnyMatches, 'MoliDebug-tag--greenText'], [!labelAnyMatches, 'MoliDebug-tag--redText']) }, "labelAny"),
+                    labelAll && labelAll.length > 0 && (React.createElement(Tag, { variant: 'yellow' }, "labelAll was already evaluated, labelAny is ignored")),
+                    labelAny.map(label => {
+                        const labelFound = supportedLabels.indexOf(label) > -1;
+                        return (React.createElement(Tag, { key: label, variant: labelFound ? 'green' : 'red' }, label));
+                    })))));
+        };
+        if (props.parentElement) {
+            props.parentElement.classList.add('MoliDebug-posRelative');
+            const { width, height } = props.parentElement.getBoundingClientRect();
+            this.state = {
+                dimensions: { width, height },
+                ...defaultPanelState
+            };
+        }
+        else {
+            this.state = defaultPanelState;
+        }
+    }
+    render() {
+        const { labelConfigService, slot, parentElement } = this.props;
+        const { dimensions, showGeneral, showA9, showPrebid, showSizeConfig } = this.state;
+        const slotValid = slot.behaviour.loaded === 'infinite' ? true : labelConfigService.filterSlot(slot);
+        const slotElementExists = !!document.getElementById(slot.domId);
+        const slotVisible = slotValid && slotElementExists;
+        const isConfiguredInfiniteSlot = slot.behaviour.loaded === 'infinite' && !slotVisible;
+        const prebidValid = this.isVisiblePrebid();
+        const a9Valid = slotVisible && this.isVisibleA9();
+        function setSlotVisibilityIcon(slotVisible, loadingBehaviour) {
+            if (slotVisible) {
+                return '✔';
+            }
+            else if (isConfiguredInfiniteSlot) {
+                return '?';
+            }
+            else {
+                return 'x';
+            }
+        }
+        const getBucketName = (bucket) => {
+            if (!bucket) {
+                return 'default';
+            }
+            if (typeof bucket === 'string') {
+                return bucket;
+            }
+            return bucket[labelConfigService.getDeviceLabel()] ?? 'default';
+        };
+        return (React.createElement("div", { className: classList('MoliDebug-adSlot', [!!parentElement, 'MoliDebug-adSlot--overlay'], [!parentElement && slotVisible, 'is-rendered'], [!parentElement && !slotVisible, 'is-notRendered'], [isConfiguredInfiniteSlot, 'is-configuredInfinite']), style: dimensions },
+            React.createElement("div", { className: "MoliDebug-adSlot-buttons" },
+                !parentElement && (React.createElement("button", { title: slot.behaviour.loaded === 'infinite'
+                        ? `Configuration only used to copy on slots with infinite selector`
+                        : `Slot ${slotVisible ? '' : 'not '}rendered`, className: classList('MoliDebug-adSlot-button', [slotVisible, 'is-rendered'], [!slotVisible, 'is-notRendered'], [isConfiguredInfiniteSlot, 'is-configuredInfinite']), onClick: this.toggleGeneral }, setSlotVisibilityIcon(slotVisible, slot.behaviour.loaded))),
+                React.createElement("button", { title: "Show general slot info", className: classList('MoliDebug-adSlot-button', [showGeneral, 'is-active']), onClick: this.toggleGeneral }, "\u24D8"),
+                slot.a9 && (React.createElement("button", { title: "Show A9 config", className: classList('MoliDebug-adSlot-button', [showA9, 'is-active'], [a9Valid, 'is-rendered'], [!a9Valid, 'is-notRendered']), onClick: this.toggleA9 }, "A9")),
+                slot.prebid && (React.createElement("button", { title: "Show Prebid config", className: classList('MoliDebug-adSlot-button', [showPrebid, 'is-active'], [prebidValid, 'is-rendered'], [!prebidValid, 'is-notRendered']), onClick: this.togglePrebid }, "pb")),
+                slot.sizeConfig && (React.createElement("button", { title: "Show sizeConfig", className: classList('MoliDebug-adSlot-button MoliDebug-adSlot-button--sizeConfig', [slotValid, 'is-rendered'], [!slotValid, 'is-notRendered'], [showSizeConfig, 'is-active']), onClick: this.toggleSizeConfig })),
+                isConfiguredInfiniteSlot && (React.createElement("p", null, "Looking up infinite slots is currently not implemented"))),
+            showGeneral && (React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--blue MoliDebug-panel--collapsible" },
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement(Tag, { variant: "green" }, slot.position),
+                    React.createElement(Tag, { variant: "yellow" }, slot.behaviour.loaded),
+                    slot.behaviour.bucket && (React.createElement(Tag, { variant: "blue" }, getBucketName(slot.behaviour.bucket)))),
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement("span", { className: classList('MoliDebug-tagLabel', [slotElementExists, 'MoliDebug-tag--greenText'], [!slotElementExists, 'MoliDebug-tag--redText']) }, "DOM ID"),
+                    React.createElement(Tag, { variant: slotElementExists ? 'green' : 'red', title: `Slot ${slotElementExists ? '' : 'not '}found in DOM` }, slot.domId)),
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "AdUnit path"),
+                    React.createElement(Tag, null, slot.adUnitPath)),
+                slot.sizes.length > 0 && (React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "Sizes"),
+                    this.validateSlotSizes(slot.sizes).map(validatedSlotSize => this.tagFromValidatedSlotSize(validatedSlotSize, !!slot.sizeConfig)))),
+                React.createElement("div", { className: "MoliDebug-tagContainer" }, this.labelConfig(slot)))),
+            showA9 && slot.a9 && (React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--blue MoliDebug-panel--collapsible" }, this.a9Config(slot.a9))),
+            showPrebid && slot.prebid && (React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--blue MoliDebug-panel--collapsible" }, this.prebidConfig(slot.prebid))),
+            showSizeConfig && slot.sizeConfig && (React.createElement("div", { className: "MoliDebug-panel MoliDebug-panel--blue MoliDebug-panel--collapsible" },
+                React.createElement(SizeConfigDebug, { sizeConfig: slot.sizeConfig, supportedLabels: labelConfigService.getSupportedLabels() })))));
+    }
+    static isFixedSize(size) {
+        return size !== 'fluid';
+    }
+}

package/lib/console/components/consentConfig.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { Tag } from './tag';
+import { TCString } from '@iabtcf/core';
+import { tcfapi } from '../../types/tcfapi';
+const cmpVendors = {
+    '3': {
+        name: ' LiveRamp',
+        website: 'https://liveramp.com/',
+        subDomain: '\tfaktor.mgr.consensu.org'
+    },
+    '5': {
+        name: ' Usercentrics GmbH',
+        website: 'https://usercentrics.com/',
+        subDomain: 'usercentrics.mgr.consensu.org'
+    },
+    '6': {
+        name: 'Sourcepoint Technologies, Inc.',
+        website: 'https://sourcepoint.com',
+        subDomain: 'sourcepoint.mgr.consensu.org'
+    },
+    '10': {
+        name: 'Quantcast International Limited',
+        website: 'https://quantcast.com',
+        subDomain: 'quantcast.mgr.consensu.org'
+    },
+    '21': {
+        name: 'Traffective GmbH',
+        website: 'https://traffective.com',
+        subDomain: 'traffective.mgr.consensu.org'
+    }
+};
+export const ConsentConfig = () => {
+    const [consentState, setConsentState] = React.useState({ messages: [] });
+    React.useEffect(() => {
+        if (window.__tcfapi) {
+            window.__tcfapi('addEventListener', 2, event => {
+                const tcModel = event.gdprApplies ? TCString.decode(event.tcString) : undefined;
+                setConsentState(prevState => ({
+                    ...prevState,
+                    cmpStatus: event.cmpStatus,
+                    tcModel: tcModel,
+                    tcString: event.gdprApplies ? event.tcString : 'none'
+                }));
+            });
+        }
+        else {
+            setConsentState(prevState => ({
+                ...prevState,
+                cmpStatus: tcfapi.status.CmpStatus.ERROR
+            }));
+        }
+        if (!isCmpFunctionAvailable()) {
+            const errorMessage = {
+                kind: 'error',
+                text: 'no window.__tcfapi function found. Consent management and ads will not work!'
+            };
+            setConsentState(prevState => ({
+                ...prevState,
+                messages: [errorMessage, ...prevState.messages]
+            }));
+        }
+    });
+    const cmpVendorTag = () => {
+        if (consentState.tcModel) {
+            const cmpVendor = cmpVendors[consentState.tcModel.cmpId.toString()];
+            if (cmpVendor) {
+                return (React.createElement(Tag, { variant: "grey" },
+                    React.createElement("a", { href: cmpVendor.website },
+                        cmpVendor.name,
+                        " (id: ",
+                        consentState.tcModel.cmpId.toString(),
+                        ")")));
+            }
+            else {
+                return React.createElement(Tag, { variant: "yellow" }, consentState.tcModel.cmpId.toString());
+            }
+        }
+        else {
+            return React.createElement(Tag, { variant: "red" }, "No defined");
+        }
+    };
+    const consent = () => {
+        const { gdprApplies, tcModel } = consentState;
+        return (React.createElement("div", null,
+            React.createElement("div", { className: "MoliDebug-tagContainer" },
+                React.createElement("span", { className: "MoliDebug-tagLabel" },
+                    React.createElement("a", { href: "https://iabeurope.eu/cmp-list/" }, "GDPR")),
+                !!gdprApplies),
+            React.createElement("div", { className: "MoliDebug-tagContainer" },
+                React.createElement("span", { className: "MoliDebug-tagLabel" },
+                    React.createElement("a", { href: "https://iabeurope.eu/cmp-list/" }, "CMP ID")),
+                cmpVendorTag()),
+            React.createElement("div", { className: "MoliDebug-tagContainer" },
+                React.createElement("span", { className: "MoliDebug-tagLabel" }, "Last updated"),
+                tcModel ? (React.createElement(Tag, null, tcModel.lastUpdated.toLocaleString())) : (React.createElement(Tag, { variant: "red" }, "Unknown"))),
+            React.createElement("div", { className: "MoliDebug-tagContainer" },
+                React.createElement("span", { className: "MoliDebug-tagLabel" }, "TCF Policy Version"),
+                tcModel ? (React.createElement(Tag, null, tcModel.policyVersion.toString())) : (React.createElement(Tag, { variant: "red" }, "Unknown")))));
+    };
+    const isCmpFunctionAvailable = () => window.__tcfapi || typeof window.__tcfapi === 'function';
+    const consentData = () => {
+        if (isCmpFunctionAvailable()) {
+            return (React.createElement("div", null,
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "vendor list version"),
+                    React.createElement(Tag, null, consentState.tcModel
+                        ? consentState.tcModel.vendorListVersion.toString()
+                        : 'not found')),
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement("span", { className: "MoliDebug-tagLabel" }, "num vendors allowed"),
+                    React.createElement(Tag, null, consentState.tcModel
+                        ? consentState.tcModel.vendorConsents.size.toString()
+                        : 'not found')),
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement("span", { className: "MoliDebug-tagLabelBtn", "data-toggle": "collapse", "data-target": "#collapsePurposes", "aria-expanded": "false", "aria-controls": "collapsePurposes" }, "allowed purposes"),
+                    React.createElement(Tag, null, consentState.tcModel
+                        ? consentState.tcModel.purposeConsents.size.toString()
+                        : 'not found'),
+                    React.createElement("div", { className: "collapse", id: "collapsePurposes" },
+                        React.createElement("a", { href: "https://iabeurope.eu/iab-europe-transparency-consent-framework-policies/#Appendix_A_Purposes_and_Features_Definitions" }, "Purpose and Feature definitions"),
+                        React.createElement("br", null),
+                        consentState.tcModel &&
+                            Array.from(consentState.tcModel.purposeConsents).map(([id, accepted]) => {
+                                return (React.createElement(Tag, { key: id, variant: accepted ? 'green' : 'red' },
+                                    id.toString(),
+                                    ": ",
+                                    accepted ? 'accepted' : 'denied'));
+                            }))),
+                React.createElement("div", { className: "MoliDebug-tagContainer" },
+                    React.createElement("span", { className: "MoliDebug-tagLabelBtn", "data-toggle": "collapse", "data-target": "#collapseConsentString", "aria-expanded": "false", "aria-controls": "collapseConsentString" }, "consent string"),
+                    React.createElement("div", { className: "collapse", id: "collapseConsentString" },
+                        React.createElement(Tag, null, consentState.tcString ? consentState.tcString : 'not found')))));
+        }
+    };
+    return (React.createElement("div", null,
+        consent(),
+        consentData()));
+};