Merge pull request #796 from reactioncommerce/akarshit-entry-on-checkout

fix: login allowed from checkout page
reactioncommerce · Sep 3, 2021 · 6bad687 · 6bad687
2 parents 13786bb + d22bea2
commit 6bad687
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 175 deletions.
diff --git a/components/AccountDropdown/AccountDropdown.js b/components/AccountDropdown/AccountDropdown.js
@@ -10,12 +10,8 @@ import Popover from "@material-ui/core/Popover";
 import useViewer from "hooks/viewer/useViewer";
 import ViewerInfo from "@reactioncommerce/components/ViewerInfo/v1";
 import Link from "components/Link";
-import Modal from "@material-ui/core/Modal";
-import Login from "../Entry/Login";
-import SignUp from "../Entry/SignUp";
-import ChangePassword from "../Entry/ChangePassword";
-import ForgotPassword from "../Entry/ForgotPassword";
-import ResetPassword from "../Entry/ResetPassword";
+import useStores from "hooks/useStores";
+import EntryModal from "../Entry/EntryModal";
 import getAccountsHandler from "../../lib/accountsServer.js";
 
 const useStyles = makeStyles((theme) => ({
@@ -25,52 +21,30 @@ const useStyles = makeStyles((theme) => ({
   },
   marginBottom: {
     marginBottom: theme.spacing(2)
-  },
-  paper: {
-    position: "absolute",
-    width: 380,
-    backgroundColor: theme.palette.background.paper,
-    border: "2px solid #000",
-    boxShadow: theme.shadows[5],
-    padding: theme.spacing(2, 4, 3),
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
   }
 }));
 
 const AccountDropdown = () => {
   const router = useRouter();
+  const { uiStore } = useStores();
+  const { setEntryModal } = uiStore;
   const resetToken = router?.query?.resetToken;
   const classes = useStyles();
-  const [open, setOpen] = React.useState(false);
   const [anchorElement, setAnchorElement] = useState(null);
-  const [modalValue, setModalValue] = useState("");
   const [viewer, , refetch] = useViewer();
   const { accountsClient } = getAccountsHandler();
   const isAuthenticated = viewer && viewer._id;
 
-  const onClose = () => {
-    setAnchorElement(null);
-  };
-
   useEffect(() => {
-    if (!resetToken) return;
-    setOpen(true);
-    setModalValue("reset-password");
+    // Open the modal in case of reset-password link
+    if (!resetToken) {
+      return;
+    }
+    setEntryModal("reset-password");
   }, [resetToken]);
 
-  const openModal = (value) => {
-    setModalValue(value);
-    setOpen(true);
-    onClose();
-  };
-
-  const closeModal = () => {
-    setOpen(false);
+  const onClose = () => {
+    setAnchorElement(null);
   };
 
   const handleSignOut = async () => {
@@ -83,25 +57,9 @@ const AccountDropdown = () => {
     setAnchorElement(event.currentTarget);
   };
 
-  const getModalComponent = () => {
-    let comp = Login;
-    if (modalValue === "signup") {
-      comp = SignUp;
-    } else if (modalValue === "change-password") {
-      comp = ChangePassword;
-    } else if (modalValue === "forgot-password") {
-      comp = ForgotPassword;
-    } else if (modalValue === "reset-password") {
-      comp = ResetPassword;
-    }
-    return React.createElement(comp, { closeModal, openModal, resetToken });
-  };
-
   return (
     <Fragment>
-      <Modal open={open} onClose={closeModal} aria-labelledby="entry-modal" aria-describedby="entry-modal">
-        <div className={classes.paper}>{getModalComponent()}</div>
-      </Modal>
+      <EntryModal onClose={onClose} resetToken={resetToken} />
       {isAuthenticated ? (
         <ButtonBase onClick={toggleOpen}>
           <ViewerInfo viewer={viewer} />
@@ -132,7 +90,7 @@ const AccountDropdown = () => {
                 </Link>
               </div>
               <div className={classes.marginBottom}>
-                <Button color="primary" fullWidth onClick={() => openModal("change-password")}>
+                <Button color="primary" fullWidth onClick={() => setEntryModal("change-password")}>
                   Change Password
                 </Button>
               </div>
@@ -143,11 +101,11 @@ const AccountDropdown = () => {
           ) : (
             <Fragment>
               <div className={classes.authContent}>
-                <Button color="primary" fullWidth variant="contained" onClick={() => openModal("login")}>
+                <Button color="primary" fullWidth variant="contained" onClick={() => setEntryModal("login")}>
                   Sign In
                 </Button>
               </div>
-              <Button color="primary" fullWidth onClick={() => openModal("signup")}>
+              <Button color="primary" fullWidth onClick={() => setEntryModal("signup")}>
                 Create Account
               </Button>
             </Fragment>

diff --git a/components/Entry/Entry.js b/components/Entry/Entry.js
@@ -1,11 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Router from "translations/i18nRouter";
 import { withStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
 import Grid from "@material-ui/core/Grid";
 import GuestForm from "@reactioncommerce/components/GuestForm/v1";
 import Button from "@reactioncommerce/components/Button/v1";
+import useStores from "hooks/useStores";
 
 // flex wrapper jss mixin
 const flexWrapper = () => ({
@@ -42,18 +42,30 @@ const styles = (theme) => ({
 });
 
 const Entry = (props) => {
-  const { classes, onLoginButtonClick, onRegisterButtonClick, setEmailOnAnonymousCart } = props;
+  const { classes, setEmailOnAnonymousCart } = props;
+  const { uiStore } = useStores();
+  const { setEntryModal } = uiStore;
   return (
     <Grid container>
       <Grid item xs={12} md={7}>
         <div className={classes.loginWrapper}>
           <Typography variant="h6" gutterBottom>
             Returning Customer
           </Typography>
-          <Button onClick={onLoginButtonClick} actionType="important" isFullWidth className={classes.loginButton}>
+          <Button
+            onClick={() => setEntryModal("login")}
+            actionType="important"
+            isFullWidth
+            className={classes.loginButton}
+          >
             Login
           </Button>
-          <Button onClick={onRegisterButtonClick} actionType="secondary" isFullWidth className={classes.loginButton}>
+          <Button
+            onClick={() => setEntryModal("signup")}
+            actionType="secondary"
+            isFullWidth
+            className={classes.loginButton}
+          >
             Create a new accounts
           </Button>
         </div>
@@ -71,12 +83,6 @@ const Entry = (props) => {
 };
 
 Entry.defaultProps = {
-  onLoginButtonClick() {
-    Router.push("/signin");
-  },
-  onRegisterButtonClick() {
-    Router.push("/signup");
-  },
   setEmailOnAnonymousCart() {}
 };
 

diff --git a/components/Entry/EntryModal.js b/components/Entry/EntryModal.js
@@ -0,0 +1,75 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import Modal from "@material-ui/core/Modal";
+import useStores from "hooks/useStores";
+import Login from "../Entry/Login";
+import SignUp from "../Entry/SignUp";
+import ChangePassword from "../Entry/ChangePassword";
+import ForgotPassword from "../Entry/ForgotPassword";
+import ResetPassword from "../Entry/ResetPassword";
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    position: "absolute",
+    width: 380,
+    backgroundColor: theme.palette.background.paper,
+    border: "2px solid #000",
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
+const EntryModal = ({ onClose, resetToken }) => {
+  const classes = useStyles();
+  const { uiStore } = useStores();
+
+  const { entryModal, setEntryModal } = uiStore;
+
+  const openModal = (value) => {
+    setEntryModal(value);
+  };
+
+  const closeModal = () => {
+    setEntryModal(null);
+    onClose();
+  };
+
+  // eslint-disable-next-line react/no-multi-comp
+  const getModalComponent = () => {
+    let comp = Login;
+    if (entryModal === "signup") {
+      comp = SignUp;
+    } else if (entryModal === "change-password") {
+      comp = ChangePassword;
+    } else if (entryModal === "forgot-password") {
+      comp = ForgotPassword;
+    } else if (entryModal === "reset-password") {
+      comp = ResetPassword;
+    }
+    return React.createElement(comp, { closeModal, openModal, resetToken });
+  };
+
+  return (
+    <Modal open={Boolean(entryModal)} onClose={closeModal} aria-labelledby="entry-modal" aria-describedby="entry-modal">
+      <div className={classes.paper}>{getModalComponent()}</div>
+    </Modal>
+  );
+};
+
+EntryModal.propTypes = {
+  onClose: PropTypes.func,
+  resetToken: PropTypes.string
+};
+
+EntryModal.defaultProps = {
+  onClose: () => null
+};
+
+export default EntryModal;
diff --git a/components/Entry/Login.js b/components/Entry/Login.js
@@ -11,7 +11,6 @@ import useViewer from "hooks/viewer/useViewer";
 import getAccountsHandler from "../../lib/accountsServer.js";
 import hashPassword from "../../lib/utils/hashPassword";
 
-
 const useStyles = makeStyles((theme) => ({
   root: {
     "display": "flex",
@@ -81,8 +80,8 @@ export default function Login(props) {
         },
         password: hashPassword(password)
       });
-      await refetch();
       closeModal();
+      await refetch();
     } catch (err) {
       setError(err.message);
     }
@@ -98,20 +97,36 @@ export default function Login(props) {
       </FormControl>
       <FormControl>
         <InputLabel htmlFor="password">Password</InputLabel>
-        <Input id="password" aria-describedby="password" onChange={handlePasswordChange} value={password}
+        <Input
+          id="password"
+          aria-describedby="password"
+          onChange={handlePasswordChange}
+          value={password}
           type="password"
         />
       </FormControl>
-      <div className={classes.forgotPassword} onClick={handleForgotPasswordClick} onKeyDown={handleForgotPasswordClick} role="button"
-        tabIndex={0}
-      >Forgot Password?</div>
-      <Button onClick={registerUser} color="primary" variant="contained"
+      <div
+        className={classes.forgotPassword}
+        onClick={handleForgotPasswordClick}
+        onKeyDown={handleForgotPasswordClick}
         role="button"
-      >Sign In</Button>
+        tabIndex={0}
+      >
+        Forgot Password?
+      </div>
+      <Button onClick={registerUser} color="primary" variant="contained" role="button">
+        Sign In
+      </Button>
       {!!error && <div className={classes.error}>{error}</div>}
-      <div className={classes.switchEntryMode} onClick={handleOpenSignUp} onKeyDown={handleOpenSignUp} role="button"
+      <div
+        className={classes.switchEntryMode}
+        onClick={handleOpenSignUp}
+        onKeyDown={handleOpenSignUp}
+        role="button"
         tabIndex={0}
-      >Don't have an account? Sign Up</div>
+      >
+        Don't have an account? Sign Up
+      </div>
     </form>
   );
 }

diff --git a/components/Entry/SignUp.js b/components/Entry/SignUp.js
@@ -68,8 +68,8 @@ export default function SignUp(props) {
     try {
       // Creating user will login also
       await passwordClient.createUser({ email, password: hashPassword(password) });
-      await refetch();
       closeModal();
+      await refetch();
     } catch (err) {
       setError(err.message);
     }

diff --git a/context/CartContext.js b/context/CartContext.js
@@ -11,7 +11,6 @@ export const CartProvider = ({ children }) => {
   const [anonymousCartId, setAnonymousCartId] = useState();
   const [anonymousCartToken, setAnonymousCartToken] = useState();
   const [accountCartId, setAccountCartId] = useState();
-  const [isReconcilingCarts, setIsReconcilingCarts] = useState(false);
   const [checkoutPayments, setCheckoutPayments] = useState([]);
 
   const setAnonymousCartCredentials = (newAnonymousCartId, newAnonymousCartToken) => {
@@ -65,23 +64,23 @@ export const CartProvider = ({ children }) => {
   };
 
   return (
-    <CartContext.Provider value={{
-      anonymousCartId,
-      anonymousCartToken,
-      accountCartId,
-      isReconcilingCarts,
-      checkoutPayments,
-      setAnonymousCartCredentials,
-      clearAnonymousCartCredentials,
-      setAnonymousCartCredentialsFromLocalStorage,
-      setIsReconcilingCarts,
-      hasAnonymousCartCredentials: (anonymousCartId && anonymousCartToken) || false,
-      hasAccountCart: typeof accountCartId === "string",
-      setAccountCartId,
-      addCheckoutPayment,
-      setCheckoutPayment,
-      resetCheckoutPayments
-    }}
+    <CartContext.Provider
+      value={{
+        anonymousCartId,
+        anonymousCartToken,
+        accountCartId,
+        // isReconcilingCarts,
+        checkoutPayments,
+        setAnonymousCartCredentials,
+        clearAnonymousCartCredentials,
+        setAnonymousCartCredentialsFromLocalStorage,
+        hasAnonymousCartCredentials: (anonymousCartId && anonymousCartToken) || false,
+        hasAccountCart: typeof accountCartId === "string",
+        setAccountCartId,
+        addCheckoutPayment,
+        setCheckoutPayment,
+        resetCheckoutPayments
+      }}
     >
       {children}
     </CartContext.Provider>