@getmicdrop/svelte-components 1.0.2 → 1.0.3

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

@@ -0,0 +1,886 @@
+<script>
+  import { goto } from "$app/navigation";
+  import Icon from "../../Icons/Icon.svelte";
+  import Input from "../../Input/Input.svelte";
+  import Modal from "../../Modal/Modal.svelte";
+  import { showToast } from "../../../../stores/toaster";
+  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(getEventUrl(venueId), "_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>