@learncard/react 2.10.6 → 2.10.8

package/dist/esm/{VCCard-d07dfdc7.js → VCCard-c0f6dff3.js}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { initLearnCard } from '@learncard/init';
 import { V as VCDisplayCard } from './VCDisplayCard-9905d9d3.js';
-import { V as VCDisplayCard2 } from './VCDisplayCard2-a3f671bc.js';
+import { V as VCDisplayCard2 } from './VCDisplayCard2-fc5c4225.js';
 
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -77,4 +77,4 @@ const VCCard = ({
 };
 
 export { VCCard as V };
-//# sourceMappingURL=VCCard-d07dfdc7.js.map
+//# sourceMappingURL=VCCard-c0f6dff3.js.map

package/dist/esm/{VCCard-d07dfdc7.js.map → VCCard-c0f6dff3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCCard-d07dfdc7.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/init';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\nimport {\n    VCDisplayCard2,\n    CredentialIconType,\n} from '../VCDisplayCard2';\n\nimport { MediaMetadata, VideoMetadata } from '../../types';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n    version?: '1' | '2';\n\n    /* Only used for version 2 */\n    subjectImageComponent?: React.ReactNode;\n    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };\n    handleXClick?: () => void;\n    getFileMetadata?: (url: string) => MediaMetadata;\n    getVideoMetadata?: (url: string) => VideoMetadata;\n    onMediaAttachmentClick?: (url: string) => void;\n    bottomRightIcon?: CredentialIconType;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({\n    credential,\n    issueeOverride,\n    className = '',\n    version = '1',\n    subjectImageComponent,\n    // convertTagsToSkills,\n    handleXClick,\n    getFileMetadata,\n    getVideoMetadata,\n    onMediaAttachmentClick,\n    bottomRightIcon,\n}) => {\n    const [loading, setLoading] = useState(true);\n    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);\n\n    useEffect(() => {\n        const verify = async () => {\n            const wallet = await initLearnCard();\n            const verification = await wallet.invoke.verifyCredential(credential, {}, true);\n            setVCVerification(verification);\n            setLoading(false);\n        };\n\n        verify();\n    }, [credential]);\n\n    if (version === '1') {\n        return (\n            <VCDisplayCard\n                credential={credential}\n                issueeOverride={issueeOverride}\n                className={className}\n                loading={loading}\n                verification={vcVerification}\n            />\n        );\n    }\n    return (\n        <VCDisplayCard2\n            credential={credential}\n            issueeOverride={issueeOverride}\n            verificationInProgress={loading}\n            verificationItems={vcVerification}\n            subjectImageComponent={subjectImageComponent}\n            // convertTagsToSkills={convertTagsToSkills}\n            handleXClick={handleXClick}\n            getFileMetadata={getFileMetadata}\n            getVideoMetadata={getVideoMetadata}\n            onMediaAttachmentClick={onMediaAttachmentClick}\n            bottomRightIcon={bottomRightIcon}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,SAAgC,CAAC;AAAA,EAC1C,UAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAY,GAAA,EAAA;AAAA,EACZ,OAAU,GAAA,GAAA;AAAA,EACV,qBAAA;AAAA;AAAA,EAEA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,sBAAA;AAAA,EACA,eAAA;AACJ,CAAM,KAAA;AACF,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA,CAA6B,EAAE,CAAA,CAAA;AAE3E,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,MAAM,SAAS,MAAY,OAAA,CAAA,IAAA,EAAA,IAAA,EAAA,aAAA;AACvB,MAAM,MAAA,MAAA,GAAS,MAAM,aAAc,EAAA,CAAA;AACnC,MAAM,MAAA,YAAA,GAAe,MAAM,MAAO,CAAA,MAAA,CAAO,iBAAiB,UAAY,EAAA,IAAI,IAAI,CAAA,CAAA;AAC9E,MAAA,iBAAA,CAAkB,YAAY,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KACpB,CAAA,CAAA;AAEA,IAAO,MAAA,EAAA,CAAA;AAAA,GACX,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,IAAI,YAAY,GAAK,EAAA;AACjB,IACI,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACG,UAAA;AAAA,QACA,cAAA;AAAA,QACA,SAAA;AAAA,QACA,OAAA;AAAA,QACA,YAAc,EAAA,cAAA;AAAA,OAAA;AAAA,KAClB,CAAA;AAAA,GAER;AACA,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACG,UAAA;AAAA,MACA,cAAA;AAAA,MACA,sBAAwB,EAAA,OAAA;AAAA,MACxB,iBAAmB,EAAA,cAAA;AAAA,MACnB,qBAAA;AAAA,MAEA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,gBAAA;AAAA,MACA,sBAAA;AAAA,MACA,eAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAER;;;;"}
+{"version":3,"file":"VCCard-c0f6dff3.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/init';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\nimport {\n    VCDisplayCard2,\n    CredentialIconType,\n} from '../VCDisplayCard2';\n\nimport { MediaMetadata, VideoMetadata } from '../../types';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n    version?: '1' | '2';\n\n    /* Only used for version 2 */\n    subjectImageComponent?: React.ReactNode;\n    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };\n    handleXClick?: () => void;\n    getFileMetadata?: (url: string) => MediaMetadata;\n    getVideoMetadata?: (url: string) => VideoMetadata;\n    onMediaAttachmentClick?: (url: string) => void;\n    bottomRightIcon?: CredentialIconType;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({\n    credential,\n    issueeOverride,\n    className = '',\n    version = '1',\n    subjectImageComponent,\n    // convertTagsToSkills,\n    handleXClick,\n    getFileMetadata,\n    getVideoMetadata,\n    onMediaAttachmentClick,\n    bottomRightIcon,\n}) => {\n    const [loading, setLoading] = useState(true);\n    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);\n\n    useEffect(() => {\n        const verify = async () => {\n            const wallet = await initLearnCard();\n            const verification = await wallet.invoke.verifyCredential(credential, {}, true);\n            setVCVerification(verification);\n            setLoading(false);\n        };\n\n        verify();\n    }, [credential]);\n\n    if (version === '1') {\n        return (\n            <VCDisplayCard\n                credential={credential}\n                issueeOverride={issueeOverride}\n                className={className}\n                loading={loading}\n                verification={vcVerification}\n            />\n        );\n    }\n    return (\n        <VCDisplayCard2\n            credential={credential}\n            issueeOverride={issueeOverride}\n            verificationInProgress={loading}\n            verificationItems={vcVerification}\n            subjectImageComponent={subjectImageComponent}\n            // convertTagsToSkills={convertTagsToSkills}\n            handleXClick={handleXClick}\n            getFileMetadata={getFileMetadata}\n            getVideoMetadata={getVideoMetadata}\n            onMediaAttachmentClick={onMediaAttachmentClick}\n            bottomRightIcon={bottomRightIcon}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,SAAgC,CAAC;AAAA,EAC1C,UAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAY,GAAA,EAAA;AAAA,EACZ,OAAU,GAAA,GAAA;AAAA,EACV,qBAAA;AAAA;AAAA,EAEA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,sBAAA;AAAA,EACA,eAAA;AACJ,CAAM,KAAA;AACF,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA,CAA6B,EAAE,CAAA,CAAA;AAE3E,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,MAAM,SAAS,MAAY,OAAA,CAAA,IAAA,EAAA,IAAA,EAAA,aAAA;AACvB,MAAM,MAAA,MAAA,GAAS,MAAM,aAAc,EAAA,CAAA;AACnC,MAAM,MAAA,YAAA,GAAe,MAAM,MAAO,CAAA,MAAA,CAAO,iBAAiB,UAAY,EAAA,IAAI,IAAI,CAAA,CAAA;AAC9E,MAAA,iBAAA,CAAkB,YAAY,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KACpB,CAAA,CAAA;AAEA,IAAO,MAAA,EAAA,CAAA;AAAA,GACX,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,IAAI,YAAY,GAAK,EAAA;AACjB,IACI,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACG,UAAA;AAAA,QACA,cAAA;AAAA,QACA,SAAA;AAAA,QACA,OAAA;AAAA,QACA,YAAc,EAAA,cAAA;AAAA,OAAA;AAAA,KAClB,CAAA;AAAA,GAER;AACA,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACG,UAAA;AAAA,MACA,cAAA;AAAA,MACA,sBAAwB,EAAA,OAAA;AAAA,MACxB,iBAAmB,EAAA,cAAA;AAAA,MACnB,qBAAA;AAAA,MAEA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,gBAAA;AAAA,MACA,sBAAA;AAAA,MACA,eAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAER;;;;"}

package/dist/esm/{VCDisplayCard2-a3f671bc.js → VCDisplayCard2-fc5c4225.js}

@@ -1,5 +1,4 @@
 import React, { useRef, useEffect, useState, createContext, Component, Children, cloneElement, useLayoutEffect } from 'react';
-import './index-cbd2e9db.js';
 import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-8b8b7a76.js';
 import { U as UserProfilePicture } from './UserProfilePicture-50c34186.js';
 import { a as getColorForVerificationStatus, j as format$1, h as getImageFromProfile, b as getInfoFromCredential, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-00099c70.js';
@@ -7,12 +6,13 @@ import { d as getBaseUrl, e as VideoIcon, C as Camera, G as GenericDocumentIcon,
 import './index-cb3a593b.js';
 import { L as Lightbox, X } from './Lightbox-f0338a0c.js';
 import { V as VerificationStatusEnum } from './types.esm-d6b48609.js';
+import { u as useT } from './i18n-8454d6ea.js';
 import { A as AlignmentsBox, b as CertificateDisplayCard } from './CertificateDisplayCard-4e9254e0.js';
 import { I as IDIcon, Q as QRCodeIcon, A as AwardRibbon } from './QRCodeIcon-8eef4f7c.js';
 import { a as LCCategoryEnum } from './index-28917993.js';
 import { P as PuzzlePiece } from './PuzzlePiece-a3d9cc62.js';
 import IDSleeve from './id-sleeve.png';
-import { a as MeritBadgeDisplayCard } from './MeritBadgeDisplayCard-a7a504e0.js';
+import { a as MeritBadgeDisplayCard } from './MeritBadgeDisplayCard-2029a552.js';
 
 const RoundedX = ({ className = "" }) => {
   return /* @__PURE__ */ React.createElement(
@@ -678,9 +678,21 @@ var e=function(t){return "number"==typeof t},i=function(t){return "function"==ty
 
 function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},s.apply(this,arguments)}function c(e,t){return c=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},c(e,t)}function d(e,t){if(null==e)return {};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}var f=/*#__PURE__*/createContext({}),u=/*#__PURE__*/createContext("portal"),h=/*#__PURE__*/function(r){var n,o;function p(){for(var e,t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];return (e=r.call.apply(r,[this].concat(n))||this).inProgressAnimations={},e.flipCallbacks={},e.el=void 0,e}o=r,(n=p).prototype=Object.create(o.prototype),n.prototype.constructor=n,c(n,o);var l=p.prototype;return l.getSnapshotBeforeUpdate=function(t){return t.flipKey!==this.props.flipKey&&this.el?q({element:this.el,flipCallbacks:this.flipCallbacks,inProgressAnimations:this.inProgressAnimations,portalKey:this.props.portalKey}):null},l.componentDidUpdate=function(e,r,n){this.props.flipKey!==e.flipKey&&this.el&&L({flippedElementPositionsBeforeUpdate:n.flippedElementPositions,cachedOrderedFlipIds:n.cachedOrderedFlipIds,containerEl:this.el,inProgressAnimations:this.inProgressAnimations,flipCallbacks:this.flipCallbacks,applyTransformOrigin:this.props.applyTransformOrigin,spring:this.props.spring,debug:this.props.debug,portalKey:this.props.portalKey,staggerConfig:this.props.staggerConfig,handleEnterUpdateDelete:this.props.handleEnterUpdateDelete,decisionData:{previous:e.decisionData,current:this.props.decisionData},onComplete:this.props.onComplete,onStart:this.props.onStart});},l.render=function(){var e=this,t=this.props,r=t.portalKey,n=/*#__PURE__*/React.createElement(f.Provider,{value:this.flipCallbacks},/*#__PURE__*/React.createElement(t.element,{className:t.className,ref:function(t){return e.el=t}},this.props.children));return r&&(n=/*#__PURE__*/React.createElement(u.Provider,{value:r},n)),n},p}(Component);h.defaultProps={applyTransformOrigin:!0,element:"div"};var m=["children","flipId","inverseFlipId","portalKey"],y=["children","flipId","shouldFlip","shouldInvert","onAppear","onStart","onStartImmediate","onComplete","onExit","onSpringUpdate"],g=function(e){var t,i=e.children,o=e.flipId,p$1=e.inverseFlipId,s=e.portalKey,c=d(e,m),f=i,u=function(e){return "function"==typeof e}(f);if(!u)try{f=Children.only(i);}catch(e){throw new Error("Each Flipped component must wrap a single child")}c.scale||c.translate||c.opacity||p.assign(c,{translate:!0,scale:!0,opacity:!0});var h=((t={})[h$1.DATA_FLIP_CONFIG]=JSON.stringify(c),t);return void 0!==o?h[h$1.DATA_FLIP_ID]=String(o):p$1&&(h[h$1.DATA_INVERSE_FLIP_ID]=String(p$1)),void 0!==s&&(h[h$1.DATA_PORTAL_KEY]=s),u?f(h):/*#__PURE__*/cloneElement(f,h)},v=function(e){var t=e.children,n=e.flipId,o=e.shouldFlip,p$1=e.shouldInvert,l=e.onAppear,a=e.onStart,c=e.onStartImmediate,h=e.onComplete,m=e.onExit,v=e.onSpringUpdate,I=d(e,y);return t?I.inverseFlipId?/*#__PURE__*/React.createElement(g,s({},I),t):/*#__PURE__*/React.createElement(u.Consumer,null,function(e){return React.createElement(f.Consumer,null,function(d){return p.isObject(d)&&n&&(d[n]={shouldFlip:o,shouldInvert:p$1,onAppear:l,onStart:a,onStartImmediate:c,onComplete:h,onExit:m,onSpringUpdate:v}),/*#__PURE__*/React.createElement(g,s({flipId:n},I,{portalKey:e}),t)})}):null};v.displayName="Flipped";
 
+const MESSAGE_KEYS = {
+  Valid: "valid",
+  Invalid: "invalid",
+  "Not Revoked": "notRevoked",
+  Revoked: "revoked",
+  "Does Not Expire": "doesNotExpire",
+  Expired: "expired",
+  Active: "active",
+  "Boost Credential could not be verified.": "couldNotVerify",
+  "Boost Credential could not be verified": "couldNotVerify"
+};
 const VerificationRow = ({ verification }) => {
   var _a, _b;
   const [showInfo, setShowInfo] = useState(false);
+  const t = useT();
   const statusColor = getColorForVerificationStatus(verification.status);
   const getIcon = () => {
     switch (verification.status) {
@@ -692,9 +704,16 @@ const VerificationRow = ({ verification }) => {
         return /* @__PURE__ */ React.createElement(X, { className: "w-[15px] h-[15px]" });
     }
   };
-  let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
+  const statusText = t(`verification.status.${String(verification.status).toLowerCase()}`);
+  const translateMessage = (msg) => {
+    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 ? `${checkLabel}: ${translateMessage(verification.message)}` : translateMessage(verification.message);
   if (verification.status === VerificationStatusEnum.Failed) {
-    primaryText = (_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "";
+    primaryText = translateMessage((_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "");
   }
   primaryText = capitalize(primaryText);
   const infoText = "";
@@ -705,7 +724,7 @@ const VerificationRow = ({ verification }) => {
       style: { color: statusColor }
     },
     getIcon(),
-    verification.status,
+    statusText,
     infoText 
   ), showInfo && infoText && /* @__PURE__ */ React.createElement(
     InfoBox,
@@ -719,7 +738,8 @@ const VerificationRow = ({ verification }) => {
 
 const VerificationsBox = ({ verificationItems }) => {
   const [showInfo, setShowInfo] = useState(false);
-  return /* @__PURE__ */ React.createElement("div", { className: "verifications-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[20px] leading-[20px] text-grayscale-900" }, "Credential Verifications"), /* @__PURE__ */ React.createElement(
+  const t = useT();
+  return /* @__PURE__ */ React.createElement("div", { className: "verifications-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[20px] leading-[20px] text-grayscale-900" }, t("verification.title")), /* @__PURE__ */ React.createElement(
     "button",
     {
       className: "absolute top-[17px] right-[17px]",
@@ -729,13 +749,7 @@ const VerificationsBox = ({ verificationItems }) => {
       }
     },
     /* @__PURE__ */ React.createElement(InfoIcon, { color: showInfo ? "#6366F1" : void 0 })
-  ), showInfo && /* @__PURE__ */ React.createElement(
-    InfoBox,
-    {
-      text: "Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy.",
-      handleClose: () => setShowInfo(false)
-    }
-  ), verificationItems.map((verification, index) => /* @__PURE__ */ React.createElement(VerificationRow, { key: index, verification })));
+  ), showInfo && /* @__PURE__ */ React.createElement(InfoBox, { text: t("verification.infoText"), handleClose: () => setShowInfo(false) }), verificationItems.map((verification, index) => /* @__PURE__ */ React.createElement(VerificationRow, { key: index, verification })));
 };
 
 const Flipped$4 = v;
@@ -1524,4 +1538,4 @@ const VCDisplayCard2 = ({
 };
 
 export { VCDisplayCard2 as V, VCDisplayCardSkillsCount as a, VCIDDisplayCard as b };
-//# sourceMappingURL=VCDisplayCard2-a3f671bc.js.map
+//# sourceMappingURL=VCDisplayCard2-fc5c4225.js.map