From 11e356cda607eff628fcd922465d5ac6e6158b7f Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sat, 2 Nov 2024 20:24:15 +0100 Subject: [PATCH] virtual card display and banner and popout fixed --- src/Routers.jsx | 1 + .../wallet/VirtualAddCardFamilyPopout.jsx | 600 ++++++++++++++++++ .../FamilyAcc/Tabs/wallet/Wallet.jsx | 61 +- src/components/FamilyPopup/SuggestTask.jsx | 3 +- src/components/Home/index.jsx | 35 +- src/components/MyWallet/FamilyWalletCon.jsx | 4 +- src/components/MyWallet/WalletAction.jsx | 52 +- src/components/MyWallet/WalletItemCard.jsx | 6 + .../walletvirtual/VirtualAddCardPopout.jsx | 26 +- src/lib/apiConst.js | 1 + src/services/UsersService.js | 14 +- 11 files changed, 763 insertions(+), 40 deletions(-) create mode 100644 src/components/FamilyAcc/Tabs/wallet/VirtualAddCardFamilyPopout.jsx diff --git a/src/Routers.jsx b/src/Routers.jsx index a78f54d..abc1a62 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -144,6 +144,7 @@ export default function Routers() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/FamilyAcc/Tabs/wallet/VirtualAddCardFamilyPopout.jsx b/src/components/FamilyAcc/Tabs/wallet/VirtualAddCardFamilyPopout.jsx new file mode 100644 index 0000000..3fab244 --- /dev/null +++ b/src/components/FamilyAcc/Tabs/wallet/VirtualAddCardFamilyPopout.jsx @@ -0,0 +1,600 @@ +import { useEffect, useState } from "react"; +import { Form, Formik } from "formik"; +import * as Yup from "yup"; +import { useSelector } from "react-redux"; +import ModalCom from "../../../Helpers/ModalCom"; +import LoadingSpinner from "../../../Spinners/LoadingSpinner"; +import CustomTimer from "../../../countdown/CustomTimer"; +import InputCom from '../../../Helpers/Inputs/InputCom' +import usersService from "../../../../services/UsersService"; + + +const validationSchema = Yup.object().shape({ + + country: Yup.string() + .required("Required"), + phone_number: Yup.string() + .min(9, "Invalid") + .max(11, "Invalid") + .required("Required"), + // birthYear: Yup.string() + // .required("Required"), + // birthMonth: Yup.string() + // .required("Required"), + // birthDay: Yup.string() + // .required("Required"), + address: Yup.string() + .min(5, "Min 3 characters") + .max(50, "Max 25 characters") + .required("Required"), + city: Yup.string() + .min(2, "Min 3 characters") + .max(25, "Max 25 characters") + .required("Required"), + state: Yup.string() + .required("Required"), + zipCode: Yup.string() + .min(1, "Min 3 characters") + .max(8, "Max 8 characters") + .required("Required"), + dob: Yup.string() + .required("Required"), +checked: Yup.bool() // use bool instead of boolean + .oneOf([true], "You must accept the terms and conditions") +}); + +const VirtualAddCardFamilyPopout = ({ details, onClose, situation, walletItem, familyData }) => { + // console.log('PROPS', 'DETAILS', details, 'WALLET', walletItem, 'FAMILYDATA', familyData) + + const { userDetails } = useSelector((state) => state.userDetails); + + const countryCode = walletItem?.country + + const userApi = new usersService() + + const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''}) + + const [allCountries, setAllCountries] = useState({loading: true, data: []}) // VARIABLE TO HOLD COUNTRY LIST + + const [state, setState] = useState({loading: true, data: {}}) // VARIABLE TO HOLD STATE LIST + + + let initialValues = { + // initial values for formik + country: countryCode ? countryCode : '', + phone_number: '', + email: userDetails?.email, + firstname: familyData?.firstname, + lastname: familyData?.lastname, + family_uid: familyData?.uid, + birthYear: '', + birthMonth: '', + birthDay: '', + address: '', + city: '', + // city: userDetails?.city ? userDetails.city : '', + state: '', + zipCode: '', + dob: '', + checked: false + }; + + + const handleSubmit = (values) => { + let date = new Date(values.dob) + const reqData = { + request_type: '100', + address: values.address, + city: values.city, + state: values.state, + country: values.country, + postal_code: values.zipCode, + phone_number: values.phone_number, + family_uid: values.family_uid, + // dob_day: values.birthDay, + // dob_month: values.birthMonth, + // dob_year: values.birthYear, + dob_day: Number(date.getDate()), + dob_month: Number(date.getMonth()) + 1, + dob_year: Number(date.getFullYear()), + dob: values.dob + } + // console.log('Values', reqData) + setRequestStatus({loading: true, status:false, message: ''}) + userApi.walletCardFamilyRequest(reqData).then(res => { + if(res?.data?.internal_return < 0){ + setRequestStatus({loading: false, status:false, message: 'Failed, try again'}) + setTimeout(()=>{ + setRequestStatus({loading: false, status:true, message: ''}) + },4000) + return + } + setRequestStatus({loading: false, status:true, message: 'Successful'}) + setTimeout(()=>{ + setRequestStatus({loading: false, status:true, message: ''}) + onClose() + },4000) + }).catch(err => { + console.log('ERR', err) + setRequestStatus({loading: false, status:false, message: 'Unable to complete'}) + setTimeout(()=>{ + setRequestStatus({loading: false, status:false, message: ''}) + },4000) + }) + } + + useEffect(()=>{ + // Get Country Api + userApi.getSignupCountryData().then(res =>{ + if(!res?.data?.result_list){ + return setAllCountries({ loading: false, data: [] }); + } + // if(countryCode){ + // return setAllCountries({ loading: false, data: res?.data?.result_list?.filter(item => item?.code == countryCode) }); + // } + setAllCountries({ loading: false, data: res?.data?.result_list }); + }).catch(err => { + setAllCountries({ loading: false, data: [] }); + console.log('err', err) + }) + },[]) + + useEffect(()=>{ + // GET STATE API + setState({loading: true, data: {}}) + userApi.getStateFromCountry({country: countryCode}).then(res =>{ + if(!res?.data?.country_state){ + return setState({ loading: false, data: {} }); + } + setState({ loading: false, data: res?.data?.country_state}); + }).catch(err => { + setState({ loading: false, data: {} }); + console.log('err', err) + }) +},[initialValues.country]) + + return ( + + + {(props) => ( +
+
+
+

+ {walletItem?.description} +

+ +
+
+
+

Name:{familyData.lastname} {familyData.firstname}

+
+
+ {/* left part */} +
+
+
+ + +
+
+ +
+
+ +
+ + +
+ + {/* hidden section */} +
+

Date of Birth

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

Date of Birth

+
+ +
+
+
+ + {/* right part */} +
+ + + {/* */} + +
+
+ + +
+ + +
+
+
+
+
+
+ +

+ I agree with the cardholder + terms & conditions {props.errors.checked && props.touched.checked && {props.errors.checked}} +

+
+
+ {requestStatus.message && +
+

{requestStatus.message}

+
+ } +
+
+ + + <> + {requestStatus.loading ? + + : + + } + +
+
+
+
+ )} + + + ); +}; + +export default VirtualAddCardFamilyPopout; + + + +const day = new Array(31).fill(0).map((_,i) => i+1 ) + +const month = [ + {value: 1, name: 'January'}, + {value: 2, name: 'February'}, + {value: 3, name: 'March'}, + {value: 4, name: 'April'}, + {value: 5, name: 'May'}, + {value: 6, name: 'June'}, + {value: 7, name: 'July'}, + {value: 8, name: 'August'}, + {value: 9, name: 'September'}, + {value: 10, name: 'October'}, + {value: 11, name: 'November'}, + {value: 12, name: 'December'}, +] + +const date = new Date().getFullYear() + +const year = new Array(100).fill(0).map((_,i) => (date-2) - i+1 ) \ No newline at end of file diff --git a/src/components/FamilyAcc/Tabs/wallet/Wallet.jsx b/src/components/FamilyAcc/Tabs/wallet/Wallet.jsx index 9e3fe60..19c12d5 100644 --- a/src/components/FamilyAcc/Tabs/wallet/Wallet.jsx +++ b/src/components/FamilyAcc/Tabs/wallet/Wallet.jsx @@ -2,10 +2,31 @@ import React, { useState } from 'react' import { localImgLoad } from '../../../../lib' import { PriceFormatter } from '../../../Helpers/PriceFormatter' import FamilyAddFundPopout from './FamilyAddFundPopout' +import VirtualAddCardFamilyPopout from './VirtualAddCardFamilyPopout' function Wallet({wallet, familyData, setFamilyWalletReload}) { const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} }) + // virtual add card popout + const [virtualPopup, setVirtualPopup] = useState({ show: false, data: {} }); + + /*OPENS the virtual add card popout*/ + const openVirtualPopUp = (value) => { + setVirtualPopup({ + show: true, + data: { ...value }, + }); + }; + + /*Closes the virtual add card popout*/ + const closeVirtualPopUp = () => { + setVirtualPopup({ show: false, data: {} }); + // dispatch(tableReload({ type: "WALLETTABLE" })); + }; + + // console.log('Extra Actions', Object.keys(wallet.extra_actions)) + let extraActions = Object.keys(wallet.extra_actions) // VARIABLE TO HOLD EXTRA ACTIONS VALUES + return (
Add Money - + + {/* EXTRA ACTIONS BTN */} + {(extraActions && extraActions?.length > 0) && + extraActions.map((action, index) => ( +
+ + {/* // TO BE USED lATER IF NEED BE */} +
+ )) + } +
@@ -71,6 +107,17 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) { familyData={familyData} /> } + + {/* VIRTUAL CARD POPOUT */} + {virtualPopup.show && ( + + )} ) } diff --git a/src/components/FamilyPopup/SuggestTask.jsx b/src/components/FamilyPopup/SuggestTask.jsx index ca53fb4..335a7b9 100644 --- a/src/components/FamilyPopup/SuggestTask.jsx +++ b/src/components/FamilyPopup/SuggestTask.jsx @@ -19,7 +19,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => { setSuggestedNextStep(value); }; - const selectedImage = details?.selectedImage || DEFAULT_IMAGE; + // const selectedImage = details?.selectedImage || DEFAULT_IMAGE; + const selectedImage = require(`../../assets/images/family/${details ? details.banner : 'default.jpg'}`); const initialValues = { title: details?.title || "", description: details?.description || "", diff --git a/src/components/Home/index.jsx b/src/components/Home/index.jsx index 6da0d81..7228d42 100644 --- a/src/components/Home/index.jsx +++ b/src/components/Home/index.jsx @@ -61,7 +61,7 @@ export default function Home(props) { return ( - {Object.keys(commonHeadBanner).length < 1 ? + {/* {Object.keys(commonHeadBanner).length < 1 ? :
@@ -88,7 +88,38 @@ export default function Home(props) {
)} - } + } */} + +
+ {userDetails && userDetails?.account_type == "FAMILY" ? ( + + ) : userDetails && userDetails?.account_type == "FULL" ? ( + <> + {Object.keys(commonHeadBanner).length < 1 ? + + : + + } + + ) : ( +
+ You are not logged in or your account type is not supported. +
+ )} +
); } diff --git a/src/components/MyWallet/FamilyWalletCon.jsx b/src/components/MyWallet/FamilyWalletCon.jsx index 61f60a1..1aa5781 100644 --- a/src/components/MyWallet/FamilyWalletCon.jsx +++ b/src/components/MyWallet/FamilyWalletCon.jsx @@ -50,7 +50,7 @@ const FamilyWalletCon = () => { }; useEffect(() => { - getPaymentHistory(); + // getPaymentHistory(); getFamilyWalletBal() }, [walletTable]); @@ -74,7 +74,7 @@ const FamilyWalletCon = () => { }> diff --git a/src/components/MyWallet/WalletAction.jsx b/src/components/MyWallet/WalletAction.jsx index 4e4a90d..ede6a9e 100644 --- a/src/components/MyWallet/WalletAction.jsx +++ b/src/components/MyWallet/WalletAction.jsx @@ -34,33 +34,39 @@ function WalletAction({ walletItem, payment, openPopUp }) { state: {}, }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP + // console.log('Extra Actions', Object.keys(walletItem.extra_actions)) + let extraActions = Object.keys(walletItem.extra_actions) // VARIABLE TO HOLD EXTRA ACTIONS VALUES + return (
+ + {/* EXTRA ACTIONS BTN */}
- - {/* // TO BE USED lATER */} + {(extraActions && extraActions?.length > 0) && + extraActions.map((action, index) => ( +
+ + {/* // TO BE USED lATER */} +
+ )) + }
+
diff --git a/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx b/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx index f2669d9..f637169 100644 --- a/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx +++ b/src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx @@ -39,6 +39,8 @@ const validationSchema = Yup.object().shape({ .required("Required"), dob: Yup.string() .required("Required"), + checked: Yup.bool() // use bool instead of boolean + .oneOf([true], "You must accept the terms and conditions") }); const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => { @@ -70,7 +72,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => { city: userDetails?.city ? userDetails.city : '', state: '', zipCode: '', - dob: '' + dob: '', + checked: false }; @@ -96,6 +99,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => { // } // } // } + let date = new Date(values.dob) const reqData = { request_type: '100', address: values.address, @@ -107,9 +111,9 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => { // dob_day: values.birthDay, // dob_month: values.birthMonth, // dob_year: values.birthYear, - dob_day: Number(new Date(values.dob).getDate()), - dob_month: Number(new Date(values.dob).getMonth()) + 1, - dob_year: Number(new Date(values.dob).getFullYear()), + dob_day: Number(date.getDate()), + dob_month: Number(date.getMonth()) + 1, + dob_year: Number(date.getFullYear()), dob: values.dob } // console.log('Values', reqData) @@ -535,6 +539,20 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => { +
+
+ +

+ I agree with the cardholder + terms & conditions {props.errors.checked && props.touched.checked && {props.errors.checked}} +

+
+
{requestStatus.message &&

{requestStatus.message}

diff --git a/src/lib/apiConst.js b/src/lib/apiConst.js index d07936f..5653e01 100644 --- a/src/lib/apiConst.js +++ b/src/lib/apiConst.js @@ -80,6 +80,7 @@ export const apiConst = { WRENCHBOARD_COUNTRY_STATE: 649, WRENCHBOARD_WALLET_CARD_REQUEST: 11080, + WRENCHBOARD_WALLET_CARD_FAMILY_REQUEST: 11082, WRENCHBOARD_SEND_CONTACTUS: 11030, WRENCHBOARD_ACCOUNT_SENDREFER: 11032, diff --git a/src/services/UsersService.js b/src/services/UsersService.js index f5e29d7..4749df5 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -1548,7 +1548,7 @@ class usersService { return this.postAuxEnd("/countrystate", postData); } - //API TO GET STATES FROM COUNTRY + //API TO REQUEST FOR VIRTUAL CARD walletCardRequest(reqData){ var postData = { uid: localStorage.getItem("uid"), @@ -1561,6 +1561,18 @@ class usersService { return this.postAuxEnd("/wallets/card/request", postData); } + //API TO REQUEST FOR FAMILY VIRTUAL CARD + walletCardFamilyRequest(reqData){ + var postData = { + uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: apiConst.WRENCHBOARD_WALLET_CARD_FAMILY_REQUEST, + ...reqData + }; + return this.postAuxEnd("/wallets/card/familyrequest", postData); + } + /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password) -- 2.34.1