@learncard/react 2.12.1 → 2.12.3

package/src/assets/styles/main.css

@@ -394,8 +394,9 @@
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/mousememoirs/v13/t5tmIRoSNJ-PH0WNNgDYxdSb3T7Prw.woff2)
         format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
+        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* latin-ext */
 @font-face {
@@ -405,8 +406,9 @@
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/mousememoirs/v13/t5tmIRoSNJ-PH0WNNgDYxdSb3TDPr6OH.woff2)
         format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
-        U+2C60-2C7F, U+A720-A7FF;
+    unicode-range:
+        U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
 }
 
 /* Montserrat (removed cyrillic-ext, cyrillic, vietnamese) */
@@ -418,8 +420,9 @@
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2)
         format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
-        U+2C60-2C7F, U+A720-A7FF;
+    unicode-range:
+        U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
+        U+A720-A7FF;
 }
 /* latin */
 @font-face {
@@ -429,8 +432,9 @@
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2)
         format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
+        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* Poppins (removed devanagari and latin-ext)*/
@@ -442,8 +446,9 @@
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2)
         format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
+        U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* latin */
@@ -454,9 +459,9 @@
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/jacquesfrancois/v24/ZXu9e04ZvKeOOHIe1TMahbcIU2cgqcTgoA.woff2)
         format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-        U+FFFD;
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+        U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* latin */
@@ -467,9 +472,9 @@
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/sacramento/v15/buEzpo6gcdjy0EiZMBUG4C0f_Q.woff2)
         format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-        U+FFFD;
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+        U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* latin-ext */
@@ -480,6 +485,7 @@
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/sacramento/v15/buEzpo6gcdjy0EiZMBUG4CMf_exL.woff2)
         format('woff2');
-    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
-        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+    unicode-range:
+        U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }

package/src/components/CertificateDisplayCard/AlignmentRow.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useT } from '../../i18n';
 
 type AlignmentsRowProps = {
     url?: string;
@@ -50,6 +51,7 @@ const AlignmentRow: React.FC<AlignmentsRowProps> = ({
     description,
     verified,
 }) => {
+    const t = useT();
     const title = name || code || 'Framework alignment';
 
     return (
@@ -68,7 +70,7 @@ const AlignmentRow: React.FC<AlignmentsRowProps> = ({
                     {verified && (
                         <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 border border-emerald-100 px-[6px] py-[2px] text-[10px] font-medium text-emerald-700 shrink-0">
                             <ShieldCheckIcon />
-                            Verified
+                            {t('credential.verifiedLabel')}
                         </span>
                     )}
                 </div>
@@ -79,7 +81,7 @@ const AlignmentRow: React.FC<AlignmentsRowProps> = ({
                         rel="noreferrer"
                         onClick={e => e.stopPropagation()}
                         className="text-grayscale-400 hover:text-grayscale-700 transition-colors shrink-0"
-                        aria-label="Open alignment source"
+                        aria-label={t('credential.openAlignmentSource')}
                     >
                         <ExternalLinkIcon />
                     </a>

package/src/components/CertificateDisplayCard/AlignmentsBox.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import AlignmentRow from './AlignmentRow';
 import InfoIcon from '../svgs/InfoIcon';
 import InfoBox from './InfoBox';
+import { useT } from '../../i18n';
 
 type Alignment = {
     targetUrl: string;
@@ -22,11 +23,8 @@ const isCredentialEngine = (a: Alignment): boolean =>
     a.targetType === 'ceterms:Credential' || a.targetFramework === 'Credential Engine Registry';
 
 const AlignmentsBox: React.FC<AlignmentsBoxProps> = ({ alignment, style }) => {
+    const t = useT();
     const [showInfo, setShowInfo] = useState(false);
-    const alignmentText = `
-    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.
-    `;
 
     const list = Array.isArray(alignment) ? alignment : [alignment];
     if (list.length === 0) return null;
@@ -53,10 +51,10 @@ const AlignmentsBox: React.FC<AlignmentsBoxProps> = ({ alignment, style }) => {
                     className={
                         style === 'Certificate'
                             ? 'text-[17px] text-grayscale-900 font-poppins'
-                            : 'text-[22px] font-mouse'
+                            : 'text-[20px] leading-[20px] text-grayscale-900'
                     }
                 >
-                    Alignments
+                    {t('credential.alignments')}
                 </h3>
                 <button
                     className="ml-auto"
@@ -68,12 +66,17 @@ const AlignmentsBox: React.FC<AlignmentsBoxProps> = ({ alignment, style }) => {
                     <InfoIcon color={showInfo ? '#00BA88' : undefined} />
                 </button>
             </div>
-            {showInfo && <InfoBox text={alignmentText} handleClose={() => setShowInfo(false)} />}
+            {showInfo && (
+                <InfoBox
+                    text={t('credential.alignmentInfo')}
+                    handleClose={() => setShowInfo(false)}
+                />
+            )}
 
             {verified.length > 0 && (
                 <div className="flex flex-col gap-[8px] w-full">
                     <span className="text-[11px] font-medium text-grayscale-500 font-poppins">
-                        Verified source
+                        {t('credential.verifiedSource')}
                     </span>
                     {verified.map((object, index) => renderRow(object, index, true))}
                 </div>
@@ -83,7 +86,7 @@ const AlignmentsBox: React.FC<AlignmentsBoxProps> = ({ alignment, style }) => {
                 <div className="flex flex-col gap-[8px] w-full">
                     {verified.length > 0 && (
                         <span className="text-[11px] font-medium text-grayscale-500 font-poppins">
-                            Occupations &amp; programs
+                            {t('credential.occupationsPrograms')}
                         </span>
                     )}
                     {other.map((object, index) => renderRow(object, index, false))}

package/src/components/CertificateDisplayCard/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/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/MeritBadgeDisplayCard/MediaAttachmentsBox.tsx

@@ -184,8 +184,9 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                                     className="bg-cover bg-no-repeat bg-center relative font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600 rounded-[15px] h-full"
                                     style={{
                                         backgroundImage: metadata?.imageUrl
-                                            ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${metadata?.imageUrl ?? ''
-                                            })`
+                                            ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${
+                                                  metadata?.imageUrl ?? ''
+                                              })`
                                             : undefined,
                                     }}
                                 >

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;
@@ -65,6 +66,22 @@ const BadgeThumbnailPlaceholder: React.FC = () => (
         />
     </svg>
 );
+const BadgeThumbnail: React.FC<{ imageUrl: string }> = ({ imageUrl }) => {
+    const [errored, setErrored] = React.useState(false);
+
+    return errored ? (
+        <div className="vc-front-image h-[130px] w-[130px] rounded-[10px] bg-grayscale-100 flex items-center justify-center">
+            <BadgeThumbnailPlaceholder />
+        </div>
+    ) : (
+        <img
+            className="vc-front-image h-[130px] w-[130px] rounded-[10px] bg-white object-cover"
+            src={imageUrl}
+            alt="credential thumbnail"
+            onError={() => setErrored(true)}
+        />
+    );
+};
 
 const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
     credential,
@@ -82,16 +99,10 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
     unknownVerifierTitle,
     onVerifierClick,
 }) => {
+    const t = useT();
     const issuerImage = getImageFromProfile(issuer ?? '');
     const issueeImage = getImageFromProfile(issuee ?? '');
 
-    const [thumbErrored, setThumbErrored] = React.useState(false);
-
-    // Reset the broken-image flag whenever the thumbnail source changes.
-    React.useEffect(() => {
-        setThumbErrored(false);
-    }, [imageUrl]);
-
     const issueeDisplay = resolveProfileDisplay(issuee, '');
     const issuerDisplay = resolveProfileDisplay(issuer, '');
 
@@ -182,20 +193,9 @@ const VC2FrontFaceInfo: React.FC<VC2FrontFaceInfoProps> = ({
     return (
         <Flipped inverseFlipId="card">
             <section className="vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]">
-                {imageUrl &&
-                    !customThumbComponent &&
-                    (thumbErrored ? (
-                        <div className="vc-front-image h-[130px] w-[130px] rounded-[10px] bg-grayscale-100 flex items-center justify-center">
-                            <BadgeThumbnailPlaceholder />
-                        </div>
-                    ) : (
-                        <img
-                            className="vc-front-image h-[130px] w-[130px] rounded-[10px] bg-white object-cover"
-                            src={imageUrl}
-                            alt="credential thumbnail"
-                            onError={() => setThumbErrored(true)}
-                        />
-                    ))}
+                {imageUrl && !customThumbComponent && (
+                    <BadgeThumbnail key={imageUrl} imageUrl={imageUrl} />
+                )}
 
                 {customThumbComponent && customThumbComponent}
                 <div className="vc-issue-info-box bg-white flex flex-col items-center gap-[5px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full">
@@ -241,7 +241,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(