From 627e88ee95d9f63be7b6e4daffc3234a148e5cae Mon Sep 17 00:00:00 2001
From: BaskarMitrah <113968869+BaskarMitrah@users.noreply.github.com>
Date: Fri, 13 Sep 2024 23:35:36 +0530
Subject: [PATCH] Bug : Update the credential card dynamically (#1618)

* Bug : Update the credential card dynamically

* --Fixed smoke fail issues

* --Removed console
---
 cypress/e2e/get-credentials.cy.js             | 15 ++--
 .../GetCredential/Card/CardAPIKey.js          |  4 +-
 .../GetCredential/Card/CardAllowedOrigins.js  |  4 +-
 .../GetCredential/Card/CardClientDetails.js   | 85 ++++++++++---------
 .../GetCredential/Card/CardClientId.js        |  4 +-
 .../GetCredential/Card/CardClientSecret.js    |  4 +-
 .../GetCredential/Card/CardImsOrgID.js        |  4 +-
 .../Card/CardOrganizationName.js              |  4 +-
 .../GetCredential/Card/CardScopes.js          |  4 +-
 .../GetCredential/CredentialDetailsCard.js    |  2 +
 .../components/GetCredential/MyCredential.js  |  1 +
 .../GetCredential/Return/ReturnAPIKey.js      |  4 +-
 .../Return/ReturnAllowedOrigins.js            |  4 +-
 .../GetCredential/Return/ReturnClientId.js    |  4 +-
 .../Return/ReturnClientSecret.js              |  4 +-
 .../Return/ReturnCredentialDetails.js         | 71 +++++++++++++---
 .../Return/ReturnOrganizationName.js          |  4 +-
 .../GetCredential/Return/ReturnScopes.js      |  4 +-
 18 files changed, 145 insertions(+), 81 deletions(-)

diff --git a/cypress/e2e/get-credentials.cy.js b/cypress/e2e/get-credentials.cy.js
index 8827889868..46de0183e1 100644
--- a/cypress/e2e/get-credentials.cy.js
+++ b/cypress/e2e/get-credentials.cy.js
@@ -18,8 +18,8 @@ function checkRequestAccessEdgeCase() {
 
 function getIframeBody() {
   return cy.get('iframe[data-cy="request-access-iframe"]')
-  .its('0.contentDocument.body').should('not.be.empty')
-  .then(cy.wrap);
+    .its('0.contentDocument.body').should('not.be.empty')
+    .then(cy.wrap);
 }
 
 function checkRequestAccess() {
@@ -27,12 +27,15 @@ function checkRequestAccess() {
     // if the request is not already sent, send the request
     if ($body.find('[data-cy="request-access-button"]').length > 0) {
       cy.get('[data-cy="request-access-button"]').click();
-      getIframeBody().find('button[data-testid="send-request-button"]').should('exist').click();
+
+      getIframeBody().find('h3[data-testid="title"]').invoke('text').then((text) => {
+        if (text.trim() !== 'Your request is on its way') {
+          getIframeBody().find('button[data-testid="send-request-button"]').should('exist').click();
+        }
+      });
       getIframeBody().find('button[data-testid="close-button"]').should('exist').click();
     }
   });
-  cy.get('button[data-cy="request-info"]').should('be.visible').should('be.enabled').click();
-  cy.get('body', { timeout: 1000 }).click();
 };
 
 function checkReturnFlow(credentialType) {
@@ -84,7 +87,7 @@ function checkOAuthS2S() {
 }
 
 function checkCredential(credentialType) {
-  switch(credentialType) {
+  switch (credentialType) {
     case API_KEY:
       checkAPIKey();
       break;
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js
index 88e09d4acd..235d2e1009 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAPIKey.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardAPIKey = ({ cardAPIKey, apiKey }) => {
+const CardAPIKey = ({ val: { heading, apiKey } }) => {
   return (
-    <ShowCard heading={cardAPIKey?.heading} value={apiKey} />
+    heading && <ShowCard heading={heading} value={apiKey} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js
index 0ba25ac27c..3cb2b09732 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardAllowedOrigins.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardAllowedOrigins = ({ cardAllowedOrigins, allowedOrigins }) => {
+const CardAllowedOrigins = ({ val: { heading, allowedOrigins } }) => {
   return (
-    <ShowCard heading={cardAllowedOrigins?.heading} value={allowedOrigins} />
+    heading && <ShowCard heading={heading} value={allowedOrigins} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
index f7b47b2b5c..2882dd83e1 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientDetails.js
@@ -9,6 +9,16 @@ import { CardScopes } from './CardScopes';
 import { CardImsOrgID } from './CardImsOrgID';
 import GetCredentialContext from '../GetCredentialContext';
 
+const COMPONENT_MAP = {
+  "CardAPIKey": CardAPIKey,
+  "CardAllowedOrigins": CardAllowedOrigins,
+  "CardClientId": CardClientId,
+  "CardClientSecret": CardClientSecret,
+  "CardOrganizationName": CardOrganizationName,
+  "CardScopes": CardScopes,
+  "CardImsOrgID": CardImsOrgID
+};
+
 const CardClientDetails = ({
   clientDetails,
   clientIdDetails,
@@ -21,10 +31,42 @@ const CardClientDetails = ({
   allowedOrigins,
   response,
   imsOrgID,
+  myCredentialFields
 }) => {
 
   const { selectedOrganization } = useContext(GetCredentialContext);
 
+  const cardCompDetails = {
+    "CardAPIKey": {
+      heading: apiKeyDetails?.heading,
+      apiKey: response?.['apiKey']
+    },
+    "CardAllowedOrigins": {
+      heading: allowedOrigins?.heading,
+      allowedOrigins: allowedOriginsDetails,
+    },
+    "CardClientId": {
+      heading: clientIdDetails?.heading,
+      clientId: response?.['apiKey']
+    },
+    "CardClientSecret": {
+      cardClientSecret: clientSecretDetails,
+      response
+    },
+    "CardOrganizationName": {
+      heading: organizationDetails?.heading,
+      organization: organizationName?.name
+    },
+    "CardScopes": {
+      heading: scopesDetails?.heading,
+      scope: scopesDetails?.scope
+    },
+    "CardImsOrgID": {
+      heading: imsOrgID?.heading,
+      imsOrgId: selectedOrganization?.code
+    }
+  };
+
   return (
     <div
       css={css`
@@ -33,45 +75,10 @@ const CardClientDetails = ({
         gap: 32px;
       `}>
       <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
-      {apiKeyDetails && (
-        <CardAPIKey
-          cardClientDetails={clientDetails}
-          cardAPIKey={apiKeyDetails}
-          apiKey={response?.['apiKey']}
-        />
-      )}
-      {clientIdDetails && (
-        <CardClientId
-          cardClientDetails={clientDetails}
-          cardClientId={clientIdDetails}
-          clientId={response?.['apiKey']}
-        />
-      )}
-      {allowedOrigins && (
-        <CardAllowedOrigins
-          cardClientDetails={clientDetails}
-          cardAllowedOrigins={allowedOrigins}
-          allowedOrigins={allowedOriginsDetails}
-        />
-      )}
-      {clientSecretDetails && (
-        <CardClientSecret
-          cardClientDetails={clientDetails}
-          cardClientSecret={clientSecretDetails}
-          response={response}
-        />
-      )}
-      {organizationDetails && (
-        <CardOrganizationName
-          cardClientDetails={clientDetails}
-          cardOrganizationName={organizationDetails}
-          organization={organizationName?.name}
-        />
-      )}
-      {scopesDetails && <CardScopes cardClientDetails={clientDetails} cardScopes={scopesDetails} />}
-      {imsOrgID && (
-        <CardImsOrgID cardClientDetails={clientDetails}  cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />
-      )}
+      {myCredentialFields?.[CardClientDetails]?.children.map(({ type }, index) => {
+        const Component = COMPONENT_MAP[type?.name];
+        return Component ? <Component key={index} val={cardCompDetails[type?.name]} /> : null;
+      })}
     </div>
   );
 };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js
index f8a024fb10..5768f735fc 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientId.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard'
 
-const CardClientId = ({ cardClientId, clientId }) => {
+const CardClientId = ({ val: { heading, clientId } }) => {
   return (
-    <ShowCard heading={cardClientId?.heading} value={clientId} />
+    heading && <ShowCard heading={heading} value={clientId} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js
index b9a93a9491..fd532163fa 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardClientSecret.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardClientSecret = ({ cardClientSecret, response }) => {
+const CardClientSecret = ({ val : { cardClientSecret, response }}) => {
   return (
-    <ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
+    cardClientSecret && <ShowCard heading={cardClientSecret?.heading} isClientSecret buttonLabel={cardClientSecret?.buttonLabel} response={response} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
index 7b42d88442..5b570ff6f8 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardImsOrgID.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ShowCard from './ShowCard';
 
-const CardImsOrgID = ({ cardImsOrgID, imsOrgId }) => {
-  return <ShowCard heading={cardImsOrgID?.heading} value={imsOrgId} />;
+const CardImsOrgID = ({ val: { heading, imsOrgId } }) => {
+  return heading && <ShowCard heading={heading} value={imsOrgId} />
 };
 
 export { CardImsOrgID };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js
index 7ed147c6ff..bf24961c40 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardOrganizationName.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardOrganizationName = ({ cardOrganizationName, organization }) => {
+const CardOrganizationName = ({ val: { heading, organization } }) => {
   return (
-    <ShowCard heading={cardOrganizationName?.heading} value={organization} isOraganization />
+    heading && <ShowCard heading={heading} value={organization} isOraganization />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js
index 9c370c71fa..867d4d59ba 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Card/CardScopes.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from './ShowCard';
 
-const CardScopes = ({ cardScopes }) => {
+const CardScopes = ({ val: { heading, scope } }) => {
   return (
-    <ShowCard heading={cardScopes?.heading} value={cardScopes?.scope} />
+    heading && <ShowCard heading={heading} value={scope} />
   )
 }
 export { CardScopes };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
index 0474813cbf..b1aba267d0 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/CredentialDetailsCard.js
@@ -148,6 +148,8 @@ export const CredentialDetailsCard = ({
                 allowedOrigins={allowedOrigins}
                 response={response}
                 imsOrgID={imsOrgID}
+                returnFields={returnFields}
+                myCredentialFields={myCredentialFields}
               />
             )}
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/MyCredential.js b/packages/gatsby-theme-aio/src/components/GetCredential/MyCredential.js
index c366641ac0..39dd7882b8 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/MyCredential.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/MyCredential.js
@@ -32,6 +32,7 @@ const MyCredential = ({
   credentialProps?.[MyCredential]?.children.forEach(({ type, props }) => {
     myCredentialFields[type] = props;
     if (props.children && type === CardClientDetails) {
+      myCredentialFields[type] = props;
       props?.children?.forEach(({ type, props }) => {
         myCredentialFields[type] = props;
       });
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js
index f182924348..8c101a0729 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAPIKey.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnAPIKey = ({ returnCredentialDetails , returnAPIKey, apiKey }) => {
+const ReturnAPIKey = ({ val: { heading, apiKey } }) => {
   return (
-    <ShowCard heading={returnAPIKey?.heading} value={apiKey} />
+    heading && <ShowCard heading={heading} value={apiKey} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js
index dc53b5a46c..05e26e6423 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnAllowedOrigins.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnAllowedOrigins = ({ returnAllowedOrigins, allowedOrigins }) => {
+const ReturnAllowedOrigins = ({ val: { allowedOrigins, heading } }) => {
   return (
-    <ShowCard heading={returnAllowedOrigins?.heading} value={allowedOrigins} />
+    heading && <ShowCard heading={heading} value={allowedOrigins} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js
index edfd4c430c..aad7a1fef7 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientId.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import ShowCard from '../Card/ShowCard';
 
-const ReturnClientId = ({ returnClientId, clientId }) => {
+const ReturnClientId = ({ val: { heading, clientId } }) => {
   return (
-    <ShowCard heading={returnClientId?.heading} value={clientId} />
+    heading && <ShowCard heading={heading} value={clientId} />
   )
 }
 export { ReturnClientId };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js
index 02b32bbea4..c0956c0133 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnClientSecret.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnClientSecret = ({ returnClientSecret, response }) => {
+const ReturnClientSecret = ({ val: { returnClientSecret, response } }) => {
   return (
-    <ShowCard heading={returnClientSecret?.heading} isClientSecret buttonLabel={returnClientSecret?.buttonLabel} response={response} />
+    returnClientSecret && <ShowCard heading={returnClientSecret?.heading} isClientSecret buttonLabel={returnClientSecret?.buttonLabel} response={response} />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
index 28d1fa6f33..513d8a47d3 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnCredentialDetails.js
@@ -9,10 +9,64 @@ import { ReturnScopes } from './ReturnScopes';
 import GetCredentialContext from '../GetCredentialContext';
 import { CardImsOrgID } from '../Card/CardImsOrgID';
 
-const ReturnCredentialDetails = ({ clientDetails, clientIdDetails, clientSecretDetails, organizationDetails, scopesDetails, apiKeyDetails, allowedOriginsDetails, organizationName, allowedOrigins, response, imsOrgID }) => {
+const COMPONENT_MAP = {
+  "ReturnAPIKey": ReturnAPIKey,
+  "ReturnAllowedOrigins": ReturnAllowedOrigins,
+  "ReturnClientId": ReturnClientId,
+  "ReturnClientSecret": ReturnClientSecret,
+  "ReturnOrganizationName": ReturnOrganizationName,
+  "ReturnScopes": ReturnScopes,
+  "CardImsOrgID": CardImsOrgID
+};
+
+const ReturnCredentialDetails = ({
+  clientDetails,
+  apiKeyDetails,
+  clientIdDetails,
+  clientSecretDetails,
+  organizationDetails,
+  scopesDetails,
+  allowedOriginsDetails,
+  organizationName,
+  allowedOrigins,
+  response,
+  imsOrgID,
+  returnFields
+}) => {
 
   const { selectedOrganization } = useContext(GetCredentialContext);
 
+  const returnCompDetails = {
+    "ReturnAPIKey": {
+      heading: apiKeyDetails?.heading,
+      apiKey: response?.workspaces[0]?.credentials[0]?.clientId,
+    },
+    "ReturnAllowedOrigins": {
+      heading: allowedOrigins?.heading,
+      allowedOrigins: allowedOriginsDetails,
+    },
+    "ReturnClientId": {
+      heading: clientIdDetails?.heading,
+      clientId: response?.workspaces[0]?.credentials[0]?.clientId,
+    },
+    "ReturnClientSecret": {
+      returnClientSecret: clientSecretDetails,
+      response
+    },
+    "ReturnOrganizationName": {
+      heading: organizationDetails?.heading,
+      organization: organizationName?.name
+    },
+    "ReturnScopes": {
+      heading: scopesDetails?.heading,
+      scope: scopesDetails?.scope
+    },
+    "CardImsOrgID": {
+      heading: imsOrgID?.heading,
+      imsOrgId: selectedOrganization?.code
+    }
+  };
+
   return (
     <div css={css`
         display : flex;
@@ -20,15 +74,12 @@ const ReturnCredentialDetails = ({ clientDetails, clientIdDetails, clientSecretD
         gap: 32px;
       `}>
       <h4 className="spectrum-Heading spectrum-Heading--sizeS">{clientDetails?.heading}</h4>
-      {apiKeyDetails && <ReturnAPIKey returnCredentialDetails={clientDetails} returnAPIKey={apiKeyDetails} apiKey={response?.workspaces[0]?.credentials[0]?.clientId} />}
-      {allowedOrigins && <ReturnAllowedOrigins returnCredentialDetails={clientDetails} allowedOrigins={allowedOriginsDetails} returnAllowedOrigins={allowedOrigins} />}
-      {clientIdDetails && <ReturnClientId returnCredentialDetails={clientDetails} returnClientId={clientIdDetails} clientId={response?.workspaces[0]?.credentials[0]?.clientId} />}
-      {clientSecretDetails && <ReturnClientSecret returnCredentialDetails={clientDetails} returnClientSecret={clientSecretDetails} response={response} />}
-      {organizationDetails && <ReturnOrganizationName returnCredentialDetails={clientDetails} returnOrganizationName={organizationDetails} organization={organizationName?.name} />}
-      {scopesDetails && <ReturnScopes returnCredentialDetails={clientDetails} returnScopes={scopesDetails} />}
-      {imsOrgID && <CardImsOrgID returnCredentialDetails={clientDetails} cardImsOrgID={imsOrgID} imsOrgId={selectedOrganization?.code} />}
+      {returnFields?.[ReturnCredentialDetails]?.children.map(({ type }, index) => {
+        const Component = COMPONENT_MAP[type?.name];
+        return Component ? <Component key={index} val={returnCompDetails[type?.name]} /> : null;
+      })}
     </div>
-  )
-}
+  );
+};
 
 export { ReturnCredentialDetails };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js
index 10264695ca..4aabb3ecee 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnOrganizationName.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnOrganizationName = ({ returnOrganizationName, organization }) => {
+const ReturnOrganizationName = ({ val: { heading, organization } }) => {
   return (
-    <ShowCard heading={returnOrganizationName?.heading} value={organization} isOraganization />
+    heading && <ShowCard heading={heading} value={organization} isOraganization />
   )
 }
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnScopes.js b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnScopes.js
index f0a6ea6302..20ea8d858b 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnScopes.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/Return/ReturnScopes.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ShowCard from '../Card/ShowCard';
 
-const ReturnScopes = ({ returnScopes }) => {
+const ReturnScopes = ({ val: { heading, scope } }) => {
   return (
-    <ShowCard heading={returnScopes?.heading} value={returnScopes?.scope} />
+    heading && <ShowCard heading={heading} value={scope} />
   )
 }