@learncard/react 2.10.3 → 2.10.4

package/src/components/VCDisplayCard2/VCDisplayCard2AvatarFallbacks.stories.tsx

@@ -0,0 +1,312 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import VCDisplayCard2 from './VCDisplayCard2';
+import { LCCategoryEnum } from '../../types';
+import { TestVerificationItems } from '../../helpers/test.helpers';
+
+const BASE_VERIFICATION_ITEMS = [
+    TestVerificationItems.SUCCESS.PROOF,
+    TestVerificationItems.SUCCESS.NO_EXPIRATION,
+];
+
+const buildCredential = ({
+    id,
+    issuer,
+    subjectId,
+    title,
+    description,
+    displayType,
+    achievementImage,
+}: {
+    id: string;
+    issuer: any;
+    subjectId?: string;
+    title: string;
+    description: string;
+    displayType?: string;
+    achievementImage?: string;
+}) => ({
+    '@context': ['https://www.w3.org/2018/credentials/v1'],
+    id,
+    type: ['VerifiableCredential', 'OpenBadgeCredential'],
+    issuer,
+    issuanceDate: '2026-04-28T20:05:57.307102174Z',
+    credentialSubject: {
+        ...(subjectId ? { id: subjectId } : {}),
+        type: ['AchievementSubject'],
+        achievement: {
+            type: 'Achievement',
+            name: title,
+            description,
+            image: achievementImage,
+            criteria: {
+                type: 'Criteria',
+                narrative: `${title} criteria`,
+            },
+        },
+    },
+    ...(displayType ? { display: { displayType } } : {}),
+});
+
+const trustedIssuer = {
+    type: 'Profile',
+    id: 'did:key:z6MksNj6FwQ7t7ejgJVXCNyaX655uHJ8mPJ8xLtxrqQDV2Bo',
+    name: 'North Star Academy',
+    image: 'https://picsum.photos/200?1',
+};
+
+const trustedSubject = {
+    type: 'Profile',
+    id: 'did:key:z6Mkqk4j3VnaRf4XHEoU6eT343VTfdfZG23CK6zaf5g5KKju',
+    name: 'Avery Chen',
+    image: 'https://picsum.photos/200?2',
+};
+
+const fingerprintDidSet = {
+    webIssuer: 'did:web:acme.com',
+    keySubjectOne: 'did:key:z6MkpX1aYzR3uN8bQ5cT7vH2jL9mF6sD4',
+    jwkIssuer: 'did:jwk:eyJrdHkiOiJFQyIsImNydiI6IkVkMjU1MTkifQ',
+    keySubjectTwo: 'did:key:z6Mkq4C8nT1pV7xY2dH9jL6sR3wM5aZ8c',
+    peerIssuer: 'did:peer:2bEz6Mkq4C8nT1pV7xY2dH9jL6sR3wM5aZ8c',
+    webSelfIssued: 'did:web:network.learncard.com:users:donny',
+};
+
+const profileChip = (label: string) => (
+    <div className="flex h-full w-full items-center justify-center rounded-full bg-emerald-700 text-white font-semibold text-2xl">
+        {label}
+    </div>
+);
+
+type AvatarFallbackMatrixType = 'badge' | 'certificate' | 'meritBadge';
+
+type VCDisplayCase = {
+    title: string;
+    description: string;
+    props: (matrixType: AvatarFallbackMatrixType) => React.ComponentProps<typeof VCDisplayCard2>;
+};
+
+const matrixTypeConfig: Record<
+    AvatarFallbackMatrixType,
+    {
+        heading: string;
+        displayType: 'badge' | 'certificate' | 'award';
+        categoryType: LCCategoryEnum;
+    }
+> = {
+    badge: {
+        heading: 'Badge avatar fallback matrix',
+        displayType: 'badge',
+        categoryType: LCCategoryEnum.socialBadge,
+    },
+    certificate: {
+        heading: 'Certificate avatar fallback matrix',
+        displayType: 'certificate',
+        categoryType: LCCategoryEnum.achievement,
+    },
+    meritBadge: {
+        heading: 'Merit badge avatar fallback matrix',
+        displayType: 'award',
+        categoryType: LCCategoryEnum.meritBadge,
+    },
+};
+
+const cases: VCDisplayCase[] = [
+    {
+        title: 'Issuer and issuee profile images',
+        description:
+            'Shows the profile image path when both issuer and issuee provide images directly.',
+        props: matrixType => ({
+            credential: buildCredential({
+                id: 'urn:uuid:trusted-profiles',
+                issuer: trustedIssuer,
+                subjectId: trustedSubject.id,
+                title: 'Supported Learning Credential',
+                description: 'A clean baseline with trusted names and custom avatar overrides.',
+                displayType: matrixTypeConfig[matrixType].displayType,
+                achievementImage: 'https://picsum.photos/600/400?1',
+            }) as any,
+            issuerOverride: trustedIssuer as any,
+            issueeOverride: trustedSubject as any,
+            categoryType: matrixTypeConfig[matrixType].categoryType,
+            knownDIDRegistry: { source: 'trusted', results: {} },
+            isFrontOverride: true,
+            verificationItems: BASE_VERIFICATION_ITEMS,
+        }),
+    },
+    {
+        title: 'did:web issuer with no name or image',
+        description:
+            'Uses the readable DID fallback and the icon avatar when profile data is sparse.',
+        props: matrixType => ({
+            credential: buildCredential({
+                id: 'urn:uuid:did-web-issuer',
+                issuer: fingerprintDidSet.webIssuer,
+                subjectId: fingerprintDidSet.keySubjectOne,
+                title: 'Web Issuer Credential',
+                description: 'Issuer data is a DID only, with no display name or image.',
+                displayType: matrixTypeConfig[matrixType].displayType,
+                achievementImage: 'https://picsum.photos/600/400?2',
+            }) as any,
+            categoryType: matrixTypeConfig[matrixType].categoryType,
+            knownDIDRegistry: { source: 'unknown', results: {} },
+            isFrontOverride: true,
+            verificationItems: BASE_VERIFICATION_ITEMS,
+        }),
+    },
+    {
+        title: 'Generic VC path with did:web issuer',
+        description:
+            'Covers the default VCDisplayCard2 front face without certificate or award routing.',
+        props: matrixType => ({
+            credential: buildCredential({
+                id: 'urn:uuid:generic-vc-path',
+                issuer: fingerprintDidSet.jwkIssuer,
+                subjectId: fingerprintDidSet.keySubjectTwo,
+                title: 'Community Credential',
+                description: 'A plain VC layout with DID-only issuer data.',
+                displayType: matrixTypeConfig[matrixType].displayType,
+                achievementImage: 'https://picsum.photos/600/400?6',
+            }) as any,
+            categoryType: matrixTypeConfig[matrixType].categoryType,
+            knownDIDRegistry: { source: 'unknown', results: {} },
+            isFrontOverride: true,
+            verificationItems: BASE_VERIFICATION_ITEMS,
+        }),
+    },
+    {
+        title: 'Blank issuer profile and missing recipient name',
+        description: 'Exercises the friendly Unknown issuer / Unknown recipient labels.',
+        props: matrixType => ({
+            credential: buildCredential({
+                id: 'urn:uuid:blank-profile',
+                issuer: {},
+                title: 'Sparse Credential',
+                description: 'Both sides are missing human-friendly labels.',
+                displayType: matrixTypeConfig[matrixType].displayType,
+                achievementImage: 'https://picsum.photos/600/400?3',
+            }) as any,
+            issuerOverride: {} as any,
+            issueeOverride: {} as any,
+            categoryType: matrixTypeConfig[matrixType].categoryType,
+            knownDIDRegistry: { source: 'untrusted', results: {} },
+            isFrontOverride: true,
+            verificationItems: BASE_VERIFICATION_ITEMS,
+        }),
+    },
+    {
+        title: 'Ticket example did:jwk issuer and did:key subject',
+        description:
+            'Matches the provided shape with a JWK issuer and no human-readable issuer name.',
+        props: matrixType => ({
+            credential: buildCredential({
+                id: 'urn:uuid:875bdcbc-7443-4438-b50d-d1f6bd84b063',
+                issuer: {
+                    id: fingerprintDidSet.peerIssuer,
+                },
+                subjectId: fingerprintDidSet.keySubjectOne,
+                title: 'Bachelor of Science and Arts',
+                description: 'A credential with an issuer DID only and a key-based recipient DID.',
+                displayType: matrixTypeConfig[matrixType].displayType,
+                achievementImage: 'https://picsum.photos/600/400?4',
+            }) as any,
+            categoryType: matrixTypeConfig[matrixType].categoryType,
+            knownDIDRegistry: { source: 'unknown', results: {} },
+            isFrontOverride: true,
+            verificationItems: BASE_VERIFICATION_ITEMS,
+        }),
+    },
+    {
+        title: 'Self-issued did:web credential',
+        description:
+            'Confirms the self-issued path still reads well when the issuer and subject match.',
+        props: matrixType => ({
+            credential: buildCredential({
+                id: 'urn:uuid:self-issued',
+                issuer: fingerprintDidSet.webSelfIssued,
+                subjectId: fingerprintDidSet.webSelfIssued,
+                title: 'Self Issued Credential',
+                description: 'The issuer and subject are the same DID.',
+                displayType: matrixTypeConfig[matrixType].displayType,
+                achievementImage: 'https://picsum.photos/600/400?5',
+            }) as any,
+            categoryType: matrixTypeConfig[matrixType].categoryType,
+            knownDIDRegistry: { source: 'unknown', results: {} },
+            isFrontOverride: true,
+            verificationItems: BASE_VERIFICATION_ITEMS,
+        }),
+    },
+];
+
+const buildMatrixCases = (matrixType: AvatarFallbackMatrixType) =>
+    cases.map(testCase => ({
+        ...testCase,
+        props: testCase.props(matrixType),
+    }));
+
+const AvatarFallbackMatrix: React.FC<{ matrixType: AvatarFallbackMatrixType }> = ({
+    matrixType,
+}) => {
+    const { heading } = matrixTypeConfig[matrixType];
+    const matrixCases = buildMatrixCases(matrixType);
+
+    return (
+        <div className="bg-grayscale-100 min-h-screen p-8">
+            <div className="mx-auto max-w-[1200px] space-y-8">
+                <div className="space-y-2">
+                    <h1 className="text-xl font-semibold text-grayscale-900 font-poppins">
+                        {heading}
+                    </h1>
+                    <p className="text-sm text-grayscale-600 leading-relaxed font-poppins max-w-[720px]">
+                        Use this story to verify issuer and subject visuals stay polished for this
+                        credential type when names, images, or DID shapes are missing or unusual.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-1 gap-10 xl:grid-cols-2">
+                    {matrixCases.map(testCase => (
+                        <section
+                            key={testCase.title}
+                            className="rounded-[28px] bg-white p-6 shadow-[0_18px_50px_rgba(24,34,78,0.12)] space-y-4"
+                        >
+                            <div className="space-y-1">
+                                <h2 className="text-lg font-semibold text-grayscale-900 font-poppins">
+                                    {testCase.title}
+                                </h2>
+                                <p className="text-sm text-grayscale-600 leading-relaxed font-poppins">
+                                    {testCase.description}
+                                </p>
+                            </div>
+
+                            <div className="flex justify-center overflow-x-auto pb-2">
+                                <VCDisplayCard2 {...testCase.props} />
+                            </div>
+                        </section>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default {
+    title: 'VCDisplayCard2/Avatar Fallback Matrix',
+    component: VCDisplayCard2,
+    argTypes: {},
+} as Meta<typeof VCDisplayCard2>;
+
+const Template: Story<{ matrixType: AvatarFallbackMatrixType }> = ({ matrixType }) => (
+    <AvatarFallbackMatrix matrixType={matrixType} />
+);
+
+export const BadgeAvatarFallbackMatrixStory = Template.bind({});
+BadgeAvatarFallbackMatrixStory.args = { matrixType: 'badge' };
+BadgeAvatarFallbackMatrixStory.storyName = 'Badge Matrix';
+
+export const CertificateAvatarFallbackMatrixStory = Template.bind({});
+CertificateAvatarFallbackMatrixStory.args = { matrixType: 'certificate' };
+CertificateAvatarFallbackMatrixStory.storyName = 'Certificate Matrix';
+
+export const MeritBadgeAvatarFallbackMatrixStory = Template.bind({});
+MeritBadgeAvatarFallbackMatrixStory.args = { matrixType: 'meritBadge' };
+MeritBadgeAvatarFallbackMatrixStory.storyName = 'Merit Badge Matrix';

package/src/components/VCDisplayCard2/VCDisplayCardCategoryType.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { getCategoryColor } from '../../helpers/credential.helpers';
+import { LCCategoryEnum } from '../../types';
+
+const VCDisplayCardCategoryType: React.FC<{ categoryType?: LCCategoryEnum }> = ({
+    categoryType = LCCategoryEnum.achievement,
+}) => {
+    const categoryColor = getCategoryColor(categoryType);
+
+    return (
+        <span
+            className={`uppercase font-poppins text-[12px] font-[600] leading-[12px] select-none text-${categoryColor}`}
+        >
+            {categoryType}
+        </span>
+    );
+};
+
+export default VCDisplayCardCategoryType;

package/src/components/VCDisplayCard2/VCDisplayCardSkillsCount.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import PuzzlePiece from '../svgs/PuzzlePiece';
+
+import { categorizeSkills, getTotalCountOfSkills } from '../../helpers/credential.helpers';
+
+export const VCDisplayCardSkillsCount: React.FC<{
+    skills: { category: string; skill: string; subSkills: string[] }[];
+    onClick?: () => void;
+}> = ({ skills, onClick }) => {
+    const skillsCount = getTotalCountOfSkills(skills);
+
+    if (skillsCount === 0) return <></>;
+
+    const skillsMap = categorizeSkills(skills);
+
+    // Calculate total count of skills and subskills
+    const totalSkills: any = Object.values(skillsMap).reduce(
+        (total: any, category: any) => total + category?.length,
+        0
+    );
+    const totalSubskills: any = Object.values(skillsMap).reduce(
+        (total: any, category: any) => total + (category?.totalSubskillsCount || 0),
+        0
+    );
+
+    const total: any = totalSkills + totalSubskills;
+
+    const text: string = skillsCount === 1 ? 'Skill' : 'Skills';
+
+    return (
+        <div
+            className="flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom"
+            onClick={onClick}
+        >
+            <div className="text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold">
+                +{total} {text}{' '}
+                <div className="bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1">
+                    <PuzzlePiece className="text-white" fill="#fff" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default VCDisplayCardSkillsCount;

package/src/components/VCDisplayCard2/VCIDDIsplayCard.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { Flipper, Flipped as UntypedFlipped } from 'react-flip-toolkit';
+
+import VC2BackFace from './VC2BackFace';
+import VCIDDisplayFrontFace from './VCIDDisplayFrontFace';
+
+import {
+    BoostAchievementCredential,
+    IssueHistory,
+    MediaMetadata,
+    VideoMetadata,
+} from '../../types';
+import { VC, VerificationItem } from '@learncard/types';
+import { KnownDIDRegistryType } from '../../types';
+import { VerifierState } from '../CertificateDisplayCard/VerifierStateBadgeAndText';
+
+type FlippedComponentProps = React.PropsWithChildren<{
+    flipId?: string;
+    inverseFlipId?: string;
+    scale?: boolean;
+}>;
+
+const Flipped = UntypedFlipped as unknown as React.FC<FlippedComponentProps>;
+
+export type VCIDDisplayCardProps = {
+    credential: VC | BoostAchievementCredential;
+    verificationItems: VerificationItem[];
+    getFileMetadata?: (url: string) => MediaMetadata;
+    getVideoMetadata?: (url: string) => VideoMetadata;
+    onMediaAttachmentClick?: (url: string, type: 'photo' | 'document' | 'video' | 'link') => void;
+    customThumbComponent?: React.ReactNode;
+    customDescription?: React.ReactNode;
+    customCriteria?: React.ReactNode;
+    customIssueHistoryComponent?: React.ReactNode;
+    issueHistory?: IssueHistory[];
+    showBackButton?: boolean;
+    enableLightbox?: boolean;
+    knownDIDRegistry?: KnownDIDRegistryType;
+    customSkillsComponent?: React.ReactNode;
+    isFrontOverride?: boolean;
+    setIsFrontOverride?: (value: boolean) => void;
+    hideNavButtons?: boolean;
+    hideQRCode?: boolean;
+    qrCodeOnClick?: () => void;
+    showDetailsBtn?: boolean;
+    customIDDescription?: React.ReactNode;
+    hideGradientBackground?: boolean;
+    customLinkedCredentialsComponent?: React.ReactNode;
+    unknownVerifierTitle?: string;
+    onVerifierClick?: (
+        event: React.MouseEvent<HTMLButtonElement>,
+        verifierState: VerifierState
+    ) => void;
+};
+
+export const VCIDDisplayCard: React.FC<VCIDDisplayCardProps> = ({
+    credential,
+    verificationItems,
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    customThumbComponent,
+    customCriteria,
+    customDescription,
+    customIssueHistoryComponent,
+    issueHistory,
+    showBackButton = true,
+    enableLightbox,
+    knownDIDRegistry,
+    customSkillsComponent,
+    isFrontOverride,
+    setIsFrontOverride,
+    hideNavButtons,
+    hideQRCode = false,
+    qrCodeOnClick,
+    showDetailsBtn = false,
+    customIDDescription,
+    hideGradientBackground = false,
+    customLinkedCredentialsComponent,
+    unknownVerifierTitle,
+    onVerifierClick,
+}) => {
+    const [_isFront, _setIsFront] = useState<boolean>(isFrontOverride ?? true);
+    const isFront = isFrontOverride ?? _isFront;
+    const setIsFront = setIsFrontOverride ?? _setIsFront;
+
+    let backgroundStyle = {
+        backgroundColor: `linear-gradient(180deg, rgba(24,34,78,1) ${
+            !isFront && hideGradientBackground ? '100%' : '25%'
+        }, rgba(139,145,167,1) 100%)`,
+        backgroundImage: `linear-gradient(180deg, rgba(24,34,78,1) ${
+            !isFront && hideGradientBackground ? '100%' : '25%'
+        }, rgba(139,145,167,1) 100%)`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundAttachment: 'fixed',
+    };
+
+    return (
+        <Flipper className="w-full" flipKey={isFront}>
+            <Flipped flipId="card">
+                <section
+                    className={`vc-display-card font-mouse flex flex-col items-center border-solid border-white rounded-[30px] z-10 max-w-[400px] relative bg-white shadow-3xl ${
+                        isFront ? '' : 'min-h-[800px]'
+                    }`}
+                >
+                    <div
+                        className="relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] rounded-b-[30px] overflow-hidden"
+                        style={backgroundStyle}
+                        role="button"
+                        onClick={() => setIsFront(!isFront)}
+                    >
+                        <div className="vc-card-content-scroll-container w-full min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[30px]  scrollbar-hide pt-[20px]">
+                            {isFront && (
+                                <VCIDDisplayFrontFace
+                                    isFront={_isFront}
+                                    setIsFront={setIsFront}
+                                    showDetailsBtn={showDetailsBtn}
+                                    customThumbComponent={customThumbComponent}
+                                    credential={credential}
+                                    knownDIDRegistry={knownDIDRegistry}
+                                    qrCodeOnClick={qrCodeOnClick}
+                                    hideQRCode={hideQRCode}
+                                    customIDDescription={customIDDescription}
+                                    unknownVerifierTitle={unknownVerifierTitle}
+                                    onVerifierClick={onVerifierClick}
+                                />
+                            )}
+                            {!isFront && (
+                                <VC2BackFace
+                                    credential={credential}
+                                    verificationItems={verificationItems}
+                                    issueHistory={issueHistory}
+                                    getFileMetadata={getFileMetadata}
+                                    getVideoMetadata={getVideoMetadata}
+                                    onMediaAttachmentClick={onMediaAttachmentClick}
+                                    showBackButton={
+                                        (showBackButton && !hideNavButtons) || showDetailsBtn
+                                    }
+                                    showFrontFace={() => setIsFront(true)}
+                                    customDescription={customDescription}
+                                    customCriteria={customCriteria}
+                                    customIssueHistoryComponent={customIssueHistoryComponent}
+                                    enableLightbox={enableLightbox}
+                                    customSkillsComponent={customSkillsComponent}
+                                    customLinkedCredentialsComponent={
+                                        customLinkedCredentialsComponent
+                                    }
+                                />
+                            )}
+                        </div>
+                    </div>
+                </section>
+            </Flipped>
+        </Flipper>
+    );
+};
+
+export default VCIDDisplayCard;