orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,1040 @@
+'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>
+  );
+}