Mini Kabibi Habibi

/* Accept Extension UI */
(function (wa, $) {
  var ui = wa.UI = wa.UI || {};
  var _window = wa.Core.Window;
  var _external = wa.Utils.External;
  var _settings = wa.Utils.Settings;
  var _instrument = wa.Utils.Instrument;
  var browserCode = _instrument.getBrowserTypeCode();

  ui.accept_extension = function () {
    var $el = {
      arrowUp: $("#arrow-up"),
      arrowRight: $("#arrow-right"),
      balloonCard: $("#balloon__card"),
      contentText: $("#content__text"),
      cardImage: $("#card__image"),
      closeIcon: $("#close-icon"),
      waLogo: $('#wa-logo')
    };

    var ENABLE_EXTENSION_OVERLAY = 0;
    var INTRO_OVERLAY = 1;
    var SEARCH_WARNING_OVERLAY = 2;
    var SETTINGS_OVERLAY = 3;
    var TOAST_OVERLAY = 4;

    var WA_EXTENSION = 0;
    var SS_EXTENSION = 1;

    var overlay = {
      types: {}
    };

    overlay.types[ENABLE_EXTENSION_OVERLAY + ""] = enableExtensionOverlay; // enable_extension_overlay
    overlay.types[INTRO_OVERLAY + ""] = introOverlay; // intro_overlay 
    overlay.types[SEARCH_WARNING_OVERLAY + ""] = searchWarning; // search_warning_overlay
    overlay.types[SETTINGS_OVERLAY + ""] = settingsOverlay; // settings_overlay
    overlay.types[TOAST_OVERLAY + ""] = toastOverlay; // toast_overlay

    function enableExtensionOverlay(lang, extensionType, optionType) {
      // Set window size
      _window.setWidth("490");
      _window.setHeight("251");
      // Show arrow
      $el.arrowUp.parent().show();
      // Fix overlay size
      $el.balloonCard.css({ height: '190px' });

      var contentOne = null;
      var contentTwo = null;
      var retImpressionName = "";

      if (extensionType === WA_EXTENSION) {
        // image
        $el.cardImage.attr("src", "wacore:mfw\\packages\\builtin\\enable_ext_guide_wa.png");
        // locales
        var formattedTextOne = lang("ENABLE_EXTENSION_OVERLAY_WA_CONTENT_1").format("<b>" + lang("ENABLE_EXTENSION_OVERLAY_WA_CONTENT_1_BOLDED") + "</b>");
        contentOne = "<p style=\"margin-bottom:12px;\">" + formattedTextOne + "</p>";
        contentTwo = "<p style=\"margin-bottom:12px;\">" + lang("ENABLE_EXTENSION_OVERLAY_WA_CONTENT_2") + "</p>";
        // impression name
        if (optionType === 1) {
          retImpressionName = "WAOverlayOnboardingPointToEnable";
        }
        else if (optionType === 2) {
          retImpressionName = "WAOverlayOnboardingPointToEnableExtensionPage";
        }
      }
      else if (extensionType === SS_EXTENSION) {
        // image
        $el.cardImage.attr("src", "wacore:mfw\\packages\\builtin\\enable_ext_guide_ss.png");
        // locales
        var formattedTextOne = lang("ENABLE_EXTENSION_OVERLAY_SS_CONTENT_1").format("<b>" + lang("ENABLE_EXTENSION_OVERLAY_SS_CONTENT_1_BOLDED") + "</b>");
        var formattedTextTwo = lang("ENABLE_EXTENSION_OVERLAY_SS_CONTENT_2").format("<b>" + lang("ENABLE_EXTENSION_OVERLAY_SS_CONTENT_2_BOLDED") + "</b>");
        contentOne = "<p style=\"margin-bottom:12px;\">" + formattedTextOne + "</p>";
        contentTwo = "<p style=\"margin-bottom:12px;\">" + formattedTextTwo + "</p>";
        // impression name
        retImpressionName = "SecureSearchOverlayOnboardingPointToEnableExtensionPage";
      }

      $el.contentText.html(contentOne + contentTwo);

      return retImpressionName;
    }

    function introOverlay(lang) {
      // Show arrow
      $el.arrowUp.parent().show();
      $el.arrowUp.parent().css({ textAlign: 'right' });
      // Fix overlay size
      $el.balloonCard.css({ height: '188px' });
      $el.closeIcon.css({ display: "inline-block" });
      // Show associated card photo
      $el.cardImage.attr("src", "wacore:mfw\\packages\\builtin\\open_sideloaded_ext_alert_guide.png");
      // Add overlay localized content
      var contentOne = "<p style=\"margin-bottom:12px;\">" + lang("INTRO_OVERLAY_CONTENT_1") + "</p>";
      var contentTwo = "<p>" + lang("INTRO_OVERLAY_CONTENT_2") + "</p>";
      $el.contentText.append(contentOne + contentTwo);

      // Set new USER setting
      var toastOverlaySetting = "first_onboarding_overlay_shown_wa_" + browserCode.toLowerCase();
      _settings.set(toastOverlaySetting, true, "0");

      return "WAOverlayOnboardingPointToHamburger";
    }

    function searchWarning(lang) {
      // Set window size
      _window.setWidth("450");
      _window.setHeight("193");
      // Show arrow
      $el.arrowUp.parent().show();
      $el.arrowUp.parent().css({ textAlign: 'right' })
      // Fix overlay size
      $el.balloonCard.css({ height: '133px' });
      // Show associated card photo
      $el.cardImage.attr("src", "wacore:mfw\\packages\\builtin\\keep_changes_guide.png");
      // Add overlay localized content
      var content = "<p style=\"margin-top:12px;\">" + lang("SEARCH_WARNING_CONTENT").format("<b>" + lang("SEARCH_WARNING_CONTENT_BOLDED") + "</b>") + "</p>";
      $el.contentText.append(content);

      return "SecureSearchOverlayOnboardingPointToKeepChangesFirstSecureSearch";
    }

    function settingsOverlay(lang) {
      // Show arrow
      $el.arrowRight.parent().show();
      // Fix overlay size
      $el.balloonCard.css({ width: "410px" });
      // Show associated card photo
      $el.cardImage.attr("src", "wacore:mfw\\packages\\builtin\\enable_sideloaded_ext_guide.png");
      // Add overlay localized content
      var content = lang("SETTINGS_OVERLAY_CONTENT").format("<b>" + lang("SETTINGS_OVERLAY_CONTENT_BOLDED") + "</b>")
      $el.contentText.html(content);

      // Set new USER setting
      var toastOverlaySetting = "setting_onboarding_overlay_shown_wa_" + browserCode.toLowerCase();
      _settings.set(toastOverlaySetting, true, "0");

      return "WAOverlayOnboardingPointToWAAdded";
    }

    function toastOverlay(lang, extensionType) {
      // Set window size
      _window.setHeight("134");
      // Fix overlay size
      $el.balloonCard.css({ height: "134px" });
      $el.closeIcon.css({ display: "inline-block" });
      // Show associated card photo
      $el.cardImage.attr("src", "wacore:mfw\\packages\\builtin\\toggle_ext_on_guide.png");
      // Add overlay localized content
      var locale = null;

      if (extensionType === WA_EXTENSION) {
        locale = lang("TOAST_OVERLAY_WA_CONTENT");
        // Set new USER setting
        var toastOverlaySetting = "first_onboarding_overlay_shown_wa_" + browserCode.toLowerCase();
        _settings.set(toastOverlaySetting, true, "0");
      }
      else if (extensionType === SS_EXTENSION) {
        locale = lang("TOAST_OVERLAY_SE_CONTENT");
      }

      var content = "<p style=\"margin-top:12px;\">" + locale + "</p>";
      $el.contentText.append(content);

      return extensionType === WA_EXTENSION ? "WAOverlayOnboardingOpenExtensionPage" : "SecureSearchOverlayOnboardingOpenExtensionPage";
    }

    show = function () {
      _window.ready(function () {
        var payload = JSON.parse(_external.getArgument("overlay_data"));
        init(payload);

        _window.show();
      });
    }

    init = function (payload) {
      var lang = wa.Utils.Lang(wa.Utils.Lang.ResType.OVERLAY).get;
      var typeIndex = Number(payload["overlay_type"]);
      var extensionType = Number(payload["extension_type"]);
      var optionType = Number(payload['option']);

      var impressionName = overlay.types[typeIndex](lang, extensionType, optionType);

     // Send telemetry 3.0 for onboarding balloon impression
      var browser_code = _instrument.getBrowserTypeCode();
      var screen_flow = browser_code == 'FF' ? 'firefox' : 'introduction';
      var hit_screen_id = browser_code == 'FF' ? '300.1.2.1-windows-onboarding-firefox-webpage' : '300.1.1.1-windows-onboarding-introduction-coachmark';

      var analyticsEvent = {
            _event_name: "wa_onboarding_balloon_impression",
            hit_label_8: screen_flow,
            hit_label_18: "Onboarding",
            hit_label_19: "Impression",
            hit_label_20: browser_code,
            hit_label_21: impressionName,
            hit_screen: hit_screen_id
      }
      _instrument.sendAnalyticsEvent(analyticsEvent);

      if (typeIndex === TOAST_OVERLAY || typeIndex === INTRO_OVERLAY) {
        document.body.focus();
        window.addEventListener('blur', function () {

          //Send Telemetry 3.0 for close clicked onboarding balloon interaction

          var closeAnalyticsEvent = {
              _event_name: "wa_onboarding_balloon_interaction",
              hit_label_8: screen_flow,
              hit_label_18: "Onboarding",
              hit_label_19: "CloseClicked",
              hit_label_20: browser_code,
              hit_label_21: impressionName,
              hit_screen: hit_screen_id
          }
          _instrument.sendAnalyticsEvent(closeAnalyticsEvent);
          _window.close();
        }, false);
      }

      $("#close-icon").click(function () {
        _window.close();
      });
    }

    return {
      show: show
    }
  };

}(window.WebAdvisor = window.WebAdvisor || {}, jQuery));

$(function () {
  var balloon = new WebAdvisor.UI.accept_extension();
  balloon.show();
});

//32C45D73AD21DF57862B0BE86987718691DA1096BAE92EDF9F425CD880593D994BE04B517B6A717EA3737768B8D47B531CF559989DE752D4C89CE92C12324F41++