105 lines
4.8 KiB
TypeScript
105 lines
4.8 KiB
TypeScript
// Metro module 15280 (f15281).
|
|
import { useCallback, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import { AnalyticEvents, NOOP } from "../../../Constants";
|
|
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
|
|
import { EventActionLocation, EventActionType, NotificationNudgeAnalyticsAction, NotificationNudgeSurface } from "../../nuf/native/components/notification/NotificationPermissionConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
|
|
import { BellSlashIcon } from "../../../design/components/Icon/native/redesign/generated/BellSlashIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { requestPushNotificationPermission, useCanSeePushNotificationNudge } from "../../nuf/native/NotificationPermissionUtil";
|
|
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
|
|
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
|
|
import ContextualOptInNudgeHoldoutExperiment from "../../nuf/native/ContextualOptInNudgeHoldoutExperiment";
|
|
import { useSelectedTimeRecurringDismissibleContent } from "../../dismissible_content/hooks/useSelectedDismissibleContent";
|
|
import { DismissibleContent } from "../../../_bundle/Module1358";
|
|
let useStyles;
|
|
const NotificationCenterBannerImpl = function NotificationCenterBannerImpl(props) {
|
|
const onDismiss = props.onDismiss;
|
|
const styles = useStyles();
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
|
|
action: NotificationNudgeAnalyticsAction.IMPRESSION,
|
|
prompt_type: NotificationNudgeSurface.NOTIFICATION_CENTER_BANNER
|
|
});
|
|
}, []);
|
|
return <View style={styles.container}>
|
|
<View style={styles.iconContainer}>
|
|
<BellSlashIcon size="md" color={Module712.colors.ICON_STRONG} />
|
|
</View>
|
|
<View style={styles.contentContainer}>
|
|
<Text variant="text-md/semibold" color="text-default">
|
|
{intl.string(t.G6YBna)}
|
|
</Text>
|
|
<Text variant="text-md/medium" color="text-muted" style={{
|
|
marginTop: Module712.space.PX_4
|
|
}}>
|
|
{intl.string(t["9CoPDE"])}
|
|
</Text>
|
|
<View style={styles.ctaButton}>
|
|
<Button variant="primary" size="md" text={intl.string(t.a4bgO0)} onPress={function onPress() {
|
|
requestPushNotificationPermission(EventActionType.ALLOW_TO_REQUEST, EventActionLocation.NOTIFICATION_CENTER, NOOP);
|
|
AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
|
|
action: NotificationNudgeAnalyticsAction.ACCEPT,
|
|
prompt_type: NotificationNudgeSurface.NOTIFICATION_CENTER_BANNER
|
|
});
|
|
}} />
|
|
</View>
|
|
</View>
|
|
<PressableHighlight onPress={function onPress() {
|
|
AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
|
|
action: NotificationNudgeAnalyticsAction.DISMISS,
|
|
prompt_type: NotificationNudgeSurface.NOTIFICATION_CENTER_BANNER
|
|
});
|
|
onDismiss();
|
|
}} hitSlop={8} accessibilityRole="button" accessibilityLabel={intl.string(t.WAI6xu)}>
|
|
<XSmallIcon size="sm" color="icon-strong" />
|
|
</PressableHighlight>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
flexDirection: "row",
|
|
paddingLeft: 24,
|
|
paddingRight: Module712.space.PX_12,
|
|
paddingVertical: Module712.space.PX_16,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
alignItems: "flex-start",
|
|
borderBottomWidth: 1,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
gap: 16
|
|
},
|
|
contentContainer: {
|
|
flex: 1
|
|
},
|
|
iconContainer: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: Module712.radii.round,
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_STRONG,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
ctaButton: {
|
|
alignSelf: "flex-start",
|
|
marginTop: Module712.space.PX_12
|
|
}
|
|
});
|
|
export default function NotificationCenterPermissionNudge() {
|
|
const inHoldout = ContextualOptInNudgeHoldoutExperiment.useConfig({
|
|
location: "NotificationCenterPermissionNudge"
|
|
}).inHoldout;
|
|
const canSeePushNotificationNudge = useCanSeePushNotificationNudge();
|
|
const r8 = inHoldout ? null : canSeePushNotificationNudge ? DismissibleContent.NOTIFICATION_NUDGE_NOTIFICATION_CENTER_BANNER : null;
|
|
const [r28, r29] = useSelectedTimeRecurringDismissibleContent(r8, {
|
|
cooldownDurationMs: 604800000
|
|
});
|
|
let c21840_0 = r29;
|
|
const callback = useCallback(() => c21840_0(ContentDismissActionType.USER_DISMISS), [r29]);
|
|
return r28 === DismissibleContent.NOTIFICATION_NUDGE_NOTIFICATION_CENTER_BANNER ? <NotificationCenterBannerImpl onDismiss={callback} /> : null;
|
|
};
|