Merge pull request #195 from twilio-labs/fix/betterTemplates

Fix/better templates
twilio-labs · Nov 25, 2024 · 8fce744 · 8fce744
2 parents 71eea1b + 9936873
commit 8fce744
Show file tree

Hide file tree

Showing 22 changed files with 745 additions and 502 deletions.
diff --git a/__tests__/scripts/whatsappTemplates.test.ts b/__tests__/scripts/whatsappTemplates.test.ts
@@ -1,5 +1,5 @@
+import { getHelpPrivacyTemplate } from "@/scripts/buildContentTemplates";
 import { describe, expect, test } from "vitest";
-import { getHelpPrivacyTemplate } from "@/scripts/getTemplates";
 
 describe("getHelpPrivacyTemplate", () => {
   test("should return an object with the correct structure", () => {

diff --git a/public/channel-icons/sms.svg b/public/channel-icons/sms.svg
diff --git a/public/channel-icons/whatsapp.svg b/public/channel-icons/whatsapp.svg
diff --git a/src/app/(layout-free)/event/[slug]/kiosk/layout.tsx b/src/app/(layout-free)/event/[slug]/kiosk/layout.tsx
@@ -0,0 +1,14 @@
+import Header from "../menu/header";
+
+import { Toaster } from "@/components/ui/toaster";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header number="ABC" />
+      <Toaster />
+      <main className="px-24 pt-16">{children}</main> 
+      {/* Use these parameters to adapt to a different screen size */}
+    </div>
+  );
+}
diff --git a/...aster-layout)/event/[slug]/kiosk/page.tsx → ...(layout-free)/event/[slug]/kiosk/page.tsx b/...aster-layout)/event/[slug]/kiosk/page.tsx → ...(layout-free)/event/[slug]/kiosk/page.tsx
@@ -1,7 +1,7 @@
 import { Privilege } from "@/middleware";
 import { cookies } from "next/headers";
-import OrderForm from "./order-form";
 import { getSyncService } from "@/lib/twilio";
+import OrderForm from "@/app/(master-layout)/event/[slug]/orders/order-form";
 
 export default async function KioskPage(props: {
   params: Promise<{ slug: string }>;
@@ -28,18 +28,20 @@ export default async function KioskPage(props: {
     const event = items.find((item) => item.data.slug === params.slug);
 
     return (
-      <main className="p-4 md:p-6 lg:p-8 space-y-8 flex-1">
-        <h1 className="text-3xl font-bold">Kiosk</h1>
+      <div className="p-4 space-y-8 flex-1">
+        <p className="text-4xl">
+          Order your beverage here and pick it up at the Twilio booth.
+        </p>
         {hasPermissions && (
           <OrderForm
-            eventSlug={params.slug}
             askForSender={true}
             showToast={true}
+            eventSlug={params.slug}
             selection={event?.data.selection}
           />
         )}
-        {!hasPermissions && <p>Unauthorized</p>}
-      </main>
+        {!hasPermissions && <p className="text-4xl">Unauthorized</p>}
+      </div>
     );
   } catch (e: any) {
     console.error(e);

diff --git a/src/app/(layout-free)/event/[slug]/menu/menu-item.tsx b/src/app/(layout-free)/event/[slug]/menu/menu-item.tsx
@@ -12,7 +12,7 @@ export default function MenuItem({
 }) {
   const IconComponent = iconMap[shortTitle];
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col cursor-pointer">
       {IconComponent ? (
         <IconComponent
           width="8rem"
@@ -31,7 +31,7 @@ export default function MenuItem({
       )}
       <div className="text-center">
         <h3 className="font-semibold">{title}</h3>
-        <p className="text-sm text-gray-500 dark:text-gray-400">
+        <p className="text-sm mt-2">
           {description}
         </p>
       </div>

diff --git a/src/app/(master-layout)/configuration/page.tsx b/src/app/(master-layout)/configuration/page.tsx
@@ -48,7 +48,10 @@ function ConfigPage() {
                     });
                   }}
                 >
-                  <MessageSquareIcon className={`h-6 w-6 text-white`} />
+                  <img
+                    src="/channel-icons/sms.svg"
+                    className={`h-6 w-6 text-white`}
+                  />
                 </button>
                 <button
                   title={
@@ -68,7 +71,10 @@ function ConfigPage() {
                     });
                   }}
                 >
-                  <MessageCircleMoreIcon className={`h-6 w-6 text-white`} />
+                  <img
+                    src="/channel-icons/whatsapp.svg"
+                    className={`h-6 w-6 text-white`}
+                  />
                 </button>
               </div>
             ))

diff --git a/src/app/(master-layout)/event/[slug]/orders/custom-order-popover-content.tsx b/src/app/(master-layout)/event/[slug]/orders/custom-order-popover-content.tsx
@@ -1,6 +1,6 @@
 import { PopoverContent } from "@/components/ui/popover";
 import { Selection } from "../../../../../components/menu-select";
-import OrderForm from "../kiosk/order-form";
+import OrderForm from "./order-form";
 
 export default function CustomOrderPopoverContent({
   selection,

diff --git a/src/app/(master-layout)/event/[slug]/orders/headerControls.tsx b/src/app/(master-layout)/event/[slug]/orders/headerControls.tsx
@@ -38,7 +38,7 @@ export default function HeaderControls({
     getCookie("privilege") as Privilege,
   );
 
-  if(!isPriviledged) return null;
+  if (!isPriviledged) return null;
 
   return (
     <div>

diff --git a/...layout)/event/[slug]/kiosk/order-form.tsx → ...ayout)/event/[slug]/orders/order-form.tsx b/...layout)/event/[slug]/kiosk/order-form.tsx → ...ayout)/event/[slug]/orders/order-form.tsx
@@ -162,7 +162,7 @@ export default function OrderForm({
         disabled={pending}
         className="w-full bg-slate-300 hover:bg-slate-400 "
       >
-        {pending ? "Creating..." : "Create Order"}
+        {pending ? "Ordering..." : "Create Order"}
       </Button>
     </form>
   );

diff --git a/src/app/(master-layout)/event/[slug]/orders/ordersList.tsx b/src/app/(master-layout)/event/[slug]/orders/ordersList.tsx
@@ -12,13 +12,12 @@ import { useToast } from "@/components/ui/use-toast";
 
 import { Event } from "@/app/(master-layout)/event/[slug]/page";
 
+import { Check, Trash2Icon, BellRing, UserCheck } from "lucide-react";
 import {
   getOrderCancelledMessage,
   getOrderReadyMessage,
   getOrderReadyReminderMessage,
-} from "@/lib/templates";
-
-import { Check, Trash2Icon, BellRing, UserCheck } from "lucide-react";
+} from "@/scripts/fetchContentTemplates";
 
 export default function OrdersList({
   ordersList,
@@ -131,18 +130,23 @@ export default function OrdersList({
                         Date.now() - dateUpdated < 3 * 60 * 1000 &&
                         data?.reminded
                       }
-                      onClick={(
+                      onClick={async (
                         ev: React.MouseEvent<HTMLButtonElement, MouseEvent> & {
                           target: HTMLButtonElement;
                         },
                       ) => {
                         ev.target.disabled = true;
-                        const message = getOrderReadyReminderMessage(
+                        const message = await getOrderReadyReminderMessage(
                           data.item.shortTitle,
                           index,
                           event.pickupLocation,
                         );
-                        addMessageToConversation(data.key, message);
+                        addMessageToConversation(
+                          data.key,
+                          "",
+                          message.contentSid,
+                          message.contentVariables,
+                        );
                         updateOrder(index, { reminded: true });
                         toast({
                           title: "Customer Reminded",
@@ -157,7 +161,7 @@ export default function OrdersList({
                     <Button
                       className=" hover:bg-green-300 flex items-center justify-center"
                       title="Order Made"
-                      onClick={(
+                      onClick={async (
                         ev: React.MouseEvent<HTMLButtonElement, MouseEvent> & {
                           target: HTMLButtonElement;
                         },
@@ -166,12 +170,17 @@ export default function OrdersList({
                         updateOrder(index, { status: "ready" });
 
                         if (!data?.manual) {
-                          const message = getOrderReadyMessage(
+                          const message = await getOrderReadyMessage(
                             data.item.shortTitle,
                             index,
                             event.pickupLocation,
                           );
-                          addMessageToConversation(data.key, message);
+                          addMessageToConversation(
+                            data.key,
+                            "",
+                            message.contentSid,
+                            message.contentVariables,
+                          );
                         }
 
                         toast({
@@ -234,11 +243,16 @@ export default function OrdersList({
                           });
 
                           if (!data?.manual) {
-                            const message = getOrderCancelledMessage(
+                            const message = await getOrderCancelledMessage(
                               data.item.shortTitle,
                               index,
                             );
-                            addMessageToConversation(data.key, message);
+                            addMessageToConversation(
+                              data.key,
+                              "",
+                              message.contentSid,
+                              message.contentVariables,
+                            );
                           }
                           toast({
                             title: "Order Cancelled",

diff --git a/src/app/webhooks/conversations/coffee-helper.ts b/src/app/webhooks/conversations/coffee-helper.ts
@@ -1,17 +1,14 @@
 import { Event } from "@/app/(master-layout)/event/[slug]/page";
 import { Order } from "@/config/menus";
+import { getCancelOrderMessage, getNoOpenOrderMessage, getOopsMessage } from "@/lib/stringTemplates";
 
-import * as templates from "@/lib/templates";
 import {
   addMessageToConversation,
   updateSyncListItem,
   updateSyncMapItem,
 } from "@/lib/twilio";
 
-const NEXT_PUBLIC_EVENTS_MAP = process.env.NEXT_PUBLIC_EVENTS_MAP || "",
-  NEXT_PUBLIC_ACTIVE_CUSTOMERS_MAP =
-    process.env.NEXT_PUBLIC_ACTIVE_CUSTOMERS_MAP || "",
-  UNLIMTED_ORDERS = (process.env.UNLIMITED_ORDERS || "").split(",");
+const NEXT_PUBLIC_EVENTS_MAP = process.env.NEXT_PUBLIC_EVENTS_MAP || "";
 
 export async function updateOrder(event: string, index: number, data: Order) {
   const item = await updateSyncListItem(event, index, data);
@@ -32,17 +29,17 @@ export async function cancelOrder(
         cancelledCount: Number(event.cancelledCount) + 1,
       });
 
-      const message = templates.getCancelOrderMessage(
+      const message = getCancelOrderMessage(
         data.item.shortTitle,
         index,
       );
       addMessageToConversation(conversationSid, message);
     } catch (error) {
-      const message = templates.getOopsMessage(error);
+      const message = getOopsMessage(error);
       addMessageToConversation(conversationSid, message);
     }
   } else {
-    const message = templates.getNoOpenOrderMessage();
+    const message = getNoOpenOrderMessage();
     addMessageToConversation(conversationSid, message);
   }
 }