forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
3f337737e8
91
components/auth/LoginView.tsx
Normal file
91
components/auth/LoginView.tsx
Normal 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
|
96
components/auth/SignUpView.tsx
Normal file
96
components/auth/SignUpView.tsx
Normal 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
2
components/auth/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export { default as LoginView } from './LoginView'
|
||||||
|
export { default as SignUpView } from './SignUpView'
|
@ -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."
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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,
|
||||||
|
5
components/ui/Input/Input.module.css
Normal file
5
components/ui/Input/Input.module.css
Normal 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;
|
||||||
|
}
|
25
components/ui/Input/Input.tsx
Normal file
25
components/ui/Input/Input.tsx
Normal 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
|
1
components/ui/Input/index.ts
Normal file
1
components/ui/Input/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './Input'
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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} />
|
||||||
|
@ -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'
|
||||||
|
@ -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",
|
||||||
|
@ -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
|
|
@ -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"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user