Skip to content

feat: Rebranded toast designs #3985

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
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

feat: Rebranded toast designs #3985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7af8b02
new rebranded toast designs
arjunaj5 Oct 9, 2025
2f1c51b
fixes
arjunaj5 Oct 9, 2025
96cd65d
variable usage
arjunaj5 Oct 9, 2025
eb7f288
action button change
arjunaj5 Oct 9, 2025
708a629
minor
arjunaj5 Oct 13, 2025
721ec7d
minor
arjunaj5 Oct 13, 2025
8f16eeb
fix unit tests
arjunaj5 Oct 13, 2025
910e977
minor
arjunaj5 Oct 14, 2025
c13ef4f
Merge branch 'master' into Fyle-86d0jnxu2-direct
arjunaj5 Oct 14, 2025
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
1 change: 1 addition & 0 deletions src/app/auth/switch-org/switch-org.page.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,6 +454,7 @@ describe('SwitchOrgPage', () => {
icon: 'check-square-fill',
showCloseButton: true,
message: msg,
messageType: 'success' as const,
},
duration: 3000,
};
Expand Down
1 change: 1 addition & 0 deletions src/app/core/mock-data/modal-controller.data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ export const openFromComponentConfig = {
icon: 'warning-fill',
showCloseButton: true,
message: 'Please select one or more expenses to be reported',
messageType: 'failure' as const,
},
duration: 3000,
panelClass: ['msb-failure-with-report-btn'],
Expand Down
18 changes: 13 additions & 5 deletions src/app/core/mock-data/snackbar-properties.data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,52 @@ import deepFreeze from 'deep-freeze-strict';

import { SnackbarProperties } from '../models/snackbar-properties.model';

export const snackbarPropertiesRes = deepFreeze({
export const snackbarPropertiesRes: SnackbarProperties = deepFreeze({
data: {
icon: 'warning-fill',
showCloseButton: true,
message: 'Please select one or more expenses to be reported',
messageType: 'failure' as const,
},
duration: 3000,
});

export const snackbarPropertiesRes2 = deepFreeze({
export const snackbarPropertiesRes2: SnackbarProperties = deepFreeze({
data: {
icon: 'success',
showCloseButton: true,
message: 'Expense added to report successfully',
messageType: 'success' as const,
},
duration: 3000,
});

export const snackbarPropertiesRes3 = deepFreeze({
export const snackbarPropertiesRes3: SnackbarProperties = deepFreeze({
data: {
icon: 'success',
showCloseButton: true,
message: '1 expense has been deleted',
messageType: 'success' as const,
},
duration: 3000,
});

export const snackbarPropertiesRes4 = deepFreeze({
export const snackbarPropertiesRes4: SnackbarProperties = deepFreeze({
data: {
icon: 'warning-fill',
showCloseButton: true,
message: 'We could not delete the expenses. Please try again',
messageType: 'failure' as const,
},
duration: 3000,
});

export const snackbarPropertiesRes5 = deepFreeze({
export const snackbarPropertiesRes5: SnackbarProperties = deepFreeze({
data: {
icon: 'success',
showCloseButton: true,
message: 'Expenses merged Successfully',
messageType: 'success' as const,
},
duration: 3000,
});
Expand All @@ -52,6 +57,7 @@ export const snackbarPropertiesRes6: SnackbarProperties = deepFreeze({
icon: 'success',
showCloseButton: true,
message: '1 Transaction successfully hidden!',
messageType: 'success' as const,
},
duration: 3000,
});
Expand All @@ -61,6 +67,7 @@ export const snackbarPropertiesRes7: SnackbarProperties = deepFreeze({
icon: 'success',
showCloseButton: true,
message: '2 Transactions successfully hidden!',
messageType: 'success' as const,
},
duration: 3000,
});
Expand All @@ -70,6 +77,7 @@ export const dismissExpenseSnackbarProps: SnackbarProperties = deepFreeze({
icon: 'success',
showCloseButton: true,
message: 'Expense dismissed',
messageType: 'success' as const,
},
duration: 3000,
});
1 change: 1 addition & 0 deletions src/app/core/models/snackbar-properties.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export interface SnackbarProperties {
data: {
icon: string;
showCloseButton: boolean;
messageType: 'success' | 'failure' | 'information';
message: string;
redirectionText?: string;
};
Expand Down
6 changes: 3 additions & 3 deletions src/app/core/services/snackbar-properties.service.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,17 @@ describe('SnackbarPropertiesService', () => {
//act
const properties = service.setSnackbarProperties('success', { message: 'Success message' });
//assert
expect(properties.data.icon).toEqual('check-square-fill');
expect(properties.data.icon).toEqual('success-toast-icon');
});

it('should return the correct icon for a failure toast message', () => {
const properties = service.setSnackbarProperties('failure', { message: 'Failure message' });
expect(properties.data.icon).toEqual('warning-fill');
expect(properties.data.icon).toEqual('failure-toast-icon');
});

it('should return correct icon for a information toast message', () => {
const properties = service.setSnackbarProperties('information', { message: 'Information message' });
expect(properties.data.icon).toBeUndefined();
expect(properties.data.icon).toEqual('info-toast-icon');
});
Comment on lines 30 to 33
Copy link

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Information toast test is working like a charm, but there's a small twist here!

The test expects 'info-toast-icon' while the message type is 'information'. This naming difference might confuse the team later, machaan. Consistency is king - either both should be 'information' or both should be 'info'.

🤖 Prompt for AI Agents 
In src/app/core/services/snackbar-properties.service.spec.ts around lines 30-33,
the test expects 'info-toast-icon' while the message type used is 'information',
causing an inconsistency; update the test to expect 'information-toast-icon' (or
alternatively update the service mapping so 'information' returns
'info-toast-icon') so the type and icon naming are consistent.


it('should return the correct duration', () => {
Expand Down
7 changes: 5 additions & 2 deletions src/app/core/services/snackbar-properties.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,18 @@ export class SnackbarPropertiesService {
): SnackbarProperties {
if (!snackbarIcon) {
if (toastMessageType === 'success') {
snackbarIcon = 'check-square-fill';
snackbarIcon = 'success-toast-icon';
} else if (toastMessageType === 'failure') {
snackbarIcon = 'warning-fill';
snackbarIcon = 'failure-toast-icon';
} else if (toastMessageType === 'information') {
snackbarIcon = 'info-toast-icon';
}
}
return {
data: {
icon: snackbarIcon,
showCloseButton: true,
messageType: toastMessageType,
...toastMessageData,
},
duration: 3000,
Expand Down
1 change: 1 addition & 0 deletions src/app/fyle/add-edit-expense/add-edit-expense-2.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1626,6 +1626,7 @@ export function TestCases2(getTestBed) {
icon: 'check-square-fill',
showCloseButton: true,
message: 'Message',
messageType: 'success' as const,
},
duration: 3000,
};
Expand Down
1 change: 1 addition & 0 deletions src/app/fyle/add-edit-expense/suggested-duplicates/suggested-duplicates.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ describe('SuggestedDuplicatesComponent', () => {
icon: 'check-square-fill',
showCloseButton: true,
message: 'Duplicates were successfully dismissed',
messageType: 'success' as const,
},
duration: 3000,
};
Expand Down
2 changes: 2 additions & 0 deletions src/app/fyle/dashboard/tasks/tasks-3.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,7 @@ export function TestCases3(getTestBed) {
icon: 'check-square-fill',
showCloseButton: true,
message,
messageType: 'success' as const,
},
duration: 3000,
};
Expand All @@ -286,6 +287,7 @@ export function TestCases3(getTestBed) {
icon: 'warning-fill',
showCloseButton: true,
message,
messageType: 'failure' as const,
},
duration: 3000,
};
Expand Down
10 changes: 6 additions & 4 deletions src/app/fyle/my-profile/my-profile.page.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,7 @@ describe('MyProfilePage', () => {
data: {
icon: 'check-square-fill',
showCloseButton: true,
messageType: 'success' as const,
message,
},
duration: 3000,
Expand All @@ -342,7 +343,7 @@ describe('MyProfilePage', () => {
...successToastProperties,
panelClass: 'msb-success',
});
expect(snackbarProperties.setSnackbarProperties).toHaveBeenCalledOnceWith('success', { message }, undefined);
expect(snackbarProperties.setSnackbarProperties).toHaveBeenCalledOnceWith('success', { message });
expect(trackingService.showToastMessage).toHaveBeenCalledOnceWith({
ToastContent: message,
});
Expand All @@ -354,6 +355,7 @@ describe('MyProfilePage', () => {
data: {
icon: 'warning-fill',
showCloseButton: true,
messageType: 'failure' as const,
message,
},
duration: 3000,
Expand All @@ -366,7 +368,7 @@ describe('MyProfilePage', () => {
...failureToastProperties,
panelClass: 'msb-failure',
});
expect(snackbarProperties.setSnackbarProperties).toHaveBeenCalledOnceWith('failure', { message }, undefined);
expect(snackbarProperties.setSnackbarProperties).toHaveBeenCalledOnceWith('failure', { message });
expect(trackingService.showToastMessage).toHaveBeenCalledOnceWith({
ToastContent: message,
});
Expand All @@ -379,6 +381,7 @@ describe('MyProfilePage', () => {
icon: 'success',
showCloseButton: true,
message,
messageType: 'success' as const,
},
duration: 3000,
};
Expand All @@ -392,8 +395,7 @@ describe('MyProfilePage', () => {
});
expect(snackbarProperties.setSnackbarProperties).toHaveBeenCalledOnceWith(
'success',
{ message },
'check-circle-outline',
{ message }
);
expect(trackingService.showToastMessage).toHaveBeenCalledOnceWith({
ToastContent: message,
Expand Down
6 changes: 1 addition & 5 deletions src/app/fyle/my-profile/my-profile.page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,12 +474,8 @@ export class MyProfilePage {

showToastMessage(message: string, type: 'success' | 'failure'): void {
const panelClass = type === 'success' ? 'msb-success' : 'msb-failure';
let snackbarIcon: string;
if (message.toLowerCase().includes('copied')) {
snackbarIcon = 'check-circle-outline';
}
this.matSnackBar.openFromComponent(ToastMessageComponent, {
...this.snackbarProperties.setSnackbarProperties(type, { message }, snackbarIcon),
...this.snackbarProperties.setSnackbarProperties(type, { message }),
panelClass,
});
this.trackingService.showToastMessage({ ToastContent: message });
Expand Down
1 change: 0 additions & 1 deletion src/app/fyle/my-profile/verify-number-popover/error-type.model.ts
View file
Open in desktop

This file was deleted.

78 changes: 0 additions & 78 deletions src/app/fyle/my-profile/verify-number-popover/verify-number-popover.component.html
View file
Open in desktop

This file was deleted.

Loading
Loading