@learncard/react 2.10.7 → 2.11.0

package/src/components/BoostGenericCard/BoostGenericCard.tsx

@@ -6,6 +6,8 @@ import AlignmentSkillsCount from './AlignmentSkillsCount';
 import ThreeDotVertical from '../svgs/ThreeDotVertical';
 import { CircleCheckButton } from '../CircleCheckButton';
 import BadgeThumbnailImg from '../BadgeThumbnailImg/BadgeThumbnailImg';
+import { getLifecycleTreatment } from '../../helpers/lifecycle.helpers';
+import { useT } from '../../i18n';
 
 export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
     title,
@@ -33,7 +35,9 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
     linkedCredentialsCount = 0,
     linkedCredentialsClassName = '',
     checkBtnClass = '',
+    lifecycleStatus = 'active',
 }) => {
+    const t = useT();
     const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type]
         ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`
         : 'bg-grayscale-50';
@@ -45,10 +49,31 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
 
     const DisplayIcon = getDisplayIcon(displayType as DisplayTypeEnum);
 
+    // Shared revoked/suspended treatment (see getLifecycleTreatment). Inline styles are
+    // used (not Tailwind classes) because the consumer app's Tailwind doesn't scan this
+    // package and it ships no utility CSS, so utility classes here have no backing rule.
+    const {
+        isInactive,
+        mediaStyle: inactiveMediaStyle,
+        textStyle: inactiveTextStyle,
+        pillBg,
+    } = getLifecycleTreatment(lifecycleStatus);
+    const pillLabel = t(`credential.lifecycle.${lifecycleStatus}`);
+    const pillLeft = showChecked ? 'left-[44px]' : 'left-[8px]';
+
     return (
         <div
             className={`flex bg-white flex-col shadow-bottom relative p-0 w-[160px] h-[285px] rounded-[20px] overflow-hidden ${className}`}
         >
+            {isInactive && (
+                <span
+                    className={`absolute top-[8px] ${pillLeft} z-20 rounded-full px-[9px] py-[3px] text-[10px] font-extrabold uppercase tracking-wide text-white`}
+                    style={{ backgroundColor: pillBg }}
+                >
+                    {pillLabel}
+                </span>
+            )}
+
             {optionsTriggerOnClick && (
                 <section
                     className="absolute cursor-pointer h-[30px] w-[30px] top-[5px] right-[5px] rounded-full bg-white/70 flex items-center justify-center z-20"
@@ -59,7 +84,10 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
             )}
 
             {bgImgSrc && (
-                <section className="absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0">
+                <section
+                    className="absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0"
+                    style={inactiveMediaStyle}
+                >
                     <img className="h-full w-full object-cover" src={bgImgSrc} />
                 </section>
             )}
@@ -69,23 +97,26 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
                 className="z-10 flex flex-col flex-grow"
                 onClick={handleInnerClick}
             >
-                {/* Thumbnail */}
-                {customThumbComponent || (
-                    <section className={defaultThumbClass}>
-                        {thumbImgSrc?.trim() ? (
-                            <BadgeThumbnailImg
-                                className="w-full h-full rounded-full object-cover"
-                                src={thumbImgSrc}
-                                alt="Credential Achievement"
-                            />
-                        ) : (
-                            <img
-                                className="max-w-full p-0 object-cover rounded-full"
-                                src={imgSrc}
-                            />
-                        )}
-                    </section>
-                )}
+                {/* Thumbnail — filter on the wrapper so it desaturates a
+                    customThumbComponent too, not just the default thumb section. */}
+                <div style={inactiveMediaStyle}>
+                    {customThumbComponent || (
+                        <section className={defaultThumbClass}>
+                            {thumbImgSrc?.trim() ? (
+                                <BadgeThumbnailImg
+                                    className="w-full h-full rounded-full object-cover"
+                                    src={thumbImgSrc}
+                                    alt="Credential Achievement"
+                                />
+                            ) : (
+                                <img
+                                    className="max-w-full p-0 object-cover rounded-full"
+                                    src={imgSrc}
+                                />
+                            )}
+                        </section>
+                    )}
+                </div>
 
                 {/* Details Section: grows to fill available space */}
                 <section
@@ -107,6 +138,7 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
                                         : 'text-[16px]'
                                 }
                             `}
+                                style={inactiveTextStyle}
                                 title={title}
                             >
                                 {title}
@@ -124,7 +156,9 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
                                     </span>
                                 )}
                                 {customIssuerName || (
-                                    <span className="font-bold">{issuerName}</span>
+                                    <span className="font-bold" style={inactiveTextStyle}>
+                                        {issuerName}
+                                    </span>
                                 )}
                             </span>
                         </div>

package/src/components/MeritBadgeDisplayCard/MeritBadgeFrontFace.tsx

@@ -159,7 +159,7 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
             >
                 <div className="flex flex-col gap-[5px] w-full">
                     <div className="flex flex-col items-center text-grayscale-900">
-                        {issueeName && (
+                        {issueeName && !customBodyCardComponent && (
                             <>
                                 <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 ? (

package/src/components/MeritBadgeDisplayCard/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';
 
 const VERIFIER_STATES = {
     selfVerified: 'Self Issued',
@@ -18,36 +19,37 @@ type VerifierStateBadgeAndTextProps = {
 };
 
 const VerifierStateBadgeAndText: React.FC<VerifierStateBadgeAndTextProps> = ({ verifierState }) => {
+    const t = useT();
     return (
         <div className="flex justify-center">
             {verifierState === VERIFIER_STATES.selfVerified && (
                 <span className="uppercase font-poppins text-[12px] font-[500] text-green-dark flex gap-[3px] items-center">
                     <PersonBadge />
-                    Self Issued
+                    {t('verification.selfIssued')}
                 </span>
             )}
             {verifierState === VERIFIER_STATES.trustedVerifier && (
                 <span className="uppercase font-poppins text-[12px] font-[500] text-blue-light flex gap-[3px] items-center">
                     <VerifiedBadge />
-                    Trusted Issuer
+                    {t('verification.trustedIssuer')}
                 </span>
             )}
             {verifierState === VERIFIER_STATES.unknownVerifier && (
                 <span className="uppercase font-poppins text-[12px] font-[500] text-orange-500 flex gap-[3px] items-center">
                     <UnknownVerifierBadge />
-                    Unknown Issuer
+                    {t('verification.unknownIssuer')}
                 </span>
             )}
             {verifierState === VERIFIER_STATES.appIssuer && (
                 <span className="uppercase font-poppins text-[12px] font-[500] text-cyan-600 flex gap-[3px] items-center">
                     <UnknownVerifierBadge />
-                    Trusted App
+                    {t('verification.appIssuer')}
                 </span>
             )}
             {verifierState === VERIFIER_STATES.untrustedVerifier && (
                 <span className="uppercase font-poppins text-[12px] font-[500] text-red-mastercard flex gap-[3px] items-center">
                     <RedFlag />
-                    Untrusted Issuer
+                    {t('verification.untrustedIssuer')}
                 </span>
             )}
         </div>

package/src/components/VCDisplayCard2/VerificationRow.tsx

@@ -8,13 +8,29 @@ import AcuteCheckmark from '../svgs/AcuteCheckmark';
 import ExclamationPoint from '../svgs/ExclamationPoint';
 import X from '../svgs/X';
 import { capitalize } from '../../helpers/string.helpers';
+import { useT } from '../../i18n';
 
 type VerificationRowProps = {
     verification: VerificationItem;
 };
 
+/** Map the SDK's English verification messages to i18n keys; unknown messages pass through. */
+const MESSAGE_KEYS: Record<string, string> = {
+    Valid: 'valid',
+    Invalid: 'invalid',
+    'Not Revoked': 'notRevoked',
+    Revoked: 'revoked',
+    Suspended: 'suspended',
+    'Does Not Expire': 'doesNotExpire',
+    Expired: 'expired',
+    Active: 'active',
+    'Boost Credential could not be verified.': 'couldNotVerify',
+    'Boost Credential could not be verified': 'couldNotVerify',
+};
+
 const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
     const [showInfo, setShowInfo] = useState(false);
+    const t = useT();
     const statusColor = getColorForVerificationStatus(verification.status);
 
     const getIcon = () => {
@@ -28,11 +44,19 @@ const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
         }
     };
 
+    const statusText = t(`verification.status.${String(verification.status).toLowerCase()}`);
+    const translateMessage = (msg?: string): string => {
+        if (!msg) return '';
+        const key = MESSAGE_KEYS[msg];
+        return key ? t(`verification.message.${key}`) : msg;
+    };
+    const checkLabel = verification.check ? t(`verification.check.${verification.check}`) : '';
+
     let primaryText = verification.check
-        ? `${verification.check}: ${verification.message}`
-        : verification.message;
+        ? `${checkLabel}: ${translateMessage(verification.message)}`
+        : translateMessage(verification.message);
     if (verification.status === VerificationStatusEnum.Failed) {
-        primaryText = verification.message ?? verification.details ?? '';
+        primaryText = translateMessage(verification.message ?? verification.details ?? '');
     }
     primaryText = capitalize(primaryText);
 
@@ -45,7 +69,7 @@ const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
                 style={{ color: statusColor }}
             >
                 {getIcon()}
-                {verification.status}
+                {statusText}
                 {infoText && (
                     <button className="ml-auto" onClick={() => setShowInfo(!showInfo)}>
                         <InfoIcon color={statusColor} />

package/src/components/VCDisplayCard2/VerificationsBox.tsx

@@ -5,6 +5,7 @@ import InfoIcon from '../svgs/InfoIcon';
 import InfoBox from './InfoBox';
 
 import { VerificationItem } from '@learncard/types';
+import { useT } from '../../i18n';
 
 type VerificationsBoxProps = {
     verificationItems: VerificationItem[];
@@ -12,11 +13,12 @@ type VerificationsBoxProps = {
 
 const VerificationsBox: React.FC<VerificationsBoxProps> = ({ verificationItems }) => {
     const [showInfo, setShowInfo] = useState(false);
+    const t = useT();
 
     return (
         <div className="verifications-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative">
             <h3 className="text-[20px] leading-[20px] text-grayscale-900">
-                Credential Verifications
+                {t('verification.title')}
             </h3>
             <button
                 className="absolute top-[17px] right-[17px]"
@@ -28,10 +30,7 @@ const VerificationsBox: React.FC<VerificationsBoxProps> = ({ verificationItems }
                 <InfoIcon color={showInfo ? '#6366F1' : undefined} />
             </button>
             {showInfo && (
-                <InfoBox
-                    text="Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy."
-                    handleClose={() => setShowInfo(false)}
-                />
+                <InfoBox text={t('verification.infoText')} handleClose={() => setShowInfo(false)} />
             )}
 
             {verificationItems.map((verification, index) => (

package/src/helpers/lifecycle.helpers.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react';
+
+export type CredentialLifecycleStatus = 'active' | 'revoked' | 'suspended';
+
+export type LifecycleTreatment = {
+    /** True when the credential is revoked or suspended. */
+    isInactive: boolean;
+    /** Inline filter for media (images / thumbnails); `undefined` when active.
+     *  Inline style (not a Tailwind class) so it applies regardless of whether the
+     *  consumer app's Tailwind scans this package or generates the utility. */
+    mediaStyle: CSSProperties | undefined;
+    /** Inline style for de-emphasizing text; `undefined` when active. */
+    textStyle: CSSProperties | undefined;
+    /** Pill background color for the status chip (only meaningful when `isInactive`). */
+    pillBg: string;
+};
+
+const REVOKED_COLOR = '#DC2626'; // red-600
+const SUSPENDED_COLOR = '#D97706'; // amber-600
+
+/**
+ * Shared visual treatment for a revoked/suspended credential, used by both the
+ * grid card (`BoostGenericCard`) and the list row (`BoostListItem`) so the two
+ * views stay in sync. Values are inert (`isInactive: false`, `undefined` styles)
+ * for active credentials.
+ */
+export const getLifecycleTreatment = (
+    status: CredentialLifecycleStatus = 'active'
+): LifecycleTreatment => {
+    const isInactive = status === 'revoked' || status === 'suspended';
+
+    return {
+        isInactive,
+        mediaStyle: isInactive ? { filter: 'grayscale(1) brightness(0.9)' } : undefined,
+        textStyle: isInactive ? { filter: 'grayscale(1)', opacity: 0.6 } : undefined,
+        pillBg: status === 'suspended' ? SUSPENDED_COLOR : REVOKED_COLOR,
+    };
+};

package/src/i18n/index.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+
+import { EN_DEFAULTS } from './index';
+
+describe('shared SDK lifecycle translations', () => {
+    it('provides standalone English defaults for lifecycle labels', () => {
+        expect(EN_DEFAULTS['credential.lifecycle.revoked']).toBe('Revoked');
+        expect(EN_DEFAULTS['credential.lifecycle.suspended']).toBe('Suspended');
+    });
+});

package/src/i18n/index.tsx

@@ -0,0 +1,90 @@
+/**
+ * Lightweight i18n adapter for `@learncard/react`.
+ *
+ * This is a PUBLISHED SDK consumed by external third parties who have no
+ * Paraglide, no app providers, and no catalog. So the rule is: render English
+ * with zero configuration, and only *optionally* accept translations.
+ *
+ * Components call `useT()`. With no provider mounted, `useT()` returns the
+ * co-located English default (zero-config English for every consumer). A
+ * consumer that wants localization mounts `<I18nProvider resolve={fn} locale={l}>`
+ * where `fn` maps a key to a translated string using whatever i18n they use
+ * (Paraglide, i18next, a static map — the SDK doesn't care).
+ *
+ * Kept intentionally dependency-free and self-contained (a ~40-line copy also
+ * lives in learn-card-base) so the SDK pulls in no i18n runtime.
+ */
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
+
+export type I18nResolver = (key: string, params?: Record<string, unknown>) => string | undefined;
+
+type I18nContextValue = { resolve: I18nResolver; locale: string };
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+/**
+ * English defaults co-located with the SDK. One entry per extracted string.
+ * Keys are unprefixed; a host app namespaces them (e.g. `sdk.`) in its catalog.
+ */
+export const EN_DEFAULTS: Record<string, string> = {
+    'verification.selfIssued': 'Self Issued',
+    'verification.trustedIssuer': 'Trusted Issuer',
+    'verification.unknownIssuer': 'Unknown Issuer',
+    'verification.appIssuer': 'Trusted App',
+    'verification.untrustedIssuer': 'Untrusted Issuer',
+    'credential.by': 'By',
+    'verification.title': 'Credential Verifications',
+    'verification.infoText':
+        'Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy.',
+    'verification.status.success': 'Success',
+    'verification.status.error': 'Error',
+    'verification.status.failed': 'Failed',
+    'verification.check.proof': 'Proof',
+    'verification.check.status': 'Status',
+    'verification.check.expiration': 'Expiration',
+    'verification.message.valid': 'Valid',
+    'verification.message.invalid': 'Invalid',
+    'verification.message.notRevoked': 'Not Revoked',
+    'verification.message.revoked': 'Revoked',
+    'verification.message.suspended': 'Suspended',
+    'verification.message.doesNotExpire': 'Does Not Expire',
+    'verification.message.expired': 'Expired',
+    'verification.message.active': 'Active',
+    'verification.message.couldNotVerify': 'Boost Credential could not be verified.',
+    'credential.lifecycle.revoked': 'Revoked',
+    'credential.lifecycle.suspended': 'Suspended',
+};
+
+/** Minimal `{var}` interpolation — no dependency. */
+const interpolate = (str: string, params?: Record<string, unknown>): string =>
+    params
+        ? str.replace(/\{(\w+)\}/g, (_, k) => (params[k] != null ? String(params[k]) : `{${k}}`))
+        : str;
+
+export const I18nProvider: React.FC<{
+    resolve: I18nResolver;
+    locale: string;
+    children: React.ReactNode;
+}> = ({ resolve, locale, children }) => {
+    const value = useMemo<I18nContextValue>(() => ({ resolve, locale }), [resolve, locale]);
+    return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+};
+
+/**
+ * Returns a translate function. Resolution order:
+ *   1. host resolver (consumer catalog) if a provider is mounted and has the key
+ *   2. co-located English default (interpolated)
+ *   3. the key itself (last-resort)
+ */
+export const useT = (): ((key: string, params?: Record<string, unknown>) => string) => {
+    const ctx = useContext(I18nContext);
+    return useCallback(
+        (key: string, params?: Record<string, unknown>) => {
+            const fromHost = ctx?.resolve(key, params);
+            if (fromHost != null) return fromHost;
+            const def = EN_DEFAULTS[key];
+            return def != null ? interpolate(def, params) : key;
+        },
+        [ctx]
+    );
+};

package/src/index.ts

@@ -10,7 +10,13 @@ export * from './helpers/useScrollBorders';
 // Export DID display helpers
 export * from './helpers/did-display.helpers';
 
+// Export credential lifecycle (revoked/suspended) treatment helper
+export * from './helpers/lifecycle.helpers';
+
 // Export SD-JWT-VC hooks and helpers
 export * from './hooks/useCredentialFormat';
 export * from './hooks/useParsedSdJwtVc';
 export * from './helpers/credentialFormat.helpers';
+
+// Optional i18n adapter (English by default; consumers may inject a resolver)
+export * from './i18n';

package/src/types/index.ts

@@ -353,6 +353,7 @@ export type BoostGenericCardProps = {
     linkedCredentialsCount?: number;
     linkedCredentialsClassName?: string;
     checkBtnClass?: string;
+    lifecycleStatus?: 'active' | 'revoked' | 'suspended';
 };
 
 export type Attachment = {

package/dist/cjs/BoostGenericCard-99a3ab28.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BoostGenericCard-99a3ab28.js","sources":["../../src/components/BoostGenericCard/AlignmentSkillsCount.tsx","../../src/helpers/display.helpers.ts","../../src/components/BoostGenericCard/BoostGenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport PuzzlePiece from '../svgs/PuzzlePiece';\nimport { VC } from '@learncard/types';\nimport { categorizeSkills } from '../../helpers/credential.helpers';\n\ntype AlignmentSkillsCountProps = {\n    credential?: VC;\n    onClick?: () => void;\n    className?: string;\n};\n\nconst AlignmentSkillsCount: React.FC<AlignmentSkillsCountProps> = ({\n    credential,\n    onClick,\n    className = '',\n}) => {\n    if (!credential) return <></>;\n\n    const achievement = (credential?.credentialSubject as any)?.achievement;\n    let alignmentCount = achievement?.alignment?.length || 0;\n\n    if (alignmentCount === 0 && credential.skills?.length > 0) {\n        // fallback to legacy skills field if present and no alignments\n        const skillsMap = categorizeSkills(credential.skills ?? []);\n\n        // Calculate total count of skills and subskills\n        const totalSkills: any = Object.values(skillsMap).reduce(\n            (total: any, category: any) => total + category?.length,\n            0\n        );\n        const totalSubskills: any = Object.values(skillsMap).reduce(\n            (total: any, category: any) => total + (category?.totalSubskillsCount || 0),\n            0\n        );\n\n        const total: any = totalSkills + totalSubskills;\n        alignmentCount = total;\n    }\n\n    return (\n        <div\n            role={onClick ? ('button' as const) : undefined}\n            onClick={onClick}\n            className={`px-[10px] py-[2px] flex gap-[3px] items-center rounded-[5px] overflow-hidden bg-violet-100 ${className}`}\n        >\n            <PuzzlePiece className=\"w-[20px] h-[20px] text-grayscale-800\" version=\"filled\" />\n            <p className=\"text-[12px] text-grayscale-800 font-poppins font-[600]\">\n                {`${alignmentCount} Skill${alignmentCount !== 1 ? 's' : ''}`}\n            </p>\n        </div>\n    );\n};\n\nexport default AlignmentSkillsCount;\n","import { LCCategoryEnum } from '../types';\n\nimport { BadgeDisplayIcon } from '../components/svgs/BadgeDisplayIcon';\nimport { CertificateDisplayIcon } from '../components/svgs/CertificateDisplayIcon';\nimport { IDDisplayIcon } from '../components/svgs/IDDisplayIcon';\nimport { CourseDisplayIcon } from '../components/svgs/CourseDisplayIcon';\nimport { AwardDisplayIcon } from '../components/svgs/AwardDisplayIcon';\n\nexport enum DisplayTypeEnum {\n    Badge = 'badge',\n    Certificate = 'certificate',\n    ID = 'id',\n    Course = 'course',\n    Award = 'award',\n}\n\nexport const getDefaultDisplayType = (category: string): DisplayTypeEnum => {\n    if (category === LCCategoryEnum.socialBadge || category === LCCategoryEnum.workHistory) {\n        return DisplayTypeEnum.Badge;\n    }\n\n    if (category === LCCategoryEnum.id || category === LCCategoryEnum.membership) {\n        return DisplayTypeEnum.ID;\n    }\n\n    if (\n        category === LCCategoryEnum.achievement ||\n        category === LCCategoryEnum.accommodations ||\n        category === LCCategoryEnum.accomplishments ||\n        category === LCCategoryEnum.learningHistory\n    ) {\n        return DisplayTypeEnum.Certificate;\n    }\n\n    return DisplayTypeEnum.Badge;\n};\n\nexport const getDisplayIcon = (displayType: DisplayTypeEnum): React.FC<{ className?: string }> => {\n    switch (displayType) {\n        case DisplayTypeEnum.Badge:\n            return BadgeDisplayIcon;\n        case DisplayTypeEnum.Certificate:\n            return CertificateDisplayIcon;\n        case DisplayTypeEnum.ID:\n            return IDDisplayIcon;\n        case DisplayTypeEnum.Course:\n            return CourseDisplayIcon;\n        case DisplayTypeEnum.Award:\n            return AwardDisplayIcon;\n        default:\n            return BadgeDisplayIcon;\n    }\n};\n","import React from 'react';\nimport { BoostGenericCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { DisplayTypeEnum, getDisplayIcon } from '../../helpers/display.helpers';\nimport AlignmentSkillsCount from './AlignmentSkillsCount';\nimport ThreeDotVertical from '../svgs/ThreeDotVertical';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport BadgeThumbnailImg from '../BadgeThumbnailImg/BadgeThumbnailImg';\n\nexport const BoostGenericCard: React.FC<BoostGenericCardProps> = ({\n    title,\n    customTitle,\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onCheckClick,\n    showChecked,\n    checkStatus,\n    customThumbComponent,\n    innerOnClick,\n    bgImgSrc,\n    issuerName,\n    customIssuerName,\n    dateDisplay,\n    customDateDisplay,\n    optionsTriggerOnClick,\n    verifierBadge,\n    credential,\n    isInSkillsModal,\n    displayType,\n    linkedCredentialsCount = 0,\n    linkedCredentialsClassName = '',\n    checkBtnClass = '',\n}) => {\n    const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type]\n        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`\n        : 'bg-grayscale-50';\n    const defaultThumbClass = `small-boost-card-thumb flex h-[110px] w-[110px] my-[10px] mx-auto ${thumbClass} overflow-hidden flex-col justify-center items-center rounded-full ${customThumbClass}`;\n    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];\n\n    const handleInnerClick = () => innerOnClick?.();\n    const handleOptionsClick = () => optionsTriggerOnClick?.();\n\n    const DisplayIcon = getDisplayIcon(displayType as DisplayTypeEnum);\n\n    return (\n        <div\n            className={`flex bg-white flex-col shadow-bottom relative p-0 w-[160px] h-[285px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            {optionsTriggerOnClick && (\n                <section\n                    className=\"absolute cursor-pointer h-[30px] w-[30px] top-[5px] right-[5px] rounded-full bg-white/70 flex items-center justify-center z-20\"\n                    onClick={handleOptionsClick}\n                >\n                    <ThreeDotVertical className=\"h-[20px] w-[20px] text-grayscale-900\" />\n                </section>\n            )}\n\n            {bgImgSrc && (\n                <section className=\"absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0\">\n                    <img className=\"h-full w-full object-cover\" src={bgImgSrc} />\n                </section>\n            )}\n\n            <button\n                type=\"button\"\n                className=\"z-10 flex flex-col flex-grow\"\n                onClick={handleInnerClick}\n            >\n                {/* Thumbnail */}\n                {customThumbComponent || (\n                    <section className={defaultThumbClass}>\n                        {thumbImgSrc?.trim() ? (\n                            <BadgeThumbnailImg\n                                className=\"w-full h-full rounded-full object-cover\"\n                                src={thumbImgSrc}\n                                alt=\"Credential Achievement\"\n                            />\n                        ) : (\n                            <img\n                                className=\"max-w-full p-0 object-cover rounded-full\"\n                                src={imgSrc}\n                            />\n                        )}\n                    </section>\n                )}\n\n                {/* Details Section: grows to fill available space */}\n                <section\n                    className={`flex flex-col flex-grow items-center justify-end pt-1 w-full ${\n                        linkedCredentialsCount === 0 ? 'pb-[20px]' : ''\n                    }`}\n                >\n                    <div className=\"px-1 flex flex-col items-center justify-center w-full\">\n                        {/* Title - dynamically size based on length */}\n                        {!customTitle ? (\n                            <p\n                                className={`\n                                ${customHeaderClass}\n                                font-medium text-center text-grayscale-900 line-clamp-2\n                                h-[50px] flex items-center justify-center\n                                ${\n                                    (title?.length ?? 0) > 35\n                                        ? 'text-[13px] leading-tight'\n                                        : 'text-[16px]'\n                                }\n                            `}\n                                title={title}\n                            >\n                                {title}\n                            </p>\n                        ) : (\n                            customTitle\n                        )}\n\n                        {/* Verifier & Issuer */}\n                        <div className=\"mt-1 w-full px-4 text-center\">\n                            <span className=\"line-clamp-2 break-words text-[12px] leading-snug text-grayscale-700\">\n                                {verifierBadge && (\n                                    <span className=\"mr-1 inline-block align-middle\">\n                                        {verifierBadge}\n                                    </span>\n                                )}\n                                {customIssuerName || (\n                                    <span className=\"font-bold\">{issuerName}</span>\n                                )}\n                            </span>\n                        </div>\n\n                        {/* Date */}\n                        {customDateDisplay || (\n                            <span className=\"text-[11px] text-grayscale-700 mt-1\">\n                                {dateDisplay}\n                            </span>\n                        )}\n\n                        {/* Skills count if in modal */}\n                        {isInSkillsModal && credential && (\n                            <AlignmentSkillsCount\n                                credential={credential}\n                                onClick={handleInnerClick}\n                                className=\"mt-[16px]\"\n                            />\n                        )}\n                    </div>\n\n                    {/* Linked Credentials moved inside details */}\n                    {linkedCredentialsCount > 0 && (\n                        <div\n                            className={`mt-auto flex items-center justify-center py-1 w-full ${linkedCredentialsClassName}`}\n                        >\n                            <DisplayIcon className=\"h-[20px] w-[20px] text-grayscale-900\" />\n                            <span className=\"ml-1 text-sm font-semibold text-grayscale-900\">\n                                +{linkedCredentialsCount} Linked\n                            </span>\n                        </div>\n                    )}\n                </section>\n            </button>\n\n            {/* Optional Check Button overlay */}\n            {showChecked && (\n                <div className=\"absolute top-[5px] left-[5px] z-20\">\n                    <CircleCheckButton\n                        checked={checkStatus}\n                        onClick={onCheckClick}\n                        className={checkBtnClass}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default BoostGenericCard;\n"],"names":["React","categorizeSkills","total","PuzzlePiece","BadgeDisplayIcon","CertificateDisplayIcon","IDDisplayIcon","CourseDisplayIcon","AwardDisplayIcon","WalletCategoryTypes","TYPE_TO_WALLET_DARK_COLOR","TYPE_TO_IMG_SRC","ThreeDotVertical","BadgeThumbnailImg","CircleCheckButton"],"mappings":"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"}