From b81e62988cb6c0ecdbdf62efd53a55ca174b40c6 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 15 Jul 2023 09:48:14 +0100 Subject: [PATCH 1/3] delete popout added --- src/components/Settings/Tabs/CardList.jsx | 11 +- .../Settings/Tabs/DeleteCardPopout.jsx | 143 ++++++++++++++++++ 2 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 src/components/Settings/Tabs/DeleteCardPopout.jsx diff --git a/src/components/Settings/Tabs/CardList.jsx b/src/components/Settings/Tabs/CardList.jsx index a6139dc..f019018 100644 --- a/src/components/Settings/Tabs/CardList.jsx +++ b/src/components/Settings/Tabs/CardList.jsx @@ -7,10 +7,17 @@ import usersService from "../../../services/UsersService"; import { handlePagingFunc } from '../../Pagination'; import PaginatedList from '../../Pagination/PaginatedList'; +import DeleteCardPopout from './DeleteCardPopout'; + function CardList() { const api = new usersService(); const [cardList, setCardList] = useState({loading: true, data: []}) + const [deleteCardModal, setDeleteCardModal] = useState({show: false, data: {}}) // STATE TO HOLD WHEN DELETE MODAL POPS UP + const handleDeleteCardModal = () => { + setDeleteCardModal(prev => ({...prev, show:!prev.show})) + } + const [currentPage, setCurrentPage] = useState(0); const indexOfFirstItem = Number(currentPage); const indexOfLastItem = @@ -23,7 +30,6 @@ function CardList() { useEffect(()=>{ api.payListCard().then(res=>{ - console.log('TESTING', res.data?.result_list) setCardList({loading: false, data:res.data?.result_list}) }).catch(err => { setCardList({loading: false, data:[]}) @@ -62,6 +68,7 @@ function CardList() {
) } diff --git a/src/components/Settings/Tabs/DeleteCardPopout.jsx b/src/components/Settings/Tabs/DeleteCardPopout.jsx new file mode 100644 index 0000000..709381d --- /dev/null +++ b/src/components/Settings/Tabs/DeleteCardPopout.jsx @@ -0,0 +1,143 @@ +import React, { useState } from 'react' +import ModalCom from '../../Helpers/ModalCom' +import LoadingSpinner from '../../Spinners/LoadingSpinner' +import usersService from '../../../services/UsersService' + +function DeleteCardPopout({action, situation, data}) { + const api = new usersService() + + const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''}) + + let handleDeleteCard = () => { // FUNCTION TO DELETE A CARD + setRequestStatus(prev => ({...prev, loading: true})) + api.payRemCard({card_uid:data.card_uid}).then(res=>{ + if(res.status != 200 || res.data.internal_return < 0){ + setRequestStatus({loading: false, status:false, message: 'unable to delete card. Try Again'}) + } + setRequestStatus({loading: false, status:true, message: 'Card deleted'}) + // setTimeout(()=>{action()},3000) // CLOSES MODAL AFTER SOME SECONDS + }).catch(err => { + setRequestStatus({loading: false, status:false, message: 'network error. Try Again'}) + }).finally(()=>{ + setTimeout(()=>{ + setRequestStatus(prev => ({...prev, message: ''})) + if(requestStatus.status){ + action() // CLOSES MODAL AFTER SOME SECONDS + } + },4000) + }) + } + return ( + +
+
+

+ Confirm Card Delete +

+ +
+
+
+ + + + + +
+
+

+ Are you sure you want to delete? +

+
+

+ Added: {data.added} +

+

+ {data.description} **********{data.digits} +

+
+
+ {/* error or success display */} + {requestStatus.message != "" && + (!requestStatus.status ? ( +
+ {requestStatus.message} +
+ ) : ( + requestStatus.status && ( +
+ {requestStatus.message} +
+ ) + ))} + {/* End of error or success display */} +
+ + {requestStatus.loading ? + + : + + } +
+
+
+ + ) +} + +export default DeleteCardPopout \ No newline at end of file From 85ca2cb15a1668ecff033b18ad3876a02cc6b4d3 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 15 Jul 2023 10:15:14 +0100 Subject: [PATCH 2/3] reloads card list on successful card delete --- src/components/Settings/Tabs/CardList.jsx | 10 ++++++++-- src/components/Settings/Tabs/DeleteCardPopout.jsx | 9 ++++----- src/services/UsersService.js | 12 ++++++++++++ 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/components/Settings/Tabs/CardList.jsx b/src/components/Settings/Tabs/CardList.jsx index f019018..7d02eaa 100644 --- a/src/components/Settings/Tabs/CardList.jsx +++ b/src/components/Settings/Tabs/CardList.jsx @@ -11,6 +11,9 @@ import DeleteCardPopout from './DeleteCardPopout'; function CardList() { const api = new usersService(); + + const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD + const [cardList, setCardList] = useState({loading: true, data: []}) const [deleteCardModal, setDeleteCardModal] = useState({show: false, data: {}}) // STATE TO HOLD WHEN DELETE MODAL POPS UP @@ -29,13 +32,14 @@ function CardList() { }; useEffect(()=>{ + setCardList({loading: true, data: []}) api.payListCard().then(res=>{ setCardList({loading: false, data:res.data?.result_list}) }).catch(err => { setCardList({loading: false, data:[]}) console.log('ERROR', err) }) - },[]) + },[reloadCardList]) return (
    @@ -98,7 +102,9 @@ function CardList() { /> {/* END OF PAGINATION BUTTON */} - {deleteCardModal.show && } + {deleteCardModal.show && + + }
) } diff --git a/src/components/Settings/Tabs/DeleteCardPopout.jsx b/src/components/Settings/Tabs/DeleteCardPopout.jsx index 709381d..899981b 100644 --- a/src/components/Settings/Tabs/DeleteCardPopout.jsx +++ b/src/components/Settings/Tabs/DeleteCardPopout.jsx @@ -3,7 +3,7 @@ import ModalCom from '../../Helpers/ModalCom' import LoadingSpinner from '../../Spinners/LoadingSpinner' import usersService from '../../../services/UsersService' -function DeleteCardPopout({action, situation, data}) { +function DeleteCardPopout({action, situation, data, setReloadCardList}) { const api = new usersService() const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''}) @@ -13,17 +13,16 @@ function DeleteCardPopout({action, situation, data}) { api.payRemCard({card_uid:data.card_uid}).then(res=>{ if(res.status != 200 || res.data.internal_return < 0){ setRequestStatus({loading: false, status:false, message: 'unable to delete card. Try Again'}) + return } setRequestStatus({loading: false, status:true, message: 'Card deleted'}) - // setTimeout(()=>{action()},3000) // CLOSES MODAL AFTER SOME SECONDS + setReloadCardList(prev => !prev) // RELOADS PAY CARD LIST + setTimeout(()=>{action()},3000) // CLOSES MODAL AFTER SOME SECONDS }).catch(err => { setRequestStatus({loading: false, status:false, message: 'network error. Try Again'}) }).finally(()=>{ setTimeout(()=>{ setRequestStatus(prev => ({...prev, message: ''})) - if(requestStatus.status){ - action() // CLOSES MODAL AFTER SOME SECONDS - } },4000) }) } diff --git a/src/services/UsersService.js b/src/services/UsersService.js index b143d6b..a699a6d 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -944,6 +944,18 @@ class usersService { return this.postAuxEnd("/getaccsettings", postData); } + // FUNCTION TO DELETE PAY CARD + payRemCard(reqData) { + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: 11057, + ...reqData, + }; + return this.postAuxEnd("/payremcard", postData); + } + /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password) From 6b712089d1966d436ae6e531c2ea29a589631388 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 15 Jul 2023 10:49:46 +0100 Subject: [PATCH 3/3] notification icons added --- src/components/Settings/Tabs/NotificationSettingTab.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Settings/Tabs/NotificationSettingTab.jsx b/src/components/Settings/Tabs/NotificationSettingTab.jsx index 07e2a44..a49c817 100644 --- a/src/components/Settings/Tabs/NotificationSettingTab.jsx +++ b/src/components/Settings/Tabs/NotificationSettingTab.jsx @@ -50,11 +50,11 @@ export default function NotificationSettingTab() { : accSettings.data.length ? accSettings.data.map(item =>{ - let image = '' //item.banner && localImgLoad(`images/payment-cards/${item.banner.toLowerCase()}`) + let image = item.banner && localImgLoad(`images/settings/${item.banner.toLowerCase()}`) return(
  • -
    +
    account-settings