Add an InviteTeam onboarding step

[martmull]

• Figma -> https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=2464-93889&t=qohFCKlWOCXQU1jm-0
• create a new page /invite-team
• reproduce jetter onboarding behavior https://jitter.video/onboarding/
• create a new email in twenty-emails
• create a query that calls a job using the emailService to send emails

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To add an InviteTeam onboarding step:

1. Update GraphQL Schema: Add a new mutation for inviting a team.

// Path: /packages/twenty-server/src/core/auth/dto/sign-up.input.ts
import { Field, InputType } from '@nestjs/graphql';
import { IsEmail, IsNotEmpty, IsOptional, IsString } from 'class-validator';

@InputType()
export class InviteTeamInput {
  @Field()
  @IsEmail()
  @IsNotEmpty()
  email: string;

  @Field()
  @IsString()
  @IsNotEmpty()
  teamName: string;

  @Field({ nullable: true })
  @IsOptional()
  @IsString()
  workspaceInviteHash?: string;
}

2. Create InviteTeam Mutation:

// Path: /packages/twenty-server/src/core/auth/resolvers/auth.resolver.ts
import { Args, Mutation, Resolver } from '@nestjs/graphql';
import { InviteTeamInput } from '../dto/invite-team.input';
import { AuthService } from '../services/auth.service';

@Resolver()
export class AuthResolver {
  constructor(private readonly authService: AuthService) {}

  @Mutation(() => Boolean)
  async inviteTeam(@Args('inviteTeamInput') inviteTeamInput: InviteTeamInput): Promise<boolean> {
    return this.authService.inviteTeam(inviteTeamInput);
  }
}

3. Implement InviteTeam Service:

// Path: /packages/twenty-server/src/core/auth/services/auth.service.ts
import { Injectable } from '@nestjs/common';
import { InviteTeamInput } from '../dto/invite-team.input';

@Injectable()
export class AuthService {
  async inviteTeam(inviteTeamInput: InviteTeamInput): Promise<boolean> {
    // Logic to invite team
    return true;
  }
}

4. Update Frontend to Handle InviteTeam Step:

// Path: /packages/twenty-front/src/pages/auth/Invite.tsx
import { useInviteTeamMutation } from '~/generated/graphql';

const Invite = () => {
  const [inviteTeam] = useInviteTeamMutation();

  const handleInviteTeam = async () => {
    await inviteTeam({ variables: { inviteTeamInput: { email: 'team@example.com', teamName: 'TeamName' } } });
  };

  return (
    <>
      {/* Existing code */}
      <MainButton
        variant="secondary"
        title="Invite Team"
        type="button"
        onClick={handleInviteTeam}
        fullWidth
      />
    </>
  );
};

5. Add GraphQL Mutation:

// Path: /packages/twenty-front/src/modules/workspace-member/graphql/mutations/inviteTeam.ts
import { gql } from '@apollo/client';

export const INVITE_TEAM = gql`
  mutation InviteTeam($inviteTeamInput: InviteTeamInput!) {
    inviteTeam(inviteTeamInput: $inviteTeamInput)
  }
`;

6. Update GraphQL Codegen:

// Path: /packages/twenty-front/codegen.yml
schema: "http://localhost:4000/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

Run graphql-codegen to generate the new hooks.

References

/packages/twenty-front/src/pages/auth/Invite.tsx
/packages/twenty-front/src/modules/workspace-member/grapqhql/mutations/addUserToWorkspace.ts
/packages/twenty-front/src/modules/workspace/graphql/queries/getWorkspaceFromInviteHash.ts
/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
/packages/twenty-front/src/effect-components/PageChangeEffect.tsx
/packages/twenty-server/src/core/auth/dto/sign-up.input.ts
/packages/twenty-server/src/core/auth/strategies/google.auth.strategy.ts

Ask Greptile