react-evergage-personalize/src/EvergagePersonalize.js

React component that gives the ability to leverage Evergage recommendations on a campaign level in react. This allows you to build custom recommendation components outside of evergage.

"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 PersonalizeTypes_1 = require("./PersonalizeTypes");
var evergage_datalayer_1 = require("evergage-datalayer");
var canUseDOM = typeof window !== "undefined";
var evergageReady = typeof Evergage !== "undefined";
var EvergagePersonalize = (function (_super) {
    __extends(EvergagePersonalize, _super);
    function EvergagePersonalize() {
        var _this = _super.call(this) || this;
        _this.campaignListener = _this.campaignListener.bind(_this);
        _this.state = {
            personalizationData: null,
        };
        return _this;
    }
    EvergagePersonalize.prototype.componentWillMount = function () {
        if (canUseDOM && evergageReady) {
            evergage_datalayer_1.subscribeToCampaign(this.campaignListener, this.props.campaign);
        }
    };
    EvergagePersonalize.prototype.render = function () {
        var _a = this.props, renderFn = _a.render, child = _a.children;
        var personalizationData = this.state.personalizationData;
        if (!personalizationData) {
            return null;
        }
        var childProps = {
            keys: personalizationData.keys,
            items: personalizationData.items,
            markup: personalizationData.markup,
        };
        return renderFn
            ? renderFn(childProps)
            : React.cloneElement(React.Children.only(child), childProps);
    };
    EvergagePersonalize.prototype.mapPropertiesByType = function (type, messages) {
        switch (type) {
            case PersonalizeTypes_1.PersonalizeTypes.Product:
                return {
                    items: [].concat.apply([], messages.map(function (x) { return x["promotedItems"]; })),
                    keys: [].concat.apply([], messages.map(function (x) { return x["promotedItemKeys"]; })),
                    markup: messages[0].htmlContent
                };
        }
    };
    EvergagePersonalize.prototype.campaignListener = function (campaign) {
        var type = this.props.type;
        this.setState({
            personalizationData: this.mapPropertiesByType(type, campaign.messages),
        });
    };
    return EvergagePersonalize;
}(React.Component));
exports.default = EvergagePersonalize;