Merge pull request 'gelo_branch' (#49) from gelo_branch into main

Reviewed-on: #49
This commit is contained in:
MarkHipe 2024-03-26 16:45:01 +08:00
commit 424dfd8ca4
1 changed files with 292 additions and 107 deletions

View File

@ -10,18 +10,22 @@ if ($_SESSION["userId"] <> "") {
$vendorData = $vendorLoginIdjson['results'][0];
$vendorId = $vendorData['_id'];
$_SESSION["LoggedInVendorId"] = $vendorId;
}
}
$authtoken = $_SESSION['token'];
} else {
$_SESSION["isLoggedIn"] = false;
header("location: login.php");
}
$products = productList();
$shopOrders = getOrderbyVendorId($vendorId);
$vendorOrderss = json_decode($shopOrders);
if (is_array($vendorOrderss)) {
$vendorOrders = json_decode($shopOrders);
} elseif (is_object($vendorOrderss) && property_exists($vendorOrderss, 'message')) {
$response = getOrderbyVendorId($vendorId);
$vendorDecode = json_decode($response);
// var_dump($vendorDecode);
if (is_array($vendorDecode)) {
$vendorOrders = json_decode($response);
} elseif (is_object($vendorDecode) && property_exists($vendorDecode, 'message')) {
$vendorOrders = [];
} else {
echo "Unknown type or no 'message' property found.";
@ -39,7 +43,7 @@ if (is_array($vendorOrderss)) {
<meta name="keywords" content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
<meta name="description" content="Best ecommerce html template for single and multi vendor store.">
<meta name="author" content="ashishmaraviya">
<!-- site Favicon -->
<link rel="icon" href="assets/images/favicon/favicon.png" sizes="32x32" />
<link rel="apple-touch-icon" href="assets/images/favicon/favicon.png" />
@ -71,7 +75,23 @@ if (is_array($vendorOrderss)) {
/* Set your desired text color for the active tab */
}
#pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
}
#pagination a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function updateCartItemCount() {
$.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
@ -153,7 +173,7 @@ if (is_array($vendorOrderss)) {
<h5 class="name"><?php echo $vendorData['user_login'] ?></h5>
</div>
<!-- <div class="ec-vendor-block-items">
<!-- <ul>
<ul>
<li><a href="vendor-dashboard.php">Dashboard</a></li>
<li><a href="vendor-uploads.php">Upload Product</a></li>
<li><a href="vendor-settings.php">Settings (Edit)</a></li>
@ -191,25 +211,92 @@ if (is_array($vendorOrderss)) {
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
<tbody id="paymentsTableBody">
<?php
$totalPayments = 0;
foreach ($vendorOrders as $order) {
$orderArray = json_encode($order, true);
$orderItems = json_decode($orderArray, true);
if(strtolower($orderItems['payment']['status']) == 'paid'){
$rawDate = $orderItems['payment']['details'][0]['attributes']['data']['attributes']['payments'][0]['createdAt'];
if ($rawDate) {
$createdAt = new DateTime($rawDate);
$formattedDate = $createdAt->format('m/d/Y');
}
$totalPayments++;
?>
<tr>
<td><span><?php echo $orderItems['status']; ?></span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><button type="button" class="btn btn-primary" id="vendorPaymentsModalBtn" data-bs-toggle="modal" data-bs-target="#vendorPaymentsModal">View</button></td>
<tr>
<td><?php echo $orderItems['payment_method']; ?></td>
<td> <?php echo $orderItems['total_amount']; ?></td>
<td><?php echo $orderItems['payment']['status']; ?></td>
<td><?php echo $orderItems['items'][0]['product']['name']; ?></td>
<td><?php echo $formattedDate?></td>
<td><button type="button" class="btn btn-primary showSinglePaymentBtn" data-order-id="<?php echo $orderItems['_id']; ?>" data-bs-toggle="modal" data-bs-target="#vendorPaymentsModal">View</button></td>
</tr> </tr>
</tr>
<?php
// }
}
}
// }
?>
</tbody>
</table>
</div>
<div id="pagination"></div>
<script>
const itemsPerPage = 5;
const totalItems = <?php echo $totalPayments; ?>;
const totalPages = Math.ceil(totalItems / itemsPerPage);
function showPage(page) {
const startIndex = (page - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
const tableRows = document.querySelectorAll('#paymentsTableBody tr');
// for pagination button
const pager = document.querySelectorAll('.page-btn')
pager.forEach((row, index) => {
if (index!==page-1) {
row.style.backgroundColor="white";
row.style.color="black";
} else {
row.style.backgroundColor="#007bff";
row.style.color="white";
}
});
tableRows.forEach((row, index) => {
if (index >= startIndex && index < endIndex) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
});
}
function createPagination() {
const paginationContainer = document.getElementById('pagination');
for (let i = 1; i <= totalPages; i++) {
// created a tag
const pageButton = document.createElement('a');
// created class for a tag
pageButton.className = "page-btn page-" + i
pageButton.textContent = i;
pageButton.addEventListener('click', () => showPage(i));
paginationContainer.appendChild(pageButton);
}
}
createPagination();
showPage(1); // Show the first page by default
</script>
<script>
var sessionToken = '<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>';
@ -356,88 +443,198 @@ if (is_array($vendorOrderss)) {
<!--Gelo added payment details modal-->
<div class="modal fade" id="vendorPaymentsModal" tabindex="-1" aria-labelledby="vendorPaymentsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" style="min-width: 90%;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fs-5" id="vendorPaymentsModalLabel">Payment ID: 123456</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fs-5" id="vendorPaymentsModalLabel">Payment ID: <span id="paymentIdSpan"></span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid" id="orderDetailsContainer">
<!-- Dynamic content will be inserted here -->
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-4 ">
<div class="d-flex justify-content-between p-2">
<h6><strong>Payment Details</strong></h6>
<button disabled class=" border border-success border-2 text-sm btn-outline-success">PAID</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- GELO ADDED AJAX FUNCTION FOR MODAL BOX QUERY -->
<script>
$(document).ready(function() {
$('.showSinglePaymentBtn').click(function() {
var orderId = $(this).data('order-id');
<div class="d-flex justify-content-between p-2">
<div class="fw-bold">Gross Amount</div>
<div> 150.00</div>
</div>
<div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
<div class="fw-bold"> Fees <span data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip"
data-bs-title="Insert fee information here"><i class="fi fi-rr-info"></i></span></div>
<div>- 4.35</div>
</div>
<div class="d-flex justify-content-between p-2">
<div class="fw-bold"> Net Amount</div>
<div>- 145.65</div>
</div>
<div class="d-flex p-2">
<div class="fw-bold"> Payment Description </div>
</div>
<div class="d-flex pl-2">
Cesar Ryan - 175
</div>
var token = "<?php echo $authtoken;?>";
<?php
?>
$.ajax({
url: 'https://api.obanana.shop/api/v1/orders/' + orderId,
type: 'GET',
headers: {
'Authorization': 'Bearer ' + token
},
success: function(response) {
// Handle successful response
var paymentId = response.payment.reference_number;
$('#paymentIdSpan').text(paymentId);
var gross_price = response.payment.details[0]?.attributes.data.attributes.amount;
var payment_status = response.payment.status;
var fee = response.payment.details[0]?.attributes.data.attributes.fee;
var net_amount = response.payment.details[0]?.attributes.data.attributes.payments[0].attributes.net_amount;
var desc = response.items[0].product.name;
var method = response.payment_method;
var name = response.billing_address.billing_first_name + " " + response.billing_address.billing_last_name;
var email = response.payment.details[0]?.attributes.data.attributes.payments[0].attributes.billing?.email;
var phone = response.billing_address.billing_phone;
var rawDate = response.payment.details[0]?.attributes.data.attributes.payments[0]?.createdAt;
var payoutStatus = response.payout_status[0]?.status;
if (rawDate){
var createdAtDate = new Date(rawDate);
var month = String(createdAtDate.getMonth() + 1).padStart(2, '0');
var day = String(createdAtDate.getDate()).padStart(2, '0');
var year = createdAtDate.getFullYear();
var date = month + '/' + day + '/' + year;
}
if(payoutStatus === 'Deposited'){
var orderDetailsHtml = `
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-4 ">
<div class="d-flex justify-content-between p-2">
<h6><strong>Payment Details</strong></h6>
<button disabled class=" border border-success border-2 text-sm btn-outline-success">PAID</button>
</div>
<div class="d-flex justify-content-between p-2">
<div class="fw-bold">Gross Amount</div>
<div> ${net_amount}</div>
</div>
<div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
<div class="fw-bold"> Fees <span data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip"
data-bs-title="Insert fee information here"><i class="fi fi-rr-info"></i></span></div>
<div>- ${fee}</div>
</div>
<div class="d-flex justify-content-between p-2">
<div class="fw-bold"> Net Amount</div>
<div> ${gross_price} </div>
</div>
<div class="d-flex p-2">
<div class="fw-bold"> Payment Description </div>
</div>
<div class="d-flex pl-2">
${desc}
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-between">
<div class="fw-bold">Payment Method</div>
<div class="text-end">GCash<br> Paid on 11/15/2001</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-between">
<div class="fw-bold">Payment Method</div>
<div class="text-end">${method}<br> Paid on ${date}</div>
</div>
<p class="py-2 text-success mt-3 border border-success rounded text-center" style="font-size: 0.975em"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
This payment is now on your bank account.
</p>
</div>
<div class="col-4">
<div class="fw-bold">Billing Details</div>
<div >${name}</div>
<div> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-at-fill" viewBox="0 0 16 16">
<path d="M2 2A2 2 0 0 0 .05 3.555L8 8.414l7.95-4.859A2 2 0 0 0 14 2zm-2 9.8V4.698l5.803 3.546zm6.761-2.97-6.57 4.026A2 2 0 0 0 2 14h6.256A4.5 4.5 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586zM16 9.671V4.697l-5.803 3.546.338.208A4.5 4.5 0 0 1 12.5 8c1.414 0 2.675.652 3.5 1.671"/>
<path d="M15.834 12.244c0 1.168-.577 2.025-1.587 2.025-.503 0-1.002-.228-1.12-.648h-.043c-.118.416-.543.643-1.015.643-.77 0-1.259-.542-1.259-1.434v-.529c0-.844.481-1.4 1.26-1.4.585 0 .87.333.953.63h.03v-.568h.905v2.19c0 .272.18.42.411.42.315 0 .639-.415.639-1.39v-.118c0-1.277-.95-2.326-2.484-2.326h-.04c-1.582 0-2.64 1.067-2.64 2.724v.157c0 1.867 1.237 2.654 2.57 2.654h.045c.507 0 .935-.07 1.18-.18v.731c-.219.1-.643.175-1.237.175h-.044C10.438 16 9 14.82 9 12.646v-.214C9 10.36 10.421 9 12.485 9h.035c2.12 0 3.314 1.43 3.314 3.034zm-4.04.21v.227c0 .586.227.8.581.8.31 0 .564-.17.564-.743v-.367c0-.516-.275-.708-.572-.708-.346 0-.573.245-.573.791"/>
</svg>
${email}
</div>
<div> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
</svg>
${phone}
</div>
</div>
</div>
</div>
</div>
<p class="py-2" style="font-size: 0.975em"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
This payment is now on your bank account.
</p>
</div>
<div class="col-4">
<div class="fw-bold">Billing Details</div>
<div >Cesar Ryan</div>
<div> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-at-fill" viewBox="0 0 16 16">
<path d="M2 2A2 2 0 0 0 .05 3.555L8 8.414l7.95-4.859A2 2 0 0 0 14 2zm-2 9.8V4.698l5.803 3.546zm6.761-2.97-6.57 4.026A2 2 0 0 0 2 14h6.256A4.5 4.5 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586zM16 9.671V4.697l-5.803 3.546.338.208A4.5 4.5 0 0 1 12.5 8c1.414 0 2.675.652 3.5 1.671"/>
<path d="M15.834 12.244c0 1.168-.577 2.025-1.587 2.025-.503 0-1.002-.228-1.12-.648h-.043c-.118.416-.543.643-1.015.643-.77 0-1.259-.542-1.259-1.434v-.529c0-.844.481-1.4 1.26-1.4.585 0 .87.333.953.63h.03v-.568h.905v2.19c0 .272.18.42.411.42.315 0 .639-.415.639-1.39v-.118c0-1.277-.95-2.326-2.484-2.326h-.04c-1.582 0-2.64 1.067-2.64 2.724v.157c0 1.867 1.237 2.654 2.57 2.654h.045c.507 0 .935-.07 1.18-.18v.731c-.219.1-.643.175-1.237.175h-.044C10.438 16 9 14.82 9 12.646v-.214C9 10.36 10.421 9 12.485 9h.035c2.12 0 3.314 1.43 3.314 3.034zm-4.04.21v.227c0 .586.227.8.581.8.31 0 .564-.17.564-.743v-.367c0-.516-.275-.708-.572-.708-.346 0-.573.245-.573.791"/>
</svg>
cr.ecom@gmail.com
</div>
<div> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
</svg>
09876543210
</div>
`;
}else{
var orderDetailsHtml = `
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-4 ">
<div class="d-flex justify-content-between p-2">
<h6><strong>Payment Details</strong></h6>
<button disabled class=" border border-success border-2 text-sm btn-outline-success">PAID</button>
</div>
<div class="d-flex justify-content-between p-2">
<div class="fw-bold">Gross Amount</div>
<div> ${net_amount}</div>
</div>
<div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
<div class="fw-bold"> Fees </div>
<div>- ${fee}</div>
</div>
<div class="d-flex justify-content-between p-2">
<div class="fw-bold"> Net Amount</div>
<div> ${gross_price} </div>
</div>
<div class="d-flex p-2">
<div class="fw-bold"> Payment Description </div>
</div>
<div class="d-flex pl-2">
${desc}
</div>
</div>
<div class="col-4">
<div class="d-flex justify-content-between">
<div class="fw-bold">Payment Method</div>
<div class="text-end">${method}<br> Paid on ${date}</div>
</div>
</div>
<div class="col-4">
<div class="fw-bold">Billing Details</div>
<div >${name}</div>
<div> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-at-fill" viewBox="0 0 16 16">
<path d="M2 2A2 2 0 0 0 .05 3.555L8 8.414l7.95-4.859A2 2 0 0 0 14 2zm-2 9.8V4.698l5.803 3.546zm6.761-2.97-6.57 4.026A2 2 0 0 0 2 14h6.256A4.5 4.5 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586zM16 9.671V4.697l-5.803 3.546.338.208A4.5 4.5 0 0 1 12.5 8c1.414 0 2.675.652 3.5 1.671"/>
<path d="M15.834 12.244c0 1.168-.577 2.025-1.587 2.025-.503 0-1.002-.228-1.12-.648h-.043c-.118.416-.543.643-1.015.643-.77 0-1.259-.542-1.259-1.434v-.529c0-.844.481-1.4 1.26-1.4.585 0 .87.333.953.63h.03v-.568h.905v2.19c0 .272.18.42.411.42.315 0 .639-.415.639-1.39v-.118c0-1.277-.95-2.326-2.484-2.326h-.04c-1.582 0-2.64 1.067-2.64 2.724v.157c0 1.867 1.237 2.654 2.57 2.654h.045c.507 0 .935-.07 1.18-.18v.731c-.219.1-.643.175-1.237.175h-.044C10.438 16 9 14.82 9 12.646v-.214C9 10.36 10.421 9 12.485 9h.035c2.12 0 3.314 1.43 3.314 3.034zm-4.04.21v.227c0 .586.227.8.581.8.31 0 .564-.17.564-.743v-.367c0-.516-.275-.708-.572-.708-.346 0-.573.245-.573.791"/>
</svg>
${email}
</div>
<div> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/>
</svg>
${phone}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
`;
}
$('#orderDetailsContainer').html(orderDetailsHtml);
},
})
});
});
</script>
<!-- Footer Start -->
<?php include "footer.php" ?>
@ -466,20 +663,6 @@ if (is_array($vendorOrderss)) {
</div>
</div>
</div>
<!-- Footer navigation panel for responsive display end -->
<!-- raymart remove popup feb 20 2024 -->
<!-- Recent Purchase Popup -->
<!-- <div class="recent-purchase">
<img src="assets/images/product-image/1.jpg" alt="payment image">
<div class="detail">
<p>Someone in new just bought</p>
<h6>stylish baby shoes</h6>
<p>10 Minutes ago</p>
</div>
<a href="javascript:void(0)" class="icon-btn recent-close">×</a>
</div> -->
<!-- Recent Purchase Popup end -->
<!-- Cart Floating Button -->
<div class="ec-cart-float">
@ -680,6 +863,8 @@ if (is_array($vendorOrderss)) {
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
<script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
<!--Plugins JS-->
<script src="assets/js/plugins/swiper-bundle.min.js"></script>