Adding new param to support hiding/ showing CCP for request storage access after access granted (#794)

Co-authored-by: Andy Wang <wangdy@amazon.com>

Author: andywang219

Documentation.md

@@ -208,6 +208,11 @@ everything set up correctly and that you are able to listen for events.
             ringtoneUrl: "./ringtone.mp3",// optional, defaults to CCP’s default ringtone if a falsy value is set
             disableEchoCancellation: false// optional, defaults to false
           },
+          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-lock.json

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

package.json

@@ -26296,7 +26296,7 @@ var __WEBPACK_AMD_DEFINE_RESULT__;// AWS SDK for JavaScript v2.1377.0
 
   connect.core = {};
   connect.core.initialized = false;
-  connect.version = "2.7.3";
+  connect.version = "2.7.4";
   connect.outerContextStreamsVersion = null;
   connect.DEFAULT_BATCH_SIZE = 500;
 
@@ -30472,6 +30472,7 @@ var __WEBPACK_AMD_DEFINE_RESULT__;// AWS SDK for JavaScript v2.1377.0
     /* ["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
        *
@@ -30531,7 +30532,13 @@ var __WEBPACK_AMD_DEFINE_RESULT__;// AWS SDK for JavaScript v2.1377.0
    * 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/);
 
@@ -30689,7 +30696,7 @@ var __WEBPACK_AMD_DEFINE_RESULT__;// AWS SDK for JavaScript v2.1377.0
 
     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`).withObject(messageData?.data);
 
         if (!messageData?.data.hasAccess && isCustomRequestAccessMode()) {
@@ -30698,17 +30705,17 @@ var __WEBPACK_AMD_DEFINE_RESULT__;// AWS SDK for JavaScript v2.1377.0
       },
 
       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

release/connect-streams-dr-min.js

@@ -347,6 +347,11 @@ declare namespace connect {
     };
     /** Customize messaging on the request/deny banners */
     custom?: {
+      /** 
+      * provides users the option to specify whether or not to hide CCP Iframe upon granting access when using custom mode
+      * @default true
+      */
+      hideCCP?: boolean;
       header?: string;
       title?: string;
       accessBannerDescription?: string;

release/connect-streams-dr.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
        *
@@ -100,7 +101,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/);
 
@@ -258,7 +265,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`).withObject(messageData?.data);
 
         if (!messageData?.data.hasAccess && isCustomRequestAccessMode()) {
@@ -267,17 +274,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

release/connect-streams-min.js

@@ -90,6 +90,7 @@ describe('Request Storage Access module', () => {
         },
         mode: 'custom',
         custom: {
+          hideCCP: true,
           denyBannerButtonText: 'Try again',
         },
       };
@@ -207,7 +208,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: {},
@@ -222,7 +223,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: {},