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/checkout/components/CheckoutSection.jsx | 174 +++++++---- src/lib/quotation/components/Quotation.jsx | 116 ++++++- src/lib/transaction/components/Transaction.jsx | 396 +++++++++++++++--------- src/lib/transaction/components/stepper.jsx | 64 ++++ 4 files changed, 543 insertions(+), 207 deletions(-) create mode 100644 src/lib/transaction/components/stepper.jsx (limited to 'src/lib') diff --git a/src/lib/checkout/components/CheckoutSection.jsx b/src/lib/checkout/components/CheckoutSection.jsx index 34fe19f7..7f9ea08a 100644 --- a/src/lib/checkout/components/CheckoutSection.jsx +++ b/src/lib/checkout/components/CheckoutSection.jsx @@ -1,35 +1,35 @@ -import Link from "next/link"; +import Link from 'next/link'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; -import { AnimatePresence, motion } from "framer-motion"; -import { Divider, Spinner } from "@chakra-ui/react"; +import { AnimatePresence, motion } from 'framer-motion'; +import { Divider, Spinner } from '@chakra-ui/react'; export const SectionAddress = ({ address, label, url }) => { - return ( -
-
-
{label}
- - Pilih Alamat Lain - -
- - {address && ( -
-
- {address.type.charAt(0).toUpperCase() + - address.type.slice(1) + - ' Address'} -
-

{address.name}

-

{address.mobile}

-

- {address.street}, {address?.city?.name} -

-
- )} + return ( +
+
+
{label}
+ + Pilih Alamat Lain +
- ) -} + + {address && ( +
+
+ {address.type.charAt(0).toUpperCase() + + address.type.slice(1) + + ' Address'} +
+

{address.name}

+

{address.mobile}

+

+ {address.street}, {address?.city?.name} +

+
+ )} +
+ ); +}; export const SectionValidation = ({ address }) => address?.rajaongkirCityId == 0 && ( @@ -129,7 +129,10 @@ export const SectionExpedisi = ({
); -export const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) => +export const SectionListService = ({ + listserviceExpedisi, + setSelectedServiceType, +}) => listserviceExpedisi?.length > 0 && ( <>
@@ -169,39 +172,86 @@ export const SectionListService = ({ listserviceExpedisi, setSelectedServiceType ); - export const PickupAddress = ({ label }) => ( -
-
-
{label}
-
-
-

Indoteknik

-

- Jl. Bandengan Utara Raya No.85, RT.3/RW.16, Penjaringan, Kec. - Penjaringan, Kota Jkt Utara, Daerah Khusus Ibukota Jakarta, Indonesia - Kodepos : 14440 -

-

Telp : 021-2933 8828/29

-

Mobile : 0813 9000 7430

-
+export const PickupAddress = ({ label }) => ( +
+
+
{label}
- ); +
+

Indoteknik

+

+ Jl. Bandengan Utara Raya No.85, RT.3/RW.16, Penjaringan, Kec. + Penjaringan, Kota Jkt Utara, Daerah Khusus Ibukota Jakarta, Indonesia + Kodepos : 14440 +

+

Telp : 021-2933 8828/29

+

Mobile : 0813 9000 7430

+
+
+); + +const extractDuration = (text) => { + const matches = text.match(/\d+(?:-\d+)?/g); - const extractDuration = (text) => { - const matches = text.match(/\d+(?:-\d+)?/g); - - if (matches && matches.length === 1) { - const parts = matches[0].split('-'); - const min = parseInt(parts[0]); - const max = parseInt(parts[1]); - - if (min === max) { - return min.toString(); - } - - return matches[0]; + if (matches && matches.length === 1) { + const parts = matches[0].split('-'); + const min = parseInt(parts[0]); + const max = parseInt(parts[1]); + + if (min === max) { + return min.toString(); } - - return ''; - }; - \ No newline at end of file + + return matches[0]; + } + + return ''; +}; + +export function calculateEstimatedArrival(duration) { + if (duration) { + let estimationDate = duration.split('-'); + estimationDate[0] = parseInt(estimationDate[0]); + estimationDate[1] = parseInt(estimationDate[1]); + const from = addDays(new Date(), estimationDate[0] + 3); + const to = addDays(new Date(), estimationDate[1] + 3); + + let etdText = `*Estimasi tiba ${formatDate(from)}`; + + if (estimationDate[1] > estimationDate[0]) { + etdText += ` - ${formatDate(to)}`; + } + + return etdText; + } + + return ''; +} + +function addDays(date, days) { + const result = new Date(date); + result.setDate(result.getDate() + days); + return result; +} + +function formatDate(date) { + const day = date.getDate(); + const month = date.toLocaleString('default', { month: 'short' }); + return `${day} ${month}`; +} + +export function splitDuration(duration) { + if (duration) { + let estimationDate = null; + if (duration.includes('-')) { + estimationDate = duration.split('-'); + estimationDate = parseInt(estimationDate[1]); + } else { + estimationDate = parseInt(duration); + } + + return estimationDate; + } + + return ''; +} \ No newline at end of file diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx index baf1492c..fbb0627c 100644 --- a/src/lib/quotation/components/Quotation.jsx +++ b/src/lib/quotation/components/Quotation.jsx @@ -24,6 +24,8 @@ import { SectionExpedisi, SectionListService, SectionValidation, + calculateEstimatedArrival, + splitDuration, } from '../../checkout/components/CheckoutSection'; import addressesApi from '@/lib/address/api/addressesApi'; import { getItemAddress } from '@/core/utils/address'; @@ -64,6 +66,7 @@ const Quotation = () => { const [biayaKirim, setBiayaKirim] = useState(0); const [selectedExpedisiService, setselectedExpedisiService] = useState(null); const [etd, setEtd] = useState(null); + const [etdFix, setEtdFix] = useState(null); const expedisiValidation = useRef(null); @@ -170,6 +173,19 @@ const Quotation = () => { } }, [selectedExpedisi]); + useEffect(() => { + if (selectedServiceType) { + let serviceType = selectedServiceType.split(','); + setBiayaKirim(serviceType[0]); + setselectedExpedisiService(serviceType[1]); + setEtd(serviceType[2]); + } + }, [selectedServiceType]); + + useEffect(() => { + if (etd) setEtdFix(calculateEstimatedArrival(etd)); + }, [etd]); + // end set up address and carrier useEffect(() => { @@ -248,6 +264,10 @@ const Quotation = () => { partner_invoice_id: auth.partnerId, user_id: auth.id, order_line: JSON.stringify(productOrder), + delivery_amount: biayaKirim, + carrier_id: selectedCarrierId, + estimated_arrival_days: splitDuration(etd), + delivery_service_type: selectedExpedisiService, }; const isSuccess = await checkoutApi({ data }); setIsLoading(false); @@ -278,6 +298,68 @@ const Quotation = () => { + {selectedCarrierId == SELF_PICKUP_ID && ( +
+ +
+ )} + + {selectedCarrierId == SELF_PICKUP_ID && ( + + )} + {selectedCarrierId != SELF_PICKUP_ID && ( + + + + + + )} + + + + + +
{products && ( @@ -313,12 +395,25 @@ const Quotation = () => {
PPN 11%
{currencyFormat(cartCheckout?.tax)}
+
+
+ Biaya Kirim

{etdFix}

+
+
+ {currencyFormat( + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + )} +
+
Grand Total
- {currencyFormat(cartCheckout?.grandTotal)} + {currencyFormat( + cartCheckout?.grandTotal + + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + )}

@@ -428,6 +523,16 @@ const Quotation = () => {

PPN 11%
{currencyFormat(cartCheckout?.tax)}
+
+
+ Biaya Kirim

{etdFix}

+
+
+ {currencyFormat( + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + )} +
+
@@ -435,12 +540,15 @@ const Quotation = () => {
Grand Total
- {currencyFormat(cartCheckout?.grandTotal)} + {currencyFormat( + cartCheckout?.grandTotal + + Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000 + )}
-

+ {/*

*) Belum termasuk biaya pengiriman -

+

*/}

Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '} 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) => (