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

components/auth/ForgotPassword.tsx

@@ -0,0 +1,89 @@
+import { FC, useEffect, useState, useCallback } from 'react'
+import { validate } from 'email-validator'
+import { Info } from '@components/icon'
+import { useUI } from '@components/ui/context'
+import { Logo, Button, Input } from '@components/ui'
+import useSignup from '@lib/bigcommerce/use-signup'
+
+interface Props {}
+
+const ForgotPassword: FC<Props> = () => {
+  // Form State
+  const [email, setEmail] = 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,
+    //   })
+    //   setLoading(false)
+    //   closeModal()
+    // } catch ({ errors }) {
+    //   setMessage(errors[0].message)
+    //   setLoading(false)
+    // }
+  }
+
+  const handleValidation = useCallback(() => {
+    // Unable to send form unless fields are valid.
+    if (dirty) {
+      setDisabled(!validate(email))
+    }
+  }, [email, dirty])
+
+  useEffect(() => {
+    handleValidation()
+  }, [handleValidation])
+
+  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-4">
+        {message && (
+          <div className="text-red border border-red p-3">{message}</div>
+        )}
+
+        <Input placeholder="Email" onChange={setEmail} />
+        <div className="pt-2 w-full flex flex-col">
+          <Button
+            variant="slim"
+            onClick={() => handleSignup()}
+            loading={loading}
+            disabled={disabled}
+          >
+            Recover Password
+          </Button>
+        </div>
+
+        <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 ForgotPassword

components/auth/LoginView.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState, useCallback } from 'react'
 import { Logo, Modal, Button, Input } from '@components/ui'
 import useLogin from '@lib/bigcommerce/use-login'
 import { useUI } from '@components/ui/context'
@@ -39,7 +39,7 @@ const LoginView: FC<Props> = () => {
     }
   }
 
-  const handleValidation = () => {
+  const handleValidation = useCallback(() => {
     // Test for Alphanumeric password
     const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
 
@@ -47,11 +47,11 @@ const LoginView: FC<Props> = () => {
     if (dirty) {
       setDisabled(!validate(email) || password.length < 7 || !validPassword)
     }
-  }
+  }, [email, password, dirty])
 
   useEffect(() => {
     handleValidation()
-  }, [email, password, dirty])
+  }, [handleValidation])
 
   return (
     <div className="w-80 flex flex-col justify-between p-3">

components/auth/SignUpView.tsx

@@ -1,8 +1,9 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect, useState, useCallback } from 'react'
+import { validate } from 'email-validator'
+import { Info } from '@components/icon'
+import { useUI } from '@components/ui/context'
 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 {}
 
@@ -43,7 +44,7 @@ const SignUpView: FC<Props> = () => {
     }
   }
 
-  const handleValidation = () => {
+  const handleValidation = useCallback(() => {
     // Test for Alphanumeric password
     const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
 
@@ -51,18 +52,18 @@ const SignUpView: FC<Props> = () => {
     if (dirty) {
       setDisabled(!validate(email) || password.length < 7 || !validPassword)
     }
-  }
+  }, [email, password, dirty])
 
   useEffect(() => {
     handleValidation()
-  }, [email, password, dirty])
+  }, [handleValidation])
 
   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">
+      <div className="flex flex-col space-y-4">
         {message && (
           <div className="text-red border border-red p-3">{message}</div>
         )}
@@ -70,14 +71,26 @@ const SignUpView: FC<Props> = () => {
         <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="text-accents-8">
+          <Info
+            width="20"
+            height="20"
+            className="inline-block mr-1 text-accents-8"
+          />
+          <strong>Info</strong>: Password must be longer than 7 chars and
+          include numbers.
+        </span>
+        <div className="pt-2 w-full flex flex-col">
+          <Button
+            variant="slim"
+            onClick={() => handleSignup()}
+            loading={loading}
+            disabled={disabled}
+          >
+            Sign Up
+          </Button>
+        </div>
+
         <span className="pt-3 text-center text-sm">
           <span className="text-accents-7">Do you have an account?</span>
           {` `}

components/core/Layout/Layout.tsx

@@ -1,16 +1,16 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import cn from 'classnames'
 import { useRouter } from 'next/router'
 import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import { CommerceProvider } from '@lib/bigcommerce'
 import { CartSidebarView } from '@components/cart'
-import { Container, Sidebar, Button, Modal } from '@components/ui'
+import { Container, Sidebar, Button, Modal, Toast } 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 s from './Layout.module.css'
-
+import debounce from 'lodash.debounce'
 interface Props {
   pageProps: {
     pages?: Page[]
@@ -24,31 +24,34 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
     closeSidebar,
     closeModal,
     modalView,
+    toastText,
+    closeToast,
+    displayToast,
   } = useUI()
   const [acceptedCookies, setAcceptedCookies] = useState(false)
   const [hasScrolled, setHasScrolled] = useState(false)
   const { locale = 'en-US' } = useRouter()
 
-  // TODO: Update code, add throttle and more.
-  // TODO: Make sure to not do any unnecessary updates as it's doing right now
-  useEffect(() => {
-    const offset = 0
-    function handleScroll() {
-      const { scrollTop } = document.documentElement
-      if (scrollTop > offset) setHasScrolled(true)
-      else setHasScrolled(false)
-    }
-    document.addEventListener('scroll', handleScroll)
-
-    return () => {
-      document.removeEventListener('scroll', handleScroll)
-    }
-  }, [])
-
   usePreventScroll({
     isDisabled: !(displaySidebar || displayModal),
   })
 
+  const handleScroll = useCallback(() => {
+    debounce(() => {
+      const offset = 0
+      const { scrollTop } = document.documentElement
+      if (scrollTop > offset) setHasScrolled(true)
+      else setHasScrolled(false)
+    }, 1)
+  }, [])
+
+  useEffect(() => {
+    document.addEventListener('scroll', handleScroll)
+    return () => {
+      document.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll])
+
   return (
     <CommerceProvider locale={locale}>
       <div className={cn(s.root)}>
@@ -67,6 +70,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
         <Sidebar open={displaySidebar} onClose={closeSidebar}>
           <CartSidebarView />
         </Sidebar>
+
         <Modal open={displayModal} onClose={closeModal}>
           {modalView === 'LOGIN_VIEW' && <LoginView />}
           {modalView === 'SIGNUP_VIEW' && <SignUpView />}
@@ -81,6 +85,9 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
             </Button>
           }
         />
+        {/* <Toast open={displayToast} onClose={closeModal}>
+          {toastText}
+        </Toast> */}
       </div>
     </CommerceProvider>
   )

components/icon/Info.tsx

@@ -0,0 +1,22 @@
+const Info = ({ ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      shape-rendering="geometricPrecision"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" fill="transparent" />
+      <path d="M12 8v4" stroke="currentColor" />
+      <path d="M12 16h.01" stroke="currentColor" />
+    </svg>
+  )
+}
+
+export default Info

components/icon/index.ts

@@ -11,3 +11,4 @@ export { default as Moon } from './Moon'
 export { default as Github } from './Github'
 export { default as DoubleChevron } from './DoubleChevron'
 export { default as RightArrow } from './RightArrow'
+export { default as Info } from './Info'

components/ui/Input/Input.tsx

@@ -19,7 +19,17 @@ const Input: React.FC<Props> = (props) => {
     return null
   }
 
-  return <input className={rootClassName} onChange={handleOnChange} {...rest} />
+  return (
+    <input
+      className={rootClassName}
+      onChange={handleOnChange}
+      autoComplete="off"
+      autoCorrect="off"
+      autoCapitalize="off"
+      spellCheck="false"
+      {...rest}
+    />
+  )
 }
 
 export default Input

components/ui/Toast/Toast.module.css

@@ -0,0 +1,9 @@
+.root {
+}
+
+.toast {
+  @apply absolute bg-primary text-primary flex items-center border border-accents-1
+   rounded-md z-50 shadow-2xl top-0 right-0 p-6 my-6 mx-3;
+  width: 420px;
+  z-index: 20000;
+}

components/ui/Toast/Toast.tsx

@@ -0,0 +1,73 @@
+import cn from 'classnames'
+import { FC, useRef, useEffect, useCallback } from 'react'
+import s from './Toast.module.css'
+import { useDialog } from '@react-aria/dialog'
+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
+  open?: boolean
+  onClose: () => void
+}
+
+const Toast: FC<Props> = ({
+  className,
+  children,
+  open = false,
+  onClose,
+  ...props
+}) => {
+  const rootClassName = cn(s.root, className)
+  let ref = useRef() as React.MutableRefObject<HTMLInputElement>
+  let { modalProps } = useModal()
+  let { dialogProps } = useDialog({}, ref)
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: open,
+      isDismissable: true,
+      onClose: onClose,
+      ...props,
+    },
+    ref
+  )
+
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     useCallback(onClose, [])
+  //   }, 400)
+  // })
+
+  return (
+    <Transition show={open}>
+      <OverlayContainer>
+        <FocusScope contain restoreFocus autoFocus>
+          <div className={rootClassName}>
+            <Transition.Child
+              enter="transition-opacity ease-linear duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="transition-opacity ease-linear duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div
+                className={s.toast}
+                {...overlayProps}
+                {...dialogProps}
+                {...modalProps}
+                ref={ref}
+              >
+                {children}
+              </div>
+            </Transition.Child>
+          </div>
+        </FocusScope>
+      </OverlayContainer>
+    </Transition>
+  )
+}
+
+export default Toast

components/ui/Toast/index.ts

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

components/ui/context.tsx

@@ -6,7 +6,9 @@ export interface State {
   displaySidebar: boolean
   displayDropdown: boolean
   displayModal: boolean
+  displayToast: boolean
   modalView: string
+  toastText: string
 }
 
 const initialState = {
@@ -14,6 +16,8 @@ const initialState = {
   displayDropdown: false,
   displayModal: false,
   modalView: 'LOGIN_VIEW',
+  displayToast: false,
+  toastText: '',
 }
 
 type Action =
@@ -23,6 +27,16 @@ type Action =
   | {
       type: 'CLOSE_SIDEBAR'
     }
+  | {
+      type: 'OPEN_TOAST'
+    }
+  | {
+      type: 'CLOSE_TOAST'
+    }
+  | {
+      type: 'SET_TOAST_TEXT'
+      text: ToastText
+    }
   | {
       type: 'OPEN_DROPDOWN'
     }
@@ -45,6 +59,7 @@ type Action =
     }
 
 type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW'
+type ToastText = string
 
 export const UIContext = React.createContext<State | any>(initialState)
 
@@ -88,12 +103,30 @@ function uiReducer(state: State, action: Action) {
         displayModal: false,
       }
     }
+    case 'OPEN_TOAST': {
+      return {
+        ...state,
+        displayToast: true,
+      }
+    }
+    case 'CLOSE_TOAST': {
+      return {
+        ...state,
+        displayToast: false,
+      }
+    }
     case 'SET_MODAL_VIEW': {
       return {
         ...state,
         modalView: action.view,
       }
     }
+    case 'SET_TOAST_TEXT': {
+      return {
+        ...state,
+        toastText: action.text,
+      }
+    }
   }
 }
 
@@ -109,6 +142,9 @@ export const UIProvider: FC = (props) => {
   const openModal = () => dispatch({ type: 'OPEN_MODAL' })
   const closeModal = () => dispatch({ type: 'CLOSE_MODAL' })
 
+  const openToast = () => dispatch({ type: 'OPEN_TOAST' })
+  const closeToast = () => dispatch({ type: 'CLOSE_TOAST' })
+
   const setModalView = (view: MODAL_VIEWS) =>
     dispatch({ type: 'SET_MODAL_VIEW', view })
 
@@ -121,8 +157,14 @@ export const UIProvider: FC = (props) => {
     openModal,
     closeModal,
     setModalView,
+    openToast,
+    closeToast,
   }
 
+  setTimeout(() => {
+    openToast()
+  }, 200)
+
   return <UIContext.Provider value={value} {...props} />
 }
 

components/ui/index.ts

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

pages/forgot-password.tsx

@@ -1,33 +0,0 @@
-import { Layout } from '@components/core'
-import { Logo, Modal, Button } from '@components/ui'
-export default function ForgotPassword() {
-  return (
-    <div className="pb-20">
-      <Modal onClose={() => {}}>
-        <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>
-            <Button variant="slim">Recover Password</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>
-  )
-}
-
-ForgotPassword.Layout = Layout

yarn.lock

@@ -5435,6 +5435,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"