@mopinion/deploy/assistant/components/Condition.js

Deploy your Mopinion feedback forms with ease

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = Condition;
exports.filterOrConditionArray = filterOrConditionArray;

var _rules = require("../../rules");

var _utils = require("../../utils");

var _Box = _interopRequireDefault(require("./Box"));

var _Indicator = _interopRequireDefault(require("./Indicator"));

var _useRemainingTime = _interopRequireDefault(require("../hooks/useRemainingTime"));

var _useRemainingSessionTime = _interopRequireDefault(require("../hooks/useRemainingSessionTime"));

var _jsxRuntime = require("preact/jsx-runtime");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var conditionNiceNames = {
  trigger: 'Trigger by',
  scrollpos: 'Scroll position',
  percentage: 'Percentage',
  pause: 'Is paused',
  number_of_pages: 'Number of pages',
  location: 'URL',
  referrer: 'Referrer',
  date: 'Date',
  clock: 'Time',
  type: 'New or returning',
  devices: 'Device',
  cookie: 'Cookies',
  css_selector: 'HTML elements',
  js: 'JavaScript variables',
  time: 'Time on page',
  time_in_session: 'Time in session',
  form_events: 'Form interaction',
  event_listeners: 'Page interaction',
  time_after_valid: 'Time after valid'
};
var triggerNiceNames = {
  passive: 'by button',
  proactive: 'proactive',
  exit: 'on page leave'
};

function filterOrConditionArray() {
  var conditionArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var testFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
  return conditionArray.filter(function (orCondition) {
    if (orCondition instanceof Array) {
      return orCondition.every(function (andCondition) {
        return testFn(andCondition);
      }) !== true;
    }

    return testFn(orCondition) !== true;
  });
}

function formatNestedOrAnd(arr, fn) {
  return "Does not match one of ".concat(arr.map(function (nestedArr) {
    return nestedArr.map(function (obj) {
      return fn(obj);
    }).join(' and ');
  }).join(' or '));
}

var conditionInvalidHandlers = {
  percentage: function percentage(value) {
    return "Outside of target group, percentage set: ".concat(value);
  },
  pause: function pause() {
    return 'The condition is currently paused';
  },
  scrollpos: function scrollpos(value) {
    return "Needs to be ".concat(value.px).concat(String(value.px).indexOf('%') === -1 ? ' pixels' : '', " from ").concat(value.from);
  },
  number_of_pages: function number_of_pages(value, _ref) {
    var pageCount = _ref.pageCount;
    return "Needs to be ".concat(value.check === 'min' ? 'at least' : 'at most', " ").concat(value.amount, " pages. Currently visited pages: ").concat(pageCount);
  },
  location: function location(value) {
    var url = (0, _rules.parseUrlString)(document.location.href);
    var operatorMap = {
      exists: 'contains',
      'does not exist': 'does not contain'
    };
    var failedLocations = filterOrConditionArray(value, function (locationCondition) {
      var _operatorMap$location;

      return (0, _rules.testCondition)({
        value1: url,
        value2: (0, _rules.parseUrlString)(locationCondition.value),
        operator: (_operatorMap$location = operatorMap[locationCondition.operator]) !== null && _operatorMap$location !== void 0 ? _operatorMap$location : locationCondition.operator,
        regex: locationCondition.regex
      });
    });
    return formatNestedOrAnd(failedLocations, function (obj) {
      return "".concat(obj.value, " ").concat(obj.operator);
    });
  },
  referrer: function referrer(value, _ref2) {
    var previousLocation = _ref2.previousLocation;
    var url = (0, _rules.parseUrlString)(previousLocation);
    var operatorMap = {
      exists: 'contains',
      'does not exist': 'does not contain'
    };
    var failedReferrers = filterOrConditionArray(value, function (referrerCondition) {
      var _operatorMap$referrer;

      if (typeof referrerCondition === 'string') {
        return (0, _rules.testCondition)({
          value1: url,
          value2: (0, _rules.parseUrlString)(referrerCondition),
          operator: 'contains',
          regex: false
        });
      }

      return (0, _rules.testCondition)({
        value1: url,
        value2: (0, _rules.parseUrlString)(referrerCondition.value),
        operator: (_operatorMap$referrer = operatorMap[referrerCondition.operator]) !== null && _operatorMap$referrer !== void 0 ? _operatorMap$referrer : referrerCondition.operator,
        regex: referrerCondition.regex
      });
    });
    return formatNestedOrAnd(failedReferrers, function (obj) {
      return "".concat(obj.value, " ").concat(obj.operator);
    });
  },
  devices: function devices(value) {
    var device = (0, _rules.getDeviceType)().phone ? 'phone' : (0, _rules.getDeviceType)().tablet ? 'tablet' : 'desktop';
    return "Needs to be: ".concat(value.join(', '), ", current device: ").concat(device);
  },
  type: function type(value) {
    return "Only ".concat(value, " vistors");
  },
  date: function date(value) {
    var currentDate = "".concat(new Date().getDate(), "/").concat(new Date().getMonth() + 1, "/").concat(new Date().getFullYear());

    switch (value.operator) {
      case 'between':
        return "Needs to be ".concat(value.operator, " ").concat(value.date, " and ").concat(value.date2, ", current date: ").concat(currentDate);

      case 'exactly':
        return "Needs to be ".concat(value.operator, " ").concat(value.date, ", current date: ").concat(currentDate);

      default:
        return "Needs to be ".concat(value.operator, " than ").concat(value.date, ", current date: ").concat(currentDate);
    }
  },
  clock: function clock(value) {
    var now = new Date();
    var hours = "0".concat(now.getHours()).slice(-2);
    var minutes = "0".concat(now.getMinutes()).slice(-2);
    var currentTime = "".concat(hours, ":").concat(minutes);

    switch (value.operator) {
      case 'between':
        return "Needs to be ".concat(value.operator, " ").concat(value.time, " and ").concat(value.time2, ", current time: ").concat(currentTime);

      case 'exactly':
        return "Needs to be ".concat(value.operator, " ").concat(value.time, ", current time: ").concat(currentTime);

      default:
        return "Needs to be ".concat(value.operator, " than ").concat(value.time, ", current time: ").concat(currentTime);
    }
  },
  cookie: function cookie(value) {
    var failedCookies = filterOrConditionArray(value, function (cookieCondition) {
      return (0, _rules.testCondition)({
        value1: (0, _utils.getCookie)(cookieCondition.name),
        operator: cookieCondition.operator,
        value2: cookieCondition.value
      });
    });
    return formatNestedOrAnd(failedCookies, function (obj) {
      return "".concat(obj.name, " ").concat(obj.operator, " ").concat(obj.value);
    });
  },
  css_selector: function css_selector(value) {
    var failedSelectors = filterOrConditionArray(value, function (cssSelectorCondition) {
      return (0, _rules.testCondition)({
        value1: (0, _rules.getCssSelectorTextContent)(cssSelectorCondition.name),
        operator: cssSelectorCondition.operator,
        value2: cssSelectorCondition.value
      });
    });
    return formatNestedOrAnd(failedSelectors, function (obj) {
      return "".concat(obj.name, " ").concat(obj.operator, " ").concat(obj.value);
    });
  },
  js: function js(value) {
    var failedJsVars = filterOrConditionArray(value, function (jsCondition) {
      return (0, _rules.testCondition)({
        value1: (0, _rules.getJsFromString)(jsCondition.name),
        operator: jsCondition.operator,
        value2: jsCondition.value
      });
    });
    return formatNestedOrAnd(failedJsVars, function (obj) {
      return "".concat(obj.name, " ").concat(obj.operator, " ").concat(obj.value);
    });
  },
  event_listeners: function event_listeners(value, _ref3) {
    var eventListeners = _ref3.eventListeners;
    var failedEventListeners = filterOrConditionArray(value, function (eventListenerCondition) {
      return (0, _rules.testCondition)({
        value1: eventListeners === null || eventListeners === void 0 ? void 0 : eventListeners[eventListenerCondition.selector],
        operator: eventListenerCondition.operator,
        value2: eventListenerCondition.event
      });
    });
    var operatorMap = {
      contains: 'has',
      'does not contain': 'has not'
    };
    var eventNameMap = {
      click: 'been clicked',
      onmouseover: 'been hovered',
      input: 'received input'
    };
    return formatNestedOrAnd(failedEventListeners, function (obj) {
      return "".concat(obj.selector, " ").concat(operatorMap[obj.operator], " ").concat(eventNameMap[obj.event]);
    });
  },
  form_events: function form_events(value, _ref4) {
    var formEvents = _ref4.formEvents,
        surveyData = _ref4.surveyData;
    var failedFormEvents = filterOrConditionArray(value, function (formEventCondition) {
      return (0, _rules.testCondition)({
        value1: formEvents === null || formEvents === void 0 ? void 0 : formEvents[formEventCondition.formKey],
        operator: formEventCondition.operator,
        value2: formEventCondition.event
      });
    });
    var operatorMap = {
      contains: 'has been',
      'does not contain': 'has not been'
    };
    var eventNameMap = {
      feedback_sent: 'completed',
      shown: 'shown',
      hidden: 'closed'
    };
    return formatNestedOrAnd(failedFormEvents, function (obj) {
      var _surveyData$obj$formK;

      var formName = (_surveyData$obj$formK = surveyData[obj.formKey]) === null || _surveyData$obj$formK === void 0 ? void 0 : _surveyData$obj$formK.name;
      return "".concat(formName, " ").concat(operatorMap[obj.operator], " ").concat(eventNameMap[obj.event]);
    });
  },
  time: function time(value, _ref5) {
    var pageTime = _ref5.pageTime;
    return pageTime.remaining + ' seconds remaining';
  },
  time_after_valid: function time_after_valid(value, _ref6) {
    var validTime = _ref6.validTime;
    return validTime.remaining + ' seconds remaining';
  },
  time_in_session: function time_in_session(value, _ref7) {
    var sessionTime = _ref7.sessionTime;
    return sessionTime.remaining + ' seconds remaining';
  }
};

function parseConditionValues(_ref8) {
  var _conditionInvalidHand;

  var key = _ref8.key,
      value = _ref8.value,
      pageCount = _ref8.pageCount,
      pageTime = _ref8.pageTime,
      sessionTime = _ref8.sessionTime,
      eventListeners = _ref8.eventListeners,
      formEvents = _ref8.formEvents,
      surveyData = _ref8.surveyData,
      validTime = _ref8.validTime;
  var tooltip = (_conditionInvalidHand = conditionInvalidHandlers[key]) === null || _conditionInvalidHand === void 0 ? void 0 : _conditionInvalidHand.call(conditionInvalidHandlers, value, {
    pageCount: pageCount,
    pageTime: pageTime,
    sessionTime: sessionTime,
    eventListeners: eventListeners,
    formEvents: formEvents,
    surveyData: surveyData,
    validTime: validTime
  });
  return tooltip;
}

function Condition(_ref9) {
  var rule = _ref9.rule,
      ruleInstance = _ref9.ruleInstance,
      condition = _ref9.condition,
      index = _ref9.index,
      valid = _ref9.valid,
      surveyData = _ref9.surveyData;
  var timeOnPageValid = (0, _utils.timeInSeconds)() - (ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getTimeOnPageState(index, 'time')) >= Number(condition.time);
  var timeAfterValid = (0, _utils.timeInSeconds)() - (ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getTimeOnPageState(index, 'time_after_valid')) >= Number(condition.time);
  var pageTime = (0, _useRemainingTime["default"])({
    time: condition.time,
    timerStarted: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getTimeOnPageState(index),
    valid: timeOnPageValid
  });
  var validTime = (0, _useRemainingTime["default"])({
    time: condition.time_after_valid,
    timerStarted: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getTimeOnPageState(index, 'time_after_valid'),
    valid: timeAfterValid
  });
  var sessionTime = (0, _useRemainingSessionTime["default"])({
    index: index,
    ruleInstance: ruleInstance,
    timeInSession: condition.time_in_session
  });
  var alreadyTriggered = _rules.showOncePerSessionTriggers.indexOf(condition.trigger) > -1 && (ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getConditionState(index, function (state) {
    return state.triggered;
  }));
  var tested = Object.keys(condition).filter(function (conditionKey) {
    var conditionTestFn = _rules.conditionTests[conditionKey];
    var conditionValue = condition[conditionKey];

    if ((0, _rules.conditionValueIsEmpty)(conditionValue)) {
      return false;
    }

    if (typeof conditionTestFn !== 'function') {
      return false;
    }

    if (conditionKey === 'pause' && conditionTestFn(conditionValue)) {
      return false;
    }

    return true;
  }).map(function (conditionKey) {
    var _ruleInstance$globalL;

    var conditionTestFn = _rules.conditionTests[conditionKey];
    var conditionValue = condition[conditionKey];
    var state = {
      pageCount: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getState(function (state) {
        return state.pageCount;
      }),
      returning: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getState(function (state) {
        return state.returning;
      }),
      percentage: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getConditionState(index, function (state) {
        return state.percentage;
      }),
      timeOnPage: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getTimeOnPageState(index, 'time'),
      timeAfterValid: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getTimeOnPageState(index, 'time_after_valid'),
      sessionTime: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getConditionState(index, function (state) {
        return state.sessionTime;
      }),
      eventListeners: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getConditionState(index, function (state) {
        return state.domEvents;
      }),
      formEvents: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getConditionState(index, function (state) {
        return state.formEvents;
      }),
      referrer: ruleInstance === null || ruleInstance === void 0 ? void 0 : (_ruleInstance$globalL = ruleInstance.globalListenerStore) === null || _ruleInstance$globalL === void 0 ? void 0 : _ruleInstance$globalL.getPreviousLocation()
    };
    var valid = conditionTestFn(conditionValue, {
      rule: rule,
      state: state
    });
    return {
      name: conditionNiceNames[conditionKey],
      conditionKey: conditionKey,
      conditionValue: conditionValue,
      conditionValid: valid
    };
  });
  return (0, _jsxRuntime.jsxs)(_Box["default"], {
    name: "condition-container",
    children: [(0, _jsxRuntime.jsxs)(_Box["default"], {
      name: "condition-title-container",
      children: [(0, _jsxRuntime.jsx)(_Indicator["default"], {
        active: valid,
        small: true,
        mr: 1
      }), (0, _jsxRuntime.jsxs)(_Box["default"], {
        name: "condition-title",
        children: [(0, _jsxRuntime.jsxs)(_Box["default"], {
          children: ["Condition set ", index + 1]
        }), (0, _jsxRuntime.jsxs)(_Box["default"], {
          name: "session",
          children: [condition.session, " day session"]
        })]
      })]
    }), (0, _jsxRuntime.jsxs)(_Box["default"], {
      name: "condition-rule-container",
      children: [(0, _jsxRuntime.jsx)(_Indicator["default"], {
        small: true,
        active: condition.trigger === 'passive' || !alreadyTriggered && condition.trigger === 'proactive' || alreadyTriggered && valid,
        mr: 1
      }), (0, _jsxRuntime.jsxs)(_Box["default"], {
        children: [(0, _jsxRuntime.jsxs)(_Box["default"], {
          name: "condition-rule",
          children: ["Trigger ", triggerNiceNames[condition.trigger]]
        }), alreadyTriggered && !valid && (0, _jsxRuntime.jsx)(_Box["default"], {
          name: "invalid-reason",
          children: "Already triggered within session"
        })]
      })]
    }), tested.map(function (_ref10) {
      var _ruleInstance$globalL2;

      var name = _ref10.name,
          conditionValid = _ref10.conditionValid,
          conditionKey = _ref10.conditionKey,
          conditionValue = _ref10.conditionValue;
      return (0, _jsxRuntime.jsxs)(_Box["default"], {
        name: "condition-rule-container",
        children: [(0, _jsxRuntime.jsx)(_Indicator["default"], {
          small: true,
          active: conditionValid,
          mr: 1
        }), (0, _jsxRuntime.jsxs)(_Box["default"], {
          children: [(0, _jsxRuntime.jsx)(_Box["default"], {
            name: "condition-rule",
            children: name
          }), !conditionValid && (0, _jsxRuntime.jsx)(_Box["default"], {
            name: "invalid-reason",
            children: parseConditionValues({
              key: conditionKey,
              value: conditionValue,
              pageCount: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getState(function (state) {
                return state.pageCount;
              }),
              pageTime: pageTime,
              sessionTime: sessionTime,
              validTime: validTime,
              eventListeners: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getConditionState(index, function (state) {
                return state.domEvents;
              }),
              formEvents: ruleInstance === null || ruleInstance === void 0 ? void 0 : ruleInstance.getConditionState(index, function (state) {
                return state.formEvents;
              }),
              surveyData: surveyData,
              previousLocation: ruleInstance === null || ruleInstance === void 0 ? void 0 : (_ruleInstance$globalL2 = ruleInstance.globalListenerStore) === null || _ruleInstance$globalL2 === void 0 ? void 0 : _ruleInstance$globalL2.getPreviousLocation()
            })
          })]
        })]
      });
    })]
  });
}
//# sourceMappingURL=Condition.js.map