@getmicdrop/svelte-components 2.4.0 → 2.6.1

package/dist/components/OrderSummary/OrderSummary.svelte

@@ -1,553 +0,0 @@
-<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}
-        <span translate="no">{btnText}</span>
-      {/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}
-          <span translate="no">Checkout</span>
-        {/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

@@ -1,65 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyVA;;;;;;;;;;;;;;;;;;;;;;;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"}