feat: add support for showing tenant join approval pending screen

Author: deepjyoti30-st

packages/tenant-enrollment-nodejs/package.json

@@ -9,7 +9,7 @@
     "directory": "packages/tenant-enrollment-nodejs"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "build": "vite build && npm run pretty",
     "pretty": "npx pretty-quick .",
     "pretty-check": "npx pretty-quick --check .",
     "test": "TEST_MODE=testing vitest run --pool=forks --passWithNoTests"
@@ -19,9 +19,9 @@
     "plugin",
     "supertokens"
   ],
-  "dependencies": {},
   "peerDependencies": {
-    "supertokens-node": ">=23.0.0"
+    "supertokens-node": ">=23.0.0",
+    "@supertokens-plugins/tenants-nodejs": "*"
   },
   "devDependencies": {
     "@shared/eslint": "*",

packages/tenant-enrollment-nodejs/src/plugin.ts

@@ -98,25 +98,7 @@ export const init = createPluginInitFunction<
                   };
                 }
 
-                const response = await originalImplementation.signUp(input);
-                if (response.status !== "OK") {
-                  return response;
-                }
-
-                const { wasAddedToTenant, reason: tenantJoiningReason } =
-                  await implementation.handleTenantJoiningApproval(
-                    response.user,
-                    input.tenantId,
-                    associateLoginMethodDef,
-                    sendEmail,
-                    getAppUrlDef(appInfo, undefined, input.userContext),
-                    input.userContext,
-                  );
-                return {
-                  ...response,
-                  wasAddedToTenant,
-                  reason: tenantJoiningReason,
-                };
+                return originalImplementation.signUp(input);
               },
             };
           },
@@ -135,7 +117,30 @@ export const init = createPluginInitFunction<
                   };
                 }
 
-                return response;
+                logDebugMessage(`Got response status for signup: ${response.status}`);
+                if (response.status !== "OK") {
+                  return response;
+                }
+
+                logDebugMessage("Going ahead with checking tenant joining approval");
+                const { wasAddedToTenant, reason: tenantJoiningReason } =
+                  await implementation.handleTenantJoiningApproval(
+                    response.user,
+                    input.tenantId,
+                    associateLoginMethodDef,
+                    sendEmail,
+                    getAppUrlDef(appInfo, undefined, input.userContext),
+                    input.userContext,
+                  );
+                logDebugMessage(`wasAdded: ${wasAddedToTenant}`);
+                logDebugMessage(`reason: ${tenantJoiningReason}`);
+                return {
+                  status: "PENDING_APPROVAL",
+                  wasAddedToTenant,
+                  reason: tenantJoiningReason,
+                };
+
+                // return response;
               },
             };
           },
@@ -297,11 +302,11 @@ export const init = createPluginInitFunction<
                   input.tenantId,
                   deviceInfo.phoneNumber !== undefined
                     ? {
-                      phoneNumber: deviceInfo.phoneNumber!,
-                    }
+                        phoneNumber: deviceInfo.phoneNumber!,
+                      }
                     : {
-                      email: deviceInfo.email!,
-                    },
+                        email: deviceInfo.email!,
+                      },
                 );
                 const isSignUp = accountInfoResponse.length === 0;
 

packages/tenant-enrollment-nodejs/src/recipeImplementation.ts

@@ -1,13 +1,13 @@
-import { User } from 'supertokens-node';
-import { OverrideableTenantFunctionImplementation, SuperTokensPluginTenantEnrollmentPluginConfig } from './types';
+import { User } from "supertokens-node";
+import { OverrideableTenantFunctionImplementation, SuperTokensPluginTenantEnrollmentPluginConfig } from "./types";
 import {
   assignRoleToUserInTenant,
   AssociateAllLoginMethodsOfUserWithTenant,
   SendPluginEmail,
-} from '@supertokens-plugins/tenants-nodejs';
-import { ROLES } from '@shared/tenants';
-import SuperTokens from 'supertokens-node';
-import { UserContext } from 'supertokens-node/lib/build/types';
+} from "@supertokens-plugins/tenants-nodejs";
+import { ROLES } from "@shared/tenants";
+import SuperTokens from "supertokens-node";
+import { UserContext } from "supertokens-node/lib/build/types";
 
 export const getOverrideableTenantFunctionImplementation = (
   config: SuperTokensPluginTenantEnrollmentPluginConfig,
@@ -23,7 +23,7 @@ export const getOverrideableTenantFunctionImplementation = (
        */
 
       // Skip this for the public tenant
-      if (tenantId === 'public') {
+      if (tenantId === "public") {
         return {
           canJoin: true,
           reason: undefined,
@@ -35,21 +35,21 @@ export const getOverrideableTenantFunctionImplementation = (
       if (implementation.isTenantInviteOnly(tenantId)) {
         return {
           canJoin: false,
-          reason: 'INVITE_ONLY',
+          reason: "INVITE_ONLY",
         };
       }
 
       let canJoin = false;
       let reason = undefined;
-      if (emailOrThirdPartyId.type === 'email') {
+      if (emailOrThirdPartyId.type === "email") {
         canJoin = implementation.isMatchingEmailDomain(tenantId, emailOrThirdPartyId.email);
         if (!canJoin) {
-          reason = 'EMAIL_DOMAIN_NOT_ALLOWED';
+          reason = "EMAIL_DOMAIN_NOT_ALLOWED";
         }
-      } else if (emailOrThirdPartyId.type === 'thirdParty') {
+      } else if (emailOrThirdPartyId.type === "thirdParty") {
         canJoin = implementation.isApprovedIdPProvider(tenantId, emailOrThirdPartyId.thirdPartyId);
         if (!canJoin) {
-          reason = 'IDP_NOT_ALLOWED';
+          reason = "IDP_NOT_ALLOWED";
         }
       }
 
@@ -79,7 +79,7 @@ export const getOverrideableTenantFunctionImplementation = (
        * @param associateLoginMethodDef - The function to associate the login methods of the user with the tenant
        */
       // Skip this for the public tenant
-      if (tenantId === 'public') {
+      if (tenantId === "public") {
         return {
           wasAddedToTenant: true,
           reason: undefined,
@@ -99,11 +99,11 @@ export const getOverrideableTenantFunctionImplementation = (
       // and return.
       await associateLoginMethodDef(tenantId, user.id);
 
-      await implementation.sendTenantJoiningRequestEmail(tenantId, user, appUrl, sendEmail, userContext);
+      // await implementation.sendTenantJoiningRequestEmail(tenantId, user, appUrl, sendEmail, userContext);
 
       return {
         wasAddedToTenant: false,
-        reason: 'REQUIRES_APPROVAL',
+        reason: "REQUIRES_APPROVAL",
       };
     },
     isTenantInviteOnly: (tenantId) => {
@@ -113,10 +113,10 @@ export const getOverrideableTenantFunctionImplementation = (
       return config.requiresApprovalTenants?.includes(tenantId) ?? false;
     },
     isApprovedIdPProvider: (thirdPartyId) => {
-      return thirdPartyId.startsWith('boxy-saml');
+      return thirdPartyId.startsWith("boxy-saml");
     },
     isMatchingEmailDomain: (tenantId, email) => {
-      const emailDomain = email.split('@');
+      const emailDomain = email.split("@");
       if (emailDomain.length !== 2) {
         return false;
       }
@@ -150,10 +150,10 @@ export const getOverrideableTenantFunctionImplementation = (
           .map(async (email) => {
             await sendEmail(
               {
-                type: 'TENANT_REQUEST_APPROVAL',
+                type: "TENANT_REQUEST_APPROVAL",
                 email,
                 tenantId,
-                senderEmail: user.emails[0],
+                senderEmail: user.emails[0]!,
                 appUrl,
               },
               userContext,
@@ -162,7 +162,7 @@ export const getOverrideableTenantFunctionImplementation = (
       );
     },
     getUserIdsInTenantWithRole: async (tenantId, role) => {
-      throw new Error('Not implemented');
+      throw new Error("Not implemented");
     },
   };
 

packages/tenant-enrollment-nodejs/vite.config.ts

@@ -0,0 +1,37 @@
+/// <reference types='vitest' />
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import * as path from "path";
+import packageJson from "../tenants-nodejs/package.json";
+
+export default defineConfig(() => ({
+  root: __dirname,
+  plugins: [
+    dts({
+      entryRoot: "src",
+      tsconfigPath: path.join(__dirname, "tsconfig.json"),
+    }),
+    peerDepsExternal(),
+  ],
+  build: {
+    outDir: "./dist",
+    emptyOutDir: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: "src/index.ts",
+      name: packageJson.name,
+      fileName: "index",
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ["es" as const, "cjs" as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [],
+    },
+  },
+}));

packages/tenant-enrollment-react/src/css.d.ts

@@ -0,0 +1,29 @@
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.sass" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.less" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.styl" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.css" {
+  const css: string;
+  export default css;
+}

packages/tenant-enrollment-react/src/pages/awaiting-approval/awaiting-approval.module.scss

@@ -0,0 +1,30 @@
+.awaitingApprovalMessageContainer {
+  .header {
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 36px;
+    letter-spacing: -0.12px;
+    color: var(--neutral-color-neutral-12);
+    margin: 0 0 16px 0;
+  }
+
+  .messageContainer {
+    box-shadow: 0px 1.5px 2px 0px rgba(0, 0, 0, 0.133) inset;
+    border: 1px solid var(--neutral-color-neutral-6);
+    background-color: #f9f9f8;
+    border-radius: 12px;
+    padding: 14px;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0px;
+
+    b {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--neutral-color-neutral-11);
+    }
+  }
+}

packages/tenant-enrollment-react/src/pages/awaiting-approval/awaiting-approval.tsx

@@ -0,0 +1,23 @@
+import { Card } from "@shared/ui";
+import classNames from "classnames/bind";
+
+import { usePluginContext } from "../../plugin";
+
+import style from "./awaiting-approval.module.scss";
+const cx = classNames.bind(style);
+
+export const AwaitingApproval = () => {
+  const { t } = usePluginContext();
+
+  return (
+    <Card className={cx("awaitingApprovalMessageContainer")}>
+      <div className={cx("header")}>{t("PL_TE_JOIN_TENANT_AWAITING_APPROVAL_HEADER")}</div>
+      <div className={cx("messageContainer")}>
+        <div>
+          {t("PL_TE_JOIN_TENANT_AWAITING_APPROVAL_MESSAGE")}{" "}
+          <b>{t("PL_TE_JOIN_TENANT_AWAITING_APPROVAL_MESSAGE_HIGHLIGHT")}</b>
+        </div>
+      </div>
+    </Card>
+  );
+};

packages/tenant-enrollment-react/src/pages/awaiting-approval/index.ts

@@ -0,0 +1 @@
+export { AwaitingApproval } from "./awaiting-approval";