87 lines
3.5 KiB
TypeScript
87 lines
3.5 KiB
TypeScript
// Metro module 15395 (f15396).
|
|
import { useEffect, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import { EventActionType, NotificationNudgeAnalyticsAction } from "./NotificationPermissionConstants";
|
|
import { AnalyticEvents } from "../../../../../Constants";
|
|
import { ContentDismissActionType } from "../../../../dismissible_content/DismissibleContentConstants";
|
|
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../../_bundle/Module712";
|
|
import AnalyticsUtils from "../../../../../utils/AnalyticsUtils";
|
|
import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
|
|
import { requestPushNotificationPermission } from "../../NotificationPermissionUtil";
|
|
import { BottomSheet } from "../../../../../design/components/Sheet/native/BottomSheet.native";
|
|
import { BellSpotIllustration } from "../../../../../design/assets/native";
|
|
import { Text } from "../../../../../design/components/Text/native/Text";
|
|
import { ButtonGroup } from "../../../../../design/components/ButtonGroup/native/ButtonGroup.native";
|
|
import { Button } from "../../../../../design/components/Button/native/Button.native";
|
|
import { intl, t } from "../../../../../intl/index.native";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
marginHorizontal: Module712.space.PX_24,
|
|
alignItems: "center"
|
|
},
|
|
illustration: {
|
|
marginVertical: Module712.space.PX_24
|
|
},
|
|
title: {
|
|
textAlign: "center"
|
|
},
|
|
body: {
|
|
textAlign: "center",
|
|
marginTop: Module712.space.PX_8
|
|
},
|
|
buttonsContainer: {
|
|
marginTop: Module712.space.PX_8,
|
|
width: "100%"
|
|
}
|
|
});
|
|
export default function NotificationNudgeBottomSheet(props) {
|
|
let callback;
|
|
const { title, body, actionLocation, surface, markAsDismissed, onHide } = props;
|
|
callback = void 0;
|
|
const styles = useStyles();
|
|
useEffect(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
|
|
action: NotificationNudgeAnalyticsAction.IMPRESSION,
|
|
prompt_type: surface
|
|
});
|
|
}, [surface]);
|
|
callback = useCallback(() => {
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
if (onHide != null) {
|
|
onHide();
|
|
}
|
|
}, [onHide]);
|
|
const callback3 = useCallback(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
|
|
action: NotificationNudgeAnalyticsAction.ACCEPT,
|
|
prompt_type: surface
|
|
});
|
|
markAsDismissed(ContentDismissActionType.USER_DISMISS);
|
|
requestPushNotificationPermission(EventActionType.ALLOW_TO_REQUEST, actionLocation, callback);
|
|
}, [surface, actionLocation, callback, markAsDismissed]);
|
|
const callback2 = useCallback(() => {
|
|
AnalyticsUtils.track(AnalyticEvents.CONTEXTUAL_REMINDER_ACTION, {
|
|
action: NotificationNudgeAnalyticsAction.DISMISS,
|
|
prompt_type: surface
|
|
});
|
|
markAsDismissed(ContentDismissActionType.USER_DISMISS);
|
|
callback();
|
|
}, [surface, callback, markAsDismissed]);
|
|
return <BottomSheet>
|
|
<View style={styles.container}>
|
|
<View style={styles.illustration}>
|
|
<BellSpotIllustration scale={0.8} />
|
|
</View>
|
|
<Text style={styles.title} variant="heading-xl/bold" accessibilityRole="header">{title}</Text>
|
|
<Text style={styles.body} variant="text-sm/medium" color="text-default">{body}</Text>
|
|
<View style={styles.buttonsContainer}>
|
|
<ButtonGroup>
|
|
<Button text={intl.string(t["+7MDbQ"])} onPress={callback3} />
|
|
<Button text={intl.string(t.L5eIZ2)} onPress={callback2} variant="secondary" />
|
|
</ButtonGroup>
|
|
</View>
|
|
</View>
|
|
</BottomSheet>;
|
|
};
|