Merge pull request #1419 from Shelf-nu/1361-feature-request-improve-i…

…nvite-email-for-team-workspace improvement: adding warning about token expiration when inviting users
Shelf-nu · Nov 12, 2024 · a80345c · a80345c
2 parents 535bac9 + 068e3dd
commit a80345c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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"