Support for multiple modal views

components/auth/LoginView.tsx

@@ -9,11 +9,7 @@ interface Props {}
 const LoginView: FC<Props> = () => {
   const [email, setEmail] = useState('')
   const [pass, setPass] = useState('')
-  // const { openModal, closeModal } = useUI()
+  const { setModalView } = useUI()
-
-  // useEffect(() => {
-  //   open ? openModal() : closeModal()
-  // }, [open])
 
   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>

components/auth/SignUpView.tsx

@@ -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

components/auth/index.ts

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

components/core/Layout/Layout.tsx

@@ -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."

components/ui/context.tsx

@@ -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} />