Mini Kabibi Habibi
/* NPS CheckList Controller */
(function (wa, $) {
var ui = wa.UI = wa.UI || {},
_settings = wa.Utils.Settings,
_external = wa.Utils.External,
_instrument = wa.Utils.Instrument,
_tmpl = wa.UI.CheckList.templates,
_core = wa.Core,
_window = _core.Window,
_checkList = _core.CheckList;
ui.CheckListController = function () {
var self = this;
this.update = function () {
_window.ready(function () {
var args = JSON.parse(_external.getArgument("template_args"));
if ($(window).height() >= 630) {
self[args.commandName]();
} else {
_window.close();
}
});
};
this.showNPSSurvey = function () {
var html = "";
html += " <table style=\"border-collapse:collapse;width:450px; height: auto;font-family:Open Sans; color:#53565A;border:1px solid #ececec \" border=0 margin=0 padding=0>";
html += " <tr style=\"background-color:#F4F7FA\">";
html += " <td colspan=\"2\" valign=\"top\" style=\"background-color:#F4F7FA\">";
html += " <table border=\"0\" margin=0 padding=0 style=\"width:100%\">";
html += " <tr>";
html += " <td>";
html += " <table style=\"width:98%;font-family:Open Sans; color:#53565A\" border=0 margin=0 padding=0>";
html += " <tr>";
html += " <td align=\"left\" style=\"background-color:#F4F7FA;font-size:14px; font-weight:bold; color:#53565a;padding-left:17px;padding-bottom:14px; padding-top:14px\">";
html += " How likely are you to recommend WebAdvisor to friends and family?<\/td>";
html += " <\/tr>";
html += " <tr>";
html += " <td align=\"center\" style=\"font-size:13px;background-color:#F4F7FA; color:#53565A;padding-left:7px\">";
html += " <span style=\"display:inline-block;width:30%;text-align:left\">Not at all likely<\/span>";
html += " <span style=\"display:inline-block;width:33%; text-align:center\">Not sure<\/span>";
html += " <span style=\"display:inline-block;width:30%; text-align:right\">Extremely likely<\/span><br>";
html += " <table style=\"width:100%;\" border=0>";
html += " <tr align=center>";
html += " <td><input id=\"nps0\" type=\"radio\" name=\"nps\" value=\"0\" \/><\/td>";
html += " <td><input id=\"nps1\" type=\"radio\" name=\"nps\" value=\"1\" \/><\/td>";
html += " <td><input id=\"nps2\" type=\"radio\" name=\"nps\" value=\"2\" \/><\/td>";
html += " <td><input id=\"nps3\" type=\"radio\" name=\"nps\" value=\"3\" \/><\/td>";
html += " <td><input id=\"nps4\" type=\"radio\" name=\"nps\" value=\"4\" \/><\/td>";
html += " <td><input id=\"nps5\" type=\"radio\" name=\"nps\" value=\"5\" \/><\/td>";
html += " <td><input id=\"nps6\" type=\"radio\" name=\"nps\" value=\"6\" \/><\/td>";
html += " <td><input id=\"nps7\" type=\"radio\" name=\"nps\" value=\"7\" \/><\/td>";
html += " <td><input id=\"nps8\" type=\"radio\" name=\"nps\" value=\"8\" \/><\/td>";
html += " <td><input id=\"nps9\" type=\"radio\" name=\"nps\" value=\"9\" \/><\/td>";
html += " <td><input id=\"nps10\" type=\"radio\" name=\"nps\" value=\"10\" \/><\/td>";
html += " <\/tr>";
html += " <tr align=center>";
html += " <td style=\"color:#818386\">0<\/td><td style=\"color:#818386\">1<\/td><td style=\"color:#818386\">2<\/td><td style=\"color:#818386\">3<\/td><td style=\"color:#818386\">4<\/td><td style=\"color:#818386\">5<\/td><td style=\"color:#818386\">6<\/td><td style=\"color:#818386\">7<\/td><td style=\"color:#818386\">8<\/td><td style=\"color:#818386\">9<\/td><td style=\"color:#818386\">10<\/td>";
html += " <\/tr>";
html += " <\/table>";
html += " <span style=\"display:inline-block;width:96%;border-bottom:1px solid #cccccc;\">";
html += " <\/td>";
html += " <\/tr>";
html += " <\/table>";
html += " <\/td>";
html += " <\/tr>";
html += " <tr >";
html += " <td align=center>";
html += " <table id=\"telluswhy\" border=0 padding=0 margin=0 style=\"width:95%;display:none\">";
html += " <tr>";
html += " <td style=\"font-size:14px;color:#53565a; padding-left:5px; padding-top:5px;padding-bottom:12px\"><b>Can you tell us why? </b><span style=\"font-size:14px;color:#b1babf\" >(Optional)</span><\/td>";
html += " <\/tr>";
html += " <tr>";
html += " <td style=\"padding-left:5px\"><textarea onkeypress=\"if(this.value.length>=200){return false;}\"";
html += " id=\"why\" onclick=\"{this.style.color='black'}if(this.value=='200 characters max'){this.value=''}\" onblur=\"if(this.value==''){this.style.color='#cccccc',this.value='200 characters max'}\"";
html += " style=\"width:400px;height:70px;padding-left:5px;border:1px solid #cccccc; color:#cccccc; overflow:hidden\">200 characters max<\/textarea><\/td>";
html += " <\/tr>";
html += " <\/table>";
html += " <span id=\"bar\"style=\"display:none;width:93%;border-bottom:1px solid #cccccc;\">";
html += " <\/td>";
html += " <\/tr>";
html += " <tr>";
html += " <td id=\"clipboard\"style=\"display: none;padding-top:10px; padding-bottom:12px; border:none;width:50px\" align=\"center\">";
html += " <img src=\"wacore:mfw\\packages\\nps\\clipboard.png\">";
html += " <\/td>";
html += " <tr>";
html += " <td id=\"likingus\" style=\"display: none;font-size:14px; font-weight:bold; color:#53565a; padding-bottom:12px\" align=\"center\">Thanks for liking us!<\/td>";
html += " <\/tr>";
html += " <tr>";
html += " <td id=\"reviewonstore\" style=\"display: none;font-size:14px; color:#53565a; padding-bottom:12px\" align=\"center\">";
html += " <div style=\"padding-left:18px;padding-right:22px\" >Please share your enthusiasm with a 5-star rating and (Optional) review on the Chrome Web Store<\/div>";
html += " <\/td>";
html += " <\/tr>";
html += " <\/tr>";
html += " <tr>";
html += " <td align=center>";
html += " <table style=\"font-size:13px;color:#53565a; width:95%\" border=0 padding=0 margin=0 style=\"width:95%\">";
html += " <tr>";
html += " <td id=\"contactyou\" colspan=\"2\" style=\"display: none; width:100%;font-size:14px;color:#53565a;padding-left:5px ;padding-top:10px\"><b>Can we contact you? </b><span style=\"font-size:14px;color:#b1babf\" >(Optional)</span><\/td>";
html += " <\/tr>";
html += " <tr>";
html += " <td id=\"whatyouthink\" colspan=\"2\"style=\"display: none;padding-bottom:5px;padding-left:5px; padding-bottom:12px;padding-top:12px \">";
html += " We'd love to learn more about what you think. We promise that you'll only be contacted about your response.";
html += " <\/td>";
html += " <\/tr>";
html += " <tr>";
html += " <td id=\"inputfields\" colspan=\"2\" style=\"display: none;padding-left:5px\"><input id=\"email\" onclick=\"{this.style.color='black'} if(this.value=='Email address'){this.value=''}\" type=\"text\" value=\"Email address\"";
html += " style=\"width:196px;border-right:10px; padding-left:5px; height:28px;border:1px solid #cccccc; color:#cccccc\" onblur=\"if(this.value==''){this.style.color='#cccccc',this.value='Email address'}\"\/>";
html += " <input id=\"phone\" onclick=\"{this.style.color='black'} if(this.value=='Phone number'){this.value=''}\" type=\"text\" value=\"Phone number\"";
html += " style=\"width:196px; padding-left:5px; height:28px;border:1px solid #cccccc; color: #cccccc\" onblur=\"if(this.value==''){this.style.color='#cccccc',this.value='Phone number'}\" \/><\/td>";
html += " <\/tr>";
html += " <tr>";
html += " <td id=\"privacy\" colspan=\"2\" style=\"display: none; padding-top:16px;padding-left:5px\">";
html += " By clicking <b>Submit</b>, you acknowledge that you have read and understand McAfee's <a href=\"https://www.mcafee.com/consumer/en-us/policy/global/legal.html\" style=\"color:#00AEEF; text-decoration:none\">Privacy Notice.<\/a>";
html += " <\/td>";
html += " <\/tr>";
html += " <tr>";
html += " <td style=\"padding-top:15px; padding-bottom:12px;padding-left:5px; border:none;width:50px\">";
html += " <img src=\"wacore:mfw\\packages\\builtin\\mcafee-logo.png\">";
html += " <\/td>";
html += " <td id=\"buttoninputs\" style=\"display: none;padding-top:10px; padding-bottom:12px; padding-right:5px; color:#4AC101\" align='right'>";
html += " <div id='buttons' style='height:32px; line-height:32px'>";
html += " <input id='btn-cancel' type=\"button\" value=\"Close\" style=\"cursor:default;width:118px; height:32px; background-color:#f5f6fa; border: 1px solid #53565a;color:#53565a\" \/>";
html += " <input id='btn-submit' type=\"button\" value=\"Submit\" style=\"cursor:default;width:118px; height:32px; background-color:#e6e7e8; border: none; color:#fff\" disabled=\"disabled\" \/>";
html += " <input id='btn-review' type=\"button\" value=\"Rate and review\" style=\"cursor:default;width:118px; height:32px; background-color:#e6e7e8; border: none; color:#fff\" disabled=\"disabled\" \/>";
html += " </div>";
html += " <\/td>";
html += " <\/tr>";
html += " <\/table>";
html += " <\/td>";
html += " <\/tr>";
html += " <\/table>";
html += " <\/td>";
html += " <\/tr>";
html += " <\/table>";
html += " <table id=\"thanks\" style=\"display: none;border-collapse:collapse;width:450px; height:31px; auto;font-family:Open Sans; color:#53565A;\" border=0 margin=0 padding=0>";
html += " <td id=\"thanks-text\" style=\"font-weight:bold;background-color:#0BD175; color:#FFFFFF;font-size:12px\" align=\"center\">";
html += " ✔ Thanks for your help"
html += " <\/td>";
html += " <\/tr>";
html += " <\/table>";
var key = "NPS",
infoStateCss = "info",
userClickedButton = false,
dialog = new ui.CheckListDialog({
content: function () {
return {
html: html
}
}(),
dialogWidth: "450px"
}),
getUserDataAndSubmit = function (action) {
var atLeastOneValidField = false;
var email = $("#wa-dialog").find("#email").val();
if (!email || email === "Email address") {
email = ".";
} else {
email = encodeURI(email);
atLeastOneValidField = true;
}
var phone = $("#wa-dialog").find("#phone").val();
if (!phone || phone === "Phone number") {
phone = ".";
} else {
phone = encodeURI(phone);
atLeastOneValidField = true;
}
var why = $("#wa-dialog").find("#why").val();
if (!why || why === "200 characters max") {
why = ".";
} else {
why = encodeURI(why);
atLeastOneValidField = true;
}
var rating = $("#wa-dialog").find("input[name='nps']:checked").val();
if (!rating) {
rating = "empty";
}
var userData = "";
if (atLeastOneValidField) {
userData = email + "&" + phone + "&" + why;
if (userData.length >= 220) {
userData = userData.substring(0, 220) + "...";
}
userData = _external.encrypt(userData);
}
var expType = JSON.parse(_external.getArgument("template_args")).triggerType;
var times = JSON.parse(_external.getArgument("template_args")).shownTimes + 1;
// Telemetry 3.0
var analyticsEvent = {
_event_name: "wa_survey",
hit_label_19: "NPS",
hit_label_20: _instrument.getBrowserTypeCode(),
hit_label_21: userData,
hit_label_22: action,
hit_label_23: expType,
hit_metric_0: rating,
hit_metric_1: times
}
_instrument.sendAnalyticsEvent(analyticsEvent);
_settings.set("NPSSurveySubmitted", true);
},
checkList = new ui.WebAdvisorCheckList({
message: {
text: "Got a minute?",
css: infoStateCss
},
state: {
template: _tmpl.defaultState({
text: "We'd love your feedback",
image: "wacore:mfw\\packages\\nps\\info-16.png",
imageCss: "wa-state-img"
}, key, "NPS"),
css: infoStateCss
}
})
.closeClick(function (args, sender) {
if (userClickedButton) {
return;
}
var rating = $("#wa-dialog").find("input[name='nps']:checked").val();
if (rating) {
getUserDataAndSubmit("ClosedExplicit");
}else{
//Telemetry 3.0
var analyticsEvent = {
_event_name: "wa_survey_ui",
hit_label_19: "ClosedExplicit",
hit_label_20: _instrument.getBrowserTypeCode(),
hit_label_21: "NPS",
hit_label_22: "NULL",
hit_label_23: "default"
}
_instrument.sendAnalyticsEvent(analyticsEvent);
}
userClickedButton = true;
dialog.close(sender.close);
})
.closeComplete(function () {
var currentTimeInSeconds = Math.round(new Date().getTime() / 1000);
_settings.set("NPSSurveyLastShown", currentTimeInSeconds.toString());
var times = JSON.parse(_external.getArgument("template_args")).shownTimes + 1;
_settings.set("NPSShownTimes", times.toString());
_window.close();
})
.open(function () {
$("#wa-dialog").width(450)
dialog.open();
$("#wa-dialog-header").attr("id", "");
$("#wa-dialog-content").attr("id", "");
$("#wa-dialog").find("input[name='nps']").on({
click: function () {
$("#wa-dialog").find("#btn-submit").css("cursor", "pointer");
$("#wa-dialog").find("#btn-submit").css("background-color", "#00AEEF");
$("#wa-dialog").find("#btn-submit").removeAttr("disabled");
$("#wa-dialog").find("#btn-review").css("cursor", "pointer");
$("#wa-dialog").find("#btn-review").css("background-color", "#00AEEF");
$("#wa-dialog").find("#btn-review").removeAttr("disabled");
var rating = $("#wa-dialog").find("input[name='nps']:checked").val();
if (!rating) {
rating = "empty";
}
var browser = WebAdvisor.Core.Window.getBrowserType();
if(browser == "FF" || browser == "IE" || (rating >= 0 && rating <= 7) ){
$("#wa-dialog").find("#telluswhy").css('display', '');
$("#wa-dialog").find("#contactyou").css('display', '');
$("#wa-dialog").find("#whatyouthink").css('display', '');
$("#wa-dialog").find("#inputfields").css('display', '');
$("#wa-dialog").find("#privacy").css('display', '');
$("#wa-dialog").find("#buttoninputs").css('display', '');
$("#wa-dialog").find("#btn-review").css('display', 'none');
$("#wa-dialog").find("#btn-submit").css('display', '');
$("#wa-dialog").find("#bar").css('display', 'inline-block');
$("#wa-dialog").find("#likingus").css('display', 'none');
$("#wa-dialog").find("#clipboard").css('display', 'none');
$("#wa-dialog").find("#reviewonstore").css('display', 'none');
}
if(browser == "CH" && (rating >=8 )){
$("#wa-dialog").find("#telluswhy").css('display', 'none');
$("#wa-dialog").find("#contactyou").css('display', 'none');
$("#wa-dialog").find("#whatyouthink").css('display', 'none');
$("#wa-dialog").find("#inputfields").css('display', 'none');
$("#wa-dialog").find("#bar").css('display', 'none');
$("#wa-dialog").find("#privacy").css('display', 'none');
$("#wa-dialog").find("#buttoninputs").css('display', '');
$("#wa-dialog").find("#btn-review").css('display', '');
$("#wa-dialog").find("#btn-submit").css('display', 'none');
$("#wa-dialog").find("#linkingus").css('display', '');
$("#wa-dialog").find("#clipboard").css('display', '');
$("#wa-dialog").find("#reviewonstore").css('display', '');
}
}
});
$("#wa-dialog").find("#btn-submit").on({
click: function () {
if (userClickedButton) {
return;
}
$("#wa-dialog").find("#thanks").css('display', '');
getUserDataAndSubmit("Accepted");
userClickedButton = true;
setTimeout(function () {
dialog.close(checkList.close);
}, 2000);
}
});
$("#wa-dialog").find("#btn-review").on({
click: function () {
if (userClickedButton) {
return;
}
_external.browserNavigate("CH", "https://chrome.google.com/webstore/detail/mcafee%C2%AE-webadvisor/fheoggkfdfchfphceeifdbepaooicaho/reviews");
getUserDataAndSubmit("Review");
userClickedButton = true;
setTimeout(function () {
dialog.close(checkList.close);
}, 100);
}
});
$("#wa-dialog").find("#btn-cancel").on({
click: function () {
if (userClickedButton) {
return;
}
getUserDataAndSubmit("Declined");
userClickedButton = true;
dialog.close(checkList.close);
}
});
});
//Telemetry 3.0
var analyticsEvent = {
_event_name: "wa_survey_ui",
hit_label_19: "Impression",
hit_label_20: _instrument.getBrowserTypeCode(),
hit_label_21: "NPS",
hit_label_22: "NULL",
hit_label_23: "default"
}
_instrument.sendAnalyticsEvent(analyticsEvent);
_external.setKey(key);
_window.show();
};
};
}(window.WebAdvisor = window.WebAdvisor || {}, jQuery));
$(function () {
var controller = new WebAdvisor.UI.CheckListController();
controller.update();
});
//CB003FAE9432476256FE4550324C9BCE9424A487679C648FB8631530B0C52361703AC7A720BE256F5B216672107D9D11CC60521D48A2268B7CF67333B287F87E++