orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/support/StorefrontSupport.tsx

@@ -1,1040 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import {
-  useOrionplaceCatalog,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
-import type { IOrderHistoryResponse } from '@/interfaces/orionplace/orders/IOrderHistory';
-import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
-import type {
-  ICustomerSubscription,
-  ICustomerSubscriptionsResponse,
-} from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import {
-  ECustomerTicketStatus,
-  ECustomerTicketType,
-  type ICustomerTicket,
-  type ICustomerTicketReply,
-  type ICustomerTicketsRequest,
-  type ICustomerTicketsResponse,
-} from '@/interfaces/orionplace/tickets/ICustomerTicketApi';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { mergePagination } from '@/lib/orionplace/featureData';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import { subscriptionPlan } from '@/lib/orionplace/subscriptionPlans';
-import {
-  ticketLabels,
-  ticketStatusView,
-  ticketTypeText,
-} from '@/lib/orionplace/ticketLabels';
-import {
-  orderTicketLines,
-  type TicketOrderLine,
-} from '@/lib/orionplace/ticketItems';
-import {
-  ticketFormData,
-  ticketSubmitTarget,
-  type TicketSubjectContext,
-  type TicketSubmitEndpoint,
-} from '@/lib/orionplace/ticketRequests';
-import {
-  sameTicketLocation,
-  type TicketLocation,
-} from '@/lib/orionplace/ticketLocation';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
-import { TicketConversation } from './TicketConversation';
-import type { TicketImageLoadAction } from './TicketImage';
-import { TicketItemCard } from './TicketItemCard';
-import { TicketMessageForm } from './TicketMessageForm';
-import { TicketSubscriptionCard } from './TicketSubscriptionCard';
-import styles from './Support.module.css';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-
-type TicketsPage = NonNullable<ICustomerTicketsResponse['page_data']>;
-type SubscriptionsPage = NonNullable<
-  ICustomerSubscriptionsResponse['page_data']
->;
-type OrdersPage = NonNullable<IOrderHistoryResponse['page_data']>;
-
-export interface SupportTicketsAction {
-  endpoint: 'customer_tickets_get';
-  request: ICustomerTicketsRequest;
-  signal: AbortSignal;
-}
-
-export interface SupportRepliesAction {
-  endpoint: 'customer_tickets_reply_getall';
-  request: { filters: { ticket: number } };
-  signal: AbortSignal;
-}
-
-export interface SupportSubscriptionsAction {
-  endpoint: 'subscriptions_get';
-  request: Record<string, never>;
-  signal: AbortSignal;
-}
-
-export interface SupportOrderAction {
-  endpoint: 'profile_orders_get';
-  request: { filters: { id: number } };
-  signal: AbortSignal;
-}
-
-export interface SupportSubmitAction {
-  endpoint: TicketSubmitEndpoint;
-  request: FormData;
-  data: Record<string, string | number | boolean>;
-  signal: AbortSignal;
-}
-
-export interface SupportMutationAction {
-  endpoint:
-    | 'customer_tickets_close'
-    | 'customer_tickets_delete'
-    | 'customer_tickets_rate';
-  request: Record<string, never> | { rating: number };
-  path: { ticket_id: number };
-  signal: AbortSignal;
-}
-
-export interface StorefrontSupportSubject {
-  line?: TicketOrderLine;
-  subscription?: ICustomerSubscription;
-  plan?: ISubscribeTariff;
-}
-
-export interface StorefrontSupportProps {
-  // `status`, `page` and `ticketId` are the place from the page URL;
-  // `onNavigate` reports each place the customer moves to, so the page can
-  // write it back to the URL. Without them the component keeps its own state.
-  ticketId?: number;
-  status?: ECustomerTicketStatus;
-  page?: number;
-  context?: TicketSubjectContext;
-  initialData?: TicketsPage;
-  initialSelected?: ICustomerTicket;
-  initialReplies?: ICustomerTicketReply[];
-  initialSubscriptions?: SubscriptionsPage;
-  initialSubject?: StorefrontSupportSubject;
-  initialError?: string;
-  loadOnMount?: boolean;
-  onLoadTickets: (
-    action: SupportTicketsAction,
-  ) => Promise<TicketsPage> | TicketsPage;
-  onLoadReplies: (
-    action: SupportRepliesAction,
-  ) => Promise<ICustomerTicketReply[]> | ICustomerTicketReply[];
-  onLoadSubscriptions?: (
-    action: SupportSubscriptionsAction,
-  ) => Promise<SubscriptionsPage> | SubscriptionsPage;
-  onLoadOrder?: (
-    action: SupportOrderAction,
-  ) => Promise<OrdersPage> | OrdersPage;
-  onLoadImage: (action: TicketImageLoadAction) => Promise<Blob> | Blob;
-  onSubmit: (
-    action: SupportSubmitAction,
-  ) =>
-    | Promise<ICustomerTicket | ICustomerTicketReply[]>
-    | ICustomerTicket
-    | ICustomerTicketReply[];
-  onMutate: (action: SupportMutationAction) => Promise<void> | void;
-  // `replace` is true after a send or delete, so Back does not return to
-  // the composer or to a deleted conversation.
-  onNavigate?: (location: TicketLocation, replace: boolean) => void;
-}
-
-const typeIcons: Record<number, string> = {
-  [ECustomerTicketType.ORDER]: 'M5 8h14l-1 12H6zM9 8V6a3 3 0 0 1 6 0v2',
-  [ECustomerTicketType.SUBSCRIPTION]:
-    'M4 12a8 8 0 0 1 14-5.3L20 9M20 4v5h-5M20 12a8 8 0 0 1-14 5.3L4 15M4 20v-5h5',
-  [ECustomerTicketType.SELLER]:
-    'M4 10h16M5 10v10h14V10M3 10l2-6h14l2 6M10 20v-5h4v5',
-};
-const emptyTariffs: ISubscribeTariff[]  = [];
-
-function errorMessage(reason: unknown, fallback: string) {
-  return apiErrorMessage(reason) || fallback;
-}
-
-function Icon({ path }: { path: string }) {
-  return (
-    <svg
-      className={styles.icon}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d={path} />
-    </svg>
-  );
-}
-
-export function StorefrontSupport({
-  ticketId,
-  status: statusInput,
-  page: pageInput,
-  context,
-  initialData,
-  initialSelected,
-  initialReplies = [],
-  initialSubscriptions,
-  initialSubject,
-  initialError = '',
-  loadOnMount = true,
-  onLoadTickets,
-  onLoadReplies,
-  onLoadSubscriptions,
-  onLoadOrder,
-  onLoadImage,
-  onSubmit,
-  onMutate,
-  onNavigate,
-}: StorefrontSupportProps) {
-  const locale                            = useOrionplaceSelections((state) => state.localeCode);
-  const tariffCatalog                     = useOrionplaceCatalog((state) => state.storeTariffs);
-  const catalogTariffs                    = tariffCatalog?.data ?? emptyTariffs;
-  const labels                            = ticketLabels(locale);
-  const common                            = featureLabels(locale);
-  const callbacks                         = useRef({
-    onLoadTickets,
-    onLoadReplies,
-    onLoadSubscriptions,
-    onLoadOrder,
-    onSubmit,
-    onMutate,
-  });
-  callbacks.current                       = {
-    onLoadTickets,
-    onLoadReplies,
-    onLoadSubscriptions,
-    onLoadOrder,
-    onSubmit,
-    onMutate,
-  };
-  const active                            = useRef<AbortController | undefined>(undefined);
-  const subjectActive                     = useRef<AbortController | undefined>(undefined);
-  const subscriptionRequested             = useRef(Boolean(initialSubscriptions));
-  const initialized                       = useRef(false);
-  const target: TicketLocation            = {
-    status: statusInput ?? ECustomerTicketStatus.OPEN,
-    page: pageInput ?? 1,
-    ticket: ticketId,
-  };
-  const [tickets, setTickets]             = useState(initialData?.data ?? []);
-  const [pagination, setPagination]       = useState<Partial<IApiPagination>>(
-    initialData?.rpag ?? { page: target.page },
-  );
-  const [status, setStatus]               = useState<ECustomerTicketStatus>(
-    target.status,
-  );
-  const [selected, setSelected]           = useState(initialSelected);
-  const [replies, setReplies]             = useState(initialReplies);
-  const [loaded, setLoaded]               = useState(initialData !== undefined);
-  const [composing, setComposing]         = useState(Boolean(context));
-  const [activeContext, setActiveContext] = useState(context);
-  const [subject, setSubject]             = useState<StorefrontSupportSubject>(
-    initialSubject ?? {},
-  );
-  const [subscriptions, setSubscriptions] = useState(initialSubscriptions);
-  const [pending, setPending]             = useState(
-    loadOnMount && initialData === undefined,
-  );
-  const [error, setError]                 = useState(initialError);
-  const [needsRefresh, setNeedsRefresh]   = useState(false);
-  const [sentRevision, setSentRevision]   = useState(0);
-  const paneOpen                          = composing || Boolean(selected);
-
-  function stopRequest() {
-    active.current?.abort();
-    active.current = undefined;
-  }
-
-  async function run(work: (controller: AbortController) => Promise<void>) {
-    if (active.current) {
-      return;
-    }
-    const controller = new AbortController();
-    active.current   = controller;
-    setPending(true);
-    setError('');
-
-    try {
-      await work(controller);
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setError(errorMessage(reason, common.failed));
-      }
-    } finally {
-      if (active.current === controller) {
-        active.current = undefined;
-        setPending(false);
-      }
-    }
-  }
-
-  async function fetchList(
-    controller: AbortController,
-    page = 1,
-    nextStatus = status,
-  ) {
-    const result = await callbacks.current.onLoadTickets({
-      endpoint: 'customer_tickets_get',
-      request: {
-        filters: { ticket_status: nextStatus },
-        paginate: { page, pp_items: 10 },
-      },
-      signal: controller.signal,
-    });
-    if (controller.signal.aborted) {
-      return;
-    }
-    setTickets(result.data);
-    setPagination((current) => mergePagination(current, result.rpag));
-    setSelected(
-      (current) =>
-        result.data.find((item) => item.id === current?.id) ?? current,
-    );
-    setLoaded(true);
-  }
-
-  async function fetchExactTicket(controller: AbortController, id: number) {
-    const result = await callbacks.current.onLoadTickets({
-      endpoint: 'customer_tickets_get',
-      request: { filters: { id } },
-      signal: controller.signal,
-    });
-    return result.data[0];
-  }
-
-  async function fetchReplies(
-    controller: AbortController,
-    ticket: ICustomerTicket,
-  ) {
-    const result = await callbacks.current.onLoadReplies({
-      endpoint: 'customer_tickets_reply_getall',
-      request: { filters: { ticket: ticket.id } },
-      signal: controller.signal,
-    });
-    if (controller.signal.aborted) {
-      return;
-    }
-    setReplies(result);
-    setSelected((current) =>
-      current?.id === ticket.id ? { ...current, c_unread_to_user: 0 } : current,
-    );
-    setTickets((current) =>
-      current.map((entry) =>
-        entry.id === ticket.id ? { ...entry, c_unread_to_user: 0 } : entry,
-      ),
-    );
-    setNeedsRefresh(false);
-  }
-
-  function publish(next: TicketLocation, replace = false) {
-    if (!sameTicketLocation(next, target)) {
-      onNavigate?.(next, replace);
-    }
-  }
-
-  // The list page is set before the request, so the URL changes at once.
-  function load(page = 1, nextStatus = status) {
-    setPagination((current) => ({ ...current, page }));
-    publish({ status: nextStatus, page, ticket: selected?.id });
-    return run((controller) => fetchList(controller, page, nextStatus));
-  }
-
-  // On narrow screens the list and the open conversation share one column;
-  // closing the pane only returns to the list and sends no request.
-  function showList() {
-    setComposing(false);
-    setSelected(undefined);
-    publish({ status, page: pagination.page ?? 1 });
-  }
-
-  function show(ticket: ICustomerTicket) {
-    if (pending) {
-      return;
-    }
-    setSelected(ticket);
-    setReplies([]);
-    setComposing(false);
-    publish({ status, page: pagination.page ?? 1, ticket: ticket.id });
-    void run(async (controller) => {
-      let current = ticket;
-      if (ticket.refund && !ticket.refund.order) {
-        current = (await fetchExactTicket(controller, ticket.id)) ?? ticket;
-        if (!controller.signal.aborted) {
-          setSelected(current);
-        }
-      }
-      await fetchReplies(controller, current);
-    });
-  }
-
-  // The ticket is read again with its messages: a support reply ends its
-  // `reply_wait`, which unlocks the message form.
-  function refreshReplies() {
-    const current = selected;
-    if (!current) {
-      return;
-    }
-    void run(async (controller) => {
-      const fresh = (await fetchExactTicket(controller, current.id)) ?? current;
-      if (!controller.signal.aborted) {
-        setSelected(fresh);
-      }
-      await fetchReplies(controller, fresh);
-    });
-  }
-
-  function selectStatus(nextStatus: ECustomerTicketStatus) {
-    if (pending || nextStatus === status) {
-      return;
-    }
-    setStatus(nextStatus);
-    setSelected(undefined);
-    setReplies([]);
-    setPagination({ page: 1 });
-    publish({ status: nextStatus, page: 1 });
-    void run((controller) => fetchList(controller, 1, nextStatus));
-  }
-
-  function submit(text: string, files: File[], isDefect = false) {
-    if (needsRefresh) {
-      return;
-    }
-    const replyingTo = composing ? undefined : selected?.id;
-    const target     = ticketSubmitTarget(
-      text,
-      replyingTo,
-      composing ? activeContext : undefined,
-      composing && isDefect,
-    );
-    // A refused request keeps the form open for a correction and shows the
-    // reason above the list, as Nuxt does; after a confirmed send
-    // `needsRefresh` is already set, so a failed refresh still offers the
-    // explicit reload.
-    void run(
-      async (controller) => {
-        const result = await callbacks.current.onSubmit({
-          endpoint: target.endpoint,
-          request: ticketFormData(target, files),
-          data: target.data,
-          signal: controller.signal,
-        });
-        if (controller.signal.aborted) {
-          return;
-        }
-        setSentRevision((revision) => revision + 1);
-        setNeedsRefresh(true);
-        let current  = selected;
-        if (Array.isArray(result)) {
-          setReplies(result);
-        } else {
-          current = result;
-          setSelected(result);
-          setReplies(result.replies ?? []);
-        }
-        setComposing(false);
-        setStatus(ECustomerTicketStatus.OPEN);
-        setPagination((page) => ({ ...page, page: 1 }));
-        publish(
-          { status: ECustomerTicketStatus.OPEN, page: 1, ticket: current?.id },
-          true,
-        );
-        await fetchList(controller, 1, ECustomerTicketStatus.OPEN);
-        if (current) {
-          const fresh =
-            (await fetchExactTicket(controller, current.id)) ?? current;
-          if (!controller.signal.aborted) {
-            setSelected(fresh);
-          }
-          await fetchReplies(controller, fresh);
-        }
-      },
-    );
-  }
-
-  function mutate(kind: 'close' | 'delete' | 'rate', rating?: number) {
-    const ticket    = selected;
-    if (!ticket || needsRefresh) {
-      return;
-    }
-    const endpoints = {
-      close: 'customer_tickets_close',
-      delete: 'customer_tickets_delete',
-      rate: 'customer_tickets_rate',
-    } as const;
-    void run(
-      async (controller) => {
-        await callbacks.current.onMutate({
-          endpoint: endpoints[kind],
-          request: kind === 'rate' ? { rating: rating ?? ticket.rating } : {},
-          path: { ticket_id: ticket.id },
-          signal: controller.signal,
-        });
-        if (controller.signal.aborted) {
-          return;
-        }
-        setNeedsRefresh(true);
-        if (kind === 'delete') {
-          setSelected(undefined);
-          setReplies([]);
-          setTickets((current) =>
-            current.filter((item) => item.id !== ticket.id),
-          );
-          publish({ status, page: pagination.page ?? 1 }, true);
-        } else if (kind === 'close') {
-          setSelected({
-            ...ticket,
-            status: { ...ticket.status, int: ECustomerTicketStatus.CLOSED },
-          });
-        } else {
-          setSelected({ ...ticket, rating: rating ?? ticket.rating });
-        }
-        await fetchList(controller, pagination.page ?? 1, status);
-        if (kind === 'close') {
-          const fresh = await fetchExactTicket(controller, ticket.id);
-          if (!controller.signal.aborted) {
-            setSelected(fresh);
-          }
-        }
-        if (!controller.signal.aborted) {
-          setNeedsRefresh(false);
-        }
-      },
-    );
-  }
-
-  function planFor(subscription: ICustomerSubscription) {
-    return subscriptionPlan(subscription, [
-      ...(subscriptions?.tariffs ?? []),
-      ...catalogTariffs,
-    ]);
-  }
-
-  function subjectOf(ticket: ICustomerTicket) {
-    if (ticket.product) {
-      return (
-        getAvailableNestedValueFromObject(
-          ticket.product.locale,
-          locale,
-          'product_name',
-        ) || ''
-      );
-    }
-    const subscriptionId = ticket.related_paid_subscription_id;
-    if (subscriptionId) {
-      const subscription = subscriptions?.data.find(
-        (entry) => entry.id === subscriptionId,
-      );
-      const name         = getAvailableNestedValueFromObject(
-        subscription ? planFor(subscription)?.locales : undefined,
-        locale,
-        'tariff_name',
-      );
-      return `${name || labels.typeSubscription} #${subscriptionId}`;
-    }
-    return '';
-  }
-
-  const selectedSubscription              = selected?.related_paid_subscription_id
-    ? subscriptions?.data.find(
-        (entry) => entry.id === selected.related_paid_subscription_id,
-      )
-    : undefined;
-
-  useEffect(() => {
-    setActiveContext(context);
-    setComposing(Boolean(context));
-  }, [context?.kind, context?.id, context?.orderId]);
-
-  useEffect(() => {
-    subjectActive.current?.abort();
-    const controller      = new AbortController();
-    subjectActive.current = controller;
-    setSubject(initialSubject ?? {});
-    if (!activeContext) {
-      return () => controller.abort();
-    }
-
-    async function resolveSubject() {
-      try {
-        if (
-          activeContext?.kind === 'subscription' &&
-          callbacks.current.onLoadSubscriptions
-        ) {
-          const page                    = await callbacks.current.onLoadSubscriptions({
-            endpoint: 'subscriptions_get',
-            request: {},
-            signal: controller.signal,
-          });
-          if (controller.signal.aborted) {
-            return;
-          }
-          setSubscriptions(page);
-          subscriptionRequested.current = true;
-          const subscription            = page.data.find(
-            (entry) => entry.id === activeContext.id,
-          );
-          setSubject({
-            subscription,
-            plan: subscription
-              ? subscriptionPlan(subscription, [
-                  ...(page.tariffs ?? []),
-                  ...catalogTariffs,
-                ])
-              : undefined,
-          });
-        } else if (
-          activeContext?.kind !== 'subscription' &&
-          activeContext?.orderId &&
-          callbacks.current.onLoadOrder
-        ) {
-          const page  = await callbacks.current.onLoadOrder({
-            endpoint: 'profile_orders_get',
-            request: { filters: { id: activeContext.orderId } },
-            signal: controller.signal,
-          });
-          if (controller.signal.aborted) {
-            return;
-          }
-          const order = page.data.find(
-            (entry) => entry.id === activeContext.orderId,
-          );
-          const line  = orderTicketLines(order, locale).find(
-            (entry) =>
-              entry.key === `${activeContext.kind}-${activeContext.id}`,
-          );
-          setSubject({ line });
-        }
-      } catch {
-        if (!controller.signal.aborted) {
-          setSubject({});
-        }
-      }
-    }
-
-    if (!initialSubject) {
-      void resolveSubject();
-    }
-    return () => controller.abort();
-  }, [
-    activeContext?.kind,
-    activeContext?.id,
-    activeContext?.orderId,
-    initialSubject,
-    locale,
-    catalogTariffs,
-  ]);
-
-  useEffect(() => {
-    if (
-      subscriptionRequested.current ||
-      !tickets.some((ticket) => ticket.related_paid_subscription_id) ||
-      !callbacks.current.onLoadSubscriptions
-    ) {
-      return;
-    }
-    subscriptionRequested.current = true;
-    const controller              = new AbortController();
-    let finished                  = false;
-    void Promise.resolve(
-      callbacks.current.onLoadSubscriptions({
-        endpoint: 'subscriptions_get',
-        request: {},
-        signal: controller.signal,
-      }),
-    )
-      .then((page) => {
-        if (!controller.signal.aborted) {
-          setSubscriptions(page);
-        }
-      })
-      .catch(() => undefined)
-      .finally(() => {
-        finished = !controller.signal.aborted;
-      });
-    // A request stopped before its answer (React runs effects twice in
-    // development) may be sent again by the next run.
-    return () => {
-      controller.abort();
-      if (!finished) {
-        subscriptionRequested.current = false;
-      }
-    };
-  }, [tickets]);
-
-  // Brings the state to the place from the props: on mount only what the
-  // server did not render is read, and later (the browser's Back button) the
-  // list only when its tab or page differs. The component's own navigation
-  // already matches its state, so it sends no request.
-  const locationKey                       = `${target.status}:${target.page}:${target.ticket ?? ''}`;
-  useEffect(() => {
-    const first         = !initialized.current;
-    // Marked before the early return: a server-rendered first render must
-    // still let later changes of the place (the browser's Back) through.
-    initialized.current = true;
-    if (first && !loadOnMount) {
-      return;
-    }
-    const current       = {
-      status,
-      page: pagination.page ?? 1,
-      ticket: selected?.id,
-    };
-    const listChanged   = first
-      ? !initialData
-      : current.status !== target.status || current.page !== target.page;
-    const ticketChanged = target.ticket !== current.ticket;
-    if (!listChanged && !ticketChanged) {
-      if (first) {
-        setPending(false);
-      }
-      return;
-    }
-    stopRequest();
-    setStatus(target.status);
-    setPagination((page) => ({ ...page, page: target.page }));
-    if (ticketChanged) {
-      setSelected(undefined);
-      setReplies([]);
-    }
-    void run(async (controller) => {
-      if (listChanged) {
-        await fetchList(controller, target.page, target.status);
-      }
-      if (target.ticket && ticketChanged) {
-        const ticket = await fetchExactTicket(controller, target.ticket);
-        if (ticket && !controller.signal.aborted) {
-          setSelected(ticket);
-          setComposing(false);
-          await fetchReplies(controller, ticket);
-        }
-      }
-    });
-  }, [locationKey, loadOnMount]);
-
-  useEffect(
-    () => () => {
-      stopRequest();
-      initialized.current = false;
-      subjectActive.current?.abort();
-    },
-    [],
-  );
-
-  const tabs                              = [
-    { id: ECustomerTicketStatus.OPEN, title: labels.open },
-    { id: ECustomerTicketStatus.CLOSED, title: labels.closed },
-  ];
-  const contextLabel                      = !activeContext
-    ? labels.common
-    : activeContext.kind === 'item'
-      ? labels.product
-      : labels[activeContext.kind];
-
-  return (
-    <section
-      className={`${styles.root} ${styles.stack} ${styles.page}`}
-      aria-busy={pending}
-      data-feature-part="StorefrontSupport"
-    >
-      <div className={styles.pageHeading}>
-        <h1>{labels.title}</h1>
-        <button
-          type="button"
-          className={`${styles.button} ${styles.primary}`}
-          data-ticket-new
-          disabled={pending}
-          aria-label={labels.newHint}
-          onClick={() => {
-            setActiveContext(undefined);
-            setComposing(true);
-          }}
-        >
-          <Icon path="M12 5v14M5 12h14" />
-          {labels.newAction}
-        </button>
-      </div>
-
-      {error ? (
-        <p
-          className={`${styles.notice} ${styles.noticeError}`}
-          role="alert"
-        >
-          {error}
-        </p>
-      ) : null}
-      {needsRefresh && !pending ? (
-        <div
-          className={`${styles.notice} ${styles.refreshNotice}`}
-          role="alert"
-        >
-          <p>{labels.refreshRequired}</p>
-          <button
-            className={styles.button}
-            type="button"
-            onClick={refreshReplies}
-          >
-            {common.refresh}
-          </button>
-        </div>
-      ) : null}
-
-      <div
-        className={styles.layout}
-        data-pane={paneOpen ? 'conversation' : 'list'}
-      >
-        <aside className={styles.list}>
-          <div className={styles.toolbar}>
-            <nav
-              className={styles.tabs}
-              aria-label={labels.title}
-            >
-              {tabs.map((tab) => (
-                <button
-                  className={styles.button}
-                  key={tab.id}
-                  type="button"
-                  aria-current={status === tab.id ? 'page' : undefined}
-                  disabled={pending}
-                  onClick={() => selectStatus(tab.id)}
-                >
-                  <StatusTabIcon
-                    closed={tab.id === ECustomerTicketStatus.CLOSED}
-                  />
-                  {tab.title}
-                </button>
-              ))}
-            </nav>
-            <button
-              className={`${styles.tool} ${styles.iconButton}`}
-              type="button"
-              aria-label={common.refresh}
-              title={common.refresh}
-              disabled={pending}
-              onClick={() => void load(pagination.page ?? 1)}
-            >
-              <Icon path="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" />
-            </button>
-          </div>
-
-          {!loaded ? (
-            <p className={styles.loading}>
-              {pending ? common.loading : common.failed}
-            </p>
-          ) : !tickets.length ? (
-            <OrionplaceEmptyState
-              kind="tickets"
-              message={labels.empty}
-            />
-          ) : (
-            <ul className={styles.ticketList}>
-              {tickets.map((ticket) => {
-                const ticketStatus = ticketStatusView(ticket.status, labels);
-                const subjectName  = subjectOf(ticket);
-                return (
-                  <li key={ticket.id}>
-                    <button
-                      type="button"
-                      className={styles.ticket}
-                      data-ticket-open
-                      data-ticket-subscription={
-                        ticket.related_paid_subscription_id || undefined
-                      }
-                      aria-current={
-                        selected?.id === ticket.id ? 'page' : undefined
-                      }
-                      disabled={pending}
-                      onClick={() => show(ticket)}
-                    >
-                      <span
-                        className={styles.ticketType}
-                        aria-hidden="true"
-                      >
-                        <Icon
-                          path={
-                            typeIcons[ticket.type.int] ?? 'M4 5h16v11H9l-5 4Z'
-                          }
-                        />
-                      </span>
-                      <span className={styles.ticketBody}>
-                        <span className={styles.ticketTitle}>
-                          {labels.ticket} #{ticket.id}
-                        </span>
-                        <span
-                          className={styles.ticketMeta}
-                          data-ticket-type
-                        >
-                          {ticketTypeText(ticket.type, labels)}
-                        </span>
-                        {subjectName ? (
-                          <span
-                            className={styles.ticketSubject}
-                            data-ticket-subject-name
-                          >
-                            {subjectName}
-                          </span>
-                        ) : null}
-                        {ticketStatus.text ? (
-                          <span
-                            className={`${styles.ticketMeta} ${styles.status}`}
-                            data-ticket-status={ticketStatus.icon}
-                          >
-                            <StatusTabIcon
-                              closed={ticketStatus.icon === 'lock'}
-                            />
-                            {ticketStatus.text}
-                          </span>
-                        ) : null}
-                      </span>
-                      <span className={styles.ticketSide}>
-                        <time className={styles.ticketMeta}>
-                          {ticket.time_created?.date}
-                        </time>
-                        {ticket.c_unread_to_user ? (
-                          <span className={styles.unread}>
-                            <span className={styles.screenReaderOnly}>
-                              {labels.unread}:{' '}
-                            </span>
-                            {ticket.c_unread_to_user}
-                          </span>
-                        ) : null}
-                      </span>
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          )}
-
-          <StorefrontPagination
-            compact
-            pagination={pagination}
-            pending={pending}
-            onChange={(page) => void load(page)}
-          />
-        </aside>
-
-        <div className={styles.pane}>
-          {paneOpen ? (
-            <button
-              type="button"
-              className={`${styles.button} ${styles.back}`}
-              disabled={pending}
-              aria-label={labels.backHint}
-              onClick={showList}
-            >
-              <Icon path="M15 5l-7 7 7 7" />
-              {labels.back}
-            </button>
-          ) : null}
-
-          {composing ? (
-            <>
-              <header className={styles.newHeading}>
-                <h2>{labels.new}</h2>
-                <p>{contextLabel}</p>
-              </header>
-              {subject.line || subject.subscription ? (
-                <section
-                  className={styles.subject}
-                  data-ticket-new-subject
-                  aria-labelledby="ticket-new-subject"
-                >
-                  <h3
-                    id="ticket-new-subject"
-                    className={styles.subjectTitle}
-                  >
-                    {subject.subscription
-                      ? labels.subscriptionSubject
-                      : labels.subject}
-                  </h3>
-                  {subject.subscription ? (
-                    <TicketSubscriptionCard
-                      subscription={subject.subscription}
-                      plan={subject.plan}
-                    />
-                  ) : subject.line ? (
-                    <TicketItemCard
-                      product={subject.line.product}
-                      quantity={subject.line.quantity}
-                      option={subject.line.option}
-                      amount={subject.line.amount}
-                      gallery
-                    />
-                  ) : null}
-                </section>
-              ) : null}
-              <TicketMessageForm
-                key={sentRevision}
-                creating
-                pending={pending || needsRefresh}
-                refundWindow={subject.line?.refundWindow}
-                onSubmit={submit}
-                onCancel={() => setComposing(false)}
-              />
-            </>
-          ) : selected ? (
-            <TicketConversation
-              ticket={selected}
-              subscription={selectedSubscription}
-              subscriptionPlan={
-                selectedSubscription ? planFor(selectedSubscription) : undefined
-              }
-              replies={replies}
-              pending={pending || needsRefresh}
-              sentRevision={sentRevision}
-              onLoadImage={onLoadImage}
-              onRefresh={refreshReplies}
-              onSubmit={submit}
-              onClose={() => mutate('close')}
-              onDelete={() => mutate('delete')}
-              onRate={(rating) => mutate('rate', rating)}
-            />
-          ) : (
-            <div className={styles.placeholder}>
-              <OrionplaceEmptyState
-                kind="tickets"
-                message={labels.choose}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-function StatusTabIcon({ closed }: { closed: boolean }) {
-  return (
-    <svg
-      className={styles.icon}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <rect
-        x="5"
-        y="11"
-        width="14"
-        height="10"
-      />
-      <path
-        d={closed ? 'M8 11V7a4 4 0 0 1 8 0v4' : 'M8 11V7a4 4 0 0 1 7.6-1.7'}
-      />
-    </svg>
-  );
-}