forked from crowetic/commerce
Support for multiple modal views
This commit is contained in:
parent
eb94d2dbf9
commit
d47fa2d29f
@ -9,11 +9,7 @@ interface Props {}
|
|||||||
const LoginView: FC<Props> = () => {
|
const LoginView: FC<Props> = () => {
|
||||||
const [email, setEmail] = useState('')
|
const [email, setEmail] = useState('')
|
||||||
const [pass, setPass] = useState('')
|
const [pass, setPass] = useState('')
|
||||||
// const { openModal, closeModal } = useUI()
|
const { setModalView } = useUI()
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// open ? openModal() : closeModal()
|
|
||||||
// }, [open])
|
|
||||||
|
|
||||||
const signup = useSignup()
|
const signup = useSignup()
|
||||||
const login = useLogin()
|
const login = useLogin()
|
||||||
@ -78,7 +74,10 @@ const LoginView: FC<Props> = () => {
|
|||||||
<span className="pt-3 text-center text-sm">
|
<span className="pt-3 text-center text-sm">
|
||||||
<span className="text-accents-7">Don't have an account?</span>
|
<span className="text-accents-7">Don't have an account?</span>
|
||||||
{` `}
|
{` `}
|
||||||
<a className="text-accent-9 font-bold hover:underline cursor-pointer">
|
<a
|
||||||
|
className="text-accent-9 font-bold hover:underline cursor-pointer"
|
||||||
|
onClick={() => setModalView('SIGNUP_VIEW')}
|
||||||
|
>
|
||||||
Sign Up
|
Sign Up
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
|
88
components/auth/SignUpView.tsx
Normal file
88
components/auth/SignUpView.tsx
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import { FC, useEffect, useState } from 'react'
|
||||||
|
import { Logo, Modal, Button, Input } from '@components/ui'
|
||||||
|
import useSignup from '@lib/bigcommerce/use-signup'
|
||||||
|
import useLogin from '@lib/bigcommerce/use-login'
|
||||||
|
import { useUI } from '@components/ui/context'
|
||||||
|
|
||||||
|
interface Props {}
|
||||||
|
|
||||||
|
const LoginView: FC<Props> = () => {
|
||||||
|
const [email, setEmail] = useState('')
|
||||||
|
const [pass, setPass] = useState('')
|
||||||
|
|
||||||
|
const signup = useSignup()
|
||||||
|
const login = useLogin()
|
||||||
|
const { setModalView } = useUI()
|
||||||
|
// // Data about the currently logged in customer, it will update
|
||||||
|
// // automatically after a signup/login/logout
|
||||||
|
// const { data } = useCustomer()
|
||||||
|
// TODO: use this method. It can take more than 5 seconds to do a signup
|
||||||
|
const handleSignup = async () => {
|
||||||
|
// TODO: validate the password and email before calling the signup
|
||||||
|
// Passwords must be at least 7 characters and contain both alphabetic
|
||||||
|
// and numeric characters.
|
||||||
|
try {
|
||||||
|
await signup({
|
||||||
|
// This account already exists, so it will throw the "duplicated_email" error
|
||||||
|
email: 'luis@vercel.com',
|
||||||
|
firstName: 'Luis',
|
||||||
|
lastName: 'Alvarez',
|
||||||
|
password: 'luis123',
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
if (error.code === 'duplicated_email') {
|
||||||
|
// TODO: handle duplicated email
|
||||||
|
}
|
||||||
|
// Show a generic error saying that something bad happened, try again later
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLogin = async () => {
|
||||||
|
// TODO: validate the password and email before calling the signup
|
||||||
|
// Passwords must be at least 7 characters and contain both alphabetic
|
||||||
|
// and numeric characters.
|
||||||
|
try {
|
||||||
|
await login({
|
||||||
|
email: 'luis@vercel.com',
|
||||||
|
// This is an invalid password so it will throw the "invalid_credentials" error
|
||||||
|
password: 'luis1234', // will work with `luis123`
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
if (error.code === 'invalid_credentials') {
|
||||||
|
// The email and password didn't match an existing account
|
||||||
|
}
|
||||||
|
// Show a generic error saying that something bad happened, try again later
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
|
||||||
|
<div className="flex justify-center pb-12 ">
|
||||||
|
<Logo width="64px" height="64px" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col space-y-3">
|
||||||
|
<div className="border border-accents-3 text-accents-6">
|
||||||
|
<Input placeholder="Email" onChange={setEmail} />
|
||||||
|
</div>
|
||||||
|
<div className="border border-accents-3 text-accents-6">
|
||||||
|
<Input placeholder="Password" onChange={setEmail} />
|
||||||
|
</div>
|
||||||
|
<Button variant="slim" onClick={handleSignup}>
|
||||||
|
Sign Up
|
||||||
|
</Button>
|
||||||
|
<span className="pt-3 text-center text-sm">
|
||||||
|
<span className="text-accents-7">Don't have an account?</span>
|
||||||
|
{` `}
|
||||||
|
<a
|
||||||
|
className="text-accent-9 font-bold hover:underline cursor-pointer"
|
||||||
|
onClick={() => setModalView('LOGIN_VIEW')}
|
||||||
|
>
|
||||||
|
Log In
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LoginView
|
@ -1 +1,2 @@
|
|||||||
export { default as LoginView } from './LoginView'
|
export { default as LoginView } from './LoginView'
|
||||||
|
export { default as SignUpView } from './SignUpView'
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
import s from './Layout.module.css'
|
import s from './Layout.module.css'
|
||||||
import { FC, useEffect, useState } from 'react'
|
import React, { FC, useEffect, useState } from 'react'
|
||||||
import { CartSidebarView } from '@components/cart'
|
import { CartSidebarView } from '@components/cart'
|
||||||
import { Container, Sidebar, Button, Modal } from '@components/ui'
|
import { Container, Sidebar, Button, Modal } from '@components/ui'
|
||||||
import { Navbar, Featurebar, Footer } from '@components/core'
|
import { Navbar, Featurebar, Footer } from '@components/core'
|
||||||
import { LoginView } from '@components/auth'
|
import { LoginView, SignUpView } from '@components/auth'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import { usePreventScroll } from '@react-aria/overlays'
|
import { usePreventScroll } from '@react-aria/overlays'
|
||||||
import { CommerceProvider } from '@lib/bigcommerce'
|
import { CommerceProvider } from '@lib/bigcommerce'
|
||||||
@ -16,7 +16,13 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Layout: FC<Props> = ({ children, pageProps }) => {
|
const Layout: FC<Props> = ({ children, pageProps }) => {
|
||||||
const { displaySidebar, displayModal, closeSidebar, closeModal } = useUI()
|
const {
|
||||||
|
displaySidebar,
|
||||||
|
displayModal,
|
||||||
|
closeSidebar,
|
||||||
|
closeModal,
|
||||||
|
modalView,
|
||||||
|
} = useUI()
|
||||||
const [acceptedCookies, setAcceptedCookies] = useState(false)
|
const [acceptedCookies, setAcceptedCookies] = useState(false)
|
||||||
const [hasScrolled, setHasScrolled] = useState(false)
|
const [hasScrolled, setHasScrolled] = useState(false)
|
||||||
|
|
||||||
@ -58,7 +64,8 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
<CartSidebarView />
|
<CartSidebarView />
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
<Modal open={displayModal} onClose={closeModal}>
|
<Modal open={displayModal} onClose={closeModal}>
|
||||||
<LoginView />
|
{modalView === 'LOGIN_VIEW' && <LoginView />}
|
||||||
|
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
|
||||||
</Modal>
|
</Modal>
|
||||||
<Featurebar
|
<Featurebar
|
||||||
title="This site uses cookies to improve your experience."
|
title="This site uses cookies to improve your experience."
|
||||||
|
@ -6,12 +6,14 @@ export interface State {
|
|||||||
displaySidebar: boolean
|
displaySidebar: boolean
|
||||||
displayDropdown: boolean
|
displayDropdown: boolean
|
||||||
displayModal: boolean
|
displayModal: boolean
|
||||||
|
modalView: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
displaySidebar: false,
|
displaySidebar: false,
|
||||||
displayDropdown: false,
|
displayDropdown: false,
|
||||||
displayModal: false,
|
displayModal: false,
|
||||||
|
modalView: 'LOGIN_VIEW',
|
||||||
}
|
}
|
||||||
|
|
||||||
type Action =
|
type Action =
|
||||||
@ -33,6 +35,16 @@ type Action =
|
|||||||
| {
|
| {
|
||||||
type: 'CLOSE_MODAL'
|
type: 'CLOSE_MODAL'
|
||||||
}
|
}
|
||||||
|
| {
|
||||||
|
type: 'SET_MODAL_VIEW'
|
||||||
|
view: 'LOGIN_VIEW'
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: 'SET_MODAL_VIEW'
|
||||||
|
view: 'SIGNUP_VIEW'
|
||||||
|
}
|
||||||
|
|
||||||
|
type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW'
|
||||||
|
|
||||||
export const UIContext = React.createContext<State | any>(initialState)
|
export const UIContext = React.createContext<State | any>(initialState)
|
||||||
|
|
||||||
@ -76,6 +88,12 @@ function uiReducer(state: State, action: Action) {
|
|||||||
displayModal: false,
|
displayModal: false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
case 'SET_MODAL_VIEW': {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
modalView: action.view,
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -91,6 +109,9 @@ export const UIProvider: FC = (props) => {
|
|||||||
const openModal = () => dispatch({ type: 'OPEN_MODAL' })
|
const openModal = () => dispatch({ type: 'OPEN_MODAL' })
|
||||||
const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
|
const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
|
||||||
|
|
||||||
|
const setModalView = (view: MODAL_VIEWS) =>
|
||||||
|
dispatch({ type: 'SET_MODAL_VIEW', view })
|
||||||
|
|
||||||
const value = {
|
const value = {
|
||||||
...state,
|
...state,
|
||||||
openSidebar,
|
openSidebar,
|
||||||
@ -99,6 +120,7 @@ export const UIProvider: FC = (props) => {
|
|||||||
closeDropdown,
|
closeDropdown,
|
||||||
openModal,
|
openModal,
|
||||||
closeModal,
|
closeModal,
|
||||||
|
setModalView,
|
||||||
}
|
}
|
||||||
|
|
||||||
return <UIContext.Provider value={value} {...props} />
|
return <UIContext.Provider value={value} {...props} />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user