Merge branch 'master' of https://github.com/okbel/e-comm-example

components/auth/LoginView.tsx

@@ -0,0 +1,91 @@
+import { FC, useEffect, useState } from 'react'
+import { Logo, Modal, Button, Input } from '@components/ui'
+import useLogin from '@lib/bigcommerce/use-login'
+import { useUI } from '@components/ui/context'
+import { validate } from 'email-validator'
+
+interface Props {}
+
+const LoginView: FC<Props> = () => {
+  // Form State
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState('')
+  const [dirty, setDirty] = useState(false)
+  const [disabled, setDisabled] = useState(false)
+  const { setModalView, closeModal } = useUI()
+
+  const login = useLogin()
+
+  const handleLogin = async () => {
+    if (!dirty && !disabled) {
+      setDirty(true)
+      handleValidation()
+    }
+
+    try {
+      setLoading(true)
+      setMessage('')
+      await login({
+        email,
+        password,
+      })
+      setLoading(false)
+      closeModal()
+    } catch ({ errors }) {
+      setMessage(errors[0].message)
+      setLoading(false)
+    }
+  }
+
+  const handleValidation = () => {
+    // Test for Alphanumeric password
+    const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
+
+    // Unable to send form unless fields are valid.
+    if (dirty) {
+      setDisabled(!validate(email) || password.length < 7 || !validPassword)
+    }
+  }
+
+  useEffect(() => {
+    handleValidation()
+  }, [email, password, dirty])
+
+  return (
+    <div className="w-80 flex flex-col justify-between p-3">
+      <div className="flex justify-center pb-12 ">
+        <Logo width="64px" height="64px" />
+      </div>
+      <div className="flex flex-col space-y-3">
+        {message && (
+          <div className="text-red border border-red p-3">{message}</div>
+        )}
+
+        <Input placeholder="Email" onChange={setEmail} />
+        <Input placeholder="Password" onChange={setPassword} />
+        <Button
+          variant="slim"
+          onClick={() => handleLogin()}
+          loading={loading}
+          disabled={disabled}
+        >
+          Log In
+        </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('SIGNUP_VIEW')}
+          >
+            Sign Up
+          </a>
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default LoginView

components/auth/SignUpView.tsx

@@ -0,0 +1,96 @@
+import { FC, useEffect, useState } from 'react'
+import { Logo, Button, Input } from '@components/ui'
+import useSignup from '@lib/bigcommerce/use-signup'
+import { useUI } from '@components/ui/context'
+import { validate } from 'email-validator'
+
+interface Props {}
+
+const SignUpView: FC<Props> = () => {
+  // Form State
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState('')
+  const [dirty, setDirty] = useState(false)
+  const [disabled, setDisabled] = useState(false)
+
+  const signup = useSignup()
+  const { setModalView, closeModal } = useUI()
+
+  const handleSignup = async () => {
+    if (!dirty && !disabled) {
+      setDirty(true)
+      handleValidation()
+    }
+
+    try {
+      setLoading(true)
+      setMessage('')
+      await signup({
+        email,
+        firstName,
+        lastName,
+        password,
+      })
+      setLoading(false)
+      closeModal()
+    } catch ({ errors }) {
+      setMessage(errors[0].message)
+      setLoading(false)
+    }
+  }
+
+  const handleValidation = () => {
+    // Test for Alphanumeric password
+    const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
+
+    // Unable to send form unless fields are valid.
+    if (dirty) {
+      setDisabled(!validate(email) || password.length < 7 || !validPassword)
+    }
+  }
+
+  useEffect(() => {
+    handleValidation()
+  }, [email, password, dirty])
+
+  return (
+    <div className="w-80 flex flex-col justify-between p-3">
+      <div className="flex justify-center pb-12 ">
+        <Logo width="64px" height="64px" />
+      </div>
+      <div className="flex flex-col space-y-3">
+        {message && (
+          <div className="text-red border border-red p-3">{message}</div>
+        )}
+        <Input placeholder="First Name" onChange={setFirstName} />
+        <Input placeholder="Last Name" onChange={setLastName} />
+        <Input placeholder="Email" onChange={setEmail} />
+        <Input placeholder="Password" onChange={setPassword} />
+        <Button
+          variant="slim"
+          onClick={() => handleSignup()}
+          loading={loading}
+          disabled={disabled}
+        >
+          Sign Up
+        </Button>
+        <span className="pt-3 text-center text-sm">
+          <span className="text-accents-7">Do you 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 SignUpView

components/auth/index.ts

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

components/core/Layout/Layout.tsx

@@ -1,14 +1,14 @@
-import { FC, useEffect, useState } from 'react'
 import cn from 'classnames'
-import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
-import { CommerceProvider } from '@lib/bigcommerce'
-import { Navbar, Featurebar, Footer } from '@components/core'
-import { Container, Sidebar } from '@components/ui'
-import Button from '@components/ui/Button'
-import { CartSidebarView } from '@components/cart'
-import { useUI } from '@components/ui/context'
 import s from './Layout.module.css'
+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, SignUpView } from '@components/auth'
+import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'
+import { CommerceProvider } from '@lib/bigcommerce'
+import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 interface Props {
   pageProps: {
     pages?: Page[]
@@ -16,7 +16,13 @@ interface Props {
 }
 
 const Layout: FC<Props> = ({ children, pageProps }) => {
-  const { displaySidebar, displayDropdown, closeSidebar } = useUI()
+  const {
+    displaySidebar,
+    displayModal,
+    closeSidebar,
+    closeModal,
+    modalView,
+  } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
   const [hasScrolled, setHasScrolled] = useState(false)
 
@@ -37,7 +43,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
   }, [])
 
   usePreventScroll({
-    isDisabled: !displaySidebar,
+    isDisabled: !(displaySidebar || displayModal),
   })
 
   return (
@@ -55,11 +61,13 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         </header>
         <main className="fit">{children}</main>
         <Footer pages={pageProps.pages} />
-
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
-
+        <Modal open={displayModal} onClose={closeModal}>
+          {modalView === 'LOGIN_VIEW' && <LoginView />}
+          {modalView === 'SIGNUP_VIEW' && <SignUpView />}
+        </Modal>
         <Featurebar
           title="This site uses cookies to improve your experience."
           description="By clicking, you agree to our Privacy Policy."

components/core/UserNav/DropdownMenu.tsx

@@ -5,7 +5,7 @@ import cn from 'classnames'
 import s from './DropdownMenu.module.css'
 import { Moon, Sun } from '@components/icon'
 import { Menu, Transition } from '@headlessui/react'
-
+import useLogout from '@lib/bigcommerce/use-logout'
 interface DropdownMenuProps {
   open: boolean
 }
@@ -27,7 +27,7 @@ const LINKS = [
 
 const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
   const { theme, setTheme } = useTheme()
-
+  const logout = useLogout()
   return (
     <Transition
       show={open}
@@ -68,7 +68,12 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
           </a>
         </Menu.Item>
         <Menu.Item>
-          <a className={cn(s.link, 'border-t border-accents-2 mt-4')}>Logout</a>
+          <a
+            className={cn(s.link, 'border-t border-accents-2 mt-4')}
+            onClick={() => logout()}
+          >
+            Logout
+          </a>
         </Menu.Item>
       </Menu.Items>
     </Transition>

components/core/UserNav/UserNav.tsx

@@ -5,10 +5,11 @@ import { FC } from 'react'
 import { Heart, Bag } from '@components/icon'
 import { Avatar } from '@components/core'
 import { useUI } from '@components/ui/context'
+import { LoginView } from '@components/auth'
 import DropdownMenu from './DropdownMenu'
 import { Menu } from '@headlessui/react'
 import useCart from '@lib/bigcommerce/cart/use-cart'
-
+import useCustomer from '@lib/bigcommerce/use-customer'
 interface Props {
   className?: string
 }
@@ -19,16 +20,17 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className, children, ...props }) => {
   const { data } = useCart()
-  const { openSidebar, closeSidebar, displaySidebar } = useUI()
+  const { data: customer } = useCustomer()
-  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
+  const { openSidebar, closeSidebar, displaySidebar, openModal } = useUI()
+  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
   return (
     <nav className={cn(s.root, className)}>
       <div className={s.mainContainer}>
         <ul className={s.list}>
           <li
             className={s.item}
-            onClick={() => (displaySidebar ? closeSidebar() : openSidebar())}
+            onClick={(e) => (displaySidebar ? closeSidebar() : openSidebar())}
           >
             <Bag />
             {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
@@ -39,16 +41,26 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             </li>
           </Link>
           <li className={s.item}>
-            <Menu>
+            {customer ? (
-              {({ open }) => (
+              <Menu>
-                <>
+                {({ open }) => (
-                  <Menu.Button className={s.avatarButton} aria-label="Menu">
+                  <>
-                    <Avatar />
+                    <Menu.Button className={s.avatarButton} aria-label="Menu">
-                  </Menu.Button>
+                      <Avatar />
-                  <DropdownMenu open={open} />
+                    </Menu.Button>
-                </>
+                    <DropdownMenu open={open} />
-              )}
+                  </>
-            </Menu>
+                )}
+              </Menu>
+            ) : (
+              <button
+                className={s.avatarButton}
+                aria-label="Menu"
+                onClick={() => openModal()}
+              >
+                <Avatar />
+              </button>
+            )}
           </li>
         </ul>
       </div>

components/ui/Button/Button.module.css

@@ -24,3 +24,12 @@
 .slim {
   @apply py-2 transform-none normal-case;
 }
+
+.disabled,
+.disabled:hover {
+  @apply text-accents-4 border-accents-2 bg-accents-1 cursor-not-allowed;
+  filter: grayscale(1);
+  -webkit-transform: translateZ(0);
+  -webkit-perspective: 1000;
+  -webkit-backface-visibility: hidden;
+}

components/ui/Button/Button.tsx

@@ -19,6 +19,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   Component?: string | JSXElementConstructor<any>
   width?: string | number
   loading?: boolean
+  disabled?: boolean
 }
 
 const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
@@ -28,10 +29,10 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     children,
     active,
     onClick,
-    disabled,
     width,
     Component = 'button',
     loading = false,
+    disabled = false,
     style = {},
     ...rest
   } = props
@@ -52,6 +53,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     {
       [s.slim]: variant === 'slim',
       [s.loading]: loading,
+      [s.disabled]: disabled,
     },
     className
   )
@@ -64,6 +66,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
       {...buttonProps}
       data-active={isPressed ? '' : undefined}
       className={rootClassName}
+      disabled={disabled}
       style={{
         width,
         ...style,

components/ui/Input/Input.module.css

@@ -0,0 +1,5 @@
+.root {
+  @apply focus:outline-none bg-primary focus:shadow-outline-gray py-2 
+  px-6 w-full appearance-none transition duration-150 ease-in-out 
+  placeholder-accents-5 pr-10 border border-accents-3 text-accents-6;
+}

components/ui/Input/Input.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames'
+import s from './Input.module.css'
+import React, { InputHTMLAttributes } from 'react'
+
+export interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  className?: string
+  onChange?: (...args: any[]) => any
+}
+
+const Input: React.FC<Props> = (props) => {
+  const { className, children, onChange, ...rest } = props
+
+  const rootClassName = cn(s.root, {}, className)
+
+  const handleOnChange = (e: any) => {
+    if (onChange) {
+      onChange(e.target.value)
+    }
+    return null
+  }
+
+  return <input className={rootClassName} onChange={handleOnChange} {...rest} />
+}
+
+export default Input

components/ui/Input/index.ts

@@ -0,0 +1 @@
+export { default } from './Input'

components/ui/Modal/Modal.tsx

@@ -2,43 +2,64 @@ import cn from 'classnames'
 import { FC, useRef } from 'react'
 import s from './Modal.module.css'
 import { useDialog } from '@react-aria/dialog'
-import { useOverlay, useModal } from '@react-aria/overlays'
 import { FocusScope } from '@react-aria/focus'
-
+import { Transition } from '@headlessui/react'
+import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 interface Props {
   className?: string
   children?: any
-  show?: boolean
+  open: boolean
-  close: () => void
+  onClose?: () => void
 }
 
 const Modal: FC<Props> = ({
   className,
   children,
-  show = true,
+  open = false,
-  close,
+  onClose,
   ...props
 }) => {
   const rootClassName = cn(s.root, className)
   let ref = useRef() as React.MutableRefObject<HTMLInputElement>
   let { modalProps } = useModal()
-  let { overlayProps } = useOverlay(props, ref)
+  let { dialogProps } = useDialog({}, ref)
-  let { dialogProps } = useDialog(props, ref)
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: open,
+      isDismissable: true,
+      onClose: onClose,
+      ...props,
+    },
+    ref
+  )
 
   return (
-    <div className={rootClassName}>
+    <Transition show={open}>
-      <FocusScope contain restoreFocus autoFocus>
+      <OverlayContainer>
-        <div
+        <FocusScope contain restoreFocus autoFocus>
-          {...overlayProps}
+          <div className={rootClassName}>
-          {...dialogProps}
+            <Transition.Child
-          {...modalProps}
+              enter="transition-opacity ease-linear duration-300"
-          ref={ref}
+              enterFrom="opacity-0"
-          className={s.modal}
+              enterTo="opacity-100"
-        >
+              leave="transition-opacity ease-linear duration-300"
-          {children}
+              leaveFrom="opacity-100"
-        </div>
+              leaveTo="opacity-0"
-      </FocusScope>
+            >
-    </div>
+              <div
+                className={s.modal}
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                ref={ref}
+              >
+                {children}
+              </div>
+            </Transition.Child>
+          </div>
+        </FocusScope>
+      </OverlayContainer>
+    </Transition>
   )
 }
 

components/ui/context.tsx

@@ -5,11 +5,15 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
 export interface State {
   displaySidebar: boolean
   displayDropdown: boolean
+  displayModal: boolean
+  modalView: string
 }
 
 const initialState = {
   displaySidebar: false,
   displayDropdown: false,
+  displayModal: false,
+  modalView: 'LOGIN_VIEW',
 }
 
 type Action =
@@ -25,6 +29,22 @@ type Action =
   | {
       type: 'CLOSE_DROPDOWN'
     }
+  | {
+      type: 'OPEN_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)
 
@@ -56,6 +76,24 @@ function uiReducer(state: State, action: Action) {
         displayDropdown: false,
       }
     }
+    case 'OPEN_MODAL': {
+      return {
+        ...state,
+        displayModal: true,
+      }
+    }
+    case 'CLOSE_MODAL': {
+      return {
+        ...state,
+        displayModal: false,
+      }
+    }
+    case 'SET_MODAL_VIEW': {
+      return {
+        ...state,
+        modalView: action.view,
+      }
+    }
   }
 }
 
@@ -68,12 +106,21 @@ export const UIProvider: FC = (props) => {
   const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
   const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
 
+  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,
     closeSidebar,
     openDropdown,
     closeDropdown,
+    openModal,
+    closeModal,
+    setModalView,
   }
 
   return <UIContext.Provider value={value} {...props} />

components/ui/index.ts

@@ -9,3 +9,4 @@ export { default as LoadingDots } from './LoadingDots'
 export { default as Skeleton } from './Skeleton'
 export { default as Modal } from './Modal'
 export { default as Text } from './Text'
+export { default as Input } from './Input'

package.json

@@ -26,6 +26,7 @@
     "bowser": "^2.11.0",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
+    "email-validator": "^2.0.4",
     "intersection-observer": "^0.11.0",
     "js-cookie": "^2.2.1",
     "keen-slider": "^5.2.4",

pages/login.tsx

@@ -1,91 +0,0 @@
-import useSignup from '@lib/bigcommerce/use-signup'
-import { Layout } from '@components/core'
-import { Logo, Modal, Button } from '@components/ui'
-import useLogin from '@lib/bigcommerce/use-login'
-import useLogout from '@lib/bigcommerce/use-logout'
-import useCustomer from '@lib/bigcommerce/use-customer'
-
-export default function Login() {
-  const signup = useSignup()
-  const login = useLogin()
-  const logout = useLogout()
-  // 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="pb-20">
-      <Modal close={() => {}}>
-        <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"
-                className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
-              />
-            </div>
-            <div className="border border-accents-3 text-accents-6">
-              <input
-                placeholder="Password"
-                className="bg-primary focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
-              />
-            </div>
-            <Button variant="slim" onClick={handleSignup}>
-              Log In
-            </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">
-                Sign Up
-              </a>
-            </span>
-          </div>
-        </div>
-      </Modal>
-    </div>
-  )
-}
-
-Login.Layout = Layout

yarn.lock

@@ -4030,6 +4030,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+email-validator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
+  integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"