@learncard/react 2.12.0 → 2.12.2

package/src/components/CertificateDisplayCard/VerifierStateBadgeAndText.tsx

@@ -3,6 +3,7 @@ import UnknownVerifierBadge from '../svgs/UnknownVerifierBadge';
 import VerifiedBadge from '../svgs/VerifiedBadge';
 import PersonBadge from '../svgs/PersonBadge';
 import RedFlag from '../svgs/RedFlag';
+import { useT } from '../../i18n';
 
 export const VERIFIER_STATES = {
     selfVerified: 'Self Issued',
@@ -22,6 +23,7 @@ export type VerifierStateBadgeAndTextProps = {
 
 const VerifierStateBadgeAndText = forwardRef<HTMLButtonElement, VerifierStateBadgeAndTextProps>(
     ({ verifierState, className = '', unknownVerifierTitle, onClick }, ref) => {
+        const t = useT();
         // For Scouts: if we have a role-based title, show it with trusted styling
         // BUT don't overwrite self-issued or untrusted status
         const effectiveState =
@@ -37,35 +39,37 @@ const VerifierStateBadgeAndText = forwardRef<HTMLButtonElement, VerifierStateBad
                 {effectiveState === VERIFIER_STATES.selfVerified && (
                     <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-green-dark">
                         <PersonBadge />
-                        <span className="whitespace-nowrap">Self Issued</span>
+                        <span className="whitespace-nowrap">{t('verification.selfIssued')}</span>
                     </div>
                 )}
                 {effectiveState === VERIFIER_STATES.trustedVerifier && (
                     <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-green-600">
                         <VerifiedBadge />
                         <span className="whitespace-nowrap">
-                            {unknownVerifierTitle ?? 'Trusted Issuer'}
+                            {unknownVerifierTitle ?? t('verification.trustedIssuer')}
                         </span>
                     </div>
                 )}
                 {effectiveState === VERIFIER_STATES.unknownVerifier && (
-                    <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-orange-500">
+                    <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-orange-800">
                         <UnknownVerifierBadge />
                         <span className="whitespace-nowrap">
-                            {unknownVerifierTitle ?? VERIFIER_STATES.unknownVerifier}
+                            {unknownVerifierTitle ?? t('verification.unknownIssuer')}
                         </span>
                     </div>
                 )}
                 {effectiveState === VERIFIER_STATES.appIssuer && (
                     <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-cyan-600">
                         <VerifiedBadge />
-                        <span className="whitespace-nowrap">App Issuer</span>
+                        <span className="whitespace-nowrap">{t('verification.appIssuer')}</span>
                     </div>
                 )}
                 {effectiveState === VERIFIER_STATES.untrustedVerifier && (
                     <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-red-mastercard">
                         <RedFlag />
-                        <span className="whitespace-nowrap">Untrusted Issuer</span>
+                        <span className="whitespace-nowrap">
+                            {t('verification.untrustedIssuer')}
+                        </span>
                     </div>
                 )}
             </>

package/src/components/CircleIcon/__tests__/CircleIcon.test.tsx

@@ -26,7 +26,7 @@ describe('Running Tests for CircleIcon', () => {
     // });
 
     // it('calls onClick', async () => {
-    //     const handleOnClick = jest.fn();
+    //     const handleOnClick = vi.fn();
     //     const user = userEvent.setup();
 
     //     const { container } = render(<CircleIcon onClick={handleOnClick} />);

package/src/components/VCDisplayCard2/InfoBox.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useT } from '../../i18n';
 
 type InfoBoxProps = {
     text: string;
@@ -7,6 +8,7 @@ type InfoBoxProps = {
 };
 
 const InfoBox: React.FC<InfoBoxProps> = ({ text, handleClose, backgroundColor = '#6366F1' }) => {
+    const t = useT();
     const bgColorWithOpacity = `${backgroundColor}1F`; // 12% opacity
     return (
         <div
@@ -21,7 +23,7 @@ const InfoBox: React.FC<InfoBoxProps> = ({ text, handleClose, backgroundColor =
                 }}
                 className="text-indigo-500 font-[700] select-none"
             >
-                Close
+                {t('credential.close')}
             </button>
         </div>
     );

package/src/components/VCDisplayCard2/TruncateTextBox.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useT } from '../../i18n';
 
 type TruncateTextBoxProps = {
     headerText?: string;
@@ -29,6 +30,7 @@ const TruncateTextBox: React.FC<TruncateTextBoxProps> = ({
     containerClassName = '',
     textClassName = '',
 }) => {
+    const t = useT();
     const needsTruncate = text?.length > truncateThreshold;
     const [showFullText, setShowFullText] = useState(false);
     const truncated = needsTruncate && !showFullText;
@@ -61,7 +63,7 @@ const TruncateTextBox: React.FC<TruncateTextBoxProps> = ({
                                 setShowFullText(true);
                             }}
                         >
-                            More
+                            {t('credential.more')}
                         </button>
                     </>
                 )}
@@ -75,7 +77,7 @@ const TruncateTextBox: React.FC<TruncateTextBoxProps> = ({
                                 setShowFullText(false);
                             }}
                         >
-                            Close
+                            {t('credential.close')}
                         </button>
                     </>
                 )}

package/src/components/VCDisplayCard2/VC2BackFace.tsx

@@ -16,6 +16,7 @@ import {
     VideoMetadata,
 } from '../../types';
 import LeftArrow from '../svgs/LeftArrow';
+import { useT } from '../../i18n';
 
 type FlippedComponentProps = React.PropsWithChildren<{
     flipId?: string;
@@ -69,6 +70,7 @@ const VC2BackFace: React.FC<VC2BackFaceProps> = ({
     enableLightbox,
     customLinkedCredentialsComponent,
 }) => {
+    const t = useT();
     const expiration = credential.expirationDate
         ? format(new Date(credential.expirationDate), 'MMM dd, yyyy')
         : undefined;
@@ -107,7 +109,7 @@ const VC2BackFace: React.FC<VC2BackFaceProps> = ({
 
                 {customDescription && (
                     <TruncateTextBox
-                        headerText="About"
+                        headerText={t('credential.about')}
                         text={description}
                         className="description-box"
                     >
@@ -116,7 +118,7 @@ const VC2BackFace: React.FC<VC2BackFaceProps> = ({
                 )}
                 {!customDescription && (description || expiration) && (
                     <TruncateTextBox
-                        headerText="About"
+                        headerText={t('credential.about')}
                         text={description}
                         className="description-box"
                     >
@@ -130,7 +132,7 @@ const VC2BackFace: React.FC<VC2BackFaceProps> = ({
 
                 {customCriteria && (
                     <TruncateTextBox
-                        headerText="Criteria"
+                        headerText={t('credential.criteria')}
                         text={description}
                         className="description-box"
                     >
@@ -139,7 +141,7 @@ const VC2BackFace: React.FC<VC2BackFaceProps> = ({
                 )}
                 {!customCriteria && criteria && (
                     <TruncateTextBox
-                        headerText="Criteria"
+                        headerText={t('credential.criteria')}
                         text={criteria}
                         className="criteria-box"
                     />

package/src/components/VCDisplayCard2/VC2FrontFaceInfo.tsx

@@ -13,6 +13,7 @@ import VerifierStateBadgeAndText, {
 } from '../CertificateDisplayCard/VerifierStateBadgeAndText';
 import { BoostAchievementCredential } from '../../types';
 import { KnownDIDRegistryType } from '../../types';
+import { useT } from '../../i18n';
 
 type FlippedComponentProps = React.PropsWithChildren<{
     flipId?: string;
@@ -82,6 +83,7 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
     unknownVerifierTitle,
     onVerifierClick,
 }) => {
+    const t = useT();
     const issuerImage = getImageFromProfile(issuer ?? '');
     const issueeImage = getImageFromProfile(issuee ?? '');
 
@@ -241,7 +243,7 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
                                     {!issuerDisplay.isMissing && (
                                         <span className="issued-by max-w-full break-words text-center line-clamp-2 text-[14px]">
                                             <span className="font-medium text-grayscale-900">
-                                                By
+                                                {t('credential.by')}
                                             </span>{' '}
                                             {issuerDisplay.isDidValue ? (
                                                 <span className="font-[600] font-poppins break-words">

package/src/components/VCDisplayCard2/VCDisplayCard2.tsx

@@ -29,6 +29,7 @@ import {
 import { CertificateDisplayCard } from '../CertificateDisplayCard';
 import { MeritBadgeDisplayCard } from '../MeritBadgeDisplayCard';
 import { KnownDIDRegistryType } from '../../types';
+import { useT } from '../../i18n';
 
 type FlippedComponentProps = React.PropsWithChildren<{
     flipId?: string;
@@ -169,6 +170,7 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
     hideFrontFaceDetails,
     onVerifierClick,
 }) => {
+    const t = useT();
     const {
         title = '',
         createdAt,
@@ -537,12 +539,18 @@ export const VCDisplayCard2: React.FC<VCDisplayCard2Props> = ({
                                         />
                                     )}
                                     <div className="vc-footer-text font-montserrat flex flex-col items-center justify-center text-[12px] font-[700] leading-[15px] select-none">
-                                        <span className="text-[#4F4F4F]">Verified Credential</span>
+                                        <span className="text-[#4F4F4F]">
+                                            {t('credential.verified')}
+                                        </span>
                                         <span
                                             className="vc-footer-status uppercase"
                                             style={{ color: statusColor }}
                                         >
-                                            {worstVerificationStatus}
+                                            {t(
+                                                `verification.status.${String(
+                                                    worstVerificationStatus
+                                                ).toLowerCase()}`
+                                            )}
                                         </span>
                                     </div>
                                     <div

package/src/components/VCDisplayCard2/__tests__/VC2LocalizedLabels.test.tsx

@@ -0,0 +1,122 @@
+// @vitest-environment jsdom
+
+import React from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { VerificationStatusEnum } from '@learncard/types';
+
+import { I18nProvider } from '../../../i18n';
+import VerifierStateBadgeAndText, {
+    VERIFIER_STATES,
+} from '../../CertificateDisplayCard/VerifierStateBadgeAndText';
+import VC2BackFace from '../VC2BackFace';
+import VCDisplayCard2 from '../VCDisplayCard2';
+
+vi.mock('react-flip-toolkit', () => ({
+    Flipper: ({ children }: React.PropsWithChildren) => <>{children}</>,
+    Flipped: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+const translations: Record<string, string> = {
+    'credential.about': 'Acerca de',
+    'credential.criteria': 'Criterios',
+    'credential.alignments': 'Alineaciones',
+    'credential.alignmentInfo': 'Las alineaciones vinculan este logro con marcos establecidos.',
+    'credential.verifiedSource': 'Fuente verificada',
+    'credential.verifiedLabel': 'Verificada',
+    'credential.openAlignmentSource': 'Abrir la fuente de la alineación',
+    'credential.occupationsPrograms': 'Ocupaciones y programas',
+    'credential.more': 'Más',
+    'credential.close': 'Cerrar',
+    'credential.by': 'Por',
+    'credential.verified': 'Credencial verificada',
+    'verification.selfIssued': 'Autoemitido',
+    'verification.status.success': 'Éxito',
+};
+
+const renderLocalized = (node: React.ReactNode) =>
+    render(
+        <I18nProvider resolve={key => translations[key]} locale="es">
+            {node}
+        </I18nProvider>
+    );
+
+const credential = {
+    issuer: 'did:example:issuer',
+    issuanceDate: '2026-08-14T00:00:00.000Z',
+    credentialSubject: {
+        id: 'did:example:subject',
+        achievement: {
+            name: 'Critical Thinking',
+            description:
+                'A long description that deliberately exceeds the truncation threshold so the translated expansion control is rendered for this regression test.',
+            criteria: { narrative: 'Complete the critical-thinking requirements.' },
+            alignment: [
+                {
+                    targetUrl: 'https://example.com/framework/critical-thinking',
+                    targetName: 'Critical Thinking',
+                    targetFramework: 'Example Framework',
+                    targetType: 'ceterms:Credential',
+                },
+            ],
+        },
+    },
+    display: { displayType: 'badge' },
+};
+
+describe('VCDisplayCard2 localized labels', () => {
+    it('localizes back-face headings, alignment copy, and truncation controls', () => {
+        const { container } = renderLocalized(
+            <VC2BackFace
+                credential={credential as never}
+                verificationItems={[]}
+                showFrontFace={vi.fn()}
+            />
+        );
+
+        expect(screen.getByRole('heading', { name: 'Acerca de' })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: 'Criterios' })).toBeTruthy();
+
+        const alignmentHeading = screen.getByRole('heading', { name: 'Alineaciones' });
+        expect(alignmentHeading.className).toContain('text-[20px]');
+        expect(alignmentHeading.className).not.toContain('text-[22px]');
+
+        fireEvent.click(screen.getByRole('button', { name: 'Más' }));
+        expect(screen.getByRole('button', { name: 'Cerrar' })).toBeTruthy();
+
+        const alignmentBox = alignmentHeading.closest('div.bg-white');
+        expect(alignmentBox).not.toBeNull();
+        fireEvent.click(within(alignmentBox as HTMLElement).getByRole('button'));
+
+        expect(
+            screen.getByText('Las alineaciones vinculan este logro con marcos establecidos.')
+        ).toBeTruthy();
+        expect(screen.getByText('Fuente verificada')).toBeTruthy();
+        expect(screen.getByText('Verificada')).toBeTruthy();
+        expect(screen.getByRole('link', { name: 'Abrir la fuente de la alineación' })).toBeTruthy();
+        expect(container.textContent).not.toContain('Alignments');
+    });
+
+    it('localizes the verifier badge used on the credential front face', () => {
+        renderLocalized(<VerifierStateBadgeAndText verifierState={VERIFIER_STATES.selfVerified} />);
+
+        expect(screen.getByText('Autoemitido')).toBeTruthy();
+        expect(screen.queryByText('Self Issued')).toBeNull();
+    });
+
+    it('localizes the verified-credential footer and verification status', () => {
+        renderLocalized(
+            <VCDisplayCard2
+                credential={credential as never}
+                verificationItems={[{ status: VerificationStatusEnum.Success } as never]}
+                hideNavButtons
+            />
+        );
+
+        expect(screen.getByText('Credencial verificada')).toBeTruthy();
+        expect(screen.getByText('Éxito')).toBeTruthy();
+        expect(screen.getByText('Por')).toBeTruthy();
+        expect(screen.queryByText('Verified Credential')).toBeNull();
+    });
+});

package/src/helpers/credential.helpers.test.ts

@@ -88,7 +88,7 @@ describe('Credential Helpers', () => {
                 ...JffCredential,
                 issuanceDate: 'invalid-date-string',
             };
-            const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
             const result = getInfoFromCredential(credentialWithInvalidDate as any);
             expect(result.createdAt).toEqual('');
             expect(consoleSpy).toHaveBeenCalledWith(

package/src/i18n/index.tsx

@@ -32,7 +32,19 @@ export const EN_DEFAULTS: Record<string, string> = {
     'verification.unknownIssuer': 'Unknown Issuer',
     'verification.appIssuer': 'Trusted App',
     'verification.untrustedIssuer': 'Untrusted Issuer',
+    'credential.about': 'About',
+    'credential.criteria': 'Criteria',
+    'credential.alignments': 'Alignments',
+    'credential.alignmentInfo':
+        'Alignments in your Open Badge credential link your achievement to established frameworks, standards, or competencies. Each alignment shows how your boost directly relates to skills, knowledge areas, and professional standards that are recognized in your field.',
+    'credential.verifiedSource': 'Verified source',
+    'credential.occupationsPrograms': 'Occupations & programs',
+    'credential.verifiedLabel': 'Verified',
+    'credential.openAlignmentSource': 'Open alignment source',
+    'credential.more': 'More',
+    'credential.close': 'Close',
     'credential.by': 'By',
+    'credential.verified': 'Verified Credential',
     'verification.title': 'Credential Verifications',
     'verification.infoText':
         'Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy.',