New changes.

osinaweb/customercore/templates/listing_pages/customer-orders.html

@@ -0,0 +1,101 @@
+{% extends "customer_main.html" %}
+{%load static%}
+
+{% block content %}
+
+<div class="w-full px-5 s:px-9 flex flex-col gap-3">
+    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
+        <h1 class="text-secondosiblue text-[30px] font-semibold">My Orders</h1>
+
+
+        <div class="overflow-x-auto border border-gray-300 rounded-md mt-4">
+            <table class="min-w-full divide-y">
+                <!-- TABLE HEADER -->
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Order ID
+                        </th>
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Product
+                        </th>
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Cost
+                        </th>
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Status
+                        </th>
+                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+
+                <!-- TABLE BODY -->
+                <tbody class="bg-white divide-y divide-gray-200">
+                    <tr>
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">1</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">Standard Osimenu</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">$169</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-yellow-500">
+                            <p class="text-white">Pending</p>
+                        </td>
+
+                        <td class="px-6 py-4">
+                            <div class="w-full flex justify-center items-center">
+                                <button class="flex justify-center items-center gap-2 px-3 py-1 rounded-md bg-osiblue text-white border border-osiblue cursor-pointer hover:bg-white hover:text-osiblue duration-300">
+                                    Receipt
+                                    <img src="{% static 'images/icons/download.png' %}" class="w-[28px]">
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+
+
+                    <tr>
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">3</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">Premium Osimenu</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">$200</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-green-700">
+                            <p class="text-white">Completed</p>
+                        </td>
+
+                        <td class="px-6 py-4">
+                            <div class="w-full flex justify-center items-center">
+                                <button class="flex justify-center items-center gap-2 px-3 py-1 rounded-md bg-osiblue text-white border border-osiblue cursor-pointer hover:bg-white hover:text-osiblue duration-300">
+                                    Receipt
+                                    <img src="{% static 'images/icons/download.png' %}" class="w-[28px]">
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+
+{% endblock %}

osinaweb/customercore/templates/listing_pages/customer-products.html

@@ -1,52 +0,0 @@
-{% extends "customer_main.html" %}
-{%load static%}
-{% block content %}
-
-<div class="w-full px-5 s:px-9 flex flex-col gap-5">
-    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Solutions</h1>
-
-        <div class="w-full mt-4 flex flex-wrap gap-5 items-center">
-            <div class="px-5 py-3 bg-osiblue rounded-md shadow-md">
-                <img src="{% static 'images/ositcom_logos/osimenuwhite.png' %}" class="w-[150px]">
-            </div>
-
-            <div class="px-5 py-3 bg-osiblue rounded-md shadow-md">
-                <img src="{% static 'images/ositcom_logos/osicardwhite.png' %}" class="w-[150px]">
-            </div>
-        </div>
-    </div>
-
-    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Hosting Plans</h1>
-
-        <div class="w-full mt-4 flex flex-wrap gap-5 items-center">
-            <div class="w-[230px] border border-osiblue rounded-md flex justify-center items-center text-osiblue px-5 py-2">
-                <p>Shared Hosting</p>
-            </div>
-
-            <div class="w-[230px] border border-osiblue rounded-md flex justify-center items-center text-osiblue px-5 py-2">
-                <p>Cloud VPS Hosting</p>
-            </div>
-
-            <div class="w-[230px] border border-osiblue rounded-md flex justify-center items-center text-osiblue px-5 py-2">
-                <p>Dedicated CPU Servers</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
-        <h1 class="text-secondosiblue text-[30px] font-semibold">Domain Name Registration</h1>
-
-        <div class="w-full bg-gray-100 rounded-md px-5 py-3 shadow-md mt-4">
-            <div class="w-fit relative">
-                <input type="text" class="px-3 py-2 bg-white border border-gray-200 rounded-md w-[300px]" placeholder="Search...">
-                <div class="absolute px-3 right-0 top-0 inset-y-0 text-secondosiblue flex justify-center items-center">
-                    <i class="fa fa-search"></i>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-{% endblock %}

osinaweb/customercore/templates/listing_pages/products.html

@@ -0,0 +1,340 @@
+{% extends "customer_main.html" %}
+{%load static%}
+{% block content %}
+
+
+<style>
+    .selectedProductCategory {
+        color: white;
+        font-weight: bolder;
+    }
+</style>
+
+
+
+<div class="w-full px-5 s:px-9 flex flex-col gap-3">
+    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
+        <div
+            class="w-full bg-secondosiblue shadow-md rounded-md px-5 py-5 flex flex-wrap items-center gap-8 text-fifthosiblue text-xl uppercase">
+            <p class="selectedProductCategory cursor-pointer" id="solutions">Solutions</p>
+
+            <p class="cursor-pointer" id="hostingSolutions">Cloud Hosting</p>
+        </div>
+
+        <div class="w-full flex flex-col gap-10 mt-10" id="solutionsContainer">
+            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
+                <div class="flex justify-between items-center">
+                    <img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[180px]">
+
+                    <a href="{% url 'osimenuplans' %}">
+                        <button
+                            class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
+                            Details</button>
+                    </a>
+                </div>
+
+
+                <div class="w-full grid grid-cols-3 gap-5 mt-20">
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <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>
+
+                    <div class="relative">
+                        <div
+                            class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md absolute top-[-50px]">
+                            <p>Best Value</p>
+                        </div>
+
+                        <div
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
+                            <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>
+                    </div>
+
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <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>
+                </div>
+            </div>
+
+            <!-- <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
+                <div class="flex justify-between items-center">
+                    <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[180px]">
+
+                    <button
+                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
+                        Details</button>
+                </div>
+
+
+                <div class="w-full grid grid-cols-3 gap-5 mt-20">
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <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>
+
+                    <div class="relative">
+                        <div
+                            class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md absolute top-[-50px]">
+                            <p>Best Value</p>
+                        </div>
+
+                        <div
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
+                            <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>
+                    </div>
+
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <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>
+                </div>
+            </div> -->
+        </div>
+
+
+        <div class="w-full flex flex-col gap-10 mt-10 hidden" id="hostingSolutionsContainer">
+            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
+                <div class="flex justify-between items-center">
+                    <p class="font-poppinsExtraBold text-2xl text-osiblue">Shared Hosting</p>
+
+                    <button
+                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
+                        Details</button>
+                </div>
+
+
+                <div class="w-full grid grid-cols-3 gap-5 mt-20">
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Shared Basic</p>
+
+                        <div class="w-full flex flex-col justify-center items-center">
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">80%</p>
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$2.40/month</p>
+                            <p class="text-gray-500">Regular Price: $12.00/month</p>
+                        </div>
+                    </div>
+
+                    <div class="relative">
+                        <div
+                            class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md absolute top-[-50px]">
+                            <p>Best Value</p>
+                        </div>
+
+                        <div
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
+                            <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Shared Plus
+                            </p>
+
+                            <div class="w-full flex flex-col justify-center items-center">
+                                <p class="text-osiblue font-poppinsLight text-2xl font-semibold">80%</p>
+                                <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$3.50/month</p>
+                                <p class="text-gray-500">Regular Price: $17.50/month</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">Shared Power</p>
+
+                        <div class="w-full flex flex-col justify-center items-center">
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">80%</p>
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$4.80/month</p>
+                            <p class="text-gray-500">Regular Price: $24.00/month</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
+                <div class="flex justify-between items-center">
+                    <p class="font-poppinsExtraBold text-2xl text-osiblue">Cloud VPS Hosting</p>
+
+                    <button
+                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
+                        Details</button>
+                </div>
+
+
+                <div class="w-full grid grid-cols-4 gap-5 mt-20">
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">OSICLOUD 1</p>
+
+                        <div class="w-full flex flex-col justify-center items-center">
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$46.16/month</p>
+                            <p class="text-gray-500">Regular Price: $65.95/month</p>
+                        </div>
+                    </div>
+
+                    <div class="relative">
+                        <div
+                            class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md absolute top-[-50px]">
+                            <p>Best Value</p>
+                        </div>
+
+                        <div
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
+                            <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">OSICLOUD 2</p>
+
+                            <div class="w-full flex flex-col justify-center items-center">
+                                <p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
+                                <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$53.86/month</p>
+                                <p class="text-gray-500">Regular Price: $76.95/month</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">OSICLOUD 3</p>
+
+                        <div class="w-full flex flex-col justify-center items-center">
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$69.26/month</p>
+                            <p class="text-gray-500">Regular Price: $98.95/month</p>
+                        </div>
+                    </div>
+
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">OSICLOUD 4</p>
+
+                        <div class="w-full flex flex-col justify-center items-center">
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$107.76/month</p>
+                            <p class="text-gray-500">Regular Price: $153.95/month</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="w-full p-5 bg-gray-50 border-gray-100 shadow-md">
+                <div class="flex justify-between items-center">
+                    <p class="font-poppinsExtraBold text-2xl text-osiblue">Dedicated CPU Servers</p>
+
+                    <button
+                        class="bg-osiblue border border-osiblue text-white px-5 py-2 rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">More
+                        Details</button>
+                </div>
+
+
+                <div class="w-full grid grid-cols-4 gap-5 mt-20">
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">DEDICATED 1</p>
+
+                        <div class="w-full flex flex-col justify-center items-center">
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$103.06/month</p>
+                            <p class="text-gray-500">Regular Price: $143.95/month</p>
+                        </div>
+                    </div>
+
+                    <div class="relative">
+                        <div
+                            class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md absolute top-[-50px]">
+                            <p>Best Value</p>
+                        </div>
+
+                        <div
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-b-md bg-white">
+                            <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">DEDICATED 2
+                            </p>
+
+                            <div class="w-full flex flex-col justify-center items-center">
+                                <p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
+                                <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$127.16/month</p>
+                                <p class="text-gray-500">Regular Price: $184.95/month</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">DEDICATED 3</p>
+
+                        <div class="w-full flex flex-col justify-center items-center">
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$173.63/month</p>
+                            <p class="text-gray-500">Regular Price: $252.95/month</p>
+                        </div>
+                    </div>
+
+                    <div
+                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md bg-white">
+                        <p class="text-secondosiblue uppercase font-poppinsBold text-3xl text-center">DEDICATED 4</p>
+
+                        <div class="w-full flex flex-col justify-center items-center">
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">30%</p>
+                            <p class="text-osiblue font-poppinsLight text-2xl font-semibold">$265.76/month</p>
+                            <p class="text-gray-500">Regular Price: $374.95/month</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    const solutionsBtn = document.getElementById('solutions');
+    const hostingBtn = document.getElementById('hostingSolutions');
+
+    const solutionsContainer = document.getElementById('solutionsContainer');
+    const hostingContainer = document.getElementById('hostingSolutionsContainer');
+
+    solutionsBtn.addEventListener('click', () => {
+        solutionsContainer.classList.remove('hidden');
+        hostingContainer.classList.add('hidden');
+        hostingBtn.classList.remove('selectedProductCategory');
+        solutions.classList.add('selectedProductCategory');
+    });
+
+    hostingBtn.addEventListener('click', () => {
+        solutionsContainer.classList.add('hidden');
+        hostingContainer.classList.remove('hidden');
+        solutions.classList.remove('selectedProductCategory');
+        hostingBtn.classList.add('selectedProductCategory');
+    });
+</script>
+
+{% endblock %}

osinaweb/customercore/templates/payment.html

@@ -0,0 +1,46 @@
+{% extends "customer_main.html" %}
+{%load static%}
+
+{% block modules_section %}
+<!-- This block is intentionally left empty to exclude the modules section -->
+{% endblock modules_section %}
+
+{% block content %}
+
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+<p id="itemId" class="hidden">{{item.id}}</p>
+
+
+<div class="w-full px-5 s:px-9 flex flex-col gap-5 mt-5 font-poppinsLight">
+    <div class="w-full h-fit bg-white rounded-md shadow-md">
+        <div class="grid grid-cols-1 xxlg1:grid-cols-2">
+            <div
+                class="w-full hidden xxlg1:flex flex-col items-center justify-center rounded-l-md h-full bg-osiblue bg-opacity-70 p-9 gap-8 relative overflow-hidden">
+            </div>
+
+
+            <!-- EMBEDDED PAYMENT FORM -->
+            <div class="p-5">
+                <div id="paymentContent">
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<!---------------------- JS SCRIPTS -------------------->
+<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/customercore/templates/products/osimenu-plans.html

@@ -7,9 +7,6 @@
 
 {% block content %}
 
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-
-
 <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]">
@@ -24,11 +21,12 @@
                     <p class="text-gray-500">monthly/restaurant</p>
                 </div>
 
-                <div>
+                <a href="{% url 'payment' osimenu_basic.id %}">
                     <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" item-id="{{osimenu_basic.id}}">Get
-                        Started</button>
-                </div>
+                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
+                        Started
+                    </button>
+                </a>
 
                 <div class="w-full flex flex-col gap-3 mt-5">
                     <h1 class="text-gray-500 text-xl font-light">Features:</h1>
@@ -84,11 +82,12 @@
                         <p class="text-gray-500">monthly/restaurant</p>
                     </div>
 
-                    <div>
+                    <a href="{% url 'payment' osimenu_standard.id %}">
                         <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" item-id="{{osimenu_standard.id}}">Get
-                            Started</button>
-                    </div>
+                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
+                            Started
+                        </button>
+                    </a>
 
                     <div class="w-full flex flex-col gap-3 mt-5">
                         <h1 class="text-gray-500 text-xl font-light">Features:</h1>
@@ -140,11 +139,12 @@
                     <p class="text-gray-500">monthly/restaurant</p>
                 </div>
 
-                <div>
+                <a href="{% url 'payment' osimenu_premium.id %}">
                     <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" item-id="{{osimenu_premium.id}}">Get
-                        Started</button>
-                </div>
+                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
+                        Started
+                    </button>
+                </a>
 
                 <div class="w-full flex flex-col gap-3 mt-5">
                     <h1 class="text-gray-500 text-xl font-light">Features:</h1>
@@ -199,12 +199,12 @@
                         <p class="text-gray-500">monthly/restaurant</p>
                     </div>
 
-                    <div>
+                    <a href="{% url 'payment' osimenu_basic.id %}">
                         <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" item-id="{{osimenu_basic.id}}">Get
-                            Started</button>
-                    </div>
+                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
+                            Started
+                        </button>
+                    </a>
                 </div>
 
                 <div
@@ -263,12 +263,12 @@
                         <p class="text-gray-500">monthly/restaurant</p>
                     </div>
 
-                    <div>
+                    <a href="{% url 'payment' osimenu_standard.id %}">
                         <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" item-id="{{osimenu_standard.id}}">Get
-                            Started</button>
-                    </div>
+                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
+                            Started
+                        </button>
+                    </a>
                 </div>
 
                 <div
@@ -323,12 +323,12 @@
                         <p class="text-gray-500">monthly/restaurant</p>
                     </div>
 
-                    <div>
+                    <a href="{% url 'payment' osimenu_premium.id %}">
                         <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" item-id="{{osimenu_premium.id}}">Get
-                            Started</button>
-                    </div>
+                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
+                            Started
+                        </button>
+                    </a>
                 </div>
 
                 <div
@@ -377,34 +377,9 @@
 </div>
 
 
-<!-- PAYMENT MODAL -->
-<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-full s:w-[550px] h-[90%] max-h-[700px] bg-white shadow-md rounded-md p-5 relative flex flex-col">
-        <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>
-
-        <h1 class="text-secondosiblue text-center text-2xl font-poppinsBold mt-8">Process Payment</h1>
-
-        <div id="paymentContent" class="flex-1 overflow-y-auto">
-            <!-- EMBEDDED CONTENT HERE -->
-        </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/customercore/urls.py

@@ -2,12 +2,23 @@ from django.urls import path
 from . import views
 
 
-urlpatterns = [  
+urlpatterns = [
 
+    # LISTING
     path('invoices/', views.customer_invoices, name='customerinvoices'),
-    path('products/', views.customer_products, name='customerproducts'),
-    path('pricing/', views.pricing, name='pricing'),
+    path('products/', views.all_products, name='products'),
+    path('orders/', views.customer_orders, name='orders'),
+
+
+    # PRODUCTS URL
+    path('osimenu-plans/', views.osimenu_plans, name='osimenuplans'),
+    path('shared-hosting-plans/', views.shared_hosting_plans,
+         name='sharedhostingplans'),
+
+
+    # PAYMENT
+    path('payment/<int:item_id>/', views.payment, name='payment'),
     path('initiate_checkout/', views.initiate_checkout, name='initiatecheckout'),
-    path('check-order-status/<str:merchant_id>/<str:order_id>/', views.check_order_status, name='check_order_status'),
-    
+    path('check-order-status/<str:merchant_id>/<str:order_id>/',
+         views.check_order_status, name='check_order_status'),
 ]

osinaweb/customercore/views.py

@@ -1,4 +1,4 @@
-from django.shortcuts import render
+from django.shortcuts import render, get_object_or_404
 from django.contrib.auth.decorators import login_required
 from django.http import JsonResponse
 import requests
@@ -18,17 +18,33 @@ def customer_invoices(request, *args, **kwargs):
 
 
 @customer_login_required
-def customer_products(request, *args, **kwargs):
+def all_products(request, *args, **kwargs):
     
     context = {
 
     }
 
-    return render(request, 'listing_pages/customer-products.html', context)
+    return render(request, 'listing_pages/products.html', context)
+
 
 
 @customer_login_required
-def pricing(request, *args, **kwargs):
+def customer_orders(request, *args, **kwargs):
+    
+    context = {
+
+    }
+
+    return render(request, 'listing_pages/customer-orders.html', context)
+
+
+
+
+
+
+# PRODUCTS
+@customer_login_required
+def osimenu_plans(request, *args, **kwargs):
     osimenu_basic = Item.objects.filter(title='OSIMENU BASIC').first()
     osimenu_standard = Item.objects.filter(title='OSIMENU STANDARD').first()
     osimenu_premium = Item.objects.filter(title='OSIMENU PREMIUM').first()
@@ -39,13 +55,36 @@ def pricing(request, *args, **kwargs):
         'osimenu_premium': osimenu_premium,
     }
 
-    return render(request, 'pricing.html', context)
+    return render(request, 'products/osimenu-plans.html', context)
+
+
+
+@customer_login_required
+def shared_hosting_plans(request, *args, **kwargs):
+    
+    context = {
+
+    }
+
+    return render(request, 'products/shared-hosting-plans.html', context)
+
 
 
 
 
 
 
+@customer_login_required
+def payment(request, item_id):
+    item = get_object_or_404(Item, id=item_id)
+    
+    context = {
+        'item' : item,
+    }
+
+    return render(request, 'payment.html', context)
+
+
 def basic_auth_header(username, password):
     credentials = f"merchant.{username}:{password}"
     encoded_credentials = base64.b64encode(credentials.encode('utf-8')).decode('utf-8')

osinaweb/input.css

@@ -224,31 +224,6 @@
 
 
 /* CUSTOMER DASHBOARD PAYMENT */
-#paymentContent {
-    height: 100% !important;
-    position: relative !important;
-    max-height: 100% !important;
-    margin-top: 20px;
-    overflow-y: auto !important;
-}
-
 #paymentContent iframe {
-    position: relative !important;
-    height: 100% !important;
-    overflow-y: auto !important;
-}
-
-#paymentContent::-webkit-scrollbar {
-    width: 5px;
-    border-radius: 10px;
-}
-
-#paymentContent::-webkit-scrollbar-thumb {
-    background: rgba(208, 208, 208, 0.377);
-    border-radius: 10px;
-}
-
-#paymentContent::-webkit-scrollbar-track {
-    background: transparent;
-}
-/* CUSTOMER DASHBOARD PAYMENT CLOSURE */
+    min-height: fit-content !important;
+}