4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-25 17:57:49 -05:00
commit 3f337737e8
17 changed files with 383 additions and 142 deletions

View File

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

View File

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

2
components/auth/index.ts Normal file
View File

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

View File

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

View File

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

View File

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

View File

@ -24,3 +24,12 @@
.slim { .slim {
@apply py-2 transform-none normal-case; @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;
}

View File

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

View File

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

View File

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

View File

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

View File

@ -2,43 +2,64 @@ import cn from 'classnames'
import { FC, useRef } from 'react' import { FC, useRef } from 'react'
import s from './Modal.module.css' import s from './Modal.module.css'
import { useDialog } from '@react-aria/dialog' import { useDialog } from '@react-aria/dialog'
import { useOverlay, useModal } from '@react-aria/overlays'
import { FocusScope } from '@react-aria/focus' import { FocusScope } from '@react-aria/focus'
import { Transition } from '@headlessui/react'
import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
show?: boolean open: boolean
close: () => void onClose?: () => void
} }
const Modal: FC<Props> = ({ const Modal: FC<Props> = ({
className, className,
children, children,
show = true, open = false,
close, onClose,
...props ...props
}) => { }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
let ref = useRef() as React.MutableRefObject<HTMLInputElement> let ref = useRef() as React.MutableRefObject<HTMLInputElement>
let { modalProps } = useModal() 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 ( 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>
) )
} }

View File

@ -5,11 +5,15 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
export interface State { export interface State {
displaySidebar: boolean displaySidebar: boolean
displayDropdown: boolean displayDropdown: boolean
displayModal: boolean
modalView: string
} }
const initialState = { const initialState = {
displaySidebar: false, displaySidebar: false,
displayDropdown: false, displayDropdown: false,
displayModal: false,
modalView: 'LOGIN_VIEW',
} }
type Action = type Action =
@ -25,6 +29,22 @@ type Action =
| { | {
type: 'CLOSE_DROPDOWN' 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) export const UIContext = React.createContext<State | any>(initialState)
@ -56,6 +76,24 @@ function uiReducer(state: State, action: Action) {
displayDropdown: false, 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 openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
const closeDropdown = () => dispatch({ type: 'CLOSE_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 = { const value = {
...state, ...state,
openSidebar, openSidebar,
closeSidebar, closeSidebar,
openDropdown, openDropdown,
closeDropdown, closeDropdown,
openModal,
closeModal,
setModalView,
} }
return <UIContext.Provider value={value} {...props} /> return <UIContext.Provider value={value} {...props} />

View File

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

View File

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

View File

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

View File

@ -4030,6 +4030,11 @@ elliptic@^6.5.3:
minimalistic-assert "^1.0.0" minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^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: emoji-regex@^8.0.0:
version "8.0.0" version "8.0.0"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"