summaryrefslogtreecommitdiff
path: root/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages')
-rw-r--r--src/pages/my/address/create.js2
-rw-r--r--src/pages/my/transaction/[id].js127
-rw-r--r--src/pages/my/transactions.js102
-rw-r--r--src/pages/shop/cart.js53
-rw-r--r--src/pages/shop/checkout.js2
5 files changed, 206 insertions, 80 deletions
diff --git a/src/pages/my/address/create.js b/src/pages/my/address/create.js
index 4c7a8130..42cd117c 100644
--- a/src/pages/my/address/create.js
+++ b/src/pages/my/address/create.js
@@ -53,7 +53,7 @@ export default function CreateAddress() {
} = useForm({
resolver: yupResolver(validationSchema),
defaultValues
- });
+ });
const [ cities, setCities ] = useState([]);
const [ districts, setDistricts ] = useState([]);
diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js
index 428d71fb..d1ecbd7f 100644
--- a/src/pages/my/transaction/[id].js
+++ b/src/pages/my/transaction/[id].js
@@ -2,13 +2,12 @@ import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import LineDivider from "@/components/elements/LineDivider";
import WithAuth from "@/components/auth/WithAuth";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { useRouter } from "next/router";
import { useAuth } from "@/core/utils/auth";
import VariantCard from "@/components/variants/VariantCard";
import currencyFormat from "@/core/utils/currencyFormat";
-import Disclosure from "@/components/elements/Disclosure";
import DescriptionRow from "@/components/elements/DescriptionRow";
import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
import { SkeletonList } from "@/components/elements/Skeleton";
@@ -16,6 +15,10 @@ import Link from "@/components/elements/Link";
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import Alert from "@/components/elements/Alert";
import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";
+import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
+import { toast } from "react-hot-toast";
+import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
+import getFileBase64 from "@/core/utils/getFileBase64";
export default function DetailTransaction() {
const router = useRouter();
@@ -23,16 +26,94 @@ export default function DetailTransaction() {
const [ auth ] = useAuth();
const [ transaction, setTransaction ] = useState(null);
- useEffect(() => {
+ const loadTransaction = useCallback(async () => {
if (auth && id) {
- const loadTransaction = async () => {
- const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
- setTransaction(dataTransaction);
- }
- loadTransaction();
+ const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
+ setTransaction(dataTransaction);
}
}, [ auth, id ]);
+ useEffect(() => {
+ loadTransaction();
+ }, [ loadTransaction ]);
+
+ const submitCancelTransaction = async (data) => {
+ const isCancelled = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/cancel`);
+ if (isCancelled) {
+ toast.success('Berhasil batalkan transaksi');
+ loadTransaction();
+ }
+ }
+
+ const {
+ openConfirmAlert,
+ ConfirmAlert
+ } = useConfirmAlert({
+ title: 'Batalkan Transaksi',
+ caption: 'Apakah anda yakin untuk membatalkan transaksi?',
+ closeText: 'Tidak',
+ submitText: 'Iya, batalkan',
+ onSubmit: submitCancelTransaction
+ });
+
+ const UploadPurchaseOrder = () => {
+ const nameRef = useRef('');
+ const fileRef = useRef('');
+
+ const submitUploadPurchaseOrder = async (e) => {
+ e.preventDefault();
+ const file = fileRef.current.files[0];
+ const name = nameRef.current.value;
+ if (file.size > 5000000) {
+ toast.error('Maksimal ukuran file adalah 5MB', {
+ position: 'bottom-center'
+ });
+ return;
+ }
+ const parameter = {
+ name,
+ file: await getFileBase64(file)
+ };
+ const isUploaded = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${transaction.id}/upload_po`, parameter);
+ if (isUploaded) {
+ toast.success('Berhasil upload PO');
+ loadTransaction();
+ closePopup();
+ }
+ };
+
+ return (
+ <form className="flex flex-col gap-y-4" onSubmit={submitUploadPurchaseOrder}>
+ <div>
+ <label className="form-label mb-2">Nama PO</label>
+ <input className="form-input" type="text" ref={nameRef} required />
+ </div>
+ <div>
+ <label className="form-label mb-2">Dokumen PO</label>
+ <input className="form-input" type="file" ref={fileRef} required />
+ </div>
+ <button type="submit" className="btn-yellow w-full mt-2">Upload</button>
+ </form>
+ );
+ }
+
+ const {
+ closePopup,
+ BottomPopup,
+ openPopup
+ } = useBottomPopup({
+ title: 'Upload PO',
+ children: UploadPurchaseOrder
+ });
+
+ const downloadPurchaseOrder = () => {
+
+ };
+
+ const uploadPurchaseOrder = () => {
+ openPopup();
+ };
+
return (
<WithAuth>
<Layout className="pb-4">
@@ -49,9 +130,6 @@ export default function DetailTransaction() {
<DescriptionRow label="No Transaksi">
{ transaction?.name }
</DescriptionRow>
- <DescriptionRow label="Purchase Order">
- { transaction?.purchase_order_name || '-' }
- </DescriptionRow>
<DescriptionRow label="Ketentuan Pembayaran">
{ transaction?.payment_term }
</DescriptionRow>
@@ -65,6 +143,24 @@ export default function DetailTransaction() {
<LineDivider />
+ <div className="p-4 flex flex-col gap-y-4">
+ <DescriptionRow label="Purchase Order">
+ { transaction?.purchase_order_name || '-' }
+ </DescriptionRow>
+ <div className="flex items-center">
+ <p className="text-gray_r-11 leading-none">Dokumen PO</p>
+ <button
+ type="button"
+ className="btn-light py-1.5 px-3 ml-auto"
+ onClick={transaction?.purchase_order_file ? downloadPurchaseOrder : uploadPurchaseOrder}
+ >
+ { transaction?.purchase_order_file ? 'Download' : 'Upload' }
+ </button>
+ </div>
+ </div>
+
+ <LineDivider />
+
<p className="h2 p-4">Detail Produk</p>
<div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
@@ -115,6 +211,13 @@ export default function DetailTransaction() {
Belum ada Invoice
</Alert>
) }
+ <button
+ className="btn-light w-full mt-4"
+ disabled={transaction?.status != 'waiting'}
+ onClick={() => openConfirmAlert(transaction)}
+ >
+ Batalkan Transaksi
+ </button>
</div>
</div>
</>
@@ -123,6 +226,8 @@ export default function DetailTransaction() {
<SkeletonList number={12} />
</div>
) }
+ { ConfirmAlert }
+ { BottomPopup }
</Layout>
</WithAuth>
);
diff --git a/src/pages/my/transactions.js b/src/pages/my/transactions.js
index a03ff007..6eb0fb4e 100644
--- a/src/pages/my/transactions.js
+++ b/src/pages/my/transactions.js
@@ -1,9 +1,8 @@
import { useRouter } from "next/router";
import AppBar from "@/components/layouts/AppBar";
-import BottomPopup from "@/components/elements/BottomPopup";
import Layout from "@/components/layouts/Layout";
import WithAuth from "@/components/auth/WithAuth";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
import { useAuth } from "@/core/utils/auth";
import apiOdoo from "@/core/utils/apiOdoo";
import currencyFormat from "@/core/utils/currencyFormat";
@@ -12,6 +11,9 @@ import Link from "@/components/elements/Link";
import Pagination from "@/components/elements/Pagination";
import Alert from "@/components/elements/Alert";
import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";
+import { toast } from "react-hot-toast";
+import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
+import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
export default function Transactions() {
const [ auth ] = useAuth();
@@ -22,31 +24,30 @@ export default function Transactions() {
} = router.query;
const [ transactions, setTransactions ] = useState([]);
- const [ activePopupId, setActivePopupId ] = useState(null);
const [ pageCount, setPageCount ] = useState(0);
const [ isLoading, setIsLoading ] = useState(true);
const searchQueryRef = useRef();
+ const loadTransactions = useCallback(async () => {
+ if (auth) {
+ const limit = 10;
+ let offset = (page - 1) * 10;
+ let queryParams = [`limit=${limit}`, `offset=${offset}`];
+ if (q) queryParams.push(`name=${q}`);
+ queryParams = queryParams.join('&');
+ queryParams = queryParams ? '?' + queryParams : '';
+
+ const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`);
+ setTransactions(dataTransactions);
+ setPageCount(Math.ceil(dataTransactions?.sale_order_total / limit));
+ setIsLoading(false);
+ };
+ }, [ auth, q, page ]);
useEffect(() => {
- const loadTransactions = async () => {
- if (auth) {
- const limit = 10;
- let offset = (page - 1) * 10;
- let queryParams = [`limit=${limit}`, `offset=${offset}`];
- if (q) queryParams.push(`name=${q}`);
- queryParams = queryParams.join('&');
- queryParams = queryParams ? '?' + queryParams : '';
-
- const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`);
- setTransactions(dataTransactions);
- setPageCount(Math.ceil(dataTransactions?.sale_order_total / limit));
- setIsLoading(false);
- };
- }
loadTransactions();
- }, [ auth, q, page ]);
+ }, [ loadTransactions ]);
const actionSearch = (e) => {
e.preventDefault();
@@ -57,6 +58,51 @@ export default function Transactions() {
router.push(`/my/transactions${queryParams}`);
};
+ const childrenPopup = (data) => (
+ <div className="flex flex-col gap-y-6">
+ <button
+ className="text-left"
+ >
+ Download Quotation
+ </button>
+ <button
+ className="text-left disabled:opacity-70"
+ disabled={ data?.status != 'waiting' }
+ onClick={() => {openConfirmAlert(data); closePopup()}}
+ >
+ Batalkan Transaksi
+ </button>
+ </div>
+ );
+
+ const {
+ closePopup,
+ openPopup,
+ BottomPopup
+ } = useBottomPopup({
+ title: 'Lainnya',
+ children: childrenPopup
+ });
+
+ const submitCancelTransaction = async (data) => {
+ const isCancelled = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/cancel`);
+ if (isCancelled) {
+ toast.success('Berhasil batalkan transaksi');
+ loadTransactions();
+ }
+ }
+
+ const {
+ openConfirmAlert,
+ ConfirmAlert
+ } = useConfirmAlert({
+ title: 'Batalkan Transaksi',
+ caption: 'Apakah anda yakin untuk membatalkan transaksi?',
+ closeText: 'Tidak',
+ submitText: 'Iya, batalkan',
+ onSubmit: submitCancelTransaction
+ });
+
return (
<WithAuth>
<Layout>
@@ -90,7 +136,7 @@ export default function Transactions() {
</Link>
<div className="flex gap-x-1 justify-end">
<TransactionStatusBadge status={transaction.status} />
- <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setActivePopupId(transaction.id)} />
+ <EllipsisVerticalIcon className="w-5 h-5" onClick={() => openPopup(transaction)} />
</div>
</div>
<Link href={`/my/transaction/${transaction.id}`}>
@@ -122,19 +168,9 @@ export default function Transactions() {
<div className="pb-6 pt-2">
<Pagination currentPage={page} pageCount={pageCount} url={`/my/transactions${q ? `?q=${q}` : ''}`} />
</div>
-
- { transactions?.sale_orders?.length > 0 && (
- <BottomPopup
- title="Lainnya"
- active={activePopupId}
- closePopup={() => setActivePopupId(null)}
- >
- <div className="flex flex-col gap-y-4">
- <p>Download Quotation</p>
- <p>Batalkan Transaksi</p>
- </div>
- </BottomPopup>
- ) }
+
+ { ConfirmAlert }
+ { BottomPopup }
</Layout>
</WithAuth>
);
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index aaf67e1f..d8327a10 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -20,7 +20,6 @@ import apiOdoo from "@/core/utils/apiOdoo";
import currencyFormat from "@/core/utils/currencyFormat";
// Components
-import ConfirmAlert from "@/components/elements/ConfirmAlert";
import Image from "@/components/elements/Image";
import Layout from "@/components/layouts/Layout";
import Link from "@/components/elements/Link";
@@ -29,6 +28,7 @@ import Spinner from "@/components/elements/Spinner";
import AppBar from "@/components/layouts/AppBar";
import ProgressBar from "@/components/elements/ProgressBar";
import LineDivider from "@/components/elements/LineDivider";
+import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
export default function Cart() {
const router = useRouter();
@@ -37,10 +37,6 @@ export default function Cart() {
const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
const [totalTaxAmount, setTotalTaxAmount] = useState(0);
const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
- const [deleteConfirmation, setDeleteConfirmation] = useState({
- productId: null,
- show: false
- });
useEffect(() => {
const getProducts = async () => {
@@ -117,47 +113,36 @@ export default function Cart() {
updateCart(productId, quantity);
}
- const showDeleteConfirmation = (productId) => {
- setDeleteConfirmation({
- productId: productId,
- show: true
- });
- }
-
- const hideDeleteConfirmation = () => {
- setDeleteConfirmation({
- productId: null,
- show: false
- });
+ const toggleProductSelected = (productId) => {
+ let productIndexToUpdate = products.findIndex((product) => product.id == productId);
+ let productsToUpdate = products;
+ productsToUpdate[productIndexToUpdate].selected = !productsToUpdate[productIndexToUpdate].selected;
+ setProducts([...productsToUpdate]);
}
- const deleteItem = () => {
- const productId = deleteConfirmation.productId;
+ const deleteItem = (productId) => {
let productIndexToUpdate = products.findIndex((product) => product.id == productId);
let productsToUpdate = products;
productsToUpdate.splice(productIndexToUpdate, 1);
setProducts([...productsToUpdate]);
deleteItemCart(productId);
- hideDeleteConfirmation();
toast.success('Berhasil menghapus 1 barang dari keranjang', { duration: 1500 });
}
- const toggleProductSelected = (productId) => {
- let productIndexToUpdate = products.findIndex((product) => product.id == productId);
- let productsToUpdate = products;
- productsToUpdate[productIndexToUpdate].selected = !productsToUpdate[productIndexToUpdate].selected;
- setProducts([...productsToUpdate]);
- }
+ const {
+ openConfirmAlert,
+ ConfirmAlert
+ } = useConfirmAlert({
+ title: 'Hapus barang dari keranjang',
+ caption:'Apakah anda yakin menghapus barang dari keranjang',
+ closeText: 'Batal',
+ submitText: 'Hapus',
+ onSubmit: deleteItem
+ })
return (
<>
- <ConfirmAlert
- title="Hapus barang dari keranjang"
- caption="Apakah anda yakin menghapus barang dari keranjang?"
- show={deleteConfirmation.show}
- onClose={hideDeleteConfirmation}
- onSubmit={deleteItem}
- />
+ { ConfirmAlert }
<Layout>
<AppBar title="Keranjang Saya" />
@@ -235,7 +220,7 @@ export default function Cart() {
<div className="flex gap-x-2 items-center">
<button
className="btn-red p-2 rounded"
- onClick={() => showDeleteConfirmation(product.id)}
+ onClick={() => openConfirmAlert(product.id)}
>
<TrashIcon className="text-red_r-11 w-3"/>
</button>
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
index 8a540bcd..8a52486c 100644
--- a/src/pages/shop/checkout.js
+++ b/src/pages/shop/checkout.js
@@ -195,7 +195,7 @@ export default function Checkout() {
{ selectedAddress.shipping && (
<div className="mt-4 text-caption-1">
- <div className="badge-red mb-2">{ selectedAddress.invoicing.type.charAt(0).toUpperCase() + selectedAddress.invoicing.type.slice(1) + ' Address' }</div>
+ <div className="badge-red mb-2">{ selectedAddress.shipping.type.charAt(0).toUpperCase() + selectedAddress.shipping.type.slice(1) + ' Address' }</div>
<p className="font-medium">{ selectedAddress.shipping.name }</p>
<p className="mt-2 text-gray_r-11">{ selectedAddress.shipping.mobile }</p>
<p className="mt-1 text-gray_r-11">{ selectedAddress.shipping.street }, { selectedAddress.shipping?.city?.name }</p>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:05:58 +0000