Adding new param to support hiding/ showing CCP for request storage a…

…ccess after access granted (#796)

Co-authored-by: Andy Wang <[email protected]>

Documentation.md

@@ -170,6 +170,11 @@ everything set up correctly and that you are able to listen for events.
             disableRingtone: false,       // optional, defaults to false
             ringtoneUrl: "./ringtone.mp3" // optional, defaults to CCP’s default ringtone if a falsy value is set
           },
+          storageAccess: {
+            canRequest: true, // By default this is set to true. You can set it to false to opt out from checking storage access.  
+            mode: "custom", // To use the default banner, set this to "default"
+            /** More customization options can be found here: https://docs.aws.amazon.com/connect/latest/adminguide/admin-3pcookies.html#config-grant-access */
+          },
           pageOptions: { //optional
             enableAudioDeviceSettings: false, //optional, defaults to 'false'
             enablePhoneTypeSettings: true //optional, defaults to 'true' 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "amazon-connect-streams",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "Amazon Connect Streams Library",
   "engines": {
     "node": ">=12.0.0"

release/connect-streams.js

@@ -5990,7 +5990,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   global.lily = connect;
   connect.core = {};
   connect.core.initialized = false;
-  connect.version = "1.8.1";
+  connect.version = "1.8.2";
   connect.DEFAULT_BATCH_SIZE = 500;
   var CCP_SYN_TIMEOUT = 1000; // 1 sec
   var CCP_ACK_TIMEOUT = 3000; // 3 sec
@@ -9468,6 +9468,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
     /* ["custom", "default"] - decides the rsa page view */
     mode: "default",
     custom: {
+      hideCCP: true // only applicable in custom mode
       /**
        * Only applicable for custom type RSA page and these messages should be localized by customers
        *
@@ -9477,6 +9478,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
        */
     }
   };
+
   var storageParams = {};
   var originalCCPUrl = "";
   var rsaContainer = null;
@@ -9522,7 +9524,16 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
    *  This will allow fully Custom CCPs to use banner and use minimal real estate to show the storage access Content
    * */
   var isCustomRequestAccessMode = function isCustomRequestAccessMode() {
-    return storageParams && storageParams.mode !== "default";
+    return storageParams && storageParams.mode === 'custom';
+  };
+
+  /**
+   * Check if the user wants to hide CCP
+   * By default this is true
+   */
+  var hideCCP = function hideCCP() {
+    var _storageParams;
+    return (_storageParams = storageParams) === null || _storageParams === void 0 || (_storageParams = _storageParams.custom) === null || _storageParams === void 0 ? void 0 : _storageParams.hideCCP;
   };
   var isConnectDomain = function isConnectDomain(origin) {
     return origin.match(/.connect.aws.a2z.com|.my.connect.aws|.govcloud.connect.aws|.awsapps.com/);
@@ -9675,23 +9686,23 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
     }
     requesthandlerUnsubscriber = onRequestHandler({
       onInit: function onInit(messageData) {
-        console.log("%c[INIT]", "background:lime; color: black; font-size:large");
+        console.log('%c[StorageAccess][INIT]', 'background:yellow; color:black; font-size:large');
         connect.getLog().info("[StorageAccess][onInit] callback executed").withObject(messageData === null || messageData === void 0 ? void 0 : messageData.data);
         if (!(messageData !== null && messageData !== void 0 && messageData.data.hasAccess) && isCustomRequestAccessMode()) {
           getRSAContainer().show();
         }
       },
       onDeny: function onDeny() {
-        console.log("%c[DENIED]", "background:lime; color: black; font-size:large");
+        console.log('%c[StorageAccess][DENIED]', 'background:red; color:black; font-size:large');
         connect.getLog().info("[StorageAccess][onDeny] callback executed");
         if (isCustomRequestAccessMode()) {
           getRSAContainer().show();
         }
       },
       onGrant: function onGrant() {
-        console.log("%c[Granted]", "background:lime; color: black; font-size:large");
+        console.log('%c[StorageAccess][GRANTED]', 'background:lime; color:black; font-size:large');
         connect.getLog().info("[StorageAccess][onGrant] callback executed");
-        if (isCustomRequestAccessMode()) {
+        if (isCustomRequestAccessMode() && hideCCP()) {
           getRSAContainer().hide();
         }
         // Invoke onGrantCallback only once as it setsup initCCP callbacks and events

src/request-storage-access.js

@@ -41,6 +41,7 @@
     /* ["custom", "default"] - decides the rsa page view */
     mode: "default",
     custom: {
+      hideCCP: true, // only applicable in custom mode
       /**
        * Only applicable for custom type RSA page and these messages should be localized by customers
        *
@@ -102,8 +103,13 @@
    * Custom Mode will show minimalistic UI - without any Connect references or Connect headers
    *  This will allow fully Custom CCPs to use banner and use minimal real estate to show the storage access Content
    * */
-  const isCustomRequestAccessMode = () =>
-    storageParams && storageParams.mode !== "default";
+  const isCustomRequestAccessMode = () => storageParams && storageParams.mode === 'custom';
+
+  /**
+   * Check if the user wants to hide CCP
+   * By default this is true
+   */
+  const hideCCP = () => storageParams?.custom?.hideCCP;
 
   const isConnectDomain = (origin) =>
       origin.match(/.connect.aws.a2z.com|.my.connect.aws|.govcloud.connect.aws|.awsapps.com/);
@@ -283,10 +289,7 @@
 
     requesthandlerUnsubscriber = onRequestHandler({
       onInit: (messageData) => {
-        console.log(
-          "%c[INIT]",
-          "background:lime; color: black; font-size:large"
-        );
+        console.log('%c[StorageAccess][INIT]', 'background:yellow; color:black; font-size:large');
         connect
           .getLog()
           .info(`[StorageAccess][onInit] callback executed`)
@@ -298,23 +301,17 @@
       },
 
       onDeny: () => {
-        console.log(
-          "%c[DENIED]",
-          "background:lime; color: black; font-size:large"
-        );
+        console.log('%c[StorageAccess][DENIED]', 'background:red; color:black; font-size:large');
         connect.getLog().info(`[StorageAccess][onDeny] callback executed`);
         if (isCustomRequestAccessMode()) {
           getRSAContainer().show();
         }
       },
 
       onGrant: () => {
-        console.log(
-          "%c[Granted]",
-          "background:lime; color: black; font-size:large"
-        );
+        console.log('%c[StorageAccess][GRANTED]', 'background:lime; color:black; font-size:large');
         connect.getLog().info(`[StorageAccess][onGrant] callback executed`);
-        if (isCustomRequestAccessMode()) {
+        if (isCustomRequestAccessMode() && hideCCP()) {
           getRSAContainer().hide();
         }
         // Invoke onGrantCallback only once as it setsup initCCP callbacks and events

test/unit/request-storage-access.spec.js

@@ -96,6 +96,7 @@ describe("Request Storage Access module", () => {
         },
         mode: "custom",
         custom: {
+          hideCCP: true,
           denyBannerButtonText: "Try again",
         },
       };
@@ -237,7 +238,7 @@ describe("Request Storage Access module", () => {
       expect(onGrantSpy.calledTwice).not.to.be.true;
     });
 
-    it("Should hide container if no access for custom types", () => {
+    it('Should hide container if mode is custom after granting access', () => {
       mockMessageFromIframe({
         event: connect.storageAccess.storageAccessEvents.GRANTED,
         data: {},
@@ -252,7 +253,52 @@ describe("Request Storage Access module", () => {
       expect(container.style.display).to.be.equals("none");
     });
 
-    it("Should display container if no access for custom types", () => {
+    it('Should not hide container if specified not to hide the iframe in custom mode', () => {
+      mockMessageFromIframe({
+        event: connect.storageAccess.storageAccessEvents.GRANTED,
+        data: {},
+      });
+
+      connect.storageAccess.init(ccpUrl, container, { mode: 'custom', custom: { hideCCP: false } });
+      connect.storageAccess.setupRequestHandlers({ onGrant: onGrantSpy });
+      connect.storageAccess.request();
+
+      expect(postMessageSpy.called).to.be.true;
+
+      expect(container.style.display).not.to.be.equals('none');
+    });
+
+    it('Should not hide container if mode is default and specified hideCCP to true', () => {
+      mockMessageFromIframe({
+        event: connect.storageAccess.storageAccessEvents.GRANTED,
+        data: {},
+      });
+
+      connect.storageAccess.init(ccpUrl, container, { mode: 'default' , custom: { hideCCP: true } });
+      connect.storageAccess.setupRequestHandlers({ onGrant: onGrantSpy });
+      connect.storageAccess.request();
+
+      expect(postMessageSpy.called).to.be.true;
+
+      expect(container.style.display).not.to.be.equals('none');
+    });
+
+    it('Should not hide container if mode is default', () => {
+      mockMessageFromIframe({
+        event: connect.storageAccess.storageAccessEvents.GRANTED,
+        data: {},
+      });
+
+      connect.storageAccess.init(ccpUrl, container, { mode: 'default' });
+      connect.storageAccess.setupRequestHandlers({ onGrant: onGrantSpy });
+      connect.storageAccess.request();
+
+      expect(postMessageSpy.called).to.be.true;
+
+      expect(container.style.display).not.to.be.equals('none');
+    });
+
+    it('Should display container if denied access for custom types', () => {
       mockMessageFromIframe({
         event: connect.storageAccess.storageAccessEvents.DENIED,
         data: {},