iframe.js

var Iframe = (function () {
  // variables ----------------------------------------------------------------
  var _this = {}
  ;(_view = null),
    (_listener = null),
    (_this.currentStep = 1),
    (_this.currentInput = $('#expertIntake input[name="firstname"]'))
  ;(_this.currentState = null),
    (_this.currentOpp = null),
    (_this.currentPage =
      window.location != window.parent.location
        ? document.referrer
        : document.location),
    (_this.currentTitle = null)

  // initialize ---------------------------------------------------------------
  _this.init = function () {
    // load settings from local storage
    loadSettings()
    // handle settings change
    handleSettingsChange()
    handleRefreshLink()

    // simple way to retrieve a querystring value
    _view = window.location.href.match(/view\=([^&]+)/)

    // handle clearing form input
    handleFormInputDblClick()
    handleInputChange()

    // submit handler
    handleSubmit()

    handleResetForm()

    // receive messages from "background.js"
    chrome.extension.onMessage.addListener(background_onMessage)

    // tell "inject.js" that the iframe is loaded
    _this.tell("iframe-loaded")
  }
  // private functions --------------------------------------------------------
  function handleRefreshLink() {
    // build refresh link
    $(".refresh-link").on("click", function (e) {
      e.preventDefault()
      getOppList("refresh")
    })
  }
  function updateStatus(text) {
    // console.log(text)
    var statusDiv = $("#form-status")
    statusDiv.text(text)
  }
  function handleFormInputDblClick() {
    $("body").dblclick(function (e) {
      if ($(e.target).is("#expertIntakeSubmit")) {
        return false
      }
      // clear form input on doubleClick
      if ($(e.target).is("#expertIntake input")) {
        e.preventDefault()
        $(e.target).val("")
        $(e.target).focus()
        return false
      }
    })
  }
  function resetForm() {
    $('#expertIntake input[name="firstname"]').val("")
    $('#expertIntake input[name="lastname"]').val("")
    $('#expertIntake input[name="email"]').val("")
    $('#expertIntake input[name="image"]').val("")
    $(".expert-image-container").css("background", "#eee")

    // back to first field
    updateInputField(1)
  }
  function handleInputChange() {
    // watch for focus on inputs
    document.addEventListener(
      "focus",
      function (e) {
        updateInputField(e.target.name)
      },
      true
    )
  }

  function handleLoader(showOrHide, status) {
    var tick = null
    var status = status || "Working"
    if (showOrHide == "show") {
      $("#overlay").addClass("show")
      var i = 0
      if (status == "Working") {
        tick = setInterval(function () {
          i = ++i % 4
          $("#loading").html("WORKING" + Array(i + 1).join("."))
        }, 500)
      } else {
        $("#loading").html(status)
      }
    } else {
      $("#overlay").removeClass("show")
      if (tick !== null) {
        clearInterval(tick)
      }
    }
  }

  function handleSubmit() {
    /*
        Submit Form to Salesforce
    */
    // $(document).on('submit', '#expertIntake', function (e) {
    $("#expertIntakeSubmit").on("click", function (e) {
      e.preventDefault()
      console.log(
        $("#expertIntake")
          .serializeArray()
          .reduce(function (m, o) {
            m[o.name] = o.value
            return m
          }, {})
      )
      if (validateForm() == true) {
        handleLoader("show")
        // send submit to bg script

        chrome.runtime.sendMessage(
          {
            type: "submit-form",
            formData: objectifyForm($("#expertIntake").serializeArray()),
          },
          function (response) {
            console.log(
              "iframe.js got a response from background.js:",
              response
            )
          }
        )
        updateInputField(1)
      } else {
        // error submitting
        alert("There was an error with your form")
      }
    })
  }

  function handleImageClick(data) {
    var imageInput = $('#expertIntake input[name="image"]')
    var imagePreview = $(".expert-image-container")

    imagePreview.css("background", "none")
    imagePreview.css("background", "url(" + data.src + ")")
    imageInput.val(data.src)
    // imageInput.focus()
    imageInput.change(function () {
      imagePreview.css("background", "none")
      imagePreview.css("background", "url(" + $(this).val() + ")")
    })
    // updateInputField(5)
  }

  function handleEmailClick(data) {
    $('#expertIntake input[name="email"]').val(data.email_url).focus()
    updateInputField(4)
  }
  function handleResetForm() {
    $("#reset-form").on("click", function (e) {
      e.preventDefault()
      resetForm()
    })
  }

  function clearSelection() {
    _this.tell("clear-selection")
  }

  function getCurrentPage() {
    _this.tell("iframe-loaded")
    $('input[name="website"]').val(_this.currentPage)
  }

  // change input for region
  $("#inputCountry").on("change", function (e) {
    var value = e.target.value
    console.log(value, e)
    handleCountryChange(value)
  })
  function handleCountryChange(country, state) {
    switch (country) {
      case "United States":
        $("#inputStateProvinceRegion-container").html(stateUS)
        break
      case "Canada":
        $("#inputStateProvinceRegion-container").html(stateCanada)
        break
      default:
        $("#inputStateProvinceRegion-container").html(stateNone)
        break
    }
    if (state) {
      $("#inputStateProvinceRegion").val(state)
    }
  }

  // input for non-north american countries
  var stateNone = `
<select name=\"state\" class=\"form-control\" id=\"inputStateProvinceRegion\">
  <option value=\"\" selected=\"selected\">None<\/option>
<\/select>`

  var stateCanada = `
<select name=\"state\" class=\"form-control\" id=\"inputStateProvinceRegion\">
  <option selected=\"selected\" value=\"Alberta\">Alberta<\/option>
  <option value=\"British Columbia\">British Columbia<\/option>
  <option value=\"Manitoba\">Manitoba<\/option>
  <option value=\"New Brunswick\">New Brunswick<\/option>
  <option value=\"Newfoundland and Labrador\">Newfoundland and Labrador<\/option>
  <option value=\"Nova Scotia\">Nova Scotia<\/option>
  <option value=\"Ontario\">Ontario<\/option>
  <option value=\"Prince Edward Island\">Prince Edward Island<\/option>
  <option value=\"Quebec\">Quebec<\/option>
  <option value=\"Saskatchewan\">Saskatchewan<\/option>
  <option value=\"Northwest Territories\">Northwest Territories<\/option>
  <option value=\"Nunavut\">Nunavut<\/option>
  <option value=\"Yukon\">Yukon<\/option>
<\/select>`

  var stateUS = `
<select name=\"state\" class=\"form-control\" id=\"inputStateProvinceRegion\">
  <option selected=\"selected\" value=\"Alabama\">Alabama<\/option>
  <option value=\"Alaska\">Alaska<\/option>
  <option value=\"Arizona\">Arizona<\/option>
  <option value=\"Arkansas\">Arkansas<\/option>
  <option value=\"California\">California<\/option>
  <option value=\"Colorado\">Colorado<\/option>
  <option value=\"Connecticut\">Connecticut<\/option>
  <option value=\"Delaware\">Delaware<\/option>
  <option value=\"District Of Columbia\">District Of Columbia<\/option>
  <option value=\"Florida\">Florida<\/option>
  <option value=\"Georgia\">Georgia<\/option>
  <option value=\"Hawaii\">Hawaii<\/option>
  <option value=\"Idaho\">Idaho<\/option>
  <option value=\"Illinois\">Illinois<\/option>
  <option value=\"Indiana\">Indiana<\/option>
  <option value=\"Iowa\">Iowa<\/option>
  <option value=\"Kansas\">Kansas<\/option>
  <option value=\"Kentucky\">Kentucky<\/option>
  <option value=\"Louisiana\">Louisiana<\/option>
  <option value=\"Maine\">Maine<\/option>
  <option value=\"Maryland\">Maryland<\/option>
  <option value=\"Massachusetts\">Massachusetts<\/option>
  <option value=\"Michigan\">Michigan<\/option>
  <option value=\"Minnesota\">Minnesota<\/option>
  <option value=\"Mississippi\">Mississippi<\/option>
  <option value=\"Missouri\">Missouri<\/option>
  <option value=\"Montana\">Montana<\/option>
  <option value=\"Nebraska\">Nebraska<\/option>
  <option value=\"Nevada\">Nevada<\/option>
  <option value=\"New Hampshire\">New Hampshire<\/option>
  <option value=\"New Jersey\">New Jersey<\/option>
  <option value=\"New Mexico\">New Mexico<\/option>
  <option value=\"New York\">New York<\/option>
  <option value=\"North Carolina\">North Carolina<\/option>
  <option value=\"North Dakota\">North Dakota<\/option>
  <option value=\"Ohio\">Ohio<\/option>
  <option value=\"Oklahoma\">Oklahoma<\/option>
  <option value=\"Oregon\">Oregon<\/option>
  <option value=\"Pennsylvania\">Pennsylvania<\/option>
  <option value=\"Rhode Island\">Rhode Island<\/option>
  <option value=\"South Carolina\">South Carolina<\/option>
  <option value=\"South Dakota\">South Dakota<\/option>
  <option value=\"Tennessee\">Tennessee<\/option>
  <option value=\"Texas\">Texas<\/option>
  <option value=\"Utah\">Utah<\/option>
  <option value=\"Vermont\">Vermont<\/option>
  <option value=\"Virginia\">Virginia<\/option>
  <option value=\"Washington\">Washington<\/option>
  <option value=\"West Virginia\">West Virginia<\/option>
  <option value=\"Wisconsin\">Wisconsin<\/option>
  <option value=\"Wyoming\">Wyoming<\/option>
  <option value=\"American Samoa\">American Samoa<\/option>
  <option value=\"Guam\">Guam<\/option>
  <option value=\"Northern Mariana Islands\">Northern Mariana Islands<\/option>
  <option value=\"Puerto Rico\">Puerto Rico<\/option>
  <option value=\"United States Minor Outlying Islands\">United States Minor Outlying Islands<\/option>
  <option value=\"Virgin Islands \">Virgin Islands <\/option>    
<\/select>`

  // events -------------------------------------------------------------------
  function background_onMessage(request, sender, sendResponse) {
    // make sure the message was for this view (you can use the "*" wildcard to target all views)
    if (
      !request.message ||
      !request.data.view ||
      (request.data.view != _view && request.data.view != "*")
    )
      return
    console.log(`iframe.js received message: ${request.message}`)

    switch (request.message) {
      case "update-input-field":
        updateInputField(request.data.currentStep)
        break
      case "update-input-text":
        updateInputText(request.data.currentText)
        break
      case "update-current-page":
        updateCurrentPage(request.data.currentPage)
        break
      case "update-image":
        handleImageClick(request.data)
        break
      case "update-email":
        handleEmailClick(request.data)
        break
      case "show-loader":
        handleLoader("show", request.data.status)
        break
      case "update-status":
        updateStatus(request.data.status)
        break
      case "update-opps":
        console.table(request.data.opps)
        updateOpps(request.data.opps)
        break
      case "hide-loader":
        handleLoader()
      case "reload-page":
        // window.location.reload();
        break
    }
  }

  function updateInputField(data) {
    // console.log('updateInput(' + data + ')')
    getCurrentPage()
    if (data == 1 || data == "firstname") {
      updateStatus("STEP 1: first name")
      _this.currentInput = $('#expertIntake input[name="firstname"]')
      _this.tell("gotoStep", { nextStep: 2 })
      _this.currentStep = 2
    } else if (data == 2 || data == "lastname") {
      // clear any leftover status
      updateStatus("STEP 2: last name")
      _this.currentInput = $('#expertIntake input[name="lastname"]')
      _this.tell("gotoStep", { nextStep: 3 })
      _this.currentStep = 3
    } else if (data == 3 || data == "email") {
      updateStatus("STEP 3: email address")
      _this.currentInput = $('#expertIntake input[name="email"]')
      _this.tell("gotoStep", { nextStep: 4 })
      _this.currentStep = 4
    } else if (data == 4 || data == "image") {
      updateStatus("STEP 4: image ")
      // _this.currentInput = $('#expertIntake input[name="image"]')
      _this.tell("gotoStep", { nextStep: 5 })
      _this.currentStep = 5
    } else if (data == 5 || data == "done") {
      updateStatus("Ready to Submit")
      $("#expertIntake input").removeClass("activeStep")
      _this.currentStep = "done"
      return
    }
    // if(validateForm ()){
    //   updateStatus('Ready to Submit')
    // }

    clearSelection()

    _this.currentInput
      .focus(function () {
        $(this)
          .addClass("activeStep")
          .siblings(".activeStep")
          .removeClass("activeStep")
      })
      .focus()
  }
  function updateInputText(text) {
    _this.currentInput.val(text)
  }
  function updateCurrentPage(url) {
    // console.log('current page recieved by iframe:', url)
    $('input[name="website"]').val(url)
  }

  function loadSettings() {
    chrome.runtime.sendMessage(
      {
        init_plugin: true,
      },
      function (response) {
        console.log(
          "currentOpp: " +
            response.currentOpp +
            "\n" +
            "currentState: " +
            response.currentState +
            "\n" +
            "currentTitle: " +
            response.currentTitle +
            "\n" +
            "user_id: " +
            response.user_id +
            "\n" +
            "showAllOpps: " +
            response.showAllOpps
        )
        // set current state
        if (response.currentState !== undefined) {
          $('select[name="state"]').val(response.currentState)
        }
        // set current opp
        if (response.currentOpp !== undefined) {
          if (
            $('select[name="id_opp"] option[value=' + response.currentOpp + "]")
              .length > 0
          ) {
            $('select[name="id_opp"]').val(response.currentOpp)
          } else {
            $('select[name="id_opp"]').val("")
          }
        }
        // set opp filter
        if (response.showAllOpps !== undefined) {
          switch (response.showAllOpps) {
            case "true":
              $("#opp-filter").attr("checked", "checked")
              $("#opp-filter").prop("checked", true)
              break
            case "false":
              $("#opp-filter").prop("checked", false)
              break
          }
        }
        // set current title
        if (response.currentTitle !== undefined) {
          $('select[name="title_drop"]').val(response.currentTitle)
        }
        if (response.user_id !== undefined) {
          // pass current user into form
          $('input[name="user_id"]').val(response.user_id)
        }
      }
    )
    _this.tell("to-content", { action: "get-current-page-url" })
    // get opps()
    getOppList()
  }

  /*
      update background localStorage with value
  */
  function handleSettingsChange() {
    // save dropdown changes to localStorage
    $('select[name="state"]').change(function () {
      updateSettings("currentState", $(this).val())
    })
    $('select[name="id_opp"]').change(function () {
      updateSettings("currentOpp", $(this).val())
    })
    $('select[name="title_drop"]').change(function () {
      updateSettings("currentTitle", $(this).val())
    })
    $("#opp-filter").change(function () {
      updateSettings("showAllOpps", $(this).prop("checked"))
      getOppList()
    })
  }

  function validateForm() {
    var formFields = [
      $('select[name="id_opp"]'),
      $('input[name="website"]'),
      $('input[name="firstname"]'),
      $('input[name="lastname"]'),
      $('input[name="email"]'),
    ]

    var isValid = false

    $.each(formFields, function (index, el) {
      if (el.val().length < 1) {
        console.log(el.selector + " is missing information")
        isValid = false
      } else {
        isValid = true
        console.log(el.selector + "is valid")
      }
    })
    return isValid
  }
  // public functions ---------------------------------------------------------
  function updateSettings(key, value) {
    chrome.runtime.sendMessage(
      {
        update_settings: true,
        update: key,
        value: value,
      },
      function (response) {
        console.log(response)
      }
    )
  }
  /*
       getOppList: return array with current user's opps in contacting stage
   */
  var getOppList = function (option) {
    console.log("getting oppList")
    if (option == "refresh") {
      // _this.tell('getOpps', {refresh: true})
      chrome.runtime.sendMessage(
        {
          type: "getOpps",
          refresh: true,
        },
        function (response) {
          console.log("iframe.js got a response from background.js:", response)
        }
      )
    } else {
      // _this.tell('getOpps', {refresh: false})
      chrome.runtime.sendMessage(
        {
          type: "getOpps",
          refresh: false,
        },
        function (response) {
          console.log("iframe.js got a response from background.js:", response)
        }
      )
    }
  }

  function getUniqueValuesOfKey(array, key) {
    return array.reduce(function (carry, item) {
      if (item[key] && !~carry.indexOf(item[key])) carry.push(item[key])
      return carry
    }, [])
  }
  var updateOpps = function (opps) {
    // console.log( JSON.stringify(opps))
    var select = $("select#id_opp")
    select.html("")

    // get array of LCMT users
    // var oppgroupUsers = getUniqueValuesOfKey(opps, 'LCMT_Firstname__c');
    var oppUsers = []
    opps.map((opp) => {
      oppUsers.push(`${opp.LCMT_Firstname__c} ${opp.LCMT_Lastname__c}`)
    })

    var uniqueNames = []
    $.each(oppUsers, function (i, el) {
      if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el)
    })

    var oppgroupUsers = uniqueNames.sort((a, b) => {
      return a > b ? 1 : -1
    })

    // for each user find opps matching
    $.each(oppgroupUsers, function () {
      var _this = this
      var userOptgroup = $(`
        <optgroup label="${_this}" id="optgroup-${this}">
        </optgroup>`)

      userOptgroup.appendTo(select)

      var userOpps = opps.filter(function (e) {
        // console.log(e.LCMT_Firstname__c + ' ' + e.LCMT_Lastname__c)
        return e.LCMT_Firstname__c + " " + e.LCMT_Lastname__c == _this.valueOf()
          ? true
          : false
      })

      // for each opp do something
      $.each(userOpps, function (e, opp) {
        var lastInitial = opp.LCMT_Lastname__c[0]
        $(select).append(
          "<option value=" +
            opp.Id +
            ">&nbsp;&nbsp" +
            opp.LCMT_Firstname__c +
            " " +
            lastInitial +
            ": " +
            opp.Name +
            " - " +
            opp.Speciality_Requested__c +
            "</option>"
        )
      })
    })

    // select currentOpp if set
    chrome.runtime.sendMessage(
      {
        type: "getCurrentOpp",
      },
      function (response) {
        console.log("getCurrentOpp returned:")
        console.log(response)
        if (
          response &&
          response.currentOpp !== undefined &&
          response.currentOpp !== ""
        ) {
          console.log("currentOpp Exists in bg:", response.currentOpp)
          _this.currentOpp = response.currentOpp
          if (
            $('select[name="id_opp"] option[value=' + response.currentOpp + "]")
              .length > 0
          ) {
            console.log("currentOpp found in dropdown:")
            $('select[name="id_opp"]').val(response.currentOpp)
          } else {
            console.log(
              "currentOpp Not found in this list, setting new current opp from" +
                response.currentOpp +
                " to :",
              $('select[name="id_opp"]').val()
            )
            // set a current opp
            updateSettings("currentOpp", $('select[name="id_opp"]').val())
            _this.currentOpp = $('select[name="id_opp"]').val()
          }
        } else {
          console.log(
            "currentOpp Not found in bg, setting new current opp to :",
            $('select[name="id_opp"]').val()
          )
          // set a current opp
          updateSettings("currentOpp", $('select[name="id_opp"]').val())
          _this.currentOpp = $('select[name="id_opp"]').val()
        }
      }
    )
  }

  _this.tell = function (message, data) {
    // console.log(`iframe.js sending message: ${message}`)
    var data = data || {}

    data.source = _view

    window.parent.postMessage(
      {
        message: message,
        data: data,
      },
      "*"
    )
  }

  function objectifyForm(formArray) {
    //serialize data function

    var returnArray = {}
    for (var i = 0; i < formArray.length; i++) {
      returnArray[formArray[i]["name"]] = formArray[i]["value"]
    }
    return returnArray
  }

  return _this
})()

window.addEventListener(
  "DOMContentLoaded",
  function () {
    Iframe.init()
  },
  false
)