Skip to content

Commit 6bad687

Browse files
AkarshitAkarshit
authored
Merge pull request #796 from reactioncommerce/akarshit-entry-on-checkout
fix: login allowed from checkout page
2 parents 13786bb + d22bea2 commit 6bad687

File tree

9 files changed

+229
-175
lines changed

9 files changed

+229
-175
lines changed

‎components/AccountDropdown/AccountDropdown.js‎

Lines changed: 15 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,8 @@ import Popover from "@material-ui/core/Popover";
1010
import useViewer from "hooks/viewer/useViewer";
1111
import ViewerInfo from "@reactioncommerce/components/ViewerInfo/v1";
1212
import Link from "components/Link";
13-
import Modal from "@material-ui/core/Modal";
14-
import Login from "../Entry/Login";
15-
import SignUp from "../Entry/SignUp";
16-
import ChangePassword from "../Entry/ChangePassword";
17-
import ForgotPassword from "../Entry/ForgotPassword";
18-
import ResetPassword from "../Entry/ResetPassword";
13+
import useStores from "hooks/useStores";
14+
import EntryModal from "../Entry/EntryModal";
1915
import getAccountsHandler from "../../lib/accountsServer.js";
2016

2117
const useStyles = makeStyles((theme) => ({
@@ -25,52 +21,30 @@ const useStyles = makeStyles((theme) => ({
2521
},
2622
marginBottom: {
2723
marginBottom: theme.spacing(2)
28-
},
29-
paper: {
30-
position: "absolute",
31-
width: 380,
32-
backgroundColor: theme.palette.background.paper,
33-
border: "2px solid #000",
34-
boxShadow: theme.shadows[5],
35-
padding: theme.spacing(2, 4, 3),
36-
top: "50%",
37-
left: "50%",
38-
transform: "translate(-50%, -50%)",
39-
display: "flex",
40-
alignItems: "center",
41-
justifyContent: "center"
4224
}
4325
}));
4426

4527
const AccountDropdown = () => {
4628
const router = useRouter();
29+
const { uiStore } = useStores();
30+
const { setEntryModal } = uiStore;
4731
const resetToken = router?.query?.resetToken;
4832
const classes = useStyles();
49-
const [open, setOpen] = React.useState(false);
5033
const [anchorElement, setAnchorElement] = useState(null);
51-
const [modalValue, setModalValue] = useState("");
5234
const [viewer, , refetch] = useViewer();
5335
const { accountsClient } = getAccountsHandler();
5436
const isAuthenticated = viewer && viewer._id;
5537

56-
const onClose = () => {
57-
setAnchorElement(null);
58-
};
59-
6038
useEffect(() => {
61-
if (!resetToken) return;
62-
setOpen(true);
63-
setModalValue("reset-password");
39+
// Open the modal in case of reset-password link
40+
if (!resetToken) {
41+
return;
42+
}
43+
setEntryModal("reset-password");
6444
}, [resetToken]);
6545

66-
const openModal = (value) => {
67-
setModalValue(value);
68-
setOpen(true);
69-
onClose();
70-
};
71-
72-
const closeModal = () => {
73-
setOpen(false);
46+
const onClose = () => {
47+
setAnchorElement(null);
7448
};
7549

7650
const handleSignOut = async () => {
@@ -83,25 +57,9 @@ const AccountDropdown = () => {
8357
setAnchorElement(event.currentTarget);
8458
};
8559

86-
const getModalComponent = () => {
87-
let comp = Login;
88-
if (modalValue === "signup") {
89-
comp = SignUp;
90-
} else if (modalValue === "change-password") {
91-
comp = ChangePassword;
92-
} else if (modalValue === "forgot-password") {
93-
comp = ForgotPassword;
94-
} else if (modalValue === "reset-password") {
95-
comp = ResetPassword;
96-
}
97-
return React.createElement(comp, { closeModal, openModal, resetToken });
98-
};
99-
10060
return (
10161
<Fragment>
102-
<Modal open={open} onClose={closeModal} aria-labelledby="entry-modal" aria-describedby="entry-modal">
103-
<div className={classes.paper}>{getModalComponent()}</div>
104-
</Modal>
62+
<EntryModal onClose={onClose} resetToken={resetToken} />
10563
{isAuthenticated ? (
10664
<ButtonBase onClick={toggleOpen}>
10765
<ViewerInfo viewer={viewer} />
@@ -132,7 +90,7 @@ const AccountDropdown = () => {
13290
</Link>
13391
</div>
13492
<div className={classes.marginBottom}>
135-
<Button color="primary" fullWidth onClick={() => openModal("change-password")}>
93+
<Button color="primary" fullWidth onClick={() => setEntryModal("change-password")}>
13694
Change Password
13795
</Button>
13896
</div>
@@ -143,11 +101,11 @@ const AccountDropdown = () => {
143101
) : (
144102
<Fragment>
145103
<div className={classes.authContent}>
146-
<Button color="primary" fullWidth variant="contained" onClick={() => openModal("login")}>
104+
<Button color="primary" fullWidth variant="contained" onClick={() => setEntryModal("login")}>
147105
Sign In
148106
</Button>
149107
</div>
150-
<Button color="primary" fullWidth onClick={() => openModal("signup")}>
108+
<Button color="primary" fullWidth onClick={() => setEntryModal("signup")}>
151109
Create Account
152110
</Button>
153111
</Fragment>

‎components/Entry/Entry.js‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import Router from "translations/i18nRouter";
43
import { withStyles } from "@material-ui/core/styles";
54
import Typography from "@material-ui/core/Typography";
65
import Grid from "@material-ui/core/Grid";
76
import GuestForm from "@reactioncommerce/components/GuestForm/v1";
87
import Button from "@reactioncommerce/components/Button/v1";
8+
import useStores from "hooks/useStores";
99

1010
// flex wrapper jss mixin
1111
const flexWrapper = () => ({
@@ -42,18 +42,30 @@ const styles = (theme) => ({
4242
});
4343

4444
const Entry = (props) => {
45-
const { classes, onLoginButtonClick, onRegisterButtonClick, setEmailOnAnonymousCart } = props;
45+
const { classes, setEmailOnAnonymousCart } = props;
46+
const { uiStore } = useStores();
47+
const { setEntryModal } = uiStore;
4648
return (
4749
<Grid container>
4850
<Grid item xs={12} md={7}>
4951
<div className={classes.loginWrapper}>
5052
<Typography variant="h6" gutterBottom>
5153
Returning Customer
5254
</Typography>
53-
<Button onClick={onLoginButtonClick} actionType="important" isFullWidth className={classes.loginButton}>
55+
<Button
56+
onClick={() => setEntryModal("login")}
57+
actionType="important"
58+
isFullWidth
59+
className={classes.loginButton}
60+
>
5461
Login
5562
</Button>
56-
<Button onClick={onRegisterButtonClick} actionType="secondary" isFullWidth className={classes.loginButton}>
63+
<Button
64+
onClick={() => setEntryModal("signup")}
65+
actionType="secondary"
66+
isFullWidth
67+
className={classes.loginButton}
68+
>
5769
Create a new accounts
5870
</Button>
5971
</div>
@@ -71,12 +83,6 @@ const Entry = (props) => {
7183
};
7284

7385
Entry.defaultProps = {
74-
onLoginButtonClick() {
75-
Router.push("/signin");
76-
},
77-
onRegisterButtonClick() {
78-
Router.push("/signup");
79-
},
8086
setEmailOnAnonymousCart() {}
8187
};
8288

‎components/Entry/EntryModal.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { makeStyles } from "@material-ui/core/styles";
4+
import Modal from "@material-ui/core/Modal";
5+
import useStores from "hooks/useStores";
6+
import Login from "../Entry/Login";
7+
import SignUp from "../Entry/SignUp";
8+
import ChangePassword from "../Entry/ChangePassword";
9+
import ForgotPassword from "../Entry/ForgotPassword";
10+
import ResetPassword from "../Entry/ResetPassword";
11+
12+
const useStyles = makeStyles((theme) => ({
13+
paper: {
14+
position: "absolute",
15+
width: 380,
16+
backgroundColor: theme.palette.background.paper,
17+
border: "2px solid #000",
18+
boxShadow: theme.shadows[5],
19+
padding: theme.spacing(2, 4, 3),
20+
top: "50%",
21+
left: "50%",
22+
transform: "translate(-50%, -50%)",
23+
display: "flex",
24+
alignItems: "center",
25+
justifyContent: "center"
26+
}
27+
}));
28+
29+
const EntryModal = ({ onClose, resetToken }) => {
30+
const classes = useStyles();
31+
const { uiStore } = useStores();
32+
33+
const { entryModal, setEntryModal } = uiStore;
34+
35+
const openModal = (value) => {
36+
setEntryModal(value);
37+
};
38+
39+
const closeModal = () => {
40+
setEntryModal(null);
41+
onClose();
42+
};
43+
44+
// eslint-disable-next-line react/no-multi-comp
45+
const getModalComponent = () => {
46+
let comp = Login;
47+
if (entryModal === "signup") {
48+
comp = SignUp;
49+
} else if (entryModal === "change-password") {
50+
comp = ChangePassword;
51+
} else if (entryModal === "forgot-password") {
52+
comp = ForgotPassword;
53+
} else if (entryModal === "reset-password") {
54+
comp = ResetPassword;
55+
}
56+
return React.createElement(comp, { closeModal, openModal, resetToken });
57+
};
58+
59+
return (
60+
<Modal open={Boolean(entryModal)} onClose={closeModal} aria-labelledby="entry-modal" aria-describedby="entry-modal">
61+
<div className={classes.paper}>{getModalComponent()}</div>
62+
</Modal>
63+
);
64+
};
65+
66+
EntryModal.propTypes = {
67+
onClose: PropTypes.func,
68+
resetToken: PropTypes.string
69+
};
70+
71+
EntryModal.defaultProps = {
72+
onClose: () => null
73+
};
74+
75+
export default EntryModal;

‎components/Entry/Login.js‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import useViewer from "hooks/viewer/useViewer";
1111
import getAccountsHandler from "../../lib/accountsServer.js";
1212
import hashPassword from "../../lib/utils/hashPassword";
1313

14-
1514
const useStyles = makeStyles((theme) => ({
1615
root: {
1716
"display": "flex",
@@ -81,8 +80,8 @@ export default function Login(props) {
8180
},
8281
password: hashPassword(password)
8382
});
84-
await refetch();
8583
closeModal();
84+
await refetch();
8685
} catch (err) {
8786
setError(err.message);
8887
}
@@ -98,20 +97,36 @@ export default function Login(props) {
9897
</FormControl>
9998
<FormControl>
10099
<InputLabel htmlFor="password">Password</InputLabel>
101-
<Input id="password" aria-describedby="password" onChange={handlePasswordChange} value={password}
100+
<Input
101+
id="password"
102+
aria-describedby="password"
103+
onChange={handlePasswordChange}
104+
value={password}
102105
type="password"
103106
/>
104107
</FormControl>
105-
<div className={classes.forgotPassword} onClick={handleForgotPasswordClick} onKeyDown={handleForgotPasswordClick} role="button"
106-
tabIndex={0}
107-
>Forgot Password?</div>
108-
<Button onClick={registerUser} color="primary" variant="contained"
108+
<div
109+
className={classes.forgotPassword}
110+
onClick={handleForgotPasswordClick}
111+
onKeyDown={handleForgotPasswordClick}
109112
role="button"
110-
>Sign In</Button>
113+
tabIndex={0}
114+
>
115+
Forgot Password?
116+
</div>
117+
<Button onClick={registerUser} color="primary" variant="contained" role="button">
118+
Sign In
119+
</Button>
111120
{!!error && <div className={classes.error}>{error}</div>}
112-
<div className={classes.switchEntryMode} onClick={handleOpenSignUp} onKeyDown={handleOpenSignUp} role="button"
121+
<div
122+
className={classes.switchEntryMode}
123+
onClick={handleOpenSignUp}
124+
onKeyDown={handleOpenSignUp}
125+
role="button"
113126
tabIndex={0}
114-
>Don't have an account? Sign Up</div>
127+
>
128+
Don't have an account? Sign Up
129+
</div>
115130
</form>
116131
);
117132
}

‎components/Entry/SignUp.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ export default function SignUp(props) {
6868
try {
6969
// Creating user will login also
7070
await passwordClient.createUser({ email, password: hashPassword(password) });
71-
await refetch();
7271
closeModal();
72+
await refetch();
7373
} catch (err) {
7474
setError(err.message);
7575
}

‎context/CartContext.js‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export const CartProvider = ({ children }) => {
1111
const [anonymousCartId, setAnonymousCartId] = useState();
1212
const [anonymousCartToken, setAnonymousCartToken] = useState();
1313
const [accountCartId, setAccountCartId] = useState();
14-
const [isReconcilingCarts, setIsReconcilingCarts] = useState(false);
1514
const [checkoutPayments, setCheckoutPayments] = useState([]);
1615

1716
const setAnonymousCartCredentials = (newAnonymousCartId, newAnonymousCartToken) => {
@@ -65,23 +64,23 @@ export const CartProvider = ({ children }) => {
6564
};
6665

6766
return (
68-
<CartContext.Provider value={{
69-
anonymousCartId,
70-
anonymousCartToken,
71-
accountCartId,
72-
isReconcilingCarts,
73-
checkoutPayments,
74-
setAnonymousCartCredentials,
75-
clearAnonymousCartCredentials,
76-
setAnonymousCartCredentialsFromLocalStorage,
77-
setIsReconcilingCarts,
78-
hasAnonymousCartCredentials: (anonymousCartId && anonymousCartToken) || false,
79-
hasAccountCart: typeof accountCartId === "string",
80-
setAccountCartId,
81-
addCheckoutPayment,
82-
setCheckoutPayment,
83-
resetCheckoutPayments
84-
}}
67+
<CartContext.Provider
68+
value={{
69+
anonymousCartId,
70+
anonymousCartToken,
71+
accountCartId,
72+
// isReconcilingCarts,
73+
checkoutPayments,
74+
setAnonymousCartCredentials,
75+
clearAnonymousCartCredentials,
76+
setAnonymousCartCredentialsFromLocalStorage,
77+
hasAnonymousCartCredentials: (anonymousCartId && anonymousCartToken) || false,
78+
hasAccountCart: typeof accountCartId === "string",
79+
setAccountCartId,
80+
addCheckoutPayment,
81+
setCheckoutPayment,
82+
resetCheckoutPayments
83+
}}
8584
>
8685
{children}
8786
</CartContext.Provider>

0 commit comments

Comments
 (0)