JSFiddle - React, Tailwind, and code Playground

by TanyRay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>

JavaScript

var TAG_SEPARATOR_HTML_TEMPLATE = _.template('<%- separator %>');
    var NEW_LINE_SEPARATOR = '<br/>';
    var IS_TEMPLATE = TAG_SEPARATOR_HTML_TEMPLATE({ separator: ' IS ' });
    var IS_ONE_OF_TEMPLATE = TAG_SEPARATOR_HTML_TEMPLATE({ separator: ' IS ONE OF ' });
    var OR_SEPARATOR = NEW_LINE_SEPARATOR + TAG_SEPARATOR_HTML_TEMPLATE({ separator: 'OR ' });
    var AND_SEPARATOR = TAG_SEPARATOR_HTML_TEMPLATE({ separator: ' AND ' });
    
var singleAction = [
  {
    "type": "PRODUCT",
    "active": true,
    "key": "title",
    "values": [
      {
        "active": false,
        "value": "Product"
      },
      {
        "active": true,
        "value": "Trololol"
      }
    ],
    "associatedUserIds": []
  },
  {
    "merchantId": "58b43efa6afdb7c53ce13926",
    "type": "PRODUCT",
    "active": true,
    "key": "hotel",
    "values": [
      {
        "active": true,
        "value": "Hotel"
      }
    ],
    "associatedUserIds": []
  }
]

function tagPreprocessor(tagCondition) {
	var tagConditions = [];
	tagConditions.push({ tags: singleAction });
  return tagConditions;
}

function campaignTagFormatter(tagConditions) {
  var result = _.chain(tagConditions).map(function(tagCondition) {
    var joinedKeyValueTagPairs = tagCondition.tags.map(function (tag) {
      var isMultipleTagValues = tag.values.length > 1;
      var labelValueTagSeparator = isMultipleTagValues ? IS_ONE_OF_TEMPLATE : IS_TEMPLATE;
      return tag.key + labelValueTagSeparator + _.pluck(tag.values, 'value').join(', ');
    });

    return joinedKeyValueTagPairs.length > 1 ? joinedKeyValueTagPairs.join(AND_SEPARATOR) : joinedKeyValueTagPairs[0];
  }).filter(function (joinedKeyValueTagPair) {
          return !!joinedKeyValueTagPair;
  }).join(OR_SEPARATOR).value();
  return result;
}
 
console.log(campaignTagFormatter(tagPreprocessor(singleAction)));