Skip to content

feat(station-login): phone number input disable logic in profile mode #613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bhabalan wants to merge 1 commit into
base: next
Choose a base branch
from
Open

feat(station-login): phone number input disable logic in profile mode #613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/contact-center/cc-components/src/components/StationLogin/station-login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,14 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
const [dnErrorText, setDNErrorText] = useState<string>('');
const {multiSignInModalRef, ccSignOutModalRef, saveConfirmDialogRef} = createStationLoginRefs(logger);

// Disable phone number input if device type and team haven't changed in profile mode
const isPhoneNumberDisabled =
profileMode &&
isAgentLoggedIn &&
selectedDeviceType !== DESKTOP &&
selectedDeviceType === originalLoginOptions.deviceType &&
selectedTeamId === originalLoginOptions.teamId;
Comment on lines +63 to +69
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Block dial-number-only changes after team toggle

This disable check only looks at the current team/device, so a user can still change the dial number by temporarily changing the team (which enables the input), editing the number, and then switching the team back. When the team returns to the original value, the input becomes disabled, but currentLoginOptions.dialNumber remains changed and isLoginOptionsChanged (computed in packages/contact-center/station-login/src/helper.ts) will still allow saving, effectively permitting a dial-number-only update. If the intent is to forbid dial-number-only changes, the logic needs to also reset/validate the dial number when team/device return to the original selection or block saving when only dial number differs.

Useful? React with 👍 / 👎.


// Filter out Desktop mode if hideDesktopLogin is true
const filteredLoginOptions = hideDesktopLogin ? loginOptions.filter((option) => option !== DESKTOP) : loginOptions;

Expand Down Expand Up @@ -255,6 +263,7 @@ const StationLoginComponent: React.FunctionComponent<StationLoginComponentProps>
label={dialNumberLabel}
placeholder={dialNumberPlaceholder}
value={dialNumberValue}
disabled={isPhoneNumberDisabled}
onInput={(event) => {
handleDNInputChanged(
event,
Expand Down
4 changes: 4 additions & 0 deletions ...cc-components/tests/components/StationLogin/__snapshots__/station-login.snapshot.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,7 @@ exports[`Station Login Component Actions ProfileMode interaction confirmation Po
</div>
<mdc-input
data-testid="dial-number-input"
disabled=""
label=""
name=""
value=""
Expand Down Expand Up @@ -547,6 +548,7 @@ exports[`Station Login Component Actions ProfileMode interaction confirmation Po
</div>
<mdc-input
data-testid="dial-number-input"
disabled=""
label=""
name=""
value=""
Expand Down Expand Up @@ -3335,6 +3337,7 @@ exports[`Station Login Component Rendering hides Desktop login option in profile
</div>
<mdc-input
data-testid="dial-number-input"
disabled=""
label=""
name=""
value=""
Expand Down Expand Up @@ -4924,6 +4927,7 @@ exports[`Station Login Component Rendering renders the component correctly in pr
</div>
<mdc-input
data-testid="dial-number-input"
disabled=""
label=""
name=""
value=""
Expand Down
256 changes: 256 additions & 0 deletions packages/contact-center/cc-components/tests/components/StationLogin/station-login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -919,4 +919,260 @@ describe('Station Login Component', () => {
global.RegExp = originalRegExp;
});
});

describe('Phone Number Input Disable Logic in Profile Mode', () => {
it('should disable phone number input when device type has not changed in profile mode', async () => {
const profileModeProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'AGENT_DN',
dialNumberValue: '1234567890',
originalLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team123',
},
};

const screen = await render(<StationLoginComponent {...profileModeProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).toHaveAttribute('disabled');
});

it('should enable phone number input when device type changes from DN to Extension in profile mode', async () => {
const profileModeProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'EXTENSION',
dialNumberValue: '',
originalLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'EXTENSION',
dialNumber: '',
teamId: 'team123',
},
};

const screen = await render(<StationLoginComponent {...profileModeProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).not.toHaveAttribute('disabled');
});

it('should enable phone number input when device type changes from Extension to DN in profile mode', async () => {
const profileModeProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'AGENT_DN',
dialNumberValue: '',
originalLoginOptions: {
deviceType: 'EXTENSION',
dialNumber: '5678',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '',
teamId: 'team123',
},
};

const screen = await render(<StationLoginComponent {...profileModeProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).not.toHaveAttribute('disabled');
});

it('should disable phone number input when device type remains Extension in profile mode', async () => {
const profileModeProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'EXTENSION',
dialNumberValue: '5678',
originalLoginOptions: {
deviceType: 'EXTENSION',
dialNumber: '5678',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'EXTENSION',
dialNumber: '5678',
teamId: 'team123',
},
};

const screen = await render(<StationLoginComponent {...profileModeProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).toHaveAttribute('disabled');
});

it('should enable phone number input in login mode (not profile mode)', async () => {
const loginModeProps = {
...props,
profileMode: false,
isAgentLoggedIn: false,
selectedDeviceType: 'AGENT_DN',
dialNumberValue: '',
originalLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '',
teamId: 'team123',
},
};

const screen = await render(<StationLoginComponent {...loginModeProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).not.toHaveAttribute('disabled');
});

it('should not render phone number input when device type is DESKTOP', async () => {
const desktopProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'BROWSER',
dialNumberValue: '',
originalLoginOptions: {
deviceType: 'BROWSER',
dialNumber: '',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'BROWSER',
dialNumber: '',
teamId: 'team123',
},
};

const screen = await render(<StationLoginComponent {...desktopProps} />);
const numberInput = screen.queryByTestId('dial-number-input');

expect(numberInput).not.toBeInTheDocument();
});

it('should enable phone number input when team changes but device type remains the same (DN)', async () => {
const teamChangedProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'AGENT_DN',
selectedTeamId: 'team456',
dialNumberValue: '1234567890',
originalLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team456',
},
};

const screen = await render(<StationLoginComponent {...teamChangedProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).not.toHaveAttribute('disabled');
});

it('should enable phone number input when team changes but device type remains the same (Extension)', async () => {
const teamChangedProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'EXTENSION',
selectedTeamId: 'team456',
dialNumberValue: '5678',
originalLoginOptions: {
deviceType: 'EXTENSION',
dialNumber: '5678',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'EXTENSION',
dialNumber: '5678',
teamId: 'team456',
},
};

const screen = await render(<StationLoginComponent {...teamChangedProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).not.toHaveAttribute('disabled');
});

it('should disable phone number input only when both device type and team remain unchanged', async () => {
const noChangesProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'AGENT_DN',
selectedTeamId: 'team123',
dialNumberValue: '1234567890',
originalLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team123',
},
};

const screen = await render(<StationLoginComponent {...noChangesProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).toHaveAttribute('disabled');
});

it('should enable phone number input when both device type and team change', async () => {
const bothChangedProps = {
...props,
profileMode: true,
isAgentLoggedIn: true,
selectedDeviceType: 'EXTENSION',
selectedTeamId: 'team456',
dialNumberValue: '',
originalLoginOptions: {
deviceType: 'AGENT_DN',
dialNumber: '1234567890',
teamId: 'team123',
},
currentLoginOptions: {
deviceType: 'EXTENSION',
dialNumber: '',
teamId: 'team456',
},
};

const screen = await render(<StationLoginComponent {...bothChangedProps} />);
const numberInput = screen.getByTestId('dial-number-input');

expect(numberInput).not.toHaveAttribute('disabled');
});
});
});
Loading