Merge pull request #27 from gunet/fix/expiration

Fix expiration display base on first `exp` and then `expiry_date`

Author: pstamatop

src/components/Credentials/CredentialImage.js

@@ -25,7 +25,7 @@ const CredentialImage = ({ credential, className, onClick, showRibbon = true, vc
 				<img src={parsedCredential.credentialImage.credentialImageURL} alt={"Credential"} className={className} onClick={onClick} />
 			)}
 			{parsedCredential && showRibbon &&
-				<ExpiredRibbon parsedCredential={parsedCredential} />
+				<ExpiredRibbon parsedCredential={parsedCredential.beautifiedForm} />
 			}
 			{vcEntityInstances && showRibbon &&
 				<UsagesRibbon vcEntityInstances={vcEntityInstances} />

src/components/Credentials/CredentialLayout.js

@@ -61,7 +61,7 @@ const CredentialLayout = ({ children, title = null }) => {
 			if ('error' in c) {
 				return;
 			}
-			setIsExpired(CheckExpired(c.beautifiedForm.expiry_date))
+			setIsExpired(CheckExpired(c.beautifiedForm.exp ?? c.beautifiedForm.expiry_date ))
 			setCredentialFriendlyName(c.credentialFriendlyName);
 		});
 	}, [vcEntity, container]);

src/components/Credentials/ExpiredRibbon.js

@@ -8,8 +8,8 @@ const ExpiredRibbon = ({ parsedCredential }) => {
 
 	return (
 		<>
-			{parsedCredential && CheckExpired(parsedCredential.expiry_date) &&
-				<div className={`absolute bottom-0 right-0 text-white text-xs py-1 px-3 rounded-tl-lg rounded-br-2xl border-t border-l border-white ${CheckExpired(parsedCredential.expirationDate) ? 'bg-red-600' : 'bg-green-500'}`}>
+			{parsedCredential && CheckExpired(parsedCredential.exp ?? parsedCredential.expiry_date) &&
+				<div className={`absolute bottom-0 right-0 text-white text-xs py-1 px-3 rounded-tl-lg rounded-br-2xl border-t border-l border-white ${CheckExpired(parsedCredential.exp ?? parsedCredential.expiry_date) ? 'bg-red-600' : 'bg-green-500'}`}>
 					{t('expiredRibbon.expired')}
 				</div>
 			}

src/components/Credentials/RenderCustomSvgTemplate.js

@@ -49,7 +49,7 @@ const renderCustomSvgTemplate = async ({ beautifiedForm, name, description, logo
 			.replace(/{{textColor}}/g, textColor)
 			.replace(/{{description}}/g, description);
 
-		const expiryDate = jsonpointer.get(beautifiedForm, "/expiry_date");
+		const expiryDate = jsonpointer.get(beautifiedForm, "/expiry_date") ?? new Date(jsonpointer.get(beautifiedForm, "/exp") * 1000).toISOString();
 		svgContent = svgContent.replace(/{{\/expiry_date}}/g, expiryDate ? `Expiry Date: ${formatDate(expiryDate, 'date')}` : '');
 
 		return `data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}`;

src/functions/CheckExpired.js

@@ -1,6 +1,11 @@
 // CheckExpired.js
 export function CheckExpired(expiry_date) {
+	if (!expiry_date) {
+		return false;
+	}
+
+	const parsedExpiryDate = typeof expiry_date == 'string' ? expiry_date : new Date(expiry_date * 1000).toISOString();
 	const today = new Date();
-	const expirationDate = new Date(expiry_date);
+	const expirationDate = new Date(parsedExpiryDate);
 	return expirationDate < today;
 };

src/functions/DateFormat.js

@@ -38,4 +38,4 @@ export function formatDate(value, format = 'datetime') {
 		: { day: '2-digit', month: '2-digit', year: 'numeric' };
 
 	return date.toLocaleDateString('en-GB', options);
-}
+}