169 lines
6.4 KiB
HTML
169 lines
6.4 KiB
HTML
<!-- Wrapper Macros -->
|
|
{% macro subs_wrapper() %}
|
|
<div id="subs-wrapper" class="flex flex-row flex-wrap hidden w-full h-fit"></div>
|
|
{% endmacro %}
|
|
|
|
{% macro plans_wrapper() %}
|
|
<div id="plans-wrapper" class="grid gap-2 grid-cols-3 justify-content-start flex-wrap hidden min-h-[20rem]"></div>
|
|
{% endmacro %}
|
|
|
|
{% macro email_verify_wrapper() %}
|
|
<div id="email-verify-wrapper" class="flex flex-row justify-center flex-wrap hidden mx-auto my-auto h-fit w-1/2">
|
|
<div class="text-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail mx-auto mb-6"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
|
<h2 class="font-size-base mt-0">Verification Email Sent!</h2>
|
|
<p>
|
|
We have sent an email to <span id="verification-email" class="font-semibold"></span>.
|
|
Please click on the link received to verify your login request.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro address_wrapper() %}
|
|
<div id="address-card-wrapper" class="flex container hidden mx-auto my-auto justify-content-center">
|
|
<form>
|
|
<div class="form-group">
|
|
<p>Billing Name</p>
|
|
<input type="text" name="billing-name" class="form-control" />
|
|
</div>
|
|
<div class="form-group">
|
|
<p>Address</p>
|
|
<input type="text" name="address" placeholder="Address" class="form-control" />
|
|
</div>
|
|
<div class="form-group">
|
|
<p>Country</p>
|
|
<select id="country" class="custom-select" style="font-size: 14px;" name="country" class="form-control">
|
|
<option disabled selected style="font-size: 14px;">Select Country</option>
|
|
{%- for country in jingrow.db.get_all('Country') -%}
|
|
<option class="text-sm">{{ country.name }}</option>
|
|
{%- endfor -%}
|
|
</select>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="form-group mr-2">
|
|
<p>City</p>
|
|
<input type="text" name="city" class="form-control" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<p>State/Province/Region</p>
|
|
<input type="text" name="state" class="form-control" required />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<p>Postal Code</p>
|
|
<input type="text" name="postal-code" class="form-control" />
|
|
</div>
|
|
<div id="gstin" class="form-group hidden">
|
|
<p>GSTIN (applicable only for Indian customers)</p>
|
|
<input type="text" name="gstin" class="form-control" />
|
|
</div>
|
|
<div id="gstinhide" class="flex hidden justify-content-between my-2">
|
|
<button type="button" class="btn btn-light" onclick="toggleGSTField(false)">
|
|
I don't have a GSTIN
|
|
</button>
|
|
<span></span>
|
|
</div>
|
|
<div id="gstinshow" class="flex justify-content-between my-2">
|
|
<button type="button" class="btn btn-light" onclick="toggleGSTField(true)">
|
|
Add GSTIN
|
|
</button>
|
|
<span></span>
|
|
</div>
|
|
<div class="flex justify-content-between my-2">
|
|
<span></span>
|
|
<button type="button" class="btn btn-primary" onclick="updateBillingInfo()">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro checkout_wrapper() %}
|
|
<div id="checkout-wrapper" class="flex flex-col w-2/3 hidden mx-20 text-sm">
|
|
<div class="flex justify-content-between my-2">
|
|
<span>Plan</span>
|
|
<span class="new-plan"></span>
|
|
</div>
|
|
<div class="flex justify-content-between my-2">
|
|
<span>Amount / mo.</span>
|
|
<span class="new-plan-price"></span>
|
|
</div>
|
|
<div class="flex justify-content-between my-2">
|
|
<span>Billing:</span>
|
|
<select class="rounded px-2 pr-8" onchange="setTotal(this.value)">
|
|
<option class="pr-4" value="monthly">Monthly</option>
|
|
<option class="pr-4" value="annual">Annual</option>
|
|
</select>
|
|
</div>
|
|
<hr class="my-4">
|
|
<div class="flex justify-content-between my-2">
|
|
<span>GST (if applicable)</span>
|
|
<span class="gst text-red-600">-</span>
|
|
</div>
|
|
<div class="flex justify-content-between my-2">
|
|
<span>Discount</span>
|
|
<span class="discount text-green-500">-</span>
|
|
</div>
|
|
<hr class="my-4">
|
|
<div class="flex justify-content-between my-2">
|
|
<span>Total</span>
|
|
<span class="total font-semibold"></span>
|
|
</div>
|
|
<form class="flex justify-content-between my-2">
|
|
<span></span>
|
|
<button type="button" class="btn btn-primary w-36" onclick="setupStripe()">Proceed To Pay</span>
|
|
</form>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
<!-- Cards -->
|
|
{% macro success_card() %}
|
|
<div id="success-wrapper" class="mx-auto my-auto hidden w-1/2">
|
|
<div class="flex">
|
|
<div class="mr-2 grid h-4 w-4 shrink-0 place-items-center rounded-full border border-green-500 bg-green-50">
|
|
<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1.26562 3.86686L3.93229 6.53353L9.26562 1.2002" stroke="#38A160" stroke-miterlimit="10"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="font-size-base mb-2">Payment Request Received</h2>
|
|
</div>
|
|
<span>Thank you for your payment request. We will send you a confirmation email shortly. In the meantime if you have any queries please reach us at
|
|
our <a href="https://jcloud.jingrow.com/support" class="text-blue-500 hover:text-blue-500">support page</a>.</span>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro error_card() %}
|
|
<div id="error-wrapper" class="mx-auto my-auto hidden w-1/2">
|
|
<div>
|
|
<h2 class="font-size-base mb-2">Something Went Wrong</h2>
|
|
</div>
|
|
<span>For some reason the payment request was could not complete. Please contact <a href="https://jcloud.jingrow.com/support" class="text-blue-500">support</a> in order to get a resolution at the earliest.</span>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro stripe_wrapper() %}
|
|
<div id="stripe-wrapper" class="hidden">
|
|
<div id="card" class="hidden" ref="card-element"></div>
|
|
<button id="pay-btn" type="button" class="btn btn-primary w-full mt-6 py-3 rounded-lg" onclick="handlePayment()">
|
|
<span id="pay-btn-spinner" class="spinner-border spinner-border-sm mr-3 hidden"></span>
|
|
<span id="pay-btn-text">Pay Now</span>
|
|
</button>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro load_stripe() %}
|
|
<div id="loading-stripe" class="mx-auto my-auto hidden">
|
|
<span class="spinner-border spinner-border-sm mr-3" role="status"></span><span>Processing payment request</span>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro load_subs() %}
|
|
<div id="loading" class="mx-auto my-auto">
|
|
<span class="spinner-border spinner-border-sm mr-3" role="status"></span><span>Loading Subscriptions </span>
|
|
</div>
|
|
{% endmacro %}
|