From 092dc7fc49246580023a8b97101d51845c81bf04 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 31 Mar 2023 11:17:55 +0700
Subject: iframe content

---
 src/core/api/odooApi.js                            |  4 +--
 src/core/components/elements/Link/Link.jsx         | 10 +++++++-
 src/core/components/elements/Popup/BottomPopup.jsx |  6 ++---
 src/lib/content/components/PageContent.jsx         |  2 +-
 src/lib/iframe/components/IframeContent.jsx        | 30 ++++++++++++++++++++++
 src/lib/invoice/utils/invoices.js                  |  4 +--
 src/lib/transaction/components/Transaction.jsx     |  6 ++---
 src/lib/transaction/utils/transactions.js          |  4 +--
 src/pages/about-us.jsx                             |  8 +++---
 src/pages/blog/[slug].jsx                          |  2 +-
 src/pages/shop/search.jsx                          |  2 +-
 11 files changed, 57 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/iframe/components/IframeContent.jsx

(limited to 'src')

diff --git a/src/core/api/odooApi.js b/src/core/api/odooApi.js
index 41460fda..25ee9adf 100644
--- a/src/core/api/odooApi.js
+++ b/src/core/api/odooApi.js
@@ -4,7 +4,7 @@ import { getCookie, setCookie } from 'cookies-next'
 import { getAuth } from '../utils/auth'
 
 const renewToken = async () => {
-  let token = await axios.get(process.env.NEXT_PUBLIC_ODOO_HOST + '/api/token')
+  let token = await axios.get(process.env.NEXT_PUBLIC_ODOO_API_HOST + '/api/token')
   setCookie('token', token.data.result)
   return token.data.result
 }
@@ -26,7 +26,7 @@ const odooApi = async (method, url, data = {}, headers = {}) => {
 
     let axiosParameter = {
       method,
-      url: process.env.NEXT_PUBLIC_ODOO_HOST + url,
+      url: process.env.NEXT_PUBLIC_ODOO_API_HOST + url,
       headers: { Authorization: token, ...headers }
     }
     if (auth) axiosParameter.headers['Token'] = auth.token
diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx
index 75fc6ca8..557abbc4 100644
--- a/src/core/components/elements/Link/Link.jsx
+++ b/src/core/components/elements/Link/Link.jsx
@@ -1,10 +1,18 @@
 import NextLink from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
 const Link = ({ children, ...props }) => {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.events.on('routeChangeStart', () => window.scrollTo({ top: 0, behavior: 'smooth' }))
+  }, [router])
+
   return (
     <NextLink
       {...props}
-      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      // onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
       scroll={false}
       className={`block font-medium text-red_r-11 ${props?.className || ''}`}
     >
diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 1fc77932..5e9f68c7 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -49,9 +49,9 @@ const BottomPopup = ({ children, active = false, title, close }) => {
 
             <DesktopView>
               <motion.div
-                initial={{ bottom: '40%', opacity: 0 }}
-                animate={{ bottom: '35%', opacity: 1 }}
-                exit={{ bottom: '30%', opacity: 0 }}
+                initial={{ bottom: '55%', opacity: 0 }}
+                animate={{ bottom: '50%', opacity: 1 }}
+                exit={{ bottom: '45%', opacity: 0 }}
                 transition={transition}
                 className='fixed left-1/2 -translate-x-1/2 w-2/5 border border-gray_r-6 rounded-xl z-[60] p-4 pt-0 bg-white'
               >
diff --git a/src/lib/content/components/PageContent.jsx b/src/lib/content/components/PageContent.jsx
index f7c2f467..bb44dd92 100644
--- a/src/lib/content/components/PageContent.jsx
+++ b/src/lib/content/components/PageContent.jsx
@@ -10,7 +10,7 @@ const PageContent = ({ path }) => {
     let parsedContent = content.data.content
     parsedContent = parsedContent.replaceAll(
       'src="/web/image',
-      `src="${process.env.NEXT_PUBLIC_ODOO_HOST}/web/image`
+      `src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image`
     )
     const contentClassNames = ` 
       prose 
diff --git a/src/lib/iframe/components/IframeContent.jsx b/src/lib/iframe/components/IframeContent.jsx
new file mode 100644
index 00000000..52f2a26e
--- /dev/null
+++ b/src/lib/iframe/components/IframeContent.jsx
@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react'
+
+const IframeContent = ({ url }) => {
+  const [iframeLoaded, setIframeLoaded] = useState(false)
+  const [iframe, setIframe] = useState(null)
+  const iframeRef = useRef(null)
+
+  useEffect(() => {
+    if (iframeLoaded) {
+      setIframe({
+        height: document.querySelector('main').offsetHeight
+      })
+    }
+  }, [iframeLoaded])
+
+  return (
+    <div className='mx-auto container h-full'>
+      <iframe
+        ref={iframeRef}
+        src={url}
+        width='100%'
+        seamless
+        style={{ height: iframe?.height || 0 }}
+        onLoad={() => setIframeLoaded(true)}
+      />
+    </div>
+  )
+}
+
+export default IframeContent
diff --git a/src/lib/invoice/utils/invoices.js b/src/lib/invoice/utils/invoices.js
index 63fe91f6..73ffd0ed 100644
--- a/src/lib/invoice/utils/invoices.js
+++ b/src/lib/invoice/utils/invoices.js
@@ -1,10 +1,10 @@
 const downloadInvoice = (invoice) => {
-  const url = `${process.env.NEXT_PUBLIC_ODOO_HOST}/api/v1/download/invoice/${invoice.id}/${invoice.token}`
+  const url = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/download/invoice/${invoice.id}/${invoice.token}`
   window.open(url, 'download')
 }
 
 const downloadTaxInvoice = (invoice) => {
-  const url = `${process.env.NEXT_PUBLIC_ODOO_HOST}/api/v1/download/tax-invoice/${invoice.id}/${invoice.token}`
+  const url = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/download/tax-invoice/${invoice.id}/${invoice.token}`
   window.open(url, 'download')
 }
 
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 669966da..51c89b28 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -136,15 +136,15 @@ const Transaction = ({ id }) => {
             Apakah anda yakin membatalkan transaksi{' '}
             <span className='underline'>{transaction.data?.name}</span>?
           </div>
-          <div className='flex mt-6 gap-x-4'>
+          <div className='flex justify-end mt-6 gap-x-4'>
             <button
-              className='btn-solid-red flex-1'
+              className='btn-solid-red w-full md:w-fit'
               type='button'
               onClick={submitCancelTransaction}
             >
               Ya, Batalkan
             </button>
-            <button className='btn-light flex-1' type='button' onClick={closeCancelTransaction}>
+            <button className='btn-light w-full md:w-fit' type='button' onClick={closeCancelTransaction}>
               Batal
             </button>
           </div>
diff --git a/src/lib/transaction/utils/transactions.js b/src/lib/transaction/utils/transactions.js
index ef2f8d97..f960c181 100644
--- a/src/lib/transaction/utils/transactions.js
+++ b/src/lib/transaction/utils/transactions.js
@@ -2,13 +2,13 @@ import { getAuth } from '@/core/utils/auth'
 
 const downloadPurchaseOrder = (transaction) => {
   const auth = getAuth()
-  const url = `${process.env.NEXT_PUBLIC_ODOO_HOST}/api/v1/partner/${auth.partnerId}/sale_order/${transaction.id}/download_po/${transaction.token}`
+  const url = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/partner/${auth.partnerId}/sale_order/${transaction.id}/download_po/${transaction.token}`
   window.open(url, 'download')
 }
 
 const downloadQuotation = (transaction) => {
   const auth = getAuth()
-  const url = `${process.env.NEXT_PUBLIC_ODOO_HOST}/api/v1/partner/${auth.partnerId}/sale_order/${transaction.id}/download/${transaction.token}`
+  const url = `${process.env.NEXT_PUBLIC_ODOO_API_HOST}/api/v1/partner/${auth.partnerId}/sale_order/${transaction.id}/download/${transaction.token}`
   window.open(url, 'download')
 }
 
diff --git a/src/pages/about-us.jsx b/src/pages/about-us.jsx
index 207f265d..c7e546df 100644
--- a/src/pages/about-us.jsx
+++ b/src/pages/about-us.jsx
@@ -1,15 +1,13 @@
 import Seo from '@/core/components/Seo'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
-import PageContent from '@/lib/content/components/PageContent'
+import IframeContent from '@/lib/iframe/components/IframeContent'
 
 export default function AboutUs() {
   return (
     <BasicLayout>
       <Seo title='Tentang Indoteknik.com' />
-      
-      <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
-        <PageContent path='/about-us' />
-      </div>
+
+      <IframeContent url={`${process.env.NEXT_PUBLIC_ODOO_HOST}/content?url=/`} />
     </BasicLayout>
   )
 }
diff --git a/src/pages/blog/[slug].jsx b/src/pages/blog/[slug].jsx
index 257f9385..39f10b79 100644
--- a/src/pages/blog/[slug].jsx
+++ b/src/pages/blog/[slug].jsx
@@ -14,7 +14,7 @@ export default function BlogDetail() {
 
   const parsedContent = blog.data?.content?.replaceAll(
     'src="/web/image',
-    `src="${process.env.NEXT_PUBLIC_ODOO_HOST}/web/image`
+    `src="${process.env.NEXT_PUBLIC_ODOO_API_HOST}/web/image`
   )
 
   const contentClassNames = ` 
diff --git a/src/pages/shop/search.jsx b/src/pages/shop/search.jsx
index d21d72cd..bf38d0bc 100644
--- a/src/pages/shop/search.jsx
+++ b/src/pages/shop/search.jsx
@@ -11,7 +11,7 @@ export default function Search() {
 
   return (
     <BasicLayout>
-      <Seo title={`Cari produk ${router.query.q} di Indoteknik.com`} />
+      <Seo title={`Cari produk ${router.query.q || ''} di Indoteknik.com`} />
 
       {!_.isEmpty(router.query) && (
         <ProductSearch
-- 
cgit v1.2.3