From de5ef26bb1017540969f8847016193f7e1933ee1 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sun, 26 Mar 2023 15:10:59 +0700 Subject: transaction detail --- src/core/components/elements/Popup/BottomPopup.jsx | 4 +- src/lib/auth/components/Menu.jsx | 47 ++ src/lib/transaction/components/Transaction.jsx | 471 ++++++++++++++------- src/lib/transaction/components/Transactions.jsx | 12 +- src/pages/my/menu.jsx | 2 +- src/pages/my/transaction/[id].jsx | 17 +- src/styles/globals.css | 4 + 7 files changed, 395 insertions(+), 162 deletions(-) create mode 100644 src/lib/auth/components/Menu.jsx (limited to 'src') diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx index 95c75473..c244330c 100644 --- a/src/core/components/elements/Popup/BottomPopup.jsx +++ b/src/core/components/elements/Popup/BottomPopup.jsx @@ -49,8 +49,8 @@ const BottomPopup = ({ children, active = false, title, close }) => { diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx new file mode 100644 index 00000000..3f2b2fb2 --- /dev/null +++ b/src/lib/auth/components/Menu.jsx @@ -0,0 +1,47 @@ +import Link from '@/core/components/elements/Link/Link' +import { useRouter } from 'next/router' + +const Menu = () => { + const router = useRouter() + + const routeStartWith = (route) => router.pathname.startsWith(route) + + return ( +
+
Menu
+ + Daftar Transaksi + + + Invoice & Faktur Pajak + + + Wishlist + + +
Pusat Bantuan
+ Layanan Pelanggan + +
Pengaturan Akun
+ + Daftar Alamat + + +
+ ) +} + +const LinkItem = ({ children, ...props }) => ( + + {children} + +) + +export default Menu diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index dc9338fa..dbfdbae9 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -15,6 +15,11 @@ import Link from '@/core/components/elements/Link/Link' import Alert from '@/core/components/elements/Alert/Alert' 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' const Transaction = ({ id }) => { const { transaction } = useTransaction({ id }) @@ -88,10 +93,7 @@ const Transaction = ({ id }) => { const memoizeVariantGroupCard = useMemo( () => (
- +

Subtotal

{currencyFormat(totalAmount)}

@@ -124,120 +126,6 @@ const Transaction = ({ id }) => { return ( transaction.data?.name && ( <> -
- -
- -
- - {transaction.data?.name} - - {transaction.data?.paymentTerm} - - {transaction.data?.sales} - {transaction.data?.dateOrder} -
- - - -
- - {transaction.data?.purchaseOrderName || '-'} - -
-

Dokumen PO

- -
-
- - - -
Detail Produk
- - {memoizeVariantGroupCard} - - - - - - - -
-

Invoice

-
- {transaction.data?.invoices?.map((invoice, index) => ( - -
-
-

{invoice?.name}

-
- {invoice.amountResidual > 0 ? ( -
Belum Lunas
- ) : ( -
Lunas
- )} -

- {currencyFormat(invoice.amountTotal)} -

-
-
- -
- - ))} - {transaction.data?.invoices?.length === 0 && ( - - Belum ada Invoice - - )} -
-
- - - -
- {transaction.data?.status == 'draft' && ( - - )} - - {transaction.data?.status != 'draft' && ( - - )} -
- { > Ya, Batalkan -
- +
- +
- +
- -
+ + +
+ +
+ +
+ + {transaction.data?.name} + + {transaction.data?.paymentTerm} + + {transaction.data?.sales} + {transaction.data?.dateOrder} +
+ + + +
+ + {transaction.data?.purchaseOrderName || '-'} + +
+

Dokumen PO

+ +
+
+ + + +
Detail Produk
+ + {memoizeVariantGroupCard} + + + + + + + +
+

Invoice

+
+ {transaction.data?.invoices?.map((invoice, index) => ( + +
+
+

{invoice?.name}

+
+ {invoice.amountResidual > 0 ? ( +
Belum Lunas
+ ) : ( +
Lunas
+ )} +

+ {currencyFormat(invoice.amountTotal)} +

+
+
+ +
+ + ))} + {transaction.data?.invoices?.length === 0 && ( + + Belum ada Invoice + + )} +
+
+ + + +
+ {transaction.data?.status == 'draft' && ( + + )} + + {transaction.data?.status != 'draft' && ( + + )} +
+ + + +
+
+ +
+
+

Detail Transaksi

+ +
+ {transaction?.data?.name} + +
+ + +
+
+
Nama Sales
+
: {transaction?.data?.sales}
+ +
Tanggal Transaksi
+
: {transaction?.data?.dateOrder}
+
+
+
Ketentuan Pembayaran
+
: {transaction?.data?.paymentTerm}
+ +
Purchase Order
+
+ : {transaction?.data?.purchaseOrderName}{' '} + +
+
+
+ +
Info Pengiriman
+
+
+
Detail Pelanggan
+ +
+
+
Detail Pengiriman
+ +
+
+
Detail Penagihan
+ +
+
+ +
Rincian Pembelian
+ + + + + + + + + + + + {transaction?.data?.products?.map((product) => ( + + + + + + + + ))} + +
Nama ProdukJumlahHargaDiskonSubtotal
+ + {product?.name} + +
+ + {product?.parent?.name} + +
+ {product?.code}{' '} + {product?.attributes.length > 0 + ? `| ${product?.attributes.join(', ')}` + : ''} +
+
+ 		{product.quantity}{currencyFormat(product.price.price)} + {product.price.discountPercentage > 0 + ? `${product.price.discountPercentage}%` + : ''} + {currencyFormat(product.price.priceDiscount)}
+ +
+
+
Subtotal
+
{currencyFormat(totalAmount)}
+ +
Total Diskon
+
+ {currencyFormat(-totalDiscountAmount)} +
+ +
PPN 11% (Incl.)
+
{currencyFormat(totalAmount * 0.11)}
+ +
Grand Total
+
+ {currencyFormat(transaction.data?.amountTotal)} +
+
+
+ +
Invoice
+
+ {transaction.data?.invoices?.map((invoice, index) => ( + +
+
+

{invoice?.name}

+
+ {invoice.amountResidual > 0 ? ( +
Belum Lunas
+ ) : ( +
Lunas
+ )} +

+ {currencyFormat(invoice.amountTotal)} +

+
+
+ +
+ + ))} +
+ {transaction.data?.invoices?.length === 0 && ( + + Belum ada Invoice + + )} + +
+ {transaction.data?.status == 'draft' && ( + + )} + {transaction.data?.status != 'draft' && ( + + )} +
+
+
+ ) ) @@ -351,10 +519,7 @@ const SectionAddress = ({ address }) => { } const SectionButton = ({ label, active, toggle }) => ( - @@ -369,7 +534,7 @@ const SectionContent = ({ address }) => { fullAddress = fullAddress.join(', ') return ( -
+
{address.name} {address.email || '-'} {address.mobile || '-'} diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx index 3d3dd533..0a772967 100644 --- a/src/lib/transaction/components/Transactions.jsx +++ b/src/lib/transaction/components/Transactions.jsx @@ -17,6 +17,7 @@ import _ from 'lodash' import Alert from '@/core/components/elements/Alert/Alert' import MobileView from '@/core/components/views/MobileView' import DesktopView from '@/core/components/views/DesktopView' +import Menu from '@/lib/auth/components/Menu' const Transactions = () => { const router = useRouter() @@ -196,10 +197,15 @@ const Transactions = () => {
-
+
+ +
-

Daftar Transaksi

+

+ Daftar Transaksi{' '} + {transactions?.data?.saleOrders ? `(${transactions?.data?.saleOrders.length})` : ''} +

{
- +
diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx index 67158242..851bcf56 100644 --- a/src/pages/my/menu.jsx +++ b/src/pages/my/menu.jsx @@ -53,7 +53,7 @@ export default function Menu() { Pusat Bantuan
- Customer Support + Layanan Pelanggan
diff --git a/src/pages/my/transaction/[id].jsx b/src/pages/my/transaction/[id].jsx index 5167748c..c3283783 100644 --- a/src/pages/my/transaction/[id].jsx +++ b/src/pages/my/transaction/[id].jsx @@ -1,4 +1,7 @@ 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 TransactionComponent from '@/lib/transaction/components/Transaction' import { useRouter } from 'next/router' @@ -8,9 +11,17 @@ export default function Transaction() { return ( - - - + + + + + + + + + + + ) } diff --git a/src/styles/globals.css b/src/styles/globals.css index 7f33abe8..d43dad1f 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -459,6 +459,10 @@ button { @apply font-medium; } +.table-data { + @apply w-full; +} + .table-data thead tr { @apply bg-gray_r-3; } -- cgit v1.2.3
No. Transaksi