Merge pull request #207 from wwWallet/fix/status-ribbon-hide

'Expired Ribbon' Not Displaying as Expected in Credential Selection

Author: gkatrakazas

src/components/Credentials/CredentialImage.js

@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react"
 import { parseCredential } from "../../functions/parseCredential";
+import StatusRibbon from '../../components/Credentials/StatusRibbon';
 
 
-export const CredentialImage = ({ credential, className, onClick }) => {
+export const CredentialImage = ({ credential, className, onClick, showRibbon = true }) => {
 	const [parsedCredential, setParsedCredential] = useState(null);
 
 	useEffect(() => {
@@ -13,9 +14,14 @@ export const CredentialImage = ({ credential, className, onClick }) => {
 
 	return (
 		<>
-			{parsedCredential &&
-				<img src={parsedCredential.credentialBranding.image.url} alt={"Credential"} className={className} onClick={onClick} />
-			}
+			{parsedCredential && (
+				<>
+					<img src={parsedCredential.credentialBranding.image.url} alt={"Credential"} className={className} onClick={onClick} />
+					{showRibbon &&
+						<StatusRibbon credential={credential} />
+					}
+				</>
+			)}
 		</>
 	)
 }

src/components/Popups/SelectCredentials.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { FaShare } from 'react-icons/fa';
 import { useTranslation } from 'react-i18next';
-import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { useApi } from '../../api';
 import { CredentialImage } from '../Credentials/CredentialImage';
 
@@ -134,7 +133,6 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman
 						<div className="m-3 flex justify-center">
 							<div className="relative rounded-xl w-2/3 overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer">
 								<CredentialImage key={image.credentialIdentifier} credential={image.credential} onClick={() => handleClick(image.credentialIdentifier)} className={"w-full object-cover rounded-xl"} />
-								<StatusRibbon credential={image.credential} />
 							</div>
 						</div>
 					))}

src/pages/History/History.js

@@ -10,7 +10,6 @@ import { useApi } from '../../api';
 
 import CredentialInfo from '../../components/Credentials/CredentialInfo';
 import { formatDate } from '../../functions/DateFormat';
-import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { base64url } from 'jose';
 import { CredentialImage } from '../../components/Credentials/CredentialImage';
 
@@ -132,7 +131,6 @@ const History = () => {
 									<React.Fragment key={Math.random()}>
 										<div className="relative rounded-xl xl:w-full md:w-full  sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full">
 											<CredentialImage credential={credential} className={"w-full object-cover rounded-xl"} />
-											<StatusRibbon credential={credential} />
 										</div>
 										<div className="flex items-center justify-end mt-2 mr-3">
 											<span className="mr-4">{currentSlide} of {matchingCredentials.length}</span>

src/pages/Home/CredentialDetail.js

@@ -13,7 +13,6 @@ import CredentialJson from '../../components/Credentials/CredentialJson';
 import CredentialDeleteButton from '../../components/Credentials/CredentialDeleteButton';
 import FullscreenPopup from '../../components/Popups/FullscreenImg';
 import DeletePopup from '../../components/Popups/DeletePopup';
-import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { CredentialImage } from '../../components/Credentials/CredentialImage';
 
 const CredentialDetail = () => {
@@ -87,7 +86,6 @@ const CredentialDetail = () => {
 							// Open the modal when the credential is clicked
 							<div className="relative rounded-xl xl:w-4/5 pt-5 md:w-full sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full" onClick={() => setShowFullscreenImgPopup(true)}>
 								<CredentialImage credential={vcEntity.credential} className={"w-full object-cover rounded-xl"} />
-								<StatusRibbon credential={vcEntity.credential} />
 							</div>
 						) : (
 							<></>
@@ -113,7 +111,7 @@ const CredentialDetail = () => {
 					isOpen={showFullscreenImgPopup}
 					onClose={() => setShowFullscreenImgPopup(false)}
 					content={
-						<CredentialImage credential={vcEntity.credential} className={"max-w-full max-h-full rounded-xl"} />
+						<CredentialImage credential={vcEntity.credential} className={"max-w-full max-h-full rounded-xl"} showRibbon={false} />
 					}
 				/>
 			)}

src/pages/Home/Home.js

@@ -19,7 +19,6 @@ import CredentialDeleteButton from '../../components/Credentials/CredentialDelet
 import QRCodeScanner from '../../components/QRCodeScanner/QRCodeScanner';
 import FullscreenPopup from '../../components/Popups/FullscreenImg';
 import DeletePopup from '../../components/Popups/DeletePopup';
-import StatusRibbon from '../../components/Credentials/StatusRibbon';
 import { CredentialImage } from '../../components/Credentials/CredentialImage';
 
 const Home = () => {
@@ -159,7 +158,6 @@ const Home = () => {
 											<>
 												<div className="relative rounded-xl xl:w-4/5 md:w-full	sm:w-full overflow-hidden transition-shadow shadow-md hover:shadow-lg cursor-pointer w-full" onClick={() => { setShowFullscreenImgPopup(true); setSelectedVcEntity(vcEntity); }}>
 													<CredentialImage credential={vcEntity.credential} className={"w-full h-full object-cover rounded-xl"} />
-													<StatusRibbon credential={vcEntity.credential} />
 												</div>
 												<div className="flex items-center justify-end mt-2 mr-3">
 													<span className="mr-4">{currentSlide} of {vcEntityList.length}</span>
@@ -189,7 +187,6 @@ const Home = () => {
 									onClick={() => handleImageClick(vcEntity)}
 								>
 									<CredentialImage credential={vcEntity.credential} className={"w-full h-full object-cover rounded-xl"} />
-									<StatusRibbon credential={vcEntity.credential} />
 								</div>
 							))}
 							<div
@@ -216,7 +213,7 @@ const Home = () => {
 					isOpen={showFullscreenImgPopup}
 					onClose={() => setShowFullscreenImgPopup(false)}
 					content={
-						<CredentialImage credential={selectedVcEntity.credential} className={"max-w-full max-h-full rounded-xl"} />
+						<CredentialImage credential={selectedVcEntity.credential} className={"max-w-full max-h-full rounded-xl"} showRibbon={false} />
 					}
 				/>
 			)}