-
Notifications
You must be signed in to change notification settings - Fork 42
Allow notif modal #1520
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
mishramonalisha76
wants to merge
16
commits into
main
Choose a base branch
from
allow-notif-modal
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Allow notif modal #1520
Changes from 2 commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
4f1d065
Enabled browser notif feature again
0xNilesh 994c88e
Updated firebase project details
0xNilesh abaf354
fix: undefined values and removed logs
hrithik73 023d8d7
added config for alpha and localhost
HarshRajat 8abacbe
Merge branch 'main' into refactor/enable-browser-notifs
0xNilesh c6ea170
started building it
mishramonalisha76 f5923c8
added allow notif modal
mishramonalisha76 1855036
fixed the review comments issues
mishramonalisha76 de123fc
added redux
mishramonalisha76 f346a36
fixed conflicts
mishramonalisha76 6039da3
merged with firebase pr
mishramonalisha76 075d5bc
added the firebase function of allow notif
mishramonalisha76 33610eb
fixed getToken
mishramonalisha76 18ab9fe
fixed firebase
mishramonalisha76 7d4355b
debugging the change
mishramonalisha76 d2a560c
debugging
mishramonalisha76 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| // External Packages | ||
| import styled, { useTheme } from 'styled-components'; | ||
|
|
||
| // Internal Components | ||
| import { ButtonV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2'; | ||
|
|
||
| // Internal Configs | ||
| import { device } from 'config/Globals'; | ||
| import { handleBrowserNotification } from 'helpers/channel/allowNotification'; | ||
|
|
||
| interface AllowNotificationModalProps { | ||
| onModalClose: () => {}; | ||
| } | ||
|
|
||
| const AllowNotificationModal: React.FC<AllowNotificationModalProps> = ({ | ||
| onModalClose, | ||
| }: AllowNotificationModalProps) => { | ||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <ModalContainer theme={theme}> | ||
| <ItemVV2 gap="16px"> | ||
| <ItemVV2 | ||
| gap="10px" | ||
| alignItems="start" | ||
| > | ||
| <SpanV2 | ||
| fontSize="20px" | ||
| fontWeight="500" | ||
| color={theme.default.color} | ||
| > | ||
| Allow Notifications | ||
| </SpanV2> | ||
| <SpanV2 | ||
| fontSize="14px" | ||
| fontWeigth="400" | ||
| maxWidth="264px" | ||
| textAlign="left" | ||
| color={theme.default.descriptionTextColor} | ||
| > | ||
| We recommend enabling notifications for receiving updates from subscribed channels for a seamless | ||
| experience. | ||
| </SpanV2> | ||
| </ItemVV2> | ||
| <ItemHV2 | ||
| width="100%" | ||
| justifyContent="space-between" | ||
| > | ||
| <ButtonV2 | ||
| padding="14px 0px" | ||
| background="#D53A94" | ||
| maxWidth="110px" | ||
| color="#fff" | ||
| borderRadius="8px" | ||
| onClick={() => { | ||
| handleBrowserNotification(onModalClose); | ||
| }} | ||
| > | ||
| Allow | ||
| </ButtonV2> | ||
| <ButtonV2 | ||
| padding="14px 0px" | ||
| background={theme.modalContentBackground} | ||
| color={theme.default.descriptionTextColor} | ||
| borderRadius="8px" | ||
| maxWidth="110px" | ||
| hoverBackground="none" | ||
| onClick={() => onModalClose()} | ||
| > | ||
| Skip | ||
| </ButtonV2> | ||
| </ItemHV2> | ||
| </ItemVV2> | ||
| </ModalContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default AllowNotificationModal; | ||
|
|
||
| const ModalContainer = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| right: 20px; | ||
| bottom: 20px; | ||
| position: fixed; | ||
| z-index: 99999999999; | ||
| width: 340px; | ||
| border-radius: 12px; | ||
| border: 1px solid rgba(0, 0, 0, 0.1); | ||
| background: ${(props) => props.theme.modalContentBackground}; | ||
| padding: 16px 20px; | ||
|
|
||
| @media (${device.mobileL}) { | ||
| width: calc(100% - 80px); | ||
| } | ||
| `; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { NOTIF_PERMISSION_STATUS } from './types'; | ||
mishramonalisha76 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| export const handleBrowserNotification = (onSuccess?: () => void) => { | ||
mishramonalisha76 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| if (!('Notification' in window)) { | ||
| alert('This browser does not support desktop notification'); | ||
| } else if (checkPermission() === NOTIF_PERMISSION_STATUS.PENDING) { | ||
| Notification.requestPermission().then(() => { | ||
| onSuccess ? onSuccess() : null; | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| export const checkPermission = () => { | ||
| if (!('Notification' in window)) { | ||
| alert('This browser does not support desktop notification'); | ||
| } else if (Notification.permission === 'granted') { | ||
| return NOTIF_PERMISSION_STATUS.GRANTED; | ||
| } else if (Notification.permission !== 'denied') { | ||
| return NOTIF_PERMISSION_STATUS.PENDING; | ||
| } | ||
| return NOTIF_PERMISSION_STATUS.DENIED; | ||
| }; | ||
mishramonalisha76 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.