-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MOSIP-37707, MOSIP-37708:UI Development & Integration of View SBI Det…
…ails. (#987) * MOSIP-37699: SBI-Device (Partner Admin) View SBI Details. Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-37707, MOSIP-37708:UI Development & Integration of View SBI Details. Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-37707, MOSIP-37708:UI Development & Integration of View SBI Details. Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-37707, MOSIP-37708:UI Development & Integration of View SBI Details. Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-37707, MOSIP-37708: Resolved PR comments Signed-off-by: Anil_Kumar_Majji <[email protected]> * MOSIP-37707, MOSIP-37708: Resolved PR comments Signed-off-by: Anil_Kumar_Majji <[email protected]> --------- Signed-off-by: Anil_Kumar_Majji <[email protected]>
- Loading branch information
1 parent
c5d009e
commit 302a44b
Showing
7 changed files
with
168 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import React, { useEffect, useState } from 'react' | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { bgOfStatus, formatDate, getStatusCode, isLangRTL, onPressEnterKey } from '../../../utils/AppUtils'; | ||
| import { getUserProfile } from '../../../services/UserProfileService'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import somethingWentWrongIcon from '../../../svg/something_went_wrong_icon.svg'; | ||
| import Title from '../../common/Title'; | ||
|
|
||
| function ViewAdminSbiDetails() { | ||
| const { t } = useTranslation(); | ||
| const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode); | ||
| const navigate = useNavigate(); | ||
| const [unexpectedError, setUnexpectedError] = useState(false); | ||
| const [sbiDetails, setSbiDetails] = useState({}); | ||
|
|
||
| useEffect(() => { | ||
| const selectedSbiAttributes = localStorage.getItem('selectedSbiAttributes'); | ||
| if (!selectedSbiAttributes) { | ||
| setUnexpectedError(true); | ||
| return; | ||
| } | ||
| const selectedSbi = JSON.parse(selectedSbiAttributes); | ||
| console.log(selectedSbi); | ||
|
|
||
| setSbiDetails(selectedSbi); | ||
| }, []); | ||
|
|
||
| const moveToSbiList = () => { | ||
| navigate('/partnermanagement/admin/device-provider-services/sbi-list'); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter relative`}> | ||
| <div className={`flex-col mt-4 bg-anti-flash-white h-full font-inter break-words max-[450px]:text-sm mb-[2%]`}> | ||
| <div className="flex justify-between mb-3"> | ||
| <Title title={'viewSbiDetails.viewSbiDetails'} subTitle='viewSbiDetails.listOfSbisAndDevices' backLink='/partnermanagement/admin/device-provider-services/sbi-list' /> | ||
| </div> | ||
|
|
||
| {unexpectedError && ( | ||
| <div className={`bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center`}> | ||
| <div className="flex items-center justify-center p-24"> | ||
| <div className="flex flex-col justify-center items-center"> | ||
| <img className="max-w-60 min-w-52 my-2" src={somethingWentWrongIcon} alt="" /> | ||
| <p className="text-sm font-semibold text-[#6F6E6E] py-4">{t('devicesList.unexpectedError')}</p> | ||
| <button onClick={moveToSbiList} type="button" | ||
| className={`w-32 h-10 flex items-center justify-center font-semibold rounded-md text-sm mx-8 py-3 bg-tory-blue text-white`}> | ||
| {t('commons.goBack')} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| {!unexpectedError && ( | ||
| <div className="bg-snow-white h-fit mt-1 rounded-md shadow-lg font-inter"> | ||
| <div className="flex justify-between px-7 pt-3 border-b max-[450px]:flex-col"> | ||
| <div className="flex-col"> | ||
| <p className="font-semibold text-lg text-dark-blue mb-2"> | ||
| {sbiDetails.version} | ||
| </p> | ||
| <div className="flex items-center justify-start mb-2 max-[400px]:flex-col max-[400px]:items-start"> | ||
| <div className={`${bgOfStatus(sbiDetails.status)} flex w-fit py-1 px-5 text-sm rounded-md my-2 font-semibold`}> | ||
| {getStatusCode(sbiDetails.status, t)} | ||
| </div> | ||
| <div className={`font-semibold ${isLoginLanguageRTL ? "mr-3" : "ml-3"} text-sm text-dark-blue`}> | ||
| {t("viewOidcClientDetails.createdOn") + ' ' + | ||
| formatDate(sbiDetails.createdDateTime, "date", true)} | ||
| </div> | ||
| <div className="mx-2 text-gray-300">|</div> | ||
| <div className="font-semibold text-sm text-dark-blue"> | ||
| {formatDate(sbiDetails.createdDateTime, "time", true)} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={`${isLoginLanguageRTL ? "pr-8 ml-8" : "pl-8 mr-8"} pt-3 mb-2`}> | ||
| <div className="flex flex-wrap py-1 max-[450px]:flex-col"> | ||
| <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}> | ||
| <p className="text-suva-gray text-sm"> | ||
| {t("viewPolicyRequest.partnerId")} | ||
| </p> | ||
| <p className="text-vulcan text-md"> | ||
| {sbiDetails.partnerId} | ||
| </p> | ||
| </div> | ||
| <div className={`mb-5 max-[600px]:w-[100%] w-[50%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}> | ||
| <p className="text-suva-gray text-sm"> | ||
| {t("viewPolicyRequest.partnerType")} | ||
| </p> | ||
| <p className="text-vulcan text-md"> | ||
| {sbiDetails.partnerType} | ||
| </p> | ||
| </div> | ||
| <div className={`mb-5 w-[100%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}> | ||
| <p className="text-suva-gray text-sm"> | ||
| {t("viewSbiDetails.sbiVersion")} | ||
| </p> | ||
| <p className="text-vulcan text-md"> | ||
| {sbiDetails.version} | ||
| </p> | ||
| </div> | ||
| <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}> | ||
| <p className="text-suva-gray text-sm"> | ||
| {t("viewSbiDetails.sbiCreatedDateTime")} | ||
| </p> | ||
| <p className="text-vulcan text-md"> | ||
| {formatDate(sbiDetails.sbicCreatedDateTime, "dateTime", false)} | ||
| </p> | ||
| </div> | ||
| <div className={`mb-5 max-[600px]:w-[100%] w-[50%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}> | ||
| <p className="text-suva-gray text-sm"> | ||
| {t("viewSbiDetails.sbiExpiryDateTime")} | ||
| </p> | ||
| <p className="text-vulcan text-md"> | ||
| {formatDate(sbiDetails.sbiExpiryDateTime, "dateTime", false)} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <hr className="h-px w-full bg-gray-200 border-0" /> | ||
| <div className={`flex justify-end py-8 ${isLoginLanguageRTL ? "ml-8" : "mr-8"}`}> | ||
| <button id="view_admin_sbi_details_back_btn" onClick={moveToSbiList} | ||
| className="h-10 w-28 text-sm p-3 py-2 text-tory-blue bg-white border border-blue-800 font-semibold rounded-md text-center" onKeyPress={(e) => onPressEnterKey(e, moveToSbiList)}> | ||
| {t("commons.back")} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ViewAdminSbiDetails; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters