diff --git a/src/custom/CatalogDetail/RelatedDesigns.tsx b/src/custom/CatalogDetail/RelatedDesigns.tsx index a3bc3ba0..00396b50 100644 --- a/src/custom/CatalogDetail/RelatedDesigns.tsx +++ b/src/custom/CatalogDetail/RelatedDesigns.tsx @@ -1,6 +1,6 @@ import { CatalogCardDesignLogo } from '../CustomCatalog'; import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard'; -import { formatToTitleCase } from './helper'; +import { getHeadingText } from './helper'; import { AdditionalContainer, ContentHeading, DesignCardContainer } from './style'; import { UserProfile } from './types'; @@ -41,9 +41,7 @@ const RelatedDesigns: React.FC = ({

- Other {type.toLowerCase() == 'my-designs' ? 'public' : 'published'} design by{' '} - {formatToTitleCase(userProfile?.first_name ?? '')}{' '} - {fetchingOrgError ? '' : `under ${organizationName}`} + {getHeadingText({ type, userProfile, organizationName, fetchingOrgError })}

diff --git a/src/custom/CatalogDetail/helper.ts b/src/custom/CatalogDetail/helper.ts index b43477bf..27234717 100644 --- a/src/custom/CatalogDetail/helper.ts +++ b/src/custom/CatalogDetail/helper.ts @@ -61,3 +61,25 @@ export const formatDate = (date: Date) => { const formattedDate = new Date(date).toLocaleDateString('en-US', options); return formattedDate; }; + +interface HeadingProps { + type: string; + userProfile?: { + first_name?: string; + }; + organizationName?: string; + fetchingOrgError: boolean; +} + +export const getHeadingText = ({ + type, + userProfile, + organizationName, + fetchingOrgError +}: HeadingProps): string => { + const designType = type.toLowerCase() === 'my-designs' ? 'public' : 'published'; + const firstName = formatToTitleCase(userProfile?.first_name ?? ''); + const orgText = fetchingOrgError ? '' : `under ${organizationName}`; + + return `Other ${designType} design by ${firstName} ${orgText}`; +};