698 lines
21 KiB
HTML
Executable File
698 lines
21 KiB
HTML
Executable File
{% load static %} {% block content %}
|
|
<!DOCTYPE html>
|
|
{% load poll_extras1 %}
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="apple-touch-icon" href="{%static 'homepage/assets/img/apple-touch-icon.png'%}">
|
|
<link rel="icon" href="{%static 'homepage/assets/logos/MNF-Logo-Final.png'%}">
|
|
<title>Conversion - Invoice</title>
|
|
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
|
|
<style>
|
|
:root {
|
|
--primary-btn-bg: #33B0CA;
|
|
--disabled-btn-bg: #616161;
|
|
--primary-bg: #FAFAFA;
|
|
--heading-bg: #EAEAEA;
|
|
--heading-color: #252525;
|
|
--text-color: #616161;
|
|
--cards-text-size: 10px;
|
|
--para-text-size: 12px;
|
|
--fullpage-para-text-size: 14px;
|
|
--seb-heading-text-size: 16px;
|
|
--menu-text-size: 16px;
|
|
--primary-heading-text-size: 24px;
|
|
--font-family: "Poppins", sans-serif;
|
|
}
|
|
|
|
.primary-btn-greeen {
|
|
background: var(--primary-btn-bg) !important;
|
|
font-family: var(--font-family) !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.sub-heading {
|
|
color: var(--primary-btn-bg) !important;
|
|
}
|
|
|
|
.sub-heading-2 {
|
|
background: var(--primary-btn-bg) !important;
|
|
color: #FAFAFA !important;
|
|
}
|
|
|
|
.gross-1 {
|
|
color: #FAFAFA !important;
|
|
}
|
|
|
|
#payment_stripe {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: white;
|
|
/* Set the background to white */
|
|
margin: auto;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.disabledbutton {
|
|
pointer-events: none;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.centered-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
max-width: 80%;
|
|
/* Limit the width to a percentage of the viewport width */
|
|
max-height: 80%;
|
|
/* Limit the height to a percentage of the viewport height */
|
|
}
|
|
|
|
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: "Poppins", sans-serif;
|
|
}
|
|
|
|
#master-container {
|
|
border: 2px solid #ccc;
|
|
width: 90vw;
|
|
margin: 2rem auto;
|
|
}
|
|
|
|
#master-container header {
|
|
height: 100px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2px solid #ccc;
|
|
}
|
|
|
|
#master-container header img {
|
|
height: 62px;
|
|
width: 99px;
|
|
margin-left: 5%;
|
|
}
|
|
|
|
#master-container header section {
|
|
margin-right: 2%;
|
|
text-align: right;
|
|
}
|
|
|
|
#master-container header section h2 {
|
|
color: #ee3c4d;
|
|
font-family: cursive;
|
|
font-style: italic;
|
|
}
|
|
|
|
#master-container header section p,
|
|
a {
|
|
color: #605d5d;
|
|
}
|
|
|
|
#master-container .body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#master-container .body .middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 90%;
|
|
}
|
|
|
|
#master-container .body .middle .invoice-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
#master-container .body .middle .invoice-container h1 {
|
|
font-size: 3.2rem;
|
|
color: #ff223c;
|
|
}
|
|
|
|
#master-container .body .middle .invoice-container p {
|
|
width: 190px;
|
|
text-align: center;
|
|
padding: 0.7rem 0;
|
|
border-top: 2px solid #ccc;
|
|
border-bottom: 2px solid #ccc;
|
|
}
|
|
|
|
#master-container .body .middle .details-container {
|
|
display: flex;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
#master-container .body .middle .details-container .left {
|
|
width: 200px;
|
|
}
|
|
|
|
#master-container .body .bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 5rem;
|
|
width: 90%;
|
|
}
|
|
|
|
#master-container .body .bottom .left,
|
|
#master-container .body .bottom .right {
|
|
width: 100%;
|
|
}
|
|
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
background: #ef4f5e;
|
|
color: #fff;
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
max-width: 55%;
|
|
text-align: center;
|
|
padding: 0.7rem 55px 0.7rem 0;
|
|
border: none;
|
|
clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%, 0% 50%);
|
|
position: relative;
|
|
top: 26px;
|
|
}
|
|
|
|
#master-container .body .bottom .left .card {
|
|
height: 440px;
|
|
border: 2px solid #ccc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card {
|
|
max-height: 450px;
|
|
border: 2px solid #ccc;
|
|
}
|
|
|
|
#master-container .body .bottom .left .card div:nth-child(1),
|
|
#master-container .body .bottom .right .card div:nth-child(1) {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
#master-container .body .bottom .left .card div,
|
|
#master-container .body .bottom .right .card div {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0.4rem 1rem;
|
|
font-size: 1.1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .green {
|
|
display: block;
|
|
background: var(--heading-bg) !important;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .green section {
|
|
max-width: 65%;
|
|
padding: 0.4rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-left: 10%;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .green .total-discount {
|
|
max-width: 100%;
|
|
min-width: 101%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .light-red {
|
|
background: rgb(255, 194, 194);
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .light-red p {
|
|
color: red;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .bold,
|
|
#master-container .body .bottom .right .card .light-red .bold {
|
|
font-weight: 600;
|
|
color: black;
|
|
}
|
|
|
|
#master-container .body .lower {
|
|
margin: 2rem 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#master-container .body .lower .terms-service {
|
|
margin-left: 5%;
|
|
}
|
|
|
|
#master-container .body .lower .terms-service .blue {
|
|
color: #5a83ef;
|
|
}
|
|
|
|
#master-container .body .lower .pay-container {
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
#master-container .body .lower .pay-container button {
|
|
background: #f0505f;
|
|
color: #fff;
|
|
width: 200px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
height: 50px;
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
margin-top: 1rem;
|
|
margin-left: 0.5rem;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 5px #000;
|
|
}
|
|
|
|
form {
|
|
width: 90%;
|
|
}
|
|
|
|
@media screen and (width < 1355px) {
|
|
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
max-width: 70%;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 1025px) {
|
|
#master-container .body .bottom {
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 1024px) {
|
|
#master-container .body .bottom {
|
|
flex-direction: column;
|
|
}
|
|
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
max-width: 55%;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 555px) {
|
|
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
max-width: 70%;
|
|
}
|
|
|
|
#master-container .body .bottom .right .card .green section {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 500px) {
|
|
#master-container header {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#master-container header img {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (width < 400px) {
|
|
#master-container {
|
|
width: 98vw;
|
|
}
|
|
|
|
#master-container .body .middle {
|
|
width: 95%;
|
|
}
|
|
|
|
#master-container .body .bottom .left .red,
|
|
#master-container .body .bottom .right .red {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="spinner_div" style="display:none;position:fixed;">
|
|
<label style="font-weight:900;font-size:19px">Please Wait for the Processing to Complete...</label>
|
|
</div>
|
|
<main id="master-container">
|
|
<header>
|
|
<img src="/static/media/23.png" alt="img" />
|
|
<section class="right">
|
|
<h2 class="sub-heading">My Next Film Pvt. Ltd.</h2>
|
|
<p>CIN - U92419DL2021PTC381570</p>
|
|
<a href="https://mynextfilm.ai/">www.mynextfilm.ai</a>
|
|
</section>
|
|
</header>
|
|
<div id="whole_page_div" class="body">
|
|
<section class="middle">
|
|
<div class="invoice-container">
|
|
<h1 class="sub-heading">Invoice</h1>
|
|
<p id="date">{{date_at}}</p>
|
|
</div>
|
|
<div class="details-container">
|
|
<div class="left">
|
|
<p>Bill to</p>
|
|
<p>Email Id</p>
|
|
<p>Contact Number</p>
|
|
<p>Address</p>
|
|
<p>Invoice For</p>
|
|
</div>
|
|
<div class="right">
|
|
<p>{{name}}</p>
|
|
<p>{{email_id}}</p>
|
|
<p>{{phone_number}}</p>
|
|
<p>{{address}}</p>
|
|
<p>Script Conversion</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bottom">
|
|
<div class="left">
|
|
<p class="red primary-btn-greeen">Service Details</p>
|
|
<div class="card">
|
|
<div>
|
|
<p>Script Title</p>
|
|
<p>{{script_title|get_script_name}}</p>
|
|
</div>
|
|
<div>
|
|
<p>no. of pages</p>
|
|
<p>{{numPages}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Source language of screenplay</p>
|
|
<p>{{ndial_src|get_full_lang:''}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Source language of dialogues</p>
|
|
<p>{{dial_src|get_full_lang:''}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Desired language of screenplay</p>
|
|
<p>{{ndial_dest}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Desired language of dialogues</p>
|
|
<p>{{dial_dest}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Desired script of dialogues</p>
|
|
<p>{{dial_dest_script}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Whether LPP Vetting Requested ?</p>
|
|
<p>{{lpp_available}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<p class="red primary-btn-greeen">Charges Payable</p>
|
|
<div class="card">
|
|
<div>
|
|
<p>Charges as per Card rate</p>
|
|
<p class="bold">${{subtotal}}</p>
|
|
</div>
|
|
<div class="green">
|
|
<section>
|
|
<p>Early Bird Discount</p>
|
|
<p>${{early_bird_calculate}}</p>
|
|
</section>
|
|
<section>
|
|
<p>Team Discount</p>
|
|
<p>${{staff_discount_calculate}}</p>
|
|
</section>
|
|
<section>
|
|
<p>Membership Discount</p>
|
|
<p>${{membership_discount_calculate}}</p>
|
|
</section>
|
|
<section>
|
|
<p>Student Discount</p>
|
|
<p>${{student_discount_calculate}}</p>
|
|
</section>
|
|
<section class="total-discount">
|
|
<p>Total Discount</p>
|
|
<p>${{Total_discount}}</p>
|
|
</section>
|
|
</div>
|
|
<div>
|
|
<p>Net Service Charges</p>
|
|
<p>${{net_service_charge}}</p>
|
|
</div>
|
|
{% if monthly_membership %}
|
|
<div>
|
|
<p>Monthly Subscription</p>
|
|
<p>$1</p>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<p>Total Payable</p>
|
|
<p>${{remaining_amount}}</p>
|
|
</div>
|
|
<div>
|
|
<p>Taxes</p>
|
|
<p>${{gst_calculate}}</p>
|
|
</div>
|
|
<div class="light-red sub-heading-2">
|
|
<p class="gross-1">Gross Payable</p>
|
|
<p class="bold">${{net_payable}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% if lpp_available == 'YES' %}
|
|
<input id="lpp1" type="hidden" name="want_to_be_vetted" value="yes" />
|
|
{% endif %}
|
|
<section class="lower">
|
|
<div class="terms-service">
|
|
<input type="checkbox" id="agreement" value="0" onclick="incrementValue(this);" />
|
|
<label for="agreement">I Agree with the </label><a href="/terms&conditions" target="_blank" class="blue">Terms
|
|
of Payment</a>
|
|
<label id="tnc_alert" style="display:none;color:#EE4B2B">Please Accept the Terms and Conditions</label>
|
|
</div>
|
|
<div class="pay-container">
|
|
{% if balance != -1 %}
|
|
<div>
|
|
<input type="checkbox" name="pay_wallet" id="pay" value="0" onclick="incrementValue(this);" />
|
|
<label for="pay">Pay with Wallet(Rs.
|
|
<span id="wallet-balance">{{balance}}</span>)</label>
|
|
</div>
|
|
{% endif %}
|
|
<button id="pay-btn" class="primary-btn-greeen" onclick="get_payment_details();">Pay Now</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<form action="{% url 'paymentDoneC_RazorPay'%}" method="POST" id='payment-form'>
|
|
{%csrf_token%}
|
|
</form>
|
|
<div id="payment_stripe" style="display:none;background-color: rgb(255, 194, 194);color:blue;"
|
|
class="centered-content">
|
|
<form id="payment-form2">
|
|
{%csrf_token%}
|
|
<div class="method">
|
|
<h3>Choose Payment Method</h3>
|
|
<button class="border-0 font-weight-bolder justify-content-end" onclick="$('#payment_stripe').hide();" style="
|
|
background-color: #ffe2e5;
|
|
position: absolute;
|
|
color: #ee3c4d;
|
|
top: -3rem;
|
|
left: 35rem;
|
|
font-size: 25px;
|
|
">
|
|
X
|
|
</button>
|
|
<input type="hidden" name="payment_intent_id" value="{{pid}}" />
|
|
<div class="payment-elements" id="payment-element"></div>
|
|
<button class="submit-btn" id="submit">PAY NOW</button>
|
|
<div id="error-message">
|
|
<!-- Display error message to your customers here -->
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<script>
|
|
function incrementValue(checkbox) {
|
|
var $checkbox = $(checkbox); // Convert the checkbox to a jQuery object
|
|
var currentValue = parseInt($checkbox.val());
|
|
$checkbox.val(currentValue + 1);
|
|
}
|
|
</script>
|
|
<script>
|
|
function get_payment_details() {
|
|
|
|
console.log(document.getElementById('agreement').value);
|
|
if ((document.getElementById('agreement').value) % 2 == 0) {
|
|
alert("Please Agree on the Terms and Conditions");
|
|
document.getElementById('tnc_alert').style.display = "block";
|
|
} else {
|
|
let elem1 = document.getElementById("spinner_div")
|
|
elem1.style.display = "block";
|
|
$("#whole_page_div").addClass("disabledbutton");
|
|
elem1.style.position = "fixed";
|
|
elem1.style.top = "50%";
|
|
elem1.style.left = " 50%";
|
|
elem1.style.transform = "translate(-50%, -50%)";
|
|
var pay_wallet = false;
|
|
{% if balance != -1 %}
|
|
if ((document.getElementById('pay').value) % 2 != 0) {
|
|
pay_wallet = true;
|
|
}
|
|
{% endif %}
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "{% url 'conversionCheckout' %}",
|
|
data: {
|
|
'pay_wallet': pay_wallet,
|
|
'script_id': '{{script_id}}',
|
|
'want_to_be_vetted': '{{lpp_available}}',
|
|
csrfmiddlewaretoken: '{{ csrf_token }}'
|
|
},
|
|
success: function (response) {
|
|
console.log("Raaaan successfully");
|
|
elem1.style.display = "none";
|
|
$("#whole_page_div").removeClass("disabledbutton");
|
|
if (response['mode'] == 'RazorPay') {
|
|
var options = {
|
|
key: response['pk'],
|
|
amount: response['amtINR'],
|
|
currency: "INR",
|
|
order_id: response['pid'],
|
|
name: "MNF",
|
|
description: "Conversion",
|
|
image: "{% static 'logo.jpg' %}",
|
|
handler: function (response) {
|
|
// alert(response.razorpay_payment_id);
|
|
// alert(response.razorpay_order_id);
|
|
// alert(response.razorpay_signature);
|
|
var form = document.getElementById('payment-form');
|
|
var razorpay_payment_id = document.createElement('input');
|
|
razorpay_payment_id.setAttribute('type', 'hidden');
|
|
razorpay_payment_id.setAttribute('name', 'razorpay_payment_id');
|
|
razorpay_payment_id.setAttribute('value', response.razorpay_payment_id);
|
|
form.appendChild(razorpay_payment_id);
|
|
var razorpay_order_id = document.createElement('input');
|
|
razorpay_order_id.setAttribute('type', 'hidden');
|
|
razorpay_order_id.setAttribute('name', 'razorpay_order_id');
|
|
razorpay_order_id.setAttribute('value', response.razorpay_order_id);
|
|
form.appendChild(razorpay_order_id);
|
|
var razorpay_signature = document.createElement('input');
|
|
razorpay_signature.setAttribute('type', 'hidden');
|
|
razorpay_signature.setAttribute('name', 'razorpay_signature');
|
|
razorpay_signature.setAttribute('value', response.razorpay_signature);
|
|
form.appendChild(razorpay_signature);
|
|
form.submit();
|
|
|
|
},
|
|
theme: {
|
|
color: "#ee3c4d",
|
|
},
|
|
};
|
|
var rzp1 = new Razorpay(options);
|
|
rzp1.open();
|
|
} else if (response['mode'] === 'Stripe') {
|
|
|
|
const stripe = Stripe(response['pk']);
|
|
console.log("Stripe Payment -> ");
|
|
const options = {
|
|
clientSecret: response['secret_key'],
|
|
};
|
|
const elements = stripe.elements(options);
|
|
var style = {
|
|
base: {
|
|
color: "#32325d",
|
|
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
|
|
fontSmoothing: "antialiased",
|
|
fontSize: "16px",
|
|
"::placeholder": {
|
|
color: "#aab7c4",
|
|
},
|
|
},
|
|
invalid: {
|
|
color: "#fa755a",
|
|
iconColor: "#fa755a",
|
|
},
|
|
};
|
|
var paymentElement = elements.create("payment");
|
|
paymentElement.mount("#payment-element");
|
|
|
|
const form = document.getElementById("payment-form2");
|
|
document.getElementById("payment_stripe").style.display = "block";
|
|
window.scrollTo(0, document.body.scrollHeight);
|
|
form.style.display = "block";
|
|
form.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
|
|
const { error } = await stripe.confirmPayment({
|
|
//`Elements` instance that was used to create the Payment Element
|
|
elements,
|
|
confirmParams: {
|
|
return_url: window.location.origin + "/conversion/paymentDoneC",
|
|
//return_url: "{% url 'paymentDoneC' %}"
|
|
},
|
|
});
|
|
|
|
if (error) {
|
|
// This point will only be reached if there is an immediate error when
|
|
// confirming the payment. Show error to your customer (for example, payment
|
|
// details incomplete)
|
|
const messageContainer = document.querySelector("#error-message");
|
|
messageContainer.textContent = error.message;
|
|
} else {
|
|
// Your customer will be redirected to your `return_url`. For some payment
|
|
// methods like iDEAL, your customer will be redirected to an intermediate
|
|
// site first to authorize the payment, then redirected to the `return_url`.
|
|
}
|
|
});
|
|
} else if (response['mode'] === 'Corporate User' || response['mode'] === 'Institutional User') {
|
|
console.log("Redirecting to Corporate Payment")
|
|
window.location = "{% url 'paymentdoneC_Corporate' %}"
|
|
|
|
};
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
</script>
|
|
<script>
|
|
const walletBalance = document.getElementById("wallet-balance");
|
|
TotalWalletBalance = parseFloat(walletBalance.innerText);
|
|
TotalWalletBalance = TotalWalletBalance.toFixed(2);
|
|
walletBalance.innerText = TotalWalletBalance;
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
{%endblock%} |