[Hooks integration] Checkout Payment Section + Checkout Confirmation Page

packages/template-retail-react-app/app/components/item-variant/item-attributes.jsx

@@ -80,7 +80,7 @@ const ItemAttributes = ({includeQuantity, currency, ...props}) => {
                         <Text as="span" color="green.500">
                             <FormattedNumber
                                 style="currency"
-                                currency={currency || basket.currency || activeCurrency}
+                                currency={currency || basket?.currency || activeCurrency}
                                 value={variant.priceAdjustments[0].price}
                             />
                         </Text>

packages/template-retail-react-app/app/components/item-variant/item-price.jsx

@@ -19,7 +19,7 @@ const PricePerItem = ({currency, basket, basePrice}) => {
         <Text fontSize={{base: '12px', lg: '14px'}}>
             <FormattedNumber
                 style="currency"
-                currency={currency || basket.currency || activeCurrency}
+                currency={currency || basket?.currency || activeCurrency}
                 value={basePrice}
             />
             <FormattedMessage
@@ -92,7 +92,7 @@ const ItemPrice = ({currency, align = 'right', baseDirection = 'column', ...prop
                     >
                         <FormattedNumber
                             style="currency"
-                            currency={currency || basket.currency || activeCurrency}
+                            currency={currency || basket?.currency || activeCurrency}
                             value={price}
                         />
                     </Text>

packages/template-retail-react-app/app/hooks/use-einstein.js

@@ -483,23 +483,19 @@ const useEinstein = () => {
             return einstein.getRecommenders(...args)
         },
         async getRecommendations(recommenderName, products, args) {
-            console.log('getRecommendations')
             setIsLoading(true)
             const reco = await einstein.getRecommendations(recommenderName, products, args)
             reco.recommenderName = recommenderName
             const recommendations = await fetchRecProductDetails(reco)
             setIsLoading(false)
             setRecommendations(recommendations)
-            console.log(recommendations)
         },
         async getZoneRecommendations(zoneName, products, args) {
-            console.log('getZoneRecommendations')
             setIsLoading(true)
             const reco = await einstein.getZoneRecommendations(zoneName, products, args)
             const recommendations = await fetchRecProductDetails(reco)
             setIsLoading(false)
             setRecommendations(recommendations)
-            console.log(recommendations)
         }
     }
 }

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

@@ -311,7 +311,7 @@ const Cart = () => {
         return <CartSkeleton />
     }
 
-    if (!isLoading && !basket?.productItems?.length) {
+    if (!basket.productItems.length) {
         return <EmptyCart isRegistered={isRegistered} />
     }
     return (

packages/template-retail-react-app/app/pages/checkout/confirmation.jsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React, {useEffect, useState, Fragment} from 'react'
+import React, {Fragment, useEffect} from 'react'
 import {FormattedMessage, FormattedNumber} from 'react-intl'
 import {
     Box,
@@ -21,9 +21,9 @@ import {
     Divider
 } from '@chakra-ui/react'
 import {useForm} from 'react-hook-form'
+import {useParams} from 'react-router-dom'
+import {useOrder, useProducts, useAuthHelper, AuthHelpers} from 'commerce-sdk-react-preview'
 import {getCreditCardIcon} from '../../utils/cc-utils'
-import useBasket from '../../commerce-api/hooks/useBasket'
-import useCustomer from '../../commerce-api/hooks/useCustomer'
 import useNavigation from '../../hooks/use-navigation'
 import Link from '../../components/link'
 import AddressDisplay from '../../components/address-display'
@@ -34,32 +34,35 @@ import CartItemVariantImage from '../../components/item-variant/item-image'
 import CartItemVariantName from '../../components/item-variant/item-name'
 import CartItemVariantAttributes from '../../components/item-variant/item-attributes'
 import CartItemVariantPrice from '../../components/item-variant/item-price'
+import {useCurrentCustomer} from '../../hooks/use-current-customer'
+
+const onClient = typeof window !== 'undefined'
 
 const CheckoutConfirmation = () => {
+    const {orderNo} = useParams()
     const navigate = useNavigation()
-    const basket = useBasket()
-    const customer = useCustomer()
-
-    // The order data will initially be stored as our basket when first coming to this
-    // page. We capture it in local state to use for our UI. A new basket will be automatically
-    // created so we should only reference our captured order data here.
-    const [order] = useState(basket)
-
-    const form = useForm({
-        defaultValues: {
-            email: customer?.email || order?.customerInfo?.email || '',
-            password: '',
-            firstName: customer.firstName || order?.billingAddress?.firstName,
-            lastName: customer.lastName || order?.billingAddress?.lastName
+    const {data: customer} = useCurrentCustomer()
+    const register = useAuthHelper(AuthHelpers.Register)
+    const {data: order} = useOrder(
+        {
+            parameters: {orderNo}
+        },
+        {
+            enabled: !!orderNo && onClient
         }
-    })
+    )
+    const itemIds = order?.productItems.map((item) => item.productId)
+    const {data: products} = useProducts({parameters: {ids: itemIds?.join(',')}})
+    const productItemsMap = products?.data.reduce((map, item) => ({...map, [item.id]: item}), {})
+    const form = useForm()
 
-    // If we don't have an order object on first render we need to transition back to a
-    // different page. Fow now, we push to the homepage.
     useEffect(() => {
-        if (!order || order._type !== 'order') {
-            navigate('/')
-        }
+        form.reset({
+            email: order?.customerInfo?.email || '',
+            password: '',
+            firstName: order?.billingAddress?.firstName,
+            lastName: order?.billingAddress?.lastName
+        })
     }, [order])
 
     if (!order || !order.orderNo) {
@@ -70,8 +73,21 @@ const CheckoutConfirmation = () => {
 
     const submitForm = async (data) => {
         try {
-            await customer.registerCustomer(data)
+            const body = {
+                customer: {
+                    firstName: data.firstName,
+                    lastName: data.lastName,
+                    email: data.email,
+                    login: data.email
+                },
+                password: data.password
+            }
+            await register.mutateAsync(body)
+
+            navigate(`/account`)
         } catch (error) {
+            const json = await error.response.json()
+
             const existingAccountMessage = (
                 <Fragment>
                     <FormattedMessage
@@ -88,18 +104,12 @@ const CheckoutConfirmation = () => {
                 </Fragment>
             )
 
-            const message = /the login is already in use/i.test(error.message)
+            const message = /the login is already in use/i.test(json.detail)
                 ? existingAccountMessage
-                : error.message
+                : json.detail
 
             form.setError('global', {type: 'manual', message})
-            return
         }
-
-        // Customer is successfully registered with a new account,
-        // and the recent order would be associated with this account too.
-        // Now redirect to the Account page.
-        navigate(`/account`)
     }
 
     return (
@@ -277,14 +287,14 @@ const CheckoutConfirmation = () => {
                                             divider={<Divider />}
                                         >
                                             {order.productItems?.map((product, idx) => {
+                                                const productDetail =
+                                                    productItemsMap?.[product.productId] || {}
                                                 const variant = {
                                                     ...product,
-                                                    ...(order._productItemsDetail &&
-                                                        order._productItemsDetail[
-                                                            product.productId
-                                                        ]),
+                                                    ...productDetail,
                                                     price: product.price
                                                 }
+
                                                 return (
                                                     <ItemVariantProvider
                                                         key={product.productId}