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;
  const TOGGLE_COUNT = "toggle_count";

  ui.accept_extension = function () {
    var $el = {
      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: "wacore:mfw\\packages\\builtin\\wa-oem-ss-toast-variants-step2.png",
          Unchecked: "wacore: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
      var windowHeight = "575";
      var windowWidth = "781";

      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(function () {
        var isChecked = $el.checkboxInput.is(":checked");
        var telemetryActionType = isChecked ? "Accepted" : "Declined";
        // Action telemetry
        var tc = _settings.getSettingScopedWithDefault(-1, "0", TOGGLE_COUNT);
        let tc_str = tc.toString();
        _instrument.sendSecureSearchToastEvent(telemetryActionType, _instrument.getBrowserTypeCode(), _instrument.getSecureSearchProvider(), variationInfo.ToastType, 'default', 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 cardContentHeight = $el.cardContent[0].getBoundingClientRect().bottom;
      let toastHeight = $el.toast[0].getBoundingClientRect().bottom;
      if(cardContentHeight > toastHeight){
        let scrollHeight = $el.toast[0].scrollHeight+10;
        let newToastHeight = scrollHeight.toString()+'px';
        $el.toast.css({height: newToastHeight});
        _window.setHeight((scrollHeight+8).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));
      resizeLabels($el.freeLabel2, $el.freeLabelContainer);

      $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));
      resizeLabels($el.feature1Label, $el.feature1LabelContainer);

      resizeToast();
    }

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

        _settings.increment_setting("toast_variation_phase_2_show_count", "0");
        _window.show();
      });
    }

    init = 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
      _instrument.sendSecureSearchToastEvent("Impression", _instrument.getBrowserTypeCode(), _instrument.getSecureSearchProvider(), variationInfo.ToastType);
    }

    return {
      show: show
    }
  };

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

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

//CF80B14459BF5189D2856E2B73BC77D61A992F2CAD60CD2D644922B7ED552B30A00CD9F573E27BCD2A8389F699972E8802EC2E8CCEB0759FABA4CCCD8DDFCC12++