4
0
forked from crowetic/commerce

Support for multiple modal views

This commit is contained in:
Belen Curcio 2020-10-25 18:26:32 -03:00
parent eb94d2dbf9
commit d47fa2d29f
5 changed files with 127 additions and 10 deletions

View File

@ -9,11 +9,7 @@ interface Props {}
const LoginView: FC<Props> = () => {
const [email, setEmail] = useState('')
const [pass, setPass] = useState('')
// const { openModal, closeModal } = useUI()
// useEffect(() => {
// open ? openModal() : closeModal()
// }, [open])
const { setModalView } = useUI()
const signup = useSignup()
const login = useLogin()
@ -78,7 +74,10 @@ const LoginView: FC<Props> = () => {
<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">
<a
className="text-accent-9 font-bold hover:underline cursor-pointer"
onClick={() => setModalView('SIGNUP_VIEW')}
>
Sign Up
</a>
</span>

View 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

View File

@ -1 +1,2 @@
export { default as LoginView } from './LoginView'
export { default as SignUpView } from './SignUpView'

View File

@ -1,10 +1,10 @@
import cn from 'classnames'
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 { Container, Sidebar, Button, Modal } from '@components/ui'
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 { usePreventScroll } from '@react-aria/overlays'
import { CommerceProvider } from '@lib/bigcommerce'
@ -16,7 +16,13 @@ interface Props {
}
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 [hasScrolled, setHasScrolled] = useState(false)
@ -58,7 +64,8 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
<CartSidebarView />
</Sidebar>
<Modal open={displayModal} onClose={closeModal}>
<LoginView />
{modalView === 'LOGIN_VIEW' && <LoginView />}
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
</Modal>
<Featurebar
title="This site uses cookies to improve your experience."

View File

@ -6,12 +6,14 @@ export interface State {
displaySidebar: boolean
displayDropdown: boolean
displayModal: boolean
modalView: string
}
const initialState = {
displaySidebar: false,
displayDropdown: false,
displayModal: false,
modalView: 'LOGIN_VIEW',
}
type Action =
@ -33,6 +35,16 @@ type Action =
| {
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)
@ -76,6 +88,12 @@ function uiReducer(state: State, action: Action) {
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 closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
const setModalView = (view: MODAL_VIEWS) =>
dispatch({ type: 'SET_MODAL_VIEW', view })
const value = {
...state,
openSidebar,
@ -99,6 +120,7 @@ export const UIProvider: FC = (props) => {
closeDropdown,
openModal,
closeModal,
setModalView,
}
return <UIContext.Provider value={value} {...props} />