diff --git a/src/components/MyWallet/FamilyWalletBox.jsx b/src/components/MyWallet/FamilyWalletBox.jsx index 6aed94e..ae86fbc 100644 --- a/src/components/MyWallet/FamilyWalletBox.jsx +++ b/src/components/MyWallet/FamilyWalletBox.jsx @@ -7,6 +7,7 @@ import { PriceFormatter } from "../Helpers/PriceFormatter"; import SearchCom from "../Helpers/SearchCom"; import { localImgLoad } from "../../lib"; import background from "../../assets/images/bg-sky-blue.jpg"; +import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions"; /** * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object. @@ -23,21 +24,6 @@ export default function FamilyWalletBox({ wallet, payment, countries }) { const currentWalletSelected = data?.filter((item) => item.code === name); } - const [redeemData, setRedeemData] = useState({loading: true, data: []}); - - const [filteredRedeemData, setFilteredRedeemData] = useState({value: '', data:[]}) // State to hold filter blog - - const handleFilterRedeemData = ({target}) => { - // let filterWord = target.value - // let filteredData = [] - // if(!filterWord){ - // filteredData = redeemData?.data?.redeemData - // }else{ - // filteredData = redeemData?.data?.redeemData?.filter(item => item.post_title.toLowerCase().startsWith(filterWord.toLowerCase())) - // } - // setFilteredRedeemData({value:target.value, data: filteredData}) - } - const image = selectedWallet.code ? `${selectedWallet.code.toLowerCase()}.svg` : "default.png"; @@ -91,25 +77,7 @@ export default function FamilyWalletBox({ wallet, payment, countries }) {
-
-

Redeem Options

-
- -
-
- - {/* redeem options */} -
- {[1,2,3,4,5,6,7].map(item => ( -
- Dummy -
- ))} -
+
); diff --git a/src/components/MyWallet/FamilyWalletRedeemOptions.jsx b/src/components/MyWallet/FamilyWalletRedeemOptions.jsx new file mode 100644 index 0000000..68b9e96 --- /dev/null +++ b/src/components/MyWallet/FamilyWalletRedeemOptions.jsx @@ -0,0 +1,83 @@ +import React, { useEffect, useState } from 'react' +import SearchCom from '../Helpers/SearchCom' +import LoadingSpinner from '../Spinners/LoadingSpinner'; +import { Link } from 'react-router-dom'; +import { useSelector } from 'react-redux'; + +export default function FamilyWalletRedeemOptions() { + + const { familyWalletRedeemOptList } = useSelector((state) => state.familyWalletRedeemOptList); // FAMILY WALLET REDDEM OPTIONS LIST + + const [filteredRedeemData, setFilteredRedeemData] = useState({value: '', data:{}}) // State to hold filtered redeem banner option + + const handleFilterRedeemData = ({target}) => { + // thiskey01 + let filterWord = target.value + let filteredData = {} + if(!filterWord){ + filteredData = {...familyWalletRedeemOptList?.data} + }else{ + let matchedData = Object.keys(familyWalletRedeemOptList?.data)?.filter(item => (item.toLowerCase().startsWith(filterWord.toLowerCase()))) + filteredData = matchedData.map(item => familyWalletRedeemOptList.data[item]) + } + setFilteredRedeemData({value:target.value, data: {...filteredData}}) + } + + useEffect(()=>{ + setFilteredRedeemData(prev => ({...prev, data:{...familyWalletRedeemOptList?.data}})) + }, [familyWalletRedeemOptList.image]) + + return ( +
+
+

Redeem Options

+
+ +
+
+ + {/* redeem options */} + {familyWalletRedeemOptList.loading ? +
+ +
+ : Object.keys(familyWalletRedeemOptList?.data)?.length > 0 ? + Object.keys(filteredRedeemData?.data)?.length ? +
+ { Object.keys(filteredRedeemData?.data)?.map((item)=>{ + // text, image, description, action + let newData = filteredRedeemData?.data[item].banner + let bgImage = `url(${newData?.image})` + return ( + +
+ Redeem Image +
+

{newData.text}

+

{newData.description}

+
+
+ + ) + })} +
+ : +
+

Search Item not Found!

+
+ : +
+

No Redeem Options Found!

+
+ } +
+ ) +} diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index 06719fa..7a51257 100644 --- a/src/middleware/AuthRoute.jsx +++ b/src/middleware/AuthRoute.jsx @@ -13,6 +13,7 @@ import { updateUserJobList } from "../store/userJobList"; import { updateWalletDetails } from "../store/walletDetails"; import { familyBannersList } from "../store/FamilyBannerList"; import { familyResources } from "../store/FamilyResources"; +import {familyWalletRedeemOptList} from '../store/FamilyWalletRedeemOpt' const AuthRoute = ({ redirectPath = "/login", children }) => { const apiCall = useMemo(() => new usersService(), []); @@ -291,6 +292,24 @@ const AuthRoute = ({ redirectPath = "/login", children }) => { }, [isLogin.status]); + //FUNCTION TO GET FAMILY WALLET REDEEM OPTIONS + useEffect(() => { + if((!loggedIn && !isLogin.status) || account_type == 'FULL'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FULL + return + } + const familyWalletRedeemOptions = async () => { // FUNCTION TO GET FAMILY WALLET REDDEM OPTIONS + dispatch(familyWalletRedeemOptList({loading: true, image: '', data:{}})) + apiCall.getFamilyWalletRedeemOptions().then((res)=>{ + dispatch(familyWalletRedeemOptList({loading: false, image: res?.data?.session_image_server, data:res?.data?.result_list})) + }).catch((err)=>{ + console.log(err) + dispatch(familyWalletRedeemOptList({loading: false, image: '', data:{}})) + }) + }; + familyWalletRedeemOptions() + }, [isLogin.status]); + + // RENDER PAGE return isLogin.loading && !loggedIn ? ( diff --git a/src/services/UsersService.js b/src/services/UsersService.js index 444bd62..6f93e38 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -1305,6 +1305,19 @@ class usersService { }; return this.postAuxEnd("/blogdata", postData); } + + // API FUNCTION FOR FAMILY WALLET REDEEM OPTIONS + getFamilyWalletRedeemOptions() { + var postData = { + uuid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + action: apiConst.WRENCHBOARD_JOB_ACTIVE, + offset: 0, + limit: 30, + }; + return this.postAuxEnd("/familywallet/redeem/options", postData); + } /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) diff --git a/src/store/FamilyWalletRedeemOpt.js b/src/store/FamilyWalletRedeemOpt.js new file mode 100644 index 0000000..fff34db --- /dev/null +++ b/src/store/FamilyWalletRedeemOpt.js @@ -0,0 +1,20 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + familyWalletRedeemOptList: {loading: true, image: '', data: {}} +}; + +export const familyWalletRedeemOptListSlice = createSlice({ + name: "familyWalletRedeemOptList", + initialState, + reducers: { + familyWalletRedeemOptList: (state,action) => { + state.familyWalletRedeemOptList = {...action.payload} + }, + }, +}); + +// Action creators are generated for each case reducer function +export const { familyWalletRedeemOptList } = familyWalletRedeemOptListSlice.actions; + +export default familyWalletRedeemOptListSlice.reducer; \ No newline at end of file diff --git a/src/store/store.js b/src/store/store.js index 37708bf..4c3c658 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -10,6 +10,7 @@ import userJobListReducer from "./userJobList"; import walletDetails from "./walletDetails"; import familyBannerListReducer from "./FamilyBannerList" import familyResourcesReducer from './FamilyResources' +import familyWalletRedeemOptListReducer from './FamilyWalletRedeemOpt' export default configureStore({ reducer: { @@ -22,6 +23,7 @@ export default configureStore({ notifications: notificationsReducer, walletDetails: walletDetails, familyBannersList: familyBannerListReducer, - familyResources: familyResourcesReducer + familyResources: familyResourcesReducer, + familyWalletRedeemOptList: familyWalletRedeemOptListReducer }, });