ok
This commit is contained in:
13
src/App.js
13
src/App.js
@@ -394,14 +394,14 @@ function App() {
|
|||||||
console.log(transaction_info); // Log the updated transaction_info
|
console.log(transaction_info); // Log the updated transaction_info
|
||||||
|
|
||||||
|
|
||||||
const depthh = transactionList.current.findIndex(
|
const depthh = transactionList.current.findIndex(
|
||||||
item => item.transactionId.toString() === transaction_info.toString()
|
item => item.transactionId.toString() === transaction_info.toString()
|
||||||
);
|
);
|
||||||
|
|
||||||
setDepth(depthh);
|
|
||||||
|
|
||||||
|
setDepth(depthh);
|
||||||
|
console.log(transaction_info == response[0].transactionId)
|
||||||
// If transaction_info is an empty string, set the modal
|
// If transaction_info is an empty string, set the modal
|
||||||
if (transaction_info == '') return false;
|
if (transaction_info == '' || transaction_info == response[0].transactionId) return false;
|
||||||
else return true;
|
else return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -433,6 +433,7 @@ setDepth(depthh);
|
|||||||
// If transaction_info is an empty string, set the modal
|
// If transaction_info is an empty string, set the modal
|
||||||
if (!isViewingOtherTransaction) {
|
if (!isViewingOtherTransaction) {
|
||||||
setModal("new_transaction", data);
|
setModal("new_transaction", data);
|
||||||
|
navigate(`?transactionId=${data.transactionId}`, { replace: true });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -192,7 +192,7 @@ const Item = ({
|
|||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
borderRadius: '9999px',
|
borderRadius: '9999px',
|
||||||
backgroundColor: !isAvailable ? 'gray' : 'unset',
|
backgroundColor: !isAvailable ? 'gray' : 'unset',
|
||||||
backgroundImage: isAvailable && 'linear-gradient(to right, #e52535, #eb525e)',
|
backgroundImage: isAvailable && 'linear-gradient(to right, #e52535, #fe6d78)',
|
||||||
padding: '0.25rem 0rem',
|
padding: '0.25rem 0rem',
|
||||||
color: 'rgb(255, 255, 255)',
|
color: 'rgb(255, 255, 255)',
|
||||||
fontSize: '0.75rem',
|
fontSize: '0.75rem',
|
||||||
|
|||||||
@@ -93,7 +93,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
|
|||||||
{modalContent === "transaction_canceled" && (
|
{modalContent === "transaction_canceled" && (
|
||||||
<Transaction propsShopId={shop.cafeId} />
|
<Transaction propsShopId={shop.cafeId} />
|
||||||
)}
|
)}
|
||||||
{modalContent === "transaction_pending" && <Transaction_pending deviceType={deviceType}/>}
|
{modalContent === "transaction_pending" && <Transaction_pending deviceType={deviceType} setModal={setModal}/>}
|
||||||
{modalContent === "transaction_item" && <Transaction_item />}
|
{modalContent === "transaction_item" && <Transaction_item />}
|
||||||
{modalContent === "transaction_confirmed" && (
|
{modalContent === "transaction_confirmed" && (
|
||||||
<Transaction_confirmed deviceType={deviceType} paymentUrl={shop.qrPayment} setModal={setModal}/>
|
<Transaction_confirmed deviceType={deviceType} paymentUrl={shop.qrPayment} setModal={setModal}/>
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ export async function declineTransaction(transactionId) {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return await response.json();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error:", error);
|
console.error("Error:", error);
|
||||||
}
|
}
|
||||||
@@ -57,7 +57,7 @@ export async function cancelTransaction(transactionId) {
|
|||||||
try {
|
try {
|
||||||
const token = getLocalStorage("auth");
|
const token = getLocalStorage("auth");
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
`${API_BASE_URL}/transaction/cancel-transaction/${transactionId}`,
|
`${API_BASE_URL}/transaction/decline-transaction/${transactionId}`,
|
||||||
{
|
{
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import { getTables } from "../helpers/tableHelper";
|
|||||||
import TableCanvas from "../components/TableCanvas";
|
import TableCanvas from "../components/TableCanvas";
|
||||||
import { useSearchParams } from "react-router-dom";
|
import { useSearchParams } from "react-router-dom";
|
||||||
|
|
||||||
export default function Transactions({ propsShopId, sendParam, deviceType, handleMoveToTransaction, shopImg }) {
|
export default function Transactions({ propsShopId, sendParam, deviceType, handleMoveToTransaction, shopImg, setModal }) {
|
||||||
const { shopId, tableId } = useParams();
|
const { shopId, tableId } = useParams();
|
||||||
if (sendParam) sendParam({ shopId, tableId });
|
if (sendParam) sendParam({ shopId, tableId });
|
||||||
|
|
||||||
@@ -173,7 +173,15 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
|
|||||||
<div
|
<div
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
localStorage.setItem('lastTransaction', JSON.stringify(transaction));
|
localStorage.setItem('lastTransaction', JSON.stringify(transaction));
|
||||||
}} className={styles["addNewItem"]}>Tambah pesanan</div>
|
setModal("message", { captMessage: 'Silahkan tambahkan pesanan', descMessage: 'Pembayaran akan ditambahkan ke transaksi sebelumnya.' }, null, null);
|
||||||
|
|
||||||
|
// Dispatch the custom event
|
||||||
|
window.dispatchEvent(new Event("localStorageUpdated"));
|
||||||
|
}}
|
||||||
|
className={styles["addNewItem"]}
|
||||||
|
>
|
||||||
|
Tambah pesanan
|
||||||
|
</div>
|
||||||
|
|
||||||
<h2 className={styles["Transactions-detail"]}>
|
<h2 className={styles["Transactions-detail"]}>
|
||||||
{transaction.serving_type === "pickup"
|
{transaction.serving_type === "pickup"
|
||||||
|
|||||||
@@ -121,7 +121,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
setTransactions((prevTransactions) =>
|
setTransactions((prevTransactions) =>
|
||||||
prevTransactions.map((transaction) =>
|
prevTransactions.map((transaction) =>
|
||||||
transaction.transactionId === transactionId
|
transaction.transactionId === transactionId
|
||||||
? { ...transaction, confirmed: -1 } // Set to confirmed
|
? c // Set to confirmed
|
||||||
: transaction
|
: transaction
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
@@ -153,7 +153,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
{transaction.confirmed === 1 ? (
|
{transaction.confirmed === 1 ? (
|
||||||
<ColorRing className={styles['receipt-logo']} />
|
<ColorRing className={styles['receipt-logo']} />
|
||||||
) : transaction.confirmed === -1 || transaction.confirmed === -2 ? (
|
) : transaction.confirmed === -1 || transaction.confirmed === -2 ? (
|
||||||
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
<div style={{ display: 'flex', justifyContent: 'center', margin: '16px 0px' }}>
|
||||||
<svg
|
<svg
|
||||||
style={{ width: '60px', transform: 'Rotate(45deg)' }}
|
style={{ width: '60px', transform: 'Rotate(45deg)' }}
|
||||||
clipRule="evenodd"
|
clipRule="evenodd"
|
||||||
@@ -172,7 +172,32 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
) : transaction.confirmed === 2 ? (
|
) : transaction.confirmed === 2 ? (
|
||||||
<ColorRing className={styles['receipt-logo']} />
|
<ColorRing className={styles['receipt-logo']} />
|
||||||
) : transaction.confirmed === 3 ? (
|
) : transaction.confirmed === 3 ? (
|
||||||
"Transaction success"
|
<div>
|
||||||
|
<svg
|
||||||
|
height="60px"
|
||||||
|
width="60px"
|
||||||
|
version="1.1"
|
||||||
|
id="Layer_1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 506.4 506.4"
|
||||||
|
xmlSpace="preserve"
|
||||||
|
fill="#000000"
|
||||||
|
style={{marginTop: '12px', marginBottom: '12px'}}
|
||||||
|
>
|
||||||
|
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
|
||||||
|
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
|
||||||
|
<g id="SVGRepo_iconCarrier">
|
||||||
|
<circle style={{ fill: '#54B265' }} cx="253.2" cy="253.2" r="249.2" />
|
||||||
|
<path
|
||||||
|
style={{ fill: '#F4EFEF' }}
|
||||||
|
d="M372.8,200.4l-11.2-11.2c-4.4-4.4-12-4.4-16.4,0L232,302.4l-69.6-69.6c-4.4-4.4-12-4.4-16.4,0 L134.4,244c-4.4,4.4-4.4,12,0,16.4l89.2,89.2c4.4,4.4,12,4.4,16.4,0l0,0l0,0l10.4-10.4l0.8-0.8l121.6-121.6 C377.2,212.4,377.2,205.2,372.8,200.4z"
|
||||||
|
></path>
|
||||||
|
<path d="M253.2,506.4C113.6,506.4,0,392.8,0,253.2S113.6,0,253.2,0s253.2,113.6,253.2,253.2S392.8,506.4,253.2,506.4z M253.2,8 C118,8,8,118,8,253.2s110,245.2,245.2,245.2s245.2-110,245.2-245.2S388.4,8,253.2,8z"></path>
|
||||||
|
<path d="M231.6,357.2c-4,0-8-1.6-11.2-4.4l-89.2-89.2c-6-6-6-16,0-22l11.6-11.6c6-6,16.4-6,22,0l66.8,66.8L342,186.4 c2.8-2.8,6.8-4.4,11.2-4.4c4,0,8,1.6,11.2,4.4l11.2,11.2l0,0c6,6,6,16,0,22L242.8,352.4C239.6,355.6,235.6,357.2,231.6,357.2z M154,233.6c-2,0-4,0.8-5.6,2.4l-11.6,11.6c-2.8,2.8-2.8,8,0,10.8l89.2,89.2c2.8,2.8,8,2.8,10.8,0l132.8-132.8c2.8-2.8,2.8-8,0-10.8 l-11.2-11.2c-2.8-2.8-8-2.8-10.8,0L234.4,306c-1.6,1.6-4,1.6-5.6,0l-69.6-69.6C158,234.4,156,233.6,154,233.6z"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|
||||||
<ColorRing className={styles['receipt-logo']} />
|
<ColorRing className={styles['receipt-logo']} />
|
||||||
@@ -196,7 +221,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
)}</h3>
|
)}</h3>
|
||||||
:
|
:
|
||||||
<h3>{transaction.confirmed === 1 ? (
|
<h3>{transaction.confirmed === 1 ? (
|
||||||
"Silahkan Bayar Dengan QRIS"
|
(transaction.payment_type == 'cash' ? 'Silahkan Bayar Ke Kasir' : "Silahkan Bayar Dengan QRIS")
|
||||||
) : transaction.confirmed === -1 ? (
|
) : transaction.confirmed === -1 ? (
|
||||||
"Dibatalkan Oleh Kasir"
|
"Dibatalkan Oleh Kasir"
|
||||||
) : transaction.confirmed === -2 ? (
|
) : transaction.confirmed === -2 ? (
|
||||||
@@ -268,15 +293,15 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
Rp {calculateTotalPrice(transaction.DetailedTransactions)}
|
Rp {calculateTotalPrice(transaction.DetailedTransactions)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.TotalContainer}>
|
<div className={styles.TotalContainer}>
|
||||||
{(deviceType == 'clerk' && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) ||
|
{(deviceType == 'clerk' && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) &&
|
||||||
(deviceType == 'guestDevice' && (transaction.confirmed == 0))&&
|
|
||||||
<button
|
<button
|
||||||
className={styles.PayButton}
|
className={styles.PayButton}
|
||||||
onClick={() => handleConfirm(transaction.transactionId)}
|
onClick={() => handleConfirm(transaction.transactionId)}
|
||||||
disabled={isPaymentLoading}
|
disabled={isPaymentLoading}
|
||||||
>
|
>
|
||||||
{deviceType === "clerk" ? (
|
{
|
||||||
isPaymentLoading ? (
|
isPaymentLoading ? (
|
||||||
<ColorRing height="50" width="50" color="white" />
|
<ColorRing height="50" width="50" color="white" />
|
||||||
) : transaction.confirmed === 1 ? (
|
) : transaction.confirmed === 1 ? (
|
||||||
@@ -286,17 +311,12 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
) : (
|
) : (
|
||||||
"Confirm availability"
|
"Confirm availability"
|
||||||
)
|
)
|
||||||
) :
|
}
|
||||||
isPaymentLoading ? (
|
|
||||||
<ColorRing height="50" width="50" color="white" />
|
|
||||||
) : (
|
|
||||||
"Transaction success"
|
|
||||||
)}
|
|
||||||
|
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|
||||||
{transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
|
{deviceType == 'guestDevice' && transaction.confirmed < 2 && transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
|
||||||
<ButtonWithReplica
|
<ButtonWithReplica
|
||||||
paymentUrl={paymentUrl}
|
paymentUrl={paymentUrl}
|
||||||
price={
|
price={
|
||||||
@@ -324,7 +344,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{transaction.payment_type == 'cash' ?
|
{deviceType == 'guestDevice' && transaction.confirmed >=0 && transaction.confirmed < 2 && transaction.payment_type == 'cash' ?
|
||||||
<button
|
<button
|
||||||
className={styles.PayButton}
|
className={styles.PayButton}
|
||||||
onClick={() => handleDecline(transaction.transactionId)}
|
onClick={() => handleDecline(transaction.transactionId)}
|
||||||
@@ -345,7 +365,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
:
|
:
|
||||||
((transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' || isPaymentOpen) &&
|
((transaction.confirmed >= 0 && transaction.confirmed < 2 && transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' || isPaymentOpen) &&
|
||||||
<h5
|
<h5
|
||||||
className={`${styles.DeclineButton}`}
|
className={`${styles.DeclineButton}`}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
@@ -358,14 +378,6 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
|
|||||||
</h5>
|
</h5>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{transaction.confirmed == 0 && (
|
|
||||||
<h5
|
|
||||||
className={styles.DeclineButton}
|
|
||||||
onClick={() => handleDecline(transaction.transactionId)}
|
|
||||||
>
|
|
||||||
decline
|
|
||||||
</h5>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user