Merged in update/notifikasi-checkout (pull request #344)

Update/notifikasi checkout

Approved-by: trisusilo

2 files changed, 88 insertions, 29 deletions

diff --git a/src/lib/checkout/components/FinishCheckout.jsx b/src/lib/checkout/components/FinishCheckout.jsx
index 92245e31..4a67b252 100644
--- a/src/lib/checkout/components/FinishCheckout.jsx
+++ b/src/lib/checkout/components/FinishCheckout.jsx
@@ -1,27 +1,86 @@
-import Link from '@/core/components/elements/Link/Link'
+import Link from 'next/link';
+import Image from '~/components/ui/image';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import { useEffect, useState } from 'react';
+import odooApi from '@/core/api/odooApi';
+import useDevice from '@/core/hooks/useDevice';
+import useAuth from '@/core/hooks/useAuth';
+import axios from 'axios';
+import { toast } from 'react-hot-toast';
 
 const FinishCheckout = ({ query }) => {
+  const [data, setData] = useState();
+  const [transactionData, setTransactionData] = useState();
+  const { isDesktop, isMobile } = useDevice();
+  const auth = useAuth();
+
+  const so_order = query?.order_id?.replaceAll('-', '/');
+  useEffect(() => {
+    const fetchData = async () => {
+      const fetchedData = await odooApi(
+        'GET',
+        `/api/v1/sale_order_number?sale_number=${so_order}`
+      );
+      setData(fetchedData[0]);
+    };
+    fetchData();
+  }, [query]);
+
+  // Kirim email ketika komponen ini dimount atau sesuai kondisi
+  const sendEmail = async () => {
+    try {
+      const send = await axios.post(
+        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/finish-checkout?orderName=${query?.order_id}`,
+        {}
+      );
+      if (send.status === 200) {
+        toast.success('Berhasil mengirim rincian pesanan');
+      } else {
+        toast.error('Gagal mengirimkan rincian pesanan');
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error('Gagal mengirimkan rincian pesanan');
+    }
+  };
+
   return (
-    <div className='mx-auto container p-4 md:p-0 mt-0 md:mt-10'>
-      <div className='rounded-xl bg-warning-100 text-center border border-warning-300 w-full md:w-1/2 mx-auto'>
-        <div className='px-4 py-6 text-warning-900'>
-          <p className='font-semibold mb-2'>Terima Kasih atas Pembelian Anda</p>
-          <p className='text-warning-800 mb-4 leading-6'>
-            Rincian belanja sudah kami kirimkan ke email anda. Mohon dicek kembali. jika tidak
-            menerima email, anda dapat menghubungi kami disini.
-          </p>
-          <p className='mb-2 font-medium'>{query?.order_id?.replaceAll('-', '/')}</p>
-          <p className='text-caption-2 text-warning-800'>No. Transaksi</p>
-        </div>
+    <div className='flex flex-col items-center'>
+      <Image
+        src='/images/CHECKOUT-PESANAN.svg'
+        alt='Checkout Pesanan'
+        width={isMobile ? 300 : 450}
+        height={isMobile ? 300 : 450}
+      />
+      <div className='text-title-sm md:text-title-lg text-center font-semibold'>
+        Terima Kasih atas Pembelian Kamu
+      </div>
+      <div className='flex flex-col justify-center items-center text-body-2 md:text-body-1 text-center mt-3 px-24 md:px-36 py-4 border-2 gap-y-2 rounded'>
+        <p className='font-bold'>No. Transaksi</p>
+        <p className='mb-2 font-medium text-red-500 text-xl'>
+          {query?.order_id?.replaceAll('-', '/')}
+        </p>
         <Link
-          href='/my/quotations'
-          className='bg-warning-400 text-warning-900 rounded-b-xl py-4 block'
+          href={`/my/quotations/${data?.id}`}
+          className='btn-solid-red rounded-md text-base'
         >
-          Lihat detail pembelian Anda disini
+          Cek Detail Transaksi
         </Link>
       </div>
+      <div className='mt-2 text-center leading-6 text-base p-4 md:p-0 md:max-w-[700px]'>
+        Rincian pembelian sudah kami kirimkan ke email kamu. Mohon dicek
+        kembali. jika tidak menerima email, kamu dapat menghubungi kami{' '}
+        <a className='text-red-500' href={whatsappUrl()}>
+          di sini
+        </a>{' '}
+        atau{' '}
+        <span onClick={sendEmail} className='text-red-500 cursor-pointer'>
+          kirim rincian pesanan ulang
+        </span>
+        .
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default FinishCheckout
+export default FinishCheckout;
diff --git a/src/pages/shop/checkout/[status].jsx b/src/pages/shop/checkout/[status].jsx
index 2c3bebcf..0d5cffe8 100644
--- a/src/pages/shop/checkout/[status].jsx
+++ b/src/pages/shop/checkout/[status].jsx
@@ -1,22 +1,22 @@
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import IsAuth from '@/lib/auth/components/IsAuth'
-import FinishCheckoutComponent from '@/lib/checkout/components/FinishCheckout'
-import { useRouter } from 'next/router'
-import axios from 'axios'
-import Seo from '@/core/components/Seo'
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import IsAuth from '@/lib/auth/components/IsAuth';
+import FinishCheckoutComponent from '@/lib/checkout/components/FinishCheckout';
+import { useRouter } from 'next/router';
+import axios from 'axios';
+import Seo from '@/core/components/Seo';
 
 export async function getServerSideProps(context) {
-  const { order_id } = context.query
+  const { order_id } = context.query;
   await axios.post(
     `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/finish-checkout?orderName=${order_id}`,
     {},
     { headers: context.req.headers }
-  )
-  return { props: {} }
+  );
+  return { props: {} };
 }
 
 export default function Finish() {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <>
@@ -28,5 +28,5 @@ export default function Finish() {
         </BasicLayout>
       </IsAuth>
     </>
-  )
+  );
 }