371 lines
13 KiB
Svelte
371 lines
13 KiB
Svelte
<script lang="ts">
|
|
// export let data;
|
|
// console.log(`ae_events_leads exhibit [slug] leads_payment.svelte data:`, data);
|
|
|
|
import { ae_util } from '$lib/ae_utils';
|
|
import { liveQuery } from "dexie";
|
|
import { db_events } from "$lib/db_events";
|
|
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
|
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
|
|
|
|
// let param_slug_event_exhibit_id = data.params.slug;
|
|
|
|
let event_exhibit_obj = liveQuery(
|
|
() => db_events.exhibits.get($events_slct.exhibit_id)
|
|
);
|
|
|
|
if (!$events_sess.stripe) {
|
|
$events_sess.stripe = {};
|
|
}
|
|
if (!$events_sess.stripe.license_qty) {
|
|
$events_sess.stripe.license_qty = 1;
|
|
$events_sess.stripe.rental_qty = 0;
|
|
$events_sess.stripe.client_reference_id = $events_slct.exhibit_id;
|
|
// $events_sess.stripe.btn_payment_id
|
|
|
|
console.log(`$events_sess.stripe =`, $events_sess.stripe);
|
|
}
|
|
|
|
// $: if ($events_sess.stripe.rental_option) {
|
|
// console.log('Rental Option', $events_sess.stripe.rental_option);
|
|
// if ($events_sess.stripe.rental_option == true && !$events_sess.stripe.rental_qty) {
|
|
// $events_sess.stripe.rental_qty = 1;
|
|
// } else if (!$events_sess.stripe.rental_option) {
|
|
// $events_sess.stripe.rental_qty = 0;
|
|
// }
|
|
// } else {
|
|
// $events_sess.stripe.rental_option = false;
|
|
// }
|
|
|
|
$: if ($events_sess.stripe && $events_sess.stripe.license_qty >= 0 || $events_sess.stripe.rental_qty >= 0) {
|
|
console.log(`$events_sess.stripe.license_qty=${$events_sess.stripe.license_qty} and $events_sess.stripe.rental_qty=${$events_sess.stripe.rental_qty}`);
|
|
// $events_sess.stripe.license_qty = parseInt($events_sess.stripe.license_qty);
|
|
|
|
// $events_sess.stripe.rental_qty = parseInt($events_sess.stripe.rental_qty);
|
|
|
|
if ($events_sess.stripe.rental_qty == 0) {
|
|
// $events_sess.stripe.rental_qty = 0;
|
|
|
|
if ($events_sess.stripe.license_qty == 1) {
|
|
$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_1_license;
|
|
}
|
|
if ($events_sess.stripe.license_qty == 3) {
|
|
$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_3_license;
|
|
}
|
|
if ($events_sess.stripe.license_qty == 6) {
|
|
$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_6_license;
|
|
}
|
|
if ($events_sess.stripe.license_qty == 10) {
|
|
$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_10_license;
|
|
}
|
|
} else {
|
|
if ($events_sess.stripe.license_qty == 1) {
|
|
$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_1_license_rental;
|
|
}
|
|
if ($events_sess.stripe.license_qty == 3) {
|
|
$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_3_license_rental;
|
|
}
|
|
if ($events_sess.stripe.license_qty == 6) {
|
|
$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_6_license_rental;
|
|
}
|
|
if ($events_sess.stripe.license_qty == 10) {
|
|
$events_sess.stripe.btn_payment_id = $events_sess.stripe.btn_10_license_rental;
|
|
}
|
|
|
|
}
|
|
|
|
// We need to force the Stripe Buy Button to reload. I was expecting this to happen automatically when the payment ID changed.
|
|
// console.log(document.getElementById('stripe_buy_button'));
|
|
|
|
if (!$events_sess.stripe.client_reference_id) {
|
|
$events_sess.stripe.client_reference_id = $events_slct.exhibit_id;
|
|
}
|
|
console.log(`$events_sess.stripe =`, $events_sess.stripe);
|
|
|
|
if (document.getElementById('stripe_buy_button')) {
|
|
document.getElementById('stripe_buy_button').remove();
|
|
|
|
let stripe_buy_button = document.createElement('stripe-buy-button');
|
|
stripe_buy_button.id = 'stripe_buy_button';
|
|
stripe_buy_button.setAttribute('buy-button-id', $events_sess.stripe.btn_payment_id);
|
|
stripe_buy_button.setAttribute('publishable-key', $events_sess.stripe.publishable_key);
|
|
stripe_buy_button.setAttribute('client-reference-id', $events_sess.stripe.client_reference_id);
|
|
document.getElementById('stripe_buy_button_container').appendChild(stripe_buy_button);
|
|
} else {
|
|
console.log('No Stripe Buy Button found.');
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<section class="tab__payment flex flex-col wrap justify-center items-center space-y-4">
|
|
|
|
<h2 class="h3">
|
|
<span class="fas fa-credit-card mx-1"></span>
|
|
Payment
|
|
</h2>
|
|
|
|
{#if $events_loc?.leads.auth_exhibit_kv[$events_slct.exhibit_id]}
|
|
{#if $event_exhibit_obj?.priority}
|
|
<h3 class="h4">Marked as Paid</h3>
|
|
|
|
<div class="border border-slate-500/10 p-2 variant-soft-success space-y-4">
|
|
<p>Thank you for your payment. You have purchased {$event_exhibit_obj?.license_max} user license(s) for the lead retrieval service with your booth at ISHLT 2024 in Prague.</p>
|
|
|
|
{#if $event_exhibit_obj?.leads_device_sm_qty > 0}
|
|
<p>You have also rented {$event_exhibit_obj?.leads_device_sm_qty} tablet(s) for using with the lead retrievals. You will be able to pick up your rental tablets at ISHLT's onsite registration.</p>
|
|
{:else}
|
|
<p>You have not rented any tablets for scanning. You can use your own device(s) with this service.</p>
|
|
{/if}
|
|
|
|
<p>To save space while using this app you can hide this payment tab now that you have paid for your licenses. This can be unhidden under the Conf(ig) tab if needed.</p>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
on:click={() => {
|
|
let confirm_hide = confirm('You can unhide this later under the Config tab.');
|
|
if (confirm_hide) {
|
|
$events_loc.leads.show_option__paid_tab = false;
|
|
$events_loc.leads.tab[$events_slct.exhibit_id] = 'start';
|
|
}
|
|
}}
|
|
class="btn variant-soft-primary"
|
|
title="This payment tab can be hidden once marked as paid."
|
|
>
|
|
<span class="fas fa-eye-slash m-1"></span>
|
|
Hide This Paid Tab?
|
|
</button>
|
|
|
|
{:else}
|
|
<h3 class="h4">Not Marked as Paid</h3>
|
|
|
|
<div class="border border-slate-500/10 p-2 variant-soft-secondary">
|
|
<p>Please select the number of licenses to purchase and if you need to rent any tablets for scanning. As a reminder, you can use your own device (cell phone, tablet, laptop, etc) to scan the QR codes on the badges of the attendees. Tablet rentals are limited in supply for ISHLT 2024 in Prague and will be given out on a first come first served basis.</p>
|
|
</div>
|
|
|
|
<script async
|
|
src="https://js.stripe.com/v3/buy-button.js">
|
|
</script>
|
|
|
|
<div class="w-2/3">
|
|
<label>
|
|
Select number of licenses to purchase:<br>
|
|
<select
|
|
id="license_qty"
|
|
name="license_qty"
|
|
bind:value={$events_sess.stripe.license_qty}
|
|
class="select max-w-72"
|
|
>
|
|
<option value={1}>
|
|
1 user license - $120
|
|
</option>
|
|
<option value={3}>
|
|
Up to 3 user licenses - $330
|
|
</option>
|
|
<option value={6}>
|
|
Up to 6 user licenses - $660
|
|
</option>
|
|
<option value={10}>
|
|
Up to 10 user licenses - $1,100
|
|
</option>
|
|
</select>
|
|
</label>
|
|
<p class="text-sm">Each person associated with your exhibit needs a license to use the lead retrieval service for exhibitors.</p>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div>
|
|
CHK Do you need to rent tablets as well?
|
|
<input
|
|
type="checkbox"
|
|
name="rental_option"
|
|
value="testing"
|
|
bind:checked={$events_sess.stripe.rental_option}
|
|
on:click={() => {
|
|
console.log('Rental Option', $events_sess.stripe.rental_option);
|
|
// $events_sess.stripe.rental_qty = 0;
|
|
}}
|
|
>
|
|
</div> -->
|
|
|
|
<!-- {#if $events_sess.stripe.rental_qty > 0} -->
|
|
<!-- <div> -->
|
|
<!-- Do you need to rent tablets as well?
|
|
<input
|
|
type="checkbox"
|
|
name="rental_option"
|
|
value={true}
|
|
bind:checked={$events_sess.stripe.rental_option}
|
|
on:click={() => {
|
|
console.log('Rental Option');
|
|
if ($events_sess.stripe.rental_option) {
|
|
$events_sess.stripe.rental_qty = 1;
|
|
} else {
|
|
$events_sess.stripe.rental_qty = 0;
|
|
}
|
|
// $events_sess.stripe.rental_qty = 0;
|
|
}}
|
|
> -->
|
|
|
|
<!-- <button on:click={() => {
|
|
console.log('License(s) Only');
|
|
$events_sess.stripe.rental_qty = 0;
|
|
}}
|
|
class="btn variant-soft-secondary"
|
|
>
|
|
License(s) Only
|
|
</button> -->
|
|
<!-- </div> -->
|
|
|
|
<div class="w-2/3">
|
|
<label>
|
|
Select number of tablets to rent:<br>
|
|
<select
|
|
id="rental_qty"
|
|
name="rental_qty"
|
|
bind:value={$events_sess.stripe.rental_qty}
|
|
class="select max-w-52"
|
|
>
|
|
<option value={0}>No tablet rentals - $0</option>
|
|
<option value={1}>1 tablet - $115</option>
|
|
<option value={2}>2 tablets - $230</option>
|
|
<option value={3}>3 tablets - $345</option>
|
|
<option value={4}>4 tablets - $460</option>
|
|
<option value={5}>5 tablets - $575</option>
|
|
<option value={6}>6 tablets - $690</option>
|
|
<option value={7}>7 tablets - $805</option>
|
|
<option value={8}>8 tablets - $920</option>
|
|
<option value={9}>9 tablets - $1,035</option>
|
|
<option value={10}>10 tablets - $1,150</option>
|
|
</select>
|
|
</label>
|
|
<p class="text-sm">You can use your own device(s) with this service. Renting tablets for scanning is not required.</p>
|
|
</div>
|
|
|
|
<!-- {:else} -->
|
|
|
|
<!-- <div>
|
|
BTN Do you need to rent tablets as well?
|
|
<button on:click={() => {
|
|
console.log('License(s) with Tablet Rental');
|
|
$events_sess.stripe.rental_qty = 1;
|
|
}}
|
|
class="btn variant-soft-secondary"
|
|
>
|
|
License(s) with Tablet Rental
|
|
</button>
|
|
</div> -->
|
|
<!-- {/if} -->
|
|
|
|
|
|
{#if $events_sess.stripe.btn_payment_id}
|
|
<div id="stripe_buy_button_container" class="w-2/3">
|
|
<stripe-buy-button
|
|
id="stripe_buy_button"
|
|
buy-button-id={$events_sess.stripe.btn_payment_id}
|
|
publishable-key={$events_sess.stripe.publishable_key}
|
|
client-reference-id={$events_sess.stripe.client_reference_id}
|
|
|
|
>
|
|
</stripe-buy-button>
|
|
<p class="text-sm">You have selected to purchase {$events_sess.stripe.license_qty} user license(s) and rent {$events_sess.stripe.rental_qty} tablet(s). Press the button above to pay by credit card, debit card, or ACH direct debit.</p>
|
|
<p class="text-sm variant-soft-warning"><strong>WARNING:</strong> Please be sure to double check and update the quantities on the next page.</p>
|
|
</div>
|
|
{/if}
|
|
|
|
|
|
|
|
<div class="border border-slate-500/10 p-2 variant-soft-warning">
|
|
<p><strong>NOTE:</strong> Your payment will be reviewed and is not reflected immediately on this page for your exhibit. It may take up to 2 business days for this to show as being paid. If you have any questions or concerns please email <a href="mailto:exhibits@oneskyit.com" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">exhibits@oneskyit.com</a>.</p>
|
|
</div>
|
|
|
|
<!-- <div>
|
|
1 user license<br>
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1OvqWJ2gJkNsDuiNqMCWz5nG"
|
|
publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
|
|
>
|
|
</stripe-buy-button>
|
|
</div> -->
|
|
|
|
<!-- <div>
|
|
1 user license with tablet rental<br>
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1OvqVA2gJkNsDuiNhk9r8Io2"
|
|
publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
|
|
>
|
|
</stripe-buy-button>
|
|
</div> -->
|
|
|
|
<!-- <div>
|
|
Up to 3 user licenses<br>
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1OvrI22gJkNsDuiNXjBg3c4Y"
|
|
publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
|
|
>
|
|
</stripe-buy-button>
|
|
</div> -->
|
|
|
|
<!-- <div>
|
|
Up to 3 user licenses with tablet rental<br>
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1OvrKa2gJkNsDuiNhSBCkNau"
|
|
publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
|
|
>
|
|
</stripe-buy-button>
|
|
</div> -->
|
|
|
|
<!-- <hr> -->
|
|
|
|
<!-- <div>
|
|
Up to 6 user licenses<br>
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1OvrWc2gJkNsDuiN7mnwvZNL"
|
|
publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
|
|
>
|
|
</stripe-buy-button>
|
|
</div> -->
|
|
|
|
<!-- <div>
|
|
Up to 6 user licenses with tablet rental<br>
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1OvrXP2gJkNsDuiNZpWZs3Uy"
|
|
publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
|
|
>
|
|
</stripe-buy-button>
|
|
</div> -->
|
|
|
|
<!-- <div>
|
|
Up to 10 user licenses<br>
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1OvrPM2gJkNsDuiNRCMHfSuz"
|
|
publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
|
|
>
|
|
</stripe-buy-button>
|
|
</div> -->
|
|
|
|
<!-- <div>
|
|
Up to 10 user licenses with tablet rental<br>
|
|
<stripe-buy-button
|
|
buy-button-id="buy_btn_1OvrPs2gJkNsDuiN1nPkjPOM"
|
|
publishable-key="pk_live_zqaWNDfak2eDHeqnRiyaJcFi"
|
|
>
|
|
</stripe-buy-button>
|
|
</div> -->
|
|
|
|
<!-- </div> -->
|
|
|
|
{/if}
|
|
|
|
{:else}
|
|
<div class="variant-soft-warning">Please go to the Main tab to login using the shared staff passcode for this exhibit. Then select a license to use.</div>
|
|
{/if}
|
|
|
|
|
|
|
|
</section>
|