From 068e3dd0d3b7e1ff839bc8d919e4884f120eb4bc Mon Sep 17 00:00:00 2001
From: Nikolay Bonev <nbonev@duck.com>
Date: Tue, 12 Nov 2024 16:42:23 +0200
Subject: [PATCH] improvement: adding warning about token expiration when
 inviting users

---
 app/components/shared/warning-box.tsx         | 25 ++++++++++++++++++-
 .../settings.team.users.invite-user.tsx       | 10 ++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/app/components/shared/warning-box.tsx b/app/components/shared/warning-box.tsx
index f7ebbad43..a6f92b342 100644
--- a/app/components/shared/warning-box.tsx
+++ b/app/components/shared/warning-box.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { tw } from "~/utils/tw";
 
 export function WarningBox({
@@ -7,14 +8,36 @@ export function WarningBox({
   children: JSX.Element | JSX.Element[] | string;
   [key: string]: any;
 }) {
+  const [visible, setVisible] = useState(true);
   return (
     <div
       className={tw(
-        " b-warning-300 rounded border bg-warning-25 p-4 text-sm text-warning-700",
+        " b-warning-300 relative rounded border bg-warning-25 p-4 text-sm text-warning-700",
+        visible ? "block" : "hidden",
         rest?.className || ""
       )}
     >
       {children}
+      <button
+        className="absolute right-2 top-2"
+        onClick={() => setVisible(false)}
+        type="button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="size-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
     </div>
   );
 }
diff --git a/app/routes/_layout+/settings.team.users.invite-user.tsx b/app/routes/_layout+/settings.team.users.invite-user.tsx
index 91a4a8cd2..ecbed1662 100644
--- a/app/routes/_layout+/settings.team.users.invite-user.tsx
+++ b/app/routes/_layout+/settings.team.users.invite-user.tsx
@@ -18,6 +18,7 @@ import {
 import { UserIcon } from "~/components/icons/library";
 import { Button } from "~/components/shared/button";
 import { Image } from "~/components/shared/image";
+import { WarningBox } from "~/components/shared/warning-box";
 import { db } from "~/database/db.server";
 import { useSearchParams } from "~/hooks/search-params";
 import { useCurrentOrganization } from "~/hooks/use-current-organization-id";
@@ -252,6 +253,15 @@ export default function InviteUser() {
               required
             />
           </div>
+          <WarningBox className="">
+            <>
+              <strong>IMPORTANT</strong>: User invite emails contain a link with
+              a unique token that expires after being consumed. Please make sure
+              to add the <span className="font-medium">shelf.nu domain</span> to
+              your email whitelist to ensure the email is delivered and the link
+              is not consumed by your anti-spam software.
+            </>
+          </WarningBox>
           <div className="mt-7 flex gap-1">
             <Button
               variant="secondary"