@getmicdrop/svelte-components 2.0.13 → 2.1.0

package/dist/components/OrderSummary/OrderSummary.svelte

@@ -0,0 +1,553 @@
+<script>
+  import { fly, fade } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { createEventDispatcher } from 'svelte';
+  import ChevronDown from 'carbon-icons-svelte/lib/ChevronDown.svelte';
+  import Close from 'carbon-icons-svelte/lib/Close.svelte';
+  import Spinner from '../Spinner/Spinner.svelte';
+
+  export let loading = false;
+  export let quantities = {};
+  export let eventTickets = [];
+
+  export let checkoutTicket = null;
+  export let isAgreed = true;
+  export let btnText = 'Checkout';
+  export let promoApplied = false;
+  export let promoDiscount = 0;
+  export let currentPromoRule = null;
+
+  export let executePurchase = null;
+  export let elements = null;
+
+  export let venueServiceCharge = {
+    serviceFeeCents: 0,
+    serviceFeePercentage: 0,
+    serviceFeeChargeType: 'both', // 'both', 'percent', or 'flat'
+    maxServiceFeeCents: 0, // 0 means no cap
+    taxPercentage: 0, // Default 0% - only charge tax if venue has set it
+  };
+
+  $: feeFor = price => {
+    const chargeType = venueServiceCharge.serviceFeeChargeType || 'both';
+    let fee = 0;
+
+    // Calculate fee based on charge type
+    if (chargeType === 'flat' || chargeType === 'both') {
+      fee += (venueServiceCharge.serviceFeeCents || 0) / 100;
+    }
+    if (chargeType === 'percent' || chargeType === 'both') {
+      fee += ((venueServiceCharge.serviceFeePercentage || 0) / 100) * price;
+    }
+
+    // Apply max cap if set (convert from cents to dollars for comparison)
+    const maxFee = venueServiceCharge.maxServiceFeeCents || 0;
+    if (maxFee > 0 && fee > maxFee / 100) {
+      fee = maxFee / 100;
+    }
+
+    return fee;
+  };
+
+  const dispatch = createEventDispatcher();
+
+  let showFooter = false;
+  let subtotal = 0;
+  let fees = 0;
+  let taxes = 0;
+  let total = 0;
+  let showOrderSummaryOnMobile = false;
+
+  function makeOrderSummaryVisible() {
+    showOrderSummaryOnMobile = !showOrderSummaryOnMobile;
+  }
+
+  // Calculate discounted price for a ticket
+  $: getDiscountedPrice = (ticket) => {
+    if (!currentPromoRule?.provideDiscount) return null;
+
+    // Check if this discount applies to this specific ticket
+    // If discountTicketIds is empty or not provided, discount applies to all tickets
+    // If discountTicketIds has values, only apply to those specific ticket IDs
+    const discountTicketIds = currentPromoRule.discountTicketIds || [];
+    if (discountTicketIds.length > 0 && !discountTicketIds.includes(ticket.ID)) {
+      return null; // This ticket is not eligible for the discount
+    }
+
+    const basePrice = parseFloat(ticket.price) || 0;
+    const discountAmount = parseFloat(currentPromoRule?.amount || '0') || 0;
+    if (currentPromoRule.discountType === '%') {
+      return (basePrice * (1 - discountAmount / 100)).toFixed(2);
+    } else if (currentPromoRule.discountType === '$') {
+      return Math.max(0, basePrice - discountAmount).toFixed(2);
+    }
+    return null;
+  };
+
+  $: showFooter = totalQuantity > 0;
+
+  // Calculate subtotal without any discounts (for calculating savings)
+  $: subtotalWithoutDiscount = Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    if (!ticket) return acc;
+    return acc + quantities[key] * ticket.price;
+  }, 0);
+
+  // Calculate subtotal with discounts applied
+  $: subtotal = Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    if (!ticket) return acc;
+    const discountedPrice = getDiscountedPrice(ticket);
+    const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
+    return acc + quantities[key] * priceToUse;
+  }, 0);
+
+  // Calculate actual savings from promo code
+  $: promoSavings = currentPromoRule?.provideDiscount ? (subtotalWithoutDiscount - subtotal) : 0;
+
+  $: fees = Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    if (!ticket || ticket.price == 0) return acc;
+    const discountedPrice = getDiscountedPrice(ticket);
+    const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
+    return acc + quantities[key] * feeFor(priceToUse);
+  }, 0);
+  $: taxRate = (venueServiceCharge.taxPercentage || 0) / 100;
+  $: taxes = subtotal > 0 ? subtotal * taxRate : 0;
+  // When currentPromoRule is used, discounts are already applied per-ticket in subtotal calculation
+  // Only subtract promoDiscount separately when NOT using currentPromoRule (legacy behavior)
+  // Use Math.max(0, ...) to prevent negative totals in edge cases
+  $: total = Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0));
+  $: dispatch('priceUpdate', { subtotal, fees, taxes, total, promoSavings });
+  $: totalQuantity = Object.values(quantities).reduce((sum, q) => sum + q, 0);
+</script>
+
+<div
+  id="orderSummary"
+  class="order-summary desktop-only h-fit rounded-lg"
+>
+  <div class="summary-header px-5 py-4">
+    <h2 class="text-lg font-semibold text-primary">
+      Order summary
+    </h2>
+  </div>
+
+  <div class="px-5 pb-5">
+    {#if totalQuantity === 0}
+      <!-- Empty state -->
+      <div class="py-8 text-center">
+        <p class="text-tertiary text-sm">Select tickets to continue</p>
+      </div>
+    {:else}
+      <!-- Selected tickets - always show original prices -->
+      {#each Object.keys(quantities) as key}
+        {#if quantities[key] > 0}
+          {#each eventTickets as ticket}
+            {#if ticket.ID == key}
+              <div class="ticket-line flex justify-between py-3">
+                <div>
+                  <p class="font-medium text-primary">{ticket.name}</p>
+                  <p class="text-sm text-tertiary">
+                    {#if ticket.price === 0}
+                      Free × {quantities[key]}
+                    {:else}
+                      ${ticket.price.toFixed(2)} × {quantities[key]}
+                    {/if}
+                  </p>
+                </div>
+                <div class="font-medium text-primary">
+                  {ticket.price === 0
+                    ? 'Free'
+                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        {/if}
+      {/each}
+
+      <!-- Price breakdown -->
+      <div class="flex flex-col py-3 gap-2 text-sm">
+        {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
+          <div class="flex justify-between text-secondary">
+            <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        {#if promoSavings > 0}
+          <div class="flex justify-between promo-discount-line">
+            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
+          </div>
+        {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
+          <div class="flex justify-between promo-discount-line">
+            <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        <div class="flex justify-between text-secondary">
+          <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between text-secondary">
+          <span>Fees</span><span>${fees.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between text-secondary">
+          <span>Taxes</span><span>${taxes.toFixed(2)}</span>
+        </div>
+      </div>
+
+      <!-- Total -->
+      <div class="total-line flex justify-between font-semibold text-primary py-4 text-lg">
+        <span>Total</span><span>${total.toFixed(2)}</span>
+      </div>
+    {/if}
+
+    <!-- Terms of service -->
+    {#if totalQuantity > 0 && btnText === 'Place order'}
+      <p class="terms-text">
+        By selecting Place order, I agree to the <a href="https://get-micdrop.com/tos" class="terms-link" target="_blank" rel="noopener noreferrer">terms of service</a>
+      </p>
+    {/if}
+
+    <!-- Checkout button -->
+    <button
+      class="checkout-btn w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors"
+      class:disabled={totalQuantity === 0}
+      on:click={() => {
+        if (totalQuantity === 0) return;
+        if (executePurchase) {
+          executePurchase(elements);
+        } else if (checkoutTicket) {
+          checkoutTicket();
+        }
+      }}
+      disabled={totalQuantity === 0}
+    >
+      {#if loading}
+        <Spinner size="sm" color="white" />
+      {:else}
+        {btnText}
+      {/if}
+    </button>
+  </div>
+</div>
+
+{#if showOrderSummaryOnMobile}
+  <!-- Backdrop overlay - dims background -->
+  <button
+    class="mobile-backdrop mobile-only"
+    on:click={() => (showOrderSummaryOnMobile = false)}
+    aria-label="Close order summary"
+    transition:fade={{ duration: 200 }}
+  ></button>
+  <!-- Drawer - stays bright -->
+  <div
+    in:fly={{ y: 800, duration: 300, easing: cubicOut }}
+    out:fly={{ y: 800, duration: 300, easing: cubicOut }}
+    class="mobile-summary mobile-only fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-[99]"
+  >
+    <div class="mobile-summary-header flex flex-row justify-between items-center px-5 py-4">
+      <h2 class="text-xl font-semibold text-primary">
+        Order summary
+      </h2>
+      <button
+        on:click={() => (showOrderSummaryOnMobile = false)}
+        class="close-btn transition-colors p-2 rounded-lg"
+        aria-label="Close order summary"
+      >
+        <Close size={28} />
+      </button>
+    </div>
+
+    <div class="px-5 pb-5">
+      <!-- Mobile ticket list - always show original prices -->
+      {#each Object.keys(quantities) as key}
+        {#if quantities[key] > 0}
+          {#each eventTickets as ticket}
+            {#if ticket.ID == key}
+              <div class="mobile-ticket-line flex justify-between py-4">
+                <div>
+                  <p class="font-semibold text-primary">{ticket.name}</p>
+                  <p class="text-sm text-tertiary">
+                    {#if ticket.price === 0}
+                      Free × {quantities[key]}
+                    {:else}
+                      ${ticket.price.toFixed(2)} × {quantities[key]}
+                    {/if}
+                  </p>
+                </div>
+                <div class="font-semibold text-primary">
+                  {ticket.price === 0
+                    ? 'Free'
+                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        {/if}
+      {/each}
+
+      <div class="flex flex-col py-4 gap-3 text-secondary">
+        {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
+          <div class="flex justify-between">
+            <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        {#if promoSavings > 0}
+          <div class="flex justify-between promo-discount-line">
+            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
+          </div>
+        {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
+          <div class="flex justify-between promo-discount-line">
+            <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        <div class="flex justify-between">
+          <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between">
+          <span>Fees</span><span>${fees.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between">
+          <span>Taxes</span><span>${taxes.toFixed(2)}</span>
+        </div>
+      </div>
+
+      <div class="mobile-total flex justify-between font-bold text-primary py-5">
+        <span>Total</span><span>${total.toFixed(2)}</span>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if showFooter}
+  <div
+    transition:fly={{ y: 100, duration: 200 }}
+    class="mobile-footer mobile-only fixed bottom-0 left-0 right-0 z-[500]"
+  >
+    <div class="mobile-footer-content">
+      <button class="mobile-footer-left" on:click={makeOrderSummaryVisible}>
+        <span class="mobile-footer-tickets">
+          {totalQuantity} {totalQuantity > 1 ? 'tickets' : 'ticket'}
+          <ChevronDown size={16} class="chevron-icon transition-transform duration-200 {showOrderSummaryOnMobile ? 'rotate-180' : ''}" />
+        </span>
+        <span class="mobile-footer-price">${total.toFixed(2)}</span>
+      </button>
+
+      <button
+        class="checkout-btn mobile-footer-btn"
+        on:click={() => {
+          if (executePurchase) {
+            executePurchase(elements);
+          } else if (checkoutTicket) {
+            checkoutTicket();
+          }
+        }}
+        disabled={totalQuantity === 0 || !isAgreed}
+      >
+        {#if loading}
+          <Spinner size="sm" color="white" />
+        {:else}
+          Checkout
+        {/if}
+      </button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  /* Custom breakpoint at 872px for desktop/mobile switch */
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: block;
+  }
+
+  @media (min-width: 872px) {
+    .desktop-only {
+      display: block;
+    }
+
+    .mobile-only {
+      display: none !important;
+    }
+  }
+
+  /* Theme-responsive colors using CSS variables */
+  .order-summary {
+    background-color: hsl(var(--BG-Primary));
+    border: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .summary-header {
+    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .text-primary {
+    color: hsl(var(--Text-Primary));
+  }
+
+  .text-secondary {
+    color: hsl(var(--Text-Secondary));
+  }
+
+  .text-tertiary {
+    color: hsl(var(--Text-Tartiary));
+  }
+
+  .ticket-line {
+    border-bottom: 1px solid hsl(var(--Stroke-Secondary) / 0.5);
+  }
+
+  .promo-discount-line {
+    color: hsl(var(--Accent-Success));
+  }
+
+  .total-line {
+    border-top: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .terms-text {
+    font-size: 12px;
+    color: hsl(var(--Text-Tartiary));
+    text-align: center;
+    margin: 0 0 12px 0;
+  }
+
+  .terms-link {
+    color: hsl(var(--Brand-Primary));
+    text-decoration: underline;
+  }
+
+  .terms-link:hover {
+    opacity: 0.8;
+  }
+
+  .checkout-btn {
+    background-color: hsl(var(--Brand-Primary));
+    color: white;
+    -moz-user-select: none;
+         user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .checkout-btn:hover:not(:disabled) {
+    background-color: hsl(var(--Brand-Primary) / 0.9);
+  }
+
+  .checkout-btn.disabled,
+  .checkout-btn:disabled {
+    background-color: hsl(var(--BG-Quaternary));
+    color: hsl(var(--Text-Tartiary));
+    cursor: not-allowed;
+  }
+
+  /* Mobile backdrop - dims background behind drawer */
+  .mobile-backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 98;
+    border: none;
+    cursor: pointer;
+  }
+
+  /* Mobile summary drawer - stays bright above backdrop */
+  .mobile-summary {
+    background-color: hsl(var(--BG-Primary));
+    max-height: 80vh;
+    border-radius: 16px 16px 0 0;
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+    z-index: 99;
+  }
+
+  .mobile-summary-header {
+    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .close-btn {
+    color: hsl(var(--Text-Tartiary));
+  }
+
+  .close-btn:hover {
+    color: hsl(var(--Text-Primary));
+    background-color: hsl(var(--BG-Secondary));
+  }
+
+  .mobile-ticket-line {
+    border-bottom: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  .mobile-total {
+    border-top: 1px solid hsl(var(--Stroke-Secondary));
+  }
+
+  /* Mobile footer */
+  .mobile-footer {
+    background-color: hsl(var(--BG-Primary));
+    border-top: 1px solid hsl(var(--Stroke-Secondary));
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    padding-bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
+    -moz-user-select: none;
+         user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .mobile-footer-content {
+    display: flex;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .mobile-footer-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-shrink: 0;
+    white-space: nowrap;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .mobile-footer-tickets {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    font-weight: 400;
+    color: hsl(var(--Text-Secondary));
+  }
+
+  .mobile-footer-price {
+    font-size: 20px;
+    font-weight: 700;
+    color: hsl(var(--Text-Primary));
+  }
+
+  .mobile-footer-btn {
+    flex: 1;
+    min-width: 140px;
+    height: 48px;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.chevron-icon) {
+    color: hsl(var(--Text-Tartiary));
+  }
+</style>

package/dist/components/OrderSummary/OrderSummary.svelte.d.ts

@@ -0,0 +1,65 @@
+export default OrderSummary;
+type OrderSummary = SvelteComponent<{
+    loading?: boolean | undefined;
+    quantities?: {} | undefined;
+    eventTickets?: any[] | undefined;
+    checkoutTicket?: null | undefined;
+    isAgreed?: boolean | undefined;
+    btnText?: string | undefined;
+    promoApplied?: boolean | undefined;
+    promoDiscount?: number | undefined;
+    currentPromoRule?: null | undefined;
+    executePurchase?: null | undefined;
+    elements?: null | undefined;
+    venueServiceCharge?: {
+        serviceFeeCents: number;
+        serviceFeePercentage: number;
+        serviceFeeChargeType: string;
+        maxServiceFeeCents: number;
+        taxPercentage: number;
+    } | undefined;
+}, {
+    priceUpdate: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const OrderSummary: $$__sveltets_2_IsomorphicComponent<{
+    loading?: boolean | undefined;
+    quantities?: {} | undefined;
+    eventTickets?: any[] | undefined;
+    checkoutTicket?: null | undefined;
+    isAgreed?: boolean | undefined;
+    btnText?: string | undefined;
+    promoApplied?: boolean | undefined;
+    promoDiscount?: number | undefined;
+    currentPromoRule?: null | undefined;
+    executePurchase?: null | undefined;
+    elements?: null | undefined;
+    venueServiceCharge?: {
+        serviceFeeCents: number;
+        serviceFeePercentage: number;
+        serviceFeeChargeType: string;
+        maxServiceFeeCents: number;
+        taxPercentage: number;
+    } | undefined;
+}, {
+    priceUpdate: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=OrderSummary.svelte.d.ts.map

package/dist/components/OrderSummary/OrderSummary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuVA;;;;;;;;;;;;;;;;;;;;;;;mBAA2S;6CAT9P,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}