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

2025-03-14 22:42:33 +00:00 · 2020-10-25 19:44:36 -03:00 · 2020-10-25 19:44:36 -03:00 · 3d149c0c5a
commit 3d149c0c5a
parent afdb85f8b4 4f4ac89cd9
16 changed files with 305 additions and 119 deletions
--- a/components/auth/LoginView.tsx
+++ b/components/auth/LoginView.tsx
@ -1,98 +1,90 @@
-import { FC, useEffect } from 'react'
-import { Logo, Modal, Button } from '@components/ui'
-import useSignup from '@lib/bigcommerce/use-signup'
+import { FC, useEffect, useState } from 'react'
+import { Logo, Modal, Button, Input } from '@components/ui'
 import useLogin from '@lib/bigcommerce/use-login'
-import useLogout from '@lib/bigcommerce/use-logout'
-import useCustomer from '@lib/bigcommerce/use-customer'
 import { useUI } from '@components/ui/context'
+import { validate } from 'email-validator'

-interface Props {
-  open: boolean
-}
+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 LoginView: FC<Props> = ({ open }) => {
-  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.
+    if (!dirty && !disabled) {
+      setDirty(true)
+      handleValidation()
+    }
+
    try {
+      setLoading(true)
+      setMessage('')
      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`
+        email,
+        password,
      })
-    } 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
+      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)
    }
  }

-  const { openModal, closeModal } = useUI()
  useEffect(() => {
-    open ? openModal() : closeModal()
-  }, [open])
+    handleValidation()
+  }, [email, password, dirty])

  return (
-    <Modal open={open}>
-      <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 className="w-80 flex flex-col justify-between p-3">
+      <div className="flex justify-center pb-12 ">
+        <Logo width="64px" height="64px" />
      </div>
-    </Modal>
+      <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>
  )
 }

--- a/components/auth/SignUpView.tsx
+++ b/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
--- a/components/auth/index.ts
+++ b/components/auth/index.ts
@ -1 +1,2 @@
 export { default as LoginView } from './LoginView'
+export { default as SignUpView } from './SignUpView'
--- a/components/core/Layout/Layout.tsx
+++ b/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."
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/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>
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@ -22,7 +22,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
  const { data } = useCart()
  const { data: customer } = useCustomer()

-  const { openSidebar, closeSidebar, displaySidebar } = useUI()
+  const { openSidebar, closeSidebar, displaySidebar, openModal } = useUI()
  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
  return (
    <nav className={cn(s.root, className)}>
@ -30,7 +30,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
        <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>}
@ -41,20 +41,26 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
            </li>
          </Link>
          <li className={s.item}>
-            <Menu>
-              {({ open }) => (
-                <>
-                  <Menu.Button className={s.avatarButton} aria-label="Menu">
-                    <Avatar />
-                  </Menu.Button>
-                  {customer ? (
+            {customer ? (
+              <Menu>
+                {({ open }) => (
+                  <>
+                    <Menu.Button className={s.avatarButton} aria-label="Menu">
+                      <Avatar />
+                    </Menu.Button>
                    <DropdownMenu open={open} />
-                  ) : (
-                    <LoginView open={open} />
-                  )}
-                </>
-              )}
-            </Menu>
+                  </>
+                )}
+              </Menu>
+            ) : (
+              <button
+                className={s.avatarButton}
+                aria-label="Menu"
+                onClick={() => openModal()}
+              >
+                <Avatar />
+              </button>
+            )}
          </li>
        </ul>
      </div>
--- a/components/ui/Button/Button.module.css
+++ b/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;
+}
--- a/components/ui/Button/Button.tsx
+++ b/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,
--- a/components/ui/Input/Input.module.css
+++ b/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;
+}
--- a/components/ui/Input/Input.tsx
+++ b/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
--- a/components/ui/Input/index.ts
+++ b/components/ui/Input/index.ts
@ -0,0 +1 @@
+export { default } from './Input'
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@ -8,7 +8,7 @@ import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
 interface Props {
  className?: string
  children?: any
-  open?: boolean
+  open: boolean
  onClose?: () => void
 }

@ -22,14 +22,22 @@ const Modal: FC<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(props, ref)
+  let { dialogProps } = useDialog({}, ref)
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: open,
+      isDismissable: true,
+      onClose: onClose,
+      ...props,
+    },
+    ref
+  )

  return (
    <Transition show={open}>
      <OverlayContainer>
-        <div className={rootClassName} onClick={onClose}>
-          <FocusScope contain restoreFocus autoFocus>
+        <FocusScope contain restoreFocus autoFocus>
+          <div className={rootClassName}>
            <Transition.Child
              enter="transition-opacity ease-linear duration-300"
              enterFrom="opacity-0"
@ -39,17 +47,17 @@ const Modal: FC<Props> = ({
              leaveTo="opacity-0"
            >
              <div
+                className={s.modal}
                {...overlayProps}
                {...dialogProps}
                {...modalProps}
                ref={ref}
-                className={s.modal}
              >
                {children}
              </div>
            </Transition.Child>
-          </FocusScope>
-        </div>
+          </div>
+        </FocusScope>
      </OverlayContainer>
    </Transition>
  )
--- a/components/ui/context.tsx
+++ b/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,10 +120,9 @@ export const UIProvider: FC = (props) => {
    closeDropdown,
    openModal,
    closeModal,
+    setModalView,
  }

-  console.log('state', state)
-
  return <UIContext.Provider value={value} {...props} />
 }

--- a/components/ui/index.ts
+++ b/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'
--- a/package.json
+++ b/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",
--- a/yarn.lock
+++ b/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"