✨ feat: test checkout

:%s

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
-import { Logo } from 'src/components/common'
+import { ButtonCommon, Logo } from 'src/components/common'
 import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
+import { useAddProductToCart, useGetActiveOrder } from 'src/components/hooks/cart'
 import { removeItem } from 'src/utils/funtion.utils'
 import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutInfo.module.scss'
@@ -8,43 +9,43 @@ import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
 import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
 import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
 interface CheckoutInfoProps {
-  onViewCart:()=>void
+  onViewCart: () => void
 }
 
-const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
+const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
   const [active, setActive] = useState(1)
   const [done, setDone] = useState<number[]>([])
   const [info, setInfo] = useState<CheckOutForm>({})
 
-  const onEdit = (id:number) => {
-		setActive(id)
-    setDone(removeItem<number>(done,id))
-	}
+  const onEdit = (id: number) => {
+    setActive(id)
+    setDone(removeItem<number>(done, id))
+  }
 
-  const onConfirm = (id:number,formInfo:CheckOutForm) => {
-		if(id+1>formList.length){
-			console.log({...info,...formInfo})
-		}else{
-      if(done.length>0){
-        for (let i = id+1; i <= formList.length; i++) {
-          if(!done.includes(i)){
+  const onConfirm = (id: number, formInfo: CheckOutForm) => {
+    if (id + 1 > formList.length) {
+      console.log({ ...info, ...formInfo })
+    } else {
+      if (done.length > 0) {
+        for (let i = id + 1; i <= formList.length; i++) {
+          if (!done.includes(i)) {
             setActive(i)
           }
         }
-      }else{
-        setActive(id+1)
+      } else {
+        setActive(id + 1)
       }
-      setDone([...done,id])
-		}
-		setInfo({...info,...formInfo})
-	}
+      setDone([...done, id])
+    }
+    setInfo({ ...info, ...formInfo })
+  }
 
-  const getNote = (id:number) => {
+  const getNote = (id: number) => {
     switch (id) {
       case 1:
         return `${info.name}, ${info.email}`
-        case 2:
-          return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, `
+      case 2:
+        return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, `
       default:
         return ""
     }
@@ -54,21 +55,38 @@ const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
     {
       id: 1,
       title: 'Customer Information',
-      form: <CustomerInfoForm onConfirm={onConfirm} id={1}/>,
+      form: <CustomerInfoForm onConfirm={onConfirm} id={1} />,
     },
     {
       id: 2,
       title: 'Shipping Information',
-      form: <ShippingInfoForm onConfirm={onConfirm} id={2}/>,
+      form: <ShippingInfoForm onConfirm={onConfirm} id={2} />,
     },
     {
       id: 3,
       title: 'Payment Information',
-      form: <PaymentInfoForm onConfirm={onConfirm} id={3}/>,
+      form: <PaymentInfoForm onConfirm={onConfirm} id={3} />,
     },
   ]
+
+  // TODO: remove
+  const { addProduct } = useAddProductToCart()
+
+  const createOrder = () => {
+    addProduct({ variantId: "63", quantity: 1 }, handleAddToCartCallback)
+  }
+  const handleAddToCartCallback = (isSuccess: boolean, message?: string) => {
+    console.log("after create order: ", isSuccess, message)
+
+  }
+
+  const {order} = useGetActiveOrder()
+  console.log("active order: ", order)
+
   return (
     <div className={s.warpper}>
+      <ButtonCommon onClick={createOrder}>test create order</ButtonCommon>
+      <ButtonCommon onClick={createOrder}>test get active order</ButtonCommon>
       <div className={s.title}>
         <Logo />
         <div className={s.viewCart} onClick={onViewCart}>View cart</div>
@@ -76,7 +94,7 @@ const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
       {formList.map((item) => {
         let note = getNote(item.id)
         return <CheckoutCollapse
-					key={item.title}
+          key={item.title}
           id={item.id}
           visible={item.id === active}
           title={item.title}