diff --git a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
index 29400935..4177500f 100644
--- a/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
+++ b/apps/storefront/src/pages/orderDetail/components/OrderAction.tsx
@@ -3,9 +3,10 @@ import {
   useContext,
   Fragment,
 } from 'react'
+
 import {
-  useNavigate,
-} from 'react-router-dom'
+  throttle,
+} from 'lodash'
 
 import {
   Card,
@@ -40,6 +41,7 @@ import {
 
 import {
   snackbar,
+  b2bPrintInvoice,
 } from '@/utils'
 
 const OrderActionContainer = styled('div')(() => ({}))
@@ -153,8 +155,6 @@ const OrderCard = (props: OrderCardProps) => {
     },
   } = useContext(GlobaledContext)
 
-  const navigate = useNavigate()
-
   const dialogData = [
     {
       dialogTitle: 'Re-order',
@@ -193,7 +193,7 @@ const OrderCard = (props: OrderCardProps) => {
 
   const handleOpenDialog = (name: string) => {
     if (name === 'viewInvoice') {
-      navigate('/invoiceDetail/1')
+      b2bPrintInvoice(orderId, 'b2b_print_invoice')
     } else if (name === 'printInvoice') {
       window.open(`/account.php?action=print_invoice&order_id=${orderId}`)
     } else {
@@ -269,7 +269,7 @@ const OrderCard = (props: OrderCardProps) => {
                     key={button.key}
                     name={button.name}
                     variant={button.variant}
-                    onClick={() => { handleOpenDialog(button.name) }}
+                    onClick={throttle(() => { handleOpenDialog(button.name) }, 2000)}
                   >
                     {button.value}
                   </Button>
diff --git a/apps/storefront/src/utils/b3PrintInvoice.tsx b/apps/storefront/src/utils/b3PrintInvoice.tsx
new file mode 100644
index 00000000..f4f8f2eb
--- /dev/null
+++ b/apps/storefront/src/utils/b3PrintInvoice.tsx
@@ -0,0 +1,33 @@
+const bindDom = (html: string, domId: string) => {
+  let iframeDom = document.getElementById(domId) as HTMLIFrameElement | null
+  if (!iframeDom) {
+    iframeDom = document.createElement('iframe')
+    iframeDom.src = 'about:blank'
+    iframeDom.id = domId
+    iframeDom.style.display = 'none'
+    document.body.appendChild(iframeDom)
+  }
+  const iframeDoc = iframeDom.contentWindow?.document
+  if (iframeDoc) {
+    iframeDoc.open()
+    iframeDoc.write(html)
+    iframeDoc.close()
+  }
+  iframeDom.style.display = 'block'
+}
+
+export const b2bPrintInvoice = async (orderId: string, domId: string) => {
+  await fetch(`/account.php?action=print_invoice&order_id=${orderId}`)
+    .then((response: Response) => {
+      if (response.ok) {
+        return response.text()
+      }
+      throw new Error('Network response was not ok.')
+    })
+    .then((html: string) => {
+      bindDom(html, domId)
+    })
+    .catch((error: Error) => {
+      console.error('Error Invoice:', error)
+    })
+}
diff --git a/apps/storefront/src/utils/index.ts b/apps/storefront/src/utils/index.ts
index cc807452..5a8a8f96 100644
--- a/apps/storefront/src/utils/index.ts
+++ b/apps/storefront/src/utils/index.ts
@@ -66,6 +66,10 @@ import {
   showPageMask,
 } from './b3PageMask'
 
+import {
+  b2bPrintInvoice,
+} from './b3PrintInvoice'
+
 export {
   addQuoteDraftProduce,
   getModifiersPrice,
@@ -102,4 +106,5 @@ export {
   getSearchVal,
   getDefaultCurrencyInfo,
   showPageMask,
+  b2bPrintInvoice,
 }