Acccount detail page hook integration

packages/template-retail-react-app/app/pages/account/index.jsx

@@ -8,12 +8,7 @@
 import React, {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import {FormattedMessage, useIntl} from 'react-intl'
-import {
-    Route,
-    Switch,
-    useRouteMatch
-    // Redirect
-} from 'react-router'
+import {Route, Switch, useRouteMatch, Redirect} from 'react-router'
 import {
     Accordion,
     AccordionButton,
@@ -28,7 +23,6 @@ import {
     Text,
     Divider
 } from '@chakra-ui/react'
-import useCustomer from '../../commerce-api/hooks/useCustomer'
 import Seo from '../../components/seo'
 import Link from '../../components/link'
 import {ChevronDownIcon, ChevronUpIcon, SignoutIcon} from '../../components/icons'
@@ -42,35 +36,19 @@ import {useLocation} from 'react-router-dom'
 import {messages, navLinks} from './constant'
 import useNavigation from '../../hooks/use-navigation'
 import LoadingSpinner from '../../components/loading-spinner'
-// import useMultiSite from '../../hooks/use-multi-site'
+import useMultiSite from '../../hooks/use-multi-site'
 import useEinstein from '../../commerce-api/hooks/useEinstein'
-
-const Account = () => {
-    const {path} = useRouteMatch()
+import {
+    useCustomerId,
+    useCustomerType,
+    useShopperLoginHelper,
+    useCustomer,
+    ShopperLoginHelpers
+} from 'commerce-sdk-react-preview'
+const onClient = typeof window !== 'undefined'
+const LogoutButton = ({onSignoutClick}) => {
     const {formatMessage} = useIntl()
-    const customer = useCustomer()
-    const location = useLocation()
-    const navigate = useNavigation()
-
-    const [mobileNavIndex, setMobileNavIndex] = useState(-1)
-    const [showLoading, setShowLoading] = useState(false)
-
-    const einstein = useEinstein()
-
-    // const {buildUrl} = useMultiSite()
-
-    /**************** Einstein ****************/
-    useEffect(() => {
-        einstein.sendViewPage(location.pathname)
-    }, [location])
-
-    const onSignoutClick = async () => {
-        setShowLoading(true)
-        await customer.logout()
-        navigate('/login')
-    }
-
-    const LogoutButton = () => (
+    return (
         <>
             <Divider colorScheme={'gray'} marginTop={3} />
             <Button
@@ -97,19 +75,46 @@ const Account = () => {
             </Button>
         </>
     )
+}
+const Account = () => {
+    const {path} = useRouteMatch()
+    const {formatMessage} = useIntl()
+    const customerId = useCustomerId()
+    const {isRegistered, customerType} = useCustomerType()
+    const {data: customer} = useCustomer({customerId}, {enabled: !!customerId && isRegistered})
+    const logout = useShopperLoginHelper(ShopperLoginHelpers.Logout)
+    const location = useLocation()
+    const navigate = useNavigation()
+
+    const [mobileNavIndex, setMobileNavIndex] = useState(-1)
+    const [showLoading, setShowLoading] = useState(false)
+
+    const einstein = useEinstein()
+
+    const {buildUrl} = useMultiSite()
+
+    /**************** Einstein ****************/
+    useEffect(() => {
+        einstein.sendViewPage(location.pathname)
+    }, [location])
+
+    const onSignoutClick = async () => {
+        setShowLoading(true)
+        await logout.mutateAsync()
+        navigate('/login')
+    }
 
-    // TODO: hook integration WIP
     // If we have customer data and they are not registered, push to login page
     // Using Redirect allows us to store the directed page to location
     // so we can direct users back after they are successfully log in
-    // if (customer.authType != null && !customer.isRegistered) {
-    //     const path = buildUrl('/login')
-    //     return <Redirect to={{pathname: path, state: {directedFrom: location.pathname}}} />
-    // }
-
+    // we don't want redirect on server side
+    if (customerType !== null && !isRegistered && onClient) {
+        const path = buildUrl('/login')
+        return <Redirect to={{pathname: path, state: {directedFrom: '/account'}}} />
+    }
     return (
         <Box
-            data-testid={customer.isRegistered ? 'account-page' : 'account-page-skeleton'}
+            data-testid={isRegistered ? 'account-page' : 'account-page-skeleton'}
             layerStyle="page"
             paddingTop={[4, 4, 12, 12, 16]}
         >
@@ -162,7 +167,10 @@ const Account = () => {
                                             </Button>
                                         ))}
 
-                                        <LogoutButton justify="center" />
+                                        <LogoutButton
+                                            justify="center"
+                                            onSignoutClick={onSignoutClick}
+                                        />
                                     </Flex>
                                 </AccordionPanel>
                             </>
@@ -197,7 +205,7 @@ const Account = () => {
                                 </Button>
                             )
                         })}
-                        <LogoutButton />
+                        <LogoutButton onSignoutClick={onSignoutClick} />
                     </Flex>
                 </Stack>