Bookings emails

app/atoms/switching-workspace.ts

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const switchingWorkspaceAtom = atom(true);

app/components/booking/booking-assets-column.tsx

@@ -121,15 +121,15 @@ const ListAssetContent = ({ item }: { item: AssetWithBooking }) => {
       <Td className="w-full p-0 md:p-0">
         <div className="flex justify-between gap-3 p-4 md:justify-normal md:px-6">
           <div className="flex items-center gap-3">
-            <div className="flex h-12 w-12 items-center justify-center">
+            <div className="flex size-12 items-center justify-center">
               <AssetImage
                 asset={{
                   assetId: item.id,
                   mainImage: item.mainImage,
                   mainImageExpiration: item.mainImageExpiration,
                   alt: item.title,
                 }}
-                className="h-full w-full rounded-[4px] border object-cover"
+                className="size-full rounded-[4px] border object-cover"
               />
             </div>
             <div className="flex flex-row items-center gap-2 md:flex-col md:items-start md:gap-0">

app/components/booking/delete-booking.tsx

@@ -36,7 +36,7 @@ export const DeleteBooking = ({
     <AlertDialogContent>
       <AlertDialogHeader>
         <div className="mx-auto md:m-0">
-          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
+          <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
             <TrashIcon />
           </span>
         </div>

app/components/booking/remove-asset-from-booking.tsx

@@ -46,7 +46,7 @@ export const RemoveAssetFromBooking = ({ asset }: { asset: Asset }) => {
       <AlertDialogContent>
         <AlertDialogHeader>
           <div className="mx-auto md:m-0">
-            <span className="flex h-12 w-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
+            <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
               <TrashIcon />
             </span>
           </div>

app/components/layout/sidebar/bottom.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import type { User } from "@prisma/client";
 import { Form } from "@remix-run/react";
+import { useAtom } from "jotai";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { ChevronRight, QuestionsIcon } from "~/components/icons";
 import { CrispButton } from "~/components/marketing/crisp";
 import { Button } from "~/components/shared";
@@ -20,9 +22,15 @@ interface Props {
 
 export default function SidebarBottom({ user }: Props) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
 
   return (
-    <div className="bottom gap-2">
+    <div
+      className={tw(
+        "bottom gap-2",
+        workspaceSwitching ? "pointer-events-none" : ""
+      )}
+    >
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger
           onClick={() => setDropdownOpen((prev) => !prev)}

app/components/layout/sidebar/menu-items.tsx

@@ -2,6 +2,7 @@ import type { FetcherWithComponents } from "@remix-run/react";
 import { NavLink, useLoaderData, useLocation } from "@remix-run/react";
 import { motion } from "framer-motion";
 import { useAtom } from "jotai";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { SwitchIcon } from "~/components/icons/library";
 import { ControlledActionButton } from "~/components/shared/controlled-action-button";
 import { useMainMenuItems } from "~/hooks/use-main-menu-items";
@@ -18,6 +19,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
   const location = useLocation();
   /** We need to do this becasue of a special way we handle the bookings link that doesnt allow us to use NavLink currently */
   const isBookingsRoute = location.pathname.includes("/bookings");
+  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
 
   return (
     <div className="flex h-full flex-col">
@@ -29,7 +31,8 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                 className={({ isActive }) =>
                   tw(
                     "my-1 flex items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                    isActive ? "active bg-primary-50 text-primary-600" : ""
+                    isActive ? "active bg-primary-50 text-primary-600" : "",
+                    workspaceSwitching ? "pointer-events-none" : ""
                   )
                 }
                 to={"/admin-dashboard/users"}
@@ -77,6 +80,7 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                     "data-test-id": `${item.label.toLowerCase()}SidebarMenuItem`,
                     onClick: toggleMobileNav,
                     title: item.label,
+                    disabled: workspaceSwitching,
                     className: tw(
                       "my-1 flex items-center gap-3 rounded border-0 bg-transparent px-3 text-left text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
                       canUseBookings
@@ -95,7 +99,8 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                   className={({ isActive }) =>
                     tw(
                       "my-1 flex items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                      isActive ? "active bg-primary-50 text-primary-600" : ""
+                      isActive ? "active bg-primary-50 text-primary-600" : "",
+                      workspaceSwitching ? "pointer-events-none" : ""
                     )
                   }
                   to={item.to}
@@ -131,7 +136,8 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                   className={({ isActive }) =>
                     tw(
                       "my-1 flex items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
-                      isActive ? "active bg-primary-50 text-primary-600" : ""
+                      isActive ? "active bg-primary-50 text-primary-600" : "",
+                      workspaceSwitching ? "pointer-events-none" : ""
                     )
                   }
                   to={item.to}
@@ -159,7 +165,8 @@ const MenuItems = ({ fetcher }: { fetcher: FetcherWithComponents<any> }) => {
                 <button
                   type="submit"
                   className={tw(
-                    "crisp-btn mt-1 flex w-full items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600"
+                    "crisp-btn mt-1 flex w-full items-center gap-3 rounded px-3 py-2.5 text-[16px] font-semibold text-gray-700 transition-all duration-75 hover:bg-primary-50 hover:text-primary-600",
+                    workspaceSwitching ? "pointer-events-none" : ""
                   )}
                 >
                   <i className="icon pl-[2px] text-gray-500">

app/components/layout/sidebar/organization-select.tsx

@@ -1,4 +1,7 @@
+import { useEffect } from "react";
 import { useFetcher, useLoaderData } from "@remix-run/react";
+import { useAtom } from "jotai";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import {
   Select,
   SelectContent,
@@ -11,13 +14,22 @@ import { Button } from "~/components/shared";
 import { Image } from "~/components/shared/image";
 import ProfilePicture from "~/components/user/profile-picture";
 import type { loader } from "~/routes/_layout+/_layout";
-import { tw } from "~/utils";
+import { isFormProcessing, tw } from "~/utils";
 
 export const OrganizationSelect = () => {
   const { organizations, currentOrganizationId } =
     useLoaderData<typeof loader>();
   const fetcher = useFetcher();
 
+  /** We track if the fetcher is submitting */
+  const isProcessing = isFormProcessing(fetcher.state);
+  const [_workspaceSwitching, setWorkspaceSwitching] = useAtom(
+    switchingWorkspaceAtom
+  );
+  useEffect(() => {
+    setWorkspaceSwitching(isProcessing);
+  }, [isProcessing, setWorkspaceSwitching]);
+
   return (
     <fetcher.Form
       action={"/api/user/change-current-organization"}

app/components/layout/sidebar/sidebar.tsx

@@ -1,8 +1,8 @@
 import { useRef, useState } from "react";
 import { Link, useFetcher, useLoaderData } from "@remix-run/react";
 import { useAtom } from "jotai";
+import { switchingWorkspaceAtom } from "~/atoms/switching-workspace";
 import { ScanQRIcon, ShelfTypography } from "~/components/icons/library";
-
 import {
   useMediaStream,
   useStopMediaStream,
@@ -32,7 +32,6 @@ export default function Sidebar() {
   const handleScannerClose = () => {
     stopMediaStream();
     setShowScanner(false);
-    // window.location.reload();
   };
 
   /** We use optimistic UI for folding of the sidebar
@@ -46,6 +45,8 @@ export default function Sidebar() {
     optimisticMinimizedSidebar =
       sidebarFetcher.formData.get("minimizeSidebar") === "open";
   }
+  const [workspaceSwitching] = useAtom(switchingWorkspaceAtom);
+
   return (
     <>
       {/* this component is named sidebar as of now but also serves as a mobile navigation header in mobile device */}
@@ -106,12 +107,12 @@ export default function Sidebar() {
           <div className="">
             <OrganizationSelect key={currentOrganizationId} />
           </div>
-          <div className="flex-1">
+          <div className={tw("flex-1", workspaceSwitching ? "opacity-50" : "")}>
             <MenuItems fetcher={sidebarFetcher} />
           </div>
         </div>
 
-        <div className="mt-auto">
+        <div className={tw("mx-auto", workspaceSwitching ? "opacity-50" : "")}>
           <SidebarBottom
             isSidebarMinimized={optimisticMinimizedSidebar}
             user={user}

app/emails/bookings-updates-template.tsx

@@ -0,0 +1,155 @@
+import {
+  Button,
+  Html,
+  Text,
+  Img,
+  Link,
+  Head,
+  render,
+  Container,
+  Heading,
+} from "@react-email/components";
+import type { ClientHint } from "~/modules/booking/types";
+import { getDateTimeFormatFromHints } from "~/utils/client-hints";
+import { SERVER_URL } from "~/utils/env";
+import { styles } from "./styles";
+import type { BookingForEmail } from "./types";
+
+interface Props {
+  heading: string;
+  booking: BookingForEmail;
+  assetCount: number;
+  hints: ClientHint;
+  hideViewButton?: boolean;
+}
+
+export function BookingUpdatesEmailTemplate({
+  booking,
+  heading,
+  hints,
+  assetCount,
+  hideViewButton = false,
+}: Props) {
+  const fromDate = getDateTimeFormatFromHints(hints, {
+    dateStyle: "short",
+    timeStyle: "short",
+  }).format(booking.from as Date);
+  const toDate = getDateTimeFormatFromHints(hints, {
+    dateStyle: "short",
+    timeStyle: "short",
+  }).format(booking.to as Date);
+  return (
+    <Html>
+      <Head>
+        <title>Bookings update from Shelf.nu</title>
+      </Head>
+
+      <Container
+        style={{ padding: "32px", textAlign: "center", maxWidth: "60%" }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginBottom: "32px",
+          }}
+        >
+          <Img
+            src="cid:shelf-logo"
+            alt="Shelf's logo"
+            width="100"
+            height="32"
+            style={{ margin: "0 auto" }}
+          />
+        </div>
+        <div style={{ margin: "32px" }}>
+          <Heading as="h1" style={{ ...styles.h1 }}>
+            {heading}
+          </Heading>
+          <Heading as="h2" style={{ ...styles.h2 }}>
+            {booking.name} | {assetCount}{" "}
+            {assetCount === 1 ? "asset" : "assets"}
+          </Heading>
+          <p style={{ ...styles.p }}>
+            <span style={{ color: "#101828", fontWeight: "600" }}>
+              Custodian:
+            </span>{" "}
+            {`${booking.custodianUser?.firstName} ${booking.custodianUser?.lastName}` ||
+              booking.custodianTeamMember?.name}
+          </p>
+          <p style={{ ...styles.p }}>
+            <span style={{ color: "#101828", fontWeight: "600" }}>From:</span>{" "}
+            {fromDate}
+          </p>
+          <p style={{ ...styles.p }}>
+            <span style={{ color: "#101828", fontWeight: "600" }}>To:</span>{" "}
+            {toDate}
+          </p>
+        </div>
+
+        {!hideViewButton && (
+          <Button
+            href={`${SERVER_URL}/bookings/${booking.id}`}
+            style={{
+              ...styles.button,
+              textAlign: "center",
+              marginBottom: "32px",
+            }}
+          >
+            View booking in app
+          </Button>
+        )}
+
+        <Text style={{ fontSize: "14px", color: "#344054" }}>
+          This email was sent to{" "}
+          <Link
+            style={{ color: "#EF6820" }}
+            href={`mailto:${booking.custodianUser!.email}`}
+          >
+            {booking.custodianUser!.email}
+          </Link>{" "}
+          because it is part of the Shelf workspace.
+          <span style={{ color: "#101828", fontWeight: "600" }}>
+            {booking.organization.name}
+          </span>
+          . If you think you weren’t supposed to have received this email please{" "}
+          <Link
+            style={{ color: "#344054", textDecoration: "underline" }}
+            href={`mailto:${booking.organization.owner.email}`}
+          >
+            contact the owner
+          </Link>{" "}
+          of the workspace.
+        </Text>
+        <Text
+          style={{ marginBottom: "32px", fontSize: "14px", color: "#344054" }}
+        >
+          {" "}
+          © 2024 Shelf.nu
+        </Text>
+      </Container>
+    </Html>
+  );
+}
+
+/*
+ *The HTML content of an email will be accessed by a server file to send email,
+  we cannot import a TSX component in a server file so we are exporting TSX converted to HTML string using render function by react-email.
+ */
+export const bookingUpdatesTemplateString = ({
+  booking,
+  heading,
+  assetCount,
+  hints,
+  hideViewButton = false,
+}: Props) =>
+  render(
+    <BookingUpdatesEmailTemplate
+      booking={booking}
+      heading={heading}
+      assetCount={assetCount}
+      hints={hints}
+      hideViewButton={hideViewButton}
+    />
+  );