@learncard/react 2.3.57 → 2.3.60

package/dist/esm/{VCDisplayCard-b9c4a087.js → VCDisplayCard-bce0b106.js}

@@ -1,10 +1,9 @@
-import React from 'react';
-import { F as FlippyCard } from './FlippyCard-682649d7.js';
+import React, { useState } from 'react';
+import { F as FlippyCard } from './FlippyCard-f4f0b3f8.js';
 import FatArrow from './icon.green.fat-arrow.png';
-import FlipArrowRight from './ArrowArcRight.svg';
 import DefaultFace from './default-face.jpeg';
 import { a as VCVerificationCheckWithText } from './VCVerificationCheck-b2de0477.js';
-import { g as getNameFromProfile, a as getImageFromProfile, V as VCDisplayBackFace } from './VCDisplayBackFace-84d93238.js';
+import { g as getNameFromProfile, a as getImageFromProfile, V as VCDisplayBackFace } from './VCDisplayBackFace-b3aff90b.js';
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -5679,9 +5678,13 @@ const VCDisplayFrontFace = ({
   hideProfileBubbles = false,
   credentialSubject,
   className = "",
-  loading
+  loading,
+  handleClick,
+  overrideCardImageComponent,
+  overrideCardTitle,
+  customHeaderComponent
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e;
   const credentialAchievementImage = ((_b = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _a.image) == null ? void 0 : _b.id) || ((_c = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _c.image);
   const issuerName = getNameFromProfile(issuer != null ? issuer : "");
   const issueeName = getNameFromProfile(issuee != null ? issuee : "");
@@ -5717,26 +5720,29 @@ const VCDisplayFrontFace = ({
   if (issuerImageComponent) {
     issuerImageEl = issuerImageComponent;
   }
+  const credImg = credentialAchievementImage ? /* @__PURE__ */ React.createElement("img", {
+    className: "h-full w-full object-cover",
+    src: credentialAchievementImage != null ? credentialAchievementImage : "",
+    alt: "Credential Achievement Image"
+  }) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  const renderCardImg = overrideCardImageComponent ? overrideCardImageComponent : credImg;
+  const cardTitle = overrideCardTitle ? overrideCardTitle : title;
   return /* @__PURE__ */ React.createElement("div", {
-    className: `flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[600px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
+    className: `z-[9] vc-display-main-card-front flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[600px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
   }, /* @__PURE__ */ React.createElement("section", {
     className: "bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[77%]"
   }), /* @__PURE__ */ React.createElement("section", {
     className: "flex flex-col items-center justify-center z-10 text-center credential-thumb-img"
   }, /* @__PURE__ */ React.createElement("section", {
     className: "max-w-[100px] max-h-[100px]"
-  }, credentialAchievementImage && /* @__PURE__ */ React.createElement("img", {
-    className: "h-full w-full object-cover",
-    src: credentialAchievementImage != null ? credentialAchievementImage : "",
-    alt: "Credential Achievement Image"
-  })), /* @__PURE__ */ React.createElement("section", {
+  }, renderCardImg), /* @__PURE__ */ React.createElement("section", {
     className: "flex flex-row  w-full line-clamp-2"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "flex flex-row w-full line-clamp-2 py-4 vc-flippy-card-title-front "
   }, /* @__PURE__ */ React.createElement("h3", {
     className: "vc-thumbnail-title w-full text-2xl line-clamp-2 tracking-wide leading-snug text-center vc-display-title text-gray-900 font-medium",
     "data-testid": "vc-thumbnail-title"
-  }, title != null ? title : ""))), /* @__PURE__ */ React.createElement("section", {
+  }, cardTitle != null ? cardTitle : "")), customHeaderComponent && customHeaderComponent), /* @__PURE__ */ React.createElement("section", {
     className: "flex flex-row items-center justify-center mt-2 w-full my-2 vc-card-issuer-thumbs"
   }, !hideProfileBubbles && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     className: "flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white"
@@ -5756,22 +5762,21 @@ const VCDisplayFrontFace = ({
   }, issueeName), " on", " ", createdAt != null ? createdAt : "", " by", " ", /* @__PURE__ */ React.createElement("span", {
     className: "font-bold text-gray-900"
   }, " ", issuerName))), /* @__PURE__ */ React.createElement("button", {
-    className: "cursor-alias bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full"
+    onClick: handleClick,
+    className: "cursor-alias bg-white my-3 border-0 text-indigo-500 font-semibold py-2 px-4 sl"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "flex justify-center"
   }, /* @__PURE__ */ React.createElement("p", {
     className: "flex items-center"
-  }, "Details"), /* @__PURE__ */ React.createElement("img", {
-    className: "h-8 w-8 my-0 mx-1",
-    src: (_f = FlipArrowRight) != null ? _f : "",
-    alt: "Flip Card"
-  })))), /* @__PURE__ */ React.createElement("div", {
+  }, "View Details")))), /* @__PURE__ */ React.createElement("div", {
     className: "flex items-center justify-center w-full"
   }, /* @__PURE__ */ React.createElement(VCVerificationCheckWithText, {
     loading
   })));
 };
 
+const FRONT_FACE = "front";
+const BACK_FACE = "back";
 const getInfoFromCredential = (credential) => {
   var _a;
   const { issuer, issuanceDate } = credential;
@@ -5790,8 +5795,13 @@ const VCDisplayCard = ({
   verification = [],
   hideProfileBubbles = false,
   subjectImageComponent,
-  issuerImageComponent
+  issuerImageComponent,
+  overrideDetailsComponent,
+  overrideCardTitle,
+  overrideCardImageComponent,
+  customHeaderComponent
 }) => {
+  const [flipState, setFlipState] = useState(FRONT_FACE);
   const {
     title,
     createdAt,
@@ -5801,28 +5811,44 @@ const VCDisplayCard = ({
   } = getInfoFromCredential(credential);
   const issuee = issueeOverride || _issuee;
   const issuer = issuerOverride || _issuer;
-  return /* @__PURE__ */ React.createElement(FlippyCard, null, /* @__PURE__ */ React.createElement(VCDisplayFrontFace, {
+  const handleFlip = () => {
+    if (flipState === FRONT_FACE) {
+      setFlipState(BACK_FACE);
+    }
+    if (flipState === BACK_FACE) {
+      setFlipState(FRONT_FACE);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(FlippyCard, {
+    flipState
+  }, /* @__PURE__ */ React.createElement(VCDisplayFrontFace, {
     title,
     credentialSubject,
+    customHeaderComponent,
     issuer,
     issuee,
     subjectImageComponent,
     issuerImageComponent,
+    overrideCardImageComponent,
+    overrideCardTitle,
     hideProfileBubbles,
     createdAt,
     className,
-    loading
+    loading,
+    handleClick: handleFlip
   }), /* @__PURE__ */ React.createElement(VCDisplayBackFace, {
     title,
     credentialSubject,
+    overrideDetailsComponent,
     issuer,
     issuee,
     createdAt,
     className,
     loading,
-    verification
+    verification,
+    handleClick: handleFlip
   }));
 };
 
 export { VCDisplayCard as V };
-//# sourceMappingURL=VCDisplayCard-b9c4a087.js.map
+//# sourceMappingURL=VCDisplayCard-bce0b106.js.map