Merge branch 'master' into CR/tampilan

4 files changed, 158 insertions, 45 deletions

diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index 03147219..7f23b94b 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -6,16 +6,29 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { Toaster } from 'react-hot-toast'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import useDevice from '@/core/hooks/useDevice'
-import { useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
+import { SessionProvider } from 'next-auth/react'
+import { getAuth } from '@/core/utils/auth'
 
 const queryClient = new QueryClient()
 
-function MyApp({ Component, pageProps }) {
+export const AuthContext = createContext({
+  authenticated : false,
+  setAuthenticated : (auth) => {}
+})
+
+function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   const router = useRouter()
   const { isMobile } = useDevice()
 
   const [animateLoader, setAnimateLoader] = useState(false)
+  const [authenticated, setAuthenticated] = useState(null)
+  const auth = getAuth()
+
+  // useEffect(() => {
+  //   setAuthenticated(auth)
+  // }, [auth])
 
   useEffect(() => {
     const handleRouteChangeStart = () => setAnimateLoader(true)
@@ -48,41 +61,43 @@ function MyApp({ Component, pageProps }) {
   }, [isMobile])
 
   return (
-    <>
-      <AnimatePresence>
-        {animateLoader && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{
-              duration: 0.1
-            }}
-            className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
-          >
-            <LogoSpinner />
-          </motion.div>
-        )}
-      </AnimatePresence>
-      <Toaster
-        position='top-center'
-        containerStyle={toasterStyle}
-        toastOptions={{
-          duration: 3000,
-          className: 'border border-gray_r-8'
-        }}
-      />
-      <NextProgress color='#F01C21' options={{ showSpinner: false }} />
-      <QueryClientProvider client={queryClient}>
-        <AnimatePresence
-          mode='popLayout'
-          initial={false}
-          onExitComplete={() => window.scrollTo(0, 0)}
-        >
-          {!animateLoader && <Component {...pageProps} key={router.asPath} />}
+    // <AuthContext.Provider value={{authenticated, setAuthenticated}}>
+      <SessionProvider session={session}>
+        <AnimatePresence>
+          {animateLoader && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{
+                duration: 0.1
+              }}
+              className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
+            >
+              <LogoSpinner />
+            </motion.div>
+          )}
         </AnimatePresence>
-      </QueryClientProvider>
-    </>
+        <Toaster
+          position='top-center'
+          containerStyle={toasterStyle}
+          toastOptions={{
+            duration: 3000,
+            className: 'border border-gray_r-8'
+          }}
+        />
+        <NextProgress color='#F01C21' options={{ showSpinner: false }} />
+        <QueryClientProvider client={queryClient}>
+          <AnimatePresence
+            mode='popLayout'
+            initial={false}
+            onExitComplete={() => window.scrollTo(0, 0)}
+          >
+            {!animateLoader && <Component {...pageProps} key={router.asPath} />}
+          </AnimatePresence>
+        </QueryClientProvider>
+      </SessionProvider>
+    // </AuthContext.Provider>
   )
 }
 
diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js
new file mode 100644
index 00000000..3c433167
--- /dev/null
+++ b/src/pages/api/auth/[...nextauth].js
@@ -0,0 +1,26 @@
+import odooApi from '@/core/api/odooApi'
+import NextAuth from 'next-auth/next'
+import GoogleProvider from 'next-auth/providers/google'
+
+export default NextAuth({
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET
+    })
+  ],
+  callbacks: {
+    async jwt({ token, account }) {
+      if (account) {
+        token.accessToken = account.access_token
+      }
+      return token
+    },
+    async session({ session, token, user }) {
+      session.accessToken = token.accessToken
+     
+      return session
+    }
+  },
+  secret: process.env.JWT_SECRET
+})
diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx
index c8e1e7e9..a0ce223e 100644
--- a/src/pages/my/menu.jsx
+++ b/src/pages/my/menu.jsx
@@ -5,15 +5,19 @@ import useAuth from '@/core/hooks/useAuth'
 import { deleteAuth } from '@/core/utils/auth'
 import IsAuth from '@/lib/auth/components/IsAuth'
 import { ChevronRightIcon, UserIcon } from '@heroicons/react/24/solid'
+import { signOut, useSession } from 'next-auth/react'
 import { useRouter } from 'next/router'
+import ImageNext from 'next/image'
 
 export default function Menu() {
   const auth = useAuth()
   const router = useRouter()
+  const { data: session } = useSession()
 
   const logout = () => {
-    deleteAuth()
-    router.push('/login')
+    deleteAuth().then(() => {
+      router.push('/login')
+    })
   }
 
   return (
@@ -40,10 +44,38 @@ export default function Menu() {
             <MenuHeader>Aktivitas Pembelian</MenuHeader>
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
-              <LinkItem href='/my/quotations'>Daftar Quotation</LinkItem>
-              <LinkItem href='/my/transactions'>Daftar Transaksi</LinkItem>
-              <LinkItem href='/my/invoices'>Invoice & Faktur Pajak</LinkItem>
-              <LinkItem href='/my/wishlist'>Wishlist</LinkItem>
+              <LinkItem href='/my/quotations'>
+                {' '}
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
+                  <p>Daftar Quotation</p>
+                </div>
+              </LinkItem>
+              <LinkItem href='/my/transactions'>
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
+                  <p>Daftar Transaksi</p>
+                </div>
+              </LinkItem>
+              <LinkItem href='/my/shipments'>
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
+                  <p>Daftar Pengiriman</p>
+                </div>
+              </LinkItem>
+              <LinkItem href='/my/invoices'>
+                {' '}
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
+                  <p>Invoice & Faktur Pajak</p>
+                </div>
+              </LinkItem>
+              <LinkItem href='/my/wishlist'>
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
+                  <p>Wishlist</p>
+                </div>
+              </LinkItem>
             </div>
           </div>
 
@@ -51,7 +83,13 @@ export default function Menu() {
             <MenuHeader>Pusat Bantuan</MenuHeader>
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
-              <LinkItem href='/'>Layanan Pelanggan</LinkItem>
+              <LinkItem href='/'>
+                {' '}
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
+                  <p>Layanan Pelanggan</p>
+                </div>
+              </LinkItem>
             </div>
           </div>
 
@@ -59,10 +97,15 @@ export default function Menu() {
             <MenuHeader>Pengaturan Akun</MenuHeader>
 
             <div className='divide-y divide-gray_r-6 border-y border-gray_r-6 mt-4'>
-              <LinkItem href='/my/address'>Daftar Alamat</LinkItem>
+              <LinkItem href='/my/address'>
+                <div className='flex gap-x-3 items-center'>
+                  <ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
+                  <p>Daftar Alamat</p>
+                </div>
+              </LinkItem>
             </div>
 
-            <div onClick={logout} className='p-4 mt-2'>
+            <div onClick={() => logout()} className='p-4 mt-2'>
               <button className='w-full btn-red'>Keluar Akun</button>
             </div>
           </div>
diff --git a/src/pages/my/shipments/index.jsx b/src/pages/my/shipments/index.jsx
new file mode 100644
index 00000000..cb69c4e9
--- /dev/null
+++ b/src/pages/my/shipments/index.jsx
@@ -0,0 +1,29 @@
+import Seo from '@/core/components/Seo'
+import AppLayout from '@/core/components/layouts/AppLayout'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import IsAuth from '@/lib/auth/components/IsAuth'
+import dynamic from 'next/dynamic'
+
+const ShipmentsComponent = dynamic(() => import('@/lib/shipment/components/Shipments'))
+
+export default function MyShipments() {
+  return (
+    <IsAuth>
+      <Seo title='Shipments - Indoteknik.com' />
+
+      <MobileView>
+        <AppLayout title='Pengiriman'>
+          <ShipmentsComponent />
+        </AppLayout>
+      </MobileView>
+
+      <DesktopView>
+        <BasicLayout>
+          <ShipmentsComponent />
+        </BasicLayout>
+      </DesktopView>
+    </IsAuth>
+  )
+}