-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Web Push prompt template implementation * Handling the optional hover text * added preview flag * Updated the function processWebPushConfig * Updated styles, and prompt api * remove bell icon on notifications allow * added z-index for bell icon * updated the key for bell background color * preview handling * updated gif link and color for close button * preview handling for box and bell prompt * removed payload from tr * Taking swPath as input and code optimisation * Removed unused code and updated package.json and chengelog * Added constants file for push prompt constants * Handled style for prompt button, title and description * Removed opcaity for tooltip * Updated changelog Co-authored-by: Yusuf Khan <154309421+kkyusuftk@users.noreply.github.com>
- Loading branch information
1 parent
345d491
commit bfdd59a
Showing
13 changed files
with
2,496 additions
and
1,714 deletions.
There are no files selected for viewing
This file contains 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
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains 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 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 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 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,251 @@ | ||
| import { getBellIconStyles, getBoxPromptStyles } from './promptStyles.js' | ||
| import { WEBPUSH_CONFIG } from '../../util/constants.js' | ||
| import { StorageManager, $ct } from '../../util/storage.js' | ||
| import NotificationHandler from '../notification.js' | ||
| import { BELL_BASE64, PROMPT_BELL_BASE64 } from './promptConstants.js' | ||
|
|
||
| let appServerKey = null | ||
| let swPath = '/clevertap_sw.js' | ||
| let notificationHandler = null | ||
|
|
||
| export const processWebPushConfig = (webPushConfig, logger, request) => { | ||
| const _pushConfig = StorageManager.readFromLSorCookie(WEBPUSH_CONFIG) || {} | ||
|
|
||
| const updatePushConfig = () => { | ||
| $ct.pushConfig = webPushConfig | ||
| StorageManager.saveToLSorCookie(WEBPUSH_CONFIG, webPushConfig) | ||
| } | ||
|
|
||
| if (webPushConfig.isPreview) { | ||
| updatePushConfig() | ||
| enablePush(logger, null, request) | ||
| } else if (JSON.stringify(_pushConfig) !== JSON.stringify(webPushConfig)) { | ||
| updatePushConfig() | ||
| } | ||
| } | ||
|
|
||
| export const enablePush = (logger, account, request, customSwPath) => { | ||
| const _pushConfig = StorageManager.readFromLSorCookie(WEBPUSH_CONFIG) || {} | ||
| $ct.pushConfig = _pushConfig | ||
| if (!$ct.pushConfig) { | ||
| logger.error('Web Push config data not present') | ||
| return | ||
| } | ||
|
|
||
| if (customSwPath) { swPath = customSwPath } | ||
|
|
||
| notificationHandler = new NotificationHandler({ logger, session: {}, request, account }) | ||
| const { showBox, boxType, showBellIcon, isPreview } = $ct.pushConfig | ||
|
|
||
| if (isPreview) { | ||
| if ($ct.pushConfig.boxConfig) createNotificationBox($ct.pushConfig) | ||
| if ($ct.pushConfig.bellIconConfig) createBellIcon($ct.pushConfig) | ||
| } else { | ||
| if (showBox && boxType === 'new') createNotificationBox($ct.pushConfig) | ||
| if (showBellIcon) createBellIcon($ct.pushConfig) | ||
| } | ||
| } | ||
|
|
||
| const createElementWithAttributes = (tag, attributes = {}) => { | ||
| const element = document.createElement(tag) | ||
| Object.entries(attributes).forEach(([key, value]) => { | ||
| element[key] = value | ||
| }) | ||
| return element | ||
| } | ||
|
|
||
| export const createNotificationBox = (configData) => { | ||
| if (document.getElementById('pnWrapper')) return | ||
|
|
||
| const { boxConfig: { content, style } } = configData | ||
|
|
||
| // Create the wrapper div | ||
| const wrapper = createElementWithAttributes('div', { id: 'pnWrapper' }) | ||
| const overlayDiv = createElementWithAttributes('div', { id: 'pnOverlay' }) | ||
| const pnCard = createElementWithAttributes('div', { id: 'pnCard' }) | ||
|
|
||
| const iconTitleDescWrapper = createElementWithAttributes('div', { id: 'iconTitleDescWrapper' }) | ||
| const iconContainer = createElementWithAttributes('div', { id: 'iconContainer' }) | ||
| const imgElement = createElementWithAttributes('img', { | ||
| id: 'imgElement', | ||
| src: content.icon.type === 'default' ? `data:image/svg+xml;base64,${PROMPT_BELL_BASE64}` : content.icon.url | ||
| }) | ||
|
|
||
| iconContainer.appendChild(imgElement) | ||
| iconTitleDescWrapper.appendChild(iconContainer) | ||
|
|
||
| const titleDescWrapper = createElementWithAttributes('div', { id: 'titleDescWrapper' }) | ||
| titleDescWrapper.appendChild(createElementWithAttributes('div', { id: 'title', textContent: content.title })) | ||
| titleDescWrapper.appendChild(createElementWithAttributes('div', { id: 'description', textContent: content.description })) | ||
|
|
||
| iconTitleDescWrapper.appendChild(titleDescWrapper) | ||
|
|
||
| const buttonsContainer = createElementWithAttributes('div', { id: 'buttonsContainer' }) | ||
|
|
||
| const primaryButton = createElementWithAttributes('button', { | ||
| id: 'primaryButton', | ||
| textContent: content.buttons.primaryButtonText | ||
| }) | ||
| const secondaryButton = createElementWithAttributes('button', { | ||
| id: 'secondaryButton', | ||
| textContent: content.buttons.secondaryButtonText | ||
| }) | ||
| buttonsContainer.appendChild(secondaryButton) | ||
| buttonsContainer.appendChild(primaryButton) | ||
|
|
||
| pnCard.appendChild(iconTitleDescWrapper) | ||
| pnCard.appendChild(buttonsContainer) | ||
|
|
||
| // Apply styles | ||
| const styleElement = createElementWithAttributes('style', { textContent: getBoxPromptStyles(style) }) | ||
|
|
||
| wrapper.appendChild(styleElement) | ||
| wrapper.appendChild(pnCard) | ||
| wrapper.appendChild(overlayDiv) | ||
|
|
||
| setElementPosition(pnCard, style.card.position) | ||
|
|
||
| const now = new Date().getTime() / 1000 | ||
| const lastNotifTime = StorageManager.getMetaProp('webpush_last_notif_time') | ||
| const popupFrequency = content.popupFrequency || 7 * 24 * 60 * 60 | ||
|
|
||
| if (!lastNotifTime || now - lastNotifTime >= popupFrequency * 24 * 60 * 60) { | ||
| document.body.appendChild(wrapper) | ||
| if (!configData.isPreview) { addEventListeners(wrapper) } | ||
| } | ||
| } | ||
|
|
||
| export const createBellIcon = (configData) => { | ||
| if (document.getElementById('bell_wrapper') || Notification.permission === 'granted') return | ||
|
|
||
| const { bellIconConfig: { content, style } } = configData | ||
|
|
||
| const bellWrapper = createElementWithAttributes('div', { id: 'bell_wrapper' }) | ||
| const bellIcon = createElementWithAttributes('img', { | ||
| id: 'bell_icon', | ||
| src: content.icon.type === 'default' ? `data:image/svg+xml;base64,${BELL_BASE64}` : content.icon.url | ||
| }) | ||
|
|
||
| // For playing gif | ||
| const gifModal = createElementWithAttributes('div', { id: 'gif_modal', style: 'display: none;' }) | ||
| const gifImage = createElementWithAttributes('img', { | ||
| id: 'gif_image', | ||
| src: 'https://d2r1yp2w7bby2u.cloudfront.net/js/permission_grant.gif' | ||
| }) | ||
| const closeModal = createElementWithAttributes('div', { id: 'close_modal', innerHTML: '×' }) | ||
|
|
||
| gifModal.appendChild(gifImage) | ||
| gifModal.appendChild(closeModal) | ||
|
|
||
| bellWrapper.appendChild(bellIcon) | ||
| bellWrapper.appendChild(gifModal) | ||
| if (content.hoverText.enabled) { | ||
| const tooltip = createElementWithAttributes('div', { | ||
| id: 'bell_tooltip', | ||
| textContent: content.hoverText.text | ||
| }) | ||
| bellWrapper.appendChild(tooltip) | ||
| } | ||
|
|
||
| setElementPosition(bellWrapper, style.card.position) | ||
| // Apply styles | ||
| const styleElement = createElementWithAttributes('style', { textContent: getBellIconStyles(style) }) | ||
|
|
||
| document.head.appendChild(styleElement) | ||
| document.body.appendChild(bellWrapper) | ||
|
|
||
| if (!configData.isPreview) { | ||
| addBellEventListeners(bellWrapper) | ||
| } | ||
| return bellWrapper | ||
| } | ||
|
|
||
| export const setServerKey = (serverKey) => { | ||
| appServerKey = serverKey | ||
| } | ||
|
|
||
| export const addEventListeners = (wrapper) => { | ||
| const primaryButton = wrapper.querySelector('#primaryButton') | ||
| const secondaryButton = wrapper.querySelector('#secondaryButton') | ||
|
|
||
| const removeWrapper = () => wrapper.parentNode?.removeChild(wrapper) | ||
|
|
||
| primaryButton.addEventListener('click', () => { | ||
| removeWrapper() | ||
| notificationHandler.setApplicationServerKey(appServerKey) | ||
| notificationHandler.setUpWebPushNotifications(null, swPath, null, null) | ||
| }) | ||
|
|
||
| secondaryButton.addEventListener('click', () => { | ||
| StorageManager.setMetaProp('webpush_last_notif_time', Date.now() / 1000) | ||
| removeWrapper() | ||
| }) | ||
| } | ||
|
|
||
| export const addBellEventListeners = (bellWrapper) => { | ||
| const bellIcon = bellWrapper.querySelector('#bell_icon') | ||
| bellIcon.addEventListener('click', () => { | ||
| if (Notification.permission === 'denied') { | ||
| toggleGifModal(bellWrapper) | ||
| } else { | ||
| notificationHandler.setApplicationServerKey(appServerKey) | ||
| notificationHandler.setUpWebPushNotifications(null, swPath, null, null) | ||
| if (Notification.permission === 'granted') { | ||
| bellWrapper.remove() | ||
| } | ||
| } | ||
| }) | ||
| bellIcon.addEventListener('mouseenter', () => displayTooltip(bellWrapper)) | ||
| bellIcon.addEventListener('mouseleave', () => clearTooltip(bellWrapper)) | ||
| bellWrapper.querySelector('#close_modal').addEventListener('click', () => toggleGifModal(bellWrapper)) | ||
| } | ||
|
|
||
| export const setElementPosition = (element, position) => { | ||
| Object.assign(element.style, { | ||
| inset: 'auto', | ||
| transform: 'none' | ||
| }) | ||
|
|
||
| const positions = { | ||
| 'Top Right': { inset: '16px 16px auto auto' }, | ||
| 'Top Left': { inset: '16px auto auto 16px' }, | ||
| 'Bottom Right': { inset: 'auto 16px 16px auto' }, | ||
| 'Bottom Left': { inset: 'auto auto 16px 16px' }, | ||
| Center: { inset: '50%', transform: 'translate(-50%, -50%)' }, | ||
| Top: { inset: '16px auto auto 50%', transform: 'translateX(-50%)' }, | ||
| Bottom: { inset: 'auto auto 16px 50%', transform: 'translateX(-50%)' } | ||
| } | ||
|
|
||
| Object.assign(element.style, positions[position] || positions['top-right']) | ||
| } | ||
|
|
||
| const displayTooltip = (bellWrapper) => { | ||
| const gifModal = bellWrapper.querySelector('#gif_modal') | ||
| if (gifModal.style.display === 'flex') { | ||
| return | ||
| } | ||
| const tooltip = bellWrapper.querySelector('#bell_tooltip') | ||
| if (tooltip) { | ||
| tooltip.style.display = 'flex' | ||
| } | ||
|
|
||
| const bellIcon = bellWrapper.querySelector('#bell_icon') | ||
| const bellRect = bellIcon.getBoundingClientRect() | ||
| var midX = window.innerWidth / 2 | ||
| var midY = window.innerHeight / 2 | ||
| bellWrapper.style['flex-direction'] = bellRect.y > midY ? 'column-reverse' : 'column' | ||
| bellWrapper.style['align-items'] = bellRect.x > midX ? 'flex-end' : 'flex-start' | ||
| } | ||
|
|
||
| const clearTooltip = (bellWrapper) => { | ||
| const tooltip = bellWrapper.querySelector('#bell_tooltip') | ||
| if (tooltip) { | ||
| tooltip.style.display = 'none' | ||
| } | ||
| } | ||
|
|
||
| const toggleGifModal = (bellWrapper) => { | ||
| clearTooltip(bellWrapper) | ||
| const gifModal = bellWrapper.querySelector('#gif_modal') | ||
| gifModal.style.display = gifModal.style.display === 'none' ? 'flex' : 'none' | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.