--Made product name as dynamically

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

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" />

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;

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} />
  </>
  );
 };

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}/>
  </>
  );
 };

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} />
  </>
  );
 };

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} />
  </>
  );
 };

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>

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]} />
  }
  };
 

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 (