Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Commit

Permalink
feat: rework detail panel (#482)
Browse files Browse the repository at this point in the history
* feat: rework details panel

* chore: cleanup

* chore: cleanup

* chore: cleanup
  • Loading branch information
DavidRouyer authored Oct 3, 2023
1 parent ead271b commit f8095a9
Show file tree
Hide file tree
Showing 15 changed files with 401 additions and 324 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,53 +13,24 @@ import { RelativeTime } from '~/components/ui/relative-time';
import { api } from '~/utils/api';
import { cn } from '~/utils/utils';

const activity = [
{
id: 1,
type: 'created',
author: { name: 'Leslie Alexander' },
createdAt: '2023-01-23T10:32',
},
{
id: 2,
type: 'assigned',
author: { name: 'Tom Cook' },
createdAt: '2023-01-23T11:03',
},
{
id: 3,
type: 'commented',
author: {
name: 'Sophie Radcliff',
avatarUrl:
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
comment: 'Called client, they are not happy with the product.',
createdAt: '2023-01-23T15:56',
},
{
id: 5,
type: 'resolved',
author: { name: 'Tom Cook' },
createdAt: '2023-01-24T09:20',
},
];

export const ActivityPanel: FC<{
export const Activity: FC<{
ticketId: number;
}> = ({ ticketId }) => {
const { data: ticketActivitiesData } = api.ticketActivity.byTicketId.useQuery(
{
ticketId,
}
);

return (
<ul className="space-y-6">
{ticketActivitiesData?.map((ticketActivity, ticketActivityIdx) => (
<li key={ticketActivity.id} className="relative flex gap-x-4">
<div
className={cn(
ticketActivityIdx === activity.length - 1 ? 'h-6' : '-bottom-6',
ticketActivityIdx === ticketActivitiesData.length - 1
? 'h-6'
: '-bottom-6',
'absolute left-0 top-0 flex w-6 justify-center'
)}
>
Expand Down Expand Up @@ -170,4 +141,4 @@ export const ActivityPanel: FC<{
);
};

ActivityPanel.displayName = 'ActivityPanel';
Activity.displayName = 'ActivityPanel';
21 changes: 13 additions & 8 deletions apps/customer-service/src/components/infos/info-panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
import { FC } from 'react';
import { FormattedMessage } from 'react-intl';

import { ActivityPanel } from '~/components/infos/activity-panel';
import { InfoSummary } from '~/components/infos/info-summary';
import { LinkedTicketsPanel } from '~/components/infos/linked-tickets-panel';
import { UserInfoPanel } from '~/components/infos/user-info-panel';
import { Activity } from '~/components/infos/activity';
import { LinkedTickets } from '~/components/infos/linked-tickets';
import { TicketInfo } from '~/components/infos/ticket-info';
import { UserInfo } from '~/components/infos/user-info';
import {
Accordion,
AccordionContent,
Expand All @@ -28,8 +28,13 @@ export const InfoPanel: FC<{

return (
<aside className="fixed inset-y-0 right-0 hidden w-96 overflow-y-auto border-l px-4 py-6 sm:px-6 xl:block">
<header className="flex items-center justify-between border-b pb-6">
<h1 className="text-base font-semibold leading-10 text-foreground">
<FormattedMessage id="info_panel.details" />
</h1>
</header>
<div className="flex flex-1 flex-col">
<InfoSummary ticketId={ticketId} />
<TicketInfo ticketId={ticketId} />
<Accordion
type="multiple"
className="w-full"
Expand All @@ -40,15 +45,15 @@ export const InfoPanel: FC<{
<FormattedMessage id="info_panel.contact_information" />
</AccordionTrigger>
<AccordionContent>
<UserInfoPanel ticketId={ticketId} />
<UserInfo ticketId={ticketId} />
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-1">
<AccordionTrigger>
<FormattedMessage id="info_panel.recent_conversations" />
</AccordionTrigger>
<AccordionContent>
<LinkedTicketsPanel
<LinkedTickets
ticketId={ticketId}
contactId={ticketData?.authorId}
/>
Expand All @@ -59,7 +64,7 @@ export const InfoPanel: FC<{
<FormattedMessage id="info_panel.activity" />
</AccordionTrigger>
<AccordionContent>
<ActivityPanel ticketId={ticketId} />
<Activity ticketId={ticketId} />
</AccordionContent>
</AccordionItem>
</Accordion>
Expand Down
60 changes: 0 additions & 60 deletions apps/customer-service/src/components/infos/info-summary.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
import { Badge } from '~/components/ui/badge';
import { api } from '~/utils/api';

type LinkedTicketsPanelProps = {
type LinkedTicketsProps = {
ticketId: number;
contactId?: number;
};

export const LinkedTicketsPanel: FC<LinkedTicketsPanelProps> = ({
export const LinkedTickets: FC<LinkedTicketsProps> = ({
ticketId,
contactId,
}) => {
Expand Down Expand Up @@ -98,4 +98,4 @@ export const LinkedTicketsPanel: FC<LinkedTicketsPanelProps> = ({
);
};

LinkedTicketsPanel.displayName = 'UserTicketsPanel';
LinkedTickets.displayName = 'UserTicketsPanel';
37 changes: 37 additions & 0 deletions apps/customer-service/src/components/infos/ticket-info.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { FC } from 'react';
import { FormattedMessage } from 'react-intl';

import { TicketAssignmentDropdown } from '~/components/tickets/ticket-assignment-dropdown';
import { TicketStatusDropdowm } from '~/components/tickets/ticket-status-dropdown';
import { api } from '~/utils/api';

export const TicketInfo: FC<{ ticketId: number }> = ({ ticketId }) => {
const { data: ticketData } = api.ticket.byId.useQuery({
id: ticketId,
});

if (!ticketData) {
return null;
}

return (
<dl className="grid grid-cols-[5rem,_1fr] items-center gap-x-3 gap-y-2 border-b py-4">
<dt className="text-sm leading-8">
<FormattedMessage id="info_panel.ticket_panel.status" />
</dt>
<dd className="truncate text-sm leading-5 text-muted-foreground">
<TicketStatusDropdowm status={ticketData?.status} ticketId={ticketId} />
</dd>

<dt className="text-sm leading-8">
<FormattedMessage id="info_panel.ticket_panel.assignee" />
</dt>
<dd className="truncate text-sm leading-5 text-muted-foreground">
<TicketAssignmentDropdown
assignedTo={ticketData?.assignedTo}
ticketId={ticketId}
/>
</dd>
</dl>
);
};
71 changes: 0 additions & 71 deletions apps/customer-service/src/components/infos/user-info-panel.tsx

This file was deleted.

77 changes: 77 additions & 0 deletions apps/customer-service/src/components/infos/user-info.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { FC } from 'react';
import { FormattedMessage } from 'react-intl';

import { PhoneNumber } from '~/components/infos/phone-number';
import { Copy } from '~/components/ui/copy';
import { api } from '~/utils/api';

const user = {
app: {
platform: 'android',
version: '1.0.0',
},
};

export const UserInfo: FC<{ ticketId: number }> = ({ ticketId }) => {
const { data: ticketData } = api.ticket.byId.useQuery({
id: ticketId,
});

if (!ticketData) {
return null;
}

return (
<dl className="grid grid-cols-[5rem,_1fr] items-center gap-x-3 gap-y-4">
<dt className="flex flex-none items-center">
<FormattedMessage id="info_panel.user_panel.name" />
</dt>
<dd className="truncate text-sm leading-5 text-muted-foreground">
{ticketData.author.name ? (
<Copy content={ticketData.author.name}>{ticketData.author.name}</Copy>
) : (
<span>
<FormattedMessage id="not_documented" />
</span>
)}
</dd>

<dt className="flex flex-none items-center">
<FormattedMessage id="info_panel.user_panel.email" />
</dt>
<dd className="truncate text-sm leading-5 text-muted-foreground">
{ticketData.author.email ? (
<Copy content={ticketData.author.email}>
{ticketData.author.email}
</Copy>
) : (
<span>
<FormattedMessage id="not_documented" />
</span>
)}
</dd>

<dt className="flex flex-none items-center">
<FormattedMessage id="info_panel.user_panel.phone_number" />
</dt>
<dd className="truncate text-sm leading-5 text-muted-foreground">
{ticketData.author.phone ? (
<Copy content={ticketData.author.phone}>
<PhoneNumber value={ticketData.author.phone} />
</Copy>
) : (
<span>
<FormattedMessage id="not_documented" />
</span>
)}
</dd>

<dt className="flex flex-none items-center">
<FormattedMessage id="user.platform" />
</dt>
<dd className="truncate text-sm leading-5 text-muted-foreground">
<Copy content={user.app.version}>{user.app.version}</Copy>
</dd>
</dl>
);
};
Loading

0 comments on commit f8095a9

Please sign in to comment.