@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/components/pages/performers/ShowItemCard.svelte

@@ -1,887 +0,0 @@
-<script>
-  import { goto } from '../../../__LIB_NAVIGATION__.js';
-  import Icon from "../../Icons/Icon.svelte";
-  import Input from "../../Input/Input.svelte";
-  import Modal from "../../Modal/Modal.svelte";
-  import { showToast } from "../../../stores/toaster";
-  import { API_BASE_URL } from "../../../config.js";
-  import { microphonePlaceholder, getUserDetails } from "../../../utils/utils";
-  import {
-    formatHour,
-    formattedDate,
-    formattedFullDate,
-    timeAgo,
-  } from "../../../utils/utils/utils";
-  import {
-    acceptInvite,
-    declineInvite,
-    cancelInvite,
-    sendVenueMessage,
-    getEventUrl,
-  } from "../../../services/ShowService";
-  import { Dropdown, DropdownItem } from "flowbite-svelte";
-  import { DotsHorizontalOutline, FileCopyOutline } from "flowbite-svelte-icons";
-  import { onMount } from "svelte";
-  import { slide } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import Button from "../../Button/Button.svelte";
-  import Badge from "../../Badges/Badge.svelte";
-  import ShowDetails from "./ShowDetails.svelte";
-  import StatusIndicator from "../../StatusIndicator/StatusIndicator.svelte";
-  import ModalShowInfo from "./ModalShowInfo.svelte";
-
-  // Convert role name to Badge variant format
-  function getRoleVariant(role) {
-    // Handle "Special Guest" -> "special-guest"
-    return role.toLowerCase().replace(/\s+/g, "-");
-  }
-  export let venueId;
-  export let title;
-  export let role;
-  export let startDateTime;
-  export let doorsOpenTime;
-  export let spotDuration;
-  export let venueName;
-  export let location;
-  export let status;
-  export let details;
-  export let id;
-  export let invitationAccepted = false;
-  export let hasAvailability = false;
-  export let lastUpdated;
-  export let image;
-
-  let showDetails = false;
-  let showCancelBookingModal = false;
-  let showAcceptInvitation = false;
-  let showDeclineInvitation = false;
-  let showSendMessageModal = false;
-  let showLeaveVenue = false;
-  let note = "";
-  let message = "";
-  let modalIsProcessing = false;
-  let isModalSuccess = false;
-  let isModalError = false;
-  let lastAction = null; // Store last action for retry
-  let lastActionId = null;
-
-  // Copy ticket link button states
-  let isCopying = false;
-  let isCopied = false;
-
-  const showDate = startDateTime ? formattedDate(startDateTime) : null;
-  const showFullDate = startDateTime ? formattedFullDate(startDateTime) : null;
-  const formattedStartTime = startDateTime ? formatHour(startDateTime) : null;
-  const formattedDoorsOpenTime = doorsOpenTime ? formatHour(doorsOpenTime) : null;
-
-  const toggleModal = (modalName, value) => {
-    if (modalName === "accept") showAcceptInvitation = value;
-    if (modalName === "decline") showDeclineInvitation = value;
-    if (modalName === "cancelation") showCancelBookingModal = value;
-    if (modalName === "message") {
-      showSendMessageModal = value;
-      message = "";
-    }
-    if (modalName === "leave") showLeaveVenue = value;
-    modalIsProcessing = false;
-    isModalSuccess = false;
-    isModalError = false;
-    lastAction = null;
-    lastActionId = null;
-    // Clear the note field when any modal closes
-    if (!value) {
-      note = "";
-    }
-  };
-
-  // Minimum time to show spinner for good UX feedback (per Nielsen Norman Group research)
-  const MIN_LOADING_TIME = 1000; // 1 second
-
-  const handleModalAction = async (action, inviteID) => {
-    modalIsProcessing = true;
-    isModalError = false;
-    isModalSuccess = false;
-    lastAction = action;
-    lastActionId = inviteID;
-
-    const startTime = Date.now();
-    let response = null;
-
-    try {
-      switch (action) {
-        case "accept":
-          response = await acceptInvite(inviteID, note);
-          break;
-        case "sendMessage":
-          response = await sendVenueMessage(inviteID, message);
-          break;
-        case "reject":
-        case "decline":
-          response = await declineInvite(inviteID, note);
-          break;
-        case "cancel":
-          response = await cancelInvite(inviteID, note);
-          break;
-        default:
-          response = { ok: false };
-      }
-    } catch (err) {
-      console.error("Modal action error:", err);
-      response = { ok: false };
-    }
-
-    // Ensure minimum loading time for smooth UX
-    const elapsed = Date.now() - startTime;
-    if (elapsed < MIN_LOADING_TIME) {
-      await new Promise(resolve => setTimeout(resolve, MIN_LOADING_TIME - elapsed));
-    }
-
-    modalIsProcessing = false;
-    if (response.ok) {
-      isModalSuccess = true;
-    } else {
-      isModalError = true;
-    }
-  };
-
-  const handleRetry = () => {
-    if (lastAction && lastActionId) {
-      handleModalAction(lastAction, lastActionId);
-    }
-  };
-
-  const handleLeaveVenue = () => {
-    toggleModal("leave", false);
-    showToast(`You have left ${title} venue.`, "success");
-  };
-
-  const copyTicketLink = async () => {
-    if (isCopying || isCopied) return;
-
-    isCopying = true;
-    const ticketLink = getEventUrl(venueId);
-
-    // Helper function for fallback copy method
-    const fallbackCopy = (text) => {
-      const textarea = document.createElement('textarea');
-      textarea.value = text;
-      textarea.style.position = 'fixed';
-      textarea.style.left = '0';
-      textarea.style.top = '0';
-      textarea.style.width = '1px';
-      textarea.style.height = '1px';
-      textarea.style.padding = '0';
-      textarea.style.border = 'none';
-      textarea.style.outline = 'none';
-      textarea.style.boxShadow = 'none';
-      textarea.style.background = 'transparent';
-      textarea.style.opacity = '0';
-      textarea.setAttribute('readonly', '');
-      document.body.appendChild(textarea);
-      textarea.setSelectionRange(0, text.length);
-      try {
-        document.execCommand('copy');
-        return true;
-      } catch (e) {
-        return false;
-      } finally {
-        document.body.removeChild(textarea);
-      }
-    };
-
-    try {
-      // Try modern clipboard API first
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        await navigator.clipboard.writeText(ticketLink);
-      } else {
-        // Fallback for older browsers / mobile
-        const success = fallbackCopy(ticketLink);
-        if (!success) throw new Error('Fallback copy failed');
-      }
-
-      // Brief delay to show spinner before success state
-      await new Promise(resolve => setTimeout(resolve, 300));
-      isCopying = false;
-      isCopied = true;
-
-      // Reset after 2 seconds
-      setTimeout(() => {
-        isCopied = false;
-      }, 2000);
-    } catch (error) {
-      // Try fallback if modern API fails
-      const fallbackSuccess = fallbackCopy(ticketLink);
-      if (fallbackSuccess) {
-        await new Promise(resolve => setTimeout(resolve, 300));
-        isCopying = false;
-        isCopied = true;
-        setTimeout(() => {
-          isCopied = false;
-        }, 2000);
-      } else {
-        isCopying = false;
-        showToast("Failed to copy ticket link.", "error");
-        console.error("Clipboard error:", error);
-      }
-    }
-  };
-
-  const visitEventPage = () => {
-    window.open(`${API_BASE_URL}/e/${id}`, "_blank");
-  };
-
-  function navigateToUpdateAvailability() {
-    goto(`/availability/${venueId}`);
-  }
-  $: performerFullName = "";
-  onMount(() => {
-    // Get user details from token
-    const userDetails = getUserDetails();
-    if (userDetails) {
-      performerFullName = userDetails.full_name || "";
-    }
-  });
-</script>
-
-<div
-  class="w-full flex flex-col bg-bg-secondary border border-stroke-secondary p-3 sm:p-4 rounded-lg"
->
-  <div class="flex flex-row items-start gap-3 sm:gap-4">
-    <div class="w-[72px] flex flex-col items-center justify-center">
-      <img
-        src={image && image.startsWith("http")
-          ? image
-          : image
-            ? `https://moxy.sfo3.digitaloceanspaces.com${image}`
-            : microphonePlaceholder}
-        alt={title}
-        class="w-[72px] h-[72px] object-contain rounded-lg"
-      />
-    </div>
-    <div class="flex-1">
-      <h4 class="text-Text-Primary font-medium flex items-center gap-2">
-        {title}
-      </h4>
-      <h5 class="text-sm font-medium text-Text-Primary">
-        {#if showDate && formattedStartTime}
-          {showDate} • {formattedStartTime}
-        {:else}
-          No date yet
-        {/if}
-      </h5>
-      <p class="text-Text-Tartiary font-medium text-sm">
-        {venueName}
-      </p>
-    </div>
-  </div>
-
-  {#if status !== "upcoming" || (status === "upcoming" && !hasAvailability && !invitationAccepted)}
-    {#if status === "upcoming" && !hasAvailability && !invitationAccepted}
-      <!-- Upcoming show: Row 1 = Copy ticket link + Visit event page, Row 2 = Message + View details -->
-      <div class="flex flex-col gap-3 sm:gap-4 mt-4">
-        <div class="flex gap-3 sm:gap-4">
-          <Button
-            variant="gray-outline"
-            size="full"
-            loading={isCopying}
-            success={isCopied}
-            successText="Copied"
-            on:click={copyTicketLink}
-          >
-            <FileCopyOutline size="sm" /> Copy ticket link
-          </Button>
-          <Button variant="blue-solid" size="full" on:click={visitEventPage}>
-            Visit event page
-          </Button>
-        </div>
-        <div class="flex gap-3 sm:gap-4">
-          <Button
-            variant="blue-outline"
-            size="full"
-            on:click={() => toggleModal("message", true)}
-          >
-            <Icon name="Message" size={18} /> Message
-          </Button>
-          <Button
-            variant="blue-outline"
-            size="full"
-            on:click={(e) => {
-              showDetails = !showDetails;
-              e.currentTarget.blur();
-            }}
-          >
-            {#if showDetails}
-              Close details
-              <span class="transform rotate-180">
-                <Icon name="DownArrow" size={18} />
-              </span>
-            {:else}
-              View details
-              <span>
-                <Icon name="DownArrow" size={18} />
-              </span>
-            {/if}
-          </Button>
-        </div>
-      </div>
-    {:else}
-      <!-- Other statuses: View details + Message -->
-      <div class="flex gap-3 sm:gap-4 mt-4">
-        <Button
-          variant="blue-outline"
-          size="full"
-          on:click={(e) => {
-            showDetails = !showDetails;
-            e.currentTarget.blur();
-          }}
-        >
-          {#if showDetails}
-            Close details
-            <span class="transform rotate-180">
-              <Icon name="DownArrow" size={18} />
-            </span>
-          {:else}
-            View details
-            <span>
-              <Icon name="DownArrow" size={18} />
-            </span>
-          {/if}
-        </Button>
-        {#if status !== "declined" && status !== "past"}
-          <Button
-            variant="blue-outline"
-            size="full"
-            on:click={() => toggleModal("message", true)}
-          >
-            <Icon name="Message" size={18} /> Message
-          </Button>
-        {/if}
-      </div>
-    {/if}
-  {/if}
-
-  {#if showDetails}
-    <div class="mt-4" transition:slide={{ duration: 300, easing: cubicOut }}>
-      <ShowDetails
-        {...details}
-        {formattedDoorsOpenTime}
-        {showFullDate}
-        {formattedStartTime}
-        {status}
-        {role}
-        onToggleModal={toggleModal}
-      />
-    </div>
-  {/if}
-
-  {#if status !== "declined" && status !== "past"}
-    <div class="mt-3 sm:mt-4">
-      <div class="flex gap-3 sm:gap-4">
-        {#if status === "invitations"}
-          <Button
-            variant="red-solid"
-            size="full"
-            on:click={() => toggleModal("decline", true)}
-          >
-            <Icon name="ErrorCircle" size={16} /> Decline
-          </Button>
-          <Button responsive size="full" on:click={() => toggleModal("accept", true)}>
-            <Icon name="CheckCircle" size={16} /> Confirm
-          </Button>
-        {/if}
-      </div>
-
-      {#if status === "upcoming" && (hasAvailability || invitationAccepted)}
-        {#if invitationAccepted && !hasAvailability}
-          <div class="flex flex-row gap-2">
-            <div
-              class="flex-1 bg-red-50 text-sm text-red-700 font-semibold rounded-lg flex flex-col justify-center p-2"
-            >
-              Please update your availability.
-            </div>
-            <Button variant="red-solid">Set up</Button>
-
-            <DotsHorizontalOutline
-              data-testid="dropdown-menu"
-              triggeredBy=".more-menu"
-              class="more-menu text-primary-700 border border-primary-700 rounded-lg h-auto w-9 px-1.5 hover:bg-primary-50 cursor-pointer transition-colors"
-            />
-
-            <Dropdown
-              class="shadow-none min-w-[200px]"
-              triggeredBy=".more-menu"
-            >
-              <DropdownItem
-                class="text-red-600"
-                on:click={() => toggleModal("leave", true)}
-              >
-                Leave this venue
-              </DropdownItem>
-            </Dropdown>
-          </div>
-        {:else}
-          <div class="flex flex-row gap-2">
-            <div
-              class="flex-1 text-sm text-Text-Tartiary rounded-lg flex flex-col justify-center p-2"
-            >
-              Last updated: {timeAgo(lastUpdated)}
-            </div>
-            <Button
-              variant="gray-outline"
-              on:click={() => navigateToUpdateAvailability()}>Update</Button
-            >
-
-            <DotsHorizontalOutline
-              data-testid="dropdown-menu"
-              triggeredBy=".more-menu"
-              class="more-menu text-primary-700 border border-primary-700 rounded-lg h-auto w-9 px-1.5 hover:bg-primary-50 cursor-pointer transition-colors"
-            />
-
-            <Dropdown
-              class="shadow-none min-w-[200px]"
-              triggeredBy=".more-menu"
-            >
-              <DropdownItem
-                class="text-red-600"
-                on:click={() => toggleModal("leave", true)}
-              >
-                Leave this venue
-              </DropdownItem>
-            </Dropdown>
-          </div>
-        {/if}
-      {/if}
-    </div>
-  {/if}
-
-  <!-- Show Accepted Invitation Modal -->
-  <Modal
-    bind:show={showAcceptInvitation}
-    isProcessing={modalIsProcessing}
-    isSuccess={isModalSuccess}
-  >
-    <h2 slot="header" class="text-xl font-medium text-Text-Primary">
-      {#if !modalIsProcessing && !isModalSuccess && !isModalError}
-        Confirm booking
-      {:else if isModalSuccess}
-        Booking confirmed
-      {:else if isModalError}
-        Something went wrong
-      {/if}
-    </h2>
-    <div slot="body">
-      {#if modalIsProcessing || isModalSuccess || isModalError}
-        <div class="modal-status-container">
-          <StatusIndicator status={modalIsProcessing ? "loading" : isModalSuccess ? "success" : "error"} />
-        </div>
-      {:else}
-        <ModalShowInfo
-          {image}
-          {title}
-          {showDate}
-          {formattedStartTime}
-          {venueName}
-        />
-        <p class="text-sm font-medium text-Text-Tartiary mt-2">
-          Any additional notes? (Optional)
-        </p>
-        <Input
-          type="textarea"
-          id="notes"
-          bind:value={note}
-          placeholder="Type your message"
-          textareaSize="lg"
-          className="mt-1"
-        />
-      {/if}
-    </div>
-    <div slot="footer" class="w-full">
-      {#if !modalIsProcessing}
-        <div class="w-full flex items-center justify-between md:justify-end gap-4 mt-5">
-          {#if isModalSuccess}
-            <Button responsive size="full" on:click={() => window.location.reload()}>
-              OK
-            </Button>
-          {:else if isModalError}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => toggleModal("accept", false)}
-            >
-              Cancel
-            </Button>
-            <Button responsive size="half" minWidth="modal-responsive" on:click={handleRetry}>
-              Try again
-            </Button>
-          {:else}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={(e) => {
-                e.stopPropagation();
-                toggleModal("accept", false);
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              responsive
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => handleModalAction("accept", id)}
-            >
-              <Icon name="CheckCircle" size={16} /> Confirm
-            </Button>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </Modal>
-
-  <!-- Show Decline Invitation Modal -->
-  <Modal
-    bind:show={showDeclineInvitation}
-    isProcessing={modalIsProcessing}
-    isSuccess={isModalSuccess}
-  >
-    <h2 slot="header" class="text-xl font-medium text-Text-Primary">
-      {#if !modalIsProcessing && !isModalSuccess && !isModalError}
-        Decline booking
-      {:else if isModalSuccess}
-        Booking declined
-      {:else if isModalError}
-        Something went wrong
-      {/if}
-    </h2>
-    <div slot="body">
-      {#if modalIsProcessing || isModalSuccess || isModalError}
-        <div class="modal-status-container">
-          <StatusIndicator status={modalIsProcessing ? "loading" : isModalSuccess ? "success" : "error"} />
-        </div>
-      {:else}
-        <ModalShowInfo
-          {image}
-          {title}
-          {showDate}
-          {formattedStartTime}
-          {venueName}
-        />
-        <p class="text-sm font-medium text-Text-Tartiary mt-2">
-          Any additional notes? (Optional)
-        </p>
-        <Input
-          type="textarea"
-          id="notes"
-          bind:value={note}
-          placeholder="Type your message"
-          textareaSize="lg"
-          className="mt-1"
-        />
-      {/if}
-    </div>
-    <div slot="footer" class="w-full">
-      {#if !modalIsProcessing}
-        <div class="w-full flex items-center justify-between md:justify-end gap-4 mt-5">
-          {#if isModalSuccess}
-            <Button responsive size="full" on:click={() => window.location.reload()}>
-              OK
-            </Button>
-          {:else if isModalError}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => toggleModal("decline", false)}
-            >
-              Cancel
-            </Button>
-            <Button responsive size="half" minWidth="modal-responsive" on:click={handleRetry}>
-              Try again
-            </Button>
-          {:else}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={(e) => {
-                e.stopPropagation();
-                toggleModal("decline", false);
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="red-solid"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => handleModalAction("decline", id)}
-            >
-              Decline
-            </Button>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </Modal>
-
-  <!-- Send Message Modal -->
-  <Modal
-    bind:show={showSendMessageModal}
-    isProcessing={modalIsProcessing}
-    isSuccess={isModalSuccess}
-  >
-    <h2 slot="header" class="text-xl font-medium text-Text-Primary">
-      {#if !modalIsProcessing && !isModalSuccess && !isModalError}
-        New message
-      {:else if isModalSuccess}
-        Message sent
-      {:else if isModalError}
-        Something went wrong
-      {/if}
-    </h2>
-    <div slot="body">
-      {#if modalIsProcessing || isModalSuccess || isModalError}
-        <div class="modal-status-container">
-          <StatusIndicator status={modalIsProcessing ? "loading" : isModalSuccess ? "success" : "error"} />
-        </div>
-      {:else}
-        <ModalShowInfo
-          {image}
-          {title}
-          {showDate}
-          {formattedStartTime}
-          {venueName}
-        />
-        <Input
-          type="textarea"
-          id="message"
-          bind:value={message}
-          placeholder="Type your message"
-          textareaSize="lg"
-          className="mt-2"
-        />
-      {/if}
-    </div>
-    <div slot="footer" class="w-full">
-      {#if !modalIsProcessing}
-        <div class="w-full flex items-center justify-between md:justify-end gap-4 mt-5">
-          {#if isModalSuccess}
-            <Button responsive size="full" on:click={() => toggleModal("message", false)}>
-              OK
-            </Button>
-          {:else if isModalError}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => toggleModal("message", false)}
-            >
-              Cancel
-            </Button>
-            <Button responsive size="half" minWidth="modal-responsive" on:click={handleRetry}>
-              Try again
-            </Button>
-          {:else}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={(e) => {
-                e.stopPropagation();
-                toggleModal("message", false);
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              responsive
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => handleModalAction("sendMessage", id)}
-            >
-              <Icon name="Message" size={18} /> Send
-            </Button>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </Modal>
-
-  <!-- Show Cancel Booking Modal -->
-  <Modal
-    bind:show={showCancelBookingModal}
-    isProcessing={modalIsProcessing}
-    isSuccess={isModalSuccess}
-  >
-    <h2 slot="header" class="text-xl font-medium text-Text-Primary">
-      {#if !modalIsProcessing && !isModalSuccess && !isModalError}
-        Cancel booking
-      {:else if isModalSuccess}
-        Booking canceled
-      {:else if isModalError}
-        Something went wrong
-      {/if}
-    </h2>
-    <div slot="body">
-      {#if modalIsProcessing || isModalSuccess || isModalError}
-        <div class="modal-status-container">
-          <StatusIndicator status={modalIsProcessing ? "loading" : isModalSuccess ? "success" : "error"} />
-        </div>
-      {:else}
-        <ModalShowInfo
-          {image}
-          {title}
-          {showDate}
-          {formattedStartTime}
-          {venueName}
-        />
-        <p class="text-sm font-medium text-Text-Tartiary mt-2">
-          Any additional notes? (Optional)
-        </p>
-        <Input
-          type="textarea"
-          id="notes"
-          bind:value={note}
-          placeholder="Type your message"
-          textareaSize="lg"
-          className="mt-1"
-        />
-      {/if}
-    </div>
-    <div slot="footer" class="w-full">
-      {#if !modalIsProcessing}
-        <div class="w-full flex items-center justify-between md:justify-end gap-4 mt-5">
-          {#if isModalSuccess}
-            <Button responsive size="full" on:click={() => window.location.reload()}>
-              OK
-            </Button>
-          {:else if isModalError}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => toggleModal("cancelation", false)}
-            >
-              Cancel
-            </Button>
-            <Button responsive size="half" minWidth="modal-responsive" on:click={handleRetry}>
-              Try again
-            </Button>
-          {:else}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={(e) => {
-                e.stopPropagation();
-                toggleModal("cancelation", false);
-              }}
-            >
-              Close
-            </Button>
-            <Button
-              variant="red-solid"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => handleModalAction("cancel", id)}
-            >
-              Yes, cancel
-            </Button>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </Modal>
-
-  <!-- Leave the Venue Modal -->
-  <Modal
-    bind:show={showLeaveVenue}
-    isProcessing={modalIsProcessing}
-    isSuccess={isModalSuccess}
-  >
-    <h2 slot="header" class="text-xl font-medium text-Text-Primary">
-      {#if !modalIsProcessing && !isModalSuccess && !isModalError}
-        Are you sure you want to leave this venue?
-      {:else if isModalSuccess}
-        Left venue
-      {:else if isModalError}
-        Something went wrong
-      {/if}
-    </h2>
-    <div slot="body">
-      {#if modalIsProcessing || isModalSuccess || isModalError}
-        <div class="modal-status-container">
-          <StatusIndicator status={modalIsProcessing ? "loading" : isModalSuccess ? "success" : "error"} />
-        </div>
-      {:else}
-        <p class="text-sm font-medium text-Text-Tartiary mt-4">
-          You will no longer receive availability update requests. If you'd like
-          to include a note, leave it here.
-        </p>
-        <Input
-          type="textarea"
-          id="notes"
-          placeholder="Enter your note here"
-          bind:value={note}
-          textareaSize="lg"
-          className="mt-1"
-        />
-      {/if}
-    </div>
-    <div slot="footer" class="w-full">
-      {#if !modalIsProcessing}
-        <div class="w-full flex items-center justify-between md:justify-end gap-4 mt-5">
-          {#if isModalSuccess}
-            <Button responsive size="full" on:click={() => window.location.reload()}>
-              OK
-            </Button>
-          {:else if isModalError}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={() => toggleModal("leave", false)}
-            >
-              Cancel
-            </Button>
-            <Button responsive size="half" minWidth="modal-responsive" on:click={handleRetry}>
-              Try again
-            </Button>
-          {:else}
-            <Button
-              variant="gray-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={(e) => {
-                e.stopPropagation();
-                toggleModal("leave", false);
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="red-outline"
-              size="half"
-              minWidth="modal-responsive"
-              on:click={handleLeaveVenue}
-            >
-              Leave
-            </Button>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </Modal>
-</div>
-
-<style>
-  .modal-status-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 180px;
-    padding: 2rem 0;
-  }
-</style>