Skip to content

Commit 4bdcbc7

Browse files
gkatrakazasgkatrakazas
committed
Use useTranslate for texts, update message text state and fix some code format issues
1 parent ff27a79 commit 4bdcbc7

File tree

3 files changed

+46
-35
lines changed

3 files changed

+46
-35
lines changed

‎src/components/Popups/MessagePopup.js

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,49 @@
11
// MessagePopup.js
22
import React from 'react';
33
import { FaCheckCircle, FaExclamationCircle } from 'react-icons/fa';
4+
import { useTranslation } from 'react-i18next';
45

56
const MessagePopup = ({ type, message, onClose }) => {
6-
const { title, description } = message || {};
7+
const { title, description } = message || {};
8+
const { t } = useTranslation();
79

8-
const IconComponent = type === 'error' ? FaExclamationCircle : FaCheckCircle;
10+
const IconComponent = type === 'error' ? FaExclamationCircle : FaCheckCircle;
911

10-
const titleColor = type === 'error' ? 'text-red-500' : 'text-green-600';
12+
const titleColor = type === 'error' ? 'text-red-500' : 'text-green-600';
1113

12-
return (
13-
<div className="fixed inset-0 flex items-center justify-center z-50">
14-
<div className="absolute inset-0 bg-black opacity-50" onClick={() => onClose()}></div>
14+
return (
15+
<div className="fixed inset-0 flex items-center justify-center z-50">
16+
<div className="absolute inset-0 bg-black opacity-50" onClick={() => onClose()}></div>
1517

16-
<div className="bg-white p-4 rounded-lg shadow-lg w-full lg:w-[33.33%] sm:w-[66.67%] z-10 relative m-4">
17-
<div className="flex items-start justify-between border-b rounded-t dark:border-gray-600">
18+
<div className="bg-white p-4 rounded-lg shadow-lg w-full lg:w-[33.33%] sm:w-[66.67%] z-10 relative m-4">
19+
<div className="flex items-start justify-between border-b rounded-t dark:border-gray-600">
1820

19-
<h2 className={`text-lg font-bold mb-2 flex items-center ${titleColor}`}>
20-
<IconComponent size={20} className="inline mr-1" />
21-
{title}
22-
</h2>
23-
<button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" onClick={() => onClose()}>
24-
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
25-
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
26-
</svg>
27-
</button>
28-
</div>
29-
<hr className="mb-2 border-t border-custom-blue/80" />
30-
<p className="mb-2 mt-4">
31-
{description}
32-
</p>
33-
<div className="flex justify-end space-x-2 pt-4">
34-
<button
35-
type="button"
36-
className="px-4 py-2 text-white bg-gray-500 hover:bg-gray-600 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-300 dark:hover:bg-gray-400"
37-
onClick={onClose}
38-
>
39-
Close
40-
</button>
41-
</div>
42-
</div>
43-
</div>
44-
);
21+
<h2 className={`text-lg font-bold mb-2 flex items-center ${titleColor}`}>
22+
<IconComponent size={20} className="inline mr-1" />
23+
{title}
24+
</h2>
25+
<button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" onClick={() => onClose()}>
26+
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
27+
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
28+
</svg>
29+
</button>
30+
</div>
31+
<hr className="mb-2 border-t border-custom-blue/80" />
32+
<p className="mb-2 mt-4">
33+
{description}
34+
</p>
35+
<div className="flex justify-end space-x-2 pt-4">
36+
<button
37+
type="button"
38+
className="px-4 py-2 text-white bg-gray-500 hover:bg-gray-600 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-300 dark:hover:bg-gray-400"
39+
onClick={onClose}
40+
>
41+
{t('messagePopup.close')}
42+
</button>
43+
</div>
44+
</div>
45+
</div>
46+
);
4547
};
4648

4749
export default MessagePopup;

‎src/components/useCheckURL.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect, useState, Dispatch, SetStateAction } from 'react';
22
import { useApi } from '../api';
33
import { useLocalStorageKeystore } from '../services/LocalStorageKeystore';
4+
import { useTranslation } from 'react-i18next';
45

56
export enum HandleOutboundRequestError {
67
INSUFFICIENT_CREDENTIALS = "INSUFFICIENT_CREDENTIALS",
@@ -30,6 +31,7 @@ function useCheckURL(urlToCheck: string): {
3031
const [textMessagePopup, setTextMessagePopup] = useState<{ title: string, description: string }>({ title: "", description: "" });
3132
const [typeMessagePopup, setTypeMessagePopup] = useState<string>("");
3233
const keystore = useLocalStorageKeystore();
34+
const { t } = useTranslation();
3335

3436
useEffect(() => {
3537

@@ -41,7 +43,7 @@ function useCheckURL(urlToCheck: string): {
4143
const { redirect_to, conformantCredentialsMap, verifierDomainName, preauth, ask_for_pin, error } = res.data;
4244
if (error && error == HandleOutboundRequestError.INSUFFICIENT_CREDENTIALS) {
4345
console.error(`${HandleOutboundRequestError.INSUFFICIENT_CREDENTIALS}`);
44-
setTextMessagePopup({ title: "Insufficient Credentials", description: "One or more of the credentials you want to present do not exist for selection." });
46+
setTextMessagePopup({ title: `${t('messagePopup.insufficientCredentials.title')}`, description: `${t('messagePopup.insufficientCredentials.description')}` });
4547
setTypeMessagePopup('error');
4648
setMessagePopup(true);
4749
return false;

‎src/locales/en.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,13 @@
7878
"weakPasswordError": "Weak password",
7979
"welcomeMessage": "Welcome to <highlight>wwWallet</highlight>"
8080
},
81+
"messagePopup": {
82+
"close": "Close",
83+
"insufficientCredentials": {
84+
"title": "Insufficient Credentials",
85+
"description": "One or more of the credentials you want to present do not exist for selection."
86+
}
87+
},
8188
"notFound": {
8289
"homeButton": "Back to Home",
8390
"message": "Sorry, the page you're looking for cannot be accessed",

0 commit comments

Comments
 (0)