New changes.
parent
7784d927af
commit
40f0d93824
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,18 @@
|
||||
# Generated by Django 5.0.4 on 2024-04-24 12:44
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('billing', '0041_orderitem_active'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='order',
|
||||
name='due_date',
|
||||
field=models.DateField(blank=True, null=True),
|
||||
),
|
||||
]
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,61 @@
|
||||
{% 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-3xl text-secondosiblue text-center font-semibold">
|
||||
Open Ticket
|
||||
</h1>
|
||||
|
||||
<form class="w-full flex flex-col gap-5 justify-center items-center mt-5" method="POST" action="">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Ticket Title:</label>
|
||||
<input required name="title" type="text"
|
||||
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">What is this regarding?</label>
|
||||
<select class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
|
||||
<option value="">General Accounting</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Desceription:</label>
|
||||
<textarea required name="description"
|
||||
class="w-full py-1 px-3 border border-gray-300 outline-none rounded-md mt-1 resize-none"
|
||||
rows="8"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Attach Files:</label>
|
||||
<div class="inbox-box border border-gray-300 w-full rounded-md px-3 mt-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<input name="" type="file" class="file-input" hidden multiple />
|
||||
<span class="file-name text-gray-500 text-base focus:outline-none outline-none">Upload
|
||||
Document(s)</span>
|
||||
<label
|
||||
class="file-label bg-transparent text-gray-500 border border-white h-14 cursor-pointer flex items-center">
|
||||
<i class="fa fa-upload" style="font-size: 25px;"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-center items-center mt-3">
|
||||
<button type="submit"
|
||||
class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-------------- JS SCRIPTS --------------->
|
||||
<script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,175 @@
|
||||
{% 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">
|
||||
<div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3">
|
||||
<p class="text-secondosiblue text-xl">Ticket: <span class="font-semibold">#2226663535</span></p>
|
||||
|
||||
<div class="flex justify-start items-center gap-1">
|
||||
<div class="w-[16px] h-[16px] rounded-full bg-red-200 border border-red-500 shadow-md"></div>
|
||||
<p class="text-secondosiblue font-light">Closed by Linode at 20-4-24 16:30</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col gap-8 mt-5 s:mt-10">
|
||||
<!-- REPLY 1 -->
|
||||
<div class="flex gap-3">
|
||||
<div>
|
||||
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
||||
<img src="{% static 'images/ositcom_logos/full-logo.png' %}"
|
||||
class="w-full h-full rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full replyContainer shadow-md">
|
||||
<div
|
||||
class="w-full bg-gray-100 flex justify-between items-center gap-3 px-3 py-3 cursor-pointer rounded-t-md toggleReply">
|
||||
<p class="text-secondosiblue font-light text-sm s:text-base"><span class="font-semibold">Ositcom
|
||||
Ltd</span>
|
||||
commented 2024-04-17 12:19</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowUp">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
||||
</svg>
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowDown hidden">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-white p-5 flex flex-col gap-3 reply">
|
||||
<p class="text-gray-500 font-light leading-8 text-[15px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non purus consectetur
|
||||
magna sodales fringilla. Suspendisse non imperdiet metus. Curabitur feugiat tristique
|
||||
varius. Curabitur fermentum sapien nisi, sed suscipit odio luctus sed. Mauris pretium risus
|
||||
a tincidunt facilisis. Aliquam quis odio in mi aliquet scelerisque et ut urna. Ut ultrices
|
||||
turpis odio, id hendrerit lectus dignissim in. Donec at tortor quis dui auctor sodales porta
|
||||
et purus. Aliquam at nunc sit amet tortor lacinia porttitor. Proin auctor, eros ac
|
||||
sollicitudin iaculis, felis quam vulputate ante, eu varius dolor arcu non enim. Vestibulum
|
||||
ornare dapibus risus, id eleifend ipsum. Aliquam metus urna, bibendum quis cursus vitae,
|
||||
placerat sit amet felis. Aliquam tellus ex, pretium id gravida id, vulputate et velit.
|
||||
Phasellus leo felis, lobortis ut dolor eget, viverra aliquet ligula. Aliquam molestie ac
|
||||
eros et fermentum.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- CUSTOMER SUPPORT REPLY 2 -->
|
||||
<div class="flex gap-3">
|
||||
<div>
|
||||
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
||||
<img src="{% static 'images/netcommerce-logo.png' %}"
|
||||
class="w-full h-full rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full replyContainer shadow-md">
|
||||
<div
|
||||
class="w-full bg-gray-100 flex justify-between items-center gap-3 px-3 py-3 cursor-pointer rounded-t-md toggleReply">
|
||||
<p class="text-secondosiblue font-light text-sm s:text-base"><span
|
||||
class="font-semibold">Scott</span>
|
||||
Customer Support commented 2024-04-17 12:19</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowUp">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
||||
</svg>
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowDown hidden">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-white flex flex-col gap-5 p-5 reply">
|
||||
<p class="text-gray-500 font-light leading-8 text-[15px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non purus consectetur
|
||||
magna sodales fringilla. Suspendisse non imperdiet metus. Curabitur feugiat tristique
|
||||
varius. Curabitur fermentum sapien nisi, sed suscipit odio luctus sed. Mauris pretium risus
|
||||
a tincidunt facilisis. Aliquam quis odio in mi aliquet scelerisque et ut urna. Ut ultrices
|
||||
turpis odio, id hendrerit lectus dignissim in. Donec at tortor quis dui auctor sodales porta
|
||||
et purus.
|
||||
</p>
|
||||
|
||||
<div class="w-full border-t border-gray-200 pt-5 flex justify-start items-center gap-3">
|
||||
<a class="text-secondosiblue font-light cursor-pointer hover:text-gray-500 duration-300">How
|
||||
did I do?</a>
|
||||
|
||||
<div class="flex justify-start items-center gap-2">
|
||||
<div class="w-fit h-fit rounded-full border-4 border-secondosiblue">
|
||||
<img src="{% static 'images/icons/happy-icon.png' %}" class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
||||
</div>
|
||||
|
||||
<div class="w-fit h-fit rounded-full">
|
||||
<img src="{% static 'images/icons/neutral-icon.png' %}" class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
||||
</div>
|
||||
|
||||
<div class="w-fit h-fit rounded-full">
|
||||
<img src="{% static 'images/icons/unhappy-icon.png' %}" class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- REPLYING SECTION -->
|
||||
<div class="flex gap-3">
|
||||
<div>
|
||||
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
||||
<img src="{% static 'images/ositcom_logos/full-logo.png' %}"
|
||||
class="w-full h-full rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col gap-3">
|
||||
<textarea
|
||||
class="w-full bg-white px-3 py-3 border border-gray-200 rounded-md outline-none text-gray-500 resize-none"
|
||||
rows="8" placeholder="Reply to Ositcom Ltd..."></textarea>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col s:flex-row justify-end items-center gap-3">
|
||||
<div class="w-full s:w-[50px] h-[50px] rounded-md bg-gray-50 shadow-md border border-gray-100 flex justify-center items-center p-2 cursor-pointer relative hover:scale-105 duration-300 transition-transform">
|
||||
<input type="file" name="file" id="fileInput" class="opacity-0">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-secondosiblue z-10 absolute pointer-events-none">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-full s:w-fit bg-secondosiblue border border-secondosiblue text-white rounded-md cursor-pointer hover:bg-white hover:text-secondosiblue duration-300 px-9 py-3">
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!---------------------- JS SCRIPTS -------------------->
|
||||
|
||||
<script type="text/javascript" src="{% static 'js/customer_dashboard/ticket-details.js' %}"></script>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,117 @@
|
||||
{% 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="invoiceId" class="hidden">{{invoice.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 flex flex-col items-center justify-between rounded-lb-none xxlg1:rounded-l-md h-full rounded-tl-md rounded-tr-md xxlg1:rounded-tr-none gap-10 overflow-hidden relative bg-gradient-to-b from-gray-400 via-gray-500 to-blue-950">
|
||||
<div
|
||||
class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
|
||||
<!-- INVOICE DETAILS -->
|
||||
<div class="w-[90%] s:w-[85%] xll:w-[75%] h-fit flex flex-col gap-5 justify-center items-center py-9 bg-white rounded-md z-10 shadow-md duration-300">
|
||||
<img src="{% static 'images/ositcom_logos/full-logo.png' %}" class="w-[120px]">
|
||||
|
||||
<div class="w-full bg-osiblue py-3 px-3 flex justify-between items-center text-white mt-5">
|
||||
<p>Due Date: <span class="font-semibold">{{invoice.order.due_date}}</span></p>
|
||||
<p>Invoice <span class="font-semibold">${{invoice.invoice_number}}</span></p>
|
||||
</div>
|
||||
|
||||
<div class="w-full p-5">
|
||||
<p class="font-poppinsBold text-secondosiblue text-[17px]">Bill To:</p>
|
||||
<p class="text-secondosiblue font-light">{{invoice.order.customer.user.first_name}} {{invoice.order.customer.user.last_name}}</p>
|
||||
<p class="text-secondosiblue font-light">{{invoice.order.customer.mobile_number}}</p>
|
||||
<p class="text-secondosiblue font-light">{{invoice.order.customer.user.email}}</p>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-osiblue py-3 px-3 flex justify-start items-center text-white">
|
||||
<p>Invoice Items</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col gap-5 p-5">
|
||||
<ul class="text-secondosiblue font-light list-disc px-5">
|
||||
{% for item in invoice.order.orderitem_set.all %}
|
||||
<li>{{item.item.title}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="w-full flex justify-end items-center text-secondosiblue text-xl">
|
||||
<p>Total: <span class="font-semibold">${{invoice.order.get_cart_total}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-white border-bl-none xxlg1:border-bl-md px-5 py-3 z-10 flex flex-col justify-center items-center border border-gray-100">
|
||||
<p class="text-secondosiblue font-poppinsLight text-sm">Payment Powered By</p>
|
||||
<img src="{% static 'images/netcommerce-logo.png' %}" class="w-[120px]">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- EMBEDDED PAYMENT FORM -->
|
||||
<div class="p-5 relative min-h-[200px] xxlg1:h-full">
|
||||
<div class="w-full h-full absolute flex justify-center items-center bg-black bg-opacity-30 z-10 inset-0 rounded-rt-none rounded-b-md xxlg1:rounded-r-md rounded-bl-md xxlg1:rounded-bl-none hidden"
|
||||
id="paymentLoader">
|
||||
<div role="status">
|
||||
<svg aria-hidden="true"
|
||||
class="w-14 h-14 text-white animate-spin dark:text-gray-600 fill-secondosiblue"
|
||||
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="paymentContent">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!---------------------- JS SCRIPTS -------------------->
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<!-- TO CALL THE INITIATE CHECKOUT PAGE -->
|
||||
<script type="text/javascript" src='{% static "js/customer_dashboard/invoice-payment.js" %}'></script>
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,95 @@
|
||||
{% 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]">My Tickets</h1>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col gap-3 mt-4">
|
||||
<div class="w-full bg-gray-200 rounded-md shadow-md h-fit p-3 flex items-center justify-between gap-5">
|
||||
<div class="flex items-center gap-5 text-[17px]">
|
||||
<p class="text-secondosiblue font-semibold cursor-pointer">Open Ticktes</p>
|
||||
<p class="text-gray-500 cursor-pointer">Closed Ticktes</p>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="{% url 'customeraddticket' %}">
|
||||
<button class="w-fit px-5 py-2 bg-osiblue border border-osiblue text-white rounded-md cursor-pointer hover:bg-white hover:text-secondosiblue duration-300">
|
||||
Open Ticket
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="overflow-x-auto border border-gray-300 rounded-md">
|
||||
<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">
|
||||
Subject
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Ticket 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">
|
||||
Regarding
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Date Created
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
||||
Last Updated
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
||||
Updated By
|
||||
</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">
|
||||
<a href="{% url 'innercustomerticket' %}">
|
||||
<p class="text-secondosiblue cursor-pointer hover:text-gray-500 duration-300">My Account Balance</p>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">22666766</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">Django</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">20-2-2024</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">20-2-2024</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm">
|
||||
<p class="text-secondosiblue">Ositcom Ltd</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,62 @@
|
||||
{% extends "add-edit-main.html" %}
|
||||
{%load static%}
|
||||
{% block content %}
|
||||
|
||||
<div class="w-full px-5 s:px-9 mb-5">
|
||||
<div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
|
||||
<h1 class="text-3xl text-secondosiblue text-center font-semibold">
|
||||
Add Ticket
|
||||
</h1>
|
||||
|
||||
<form class="w-full flex flex-col gap-5 justify-center items-center mt-5" method="POST" action="">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Ticket Title:</label>
|
||||
<input required name="title" type="text"
|
||||
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">What is this regarding?</label>
|
||||
<select class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
|
||||
<option value="">General Accounting</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Desceription:</label>
|
||||
<textarea required name="description"
|
||||
class="w-full py-1 px-3 border border-gray-300 outline-none rounded-md mt-1 resize-none"
|
||||
rows="8"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Attach Files:</label>
|
||||
<div class="inbox-box border border-gray-300 w-full rounded-md px-3 mt-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<input name="" type="file" class="file-input" hidden multiple />
|
||||
<span class="file-name text-gray-500 text-base focus:outline-none outline-none">Upload
|
||||
Document(s)</span>
|
||||
<label
|
||||
class="file-label bg-transparent text-gray-500 border border-white h-14 cursor-pointer flex items-center">
|
||||
<i class="fa fa-upload" style="font-size: 25px;"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-center items-center mt-3">
|
||||
<button type="submit"
|
||||
class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-------------- JS SCRIPTS --------------->
|
||||
<script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,179 @@
|
||||
{% extends "main.html" %}
|
||||
{%load static%}
|
||||
{% block content %}
|
||||
|
||||
<div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
|
||||
<div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3">
|
||||
<p class="text-secondosiblue text-xl">Ticket: <span class="font-semibold">#2226663535</span></p>
|
||||
|
||||
<div class="flex justify-start items-center gap-1">
|
||||
<div class="w-[16px] h-[16px] rounded-full bg-red-200 border border-red-500 shadow-md"></div>
|
||||
<p class="text-secondosiblue font-light">Closed by Linode at 20-4-24 16:30</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col gap-8 mt-5 s:mt-10">
|
||||
<!-- REPLY 1 -->
|
||||
<div class="flex gap-3">
|
||||
<div>
|
||||
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
||||
<img src="{% static 'images/ositcom_logos/full-logo.png' %}"
|
||||
class="w-full h-full rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full replyContainer shadow-md">
|
||||
<div
|
||||
class="w-full bg-gray-100 flex justify-between items-center gap-3 px-3 py-3 cursor-pointer rounded-t-md toggleReply">
|
||||
<p class="text-secondosiblue font-light text-sm s:text-base"><span class="font-semibold">Ositcom
|
||||
Ltd</span>
|
||||
commented 2024-04-17 12:19</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowUp">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
||||
</svg>
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowDown hidden">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-white p-5 flex flex-col gap-3 reply">
|
||||
<p class="text-gray-500 font-light leading-8 text-[15px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non purus consectetur
|
||||
magna sodales fringilla. Suspendisse non imperdiet metus. Curabitur feugiat tristique
|
||||
varius. Curabitur fermentum sapien nisi, sed suscipit odio luctus sed. Mauris pretium risus
|
||||
a tincidunt facilisis. Aliquam quis odio in mi aliquet scelerisque et ut urna. Ut ultrices
|
||||
turpis odio, id hendrerit lectus dignissim in. Donec at tortor quis dui auctor sodales porta
|
||||
et purus. Aliquam at nunc sit amet tortor lacinia porttitor. Proin auctor, eros ac
|
||||
sollicitudin iaculis, felis quam vulputate ante, eu varius dolor arcu non enim. Vestibulum
|
||||
ornare dapibus risus, id eleifend ipsum. Aliquam metus urna, bibendum quis cursus vitae,
|
||||
placerat sit amet felis. Aliquam tellus ex, pretium id gravida id, vulputate et velit.
|
||||
Phasellus leo felis, lobortis ut dolor eget, viverra aliquet ligula. Aliquam molestie ac
|
||||
eros et fermentum.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- CUSTOMER SUPPORT REPLY 2 -->
|
||||
<div class="flex gap-3">
|
||||
<div>
|
||||
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
||||
<img src="{% static 'images/netcommerce-logo.png' %}"
|
||||
class="w-full h-full rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full replyContainer shadow-md">
|
||||
<div
|
||||
class="w-full bg-gray-100 flex justify-between items-center gap-3 px-3 py-3 cursor-pointer rounded-t-md toggleReply">
|
||||
<p class="text-secondosiblue font-light text-sm s:text-base"><span
|
||||
class="font-semibold">Scott</span>
|
||||
Customer Support commented 2024-04-17 12:19</p>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowUp">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
|
||||
</svg>
|
||||
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4 text-secondosiblue arrowDown hidden">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-white flex flex-col gap-5 p-5 reply">
|
||||
<p class="text-gray-500 font-light leading-8 text-[15px]">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non purus consectetur
|
||||
magna sodales fringilla. Suspendisse non imperdiet metus. Curabitur feugiat tristique
|
||||
varius. Curabitur fermentum sapien nisi, sed suscipit odio luctus sed. Mauris pretium risus
|
||||
a tincidunt facilisis. Aliquam quis odio in mi aliquet scelerisque et ut urna. Ut ultrices
|
||||
turpis odio, id hendrerit lectus dignissim in. Donec at tortor quis dui auctor sodales porta
|
||||
et purus.
|
||||
</p>
|
||||
|
||||
<div class="w-full border-t border-gray-200 pt-5 flex justify-start items-center gap-3">
|
||||
<a class="text-secondosiblue font-light cursor-pointer hover:text-gray-500 duration-300">How
|
||||
did I do?</a>
|
||||
|
||||
<div class="flex justify-start items-center gap-2">
|
||||
<div class="w-fit h-fit rounded-full border-4 border-secondosiblue">
|
||||
<img src="{% static 'images/icons/happy-icon.png' %}"
|
||||
class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
||||
</div>
|
||||
|
||||
<div class="w-fit h-fit rounded-full">
|
||||
<img src="{% static 'images/icons/neutral-icon.png' %}"
|
||||
class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
||||
</div>
|
||||
|
||||
<div class="w-fit h-fit rounded-full">
|
||||
<img src="{% static 'images/icons/unhappy-icon.png' %}"
|
||||
class="w-[30px] h-[30px] rounded-full cursor-pointer hover:scale-105 duration-300 transition-transform">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- REPLYING SECTION -->
|
||||
<div class="flex gap-3">
|
||||
<div>
|
||||
<div class="w-[45px] s:w-[60px] h-[45px] s:h-[60px] rounded-full shadow-md border border-gray-100">
|
||||
<img src="{% static 'images/ositcom_logos/full-logo.png' %}"
|
||||
class="w-full h-full rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col gap-3">
|
||||
<textarea
|
||||
class="w-full bg-white px-3 py-3 border border-gray-200 rounded-md outline-none text-gray-500 resize-none"
|
||||
rows="8" placeholder="Reply to Ositcom Ltd..."></textarea>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col s:flex-row justify-end items-center gap-3">
|
||||
<div
|
||||
class="w-full s:w-[50px] h-[50px] rounded-md bg-gray-50 shadow-md border border-gray-100 flex justify-center items-center p-2 cursor-pointer relative hover:scale-105 duration-300 transition-transform">
|
||||
<input type="file" name="file" id="fileInput" class="opacity-0">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-5 h-5 text-secondosiblue z-10 absolute pointer-events-none">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-full s:w-fit bg-secondosiblue border border-secondosiblue text-gray-200 rounded-md cursor-pointer hover:bg-white hover:text-secondosiblue duration-300 px-9 py-3">
|
||||
Send as Note
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="w-full s:w-fit bg-gray-100 border border-secondosiblue text-secondosiblue hover:bg-secondosiblue hover:text-gray-200 rounded-md cursor-pointer duration-300 px-9 py-3">
|
||||
Send as Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!---------------------- JS SCRIPTS -------------------->
|
||||
|
||||
<script type="text/javascript" src="{% static 'js/customer_dashboard/ticket-details.js' %}"></script>
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,134 @@
|
||||
{% extends "main.html" %}
|
||||
{%load static%}
|
||||
{% block content %}
|
||||
|
||||
|
||||
<div class="w-full xxlg1:w-[75%]">
|
||||
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
||||
<h1 class="text-secondosiblue text-[25px]">Tags</h1>
|
||||
|
||||
<!-- FILTERING -->
|
||||
<div
|
||||
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row gap-3 justify-between items-center">
|
||||
<div class="w-full s:w-fit flex justify-start items-center gap-5">
|
||||
<div class="relative h-fit w-full s:w-fit flex items-center">
|
||||
<input type="text" placeholder="Enter Ticket"
|
||||
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
|
||||
<button
|
||||
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full s:w-fit">
|
||||
<a href="{% url 'addticket' %}">
|
||||
<button
|
||||
class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300"
|
||||
data-modal-url="">Open
|
||||
Ticket</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="w-full flex flex-col gap-3 mt-5">
|
||||
<div class="w-full bg-gray-200 rounded-md shadow-md h-fit p-3 flex items-center justify-between gap-5">
|
||||
<div class="flex items-center gap-5 text-[17px]">
|
||||
<p class="text-secondosiblue font-semibold cursor-pointer">Open Ticktes</p>
|
||||
<p class="text-gray-500 cursor-pointer">Closed Ticktes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="overflow-x-auto border border-gray-300 rounded-md">
|
||||
<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">
|
||||
Subject
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Ticket 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">
|
||||
Regarding
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
||||
Date Created
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
||||
Last Updated
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
||||
Updated By
|
||||
</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-secondosiblue">My
|
||||
Account Balance</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">22666766</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">Django</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">20-2-2024</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">20-2-2024</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
||||
<p class="text-secondosiblue">Ositcom Ltd</p>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center text-sm">
|
||||
<div class="flex justify-center items-center gap-3">
|
||||
<a href="{% url 'ticketdetails' %}">
|
||||
<div class="text-[15px] text-blue-500 cursor-pointer">
|
||||
<i class="fa fa-eye"></i>
|
||||
</div>
|
||||
</a>
|
||||
<a href="">
|
||||
<div class="text-[15px] text-blue-500 cursor-pointer">
|
||||
<i class="fa fa-edit"></i>
|
||||
</div>
|
||||
</a>
|
||||
<div class="text-[15px] text-red-500 cursor-pointer">
|
||||
<i class="fa fa-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 944 B |
Binary file not shown.
|
After Width: | Height: | Size: 892 B |
Binary file not shown.
|
After Width: | Height: | Size: 920 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 920 B |
@ -0,0 +1,63 @@
|
||||
const paymentContent = document.getElementById('paymentContent');
|
||||
const paymentLoader = document.getElementById('paymentLoader');
|
||||
const invoice_id = document.getElementById('invoiceId').textContent;
|
||||
|
||||
function initiateInvoiceCheckout(invoice_id) {
|
||||
const csrftoken = getCookie('csrftoken');
|
||||
console.log(invoice_id);
|
||||
|
||||
console.log('CSRF Token:', csrftoken);
|
||||
|
||||
paymentLoader.classList.remove('hidden');
|
||||
|
||||
fetch('/initiate_invoice_checkout/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': csrftoken,
|
||||
},
|
||||
body: JSON.stringify({ invoice_id: invoice_id }),
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log("Session ID: " + data.session_id);
|
||||
// Update Checkout session with the fetched session ID and show the embedded page
|
||||
Checkout.configure({
|
||||
session: {
|
||||
id: data.session_id,
|
||||
}
|
||||
});
|
||||
$('#paymentContent').empty();
|
||||
Checkout.showEmbeddedPage('#paymentContent');
|
||||
sessionStorage.clear();
|
||||
|
||||
paymentLoader.classList.add('hidden');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('There was a problem with the fetch operation:', error);
|
||||
|
||||
paymentLoader.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
initiateInvoiceCheckout(invoice_id);
|
||||
@ -0,0 +1,13 @@
|
||||
// TO CHANGE THE PRICE BASED ON THE CHOSEN CYCLE FROM THE SELECT TAG
|
||||
function updateCyclePrice() {
|
||||
var selectedOption = document.getElementById('cycle').options[document.getElementById('cycle').selectedIndex];
|
||||
var cyclePrice = parseFloat(selectedOption.getAttribute('data-cycle-price'));
|
||||
document.getElementById('cyclePrice').textContent = cyclePrice.toFixed(2);
|
||||
}
|
||||
|
||||
document.getElementById('cycle').addEventListener('change', updateCyclePrice);
|
||||
|
||||
// Trigger the change event when the page loads to display the cycle price of the selected option by default
|
||||
window.addEventListener('load', function () {
|
||||
updateCyclePrice();
|
||||
});
|
||||
@ -0,0 +1,28 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const toggleButtons = document.querySelectorAll('.toggleReply');
|
||||
|
||||
toggleButtons.forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
const replyContainer = this.closest('.replyContainer');
|
||||
const reply = replyContainer.querySelector('.reply');
|
||||
const arrowUp = replyContainer.querySelector('.arrowUp');
|
||||
const arrowDown = replyContainer.querySelector('.arrowDown');
|
||||
|
||||
reply.classList.toggle('hidden');
|
||||
|
||||
if (reply.classList.contains('hidden')) {
|
||||
arrowUp.classList.add('hidden');
|
||||
arrowDown.classList.remove('hidden');
|
||||
} else {
|
||||
arrowUp.classList.remove('hidden');
|
||||
arrowDown.classList.add('hidden');
|
||||
}
|
||||
|
||||
if (!reply.classList.contains('hidden')) {
|
||||
replyContainer.classList.add('shadow-md');
|
||||
} else {
|
||||
replyContainer.classList.remove('shadow-md');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue