From 39b5e05a5fcc7ca26342f37e85c6585d1dacb3a5 Mon Sep 17 00:00:00 2001 From: "HATEC\\SPVDEV001" Date: Tue, 5 Mar 2024 14:37:44 +0700 Subject: add address & expedisi di page quotation - template stepper approval --- src/lib/transaction/components/Transaction.jsx | 396 ++++++++++++++++--------- src/lib/transaction/components/stepper.jsx | 64 ++++ 2 files changed, 319 insertions(+), 141 deletions(-) create mode 100644 src/lib/transaction/components/stepper.jsx (limited to 'src/lib/transaction') diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index 82eb1775..d4b0f92c 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -1,83 +1,97 @@ -import Spinner from '@/core/components/elements/Spinner/Spinner' -import useTransaction from '../hooks/useTransaction' -import TransactionStatusBadge from './TransactionStatusBadge' -import Divider from '@/core/components/elements/Divider/Divider' -import { useMemo, useRef, useState } from 'react' -import { downloadPurchaseOrder, downloadQuotation } from '../utils/transactions' -import BottomPopup from '@/core/components/elements/Popup/BottomPopup' -import uploadPoApi from '../api/uploadPoApi' -import { toast } from 'react-hot-toast' -import getFileBase64 from '@/core/utils/getFileBase64' -import currencyFormat from '@/core/utils/currencyFormat' -import VariantGroupCard from '@/lib/variant/components/VariantGroupCard' -import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/outline' -import Link from '@/core/components/elements/Link/Link' -import checkoutPoApi from '../api/checkoutPoApi' -import cancelTransactionApi from '../api/cancelTransactionApi' -import MobileView from '@/core/components/views/MobileView' -import DesktopView from '@/core/components/views/DesktopView' -import Menu from '@/lib/auth/components/Menu' -import Image from '@/core/components/elements/Image/Image' -import { createSlug } from '@/core/utils/slug' -import toTitleCase from '@/core/utils/toTitleCase' -import useAirwayBill from '../hooks/useAirwayBill' -import Manifest from '@/lib/treckingAwb/component/Manifest' +import Spinner from '@/core/components/elements/Spinner/Spinner'; +import useTransaction from '../hooks/useTransaction'; +import TransactionStatusBadge from './TransactionStatusBadge'; +import Divider from '@/core/components/elements/Divider/Divider'; +import { useMemo, useRef, useState } from 'react'; +import { + downloadPurchaseOrder, + downloadQuotation, +} from '../utils/transactions'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; +import uploadPoApi from '../api/uploadPoApi'; +import { toast } from 'react-hot-toast'; +import getFileBase64 from '@/core/utils/getFileBase64'; +import currencyFormat from '@/core/utils/currencyFormat'; +import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'; +import { + ChevronDownIcon, + ChevronRightIcon, + ChevronUpIcon, +} from '@heroicons/react/24/outline'; +import Link from '@/core/components/elements/Link/Link'; +import checkoutPoApi from '../api/checkoutPoApi'; +import cancelTransactionApi from '../api/cancelTransactionApi'; +import MobileView from '@/core/components/views/MobileView'; +import DesktopView from '@/core/components/views/DesktopView'; +import Menu from '@/lib/auth/components/Menu'; +import Image from '@/core/components/elements/Image/Image'; +import { createSlug } from '@/core/utils/slug'; +import toTitleCase from '@/core/utils/toTitleCase'; +import useAirwayBill from '../hooks/useAirwayBill'; +import Manifest from '@/lib/treckingAwb/component/Manifest'; +import useAuth from '@/core/hooks/useAuth'; +import StepApproval from './stepper'; const Transaction = ({ id }) => { - const { transaction } = useTransaction({ id }) - const { queryAirwayBill } = useAirwayBill({ orderId: id }) - - const [airwayBillPopup, setAirwayBillPopup] = useState(null) - - const poNumber = useRef(null) - const poFile = useRef(null) - const [uploadPo, setUploadPo] = useState(false) - const [idAWB, setIdAWB] = useState(null) - const openUploadPo = () => setUploadPo(true) - const closeUploadPo = () => setUploadPo(false) + const auth = { ...useAuth(), isApprovalState: true }; + const { transaction } = useTransaction({ id }); + const { queryAirwayBill } = useAirwayBill({ orderId: id }); + + const [airwayBillPopup, setAirwayBillPopup] = useState(null); + + const poNumber = useRef(null); + const poFile = useRef(null); + const [uploadPo, setUploadPo] = useState(false); + const [idAWB, setIdAWB] = useState(null); + const openUploadPo = () => setUploadPo(true); + const closeUploadPo = () => setUploadPo(false); const submitUploadPo = async () => { - const file = poFile.current.files[0] - const name = poNumber.current.value + const file = poFile.current.files[0]; + const name = poNumber.current.value; if (typeof file === 'undefined' || !name) { - toast.error('Nomor dan Dokumen PO harus diisi') - return + toast.error('Nomor dan Dokumen PO harus diisi'); + return; } if (file.size > 5000000) { - toast.error('Maksimal ukuran file adalah 5MB') - return + toast.error('Maksimal ukuran file adalah 5MB'); + return; } - const data = { name, file: await getFileBase64(file) } - const isUploaded = await uploadPoApi({ id, data }) + const data = { name, file: await getFileBase64(file) }; + const isUploaded = await uploadPoApi({ id, data }); if (isUploaded) { - toast.success('Berhasil upload PO') - transaction.refetch() - closeUploadPo() - return + toast.success('Berhasil upload PO'); + transaction.refetch(); + closeUploadPo(); + return; } - toast.error('Terjadi kesalahan internal, coba lagi nanti atau hubungi kami') - } - - const [cancelTransaction, setCancelTransaction] = useState(false) - const openCancelTransaction = () => setCancelTransaction(true) - const closeCancelTransaction = () => setCancelTransaction(false) + toast.error( + 'Terjadi kesalahan internal, coba lagi nanti atau hubungi kami' + ); + }; + + const [cancelTransaction, setCancelTransaction] = useState(false); + const openCancelTransaction = () => setCancelTransaction(true); + const closeCancelTransaction = () => setCancelTransaction(false); const submitCancelTransaction = async () => { - const isCancelled = await cancelTransactionApi({ transaction: transaction.data }) + const isCancelled = await cancelTransactionApi({ + transaction: transaction.data, + }); if (isCancelled) { - toast.success('Berhasil batalkan transaksi') - transaction.refetch() + toast.success('Berhasil batalkan transaksi'); + transaction.refetch(); } - closeCancelTransaction() - } + closeCancelTransaction(); + }; const checkout = async () => { if (!transaction.data?.purchaseOrderFile) { - toast.error('Mohon upload dokumen PO anda sebelum melanjutkan pesanan') - return + toast.error('Mohon upload dokumen PO anda sebelum melanjutkan pesanan'); + return; } - await checkoutPoApi({ id }) - toast.success('Berhasil melanjutkan pesanan') - transaction.refetch() - } + await checkoutPoApi({ id }); + toast.success('Berhasil melanjutkan pesanan'); + transaction.refetch(); + }; const memoizeVariantGroupCard = useMemo( () => ( @@ -102,19 +116,19 @@ const Transaction = ({ id }) => { ), [transaction.data] - ) + ); if (transaction.isLoading) { return (
- ) + ); } const closePopup = () => { - setIdAWB(null) - } + setIdAWB(null); + }; return ( transaction.data?.name && ( @@ -156,10 +170,18 @@ const Transaction = ({ id }) => {
- -
@@ -167,18 +189,27 @@ const Transaction = ({ id }) => { +
+ +
- {transaction.data?.name} + + {transaction.data?.name} + {transaction.data?.paymentTerm} - {transaction.data?.sales} - {transaction.data?.dateOrder} + + {transaction.data?.sales} + + + {transaction.data?.dateOrder} +
@@ -214,25 +245,27 @@ const Transaction = ({ id }) => { -
- - {transaction.data?.purchaseOrderName || '-'} - -
-

Dokumen PO

- + {!auth.isApprovalState && ( +
+ + {transaction.data?.purchaseOrderName || '-'} + +
+

Dokumen PO

+ +
-
+ )} @@ -278,7 +311,29 @@ const Transaction = ({ id }) => {
- {transaction.data?.status == 'draft' && ( + {transaction.data?.status == 'draft' && auth.isApprovalState && ( +
+ + +
+ )} + {transaction.data?.status == 'draft' && !auth.isApprovalState && ( @@ -308,10 +363,17 @@ const Transaction = ({ id }) => {
-

Detail Transaksi

+
+

+ Detail Transaksi +

+ +
- {transaction?.data?.name} + + {transaction?.data?.name} +
@@ -322,11 +384,35 @@ const Transaction = ({ id }) => { > Download - {transaction.data?.status == 'draft' && ( - - )} + {transaction.data?.status == 'draft' && + auth.isApprovalState && ( +
+ + +
+ )} + {transaction.data?.status == 'draft' && + !auth.isApprovalState && ( + + )} {transaction.data?.status != 'draft' && ( -
+ {!auth.isApprovalState && ( + <> +
Purchase Order
+
+ : {transaction?.data?.purchaseOrderName}{' '} + +
+ ) + + )}
-
Informasi Pelanggan
+
+ Informasi Pelanggan +
Detail Pelanggan
- +
-
Pengiriman
+
+ Pengiriman +
{transaction?.data?.pickings?.map((airway) => (