facebook redirect page

.env

@@ -42,9 +42,28 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
-REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
-REACT_APP_FACEBOOK_CLIENT_SCOPE="email, public_profile"
+#Real Account
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+
+#developenet Account
+REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
+REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829
+
+#my Account
+REACT_APP_FACEBOOK_CLIENT_ID3=1598725580610908
+
+
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="http://localhost:9082/login/auth/flogin"
+
+REACT_APP_APPLE_CLIENT_ID='com.wrenchboard.users.client'
+REACT_APP_APPLE_REDIRECT_URL='http://localhost:9082/login/auth/apple'
+
+
+# /* 'client_id' => */ 'com.wrenchboard.users.client',
+# /* 'client_secret' => */ 'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6Ilc1V1RXQzlEVEoifQ.eyJpc3MiOiJKUjM2M0ZFWThSIiwiaWF0IjoxNjU0MDgzODQxLCJleHAiOjE2NTkyNjc4NDEsImF1ZCI6Imh0dHBzOi8vYXBwbGVpZC5hcHBsZS5jb20iLCJzdWIiOiJjb20ud3JlbmNoYm9hcmQudXNlcnMuY2xpZW50In0.TIPMwjS2MgSysqEuw3yu1nrOcrH-6omzerDhx0CadjWn2yCO8wZhQiAlhIFs7F-WPektIJ6h-2BT62yGrILiTA',
+# /* 'redirect_uri' => */ site_url('login/auth/apple')
 
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4

.env.production

@@ -40,6 +40,11 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
 
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin"
+
 DISABLE_ESLINT_PLUGIN=true
 
 REACT_APP_MAX_FILE_SIZE=1000000

package.json

@@ -17,6 +17,7 @@
     "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.2.9",
     "react": "^18.2.0",
+    "react-apple-login": "^1.1.6",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
     "react-dom": "^18.2.0",

src/Routers.jsx

@@ -48,6 +48,7 @@ import ManageInterestOfferPage from './views/ManageInterestOfferPage'
 import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
 import FamilyMarketPage from "./views/FamilyMarketPage";
 import FacebookRedirect from "./views/FacebookRedirect";
+import AppleRedirectPage from "./views/AppleRedirectPage";
 
 export default function Routers() {
   return (
@@ -58,6 +59,7 @@ export default function Routers() {
         <Route exact path="/signup" element={<SignupPage />} />
         <Route exact path="/login/auth" element={<AuthRedirect />} />
         <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
+        <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
         <Route
           exact
           path="/forgot-password"

src/components/AuthPages/AuthRedirect/AppleRedirect.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
+import AuthLayout from "../AuthLayout";
+
+function AppleRedirect() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const userApi = new usersService();
+    const dispatch = useDispatch()
+
+    const queryParams = new URLSearchParams(location?.search);
+    const codeResponse = queryParams.get("code");
+
+    useEffect(()=>{
+      if(!codeResponse){
+        navigate('/login', {state: {error: true}})
+        return
+      }
+      console.log(codeResponse);
+
+      setTimeout(()=>{ // remove LATER
+        navigate('/login', {state: {error: true}})
+      },2000)
+      
+      /*
+      POST /token HTTP/1.1
+      Host: oauth2.googleapis.com
+      Content-Type: application/x-www-form-urlencoded
+
+      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
+      client_id=your_client_id&
+      client_secret=your_client_secret&
+      redirect_uri=https%3A//oauth2.example.com/code&
+      grant_type=authorization_code
+      */
+      var reqData = {
+        auth_type: "APPLE",
+        code: codeResponse,
+        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+      };
+    //   userApi
+    //     .authStart(reqData)
+    //     .then((res) => {
+    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+    //         localStorage.setItem("member_id", `${res.data.member_id}`);
+    //         localStorage.setItem("uid", `${res.data.uid}`);
+    //         localStorage.setItem("session_token", `${res.data.session}`);
+    //         dispatch(updateUserDetails({...res.data}));
+    //         navigate('/', {replace: true})
+    //         return
+    //       }
+    //       navigate('/login', {state: {error: true}})
+    //     })
+    //     .catch((error) => {
+    //       navigate('/login', {state: {error: true}})
+    //       console.log(error);
+    //     });
+    },[])
+  return (
+    <AuthLayout>
+    <div className='min-h-[70vh]'>Redirecting ... </div>
+  </AuthLayout>
+  )
+}
+
+export default AppleRedirect

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -20,10 +20,6 @@ function FbookRedirect() {
         return
       }
       console.log(codeResponse);
-
-      setTimeout(()=>{ // remove LATER
-        navigate('/login', {state: {error: true}})
-      },2000)
       
       /*
       POST /token HTTP/1.1
@@ -37,7 +33,7 @@ function FbookRedirect() {
       grant_type=authorization_code
       */
       var reqData = {
-        auth_type: "GOOGLE",
+        auth_type: "FACEBOOK",
         code: codeResponse,
         redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
       };

src/components/AuthPages/Login/index.jsx

@@ -328,7 +328,8 @@ export default function Login() {
                         onClick={googleLogin}
                       />
                       <BrandBtn 
-                        // link="https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=com.wrenchboard.users.client&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email" 
+                        // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`} 
+                        link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`} 
                         imgSrc={appleLogo} 
                         brand="Apple" 
                         isAnchor={true}
@@ -336,7 +337,7 @@ export default function Login() {
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
                       <BrandBtn
-                        link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${'1287693041832191'}&redirect_uri=http://localhost:9082/login/auth/flogin&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
+                        link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
                         imgSrc={facebookLogo}
                         brand="Facebook"
                         isAnchor={true}

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -214,28 +214,28 @@ export default function FamilyManageTabs({
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
               />
-              <div className="mt-4 flex justify-center items-center gap-2">
+              <div className="mt-4 flex justify-start items-center gap-2">
                 <button
                   onClick={() => tabHandler("Account")}
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center"
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                 >
                   <img
                     src={localImgLoad("images/icons/account.svg")}
-                    className="w-[70px] h-[70px]"
+                    className="max-w-[30px] w-full"
                     alt="Settings-Icon"
                   />
-                  <p className="mt-2 text-lg text-sky-blue">Account</p>
+                  <p className="text-lg text-sky-blue">Acc.</p>
                 </button>
                 <button
                   onClick={() => tabHandler("Profile")}
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center"
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                 >
                   <img
                     src={localImgLoad("images/icons/profile.svg")}
-                    className="w-[70px] h-[70px]"
+                    className="max-w-[30px] w-full"
                     alt="Settings-Icon"
                   />
-                  <p className="mt-2 text-lg text-sky-blue">Profile</p>
+                  <p className="text-lg text-sky-blue">Profile</p>
                 </button>
               </div>
             </div>

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -1,148 +1,152 @@
-import { useState, useMemo, memo } from "react";
-import { handlePagingFunc, PaginatedList } from "../../Pagination";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { memo, useMemo, useState } from "react";
 import SuggestTask from "../../FamilyPopup/SuggestTask";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
-const FamilyWaitlist = memo(({ familyData, className, accountDetails, loader }) => {
-  const [popUp, setPopUp] = useState({ show: false, data: {} });
-  const [continueTaskPopup, setContinueTaskPopup] = useState({
-    show: false,
-    data: {},
-  });
-  const filteredFamilyData = useMemo(
-    () =>
-      familyData?.result_list?.filter(
-        (data) => data?.family_uid === accountDetails?.family_uid
-      ),
-    [familyData, accountDetails]
-  );
+const FamilyWaitlist = memo(
+  ({ familyData, className, accountDetails, loader }) => {
+    const [popUp, setPopUp] = useState({ show: false, data: {} });
+    const [continueTaskPopup, setContinueTaskPopup] = useState({
+      show: false,
+      data: {},
+    });
+    const filteredFamilyData = useMemo(
+      () =>
+        familyData?.result_list?.filter(
+          (data) => data?.family_uid === accountDetails?.family_uid
+        ),
+      [familyData, accountDetails]
+    );
 
-  const [currentPage, setCurrentPage] = useState(0);
-  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const indexOfFirstItem = currentPage;
-  const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = useMemo(
-    () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
-    [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
-  );
+    const [currentPage, setCurrentPage] = useState(0);
+    const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const indexOfFirstItem = currentPage;
+    const indexOfLastItem = currentPage + itemsPerPage;
+    const currentTask = useMemo(
+      () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
+      [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
+    );
 
-  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+    const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
-  const openPopUp = (value) => {
-    setPopUp({ show: true, data: { ...value } });
-  };
+    const openPopUp = (value) => {
+      setPopUp({ show: true, data: { ...value } });
+    };
 
-  const closePopUp = () => {
-    setPopUp({ show: false, data: {} });
-  };
+    const closePopUp = () => {
+      setPopUp({ show: false, data: {} });
+    };
 
-  const openContinueTaskPopup = (value) => {
-    setContinueTaskPopup({ show: true, data: { ...value } });
-  };
+    const openContinueTaskPopup = (value) => {
+      setContinueTaskPopup({ show: true, data: { ...value } });
+    };
 
-  const closeContinueTaskPopup = () => {
-    setContinueTaskPopup({ show: false, data: {} });
-  };
+    const closeContinueTaskPopup = () => {
+      setContinueTaskPopup({ show: false, data: {} });
+    };
 
-  return (
-    <div
-      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
-        className || ""
-      }`}
-    >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
-        </div>
-      ) : (
-        <>
-          {filteredFamilyData && (
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
-              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <tbody>
-                  {currentTask.map((value) => {
-                    const addedDate = value?.added.split(" ")[0];
-                    const selectedImage = require(`../../../assets/images/family/${
-                      value?.banner || "default.jpg"
-                    }`);
-                    return (
-                      <tr
-                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
-                        key={value.uid}
-                      >
-                        <td className="py-4">
-                          <div className="w-full flex justify-between items-center">
-                            <div className="account-name flex space-x-4 items-center">
-                              <div className="icon w-14 h-14 flex justify-center items-center">
-                                <img
-                                  src={selectedImage}
-                                  alt="task_img"
-                                  className="w-full object-cover"
-                                />
+    return (
+      <div
+        className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
+          className || ""
+        }`}
+      >
+        {loader ? (
+          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+            <LoadingSpinner size={16} color="sky-blue" />
+          </div>
+        ) : (
+          <>
+            {filteredFamilyData && (
+              <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                  <tbody>
+                    {currentTask.map((value) => {
+                      const addedDate = value?.added.split(" ")[0];
+                      const selectedImage = require(`../../../assets/images/family/${
+                        value?.banner || "default.jpg"
+                      }`);
+                      return (
+                        <tr
+                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                          key={value.uid}
+                        >
+                          <td className="py-4">
+                            <div className="w-full flex justify-between items-center">
+                              <div className="account-name flex space-x-4 items-center">
+                                <div className="icon w-14 h-14 flex justify-center items-center">
+                                  <img
+                                    src={selectedImage}
+                                    alt="task_img"
+                                    className="w-full object-cover"
+                                  />
+                                </div>
+                                <div className="">
+                                  <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                                    {value.title}
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    {value.description}
+                                  </p>
+                                </div>
                               </div>
-                              <div className="">
-                                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                                  {value.title}
+                              <div className="px-2 flex flex-col items-center justify-center">
+                                <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                  {addedDate}
                                 </p>
-                                <p className="text-sm text-thin-light-gray font-medium">
-                                  {value.description}
+                                <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                  {value.status_text}
                                 </p>
                               </div>
                             </div>
-                            <div className="px-2 flex flex-col items-center justify-center">
-                              <p className="text-sm font-bold text-dark-gray dark:text-white">
-                                {addedDate}
-                              </p>
-                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
-                                {value.status_text}
-                              </p>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="text-right py-4 px-2">
-                          <button
-                            onClick={() => openPopUp(value)}
-                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          >
-                            View
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= filteredFamilyData?.length}
-                data={filteredFamilyData}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-            </div>
-          )}
-        </>
-      )}
-      {popUp.show && (
-        <SuggestTask
-          details={popUp.data}
-          onClose={closePopUp}
-          continuePopupData={openContinueTaskPopup}
-          situation={popUp.show}
-        />
-      )}
+                          </td>
+                          <td className="text-right py-4 px-2">
+                            <button
+                              onClick={() => openPopUp(value)}
+                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                              View
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+                <PaginatedList
+                  onClick={handlePagination}
+                  prev={currentPage === 0}
+                  next={
+                    currentPage + itemsPerPage >= filteredFamilyData?.length
+                  }
+                  data={filteredFamilyData}
+                  start={indexOfFirstItem}
+                  stop={indexOfLastItem}
+                />
+              </div>
+            )}
+          </>
+        )}
+        {popUp.show && (
+          <SuggestTask
+            details={popUp.data}
+            onClose={closePopUp}
+            continuePopupData={openContinueTaskPopup}
+            situation={popUp.show}
+          />
+        )}
 
-      {continueTaskPopup.show && (
-        <AssignTaskPopout
-          details={continueTaskPopup.data}
-          action={closeContinueTaskPopup}
-          situation={continueTaskPopup.show}
-        />
-      )}
-    </div>
-  );
-});
+        {continueTaskPopup.show && (
+          <AssignTaskPopout
+            details={continueTaskPopup.data}
+            action={closeContinueTaskPopup}
+            situation={continueTaskPopup.show}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export default FamilyWaitlist;

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

@@ -8,13 +8,13 @@ export default function ProfileInfo({
   accountDetails,
 }) {
   return (
-    <div className="flex flex-col items-center gap-6">
+    <div className="flex flex-col items-center gap-4">
       <div className="flex justify-center">
         <div className="w-full relative">
           <img
             src={profileImg}
             alt=""
-            className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
+            className="sm:w-[180px] sm:h-[180px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
           />
           <input
             ref={profileImgInput}

src/components/MyWallet/AddFundDollars.jsx

@@ -59,6 +59,7 @@ function AddFundDollars(props) {
   let apiCall = new usersService();
 
   let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
+  const [loader, setLoader] = useState(false);
 
   let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED
 
@@ -94,18 +95,26 @@ function AddFundDollars(props) {
       }, 5000);
     }
     if (tab == "previous") {
-      const stateData = { amount: Number(props.input), currency: "dollars" };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
+      setLoader(true);
+      const stateData = {
+        amount: Number(props.input),
+        currency: props.currency,
+      };
+
+      setTimeout(() => {
+        props.setConfirmCredit({ show: true, data: stateData });
+        setLoader(false);
+      }, 1500);
+      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
     if (tab == "new") {
       const stateData = {
         amount: Number(props.input),
-        currency: "dollars",
+        currency: props.currency,
         ...values,
       };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
+      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
-    props.setInput("");
   };
 
   useEffect(() => {
@@ -169,7 +178,11 @@ function AddFundDollars(props) {
               <select className="my-3 w-full rounded-full p-4 outline-none border-none">
                 <option value="">Select a card</option>
                 {currentPreviousCards.map((item, index) => (
-                  <option key={index} className={index != 0 && "border-t-2"}>
+                  <option
+                    key={index}
+                    className={index != 0 && "border-t-2"}
+                    value={item}
+                  >
                     <div className="my-2 flex items-center gap-5">
                       {/* <input
                             type="radio"
@@ -518,13 +531,23 @@ function AddFundDollars(props) {
         )}
       </div>
       {tab == "previous" && (
-        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center py-4">
+        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
+          <button
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+            onClick={props.onClose}
+          >
+            Cancel
+          </button>
           <button
             onClick={handleSubmit}
             type="button"
-            className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            <span className="text-white">Continue</span>
+            {loader ? (
+              <LoadingSpinner size="6" color="sky-blue" />
+            ) : (
+              <span className="text-white">Continue</span>
+            )}
           </button>
         </div>
       )}

src/components/MyWallet/AddFundPop.jsx

@@ -1,20 +1,16 @@
 import React, { useState } from "react";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate } from "react-router-dom";
 import InputCom from "../Helpers/Inputs/InputCom";
 
 import AddFundDollars from "./AddFundDollars";
 
-function AddFundPop({ _payment }) {
+function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
   const navigate = useNavigate();
   //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
 
   let { payment, currency } = _payment;
 
   //STATE FOR CONTROLLED INPUT
-  let [input, setInput] = useState("");
-
   let [inputError, setInputError] = useState("");
 
   // FUNCTION TO HANDLE INPUT CHANGE
@@ -23,7 +19,8 @@ function AddFundPop({ _payment }) {
   };
 
   //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = () => {
+  const handleSubmit = (e) => {
+    e.preventDefault()
     setInputError("");
     if (!input || input == "0") {
       setInputError("Please Enter Amount");
@@ -39,14 +36,22 @@ function AddFundPop({ _payment }) {
       }, 5000);
     }
 
-    const stateData = { amount: Number(input), currency: "naira" };
-    navigate("confirm-add-fund", { state: stateData });
+    if(input)   return;
+    // setTimeout(
+    //   () =>
+    //     setConfirmCredit({
+    //       show: true,
+    //       data: { amount: Number(input), currency: "naira" },
+    //     }),
+    //   1500
+    // );
 
-    setInput("");
+    // const stateData = { amount: Number(input), currency: "naira" };
+    // navigate("confirm-add-fund", { state: stateData });
+
+    // setInput("");
   };
 
-  console.log("walletItem details >>", payment, currency);
-
   return (
     <div className="h-[36rem] w-full">
       <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
@@ -72,11 +77,9 @@ function AddFundPop({ _payment }) {
                 )}
               </div>
             </form>
-            {currency == "US Dollars" && (
-              <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4">
-                Payment Method
-              </h1>
-            )}
+            <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
+              {currency == "US Dollars" && "Payment Method"}
+            </h1>
             <hr />
 
             {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
@@ -86,13 +89,22 @@ function AddFundPop({ _payment }) {
                   setInputError={setInputError}
                   input={input}
                   setInput={setInput}
+                  currency={currency}
+                  onClose={onClose}
+                  setConfirmCredit={setConfirmCredit}
                 />
               </div>
             )}
 
             {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
             {currency != "US Dollars" && (
-              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
+              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+                <button
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  onClick={onClose}
+                >
+                  Cancel
+                </button>
                 <button
                   onClick={handleSubmit}
                   type="button"

src/components/MyWallet/ConfirmAddFund.jsx

@@ -1,16 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 
 import usersService from "../../services/UsersService";
 
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 
-function ConfirmAddFund({ payment }) {
+function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
 
   let [pageLoading, setPageLoading] = useState(true);
@@ -24,12 +22,10 @@ function ConfirmAddFund({ payment }) {
   const apiURL = new usersService();
   const navigate = useNavigate();
 
-  let { state } = useLocation();
-
   //FUNCTION TO HANDLE SUBMIT
   const onSuccessPayment = () => {
     setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: state?.account, currency: "NGN" };
+    let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
     apiURL
       .startTopUp(reqData)
       .then((res) => {
@@ -66,7 +62,7 @@ function ConfirmAddFund({ payment }) {
   const config = {
     public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
     tx_ref: Date.now(),
-    amount: state?.amount,
+    amount: confirmCredit?.data?.amount,
     currency: "NGN",
     payment_options: "card,mobilemoney,ussd",
     customer: {
@@ -91,73 +87,115 @@ function ConfirmAddFund({ payment }) {
     onClose: () => {},
   };
 
-  useEffect(() => {
-    // what happens if not state redirect user
-    if (!state) {
-      navigate("/my-wallet/add-fund", { replace: true });
-    } else {
-      setPageLoading(false);
-    }
-  }, []);
+  // useEffect(() => {
+  //   // what happens if not data redirect user
+  //   if (!data) {
+  //     navigate("/my-wallet/add-fund", { replace: true });
+  //   } else {
+  //     setPageLoading(false);
+  //   }
+  // }, []);
+
+  console.log("data on confirm", confirmCredit);
 
   return (
-    <div className="content-wrapper w-full">
-      {pageLoading ? (
-        <LoadingSpinner size="8" color="sky-blue" />
-      ) : (
-        <div className="w-full mb-10">
-          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-            <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+    <div className="content-wrapper w-full h-[36rem]">
+      <div className="w-full mb-10">
+        <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+          {/* <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
               Confirm Add Fund To Account
             </h2>
-            <hr />
-            <div className="px-4 md:px-8 py-4 add-fund-info">
-              <div className="field w-full mb-3">
+            <hr /> */}
+          <div className="px-4 md:px-8 py-4 add-fund-info">
+            <div className="field w-full mb-3 min-h-[45px] flex items-center">
+              {confirmCredit?.show ? (
+                <div className="flex flex-col items-center gap-4">
+                  <div className="flex items-center gap-4">
+                    <label
+                      htmlFor="amount"
+                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
+                    >
+                      {confirmCredit?.data?.currency == "naira"
+                        ? "Amount (Naira):"
+                        : "Amount (Dollars):"}
+                    </label>
+                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                      {`${walletItem?.symbol} ${
+                        Number(confirmCredit?.data?.amount).toLocaleString() ||
+                        ""
+                      }`}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <label
+                      htmlFor="payment"
+                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
+                    >
+                      {confirmCredit?.data?.currency && "Payment Method"}
+                    </label>
+                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                      Coming Soon...
+                    </span>
+                  </div>
+                </div>
+              ) : (
                 <InputCom
                   fieldClass="px-6"
-                  label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
+                  label={
+                    confirmCredit?.data?.currency == "naira"
+                      ? "Amount (Naira):"
+                      : "Amount (Dollars):"
+                  }
                   type="text"
                   name="amount"
-                  value={state.amount || ""}
+                  value={confirmCredit?.data?.amount || ""}
                   disable={true}
                 />
-              </div>
+              )}
             </div>
-
-            <hr />
-            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
-              {
-                state.currency == 'naira' ?
-                <FlutterWaveButton
-                  {...fwConfig}
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                />
-              :
-              <button 
+          </div>
+          {/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
+            {confirmCredit?.data?.currency && "Payment Method"}
+          </h1> */}
+          {/* <hr /> */}
+          <div className="min-h-[350px]"></div>
+          <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+            <button
+              className="px-2 h-11 flex justify-center items-center border-gradient text-base rounded-full"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            {confirmCredit?.data?.currency == "naira" ? (
+              <FlutterWaveButton
+                {...fwConfig}
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={()=>console.log('WORKING')}
+              />
+            ) : (
+              <button
+                className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                onClick={() => console.log("WORKING")}
               >
                 Continue
               </button>
-              }
-            </div>
+            )}
           </div>
         </div>
-      )}
+      </div>
 
-      <div className="w-full mb-10">
-        <div className="wallet w-full  md:p-8 p-4 h-full min-h-[600px] bg-white dark:bg-dark-white rounded-2xl shadow">
+      {/* <div className="w-full mb-10">
+        <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
           <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
             Recent Activity
           </h2>
-          {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
+          <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
           {payment.loading ? (
             <LoadingSpinner size="16" color="sky-blue" />
           ) : (
             <RecentActivityTable payment={payment} />
           )}
         </div>
-      </div>
+      </div> */}
     </div>
   );
 }

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -1,15 +1,11 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-// import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
-import InputCom from "../../Helpers/Inputs/InputCom";
 import usersService from "../../../services/UsersService";
-import Icons from "../../Helpers/Icons";
-import AddFund from "../AddFund";
 import ModalCom from "../../Helpers/ModalCom";
 import AddFundPop from "../AddFundPop";
+import ConfirmAddFund from "../ConfirmAddFund";
 
-const CreditPopup = ({ details, onClose, situation }) => {
+const CreditPopup = ({ details, onClose, situation, walletItem }) => {
   const { pathname, state } = useLocation();
   const [submitTask, setSubmitTask] = useState({
     loading: false,
@@ -17,6 +13,24 @@ const CreditPopup = ({ details, onClose, situation }) => {
     state: "",
   });
   const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
+  let [input, setInput] = useState("");
+  const [confirmCredit, setConfirmCredit] = useState({
+    show: false,
+    data: {},
+  });
+
+  // const openConfirmCredit = (value) => {
+  //   setConfirmCredit({ show: true, data: { ...value } });
+  // };
+
+  // const closeConfirmCredit = () => {
+  //   setConfirmCredit({ show: false, data: {} });
+  // };
+  // const handleConfirmCredit = useMemo((input) => {
+  //   if (input) {
+  //     setConfirmCredit(true);
+  //   } else setConfirmCredit(false);
+  // }, []);
 
   const switchNextStep = ({ target: value }) => {
     setSuggestedNextStep(value);
@@ -33,6 +47,8 @@ const CreditPopup = ({ details, onClose, situation }) => {
     onClose();
   };
 
+  console.log("prop drills >> ", confirmCredit);
+
   return (
     <ModalCom
       action={onClose}
@@ -42,7 +58,7 @@ const CreditPopup = ({ details, onClose, situation }) => {
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Add Credit
+            {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
           </h1>
           <button
             type="button"
@@ -71,7 +87,22 @@ const CreditPopup = ({ details, onClose, situation }) => {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center">
-          <AddFundPop _payment={details} />
+          {confirmCredit.show ? (
+            <ConfirmAddFund
+              confirmCredit={confirmCredit}
+              walletItem={walletItem}
+              onClose={onClose}
+            />
+          ) : (
+            <AddFundPop
+              _payment={details}
+              input={input}
+              setInput={setInput}
+              onClose={onClose}
+              confirmCredit={confirmCredit}
+              setConfirmCredit={setConfirmCredit}
+            />
+          )}
         </div>
       </div>
     </ModalCom>

src/components/MyWallet/Wallet.jsx

@@ -119,7 +119,7 @@ const WalletRoutes = () => {
           </Suspense>
         }
       >
-        <Route
+        {/* <Route
           path="add-fund"
           element={
             <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
@@ -134,7 +134,7 @@ const WalletRoutes = () => {
               <ConfirmAddFund payment={paymentHistory} />
             </Suspense>
           }
-        />
+        /> */}
         <Route
           path="transfer-fund"
           element={

src/components/MyWallet/WalletItemCard.jsx

@@ -125,6 +125,7 @@ export default function WalletItemCard({ walletItem, payment }) {
       {creditPopup.show && (
         <CreditPopup
           details={creditPopup.data}
+          walletItem={walletItem}
           onClose={closePopUp}
           situation={openPopUp}
         />

src/views/AppleRedirectPage.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import AppleRedirect from '../components/AuthPages/AuthRedirect/AppleRedirect'
+
+function AppleRedirectPage() {
+  return (
+    <>
+      <AppleRedirect />
+    </>
+  )
+}
+
+export default AppleRedirectPage