Page MenuHomePhabricator
Files F3509735

D6820.diff
No OneTemporary
Actions

D6820.diff
View Options

diff --git a/web/modals/push-notif-modal.css b/web/modals/push-notif-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/push-notif-modal.css
@@ -0,0 +1,14 @@
+.container {
+ padding: 0 40px 32px;
+ border-radius: 8px;
+ color: var(--modal-fg);
+}
+.text {
+ font-size: var(--xl-font-20);
+ padding: 5px 0px 20px;
+}
+.buttonContainer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 24px;
+}
diff --git a/web/modals/push-notif-modal.react.js b/web/modals/push-notif-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/push-notif-modal.react.js
@@ -0,0 +1,57 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import Modal from './modal.react.js';
+import css from './push-notif-modal.css';
+import Button from '../components/button.react.js';
+import { useCreatePushSubscription } from '../push-notif/push-notifs-handler.js';
+
+const PushNotifModal: React.ComponentType<{}> = React.memo(
+ function PushNotifModal(): React.Node {
+ const { popModal } = useModalContext();
+
+ const createPushSubscription = useCreatePushSubscription();
+
+ const onEnable = React.useCallback(async () => {
+ popModal();
+
+ if (Notification.permission !== 'granted') {
+ const permissionResult = await Notification.requestPermission();
+ if (permissionResult !== 'granted') {
+ return;
+ }
+ }
+
+ await createPushSubscription();
+ }, [createPushSubscription, popModal]);
+
+ return (
+ <Modal
+ size="fit-content"
+ name="Notifications"
+ icon="bell"
+ withCloseButton={false}
+ onClose={popModal}
+ >
+ <div className={css.container}>
+ <p className={css.text}>
+ Would you like to enable push notifications?
+ </p>
+ <div className={css.buttonContainer}>
+ <Button variant="outline" onClick={popModal}>
+ No
+ </Button>
+ <Button variant="filled" onClick={onEnable} type="submit">
+ Yes
+ </Button>
+ </div>
+ </div>
+ </Modal>
+ );
+ },
+);
+
+export default PushNotifModal;

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 22, 7:46 AM (13 h, 27 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690590
Default Alt Text
D6820.diff (2 KB)

Event Timeline