Merged in Feature/popup_information (pull request #118)

Feature/popup information

2 files changed, 256 insertions, 95 deletions

diff --git a/src/core/api/odooApi.js b/src/core/api/odooApi.js
index fe9fcdd2..3349ff4b 100644
--- a/src/core/api/odooApi.js
+++ b/src/core/api/odooApi.js
@@ -1,22 +1,24 @@
-import axios from 'axios'
-import camelcaseObjectDeep from 'camelcase-object-deep'
-import { getCookie, setCookie } from 'cookies-next'
-import { getAuth } from '../utils/auth'
+import axios from 'axios';
+import camelcaseObjectDeep from 'camelcase-object-deep';
+import { getCookie, setCookie } from 'cookies-next';
+import { deleteAuth, getAuth } from '../utils/auth';
 
 const renewToken = async () => {
-  let token = await axios.get(process.env.NEXT_PUBLIC_ODOO_API_HOST + '/api/token')
-  setCookie('token', token.data.result)
-  return token.data.result
-}
+  let token = await axios.get(
+    process.env.NEXT_PUBLIC_ODOO_API_HOST + '/api/token'
+  );
+  setCookie('token', token.data.result);
+  return token.data.result;
+};
 
 const getToken = async () => {
-  let token = getCookie('token')
-  if (token == undefined) token = await renewToken()
-  return token
-}
+  let token = getCookie('token');
+  if (token == undefined) token = await renewToken();
+  return token;
+};
 
-const maxConnectionAttempt = 15
-let connectionAttempt = 0
+const maxConnectionAttempt = 15;
+let connectionAttempt = 0;
 
 /**
  * The `odooApi` function is used to make API requests to an Odoo backend with customizable parameters such as `method`, `url`, `data`, and `headers`.
@@ -30,31 +32,40 @@ let connectionAttempt = 0
  * @returns {Promise} - A Promise that resolves to the API response data or an empty array.
  */
 const odooApi = async (method, url, data = {}, headers = {}) => {
-  connectionAttempt++
+  connectionAttempt++;
   try {
-    let token = await getToken()
-    const auth = getAuth()
+    let token = await getToken();
+    const auth = getAuth();
 
     let axiosParameter = {
       method,
       url: process.env.NEXT_PUBLIC_ODOO_API_HOST + url,
-      headers: { Authorization: token, ...headers }
-    }
-    if (auth) axiosParameter.headers['Token'] = auth.token
+      headers: { Authorization: token, ...headers },
+    };
+    if (auth) axiosParameter.headers['Token'] = auth.token;
     if (method.toUpperCase() == 'POST')
-      axiosParameter.headers['Content-Type'] = 'application/x-www-form-urlencoded'
+      axiosParameter.headers['Content-Type'] =
+        'application/x-www-form-urlencoded';
     if (Object.keys(data).length > 0)
-      axiosParameter.data = new URLSearchParams(Object.entries(data)).toString()
+      axiosParameter.data = new URLSearchParams(
+        Object.entries(data)
+      ).toString();
 
-    let res = await axios(axiosParameter)
-    if (res.data.status.code == 401 && connectionAttempt < maxConnectionAttempt) {
-      await renewToken()
-      return odooApi(method, url, data, headers)
+    let res = await axios(axiosParameter);
+    if (res.data.status.code == 401) {
+      if (connectionAttempt < maxConnectionAttempt) {
+        await renewToken();
+        return odooApi(method, url, data, headers);
+      } else {
+        await deleteAuth();
+        window.location.href = '/login';
+        return false;
+      }
     }
-    return camelcaseObjectDeep(res.data.result) || []
+    return camelcaseObjectDeep(res.data.result) || [];
   } catch (error) {
-    console.log(error)
+    console.log(error);
   }
-}
+};
 
-export default odooApi
+export default odooApi;
diff --git a/src/core/components/elements/Footer/BasicFooter.jsx b/src/core/components/elements/Footer/BasicFooter.jsx
index 23bca677..28a3764c 100644
--- a/src/core/components/elements/Footer/BasicFooter.jsx
+++ b/src/core/components/elements/Footer/BasicFooter.jsx
@@ -1,14 +1,14 @@
-import NextImage from 'next/image'
-import IndoteknikLogo from '@/images/logo.png'
+import NextImage from 'next/image';
+import IndoteknikLogo from '@/images/logo.png';
 import {
   DevicePhoneMobileIcon,
   EnvelopeIcon,
-  PhoneArrowUpRightIcon
-} from '@heroicons/react/24/outline'
-import Link from '../Link/Link'
-import MobileView from '../../views/MobileView'
-import DesktopView from '../../views/DesktopView'
-import whatsappUrl from '@/core/utils/whatsappUrl'
+  PhoneArrowUpRightIcon,
+} from '@heroicons/react/24/outline';
+import Link from '../Link/Link';
+import MobileView from '../../views/MobileView';
+import DesktopView from '../../views/DesktopView';
+import whatsappUrl from '@/core/utils/whatsappUrl';
 
 const BasicFooter = () => {
   return (
@@ -17,9 +17,16 @@ const BasicFooter = () => {
         <footer className='flex flex-wrap p-4 bg-gray_r-3 text-caption-1'>
           <div className='w-1/2 flex flex-col gap-y-8 pr-2'>
             <div>
-              <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={90} height={30} />
+              <NextImage
+                src={IndoteknikLogo}
+                alt='Logo Indoteknik'
+                width={90}
+                height={30}
+              />
 
-              <div className='font-semibold mt-2'>PT. Indoteknik Dotcom Gemilang</div>
+              <div className='font-semibold mt-2'>
+                PT. Indoteknik Dotcom Gemilang
+              </div>
             </div>
 
             <OfficeLocation />
@@ -37,7 +44,8 @@ const BasicFooter = () => {
           </div>
 
           <div className='w-full mt-8 leading-5 text-caption-2 text-gray_r-12/80'>
-            Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang
+            Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom
+            Gemilang
           </div>
         </footer>
       </MobileView>
@@ -46,8 +54,15 @@ const BasicFooter = () => {
         <footer className='bg-gray_r-3 py-6'>
           <div className='container mx-auto flex flex-wrap justify-between'>
             <div className='w-3/12'>
-              <NextImage src={IndoteknikLogo} alt='Logo Indoteknik' width={180} height={60} />
-              <div className='font-semibold mt-2 mb-4'>PT. Indoteknik Dotcom Gemilang</div>
+              <NextImage
+                src={IndoteknikLogo}
+                alt='Logo Indoteknik'
+                width={180}
+                height={60}
+              />
+              <div className='font-semibold mt-2 mb-4'>
+                PT. Indoteknik Dotcom Gemilang
+              </div>
               <InformationCenter />
             </div>
             <CustomerGuide />
@@ -64,7 +79,8 @@ const BasicFooter = () => {
             <hr className='w-full my-4 border-gray_r-7' />
             <div className='w-full flex justify-between items-center'>
               <div className='text-caption-1'>
-                Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik Dotcom Gemilang
+                Copyright © 2007 - {new Date().getFullYear()}, PT. Indoteknik
+                Dotcom Gemilang
               </div>
               <div>
                 <SocialMedias />
@@ -74,39 +90,51 @@ const BasicFooter = () => {
         </footer>
       </DesktopView>
     </>
-  )
-}
+  );
+};
 
-const headerClassName = 'font-semibold mb-4'
+const headerClassName = 'font-semibold mb-4';
 
 const OfficeLocation = () => (
   <div>
     <div className={headerClassName}>Kantor Pusat</div>
     <div className='leading-6 text-gray_r-12/80'>
-      <a href='https://goo.gl/maps/3DCJxtki8jUV32pR7' target='_blank' rel='noreferrer' className='text-gray_r-12/80'>
-      Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan, Jakarta Utara</a>
+      <a
+        href='https://goo.gl/maps/3DCJxtki8jUV32pR7'
+        target='_blank'
+        rel='noreferrer'
+        className='text-gray_r-12/80'
+      >
+        Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec.
+        Penjaringan, Jakarta Utara
+      </a>
     </div>
   </div>
-)
+);
 
 const WarehouseLocation = () => (
   <div>
     <div className={headerClassName}>Gudang Indoteknik</div>
     <div className='leading-6 text-gray_r-12/80'>
-      Jl. Bandengan Utara Komp. 85 A dan B, Penjaringan, Kec. Penjaringan, Jakarta Utara
+      Jl. Bandengan Utara Komp. 85 A dan B, Penjaringan, Kec. Penjaringan,
+      Jakarta Utara
     </div>
   </div>
-)
+);
 
 const AboutUs = () => (
   <div>
     <div className={headerClassName}>Tentang Kami</div>
     <ul className='flex flex-col gap-y-3'>
       <li>
-        <InternalItemLink href='/tentang-kami'>Company Profile</InternalItemLink>
+        <InternalItemLink href='/tentang-kami'>
+          Company Profile
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/pelanggan-kami'>Pelanggan Kami</InternalItemLink>
+        <InternalItemLink href='/pelanggan-kami'>
+          Pelanggan Kami
+        </InternalItemLink>
       </li>
       <li>
         <InternalItemLink href='/hubungi-kami'>Hubungi Kami</InternalItemLink>
@@ -115,30 +143,42 @@ const AboutUs = () => (
         <InternalItemLink href='/karir'>Karir</InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/syarat-ketentuan'>Syarat & Ketentuan</InternalItemLink>
+        <InternalItemLink href='/syarat-ketentuan'>
+          Syarat & Ketentuan
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/kebijakan-privasi'>Kebijakan Privasi</InternalItemLink>
+        <InternalItemLink href='/kebijakan-privasi'>
+          Kebijakan Privasi
+        </InternalItemLink>
       </li>
     </ul>
   </div>
-)
+);
 
 const CustomerGuide = () => (
   <div>
     <div className={headerClassName}>Bantuan & Panduan</div>
     <ul className='flex flex-col gap-y-3'>
       <li>
-        <InternalItemLink href='/metode-pembayaran'>Metode Pembayaran</InternalItemLink>
+        <InternalItemLink href='/metode-pembayaran'>
+          Metode Pembayaran
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/metode-pengiriman'>Metode Pengiriman</InternalItemLink>
+        <InternalItemLink href='/metode-pengiriman'>
+          Metode Pengiriman
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/panduan-belanja'>Panduan Belanja</InternalItemLink>
+        <InternalItemLink href='/panduan-belanja'>
+          Panduan Belanja
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/panduan-quotation'>Panduan Quotation</InternalItemLink>
+        <InternalItemLink href='/panduan-quotation'>
+          Panduan Quotation
+        </InternalItemLink>
       </li>
       <li>
         <InternalItemLink href='/pengembalian-barang-dana'>
@@ -146,40 +186,56 @@ const CustomerGuide = () => (
         </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/informasi-garansi'>Informasi Garansi</InternalItemLink>
+        <InternalItemLink href='/informasi-garansi'>
+          Informasi Garansi
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/panduan-pick-up-service'>Panduan Pick Up Service</InternalItemLink>
+        <InternalItemLink href='/panduan-pick-up-service'>
+          Panduan Pick Up Service
+        </InternalItemLink>
       </li>
     </ul>
   </div>
-)
+);
 
 const Form = () => (
   <div>
     <div className={headerClassName}>Formulir</div>
     <ul className='flex flex-col gap-y-3'>
       <li>
-        <InternalItemLink href='/my/request-for-quotation'>Request for Quotation</InternalItemLink>
+        <InternalItemLink href='/my/request-for-quotation'>
+          Request for Quotation
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/kunjungan-sales'>Kunjungan Sales</InternalItemLink>
+        <InternalItemLink href='/my/kunjungan-sales'>
+          Kunjungan Sales
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/kunjungan-service'>Kunjungan Service</InternalItemLink>
+        <InternalItemLink href='/my/kunjungan-service'>
+          Kunjungan Service
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/pembayaran-tempo'>Pembayaran Tempo</InternalItemLink>
+        <InternalItemLink href='/my/pembayaran-tempo'>
+          Pembayaran Tempo
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/surat-dukungan'>Surat Dukungan</InternalItemLink>
+        <InternalItemLink href='/my/surat-dukungan'>
+          Surat Dukungan
+        </InternalItemLink>
       </li>
       <li>
-        <InternalItemLink href='/my/daftar-merchant'>Daftar Merchant</InternalItemLink>
+        <InternalItemLink href='/my/daftar-merchant'>
+          Daftar Merchant
+        </InternalItemLink>
       </li>
     </ul>
   </div>
-)
+);
 
 const InformationCenter = () => (
   <div>
@@ -187,11 +243,15 @@ const InformationCenter = () => (
     <ul className='flex flex-col gap-y-3'>
       <li className='text-gray_r-12/80 flex items-center'>
         <PhoneArrowUpRightIcon className='w-[18px] mr-2' />
-        <a href='tel:02129338828' target='_blank' rel='noreferrer'>(021) 2933-8828 / 29</a>
+        <a href='tel:02129338828' target='_blank' rel='noreferrer'>
+          (021) 2933-8828 / 29
+        </a>
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
         <EnvelopeIcon className='w-[18px] mr-2' />
-        <a href='mailto:sales@indoteknik.com' target='_blank' rel='noreferrer'>sales@indoteknik.com</a>
+        <a href='mailto:sales@indoteknik.com' target='_blank' rel='noreferrer'>
+          sales@indoteknik.com
+        </a>
       </li>
       <li className='text-gray_r-12/80 flex items-center'>
         <DevicePhoneMobileIcon className='w-[18px] mr-2' />
@@ -201,7 +261,7 @@ const InformationCenter = () => (
       </li>
     </ul>
   </div>
-)
+);
 
 const OpenHours = () => (
   <div>
@@ -217,44 +277,124 @@ const OpenHours = () => (
       </li>
     </ul>
   </div>
-)
+);
 
 const SocialMedias = () => (
   <div>
     <div className={headerClassName + 'block md:hidden'}>Temukan Kami</div>
-    <div className='flex flex-wrap gap-3 mt-2'>
+    <div className='flex flex-wrap gap-3 mt-2 items-center'>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
+      >
+        <NextImage
+          src='/images/socials/youtube.webp'
+          alt='Youtube - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.tiktok.com/@indoteknikcom'
+      >
+        <NextImage
+          src='/images/socials/tiktok.png'
+          alt='TikTok - Indoteknik.com'
+          width={24}
+          height={24}
+        />
+      </a>
       <a target='_blank' rel='noreferrer' href={whatsappUrl(null)}>
-        <NextImage src='/images/socials/Whatsapp.png' alt='Whatsapp Logo' width={24} height={24} />
+        <NextImage
+          src='/images/socials/Whatsapp.png'
+          alt='Whatsapp - Indoteknik.com'
+          width={24}
+          height={24}
+        />
       </a>
-      <a target='_blank' rel='noreferrer' href='https://www.facebook.com/indoteknikcom'>
-        <NextImage src='/images/socials/Facebook.png' alt='Facebook Logo' width={24} height={24} />
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.facebook.com/indoteknikcom'
+      >
+        <NextImage
+          src='/images/socials/Facebook.png'
+          alt='Facebook - Indoteknik.com'
+          width={24}
+          height={24}
+        />
       </a>
-      <a target='_blank' rel='noreferrer' href='https://www.instagram.com/indoteknikcom/'>
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.instagram.com/indoteknikcom/'
+      >
         <NextImage
           src='/images/socials/Instagram.png'
-          alt='Instagram Logo'
+          alt='Instagram - Indoteknik.com'
           width={24}
           height={24}
         />
       </a>
-      <a target='_blank' rel='noreferrer' href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'>
-        <NextImage src='/images/socials/Linkedin.png' alt='Linkedin Logo' width={24} height={24} />
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://www.linkedin.com/company/pt-indoteknik-dotcom-gemilang/'
+      >
+        <NextImage
+          src='/images/socials/Linkedin.png'
+          alt='Linkedin - Indoteknik.com'
+          width={24}
+          height={24}
+        />
       </a>
-      <a target='_blank' rel='noreferrer' href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'>
-        <NextImage src='/images/socials/g_maps.png' alt='Linkedin Logo' width={24} height={24} />
+      <a
+        target='_blank'
+        rel='noreferrer'
+        href='https://goo.gl/maps/GF8EmDjpQTHZPsJ1A'
+      >
+        <NextImage
+          src='/images/socials/g_maps.png'
+          alt='Maps - Indoteknik.com'
+          width={24}
+          height={24}
+        />
       </a>
     </div>
   </div>
-)
+);
 
 const Payments = () => (
   <div>
     <div className={headerClassName}>Pembayaran</div>
     <div className='flex flex-wrap gap-2'>
-      <NextImage src='/images/payments/bca.png' alt='Bank BCA Logo' width={48} height={24} />
-      <NextImage src='/images/payments/bni.png' alt='Bank BNI Logo' width={48} height={24} />
-      <NextImage src='/images/payments/bri.png' alt='Bank BRI Logo' width={48} height={24} />
-      <NextImage src='/images/payments/gopay.png' alt='Gopay Logo' width={48} height={24} />
+      <NextImage
+        src='/images/payments/bca.png'
+        alt='Bank BCA Logo'
+        width={48}
+        height={24}
+      />
+      <NextImage
+        src='/images/payments/bni.png'
+        alt='Bank BNI Logo'
+        width={48}
+        height={24}
+      />
+      <NextImage
+        src='/images/payments/bri.png'
+        alt='Bank BRI Logo'
+        width={48}
+        height={24}
+      />
+      <NextImage
+        src='/images/payments/gopay.png'
+        alt='Gopay Logo'
+        width={48}
+        height={24}
+      />
       <NextImage
         src='/images/payments/mandiri.png'
         alt='Bank Mandiri Logo'
@@ -273,15 +413,25 @@ const Payments = () => (
         width={48}
         height={24}
       />
-      <NextImage src='/images/payments/visa.png' alt='Visa Logo' width={48} height={24} />
+      <NextImage
+        src='/images/payments/visa.png'
+        alt='Visa Logo'
+        width={48}
+        height={24}
+      />
     </div>
   </div>
-)
+);
 
 const InternalItemLink = ({ href, children }) => (
-  <Link href={href} className='!text-gray_r-12/80 font-normal line-clamp-1' target="_blank" rel="noopener noreferrer">
+  <Link
+    href={href}
+    className='!text-gray_r-12/80 font-normal line-clamp-1'
+    target='_blank'
+    rel='noopener noreferrer'
+  >
     {children}
   </Link>
-)
+);
 
-export default BasicFooter
+export default BasicFooter;