Skip to content

Commit

Permalink
MOSIP-34965: Updated the confirmation page in all the pages (#744)
Browse files Browse the repository at this point in the history 
Signed-off-by: Anil_Kumar_Majji <[email protected]>
  • Loading branch information
@Anil-kumar-Majji
Anil-kumar-Majji authored Sep 11, 2024
1 parent 1fc438e commit 8a10027
Show file tree
Hide file tree
Showing 6 changed files with 572 additions and 551 deletions.
299 changes: 153 additions & 146 deletions pmp-reactjs-ui/src/pages/authenticationServices/CreateOidcClient.js
View file

Large diffs are not rendered by default.

270 changes: 138 additions & 132 deletions pmp-reactjs-ui/src/pages/authenticationServices/EditOidcClient.js
View file

Large diffs are not rendered by default.

161 changes: 84 additions & 77 deletions pmp-reactjs-ui/src/pages/authenticationServices/GenerateApiKey.js
View file

Large diffs are not rendered by default.

91 changes: 27 additions & 64 deletions pmp-reactjs-ui/src/pages/common/Confirmation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,80 +3,43 @@ import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { getUserProfile } from '../../services/UserProfileService';
import { isLangRTL, moveToHome } from '../../utils/AppUtils';

import backArrow from '../../svg/back_arrow.svg';
import successIcon from '../../svg/success_message_icon.svg';

function Confirmation() {
function Confirmation({ confirmationData, onClickFunction }) {

const navigate = useNavigate();
const { t } = useTranslation();
const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
const [confirmationData, setConfirmationData] = useState({});
const [style, setStyle] = useState({});

useEffect(() => {
const confirmationData = localStorage.getItem('confirmationData');
if (confirmationData) {
try {
const data = JSON.parse(confirmationData);
setConfirmationData(data);
setStyle(data.styleSet);
} catch (error) {
console.error('Error in confirmation page :', error);
}
} else {
navigate('/partnermanagement');
}
}, [navigate]);
const [style, setStyle] = useState(confirmationData.styleSet);

return (
<div className={`mt-5 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter`}>
<div className="flex-col">
<div className={`flex items-start space-x-3`}>
<img src={backArrow} onClick={() => navigate(confirmationData.backUrl)} alt="" className={`cursor-pointer max-[450px]:h-3 ${isLoginLanguageRTL ? "ml-2 rotate-180" : ""} mt-[1%] max-[450px]:mt-[3%]`} />
<div className="flex-col">
<h1 className="font-semibold text-xl text-dark-blue max-[450px]:text-sm">{t(confirmationData.title)}</h1>
<div className="flex space-x-1 max-[350px]:flex-col">
<p onClick={() => moveToHome(navigate)} className="font-semibold text-tory-blue text-xs cursor-pointer">
{t('commons.home')} /
</p>
<p onClick={() => navigate(confirmationData.backUrl)} className="font-semibold text-tory-blue text-xs cursor-pointer">
{t(confirmationData.subNavigation)}
</p>
<div className="flex items-center justify-center w-[100%] h-[480px] bg-snow-white mt-[1.5%] rounded-lg shadow-md">
<div className="flex-col justify-center items-center">
<img src={successIcon} alt="" className={`${isLoginLanguageRTL ? (style && style.imgIconRtl ? style.imgIconRtl : "") : (style && style.imgIconLtr ? style.imgIconLtr : "")} h-40`} />
<div className="text-center space-y-1">
<h1 className="font-bold text-black text-lg max-[450px]:text-sm">
{t(confirmationData.header)}
</h1>
<p className="text-[#666666] text-sm font-semibold max-[450px]:text-xs">
{t(confirmationData.description)}
</p>
{!confirmationData.customBtnName &&
<div className={`flex gap-x-3 mt-12 max-[450px]:flex-col max-[450px]:gap-x-0 justify-center`}>
<button onClick={() => navigate(confirmationData.backUrl)} type="button" className="text-white font-semibold bg-tory-blue rounded-md text-sm px-12 py-4 max-[450px]:text-xs max-[450px]:mx-6 max-[450px]:mb-2">
{t('commons.goBack')}
</button>
<button onClick={() => moveToHome(navigate)} type="button" className="text-[#1447b2] font-semibold bg-white border border-[#1447b2] rounded-md text-sm px-12 py-4 max-[450px]:text-xs max-[450px]:mx-6">
{t('commons.home')}
</button>
</div>
</div>
</div>
<div className="flex items-center justify-center w-[100%] h-[480px] bg-snow-white mt-[1.5%] rounded-lg shadow-md">
<div className="flex-col justify-center items-center">
<img src={successIcon} alt="" className={`${isLoginLanguageRTL ? (style && style.imgIconRtl ? style.imgIconRtl : "") : (style && style.imgIconLtr ? style.imgIconLtr : "")} h-40`} />
<div className="text-center">
<h1 className="font-bold text-black text-lg max-[450px]:text-sm">
{t(confirmationData.header)}
</h1>
<p className="text-[#666666] text-sm font-semibold max-[450px]:text-xs">
{t(confirmationData.description)}
</p>
{!confirmationData.addFtmSuccess &&
<div className={`flex gap-x-3 mt-12 max-[450px]:flex-col max-[450px]:gap-x-0 justify-center`}>
<button onClick={() => navigate(confirmationData.backUrl)} type="button" className="text-white font-semibold bg-tory-blue rounded-md text-sm px-12 py-4 max-[450px]:text-xs max-[450px]:mx-6 max-[450px]:mb-2">
{t('commons.goBack')}
</button>
<button onClick={() => moveToHome(navigate)} type="button" className="text-[#1447b2] font-semibold bg-white border border-[#1447b2] rounded-md text-sm px-12 py-4 max-[450px]:text-xs max-[450px]:mx-6">
{t('commons.home')}
</button>
</div>
}

{confirmationData.addFtmSuccess &&
<div>
<button onClick={() => navigate(confirmationData.backUrl)} type="button" className="text-white font-semibold bg-tory-blue rounded-md text-sm px-12 py-4 max-[450px]:text-xs max-[450px]:mx-6 max-[450px]:mb-2">
{t(confirmationData.uploadFtm)}
</button>
</div>
}
}
{confirmationData.customBtnName &&
<div>
<button onClick={onClickFunction} type="button" className="text-white font-semibold bg-tory-blue rounded-md text-sm px-3 py-4 max-[450px]:text-xs max-[450px]:mx-6 max-[450px]:mb-2 mt-4">
{t(confirmationData.customBtnName)}
</button>
</div>
</div>
}
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 8a10027

Please sign in to comment.