@shoppexio/storefront-react 0.0.0 → 0.1.0

package/eject/account/support.tsx

@@ -0,0 +1,453 @@
+/**
+ * The buyer's conversations with the shop.
+ *
+ * The ticket LIST arrives inside the dashboard payload — `tickets.routes.ts`
+ * publishes per-ticket routes and no collection — while a thread is a read of
+ * its own. Opening a ticket and replying to one are the only writes this lane
+ * admits. Closing is the merchant's, so a closed ticket loses its reply box
+ * rather than gaining a control the producer answers 400 to.
+ *
+ * Three panels, three states each: a skeleton while a read is out, the
+ * producer's own sentence plus a retry when one fails, and an empty state that
+ * still offers the one thing a buyer with no tickets wants — a new ticket.
+ */
+
+import { useId, useState } from 'react';
+import {
+  isOwnMessage,
+  isSendableMessage,
+  isTicketClosed,
+  messageAuthorKey,
+  narrowSupportTicket,
+  readCreatedTicketUniqid,
+  ticketTitleToSend,
+  type SupportTicket,
+} from './account-support';
+import { callCustomerApi } from './customer-account';
+import { t } from './i18n';
+import { MessageSquareIcon } from './icons';
+import { useAccountDashboard } from './dashboard';
+import {
+  AccountBackButton,
+  AccountCard,
+  AccountEmpty,
+  AccountError,
+  AccountFieldError,
+  AccountRowsSkeleton,
+  AccountSectionTitle,
+  BusySpinner,
+  StatusChip,
+  formatAccountDateTime,
+  useAccountResource,
+} from './shared';
+
+/** The contact form's control skin — see `components/contact/contact-form.tsx`. */
+const FIELD =
+  'sx-account-field sxa:w-full sxa:rounded-card sxa:border sxa:bg-[color-mix(in_oklab,_var(--sx-bg)_40%,_transparent)] sxa:px-3 sxa:py-2.5 sxa:text-small sxa:shadow-card sxa:placeholder:text-muted sxa:focus-visible:border-accent sxa:focus-visible:ring-[3px] sxa:focus-visible:ring-[color-mix(in_oklab,_var(--sx-accent)_50%,_transparent)] sxa:focus-visible:outline-none';
+
+type Mode =
+  | { name: 'list' }
+  | { name: 'create' }
+  | { name: 'thread'; uniqid: string };
+
+export function AccountSupport() {
+  const { state, reload } = useAccountDashboard();
+  const [mode, setMode] = useState<Mode>({ name: 'list' });
+
+  if (state.status === 'loading') {
+    return <AccountRowsSkeleton rows={3} label={t('support.loading')} />;
+  }
+
+  if (state.status === 'error') {
+    return <AccountError message={state.message} onRetry={reload} />;
+  }
+
+  const tickets = state.data.tickets;
+
+  if (mode.name === 'create') {
+    return (
+      <CreateTicket
+        canGoBack={tickets.length > 0}
+        onCancel={() => setMode({ name: 'list' })}
+        onCreated={(uniqid) => {
+          // The list lives in the dashboard payload, so a new ticket only
+          // exists here once that payload has been read again.
+          reload();
+          setMode({ name: 'thread', uniqid });
+        }}
+      />
+    );
+  }
+
+  if (mode.name === 'thread') {
+    return (
+      <SupportThread
+        uniqid={mode.uniqid}
+        onBack={() => setMode({ name: 'list' })}
+        onReplied={reload}
+      />
+    );
+  }
+
+  if (tickets.length === 0) {
+    return (
+      <AccountEmpty
+        title={t('support.emptyTitle')}
+        body={t('support.emptyBody')}
+        action={(
+          <button
+            type="button"
+            className="sx-account-cta sxa:cta-button sxa:inline-flex sxa:h-10 sxa:items-center sxa:px-5 sxa:text-small sxa:font-semibold"
+            onClick={() => setMode({ name: 'create' })}
+          >
+            {t('support.newTicket')}
+          </button>
+        )}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <div className="sxa:flex sxa:flex-wrap sxa:items-center sxa:justify-between sxa:gap-3">
+        <AccountSectionTitle>{t('support.ticketsTitle')}</AccountSectionTitle>
+        <button
+          type="button"
+          className="sx-account-button sxa:card-button sxa:card-button--add"
+          onClick={() => setMode({ name: 'create' })}
+        >
+          {t('support.newTicket')}
+        </button>
+      </div>
+
+      <ul className="sxa:mt-4 sxa:space-y-3">
+        {tickets.map((ticket) => (
+          <li key={ticket.uniqid}>
+            <button
+              type="button"
+              onClick={() => setMode({ name: 'thread', uniqid: ticket.uniqid })}
+              className="sxa:flex sxa:w-full sxa:items-center sxa:gap-4 sxa:rounded-input sxa:border sxa:bg-surface sxa:p-5 sxa:text-left sxa:shadow-card sxa:transition-colors sxa:hover:bg-raised"
+            >
+              <MessageSquareIcon className="sxa:h-4 sxa:w-4 sxa:shrink-0 sxa:text-muted" />
+              <div className="sxa:min-w-0 sxa:flex-1">
+                <p className="sxa:truncate sxa:text-small sxa:font-semibold">{ticket.title}</p>
+                <p className="sxa:mt-1 sxa:text-micro sxa:text-muted">
+                  {t('support.updated', {
+                    date: formatAccountDateTime(ticket.updated_at),
+                  })}
+                </p>
+              </div>
+              <StatusChip status={ticket.status} />
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function CreateTicket({
+  canGoBack,
+  onCancel,
+  onCreated,
+}: {
+  canGoBack: boolean;
+  onCancel: () => void;
+  onCreated: (uniqid: string) => void;
+}) {
+  const fieldId = useId();
+  const [title, setTitle] = useState('');
+  const [message, setMessage] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async () => {
+    if (!isSendableMessage(message)) {
+      setError(t('support.tooShort'));
+      return;
+    }
+
+    const subject = ticketTitleToSend(title);
+
+    setBusy(true);
+    setError(null);
+    const result = await callCustomerApi((sdk) => sdk.createTicket({
+      ...(subject === undefined ? {} : { title: subject }),
+      message: message.trim(),
+    }));
+    setBusy(false);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('support.createFailed'));
+      return;
+    }
+
+    const uniqid = readCreatedTicketUniqid(result.data);
+    if (uniqid === null) {
+      // The ticket may well exist, but without its id there is nothing to
+      // open — saying so beats sending the buyer into a blank thread.
+      setError(t('support.createFailed'));
+      return;
+    }
+
+    onCreated(uniqid);
+  };
+
+  return (
+    <div>
+      {canGoBack ? (
+        <AccountBackButton onClick={onCancel} label={t('support.backToTickets')} />
+      ) : null}
+
+      <AccountCard className={`sxa:p-6 ${canGoBack ? 'sxa:mt-5' : ''}`}>
+        <form
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submit();
+          }}
+        >
+          <label htmlFor={`${fieldId}-title`} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+            {t('support.subjectLabel')}
+            <span className="sxa:ml-2 sxa:text-micro sxa:font-normal sxa:text-muted">
+              {t('support.subjectOptional')}
+            </span>
+          </label>
+          <input
+            id={`${fieldId}-title`}
+            type="text"
+            value={title}
+            disabled={busy}
+            onChange={(event) => setTitle(event.target.value)}
+            className={FIELD}
+          />
+
+          <label
+            htmlFor={`${fieldId}-message`}
+            className="sxa:mt-5 sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium"
+          >
+            {t('support.messageLabel')}
+          </label>
+          <textarea
+            id={`${fieldId}-message`}
+            rows={5}
+            value={message}
+            disabled={busy}
+            aria-invalid={error ? true : undefined}
+            onChange={(event) => {
+              setMessage(event.target.value);
+              setError(null);
+            }}
+            className={`${FIELD} sxa:resize-none`}
+          />
+
+          {error ? <AccountFieldError message={error} /> : null}
+
+          <button
+            type="submit"
+            disabled={busy}
+            aria-busy={busy || undefined}
+            className="sx-account-cta sxa:cta-button sxa:mt-5 sxa:inline-flex sxa:h-10 sxa:items-center sxa:px-5 sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+          >
+            {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
+            {busy ? t('support.creating') : t('support.create')}
+          </button>
+        </form>
+      </AccountCard>
+    </div>
+  );
+}
+
+function SupportThread({
+  uniqid,
+  onBack,
+  onReplied,
+}: {
+  uniqid: string;
+  onBack: () => void;
+  onReplied: () => void;
+}) {
+  const { state, reload } = useAccountResource(`ticket:${uniqid}`, () =>
+    callCustomerApi((sdk) => sdk.ticket(uniqid)));
+
+  const back = <AccountBackButton onClick={onBack} label={t('support.backToTickets')} />;
+
+  if (state.status === 'loading') {
+    return (
+      <div>
+        {back}
+        <div className="sxa:mt-5">
+          <AccountRowsSkeleton rows={3} label={t('support.loadingThread')} />
+        </div>
+      </div>
+    );
+  }
+
+  if (state.status === 'error') {
+    return (
+      <div>
+        {back}
+        <div className="sxa:mt-5">
+          <AccountError message={state.message} onRetry={reload} />
+        </div>
+      </div>
+    );
+  }
+
+  const narrowed = narrowSupportTicket(state.data);
+  if (!narrowed.ok) {
+    // A thread missing one message reads as the merchant never having answered,
+    // so a partial read is not shown at all.
+    return (
+      <div>
+        {back}
+        <div className="sxa:mt-5">
+          <AccountError message={t('common.genericError')} onRetry={reload} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {back}
+      <ThreadBody
+        ticket={narrowed.ticket}
+        onReplied={() => {
+          // Both reads move: the thread gains a message, and the dashboard's
+          // row for it gains a new status and "updated" time.
+          reload();
+          onReplied();
+        }}
+      />
+    </div>
+  );
+}
+
+function ThreadBody({
+  ticket,
+  onReplied,
+}: {
+  ticket: SupportTicket;
+  onReplied: () => void;
+}) {
+  const replyId = useId();
+  const [reply, setReply] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const closed = isTicketClosed(ticket.status);
+
+  const send = async () => {
+    if (!isSendableMessage(reply)) {
+      setError(t('support.tooShort'));
+      return;
+    }
+
+    setBusy(true);
+    setError(null);
+    const result = await callCustomerApi((sdk) => sdk.replyToTicket(ticket.uniqid, reply.trim()));
+    setBusy(false);
+
+    if (!result.success) {
+      setError(result.message?.trim() || t('support.replyFailed'));
+      return;
+    }
+
+    setReply('');
+    onReplied();
+  };
+
+  return (
+    <div className="sxa:mt-5">
+      <div className="sxa:flex sxa:flex-wrap sxa:items-start sxa:justify-between sxa:gap-4">
+        <div className="sxa:min-w-0">
+          <h2 className="sxa:font-heading sxa:truncate sxa:text-h3 sxa:font-semibold">
+            {ticket.title ?? t('support.untitled')}
+          </h2>
+          <p className="sxa:mt-1 sxa:text-small sxa:text-muted">
+            {t('support.updated', { date: formatAccountDateTime(ticket.updated_at) })}
+          </p>
+          {ticket.invoice_id ? (
+            <p className="sxa:mt-1 sxa:text-small sxa:text-muted">
+              {t('support.aboutOrder', { id: ticket.invoice_id })}
+            </p>
+          ) : null}
+        </div>
+        <StatusChip status={ticket.status} />
+      </div>
+
+      {ticket.messages.length === 0 ? (
+        <p className="sxa:mt-5 sxa:text-small sxa:leading-relaxed sxa:text-muted">
+          {t('support.noMessages')}
+        </p>
+      ) : (
+        <ul className="sxa:mt-5 sxa:space-y-3">
+          {ticket.messages.map((message) => (
+            <li key={message.id}>
+              <AccountCard className="sxa:p-5">
+                <div className="sxa:flex sxa:flex-wrap sxa:items-baseline sxa:justify-between sxa:gap-2">
+                  <p
+                    className={`sxa:text-small sxa:font-semibold ${isOwnMessage(message.role) ? 'sxa:text-accent' : ''}`}
+                  >
+                    {t(messageAuthorKey(message.role))}
+                  </p>
+                  <p className="sxa:text-micro sxa:text-muted">
+                    {formatAccountDateTime(message.created_at)}
+                  </p>
+                </div>
+                {/* A written message keeps its own line breaks. */}
+                <p className="sxa:mt-2 sxa:text-small sxa:leading-relaxed sxa:text-muted sxa:whitespace-pre-wrap">
+                  {message.message}
+                </p>
+              </AccountCard>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {closed ? (
+        <AccountCard className="sxa:mt-5 sxa:p-5">
+          <p className="sxa:text-small sxa:font-semibold">{t('support.closedTitle')}</p>
+          <p className="sxa:mt-1 sxa:text-small sxa:leading-relaxed sxa:text-muted">
+            {t('support.closedBody')}
+          </p>
+        </AccountCard>
+      ) : (
+        <form
+          noValidate
+          className="sxa:mt-5"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void send();
+          }}
+        >
+          <label htmlFor={replyId} className="sxa:mb-1.5 sxa:block sxa:text-small sxa:font-medium">
+            {t('support.replyLabel')}
+          </label>
+          <textarea
+            id={replyId}
+            rows={4}
+            value={reply}
+            disabled={busy}
+            aria-invalid={error ? true : undefined}
+            onChange={(event) => {
+              setReply(event.target.value);
+              setError(null);
+            }}
+            className={`${FIELD} sxa:resize-none`}
+          />
+          {error ? <AccountFieldError message={error} /> : null}
+          <button
+            type="submit"
+            disabled={busy}
+            aria-busy={busy || undefined}
+            className="sx-account-cta sxa:cta-button sxa:mt-4 sxa:inline-flex sxa:h-10 sxa:items-center sxa:px-5 sxa:text-small sxa:font-semibold sxa:disabled:cursor-not-allowed sxa:disabled:opacity-50"
+          >
+            {busy ? <BusySpinner className="sxa:mr-1.5" /> : null}
+            {busy ? t('support.replying') : t('support.reply')}
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}

package/package.json

@@ -1 +1,75 @@
-{"name":"@shoppexio/storefront-react","version":"0.0.0","description":"Placeholder, see 0.1.0","license":"MIT"}
+{
+  "name": "@shoppexio/storefront-react",
+  "version": "0.1.0",
+  "description": "Commerce state, hooks, models and the customer account UI for Shoppex code storefronts",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShoppexIO/shoppex.git",
+    "directory": "packages/storefront-react"
+  },
+  "homepage": "https://docs.shoppex.io/storefront/code-storefront-development",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./account": {
+      "types": "./dist/account.d.ts",
+      "import": "./dist/account.js"
+    },
+    "./account.css": "./dist/account.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "eject",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup && bun run build:css && bun run build:eject",
+    "build:css": "tailwindcss --input src/account/account.css --output dist/account.css --optimize",
+    "lint": "biome lint src tests scripts",
+    "typecheck": "tsc --noEmit",
+    "test": "bun run build:css && bun test ./tests",
+    "build:eject": "bun scripts/build-eject.ts"
+  },
+  "keywords": [
+    "shoppex",
+    "storefront",
+    "react",
+    "ecommerce"
+  ],
+  "author": "Shoppex",
+  "license": "MIT",
+  "dependencies": {
+    "dompurify": "^3.2.7",
+    "marked": "^17.0.4"
+  },
+  "peerDependencies": {
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "4.2.1",
+    "@types/bun": "^1.4.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-router-dom": "7.18.1",
+    "tailwindcss": "4.2.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
+  }
+}