react-evergage-ab/components/EvergageABTest.js

React component for integrating Evergage test experiences with your react code.

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Campaign_1 = require("../models/Campaign");
var evergage_datalayer_1 = require("evergage-datalayer");
var canUseDOM = typeof window !== "undefined";
var EvergageABTest = (function (_super) {
    __extends(EvergageABTest, _super);
    function EvergageABTest(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            selectedExperience: undefined,
            campaignEventReceived: false,
        };
        _this.handleEvent = _this.handleEvent.bind(_this);
        _this.callbackExperience = _this.callbackExperience.bind(_this);
        _this.checkForExperience = _this.checkForExperience.bind(_this);
        _this.renderExperience = _this.renderExperience.bind(_this);
        return _this;
    }
    EvergageABTest.prototype.componentDidMount = function () {
        var _this = this;
        if (!canUseDOM) {
            return;
        }
        var _a = this.props, campaign = _a.campaign, eventPrefix = _a.eventPrefix, timeout = _a.timeout;
        evergage_datalayer_1.subscribeToCampaign(this.handleEvent, campaign);
        if (document.readyState === "complete") {
            window.setTimeout(this.checkForExperience, timeout);
            return;
        }
        window.addEventListener("load", function () {
            window.setTimeout(_this.checkForExperience, timeout);
        });
    };
    EvergageABTest.prototype.checkForExperience = function () {
        var children = this.props.children;
        if (!this.state.campaignEventReceived && !this.props.supressFallback) {
            this.setState({
                selectedExperience: 0,
            });
            this.callbackExperience(0);
        }
    };
    EvergageABTest.prototype.handleEvent = function (campaign) {
        var currentExperienceIndex = parseInt(campaign.experienceName.match(/\d+/)[0], 10);
        this.setState({
            selectedExperience: currentExperienceIndex,
            campaignEventReceived: true,
        });
        this.callbackExperience(currentExperienceIndex);
    };
    EvergageABTest.prototype.callbackExperience = function (experienceId) {
        var campaign = this.props.campaign;
        var campaignObj = new Campaign_1.Campaign(experienceId, campaign);
        if (this.props.onExperience) {
            this.props.onExperience(campaignObj);
        }
    };
    EvergageABTest.prototype.renderExperience = function (children, selectedExperience, campaign) {
        try {
            var experiencedReceived = children[selectedExperience];
            return (experiencedReceived);
        }
        catch (err) {
            var errorMessage = "You do not have enough children to match the amount of experiences you have\n            configured in evergage... Campaign: " + campaign + " Experience selected: " + selectedExperience;
            // tslint:disable-next-line:no-console
            console.warn(errorMessage);
            return null;
        }
    };
    EvergageABTest.prototype.render = function () {
        var _a = this.props, supressFallback = _a.supressFallback, placeholder = _a.placeholder, children = _a.children, campaign = _a.campaign;
        var selectedExperience = this.state.selectedExperience;
        if (!canUseDOM) {
            return null;
        }
        if (!supressFallback && placeholder && selectedExperience === undefined) {
            var placeholderStyle = {
                visibility: "hidden",
            };
            return React.createElement("div", { style: placeholderStyle }, children[0]);
        }
        else if (selectedExperience === undefined) {
            return null;
        }
        return this.renderExperience(children, selectedExperience, campaign);
    };
    return EvergageABTest;
}(React.Component));
EvergageABTest.defaultProps = {
    eventPrefix: "EvergageAB",
    timeout: 100,
    defaultExperience: 0,
};
exports.default = EvergageABTest;