diff --git a/core/screens/notifications/components/NotificationSettingsList.tsx b/core/screens/notifications/components/NotificationSettingsList.tsx
index 953eb2d7d0cf161faad77727b3ba6bec203ada04..4cd561c4aa454686036846e0df1875dc18329122 100644
--- a/core/screens/notifications/components/NotificationSettingsList.tsx
+++ b/core/screens/notifications/components/NotificationSettingsList.tsx
@@ -1,7 +1,8 @@
import groupBy from 'lodash.groupby'
-import React, { useMemo } from 'react'
+import type React from 'react'
+import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { ScrollView, type StyleProp, StyleSheet, useWindowDimensions, View, type ViewStyle } from 'react-native'
import { FeatureFlagKey } from '@holi/core/featureFlags/constants'
import { useFeatureFlagWithMaintenance } from '@holi/core/featureFlags/hooks/useFeatureFlagWithMaintenance'
@@ -9,8 +10,8 @@ import NotificationSettingsMaintenance from '@holi/core/screens/notifications/co
import {
Category,
Channel,
- NotificationWorkflow,
- UpdateWorkflowPreference,
+ type NotificationWorkflow,
+ type UpdateWorkflowPreference,
useNotificationPreferences,
} from '@holi/core/screens/notifications/hooks/useNotificationPreferences'
import HoliColumn from '@holi/ui/components/atoms/HoliColumn'
@@ -24,9 +25,10 @@ import HoliCheckbox from '@holi/ui/components/molecules/HoliCheckbox'
import HoliLoader from '@holi/ui/components/molecules/HoliLoader'
import HoliRoundedSection from '@holi/ui/components/molecules/HoliRoundedSection'
import Spacing from '@holi/ui/foundations/Spacing'
-import { HoliTheme, useTheme } from '@holi/ui/styles/theme'
+import { type HoliTheme, useTheme } from '@holi/ui/styles/theme'
import useTracking from '@holi/core/tracking/hooks/useTracking'
import { TrackingEvent } from '@holi/core/tracking'
+import { dimensions } from '@holi/ui/styles/globalVars'
const CATEGORY_ILLUSTRATIONS = {
GLOBAL: require('@holi/ui/assets/img/illustrations/illustration_bell.svg'),
@@ -47,7 +49,8 @@ const NOTIFICATION_CATEGORIES_IN_ORDER: NOTIFICATION_CATEGORY[] = [
const NotificationSettingsList = () => {
const { t } = useTranslation()
const { theme } = useTheme()
- const styles = useMemo(() => getStyles(theme), [theme])
+ const { width: screenWidth } = useWindowDimensions()
+ const styles = useMemo(() => getStyles(theme, screenWidth), [theme, screenWidth])
const notificationsFeatureFlag = useFeatureFlagWithMaintenance(FeatureFlagKey.NOTIFICATIONS)
const { workflowPreferences, updatePreference, updatingPreferences, loading } = useNotificationPreferences()
@@ -71,7 +74,12 @@ const NotificationSettingsList = () => {
return (
<ScrollView style={styles.scrollView}>
<HoliContainer noPadding>
- {updatingPreferences && <HoliLoader />}
+ {updatingPreferences && (
+ <View style={styles.loaderContainer}>
+ <HoliLoader />
+ </View>
+ )}
+
{NOTIFICATION_CATEGORIES_IN_ORDER.map((category, index) => {
const workflows = workflowsByCategory[category]
if (!workflows) {
@@ -145,7 +153,8 @@ const WorkflowSettings = ({
}) => {
const { t } = useTranslation()
const { theme } = useTheme()
- const styles = useMemo(() => getStyles(theme), [theme])
+ const { width: screenWidth } = useWindowDimensions()
+ const styles = useMemo(() => getStyles(theme, screenWidth), [theme, screenWidth])
const { track } = useTracking()
const workflowName = t(`profile.settings.notifications.workflow.${workflow.id}`)
@@ -221,7 +230,7 @@ const CategoryIllustration: React.FC<{ style?: ViewStyle; category: NOTIFICATION
export default NotificationSettingsList
-const getStyles = (theme: HoliTheme) =>
+const getStyles = (theme: HoliTheme, screenWidth: number) =>
StyleSheet.create({
scrollView: {
backgroundColor: theme.colors.background20,
@@ -243,4 +252,11 @@ const getStyles = (theme: HoliTheme) =>
lastSection: {
marginBottom: 24,
},
+ loaderContainer: {
+ position: 'absolute',
+ top: screenWidth > dimensions.breakpointS ? '25%' : '20%',
+ left: 0,
+ right: 0,
+ zIndex: 1,
+ },
})
diff --git a/core/screens/notifications/components/__tests__/__snapshots__/NotificationSettingsList.test.tsx.snap b/core/screens/notifications/components/__tests__/__snapshots__/NotificationSettingsList.test.tsx.snap
index f4d9b091c657e707609528249e1601fecf1213aa..ee62dba326bc7f762e389cc870644fb6540bbd55 100644
--- a/core/screens/notifications/components/__tests__/__snapshots__/NotificationSettingsList.test.tsx.snap
+++ b/core/screens/notifications/components/__tests__/__snapshots__/NotificationSettingsList.test.tsx.snap
@@ -2082,104 +2082,116 @@ exports[`NotificationSettingsList should correctly render updating state 1`] = `
testID="holi-container"
>
<View
- collapsable={false}
- entering={
- FadeIn {
- "build": [Function],
- "callbackV": undefined,
- "dampingRatioV": undefined,
- "dampingV": undefined,
- "delayV": 0,
- "durationV": undefined,
- "easingV": undefined,
- "initialValues": undefined,
- "massV": undefined,
- "overshootClampingV": undefined,
- "randomizeDelay": false,
- "reduceMotionV": "system",
- "restDisplacementThresholdV": undefined,
- "restSpeedThresholdV": undefined,
- "rotateV": undefined,
- "stiffnessV": undefined,
- "type": undefined,
- }
- }
- exiting={
- FadeOut {
- "build": [Function],
- "callbackV": undefined,
- "dampingRatioV": undefined,
- "dampingV": undefined,
- "delayV": undefined,
- "durationV": undefined,
- "easingV": undefined,
- "initialValues": undefined,
- "massV": undefined,
- "overshootClampingV": undefined,
- "randomizeDelay": false,
- "reduceMotionV": "system",
- "restDisplacementThresholdV": undefined,
- "restSpeedThresholdV": undefined,
- "rotateV": undefined,
- "stiffnessV": undefined,
- "type": undefined,
- }
- }
- jestAnimatedStyle={
- {
- "value": {},
- }
- }
style={
{
- "alignItems": "center",
- "backgroundColor": "transparent",
- "bottom": 0,
- "justifyContent": "center",
"left": 0,
- "paddingHorizontal": 16,
"position": "absolute",
"right": 0,
- "top": 0,
- "zIndex": 9999,
+ "top": "25%",
+ "zIndex": 1,
}
}
>
<View
+ collapsable={false}
+ entering={
+ FadeIn {
+ "build": [Function],
+ "callbackV": undefined,
+ "dampingRatioV": undefined,
+ "dampingV": undefined,
+ "delayV": 0,
+ "durationV": undefined,
+ "easingV": undefined,
+ "initialValues": undefined,
+ "massV": undefined,
+ "overshootClampingV": undefined,
+ "randomizeDelay": false,
+ "reduceMotionV": "system",
+ "restDisplacementThresholdV": undefined,
+ "restSpeedThresholdV": undefined,
+ "rotateV": undefined,
+ "stiffnessV": undefined,
+ "type": undefined,
+ }
+ }
+ exiting={
+ FadeOut {
+ "build": [Function],
+ "callbackV": undefined,
+ "dampingRatioV": undefined,
+ "dampingV": undefined,
+ "delayV": undefined,
+ "durationV": undefined,
+ "easingV": undefined,
+ "initialValues": undefined,
+ "massV": undefined,
+ "overshootClampingV": undefined,
+ "randomizeDelay": false,
+ "reduceMotionV": "system",
+ "restDisplacementThresholdV": undefined,
+ "restSpeedThresholdV": undefined,
+ "rotateV": undefined,
+ "stiffnessV": undefined,
+ "type": undefined,
+ }
+ }
+ jestAnimatedStyle={
+ {
+ "value": {},
+ }
+ }
style={
{
- "height": 64,
- "width": 64,
+ "alignItems": "center",
+ "backgroundColor": "transparent",
+ "bottom": 0,
+ "justifyContent": "center",
+ "left": 0,
+ "paddingHorizontal": 16,
+ "position": "absolute",
+ "right": 0,
+ "top": 0,
+ "zIndex": 9999,
}
}
>
- <LottieAnimationView
- autoPlay={true}
- cacheComposition={true}
- colorFilters={[]}
- enableMergePathsAndroidForKitKatAndAbove={false}
- loop={true}
- onAnimationFailure={[Function]}
- onAnimationFinish={[Function]}
- onAnimationLoaded={[Function]}
- progress={0}
- resizeMode="contain"
- sourceJson="{"v":"5.8.1","fr":60,"ip":22,"op":172,"w":128,"h":128,"nm":"Preloader","ddd":0,"assets":[{"id":"comp_0","nm":"Blob","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[65,64,0],"ix":2,"l":2},"a":{"a":0,"k":[-6.242,8.26,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.4,0.4],"y":[0,0]},"t":31,"s":[10,10]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":92,"s":[25.516,52.52]},{"i":{"x":[0.17,0.6],"y":[0.971,1]},"o":{"x":[0.4,0.4],"y":[0,0]},"t":118,"s":[25.516,52.52]},{"t":151,"s":[10,10]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":108,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.38431372549,0.403921568627,0.905882352941,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-36.242,8.26],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[124,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":18,"op":318,"st":18,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[94,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":9,"op":309,"st":9,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[64,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}"
- speed={1}
+ <View
style={
{
- "aspectRatio": 1,
- "bottom": 0,
- "left": 0,
- "position": "absolute",
- "right": 0,
- "top": 0,
+ "height": 64,
+ "width": 64,
}
}
- textFiltersAndroid={[]}
- textFiltersIOS={[]}
- useNativeLooping={false}
- />
+ >
+ <LottieAnimationView
+ autoPlay={true}
+ cacheComposition={true}
+ colorFilters={[]}
+ enableMergePathsAndroidForKitKatAndAbove={false}
+ loop={true}
+ onAnimationFailure={[Function]}
+ onAnimationFinish={[Function]}
+ onAnimationLoaded={[Function]}
+ progress={0}
+ resizeMode="contain"
+ sourceJson="{"v":"5.8.1","fr":60,"ip":22,"op":172,"w":128,"h":128,"nm":"Preloader","ddd":0,"assets":[{"id":"comp_0","nm":"Blob","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[65,64,0],"ix":2,"l":2},"a":{"a":0,"k":[-6.242,8.26,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":1,"k":[{"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.4,0.4],"y":[0,0]},"t":31,"s":[10,10]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"t":92,"s":[25.516,52.52]},{"i":{"x":[0.17,0.6],"y":[0.971,1]},"o":{"x":[0.4,0.4],"y":[0,0]},"t":118,"s":[25.516,52.52]},{"t":151,"s":[10,10]}],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":108,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":0,"k":[0.38431372549,0.403921568627,0.905882352941,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-36.242,8.26],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":300,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[124,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":18,"op":318,"st":18,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[94,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":9,"op":309,"st":9,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"Blob","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[64,64,0],"ix":2,"l":2},"a":{"a":0,"k":[64,64,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":128,"h":128,"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}"
+ speed={1}
+ style={
+ {
+ "aspectRatio": 1,
+ "bottom": 0,
+ "left": 0,
+ "position": "absolute",
+ "right": 0,
+ "top": 0,
+ }
+ }
+ textFiltersAndroid={[]}
+ textFiltersIOS={[]}
+ useNativeLooping={false}
+ />
+ </View>
</View>
</View>
<View