Feature/task 82

src/Components/Dashboard/Home/HomeHeader.js

@@ -6,7 +6,6 @@ import styles from "./Home.module.css";
 
 function HomeHeader() {
   const { user } = useSelector((state) => state.authReducer);
-
   return (
     <div className={styles.home__header}>
       <Link to="/settings">

src/Components/Dashboard/Settings/index.js

@@ -16,34 +16,34 @@ import CustomPhoneInput from "../../../common/components/CustomPhoneInput/Custom
 import { API_BASE_URL } from "../../../Utils/config";
 import AppLoader from "../../Generic/AppLoader";
 import { isValidFullName } from "../../../Utils/utils";
-import { LOGOUT } from "../../../Reducers/ActionTypes";
+import { LOGOUT, SET_SESSION } from "../../../Reducers/ActionTypes";
 
 const labels = {
   email: "Email Address",
   phone: "Phone Number",
   full_name: "Full Name",
-}
+};
 
 function Settings() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [connectedModal, setConnectedModal] = useState(false);
   const [changeInfo, setChangeInfo] = useState(false);
   const [details, setDetails] = useState("");
-  const [checked, setChecked] = useState(0);
+  // const [checked, setChecked] = useState(0);
   // const [enable2fa, setEnable2fa] = useState(false);
   const [info, setinfo] = useState("");
   const { user } = useSelector((state) => state.authReducer);
   const [isLoading, setIsloading] = useState(false);
 
   const [inputFields, setinputFields] = useState({
-    email: user.email,
-    phone: user.phone,
-    full_name: user.full_name,
+    email: user?.email,
+    phone: user?.phone,
+    full_name: user?.full_name,
   });
 
   useEffect(() => 0, [info]);
-
+  const allWallets = JSON.parse(localStorage.getItem("allWallets") || []);
   const closeChangeInfo = () => {
     setChangeInfo(false);
   };
@@ -52,6 +52,9 @@ function Settings() {
     setDetails(infovalue);
   };
 
+  // useEffect(() => {
+  //   console.log(user);
+  // }, [user]);
   const validateEmail = (email) => String(email)
     .toLowerCase()
     .match(
@@ -176,21 +179,34 @@ function Settings() {
       state: { user }
     });
   };
-  const check = (i) => {
-    if (checked !== i) {
-      setChecked(i);
-      setConnectedModal(false);
-    }
+  const check = (data) => {
+    localStorage.setItem("user", JSON.stringify(data));
+    setConnectedModal(false);
+    dispatch({
+      type: SET_SESSION,
+      payload: { user: data },
+    });
+    navigate("/");
   };
 
-  const SignOut = () => {
+  const SignOutAll = () => {
     dispatch({ type: LOGOUT });
     localStorage.removeItem("user");
     localStorage.removeItem("welcome")
     localStorage.removeItem("firstImport")
+    localStorage.removeItem("allWallets")
     navigate("/");
   };
-
+  const SignOut = () => {
+    const wallets = [...allWallets];
+    const index = allWallets.findIndex(wallet => wallet?.user_info?.user_id === user?.user_id);
+    if (index > -1) {
+      wallets.splice(index, 1);
+      localStorage.setItem("allWallets", JSON.stringify(wallets));
+      localStorage.setItem("user", JSON.stringify(wallets[0]));
+      navigate("/");
+    }
+  };
   const HandleInputChange = (field) => e => {
     if (details === "email" && e.target.value.length > 64) {
       return false;
@@ -281,18 +297,45 @@ function Settings() {
                           <IoIosArrowForward />
                         </button>
                       </div>
-
+                      {allWallets.length > 1 && (
                       <div
                         className={styles.settings__acc__content}
                         onClick={() => SignOut()}
                       >
                         <div className={styles.personal__settings}>
-                          <p>Sign Out</p>
+                          <p>
+                            Sign Out
+                            <b>
+                              {" "}
+                              {user?.full_name}
+                            </b>
+                          </p>
+                        </div>
+                        <button>
+                          <IoIosLogOut />
+                        </button>
+                      </div>
+                      )}
+                      <div
+                        className={styles.settings__acc__content}
+                        onClick={() => SignOutAll()}
+                      >
+                        <div className={styles.personal__settings}>
+                          <p>
+                            Sign Out
+                            {allWallets.length > 1 && (
+                            <b>
+                              {" "}
+                              All Accounts
+                            </b>
+                            )}
+                          </p>
                         </div>
                         <button>
                           <IoIosLogOut />
                         </button>
                       </div>
+
                     </div>
                   </div>
                 </div>
@@ -324,15 +367,25 @@ function Settings() {
           </Modal.Header>
           <Modal.Body>
             <div className={styles.modal__body__wrapper}>
-              <div className={styles.name__wrapper} onClick={() => check(0)}>
-                {/* <h6>{user?.email?.split("@")[0] + ".near"}</h6> */}
-                <span>{user?.wallet_id}</span>
-                {checked === 0 && (
-                  <div className={styles.checked}>
-                    <AiOutlineCheck />
+              {
+                allWallets.map((wallet) => (
+                  <div
+                    key={wallet?.user_info?.wallet_id}
+                    className={styles.name__wrapper}
+                    onClick={() => check(wallet)}
+                  >
+                    {/* <h6>{user?.email?.split("@")[0] + ".near"}</h6> */}
+                    <span>{wallet?.user_info?.wallet_id}</span>
+                    {wallet?.user_info?.user_id === user?.user_id
+                      ? (
+                        <div className={styles.checked}>
+                          <AiOutlineCheck />
+                        </div>
+                      )
+                      : <div className={styles.unChecked} />}
                   </div>
-                )}
-              </div>
+                ))
+              }
               {/* <div className={styles.name__wrapper} onClick={() => check(1)}>
                 <h6>demo.near</h6>
                 {checked === 1 && (

src/Components/ImportContactsDialog/ImportContactsDialog.jsx

@@ -1,5 +1,6 @@
 import Dialog from "@material-ui/core/Dialog";
 import Slide from "@material-ui/core/Slide";
+import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import React, { useEffect } from "react";
 import { FcGoogle } from "react-icons/fc";
@@ -50,6 +51,9 @@ const useStyles = makeStyles((theme) => ({
     color: "#dc3e15",
     fontSize: "30px",
   },
+  note: {
+    cursor: "default"
+  }
 }));
 
 const ImportContactsDialog = ({
@@ -189,6 +193,10 @@ const ImportContactsDialog = ({
         className="contactDialogBack"
         onClose={contacts.length > 0 ? callback : null}
       >
+        <Typography variant="h6" className={`text-center mb-3 ${classes.note}`}>
+          Import your contacts to generate & share your free NFT
+        </Typography>
+
         <button
           className={`${classes.mainContainer} cloudsponge-launch`}
           data-cloudsponge-source="gmail"
@@ -212,6 +220,7 @@ const ImportContactsDialog = ({
           <IoLogoMicrosoft className={classes.microsofticon} />
           <p> Connect Microsoft 365 Contacts</p>
         </button>
+
       </Dialog>
     </div>
   );

src/Components/SignUp/CreateAnAccount/CreateAnAccount.jsx

@@ -167,6 +167,8 @@ const CreateAnAccount = () => {
         // @ToDo
         // save user details
         localStorage.setItem("user", JSON.stringify(response.data));
+        const allWallets = JSON.parse(localStorage.getItem("allWallets")) || [];
+        localStorage.setItem("allWallets", JSON.stringify([...allWallets, response.data]));
 
         // cloudsponge import on signup
         localStorage.setItem("welcome", true);

src/Components/SignUp/Verification/index.jsx

@@ -82,7 +82,8 @@ const Verification = () => {
         // @ToDo
         // save user details
         localStorage.setItem("user", JSON.stringify(response.data));
-
+        const allWallets = localStorage.getItem("allWallets") || [];
+        localStorage.setItem("allWallets", JSON.stringify([...allWallets, JSON.stringify(response.data)]));
         navigate(redirectUrl ? redirectUrl : "/");
       })
       .catch((error) => {

src/layout/PrivateRoute.jsx

@@ -59,7 +59,11 @@ const PrivateRoute = (props) => {
   // @ToDo
   const user = JSON.parse(localStorage.getItem("user"));
   const isAuthenticated = user ? true : false;
-
+  // console.log(user);
+  // dispatch({
+  //   type: "auth/set_session",
+  //   payload: user,
+  // });
   if (isAuthenticated) {
     // save user details in redux state
     dispatch({ type: "login_Successfully", payload: user.user_info });