Feedback loop

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var feedbackLoopJS = function feedbackLoopJS() {
  // CONSTANTS
  var feedbackLoopClass = 'wmnds-feedback-loop';
  var isOpenClass = 'wmnds-is--open';
  var isSentClass = 'wmnds-is--sent';
  var formGroupClass = 'wmnds-fe-group';
  var formInputClass = 'wmnds-fe-input';
  var formCheckBoxesClass = 'wmnds-fe-checkboxes';
  var formTextareaClass = 'wmnds-fe-textarea';
  var formGroupErrorClass = "".concat(formGroupClass, "--error");
  var inputErrorClass = "".concat(formInputClass, "--error");
  var errorMessageClass = 'wmnds-fe-error-message';

  // Helper functions
  var nodeListToArray = function nodeListToArray(nodeList) {
    return Array.prototype.slice.call(nodeList);
  };
  var createErrorMessage = function createErrorMessage(textContent) {
    var element = document.createElement('span');
    element.classList.add(errorMessageClass);
    element.textContent = textContent;
    return element;
  };

  // Form submission functions
  var sendFeedback = function sendFeedback(data) {
    // Send data
    var url = 'https://prod-10.uksouth.logic.azure.com/workflows/8bf9c75f399246de96cf505a1331e738/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=qSXrjDmMgHoPORSob4-uqonyJyF8mB8addKURnOhL1E';
    fetch(url, {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(function(response) {
      return response.text();
    }).then(function(text) {
      // eslint-disable-next-line no-console
      console.log(text);
    });
  };
  var parseFormData = function parseFormData(nodeList) {
    var formData = {};
    // Add data from DOM
    formData.contentPath = document.location.pathname;
    // Add data from form fields
    var formFields = nodeListToArray(nodeList);
    formFields.forEach(function(field) {
      if (!field.value) return;
      if (field.type === 'checkbox') return;
      if (field.type === 'radio' && !field.checked) return;
      formData[field.name] = field.value;
    });
    return formData;
  };
  var sendPageUsefulFeedback = function sendPageUsefulFeedback(inputElements, isPageUseful) {
    var formData = parseFormData(inputElements);
    formData.contentHelpful = isPageUseful;
    sendFeedback(formData);
  };
  var sendSomethingWrongFeedback = function sendSomethingWrongFeedback(inputElements) {
    var formData = parseFormData(inputElements);
    sendFeedback(formData);
  };

  // Form validation functions
  var getFormGroupToValidate = function getFormGroupToValidate(form) {
    var formGroups = nodeListToArray(form.querySelectorAll(".".concat(formGroupClass)));
    var filterFunc = function filterFunc(group) {
      return group.querySelectorAll('[required="true"]').length;
    };
    var formGroupsToValidate = formGroups.filter(filterFunc);
    return formGroupsToValidate;
  };
  var showErrorState = function showErrorState(formGroup, type) {
    if (formGroup.classList.contains(formGroupErrorClass)) return;
    formGroup.classList.add(formGroupErrorClass);
    switch (type) {
      case 'checkbox': {
        var container = formGroup.querySelector(".".concat(formCheckBoxesClass));
        var errorMsg = createErrorMessage('This field is required');
        container.prepend(errorMsg);
        break;
      }
      case 'textarea': {
        var textareaElement = formGroup.querySelector(".".concat(formTextareaClass));
        var parentElement = textareaElement.parentElement;
        var _errorMsg = createErrorMessage('This field is required');
        textareaElement.classList.add(inputErrorClass);
        parentElement.insertBefore(_errorMsg, textareaElement);
        break;
      }
      case 'text': {
        var inputElement = formGroup.querySelector(".".concat(formInputClass));
        var _parentElement = inputElement.parentElement;
        var _errorMsg2 = createErrorMessage('This field is required');
        inputElement.classList.add(inputErrorClass);
        _parentElement.insertBefore(_errorMsg2, inputElement);
        break;
      }
      default:
        break;
    }
  };
  var clearErrorState = function clearErrorState(formGroup) {
    formGroup.classList.remove(formGroupErrorClass);
    // Remove error messages
    var errorMsg = formGroup.querySelector(".".concat(errorMessageClass));
    if (errorMsg) errorMsg.remove();
    // Remove error classes
    var erroredInputs = formGroup.querySelectorAll(".".concat(inputErrorClass));
    erroredInputs.forEach(function(input) {
      return input.classList.remove(inputErrorClass);
    });
  };
  var addValidationEvents = function addValidationEvents(form) {
    var formGroups = getFormGroupToValidate(form);
    // Loop through and add invalid validation
    formGroups.forEach(function(group) {
      var formElements = group.querySelectorAll('[required="true"]');
      formElements.forEach(function(element) {
        element.addEventListener('input', function() {
          return clearErrorState(group);
        });
        element.addEventListener('invalid', function(event) {
          event.preventDefault();
          showErrorState(group, element.type);
        });
      });
    });
  };

  // Set up all the feedback loops
  var feedbackLoops = document.querySelectorAll(".".concat(feedbackLoopClass));
  feedbackLoops.forEach(function(feedbackLoop) {
    var somethingWrongBtn = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__wrong > button"));
    var closeBtn = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__form legend + button"));
    var questionsRef = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__questions"));
    var contentWrongFormRef = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__form"));
    var pageUsefulRef = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__useful"));
    var pageUsefulBtns = nodeListToArray(pageUsefulRef.querySelectorAll('button'));

    // Form functions
    var clearFormErrors = function clearFormErrors() {
      var formGroups = nodeListToArray(contentWrongFormRef.querySelectorAll(".".concat(formGroupClass)));
      formGroups.forEach(function(group) {
        return clearErrorState(group);
      });
    };
    var toggleFeedbackForm = function toggleFeedbackForm() {
      var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
      if (event) event.preventDefault();
      feedbackLoop.classList.toggle(isOpenClass);
      clearFormErrors();
    };
    var submitIsPageUseful = function submitIsPageUseful(event) {
      var inputElements = feedbackLoop.querySelectorAll('[type="hidden"]');
      sendPageUsefulFeedback(inputElements, event.target.textContent);
      pageUsefulRef.classList.add(isSentClass);
    };
    var submitContentWrongForm = function submitContentWrongForm(event) {
      event.preventDefault();
      var inputElements = feedbackLoop.querySelectorAll('textarea, input');
      sendSomethingWrongFeedback(inputElements);
      questionsRef.classList.add(isSentClass);
      toggleFeedbackForm();
    };

    // Attach form event listeners
    somethingWrongBtn.addEventListener('click', toggleFeedbackForm);
    closeBtn.addEventListener('click', toggleFeedbackForm);
    addValidationEvents(contentWrongFormRef);
    pageUsefulBtns.forEach(function(btn) {
      return btn.addEventListener('click', submitIsPageUseful);
    });
    contentWrongFormRef.addEventListener('submit', submitContentWrongForm);
  });
};
var _default = feedbackLoopJS;
exports["default"] = _default;

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var feedbackLoopJS = function feedbackLoopJS() {
  // CONSTANTS
  var feedbackLoopClass = 'wmnds-feedback-loop';
  var isOpenClass = 'wmnds-is--open';
  var isSentClass = 'wmnds-is--sent';
  var formGroupClass = 'wmnds-fe-group';
  var formInputClass = 'wmnds-fe-input';
  var formCheckBoxesClass = 'wmnds-fe-checkboxes';
  var formTextareaClass = 'wmnds-fe-textarea';
  var formGroupErrorClass = "".concat(formGroupClass, "--error");
  var inputErrorClass = "".concat(formInputClass, "--error");
  var errorMessageClass = 'wmnds-fe-error-message';

  // Helper functions
  var nodeListToArray = function nodeListToArray(nodeList) {
    return Array.prototype.slice.call(nodeList);
  };
  var createErrorMessage = function createErrorMessage(textContent) {
    var element = document.createElement('span');
    element.classList.add(errorMessageClass);
    element.textContent = textContent;
    return element;
  };

  // Form submission functions
  var sendFeedback = function sendFeedback(data) {
    // Send data
    var url = 'https://prod-10.uksouth.logic.azure.com/workflows/8bf9c75f399246de96cf505a1331e738/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=qSXrjDmMgHoPORSob4-uqonyJyF8mB8addKURnOhL1E';
    fetch(url, {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(function(response) {
      return response.text();
    }).then(function(text) {
      // eslint-disable-next-line no-console
      console.log(text);
    });
  };
  var parseFormData = function parseFormData(nodeList) {
    var formData = {};
    // Add data from DOM
    formData.contentPath = document.location.pathname;
    // Add data from form fields
    var formFields = nodeListToArray(nodeList);
    formFields.forEach(function(field) {
      if (!field.value) return;
      if (field.type === 'checkbox') return;
      if (field.type === 'radio' && !field.checked) return;
      formData[field.name] = field.value;
    });
    return formData;
  };
  var sendPageUsefulFeedback = function sendPageUsefulFeedback(inputElements, isPageUseful) {
    var formData = parseFormData(inputElements);
    formData.contentHelpful = isPageUseful;
    sendFeedback(formData);
  };
  var sendSomethingWrongFeedback = function sendSomethingWrongFeedback(inputElements) {
    var formData = parseFormData(inputElements);
    sendFeedback(formData);
  };

  // Form validation functions
  var getFormGroupToValidate = function getFormGroupToValidate(form) {
    var formGroups = nodeListToArray(form.querySelectorAll(".".concat(formGroupClass)));
    var filterFunc = function filterFunc(group) {
      return group.querySelectorAll('[required="true"]').length;
    };
    var formGroupsToValidate = formGroups.filter(filterFunc);
    return formGroupsToValidate;
  };
  var showErrorState = function showErrorState(formGroup, type) {
    if (formGroup.classList.contains(formGroupErrorClass)) return;
    formGroup.classList.add(formGroupErrorClass);
    switch (type) {
      case 'checkbox': {
        var container = formGroup.querySelector(".".concat(formCheckBoxesClass));
        var errorMsg = createErrorMessage('This field is required');
        container.prepend(errorMsg);
        break;
      }
      case 'textarea': {
        var textareaElement = formGroup.querySelector(".".concat(formTextareaClass));
        var parentElement = textareaElement.parentElement;
        var _errorMsg = createErrorMessage('This field is required');
        textareaElement.classList.add(inputErrorClass);
        parentElement.insertBefore(_errorMsg, textareaElement);
        break;
      }
      case 'text': {
        var inputElement = formGroup.querySelector(".".concat(formInputClass));
        var _parentElement = inputElement.parentElement;
        var _errorMsg2 = createErrorMessage('This field is required');
        inputElement.classList.add(inputErrorClass);
        _parentElement.insertBefore(_errorMsg2, inputElement);
        break;
      }
      default:
        break;
    }
  };
  var clearErrorState = function clearErrorState(formGroup) {
    formGroup.classList.remove(formGroupErrorClass);
    // Remove error messages
    var errorMsg = formGroup.querySelector(".".concat(errorMessageClass));
    if (errorMsg) errorMsg.remove();
    // Remove error classes
    var erroredInputs = formGroup.querySelectorAll(".".concat(inputErrorClass));
    erroredInputs.forEach(function(input) {
      return input.classList.remove(inputErrorClass);
    });
  };
  var addValidationEvents = function addValidationEvents(form) {
    var formGroups = getFormGroupToValidate(form);
    // Loop through and add invalid validation
    formGroups.forEach(function(group) {
      var formElements = group.querySelectorAll('[required="true"]');
      formElements.forEach(function(element) {
        element.addEventListener('input', function() {
          return clearErrorState(group);
        });
        element.addEventListener('invalid', function(event) {
          event.preventDefault();
          showErrorState(group, element.type);
        });
      });
    });
  };

  // Set up all the feedback loops
  var feedbackLoops = document.querySelectorAll(".".concat(feedbackLoopClass));
  feedbackLoops.forEach(function(feedbackLoop) {
    var somethingWrongBtn = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__wrong > button"));
    var closeBtn = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__form legend + button"));
    var questionsRef = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__questions"));
    var contentWrongFormRef = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__form"));
    var pageUsefulRef = feedbackLoop.querySelector(".".concat(feedbackLoopClass, "__useful"));
    var pageUsefulBtns = nodeListToArray(pageUsefulRef.querySelectorAll('button'));

    // Form functions
    var clearFormErrors = function clearFormErrors() {
      var formGroups = nodeListToArray(contentWrongFormRef.querySelectorAll(".".concat(formGroupClass)));
      formGroups.forEach(function(group) {
        return clearErrorState(group);
      });
    };
    var toggleFeedbackForm = function toggleFeedbackForm() {
      var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
      if (event) event.preventDefault();
      feedbackLoop.classList.toggle(isOpenClass);
      clearFormErrors();
    };
    var submitIsPageUseful = function submitIsPageUseful(event) {
      var inputElements = feedbackLoop.querySelectorAll('[type="hidden"]');
      sendPageUsefulFeedback(inputElements, event.target.textContent);
      pageUsefulRef.classList.add(isSentClass);
    };
    var submitContentWrongForm = function submitContentWrongForm(event) {
      event.preventDefault();
      var inputElements = feedbackLoop.querySelectorAll('textarea, input');
      sendSomethingWrongFeedback(inputElements);
      questionsRef.classList.add(isSentClass);
      toggleFeedbackForm();
    };

    // Attach form event listeners
    somethingWrongBtn.addEventListener('click', toggleFeedbackForm);
    closeBtn.addEventListener('click', toggleFeedbackForm);
    addValidationEvents(contentWrongFormRef);
    pageUsefulBtns.forEach(function(btn) {
      return btn.addEventListener('click', submitIsPageUseful);
    });
    contentWrongFormRef.addEventListener('submit', submitContentWrongForm);
  });
};
var _default = feedbackLoopJS;
exports["default"] = _default;