Merge branch 'master' into outgoing-calls

app/messages/api/queue/insert-messages.ts

@@ -23,8 +23,8 @@ const insertMessagesQueue = Queue<Payload>(
 
 		const sms = messages
 			.map<Message>((message) => ({
-				organizationId,
 				id: message.sid,
+				organizationId,
 				phoneNumberId: phoneNumber.id,
 				content: encrypt(message.body, phoneNumber.organization.encryptionKey),
 				from: message.from,

app/messages/api/queue/notify-incoming-message.ts

@@ -46,7 +46,7 @@ const notifyIncomingMessageQueue = Queue<Payload>(
 
 				try {
 					await webpush.sendNotification(webPushSubscription, JSON.stringify(notification));
-				} catch (error) {
+				} catch (error: any) {
 					logger.error(error);
 					if (error instanceof WebPushError) {
 						// subscription most likely expired or has been revoked

app/messages/api/queue/send-message.ts

@@ -34,7 +34,7 @@ const sendMessageQueue = Queue<Payload>(
 				where: { organizationId_phoneNumberId_id: { id, organizationId, phoneNumberId } },
 				data: { id: message.sid },
 			});
-		} catch (error) {
+		} catch (error: any) {
 			// TODO: handle twilio error
 			console.log(error.code); // 21211
 			console.log(error.moreInfo); // https://www.twilio.com/docs/errors/21211

app/messages/api/webhook/incoming-message.test.ts

@@ -1,6 +1,6 @@
-import { testApiHandler } from "next-test-api-route-handler";
 import twilio from "twilio";
 
+import { testApiHandler } from "../../../../test/test-api-handler";
 import db from "db";
 import handler from "./incoming-message";
 import insertIncomingMessageQueue from "../queue/insert-incoming-message";

app/messages/api/webhook/incoming-message.ts

@@ -2,11 +2,15 @@ import type { BlitzApiRequest, BlitzApiResponse } from "blitz";
 import { getConfig } from "blitz";
 import twilio from "twilio";
 
-import type { ApiError } from "../../../_types";
 import appLogger from "../../../../integrations/logger";
 import db from "../../../../db";
 import insertIncomingMessageQueue from "../queue/insert-incoming-message";
 
+type ApiError = {
+	statusCode: number;
+	errorMessage: string;
+};
+
 const logger = appLogger.child({ route: "/api/webhook/incoming-message" });
 const { serverRuntimeConfig } = getConfig();
 
@@ -83,7 +87,7 @@ export default async function incomingMessageHandler(req: BlitzApiRequest, res:
 
 		res.setHeader("content-type", "text/html");
 		res.status(200).send("<Response></Response>");
-	} catch (error) {
+	} catch (error: any) {
 		const statusCode = error.statusCode ?? 500;
 		const apiError: ApiError = {
 			statusCode,

app/messages/components/conversation.tsx

@@ -10,21 +10,22 @@ export default function Conversation() {
 	const router = useRouter();
 	const recipient = decodeURIComponent(router.params.recipient);
 	const conversation = useConversation(recipient)[0];
+	const messages = conversation?.messages ?? [];
 	const messagesListRef = useRef<HTMLUListElement>(null);
 
 	useEffect(() => {
 		messagesListRef.current?.querySelector("li:last-child")?.scrollIntoView();
-	}, [conversation, messagesListRef]);
+	}, [messages, messagesListRef]);
 
 	return (
 		<>
 			<div className="flex flex-col space-y-6 p-6 pt-12 pb-16">
 				<ul ref={messagesListRef}>
-					{conversation.length === 0 ? "empty state" : null}
-					{conversation.map((message, index) => {
+					{messages.length === 0 ? "empty state" : null}
+					{messages.map((message, index) => {
 						const isOutbound = message.direction === Direction.Outbound;
-						const nextMessage = conversation![index + 1];
-						const previousMessage = conversation![index - 1];
+						const nextMessage = messages![index + 1];
+						const previousMessage = messages![index - 1];
 						const isNextMessageFromSameSender = message.from === nextMessage?.from;
 						const isPreviousMessageFromSameSender = message.from === previousMessage?.from;
 

app/messages/components/conversations-list.tsx

@@ -1,4 +1,7 @@
 import { Link, useQuery, Routes } from "blitz";
+import { DateTime } from "luxon";
+import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import getConversationsQuery from "../queries/get-conversations";
 
@@ -11,21 +14,20 @@ export default function ConversationsList() {
 
 	return (
 		<ul className="divide-y">
-			{Object.entries(conversations).map(([recipient, messages]) => {
+			{Object.values(conversations).map(({ recipient, formattedPhoneNumber, messages }) => {
 				const lastMessage = messages[messages.length - 1]!;
 				return (
-					<li key={recipient} className="py-2">
-						<Link
-							href={Routes.ConversationPage({
-								recipient: encodeURI(recipient),
-							})}
-						>
+					<li key={recipient} className="py-2 p-4">
+						<Link href={Routes.ConversationPage({ recipient })}>
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">
-									<strong>{recipient}</strong>
-									<div>{new Date(lastMessage.sentAt).toLocaleString("fr-FR")}</div>
+									<strong>{formattedPhoneNumber}</strong>
+									<div className="text-gray-700 flex flex-row gap-x-1">
+										{formatMessageDate(lastMessage.sentAt)}
+										<FontAwesomeIcon className="w-4 h-4 my-auto" icon={faChevronRight} />
+									</div>
 								</div>
-								<div>{lastMessage.content}</div>
+								<div className="line-clamp-2 text-gray-700">{lastMessage.content}</div>
 							</a>
 						</Link>
 					</li>
@@ -34,3 +36,20 @@ export default function ConversationsList() {
 		</ul>
 	);
 }
+
+function formatMessageDate(date: Date): string {
+	const messageDate = DateTime.fromJSDate(date);
+	const diff = messageDate.diffNow("days");
+
+	const isToday = diff.days > -1;
+	if (isToday) {
+		return messageDate.toFormat("HH:mm", { locale: "fr-FR" });
+	}
+
+	const isDuringLastWeek = diff.days > -8;
+	if (isDuringLastWeek) {
+		return messageDate.weekdayLong;
+	}
+
+	return messageDate.toFormat("dd/MM/yyyy", { locale: "fr-FR" });
+}

app/messages/components/new-message-area.tsx

@@ -59,14 +59,20 @@ const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
 			(conversations) => {
 				const nextConversations = { ...conversations };
 				if (!nextConversations[recipient]) {
-					nextConversations[recipient] = [];
+					nextConversations[recipient] = {
+						recipient,
+						formattedPhoneNumber: recipient,
+						messages: [],
+					};
 				}
 
-				nextConversations[recipient] = [...nextConversations[recipient]!, message];
+				nextConversations[recipient]!.messages = [...nextConversations[recipient]!.messages, message];
 
 				return Object.fromEntries(
 					Object.entries(nextConversations).sort(
-						([, a], [, b]) => b[b.length - 1]!.sentAt.getTime() - a[a.length - 1]!.sentAt.getTime(),
+						([, a], [, b]) =>
+							b.messages[b.messages.length - 1]!.sentAt.getTime() -
+							a.messages[a.messages.length - 1]!.sentAt.getTime(),
 					),
 				);
 			},

app/messages/hooks/use-conversation.ts

@@ -9,7 +9,7 @@ export default function useConversation(recipient: string) {
 		{
 			select(conversations) {
 				if (!conversations[recipient]) {
-					return [];
+					return null;
 				}
 
 				return conversations[recipient]!;

app/messages/mutations/send-message.ts

@@ -27,7 +27,7 @@ export default resolver.pipe(resolver.zod(Body), resolver.authorize(), async ({
 	const twilioClient = getTwilioClient(organization);
 	try {
 		await twilioClient.lookups.v1.phoneNumbers(to).fetch();
-	} catch (error) {
+	} catch (error: any) {
 		logger.error(error);
 		return;
 	}

app/messages/pages/messages/[recipient].tsx

@@ -7,12 +7,14 @@ import { faLongArrowLeft, faInfoCircle, faPhoneAlt as faPhone } from "@fortaweso
 import Layout from "../../../core/layouts/layout";
 import Conversation from "../../components/conversation";
 import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
+import useConversation from "../../hooks/use-conversation";
 
 const ConversationPage: BlitzPage = () => {
 	useRequireOnboarding();
 
 	const router = useRouter();
 	const recipient = decodeURIComponent(router.params.recipient);
+	const conversation = useConversation(recipient)[0];
 
 	return (
 		<>
@@ -20,7 +22,7 @@ const ConversationPage: BlitzPage = () => {
 				<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
 				</span>
-				<strong className="col-span-1 text-center">{recipient}</strong>
+				<strong className="col-span-1">{conversation?.formattedPhoneNumber ?? recipient}</strong>
 				<span className="col-span-1 flex justify-end space-x-4 pr-2">
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faPhone} />
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />

app/messages/queries/get-conversations.ts

@@ -1,10 +1,17 @@
 import { resolver, NotFoundError } from "blitz";
 import { z } from "zod";
+import PhoneNumber from "awesome-phonenumber";
 
 import db, { Direction, Message, Prisma } from "../../../db";
 import { decrypt } from "../../../db/_encryption";
 import { enforceSuperAdminIfNotCurrentOrganization, setDefaultOrganizationId } from "../../core/utils";
 
+type Conversation = {
+	recipient: string;
+	formattedPhoneNumber: string;
+	messages: Message[];
+};
+
 export default resolver.pipe(
 	resolver.zod(z.object({ organizationId: z.string().optional() })),
 	resolver.authorize(),
@@ -25,7 +32,7 @@ export default resolver.pipe(
 			orderBy: { sentAt: Prisma.SortOrder.desc },
 		});
 
-		let conversations: Record<string, Message[]> = {};
+		let conversations: Record<string, Conversation> = {};
 		for (const message of messages) {
 			let recipient: string;
 			if (message.direction === Direction.Outbound) {
@@ -33,21 +40,28 @@ export default resolver.pipe(
 			} else {
 				recipient = message.from;
 			}
+			const formattedPhoneNumber = new PhoneNumber(recipient).getNumber("international");
 
 			if (!conversations[recipient]) {
-				conversations[recipient] = [];
+				conversations[recipient] = {
+					recipient,
+					formattedPhoneNumber,
+					messages: [],
+				};
 			}
 
-			conversations[recipient]!.push({
+			conversations[recipient]!.messages.push({
 				...message,
 				content: decrypt(message.content, organization.encryptionKey),
 			});
 
-			conversations[recipient]!.sort((a, b) => a.sentAt.getTime() - b.sentAt.getTime());
+			conversations[recipient]!.messages.sort((a, b) => a.sentAt.getTime() - b.sentAt.getTime());
 		}
 		conversations = Object.fromEntries(
 			Object.entries(conversations).sort(
-				([, a], [, b]) => b[b.length - 1]!.sentAt.getTime() - a[a.length - 1]!.sentAt.getTime(),
+				([, a], [, b]) =>
+					b.messages[b.messages.length - 1]!.sentAt.getTime() -
+					a.messages[a.messages.length - 1]!.sentAt.getTime(),
 			),
 		);