@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/calendar/OrderSummary/OrderSummary.svelte

@@ -1,327 +1,367 @@
-<script>
-  import { fly, fade } from 'svelte/transition';
-  import { cubicOut } from 'svelte/easing';
-  import { ChevronDownOutline, CloseOutline } from '../../primitives/Icons';
-  import Spinner from '../../primitives/Spinner/Spinner.svelte';
-  import { typography } from '../../tokens/typography';
-
-  let {
-    loading = false,
-    quantities = {},
-    eventTickets = [],
-    checkoutTicket = null,
-    isAgreed = true,
-    btnText = 'Checkout',
-    promoApplied = false,
-    promoDiscount = 0,
-    currentPromoRule = null,
-    executePurchase = null,
-    elements = null,
-    venueServiceCharge = {
-      serviceFeeCents: 0,
-      serviceFeePercentage: 0,
-      serviceFeeChargeType: 'both',
-      maxServiceFeeCents: 0,
-      taxPercentage: 0,
-    },
-    onPriceUpdate,
-  } = $props();
-
-  let showOrderSummaryOnMobile = $state(false);
-
-  function feeFor(price) {
-    const chargeType = venueServiceCharge.serviceFeeChargeType || 'both';
-    let fee = 0;
-
-    if (chargeType === 'flat' || chargeType === 'both') {
-      fee += (venueServiceCharge.serviceFeeCents || 0) / 100;
-    }
-    if (chargeType === 'percent' || chargeType === 'both') {
-      fee += ((venueServiceCharge.serviceFeePercentage || 0) / 100) * price;
-    }
-
-    const maxFee = venueServiceCharge.maxServiceFeeCents || 0;
-    if (maxFee > 0 && fee > maxFee / 100) {
-      fee = maxFee / 100;
-    }
-
-    return fee;
-  }
-
-  function makeOrderSummaryVisible() {
-    showOrderSummaryOnMobile = !showOrderSummaryOnMobile;
-  }
-
-  function getDiscountedPrice(ticket) {
-    if (!currentPromoRule?.provideDiscount) return null;
-
-    const discountTicketIds = currentPromoRule.discountTicketIds || [];
-    if (discountTicketIds.length > 0 && !discountTicketIds.includes(ticket.ID)) {
-      return null;
-    }
-
-    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;
-  }
-
-  let totalQuantity = $derived(Object.values(quantities).reduce((sum, q) => sum + q, 0));
-  let showFooter = $derived(totalQuantity > 0);
-
-  let subtotalWithoutDiscount = $derived(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));
-
-  let subtotal = $derived(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));
-
-  let promoSavings = $derived(currentPromoRule?.provideDiscount ? (subtotalWithoutDiscount - subtotal) : 0);
-
-  let fees = $derived(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));
-
-  let taxRate = $derived((venueServiceCharge.taxPercentage || 0) / 100);
-  let taxes = $derived(subtotal > 0 ? subtotal * taxRate : 0);
-  let total = $derived(Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)));
-
-  $effect(() => {
-    onPriceUpdate?.({ subtotal, fees, taxes, total, promoSavings });
-  });
-</script>
-
-<div
-  id="orderSummary"
-  class="hidden min-[872px]:block h-fit rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
->
-  <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-600">
-    <h3 class={typography.h3}>
-      Order summary
-    </h3>
-  </div>
-
-  <div class="px-5 pb-5">
-    {#if totalQuantity === 0}
-      <div class="py-8 text-center">
-        <p class="{typography.smMuted}">Select tickets to continue</p>
-      </div>
-    {:else}
-      {#each Object.keys(quantities) as key}
-        {#if quantities[key] > 0}
-          {#each eventTickets as ticket}
-            {#if ticket.ID == key}
-              <div class="flex justify-between py-3 border-b border-gray-200/50 dark:border-gray-600/50">
-                <div>
-                  <p class="{typography.label}">{ticket.name}</p>
-                  <p class="{typography.smMuted}">
-                    {#if ticket.price === 0}
-                      Free x {quantities[key]}
-                    {:else}
-                      ${ticket.price.toFixed(2)} x {quantities[key]}
-                    {/if}
-                  </p>
-                </div>
-                <div class="{typography.label}">
-                  {ticket.price === 0
-                    ? 'Free'
-                    : `$${(ticket.price * quantities[key]).toFixed(2)}`}
-                </div>
-              </div>
-            {/if}
-          {/each}
-        {/if}
-      {/each}
-
-      <div class="{`${typography.sm} flex flex-col py-3 gap-2`}">
-        {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
-          <div class="flex justify-between text-gray-600 dark:text-gray-300">
-            <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
-          </div>
-        {/if}
-        {#if promoSavings > 0}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
-            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
-          </div>
-        {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
-            <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
-          </div>
-        {/if}
-        <div class="flex justify-between text-gray-600 dark:text-gray-300">
-          <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
-        </div>
-        <div class="flex justify-between text-gray-600 dark:text-gray-300">
-          <span>Fees</span><span>${fees.toFixed(2)}</span>
-        </div>
-        <div class="flex justify-between text-gray-600 dark:text-gray-300">
-          <span>Taxes</span><span>${taxes.toFixed(2)}</span>
-        </div>
-      </div>
-
-      <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-gray-200 dark:border-gray-600">
-        <span>Total</span><span>${total.toFixed(2)}</span>
-      </div>
-    {/if}
-
-    {#if totalQuantity > 0 && btnText === 'Place order'}
-      <p class="{typography.xsMuted} text-center mb-3">
-        By selecting Place order, I agree to the <a href="https://get-micdrop.com/tos" class="text-blue-700 dark:text-blue-500 underline hover:opacity-80" target="_blank" rel="noopener noreferrer">terms of service</a>
-      </p>
-    {/if}
-
-    <button
-      class="w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors select-none touch-manipulation {totalQuantity === 0 ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}"
-      onclick={() => {
-        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}
-  <button
-    class="min-[872px]:hidden fixed inset-0 bg-black/50 z-40 border-none cursor-pointer"
-    onclick={() => (showOrderSummaryOnMobile = false)}
-    aria-label="Close order summary"
-    transition:fade={{ duration: 200 }}
-  ></button>
-  <div
-    in:fly={{ y: 800, duration: 300, easing: cubicOut }}
-    out:fly={{ y: 800, duration: 300, easing: cubicOut }}
-    class="min-[872px]:hidden fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-50 max-h-[80vh] rounded-t-lg shadow-xl bg-white dark:bg-gray-800"
-  >
-    <div class="flex flex-row justify-between items-center px-5 py-4 border-b border-gray-200 dark:border-gray-600">
-      <h2 class="{typography.h2} text-xl">
-        Order summary
-      </h2>
-      <button
-        onclick={() => (showOrderSummaryOnMobile = false)}
-        class="transition-colors p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
-        aria-label="Close order summary"
-      >
-        <CloseOutline class="w-7 h-7" />
-      </button>
-    </div>
-
-    <div class="px-5 pb-5">
-      {#each Object.keys(quantities) as key}
-        {#if quantities[key] > 0}
-          {#each eventTickets as ticket}
-            {#if ticket.ID == key}
-              <div class="flex justify-between py-4 border-b border-gray-200 dark:border-gray-600">
-                <div>
-                  <p class="{typography.h5}">{ticket.name}</p>
-                  <p class="{typography.smMuted}">
-                    {#if ticket.price === 0}
-                      Free x {quantities[key]}
-                    {:else}
-                      ${ticket.price.toFixed(2)} x {quantities[key]}
-                    {/if}
-                  </p>
-                </div>
-                <div class="{typography.h5}">
-                  {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-gray-600 dark:text-gray-300">
-        {#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 text-green-600 dark:text-green-500">
-            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
-          </div>
-        {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
-          <div class="flex justify-between text-green-600 dark:text-green-500">
-            <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="flex justify-between {typography.h3} py-5 border-t border-gray-200 dark:border-gray-600">
-        <span>Total</span><span>${total.toFixed(2)}</span>
-      </div>
-    </div>
-  </div>
-{/if}
-
-{#if showFooter}
-  <div
-    transition:fly={{ y: 100, duration: 200 }}
-    class="min-[872px]:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 shadow-xl p-4 pb-[max(16px,calc(env(safe-area-inset-bottom)+8px))] select-none touch-manipulation"
-  >
-    <div class="flex items-stretch gap-3">
-      <button class="flex flex-col justify-between items-start shrink-0 whitespace-nowrap bg-transparent border-none p-0 cursor-pointer touch-manipulation" onclick={makeOrderSummaryVisible}>
-        <span class="{`${typography.sm} flex items-center gap-1 text-gray-600 dark:text-gray-300`}">
-          {totalQuantity} {totalQuantity > 1 ? 'tickets' : 'ticket'}
-          <ChevronDownOutline class={`w-4 h-4 ${typography.iconMuted} transition-transform duration-200 ${showOrderSummaryOnMobile ? 'rotate-180' : ''}`} />
-        </span>
-        <span class="{typography.h2} text-xl">${total.toFixed(2)}</span>
-      </button>
-
-      <button
-        class="{`${typography.label} flex-1 min-w-36 h-12 rounded-lg touch-manipulation flex items-center justify-center ${totalQuantity === 0 || !isAgreed ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}`}"
-        onclick={() => {
-          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}
+<script>
+  import { fly, fade } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { ChevronDownOutline, CloseOutline } from '../../primitives/Icons';
+  import Spinner from '../../primitives/Spinner/Spinner.svelte';
+  import { typography } from '../../tokens/typography';
+
+  let {
+    loading = false,
+    quantities = {},
+    donationAmounts = {}, // Map of ticketId -> donation amount string
+    eventTickets = [],
+    checkoutTicket = null,
+    isAgreed = true,
+    btnText = 'Checkout',
+    promoApplied = false,
+    promoDiscount = 0,
+    currentPromoRule = null,
+    executePurchase = null,
+    elements = null,
+    venueServiceCharge = {
+      serviceFeeCents: 0,
+      serviceFeePercentage: 0,
+      serviceFeeChargeType: 'both',
+      maxServiceFeeCents: 0,
+      taxPercentage: 0,
+    },
+    onPriceUpdate,
+  } = $props();
+
+  // Helper to get effective price for a ticket (handles donation tickets)
+  function getEffectivePrice(ticket) {
+    // Donation ticket (type 2): use user-entered donation amount
+    if (isDonationTicket(ticket)) {
+      const donationAmount = donationAmounts[ticket.ID];
+      return parseFloat(donationAmount) || 0;
+    }
+    // Regular ticket: use ticket price
+    return parseFloat(ticket.price) || 0;
+  }
+
+  // Check if ticket is a donation ticket
+  // Handle both 'type' and 'ticketType' fields, and coerce to number for comparison
+  function isDonationTicket(ticket) {
+    const ticketType = ticket.type ?? ticket.ticketType ?? 0;
+    return Number(ticketType) === 2;
+  }
+
+  let showOrderSummaryOnMobile = $state(false);
+
+  function feeFor(price) {
+    const chargeType = venueServiceCharge.serviceFeeChargeType || 'both';
+    let fee = 0;
+
+    if (chargeType === 'flat' || chargeType === 'both') {
+      fee += (venueServiceCharge.serviceFeeCents || 0) / 100;
+    }
+    if (chargeType === 'percent' || chargeType === 'both') {
+      fee += ((venueServiceCharge.serviceFeePercentage || 0) / 100) * price;
+    }
+
+    const maxFee = venueServiceCharge.maxServiceFeeCents || 0;
+    if (maxFee > 0 && fee > maxFee / 100) {
+      fee = maxFee / 100;
+    }
+
+    return fee;
+  }
+
+  function makeOrderSummaryVisible() {
+    showOrderSummaryOnMobile = !showOrderSummaryOnMobile;
+  }
+
+  function getDiscountedPrice(ticket) {
+    if (!currentPromoRule?.provideDiscount) return null;
+
+    const discountTicketIds = currentPromoRule.discountTicketIds || [];
+    if (discountTicketIds.length > 0 && !discountTicketIds.includes(ticket.ID)) {
+      return null;
+    }
+
+    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;
+  }
+
+  let totalQuantity = $derived(Object.values(quantities).reduce((sum, q) => sum + q, 0));
+  let showFooter = $derived(totalQuantity > 0);
+
+  let subtotalWithoutDiscount = $derived(Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    if (!ticket) return acc;
+    // For donation tickets, use the donation amount; otherwise use ticket price
+    const effectivePrice = getEffectivePrice(ticket);
+    return acc + quantities[key] * effectivePrice;
+  }, 0));
+
+  let subtotal = $derived(Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    if (!ticket) return acc;
+    // For donation tickets, use the donation amount (no discounts apply)
+    if (isDonationTicket(ticket)) {
+      const effectivePrice = getEffectivePrice(ticket);
+      return acc + quantities[key] * effectivePrice;
+    }
+    // For regular tickets, apply discounts as usual
+    const discountedPrice = getDiscountedPrice(ticket);
+    const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
+    return acc + quantities[key] * priceToUse;
+  }, 0));
+
+  let promoSavings = $derived(currentPromoRule?.provideDiscount ? (subtotalWithoutDiscount - subtotal) : 0);
+
+  let fees = $derived(Object.keys(quantities).reduce((acc, key) => {
+    const ticket = eventTickets.find(t => t.ID == key);
+    // Skip fees for: no ticket, free tickets, and donation tickets (type 2)
+    if (!ticket || ticket.price == 0 || isDonationTicket(ticket)) return acc;
+    const discountedPrice = getDiscountedPrice(ticket);
+    const priceToUse = discountedPrice !== null ? parseFloat(discountedPrice) : ticket.price;
+    return acc + quantities[key] * feeFor(priceToUse);
+  }, 0));
+
+  let taxRate = $derived((venueServiceCharge.taxPercentage || 0) / 100);
+  let taxes = $derived(subtotal > 0 ? subtotal * taxRate : 0);
+  let total = $derived(Math.max(0, subtotal + fees + taxes - (promoApplied && !currentPromoRule?.provideDiscount ? promoDiscount : 0)));
+
+  $effect(() => {
+    onPriceUpdate?.({ subtotal, fees, taxes, total, promoSavings });
+  });
+</script>
+
+<div
+  id="orderSummary"
+  class="hidden min-[872px]:block h-fit rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600"
+>
+  <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-600">
+    <h3 class={typography.h3}>
+      Order summary
+    </h3>
+  </div>
+
+  <div class="px-5 pb-5">
+    {#if totalQuantity === 0}
+      <div class="py-8 text-center">
+        <p class="{typography.smMuted}">Select tickets to continue</p>
+      </div>
+    {:else}
+      {#each Object.keys(quantities) as key}
+        {#if quantities[key] > 0}
+          {#each eventTickets as ticket}
+            {#if ticket.ID == key}
+              {@const effectivePrice = getEffectivePrice(ticket)}
+              {@const isDonation = isDonationTicket(ticket)}
+              <div class="flex justify-between py-3 border-b border-gray-200/50 dark:border-gray-600/50">
+                <div>
+                  <p class="{typography.label}">{ticket.name}</p>
+                  <p class="{typography.smMuted}">
+                    {#if ticket.price === 0 && !isDonation}
+                      Free x {quantities[key]}
+                    {:else if isDonation}
+                      ${effectivePrice.toFixed(2)} x {quantities[key]}
+                    {:else}
+                      ${ticket.price.toFixed(2)} x {quantities[key]}
+                    {/if}
+                  </p>
+                </div>
+                <div class="{typography.label}">
+                  {#if ticket.price === 0 && !isDonation}
+                    Free
+                  {:else}
+                    ${(effectivePrice * quantities[key]).toFixed(2)}
+                  {/if}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        {/if}
+      {/each}
+
+      <div class="{`${typography.sm} flex flex-col py-3 gap-2`}">
+        {#if promoSavings > 0 || (promoDiscount > 0 && !currentPromoRule?.provideDiscount)}
+          <div class="flex justify-between text-gray-600 dark:text-gray-300">
+            <span>Full Price</span><span>${subtotalWithoutDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        {#if promoSavings > 0}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
+          </div>
+        {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <span>Discount</span><span>-${promoDiscount.toFixed(2)}</span>
+          </div>
+        {/if}
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+          <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+          <span>Fees</span><span>${fees.toFixed(2)}</span>
+        </div>
+        <div class="flex justify-between text-gray-600 dark:text-gray-300">
+          <span>Taxes</span><span>${taxes.toFixed(2)}</span>
+        </div>
+      </div>
+
+      <div class="flex justify-between {typography.h3} py-4 text-lg border-t border-gray-200 dark:border-gray-600">
+        <span>Total</span><span>${total.toFixed(2)}</span>
+      </div>
+    {/if}
+
+    {#if totalQuantity > 0 && btnText === 'Place order'}
+      <p class="{typography.xsMuted} text-center mb-3">
+        By selecting Place order, I agree to the <a href="https://get-micdrop.com/tos" class="text-blue-700 dark:text-blue-500 underline hover:opacity-80" target="_blank" rel="noopener noreferrer">terms of service</a>
+      </p>
+    {/if}
+
+    <button
+      class="w-full h-12 font-semibold rounded-lg flex items-center justify-center transition-colors select-none touch-manipulation {totalQuantity === 0 ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}"
+      onclick={() => {
+        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}
+  <button
+    class="min-[872px]:hidden fixed inset-0 bg-black/50 z-40 border-none cursor-pointer"
+    onclick={() => (showOrderSummaryOnMobile = false)}
+    aria-label="Close order summary"
+    transition:fade={{ duration: 200 }}
+  ></button>
+  <div
+    in:fly={{ y: 800, duration: 300, easing: cubicOut }}
+    out:fly={{ y: 800, duration: 300, easing: cubicOut }}
+    class="min-[872px]:hidden fixed bottom-0 left-0 w-full overflow-x-hidden overflow-y-auto z-50 max-h-[80vh] rounded-t-lg shadow-xl bg-white dark:bg-gray-800"
+  >
+    <div class="flex flex-row justify-between items-center px-5 py-4 border-b border-gray-200 dark:border-gray-600">
+      <h2 class="{typography.h2} text-xl">
+        Order summary
+      </h2>
+      <button
+        onclick={() => (showOrderSummaryOnMobile = false)}
+        class="transition-colors p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700"
+        aria-label="Close order summary"
+      >
+        <CloseOutline class="w-7 h-7" />
+      </button>
+    </div>
+
+    <div class="px-5 pb-5">
+      {#each Object.keys(quantities) as key}
+        {#if quantities[key] > 0}
+          {#each eventTickets as ticket}
+            {#if ticket.ID == key}
+              {@const effectivePrice = getEffectivePrice(ticket)}
+              {@const isDonation = isDonationTicket(ticket)}
+              <div class="flex justify-between py-4 border-b border-gray-200 dark:border-gray-600">
+                <div>
+                  <p class="{typography.h5}">{ticket.name}</p>
+                  <p class="{typography.smMuted}">
+                    {#if ticket.price === 0 && !isDonation}
+                      Free x {quantities[key]}
+                    {:else if isDonation}
+                      ${effectivePrice.toFixed(2)} x {quantities[key]}
+                    {:else}
+                      ${ticket.price.toFixed(2)} x {quantities[key]}
+                    {/if}
+                  </p>
+                </div>
+                <div class="{typography.h5}">
+                  {#if ticket.price === 0 && !isDonation}
+                    Free
+                  {:else}
+                    ${(effectivePrice * quantities[key]).toFixed(2)}
+                  {/if}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        {/if}
+      {/each}
+
+      <div class="flex flex-col py-4 gap-3 text-gray-600 dark:text-gray-300">
+        {#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 text-green-600 dark:text-green-500">
+            <span>Discount</span><span>-${promoSavings.toFixed(2)}</span>
+          </div>
+        {:else if promoDiscount > 0 && !currentPromoRule?.provideDiscount}
+          <div class="flex justify-between text-green-600 dark:text-green-500">
+            <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="flex justify-between {typography.h3} py-5 border-t border-gray-200 dark:border-gray-600">
+        <span>Total</span><span>${total.toFixed(2)}</span>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if showFooter}
+  <div
+    transition:fly={{ y: 100, duration: 200 }}
+    class="min-[872px]:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 shadow-xl p-4 pb-[max(16px,calc(env(safe-area-inset-bottom)+8px))] select-none touch-manipulation"
+  >
+    <div class="flex items-stretch gap-3">
+      <button class="flex flex-col justify-between items-start shrink-0 whitespace-nowrap bg-transparent border-none p-0 cursor-pointer touch-manipulation" onclick={makeOrderSummaryVisible}>
+        <span class="{`${typography.sm} flex items-center gap-1 text-gray-600 dark:text-gray-300`}">
+          {totalQuantity} {totalQuantity > 1 ? 'tickets' : 'ticket'}
+          <ChevronDownOutline class={`w-4 h-4 ${typography.iconMuted} transition-transform duration-200 ${showOrderSummaryOnMobile ? 'rotate-180' : ''}`} />
+        </span>
+        <span class="{typography.h2} text-xl">${total.toFixed(2)}</span>
+      </button>
+
+      <button
+        class="{`${typography.label} flex-1 min-w-36 h-12 rounded-lg touch-manipulation flex items-center justify-center ${totalQuantity === 0 || !isAgreed ? 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'bg-blue-700 dark:bg-blue-600 text-white hover:bg-blue-800 dark:hover:bg-blue-700'}`}"
+        onclick={() => {
+          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}