✨ feat: useGetActiveOrderForCheckout

:%s

src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx

@@ -1,15 +1,15 @@
-import { Cart } from '@commerce/types/cart'
+import { CartCheckout } from '@commerce/types/cart'
+import Link from 'next/link'
 import React from 'react'
 import { ROUTE } from 'src/utils/constanst.utils'
 import { LANGUAGE } from 'src/utils/language.utils'
 import { ButtonCommon, CardItemCheckout, EmptyCommon } from '../../../common'
 import s from './CheckoutBill.module.scss'
 import FormPromotionCode from './FormPromotionCode/FormPromotionCode'
-import Link from 'next/link'
 
 interface CheckoutBillProps {
   // data: CardItemCheckoutProps[]
-  data: Cart | null
+  data: CartCheckout | null
 }
 
 const CheckoutBill = ({ data }: CheckoutBillProps) => {

src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx

@@ -2,27 +2,30 @@ import React, { useEffect, useState } from 'react'
 import { Logo } from 'src/components/common'
 import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
 import { useActiveCustomer } from 'src/components/hooks/auth'
-import { useGetActiveOrder } from 'src/components/hooks/cart'
+import useGetActiveOrderForCheckout from 'src/components/hooks/order/useGetActiveOrderForCheckout'
 import s from './CheckoutInfo.module.scss'
 import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
 import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
 import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
+import ShippingMethod from './components/ShippingMethod/ShippingMethod'
 interface CheckoutInfoProps {
   onViewCart: () => void
   currency?: string
 }
 
-enum CheckoutStep {
+export enum CheckoutStep {
   CustomerInfo = 1,
-  ShippingInfo = 2,
-  PaymentInfo = 3,
+  ShippingAddressInfo = 2,
+  ShippingMethodInfo = 3,
+  PaymentInfo = 4,
 }
 
 const CheckoutInfo = ({ onViewCart, currency = "" }: CheckoutInfoProps) => {
   const [activeStep, setActiveStep] = useState(1)
   const [doneSteps, setDoneSteps] = useState<CheckoutStep[]>([])
-  const { order } = useGetActiveOrder()
+  const { order } = useGetActiveOrderForCheckout()
   const { customer } = useActiveCustomer()
+  console.log("active order checkout: ", order)
 
   useEffect(() => {
     if (customer) {
@@ -82,7 +85,7 @@ const CheckoutInfo = ({ onViewCart, currency = "" }: CheckoutInfoProps) => {
         } else {
           return ''
         }
-      case CheckoutStep.ShippingInfo:
+      case CheckoutStep.ShippingAddressInfo:
         if (order?.shippingAddress) {
           const { streetLine1, city, province, postalCode, countryCode, phoneNumber } = order.shippingAddress
           return `${streetLine1}, ${city}, ${province}, ${postalCode}, ${countryCode}, ${phoneNumber}`
@@ -100,9 +103,14 @@ const CheckoutInfo = ({ onViewCart, currency = "" }: CheckoutInfoProps) => {
       form: <CustomerInfoForm onConfirm={onConfirm} id={CheckoutStep.CustomerInfo} activeStep={activeStep} />,
     },
     {
-      id: CheckoutStep.ShippingInfo,
-      title: 'Shipping Information',
-      form: <ShippingInfoForm onConfirm={onConfirm} id={CheckoutStep.ShippingInfo} activeStep={activeStep} currency={currency} />,
+      id: CheckoutStep.ShippingAddressInfo,
+      title: 'Shipping Address Information',
+      form: <ShippingInfoForm onConfirm={onConfirm} id={CheckoutStep.ShippingAddressInfo} activeStep={activeStep}/>,
+    },
+    {
+      id: CheckoutStep.ShippingMethodInfo,
+      title: 'Shipping Method Information',
+      form: <ShippingMethod onConfirm={onConfirm} currency={currency} />,
     },
     {
       id: CheckoutStep.PaymentInfo,

src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx

@@ -7,15 +7,12 @@ import { LANGUAGE } from 'src/utils/language.utils'
 import { CustomInputCommon } from 'src/utils/type.utils'
 import * as Yup from 'yup'
 import ChekoutNotePolicy from '../ChekoutNotePolicy/ChekoutNotePolicy'
-import ShippingMethod from '../ShippingMethod/ShippingMethod'
 import s from './ShippingInfoForm.module.scss'
 
 interface ShippingInfoFormProps {
   id: number
   activeStep: number
   onConfirm: (id: number) => void
-  currency: string
-
 
 }
 
@@ -49,7 +46,7 @@ const provinceOptions = [
   },
 ]
 
-const ShippingInfoForm = ({ onConfirm, id, activeStep , currency}: ShippingInfoFormProps) => {
+const ShippingInfoForm = ({ onConfirm, id, activeStep }: ShippingInfoFormProps) => {
   const addressRef = useRef<CustomInputCommon>(null)
   const { setOrderShippingAddress, loading } = useSetOrderShippingAddress()
   const { showMessageError } = useMessage()
@@ -176,7 +173,6 @@ const ShippingInfoForm = ({ onConfirm, id, activeStep , currency}: ShippingInfoF
                     onEnter={isValid ? submitForm : undefined}
                   />
                 </div>
-                <ShippingMethod currency={currency}/>
                 <div className={s.bottom}>
                   <ChekoutNotePolicy />
                   <ButtonCommon HTMLType='submit' loading={loading} size="large">

src/components/modules/checkout/CheckoutInfo/components/ShippingMethod/ShippingMethod.tsx

@@ -4,6 +4,7 @@ import React, { memo, useState } from 'react'
 import { useMessage } from 'src/components/contexts'
 import { useSetOrderShippingMethod } from 'src/components/hooks/order'
 import { Shipping } from 'src/components/icons'
+import { CheckoutStep } from '../../CheckoutInfo'
 import s from './ShippingMethod.module.scss'
 import ShippingMethodItem from './ShippingMethodItem/ShippingMethodItem'
 
@@ -27,13 +28,15 @@ const MOCKUP_DATA = [
 ]
 interface Props {
   currency: string
+  onConfirm: (id: number) => void
+
 }
 
-const ShippingMethod = memo(({ currency }: Props) => {
+const ShippingMethod = memo(({ currency, onConfirm }: Props) => {
   const { setOrderShippingMethod } = useSetOrderShippingMethod()
   const [selectedValue, setSelectedValue] = useState<ShippingMethodQuote>(MOCKUP_DATA[0])
   const { showMessageError } = useMessage()
-  const [isShowOptions, setIsShowOptions] = useState<boolean>(false)
+  const [isShowOptions, setIsShowOptions] = useState<boolean>(true)
 
   const onChange = (id: string) => {
     const newValue = MOCKUP_DATA.find(item => item.id === id)
@@ -47,7 +50,9 @@ const ShippingMethod = memo(({ currency }: Props) => {
   }
 
   const onSubmitCalBack = (isSuccess: boolean, msg?: string) => {
-    if (!isSuccess) {
+    if (isSuccess) {
+      onConfirm(CheckoutStep.ShippingMethodInfo)
+    } else {
       showMessageError(msg)
     }
   }

src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import React, { useState } from 'react'
 import { MessageCommon } from 'src/components/common'
 import { useMessage } from 'src/components/contexts'
-import { useGetActiveOrder } from 'src/components/hooks/cart'
+import useGetActiveOrderForCheckout from 'src/components/hooks/order/useGetActiveOrderForCheckout'
 import IconHide from 'src/components/icons/IconHide'
 import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
 import { CheckoutBill, CheckoutInfo } from '..'
@@ -13,7 +13,7 @@ interface CheckoutPageProps {
 const CheckoutPage = ({ }: CheckoutPageProps) => {
     const { messages, removeMessage } = useMessage()
     const [isShow, setIsShow] = useState(false)
-    const { order } = useGetActiveOrder()
+    const { order } = useGetActiveOrderForCheckout()
 
     const onClose = () => {
         setIsShow(false)