CS wrong numbers

cs-wrong-numbers.markdown

CS wrong numbers

A Pen by Francis Park on CodePen.

License.

index.html

<style><!--
.btn-dark { color: #fff; background-color: #343a40; border-color: #343a40; }
--></style>
<div id="callback-note-block" style="display: block; margin: 1em; padding: 1em 2em 0.3em; background-color: #e0e0e0; overflow: hidden; width: 32em;">
  <div class="form-row">
    <div class="form-group col-sm-12" style="padding-left: 0; padding-right: 0;">
      <input id="customfield13194" class="form-control" name="customfield13194" style="background-color: antiquewhite;" value="[Additional_Information]" type="text" placeholder="Add your callback note here" />
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
</div>
<!-- Callback note block -->

<div id="wrong-number-block" style="display: block; margin: 1em; padding: 1.2em 2em 1.5em; background-color: #e0e0e0; overflow: hidden; width: 32em;">
  <div class="form-row">
    <div class="form-group col-sm-6" style="padding-left: 0;">
      <label for="customfield13189">Phone 1</label>
      <input id="customfield13189" class="form-control" name="customfield13189" value="097877777" type="text" />
      <button id="Wrong1" class="btn-danger" style="margin-top:0.5em;">Mark as wrong number</button>
    </div>
    <!-- .form-group -->
    <div class="form-group col-sm-6" style="padding-left: 0; padding-right: 0;">
      <label for="customfield13190">Phone 2</label>
      <input id="customfield13190" class="form-control" name="customfield13190" value="011212012" type="text" readonly="readonly" placeholder="" />
      <button id="Wrong2" class="btn-danger" style="margin-top:0.5em;">Mark as wrong number</button>
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="col" style="padding-left: 0;">
      <input id="customfield13195" class="form-control" name="customfield13195" value="" type="text" placeholder="Wrong numbers flagged for SIM" />
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
</div>
<!-- // #wrong-number-block -->

<div id="supporter-info-block" style="display: block; margin: 1em; padding: 1.2em 2em 1em; padding-top: 1.5em; background-color: #e0e0e0; width: 32em; overflow: hidden;">
  <div class="form-row">
    <div class="form-group col-sm-12" style="padding-left: 0; padding-right: 0;">
      <h4>Supporter Information (<span id="customcontent13179">[Supporter_ID]</span>)</h4>
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group col-sm-6" style="padding-left: 0;">
      <label for="customfield13237">First Name</label> <input id="customfield13237" class="form-control" name="customfield13237" value="[New_First_Name]" type="text" placeholder="[First_Name]" />
    </div>
    <!-- .form-group -->
    <div class="form-group col-sm-6" style="padding-left: 0; padding-right: 0;">
      <label for="customfield13238">Last Name</label> <input id="customfield13238" class="form-control" name="customfield13238" value="[New_Surname]" type="text" placeholder="[Surname]" />
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group" style="padding-left: 0; padding-right: 0;">
      <label for="customfield13212">Email</label> <input id="customfield13212" class="form-control" name="customfield13212" value="[New_Email]" type="email" placeholder="[Email]" />
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group col-sm-6" style="padding-left: 0;">
      <label for="new-home-phone-input">Phone (Home)</label>
      <div class="inner-addon right-addon" style="position: relative;">
        <span class="glyphicon glyphicon-ok" style="right: 0px; color: green; display: none; position: absolute; padding: 10px; pointer-events: none;"> </span><span class="glyphicon glyphicon-remove" style="right: 0px; color: red; display: none; position: absolute; padding: 10px; pointer-events: none;"> </span>
        <input id="new-home-phone-input" class="form-control" name="new-home-phone-input" value="" type="text" placeholder="[Phone_number_01]" />
        <small class="form-text text-muted">NZ Landline Number. eg: 09 630 6317</small>
      </div><!-- .inner-addon -->
    </div>
    <!-- .form-group -->
    <div class="form-group col-sm-6" style="padding-left: 0; padding-right: 0;">
      <label for="new-mobile-phone-input">Phone (Mobile)</label>
      <div class="inner-addon right-addon" style="position: relative;">
        <span class="glyphicon glyphicon-ok" style="right: 0px; color: green; display: none; position: absolute; padding: 10px; pointer-events: none;"> </span><span class="glyphicon glyphicon-remove" style="right: 0px; color: red; display: none; position: absolute; padding: 10px; pointer-events: none;"> </span>
        <input id="new-mobile-phone-input" class="form-control" name="new-mobile-phone-input" value="" type="text" placeholder="[Phone_number_02]" />
        <small class="form-text text-muted">NZ Mobile Number. eg: 021 134 4152</small>
      </div><!-- .inner-addon -->
    </div>
    <input id="customfield13235" class="form-control" name="customfield13235" type="hidden" value="" /><input id="customfield13236" class="form-control" name="customfield13236" type="hidden" value="" />
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
</div>
<!-- // #supporter-info-block -->

<div id="supporter-info-block-sign-up" style="display: block; margin: 1em; padding: 1.2em 2em 1em; padding-top: 1.5em; background-color: #e0e0e0; width: 32em; overflow: hidden;">
  <div class="form-row">
    <div class="form-group col-sm-12" style="padding-left: 0; padding-right: 0;">
      <h4>Supporter Information (<span id="customcontent13179">[Supporter_ID]</span>)</h4>
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group col-sm-6" style="padding-left: 0;">
      <label for="customfield13237">First Name</label> <input id="customfield13237" class="form-control" name="customfield13237" value="[New_First_Name]" type="text" placeholder="[First_Name]" />
    </div>
    <!-- .form-group -->
    <div class="form-group col-sm-6" style="padding-left: 0; padding-right: 0;">
      <label for="customfield13238">Last Name</label> <input id="customfield13238" class="form-control" name="customfield13238" value="[New_Surname]" type="text" placeholder="[Surname]" />
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group" style="padding-left: 0; padding-right: 0;">
      <label for="customfield13212">Email</label> <input id="customfield13212" class="form-control" name="customfield13212" value="[New_Email]" type="email" placeholder="[Email]" />
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group col-sm-6" style="padding-left: 0;">
      <label for="new-home-phone-input">Phone (Home)</label>
      <div class="inner-addon right-addon" style="position: relative;">
        <span class="glyphicon glyphicon-ok" style="right: 0px; color: green; display: none; position: absolute; padding: 10px; pointer-events: none;"> </span><span class="glyphicon glyphicon-remove" style="right: 0px; color: red; display: none; position: absolute; padding: 10px; pointer-events: none;"> </span>
        <input id="new-home-phone-input" class="form-control" name="new-home-phone-input" value="" type="text" placeholder="[Phone_number_01]" />
        <small class="form-text text-muted">NZ Landline Number. eg: 09 630 6317</small>
      </div><!-- .inner-addon -->
    </div>
    <!-- .form-group -->
    <div class="form-group col-sm-6" style="padding-left: 0; padding-right: 0;">
      <label for="new-mobile-phone-input">Phone (Mobile)</label>
      <div class="inner-addon right-addon" style="position: relative;">
        <span class="glyphicon glyphicon-ok" style="right: 0px; color: green; display: none; position: absolute; padding: 10px; pointer-events: none;"> </span><span class="glyphicon glyphicon-remove" style="right: 0px; color: red; display: none; position: absolute; padding: 10px; pointer-events: none;"> </span>
        <input id="new-mobile-phone-input" class="form-control" name="new-mobile-phone-input" value="" type="text" placeholder="[Phone_number_02]" />
        <small class="form-text text-muted">NZ Mobile Number. eg: 021 134 4152</small>
      </div><!-- .inner-addon -->
    </div>
    <input id="customfield13235" class="form-control" name="customfield13235" type="hidden" value="" /><input id="customfield13236" class="form-control" name="customfield13236" type="hidden" value="" />
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group">
      <label for="customfield13227">Postal Address for Welcome Pack</label>
      <input id="customfield13227" class="form-control af-hidden-autofill-icon" name="customfield13227" value="[Full_Address]" type="text" placeholder="[Addrline1] [Addrline2] [NZ_Suburb] [NZ_City] [Post_Code]" /> <small class="form-text text-muted">Only addresses that NZ Post deliver to will be shown here. You can also search PO Box/Private Bag/CMB/Counter Delivery addresses.</small>
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group col-sm-6" style="padding-left: 0; padding-right: 0;">
      <label for="customfield13218">Date Of Birth</label>
      <input id="customfield13218" class="form-control datepicker" name="customfield13218" value="[New_Birth_Date]" type="text" />
    </div>
    <!-- .form-group -->
    <div class="form-group col-sm-6" style="padding-left: 0; padding-right: 0;">
      <p>&nbsp;</p>
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group">
      <input id="customfield13213" class="form-control" name="customfield13213" value="[New_Addressline1]" type="hidden" />
      <input id="customfield13214" class="form-control" name="customfield13214" value="[New_Addressline2]" type="hidden" />
      <input id="customfield13215" class="form-control" name="customfield13215" value="[New_NZ_Suburb]" type="hidden" />
      <input id="customfield13216" class="form-control" name="customfield13216" value="[New_NZ_City]" type="hidden" />
      <input id="customfield13217" class="form-control" name="customfield13217" value="[New_Post_Code]" type="hidden" />
      <input id="customfield13233" class="form-control" name="customfield13233" value="[New_Country]" type="hidden" />
      <input id="customfield13228" class="form-control" name="customfield13228" value="[Longitude]" type="hidden" />
      <input id="customfield13229" class="form-control" name="customfield13229" value="[Latitude]" type="hidden" />
      <input id="customfield13230" class="form-control" name="customfield13230" value="[Meshblock]" type="hidden" />
      <input id="customfield13231" class="form-control" name="customfield13231" value="[Rural]" type="hidden" />
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
</div>
<!-- // #supporter-info-block-sign-up -->

<div id="call-info-block" style="display: block; margin: 1em; padding: 1.2em 2em 1em; padding-top: 1.5em; background-color: #e0e0e0; width: 32em; overflow: hidden;">
  <div class="form-row">
    <div class="col-sm-12" style="padding-left: 0; padding-right: 0;">
      <h4>Call Information <small>[{user_first_name} {user_last_name} (ID:{user_id})]</small></h4>
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group col-sm-6" style="padding-left: 0;">
      <label>Record ID:</label> <span id="customcontentId">[Id]</span>
    </div>
    <!-- .form-group -->
    <div class="form-group col-sm-6" style="padding-left: 0; padding-right: 0;">
      <label>Call ID:</label> {call_id}
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
  <div class="form-row">
    <div class="form-group" style="padding-left: 0; padding-right: 0;">
      <label>Dateset: </label> <span id="customcontent13234">[Dataset_Name]</span>
    </div>
    <!-- .form-group -->
  </div>
  <!-- .form-row -->
</div>
<!-- // #call-info-block -->

<p> </p>

script.js

wrongArray = [];
$("#Wrong1, #Wrong2").click(function(event) {
  event.preventDefault();

  let firstnumber = $("#customfield13189");
  let secondnumber = $("#customfield13190");
  let additionalinfo2 = $("#customfield13195");

  wrongOutput = ""; // string
  addWrong = $(this).prev().val(); // get value
  if ($(this).attr("id") == "Wrong1") {
    if ($(this).hasClass("added")) {
      console.log("hasClass added");
      // undo
      firstnumber.val(wrongArray[0]); //copy from wrong to 1
      wrongArray.splice(0, 1);
      //console.log("wrongArray after splice ", wrongArray);
      $(this).text("Mark as wrong number");
      $(this).removeClass("added btn-dark").addClass("btn-danger");
    } else {
      firstnumber.val(secondnumber.val()); //copy from 2 to 1
      if (wrongArray.indexOf(addWrong) == -1) {
        // if not in array
        wrongArray.push(addWrong); // then add to array
        $(this)
          .addClass("added btn-dark")
          .removeClass("btn-danger")
          .text("Thanks!"); // add class to button
      } else {
        // undo
        wrongArray.splice(wrongArray.indexOf(addWrong), 1); // remove this
        $(this)
          .removeClass("added btn-dark")
          .addClass("btn-danger");
        $(this).text("Mark as wrong number");
      }
    }
  }
  if ($(this).attr("id") == "Wrong2") {
    if ($(this).hasClass("added")) {
      // undo
      // console.log("wrongArray.length",wrongArray.length);
      $(this).prev().val(wrongArray[wrongArray.length-1]);
      wrongArray.pop();
      $(this)
        .removeClass("added btn-dark")
        .addClass("btn-danger");
      $(this).text("Mark as wrong number");
    } else {
      if (wrongArray.indexOf(addWrong) == -1) {
        // if not in array
        wrongArray.push(addWrong); // then add to array
        $(this).prev().val('');
        console.log("addWrong",addWrong);
        $(this)
          .addClass("added btn-dark")
          .removeClass("btn-danger")
          .text("Thanks!"); // add class to button
      } else {
        // undo
        wrongArray.splice(wrongArray.indexOf(addWrong), 1); // remove this
        $(this)
          .removeClass("added btn-dark")
          .addClass("btn-danger");
        $(this).text("Mark as wrong number");
      }
    }
  }

  if (wrongArray[0]) {
    wrongOutput = wrongArray[0]; // add to output string
  }
  if (wrongArray[1]) {
    wrongOutput += " " + wrongArray[1]; // add to output string
  }
  //console.log("wrongOutput", wrongOutput);
  additionalinfo2.val(wrongOutput); // output string to field
  //console.log("wrongArray", wrongArray);
});

// Remove the button from UI if phone number is empty
if ($("#customfield13190").val() == "") {
  $("#Wrong2").unbind("click");
  $("#Wrong2").remove();
}

$("#new-mobile-phone-input").on('input', function() {
  let entered_number = $(this).val();
  let parsed_number_extended = libphonenumber.parseNumber(entered_number, 'NZ', { extended: true });
  let international_formatted_number_in_E164 = '';
  let universe_compatible_number = '';
  
  if (parsed_number_extended.phone) {
    international_formatted_number_in_E164 = libphonenumber.formatNumber(parsed_number_extended, 'E.164');
    universe_compatible_number = international_formatted_number_in_E164.substr(1);
  }
  
  if (libphonenumber.isValidNumber(entered_number, 'NZ')) {
    $(this).parent().find('.glyphicon-remove').hide();
    $(this).parent().find('.glyphicon-ok').show();
    $("#customfield13235").val(universe_compatible_number);
    console.log($("#customfield13235").val());
  } else {
    console.log("invalid");
    $(this).parent().find('.glyphicon-ok').hide();
    $(this).parent().find('.glyphicon-remove').show();
    $("#customfield13235").val('');
  }
});

$("#new-home-phone-input").on('input', function() {
  let entered_number = $(this).val();
  let parsed_number_extended = libphonenumber.parseNumber(entered_number, 'NZ', { extended: true });
  let international_formatted_number_in_E164 = '';
  let universe_compatible_number = '';
  
  if (parsed_number_extended.phone) {
    international_formatted_number_in_E164 = libphonenumber.formatNumber(parsed_number_extended, 'E.164');
    universe_compatible_number = international_formatted_number_in_E164.substr(1);
  }
  
  if (libphonenumber.isValidNumber(entered_number, 'NZ')) {
    $(this).parent().find('.glyphicon-remove').hide();
    $(this).parent().find('.glyphicon-ok').show();
    $("#customfield13236").val(universe_compatible_number);
    console.log($("#customfield13235").val());
  } else {
    console.log("invalid");
    $(this).parent().find('.glyphicon-ok').hide();
    $(this).parent().find('.glyphicon-remove').show();
    $("#customfield13236").val('');
  }
});

scripts

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.4.4/cleave.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.4.4/addons/cleave-phone.nz.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.4.2/libphonenumber-js.min.js"></script>

style.css

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css');

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />