Skip to content

Commit

Permalink
feat: add product announcements toggle (#11175)
Browse files Browse the repository at this point in the history
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR implements Product Announcement's toggle on custom
notifications.
[NOTIFY-1087](https://consensyssoftware.atlassian.net/browse/NOTIFY-1087?atlOrigin=eyJpIjoiYWM0MWY1M2ZjNGM5NDZjOGJiYTY3ZTdkYWEwYTBiMTkiLCJwIjoiaiJ9)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to Settings Page
2. Go to Notifications Settings

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<img width="334" alt="Screenshot 2024-09-10 at 9 15 37 PM"
src="https://github.com/user-attachments/assets/31ba7472-1888-49e2-9a65-1d46208060db">


### **After**

![Screenshot 2024-09-12 at 13 38
19](https://github.com/user-attachments/assets/1866bd9c-5c26-4c56-ae9f-efd18dee1351)


## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


[NOTIFY-1087]:
https://consensyssoftware.atlassian.net/browse/NOTIFY-1087?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
  • Loading branch information
Jonathansoufer authored Sep 12, 2024
1 parent f8d2df6 commit 0b39b1f
Show file tree
Hide file tree
Showing 7 changed files with 208 additions and 153 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CustomNotificationsRow should render correctly 1`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
"marginBottom": 24,
}
}
>
<SvgMock
color="#141618"
height={24}
name="Arrow2Upright"
style={
{
"height": 24,
"marginRight": 16,
"width": 24,
}
}
width={24}
/>
<View
style={
{
"alignItems": "flex-start",
"flex": 1,
}
}
>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"flex": 1,
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 24,
}
}
>
Assets Sent
</Text>
<Text
accessibilityRole="text"
style={
{
"color": "#141618",
"flex": 1,
"fontFamily": "EuclidCircularB-Medium",
"fontSize": 16,
"fontWeight": "500",
"letterSpacing": 0,
"lineHeight": 24,
}
}
>
Funds and NFT
</Text>
</View>
<RCTSwitch
accessibilityRole="switch"
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
onTintColor="#0376c9"
style={
[
{
"height": 31,
"width": 51,
},
[
{
"alignSelf": "flex-start",
},
{
"backgroundColor": "#bbc0c566",
"borderRadius": 16,
},
],
]
}
thumbTintColor="#ffffff"
tintColor="#bbc0c566"
value={false}
/>
</View>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import CustomNotificationsRow from '../CustomNotificationsRow/index';
import { render } from '@testing-library/react-native';
import notificationsRows from '../notificationsRows';

describe('CustomNotificationsRow', () => {
it('should render correctly', () => {
const { toJSON } = render(
<CustomNotificationsRow
title={notificationsRows[0].title}
description={notificationsRows[0].description}
icon={notificationsRows[0].icon}
isEnabled={notificationsRows[0].value}
onChange={()=> jest.fn()}
/>,
);
expect(toJSON()).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react';
import { Switch, View } from 'react-native';
import { useTheme } from '../../../../../util/theme';
import { createStyles } from '../NotificationOptionToggle/styles';
import Text, {
TextVariant,
} from '../../../../../component-library/components/Texts/Text';
import Icon, { IconColor, IconName, IconSize } from '../../../../../component-library/components/Icons/Icon';

interface CustomNotificationsRowProps {
title: string;
description?: string;
icon: IconName;
isEnabled: boolean;
onChange: () => void;
}

const CustomNotificationsRow = ({
title,
description,
icon,
isEnabled,
onChange,
}: CustomNotificationsRowProps) => {
const theme = useTheme();
const { colors } = theme;
const styles = createStyles();

return (
<View style={styles.container}>
<Icon
name={icon}
style={styles.icon}
color={IconColor.Default}
size={IconSize.Lg}
/>
<View style={styles.titleContainer}>
<Text variant={TextVariant.BodyLGMedium} style={styles.title}>
{title}
</Text>
{
description &&
(<Text variant={TextVariant.BodyLGMedium} style={styles.title}>
{description}
</Text>)
}
</View>
<Switch
value={isEnabled}
onChange={onChange}
trackColor={{
true: colors.primary.default,
false: colors.border.muted,
}}
thumbColor={theme.brandColors.white}
style={styles.switch}
ios_backgroundColor={colors.border.muted}
/>
</View>
);
};


export default React.memo(CustomNotificationsRow);

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ interface NotificationOptionsToggleProps {
testId?: string;

isEnabled: boolean;
refetchAccountSettings: () => Promise<void>;
refetchAccountSettings?: () => Promise<void>;
}

function useUpdateAccountSetting(address: string) {
Expand Down
34 changes: 29 additions & 5 deletions app/components/Views/Settings/NotificationsSettings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,16 @@ import { Props } from './NotificationsSettings.types';
import { useStyles } from '../../../../component-library/hooks';

import NotificationOptionToggle from './NotificationOptionToggle';
import CustomNotificationsRow from './CustomNotificationsRow';
import { NotificationsToggleTypes } from './NotificationsSettings.constants';

import { selectIsMetamaskNotificationsEnabled } from '../../../../selectors/notifications';

import {
requestPushNotificationsPermission,
asyncAlert,
} from '../../../../util/notifications';
import Routes from '../../../../constants/navigation/Routes';
import { IconName } from '../../../../component-library/components/Icons/Icon';

import ButtonIcon, {
ButtonIconSizes,
} from '../../../../component-library/components/Buttons/ButtonIcon';
Expand All @@ -40,10 +40,12 @@ import {
useDisableNotifications,
useEnableNotifications,
} from '../../../../util/notifications/hooks/useNotifications';
import { useAccountSettingsProps } from '../../../../util/notifications/hooks/useSwitchNotifications';
import { useAccountSettingsProps, useSwitchNotifications } from '../../../../util/notifications/hooks/useSwitchNotifications';
import styleSheet from './NotificationsSettings.styles';
import AppConstants from '../../../../core/AppConstants';
import { store } from '../../../../store';
import notificationsRows from './notificationsRows';
import { IconName } from '../../../../component-library/components/Icons/Icon';


interface MainNotificationSettingsProps extends Props {
Expand Down Expand Up @@ -93,6 +95,7 @@ const MainNotificationSettings = ({ styles, toggleNotificationsEnabled, isMetama
);};
const NotificationsSettings = ({ navigation, route }: Props) => {
const { accounts } = useAccounts();
const { switchFeatureAnnouncements } = useSwitchNotifications();
const accountsNotificationState = store.getState().notifications;
const theme = useTheme();
const accountAddresses = useMemo(
Expand Down Expand Up @@ -121,6 +124,7 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
(state: RootState) => state.settings.basicFunctionalityEnabled,
);
const [uiNotificationStatus, setUiNotificationStatus] = React.useState(false);
const [platformAnnouncementsState, setPlatformAnnouncementsState] = React.useState(false);

const loading = enableLoading || disableLoading;
const errorText = enablingError || disablingError;
Expand Down Expand Up @@ -177,6 +181,12 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
navigation,
]);


const toggleCustomNotificationsEnabled = useCallback(async() => {
setPlatformAnnouncementsState(!platformAnnouncementsState);
await switchFeatureAnnouncements(!platformAnnouncementsState);
},[platformAnnouncementsState, switchFeatureAnnouncements]);

const goToLearnMore = () => {
Linking.openURL(AppConstants.URLS.PROFILE_SYNC);
};
Expand All @@ -198,8 +208,6 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
reFetchingAccountSettings();
}, [colors, isFullScreenModal, navigation, reFetchingAccountSettings]);



const refetchAccountSettings = useCallback(async () => {
await accountSettingsProps.update(accountAddresses);
}, [accountSettingsProps, accountAddresses]);
Expand Down Expand Up @@ -237,6 +245,21 @@ const NotificationsSettings = ({ navigation, route }: Props) => {

{isMetamaskNotificationsEnabled && (
<>
<SessionHeader
title={strings(
'app_settings.notifications_opts.customize_session_title',
)}
description={strings(
'app_settings.notifications_opts.customize_session_desc',
)}
styles={styles}
/>
<CustomNotificationsRow
title={notificationsRows[4].title}
icon={notificationsRows[4].icon}
isEnabled={platformAnnouncementsState}
onChange={toggleCustomNotificationsEnabled}
/>
<SessionHeader
title={strings(
'app_settings.notifications_opts.account_session_title',
Expand All @@ -246,6 +269,7 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
)}
styles={styles}
/>

{renderAccounts()}
</>
)}
Expand Down

0 comments on commit 0b39b1f

Please sign in to comment.