New

osinaweb/osinacore/templates/customer_dashboard/customer_main.html

@@ -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 -->
+            <!-- MOBILE FOOTER -->
-            <div
+            <div class="bg-osiblue h-fit py-2 mobileFooter">
-                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 items-center gap-1">
-                <div class="w-full flex flex-col justify-center gap-1 items-center">
+                    <div class="flex justify-center items-center gap-2">
-                    <div class="flex justify-center items-center gap-1">
                         <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>

osinaweb/osinacore/templates/customer_dashboard/payment.html

@@ -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>

osinaweb/osinacore/templates/customer_dashboard/pricing.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 %}

osinaweb/osinacore/templates/main.html

@@ -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">

osinaweb/osinacore/urls.py

@@ -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'),
 ]
 

osinaweb/osinacore/views.py

@@ -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
+    try:
-    response = requests.post("https://creditlibanais-netcommerce.gateway.mastercard.com/api/nvp/version/72", data=data)
+        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")
         
-        # Save success indicator in your shop system for further processing
+        print("Response Content:", response.content.decode())  # Print response content
-        # For example, you can save it in your database associated with the order
         
-        return JsonResponse({"session_id": session_id, "success_indicator": success_indicator})
+        if response.status_code == 200:
-    else:
+            response_data = response.text
-        # Handle error
+            parsed_data = dict(item.split("=") for item in response_data.split("&"))
-        return JsonResponse({"error": "Failed to initiate checkout"}, status=500)
+            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):
+    except Exception as e:
-    status = get_object_or_404(Status, pk=status_id)
+        print("Exception:", e)  # Print exception traceback
-    user = request.user
+        return JsonResponse({"error": "Internal Server Error"}, status=500)
-    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.'})

osinaweb/static/dist/output.css

@@ -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;
   }

osinaweb/static/js/customer_dashboard/payment.js

@@ -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();
+    });
+
+});

osinaweb/static/js/customer_dashboard/pricing-dropdown.js

@@ -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');
+        });
+    });
+});