refactor(ActionItemModal): extract AssignmentTypeSelector component [Part 2/5]

docs/docs/auto-docs/components/AdminPortal/AssignmentTypeSelector/AssignmentTypeSelector/variables/default.md

@@ -0,0 +1,11 @@
+[Admin Docs](/)
+
+***
+
+# Variable: default
+
+> `const` **default**: `React.FC`\<[`InterfaceAssignmentTypeSelectorProps`](../../../../../types/AdminPortal/AssignmentTypeSelector/interface/interfaces/InterfaceAssignmentTypeSelectorProps.md)\>
+
+Defined in: [src/components/AdminPortal/AssignmentTypeSelector/AssignmentTypeSelector.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/AdminPortal/AssignmentTypeSelector/AssignmentTypeSelector.tsx#L14)
+
+Chip-based toggle selector for choosing assignment type (volunteer or volunteer group).

docs/docs/auto-docs/screens/OrganizationActionItems/ActionItemModal/ActionItemModal/variables/default.md

@@ -6,4 +6,4 @@
 
 > `const` **default**: `FC`\<[`IItemModalProps`](../../../../../types/shared-components/ActionItems/interface/interfaces/IItemModalProps.md)\>
 
-Defined in: [src/screens/OrganizationActionItems/ActionItemModal/ActionItemModal.tsx:67](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationActionItems/ActionItemModal/ActionItemModal.tsx#L67)
+Defined in: [src/screens/OrganizationActionItems/ActionItemModal/ActionItemModal.tsx:62](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationActionItems/ActionItemModal/ActionItemModal.tsx#L62)

docs/docs/auto-docs/types/AdminPortal/AssignmentTypeSelector/interface/interfaces/InterfaceAssignmentTypeSelectorProps.md

@@ -0,0 +1,87 @@
+[Admin Docs](/)
+
+***
+
+# Interface: InterfaceAssignmentTypeSelectorProps
+
+Defined in: [src/types/AdminPortal/AssignmentTypeSelector/interface.ts:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/AdminPortal/AssignmentTypeSelector/interface.ts#L11)
+
+Props for AssignmentTypeSelector component.
+
+## Properties
+
+### assignmentType
+
+> **assignmentType**: [`AssignmentType`](../type-aliases/AssignmentType.md)
+
+Defined in: [src/types/AdminPortal/AssignmentTypeSelector/interface.ts:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/AdminPortal/AssignmentTypeSelector/interface.ts#L13)
+
+Current assignment type selection
+
+***
+
+### isVolunteerDisabled
+
+> **isVolunteerDisabled**: `boolean`
+
+Defined in: [src/types/AdminPortal/AssignmentTypeSelector/interface.ts:17](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/AdminPortal/AssignmentTypeSelector/interface.ts#L17)
+
+Whether volunteer chip is disabled
+
+***
+
+### isVolunteerGroupDisabled
+
+> **isVolunteerGroupDisabled**: `boolean`
+
+Defined in: [src/types/AdminPortal/AssignmentTypeSelector/interface.ts:19](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/AdminPortal/AssignmentTypeSelector/interface.ts#L19)
+
+Whether volunteer group chip is disabled
+
+***
+
+### onClearVolunteer()
+
+> **onClearVolunteer**: () => `void`
+
+Defined in: [src/types/AdminPortal/AssignmentTypeSelector/interface.ts:21](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/AdminPortal/AssignmentTypeSelector/interface.ts#L21)
+
+Callback to clear volunteer selection
+
+#### Returns
+
+`void`
+
+***
+
+### onClearVolunteerGroup()
+
+> **onClearVolunteerGroup**: () => `void`
+
+Defined in: [src/types/AdminPortal/AssignmentTypeSelector/interface.ts:23](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/AdminPortal/AssignmentTypeSelector/interface.ts#L23)
+
+Callback to clear volunteer group selection
+
+#### Returns
+
+`void`
+
+***
+
+### onTypeChange()
+
+> **onTypeChange**: (`type`) => `void`
+
+Defined in: [src/types/AdminPortal/AssignmentTypeSelector/interface.ts:15](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/AdminPortal/AssignmentTypeSelector/interface.ts#L15)
+
+Callback fired when assignment type changes
+
+#### Parameters
+
+##### type
+
+[`AssignmentType`](../type-aliases/AssignmentType.md)
+
+#### Returns
+
+`void`

docs/docs/auto-docs/types/AdminPortal/AssignmentTypeSelector/interface/type-aliases/AssignmentType.md

@@ -0,0 +1,13 @@
+[Admin Docs](/)
+
+***
+
+# Type Alias: AssignmentType
+
+> **AssignmentType** = `"volunteer"` \| `"volunteerGroup"`
+
+Defined in: [src/types/AdminPortal/AssignmentTypeSelector/interface.ts:6](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/AdminPortal/AssignmentTypeSelector/interface.ts#L6)
+
+Type representing the assignment target for action items.
+- 'volunteer': Assign to individual volunteer
+- 'volunteerGroup': Assign to volunteer group

src/components/AdminPortal/ApplyToSelector/ApplyToSelector.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import type {
@@ -19,6 +19,10 @@ const ApplyToSelector: React.FC<InterfaceApplyToSelectorProps> = ({
   applyTo,
   onChange,
 }) => {
+  const uid = useId();
+  const name = `applyTo-${uid}`;
+  const seriesId = `${name}-series`; // i18n-ignore-line
+  const instanceId = `${name}-instance`; // i18n-ignore-line
   const { t } = useTranslation('translation', {
     keyPrefix: 'organizationActionItems',
   });
@@ -29,16 +33,16 @@ const ApplyToSelector: React.FC<InterfaceApplyToSelectorProps> = ({
       <Form.Check
         type="radio"
         label={t('entireSeries')}
-        name="applyTo"
-        id="applyToSeries"
+        name={name}
+        id={seriesId}
         checked={applyTo === 'series'}
         onChange={() => onChange('series')}
       />
       <Form.Check
         type="radio"
         label={t('thisEventOnly')}
-        name="applyTo"
-        id="applyToInstance"
+        name={name}
+        id={instanceId}
         checked={applyTo === 'instance'}
         onChange={() => onChange('instance')}
       />

src/components/AdminPortal/AssignmentTypeSelector/AssignmentTypeSelector.spec.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'utils/i18nForTest';
+import AssignmentTypeSelector from './AssignmentTypeSelector';
+import type { AssignmentType } from 'types/AdminPortal/AssignmentTypeSelector/interface';
+
+describe('AssignmentTypeSelector', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderComponent = (
+    assignmentType: AssignmentType = 'volunteer',
+    onTypeChange = vi.fn(),
+    isVolunteerDisabled = false,
+    isVolunteerGroupDisabled = false,
+    onClearVolunteer = vi.fn(),
+    onClearVolunteerGroup = vi.fn(),
+  ) => {
+    return render(
+      <I18nextProvider i18n={i18n}>
+        <AssignmentTypeSelector
+          assignmentType={assignmentType}
+          onTypeChange={onTypeChange}
+          isVolunteerDisabled={isVolunteerDisabled}
+          isVolunteerGroupDisabled={isVolunteerGroupDisabled}
+          onClearVolunteer={onClearVolunteer}
+          onClearVolunteerGroup={onClearVolunteerGroup}
+        />
+      </I18nextProvider>,
+    );
+  };
+
+  it('renders both chip options', () => {
+    renderComponent();
+
+    expect(screen.getByText('Volunteer')).toBeInTheDocument();
+    expect(screen.getByText('Volunteer Group')).toBeInTheDocument();
+  });
+
+  it('shows volunteer chip as selected when assignmentType is volunteer', () => {
+    renderComponent('volunteer');
+
+    const volunteerChip = screen
+      .getByText('Volunteer')
+      .closest('[role="button"]');
+    const volunteerGroupChip = screen
+      .getByText('Volunteer Group')
+      .closest('[role="button"]');
+
+    expect(volunteerChip).toHaveAttribute('aria-disabled', 'false');
+    expect(volunteerGroupChip).toHaveAttribute('aria-disabled', 'false');
+  });
+
+  it('shows volunteer group chip as selected when assignmentType is volunteerGroup', () => {
+    renderComponent('volunteerGroup');
+
+    const volunteerChip = screen
+      .getByText('Volunteer')
+      .closest('[role="button"]');
+    const volunteerGroupChip = screen
+      .getByText('Volunteer Group')
+      .closest('[role="button"]');
+
+    expect(volunteerChip).toHaveAttribute('aria-disabled', 'false');
+    expect(volunteerGroupChip).toHaveAttribute('aria-disabled', 'false');
+  });
+
+  it('calls onTypeChange with volunteer when volunteer chip is clicked', async () => {
+    const onTypeChange = vi.fn();
+    const onClearVolunteerGroup = vi.fn();
+    renderComponent(
+      'volunteerGroup',
+      onTypeChange,
+      false,
+      false,
+      vi.fn(),
+      onClearVolunteerGroup,
+    );
+
+    const user = userEvent.setup();
+    const volunteerChip = screen
+      .getByText('Volunteer')
+      .closest('[role="button"]');
+    if (volunteerChip) {
+      await user.click(volunteerChip);
+    }
+
+    expect(onTypeChange).toHaveBeenCalledWith('volunteer');
+    expect(onClearVolunteerGroup).toHaveBeenCalled();
+  });
+
+  it('calls onTypeChange with volunteerGroup when volunteer group chip is clicked', async () => {
+    const onTypeChange = vi.fn();
+    const onClearVolunteer = vi.fn();
+    renderComponent(
+      'volunteer',
+      onTypeChange,
+      false,
+      false,
+      onClearVolunteer,
+      vi.fn(),
+    );
+
+    const user = userEvent.setup();
+    const volunteerGroupChip = screen
+      .getByText('Volunteer Group')
+      .closest('[role="button"]');
+    if (volunteerGroupChip) {
+      await user.click(volunteerGroupChip);
+    }
+
+    expect(onTypeChange).toHaveBeenCalledWith('volunteerGroup');
+    expect(onClearVolunteer).toHaveBeenCalled();
+  });
+
+  it('does not call onTypeChange when disabled volunteer chip is clicked', async () => {
+    const onTypeChange = vi.fn();
+    const onClearVolunteerGroup = vi.fn();
+    renderComponent(
+      'volunteerGroup',
+      onTypeChange,
+      true,
+      false,
+      vi.fn(),
+      onClearVolunteerGroup,
+    );
+
+    const user = userEvent.setup();
+    const volunteerChip = screen
+      .getByText('Volunteer')
+      .closest('[role="button"]');
+    if (volunteerChip) {
+      await user.click(volunteerChip);
+    }
+
+    expect(onTypeChange).not.toHaveBeenCalled();
+    expect(onClearVolunteerGroup).not.toHaveBeenCalled();
+  });
+
+  it('does not call onTypeChange when disabled volunteer group chip is clicked', async () => {
+    const onTypeChange = vi.fn();
+    const onClearVolunteer = vi.fn();
+    renderComponent(
+      'volunteer',
+      onTypeChange,
+      false,
+      true,
+      onClearVolunteer,
+      vi.fn(),
+    );
+
+    const user = userEvent.setup();
+    const volunteerGroupChip = screen
+      .getByText('Volunteer Group')
+      .closest('[role="button"]');
+    if (volunteerGroupChip) {
+      await user.click(volunteerGroupChip);
+    }
+
+    expect(onTypeChange).not.toHaveBeenCalled();
+    expect(onClearVolunteer).not.toHaveBeenCalled();
+  });
+
+  it('renders with disabled state styling when volunteer chip is disabled', () => {
+    renderComponent('volunteerGroup', vi.fn(), true, false);
+
+    const volunteerChip = screen
+      .getByText('Volunteer')
+      .closest('div[aria-disabled="true"]');
+    expect(volunteerChip).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('renders with disabled state styling when volunteer group chip is disabled', () => {
+    renderComponent('volunteer', vi.fn(), false, true);
+
+    const volunteerGroupChip = screen
+      .getByText('Volunteer Group')
+      .closest('div[aria-disabled="true"]');
+    expect(volunteerGroupChip).toHaveAttribute('aria-disabled', 'true');
+  });
+});