B2B-30: adds personal code to account, company admins invites members

packages/features/team-accounts/src/components/company-guard.tsx

@@ -0,0 +1,32 @@
+import { notFound } from 'next/navigation';
+
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { isCompanyAdmin } from '../server/utils/is-company-admin';
+import { isSuperAdmin } from '@kit/admin'
+
+type LayoutOrPageComponent<Params> = React.ComponentType<Params>;
+
+/**
+ * CompanyGuard is a server component wrapper that checks if the user is a company admin before rendering the component.
+ * If the user is not a company admin, we redirect to a 404.
+ * @param Component - The Page or Layout component to wrap
+ */
+export function CompanyGuard<Params extends object>(
+  Component: LayoutOrPageComponent<Params>,
+) {
+  return async function AdminGuardServerComponentWrapper(params: Params) {
+    //@ts-ignore
+    const { account } = await params.params;
+    const client = getSupabaseServerClient();
+    const [isUserSuperAdmin, isUserCompanyAdmin] = await Promise.all(
+      [isSuperAdmin(client), isCompanyAdmin(client, account)]
+    );
+
+    console.log({ isUserSuperAdmin, isUserCompanyAdmin , params: account})
+    if (isUserSuperAdmin || isUserCompanyAdmin) {
+      return <Component {...params} />;
+    }
+    // if the user is not a company admin, we redirect to a 404
+    notFound();
+  };
+}

packages/features/team-accounts/src/components/index.ts

@@ -6,3 +6,4 @@ export * from './settings/team-account-settings-container';
 export * from './invitations/accept-invitation-container';
 export * from './create-team-account-dialog';
 export * from './team-account-workspace-context';
+export * from './company-guard';

packages/features/team-accounts/src/components/invitations/account-invitations-table.tsx

@@ -107,6 +107,14 @@ function useGetColumns(permissions: {
           );
         },
       },
+      {
+        header: t('personalCode'),
+        cell: ({ row }) => {
+          const { personal_code } = row.original;
+
+          return personal_code;
+        },
+      },
       {
         header: t('roleLabel'),
         cell: ({ row }) => {

packages/features/team-accounts/src/components/members/account-members-table.tsx

@@ -87,7 +87,8 @@ export function AccountMembersTable({
 
       return (
         displayName.includes(searchString) ||
-        member.role.toLowerCase().includes(searchString)
+        member.role.toLowerCase().includes(searchString) || 
+        (member.personal_code || '').includes(searchString)
       );
     })
     .sort((prev, next) => {
@@ -160,6 +161,13 @@ function useGetColumns(
           return row.original.email ?? '-';
         },
       },
+      {
+        header: t('personalCode'),
+        accessorKey: 'personal_code',
+        cell: ({ row }) => {
+          return row.original.personal_code ?? '-';
+        },
+      },
       {
         header: t('roleLabel'),
         cell: ({ row }) => {

packages/features/team-accounts/src/components/members/invite-members-dialog-container.tsx

@@ -66,7 +66,7 @@ export function InviteMembersDialogContainer({
     <Dialog open={isOpen} onOpenChange={setIsOpen} modal>
       <DialogTrigger asChild>{children}</DialogTrigger>
 
-      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
+      <DialogContent className="max-w-[800px]" onInteractOutside={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>
             <Trans i18nKey={'teams:inviteMembersHeading'} />
@@ -142,13 +142,39 @@ function InviteMembersForm({
           {fieldArray.fields.map((field, index) => {
             const isFirst = index === 0;
 
+            const personalCodeInputName = `invitations.${index}.personal_code` as const;
             const emailInputName = `invitations.${index}.email` as const;
             const roleInputName = `invitations.${index}.role` as const;
 
             return (
               <div data-test={'invite-member-form-item'} key={field.id}>
                 <div className={'flex items-end gap-x-1 md:space-x-2'}>
-                  <div className={'w-7/12'}>
+                  <div className={'w-4/12'}>
+                    <FormField
+                      name={personalCodeInputName}
+                      render={({ field }) => {
+                        return (
+                          <FormItem>
+                            <If condition={isFirst}>
+                              <FormLabel>{t('Personal code')}</FormLabel>
+                            </If>
+
+                            <FormControl>
+                              <Input
+                                placeholder={t('personalCode')}
+                                type="text"
+                                required
+                                {...field}
+                              />
+                            </FormControl>
+
+                            <FormMessage />
+                          </FormItem>
+                        );
+                      }}
+                    />
+                  </div>
+                  <div className={'w-4/12'}>
                     <FormField
                       name={emailInputName}
                       render={({ field }) => {
@@ -273,5 +299,5 @@ function InviteMembersForm({
 }
 
 function createEmptyInviteModel() {
-  return { email: '', role: 'member' as Role };
+  return { email: '', role: 'member' as Role, personal_code: '' };
 }