Task: Sync privacy settings between Hub and CMP

<script>
  /**
   * H1. UBERFLIP -- "JS PRIVACY API" CODE EXAMPLE
   * 
   * The purpose of this code is to give an example of how Uberflip's 
   * JS Privacy API can be used to interface with your external Privacy Banner
   * and Privacy Policy page.
   * 
   * By using the JS Privacy API, you can manage the Privacy Groups on your
   * Hub to reflect the Privacy Preferences that have been selected by a
   * visitor on your External Website.
   * 
   * There are two cases that need to be covered:
   * 
   * - visitor has selected Preferences on your external website, and now
   *   those preferences must be synced with the Hub (your Privacy Banner does
   *   not need to be displayed in this case). Or,
   * 
   * - the visitor has not made any Preference selections, and your
   *   external Privacy Banner must now be displayed.
   * 
   * When a visitor has not made any Privacy Preference selection, Privacy
   * Protection features will be active, and no identifying information will
   * be collected about the visitor.
   * 
   */
  (function(w) {
    /**
     * Examples:
     *  - New Visitor: https://run.mocky.io/v3/3e0c1951-14d2-45a7-ab66-047dc905d8e1
     *  - External "Accepted": https://run.mocky.io/v3/258de2ae-8268-4bc1-b7d1-dd048c2c0b7d
     *  - External "Rejected": https://run.mocky.io/v3/473dee97-38d8-4247-b49a-a0b93fb4f8b9
     */
    var REMOTE_PRIVACY_PREFERENCES_URL = 'https://run.mocky.io/v3/258de2ae-8268-4bc1-b7d1-dd048c2c0b7d';

    /**
     * Example mapping to demonstrate relationship between External Privacy 
     * Groups/Categories and Hub Privacy Groups. 
     * 
     * Add an object {} to this list for each of your external Privacy Groups/
     * Categories. 
     * 
     *  - remotePrivacyGroupId: id of your Privacy Service's group/category;
     *
     *  - hubPrivacyGroupIds: a list of Hub Privacy Group Ids that should be
     *     mapped to the value of your Privacy Service's group. You can find
     *     these id's by typing `Hubs.Privacy.getAll()` in Developer Console
     *     while browsing your Hub.
     */
    var REMOTE_TO_HUB_PRIVACY_GROUPS = [{
        remotePrivacyGroupId: 10001000,
        hubPrivacyGroupIds: [390109]
      },
      {
        remotePrivacyGroupId: 10002000,
        hubPrivacyGroupIds: [390108]
      },
      {
        remotePrivacyGroupId: 10003000,
        hubPrivacyGroupIds: [390110, 390111]
      },
    ];

    var HubPrivacy = null;

    initialize();

    //
    // Functions
    //------------------------------------------------------------

    function initialize() {
      if (isPrivacyApiReady()) {
        bindPrivacy();
        callRemoteServer();
      } else {
        var HUBS_LOADED_EVENT = 'load';

        // Fallback: may need to wait for Hub to initialize 
        w.addEventListener(HUBS_LOADED_EVENT, function() {
          if (isPrivacyApiReady()) {
            bindPrivacy();
            callRemoteServer();
          }
        });
      }
    }

    // Check that the Expected/Required Globals are ready for consumption
    function isPrivacyApiReady() {
      return Boolean(
        (typeof w.Hubs !== 'undefined' && typeof w.Hubs.Privacy !== 'undefined') ||
        (typeof w.uberflip !== 'undefined' && typeof w.uberflip.Privacy !== 'undefined')
      );
    }

    // Find and bind the Privacy interface
    function bindPrivacy() {
      HubPrivacy = (w.Hubs || w.uberflip).Privacy;
    }

    // Note: Your service requires CORS configuration to allow request from Hub domain
    function callRemoteServer() {
      // Note: JQuery is used for this API Request example, but is not required. You
      // may need to wait for jQuery's "ready" event
      $.get(REMOTE_PRIVACY_PREFERENCES_URL).done(handleSuccess).fail(handleFailure);
    }

    function handleSuccess(data) {
      console.log('$.get: Success', data);

      if (typeof data !== 'object') {
        console.warn('Response data is not expected type of `object`');
        return;
      }

      // Using example Response JSON that has a property `privacy_groups`
      if (typeof data.privacy_groups === 'object' && isSyncRequired(data.privacy_groups)) {
        syncToRemotePreferences(data.privacy_groups);
      }

      // Using example Response JSON that has a property `is_banner_dismissed`
      if (!data.is_banner_dismissed) {
        showCustomPrivacyBanner(data.banner_version);
      }
    }

    /**
     * Compare all Hub Privacy Groups to determine if the "Accepted" value
     * matches the Expected Value of the Remote Privacy Group.
     * 
     * If one of the values does not match, then a Sync is required.
     */
    function isSyncRequired(remotePrivacyGroups) {
      for (var id in remotePrivacyGroups) {
        var remotePrivacyGroup = remotePrivacyGroups[id];
        var expectedValue = remotePrivacyGroup.accepted ? 1 : 0;
        var hubPrivacyGroupIds = getHubPrivacyGroupsByRemoteId(id);

        for (var key in hubPrivacyGroupIds) {
          var hubPrivacyGroup = HubPrivacy.getById(hubPrivacyGroupIds[key]);
          if (hubPrivacyGroup) {
            var hubPrivacyGroupCurrentValue = hubPrivacyGroup.isAccepted ? 1 : 0;

            if (expectedValue !== hubPrivacyGroupCurrentValue) {
              console.log('JS Privacy: Sync is required!');
              return true;
            }
          }
        }
      }

      console.log('JS Privacy: Sync is NOT required');
      return false;
    }

    /**
     * Update all Hub Privacy Groups to match the "Accepted" value of the 
     * Remote Privacy Group "Accepted" value.
     * 
     * Once the preferences have been updated, we must `applyChanges()` to
     * have the Hub reload all privacy components accordingly.
     */
    function syncToRemotePreferences(remotePrivacyGroups) {
      Object.keys(remotePrivacyGroups)
        .forEach(function(key) {
          var remotePrivacyGroup = remotePrivacyGroups[key];
          var methodName = remotePrivacyGroup.accepted ? 'acceptById' : 'rejectById';
          var hubPrivacyGroupIds = getHubPrivacyGroupsByRemoteId(key);

          hubPrivacyGroupIds.forEach(function(hubPrivacyGroupId) {
            HubPrivacy[methodName](hubPrivacyGroupId);
          });
        });

      // When all Preferences were updated, Save Changes and Reload Hub page
      HubPrivacy.applyChanges();

      console.log('JS Privacy: Sync Completed!');
    }

    function getHubPrivacyGroupsByRemoteId(remotePrivacyGroupId) {
      for (var key in REMOTE_TO_HUB_PRIVACY_GROUPS) {
        var mappingItem = REMOTE_TO_HUB_PRIVACY_GROUPS[key];
        if (parseInt(remotePrivacyGroupId, 10) === parseInt(mappingItem.remotePrivacyGroupId, 10)) {
          return mappingItem.hubPrivacyGroupIds;
        }
      }

      return [];
    }

    function showCustomPrivacyBanner(bannerVersion) {
      // Code to control your Custom Privacy Banner...
      console.log('JS Privacy: Show custom Privacy Banner...');
    }

    function handleFailure(response) {
      console.warn('$.get: Failed. Status Code:', response.status);
    }
  })(window);
</script>