@learncard/react 2.10.3 → 2.10.4

package/src/components/MeritBadgeDisplayCard/MeritBadgeDisplayCard.tsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { VC, Profile, VerificationItem } from '@learncard/types';
+import {
+    BoostAchievementCredential,
+    LCCategoryEnum,
+    MediaMetadata,
+    VideoMetadata,
+} from '../../types';
+import MeritBadgeFrontFace from './MeritBadgeFrontFace';
+import MeritBadgeBackFace from './MeritBadgeBackFace';
+import FatArrow from '../svgs/FatArrow';
+import ThreeDots from '../../assets/images/DotsThreeOutline.svg';
+import { KnownDIDRegistryType } from '../../types';
+import { VerifierState } from '../CertificateDisplayCard/VerifierStateBadgeAndText';
+
+type MeritBadgeDisplayCardProps = {
+    credential: VC | BoostAchievementCredential;
+    categoryType?: LCCategoryEnum;
+    verificationItems: VerificationItem[];
+    issuerOverride?: Profile;
+    issueeOverride?: Profile;
+    knownDIDRegistry?: KnownDIDRegistryType;
+    subjectImageComponent?: React.ReactNode;
+    issuerImageComponent?: React.ReactNode;
+    customBodyCardComponent?: React.ReactNode;
+    hideIssueDate?: boolean;
+    customSkillsComponent?: React.ReactNode;
+
+    getFileMetadata?: (url: string) => MediaMetadata;
+    getVideoMetadata?: (url: string) => VideoMetadata;
+    onMediaAttachmentClick?: (url: string, type: 'photo' | 'document' | 'video' | 'link') => void;
+    enableLightbox?: boolean;
+
+    handleXClick?: () => void;
+    onDotsClick?: () => void;
+    isFrontOverride?: boolean;
+    setIsFrontOverride?: (value: boolean) => void;
+    hideNavButtons?: boolean;
+    showBackButton?: boolean;
+    showDetailsBtn?: boolean;
+    formattedDisplayType?: string;
+    customLinkedCredentialsComponent?: React.ReactNode;
+    customBodyContentSlot?: React.ReactNode;
+    unknownVerifierTitle?: string;
+    hideFrontFaceDetails?: boolean;
+    onVerifierClick?: (
+        event: React.MouseEvent<HTMLButtonElement>,
+        verifierState: VerifierState
+    ) => void;
+};
+
+export const MeritBadgeDisplayCard: React.FC<MeritBadgeDisplayCardProps> = ({
+    credential,
+    categoryType,
+    verificationItems,
+    issuerOverride,
+    issueeOverride,
+    subjectImageComponent,
+    issuerImageComponent,
+    customBodyCardComponent,
+    knownDIDRegistry,
+    hideIssueDate,
+    customSkillsComponent,
+
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox,
+
+    handleXClick,
+    onDotsClick,
+    isFrontOverride,
+    setIsFrontOverride,
+    hideNavButtons,
+    showBackButton = false,
+    showDetailsBtn = false,
+    formattedDisplayType,
+    customLinkedCredentialsComponent,
+    customBodyContentSlot,
+    unknownVerifierTitle,
+    hideFrontFaceDetails,
+    onVerifierClick,
+}) => {
+    const [_isFront, _setIsFront] = useState(isFrontOverride ?? true);
+
+    const isFront = isFrontOverride ?? _isFront;
+    const setIsFront = setIsFrontOverride ?? _setIsFront;
+
+    return (
+        <section className="w-full flex flex-col gap-[15px] items-center justify-center relative min-w-[220px]">
+            <section className="max-w-[350px] w-full">
+                {isFront && (
+                    <MeritBadgeFrontFace
+                        credential={credential}
+                        categoryType={categoryType}
+                        issuerOverride={issuerOverride}
+                        issueeOverride={issueeOverride}
+                        knownDIDRegistry={knownDIDRegistry}
+                        subjectImageComponent={subjectImageComponent}
+                        issuerImageComponent={issuerImageComponent}
+                        customBodyCardComponent={customBodyCardComponent}
+                        hideIssueDate={hideIssueDate}
+                        handleViewBackFace={() => setIsFront(!isFront)}
+                        isFront={isFront}
+                        showDetailsBtn={showDetailsBtn}
+                        formattedDisplayType={formattedDisplayType}
+                        customBodyContentSlot={customBodyContentSlot}
+                        unknownVerifierTitle={unknownVerifierTitle}
+                        hideFrontFaceDetails={hideFrontFaceDetails}
+                        onVerifierClick={onVerifierClick}
+                    />
+                )}
+
+                {!isFront && (
+                    <MeritBadgeBackFace
+                        credential={credential}
+                        categoryType={categoryType}
+                        verificationItems={verificationItems}
+                        getFileMetadata={getFileMetadata}
+                        getVideoMetadata={getVideoMetadata}
+                        onMediaAttachmentClick={onMediaAttachmentClick}
+                        enableLightbox={enableLightbox}
+                        showBackButton={(showBackButton && !hideNavButtons) || showDetailsBtn}
+                        handleViewFrontFace={() => setIsFront(!isFront)}
+                        customLinkedCredentialsComponent={customLinkedCredentialsComponent}
+                    />
+                )}
+
+                {onDotsClick && (
+                    <button
+                        className="absolute right-[-20px] top-[-52px] bg-white rounded-full p-[10px] shadow-bottom"
+                        onClick={onDotsClick}
+                    >
+                        <img
+                            alt="Menu dropdown icon"
+                            className="h-[20px] w-[20px]"
+                            src={ThreeDots}
+                        />
+                    </button>
+                )}
+            </section>
+
+            {!hideNavButtons && (
+                <div className="flex gap-[10px] font-mouse text-[30px] leading-[28px] tracking-[0.75px] relative top-[-10px] left-0 w-full">
+                    {!isFront && (
+                        <button
+                            className="bg-grayscale-900 text-white py-[15px] px-[20px] rounded-[20px] flex mx-auto justify-center items-center gap-[5px] border-[3px] border-solid border-white"
+                            onClick={() => setIsFront(!isFront)}
+                        >
+                            <FatArrow direction="left" /> Back
+                        </button>
+                    )}
+
+                    {handleXClick && (
+                        <button
+                            onClick={handleXClick}
+                            className="bg-white text-grayscale-900 rounded-[20px] py-[15px] px-[20px] grow"
+                        >
+                            Close
+                        </button>
+                    )}
+
+                    {isFront && (
+                        <button
+                            className="bg-grayscale-900 text-white py-[15px] px-[20px] rounded-[20px] mx-auto flex justify-center items-center gap-[5px] border-[3px] border-solid border-white"
+                            onClick={() => setIsFront(!isFront)}
+                        >
+                            Details <FatArrow direction="right" />
+                        </button>
+                    )}
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default MeritBadgeDisplayCard;

package/src/components/MeritBadgeDisplayCard/MeritBadgeFrontFace.tsx

@@ -0,0 +1,292 @@
+import React from 'react';
+
+import MeritBadgeCornerIcon from './MeritBadgeCornerIcon';
+import MeritBadgeImageDisplay from './MeritBadgeImageDisplay';
+import MeritBadgeSkillsCount from './MeritBadgeSkillsCount';
+import MeritBadgeProfileImageDisplay from './MeritBadgeProfileImageDisplay';
+
+import Line from '../svgs/Line';
+
+import {
+    getInfoFromCredential,
+    getImageFromProfile,
+    getCategoryLightColor,
+    getCategoryDarkColor,
+} from '../../helpers/credential.helpers';
+import { isAppDidWeb } from '@learncard/helpers';
+import { resolveProfileDisplay } from '../../helpers/did-display.helpers';
+
+import { VC, Profile } from '@learncard/types';
+import { BoostAchievementCredential, LCCategoryEnum } from '../../types';
+import VerifierStateBadgeAndText, {
+    VerifierState,
+    VERIFIER_STATES,
+} from '../CertificateDisplayCard/VerifierStateBadgeAndText';
+import { KnownDIDRegistryType } from '../../types';
+
+type MeritBadgeFrontFaceProps = {
+    isFront?: boolean;
+    credential: VC | BoostAchievementCredential;
+    categoryType?: LCCategoryEnum;
+    issuerOverride?: Profile;
+    issueeOverride?: Profile;
+    knownDIDRegistry?: KnownDIDRegistryType;
+    subjectImageComponent?: React.ReactNode;
+    issuerImageComponent?: React.ReactNode;
+    customBodyCardComponent?: React.ReactNode;
+    hideIssueDate?: boolean;
+    handleViewBackFace?: () => void;
+    showDetailsBtn?: boolean;
+    formattedDisplayType?: string;
+    customBodyContentSlot?: React.ReactNode;
+    unknownVerifierTitle?: string;
+    hideFrontFaceDetails?: boolean;
+    onVerifierClick?: (
+        event: React.MouseEvent<HTMLButtonElement>,
+        verifierState: VerifierState
+    ) => void;
+};
+
+export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
+    isFront,
+    credential,
+    categoryType,
+    issuerOverride,
+    issueeOverride,
+    knownDIDRegistry,
+    subjectImageComponent,
+    issuerImageComponent,
+    customBodyCardComponent,
+    hideIssueDate,
+    handleViewBackFace,
+    showDetailsBtn = false,
+    formattedDisplayType,
+    customBodyContentSlot,
+    unknownVerifierTitle,
+    hideFrontFaceDetails,
+    onVerifierClick,
+}) => {
+    const {
+        title = '',
+        createdAt,
+        issuer: _issuer = '',
+        issuee: _issuee = '',
+        credentialSubject,
+        imageUrl,
+    } = getInfoFromCredential(credential, 'MMM dd, yyyy', { uppercaseDate: false });
+
+    const issuee = issueeOverride || _issuee;
+    const issuer = issuerOverride || _issuer;
+
+    const { description } = credentialSubject?.achievement ?? {};
+
+    const credentialLightColor = getCategoryLightColor(categoryType); // 500
+    const credentialDarkColor = getCategoryDarkColor(categoryType); // 700
+
+    let categoryTitle: string | undefined = categoryType;
+
+    let textLightColor = `text-${credentialLightColor}`;
+    let textDarkColor = `text-${credentialDarkColor}`;
+    let borderColor = `border-${credentialLightColor}`;
+
+    if (categoryType === LCCategoryEnum.accommodations) {
+        textLightColor = 'text-violet-500';
+        textDarkColor = 'text-violet-700';
+        borderColor = 'border-violet-500';
+    } else if (categoryType === LCCategoryEnum.accomplishments) {
+        textLightColor = 'text-yellow-500';
+        textDarkColor = 'text-yellow-700';
+        borderColor = 'border-yellow-500';
+        categoryTitle = 'Portfolio';
+    } else if (categoryType === LCCategoryEnum.learningHistory) {
+        categoryTitle = 'Study';
+    } else if (categoryType === LCCategoryEnum.workHistory) {
+        categoryTitle = 'Experiences';
+        textLightColor = 'text-cyan-500';
+        textDarkColor = 'text-cyan-700';
+        borderColor = 'border-cyan-500';
+    }
+
+    const issueeDisplay = resolveProfileDisplay(issuee, '');
+    const issuerDisplay = resolveProfileDisplay(issuer, 'Unknown');
+
+    const issuerName = issuerDisplay.displayName;
+    const issueeName = issueeDisplay.displayName;
+    const issuerImage = getImageFromProfile(issuer ?? '');
+    const issueeImage = getImageFromProfile(issuee ?? '');
+
+    const issuerDid =
+        typeof credential.issuer === 'string' ? credential.issuer : credential.issuer.id;
+    const isAppIssuerDid = isAppDidWeb(issuerDid);
+
+    let verifierState: VerifierState;
+    if (credentialSubject?.id === issuerDid && issuerDid && issuerDid !== 'did:example:123') {
+        verifierState = VERIFIER_STATES.selfVerified;
+    } else if (unknownVerifierTitle) {
+        verifierState = VERIFIER_STATES.trustedVerifier;
+    } else {
+        if (knownDIDRegistry?.source === 'trusted') {
+            verifierState = VERIFIER_STATES.trustedVerifier;
+        } else if (knownDIDRegistry?.source === 'untrusted') {
+            verifierState = VERIFIER_STATES.untrustedVerifier;
+        } else if (knownDIDRegistry?.source === 'unknown') {
+            verifierState = isAppIssuerDid
+                ? VERIFIER_STATES.appIssuer
+                : VERIFIER_STATES.unknownVerifier;
+        } else {
+            verifierState = isAppIssuerDid
+                ? VERIFIER_STATES.appIssuer
+                : VERIFIER_STATES.unknownVerifier;
+        }
+    }
+    const isSelfVerified = verifierState === VERIFIER_STATES.selfVerified;
+
+    return (
+        <section
+            role="button"
+            onClick={() => handleViewBackFace?.()}
+            className="relative p-[13px] mt-[68px] bg-white border-[5px] rounded-[30px] border-soid border-grayscale-200 min-w-[295px]"
+        >
+            <div className="w-[calc(100%-26px)] absolute top-[-72px]">
+                <MeritBadgeImageDisplay
+                    imageUrl={imageUrl ?? ''}
+                    className={`mx-auto ${textLightColor}`}
+                />
+            </div>
+
+            <div
+                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[19px] border-solid border-[4px] ${borderColor} rounded-[30px]`}
+            >
+                <div className="flex flex-col gap-[5px] w-full">
+                    <div className="flex flex-col items-center text-grayscale-900">
+                        {issueeName && (
+                            <>
+                                <span className="flex flex-wrap items-baseline justify-center gap-1 text-[16px] leading-[150%] font-jacques max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
+                                    {!issueeDisplay.isMissing && issueeDisplay.isDidValue ? (
+                                        <>
+                                            <span className="text-grayscale-900">Digital ID:</span>
+                                            <span className="text-grayscale-600 underline">
+                                                {issueeDisplay.displayName}
+                                            </span>
+                                        </>
+                                    ) : (
+                                        issueeName
+                                    )}
+                                </span>
+                                <span className="text-[14px] leading-[150%] font-jacques">
+                                    has met the requirements for
+                                </span>
+                            </>
+                        )}
+                    </div>
+                    <div className="flex flex-col items-center">
+                        <h1 className="text-grayscale-900 text-center text-[25px] font-jacques w-full">
+                            {title}
+                        </h1>
+                        <div
+                            className={`${textLightColor} uppercase text-[14px] font-notoSans font-[600]`}
+                        >
+                            {formattedDisplayType}
+                        </div>
+                    </div>
+                </div>
+                {customBodyCardComponent}
+                {!customBodyCardComponent && (
+                    <MeritBadgeProfileImageDisplay
+                        imageUrl={issueeImage}
+                        imageComponent={subjectImageComponent}
+                        className={`flex justify-center items-center ${textDarkColor}`}
+                        userName={issueeName}
+                        avatarColor={issueeDisplay.avatarColor}
+                        avatarFingerprintColor={issueeDisplay.avatarFingerprintColor}
+                        avatarFallbackVariant={issueeDisplay.isDidValue ? 'fingerprint' : 'initial'}
+                    />
+                )}
+                <div className="flex flex-col w-full">
+                    <div className="text-[14px] text-grayscale-900 flex flex-col items-center w-full mb-[10px]">
+                        <span className="font-jacques flex gap-[5px] items-center w-full overflow-ellipsis whitespace-nowrap overflow-hidden justify-center">
+                            {issueeName === '0 person' ? (
+                                'Not yet awarded'
+                            ) : (
+                                <>Awarded on {createdAt} by</>
+                            )}
+                        </span>
+                    </div>
+
+                    {/* <div className="flex flex-col gap-[10px] items-center">
+                    <MeritBadgeSkillsCount
+                        skills={credential?.skills ?? []}
+                        onClick={handleViewBackFace}
+                    />
+
+                    {isFront && showDetailsBtn && (
+                        <button
+                            type="button"
+                            className="vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[25px] w-fit select-none"
+                            onClick={() => handleViewBackFace?.()}
+                        >
+                            Details
+                        </button>
+                    )}
+                    </div> */}
+
+                    <div className="flex flex-col gap-[5px] items-center w-full">
+                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b-[1px] border-solid border-grayscale-200 w-full text-center line-clamp-2 break-words scrollbar-hide">
+                            {issuerDisplay.isDidValue ? (
+                                <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] w-full text-center line-clamp-2 break-words">
+                                    <span className="font-[600]">Digital ID:</span>
+                                    <span className="text-grayscale-600">{issuerName}</span>
+                                </span>
+                            ) : (
+                                issuerName
+                            )}
+                        </span>
+
+                        {/* <div className="flex flex-col text-[12px] text-grayscale-900 items-center">
+                            <span className="font-jacques">Troop Leader, Troop 1142</span>
+                            <span className="font-jacques">Boy Scouts of America</span>
+                        </div> */}
+                    </div>
+                </div>
+                <MeritBadgeProfileImageDisplay
+                    imageUrl={issuerImage}
+                    userName={issuerDisplay.isMissing ? '' : issuerName}
+                    imageComponent={issuerImageComponent}
+                    className={`w-[calc(100%-26px)] flex justify-center items-center ${textLightColor}`}
+                    size="small"
+                    showSeal
+                    avatarColor={issuerDisplay.avatarColor}
+                    avatarFingerprintColor={issuerDisplay.avatarFingerprintColor}
+                    avatarFallbackVariant={issuerDisplay.isDidValue ? 'fingerprint' : 'initial'}
+                />
+                {customBodyContentSlot && customBodyContentSlot}
+                <div className={`${textLightColor} uppercase text-[14px] font-notoSans font-[600]`}>
+                    {categoryTitle}
+                </div>
+            </div>
+
+            {categoryType && (
+                <>
+                    <MeritBadgeCornerIcon categoryType={categoryType} position="top-left" />
+                    <MeritBadgeCornerIcon categoryType={categoryType} position="top-right" />
+                    <MeritBadgeCornerIcon categoryType={categoryType} position="bottom-left" />
+                    <MeritBadgeCornerIcon categoryType={categoryType} position="bottom-right" />
+                </>
+            )}
+
+            <div className="absolute bottom-0 w-[calc(100%-26px)] flex justify-center">
+                <VerifierStateBadgeAndText
+                    verifierState={verifierState}
+                    unknownVerifierTitle={unknownVerifierTitle}
+                    className="bg-white px-[5px] pb-[5px]"
+                    onClick={event => onVerifierClick?.(event, verifierState)}
+                />
+            </div>
+
+            {/* so that tailwind will put these colors in the css */}
+            <span className="hidden border-rose-500 text-spice-500 border-spice-500 border-cyan-500 text-cyan-500 border-indigo-500 border-sp-purple-base"></span>
+        </section>
+    );
+};
+
+export default MeritBadgeFrontFace;

package/src/components/MeritBadgeDisplayCard/MeritBadgeImageDisplay.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import MeritBadgeRibbon from './MeritBadgeRibbon';
+
+type MeritBadgeImageDisplayProps = {
+    imageUrl: string;
+    className?: string;
+};
+
+const MeritBadgeImageDisplay: React.FC<MeritBadgeImageDisplayProps> = ({
+    imageUrl,
+    className = '',
+}) => {
+    return (
+        <div
+            className={`flex items-center justify-center w-[176px] h-[176px] rounded-full bg-white z-50 ${className}`}
+        >
+            <MeritBadgeRibbon className="absolute z-[1]" image={imageUrl} />
+        </div>
+    );
+};
+
+export default MeritBadgeImageDisplay;

package/src/components/MeritBadgeDisplayCard/MeritBadgeProfileImageDisplay.test.tsx

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import MeritBadgeProfileImageDisplay from './MeritBadgeProfileImageDisplay';
+
+describe('MeritBadgeProfileImageDisplay', () => {
+    test('uses a 43px silhouette for the issuee badge fallback', () => {
+        const { container } = render(
+            <MeritBadgeProfileImageDisplay size="big" userName="" imageUrl="" />
+        );
+
+        const silhouette = container.querySelector('svg');
+
+        expect(silhouette).not.toBeNull();
+        expect(silhouette?.classList.contains('h-[43px]')).toBe(true);
+        expect(silhouette?.classList.contains('w-[43px]')).toBe(true);
+    });
+
+    test('uses a 43px fingerprint for the issuee badge fallback', () => {
+        const { container } = render(
+            <MeritBadgeProfileImageDisplay
+                size="big"
+                userName=""
+                imageUrl=""
+                avatarFallbackVariant="fingerprint"
+            />
+        );
+
+        const fingerprint = container.querySelector('svg');
+
+        expect(fingerprint).not.toBeNull();
+        expect(fingerprint?.classList.contains('h-[43px]')).toBe(true);
+        expect(fingerprint?.classList.contains('w-[43px]')).toBe(true);
+    });
+
+    test('uses a 28px silhouette for the issuer badge fallback', () => {
+        const { container } = render(
+            <MeritBadgeProfileImageDisplay size="small" showSeal userName="" imageUrl="" />
+        );
+
+        const silhouettes = container.querySelectorAll('svg');
+        const silhouette = silhouettes[silhouettes.length - 1];
+
+        expect(silhouette).not.toBeNull();
+        expect(silhouette?.classList.contains('h-[28px]')).toBe(true);
+        expect(silhouette?.classList.contains('w-[28px]')).toBe(true);
+    });
+
+    test('uses a 28px fingerprint for the issuer badge fallback', () => {
+        const { container } = render(
+            <MeritBadgeProfileImageDisplay
+                size="small"
+                showSeal
+                userName=""
+                imageUrl=""
+                avatarFallbackVariant="fingerprint"
+            />
+        );
+
+        const fingerprints = container.querySelectorAll('svg');
+        const fingerprint = fingerprints[fingerprints.length - 1];
+
+        expect(fingerprint).not.toBeNull();
+        expect(fingerprint?.classList.contains('h-[28px]')).toBe(true);
+        expect(fingerprint?.classList.contains('w-[28px]')).toBe(true);
+    });
+});

package/src/components/MeritBadgeDisplayCard/MeritBadgeProfileImageDisplay.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import IssuerSeal from '../svgs/IssuerSeal';
+import { UserProfilePicture } from '../UserProfilePicture';
+
+type MeritBadgeProfileImageDisplayProps = {
+    imageUrl?: string;
+    imageComponent?: React.ReactNode;
+    showSeal?: boolean;
+    className?: string;
+    size?: string;
+    userName?: string;
+    avatarColor?: string;
+    avatarFingerprintColor?: string;
+    avatarFallbackVariant?: 'initial' | 'fingerprint';
+};
+
+const MeritBadgeProfileImageDisplay: React.FC<MeritBadgeProfileImageDisplayProps> = ({
+    imageUrl,
+    showSeal = false,
+    className = '',
+    imageComponent,
+    size = 'big',
+    userName,
+    avatarColor,
+    avatarFingerprintColor,
+    avatarFallbackVariant = 'initial',
+}) => {
+    const imageClassName = `${
+        size === 'big' ? 'h-[60px] w-[60px]' : 'h-[39px] w-[39px]'
+    } rounded-full overflow-hidden border-[2px] border-solid border-grayscale-200`;
+    const silhouetteClassName = size === 'big' ? 'h-[43px] w-[43px]' : 'h-[28px] w-[28px]';
+
+    const profileImage = imageComponent ? (
+        <div className={imageClassName}>{imageComponent}</div>
+    ) : (
+        <UserProfilePicture
+            customContainerClass={imageClassName}
+            customImageClass="h-full w-full object-cover bg-white"
+            user={{ image: imageUrl, name: userName }}
+            avatarColor={avatarColor}
+            avatarFingerprintColor={avatarFingerprintColor}
+            avatarIconClassName={silhouetteClassName}
+            avatarSilhouetteClassName={silhouetteClassName}
+            avatarFallbackVariant={avatarFallbackVariant}
+        />
+    );
+
+    return (
+        <div className={className}>
+            {showSeal && (
+                <div className="relative inline-flex items-center justify-center">
+                    <div className="bg-white rounded-full p-[5px]">
+                        <IssuerSeal size="58" />
+                    </div>
+                    <div className="absolute inset-0 flex items-center justify-center">
+                        {profileImage}
+                    </div>
+                </div>
+            )}
+
+            {!showSeal && profileImage}
+        </div>
+    );
+};
+
+export default MeritBadgeProfileImageDisplay;