From bf050b95086cdee71c929d9d6fe1a65d21324f07 Mon Sep 17 00:00:00 2001
From: BaskarMitrah <mit44186@adobe.com>
Date: Wed, 24 Jul 2024 16:47:16 +0530
Subject: [PATCH] --Made product name as dynamically

---
 example/src/pages/credential/GetCredentialApiKey.js  |  8 ++++----
 .../src/pages/credential/GetCredentialOAuthS2s.js    |  3 ++-
 .../OrganizationAccessDetailsEdgeCase.js             |  9 ++++-----
 .../OrganizationAccessDetailsNoProduct.js            |  4 ++--
 .../OrganizationAccessDetailsNotMember.js            |  4 ++--
 .../OrganizationAccessDetailsNotSignUp.js            |  4 ++--
 .../OrganizationAccessDetailsType1User.js            |  4 ++--
 .../GetCredential/RequestAccess/RequestAccess.js     |  4 ++--
 .../RequestAccess/RestrictedAccessFields.js          | 12 ++++++------
 .../src/components/GetCredential/index.js            | 10 +++++-----
 10 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/example/src/pages/credential/GetCredentialApiKey.js b/example/src/pages/credential/GetCredentialApiKey.js
index aeeccc0f3a..61bd0f8863 100644
--- a/example/src/pages/credential/GetCredentialApiKey.js
+++ b/example/src/pages/credential/GetCredentialApiKey.js
@@ -4,7 +4,7 @@ import creativeCloud from "../../pages/creative_cloud/images/cc-icon.png";
 
 const GetCredentialApiKey = () => {
   return (
-    <GetCredential className="getCredentialContainer" templateId="664e39607dcc7c0e5a4a035b" >
+    <GetCredential className="getCredentialContainer" templateId="664e39607dcc7c0e5a4a035b" productName="Express Embed SDK" >
 
       <GetCredential.SignIn title="Get credentials" paragraph="Create unique credentials that you will use to call multiple APIs from your application." buttonText="Sign in to create credentials" />
 
@@ -102,9 +102,9 @@ const GetCredentialApiKey = () => {
         paragraph="Create unique credentials that you will use to call multiple APIs from your application."
       >
         <GetCredential.RequestAccess.EdgeCase>
-          <GetCredential.RequestAccess.EdgeCase.NoProduct title="Your organization does not have access to Firefly Services" buttonLabel="Contact us to learn more" buttonLink="#someLink" />
-          <GetCredential.RequestAccess.EdgeCase.NotMember title="Access to Firefly Services APIs is not available at this time." buttonLabel="Learn more about Firefly Services" buttonLink="#someLink" />
-          <GetCredential.RequestAccess.EdgeCase.NotSignUp title="Firefly Services APIs is available as part of the beta program. Sign up for the program or log in to an account that has access." buttonLabel="Sign up for the beta" buttonLink="#someLink" />
+          <GetCredential.RequestAccess.EdgeCase.NoProduct title="Your organization does not have access to Express Embed SDK" buttonLabel="Contact us to learn more" buttonLink="#someLink" />
+          <GetCredential.RequestAccess.EdgeCase.NotMember title="Access to Express Embed SDK APIs is not available at this time." buttonLabel="Learn more about Express Embed SDK" buttonLink="#someLink" />
+          <GetCredential.RequestAccess.EdgeCase.NotSignUp title="Express Embed SDK APIs is available as part of the beta program. Sign up for the program or log in to an account that has access." buttonLabel="Sign up for the beta" buttonLink="#someLink" />
         </GetCredential.RequestAccess.EdgeCase>
 
         <GetCredential.RequestAccess.RestrictedAccess
diff --git a/example/src/pages/credential/GetCredentialOAuthS2s.js b/example/src/pages/credential/GetCredentialOAuthS2s.js
index 0e26a26b83..c4aa040e35 100644
--- a/example/src/pages/credential/GetCredentialOAuthS2s.js
+++ b/example/src/pages/credential/GetCredentialOAuthS2s.js
@@ -6,7 +6,7 @@ import ps from "./images/ps.png";
 const GetCredentialOAuthS2s = () => {
   return (
 
-    <GetCredential className="getCredentialContainer" templateId="66576a0de3cedc3a36fc9f28" >
+    <GetCredential className="getCredentialContainer" templateId="66576a0de3cedc3a36fc9f28" productName="Firefly Services">
 
       <GetCredential.SignIn title="Get credentials" paragraph="Create unique credentials that you will use to call multiple APIs from your application." buttonText="Sign in to create credentials" />
 
@@ -17,6 +17,7 @@ const GetCredentialOAuthS2s = () => {
         <GetCredential.Form.Products label="Included products and services">
           <GetCredential.Form.Product label="Firefly - Firefly Services" icon={firefly} />
           <GetCredential.Form.Product label="Adobe Photoshop - Firefly Services" icon={ps} />
+          <GetCredential.Form.Product label="Firefly - Firefly Services" icon={firefly} />
         </GetCredential.Form.Products>
 
         <GetCredential.Form.AdobeDeveloperConsole label='By checking this box, you agree to' linkText="Adobe Developer Terms of Use" href="https://wwwimages2.adobe.com/content/dam/cc/en/legal/servicetou/Adobe-Developer-Additional-Terms_en-US_20230822.pdf" />
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsEdgeCase.js b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsEdgeCase.js
index 85c3d7700b..c59e519fe7 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsEdgeCase.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsEdgeCase.js
@@ -1,12 +1,12 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { css } from '@emotion/react';
-import { Button } from '@adobe/react-spectrum';
+import { Button } from "../../Button";
 import { Organization } from '../Organization';
 
 import GetCredentialContext from '../GetCredentialContext';
 import Context from '../../Context';
 
-const OrganizationAccessDetailsEdgeCase = ({ content, isNoProduct }) => {
+const OrganizationAccessDetailsEdgeCase = ({ content, isNoProduct, productName }) => {
   const { selectedOrganization } = useContext(GetCredentialContext);
   const { ims } = useContext(Context);
 
@@ -50,8 +50,7 @@ const OrganizationAccessDetailsEdgeCase = ({ content, isNoProduct }) => {
                 </span>
                 ]
               </>}
-            currently does not have access to these APIs Contact us to learn more about Firefly
-            Services APIs and how to get a free trial.
+            currently does not have access to these APIs Contact us to learn more about {productName} APIs and how to get a free trial.
             <span
               css={css`
               margin-left: 3px;
@@ -81,7 +80,7 @@ const OrganizationAccessDetailsEdgeCase = ({ content, isNoProduct }) => {
               <> organization [<span className="spectrum-Heading spectrum-Heading--sizeXXS">
                 {selectedOrganization.name}</span>]
               </>}
-            and can not access Firefly Services APIs.
+            and can not access {productName} APIs.
             <span
               css={css`
               margin-left: 3px;
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNoProduct.js b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNoProduct.js
index 88600cb273..ff0329356e 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNoProduct.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNoProduct.js
@@ -1,11 +1,11 @@
 import React from "react";
 import { OrganizationAccessDetailsEdgeCase } from "./OrganizationAccessDetailsEdgeCase";
 
-const OrganizationAccessDetailsNoProduct = ({content}) => {
+const OrganizationAccessDetailsNoProduct = ({ content, productName }) => {
 
   return (
     <>
-      <OrganizationAccessDetailsEdgeCase content={content} isNoProduct={true} />
+      <OrganizationAccessDetailsEdgeCase content={content} isNoProduct={true} productName={productName} />
     </>
   );
 };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNotMember.js b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNotMember.js
index d36fa21b15..46831b8d65 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNotMember.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNotMember.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { OrganizationAccessDetailsEdgeCase } from './OrganizationAccessDetailsEdgeCase';
 
-const OrganizationAccessDetailsNotMember = ({content}) => {
+const OrganizationAccessDetailsNotMember = ({content , productName}) => {
 
   return (
     <>
-      <OrganizationAccessDetailsEdgeCase content={content} />
+      <OrganizationAccessDetailsEdgeCase content={content}  productName={productName}/>
     </>
   );
 };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNotSignUp.js b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNotSignUp.js
index e0e2ffee8e..9d0df0cd04 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNotSignUp.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsNotSignUp.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { OrganizationAccessDetailsEdgeCase } from './OrganizationAccessDetailsEdgeCase';
 
-const OrganizationAccessDetailsNotSignUp = ({ content }) => {
+const OrganizationAccessDetailsNotSignUp = ({ content, productName }) => {
   return (
     <>
-      <OrganizationAccessDetailsEdgeCase content={content} isNotSignUp={true}/>
+      <OrganizationAccessDetailsEdgeCase content={content} isNotSignUp={true} productName={productName} />
     </>
   );
 };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsType1User.js b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsType1User.js
index 06c954f89d..b614a83af1 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsType1User.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/OrganizationAccessDetailsType1User.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { OrganizationAccessDetailsEdgeCase } from './OrganizationAccessDetailsEdgeCase';
 
-const OrganizationAccessDetailsType1User = ({content}) => {
+const OrganizationAccessDetailsType1User = ({content,productName}) => {
   return (
     <>
-      <OrganizationAccessDetailsEdgeCase content={content} />
+      <OrganizationAccessDetailsEdgeCase content={content} productName={productName} />
     </>
   );
 };
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/RequestAccess.js b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/RequestAccess.js
index 77267f3f5f..3d9753a0d9 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/RequestAccess.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/RequestAccess.js
@@ -7,7 +7,7 @@ import { RequestAccessSide } from './RequestAccessSide';
 import GetCredentialContext from '../GetCredentialContext';
 import { OrganizationAccessDetailsEdgeCase } from './OrganizationAccessDetailsEdgeCase';
 
-const RequestAccess = ({}) => {
+const RequestAccess = ({ productName }) => {
   const { getCredentialData } = useContext(GetCredentialContext);
 
   const requestAccess = getCredentialData?.[RequestAccess];
@@ -65,7 +65,7 @@ const RequestAccess = ({}) => {
               flex-direction: column;
             }
           `}>
-          {restrictedAccess && <RestrictedAccess restrictedAccess={restrictedAccess} organizationAccessDetailsEdgeCase={organizationAccessDetailsEdgeCase} />}
+          {restrictedAccess && <RestrictedAccess productName={productName} restrictedAccess={restrictedAccess} organizationAccessDetailsEdgeCase={organizationAccessDetailsEdgeCase} />}
           {side && <RequestAccessSide side={side} />}
         </div>
       </div>
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/RestrictedAccessFields.js b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/RestrictedAccessFields.js
index 0945947151..a8edf3c75b 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/RestrictedAccessFields.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/RequestAccess/RestrictedAccessFields.js
@@ -9,7 +9,7 @@ import { OrganizationAccessDetailsNotMember } from "./OrganizationAccessDetailsN
 import { OrganizationAccessDetailsNotSignUp } from "./OrganizationAccessDetailsNotSignUp";
 import GetCredentialContext from "../GetCredentialContext";
 
-const RestrictedAccess = ({ restrictedAccess, organizationAccessDetailsEdgeCase }) => {
+const RestrictedAccess = ({ restrictedAccess, organizationAccessDetailsEdgeCase , productName}) => {
   let products = restrictedAccess?.children?.props;
   let childProps = {};
   const { selectedOrganization, template } = useContext(GetCredentialContext);
@@ -23,19 +23,19 @@ const RestrictedAccess = ({ restrictedAccess, organizationAccessDetailsEdgeCase
 
   const render = () => {
     if (selectedOrganization?.type === "developer" && childProps[OrganizationAccessDetailsType1User]) {
-      return <OrganizationAccessDetailsType1User content={childProps[OrganizationAccessDetailsType1User]} />
+      return <OrganizationAccessDetailsType1User productName={productName} content={childProps[OrganizationAccessDetailsType1User]} />
     }
     else if (disEntitledReason === "USER_MISSING_PUBLIC_BETA") {
-      return <OrganizationAccessDetailsNotSignUp content={childProps[OrganizationAccessDetailsNotSignUp]} />
+      return <OrganizationAccessDetailsNotSignUp productName={productName} content={childProps[OrganizationAccessDetailsNotSignUp]} />
     }
     else if (disEntitledReason === "ORG_MISSING_FIS") {
-      return <OrganizationAccessDetailsNoProduct content={childProps[OrganizationAccessDetailsNoProduct]} />
+      return <OrganizationAccessDetailsNoProduct productName={productName} content={childProps[OrganizationAccessDetailsNoProduct]} />
     }
     else if (template?.canRequestAccess) {
-      return <OrganizationAccessDetails restrictedAccess={restrictedAccess} products={products} />
+      return <OrganizationAccessDetails productName={productName} restrictedAccess={restrictedAccess} products={products} />
     }
     else {
-      return <OrganizationAccessDetailsNotMember content={childProps[OrganizationAccessDetailsNotMember]} />
+      return <OrganizationAccessDetailsNotMember productName={productName} content={childProps[OrganizationAccessDetailsNotMember]} />
     }
   };
 
diff --git a/packages/gatsby-theme-aio/src/components/GetCredential/index.js b/packages/gatsby-theme-aio/src/components/GetCredential/index.js
index 8887c613be..39cff159af 100644
--- a/packages/gatsby-theme-aio/src/components/GetCredential/index.js
+++ b/packages/gatsby-theme-aio/src/components/GetCredential/index.js
@@ -57,7 +57,7 @@ import { getOrganizations } from './Service';
 
 const LocalStorageKey = 'OrgInfo';
 
-const GetCredential = ({ templateId, children, className }) => {
+const GetCredential = ({ templateId, productName = "Firefly Service", children, className }) => {
   const isBrowser = typeof window !== "undefined";
   const [isPrevious, setIsPrevious] = useState(false);
   const [selectedOrganization, setOrganization] = useState(undefined);
@@ -159,8 +159,8 @@ const GetCredential = ({ templateId, children, className }) => {
     // set the org in local storage
     localStorage.setItem(LocalStorageKey, JSON.stringify(org));
     setOrganization(org);
-    setFormData(pre=>{
-      return {...pre, Agree:false}
+    setFormData(pre => {
+      return { ...pre, Agree: false }
     })
   }
 
@@ -263,7 +263,7 @@ const GetCredential = ({ templateId, children, className }) => {
 
     // template should never be null or undefined here
     if (!template.userEntitled || !template.orgEntitled) {
-      return <RequestAccess />
+      return <RequestAccess productName={productName} />
     }
 
     if (isPrevious && !showCreateForm && !isCreateNewCredential) {
@@ -280,7 +280,7 @@ const GetCredential = ({ templateId, children, className }) => {
       formData={formData}
       setFormData={setFormData}
     />
-    
+
   }
 
   return (