nataly 1 year ago
parent ab9264289d
commit 15fa06346d

Binary file not shown.

@ -42,33 +42,32 @@
class="w-full flex flex-col items-center px-5 h-[400px] xxlg1:h-[500px] overflow-hidden overflow-y-auto mt-5">
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="" class="w-[30px]">
<img src="{% static 'images/icons/projectswhite.svg' %}" class="w-[28px]">
<p class="text-white">My Projects</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="" class="w-[30px]">
<img src="{% static 'images/icons/ticket.svg' %}" src="" class="w-[30px]">
<p class="text-white">Tickets</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="" class="w-[30px]">
<img src="{% static 'images/icons/invoice.svg' %}" src="" class="w-[30px]">
<p class="text-white">Invoices</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="" class="w-[30px]">
<img src="{% static 'images/icons/products.svg' %}" class="w-[30px]">
<p class="text-white">Products</p>
</div>
<div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
<img src="" class="w-[30px]">
<img src="{% static 'images/icons/about.svg' %}" class="w-[30px]">
<p class="text-white">Knowledgebase</p>
</div>
<div class="w-full flex justify-start items-center gap-3 py-3">
<img src="" class="w-[30px]">
<img src="{% static 'images/icons/support.svg' %}" class="w-[30px]">
<p class="text-white">Contact Us</p>
</div>
</div>
@ -245,18 +244,18 @@
</div>
</div>
{% block modules_section %}
<!-- MODULES SECTION -->
<div class="w-full h-fit grid grid-cols-1 xxlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
<div class="bg-white shadow-md rounded-md p-5">
<div class="w-full h-full flex flex-col justify-between items-center">
<div class="w-full flex justify-between items-center">
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tasks</p>
<p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Invoices</p>
<img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
</div>
<div
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
<p class="text-secondosiblue text-xl font-semibold">{{total_tasks}}</p>
<p class="text-secondosiblue text-xl font-semibold">2</p>
</div>
</div>
</div>
@ -287,15 +286,18 @@
</div>
</div>
</div>
{% endblock modules_section %}
{% block content %}
replace me
{% endblock content %}
<!-- Footer -->
<div
class="w-full xlg1:w-[300px] h-fit bg-secondosiblue flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0 mt-[100px]">
<div class="w-full flex flex-col justify-center gap-1 items-center">
<div class="flex justify-center items-center gap-1">
<!-- MOBILE FOOTER -->
<div class="bg-osiblue h-fit py-2 mobileFooter">
<div class="w-full flex flex-col justify-center items-center gap-1">
<div class="flex justify-center items-center gap-2">
<img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
<p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
</div>

@ -1,147 +0,0 @@
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="checkout-button">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="hco-embedded">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
<script src="https://creditlibanais-netcommerce.gateway.mastercard.com/static/checkout/checkout.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Function to initiate checkout
function initiateCheckout() {
// Fetch the CSRF token from the cookie
const csrftoken = getCookie('csrftoken');
console.log('CSRF Token:', csrftoken);
fetch('https://newosina.osinode.com/initiate_checkout/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrftoken // Include the CSRF token in the request headers
},
body: JSON.stringify({})
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Handle success response
console.log("Session ID: " + data.session_id);
console.log("Success Indicator: " + data.success_indicator);
// You can perform further actions here
})
.catch(error => {
// Handle error response
console.error('There was a problem with the fetch operation:', error);
// You can display an error message to the user or perform other actions
});
}
// Function to get CSRF token from cookie
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
initiateCheckout();
});
</script>
<!-- <script>
// Configure Checkout first
Checkout.configure({
session: {
id: 1,
}
})
// after the modal is shown, then call Checkout.showEmbeddedPage('#hco-embedded')
$('#exampleModal').on('shown.bs.modal', function (e) {
Checkout.showEmbeddedPage('#hco-embedded',
() => { $('#exampleModal').modal() } // tell Checkout how to launch the modal
)
});
$('#exampleModal').on('hide.bs.modal', function (e) {
sessionStorage.clear(); // tell Checkout to clear sessionStorage when I close the modal
});
</script> -->
</body>
</html>

@ -0,0 +1,429 @@
{% extends "customer_dashboard/customer_main.html" %}
{%load static%}
{% block modules_section %}
<!-- This block is intentionally left empty to exclude the modules section -->
{% endblock modules_section %}
{% block content %}
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#paymentContent {
position: relative !important;
height: 100% !important;
overflow-y: auto !important;
max-height: 100% !important;
overflow: hidden !important;
}
#paymentContent iframe {
position: absolute;
inset: 0;
height: 100% !important;
max-height: 100% !important;
min-height: 100% !important;
}
</style>
<div class="w-full px-5 s:px-9 flex flex-col gap-5 mt-5">
<div class="w-full h-fit bg-white rounded-md shadow-md px-5 py-9 flex flex-col justify-center items-center">
<img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[250px]">
<!-- PRICING ON DESKTOP -->
<div class="w-full hidden l:grid grid-cols-3 mt-24">
<div class="w-full h-full border border-gray-200 border-r-transparent p-9 flex flex-col gap-5 items-center">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Basic</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$0</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
<div>
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300 displayPaymentModal">Get
Started</button>
</div>
<div class="w-full flex flex-col gap-3 mt-5">
<h1 class="text-gray-500 text-xl font-light">Features:</h1>
<div class="w-full flex flex-col">
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-semibold text-secondosiblue">Online Ordering (75 Orders)</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Restaurant Website</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Branded Mobile App</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">QR Code Menu</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Loyalty Program</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">50+ Free Website Templates</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Multi Location</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Online Payments</p>
</div>
</div>
</div>
</div>
<div class="relative">
<div
class="w-full bg-osiblue text-white text-center px-3 py-3 text-xl absolute -top-[54px] rounded-t-md border border-osiblue font-poppinsBold">
<p>Best Value</p>
</div>
<div class="border h-full border-osiblue w-full p-9 flex flex-col gap-5 items-center">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Standard</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$89</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
<div>
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300 displayPaymentModal">Get
Started</button>
</div>
<div class="w-full flex flex-col gap-3 mt-5">
<h1 class="text-gray-500 text-xl font-light">Features:</h1>
<div class="w-full flex flex-col">
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-semibold text-secondosiblue">Online Ordering (75 Orders)</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Tableside Ordering</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Table Reservations</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Premium Website Templates</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Email & SMS marketing</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Coupons & Promo Codes</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Integrations</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Ordering for the future</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Premium</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$169</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
<div>
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300 displayPaymentModal">Get
Started</button>
</div>
<div class="w-full flex flex-col gap-3 mt-5">
<h1 class="text-gray-500 text-xl font-light">Features:</h1>
<div class="w-full flex flex-col">
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-semibold text-secondosiblue">Online Ordering (Unlimited)</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Marketing Automation</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Gift Cards</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Inventory</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Item Recommendations</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Multiple Menus</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Remove Powered by UpMenu</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">API</p>
</div>
</div>
</div>
</div>
</div>
<!-- PRICING ON MOBILE -->
<div class="w-full flex l:hidden flex-col gap-10 mt-10">
<div>
<div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Basic</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$0</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
<div>
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300"
data-toggle="modal" data-target="#exampleModal">Get
Started</button>
</div>
</div>
<div
class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
<p>View Features</p>
<i class="fas fa-angle-down"></i>
</div>
<div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-semibold text-secondosiblue">Online Ordering (75 Orders)</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Restaurant Website</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Branded Mobile App</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">QR Code Menu</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Loyalty Program</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">50+ Free Website Templates</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Multi Location</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Online Payments</p>
</div>
</div>
</div>
<div>
<div class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md">
<p>Best Value</p>
</div>
<div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Standard</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$89</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
<div>
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300"
data-toggle="modal" data-target="#exampleModal">Get
Started</button>
</div>
</div>
<div
class="w-full bg-osiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-osiblue hover:bg-white hover:text-osiblue duration-300 openFeaturesDropdown">
<p>View Features</p>
<i class="fas fa-angle-down"></i>
</div>
<div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-semibold text-secondosiblue">Online Ordering (75 Orders)</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Tableside Ordering</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Table Reservations</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Premium Website Templates</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Email & SMS marketing</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Coupons & Promo Codes</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Integrations</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Ordering for the future</p>
</div>
</div>
</div>
<div>
<div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
<p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Premium</p>
<div class="w-full flex flex-col justify-center items-center">
<p class="text-osiblue font-poppinsLight text-2xl font-semibold">$169</p>
<p class="text-gray-500">monthly/restaurant</p>
</div>
<div>
<button
class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300"
data-toggle="modal" data-target="#exampleModal">Get
Started</button>
</div>
</div>
<div
class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
<p>View Features</p>
<i class="fas fa-angle-down"></i>
</div>
<div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-semibold text-secondosiblue">Online Ordering (Unlimited)</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Marketing Automation</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Gift Cards</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Inventory</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Item Recommendations</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Multiple Menus</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">Remove Powered by UpMenu</p>
</div>
<div class="flex justify-start items-center gap-2 py-1">
<img src="{% static 'images/icons/greencheckmark.png' %}" class="w-[20px]">
<p class="font-light text-secondosiblue">API</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-full fixed bg-black bg-opacity-50 flex justify-center items-center p-5 inset-0 hidden"
id="paymentModal">
<div class="w-[550px] h-[90%] bg-white shadow-md rounded-md p-5 relative">
<div class="absolute w-[30px] h-[30px] bg-gray-300 rounded-full shadow-md top-5 right-5 flex justify-center items-center p-1 text-secondosiblue cursor-pointer hover:scale-110 transition-transform duration-500"
id="closePaymentModalButton" type="button">
<i class="fa fa-close"></i>
</div>
<div>
<h1 class="text-secondosiblue text-center text-2xl font-poppinsBold mt-8">Process Payment</h1>
<div id="paymentContent" class="h-[400px] mt-5 overflow-y-scroll">
</div>
</div>
</div>
</div>
<!---------------------- JS SCRIPTS -------------------->
<script type="text/javascript" src='{% static "js/customer_dashboard/pricing-dropdown.js" %}'></script>
<script type="text/javascript" src='{% static "js/customer_dashboard/payment.js" %}'></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://creditlibanais-netcommerce.gateway.mastercard.com/static/checkout/checkout.min.js"></script>
{% endblock %}

@ -590,7 +590,7 @@
</div>
</div>
<!-- MODULES SECTION -->
<div class="w-full h-fit grid grid-cols-1 xxlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
<div class="h-[150px] bg-white shadow-md rounded-md block xxlg1:hidden">
@ -650,7 +650,7 @@
</div>
</div>
</div>
<!-- NOTES SECTION -->
<div class="w-full px-5 s:px-9 pb-5">

@ -74,8 +74,8 @@ urlpatterns = [
#CUSTOMER DASHBOARD
path('customerdashboard/', views.customer_index, name='customerdashboard'),
path('customerinvoices/', views.customer_invoices, name='customerinvoices'),
path('payment/', views.payment, name='payment'),
path('customerproducts/', views.customer_products, name='customerproducts'),
path('pricing/', views.pricing, name='pricing'),
path('initiate_checkout/', views.initiate_checkout, name='initiatecheckout'),
]

@ -542,7 +542,34 @@ def recent_activities_page(request):
return render(request, 'recent-activities-page.html', context)
def add_reaction(request, status_id, emoji):
status = get_object_or_404(Status, pk=status_id)
user = request.user
existing_reaction = Reaction.objects.filter(status=status, user=user).first()
if existing_reaction:
# If the user has already reacted, update the reaction
existing_reaction.emoji = emoji
existing_reaction.save()
return JsonResponse({'message': 'Reaction updated successfully.'})
else:
# If the user hasn't reacted yet, create a new reaction
new_reaction = Reaction.objects.create(status=status, emoji=emoji, user=user)
return JsonResponse({'message': 'Reaction added successfully.'})
# CUSTOMER DASHBOARD
# LISTING PAGES
@login_required
def customer_index(request, *args, **kwargs):
@ -564,13 +591,36 @@ def customer_invoices(request, *args, **kwargs):
@login_required
def payment(request, *args, **kwargs):
def customer_products(request, *args, **kwargs):
context = {
}
return render(request, 'customer_dashboard/listing/customer-products.html', context)
@login_required
def pricing(request, *args, **kwargs):
context = {
}
return render(request, 'customer_dashboard/pricing.html', context)
@login_required
def customer_products(request, *args, **kwargs):
context = {
}
return render(request, 'customer_dashboard/payment.html', context)
return render(request, 'customer_dashboard/listing/payment.html', context)
from django.http import JsonResponse
@ -581,7 +631,7 @@ def initiate_checkout(request):
api_username = "merchant.TEST06127800"
api_password = "37846250a67c70e7fe9f82cf6ca81f93"
merchant_id = "TEST06127800"
merchant_name = "admin"
merchant_name = "Ositcom Sal"
# Data for Initiate Checkout operation
data = {
@ -589,44 +639,30 @@ def initiate_checkout(request):
"apiUsername": api_username,
"apiPassword": api_password,
"merchant": merchant_id,
"interaction.operation": "AUTHORIZE",
"interaction.operation": "PURCHASE",
"interaction.merchant.name": merchant_name,
"order.id": "123",
"order.amount": "100.00",
"order.currency": "USD",
"order.description": "description_of_order"
}
# Make request to Mastercard API
response = requests.post("https://creditlibanais-netcommerce.gateway.mastercard.com/api/nvp/version/72", data=data)
# Check if request was successful
if response.status_code == 200:
# Parse response JSON
response_data = response.json()
session_id = response_data.get("session.id")
success_indicator = response_data.get("successIndicator")
try:
response = requests.post("https://creditlibanais-netcommerce.gateway.mastercard.com/api/nvp/version/72", data=data)
# Save success indicator in your shop system for further processing
# For example, you can save it in your database associated with the order
print("Response Content:", response.content.decode()) # Print response content
return JsonResponse({"session_id": session_id, "success_indicator": success_indicator})
else:
# Handle error
return JsonResponse({"error": "Failed to initiate checkout"}, status=500)
if response.status_code == 200:
response_data = response.text
parsed_data = dict(item.split("=") for item in response_data.split("&"))
session_id = parsed_data.get("session.id")
success_indicator = parsed_data.get("successIndicator")
return JsonResponse({"session_id": session_id, "success_indicator": success_indicator})
else:
print("Response Status Code:", response.status_code) # Print status code
return JsonResponse({"error": "Failed to initiate checkout"}, status=500)
def add_reaction(request, status_id, emoji):
status = get_object_or_404(Status, pk=status_id)
user = request.user
existing_reaction = Reaction.objects.filter(status=status, user=user).first()
if existing_reaction:
# If the user has already reacted, update the reaction
existing_reaction.emoji = emoji
existing_reaction.save()
return JsonResponse({'message': 'Reaction updated successfully.'})
else:
# If the user hasn't reacted yet, create a new reaction
new_reaction = Reaction.objects.create(status=status, emoji=emoji, user=user)
return JsonResponse({'message': 'Reaction added successfully.'})
except Exception as e:
print("Exception:", e) # Print exception traceback
return JsonResponse({"error": "Internal Server Error"}, status=500)

@ -686,6 +686,18 @@ video {
right: -10rem;
}
.-top-10 {
top: -2.5rem;
}
.-top-12 {
top: -3rem;
}
.-top-\[54px\] {
top: -54px;
}
.bottom-0 {
bottom: 0px;
}
@ -887,6 +899,10 @@ video {
margin-top: 5rem;
}
.mt-24 {
margin-top: 6rem;
}
.mt-28 {
margin-top: 7rem;
}
@ -911,6 +927,10 @@ video {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-\[-50px\] {
margin-top: -50px;
}
@ -1075,6 +1095,10 @@ video {
height: 8px;
}
.h-\[90\%\] {
height: 90%;
}
.h-auto {
height: auto;
}
@ -1124,6 +1148,10 @@ video {
width: 180px;
}
.w-\[20px\] {
width: 20px;
}
.w-\[22px\] {
width: 22px;
}
@ -1188,6 +1216,10 @@ video {
width: 50px;
}
.w-\[550px\] {
width: 550px;
}
.w-\[55px\] {
width: 55px;
}
@ -1484,6 +1516,10 @@ video {
overflow-x: scroll;
}
.overflow-y-scroll {
overflow-y: scroll;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
@ -1729,6 +1765,10 @@ video {
border-color: rgb(202 138 4 / var(--tw-border-opacity));
}
.border-r-transparent {
border-right-color: transparent;
}
.border-opacity-10 {
--tw-border-opacity: 0.1;
}
@ -2828,6 +2868,12 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-110:hover {
--tw-scale-x: 1.1;
--tw-scale-y: 1.1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@ -3111,6 +3157,10 @@ video {
display: flex;
}
.l\:grid {
display: grid;
}
.l\:hidden {
display: none;
}

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 42 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 54 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 53 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

@ -0,0 +1,91 @@
document.addEventListener("DOMContentLoaded", function () {
// Function to initiate checkout
function initiateCheckout() {
// Fetch the CSRF token from the cookie
const csrftoken = getCookie('csrftoken');
console.log('CSRF Token:', csrftoken);
fetch('/initiate_checkout/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrftoken // Include the CSRF token in the request headers
},
body: JSON.stringify({})
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Handle success response
console.log("Session ID: " + data.session_id);
// Configure Checkout with the fetched session ID
configureCheckout(data.session_id);
})
.catch(error => {
// Handle error response
console.error('There was a problem with the fetch operation:', error);
// You can display an error message to the user or perform other actions
});
}
// Function to configure Checkout with session ID
function configureCheckout(sessionId) {
// Configure Checkout session with the fetched session ID
Checkout.configure({
session: {
id: sessionId,
}
});
}
// Function to get CSRF token from cookie
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
// Configure Checkout and modal
Checkout.configure({
session: {
id: 1, // Default session ID, will be replaced with actual session ID after initiation
}
});
const displayPaymentModalButton = document.querySelectorAll('.displayPaymentModal');
const closeButton = document.querySelector('#closePaymentModalButton');
const paymentModal = document.getElementById('paymentModal');
// Add click event listener to each button
displayPaymentModalButton.forEach(function (button) {
button.addEventListener('click', function () {
paymentModal.classList.remove('hidden');
initiateCheckout();
Checkout.showEmbeddedPage('#paymentContent', () => { $('#paymentModal').modal(); });
});
});
closeButton.addEventListener('click', function () {
paymentModal.classList.add('hidden');
sessionStorage.clear();
});
});

@ -0,0 +1,12 @@
// TO OPEN FEATURES DROPDOWN ON MOBILE
document.addEventListener('DOMContentLoaded', function () {
const dropdowns = document.querySelectorAll('.openFeaturesDropdown');
dropdowns.forEach(dropdown => {
dropdown.addEventListener('click', function () {
const container = this.nextElementSibling;
container.classList.toggle('hidden');
});
});
});
Loading…
Cancel
Save