Mini Kabibi Habibi

(function (wa, $) {
  var ui = wa.UI = wa.UI || {};
  var _window = wa.Core.Window;
  var _external = wa.Utils.External;
  var _instrument = wa.Utils.Instrument;
  var _settings = wa.Utils.Settings;
  var _misc = wa.Utils.Misc;
  const TOGGLE_COUNT = "toggle_count";
  var browser_code = "";
  var provider = "";
  
  var windowHeight = "575";
  var windowWidth = "781";
  ui.accept_extension = function () {
    var $el = {
      version2_3: $(".version2_3"),
      cardContent: $("#card-content"), // different css for different versions
      cardImage: $("#card-image"), // different css for different versions
      featureDisabledSection: $("#feature-disabled"),
      progressPic: $("#progress"),
      contentInfoTitle: $("#info-title"),
      contentInfoText: $("#info-text"),
      expiredSection: $(".expired__section"),
      expiredDivider: $("#expired-divider"),
      expiredLabel: $("#expired-label"),
      expiredName: $("#expired-name"),
      feature1Label: $("#feature-1-label"),
      feature1LabelContainer: $(".feature__1__label__container"), // dynamically change container if text is too long
      feature1Name: $("#feature-1-name"),
      freeLabel1: $("#free-label-1"),
      freeLabelContainer: $(".feature__free__label__container"), // dynamically change container if text is too long
      feature1Desc: $("#feature-1-desc"),
      feature2Name: $("#feature-2-name"),
      freeLabel2: $("#free-label-2"),
      feature2Desc: $("#feature-2-desc"),
      checkboxContainer: $("#switch-set-secure-search"),
      checkboxInput: $("#set-secure-search-checkbox"),
      featureEnabledLabelContainerSS: $("#feature-enabled-label-container-ss"),
      doneButton: $("#done"),
      toast: $("#toast"),
    };

    variationMap = {
      0: { // Common L10Ns among all variations
        ExpiredLabel: "SEARCH_TOAST_TOGGLE_EXPIRED_LABEL",
        ExpiredName: "SEARCH_TOAST_TOGGLE_EXPIRED_NAME",
        Feature1Label: "SEARCH_TOAST_TOGGLE_FEATURE_1_ON",
        Feature1Name: "SEARCH_TOAST_TOGGLE_FEATURE_1_NAME",
        Feature1Desc: "SEARCH_TOAST_TOGGLE_FEATURE_1_DESC",
        FreeLabel1: "SEARCH_TOAST_TOGGLE_FREE_LABEL",
        Feature2Name: "SEARCH_TOAST_TOGGLE_FEATURE_2_NAME",
        Feature2Desc: "SEARCH_TOAST_TOGGLE_FEATURE_2_DESC",
        FreeLabel2: "SEARCH_TOAST_TOGGLE_FREE_LABEL",
        ButtonWant: "SEARCH_TOAST_TOGGLE_BUTTON_SS_PROTECTED",
        ButtonDontWant: "SEARCH_TOAST_TOGGLE_BUTTON_SS_UNPROTECTED",
        ProgressPicChangable: {
          Checked: "file:///[WA_FILES]/mfw\\packages\\builtin\\wa-oem-ss-toast-variants-step2.png",
          Unchecked: "file:///[WA_FILES]/mfw\\packages\\builtin\\wa-oem-ss-toast-variants-step1.png",
        },
      },
      1: {
        VariantId: 1,
        InfoTitle: "SEARCH_TOAST_TOGGLE_VARIANT_1_HEADER",
        InfoText: "SEARCH_TOAST_TOGGLE_VARIANT_1_INFO",
        ToastType: "ToggleToast_variantOne",
      },
      2: {
        VariantId: 2,
        InfoTitle: "SEARCH_TOAST_TOGGLE_VARIANT_2_HEADER",
        InfoText: "SEARCH_TOAST_TOGGLE_VARIANT_2_INFO",
        ToastType: "ToggleToast_variantTwo",
      },
      3: {
        VariantId: 3,
        InfoTitle: "SEARCH_TOAST_TOGGLE_VARIANT_3_HEADER",
        InfoText: "SEARCH_TOAST_TOGGLE_VARIANT_3_INFO",
        ToastType: "ToggleToast_variantThree",
      },
    }

    function fillButtonText(btnText)
    {
      if (!btnText)
      {
        return;
      }

      if (btnText.length > 8)
      {
        $el.doneButton.attr("class", "button__text__style");
      }
      else
      {
        $el.doneButton.attr("class", "button__fixed__width2_3");
      }
      
      $el.doneButton.val(btnText);
    }

    function adjustVersionUI(cohort) {
      // different css styling for same html elements
    

      if (cohort === 4) {
        $el.expiredSection.addClass('hide');
        $el.expiredDivider.addClass('hide');
        $el.toast.addClass('toast2_3_smaller');
        windowHeight = (parseInt(windowHeight)-50).toString();
      }
      else {
        $el.toast.addClass('toast2_3_larger');
      }
      _window.setWidth(windowWidth);
      _window.setHeight(windowHeight);
    }
    
    function initComponents(cohort, variationInfo, commonInfo, lang) {
      if (!cohort || !variationInfo || !commonInfo || !lang)
      {
        return;
      }
      
      adjustVersionUI(cohort);

      $el.checkboxInput.click(function () {
        var isChecked = $el.checkboxInput.is(":checked");
        
        var btnText = lang(commonInfo.ButtonWant);
        var progressPicPath = "";

        _settings.increment_setting(TOGGLE_COUNT, "0");

        if (isChecked) {
          progressPicPath = commonInfo.ProgressPicChangable ? commonInfo.ProgressPicChangable.Checked: progressPicPath;
        }
        else {
          progressPicPath = commonInfo.ProgressPicChangable ? commonInfo.ProgressPicChangable.Unchecked : progressPicPath;
        }

        if (progressPicPath)
        {
          $el.progressPic.attr("src", progressPicPath);
        }
      });
      
      $el.doneButton.click(async function () {
        var isChecked = $el.checkboxInput.is(":checked");
        var telemetryActionType = isChecked ? "Accepted" : "Declined";
        // Action telemetry
        var payload = JSON.parse(await _external.getArgument("toast_data"));
        var tc = await _settings.getSettingScopedWithDefault(-1, "0", TOGGLE_COUNT);
        let tc_str = tc.toString();
        var metadata = await _instrument.getSecureSearchToastMetadata(payload, browser_code);
        var toast_type = _misc.getQualifiedToastType(variationInfo.ToastType, cohort);
        await _instrument.sendSecureSearchToastEvent(telemetryActionType, browser_code, provider, toast_type, metadata, tc_str);
        
        if (isChecked) {
          wa.Core.SecureSearch.enable();
        }
        else {
          wa.Core.SecureSearch.disable();
        }

        _window.close();
      });
    }

    // If the locale for the Free Label is larger than the container, make the container fit the text
    function resizeLabels(textElement, containerElement) {
      let containerWidth = containerElement.width();
      let textWidth = textElement.width();
      
      if(textWidth >= containerWidth) {
        containerElement.css('width', textWidth + 10);
      }
    }

    // If the contents of the toast is out of view from the toast, make the toast taller to account for the extra space a locale may have made
    function resizeToast() {
      let scrollHeight = $el.toast[0].scrollHeight;

      if(scrollHeight > windowHeight){
        $el.toast.css({height: `${scrollHeight.toString()}px`});
        _window.setHeight((scrollHeight).toString());
      }
    }

    function fillText(variationInfo, commonInfo, lang) {
      $el.contentInfoTitle.text(lang(variationInfo.InfoTitle));
      $el.contentInfoText.text(lang(variationInfo.InfoText));
      $el.feature2Name.text(lang(commonInfo.Feature2Name));
      $el.feature2Desc.text(lang(commonInfo.Feature2Desc));
      $el.freeLabel2.text(lang(commonInfo.FreeLabel2));
      $el.doneButton.val(lang(commonInfo.ButtonWant));
      

      $el.expiredLabel.text(lang(commonInfo.ExpiredLabel));
      $el.expiredName.text(lang(commonInfo.ExpiredName));
      $el.feature1Label.text(lang(commonInfo.Feature1Label));
      $el.feature1Name.text(lang(commonInfo.Feature1Name));
      $el.feature1Desc.text(lang(commonInfo.Feature1Desc));
      $el.freeLabel1.text(lang(commonInfo.FreeLabel1));
      
    }

    show = async function () {

      chrome.webview.hostObjects.wa_external.log("inside show " + _window.toString());

      chrome.webview.hostObjects.wa_external.log("_window.ready start");
      
      var payload = JSON.parse(await _external.getArgument("toast_data"));
      browser_code = await _instrument.getBrowserTypeCode();
      provider = await _instrument.getSecureSearchProvider();
      await init(payload);

      //Small delay needed here to allow DOM to fully render before adjusting height
      setTimeout(() => {
        resizeToast();
        _settings.increment_setting("toast_variation_phase_2_show_count", "0");
        _window.show();
        window.chrome.webview.postMessage("set_focus");
      }, 1000);

      chrome.webview.hostObjects.wa_external.log("_window.ready end");
    }

    init = async function (payload) {
      var lang = wa.Utils.Lang(wa.Utils.Lang.ResType.SSTOAST).get;
      var cohort = Number(payload["ss_toggle_cohort"]);
      var variation = Number(payload["toggle_toast_count"]) + 1; // +1 because %3 in lua and variationMap
      
      var variationInfo = variationMap[variation];
      var commonInfo = variationMap[0];
      if (!variationInfo || !commonInfo)
      {
        _window.close();
        return;
      }
      initComponents(cohort, variationInfo, commonInfo, lang);
      fillText(variationInfo, commonInfo, lang);

      // Impression telemetry
      var metadata = await _instrument.getSecureSearchToastMetadata(payload, browser_code);
      var toast_type = _misc.getQualifiedToastType(variationInfo.ToastType, cohort);
      await _instrument.sendSecureSearchToastEvent("Impression", browser_code, provider, toast_type, metadata);
    }

    return {
      show: show
    }
  };

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

// Show secure search toggle toast
$(function () {
  var toast = new WebAdvisor.UI.accept_extension();

  if (document.readyState === 'complete') {
    chrome.webview.hostObjects.wa_external.log("dom ready: document is good");
    toast.show();
  }
  else {
    chrome.webview.hostObjects.wa_external.log("dom not ready: adding listener");
    window.addEventListener('load', toast.show);
  }
});

//A151C8D3FD37123219DC0574960488A2C28983D34CD695778D75B425F4144CDEF2A2533E4C1FA19A3BD414851A47E5409F13B7AB221BB12909A9730619D8F753++