Adding ACUL support for accept-invitation screen

packages/auth0-acul-js/examples/accept-invitation.md

@@ -0,0 +1,64 @@
+import AcceptInvitation from '@auth0/auth0-acul-js/accept-invitation';
+
+# Accept Invitation Screen
+
+This screen is displayed when a user needs to accept an invitation to an organization.
+
+## React Component Example with TailwindCSS
+
+```tsx
+import React from 'react';
+import AcceptInvitation from '@auth0/auth0-acul-js/accept-invitation';
+
+const AcceptInvitationScreen: React.FC = () => {
+  const acceptInvitationManager = new AcceptInvitation();
+  const { screen } = acceptInvitationManager;
+
+  const handleAcceptInvitation = async () => {
+    try {
+      await acceptInvitationManager.acceptInvitation();
+    } catch (error) {
+      console.error('Failed to accept invitation:', error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        <h2 className="text-2xl font-bold mb-4">Accept Invitation</h2>
+        <p className="mb-4">
+          You have been invited to join the organization.
+        </p>
+        <p className="mb-4">
+          Inviter: {screen.data?.inviter}
+        </p>
+        <p className="mb-4">
+          Email: {screen.data?.email}
+        </p>
+        <button
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          type="button"
+          onClick={handleAcceptInvitation}
+        >
+          Accept Invitation
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AcceptInvitationScreen;
+```
+
+## Usage Examples
+
+### Accept Invitation
+
+```typescript
+import AcceptInvitation from '@auth0/auth0-acul-js/accept-invitation';
+
+const acceptInvitation = new AcceptInvitation();
+
+// Accept the invitation
+await acceptInvitation.acceptInvitation();
+```

packages/auth0-acul-js/interfaces/export/extended-types.ts

@@ -37,3 +37,4 @@ export type { ScreenMembersOnMfaOtpEnrollmentQr } from '../screens/mfa-otp-enrol
 export type { ScreenMembersOnMfaOtpEnrollmentCode } from '../screens/mfa-otp-enrollment-code';
 export type { ScreenMembersOnResetPasswordMfaOtpChallenge } from '../screens/reset-password-mfa-otp-challenge';
 export type { ScreenMembersOnOrganizationSelection } from '../screens/organization-selection';
+export type { ScreenMembersOnAcceptInvitation } from '../screens/accept-invitation';

packages/auth0-acul-js/interfaces/export/screen-properties.ts

@@ -40,3 +40,4 @@ export type { MfaOtpEnrollmentCodeMembers } from '../screens/mfa-otp-enrollment-
 export type { ResetPasswordMfaOtpChallengeMembers } from '../screens/reset-password-mfa-otp-challenge';
 export type { OrganizationSelectionMembers } from '../screens/organization-selection';
 export type { OrganizationPickerMembers } from '../screens/organization-picker';
+export type { AcceptInvitationMembers } from '../screens/accept-invitation';

packages/auth0-acul-js/interfaces/screens/accept-invitation.ts

@@ -0,0 +1,27 @@
+import type { CustomOptions } from '../common';
+import type { BaseMembers } from '../models/base-context';
+import type { ClientMembers } from '../models/client';
+import type { OrganizationMembers } from '../models/organization';
+import type { PromptMembers } from '../models/prompt';
+import type { ScreenMembers } from '../models/screen';
+import type { TransactionMembers } from '../models/transaction';
+
+export interface ScreenMembersOnAcceptInvitation extends ScreenMembers {
+  data: {
+    inviter: string;
+    email: string;
+  } | null;
+}
+
+export interface AcceptInvitationMembers extends BaseMembers {
+  client: ClientMembers;
+  organization: OrganizationMembers;
+  prompt: PromptMembers;
+  screen: ScreenMembersOnAcceptInvitation;
+  transaction: TransactionMembers;
+  /**
+   * Accepts the invitation to the organization.
+   * @param payload Optional custom options to include with the request.
+   */
+  acceptInvitation(payload?: CustomOptions): Promise<void>;
+}

packages/auth0-acul-js/package.json

@@ -175,6 +175,10 @@
     "./organization-picker": {
       "import": "./dist/screens/organization-picker/index.js",
       "types": "./dist/types/src/screens/organization-picker/index.d.ts"
+    },
+    "./accept-invitation": {
+      "import": "./dist/screens/accept-invitation/index.js",
+      "types": "./dist/types/src/screens/accept-invitation/index.d.ts"
     }
   },
   "scripts": {

packages/auth0-acul-js/src/screens/accept-invitation/index.ts

@@ -0,0 +1,49 @@
+import { BaseContext } from '../../models/base-context';
+import { ScreenIds } from '../../utils/enums';
+import { FormHandler } from '../../utils/form-handler';
+
+import type { CustomOptions } from '../../../interfaces/common';
+import type { ScreenContext } from '../../../interfaces/models/screen';
+import type { AcceptInvitationMembers, ScreenMembersOnAcceptInvitation as ScreenOptions } from '../../../interfaces/screens/accept-invitation';
+import type { FormOptions } from '../../../interfaces/utils/form-handler';
+
+/**
+ * Class implementing the accept-invitation screen functionality.
+ * This screen is displayed when a user needs to accept an invitation to an organization.
+ */
+export default class AcceptInvitation extends BaseContext implements AcceptInvitationMembers {
+  static screenIdentifier: string = ScreenIds.ACCEPT_INVITATION;
+  screen: ScreenOptions;
+
+  /**
+   * Creates an instance of AcceptInvitation screen manager.
+   */
+  constructor() {
+    super();
+    const screenContext = this.getContext('screen') as ScreenContext;
+    this.screen = screenContext as ScreenOptions;
+  }
+
+  /**
+   * Accepts the invitation to the organization.
+   * @param payload Optional custom options to include with the request.
+   * @example
+   * ```typescript
+   * import AcceptInvitation from '@auth0/auth0-acul-js/accept-invitation';
+   *
+   * const acceptInvitation = new AcceptInvitation();
+   * await acceptInvitation.acceptInvitation();
+   * ```
+   */
+  async acceptInvitation(payload?: CustomOptions): Promise<void> {
+    const options: FormOptions = {
+      state: this.transaction.state,
+      telemetry: [AcceptInvitation.screenIdentifier, 'acceptInvitation'],
+    };
+    await new FormHandler(options).submitData<CustomOptions>({ ...payload, action: 'default' });
+  }
+}
+
+export { AcceptInvitationMembers, ScreenOptions as ScreenMembersOnAcceptInvitation };
+export * from '../../../interfaces/export/common';
+export * from '../../../interfaces/export/base-properties';

packages/auth0-acul-js/src/screens/accept-invitation/screen-override.ts

@@ -0,0 +1,33 @@
+import { Screen } from '../../models/screen';
+
+import type { ScreenContext } from '../../../interfaces/models/screen';
+import type { ScreenMembersOnAcceptInvitation as OverrideOptions } from '../../../interfaces/screens/accept-invitation';
+
+/**
+ * Screen override class for the accept-invitation screen
+ */
+export class ScreenOverride extends Screen implements OverrideOptions {
+  data: OverrideOptions['data'];
+
+  constructor(screenContext: ScreenContext) {
+    super(screenContext);
+    this.data = ScreenOverride.getScreenData(screenContext);
+  }
+
+  /**
+   * Extracts and transforms the screen data from the context
+   * @param screenContext The screen context containing the data
+   * @returns The transformed screen data
+   */
+  static getScreenData = (screenContext: ScreenContext): OverrideOptions['data'] => {
+    const data = screenContext.data;
+    if (!data) {
+      return null;
+    }
+
+    return {
+      inviter: typeof data.inviter === 'string' ? data.inviter : '',
+      email: typeof data.email === 'string' ? data.email : '',
+    };
+  };
+}

packages/auth0-acul-js/src/screens/index.ts

@@ -40,3 +40,4 @@ export { default as ResetPasswordMfaSmsChallenge } from './reset-password-mfa-sm
 export { default as ResetPasswordMfaOtpChallenge } from './reset-password-mfa-otp-challenge';
 export { default as OrganizationSelection } from './organization-selection';
 export { default as OrganizationPicker } from './organization-picker';
+export { default as AcceptInvitation } from './accept-invitation';

packages/auth0-acul-js/src/utils/enums.ts

@@ -36,4 +36,10 @@ export const ScreenIds = {
   SIGNUP_ID: 'signup-id',
   SIGNUP_PASSWORD: 'signup-password',
   MFA_OTP_CHALLENGE: 'mfa-otp-challenge',
+  MFA_OTP_ENROLLMENT_QR: 'mfa-otp-enrollment-qr',
+  MFA_OTP_ENROLLMENT_CODE: 'mfa-otp-enrollment-code',
+  RESET_PASSWORD_MFA_OTP_CHALLENGE: 'reset-password-mfa-otp-challenge',
+  ORGANIZATION_SELECTION: 'organization-selection',
+  ORGANIZATION_PICKER: 'organization-picker',
+  ACCEPT_INVITATION: 'accept-invitation',
 };

packages/auth0-acul-js/tests/unit/screens/accept-invitation/index.test.ts

@@ -0,0 +1,62 @@
+import { baseContextData } from '../../../data/test-data';
+import { FormHandler } from '../../../../src/utils/form-handler';
+import AcceptInvitation from '../../../../src/screens/accept-invitation';
+import { CustomOptions } from 'interfaces/common';
+import { ScreenIds } from '../../../../src/utils/enums';
+
+jest.mock('../../../../src/utils/form-handler');
+
+describe('AcceptInvitation', () => {
+  let acceptInvitation: AcceptInvitation;
+  let mockFormHandler: { submitData: jest.Mock };
+
+  beforeEach(() => {
+    global.window = Object.create(window);
+    baseContextData.screen.name = ScreenIds.ACCEPT_INVITATION;
+    window.universal_login_context = baseContextData;
+
+    acceptInvitation = new AcceptInvitation();
+    mockFormHandler = {
+      submitData: jest.fn(),
+    };
+    (FormHandler as jest.Mock).mockImplementation(() => mockFormHandler);
+  });
+
+  describe('acceptInvitation method', () => {
+    it('should handle acceptInvitation with valid payload correctly', async () => {
+      const payload: CustomOptions = {
+        someOption: 'value',
+      };
+
+      await acceptInvitation.acceptInvitation(payload);
+
+      expect(mockFormHandler.submitData).toHaveBeenCalledTimes(1);
+      expect(mockFormHandler.submitData).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ...payload,
+          action: 'default',
+        })
+      );
+    });
+
+    it('should handle acceptInvitation without payload correctly', async () => {
+      await acceptInvitation.acceptInvitation();
+
+      expect(mockFormHandler.submitData).toHaveBeenCalledTimes(1);
+      expect(mockFormHandler.submitData).toHaveBeenCalledWith(
+        expect.objectContaining({
+          action: 'default',
+        })
+      );
+    });
+
+    it('should throw error when promise is rejected', async () => {
+      mockFormHandler.submitData.mockRejectedValue(new Error('Mocked reject'));
+      const payload: CustomOptions = {
+        someOption: 'value',
+      };
+
+      await expect(acceptInvitation.acceptInvitation(payload)).rejects.toThrow('Mocked reject');
+    });
+  });
+});

packages/auth0-acul-js/tests/unit/screens/accept-invitation/screen-override.test.ts

@@ -0,0 +1,57 @@
+import { ScreenOverride } from '../../../../src/screens/accept-invitation/screen-override';
+import { Screen } from '../../../../src/models/screen';
+import type { ScreenContext } from '../../../../interfaces/models/screen';
+
+describe('ScreenOverride', () => {
+  it('should initialize data correctly', () => {
+    const screenContext: ScreenContext = {
+      name: 'accept-invitation',
+      data: {
+        inviter: 'John Doe',
+        email: 'john.doe@example.com',
+      },
+    } as ScreenContext;
+
+    const screenOverride = new ScreenOverride(screenContext);
+
+    expect(screenOverride.data).toEqual({
+      inviter: 'John Doe',
+      email: 'john.doe@example.com',
+    });
+  });
+
+  it('should return null for data when screenContext.data is undefined', () => {
+    const emptyContext = {} as ScreenContext;
+    const result = ScreenOverride.getScreenData(emptyContext);
+    expect(result).toBeNull();
+  });
+
+  it('should return a copy of screenContext.data when available', () => {
+    const screenContext: ScreenContext = {
+      name: 'accept-invitation',
+      data: {
+        inviter: 'John Doe',
+        email: 'john.doe@example.com',
+      },
+    } as ScreenContext;
+
+    const result = ScreenOverride.getScreenData(screenContext);
+    expect(result).toEqual({
+      inviter: 'John Doe',
+      email: 'john.doe@example.com',
+    });
+  });
+
+  it('should create an instance of Screen', () => {
+    const screenContext: ScreenContext = {
+      name: 'accept-invitation',
+      data: {
+        inviter: 'John Doe',
+        email: 'john.doe@example.com',
+      },
+    } as ScreenContext;
+
+    const screenOverride = new ScreenOverride(screenContext);
+    expect(screenOverride).toBeInstanceOf(Screen);
+  });
+});