@flamingo-stack/openframe-frontend-core 0.0.539 → 0.0.540-snapshot.20260814144743

package/src/components/ui/reopen-ticket-request-modal.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from './button';
+import { CheckboxBlock } from './checkbox-block';
+import { ModalV2, ModalV2Footer, ModalV2Header, ModalV2Title } from './modal-v2';
+import { Textarea } from './textarea';
+
+/** Backend trims and caps the reason at 1000 chars; cap it client-side too. */
+const REASON_MAX_LENGTH = 1000;
+
+export interface ReopenTicketRequestSelection {
+  /** Trimmed; `null` when the field was left blank. */
+  reason: string | null;
+  /** Present ONLY when the handoff option was shown — the tech-closed
+   *  variant omits the field entirely (mirrors `TicketReopenInput`). */
+  handoffToTechnician?: boolean;
+}
+
+export interface ReopenTicketRequestModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /**
+   * Fae resolved the ticket (`Ticket.resolvedBy === END_USER`): reopening
+   * resumes the AI conversation, and the checkbox lets the user route to a
+   * technician instead. When a technician closed the ticket the option is
+   * hidden — reopening goes to a technician regardless, and the selection
+   * omits `handoffToTechnician`.
+   */
+  showHandoffOption?: boolean;
+  /** Confirm in-flight: buttons lock and the modal refuses to close. */
+  isPending?: boolean;
+  onConfirm: (selection: ReopenTicketRequestSelection) => void;
+}
+
+/**
+ * Client-side Reopen Ticket dialog (Figma openframe---fae-chat 346-10518):
+ * the end user reopening their own resolved ticket from the closed chat.
+ * Unlike the admin `ReopenTicketModal` there is no status/assignee pair —
+ * the backend picks the target via `requestTicketReopen`; the user only
+ * supplies an optional reason and (for Fae-closed tickets) the handoff
+ * choice. Presentational — the consumer performs the reopen in `onConfirm`.
+ */
+export function ReopenTicketRequestModal({
+  isOpen,
+  onClose,
+  showHandoffOption = false,
+  isPending = false,
+  onConfirm,
+}: ReopenTicketRequestModalProps) {
+  const [reason, setReason] = React.useState('');
+  const [handoff, setHandoff] = React.useState(false);
+
+  // Re-seed the inputs every time the modal opens.
+  React.useEffect(() => {
+    if (!isOpen) return;
+    setReason('');
+    setHandoff(false);
+  }, [isOpen]);
+
+  const handleConfirm = () => {
+    if (isPending) return;
+    const trimmedReason = reason.trim();
+    onConfirm({
+      reason: trimmedReason ? trimmedReason.slice(0, REASON_MAX_LENGTH) : null,
+      ...(showHandoffOption ? { handoffToTechnician: handoff } : {}),
+    });
+  };
+
+  return (
+    <ModalV2 isOpen={isOpen} onClose={isPending ? () => {} : onClose} className="text-left md:max-w-[600px]">
+      <ModalV2Header>
+        <ModalV2Title>Reopen Ticket</ModalV2Title>
+      </ModalV2Header>
+
+      <p className="text-h4 text-ods-text-primary">
+        This ticket will be reopened and the AI assistant will continue helping you.
+      </p>
+
+      <div className="w-full">
+        <Textarea
+          label="Reason"
+          value={reason}
+          onChange={event => setReason(event.target.value)}
+          placeholder="Describe what's still not working (optional)"
+          maxLength={REASON_MAX_LENGTH}
+          disabled={isPending}
+        />
+      </div>
+
+      {showHandoffOption && (
+        <CheckboxBlock
+          id="reopen-handoff-to-technician"
+          checked={handoff}
+          onCheckedChange={setHandoff}
+          label="Hand off to a Technician"
+          description="A technician will review the ticket and reply when available."
+          disabled={isPending}
+        />
+      )}
+
+      <ModalV2Footer>
+        <Button type="button" variant="outline" onClick={onClose} disabled={isPending} className="flex-1">
+          Cancel
+        </Button>
+        <Button type="button" variant="accent" onClick={handleConfirm} loading={isPending} className="flex-1">
+          Reopen Ticket
+        </Button>
+      </ModalV2Footer>
+    </ModalV2>
+  );
+}

package/src/stories/ReopenTicketModal.stories.tsx

@@ -17,10 +17,10 @@ const meta = {
       description: {
         component:
           'Reopen Ticket dialog (Figma openframe---tickets 8456-17581): shown when a technician reopens a ' +
-          'Resolved/Archived ticket. Same Status + Assigned pair as TakeOverTicketModal plus an optional free-text ' +
-          'reason. Unlike Take Over, the assignee is optional - a reopened ticket may stay unassigned. ' +
-          'Presentational - the consumer supplies option lists (design default pre-selects Tech Required), ' +
-          'default selections, and performs the actual reopen in onConfirm.',
+          'Resolved/Archived ticket. Same Status + Assigned pair as TakeOverTicketModal - both required before ' +
+          'the CTA unlocks - plus an optional free-text reason. Presentational - the consumer supplies option ' +
+          'lists (design default pre-selects Tech Required), default selections, and performs the actual reopen ' +
+          'in onConfirm.',
       },
     },
   },
@@ -98,11 +98,11 @@ export const Default: Story = {
 };
 
 /**
- * No assignee - the reopen still confirms and the ticket stays unassigned
- * (flagged for triage). This is the deliberate difference from Take Over,
- * where the CTA locks until a technician is picked.
+ * No assignee pre-selected (e.g. the ticket was unassigned): the CTA stays
+ * locked until a technician is chosen - both fields are required, matching
+ * Take Over.
  */
-export const NoAssignee: Story = {
+export const NoDefaultAssignee: Story = {
   args: { ...Default.args, initialAssigneeId: null },
   render: args => <ControlledModal {...args} />,
 };

package/src/stories/ReopenTicketRequestModal.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+import { fn } from 'storybook/test';
+import { Button } from '../components/ui/button';
+import {
+  ReopenTicketRequestModal,
+  type ReopenTicketRequestModalProps,
+  type ReopenTicketRequestSelection,
+} from '../components/ui/reopen-ticket-request-modal';
+
+const meta = {
+  title: 'UI/ReopenTicketRequestModal',
+  component: ReopenTicketRequestModal,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Client-side Reopen Ticket dialog (Figma openframe---fae-chat 346-10518): the end user reopening their ' +
+          'own resolved ticket from the closed chat. No status/assignee pair - the backend picks the target via ' +
+          'requestTicketReopen; the user supplies an optional reason and, for Fae-closed tickets, the ' +
+          'hand-off-to-a-technician choice. Tech-closed tickets hide the checkbox and omit the field entirely.',
+      },
+    },
+  },
+  argTypes: {
+    isPending: { control: 'boolean' },
+    showHandoffOption: { control: 'boolean' },
+  },
+} satisfies Meta<typeof ReopenTicketRequestModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledModal(props: Partial<ReopenTicketRequestModalProps> & { pendingOnConfirm?: boolean }) {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isPending, setIsPending] = useState(false);
+
+  const handleConfirm = (selection: ReopenTicketRequestSelection) => {
+    props.onConfirm?.(selection);
+    if (!props.pendingOnConfirm) {
+      setIsOpen(false);
+      return;
+    }
+    // Simulate the requestTicketReopen round-trip.
+    setIsPending(true);
+    setTimeout(() => {
+      setIsPending(false);
+      setIsOpen(false);
+    }, 1500);
+  };
+
+  return (
+    <>
+      <Button variant="outline" onClick={() => setIsOpen(true)}>
+        Reopen Ticket
+      </Button>
+      <ReopenTicketRequestModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        {...props}
+        isPending={props.isPending ?? isPending}
+        onConfirm={handleConfirm}
+      />
+    </>
+  );
+}
+
+/** Fae-closed ticket (`resolvedBy === END_USER`) - the handoff checkbox is offered. */
+export const FaeClosed: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    onConfirm: fn(),
+    showHandoffOption: true,
+  },
+  render: args => <ControlledModal {...args} />,
+};
+
+/** Technician-closed ticket - no checkbox; the selection omits `handoffToTechnician`. */
+export const TechnicianClosed: Story = {
+  args: { ...FaeClosed.args, showHandoffOption: false },
+  render: args => <ControlledModal {...args} />,
+};
+
+/** Confirm shows the pending state (buttons lock, modal refuses to close). */
+export const PendingOnConfirm: Story = {
+  args: { ...FaeClosed.args },
+  render: args => <ControlledModal {...args} pendingOnConfirm />,
+};