From 329192134a89e23270239500d4fb1b426df0e1d4 Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Tue, 10 Mar 2026 15:39:31 +0200 Subject: [PATCH 01/34] feat(webapp): add squad notification toast and polish CTA layout Improve notification prompting with a persistent squad page toast flow and refine enable-notification CTA presentation for clearer, inline actions in key contexts. Made-with: Cursor --- .../notifications/EnableNotification.tsx | 139 ++++++++++++++---- .../notifications/NotificationSvg.tsx | 92 ++++++++++++ .../src/components/notifications/Toast.tsx | 57 +++++-- .../src/components/notifications/utils.ts | 4 +- .../src/components/squads/SquadPageHeader.tsx | 7 - .../src/contexts/PushNotificationContext.tsx | 11 +- .../notifications/useEnableNotification.ts | 8 +- .../usePushNotificationMutation.tsx | 21 ++- .../shared/src/hooks/useTimedAnimation.ts | 6 +- .../shared/src/hooks/useToastNotification.ts | 4 +- .../webapp/lib/squadNotificationToastState.ts | 128 ++++++++++++++++ .../webapp/pages/squads/[handle]/index.tsx | 95 +++++++++++- 12 files changed, 508 insertions(+), 64 deletions(-) create mode 100644 packages/shared/src/components/notifications/NotificationSvg.tsx create mode 100644 packages/webapp/lib/squadNotificationToastState.ts diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index 9ab8c0f8ebe..031241784a0 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -12,10 +12,11 @@ import { cloudinaryNotificationsBrowserEnabled, cloudinaryNotificationsBrowser, } from '../../lib/image'; -import { VIcon, BellNotifyIcon } from '../icons'; +import { VIcon, BellIcon, BellNotifyIcon } from '../icons'; import { webappUrl } from '../../lib/constants'; import { NotificationPromptSource } from '../../lib/log'; import { useEnableNotification } from '../../hooks/notifications'; +import { NotificationSvg } from './NotificationSvg'; type EnableNotificationProps = { source?: NotificationPromptSource; @@ -26,8 +27,8 @@ type EnableNotificationProps = { const containerClassName: Record = { [NotificationPromptSource.NotificationsPage]: - 'px-6 w-full border-l bg-surface-float', - [NotificationPromptSource.NewComment]: 'rounded-16 border px-4 mx-3 mb-3', + 'px-6 w-full bg-surface-float', + [NotificationPromptSource.NewComment]: 'rounded-16 px-4 w-full bg-surface-float', [NotificationPromptSource.NewSourceModal]: '', [NotificationPromptSource.NotificationItem]: '', [NotificationPromptSource.SquadPage]: 'rounded-16 border px-4 mt-6', @@ -73,11 +74,10 @@ function EnableNotification({ const sourceToMessage: Record = { [NotificationPromptSource.SquadPostModal]: '', - [NotificationPromptSource.NewComment]: `Want to get notified when ${ - contentName ?? 'someone' - } responds so you can continue the conversation?`, + [NotificationPromptSource.NewComment]: + 'Someone might reply soon. Don’t miss it.', [NotificationPromptSource.NotificationsPage]: - 'Stay in the loop whenever you get a mention, reply and other important updates.', + 'Get notified when someone replies to your posts, mentions you, or when discussions you follow get new activity.', [NotificationPromptSource.NewSourceModal]: '', [NotificationPromptSource.NotificationItem]: '', [NotificationPromptSource.SquadPostCommentary]: '', @@ -90,7 +90,21 @@ function EnableNotification({ const message = sourceToMessage[source]; const classes = containerClassName[source]; const showTextCloseButton = sourceRenderTextCloseButton[source]; + const hideCloseButton = source === NotificationPromptSource.NewComment; const buttonText = sourceToButtonText[source] ?? 'Enable notifications'; + const shouldUseNotificationsPageUi = + source === NotificationPromptSource.NotificationsPage || + source === NotificationPromptSource.NewComment; + const shouldShowNotificationArtwork = + source === NotificationPromptSource.NotificationsPage; + const shouldAnimateBellCta = + source === NotificationPromptSource.NotificationsPage || + source === NotificationPromptSource.NewComment; + const shouldShowInlineNotificationImage = + source !== NotificationPromptSource.NotificationsPage && + source !== NotificationPromptSource.NewComment; + const shouldInlineActionWithMessage = + source === NotificationPromptSource.NewComment && !acceptedJustNow; if (source === NotificationPromptSource.SquadPostModal) { return ( @@ -119,23 +133,43 @@ function EnableNotification({
+ {shouldAnimateBellCta && ( + + )} {source === NotificationPromptSource.NotificationsPage && ( - +

{acceptedJustNow && } - {`Push notifications${ - acceptedJustNow ? ' successfully enabled' : '' - }`} - + Stay in the dev loop +

)} -
+

{acceptedJustNow ? ( @@ -153,28 +187,71 @@ function EnableNotification({ message )}

- + {shouldInlineActionWithMessage && ( + + )} + {shouldShowNotificationArtwork ? ( +
+ {acceptedJustNow ? ( + A sample browser notification + ) : ( + + )} +
+ ) : shouldShowInlineNotificationImage ? ( + + ) : null}
-
- {!acceptedJustNow && ( +
+ {!acceptedJustNow && + !shouldInlineActionWithMessage && ( )}
- {!showTextCloseButton && ( + {!showTextCloseButton && !hideCloseButton && ( + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/shared/src/components/notifications/Toast.tsx b/packages/shared/src/components/notifications/Toast.tsx index 5036834d2f9..efbb5730ceb 100644 --- a/packages/shared/src/components/notifications/Toast.tsx +++ b/packages/shared/src/components/notifications/Toast.tsx @@ -30,7 +30,7 @@ const Toast = ({ }: ToastProps): ReactElement => { const router = useRouter(); const client = useQueryClient(); - const toastRef = useRef(null); + const toastRef = useRef(null); const { timer, isAnimating, endAnimation, startAnimation } = useTimedAnimation({ autoEndAnimation: autoDismissNotifications, @@ -41,21 +41,48 @@ const Toast = ({ queryFn: () => client.getQueryData(TOAST_NOTIF_KEY), enabled: false, }); + const isPersistentToast = !!toast?.persistent; + + useEffect(() => { + if (!toast?.message) { + toastRef.current = null; + return; + } + + if (!toastRef.current) { + toastRef.current = toast; + if (!toast.persistent) { + startAnimation(toast.timer); + } + return; + } + + if (toastRef.current === toast) { + return; + } - if (!toastRef.current && toast?.message) { - toastRef.current = toast; - startAnimation(toast.timer); - } else if (toastRef.current && toastRef.current !== toast && toast?.message) { endAnimation(); toastRef.current = toast; - startAnimation(toast.timer); - } + if (!toast.persistent) { + startAnimation(toast.timer); + } + }, [endAnimation, startAnimation, toast]); - const dismissToast = () => { + const dismissToast = async () => { if (!toast) { return; } + if (toast.onClose) { + await toast.onClose(); + } + + if (toast.persistent) { + toastRef.current = null; + client.setQueryData(TOAST_NOTIF_KEY, null); + return; + } + endAnimation(); }; @@ -65,6 +92,12 @@ const Toast = ({ } await toast.action.onClick(); + if (toast.persistent) { + toastRef.current = null; + client.setQueryData(TOAST_NOTIF_KEY, null); + return; + } + endAnimation(); }; @@ -93,7 +126,7 @@ const Toast = ({ const progress = (timer / toast.timer) * 100; return ( - + {toast.message} {toast.action && ( @@ -102,21 +135,21 @@ const Toast = ({ size={ButtonSize.XSmall} aria-label={toast.action.copy} {...(toast.action.buttonProps ?? {})} - className={classNames('ml-2', toast.action.buttonProps?.className)} + className={classNames('shrink-0', toast.action.buttonProps?.className)} onClick={onAction} > {toast.action.copy} )} ); diff --git a/packages/shared/src/contexts/PushNotificationContext.tsx b/packages/shared/src/contexts/PushNotificationContext.tsx index 5edd35ceddf..e5b0717b85a 100644 --- a/packages/shared/src/contexts/PushNotificationContext.tsx +++ b/packages/shared/src/contexts/PushNotificationContext.tsx @@ -19,7 +19,7 @@ import { } from '../lib/func'; import { useAuthContext } from './AuthContext'; import { generateQueryKey, RequestKey } from '../lib/query'; -import { isDevelopment, isTesting } from '../lib/constants'; +import { isTesting } from '../lib/constants'; import { useLogContext } from './LogContext'; import type { SubscriptionCallback } from '../components/notifications/utils'; import { postWebKitMessage, WebKitMessageHandlers } from '../lib/ios'; @@ -63,7 +63,6 @@ function OneSignalSubProvider({ const subscriptionCallbackRef = useRef(); const isEnabled = !!user && !isTesting; - const forceNotificationsDisabled = isDevelopment; const key = generateQueryKey(RequestKey.OneSignal, user); const client = useQueryClient(); @@ -174,17 +173,13 @@ function OneSignalSubProvider({ value={{ isInitialized: !isEnabled || isFetched || !isSuccess, isLoading, - isSubscribed: forceNotificationsDisabled ? false : isSubscribed, + isSubscribed, isPushSupported: !!(isPushSupported && isSuccess && isEnabled), shouldOpenPopup: () => { - if (forceNotificationsDisabled) { - return false; - } - const { permission } = globalThis.Notification ?? {}; return permission === 'denied'; }, - subscribe: forceNotificationsDisabled ? async () => false : subscribe, + subscribe, unsubscribe, }} > diff --git a/packages/shared/src/hooks/feed/useCardCover.tsx b/packages/shared/src/hooks/feed/useCardCover.tsx index d9362a2b8fb..2a975440781 100644 --- a/packages/shared/src/hooks/feed/useCardCover.tsx +++ b/packages/shared/src/hooks/feed/useCardCover.tsx @@ -65,7 +65,7 @@ export const useCardCover = ({ if (interaction === 'bookmark' || shouldShowReminder) { return ( void; + onEnableNotification: () => Promise; onSubmitted: () => Promise; } @@ -20,6 +23,8 @@ export const useNotificationToggle = ({ const { shouldShowCta, onEnable, onDismiss } = useEnableNotification({ source, }); + const { shouldOpenPopup } = usePushNotificationContext(); + const isBrowserPermissionBlocked = shouldOpenPopup(); const onSubmitted = async () => { if (!shouldShowCta) { @@ -36,6 +41,8 @@ export const useNotificationToggle = ({ isEnabled, onToggle, shouldShowCta, + isBrowserPermissionBlocked, + onEnableNotification: onEnable, onSubmitted, }; }; diff --git a/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx b/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx index 195d2b8b758..d83c88cf0ac 100644 --- a/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx +++ b/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx @@ -13,7 +13,6 @@ import type { NotificationPromptSource } from '../../lib/log'; import { useAuthContext } from '../../contexts/AuthContext'; import { usePushNotificationContext } from '../../contexts/PushNotificationContext'; import { useEventListener } from '../useEventListener'; -import { isDevelopment } from '../../lib/constants'; export const PERMISSION_NOTIFICATION_KEY = 'permission:notification'; @@ -39,7 +38,6 @@ export const usePushNotificationMutation = ({ onPopupGranted, }: UsePushNotificationMutationProps = {}): UsePushNotificationMutation => { const isExtension = checkIsExtension(); - const forceNotificationsDisabled = isDevelopment; const { isSubscribed, shouldOpenPopup, subscribe, unsubscribe } = usePushNotificationContext(); const { user } = useAuthContext(); @@ -79,10 +77,6 @@ export const usePushNotificationMutation = ({ const onEnablePush = useCallback( async (source: NotificationPromptSource): Promise => { - if (forceNotificationsDisabled) { - return false; - } - if (!user) { return false; } @@ -101,7 +95,6 @@ export const usePushNotificationMutation = ({ }, [ user, - forceNotificationsDisabled, shouldOpenPopup, subscribe, onOpenPopup, @@ -140,11 +133,9 @@ export const usePushNotificationMutation = ({ }); return { - hasPermissionCache: forceNotificationsDisabled - ? false - : permissionCache === 'granted', + hasPermissionCache: permissionCache === 'granted', onTogglePermission, - acceptedJustNow: forceNotificationsDisabled ? false : acceptedJustNow, + acceptedJustNow, onEnablePush, }; }; diff --git a/packages/shared/src/hooks/post/usePostActions.spec.tsx b/packages/shared/src/hooks/post/usePostActions.spec.tsx index bf1a749835d..aa59cef8ce6 100644 --- a/packages/shared/src/hooks/post/usePostActions.spec.tsx +++ b/packages/shared/src/hooks/post/usePostActions.spec.tsx @@ -117,7 +117,7 @@ describe('usePostActions', () => { bookmarkButton.click(); expect( - await screen.findByText('Don’t have time now? Set a reminder'), + await screen.findByText('Read it later? Set a reminder.'), ).toBeInTheDocument(); }); @@ -131,7 +131,7 @@ describe('usePostActions', () => { bookmarkBtn.click(); expect( - await screen.findByText('Don’t have time now? Set a reminder'), + await screen.findByText('Read it later? Set a reminder.'), ).toBeInTheDocument(); }); diff --git a/packages/shared/src/hooks/post/useViewPost.ts b/packages/shared/src/hooks/post/useViewPost.ts index 7c9bf2f0188..1380de09569 100644 --- a/packages/shared/src/hooks/post/useViewPost.ts +++ b/packages/shared/src/hooks/post/useViewPost.ts @@ -5,6 +5,7 @@ import { generateQueryKey, RequestKey } from '../../lib/query'; import { useAuthContext } from '../../contexts/AuthContext'; import type { UserStreak } from '../../graphql/users'; import { isSameDayInTimezone } from '../../lib/timezones'; +import type { ApiErrorResult } from '../../graphql/common'; export const useViewPost = (): UseMutateAsyncFunction< unknown, @@ -37,5 +38,20 @@ export const useViewPost = (): UseMutateAsyncFunction< }, }); - return onSendViewPost; + return async (id: string) => { + try { + return await onSendViewPost(id); + } catch (err) { + const error = err as ApiErrorResult & { + response?: { errors?: Array<{ extensions?: { code?: string } }> }; + }; + const errorCode = error?.response?.errors?.[0]?.extensions?.code; + + if (errorCode === 'UNAUTHENTICATED') { + return null; + } + + throw err; + } + }; }; diff --git a/packages/shared/src/hooks/squads/usePostToSquad.tsx b/packages/shared/src/hooks/squads/usePostToSquad.tsx index aa13a55de88..b9cec3d3321 100644 --- a/packages/shared/src/hooks/squads/usePostToSquad.tsx +++ b/packages/shared/src/hooks/squads/usePostToSquad.tsx @@ -26,6 +26,8 @@ import { gqlClient, } from '../../graphql/common'; import { useToastNotification } from '../useToastNotification'; +import type { NotifyOptionalProps } from '../useToastNotification'; +import { ToastSubject } from '../useToastNotification'; import type { SourcePostModeration } from '../../graphql/squads'; import { addPostToSquad, updateSquadPost } from '../../graphql/squads'; import { ActionType } from '../../graphql/actions'; @@ -38,6 +40,15 @@ import { moderationRequired } from '../../components/squads/utils'; import useNotificationSettings from '../notifications/useNotificationSettings'; import { ButtonSize } from '../../components/buttons/common'; import { BellIcon } from '../../components/icons'; +import { + ButtonColor, + ButtonIconPosition, + ButtonVariant, +} from '../../components/buttons/Button'; +import { usePushNotificationContext } from '../../contexts/PushNotificationContext'; +import { usePushNotificationMutation } from '../notifications/usePushNotificationMutation'; +import { NotificationPromptSource } from '../../lib/log'; +import { isDevelopment } from '../../lib/constants'; const PROFILE_COMPLETION_POST_GATE_MESSAGE = 'Complete your profile to create posts'; @@ -79,6 +90,9 @@ interface UsePostToSquadProps { onPostSuccess?: (post: Post, url: string) => void; onSourcePostModerationSuccess?: (data: SourcePostModeration) => void; onExternalLinkSuccess?: (data: ExternalLinkPreview, url: string) => void; + getSharedPostSuccessToast?: (params: { + isUpdate: boolean; + }) => { message: string; options?: NotifyOptionalProps } | undefined; initialPreview?: ExternalLinkPreview; onMutate?: (data: unknown) => void; onError?: (error: ApiErrorResult) => void; @@ -98,11 +112,14 @@ export const usePostToSquad = ({ onError, onExternalLinkSuccess, onSourcePostModerationSuccess, + getSharedPostSuccessToast, initialPreview, }: UsePostToSquadProps = {}): UsePostToSquad => { const { toggleGroup, getGroupStatus } = useNotificationSettings(); const { displayToast } = useToastNotification(); const { user } = useAuthContext(); + const { isSubscribed, shouldOpenPopup } = usePushNotificationContext(); + const { onEnablePush } = usePushNotificationMutation(); const client = useQueryClient(); const { completeAction } = useActions(); const [preview, setPreview] = useState( @@ -110,6 +127,9 @@ export const usePostToSquad = ({ ); const { requestMethod: requestMethodContext } = useRequestProtocol(); const requestMethod = requestMethodContext ?? gqlClient.request; + const forceNotificationQaFlow = isDevelopment; + const shouldShowEnableNotificationToast = + !shouldOpenPopup() && (forceNotificationQaFlow || !isSubscribed); const callOnError = useCallback( (err: unknown): void => { @@ -270,11 +290,32 @@ export const usePostToSquad = ({ ); const onSharedPostSuccessfully = async (update = false) => { - displayToast( - update - ? 'The post has been updated' - : 'This post has been shared to your squad', - ); + const customToast = getSharedPostSuccessToast?.({ isUpdate: update }); + if (customToast) { + displayToast(customToast.message, customToast.options); + } else if (!update && shouldShowEnableNotificationToast) { + displayToast('Post shared. Don’t miss the replies.', { + subject: ToastSubject.Feed, + action: { + copy: 'Turn on', + onClick: async () => + onEnablePush(NotificationPromptSource.SquadPostCommentary), + buttonProps: { + size: ButtonSize.Small, + variant: ButtonVariant.Primary, + color: ButtonColor.Cabbage, + icon: , + iconPosition: ButtonIconPosition.Left, + }, + }, + }); + } else { + displayToast( + update + ? 'The post has been updated' + : 'This post has been shared to your squad', + ); + } await client.invalidateQueries({ queryKey: ['sourceFeed', user?.id], }); diff --git a/packages/shared/src/hooks/useBookmarkPost.ts b/packages/shared/src/hooks/useBookmarkPost.ts index 89ded0e0f73..39efb304132 100644 --- a/packages/shared/src/hooks/useBookmarkPost.ts +++ b/packages/shared/src/hooks/useBookmarkPost.ts @@ -215,7 +215,7 @@ const useBookmarkPost = ({ if (disableToast) { return; } - displayToast(`Bookmarked! Saved to ${list?.name ?? 'Quick saves'}`, { + displayToast(`Bookmarked to ${list?.name ?? 'Quick saves'}`, { action: { copy: 'Change folder', onClick: () => { From f19b1cc0071d42813cf79e6c585dfb60c3c9dab1 Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Tue, 10 Mar 2026 22:29:31 +0200 Subject: [PATCH 03/34] fix(webapp): restore production-like appearance and feed sizing behavior Re-enable density controls and classic feed card spacing behavior so staging matches the production appearance settings and card layout defaults. Made-with: Cursor --- packages/shared/src/components/Feed.tsx | 8 +-- .../src/components/feeds/FeedContainer.tsx | 15 ++-- .../shared/src/hooks/feed/useCardCover.tsx | 2 +- .../src/hooks/post/usePostActions.spec.tsx | 4 +- packages/webapp/pages/settings/appearance.tsx | 68 ++++++++----------- 5 files changed, 38 insertions(+), 59 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index e20707e1d55..c0a2f9a4e41 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -60,7 +60,6 @@ import { FeedCardContext } from '../features/posts/FeedCardContext'; import { briefCardFeedFeature, briefFeedEntrypointPage, - featureFeedLayoutV2, } from '../lib/featureManagement'; import type { AwardProps } from '../graphql/njord'; import { getProductsQueryOptions } from '../graphql/njord'; @@ -199,13 +198,8 @@ export default function Feed({ const { user } = useContext(AuthContext); const { isFallback, query: routerQuery } = useRouter(); const { openNewTab, spaciness, loadedSettings } = useContext(SettingsContext); - const { value: isFeedLayoutV2 } = useConditionalFeature({ - feature: featureFeedLayoutV2, - }); const { isListMode, shouldUseListFeedLayout } = useFeedLayout(); - const effectiveSpaciness: Spaciness = isFeedLayoutV2 - ? 'eco' - : spaciness ?? 'eco'; + const effectiveSpaciness: Spaciness = spaciness ?? 'eco'; const numCards = currentSettings.numCards[effectiveSpaciness]; const isSquadFeed = feedName === OtherFeedPage.Squad; const trackedFeedFinish = useRef(false); diff --git a/packages/shared/src/components/feeds/FeedContainer.tsx b/packages/shared/src/components/feeds/FeedContainer.tsx index 424773f6a65..3380363c2aa 100644 --- a/packages/shared/src/components/feeds/FeedContainer.tsx +++ b/packages/shared/src/components/feeds/FeedContainer.tsx @@ -8,7 +8,6 @@ import FeedContext from '../../contexts/FeedContext'; import styles from '../Feed.module.css'; import type { FeedPagesWithMobileLayoutType } from '../../hooks'; import { - useConditionalFeature, useFeedLayout, ToastSubject, useToastNotification, @@ -17,7 +16,6 @@ import { useFeeds, useBoot, } from '../../hooks'; -import { featureFeedLayoutV2 } from '../../lib/featureManagement'; import ConditionalWrapper from '../ConditionalWrapper'; import { useActiveFeedNameContext } from '../../contexts'; import { SharedFeedPage } from '../utilities'; @@ -166,9 +164,6 @@ export const FeedContainer = ({ const currentSettings = useContext(FeedContext); const { subject } = useToastNotification(); const { spaciness, loadedSettings } = useContext(SettingsContext); - const { value: isFeedLayoutV2 } = useConditionalFeature({ - feature: featureFeedLayoutV2, - }); const { shouldUseListFeedLayout, isListMode } = useFeedLayout(); const isLaptop = useViewSize(ViewSize.Laptop); const { feedName } = useActiveFeedNameContext(); @@ -176,15 +171,13 @@ export const FeedContainer = ({ feedName, }); const router = useRouter(); - const effectiveSpaciness: Spaciness = isFeedLayoutV2 - ? 'eco' - : spaciness ?? 'eco'; + const effectiveSpaciness: Spaciness = spaciness ?? 'eco'; const numCards = currentSettings.numCards[effectiveSpaciness]; const isList = (isHorizontal || isListMode) && !shouldUseListFeedLayout ? false : (isListMode && numCards > 1) || shouldUseListFeedLayout; - const v2GridGap = isFeedLayoutV2 ? 'gap-4' : undefined; + const v2GridGap = undefined; const feedGapPx = getFeedGapPx[ gapClass({ @@ -248,7 +241,7 @@ export const FeedContainer = ({
@@ -290,7 +283,7 @@ export const FeedContainer = ({ className={classNames( 'relative mx-auto w-full', styles.feed, - !isList && (isFeedLayoutV2 ? styles.cardsV2 : styles.cards), + !isList && styles.cards, )} style={cardContainerStyle} aria-live={subject === ToastSubject.Feed ? 'assertive' : 'off'} diff --git a/packages/shared/src/hooks/feed/useCardCover.tsx b/packages/shared/src/hooks/feed/useCardCover.tsx index 2a975440781..d9362a2b8fb 100644 --- a/packages/shared/src/hooks/feed/useCardCover.tsx +++ b/packages/shared/src/hooks/feed/useCardCover.tsx @@ -65,7 +65,7 @@ export const useCardCover = ({ if (interaction === 'bookmark' || shouldShowReminder) { return ( { bookmarkButton.click(); expect( - await screen.findByText('Read it later? Set a reminder.'), + await screen.findByText('Don’t have time now? Set a reminder'), ).toBeInTheDocument(); }); @@ -131,7 +131,7 @@ describe('usePostActions', () => { bookmarkBtn.click(); expect( - await screen.findByText('Read it later? Set a reminder.'), + await screen.findByText('Don’t have time now? Set a reminder'), ).toBeInTheDocument(); }); diff --git a/packages/webapp/pages/settings/appearance.tsx b/packages/webapp/pages/settings/appearance.tsx index 82eac71f51f..b51b16a42ab 100644 --- a/packages/webapp/pages/settings/appearance.tsx +++ b/packages/webapp/pages/settings/appearance.tsx @@ -8,7 +8,6 @@ import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsCon import { useViewSize, ViewSize, - useConditionalFeature, } from '@dailydotdev/shared/src/hooks'; import { Typography, @@ -27,7 +26,6 @@ import { import classNames from 'classnames'; import { FlexCol } from '@dailydotdev/shared/src/components/utilities'; import { iOSSupportsAppIconChange } from '@dailydotdev/shared/src/lib/ios'; -import { featureFeedLayoutV2 } from '@dailydotdev/shared/src/lib/featureManagement'; import { AccountPageContainer } from '../../components/layouts/SettingsLayout/AccountPageContainer'; import { getSettingsLayout } from '../../components/layouts/SettingsLayout'; import { defaultSeo } from '../../next-seo'; @@ -69,10 +67,6 @@ const AccountManageSubscriptionPage = (): ReactElement => { toggleAutoDismissNotifications, } = useSettingsContext(); - const { value: isFeedLayoutV2 } = useConditionalFeature({ - feature: featureFeedLayoutV2, - }); - const onLayoutToggle = useCallback( async (enabled: boolean) => { logEvent({ @@ -112,39 +106,37 @@ const AccountManageSubscriptionPage = (): ReactElement => { )} - {!isFeedLayoutV2 && ( - - - Density - + + + Density + - {insaneMode && ( - - Not available in list layout - - )} - - - - )} + {insaneMode && ( + + Not available in list layout + + )} + + + {supportsAppIconChange && } From 3ddf86e675045791a5f35daf30b2888e1d4c079b Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Thu, 12 Mar 2026 13:42:58 +0200 Subject: [PATCH 04/34] fix(shared): reuse source-follow notification bubble in streak recovery modal Reuse the existing source-subscribe notification CTA in the streak recovery reminder so this surface stays visually and behaviorally consistent with the follow-source flow. Made-with: Cursor --- .../modals/streaks/StreakRecoverModal.tsx | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx index fd86d83df99..a5e1bebfd95 100644 --- a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx +++ b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx @@ -25,6 +25,8 @@ import type { UserStreakRecoverData } from '../../../graphql/users'; import { CoreIcon } from '../../icons'; import { coresDocsLink } from '../../../lib/constants'; import { anchorDefaultRel } from '../../../lib/strings'; +import { NotificationPromptSource } from '../../../lib/log'; +import EnableNotification from '../../notifications/EnableNotification'; export interface StreakRecoverModalProps extends Pick { @@ -158,6 +160,13 @@ export const StreakRecoverOptout = ({
); +const StreakRecoverNotificationReminder = () => ( + +); + export const StreakRecoverModal = ( props: StreakRecoverModalProps, ): ReactElement => { @@ -170,6 +179,46 @@ export const StreakRecoverModal = ( onRequestClose, }); + // TODO(debug): force-open for preview — remove before merging + const mockRecover: UserStreakRecoverData = { + canRecover: true, + cost: 0, + oldStreakLength: 14, + regularCost: 100, + }; + + return ( + + + +
+ + + + + {} }} + /> +
+ + + + ); + + /* Original guarded version — restore when done previewing: if (!user || !isStreaksEnabled || !recover.canRecover || recover.isLoading) { return null; } @@ -198,9 +247,11 @@ export const StreakRecoverModal = ( />
+ ); + */ }; export default StreakRecoverModal; From 3b06e1cfe34f6d2467be8b31241ce23afa95884d Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Thu, 12 Mar 2026 14:43:38 +0200 Subject: [PATCH 05/34] feat(shared): add contextual notification prompts for engagement actions Surface notification opt-in CTAs after tag follows and comment upvotes, while tightening related post view/navigation and streak/squad notification behaviors for a smoother engagement flow. Made-with: Cursor --- .../cards/entity/SourceEntityCard.tsx | 76 ++++++++- .../comments/CommentActionButtons.tsx | 30 +++- .../src/components/comments/CommentBox.tsx | 2 + .../src/components/comments/MainComment.tsx | 86 ++++++++-- .../src/components/comments/SubComment.tsx | 44 +++++ .../modals/streaks/StreakRecoverModal.tsx | 89 +++++++--- .../notifications/EnableNotification.tsx | 161 ++++++++++++------ .../src/components/post/PostComments.tsx | 6 + .../src/components/post/PostEngagements.tsx | 8 + .../src/components/post/tags/PostTagList.tsx | 66 +++++-- .../src/hooks/feed/useFollowPostTags.ts | 3 +- .../notifications/useEnableNotification.ts | 55 +++++- packages/shared/src/hooks/post/useViewPost.ts | 38 +++-- .../src/hooks/streaks/useStreakRecover.ts | 17 +- .../src/hooks/usePostModalNavigation.ts | 32 +++- packages/shared/src/lib/log.ts | 2 + .../webapp/lib/squadNotificationToastState.ts | 10 ++ packages/webapp/pages/tags/[tag].tsx | 26 ++- 18 files changed, 598 insertions(+), 153 deletions(-) diff --git a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx index 79a24239108..8454b151ac8 100644 --- a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef, useState } from 'react'; import Link from '../../utilities/Link'; import EntityCard from './EntityCard'; import { @@ -10,14 +10,24 @@ import { import type { SourceTooltip } from '../../../graphql/sources'; import { largeNumberFormat } from '../../../lib'; import CustomFeedOptionsMenu from '../../CustomFeedOptionsMenu'; -import { ButtonVariant } from '../../buttons/Button'; +import { + Button, + ButtonColor, + ButtonSize, + ButtonVariant, +} from '../../buttons/Button'; import { Separator } from '../common/common'; import EntityDescription from './EntityDescription'; import useSourceMenuProps from '../../../hooks/useSourceMenuProps'; -import { ContentPreferenceType } from '../../../graphql/contentPreference'; +import { + ContentPreferenceStatus, + ContentPreferenceType, +} from '../../../graphql/contentPreference'; import useShowFollowAction from '../../../hooks/useShowFollowAction'; import { FollowButton } from '../../contentPreference/FollowButton'; import { useContentPreferenceStatusQuery } from '../../../hooks/contentPreference/useContentPreferenceStatusQuery'; +import { useSourceActionsNotify } from '../../../hooks/source/useSourceActionsNotify'; +import { BellIcon } from '../../icons'; type SourceEntityCardProps = { source?: SourceTooltip; @@ -36,10 +46,39 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { id: source?.id, entity: ContentPreferenceType.Source, }); + const [showNotificationCta, setShowNotificationCta] = useState(false); + const prevStatusRef = useRef(contentPreference?.status); const menuProps = useSourceMenuProps({ source }); + const { haveNotificationsOn, onNotify } = useSourceActionsNotify({ + source, + }); const { description, membersCount, flags, name, image, permalink } = source || {}; + + const currentStatus = contentPreference?.status; + const isNowFollowing = + currentStatus === ContentPreferenceStatus.Follow || + currentStatus === ContentPreferenceStatus.Subscribed; + const wasFollowing = + prevStatusRef.current === ContentPreferenceStatus.Follow || + prevStatusRef.current === ContentPreferenceStatus.Subscribed; + + if (currentStatus !== prevStatusRef.current) { + prevStatusRef.current = currentStatus; + + if (isNowFollowing && !wasFollowing) { + setShowNotificationCta(true); + } else if (!isNowFollowing && wasFollowing) { + setShowNotificationCta(false); + } + } + + const handleTurnOn = async () => { + await onNotify(); + setShowNotificationCta(false); + }; + return ( { {largeNumberFormat(flags?.totalUpvotes) || 0} Upvotes
+ {showNotificationCta && !haveNotificationsOn && ( +
+ + Get notified about new posts + + + +
+ )}
); diff --git a/packages/shared/src/components/comments/CommentActionButtons.tsx b/packages/shared/src/components/comments/CommentActionButtons.tsx index 90824582e14..f622b908c9a 100644 --- a/packages/shared/src/components/comments/CommentActionButtons.tsx +++ b/packages/shared/src/components/comments/CommentActionButtons.tsx @@ -66,6 +66,7 @@ export interface CommentActionProps { onDelete: (comment: Comment, parentId: string | null) => void; onEdit: (comment: Comment, parentComment?: Comment) => void; onShowUpvotes: (commentId: string, upvotes: number) => void; + onUpvote?: (comment: Comment) => void; } export interface Props extends CommentActionProps { @@ -90,6 +91,7 @@ export default function CommentActionButtons({ onDelete, onEdit, onShowUpvotes, + onUpvote, }: Props): ReactElement { const isMobileSmall = useViewSize(ViewSize.MobileXL); const { isLoggedIn, user, showLogin } = useAuthContext(); @@ -330,14 +332,26 @@ export default function CommentActionButtons({ id={`comment-${comment.id}-upvote-btn`} size={ButtonSize.Small} pressed={voteState.userState?.vote === UserVote.Up} - onClick={() => { - toggleUpvote({ - payload: { - ...voteState, - post, - }, - origin, - }); + onClick={async () => { + const isRemovingUpvote = voteState.userState?.vote === UserVote.Up; + const shouldShowUpvoteNotification = + !isRemovingUpvote && !!user && !!onUpvote; + + if (shouldShowUpvoteNotification) { + onUpvote(comment); + } + + try { + await toggleUpvote({ + payload: { + ...voteState, + post, + }, + origin, + }); + } catch { + // Ignore upvote callback side effects when mutation fails. + } }} icon={ diff --git a/packages/shared/src/components/comments/CommentBox.tsx b/packages/shared/src/components/comments/CommentBox.tsx index 22955b09ceb..60da97e311c 100644 --- a/packages/shared/src/components/comments/CommentBox.tsx +++ b/packages/shared/src/components/comments/CommentBox.tsx @@ -29,6 +29,7 @@ function CommentBox({ onDelete, onEdit, onShowUpvotes, + onUpvote, isModalThread = false, threadRepliesControl, children, @@ -65,6 +66,7 @@ function CommentBox({ onDelete={onDelete} onEdit={onEdit} onShowUpvotes={onShowUpvotes} + onUpvote={onUpvote} isModalThread={isModalThread} threadRepliesControl={threadRepliesControl} className={ diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index b934ae04afe..e458ccf0779 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -14,6 +14,7 @@ import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentM import { useComments } from '../../hooks/post'; import { SquadCommentJoinBanner } from '../squads/SquadCommentJoinBanner'; import type { Squad } from '../../graphql/sources'; +import { SourceType } from '../../graphql/sources'; import type { Comment } from '../../graphql/comments'; import { DiscussIcon, ThreadIcon } from '../icons'; import usePersistentContext from '../../hooks/usePersistentContext'; @@ -21,6 +22,8 @@ import { SQUAD_COMMENT_JOIN_BANNER_KEY } from '../../graphql/squads'; import { useEditCommentProps } from '../../hooks/post/useEditCommentProps'; import { useLogContext } from '../../contexts/LogContext'; import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { useNotificationPreference } from '../../hooks/notifications'; +import { NotificationType } from '../notifications/utils'; const CommentInputOrModal = dynamic( () => @@ -38,6 +41,7 @@ export interface MainCommentProps extends Omit { permissionNotificationCommentId?: string; joinNotificationCommentId?: string; + upvoteNotificationCommentId?: string; onCommented: CommentMarkdownInputProps['onCommented']; className?: ClassName; lazy?: boolean; @@ -59,6 +63,7 @@ export default function MainComment({ appendTooltipTo, permissionNotificationCommentId, joinNotificationCommentId, + upvoteNotificationCommentId, onCommented, lazy = false, logImpression, @@ -72,6 +77,8 @@ export default function MainComment({ () => shouldShowBannerOnComment(permissionNotificationCommentId, comment), [permissionNotificationCommentId, comment], ); + const showUpvoteNotificationPermissionBanner = + upvoteNotificationCommentId === comment.id; const [isJoinSquadBannerDismissed] = usePersistentContext( SQUAD_COMMENT_JOIN_BANNER_KEY, @@ -84,6 +91,22 @@ export default function MainComment({ ) && !props.post.source?.currentMember && !isJoinSquadBannerDismissed; + const replyNotificationType = + props.post.source?.type === SourceType.Squad + ? NotificationType.SquadReply + : NotificationType.CommentReply; + const { subscribeNotification } = useNotificationPreference({ params: [] }); + + const onEnableUpvoteNotification = async () => { + if (!upvoteNotificationCommentId) { + return; + } + + await subscribeNotification({ + type: replyNotificationType, + referenceId: upvoteNotificationCommentId, + }); + }; const { commentId, @@ -102,6 +125,10 @@ export default function MainComment({ const [areRepliesExpanded, setAreRepliesExpanded] = useState(true); const showThreadRepliesToggle = isModalThread && replyCount > 0; + const showUpvoteCtaInReplyFlow = + showUpvoteNotificationPermissionBanner && isModalThread && replyCount > 0; + const shouldRenderStandaloneUpvoteCta = + showUpvoteNotificationPermissionBanner && !showUpvoteCtaInReplyFlow; const onClick = () => { if (!logClick && !props.linkToComment) { @@ -218,6 +245,45 @@ export default function MainComment({ /> )} + {showJoinSquadBanner && ( + + )} + {shouldRenderStandaloneUpvoteCta && ( + + )} + {!showJoinSquadBanner && showNotificationPermissionBanner && ( + + )} + {showUpvoteCtaInReplyFlow && ( +
+
+ +
+ )} {inView && replyCount > 0 && !areRepliesExpanded && ( ))}
)} - {showJoinSquadBanner && ( - - )} - {!showJoinSquadBanner && showNotificationPermissionBanner && ( - - )} ); } diff --git a/packages/shared/src/components/comments/SubComment.tsx b/packages/shared/src/components/comments/SubComment.tsx index a50a96d1fd4..823edec7610 100644 --- a/packages/shared/src/components/comments/SubComment.tsx +++ b/packages/shared/src/components/comments/SubComment.tsx @@ -8,6 +8,12 @@ import CommentBox from './CommentBox'; import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentMarkdownInput'; import { useComments } from '../../hooks/post'; import { useEditCommentProps } from '../../hooks/post/useEditCommentProps'; +import EnableNotification from '../notifications/EnableNotification'; +import { NotificationPromptSource } from '../../lib/log'; +import { useAuthContext } from '../../contexts/AuthContext'; +import { SourceType } from '../../graphql/sources'; +import { useNotificationPreference } from '../../hooks/notifications'; +import { NotificationType } from '../notifications/utils'; const CommentInputOrModal = dynamic( () => @@ -19,6 +25,7 @@ const CommentInputOrModal = dynamic( export interface SubCommentProps extends Omit { parentComment: Comment; + upvoteNotificationCommentId?: string; onCommented: CommentMarkdownInputProps['onCommented']; isModalThread?: boolean; isFirst?: boolean; @@ -29,6 +36,7 @@ export interface SubCommentProps function SubComment({ comment, parentComment, + upvoteNotificationCommentId, className, onCommented, isModalThread = false, @@ -37,8 +45,27 @@ function SubComment({ extendTopConnector = false, ...props }: SubCommentProps): ReactElement { + const { user } = useAuthContext(); const { inputProps, commentId, onReplyTo } = useComments(props.post); const { inputProps: editProps, onEdit } = useEditCommentProps(); + const showUpvoteNotificationPermissionBanner = + upvoteNotificationCommentId === comment.id; + const replyNotificationType = + props.post.source?.type === SourceType.Squad + ? NotificationType.SquadReply + : NotificationType.CommentReply; + const { subscribeNotification } = useNotificationPreference({ params: [] }); + + const onEnableUpvoteNotification = async () => { + if (!upvoteNotificationCommentId) { + return; + } + + await subscribeNotification({ + type: replyNotificationType, + referenceId: upvoteNotificationCommentId, + }); + }; return ( <> @@ -133,6 +160,23 @@ function SubComment({ /> )} + {showUpvoteNotificationPermissionBanner && ( +
+ {isModalThread && !isLast && ( + // Keep modal-thread connector continuous when CTA is inserted + // between reply items. +
+ )} + +
+ )} ); } diff --git a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx index a5e1bebfd95..df83284d908 100644 --- a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx +++ b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx @@ -12,7 +12,12 @@ import { TypographyType, } from '../../typography/Typography'; import type { ButtonProps } from '../../buttons/Button'; -import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; +import { + Button, + ButtonColor, + ButtonSize, + ButtonVariant, +} from '../../buttons/Button'; import type { UseStreakRecoverReturn } from '../../../hooks/streaks/useStreakRecover'; import { useStreakRecover } from '../../../hooks/streaks/useStreakRecover'; import { Checkbox } from '../../fields/Checkbox'; @@ -26,7 +31,8 @@ import { CoreIcon } from '../../icons'; import { coresDocsLink } from '../../../lib/constants'; import { anchorDefaultRel } from '../../../lib/strings'; import { NotificationPromptSource } from '../../../lib/log'; -import EnableNotification from '../../notifications/EnableNotification'; +import { useEnableNotification } from '../../../hooks/notifications'; +import { BellIcon } from '../../icons'; export interface StreakRecoverModalProps extends Pick { @@ -133,14 +139,17 @@ const StreakRecoverButton = ({ export const StreakRecoverOptout = ({ hideForever, id, + className, }: { id: string; + className?: string; } & Pick): ReactElement => ( -
+
- Never show this again + Hide this
); -const StreakRecoverNotificationReminder = () => ( - -); +const StreakRecoverNotificationReminder = () => { + const { shouldShowCta, onEnable } = useEnableNotification({ + source: NotificationPromptSource.SourceSubscribe, + }); + + if (!shouldShowCta) { + return null; + } + + return ( +
+ + Never lose your streak again. + + + +
+ ); +}; export const StreakRecoverModal = ( props: StreakRecoverModalProps, @@ -200,7 +246,12 @@ export const StreakRecoverModal = ( title="Close streak recover popup" /> -
+ {} }} + /> +
@@ -208,10 +259,6 @@ export const StreakRecoverModal = ( onClick={onRequestClose} recover={mockRecover} /> - {} }} - />
@@ -236,7 +283,12 @@ export const StreakRecoverModal = ( title="Close streak recover popup" /> -
+ +
@@ -245,7 +297,6 @@ export const StreakRecoverModal = ( recover={recover} loading={recover.isRecoverPending} /> -
diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index 9fe6f115101..bb0e1e9ed35 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -23,12 +23,17 @@ type EnableNotificationProps = { contentName?: string; className?: string; label?: string; + onEnableAction?: () => Promise | unknown; }; const containerClassName: Record = { - [NotificationPromptSource.NotificationsPage]: - 'px-6 w-full bg-surface-float', - [NotificationPromptSource.NewComment]: 'rounded-16 px-4 w-full bg-surface-float', + [NotificationPromptSource.NotificationsPage]: 'px-6 w-full bg-surface-float', + [NotificationPromptSource.NewComment]: + 'rounded-16 px-4 w-full bg-surface-float', + [NotificationPromptSource.CommentUpvote]: + 'ml-[3.25rem] w-[calc(100%-3.25rem)] rounded-16 px-4 bg-surface-float', + [NotificationPromptSource.PostTagFollow]: + 'rounded-16 px-4 w-full bg-surface-float', [NotificationPromptSource.NewSourceModal]: '', [NotificationPromptSource.NotificationItem]: '', [NotificationPromptSource.SquadPage]: 'rounded-16 border px-4 mt-6', @@ -43,6 +48,8 @@ const containerClassName: Record = { const sourceRenderTextCloseButton: Record = { [NotificationPromptSource.NotificationsPage]: false, [NotificationPromptSource.NewComment]: false, + [NotificationPromptSource.CommentUpvote]: false, + [NotificationPromptSource.PostTagFollow]: false, [NotificationPromptSource.NewSourceModal]: false, [NotificationPromptSource.SquadPage]: true, [NotificationPromptSource.SquadPostCommentary]: false, @@ -57,6 +64,7 @@ const sourceRenderTextCloseButton: Record = { const sourceToButtonText: Partial> = { [NotificationPromptSource.SquadPostModal]: 'Subscribe', [NotificationPromptSource.SourceSubscribe]: 'Enable', + [NotificationPromptSource.CommentUpvote]: 'Turn on', }; function EnableNotification({ @@ -64,6 +72,7 @@ function EnableNotification({ contentName, className, label, + onEnableAction, }: EnableNotificationProps): ReactElement | null { const { shouldShowCta, acceptedJustNow, onEnable, onDismiss } = useEnableNotification({ source }); @@ -76,6 +85,9 @@ function EnableNotification({ [NotificationPromptSource.SquadPostModal]: '', [NotificationPromptSource.NewComment]: 'Someone might reply soon. Don’t miss it.', + [NotificationPromptSource.CommentUpvote]: + 'Get notified when someone replies to this comment.', + [NotificationPromptSource.PostTagFollow]: `Get notified when new #${contentName} stories are posted.`, [NotificationPromptSource.NotificationsPage]: 'Get notified when someone replies to your posts, mentions you, or when discussions you follow get new activity.', [NotificationPromptSource.NewSourceModal]: '', @@ -90,21 +102,74 @@ function EnableNotification({ const message = sourceToMessage[source]; const classes = containerClassName[source]; const showTextCloseButton = sourceRenderTextCloseButton[source]; - const hideCloseButton = source === NotificationPromptSource.NewComment; + const hideCloseButton = + source === NotificationPromptSource.NewComment || + source === NotificationPromptSource.CommentUpvote || + source === NotificationPromptSource.PostTagFollow; const buttonText = sourceToButtonText[source] ?? 'Enable notifications'; - const shouldUseNotificationsPageUi = - source === NotificationPromptSource.NotificationsPage || - source === NotificationPromptSource.NewComment; const shouldShowNotificationArtwork = source === NotificationPromptSource.NotificationsPage; const shouldAnimateBellCta = source === NotificationPromptSource.NotificationsPage || - source === NotificationPromptSource.NewComment; + source === NotificationPromptSource.NewComment || + source === NotificationPromptSource.CommentUpvote || + source === NotificationPromptSource.PostTagFollow; const shouldShowInlineNotificationImage = source !== NotificationPromptSource.NotificationsPage && - source !== NotificationPromptSource.NewComment; + source !== NotificationPromptSource.NewComment && + source !== NotificationPromptSource.CommentUpvote && + source !== NotificationPromptSource.PostTagFollow; const shouldInlineActionWithMessage = - source === NotificationPromptSource.NewComment && !acceptedJustNow; + (source === NotificationPromptSource.NewComment || + source === NotificationPromptSource.CommentUpvote || + source === NotificationPromptSource.PostTagFollow) && + !acceptedJustNow; + const handleEnable = async () => { + const actions = [onEnable()]; + + if (onEnableAction) { + actions.push(Promise.resolve(onEnableAction())); + } + + await Promise.allSettled(actions); + }; + const notificationVisual = (() => { + if (shouldShowNotificationArtwork) { + return ( +
+ {acceptedJustNow ? ( + A sample browser notification + ) : ( + + )} +
+ ); + } + + if (!shouldShowInlineNotificationImage) { + return null; + } + + return ( + + ); + })(); if (source === NotificationPromptSource.SquadPostModal) { return ( @@ -120,7 +185,7 @@ function EnableNotification({ className="ml-auto mr-14" variant={ButtonVariant.Secondary} size={ButtonSize.XSmall} - onClick={onEnable} + onClick={handleEnable} > {buttonText} @@ -133,7 +198,10 @@ function EnableNotification({

@@ -199,61 +277,44 @@ function EnableNotification({ ) : undefined } - onClick={onEnable} + onClick={handleEnable} > {buttonText} )} - {shouldShowNotificationArtwork ? ( -

- {acceptedJustNow ? ( - A sample browser notification - ) : ( - - )} -
- ) : shouldShowInlineNotificationImage ? ( - - ) : null} + {notificationVisual}
- {!acceptedJustNow && - !shouldInlineActionWithMessage && ( + {!acceptedJustNow && !shouldInlineActionWithMessage && ( diff --git a/packages/shared/src/components/post/PostComments.tsx b/packages/shared/src/components/post/PostComments.tsx index 09063b79bac..b59895ce339 100644 --- a/packages/shared/src/components/post/PostComments.tsx +++ b/packages/shared/src/components/post/PostComments.tsx @@ -38,9 +38,11 @@ interface PostCommentsProps { isComposerOpen?: boolean; permissionNotificationCommentId?: string; joinNotificationCommentId?: string; + upvoteNotificationCommentId?: string; modalParentSelector?: () => HTMLElement; onShare?: (comment: Comment) => void; onClickUpvote?: (commentId: string, upvotes: number) => unknown; + onCommentUpvoted?: (comment: Comment) => void; className?: CommentClassName; onCommented?: MainCommentProps['onCommented']; } @@ -52,9 +54,11 @@ export function PostComments({ isComposerOpen = false, onShare, onClickUpvote, + onCommentUpvoted, modalParentSelector, permissionNotificationCommentId, joinNotificationCommentId, + upvoteNotificationCommentId, className = {}, onCommented, }: PostCommentsProps): ReactElement { @@ -138,7 +142,9 @@ export function PostComments({ appendTooltipTo={modalParentSelector ?? (() => container?.current)} permissionNotificationCommentId={permissionNotificationCommentId} joinNotificationCommentId={joinNotificationCommentId} + upvoteNotificationCommentId={upvoteNotificationCommentId} onCommented={onCommented} + onUpvote={onCommentUpvoted} lazy={!commentHash && index >= lazyCommentThreshold} /> ))} diff --git a/packages/shared/src/components/post/PostEngagements.tsx b/packages/shared/src/components/post/PostEngagements.tsx index b3797e253c2..34fb5e00893 100644 --- a/packages/shared/src/components/post/PostEngagements.tsx +++ b/packages/shared/src/components/post/PostEngagements.tsx @@ -69,6 +69,8 @@ function PostEngagements({ useState(); const [joinNotificationCommentId, setJoinNotificationCommentId] = useState(); + const [upvoteNotificationCommentId, setUpvoteNotificationCommentId] = + useState(); const [isComposerOpen, setIsComposerOpen] = useState(false); const { onShowUpvoted } = useUpvoteQuery(); const { openShareComment } = useShareComment(logOrigin); @@ -103,6 +105,10 @@ function PostEngagements({ } }; + const onCommentUpvoted = (comment: Comment) => { + setUpvoteNotificationCommentId(comment.id); + }; + useEffect(() => { if (shouldOnboardAuthor) { setAuthorOnboarding(true); @@ -171,7 +177,9 @@ function PostEngagements({ onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')} permissionNotificationCommentId={permissionNotificationCommentId} joinNotificationCommentId={joinNotificationCommentId} + upvoteNotificationCommentId={upvoteNotificationCommentId} onCommented={onCommented} + onCommentUpvoted={onCommentUpvoted} /> {authorOnboarding && ( void; + onFollow?: (tag: string) => BooleanPromise; tag: string; } @@ -51,6 +54,12 @@ const PostTagItem = ({ onFollow, tag, }: PostTagItemProps): ReactElement => { + const handleFollowClick = (event: MouseEvent): void => { + event.preventDefault(); + event.stopPropagation(); + onFollow?.(tag); + }; + if (isFollowed) { return ( @@ -81,8 +90,9 @@ const PostTagItem = ({
); }; diff --git a/packages/shared/src/hooks/feed/useFollowPostTags.ts b/packages/shared/src/hooks/feed/useFollowPostTags.ts index 825bb4c62fa..a8338f1273b 100644 --- a/packages/shared/src/hooks/feed/useFollowPostTags.ts +++ b/packages/shared/src/hooks/feed/useFollowPostTags.ts @@ -5,13 +5,14 @@ import useTagAndSource from '../useTagAndSource'; import { Origin } from '../../lib/log'; import { useAuthContext } from '../../contexts/AuthContext'; import { useCustomFeed } from './useCustomFeed'; +import type { BooleanPromise } from '../../lib/func'; interface UseFollowPostTagsProps { post: Post; } interface UseFollowPostTags { - onFollowTag: (tag: string) => void; + onFollowTag: (tag: string) => BooleanPromise; tags: Record<'all' | 'followed' | 'notFollowed', string[]>; } diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index cc766bda017..bee22e7db79 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -8,6 +8,11 @@ import { checkIsExtension } from '../../lib/func'; import { isDevelopment } from '../../lib/constants'; export const DISMISS_PERMISSION_BANNER = 'DISMISS_PERMISSION_BANNER'; +export const FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY = + 'force_upvote_notification_cta'; + +const isTruthySessionFlag = (value: string | null): boolean => + value === '1' || value === 'true' || value === 'yes'; interface UseEnableNotificationProps { source: NotificationPromptSource; @@ -23,6 +28,7 @@ interface UseEnableNotification { export const useEnableNotification = ({ source = NotificationPromptSource.NotificationsPage, }: UseEnableNotificationProps): UseEnableNotification => { + const isCommentUpvoteSource = source === NotificationPromptSource.CommentUpvote; const isExtension = checkIsExtension(); const { logEvent } = useLogContext(); const hasLoggedImpression = useRef(false); @@ -30,11 +36,31 @@ export const useEnableNotification = ({ usePushNotificationContext(); const { hasPermissionCache, acceptedJustNow, onEnablePush } = usePushNotificationMutation(); + const forceUpvoteNotificationCtaFromUrl = + globalThis?.location?.search?.includes('forceUpvoteNotificationCta=1') ?? + false; + const forceUpvoteNotificationCtaFromSession = isTruthySessionFlag( + globalThis?.sessionStorage?.getItem( + FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY, + ) ?? null, + ); + const shouldForceUpvoteNotificationCtaForSession = + source === NotificationPromptSource.CommentUpvote && + (forceUpvoteNotificationCtaFromSession || forceUpvoteNotificationCtaFromUrl); const [isDismissed, setIsDismissed, isLoaded] = usePersistentContext( DISMISS_PERMISSION_BANNER, false, ); - const effectiveIsDismissed = isDevelopment ? false : isDismissed; + const shouldIgnoreDismissStateForSource = + source === NotificationPromptSource.PostTagFollow || + source === NotificationPromptSource.NewComment || + source === NotificationPromptSource.CommentUpvote; + const effectiveIsDismissed = + isDevelopment || + shouldIgnoreDismissStateForSource || + shouldForceUpvoteNotificationCtaForSession + ? false + : isDismissed; const onDismiss = useCallback(() => { if (isDevelopment) { return; @@ -52,20 +78,35 @@ export const useEnableNotification = ({ [source, onEnablePush], ); - const subscribed = isSubscribed || (shouldOpenPopup() && hasPermissionCache); + const shouldForceCtaInDevelopment = + isDevelopment && + (source === NotificationPromptSource.NotificationsPage || + source === NotificationPromptSource.SquadPage || + source === NotificationPromptSource.SourceSubscribe); + const subscribed = shouldForceCtaInDevelopment + ? false + : isSubscribed || (shouldOpenPopup() && hasPermissionCache); const enabledJustNow = subscribed && acceptedJustNow; + const shouldRequireNotSubscribed = + source !== NotificationPromptSource.PostTagFollow && + source !== NotificationPromptSource.NewComment && + !shouldForceUpvoteNotificationCtaForSession; const conditions = [ isLoaded, - !subscribed, + shouldRequireNotSubscribed ? !subscribed : true, isInitialized, isPushSupported || isExtension, ]; - const shouldShowCta = - (conditions.every(Boolean) || - (enabledJustNow && source !== NotificationPromptSource.SquadPostModal)) && - !effectiveIsDismissed; + const shouldShowCta = shouldForceCtaInDevelopment + ? true + : isCommentUpvoteSource + ? !effectiveIsDismissed + : (conditions.every(Boolean) || + (enabledJustNow && + source !== NotificationPromptSource.SquadPostModal)) && + !effectiveIsDismissed; useEffect(() => { if (!shouldShowCta || hasLoggedImpression.current) { diff --git a/packages/shared/src/hooks/post/useViewPost.ts b/packages/shared/src/hooks/post/useViewPost.ts index 1380de09569..01a5ca14aed 100644 --- a/packages/shared/src/hooks/post/useViewPost.ts +++ b/packages/shared/src/hooks/post/useViewPost.ts @@ -1,3 +1,4 @@ +import { useCallback } from 'react'; import type { UseMutateAsyncFunction } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { sendViewPost } from '../../graphql/posts'; @@ -38,20 +39,27 @@ export const useViewPost = (): UseMutateAsyncFunction< }, }); - return async (id: string) => { - try { - return await onSendViewPost(id); - } catch (err) { - const error = err as ApiErrorResult & { - response?: { errors?: Array<{ extensions?: { code?: string } }> }; - }; - const errorCode = error?.response?.errors?.[0]?.extensions?.code; - - if (errorCode === 'UNAUTHENTICATED') { - return null; - } + return useCallback( + async (id: string) => { + try { + return await onSendViewPost(id); + } catch (err) { + if (err instanceof TypeError) { + return null; + } + + const error = err as ApiErrorResult & { + response?: { errors?: Array<{ extensions?: { code?: string } }> }; + }; + const errorCode = error?.response?.errors?.[0]?.extensions?.code; + + if (errorCode === 'UNAUTHENTICATED' || errorCode === 'RATE_LIMITED') { + return null; + } - throw err; - } - }; + throw err; + } + }, + [onSendViewPost, user?.id], + ); }; diff --git a/packages/shared/src/hooks/streaks/useStreakRecover.ts b/packages/shared/src/hooks/streaks/useStreakRecover.ts index 867dcb14f31..d3756c8deea 100644 --- a/packages/shared/src/hooks/streaks/useStreakRecover.ts +++ b/packages/shared/src/hooks/streaks/useStreakRecover.ts @@ -131,14 +131,15 @@ export const useStreakRecover = ({ queryFn: async () => { const res = await gqlClient.request(USER_STREAK_RECOVER_QUERY); - const userCantRecoverInNotificationCenter = - !res?.streakRecover?.canRecover && !!streakRestore; - if (userCantRecoverInNotificationCenter) { - await hideRemoteAlert(); - displayToast('Oops, you are no longer eligible to restore your streak'); - onRequestClose?.(); - onAfterClose?.(); - } + // TODO(debug): temporarily disabled for preview — restore before merging + // const userCantRecoverInNotificationCenter = + // !res?.streakRecover?.canRecover && !!streakRestore; + // if (userCantRecoverInNotificationCenter) { + // await hideRemoteAlert(); + // displayToast('Oops, you are no longer eligible to restore your streak'); + // onRequestClose?.(); + // onAfterClose?.(); + // } return res; }, diff --git a/packages/shared/src/hooks/usePostModalNavigation.ts b/packages/shared/src/hooks/usePostModalNavigation.ts index 52e697c62a5..42746efd0c0 100644 --- a/packages/shared/src/hooks/usePostModalNavigation.ts +++ b/packages/shared/src/hooks/usePostModalNavigation.ts @@ -41,6 +41,17 @@ export type UsePostModalNavigationProps = { feedName: string; }; +const normalizePostIdentifier = (value?: string | null): string | undefined => { + if (!value || value === 'null' || value === 'undefined') { + return undefined; + } + + return value; +}; + +const getPostIdentifier = (post: Post): string | undefined => + normalizePostIdentifier(post.slug) ?? normalizePostIdentifier(post.id); + // for extension we use in memory router const useRouter: () => UsePostModalRouter = isExtension ? useRouterMemory @@ -83,10 +94,14 @@ export const usePostModalNavigation = ({ const foundIndex = items.findIndex((item) => { if (item.type === 'post') { - return item.post.slug === pmid || item.post.id === pmid; + const postIdentifier = getPostIdentifier(item.post); + + return postIdentifier === pmid || item.post.id === pmid; } if (isBoostedPostAd(item)) { - return item.ad.data.post.slug === pmid || item.ad.data.post.id === pmid; + const postIdentifier = getPostIdentifier(item.ad.data.post); + + return postIdentifier === pmid || item.ad.data.post.id === pmid; } return false; @@ -148,7 +163,10 @@ export const usePostModalNavigation = ({ const post = getPost(index); if (post) { - const postId = post.slug || post.id; + const postId = getPostIdentifier(post); + if (!postId) { + return; + } const newPathname = getPathnameWithQuery( basePathname, @@ -221,10 +239,14 @@ export const usePostModalNavigation = ({ const indexFromQuery = items.findIndex((item) => { if (item.type === 'post') { - return item.post.slug === pmid || item.post.id === pmid; + const postIdentifier = getPostIdentifier(item.post); + + return postIdentifier === pmid || item.post.id === pmid; } if (isBoostedPostAd(item)) { - return item.ad.data.post.slug === pmid || item.ad.data.post.id === pmid; + const postIdentifier = getPostIdentifier(item.ad.data.post); + + return postIdentifier === pmid || item.ad.data.post.id === pmid; } return false; diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts index 86f97019d45..26e8b3eaa0d 100644 --- a/packages/shared/src/lib/log.ts +++ b/packages/shared/src/lib/log.ts @@ -537,6 +537,8 @@ export enum NotificationPromptSource { BookmarkReminder = 'bookmark reminder', NotificationsPage = 'notifications page', NewComment = 'new comment', + CommentUpvote = 'comment upvote', + PostTagFollow = 'post tag follow', NewSourceModal = 'new source modal', SquadPage = 'squad page', NotificationItem = 'notification item', diff --git a/packages/webapp/lib/squadNotificationToastState.ts b/packages/webapp/lib/squadNotificationToastState.ts index ece80873019..ecd139c9cea 100644 --- a/packages/webapp/lib/squadNotificationToastState.ts +++ b/packages/webapp/lib/squadNotificationToastState.ts @@ -1,3 +1,5 @@ +import { isDevelopment } from '@dailydotdev/shared/src/lib/constants'; + interface SquadNotificationToastState { date: string; shownSquadIds: string[]; @@ -87,6 +89,10 @@ export const createSquadNotificationToastStateStore = ( return { registerToastView: ({ squadId, isSquadMember }) => { + if (isDevelopment) { + return true; + } + const state = readState(storageKey); const isFreshJoinEvent = isSquadMember && !state.joinedMemberSquadIds.includes(squadId); @@ -115,6 +121,10 @@ export const createSquadNotificationToastStateStore = ( return true; }, dismissUntilTomorrow: ({ squadId }) => { + if (isDevelopment) { + return; + } + const state = readState(storageKey); if (!state.shownSquadIds.includes(squadId)) { diff --git a/packages/webapp/pages/tags/[tag].tsx b/packages/webapp/pages/tags/[tag].tsx index 19161439bc2..b0bb881405d 100644 --- a/packages/webapp/pages/tags/[tag].tsx +++ b/packages/webapp/pages/tags/[tag].tsx @@ -6,7 +6,7 @@ import type { import Head from 'next/head'; import type { ParsedUrlQuery } from 'querystring'; import type { ReactElement } from 'react'; -import React, { useContext, useMemo } from 'react'; +import React, { useContext, useMemo, useState } from 'react'; import { BlockIcon, DiscussIcon, @@ -45,7 +45,11 @@ import { RequestKey, StaleTime, } from '@dailydotdev/shared/src/lib/query'; -import { LogEvent, Origin } from '@dailydotdev/shared/src/lib/log'; +import { + LogEvent, + NotificationPromptSource, + Origin, +} from '@dailydotdev/shared/src/lib/log'; import type { Keyword } from '@dailydotdev/shared/src/graphql/keywords'; import { KEYWORD_QUERY } from '@dailydotdev/shared/src/graphql/keywords'; import { IconSize } from '@dailydotdev/shared/src/components/Icon'; @@ -73,6 +77,7 @@ import Link from '@dailydotdev/shared/src/components/utilities/Link'; import CustomFeedOptionsMenu from '@dailydotdev/shared/src/components/CustomFeedOptionsMenu'; import { useContentPreference } from '@dailydotdev/shared/src/hooks/contentPreference/useContentPreference'; import { ContentPreferenceType } from '@dailydotdev/shared/src/graphql/contentPreference'; +import EnableNotification from '@dailydotdev/shared/src/components/notifications/EnableNotification'; import { getPageSeoTitles } from '../../components/layouts/utils'; import { getLayout } from '../../components/layouts/FeedLayout'; import { mainFeedLayoutProps } from '../../components/layouts/MainFeedPage'; @@ -269,6 +274,7 @@ const TagPage = ({ const { FeedPageLayoutComponent } = useFeedLayout(); const { onFollowTags, onUnfollowTags, onBlockTags, onUnblockTags } = useTagAndSource({ origin: Origin.TagPage }); + const [newlyFollowedTag, setNewlyFollowedTag] = useState(null); const title = initialData?.flags?.title || tag; const jsonLd = initialData ? getTagPageJsonLd({ tag, initialData, topPosts }) @@ -304,8 +310,14 @@ const TagPage = ({ if (user) { if (tagStatus === 'followed') { await onUnfollowTags({ tags: [tag] }); + setNewlyFollowedTag(null); } else { - await onFollowTags({ tags: [tag] }); + const { successful } = await onFollowTags({ tags: [tag] }); + if (!successful) { + return; + } + + setNewlyFollowedTag(tag); } } else { showLogin({ trigger: AuthTriggers.Filter }); @@ -322,6 +334,7 @@ const TagPage = ({ await onUnblockTags({ tags: [tag] }); } else { await onBlockTags({ tags: [tag] }); + setNewlyFollowedTag(null); } } else { showLogin({ trigger: AuthTriggers.Filter }); @@ -396,6 +409,13 @@ const TagPage = ({ }} />
+ {newlyFollowedTag && ( + + )} {initialData?.flags?.description && (

{initialData?.flags?.description}

)} From 794cb95d85d1983dd54b09fc75dcafd4500f87bc Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Thu, 12 Mar 2026 22:05:27 +0200 Subject: [PATCH 06/34] fix(shared): align reading reminder modal hero layout and copy sizing Center the desktop reading-reminder hero content in the modal and normalize the helper copy to the body typography scale for consistent visual hierarchy. Made-with: Cursor --- .../shared/src/components/MainFeedLayout.tsx | 46 +++++++++++++-- .../banners/ReadingReminderHero.tsx | 58 +++++++++++++------ 2 files changed, 83 insertions(+), 21 deletions(-) diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx index 39f51788243..ec5de907a18 100644 --- a/packages/shared/src/components/MainFeedLayout.tsx +++ b/packages/shared/src/components/MainFeedLayout.tsx @@ -12,6 +12,9 @@ import { useRouter } from 'next/router'; import type { FeedProps } from './Feed'; import Feed from './Feed'; import ReadingReminderHero from './banners/ReadingReminderHero'; +import ReadingReminderCatLaptop from './banners/ReadingReminderCatLaptop'; +import { Modal } from './modals/common/Modal'; +import { ModalSize } from './modals/common/types'; import AuthContext from '../contexts/AuthContext'; import type { LoggedUser } from '../lib/user'; import { SharedFeedPage } from './utilities'; @@ -65,7 +68,7 @@ import { QueryStateKeys, useQueryState } from '../hooks/utils/useQueryState'; import { useSearchResultsLayout } from '../hooks/search/useSearchResultsLayout'; import useCustomDefaultFeed from '../hooks/feed/useCustomDefaultFeed'; import { useSearchContextProvider } from '../contexts/search/SearchContext'; -import { isDevelopment, isProductionAPI, webappUrl } from '../lib/constants'; +import { isDevelopment, isProductionAPI } from '../lib/constants'; import { useReadingReminderHero } from '../hooks/notifications/useReadingReminderHero'; const FeedExploreHeader = dynamic( @@ -214,6 +217,7 @@ export default function MainFeedLayout({ }); const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed(); const isLaptop = useViewSize(ViewSize.Laptop); + const isMobile = useViewSize(ViewSize.MobileL); const feedVersion = useFeature(feature.feedVersion); const { time, contentCurationFilter } = useSearchContextProvider(); const { shouldShow: shouldShowReadingReminder, onEnable } = @@ -521,8 +525,26 @@ export default function MainFeedLayout({ }, [sortingEnabled, selectedAlgo, loadedSettings, loadedAlgo]); const disableTopPadding = isFinder || shouldUseListFeedLayout; - const shouldShowReadingReminderOnHomepage = - router.pathname === webappUrl && shouldShowReadingReminder; + const shouldShowReadingReminderOnMobile = + shouldShowReadingReminder && isMobile; + const shouldShowReadingReminderOnDesktop = + shouldShowReadingReminder && !isMobile; + const [isReadingReminderModalOpen, setIsReadingReminderModalOpen] = + useState(false); + + useEffect(() => { + if (!shouldShowReadingReminderOnDesktop) { + setIsReadingReminderModalOpen(false); + return; + } + + setIsReadingReminderModalOpen(true); + }, [shouldShowReadingReminderOnDesktop]); + + const onEnableDesktopReminder = useCallback(async () => { + await onEnable(); + setIsReadingReminderModalOpen(false); + }, [onEnable]); const onTabChange = useCallback( (clickedTab: ExploreTabs) => { @@ -568,9 +590,25 @@ export default function MainFeedLayout({ > {isAnyExplore && } {isSearchOn && !isSearchPageLaptop && search} - {shouldShowReadingReminderOnHomepage && ( + {shouldShowReadingReminderOnMobile && ( )} + {shouldShowReadingReminderOnDesktop && isReadingReminderModalOpen && ( + setIsReadingReminderModalOpen(false)} + shouldCloseOnOverlayClick + > + + + setIsReadingReminderModalOpen(false)} + /> + + + )} {shouldUseCommentFeedLayout ? ( Promise; + onClose?: () => void; } const ReadingReminderHero = ({ className, onEnable, + onClose, }: ReadingReminderHeroProps): ReactElement => { useLogEventOnce(() => ({ event_name: LogEvent.Impression, @@ -25,27 +28,48 @@ const ReadingReminderHero = ({ })); return ( -
-
- - Never miss a learning day - - + + Never miss a learning day + + + Turn on your daily reading reminder and keep your routine. + + +
+ + {onClose && ( -
+ )}
); From 2d2dd0d1d153cc04e1a8df01ab6d7c36df57cebf Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Thu, 12 Mar 2026 22:21:35 +0200 Subject: [PATCH 07/34] feat(shared): add floating style variant for desktop reading reminder popup Introduce a switchable desktop popup style with a floating no-box treatment, darker blurred backdrop, and top-right icon close control while preserving the boxed variant fallback. Made-with: Cursor --- .../shared/src/components/MainFeedLayout.tsx | 41 +++++++++++++++++-- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx index ec5de907a18..f59724f27cc 100644 --- a/packages/shared/src/components/MainFeedLayout.tsx +++ b/packages/shared/src/components/MainFeedLayout.tsx @@ -13,6 +13,8 @@ import type { FeedProps } from './Feed'; import Feed from './Feed'; import ReadingReminderHero from './banners/ReadingReminderHero'; import ReadingReminderCatLaptop from './banners/ReadingReminderCatLaptop'; +import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; +import { MiniCloseIcon } from './icons'; import { Modal } from './modals/common/Modal'; import { ModalSize } from './modals/common/types'; import AuthContext from '../contexts/AuthContext'; @@ -193,6 +195,8 @@ const feedWithDateRange = [ ExploreTabs.BestDiscussions, ]; +type DesktopReadingReminderStyle = 'boxed' | 'floating'; + export default function MainFeedLayout({ feedName: feedNameProp, searchQuery, @@ -529,6 +533,18 @@ export default function MainFeedLayout({ shouldShowReadingReminder && isMobile; const shouldShowReadingReminderOnDesktop = shouldShowReadingReminder && !isMobile; + const desktopReadingReminderStyle: DesktopReadingReminderStyle = 'floating'; + const isFloatingDesktopReadingReminder = + desktopReadingReminderStyle === 'floating'; + const desktopReadingReminderModalClassName = isFloatingDesktopReadingReminder + ? 'tablet:!w-[26.25rem] !w-auto !h-auto !border-0 !bg-transparent !shadow-none tablet:!rounded-none tablet:!bg-transparent' + : undefined; + const desktopReadingReminderOverlayClassName = isFloatingDesktopReadingReminder + ? 'bg-overlay-dark-dark3 backdrop-blur-sm' + : undefined; + const desktopReadingReminderBodyClassName = isFloatingDesktopReadingReminder + ? 'p-4 tablet:!px-0 tablet:!py-0' + : 'p-4'; const [isReadingReminderModalOpen, setIsReadingReminderModalOpen] = useState(false); @@ -596,15 +612,34 @@ export default function MainFeedLayout({ {shouldShowReadingReminderOnDesktop && isReadingReminderModalOpen && ( setIsReadingReminderModalOpen(false)} shouldCloseOnOverlayClick > - - + +
+ {isFloatingDesktopReadingReminder && ( +
setIsReadingReminderModalOpen(false)} + onClose={ + isFloatingDesktopReadingReminder + ? undefined + : () => setIsReadingReminderModalOpen(false) + } /> From 60751dc207546f48446861a6e528c263d25dc7af Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Thu, 12 Mar 2026 23:48:37 +0200 Subject: [PATCH 08/34] feat(shared): force show reading reminder hero on mobile and desktop - Always show the reading reminder hero component for logged-in users regardless of device size. - Add an illustration of a sleeping cat on a laptop to the reading reminder hero modal. - Update tests to reflect the new visibility rules. - Clean up unused `ButtonColor` imports in notification and squad components. Made-with: Cursor --- .../banners/ReadingReminderCatLaptop.tsx | 24 ++++ .../banners/ReadingReminderHero.spec.tsx | 10 ++ .../notifications/EnableNotification.tsx | 123 +++++++++++------- .../useReadingReminderHero.spec.tsx | 28 ++-- .../notifications/useReadingReminderHero.ts | 12 +- .../src/hooks/squads/usePostToSquad.tsx | 2 - .../webapp/pages/squads/[handle]/index.tsx | 2 - .../public/assets/reading-reminder-cat.png | Bin 0 -> 144303 bytes 8 files changed, 126 insertions(+), 75 deletions(-) create mode 100644 packages/shared/src/components/banners/ReadingReminderCatLaptop.tsx create mode 100644 packages/webapp/public/assets/reading-reminder-cat.png diff --git a/packages/shared/src/components/banners/ReadingReminderCatLaptop.tsx b/packages/shared/src/components/banners/ReadingReminderCatLaptop.tsx new file mode 100644 index 00000000000..789c09aa223 --- /dev/null +++ b/packages/shared/src/components/banners/ReadingReminderCatLaptop.tsx @@ -0,0 +1,24 @@ +import type { ReactElement } from 'react'; +import React from 'react'; +import classNames from 'classnames'; + +interface ReadingReminderCatLaptopProps { + className?: string; +} + +const ReadingReminderCatLaptop = ({ + className, +}: ReadingReminderCatLaptopProps): ReactElement => { + return ( + Sleeping cat on laptop + ); +}; + +export default ReadingReminderCatLaptop; diff --git a/packages/shared/src/components/banners/ReadingReminderHero.spec.tsx b/packages/shared/src/components/banners/ReadingReminderHero.spec.tsx index 9adc59cb63e..7c71ef24e55 100644 --- a/packages/shared/src/components/banners/ReadingReminderHero.spec.tsx +++ b/packages/shared/src/components/banners/ReadingReminderHero.spec.tsx @@ -35,4 +35,14 @@ describe('ReadingReminderHero', () => { screen.queryByRole('button', { name: 'Dismiss reading reminder' }), ).not.toBeInTheDocument(); }); + + it('should render and handle close action when provided', () => { + const onClose = jest.fn(); + + render(); + + fireEvent.click(screen.getByRole('button', { name: 'Close' })); + + expect(onClose).toHaveBeenCalledTimes(1); + }); }); diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index bb0e1e9ed35..4bab786ba95 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -3,7 +3,6 @@ import React from 'react'; import classNames from 'classnames'; import { Button, - ButtonColor, ButtonSize, ButtonVariant, } from '../buttons/Button'; @@ -64,6 +63,7 @@ const sourceRenderTextCloseButton: Record = { const sourceToButtonText: Partial> = { [NotificationPromptSource.SquadPostModal]: 'Subscribe', [NotificationPromptSource.SourceSubscribe]: 'Enable', + [NotificationPromptSource.NewComment]: 'Notify me', [NotificationPromptSource.CommentUpvote]: 'Turn on', }; @@ -124,6 +124,8 @@ function EnableNotification({ source === NotificationPromptSource.CommentUpvote || source === NotificationPromptSource.PostTagFollow) && !acceptedJustNow; + const shouldUseVerticalContentLayout = + source === NotificationPromptSource.NotificationsPage; const handleEnable = async () => { const actions = [onEnable()]; @@ -219,69 +221,93 @@ function EnableNotification({ `} )} - {source === NotificationPromptSource.NotificationsPage && ( -

- {acceptedJustNow && } - Stay in the dev loop -

- )}
-

- {acceptedJustNow ? ( - <> - Changing your{' '} - - notification settings - {' '} - can be done anytime through your account details - - ) : ( - message + {source === NotificationPromptSource.NotificationsPage && ( +

+ {acceptedJustNow && } + Stay in the dev loop +

)} -

- {shouldInlineActionWithMessage && ( - - )} + {acceptedJustNow ? ( + <> + Changing your{' '} + + notification settings + {' '} + can be done anytime through your account details + + ) : ( + message + )} +

+ {shouldInlineActionWithMessage && ( + + )} + {shouldUseVerticalContentLayout && + !acceptedJustNow && + !shouldInlineActionWithMessage && ( + + )} +
{notificationVisual}
- {!acceptedJustNow && !shouldInlineActionWithMessage && ( + {!acceptedJustNow && + !shouldInlineActionWithMessage && + !shouldUseVerticalContentLayout && ( +
+
+
+ ); +}; From 247b06cc50c8dcc4bfb7499752fb1b0408b1e7c2 Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Mon, 16 Mar 2026 22:13:03 +0200 Subject: [PATCH 10/34] fix(shared): simplify notification CTA behavior and clean feed chrome Remove the reading reminder hero rendering from the main feed and add a forceNotificationCta URL override so CTA visibility can be controlled without dev-only bypasses. Hide the injected third-party launcher circle and disable Next.js dev indicators to keep the feed UI clean during testing. Made-with: Cursor --- .../shared/src/components/MainFeedLayout.tsx | 82 ------------------- .../components/banners/HeroBottomBanner.tsx | 60 ++++++++++++++ .../notifications/useEnableNotification.ts | 12 ++- packages/shared/src/styles/base.css | 13 +++ packages/webapp/next.config.ts | 1 + 5 files changed, 79 insertions(+), 89 deletions(-) create mode 100644 packages/shared/src/components/banners/HeroBottomBanner.tsx diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx index f59724f27cc..e3ce0456f95 100644 --- a/packages/shared/src/components/MainFeedLayout.tsx +++ b/packages/shared/src/components/MainFeedLayout.tsx @@ -11,12 +11,6 @@ import classNames from 'classnames'; import { useRouter } from 'next/router'; import type { FeedProps } from './Feed'; import Feed from './Feed'; -import ReadingReminderHero from './banners/ReadingReminderHero'; -import ReadingReminderCatLaptop from './banners/ReadingReminderCatLaptop'; -import { Button, ButtonSize, ButtonVariant } from './buttons/Button'; -import { MiniCloseIcon } from './icons'; -import { Modal } from './modals/common/Modal'; -import { ModalSize } from './modals/common/types'; import AuthContext from '../contexts/AuthContext'; import type { LoggedUser } from '../lib/user'; import { SharedFeedPage } from './utilities'; @@ -71,7 +65,6 @@ import { useSearchResultsLayout } from '../hooks/search/useSearchResultsLayout'; import useCustomDefaultFeed from '../hooks/feed/useCustomDefaultFeed'; import { useSearchContextProvider } from '../contexts/search/SearchContext'; import { isDevelopment, isProductionAPI } from '../lib/constants'; -import { useReadingReminderHero } from '../hooks/notifications/useReadingReminderHero'; const FeedExploreHeader = dynamic( () => @@ -195,8 +188,6 @@ const feedWithDateRange = [ ExploreTabs.BestDiscussions, ]; -type DesktopReadingReminderStyle = 'boxed' | 'floating'; - export default function MainFeedLayout({ feedName: feedNameProp, searchQuery, @@ -221,11 +212,8 @@ export default function MainFeedLayout({ }); const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed(); const isLaptop = useViewSize(ViewSize.Laptop); - const isMobile = useViewSize(ViewSize.MobileL); const feedVersion = useFeature(feature.feedVersion); const { time, contentCurationFilter } = useSearchContextProvider(); - const { shouldShow: shouldShowReadingReminder, onEnable } = - useReadingReminderHero(); const { isUpvoted, isPopular, @@ -529,38 +517,6 @@ export default function MainFeedLayout({ }, [sortingEnabled, selectedAlgo, loadedSettings, loadedAlgo]); const disableTopPadding = isFinder || shouldUseListFeedLayout; - const shouldShowReadingReminderOnMobile = - shouldShowReadingReminder && isMobile; - const shouldShowReadingReminderOnDesktop = - shouldShowReadingReminder && !isMobile; - const desktopReadingReminderStyle: DesktopReadingReminderStyle = 'floating'; - const isFloatingDesktopReadingReminder = - desktopReadingReminderStyle === 'floating'; - const desktopReadingReminderModalClassName = isFloatingDesktopReadingReminder - ? 'tablet:!w-[26.25rem] !w-auto !h-auto !border-0 !bg-transparent !shadow-none tablet:!rounded-none tablet:!bg-transparent' - : undefined; - const desktopReadingReminderOverlayClassName = isFloatingDesktopReadingReminder - ? 'bg-overlay-dark-dark3 backdrop-blur-sm' - : undefined; - const desktopReadingReminderBodyClassName = isFloatingDesktopReadingReminder - ? 'p-4 tablet:!px-0 tablet:!py-0' - : 'p-4'; - const [isReadingReminderModalOpen, setIsReadingReminderModalOpen] = - useState(false); - - useEffect(() => { - if (!shouldShowReadingReminderOnDesktop) { - setIsReadingReminderModalOpen(false); - return; - } - - setIsReadingReminderModalOpen(true); - }, [shouldShowReadingReminderOnDesktop]); - - const onEnableDesktopReminder = useCallback(async () => { - await onEnable(); - setIsReadingReminderModalOpen(false); - }, [onEnable]); const onTabChange = useCallback( (clickedTab: ExploreTabs) => { @@ -606,44 +562,6 @@ export default function MainFeedLayout({ > {isAnyExplore && } {isSearchOn && !isSearchPageLaptop && search} - {shouldShowReadingReminderOnMobile && ( - - )} - {shouldShowReadingReminderOnDesktop && isReadingReminderModalOpen && ( - setIsReadingReminderModalOpen(false)} - shouldCloseOnOverlayClick - > - -
- {isFloatingDesktopReadingReminder && ( -
- setIsReadingReminderModalOpen(false) - } - /> - - - )} {shouldUseCommentFeedLayout ? ( void; + onClose?: () => void; +}; + +export const HeroBottomBanner = ({ + className, + onCtaClick, + onClose, +}: HeroBottomBannerProps): ReactElement => { + return ( +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ ); +}; diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index bee22e7db79..05c91c824a2 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -39,6 +39,8 @@ export const useEnableNotification = ({ const forceUpvoteNotificationCtaFromUrl = globalThis?.location?.search?.includes('forceUpvoteNotificationCta=1') ?? false; + const forceNotificationCtaFromUrl = + globalThis?.location?.search?.includes('forceNotificationCta=1') ?? false; const forceUpvoteNotificationCtaFromSession = isTruthySessionFlag( globalThis?.sessionStorage?.getItem( FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY, @@ -56,16 +58,12 @@ export const useEnableNotification = ({ source === NotificationPromptSource.NewComment || source === NotificationPromptSource.CommentUpvote; const effectiveIsDismissed = - isDevelopment || shouldIgnoreDismissStateForSource || - shouldForceUpvoteNotificationCtaForSession + shouldForceUpvoteNotificationCtaForSession || + forceNotificationCtaFromUrl ? false : isDismissed; const onDismiss = useCallback(() => { - if (isDevelopment) { - return; - } - logEvent({ event_name: LogEvent.ClickNotificationDismiss, extra: JSON.stringify({ origin: source }), @@ -100,7 +98,7 @@ export const useEnableNotification = ({ ]; const shouldShowCta = shouldForceCtaInDevelopment - ? true + ? (forceNotificationCtaFromUrl || isLoaded) && !effectiveIsDismissed : isCommentUpvoteSource ? !effectiveIsDismissed : (conditions.every(Boolean) || diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css index e89540dbf68..9198b81f200 100644 --- a/packages/shared/src/styles/base.css +++ b/packages/shared/src/styles/base.css @@ -681,6 +681,19 @@ html.light .invert .invert, } } +/* Hide third-party floating launcher injected into the app shell */ +#__next .qd-parent-container .qd-open-btn-container, +#__next [class*='qd-parent-container'] [class*='qd-open-btn-container'] { + display: none !important; + pointer-events: none !important; +} + +/* Fallback if only the launcher circle is rendered */ +#__next .qd-parent-container .qd-open-btn-container svg circle, +#__next [class*='qd-open-btn-container'] svg circle { + display: none !important; +} + img.lazyload:not([src]) { visibility: hidden; } diff --git a/packages/webapp/next.config.ts b/packages/webapp/next.config.ts index 52c511566c0..c6c515bd8d5 100644 --- a/packages/webapp/next.config.ts +++ b/packages/webapp/next.config.ts @@ -320,6 +320,7 @@ const nextConfig: NextConfig = { ]; }, poweredByHeader: false, + devIndicators: false, reactStrictMode: false, productionBrowserSourceMaps: process.env.SOURCE_MAPS === 'true', }), From 899e7143ca9cb35714927b437dba022ce3e699f0 Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Mon, 16 Mar 2026 23:06:27 +0200 Subject: [PATCH 11/34] feat(shared): show reminder top hero inline after feed scroll Render the new TopHero inside the feed after several cards and gate it by scroll so it appears in content flow instead of the page header. Add URL-force exclusivity with notification CTA prompts so testing one surface automatically hides the competing prompt. Made-with: Cursor --- packages/shared/src/components/Feed.tsx | 58 +++++++++++++++++++ .../components/banners/HeroBottomBanner.tsx | 13 +++-- .../sidebar/SidebarNotificationPrompt.tsx | 4 +- .../notifications/useEnableNotification.ts | 21 ++++--- .../notifications/useReadingReminderHero.ts | 10 +++- 5 files changed, 91 insertions(+), 15 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index c0a2f9a4e41..420673d2fd5 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -66,6 +66,8 @@ import { getProductsQueryOptions } from '../graphql/njord'; import { useUpdateQuery } from '../hooks/useUpdateQuery'; import { BriefBannerFeed } from './cards/brief/BriefBanner/BriefBannerFeed'; import { ActionType } from '../graphql/actions'; +import { useReadingReminderHero } from '../hooks/notifications/useReadingReminderHero'; +import { TopHero } from './banners/HeroBottomBanner'; const FeedErrorScreen = dynamic( () => import(/* webpackChunkName: "feedErrorScreen" */ './FeedErrorScreen'), @@ -192,6 +194,8 @@ export default function Feed({ disableListFrame = false, disableListWidthConstraint = false, }: FeedProps): ReactElement { + const HERO_INSERT_INDEX = 6; + const HERO_SCROLL_THRESHOLD_PX = 300; const origin = Origin.Feed; const { logEvent } = useLogContext(); const currentSettings = useContext(FeedContext); @@ -250,6 +254,14 @@ export default function Feed({ feature: briefFeedEntrypointPage, shouldEvaluate: !user?.isPlus && isMyFeed, }); + const forceBottomHeroFromUrl = + globalThis?.location?.search?.includes('forceBottomHero=1') ?? false; + const { shouldShow: shouldShowReadingReminder, onEnable } = + useReadingReminderHero(); + const [hasScrolledForHero, setHasScrolledForHero] = useState( + forceBottomHeroFromUrl, + ); + const [isHeroDismissed, setIsHeroDismissed] = useState(false); const { items, updatePost, @@ -451,6 +463,27 @@ export default function Feed({ }; }, []); + useEffect(() => { + if (forceBottomHeroFromUrl || hasScrolledForHero) { + return undefined; + } + + const onScroll = () => { + if (window.scrollY >= HERO_SCROLL_THRESHOLD_PX) { + setHasScrolledForHero(true); + } + }; + + window.addEventListener('scroll', onScroll, { passive: true }); + return () => window.removeEventListener('scroll', onScroll); + }, [forceBottomHeroFromUrl, hasScrolledForHero]); + + useEffect(() => { + if (!shouldShowReadingReminder) { + setIsHeroDismissed(false); + } + }, [shouldShowReadingReminder]); + useEffect(() => { if (!selectedPost) { document.body.classList.remove('hidden-scrollbar'); @@ -576,6 +609,16 @@ export default function Feed({ currentPageSize * Number(briefBannerPage) - // number of items at that page columnsDiffWithPage * Number(briefBannerPage) - // cards let out of rows * page number Number(showFirstSlotCard); + const shouldShowInFeedHero = + shouldShowReadingReminder && + hasScrolledForHero && + !isHeroDismissed && + items.length > HERO_INSERT_INDEX; + + const onEnableInFeedHero = useCallback(async () => { + await onEnable(); + setIsHeroDismissed(true); + }, [onEnable]); return ( @@ -617,6 +660,21 @@ export default function Feed({ }} /> )} + {shouldShowInFeedHero && index === HERO_INSERT_INDEX && ( +
+ setIsHeroDismissed(true)} + /> +
+ )} void; onClose?: () => void; }; -export const HeroBottomBanner = ({ +export const TopHero = ({ className, onCtaClick, onClose, -}: HeroBottomBannerProps): ReactElement => { +}: TopHeroProps): ReactElement => { return ( -
+
+
+
+
+
+
+
+
+ ); + } + return (
diff --git a/packages/shared/src/components/cards/entity/EnableNotificationsCta.tsx b/packages/shared/src/components/cards/entity/EnableNotificationsCta.tsx new file mode 100644 index 00000000000..1d1ebef210b --- /dev/null +++ b/packages/shared/src/components/cards/entity/EnableNotificationsCta.tsx @@ -0,0 +1,58 @@ +import type { ReactElement } from 'react'; +import React from 'react'; +import { BellIcon } from '../../icons'; +import { + Button, + ButtonSize, + ButtonVariant, +} from '../../buttons/Button'; +import { + Typography, + TypographyColor, + TypographyType, +} from '../../typography/Typography'; + +type EnableNotificationsCtaProps = { + onEnable: () => void | Promise; + message?: string; +}; + +const EnableNotificationsCta = ({ + onEnable, + message = 'Get notified about new posts', +}: EnableNotificationsCtaProps): ReactElement => { + return ( +
+ + {message} + + + +
+ ); +}; + +export default EnableNotificationsCta; diff --git a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx index 8454b151ac8..ab552a01e03 100644 --- a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx @@ -10,14 +10,10 @@ import { import type { SourceTooltip } from '../../../graphql/sources'; import { largeNumberFormat } from '../../../lib'; import CustomFeedOptionsMenu from '../../CustomFeedOptionsMenu'; -import { - Button, - ButtonColor, - ButtonSize, - ButtonVariant, -} from '../../buttons/Button'; +import { ButtonVariant } from '../../buttons/Button'; import { Separator } from '../common/common'; import EntityDescription from './EntityDescription'; +import EnableNotificationsCta from './EnableNotificationsCta'; import useSourceMenuProps from '../../../hooks/useSourceMenuProps'; import { ContentPreferenceStatus, @@ -27,7 +23,6 @@ import useShowFollowAction from '../../../hooks/useShowFollowAction'; import { FollowButton } from '../../contentPreference/FollowButton'; import { useContentPreferenceStatusQuery } from '../../../hooks/contentPreference/useContentPreferenceStatusQuery'; import { useSourceActionsNotify } from '../../../hooks/source/useSourceActionsNotify'; -import { BellIcon } from '../../icons'; type SourceEntityCardProps = { source?: SourceTooltip; @@ -141,35 +136,7 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => {
{showNotificationCta && !haveNotificationsOn && ( -
- - Get notified about new posts - - - -
+ )}
diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx index e0fad91babb..928972a7605 100644 --- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import Link from '../../utilities/Link'; import { Typography, @@ -19,10 +19,15 @@ import EntityDescription from './EntityDescription'; import EntityCard from './EntityCard'; import { ContentPreferenceType } from '../../../graphql/contentPreference'; import useShowFollowAction from '../../../hooks/useShowFollowAction'; +import EnableNotificationsCta from './EnableNotificationsCta'; +import { useSourceActionsNotify } from '../../../hooks/source/useSourceActionsNotify'; type SquadEntityCardProps = { handle: string; origin: Origin; + showNotificationCtaOnJoin?: boolean; + showNotificationCtaOnUpvote?: boolean; + isSquadPostUpvoted?: boolean; className?: { container?: string; }; @@ -31,18 +36,62 @@ type SquadEntityCardProps = { const SquadEntityCard = ({ handle, origin, + showNotificationCtaOnJoin = false, + showNotificationCtaOnUpvote = false, + isSquadPostUpvoted = false, className, }: SquadEntityCardProps) => { const { squad } = useSquad({ handle }); + const [showNotificationCta, setShowNotificationCta] = useState(false); + const wasSquadMemberRef = useRef(!!squad?.currentMember); + const wasSquadPostUpvotedRef = useRef(isSquadPostUpvoted); const { isLoading } = useShowFollowAction({ entityId: squad?.id, entityType: ContentPreferenceType.Source, }); + const { haveNotificationsOn, onNotify } = useSourceActionsNotify({ + source: squad, + }); if (!squad) { return null; } + const isSquadMember = !!squad.currentMember; + + useEffect(() => { + if ( + showNotificationCtaOnJoin && + isSquadMember && + !wasSquadMemberRef.current && + !haveNotificationsOn + ) { + setShowNotificationCta(true); + } else if (!isSquadMember) { + setShowNotificationCta(false); + } + + wasSquadMemberRef.current = isSquadMember; + }, [haveNotificationsOn, isSquadMember, showNotificationCtaOnJoin]); + + useEffect(() => { + if ( + showNotificationCtaOnUpvote && + isSquadPostUpvoted && + !wasSquadPostUpvotedRef.current && + !haveNotificationsOn + ) { + setShowNotificationCta(true); + } + + wasSquadPostUpvotedRef.current = isSquadPostUpvoted; + }, [haveNotificationsOn, isSquadPostUpvoted, showNotificationCtaOnUpvote]); + + const handleEnableNotifications = async () => { + await onNotify(); + setShowNotificationCta(false); + }; + const { description, name, image, membersCount, flags, permalink } = squad || {}; return ( @@ -118,6 +167,9 @@ const SquadEntityCard = ({ {largeNumberFormat(flags?.totalUpvotes)} Upvotes + {showNotificationCta && !haveNotificationsOn && ( + + )} ); diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx index 2d18d84b4f1..4bda57e9a45 100644 --- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useEffect, useRef, useState } from 'react'; import Link from '../../utilities/Link'; import type { UserShortProfile } from '../../../lib/user'; import EntityCard from './EntityCard'; @@ -32,22 +32,35 @@ import EntityDescription from './EntityDescription'; import useUserMenuProps from '../../../hooks/useUserMenuProps'; import useShowFollowAction from '../../../hooks/useShowFollowAction'; import type { MenuItemProps } from '../../dropdown/common'; +import EnableNotificationsCta from './EnableNotificationsCta'; type Props = { user?: UserShortProfile; + showNotificationCtaOnFollow?: boolean; + showNotificationCtaOnUpvote?: boolean; + isAuthorPostUpvoted?: boolean; className?: { container?: string; }; }; -const UserEntityCard = ({ user, className }: Props) => { +const UserEntityCard = ({ + user, + className, + showNotificationCtaOnFollow = false, + showNotificationCtaOnUpvote = false, + isAuthorPostUpvoted = false, +}: Props) => { const { user: loggedUser } = useContext(AuthContext); const isSameUser = loggedUser?.id === user?.id; const { data: contentPreference } = useContentPreferenceStatusQuery({ id: user?.id, entity: ContentPreferenceType.User, }); - const { unblock, block } = useContentPreference(); + const { unblock, block, subscribe } = useContentPreference(); + const [showNotificationCta, setShowNotificationCta] = useState(false); + const prevStatusRef = useRef(contentPreference?.status); + const prevAuthorPostUpvotedRef = useRef(isAuthorPostUpvoted); const blocked = contentPreference?.status === ContentPreferenceStatus.Blocked; const { openModal } = useLazyModal(); const { logSubscriptionEvent } = usePlusSubscription(); @@ -74,6 +87,56 @@ const UserEntityCard = ({ user, className }: Props) => { ); const { username, bio, name, image, isPlus, createdAt, id, permalink } = user || {}; + + const currentStatus = contentPreference?.status; + const isNowFollowing = + currentStatus === ContentPreferenceStatus.Follow || + currentStatus === ContentPreferenceStatus.Subscribed; + const haveNotificationsOn = + currentStatus === ContentPreferenceStatus.Subscribed; + + useEffect(() => { + const previousStatus = prevStatusRef.current; + + if (previousStatus === currentStatus) { + return; + } + + const wasFollowing = + previousStatus === ContentPreferenceStatus.Follow || + previousStatus === ContentPreferenceStatus.Subscribed; + + if (showNotificationCtaOnFollow && isNowFollowing && !wasFollowing) { + setShowNotificationCta(true); + } else if (!isNowFollowing && wasFollowing) { + setShowNotificationCta(false); + } + + prevStatusRef.current = currentStatus; + }, [currentStatus, isNowFollowing, showNotificationCtaOnFollow]); + + useEffect(() => { + const wasAuthorPostUpvoted = prevAuthorPostUpvotedRef.current; + + if (wasAuthorPostUpvoted === isAuthorPostUpvoted) { + return; + } + + if ( + showNotificationCtaOnUpvote && + isAuthorPostUpvoted && + !wasAuthorPostUpvoted && + !haveNotificationsOn + ) { + setShowNotificationCta(true); + } + + prevAuthorPostUpvotedRef.current = isAuthorPostUpvoted; + }, [ + haveNotificationsOn, + isAuthorPostUpvoted, + showNotificationCtaOnUpvote, + ]); const options: MenuItemProps[] = [ { icon: , @@ -121,6 +184,19 @@ const UserEntityCard = ({ user, className }: Props) => { return null; } + const handleEnableNotifications = async () => { + if (!id || !username) { + throw new Error('Cannot subscribe to notifications without user id'); + } + + await subscribe({ + id, + entity: ContentPreferenceType.User, + entityName: username, + }); + setShowNotificationCta(false); + }; + return ( { /> {bio && } + {showNotificationCta && !haveNotificationsOn && ( + + )} ); diff --git a/packages/shared/src/components/feeds/FeedContainer.tsx b/packages/shared/src/components/feeds/FeedContainer.tsx index 3380363c2aa..18f08c68081 100644 --- a/packages/shared/src/components/feeds/FeedContainer.tsx +++ b/packages/shared/src/components/feeds/FeedContainer.tsx @@ -34,6 +34,7 @@ import { TargetId } from '../../lib/log'; export interface FeedContainerProps { children: ReactNode; + topContent?: ReactNode; header?: ReactNode; footer?: ReactNode; className?: string; @@ -148,6 +149,7 @@ const feedNameToHeading: Record< export const FeedContainer = ({ children, + topContent, header, footer, className, @@ -290,6 +292,7 @@ export const FeedContainer = ({ data-testid="posts-feed" > {inlineHeader && header} + {topContent} {isSearch && !shouldUseListFeedLayout && ( { @@ -170,45 +176,54 @@ export const StreakRecoverOptout = ({ ); const StreakRecoverNotificationReminder = () => { - const { shouldShowCta, onEnable } = useEnableNotification({ - source: NotificationPromptSource.SourceSubscribe, - }); + const { isSubscribed, isInitialized, isPushSupported } = + usePushNotificationContext(); + const [isAlertShown, setIsAlertShown] = usePersistentContext( + PersistentContextKeys.StreakAlertPushKey, + true, + ); + const { onTogglePermission } = usePushNotificationMutation(); + const showAlert = isPushSupported && isAlertShown && isInitialized && !isSubscribed; - if (!shouldShowCta) { + if (!showAlert) { return null; } return ( -
- - Never lose your streak again. - - - + > + Enable notification + + +
); }; diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index 4bab786ba95..978d1784d02 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -23,6 +23,7 @@ type EnableNotificationProps = { className?: string; label?: string; onEnableAction?: () => Promise | unknown; + ignoreDismissState?: boolean; }; const containerClassName: Record = { @@ -73,9 +74,10 @@ function EnableNotification({ className, label, onEnableAction, + ignoreDismissState = false, }: EnableNotificationProps): ReactElement | null { const { shouldShowCta, acceptedJustNow, onEnable, onDismiss } = - useEnableNotification({ source }); + useEnableNotification({ source, ignoreDismissState }); if (!shouldShowCta) { return null; diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx index 26d75c214aa..2da6ffbb59f 100644 --- a/packages/shared/src/components/post/PostActions.tsx +++ b/packages/shared/src/components/post/PostActions.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import type { QueryKey } from '@tanstack/react-query'; import classNames from 'classnames'; import { @@ -15,7 +15,6 @@ import { QuaternaryButton } from '../buttons/QuaternaryButton'; import type { PostOrigin } from '../../hooks/log/useLogContextData'; import { useMutationSubscription, useVotePost } from '../../hooks'; import { Origin } from '../../lib/log'; -import ConditionalWrapper from '../ConditionalWrapper'; import { PostTagsPanel } from './block/PostTagsPanel'; import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel'; import { useBookmarkPost } from '../../hooks/useBookmarkPost'; @@ -32,6 +31,11 @@ import type { LoggedUser } from '../../lib/user'; import { useCanAwardUser } from '../../hooks/useCoresFeature'; import { useUpdateQuery } from '../../hooks/useUpdateQuery'; import { Tooltip } from '../tooltip/Tooltip'; +import EnableNotificationsCta from '../cards/entity/EnableNotificationsCta'; +import { useContentPreferenceStatusQuery } from '../../hooks/contentPreference/useContentPreferenceStatusQuery'; +import { useContentPreference } from '../../hooks/contentPreference/useContentPreference'; +import { ContentPreferenceStatus, ContentPreferenceType } from '../../graphql/contentPreference'; +import ConditionalWrapper from '../ConditionalWrapper'; interface PostActionsProps { post: Post; @@ -49,13 +53,20 @@ export function PostActions({ }: PostActionsProps): ReactElement { const { showLogin, user } = useAuthContext(); const { openModal } = useLazyModal(); + const creator = post.author || post.scout; const { data, onShowPanel, onClose } = useBlockPostPanel(post); const { showTagsPanel } = data; + const [showNotificationCta, setShowNotificationCta] = useState(false); const actionsRef = useRef(null); const canAward = useCanAwardUser({ sendingUser: user, receivingUser: post.author as LoggedUser, }); + const { subscribe } = useContentPreference(); + const { data: creatorContentPreference } = useContentPreferenceStatusQuery({ + id: creator?.id, + entity: ContentPreferenceType.User, + }); const { toggleUpvote, toggleDownvote } = useVotePost(); const isUpvoteActive = post?.userState?.vote === UserVote.Up; @@ -68,11 +79,23 @@ export function PostActions({ }; const onToggleUpvote = async () => { + const isNewUpvote = post?.userState?.vote !== UserVote.Up; + if (post?.userState?.vote === UserVote.None) { onClose(true); } await toggleUpvote({ payload: post, origin }); + + if (!isNewUpvote) { + return; + } + + if (creatorContentPreference?.status === ContentPreferenceStatus.Subscribed) { + return; + } + + setShowNotificationCta(true); }; const onToggleDownvote = async () => { @@ -155,6 +178,10 @@ export function PostActions({ }, }); + useEffect(() => { + setShowNotificationCta(false); + }, [post.id]); + useEffect(() => { const adjustActions = () => { const actions = actionsRef.current; @@ -187,16 +214,21 @@ export function PostActions({ // for labels is executed after the DOM is updated with the new state. }, [post?.userState?.awarded, canAward]); + const handleEnableNotifications = async () => { + if (!creator?.id || !creator?.username) { + throw new Error('Cannot subscribe to notifications without creator id'); + } + + await subscribe({ + id: creator.id, + entity: ContentPreferenceType.User, + entityName: creator.username, + }); + setShowNotificationCta(false); + }; + return ( - ( -
- {children} - -
- )} - > +
- + {showNotificationCta && ( + + )} + {showTagsPanel !== undefined && ( + + )} +
); } diff --git a/packages/shared/src/components/post/PostWidgets.tsx b/packages/shared/src/components/post/PostWidgets.tsx index 7f5ba26ba47..be7bc5df54a 100644 --- a/packages/shared/src/components/post/PostWidgets.tsx +++ b/packages/shared/src/components/post/PostWidgets.tsx @@ -12,6 +12,7 @@ import { FooterLinks } from '../footer'; import type { UserShortProfile } from '../../lib/user'; import type { SourceTooltip } from '../../graphql/sources'; import { SourceType } from '../../graphql/sources'; +import { UserVote } from '../../graphql/posts'; import EntityCardSkeleton from '../cards/entity/EntityCardSkeleton'; import { PostSidebarAdWidget } from './PostSidebarAdWidget'; @@ -63,6 +64,9 @@ export function PostWidgets({ }} handle={post.source.handle} origin={origin} + showNotificationCtaOnJoin + showNotificationCtaOnUpvote + isSquadPostUpvoted={post.userState?.vote === UserVote.Up} /> ) : ( )} ) : ( )} void | Promise; +}; + +export const StreakNotificationReminder = ({ + onEnable, +}: StreakNotificationReminderProps): ReactElement => { + return ( +
+ + Never lose your streak again. + + + +
+ ); +}; diff --git a/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx b/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx index 1b53501fad0..7279c8ee768 100644 --- a/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx +++ b/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx @@ -34,7 +34,6 @@ import { } from '../../../lib/log'; import { useSettingsContext } from '../../../contexts/SettingsContext'; import Link from '../../utilities/Link'; -import { usePushNotificationContext } from '../../../contexts/PushNotificationContext'; import usePersistentContext, { PersistentContextKeys, } from '../../../hooks/usePersistentContext'; @@ -43,8 +42,9 @@ import { TypographyColor, TypographyType, } from '../../typography/Typography'; -import { cloudinaryNotificationsBrowser } from '../../../lib/image'; import { usePushNotificationMutation } from '../../../hooks/notifications'; +import { NotificationSvg } from '../../notifications/NotificationSvg'; +import { usePushNotificationContext } from '../../../contexts/PushNotificationContext'; import { IconSize } from '../../Icon'; import { Tooltip } from '../../tooltip/Tooltip'; @@ -131,14 +131,12 @@ export function ReadingStreakPopup({ PersistentContextKeys.StreakAlertPushKey, true, ); - const { onTogglePermission, acceptedJustNow } = usePushNotificationMutation(); + const forceNotificationCtaFromUrl = + globalThis?.location?.search?.includes('forceNotificationCta=1') ?? false; - const showAlert = - isPushSupported && - isAlertShown && - isInitialized && - (!isSubscribed || acceptedJustNow); + // TODO(debug): hardcoded to always show — remove before merging + const showAlert = true; const streaks = useMemo(() => { const today = new Date(); @@ -317,7 +315,7 @@ export function ReadingStreakPopup({ {showAlert && (
- {!isSubscribed && ( + {(!isSubscribed || true) && ( <>
-
- A sample browser notification +
+
@@ -356,9 +351,8 @@ export function ReadingStreakPopup({
)} - {acceptedJustNow && ( - <> +
@@ -376,7 +370,7 @@ export function ReadingStreakPopup({ can be done anytime through account details
- +
)}
)} diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index b8ed35cfdeb..19f1589b0c4 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -16,6 +16,7 @@ const isTruthySessionFlag = (value: string | null): boolean => interface UseEnableNotificationProps { source: NotificationPromptSource; + ignoreDismissState?: boolean; } interface UseEnableNotification { @@ -27,6 +28,7 @@ interface UseEnableNotification { export const useEnableNotification = ({ source = NotificationPromptSource.NotificationsPage, + ignoreDismissState = false, }: UseEnableNotificationProps): UseEnableNotification => { const isCommentUpvoteSource = source === NotificationPromptSource.CommentUpvote; const isExtension = checkIsExtension(); @@ -52,6 +54,9 @@ export const useEnableNotification = ({ globalThis?.location?.search?.includes('forceBottomHero=1') ?? false; const forceTopHeroFromUrl = globalThis?.location?.search?.includes('forceTopHero=1') ?? false; + const forceSquadNotificationCtaFromUrl = + globalThis?.location?.search?.includes('forceSquadNotificationCta=1') ?? + false; const forceUpvoteNotificationCtaFromSession = isTruthySessionFlag( globalThis?.sessionStorage?.getItem( FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY, @@ -60,6 +65,9 @@ export const useEnableNotification = ({ const shouldForceUpvoteNotificationCtaForSession = source === NotificationPromptSource.CommentUpvote && (forceUpvoteNotificationCtaFromSession || forceUpvoteNotificationCtaFromUrl); + const shouldForceSquadNotificationCta = + source === NotificationPromptSource.SquadPage && + forceSquadNotificationCtaFromUrl; const shouldForcePopupNotificationCta = forcePopupNotificationCtaFromUrl || forceNotificationCtaFromUrl; const shouldHideNotificationCtaForBottomHero = @@ -76,10 +84,13 @@ export const useEnableNotification = ({ const shouldIgnoreDismissStateForSource = source === NotificationPromptSource.PostTagFollow || source === NotificationPromptSource.NewComment || - source === NotificationPromptSource.CommentUpvote; + source === NotificationPromptSource.CommentUpvote || + source === NotificationPromptSource.SquadPage; const effectiveIsDismissed = + ignoreDismissState || shouldIgnoreDismissStateForSource || shouldForceUpvoteNotificationCtaForSession || + shouldForceSquadNotificationCta || shouldForcePopupNotificationCta ? false : isDismissed; @@ -122,7 +133,8 @@ export const useEnableNotification = ({ ? (shouldForcePopupNotificationCta || isLoaded) && !effectiveIsDismissed : isCommentUpvoteSource ? !effectiveIsDismissed - : (conditions.every(Boolean) || + : (shouldForceSquadNotificationCta || + conditions.every(Boolean) || (enabledJustNow && source !== NotificationPromptSource.SquadPostModal)) && !effectiveIsDismissed) && !shouldHideNotificationCtaForBottomHero; diff --git a/packages/shared/src/hooks/usePostModalNavigation.ts b/packages/shared/src/hooks/usePostModalNavigation.ts index 42746efd0c0..0ca267d72f5 100644 --- a/packages/shared/src/hooks/usePostModalNavigation.ts +++ b/packages/shared/src/hooks/usePostModalNavigation.ts @@ -74,6 +74,9 @@ export const usePostModalNavigation = ({ const pmid = router.query?.pmid as string; const { logEvent } = useLogContext(); const [isFetchingNextPage, setIsFetchingNextPage] = useState(false); + const [selectedPostFallback, setSelectedPostFallback] = useState( + null, + ); const scrollPositionOnFeed = useRef(0); // if multiple feeds/hooks are rendered prevent effects from running while other modal is open @@ -257,7 +260,28 @@ export const usePostModalNavigation = ({ } }, [openedPostIndex, pmid, items, onChangeSelected, isNavigationActive]); - const selectedPostIsAd = isBoostedPostAd(items[openedPostIndex]); + const selectedPost = useMemo(() => { + if (typeof openedPostIndex !== 'undefined') { + return getPost(openedPostIndex); + } + + return null; + }, [getPost, openedPostIndex]); + + useEffect(() => { + if (selectedPost) { + setSelectedPostFallback(selectedPost); + return; + } + + if (!pmid) { + setSelectedPostFallback(null); + } + }, [pmid, selectedPost]); + + const activeSelectedPost = selectedPost ?? selectedPostFallback; + const selectedPostIsAd = + typeof openedPostIndex !== 'undefined' && isBoostedPostAd(items[openedPostIndex]); const result = { postPosition: getPostPosition(), isFetchingNextPage: false, @@ -281,6 +305,10 @@ export const usePostModalNavigation = ({ }, onOpenModal, onPrevious: () => { + if (typeof openedPostIndex === 'undefined') { + return; + } + let index = openedPostIndex - 1; // look for the first post before the current one while (index > 0 && !isPostItem(items[index])) { @@ -302,6 +330,10 @@ export const usePostModalNavigation = ({ onChangeSelected(index); }, onNext: async () => { + if (typeof openedPostIndex === 'undefined') { + return; + } + let index = openedPostIndex + 1; // eslint-disable-next-line no-empty for (; index < items.length && !isPostItem(items[index]); index += 1) {} @@ -330,8 +362,8 @@ export const usePostModalNavigation = ({ ); onChangeSelected(index); }, - selectedPost: getPost(openedPostIndex), - selectedPostIndex: openedPostIndex, + selectedPost: activeSelectedPost, + selectedPostIndex: openedPostIndex ?? -1, }; const parent = typeof window !== 'undefined' ? window : null; diff --git a/packages/webapp/pages/notifications.tsx b/packages/webapp/pages/notifications.tsx index 0b0ad58cb95..ea56558666d 100644 --- a/packages/webapp/pages/notifications.tsx +++ b/packages/webapp/pages/notifications.tsx @@ -116,7 +116,7 @@ const Notifications = (): ReactElement => {
- + {!showPushBanner && }

import(/* webpackChunkName: "404" */ '../../404'), @@ -175,77 +164,12 @@ const SquadPage = ({ const { openModal } = useLazyModal(); useJoinReferral(); const { logEvent } = useLogContext(); - const { displayToast } = useToastNotification(); const { sidebarRendered } = useSidebarRendered(); const { shouldUseListFeedLayout, shouldUseListMode } = useFeedLayout(); const { user, isFetched: isBootFetched } = useAuthContext(); const [loggedImpression, setLoggedImpression] = useState(false); const { squad, isLoading, isFetched, isForbidden } = useSquad({ handle }); const squadId = squad?.id; - const shownToastForSquadInSession = useRef>({}); - const squadNotificationToastState = useMemo( - () => createSquadNotificationToastStateStore(user?.id), - [user?.id], - ); - const { shouldShowCta, onEnable } = useEnableNotification({ - source: NotificationPromptSource.SquadPage, - }); - - useEffect(() => { - if ( - !shouldShowCta || - !squadId || - !isFetched || - shownToastForSquadInSession.current[squadId] - ) { - return; - } - - const shouldShowToast = squadNotificationToastState.registerToastView({ - squadId, - isSquadMember: !!squad?.currentMember, - }); - if (!shouldShowToast) { - return; - } - - shownToastForSquadInSession.current[squadId] = true; - - displayToast('Get notified about new Squad activity.', { - subject: ToastSubject.Feed, - persistent: true, - action: { - copy: 'Turn on', - onClick: async () => { - const didEnable = await onEnable(); - if (!didEnable) { - squadNotificationToastState.dismissUntilTomorrow({ squadId }); - } - - return didEnable; - }, - buttonProps: { - size: ButtonSize.Small, - variant: ButtonVariant.Primary, - icon: ( - - ), - iconPosition: ButtonIconPosition.Left, - }, - }, - onClose: () => { - squadNotificationToastState.dismissUntilTomorrow({ squadId }); - }, - }); - }, [ - displayToast, - isFetched, - onEnable, - shouldShowCta, - squad?.currentMember, - squadId, - squadNotificationToastState, - ]); useEffect(() => { if (loggedImpression || !squadId) { @@ -351,23 +275,17 @@ const SquadPage = ({ /> )} -
+ Date: Tue, 17 Mar 2026 15:25:55 +0200 Subject: [PATCH 14/34] fix(shared): address CI lint errors and Claude review feedback MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix React Rules of Hooks violation in SquadEntityCard (hooks after early return) - Remove debug hardcoding in ReadingStreakPopup (showAlert=true, isSubscribed||true) - Restore guarded StreakRecoverModal body (remove mock data and commented code) - Fix wrong analytics event in ReadingStreakPopup (DisableNotification → EnableNotification) - Refactor nested ternary in useEnableNotification into readable helper function - Deduplicate @keyframes enable-notification-bell-ring into base.css (was in 4 inline styles) - Remove unused import (ButtonColor in StreakRecoverModal) - Fix prettier formatting across all changed files Made-with: Cursor --- packages/shared/src/components/Feed.tsx | 6 +- .../banners/ReadingReminderHero.tsx | 11 - .../cards/entity/EnableNotificationsCta.tsx | 17 +- .../cards/entity/SquadEntityCard.tsx | 10 +- .../cards/entity/UserEntityCard.tsx | 6 +- .../modals/streaks/StreakRecoverModal.tsx | 52 +- .../notifications/EnableNotification.tsx | 61 +- .../src/components/post/PostActions.tsx | 9 +- .../streak/StreakNotificationReminder.tsx | 18 +- .../streak/popup/ReadingStreakPopup.tsx | 13 +- .../notifications/useEnableNotification.ts | 36 +- .../src/hooks/usePostModalNavigation.ts | 3 +- packages/shared/src/styles/base.css | 926 ++++++++++++++---- 13 files changed, 846 insertions(+), 322 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index cd12604f34d..797d1d052bf 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -476,7 +476,11 @@ export default function Feed({ }, []); useEffect(() => { - if (forceBottomHeroFromUrl || forceInFeedHeroFromUrl || hasScrolledForHero) { + if ( + forceBottomHeroFromUrl || + forceInFeedHeroFromUrl || + hasScrolledForHero + ) { return undefined; } diff --git a/packages/shared/src/components/banners/ReadingReminderHero.tsx b/packages/shared/src/components/banners/ReadingReminderHero.tsx index 22483012318..686f8653307 100644 --- a/packages/shared/src/components/banners/ReadingReminderHero.tsx +++ b/packages/shared/src/components/banners/ReadingReminderHero.tsx @@ -39,17 +39,6 @@ const ReadingReminderHero = ({ > Turn on your daily reading reminder and keep your routine. -
-
); }; diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx index 928972a7605..f9bfb7483c3 100644 --- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx @@ -53,11 +53,7 @@ const SquadEntityCard = ({ source: squad, }); - if (!squad) { - return null; - } - - const isSquadMember = !!squad.currentMember; + const isSquadMember = !!squad?.currentMember; useEffect(() => { if ( @@ -92,6 +88,10 @@ const SquadEntityCard = ({ setShowNotificationCta(false); }; + if (!squad) { + return null; + } + const { description, name, image, membersCount, flags, permalink } = squad || {}; return ( diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx index 4bda57e9a45..5b295e7709d 100644 --- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx @@ -132,11 +132,7 @@ const UserEntityCard = ({ } prevAuthorPostUpvotedRef.current = isAuthorPostUpvoted; - }, [ - haveNotificationsOn, - isAuthorPostUpvoted, - showNotificationCtaOnUpvote, - ]); + }, [haveNotificationsOn, isAuthorPostUpvoted, showNotificationCtaOnUpvote]); const options: MenuItemProps[] = [ { icon: , diff --git a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx index 5b9babdc7b6..71ba2eddb55 100644 --- a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx +++ b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx @@ -12,12 +12,7 @@ import { TypographyType, } from '../../typography/Typography'; import type { ButtonProps } from '../../buttons/Button'; -import { - Button, - ButtonColor, - ButtonSize, - ButtonVariant, -} from '../../buttons/Button'; +import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button'; import type { UseStreakRecoverReturn } from '../../../hooks/streaks/useStreakRecover'; import { useStreakRecover } from '../../../hooks/streaks/useStreakRecover'; import { Checkbox } from '../../fields/Checkbox'; @@ -183,7 +178,8 @@ const StreakRecoverNotificationReminder = () => { true, ); const { onTogglePermission } = usePushNotificationMutation(); - const showAlert = isPushSupported && isAlertShown && isInitialized && !isSubscribed; + const showAlert = + isPushSupported && isAlertShown && isInitialized && !isSubscribed; if (!showAlert) { return null; @@ -240,47 +236,6 @@ export const StreakRecoverModal = ( onRequestClose, }); - // TODO(debug): force-open for preview — remove before merging - const mockRecover: UserStreakRecoverData = { - canRecover: true, - cost: 0, - oldStreakLength: 14, - regularCost: 100, - }; - - return ( - - - - {} }} - /> -
- - - - -
- - - - ); - - /* Original guarded version — restore when done previewing: if (!user || !isStreaksEnabled || !recover.canRecover || recover.isLoading) { return null; } @@ -317,7 +272,6 @@ export const StreakRecoverModal = ( ); - */ }; export default StreakRecoverModal; diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index 978d1784d02..28be74349b1 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -1,11 +1,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import { - Button, - ButtonSize, - ButtonVariant, -} from '../buttons/Button'; +import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; import CloseButton from '../CloseButton'; import { cloudinaryNotificationsBrowserEnabled, @@ -210,19 +206,6 @@ function EnableNotification({ className, )} > - {shouldAnimateBellCta && ( - - )}
{source === NotificationPromptSource.NotificationsPage && ( @@ -329,25 +314,25 @@ function EnableNotification({ {!acceptedJustNow && !shouldInlineActionWithMessage && !shouldUseVerticalContentLayout && ( - - )} + + )} {showTextCloseButton && ( -
); }; diff --git a/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx b/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx index 7279c8ee768..81a2c495f41 100644 --- a/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx +++ b/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx @@ -132,11 +132,12 @@ export function ReadingStreakPopup({ true, ); const { onTogglePermission, acceptedJustNow } = usePushNotificationMutation(); - const forceNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forceNotificationCta=1') ?? false; - // TODO(debug): hardcoded to always show — remove before merging - const showAlert = true; + const showAlert = + isPushSupported && + isAlertShown && + isInitialized && + (!isSubscribed || acceptedJustNow); const streaks = useMemo(() => { const today = new Date(); @@ -166,7 +167,7 @@ export function ReadingStreakPopup({ const onTogglePush = async () => { logEvent({ - event_name: LogEvent.DisableNotification, + event_name: LogEvent.EnableNotification, extra: JSON.stringify({ channel: NotificationChannel.Web, category: NotificationCategory.Product, @@ -315,7 +316,7 @@ export function ReadingStreakPopup({
{showAlert && (
- {(!isSubscribed || true) && ( + {!isSubscribed && ( <>
{ - const isCommentUpvoteSource = source === NotificationPromptSource.CommentUpvote; + const isCommentUpvoteSource = + source === NotificationPromptSource.CommentUpvote; const isExtension = checkIsExtension(); const { logEvent } = useLogContext(); const hasLoggedImpression = useRef(false); @@ -64,7 +65,8 @@ export const useEnableNotification = ({ ); const shouldForceUpvoteNotificationCtaForSession = source === NotificationPromptSource.CommentUpvote && - (forceUpvoteNotificationCtaFromSession || forceUpvoteNotificationCtaFromUrl); + (forceUpvoteNotificationCtaFromSession || + forceUpvoteNotificationCtaFromUrl); const shouldForceSquadNotificationCta = source === NotificationPromptSource.SquadPage && forceSquadNotificationCtaFromUrl; @@ -128,16 +130,28 @@ export const useEnableNotification = ({ isPushSupported || isExtension, ]; + const computeShouldShowCta = (): boolean => { + if (shouldForceCtaInDevelopment) { + return ( + (shouldForcePopupNotificationCta || isLoaded) && !effectiveIsDismissed + ); + } + + if (isCommentUpvoteSource) { + return !effectiveIsDismissed; + } + + return ( + (shouldForceSquadNotificationCta || + conditions.every(Boolean) || + (enabledJustNow && + source !== NotificationPromptSource.SquadPostModal)) && + !effectiveIsDismissed + ); + }; + const shouldShowCta = - (shouldForceCtaInDevelopment - ? (shouldForcePopupNotificationCta || isLoaded) && !effectiveIsDismissed - : isCommentUpvoteSource - ? !effectiveIsDismissed - : (shouldForceSquadNotificationCta || - conditions.every(Boolean) || - (enabledJustNow && - source !== NotificationPromptSource.SquadPostModal)) && - !effectiveIsDismissed) && !shouldHideNotificationCtaForBottomHero; + computeShouldShowCta() && !shouldHideNotificationCtaForBottomHero; useEffect(() => { if (!shouldShowCta || hasLoggedImpression.current) { diff --git a/packages/shared/src/hooks/usePostModalNavigation.ts b/packages/shared/src/hooks/usePostModalNavigation.ts index 0ca267d72f5..8a968534447 100644 --- a/packages/shared/src/hooks/usePostModalNavigation.ts +++ b/packages/shared/src/hooks/usePostModalNavigation.ts @@ -281,7 +281,8 @@ export const usePostModalNavigation = ({ const activeSelectedPost = selectedPost ?? selectedPostFallback; const selectedPostIsAd = - typeof openedPostIndex !== 'undefined' && isBoostedPostAd(items[openedPostIndex]); + typeof openedPostIndex !== 'undefined' && + isBoostedPostAd(items[openedPostIndex]); const result = { postPosition: getPostPosition(), isFetchingNextPage: false, diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css index 9198b81f200..4cb62ef1b20 100644 --- a/packages/shared/src/styles/base.css +++ b/packages/shared/src/styles/base.css @@ -1,4 +1,5 @@ -html, #daily-companion-wrapper { +html, +#daily-companion-wrapper { background: var(--theme-background-default); color: var(--theme-text-primary); height: stretch; @@ -58,28 +59,44 @@ body { --theme-accent-burger-subtle: theme('colors.raw.burger.30'); --theme-accent-burger-default: theme('colors.raw.burger.40'); --theme-accent-burger-bolder: theme('colors.raw.burger.50'); - --theme-accent-burger-flat: color-mix(in srgb, var(--theme-accent-burger-default) 16%, var(--theme-background-default)); + --theme-accent-burger-flat: color-mix( + in srgb, + var(--theme-accent-burger-default) 16%, + var(--theme-background-default) + ); /* Blue Cheese */ --theme-accent-blueCheese-subtlest: theme('colors.raw.blueCheese.10'); --theme-accent-blueCheese-subtler: theme('colors.raw.blueCheese.20'); --theme-accent-blueCheese-subtle: theme('colors.raw.blueCheese.30'); --theme-accent-blueCheese-default: theme('colors.raw.blueCheese.40'); --theme-accent-blueCheese-bolder: theme('colors.raw.blueCheese.50'); - --theme-accent-blueCheese-flat: color-mix(in srgb, var(--theme-accent-blueCheese-default) 16%, var(--theme-background-default)); + --theme-accent-blueCheese-flat: color-mix( + in srgb, + var(--theme-accent-blueCheese-default) 16%, + var(--theme-background-default) + ); /* Avocado */ --theme-accent-avocado-subtlest: theme('colors.raw.avocado.10'); --theme-accent-avocado-subtler: theme('colors.raw.avocado.20'); --theme-accent-avocado-subtle: theme('colors.raw.avocado.30'); --theme-accent-avocado-default: theme('colors.raw.avocado.40'); --theme-accent-avocado-bolder: theme('colors.raw.avocado.50'); - --theme-accent-avocado-flat: color-mix(in srgb, var(--theme-accent-avocado-default) 16%, var(--theme-background-default)); + --theme-accent-avocado-flat: color-mix( + in srgb, + var(--theme-accent-avocado-default) 16%, + var(--theme-background-default) + ); /* Cheese */ --theme-accent-cheese-subtlest: theme('colors.raw.cheese.10'); --theme-accent-cheese-subtler: theme('colors.raw.cheese.20'); --theme-accent-cheese-subtle: theme('colors.raw.cheese.30'); --theme-accent-cheese-default: theme('colors.raw.cheese.40'); --theme-accent-cheese-bolder: theme('colors.raw.cheese.50'); - --theme-accent-cheese-flat: color-mix(in srgb, var(--theme-accent-cheese-default) 16%, var(--theme-background-default)); + --theme-accent-cheese-flat: color-mix( + in srgb, + var(--theme-accent-cheese-default) 16%, + var(--theme-background-default) + ); /* Salt */ --theme-accent-salt-baseline: theme('colors.raw.salt.0'); --theme-accent-salt-subtlest: theme('colors.raw.salt.20'); @@ -87,7 +104,11 @@ body { --theme-accent-salt-subtle: theme('colors.raw.salt.70'); --theme-accent-salt-default: theme('colors.raw.salt.90'); --theme-accent-salt-bolder: theme('colors.raw.pepper.10'); - --theme-accent-salt-flat: color-mix(in srgb, var(--theme-accent-salt-default) 16%, var(--theme-background-default)); + --theme-accent-salt-flat: color-mix( + in srgb, + var(--theme-accent-salt-default) 16%, + var(--theme-background-default) + ); /* Onion */ --theme-accent-onion-baseline: theme('colors.raw.onion.0'); --theme-accent-onion-subtlest: theme('colors.raw.onion.10'); @@ -95,14 +116,22 @@ body { --theme-accent-onion-subtle: theme('colors.raw.onion.30'); --theme-accent-onion-default: theme('colors.raw.onion.40'); --theme-accent-onion-bolder: theme('colors.raw.onion.50'); - --theme-accent-onion-flat: color-mix(in srgb, var(--theme-accent-onion-default) 16%, var(--theme-background-default)); + --theme-accent-onion-flat: color-mix( + in srgb, + var(--theme-accent-onion-default) 16%, + var(--theme-background-default) + ); /* Water */ --theme-accent-water-subtlest: theme('colors.raw.water.10'); --theme-accent-water-subtler: theme('colors.raw.water.20'); --theme-accent-water-subtle: theme('colors.raw.water.30'); --theme-accent-water-default: theme('colors.raw.water.40'); --theme-accent-water-bolder: theme('colors.raw.water.50'); - --theme-accent-water-flat: color-mix(in srgb, var(--theme-accent-water-default) 16%, var(--theme-background-default)); + --theme-accent-water-flat: color-mix( + in srgb, + var(--theme-accent-water-default) 16%, + var(--theme-background-default) + ); /* Pepper */ --theme-accent-pepper-baseline: theme('colors.raw.pepper.90'); --theme-accent-pepper-subtlest: theme('colors.raw.pepper.80'); @@ -110,28 +139,44 @@ body { --theme-accent-pepper-subtle: theme('colors.raw.pepper.30'); --theme-accent-pepper-default: theme('colors.raw.pepper.10'); --theme-accent-pepper-bolder: theme('colors.raw.salt.90'); - --theme-accent-pepper-flat: color-mix(in srgb, var(--theme-accent-pepper-default) 16%, var(--theme-background-default)); + --theme-accent-pepper-flat: color-mix( + in srgb, + var(--theme-accent-pepper-default) 16%, + var(--theme-background-default) + ); /* Lettuce */ --theme-accent-lettuce-subtlest: theme('colors.raw.lettuce.10'); --theme-accent-lettuce-subtler: theme('colors.raw.lettuce.20'); --theme-accent-lettuce-subtle: theme('colors.raw.lettuce.30'); --theme-accent-lettuce-default: theme('colors.raw.lettuce.40'); --theme-accent-lettuce-bolder: theme('colors.raw.lettuce.50'); - --theme-accent-lettuce-flat: color-mix(in srgb, var(--theme-accent-lettuce-default) 16%, var(--theme-background-default)); + --theme-accent-lettuce-flat: color-mix( + in srgb, + var(--theme-accent-lettuce-default) 16%, + var(--theme-background-default) + ); /* Bun */ --theme-accent-bun-subtlest: theme('colors.raw.bun.10'); --theme-accent-bun-subtler: theme('colors.raw.bun.20'); --theme-accent-bun-subtle: theme('colors.raw.bun.30'); --theme-accent-bun-default: theme('colors.raw.bun.40'); --theme-accent-bun-bolder: theme('colors.raw.bun.50'); - --theme-accent-bun-flat: color-mix(in srgb, var(--theme-accent-bun-default) 16%, var(--theme-background-default)); + --theme-accent-bun-flat: color-mix( + in srgb, + var(--theme-accent-bun-default) 16%, + var(--theme-background-default) + ); /* Ketchup */ --theme-accent-ketchup-subtlest: theme('colors.raw.ketchup.10'); --theme-accent-ketchup-subtler: theme('colors.raw.ketchup.20'); --theme-accent-ketchup-subtle: theme('colors.raw.ketchup.30'); --theme-accent-ketchup-default: theme('colors.raw.ketchup.40'); --theme-accent-ketchup-bolder: theme('colors.raw.ketchup.50'); - --theme-accent-ketchup-flat: color-mix(in srgb, var(--theme-accent-ketchup-default) 16%, var(--theme-background-default)); + --theme-accent-ketchup-flat: color-mix( + in srgb, + var(--theme-accent-ketchup-default) 16%, + var(--theme-background-default) + ); /* Cabbage */ --theme-accent-cabbage-baseline: theme('colors.raw.cabbage.0'); --theme-accent-cabbage-subtlest: theme('colors.raw.cabbage.10'); @@ -139,97 +184,280 @@ body { --theme-accent-cabbage-subtle: theme('colors.raw.cabbage.30'); --theme-accent-cabbage-default: theme('colors.raw.cabbage.40'); --theme-accent-cabbage-bolder: theme('colors.raw.cabbage.50'); - --theme-accent-cabbage-flat: color-mix(in srgb, var(--theme-accent-cabbage-default) 16%, var(--theme-background-default)); + --theme-accent-cabbage-flat: color-mix( + in srgb, + var(--theme-accent-cabbage-default) 16%, + var(--theme-background-default) + ); /* Bacon */ --theme-accent-bacon-subtlest: theme('colors.raw.bacon.10'); --theme-accent-bacon-subtler: theme('colors.raw.bacon.20'); --theme-accent-bacon-subtle: theme('colors.raw.bacon.30'); --theme-accent-bacon-default: theme('colors.raw.bacon.40'); --theme-accent-bacon-bolder: theme('colors.raw.bacon.50'); - --theme-accent-bacon-flat: color-mix(in srgb, var(--theme-accent-bacon-default) 16%, var(--theme-background-default)); + --theme-accent-bacon-flat: color-mix( + in srgb, + var(--theme-accent-bacon-default) 16%, + var(--theme-background-default) + ); /* Brand */ --theme-brand-subtler: var(--theme-accent-cabbage-subtler); --theme-brand-default: var(--theme-accent-cabbage-default); --theme-brand-bolder: var(--theme-accent-cabbage-bolder); - --theme-brand-float: color-mix(in srgb, var(--theme-brand-bolder), transparent 92%); - --theme-brand-hover: color-mix(in srgb, var(--theme-brand-bolder), transparent 88%); - --theme-brand-active: color-mix(in srgb, var(--theme-brand-bolder), transparent 84%); + --theme-brand-float: color-mix( + in srgb, + var(--theme-brand-bolder), + transparent 92% + ); + --theme-brand-hover: color-mix( + in srgb, + var(--theme-brand-bolder), + transparent 88% + ); + --theme-brand-active: color-mix( + in srgb, + var(--theme-brand-bolder), + transparent 84% + ); /* Surface */ --theme-surface-primary: theme('colors.raw.salt.0'); --theme-surface-secondary: theme('colors.raw.salt.90'); --theme-surface-invert: theme('colors.raw.pepper.90'); - --theme-surface-float: color-mix(in srgb, var(--theme-surface-secondary), transparent 92%); - --theme-surface-hover: color-mix(in srgb, var(--theme-surface-secondary), transparent 88%); - --theme-surface-active: color-mix(in srgb, var(--theme-surface-secondary), transparent 84%); - --theme-surface-disabled: color-mix(in srgb, var(--theme-surface-secondary), transparent 80%); + --theme-surface-float: color-mix( + in srgb, + var(--theme-surface-secondary), + transparent 92% + ); + --theme-surface-hover: color-mix( + in srgb, + var(--theme-surface-secondary), + transparent 88% + ); + --theme-surface-active: color-mix( + in srgb, + var(--theme-surface-secondary), + transparent 84% + ); + --theme-surface-disabled: color-mix( + in srgb, + var(--theme-surface-secondary), + transparent 80% + ); --theme-surface-focus: theme('colors.raw.blueCheese.40'); /* Actions */ /* Upvote */ --theme-actions-upvote-default: var(--theme-accent-avocado-default); - --theme-actions-upvote-float: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 92%); - --theme-actions-upvote-hover: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 88%); - --theme-actions-upvote-active: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 84%); + --theme-actions-upvote-float: color-mix( + in srgb, + var(--theme-accent-avocado-bolder), + transparent 92% + ); + --theme-actions-upvote-hover: color-mix( + in srgb, + var(--theme-accent-avocado-bolder), + transparent 88% + ); + --theme-actions-upvote-active: color-mix( + in srgb, + var(--theme-accent-avocado-bolder), + transparent 84% + ); /* Downvote */ --theme-actions-downvote-default: var(--theme-accent-ketchup-default); - --theme-actions-downvote-float: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 92%); - --theme-actions-downvote-hover: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 88%); - --theme-actions-downvote-active: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 84%); + --theme-actions-downvote-float: color-mix( + in srgb, + var(--theme-accent-ketchup-bolder), + transparent 92% + ); + --theme-actions-downvote-hover: color-mix( + in srgb, + var(--theme-accent-ketchup-bolder), + transparent 88% + ); + --theme-actions-downvote-active: color-mix( + in srgb, + var(--theme-accent-ketchup-bolder), + transparent 84% + ); /* Comment */ --theme-actions-comment-default: var(--theme-accent-blueCheese-default); - --theme-actions-comment-float: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 92%); - --theme-actions-comment-hover: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 88%); - --theme-actions-comment-active: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 84%); + --theme-actions-comment-float: color-mix( + in srgb, + var(--theme-accent-blueCheese-bolder), + transparent 92% + ); + --theme-actions-comment-hover: color-mix( + in srgb, + var(--theme-accent-blueCheese-bolder), + transparent 88% + ); + --theme-actions-comment-active: color-mix( + in srgb, + var(--theme-accent-blueCheese-bolder), + transparent 84% + ); /* Bookmark */ --theme-actions-bookmark-default: var(--theme-accent-bun-default); - --theme-actions-bookmark-float: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 92%); - --theme-actions-bookmark-hover: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 88%); - --theme-actions-bookmark-active: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 84%); + --theme-actions-bookmark-float: color-mix( + in srgb, + var(--theme-accent-bun-bolder), + transparent 92% + ); + --theme-actions-bookmark-hover: color-mix( + in srgb, + var(--theme-accent-bun-bolder), + transparent 88% + ); + --theme-actions-bookmark-active: color-mix( + in srgb, + var(--theme-accent-bun-bolder), + transparent 84% + ); /* Share */ --theme-actions-share-default: var(--theme-accent-cabbage-default); - --theme-actions-share-float: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 92%); - --theme-actions-share-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 88%); - --theme-actions-share-active: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 84%); + --theme-actions-share-float: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 92% + ); + --theme-actions-share-hover: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 88% + ); + --theme-actions-share-active: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 84% + ); /* Plus */ --theme-actions-plus-default: var(--theme-accent-bacon-default); - --theme-actions-plus-float: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 92%); - --theme-actions-plus-hover: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 88%); - --theme-actions-plus-active: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 84%); + --theme-actions-plus-float: color-mix( + in srgb, + var(--theme-accent-bacon-bolder), + transparent 92% + ); + --theme-actions-plus-hover: color-mix( + in srgb, + var(--theme-accent-bacon-bolder), + transparent 88% + ); + --theme-actions-plus-active: color-mix( + in srgb, + var(--theme-accent-bacon-bolder), + transparent 84% + ); /* Help */ --theme-actions-help-default: var(--status-help); - --theme-actions-help-float: color-mix(in srgb, var(--theme-actions-help-default), transparent 92%); - --theme-actions-help-hover: color-mix(in srgb, var(--theme-actions-help-default), transparent 88%); - --theme-actions-help-active: color-mix(in srgb, var(--theme-actions-help-default), transparent 84%); + --theme-actions-help-float: color-mix( + in srgb, + var(--theme-actions-help-default), + transparent 92% + ); + --theme-actions-help-hover: color-mix( + in srgb, + var(--theme-actions-help-default), + transparent 88% + ); + --theme-actions-help-active: color-mix( + in srgb, + var(--theme-actions-help-default), + transparent 84% + ); /* Cores */ --theme-actions-cores-default: var(--theme-accent-cheese-default); - --theme-actions-cores-float: color-mix(in srgb, var(--theme-actions-cores-default), transparent 92%); - --theme-actions-cores-hover: color-mix(in srgb, var(--theme-actions-cores-default), transparent 88%); - --theme-actions-cores-active: color-mix(in srgb, var(--theme-actions-cores-default), transparent 84%); - + --theme-actions-cores-float: color-mix( + in srgb, + var(--theme-actions-cores-default), + transparent 92% + ); + --theme-actions-cores-hover: color-mix( + in srgb, + var(--theme-actions-cores-default), + transparent 88% + ); + --theme-actions-cores-active: color-mix( + in srgb, + var(--theme-actions-cores-default), + transparent 84% + ); /* Overlay */ - --theme-overlay-base-primary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 36%); - --theme-overlay-base-secondary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 60%); - --theme-overlay-base-tertiary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 68%); - --theme-overlay-base-quaternary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 76%); + --theme-overlay-base-primary: color-mix( + in srgb, + var(--theme-accent-onion-subtlest), + transparent 36% + ); + --theme-overlay-base-secondary: color-mix( + in srgb, + var(--theme-accent-onion-subtlest), + transparent 60% + ); + --theme-overlay-base-tertiary: color-mix( + in srgb, + var(--theme-accent-onion-subtlest), + transparent 68% + ); + --theme-overlay-base-quaternary: color-mix( + in srgb, + var(--theme-accent-onion-subtlest), + transparent 76% + ); /* Dark */ - --theme-overlay-dark-dark1: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 68%); - --theme-overlay-dark-dark2: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 60%); - --theme-overlay-dark-dark3: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%); + --theme-overlay-dark-dark1: color-mix( + in srgb, + theme('colors.raw.pepper.90'), + transparent 68% + ); + --theme-overlay-dark-dark2: color-mix( + in srgb, + theme('colors.raw.pepper.90'), + transparent 60% + ); + --theme-overlay-dark-dark3: color-mix( + in srgb, + theme('colors.raw.pepper.90'), + transparent 36% + ); /* Border */ /* Subtlest */ --theme-border-subtlest-primary: var(--theme-accent-salt-default); - --theme-border-subtlest-secondary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 60%); - --theme-border-subtlest-tertiary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 80%); - --theme-border-subtlest-quaternary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 92%); + --theme-border-subtlest-secondary: color-mix( + in srgb, + var(--theme-border-subtlest-primary), + transparent 60% + ); + --theme-border-subtlest-tertiary: color-mix( + in srgb, + var(--theme-border-subtlest-primary), + transparent 80% + ); + --theme-border-subtlest-quaternary: color-mix( + in srgb, + var(--theme-border-subtlest-primary), + transparent 92% + ); /* Bolder */ --theme-border-bolder-primary: var(--theme-accent-salt-bolder); - --theme-border-bolder-secondary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 60%); - --theme-border-bolder-tertiary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 80%); - --theme-border-bolder-quaternary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 92%); + --theme-border-bolder-secondary: color-mix( + in srgb, + var(--theme-border-bolder-primary), + transparent 60% + ); + --theme-border-bolder-tertiary: color-mix( + in srgb, + var(--theme-border-bolder-primary), + transparent 80% + ); + --theme-border-bolder-quaternary: color-mix( + in srgb, + var(--theme-border-bolder-primary), + transparent 92% + ); /* Status */ --status-error: var(--theme-accent-ketchup-default); @@ -242,39 +470,83 @@ body { --theme-text-primary: var(--theme-accent-salt-baseline); --theme-text-secondary: var(--theme-accent-salt-subtler); --theme-text-tertiary: var(--theme-accent-salt-default); - --theme-text-quaternary: color-mix(in srgb, var(--theme-accent-salt-default), transparent 36%); - --theme-text-disabled: color-mix(in srgb, var(--theme-accent-salt-default), transparent 68%); + --theme-text-quaternary: color-mix( + in srgb, + var(--theme-accent-salt-default), + transparent 36% + ); + --theme-text-disabled: color-mix( + in srgb, + var(--theme-accent-salt-default), + transparent 68% + ); --theme-text-link: var(--theme-accent-water-subtler); /* Highlight */ - --theme-text-highlight-default: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 76%); - --theme-text-highlight-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 68%); + --theme-text-highlight-default: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 76% + ); + --theme-text-highlight-hover: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 68% + ); /* Shadow */ - --theme-shadow-shadow1: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 68%); - --theme-shadow-shadow2: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 60%); - --theme-shadow-shadow3: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%); + --theme-shadow-shadow1: color-mix( + in srgb, + theme('colors.raw.pepper.90'), + transparent 68% + ); + --theme-shadow-shadow2: color-mix( + in srgb, + theme('colors.raw.pepper.90'), + transparent 60% + ); + --theme-shadow-shadow3: color-mix( + in srgb, + theme('colors.raw.pepper.90'), + transparent 36% + ); --theme-shadow-cabbage: theme('colors.raw.cabbage.40'); /* Blur */ - --theme-blur-blur-highlight: color-mix(in srgb, theme('colors.raw.pepper.70'), transparent 12%); - --theme-blur-blur-baseline: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 12%); - --theme-blur-blur-bg: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%); - --theme-blur-blur-glass: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 92%); + --theme-blur-blur-highlight: color-mix( + in srgb, + theme('colors.raw.pepper.70'), + transparent 12% + ); + --theme-blur-blur-baseline: color-mix( + in srgb, + theme('colors.raw.pepper.90'), + transparent 12% + ); + --theme-blur-blur-bg: color-mix( + in srgb, + theme('colors.raw.pepper.90'), + transparent 36% + ); + --theme-blur-blur-glass: color-mix( + in srgb, + theme('colors.raw.salt.90'), + transparent 92% + ); /** * Current old colors, these should all be changed to one of the above matching ones. */ - --theme-active: theme('colors.raw.salt.90')33; + --theme-active: theme('colors.raw.salt.90') 33; --theme-shadow2: theme('boxShadow.2-black'); --theme-shadow3: theme('boxShadow.3-black'); - --theme-post-disabled: theme('colors.raw.pepper.70')66; + --theme-post-disabled: theme('colors.raw.pepper.70') 66; --theme-overlay-quaternary: theme('colors.overlay.quaternary.white'); --theme-overlay-water: theme('colors.overlay.quaternary.water'); --theme-overlay-cabbage: theme('colors.overlay.quaternary.cabbage'); - --theme-overlay-from: theme('colors.raw.onion.40')30; - --theme-overlay-to: theme('colors.raw.cabbage.40')30; + --theme-overlay-from: theme('colors.raw.onion.40') 30; + --theme-overlay-to: theme('colors.raw.cabbage.40') 30; --theme-overlay-float-bun: theme('colors.overlay.float.bun'); --theme-overlay-float-blueCheese: theme('colors.overlay.float.blueCheese'); @@ -286,8 +558,8 @@ body { --theme-overlay-active-onion: theme('colors.overlay.active.onion'); --theme-overlay-active-salt: theme('colors.overlay.active.salt'); - --theme-gradient-cabbage: theme('colors.raw.cabbage.10')66; - --theme-gradient-onion: theme('colors.raw.onion.10')66; + --theme-gradient-cabbage: theme('colors.raw.cabbage.10') 66; + --theme-gradient-onion: theme('colors.raw.onion.10') 66; --theme-rank-highlight: theme('colors.raw.salt.10'); @@ -345,28 +617,44 @@ body { --theme-accent-burger-subtle: theme('colors.raw.burger.70'); --theme-accent-burger-default: theme('colors.raw.burger.60'); --theme-accent-burger-bolder: theme('colors.raw.burger.50'); - --theme-accent-burger-flat: color-mix(in srgb, var(--theme-accent-burger-default) 16%, var(--theme-background-default)); + --theme-accent-burger-flat: color-mix( + in srgb, + var(--theme-accent-burger-default) 16%, + var(--theme-background-default) + ); /* Blue Cheese */ --theme-accent-blueCheese-subtlest: theme('colors.raw.blueCheese.90'); --theme-accent-blueCheese-subtler: theme('colors.raw.blueCheese.80'); --theme-accent-blueCheese-subtle: theme('colors.raw.blueCheese.70'); --theme-accent-blueCheese-default: theme('colors.raw.blueCheese.60'); --theme-accent-blueCheese-bolder: theme('colors.raw.blueCheese.50'); - --theme-accent-blueCheese-flat: color-mix(in srgb, var(--theme-accent-blueCheese-default) 16%, var(--theme-background-default)); + --theme-accent-blueCheese-flat: color-mix( + in srgb, + var(--theme-accent-blueCheese-default) 16%, + var(--theme-background-default) + ); /* Avocado */ --theme-accent-avocado-subtlest: theme('colors.raw.avocado.90'); --theme-accent-avocado-subtler: theme('colors.raw.avocado.80'); --theme-accent-avocado-subtle: theme('colors.raw.avocado.70'); --theme-accent-avocado-default: theme('colors.raw.avocado.60'); --theme-accent-avocado-bolder: theme('colors.raw.avocado.50'); - --theme-accent-avocado-flat: color-mix(in srgb, var(--theme-accent-avocado-default) 16%, var(--theme-background-default)); + --theme-accent-avocado-flat: color-mix( + in srgb, + var(--theme-accent-avocado-default) 16%, + var(--theme-background-default) + ); /* Cheese */ --theme-accent-cheese-subtlest: theme('colors.raw.cheese.90'); --theme-accent-cheese-subtler: theme('colors.raw.cheese.80'); --theme-accent-cheese-subtle: theme('colors.raw.cheese.70'); --theme-accent-cheese-default: theme('colors.raw.cheese.60'); --theme-accent-cheese-bolder: theme('colors.raw.cheese.50'); - --theme-accent-cheese-flat: color-mix(in srgb, var(--theme-accent-cheese-default) 16%, var(--theme-background-default)); + --theme-accent-cheese-flat: color-mix( + in srgb, + var(--theme-accent-cheese-default) 16%, + var(--theme-background-default) + ); /* Salt */ --theme-accent-salt-baseline: theme('colors.raw.pepper.90'); --theme-accent-salt-subtlest: theme('colors.raw.pepper.80'); @@ -374,21 +662,33 @@ body { --theme-accent-salt-subtle: theme('colors.raw.pepper.30'); --theme-accent-salt-default: theme('colors.raw.pepper.10'); --theme-accent-salt-bolder: theme('colors.raw.salt.90'); - --theme-accent-salt-flat: color-mix(in srgb, var(--theme-accent-salt-default) 16%, var(--theme-background-default)); + --theme-accent-salt-flat: color-mix( + in srgb, + var(--theme-accent-salt-default) 16%, + var(--theme-background-default) + ); /* Onion */ --theme-accent-onion-subtlest: theme('colors.raw.onion.90'); --theme-accent-onion-subtler: theme('colors.raw.onion.80'); --theme-accent-onion-subtle: theme('colors.raw.onion.70'); --theme-accent-onion-default: theme('colors.raw.onion.60'); --theme-accent-onion-bolder: theme('colors.raw.onion.50'); - --theme-accent-onion-flat: color-mix(in srgb, var(--theme-accent-onion-default) 16%, var(--theme-background-default)); + --theme-accent-onion-flat: color-mix( + in srgb, + var(--theme-accent-onion-default) 16%, + var(--theme-background-default) + ); /* Water */ --theme-accent-water-subtlest: theme('colors.raw.water.90'); --theme-accent-water-subtler: theme('colors.raw.water.80'); --theme-accent-water-subtle: theme('colors.raw.water.70'); --theme-accent-water-default: theme('colors.raw.water.60'); --theme-accent-water-bolder: theme('colors.raw.water.50'); - --theme-accent-water-flat: color-mix(in srgb, var(--theme-accent-water-default) 16%, var(--theme-background-default)); + --theme-accent-water-flat: color-mix( + in srgb, + var(--theme-accent-water-default) 16%, + var(--theme-background-default) + ); /* Pepper */ --theme-accent-pepper-baseline: theme('colors.raw.salt.0'); --theme-accent-pepper-subtlest: theme('colors.raw.salt.20'); @@ -396,124 +696,324 @@ body { --theme-accent-pepper-subtle: theme('colors.raw.salt.70'); --theme-accent-pepper-default: theme('colors.raw.salt.90'); --theme-accent-pepper-bolder: theme('colors.raw.pepper.10'); - --theme-accent-pepper-flat: color-mix(in srgb, var(--theme-accent-pepper-default) 16%, var(--theme-background-default)); + --theme-accent-pepper-flat: color-mix( + in srgb, + var(--theme-accent-pepper-default) 16%, + var(--theme-background-default) + ); /* Lettuce */ --theme-accent-lettuce-subtlest: theme('colors.raw.lettuce.90'); --theme-accent-lettuce-subtler: theme('colors.raw.lettuce.80'); --theme-accent-lettuce-subtle: theme('colors.raw.lettuce.70'); --theme-accent-lettuce-default: theme('colors.raw.lettuce.60'); --theme-accent-lettuce-bolder: theme('colors.raw.lettuce.50'); - --theme-accent-lettuce-flat: color-mix(in srgb, var(--theme-accent-lettuce-default) 16%, var(--theme-background-default)); + --theme-accent-lettuce-flat: color-mix( + in srgb, + var(--theme-accent-lettuce-default) 16%, + var(--theme-background-default) + ); /* Bun */ --theme-accent-bun-subtlest: theme('colors.raw.bun.90'); --theme-accent-bun-subtler: theme('colors.raw.bun.80'); --theme-accent-bun-subtle: theme('colors.raw.bun.70'); --theme-accent-bun-default: theme('colors.raw.bun.60'); --theme-accent-bun-bolder: theme('colors.raw.bun.50'); - --theme-accent-bun-flat: color-mix(in srgb, var(--theme-accent-bun-default) 16%, var(--theme-background-default)); + --theme-accent-bun-flat: color-mix( + in srgb, + var(--theme-accent-bun-default) 16%, + var(--theme-background-default) + ); /* Ketchup */ --theme-accent-ketchup-subtlest: theme('colors.raw.ketchup.90'); --theme-accent-ketchup-subtler: theme('colors.raw.ketchup.80'); --theme-accent-ketchup-subtle: theme('colors.raw.ketchup.70'); --theme-accent-ketchup-default: theme('colors.raw.ketchup.60'); --theme-accent-ketchup-bolder: theme('colors.raw.ketchup.50'); - --theme-accent-ketchup-flat: color-mix(in srgb, var(--theme-accent-ketchup-default) 16%, var(--theme-background-default)); + --theme-accent-ketchup-flat: color-mix( + in srgb, + var(--theme-accent-ketchup-default) 16%, + var(--theme-background-default) + ); /* Cabbage */ --theme-accent-cabbage-subtlest: theme('colors.raw.cabbage.90'); --theme-accent-cabbage-subtler: theme('colors.raw.cabbage.80'); --theme-accent-cabbage-subtle: theme('colors.raw.cabbage.70'); --theme-accent-cabbage-default: theme('colors.raw.cabbage.60'); --theme-accent-cabbage-bolder: theme('colors.raw.cabbage.50'); - --theme-accent-cabbage-flat: color-mix(in srgb, var(--theme-accent-cabbage-default) 16%, var(--theme-background-default)); + --theme-accent-cabbage-flat: color-mix( + in srgb, + var(--theme-accent-cabbage-default) 16%, + var(--theme-background-default) + ); /* Bacon */ --theme-accent-bacon-subtlest: theme('colors.raw.bacon.90'); --theme-accent-bacon-subtler: theme('colors.raw.bacon.80'); --theme-accent-bacon-subtle: theme('colors.raw.bacon.70'); --theme-accent-bacon-default: theme('colors.raw.bacon.60'); --theme-accent-bacon-bolder: theme('colors.raw.bacon.50'); - --theme-accent-bacon-flat: color-mix(in srgb, var(--theme-accent-bacon-default) 16%, var(--theme-background-default)); + --theme-accent-bacon-flat: color-mix( + in srgb, + var(--theme-accent-bacon-default) 16%, + var(--theme-background-default) + ); /* Brand */ --theme-brand-subtler: var(--theme-accent-cabbage-subtler); --theme-brand-default: var(--theme-accent-cabbage-default); --theme-brand-bolder: var(--theme-accent-cabbage-bolder); - --theme-brand-float: color-mix(in srgb, var(--theme-brand-bolder), transparent 92%); - --theme-brand-hover: color-mix(in srgb, var(--theme-brand-bolder), transparent 88%); - --theme-brand-active: color-mix(in srgb, var(--theme-brand-bolder), transparent 84%); + --theme-brand-float: color-mix( + in srgb, + var(--theme-brand-bolder), + transparent 92% + ); + --theme-brand-hover: color-mix( + in srgb, + var(--theme-brand-bolder), + transparent 88% + ); + --theme-brand-active: color-mix( + in srgb, + var(--theme-brand-bolder), + transparent 84% + ); /* Surface */ --theme-surface-primary: theme('colors.raw.pepper.90'); --theme-surface-secondary: theme('colors.raw.pepper.10'); --theme-surface-invert: theme('colors.raw.salt.0'); - --theme-surface-float: color-mix(in srgb, var(--theme-surface-secondary), transparent 92%); - --theme-surface-hover: color-mix(in srgb, var(--theme-surface-secondary), transparent 88%); - --theme-surface-active: color-mix(in srgb, var(--theme-surface-secondary), transparent 84%); - --theme-surface-disabled: color-mix(in srgb, var(--theme-surface-secondary), transparent 80%); + --theme-surface-float: color-mix( + in srgb, + var(--theme-surface-secondary), + transparent 92% + ); + --theme-surface-hover: color-mix( + in srgb, + var(--theme-surface-secondary), + transparent 88% + ); + --theme-surface-active: color-mix( + in srgb, + var(--theme-surface-secondary), + transparent 84% + ); + --theme-surface-disabled: color-mix( + in srgb, + var(--theme-surface-secondary), + transparent 80% + ); --theme-surface-focus: theme('colors.raw.blueCheese.60'); /* Actions */ /* Upvote */ --theme-actions-upvote-default: var(--theme-accent-avocado-default); - --theme-actions-upvote-float: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 92%); - --theme-actions-upvote-hover: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 88%); - --theme-actions-upvote-active: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 84%); + --theme-actions-upvote-float: color-mix( + in srgb, + var(--theme-accent-avocado-bolder), + transparent 92% + ); + --theme-actions-upvote-hover: color-mix( + in srgb, + var(--theme-accent-avocado-bolder), + transparent 88% + ); + --theme-actions-upvote-active: color-mix( + in srgb, + var(--theme-accent-avocado-bolder), + transparent 84% + ); /* Downvote */ --theme-actions-downvote-default: var(--theme-accent-ketchup-default); - --theme-actions-downvote-float: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 92%); - --theme-actions-downvote-hover: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 88%); - --theme-actions-downvote-active: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 84%); + --theme-actions-downvote-float: color-mix( + in srgb, + var(--theme-accent-ketchup-bolder), + transparent 92% + ); + --theme-actions-downvote-hover: color-mix( + in srgb, + var(--theme-accent-ketchup-bolder), + transparent 88% + ); + --theme-actions-downvote-active: color-mix( + in srgb, + var(--theme-accent-ketchup-bolder), + transparent 84% + ); /* Comment */ --theme-actions-comment-default: var(--theme-accent-blueCheese-default); - --theme-actions-comment-float: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 92%); - --theme-actions-comment-hover: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 88%); - --theme-actions-comment-active: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 84%); + --theme-actions-comment-float: color-mix( + in srgb, + var(--theme-accent-blueCheese-bolder), + transparent 92% + ); + --theme-actions-comment-hover: color-mix( + in srgb, + var(--theme-accent-blueCheese-bolder), + transparent 88% + ); + --theme-actions-comment-active: color-mix( + in srgb, + var(--theme-accent-blueCheese-bolder), + transparent 84% + ); /* Bookmark */ --theme-actions-bookmark-default: var(--theme-accent-bun-default); - --theme-actions-bookmark-float: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 92%); - --theme-actions-bookmark-hover: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 88%); - --theme-actions-bookmark-active: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 84%); + --theme-actions-bookmark-float: color-mix( + in srgb, + var(--theme-accent-bun-bolder), + transparent 92% + ); + --theme-actions-bookmark-hover: color-mix( + in srgb, + var(--theme-accent-bun-bolder), + transparent 88% + ); + --theme-actions-bookmark-active: color-mix( + in srgb, + var(--theme-accent-bun-bolder), + transparent 84% + ); /* Share */ --theme-actions-share-default: var(--theme-accent-cabbage-default); - --theme-actions-share-float: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 92%); - --theme-actions-share-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 88%); - --theme-actions-share-active: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 84%); + --theme-actions-share-float: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 92% + ); + --theme-actions-share-hover: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 88% + ); + --theme-actions-share-active: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 84% + ); /* Plus */ --theme-actions-plus-default: var(--theme-accent-bacon-default); - --theme-actions-plus-float: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 92%); - --theme-actions-plus-hover: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 88%); - --theme-actions-plus-active: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 84%); + --theme-actions-plus-float: color-mix( + in srgb, + var(--theme-accent-bacon-bolder), + transparent 92% + ); + --theme-actions-plus-hover: color-mix( + in srgb, + var(--theme-accent-bacon-bolder), + transparent 88% + ); + --theme-actions-plus-active: color-mix( + in srgb, + var(--theme-accent-bacon-bolder), + transparent 84% + ); /* Help */ --theme-actions-help-default: var(--status-help); - --theme-actions-help-float: color-mix(in srgb, var(--theme-actions-help-default), transparent 92%); - --theme-actions-help-hover: color-mix(in srgb, var(--theme-actions-help-default), transparent 88%); - --theme-actions-help-active: color-mix(in srgb, var(--theme-actions-help-default), transparent 84%); + --theme-actions-help-float: color-mix( + in srgb, + var(--theme-actions-help-default), + transparent 92% + ); + --theme-actions-help-hover: color-mix( + in srgb, + var(--theme-actions-help-default), + transparent 88% + ); + --theme-actions-help-active: color-mix( + in srgb, + var(--theme-actions-help-default), + transparent 84% + ); /* Cores */ --theme-actions-cores-default: var(--theme-accent-cheese-default); - --theme-actions-cores-float: color-mix(in srgb, var(--theme-actions-cores-default), transparent 92%); - --theme-actions-cores-hover: color-mix(in srgb, var(--theme-actions-cores-default), transparent 88%); - --theme-actions-cores-active: color-mix(in srgb, var(--theme-actions-cores-default), transparent 84%); + --theme-actions-cores-float: color-mix( + in srgb, + var(--theme-actions-cores-default), + transparent 92% + ); + --theme-actions-cores-hover: color-mix( + in srgb, + var(--theme-actions-cores-default), + transparent 88% + ); + --theme-actions-cores-active: color-mix( + in srgb, + var(--theme-actions-cores-default), + transparent 84% + ); /* Overlay */ - --theme-overlay-base-primary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 36%); - --theme-overlay-base-secondary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 60%); - --theme-overlay-base-tertiary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 68%); - --theme-overlay-base-quaternary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 76%); + --theme-overlay-base-primary: color-mix( + in srgb, + var(--theme-accent-onion-subtlest), + transparent 36% + ); + --theme-overlay-base-secondary: color-mix( + in srgb, + var(--theme-accent-onion-subtlest), + transparent 60% + ); + --theme-overlay-base-tertiary: color-mix( + in srgb, + var(--theme-accent-onion-subtlest), + transparent 68% + ); + --theme-overlay-base-quaternary: color-mix( + in srgb, + var(--theme-accent-onion-subtlest), + transparent 76% + ); /* Dark */ - --theme-overlay-dark-dark1: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 68%); - --theme-overlay-dark-dark2: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 60%); - --theme-overlay-dark-dark3: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 36%); + --theme-overlay-dark-dark1: color-mix( + in srgb, + theme('colors.raw.pepper.10'), + transparent 68% + ); + --theme-overlay-dark-dark2: color-mix( + in srgb, + theme('colors.raw.pepper.10'), + transparent 60% + ); + --theme-overlay-dark-dark3: color-mix( + in srgb, + theme('colors.raw.pepper.10'), + transparent 36% + ); /* Border */ /* Subtlest */ --theme-border-subtlest-primary: var(--theme-accent-salt-default); - --theme-border-subtlest-secondary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 60%); - --theme-border-subtlest-tertiary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 80%); - --theme-border-subtlest-quaternary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 92%); + --theme-border-subtlest-secondary: color-mix( + in srgb, + var(--theme-border-subtlest-primary), + transparent 60% + ); + --theme-border-subtlest-tertiary: color-mix( + in srgb, + var(--theme-border-subtlest-primary), + transparent 80% + ); + --theme-border-subtlest-quaternary: color-mix( + in srgb, + var(--theme-border-subtlest-primary), + transparent 92% + ); /* Bolder */ --theme-border-bolder-primary: var(--theme-accent-salt-bolder); - --theme-border-bolder-secondary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 60%); - --theme-border-bolder-tertiary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 80%); - --theme-border-bolder-quaternary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 92%); + --theme-border-bolder-secondary: color-mix( + in srgb, + var(--theme-border-bolder-primary), + transparent 60% + ); + --theme-border-bolder-tertiary: color-mix( + in srgb, + var(--theme-border-bolder-primary), + transparent 80% + ); + --theme-border-bolder-quaternary: color-mix( + in srgb, + var(--theme-border-bolder-primary), + transparent 92% + ); /* Status */ --status-error: var(--theme-accent-ketchup-default); @@ -526,43 +1026,80 @@ body { --theme-text-primary: var(--theme-accent-salt-baseline); --theme-text-secondary: var(--theme-accent-salt-subtler); --theme-text-tertiary: var(--theme-accent-salt-default); - --theme-text-quaternary: color-mix(in srgb, var(--theme-accent-salt-default), transparent 36%); - --theme-text-disabled: color-mix(in srgb, var(--theme-accent-salt-default), transparent 68%); + --theme-text-quaternary: color-mix( + in srgb, + var(--theme-accent-salt-default), + transparent 36% + ); + --theme-text-disabled: color-mix( + in srgb, + var(--theme-accent-salt-default), + transparent 68% + ); --theme-text-link: var(--theme-accent-water-subtler); /* Highlight */ - --theme-text-highlight-default: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 76%); - --theme-text-highlight-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 68%); + --theme-text-highlight-default: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 76% + ); + --theme-text-highlight-hover: color-mix( + in srgb, + var(--theme-accent-cabbage-bolder), + transparent 68% + ); /* Shadow */ - --theme-shadow-shadow1: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 68%); - --theme-shadow-shadow2: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 60%); - --theme-shadow-shadow3: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 36%); + --theme-shadow-shadow1: color-mix( + in srgb, + theme('colors.raw.salt.90'), + transparent 68% + ); + --theme-shadow-shadow2: color-mix( + in srgb, + theme('colors.raw.salt.90'), + transparent 60% + ); + --theme-shadow-shadow3: color-mix( + in srgb, + theme('colors.raw.salt.90'), + transparent 36% + ); --theme-shadow-cabbage: theme('colors.raw.cabbage.40'); /* Blur */ - --theme-blur-blur-highlight: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 12%); - --theme-blur-blur-baseline: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 12%); - --theme-blur-blur-bg: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 36%); - --theme-blur-blur-glass: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 36%); - - - - - - - + --theme-blur-blur-highlight: color-mix( + in srgb, + theme('colors.raw.salt.0'), + transparent 12% + ); + --theme-blur-blur-baseline: color-mix( + in srgb, + theme('colors.raw.salt.0'), + transparent 12% + ); + --theme-blur-blur-bg: color-mix( + in srgb, + theme('colors.raw.salt.0'), + transparent 36% + ); + --theme-blur-blur-glass: color-mix( + in srgb, + theme('colors.raw.salt.0'), + transparent 36% + ); /** * Current old colors, these should all be changed to one of the above matching ones. */ - --theme-active: theme('colors.raw.pepper.10')33; + --theme-active: theme('colors.raw.pepper.10') 33; --theme-post-disabled: #ffffff66; --theme-overlay-quaternary: theme('colors.overlay.quaternary.pepper'); --theme-overlay-water: theme('colors.overlay.quaternary.water'); --theme-overlay-cabbage: theme('colors.overlay.quaternary.cabbage'); - --theme-overlay-from: theme('colors.raw.onion.40')30; - --theme-overlay-to: theme('colors.raw.cabbage.40')30; + --theme-overlay-from: theme('colors.raw.onion.40') 30; + --theme-overlay-to: theme('colors.raw.cabbage.40') 30; --theme-overlay-float-bun: theme('colors.overlay.float.bun'); --theme-overlay-float-blueCheese: theme('colors.overlay.float.blueCheese'); @@ -574,8 +1111,8 @@ body { --theme-overlay-active-onion: theme('colors.overlay.active.onion'); --theme-overlay-active-salt: theme('colors.overlay.active.salt'); - --theme-gradient-cabbage: theme('colors.raw.cabbage.10')66; - --theme-gradient-onion: theme('colors.raw.onion.10')66; + --theme-gradient-cabbage: theme('colors.raw.cabbage.10') 66; + --theme-gradient-onion: theme('colors.raw.onion.10') 66; --theme-rank-highlight: theme('colors.raw.salt.10'); @@ -820,7 +1357,15 @@ details.right-icon { } .plus-entry-gradient { - background: radial-gradient(circle at 50% 100%, var(--theme-accent-cabbage-default) 0%, color-mix(in srgb, var(--theme-accent-onion-default), transparent 28%) 9.6%, color-mix(in srgb, var(--theme-accent-onion-default), transparent 100%) 100%), var(--theme-background-default); + background: radial-gradient( + circle at 50% 100%, + var(--theme-accent-cabbage-default) 0%, + color-mix(in srgb, var(--theme-accent-onion-default), transparent 28%) + 9.6%, + color-mix(in srgb, var(--theme-accent-onion-default), transparent 100%) + 100% + ), + var(--theme-background-default); } @keyframes pulse { @@ -886,25 +1431,56 @@ meter::-webkit-meter-bar { .bg-gradient-funnel { &-default { - background: radial-gradient(100% 22.49% at 100% -10%, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-cabbage-baseline) 100%), - radial-gradient(100% 22.49% at 0% -10%, var(--theme-accent-onion-default) 0%, var(--theme-accent-onion-baseline) 100%); + background: radial-gradient( + 100% 22.49% at 100% -10%, + var(--theme-accent-cabbage-default) 0%, + var(--theme-accent-cabbage-baseline) 100% + ), + radial-gradient( + 100% 22.49% at 0% -10%, + var(--theme-accent-onion-default) 0%, + var(--theme-accent-onion-baseline) 100% + ); } &-top { - background: radial-gradient(192.5% 100% at 50% 0%, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-onion-default) 50%, var(--theme-accent-onion-baseline) 100%); + background: radial-gradient( + 192.5% 100% at 50% 0%, + var(--theme-accent-cabbage-default) 0%, + var(--theme-accent-onion-default) 50%, + var(--theme-accent-onion-baseline) 100% + ); } &-circle { - background: radial-gradient(94% 48.83% at 50% 0%, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-onion-default) 75.12%, var(--theme-accent-onion-baseline) 100%); + background: radial-gradient( + 94% 48.83% at 50% 0%, + var(--theme-accent-cabbage-default) 0%, + var(--theme-accent-onion-default) 75.12%, + var(--theme-accent-onion-baseline) 100% + ); } &-hourglass { - background: radial-gradient(192.5% 100% at 50% 100%, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-cabbage-baseline) 50%), - radial-gradient(192.5% 100% at 50% 0%, var(--theme-accent-onion-default) 0%, var(--theme-accent-onion-baseline) 50%); + background: radial-gradient( + 192.5% 100% at 50% 100%, + var(--theme-accent-cabbage-default) 0%, + var(--theme-accent-cabbage-baseline) 50% + ), + radial-gradient( + 192.5% 100% at 50% 0%, + var(--theme-accent-onion-default) 0%, + var(--theme-accent-onion-baseline) 50% + ); } &-best-price { - background: linear-gradient(135deg, #E769FB 0%, #9E70F8 44.71%, #68A6FD 100%); + background: linear-gradient( + 135deg, + #e769fb 0%, + #9e70f8 44.71%, + #68a6fd 100% + ); } } @@ -932,7 +1508,8 @@ meter::-webkit-meter-bar { } @keyframes float { - 0%, 100% { + 0%, + 100% { transform: translateY(0); } 50% { @@ -943,4 +1520,23 @@ meter::-webkit-meter-bar { .float-animation { animation: float 1.5s ease-in-out infinite; } + + @keyframes enable-notification-bell-ring { + 0%, + 100% { + transform: rotate(0deg); + } + 20% { + transform: rotate(-16deg); + } + 40% { + transform: rotate(14deg); + } + 60% { + transform: rotate(-10deg); + } + 80% { + transform: rotate(8deg); + } + } } From 1c35d5af28b20f7615b1ed0369315e82d3510cd6 Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Wed, 18 Mar 2026 10:39:48 +0200 Subject: [PATCH 15/34] refactor: centralize notification CTA rollout --- packages/shared/src/components/Feed.tsx | 74 +- .../components/banners/HeroBottomBanner.tsx | 35 +- .../cards/entity/SourceEntityCard.tsx | 37 +- .../cards/entity/SquadEntityCard.tsx | 37 +- .../cards/entity/UserEntityCard.tsx | 37 +- .../src/components/comments/MainComment.tsx | 12 +- .../src/components/comments/SubComment.tsx | 8 +- .../modals/post/CreateSharedPostModal.tsx | 7 +- .../modals/streaks/StreakRecoverModal.tsx | 49 +- .../notifications/EnableNotification.tsx | 139 ++- .../src/components/notifications/Toast.tsx | 10 +- .../src/components/post/PostActions.tsx | 6 +- .../src/components/post/tags/PostTagList.tsx | 9 +- .../sidebar/SidebarNotificationPrompt.tsx | 57 +- .../streak/StreakNotificationReminder.tsx | 45 - .../useEnableNotification.spec.tsx | 86 ++ .../notifications/useEnableNotification.ts | 72 +- .../useNotificationCtaExperiment.ts | 154 +++ .../usePushNotificationMutation.tsx | 8 +- .../useReadingReminderHero.spec.tsx | 31 +- .../notifications/useReadingReminderHero.ts | 37 +- packages/shared/src/hooks/post/useViewPost.ts | 2 +- .../src/hooks/squads/usePostToSquad.tsx | 11 +- .../src/hooks/streaks/useStreakRecover.ts | 3 - .../shared/src/hooks/useToastNotification.ts | 5 +- packages/shared/src/lib/featureManagement.ts | 5 + packages/shared/src/styles/base.css | 1102 ++++++----------- .../webapp/lib/squadNotificationToastState.ts | 138 --- packages/webapp/next.config.ts | 1 - packages/webapp/pages/settings/appearance.tsx | 68 +- .../webapp/pages/squads/[handle]/index.tsx | 20 +- packages/webapp/pages/tags/[tag].tsx | 9 +- 32 files changed, 1075 insertions(+), 1239 deletions(-) delete mode 100644 packages/shared/src/components/streak/StreakNotificationReminder.tsx create mode 100644 packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx create mode 100644 packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts delete mode 100644 packages/webapp/lib/squadNotificationToastState.ts diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index 797d1d052bf..7865f94de39 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -60,6 +60,7 @@ import { FeedCardContext } from '../features/posts/FeedCardContext'; import { briefCardFeedFeature, briefFeedEntrypointPage, + featureFeedLayoutV2, } from '../lib/featureManagement'; import type { AwardProps } from '../graphql/njord'; import { getProductsQueryOptions } from '../graphql/njord'; @@ -68,6 +69,10 @@ import { BriefBannerFeed } from './cards/brief/BriefBanner/BriefBannerFeed'; import { ActionType } from '../graphql/actions'; import { useReadingReminderHero } from '../hooks/notifications/useReadingReminderHero'; import { TopHero } from './banners/HeroBottomBanner'; +import { + NotificationCtaPreviewPlacement, + useNotificationCtaExperiment, +} from '../hooks/notifications/useNotificationCtaExperiment'; const FeedErrorScreen = dynamic( () => import(/* webpackChunkName: "feedErrorScreen" */ './FeedErrorScreen'), @@ -202,8 +207,13 @@ export default function Feed({ const { user } = useContext(AuthContext); const { isFallback, query: routerQuery } = useRouter(); const { openNewTab, spaciness, loadedSettings } = useContext(SettingsContext); + const { value: isFeedLayoutV2 } = useConditionalFeature({ + feature: featureFeedLayoutV2, + }); const { isListMode, shouldUseListFeedLayout } = useFeedLayout(); - const effectiveSpaciness: Spaciness = spaciness ?? 'eco'; + const effectiveSpaciness: Spaciness = isFeedLayoutV2 + ? 'eco' + : spaciness ?? 'eco'; const numCards = currentSettings.numCards[effectiveSpaciness]; const isSquadFeed = feedName === OtherFeedPage.Squad; const trackedFeedFinish = useRef(false); @@ -254,24 +264,24 @@ export default function Feed({ feature: briefFeedEntrypointPage, shouldEvaluate: !user?.isPlus && isMyFeed, }); - const forceBottomHeroFromUrl = - globalThis?.location?.search?.includes('forceBottomHero=1') ?? false; - const forceInFeedHeroFromUrl = - globalThis?.location?.search?.includes('forceInFeedHero=1') ?? false; - const forceSideMenuPromptFromUrl = - globalThis?.location?.search?.includes('forceSideMenuPrompt=1') ?? false; - const forceTopHeroFromUrl = - globalThis?.location?.search?.includes('forceTopHero=1') ?? false; - const forcePopupNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forcePopupNotificationCta=1') ?? - false; - const forceNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forceNotificationCta=1') ?? false; + const { isPlacementForced, shouldHidePlacement } = + useNotificationCtaExperiment(); + const isTopHeroForced = isPlacementForced( + NotificationCtaPreviewPlacement.TopHero, + ); + const isInFeedHeroForced = isPlacementForced( + NotificationCtaPreviewPlacement.InFeedHero, + ); + const shouldHideTopHero = shouldHidePlacement( + NotificationCtaPreviewPlacement.TopHero, + ); + const shouldHideInFeedHero = shouldHidePlacement( + NotificationCtaPreviewPlacement.InFeedHero, + ); const { shouldShow: shouldShowReadingReminder, onEnable } = useReadingReminderHero(); - const [hasScrolledForHero, setHasScrolledForHero] = useState( - forceBottomHeroFromUrl || forceInFeedHeroFromUrl, - ); + const [hasScrolledForHero, setHasScrolledForHero] = + useState(isInFeedHeroForced); const [isHeroDismissed, setIsHeroDismissed] = useState(false); const [isTopHeroDismissed, setIsTopHeroDismissed] = useState(false); const { @@ -477,8 +487,8 @@ export default function Feed({ useEffect(() => { if ( - forceBottomHeroFromUrl || - forceInFeedHeroFromUrl || + !shouldShowReadingReminder || + isInFeedHeroForced || hasScrolledForHero ) { return undefined; @@ -492,7 +502,15 @@ export default function Feed({ window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); - }, [forceBottomHeroFromUrl, forceInFeedHeroFromUrl, hasScrolledForHero]); + }, [hasScrolledForHero, isInFeedHeroForced, shouldShowReadingReminder]); + + useEffect(() => { + if (!isInFeedHeroForced) { + return; + } + + setHasScrolledForHero(true); + }, [isInFeedHeroForced]); useEffect(() => { if (!shouldShowReadingReminder) { @@ -617,20 +635,14 @@ export default function Feed({ Number(showFirstSlotCard); const shouldShowInFeedHero = shouldShowReadingReminder && - !forceSideMenuPromptFromUrl && - !forcePopupNotificationCtaFromUrl && - !forceNotificationCtaFromUrl && - !forceTopHeroFromUrl && - hasScrolledForHero && + !shouldHideInFeedHero && + (isInFeedHeroForced || hasScrolledForHero) && !isHeroDismissed && items.length > HERO_INSERT_INDEX; const shouldShowTopHero = - forceTopHeroFromUrl && - !forceSideMenuPromptFromUrl && - !forceInFeedHeroFromUrl && - !forceBottomHeroFromUrl && - !forcePopupNotificationCtaFromUrl && - !forceNotificationCtaFromUrl && + shouldShowReadingReminder && + isTopHeroForced && + !shouldHideTopHero && !isTopHeroDismissed; const FeedWrapperComponent = isSearchPageLaptop diff --git a/packages/shared/src/components/banners/HeroBottomBanner.tsx b/packages/shared/src/components/banners/HeroBottomBanner.tsx index c75953a3e28..a179dc64a27 100644 --- a/packages/shared/src/components/banners/HeroBottomBanner.tsx +++ b/packages/shared/src/components/banners/HeroBottomBanner.tsx @@ -30,26 +30,11 @@ export const TopHero = ({ className, )} > - -
+
-

+

Never miss read day

@@ -90,16 +75,16 @@ export const TopHero = ({ className, )} > -

-
-
+
+
+
-
+
-
+
diff --git a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx index ab552a01e03..77c861d1b3f 100644 --- a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import Link from '../../utilities/Link'; import EntityCard from './EntityCard'; import { @@ -23,6 +23,7 @@ import useShowFollowAction from '../../../hooks/useShowFollowAction'; import { FollowButton } from '../../contentPreference/FollowButton'; import { useContentPreferenceStatusQuery } from '../../../hooks/contentPreference/useContentPreferenceStatusQuery'; import { useSourceActionsNotify } from '../../../hooks/source/useSourceActionsNotify'; +import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment'; type SourceEntityCardProps = { source?: SourceTooltip; @@ -41,6 +42,8 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { id: source?.id, entity: ContentPreferenceType.Source, }); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const [showNotificationCta, setShowNotificationCta] = useState(false); const prevStatusRef = useRef(contentPreference?.status); const menuProps = useSourceMenuProps({ source }); @@ -59,15 +62,33 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { prevStatusRef.current === ContentPreferenceStatus.Follow || prevStatusRef.current === ContentPreferenceStatus.Subscribed; - if (currentStatus !== prevStatusRef.current) { + useEffect(() => { + if (!isNotificationCtaExperimentEnabled) { + setShowNotificationCta(false); + prevStatusRef.current = currentStatus; + return; + } + + if (currentStatus === prevStatusRef.current) { + return; + } + prevStatusRef.current = currentStatus; if (isNowFollowing && !wasFollowing) { setShowNotificationCta(true); - } else if (!isNowFollowing && wasFollowing) { + return; + } + + if (!isNowFollowing && wasFollowing) { setShowNotificationCta(false); } - } + }, [ + currentStatus, + isNotificationCtaExperimentEnabled, + isNowFollowing, + wasFollowing, + ]); const handleTurnOn = async () => { await onNotify(); @@ -135,9 +156,11 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { {largeNumberFormat(flags?.totalUpvotes) || 0} Upvotes
- {showNotificationCta && !haveNotificationsOn && ( - - )} + {isNotificationCtaExperimentEnabled && + showNotificationCta && + !haveNotificationsOn && ( + + )}
); diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx index f9bfb7483c3..fd097eb6cbb 100644 --- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx @@ -21,6 +21,7 @@ import { ContentPreferenceType } from '../../../graphql/contentPreference'; import useShowFollowAction from '../../../hooks/useShowFollowAction'; import EnableNotificationsCta from './EnableNotificationsCta'; import { useSourceActionsNotify } from '../../../hooks/source/useSourceActionsNotify'; +import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment'; type SquadEntityCardProps = { handle: string; @@ -42,6 +43,8 @@ const SquadEntityCard = ({ className, }: SquadEntityCardProps) => { const { squad } = useSquad({ handle }); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const [showNotificationCta, setShowNotificationCta] = useState(false); const wasSquadMemberRef = useRef(!!squad?.currentMember); const wasSquadPostUpvotedRef = useRef(isSquadPostUpvoted); @@ -56,6 +59,12 @@ const SquadEntityCard = ({ const isSquadMember = !!squad?.currentMember; useEffect(() => { + if (!isNotificationCtaExperimentEnabled) { + setShowNotificationCta(false); + wasSquadMemberRef.current = isSquadMember; + return; + } + if ( showNotificationCtaOnJoin && isSquadMember && @@ -68,9 +77,20 @@ const SquadEntityCard = ({ } wasSquadMemberRef.current = isSquadMember; - }, [haveNotificationsOn, isSquadMember, showNotificationCtaOnJoin]); + }, [ + haveNotificationsOn, + isNotificationCtaExperimentEnabled, + isSquadMember, + showNotificationCtaOnJoin, + ]); useEffect(() => { + if (!isNotificationCtaExperimentEnabled) { + setShowNotificationCta(false); + wasSquadPostUpvotedRef.current = isSquadPostUpvoted; + return; + } + if ( showNotificationCtaOnUpvote && isSquadPostUpvoted && @@ -81,7 +101,12 @@ const SquadEntityCard = ({ } wasSquadPostUpvotedRef.current = isSquadPostUpvoted; - }, [haveNotificationsOn, isSquadPostUpvoted, showNotificationCtaOnUpvote]); + }, [ + haveNotificationsOn, + isNotificationCtaExperimentEnabled, + isSquadPostUpvoted, + showNotificationCtaOnUpvote, + ]); const handleEnableNotifications = async () => { await onNotify(); @@ -167,9 +192,11 @@ const SquadEntityCard = ({ {largeNumberFormat(flags?.totalUpvotes)} Upvotes
- {showNotificationCta && !haveNotificationsOn && ( - - )} + {isNotificationCtaExperimentEnabled && + showNotificationCta && + !haveNotificationsOn && ( + + )}
); diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx index 5b295e7709d..6a8f358e776 100644 --- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx @@ -33,6 +33,7 @@ import useUserMenuProps from '../../../hooks/useUserMenuProps'; import useShowFollowAction from '../../../hooks/useShowFollowAction'; import type { MenuItemProps } from '../../dropdown/common'; import EnableNotificationsCta from './EnableNotificationsCta'; +import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment'; type Props = { user?: UserShortProfile; @@ -57,6 +58,8 @@ const UserEntityCard = ({ id: user?.id, entity: ContentPreferenceType.User, }); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const { unblock, block, subscribe } = useContentPreference(); const [showNotificationCta, setShowNotificationCta] = useState(false); const prevStatusRef = useRef(contentPreference?.status); @@ -96,6 +99,12 @@ const UserEntityCard = ({ currentStatus === ContentPreferenceStatus.Subscribed; useEffect(() => { + if (!isNotificationCtaExperimentEnabled) { + setShowNotificationCta(false); + prevStatusRef.current = currentStatus; + return; + } + const previousStatus = prevStatusRef.current; if (previousStatus === currentStatus) { @@ -113,9 +122,20 @@ const UserEntityCard = ({ } prevStatusRef.current = currentStatus; - }, [currentStatus, isNowFollowing, showNotificationCtaOnFollow]); + }, [ + currentStatus, + isNotificationCtaExperimentEnabled, + isNowFollowing, + showNotificationCtaOnFollow, + ]); useEffect(() => { + if (!isNotificationCtaExperimentEnabled) { + setShowNotificationCta(false); + prevAuthorPostUpvotedRef.current = isAuthorPostUpvoted; + return; + } + const wasAuthorPostUpvoted = prevAuthorPostUpvotedRef.current; if (wasAuthorPostUpvoted === isAuthorPostUpvoted) { @@ -132,7 +152,12 @@ const UserEntityCard = ({ } prevAuthorPostUpvotedRef.current = isAuthorPostUpvoted; - }, [haveNotificationsOn, isAuthorPostUpvoted, showNotificationCtaOnUpvote]); + }, [ + haveNotificationsOn, + isAuthorPostUpvoted, + isNotificationCtaExperimentEnabled, + showNotificationCtaOnUpvote, + ]); const options: MenuItemProps[] = [ { icon: , @@ -278,9 +303,11 @@ const UserEntityCard = ({ />
{bio && } - {showNotificationCta && !haveNotificationsOn && ( - - )} + {isNotificationCtaExperimentEnabled && + showNotificationCta && + !haveNotificationsOn && ( + + )}
); diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index e458ccf0779..ef6adab1d05 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -24,6 +24,7 @@ import { useLogContext } from '../../contexts/LogContext'; import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; import { useNotificationPreference } from '../../hooks/notifications'; import { NotificationType } from '../notifications/utils'; +import { useNotificationCtaExperiment } from '../../hooks/notifications/useNotificationCtaExperiment'; const CommentInputOrModal = dynamic( () => @@ -77,7 +78,10 @@ export default function MainComment({ () => shouldShowBannerOnComment(permissionNotificationCommentId, comment), [permissionNotificationCommentId, comment], ); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const showUpvoteNotificationPermissionBanner = + isNotificationCtaExperimentEnabled && upvoteNotificationCommentId === comment.id; const [isJoinSquadBannerDismissed] = usePersistentContext( @@ -278,7 +282,9 @@ export default function MainComment({ @@ -321,7 +327,9 @@ export default function MainComment({ className={className?.commentBox} onCommented={onCommented} isModalThread={isModalThread} - isFirst={index === 0 && !(showUpvoteCtaInReplyFlow && areRepliesExpanded)} + isFirst={ + index === 0 && !(showUpvoteCtaInReplyFlow && areRepliesExpanded) + } isLast={index === comment.children.edges.length - 1} extendTopConnector={isModalThread && commentId === comment.id} /> diff --git a/packages/shared/src/components/comments/SubComment.tsx b/packages/shared/src/components/comments/SubComment.tsx index 823edec7610..d7d3a6b27b6 100644 --- a/packages/shared/src/components/comments/SubComment.tsx +++ b/packages/shared/src/components/comments/SubComment.tsx @@ -14,6 +14,7 @@ import { useAuthContext } from '../../contexts/AuthContext'; import { SourceType } from '../../graphql/sources'; import { useNotificationPreference } from '../../hooks/notifications'; import { NotificationType } from '../notifications/utils'; +import { useNotificationCtaExperiment } from '../../hooks/notifications/useNotificationCtaExperiment'; const CommentInputOrModal = dynamic( () => @@ -46,9 +47,12 @@ function SubComment({ ...props }: SubCommentProps): ReactElement { const { user } = useAuthContext(); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const { inputProps, commentId, onReplyTo } = useComments(props.post); const { inputProps: editProps, onEdit } = useEditCommentProps(); const showUpvoteNotificationPermissionBanner = + isNotificationCtaExperimentEnabled && upvoteNotificationCommentId === comment.id; const replyNotificationType = props.post.source?.type === SourceType.Squad @@ -171,7 +175,9 @@ function SubComment({ className={!comment.children?.edges?.length && 'mt-3'} source={NotificationPromptSource.CommentUpvote} contentName={ - user?.id !== comment?.author.id ? comment?.author?.name : undefined + user?.id !== comment?.author.id + ? comment?.author?.name + : undefined } onEnableAction={onEnableUpvoteNotification} /> diff --git a/packages/shared/src/components/modals/post/CreateSharedPostModal.tsx b/packages/shared/src/components/modals/post/CreateSharedPostModal.tsx index 7474807b267..13dc50f46bc 100644 --- a/packages/shared/src/components/modals/post/CreateSharedPostModal.tsx +++ b/packages/shared/src/components/modals/post/CreateSharedPostModal.tsx @@ -44,12 +44,7 @@ export function CreateSharedPostModal({ useProfileCompletionPostGate(); const richTextRef = useRef(); const [link, setLink] = useState(preview?.permalink ?? preview?.url ?? ''); - const { - shouldShowCta, - isEnabled, - onToggle, - onSubmitted, - } = + const { shouldShowCta, isEnabled, onToggle, onSubmitted } = useNotificationToggle(); const onSuccess = () => { onSharedSuccessfully?.(); diff --git a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx index 71ba2eddb55..59c1df29795 100644 --- a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx +++ b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx @@ -1,5 +1,6 @@ import type { ReactElement } from 'react'; import React, { useId } from 'react'; +import classNames from 'classnames'; import { ModalSize } from '../common/types'; import { ModalBody } from '../common/ModalBody'; import type { ModalProps } from '../common/Modal'; @@ -34,6 +35,7 @@ import { usePushNotificationContext } from '../../../contexts/PushNotificationCo import usePersistentContext, { PersistentContextKeys, } from '../../../hooks/usePersistentContext'; +import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment'; export interface StreakRecoverModalProps extends Pick { @@ -141,16 +143,18 @@ export const StreakRecoverOptout = ({ hideForever, id, className, + compact = false, }: { id: string; className?: string; + compact?: boolean; } & Pick): ReactElement => (
- Hide this + {compact ? 'Hide this' : 'Never show this again'}
); const StreakRecoverNotificationReminder = () => { + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const { isSubscribed, isInitialized, isPushSupported } = usePushNotificationContext(); const [isAlertShown, setIsAlertShown] = usePersistentContext( @@ -179,7 +185,11 @@ const StreakRecoverNotificationReminder = () => { ); const { onTogglePermission } = usePushNotificationMutation(); const showAlert = - isPushSupported && isAlertShown && isInitialized && !isSubscribed; + isNotificationCtaExperimentEnabled && + isPushSupported && + isAlertShown && + isInitialized && + !isSubscribed; if (!showAlert) { return null; @@ -229,6 +239,8 @@ export const StreakRecoverModal = ( ): ReactElement => { const { isOpen, onRequestClose, onAfterClose, user } = props; const { isStreaksEnabled } = useReadingStreak(); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const id = useId(); const { recover, hideForever, onClose, onRecover } = useStreakRecover({ @@ -253,12 +265,20 @@ export const StreakRecoverModal = ( title="Close streak recover popup" /> - -
+ {isNotificationCtaExperimentEnabled && ( + + )} +
@@ -267,8 +287,13 @@ export const StreakRecoverModal = ( recover={recover} loading={recover.isRecoverPending} /> + {!isNotificationCtaExperimentEnabled && ( + + )}
- + {isNotificationCtaExperimentEnabled && ( + + )} ); diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index 28be74349b1..6f3e2a847c8 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -1,7 +1,12 @@ import type { ReactElement } from 'react'; import React from 'react'; import classNames from 'classnames'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { + Button, + ButtonColor, + ButtonSize, + ButtonVariant, +} from '../buttons/Button'; import CloseButton from '../CloseButton'; import { cloudinaryNotificationsBrowserEnabled, @@ -12,6 +17,7 @@ import { webappUrl } from '../../lib/constants'; import { NotificationPromptSource } from '../../lib/log'; import { useEnableNotification } from '../../hooks/notifications'; import { NotificationSvg } from './NotificationSvg'; +import { useNotificationCtaExperiment } from '../../hooks/notifications/useNotificationCtaExperiment'; type EnableNotificationProps = { source?: NotificationPromptSource; @@ -64,6 +70,11 @@ const sourceToButtonText: Partial> = { [NotificationPromptSource.CommentUpvote]: 'Turn on', }; +const rolloutOnlySources = new Set([ + NotificationPromptSource.CommentUpvote, + NotificationPromptSource.PostTagFollow, +]); + function EnableNotification({ source = NotificationPromptSource.NotificationsPage, contentName, @@ -72,22 +83,42 @@ function EnableNotification({ onEnableAction, ignoreDismissState = false, }: EnableNotificationProps): ReactElement | null { + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const { shouldShowCta, acceptedJustNow, onEnable, onDismiss } = useEnableNotification({ source, ignoreDismissState }); - if (!shouldShowCta) { + const handleEnable = async () => { + const actions = [onEnable()]; + + if (onEnableAction) { + actions.push(Promise.resolve(onEnableAction())); + } + + await Promise.allSettled(actions); + }; + + if ( + !shouldShowCta || + (rolloutOnlySources.has(source) && !isNotificationCtaExperimentEnabled) + ) { return null; } const sourceToMessage: Record = { [NotificationPromptSource.SquadPostModal]: '', - [NotificationPromptSource.NewComment]: - 'Someone might reply soon. Don’t miss it.', + [NotificationPromptSource.NewComment]: isNotificationCtaExperimentEnabled + ? 'Someone might reply soon. Don’t miss it.' + : `Want to get notified when ${ + contentName ?? 'someone' + } responds so you can continue the conversation?`, [NotificationPromptSource.CommentUpvote]: 'Get notified when someone replies to this comment.', [NotificationPromptSource.PostTagFollow]: `Get notified when new #${contentName} stories are posted.`, [NotificationPromptSource.NotificationsPage]: - 'Get notified when someone replies to your posts, mentions you, or when discussions you follow get new activity.', + isNotificationCtaExperimentEnabled + ? 'Get notified when someone replies to your posts, mentions you, or when discussions you follow get new activity.' + : 'Stay in the loop whenever you get a mention, reply and other important updates.', [NotificationPromptSource.NewSourceModal]: '', [NotificationPromptSource.NotificationItem]: '', [NotificationPromptSource.SquadPostCommentary]: '', @@ -124,15 +155,6 @@ function EnableNotification({ !acceptedJustNow; const shouldUseVerticalContentLayout = source === NotificationPromptSource.NotificationsPage; - const handleEnable = async () => { - const actions = [onEnable()]; - - if (onEnableAction) { - actions.push(Promise.resolve(onEnableAction())); - } - - await Promise.allSettled(actions); - }; const notificationVisual = (() => { if (shouldShowNotificationArtwork) { return ( @@ -194,6 +216,93 @@ function EnableNotification({ ); } + if (!isNotificationCtaExperimentEnabled) { + return ( +
+ {source === NotificationPromptSource.NotificationsPage && ( + + {acceptedJustNow && } + {`Push notifications${ + acceptedJustNow ? ' successfully enabled' : '' + }`} + + )} +
+

+ {acceptedJustNow ? ( + <> + Changing your{' '} + + notification settings + {' '} + can be done anytime through your account details + + ) : ( + message + )} +

+ +
+
+ {!acceptedJustNow && ( + + )} + {showTextCloseButton && ( + + )} +
+ {!showTextCloseButton && ( + + )} +
+ ); + } + return (
+ {toast.message} {toast.action && ( @@ -135,7 +138,10 @@ const Toast = ({ size={ButtonSize.XSmall} aria-label={toast.action.copy} {...(toast.action.buttonProps ?? {})} - className={classNames('shrink-0', toast.action.buttonProps?.className)} + className={classNames( + 'shrink-0', + toast.action.buttonProps?.className, + )} onClick={onAction} > {toast.action.copy} diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx index 5c9c7265adc..10cfbd3f0ae 100644 --- a/packages/shared/src/components/post/PostActions.tsx +++ b/packages/shared/src/components/post/PostActions.tsx @@ -39,6 +39,7 @@ import { ContentPreferenceType, } from '../../graphql/contentPreference'; import ConditionalWrapper from '../ConditionalWrapper'; +import { useNotificationCtaExperiment } from '../../hooks/notifications/useNotificationCtaExperiment'; interface PostActionsProps { post: Post; @@ -57,6 +58,8 @@ export function PostActions({ const { showLogin, user } = useAuthContext(); const { openModal } = useLazyModal(); const creator = post.author || post.scout; + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const { data, onShowPanel, onClose } = useBlockPostPanel(post); const { showTagsPanel } = data; const [showNotificationCta, setShowNotificationCta] = useState(false); @@ -95,6 +98,7 @@ export function PostActions({ } if ( + !isNotificationCtaExperimentEnabled || creatorContentPreference?.status === ContentPreferenceStatus.Subscribed ) { return; @@ -345,7 +349,7 @@ export function PostActions({
- {showNotificationCta && ( + {isNotificationCtaExperimentEnabled && showNotificationCta && ( )} {showTagsPanel !== undefined && ( diff --git a/packages/shared/src/components/post/tags/PostTagList.tsx b/packages/shared/src/components/post/tags/PostTagList.tsx index b74f336f94f..4005d31d1e9 100644 --- a/packages/shared/src/components/post/tags/PostTagList.tsx +++ b/packages/shared/src/components/post/tags/PostTagList.tsx @@ -19,6 +19,7 @@ import { PlusIcon } from '../../icons'; import { IconSize } from '../../Icon'; import { Tooltip } from '../../tooltip/Tooltip'; import EnableNotification from '../../notifications/EnableNotification'; +import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment'; interface PostTagListProps { post: Post; @@ -100,6 +101,8 @@ const PostTagItem = ({ }; export const PostTagList = ({ post }: PostTagListProps): ReactElement => { + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const { onFollowTag, tags } = useFollowPostTags({ post }); const [newlyFollowedTag, setNewlyFollowedTag] = useState(null); @@ -118,7 +121,9 @@ export const PostTagList = ({ post }: PostTagListProps): ReactElement => { return; } - setNewlyFollowedTag(tag); + if (isNotificationCtaExperimentEnabled) { + setNewlyFollowedTag(tag); + } }; return ( @@ -136,7 +141,7 @@ export const PostTagList = ({ post }: PostTagListProps): ReactElement => { /> ))} - {newlyFollowedTag && ( + {isNotificationCtaExperimentEnabled && newlyFollowedTag && ( { - const forceSideMenuPromptFromUrl = - globalThis?.location?.search?.includes('forceSideMenuPrompt=1') ?? false; - const forceInFeedHeroFromUrl = - globalThis?.location?.search?.includes('forceInFeedHero=1') ?? false; - const forceBottomHeroFromUrl = - globalThis?.location?.search?.includes('forceBottomHero=1') ?? false; - const forceTopHeroFromUrl = - globalThis?.location?.search?.includes('forceTopHero=1') ?? false; - const forcePopupNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forcePopupNotificationCta=1') ?? - false; - const forceNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forceNotificationCta=1') ?? false; + const { isEnabled, shouldHidePlacement } = useNotificationCtaExperiment(); const { shouldShowCta, onEnable, onDismiss } = useEnableNotification({ source: NotificationPromptSource.NotificationsPage, }); - const shouldHideSideMenuPrompt = - forceInFeedHeroFromUrl || - forceBottomHeroFromUrl || - forceTopHeroFromUrl || - forcePopupNotificationCtaFromUrl || - forceNotificationCtaFromUrl; + const shouldHideSideMenuPrompt = shouldHidePlacement( + NotificationCtaPreviewPlacement.SidebarPrompt, + ); if ( + !isEnabled || !sidebarExpanded || shouldHideSideMenuPrompt || - (!forceSideMenuPromptFromUrl && !shouldShowCta) + !shouldShowCta ) { return null; } return (
-
- +
-
+
diff --git a/packages/shared/src/components/streak/StreakNotificationReminder.tsx b/packages/shared/src/components/streak/StreakNotificationReminder.tsx deleted file mode 100644 index a14e31abbb8..00000000000 --- a/packages/shared/src/components/streak/StreakNotificationReminder.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import type { ReactElement } from 'react'; -import React from 'react'; -import { BellIcon } from '../icons'; -import { - Button, - ButtonColor, - ButtonSize, - ButtonVariant, -} from '../buttons/Button'; -import { - Typography, - TypographyColor, - TypographyType, -} from '../typography/Typography'; - -type StreakNotificationReminderProps = { - onEnable: () => void | Promise; -}; - -export const StreakNotificationReminder = ({ - onEnable, -}: StreakNotificationReminderProps): ReactElement => { - return ( -
- - Never lose your streak again. - - -
- ); -}; diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx b/packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx new file mode 100644 index 00000000000..cdfec35a741 --- /dev/null +++ b/packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx @@ -0,0 +1,86 @@ +import { renderHook } from '@testing-library/react'; +import { NotificationPromptSource } from '../../lib/log'; +import { useEnableNotification } from './useEnableNotification'; + +const mockUseLogContext = jest.fn(); +const mockPersistentContext = jest.fn(); +const mockUsePushNotificationMutation = jest.fn(); +const mockUsePushNotificationContext = jest.fn(); +const mockUseNotificationCtaExperiment = jest.fn(); + +jest.mock('../../contexts/LogContext', () => ({ + useLogContext: () => mockUseLogContext(), +})); + +jest.mock('../usePersistentContext', () => ({ + __esModule: true, + default: (...args) => mockPersistentContext(...args), +})); + +jest.mock('./usePushNotificationMutation', () => ({ + usePushNotificationMutation: () => mockUsePushNotificationMutation(), +})); + +jest.mock('../../contexts/PushNotificationContext', () => ({ + usePushNotificationContext: () => mockUsePushNotificationContext(), +})); + +jest.mock('./useNotificationCtaExperiment', () => ({ + useNotificationCtaExperiment: () => mockUseNotificationCtaExperiment(), +})); + +describe('useEnableNotification', () => { + beforeEach(() => { + jest.clearAllMocks(); + + mockUseLogContext.mockReturnValue({ logEvent: jest.fn() }); + mockPersistentContext.mockReturnValue([false, jest.fn(), true]); + mockUsePushNotificationMutation.mockReturnValue({ + hasPermissionCache: false, + acceptedJustNow: false, + onEnablePush: jest.fn(), + }); + mockUsePushNotificationContext.mockReturnValue({ + isInitialized: true, + isPushSupported: true, + isSubscribed: false, + shouldOpenPopup: () => false, + }); + mockUseNotificationCtaExperiment.mockReturnValue({ + isEnabled: false, + isPreviewActive: false, + }); + }); + + it('should hide rollout-only comment upvote CTA when the experiment is off', () => { + const { result } = renderHook(() => + useEnableNotification({ + source: NotificationPromptSource.CommentUpvote, + }), + ); + + expect(result.current.shouldShowCta).toBe(false); + }); + + it('should force-show the CTA while preview mode is active', () => { + mockPersistentContext.mockReturnValue([true, jest.fn(), true]); + mockUsePushNotificationContext.mockReturnValue({ + isInitialized: true, + isPushSupported: true, + isSubscribed: true, + shouldOpenPopup: () => false, + }); + mockUseNotificationCtaExperiment.mockReturnValue({ + isEnabled: true, + isPreviewActive: true, + }); + + const { result } = renderHook(() => + useEnableNotification({ + source: NotificationPromptSource.NotificationsPage, + }), + ); + + expect(result.current.shouldShowCta).toBe(true); + }); +}); diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index 938094e9ef4..4b41f5b0a54 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -5,7 +5,7 @@ import { LogEvent, NotificationPromptSource, TargetType } from '../../lib/log'; import { usePushNotificationMutation } from './usePushNotificationMutation'; import { usePushNotificationContext } from '../../contexts/PushNotificationContext'; import { checkIsExtension } from '../../lib/func'; -import { isDevelopment } from '../../lib/constants'; +import { useNotificationCtaExperiment } from './useNotificationCtaExperiment'; export const DISMISS_PERMISSION_BANNER = 'DISMISS_PERMISSION_BANNER'; export const FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY = @@ -30,6 +30,8 @@ export const useEnableNotification = ({ source = NotificationPromptSource.NotificationsPage, ignoreDismissState = false, }: UseEnableNotificationProps): UseEnableNotification => { + const { isEnabled: isNotificationCtaExperimentEnabled, isPreviewActive } = + useNotificationCtaExperiment(); const isCommentUpvoteSource = source === NotificationPromptSource.CommentUpvote; const isExtension = checkIsExtension(); @@ -39,25 +41,6 @@ export const useEnableNotification = ({ usePushNotificationContext(); const { hasPermissionCache, acceptedJustNow, onEnablePush } = usePushNotificationMutation(); - const forceUpvoteNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forceUpvoteNotificationCta=1') ?? - false; - const forceNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forceNotificationCta=1') ?? false; - const forcePopupNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forcePopupNotificationCta=1') ?? - false; - const forceSideMenuPromptFromUrl = - globalThis?.location?.search?.includes('forceSideMenuPrompt=1') ?? false; - const forceInFeedHeroFromUrl = - globalThis?.location?.search?.includes('forceInFeedHero=1') ?? false; - const forceBottomHeroFromUrl = - globalThis?.location?.search?.includes('forceBottomHero=1') ?? false; - const forceTopHeroFromUrl = - globalThis?.location?.search?.includes('forceTopHero=1') ?? false; - const forceSquadNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forceSquadNotificationCta=1') ?? - false; const forceUpvoteNotificationCtaFromSession = isTruthySessionFlag( globalThis?.sessionStorage?.getItem( FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY, @@ -65,20 +48,7 @@ export const useEnableNotification = ({ ); const shouldForceUpvoteNotificationCtaForSession = source === NotificationPromptSource.CommentUpvote && - (forceUpvoteNotificationCtaFromSession || - forceUpvoteNotificationCtaFromUrl); - const shouldForceSquadNotificationCta = - source === NotificationPromptSource.SquadPage && - forceSquadNotificationCtaFromUrl; - const shouldForcePopupNotificationCta = - forcePopupNotificationCtaFromUrl || forceNotificationCtaFromUrl; - const shouldHideNotificationCtaForBottomHero = - (forceBottomHeroFromUrl || - forceInFeedHeroFromUrl || - forceTopHeroFromUrl || - forceSideMenuPromptFromUrl) && - source === NotificationPromptSource.NotificationsPage && - !shouldForcePopupNotificationCta; + forceUpvoteNotificationCtaFromSession; const [isDismissed, setIsDismissed, isLoaded] = usePersistentContext( DISMISS_PERMISSION_BANNER, false, @@ -92,8 +62,7 @@ export const useEnableNotification = ({ ignoreDismissState || shouldIgnoreDismissStateForSource || shouldForceUpvoteNotificationCtaForSession || - shouldForceSquadNotificationCta || - shouldForcePopupNotificationCta + isPreviewActive ? false : isDismissed; const onDismiss = useCallback(() => { @@ -109,32 +78,26 @@ export const useEnableNotification = ({ [source, onEnablePush], ); - const shouldForceCtaInDevelopment = - isDevelopment && - (source === NotificationPromptSource.NotificationsPage || - source === NotificationPromptSource.SquadPage || - source === NotificationPromptSource.SourceSubscribe); - const subscribed = shouldForceCtaInDevelopment - ? false - : isSubscribed || (shouldOpenPopup() && hasPermissionCache); + const isRolloutOnlySource = + source === NotificationPromptSource.CommentUpvote || + source === NotificationPromptSource.PostTagFollow; + const subscribed = isSubscribed || (shouldOpenPopup() && hasPermissionCache); const enabledJustNow = subscribed && acceptedJustNow; const shouldRequireNotSubscribed = - source !== NotificationPromptSource.PostTagFollow && - source !== NotificationPromptSource.NewComment && + source !== NotificationPromptSource.CommentUpvote && + !isPreviewActive && !shouldForceUpvoteNotificationCtaForSession; const conditions = [ - isLoaded, + isLoaded || isPreviewActive, shouldRequireNotSubscribed ? !subscribed : true, isInitialized, isPushSupported || isExtension, ]; const computeShouldShowCta = (): boolean => { - if (shouldForceCtaInDevelopment) { - return ( - (shouldForcePopupNotificationCta || isLoaded) && !effectiveIsDismissed - ); + if (isPreviewActive) { + return true; } if (isCommentUpvoteSource) { @@ -142,8 +105,7 @@ export const useEnableNotification = ({ } return ( - (shouldForceSquadNotificationCta || - conditions.every(Boolean) || + (conditions.every(Boolean) || (enabledJustNow && source !== NotificationPromptSource.SquadPostModal)) && !effectiveIsDismissed @@ -151,7 +113,9 @@ export const useEnableNotification = ({ }; const shouldShowCta = - computeShouldShowCta() && !shouldHideNotificationCtaForBottomHero; + !isRolloutOnlySource || isNotificationCtaExperimentEnabled + ? computeShouldShowCta() + : false; useEffect(() => { if (!shouldShowCta || hasLoggedImpression.current) { diff --git a/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts b/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts new file mode 100644 index 00000000000..536f26c3137 --- /dev/null +++ b/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts @@ -0,0 +1,154 @@ +import { useCallback, useEffect } from 'react'; +import { notificationCtaV2Feature } from '../../lib/featureManagement'; +import { isDevelopment } from '../../lib/constants'; +import { useConditionalFeature } from '../useConditionalFeature'; + +/** + * QA preview note: + * - Enable the flag with GrowthBook using `notification_cta_v2`. + * - In development, force preview via `?notificationCtaPreview=on`, + * `?notificationCtaPreview=top-hero`, `?notificationCtaPreview=in-feed-hero`, + * `?notificationCtaPreview=sidebar-prompt`, or clear it with + * `?notificationCtaPreview=clear`. + * - The query param is mirrored into session storage so refreshes keep the same + * preview until cleared. + * + * Cleanup note: + * - When the QA mechanism is no longer needed, remove the query/session preview + * handling from this file and convert callers to rely only on the permanent + * flag behavior. + */ +const NOTIFICATION_CTA_PREVIEW_QUERY_PARAM = 'notificationCtaPreview'; +const NOTIFICATION_CTA_PREVIEW_SESSION_KEY = 'notification_cta_preview'; + +export const NotificationCtaPreviewPlacement = { + TopHero: 'top-hero', + InFeedHero: 'in-feed-hero', + SidebarPrompt: 'sidebar-prompt', +} as const; + +export type NotificationCtaPreviewPlacementValue = + (typeof NotificationCtaPreviewPlacement)[keyof typeof NotificationCtaPreviewPlacement]; + +type NotificationCtaPreviewValue = NotificationCtaPreviewPlacementValue | 'on'; + +const clearPreviewValues = new Set(['0', 'clear', 'off']); +const validPreviewValues = new Set([ + 'on', + NotificationCtaPreviewPlacement.TopHero, + NotificationCtaPreviewPlacement.InFeedHero, + NotificationCtaPreviewPlacement.SidebarPrompt, +]); + +const parsePreviewValue = ( + value: string | null, +): NotificationCtaPreviewValue | null => { + if (!value) { + return null; + } + + const normalizedValue = value.trim().toLowerCase(); + if (clearPreviewValues.has(normalizedValue)) { + return null; + } + + if (!validPreviewValues.has(normalizedValue as NotificationCtaPreviewValue)) { + return null; + } + + return normalizedValue as NotificationCtaPreviewValue; +}; + +const getQueryPreviewValue = (): string | null => { + if (typeof window === 'undefined') { + return null; + } + + return new URLSearchParams(window.location.search).get( + NOTIFICATION_CTA_PREVIEW_QUERY_PARAM, + ); +}; + +const getStoredPreviewValue = (): string | null => { + if (typeof window === 'undefined') { + return null; + } + + return window.sessionStorage.getItem(NOTIFICATION_CTA_PREVIEW_SESSION_KEY); +}; + +export interface UseNotificationCtaExperiment { + isEnabled: boolean; + isFeatureEnabled: boolean; + isPreviewActive: boolean; + forcedPlacement: NotificationCtaPreviewPlacementValue | null; + isPlacementForced: ( + placement: NotificationCtaPreviewPlacementValue, + ) => boolean; + shouldHidePlacement: ( + placement: NotificationCtaPreviewPlacementValue, + ) => boolean; +} + +export const useNotificationCtaExperiment = + (): UseNotificationCtaExperiment => { + const { value: isFeatureEnabled } = useConditionalFeature({ + feature: notificationCtaV2Feature, + }); + + const queryPreviewValue = getQueryPreviewValue(); + const previewValue = isDevelopment + ? parsePreviewValue(queryPreviewValue ?? getStoredPreviewValue()) + : null; + const forcedPlacement = + previewValue && previewValue !== 'on' ? previewValue : null; + const isPreviewActive = !!previewValue; + + useEffect(() => { + if ( + !isDevelopment || + typeof window === 'undefined' || + !queryPreviewValue + ) { + return; + } + + const normalizedValue = queryPreviewValue.trim().toLowerCase(); + if (clearPreviewValues.has(normalizedValue)) { + window.sessionStorage.removeItem(NOTIFICATION_CTA_PREVIEW_SESSION_KEY); + return; + } + + if ( + validPreviewValues.has(normalizedValue as NotificationCtaPreviewValue) + ) { + window.sessionStorage.setItem( + NOTIFICATION_CTA_PREVIEW_SESSION_KEY, + normalizedValue, + ); + } + }, [queryPreviewValue]); + + const isPlacementForced = useCallback( + (placement: NotificationCtaPreviewPlacementValue) => { + return forcedPlacement === placement; + }, + [forcedPlacement], + ); + + const shouldHidePlacement = useCallback( + (placement: NotificationCtaPreviewPlacementValue) => { + return !!forcedPlacement && forcedPlacement !== placement; + }, + [forcedPlacement], + ); + + return { + isEnabled: Boolean(isFeatureEnabled) || isPreviewActive, + isFeatureEnabled: Boolean(isFeatureEnabled), + isPreviewActive, + forcedPlacement, + isPlacementForced, + shouldHidePlacement, + }; + }; diff --git a/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx b/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx index d83c88cf0ac..638ffe5c11f 100644 --- a/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx +++ b/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx @@ -93,13 +93,7 @@ export const usePushNotificationMutation = ({ return isGranted; }, - [ - user, - shouldOpenPopup, - subscribe, - onOpenPopup, - onGranted, - ], + [user, shouldOpenPopup, subscribe, onOpenPopup, onGranted], ); const onTogglePermission = useCallback( diff --git a/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx b/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx index 01153c97d39..e49026c2507 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx +++ b/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx @@ -10,6 +10,7 @@ const mockUsePersonalizedDigest = jest.fn(); const mockPersistentContext = jest.fn(); const mockUseViewSize = jest.fn(); const mockUsePushNotificationMutation = jest.fn(); +const mockUseNotificationCtaExperiment = jest.fn(); jest.mock('../../contexts/AuthContext', () => ({ useAuthContext: () => mockUseAuthContext(), @@ -47,6 +48,10 @@ jest.mock('./usePushNotificationMutation', () => ({ usePushNotificationMutation: () => mockUsePushNotificationMutation(), })); +jest.mock('./useNotificationCtaExperiment', () => ({ + useNotificationCtaExperiment: () => mockUseNotificationCtaExperiment(), +})); + describe('useReadingReminderHero', () => { const logEvent = jest.fn(); const subscribePersonalizedDigest = jest.fn(() => Promise.resolve(null)); @@ -69,6 +74,10 @@ describe('useReadingReminderHero', () => { mockPersistentContext.mockReturnValue([null, setLastSeen, true]); mockUseViewSize.mockReturnValue(true); mockUsePushNotificationMutation.mockReturnValue({ onEnablePush }); + mockUseNotificationCtaExperiment.mockReturnValue({ + isEnabled: true, + isPreviewActive: false, + }); }); it('should show for invalid persisted timestamps', () => { @@ -79,7 +88,7 @@ describe('useReadingReminderHero', () => { expect(result.current.shouldShow).toBe(true); }); - it("should still show on mobile on the user's registration day", () => { + it("should not show on the user's registration day", () => { mockUseAuthContext.mockReturnValue({ isLoggedIn: true, user: { timezone: 'UTC', createdAt: new Date().toISOString() }, @@ -87,11 +96,11 @@ describe('useReadingReminderHero', () => { const { result } = renderHook(() => useReadingReminderHero()); - expect(result.current.shouldShow).toBe(true); + expect(result.current.shouldShow).toBe(false); expect(setLastSeen).not.toHaveBeenCalled(); }); - it('should still show on mobile while digest subscription data is loading', () => { + it('should not show while digest subscription data is loading', () => { mockUsePersonalizedDigest.mockReturnValue({ getPersonalizedDigest: jest.fn(() => null), isLoading: true, @@ -100,7 +109,7 @@ describe('useReadingReminderHero', () => { const { result } = renderHook(() => useReadingReminderHero()); - expect(result.current.shouldShow).toBe(true); + expect(result.current.shouldShow).toBe(false); expect(setLastSeen).not.toHaveBeenCalled(); }); @@ -111,8 +120,20 @@ describe('useReadingReminderHero', () => { expect(setLastSeen).toHaveBeenCalledTimes(1); }); - it('should show on desktop for logged in users', () => { + it('should not show on desktop without preview', () => { + mockUseViewSize.mockReturnValue(false); + + const { result } = renderHook(() => useReadingReminderHero()); + + expect(result.current.shouldShow).toBe(false); + }); + + it('should show on desktop while preview is active', () => { mockUseViewSize.mockReturnValue(false); + mockUseNotificationCtaExperiment.mockReturnValue({ + isEnabled: true, + isPreviewActive: true, + }); const { result } = renderHook(() => useReadingReminderHero()); diff --git a/packages/shared/src/hooks/notifications/useReadingReminderHero.ts b/packages/shared/src/hooks/notifications/useReadingReminderHero.ts index 1d45ff9a26f..c1376b5dfee 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderHero.ts +++ b/packages/shared/src/hooks/notifications/useReadingReminderHero.ts @@ -10,6 +10,7 @@ import usePersistentContext, { import { useViewSize, ViewSize } from '../useViewSize'; import { usePushNotificationMutation } from './usePushNotificationMutation'; import { LogEvent, NotificationPromptSource } from '../../lib/log'; +import { useNotificationCtaExperiment } from './useNotificationCtaExperiment'; interface UseReadingReminderHero { shouldShow: boolean; @@ -48,6 +49,8 @@ export const useReadingReminderHero = (): UseReadingReminderHero => { const { isLoggedIn, user } = useAuthContext(); const { logEvent } = useLogContext(); const { onEnablePush } = usePushNotificationMutation(); + const { isEnabled: isNotificationCtaExperimentEnabled, isPreviewActive } = + useNotificationCtaExperiment(); const { getPersonalizedDigest, isLoading: isDigestLoading, @@ -65,35 +68,18 @@ export const useReadingReminderHero = (): UseReadingReminderHero => { const isRegisteredToday = getIsRegisteredToday(user?.createdAt); const isMobile = useViewSize(ViewSize.MobileL); - const forceSideMenuPromptFromUrl = - globalThis?.location?.search?.includes('forceSideMenuPrompt=1') ?? false; - const forceInFeedHeroFromUrl = - globalThis?.location?.search?.includes('forceInFeedHero=1') ?? false; - const forceBottomHeroFromUrl = - globalThis?.location?.search?.includes('forceBottomHero=1') ?? false; - const forceTopHeroFromUrl = - globalThis?.location?.search?.includes('forceTopHero=1') ?? false; - const forcePopupNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forcePopupNotificationCta=1') ?? - false; - const forceNotificationCtaFromUrl = - globalThis?.location?.search?.includes('forceNotificationCta=1') ?? false; - const shouldForcePopupNotificationCta = - forcePopupNotificationCtaFromUrl || forceNotificationCtaFromUrl; - const shouldForceShow = isLoggedIn; + const shouldForceShow = isPreviewActive && isLoggedIn; const shouldEvaluate = + isNotificationCtaExperimentEnabled && isMobile && isLoggedIn && !isDigestLoading && !isSubscribedToReadingReminder && !isRegisteredToday; - // Reading reminder hero is now always enabled on mobile. - const isFeatureEnabled = true; const hasSeenToday = getHasSeenToday(lastSeen); const [hasShownInSession, setHasShownInSession] = useState(false); - const shouldShowBase = - shouldEvaluate && isFeatureEnabled && !hasSeenToday && isFetched; + const shouldShowBase = shouldEvaluate && !hasSeenToday && isFetched; useEffect(() => { if (!shouldShowBase || hasShownInSession) { @@ -127,13 +113,10 @@ export const useReadingReminderHero = (): UseReadingReminderHero => { }, [logEvent, onEnablePush, setLastSeen, subscribePersonalizedDigest, user]); const shouldShow = - !shouldForcePopupNotificationCta && - !forceSideMenuPromptFromUrl && - (forceBottomHeroFromUrl || - forceInFeedHeroFromUrl || - forceTopHeroFromUrl || - shouldForceShow || - (!isSubscribedToReadingReminder && (shouldShowBase || hasShownInSession))); + shouldForceShow || + (isNotificationCtaExperimentEnabled && + !isSubscribedToReadingReminder && + (shouldShowBase || hasShownInSession)); return { shouldShow, onEnable }; }; diff --git a/packages/shared/src/hooks/post/useViewPost.ts b/packages/shared/src/hooks/post/useViewPost.ts index 01a5ca14aed..155239724f8 100644 --- a/packages/shared/src/hooks/post/useViewPost.ts +++ b/packages/shared/src/hooks/post/useViewPost.ts @@ -60,6 +60,6 @@ export const useViewPost = (): UseMutateAsyncFunction< throw err; } }, - [onSendViewPost, user?.id], + [onSendViewPost], ); }; diff --git a/packages/shared/src/hooks/squads/usePostToSquad.tsx b/packages/shared/src/hooks/squads/usePostToSquad.tsx index 809df2fd872..af3112d45f0 100644 --- a/packages/shared/src/hooks/squads/usePostToSquad.tsx +++ b/packages/shared/src/hooks/squads/usePostToSquad.tsx @@ -25,9 +25,8 @@ import { getApiError, gqlClient, } from '../../graphql/common'; -import { useToastNotification } from '../useToastNotification'; +import { useToastNotification, ToastSubject } from '../useToastNotification'; import type { NotifyOptionalProps } from '../useToastNotification'; -import { ToastSubject } from '../useToastNotification'; import type { SourcePostModeration } from '../../graphql/squads'; import { addPostToSquad, updateSquadPost } from '../../graphql/squads'; import { ActionType } from '../../graphql/actions'; @@ -47,7 +46,7 @@ import { import { usePushNotificationContext } from '../../contexts/PushNotificationContext'; import { usePushNotificationMutation } from '../notifications/usePushNotificationMutation'; import { NotificationPromptSource } from '../../lib/log'; -import { isDevelopment } from '../../lib/constants'; +import { useNotificationCtaExperiment } from '../notifications/useNotificationCtaExperiment'; const PROFILE_COMPLETION_POST_GATE_MESSAGE = 'Complete your profile to create posts'; @@ -119,6 +118,8 @@ export const usePostToSquad = ({ const { user } = useAuthContext(); const { isSubscribed, shouldOpenPopup } = usePushNotificationContext(); const { onEnablePush } = usePushNotificationMutation(); + const { isEnabled: isNotificationCtaExperimentEnabled, isPreviewActive } = + useNotificationCtaExperiment(); const client = useQueryClient(); const { completeAction } = useActions(); const [preview, setPreview] = useState( @@ -126,9 +127,9 @@ export const usePostToSquad = ({ ); const { requestMethod: requestMethodContext } = useRequestProtocol(); const requestMethod = requestMethodContext ?? gqlClient.request; - const forceNotificationQaFlow = isDevelopment; const shouldShowEnableNotificationToast = - !shouldOpenPopup() && (forceNotificationQaFlow || !isSubscribed); + isNotificationCtaExperimentEnabled && + (isPreviewActive || (!shouldOpenPopup() && !isSubscribed)); const callOnError = useCallback( (err: unknown): void => { diff --git a/packages/shared/src/hooks/streaks/useStreakRecover.ts b/packages/shared/src/hooks/streaks/useStreakRecover.ts index d3756c8deea..91761424e45 100644 --- a/packages/shared/src/hooks/streaks/useStreakRecover.ts +++ b/packages/shared/src/hooks/streaks/useStreakRecover.ts @@ -66,9 +66,6 @@ export const useStreakRecover = ({ const { isStreaksEnabled } = useReadingStreak(); const client = useQueryClient(); const router = useRouter(); - const { - query: { streak_restore: streakRestore }, - } = router; const recoverMutation = useMutation({ mutationKey: generateQueryKey(RequestKey.UserStreakRecover), diff --git a/packages/shared/src/hooks/useToastNotification.ts b/packages/shared/src/hooks/useToastNotification.ts index c7d666968bc..144b68bd0bd 100644 --- a/packages/shared/src/hooks/useToastNotification.ts +++ b/packages/shared/src/hooks/useToastNotification.ts @@ -33,7 +33,10 @@ export interface ToastNotification { export const TOAST_NOTIF_KEY = ['toast_notif']; export type NotifyOptionalProps = Partial< - Pick + Pick< + ToastNotification, + 'timer' | 'subject' | 'persistent' | 'onClose' | 'action' + > >; export const useToastNotification = (): UseToastNotification => { diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts index 6b1d9d5d193..bfe19d1c0ae 100644 --- a/packages/shared/src/lib/featureManagement.ts +++ b/packages/shared/src/lib/featureManagement.ts @@ -79,6 +79,11 @@ export const featureReadingReminderMobile = new Feature( false, ); +export const notificationCtaV2Feature = new Feature( + 'notification_cta_v2', + false, +); + export const clickbaitTriesMax = new Feature('clickbait_tries_max', 5); export { feature }; diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css index 4cb62ef1b20..130859f91d7 100644 --- a/packages/shared/src/styles/base.css +++ b/packages/shared/src/styles/base.css @@ -1,5 +1,4 @@ -html, -#daily-companion-wrapper { +html, #daily-companion-wrapper { background: var(--theme-background-default); color: var(--theme-text-primary); height: stretch; @@ -59,44 +58,28 @@ body { --theme-accent-burger-subtle: theme('colors.raw.burger.30'); --theme-accent-burger-default: theme('colors.raw.burger.40'); --theme-accent-burger-bolder: theme('colors.raw.burger.50'); - --theme-accent-burger-flat: color-mix( - in srgb, - var(--theme-accent-burger-default) 16%, - var(--theme-background-default) - ); + --theme-accent-burger-flat: color-mix(in srgb, var(--theme-accent-burger-default) 16%, var(--theme-background-default)); /* Blue Cheese */ --theme-accent-blueCheese-subtlest: theme('colors.raw.blueCheese.10'); --theme-accent-blueCheese-subtler: theme('colors.raw.blueCheese.20'); --theme-accent-blueCheese-subtle: theme('colors.raw.blueCheese.30'); --theme-accent-blueCheese-default: theme('colors.raw.blueCheese.40'); --theme-accent-blueCheese-bolder: theme('colors.raw.blueCheese.50'); - --theme-accent-blueCheese-flat: color-mix( - in srgb, - var(--theme-accent-blueCheese-default) 16%, - var(--theme-background-default) - ); + --theme-accent-blueCheese-flat: color-mix(in srgb, var(--theme-accent-blueCheese-default) 16%, var(--theme-background-default)); /* Avocado */ --theme-accent-avocado-subtlest: theme('colors.raw.avocado.10'); --theme-accent-avocado-subtler: theme('colors.raw.avocado.20'); --theme-accent-avocado-subtle: theme('colors.raw.avocado.30'); --theme-accent-avocado-default: theme('colors.raw.avocado.40'); --theme-accent-avocado-bolder: theme('colors.raw.avocado.50'); - --theme-accent-avocado-flat: color-mix( - in srgb, - var(--theme-accent-avocado-default) 16%, - var(--theme-background-default) - ); + --theme-accent-avocado-flat: color-mix(in srgb, var(--theme-accent-avocado-default) 16%, var(--theme-background-default)); /* Cheese */ --theme-accent-cheese-subtlest: theme('colors.raw.cheese.10'); --theme-accent-cheese-subtler: theme('colors.raw.cheese.20'); --theme-accent-cheese-subtle: theme('colors.raw.cheese.30'); --theme-accent-cheese-default: theme('colors.raw.cheese.40'); --theme-accent-cheese-bolder: theme('colors.raw.cheese.50'); - --theme-accent-cheese-flat: color-mix( - in srgb, - var(--theme-accent-cheese-default) 16%, - var(--theme-background-default) - ); + --theme-accent-cheese-flat: color-mix(in srgb, var(--theme-accent-cheese-default) 16%, var(--theme-background-default)); /* Salt */ --theme-accent-salt-baseline: theme('colors.raw.salt.0'); --theme-accent-salt-subtlest: theme('colors.raw.salt.20'); @@ -104,11 +87,7 @@ body { --theme-accent-salt-subtle: theme('colors.raw.salt.70'); --theme-accent-salt-default: theme('colors.raw.salt.90'); --theme-accent-salt-bolder: theme('colors.raw.pepper.10'); - --theme-accent-salt-flat: color-mix( - in srgb, - var(--theme-accent-salt-default) 16%, - var(--theme-background-default) - ); + --theme-accent-salt-flat: color-mix(in srgb, var(--theme-accent-salt-default) 16%, var(--theme-background-default)); /* Onion */ --theme-accent-onion-baseline: theme('colors.raw.onion.0'); --theme-accent-onion-subtlest: theme('colors.raw.onion.10'); @@ -116,22 +95,14 @@ body { --theme-accent-onion-subtle: theme('colors.raw.onion.30'); --theme-accent-onion-default: theme('colors.raw.onion.40'); --theme-accent-onion-bolder: theme('colors.raw.onion.50'); - --theme-accent-onion-flat: color-mix( - in srgb, - var(--theme-accent-onion-default) 16%, - var(--theme-background-default) - ); + --theme-accent-onion-flat: color-mix(in srgb, var(--theme-accent-onion-default) 16%, var(--theme-background-default)); /* Water */ --theme-accent-water-subtlest: theme('colors.raw.water.10'); --theme-accent-water-subtler: theme('colors.raw.water.20'); --theme-accent-water-subtle: theme('colors.raw.water.30'); --theme-accent-water-default: theme('colors.raw.water.40'); --theme-accent-water-bolder: theme('colors.raw.water.50'); - --theme-accent-water-flat: color-mix( - in srgb, - var(--theme-accent-water-default) 16%, - var(--theme-background-default) - ); + --theme-accent-water-flat: color-mix(in srgb, var(--theme-accent-water-default) 16%, var(--theme-background-default)); /* Pepper */ --theme-accent-pepper-baseline: theme('colors.raw.pepper.90'); --theme-accent-pepper-subtlest: theme('colors.raw.pepper.80'); @@ -139,44 +110,28 @@ body { --theme-accent-pepper-subtle: theme('colors.raw.pepper.30'); --theme-accent-pepper-default: theme('colors.raw.pepper.10'); --theme-accent-pepper-bolder: theme('colors.raw.salt.90'); - --theme-accent-pepper-flat: color-mix( - in srgb, - var(--theme-accent-pepper-default) 16%, - var(--theme-background-default) - ); + --theme-accent-pepper-flat: color-mix(in srgb, var(--theme-accent-pepper-default) 16%, var(--theme-background-default)); /* Lettuce */ --theme-accent-lettuce-subtlest: theme('colors.raw.lettuce.10'); --theme-accent-lettuce-subtler: theme('colors.raw.lettuce.20'); --theme-accent-lettuce-subtle: theme('colors.raw.lettuce.30'); --theme-accent-lettuce-default: theme('colors.raw.lettuce.40'); --theme-accent-lettuce-bolder: theme('colors.raw.lettuce.50'); - --theme-accent-lettuce-flat: color-mix( - in srgb, - var(--theme-accent-lettuce-default) 16%, - var(--theme-background-default) - ); + --theme-accent-lettuce-flat: color-mix(in srgb, var(--theme-accent-lettuce-default) 16%, var(--theme-background-default)); /* Bun */ --theme-accent-bun-subtlest: theme('colors.raw.bun.10'); --theme-accent-bun-subtler: theme('colors.raw.bun.20'); --theme-accent-bun-subtle: theme('colors.raw.bun.30'); --theme-accent-bun-default: theme('colors.raw.bun.40'); --theme-accent-bun-bolder: theme('colors.raw.bun.50'); - --theme-accent-bun-flat: color-mix( - in srgb, - var(--theme-accent-bun-default) 16%, - var(--theme-background-default) - ); + --theme-accent-bun-flat: color-mix(in srgb, var(--theme-accent-bun-default) 16%, var(--theme-background-default)); /* Ketchup */ --theme-accent-ketchup-subtlest: theme('colors.raw.ketchup.10'); --theme-accent-ketchup-subtler: theme('colors.raw.ketchup.20'); --theme-accent-ketchup-subtle: theme('colors.raw.ketchup.30'); --theme-accent-ketchup-default: theme('colors.raw.ketchup.40'); --theme-accent-ketchup-bolder: theme('colors.raw.ketchup.50'); - --theme-accent-ketchup-flat: color-mix( - in srgb, - var(--theme-accent-ketchup-default) 16%, - var(--theme-background-default) - ); + --theme-accent-ketchup-flat: color-mix(in srgb, var(--theme-accent-ketchup-default) 16%, var(--theme-background-default)); /* Cabbage */ --theme-accent-cabbage-baseline: theme('colors.raw.cabbage.0'); --theme-accent-cabbage-subtlest: theme('colors.raw.cabbage.10'); @@ -184,280 +139,97 @@ body { --theme-accent-cabbage-subtle: theme('colors.raw.cabbage.30'); --theme-accent-cabbage-default: theme('colors.raw.cabbage.40'); --theme-accent-cabbage-bolder: theme('colors.raw.cabbage.50'); - --theme-accent-cabbage-flat: color-mix( - in srgb, - var(--theme-accent-cabbage-default) 16%, - var(--theme-background-default) - ); + --theme-accent-cabbage-flat: color-mix(in srgb, var(--theme-accent-cabbage-default) 16%, var(--theme-background-default)); /* Bacon */ --theme-accent-bacon-subtlest: theme('colors.raw.bacon.10'); --theme-accent-bacon-subtler: theme('colors.raw.bacon.20'); --theme-accent-bacon-subtle: theme('colors.raw.bacon.30'); --theme-accent-bacon-default: theme('colors.raw.bacon.40'); --theme-accent-bacon-bolder: theme('colors.raw.bacon.50'); - --theme-accent-bacon-flat: color-mix( - in srgb, - var(--theme-accent-bacon-default) 16%, - var(--theme-background-default) - ); + --theme-accent-bacon-flat: color-mix(in srgb, var(--theme-accent-bacon-default) 16%, var(--theme-background-default)); /* Brand */ --theme-brand-subtler: var(--theme-accent-cabbage-subtler); --theme-brand-default: var(--theme-accent-cabbage-default); --theme-brand-bolder: var(--theme-accent-cabbage-bolder); - --theme-brand-float: color-mix( - in srgb, - var(--theme-brand-bolder), - transparent 92% - ); - --theme-brand-hover: color-mix( - in srgb, - var(--theme-brand-bolder), - transparent 88% - ); - --theme-brand-active: color-mix( - in srgb, - var(--theme-brand-bolder), - transparent 84% - ); + --theme-brand-float: color-mix(in srgb, var(--theme-brand-bolder), transparent 92%); + --theme-brand-hover: color-mix(in srgb, var(--theme-brand-bolder), transparent 88%); + --theme-brand-active: color-mix(in srgb, var(--theme-brand-bolder), transparent 84%); /* Surface */ --theme-surface-primary: theme('colors.raw.salt.0'); --theme-surface-secondary: theme('colors.raw.salt.90'); --theme-surface-invert: theme('colors.raw.pepper.90'); - --theme-surface-float: color-mix( - in srgb, - var(--theme-surface-secondary), - transparent 92% - ); - --theme-surface-hover: color-mix( - in srgb, - var(--theme-surface-secondary), - transparent 88% - ); - --theme-surface-active: color-mix( - in srgb, - var(--theme-surface-secondary), - transparent 84% - ); - --theme-surface-disabled: color-mix( - in srgb, - var(--theme-surface-secondary), - transparent 80% - ); + --theme-surface-float: color-mix(in srgb, var(--theme-surface-secondary), transparent 92%); + --theme-surface-hover: color-mix(in srgb, var(--theme-surface-secondary), transparent 88%); + --theme-surface-active: color-mix(in srgb, var(--theme-surface-secondary), transparent 84%); + --theme-surface-disabled: color-mix(in srgb, var(--theme-surface-secondary), transparent 80%); --theme-surface-focus: theme('colors.raw.blueCheese.40'); /* Actions */ /* Upvote */ --theme-actions-upvote-default: var(--theme-accent-avocado-default); - --theme-actions-upvote-float: color-mix( - in srgb, - var(--theme-accent-avocado-bolder), - transparent 92% - ); - --theme-actions-upvote-hover: color-mix( - in srgb, - var(--theme-accent-avocado-bolder), - transparent 88% - ); - --theme-actions-upvote-active: color-mix( - in srgb, - var(--theme-accent-avocado-bolder), - transparent 84% - ); + --theme-actions-upvote-float: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 92%); + --theme-actions-upvote-hover: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 88%); + --theme-actions-upvote-active: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 84%); /* Downvote */ --theme-actions-downvote-default: var(--theme-accent-ketchup-default); - --theme-actions-downvote-float: color-mix( - in srgb, - var(--theme-accent-ketchup-bolder), - transparent 92% - ); - --theme-actions-downvote-hover: color-mix( - in srgb, - var(--theme-accent-ketchup-bolder), - transparent 88% - ); - --theme-actions-downvote-active: color-mix( - in srgb, - var(--theme-accent-ketchup-bolder), - transparent 84% - ); + --theme-actions-downvote-float: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 92%); + --theme-actions-downvote-hover: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 88%); + --theme-actions-downvote-active: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 84%); /* Comment */ --theme-actions-comment-default: var(--theme-accent-blueCheese-default); - --theme-actions-comment-float: color-mix( - in srgb, - var(--theme-accent-blueCheese-bolder), - transparent 92% - ); - --theme-actions-comment-hover: color-mix( - in srgb, - var(--theme-accent-blueCheese-bolder), - transparent 88% - ); - --theme-actions-comment-active: color-mix( - in srgb, - var(--theme-accent-blueCheese-bolder), - transparent 84% - ); + --theme-actions-comment-float: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 92%); + --theme-actions-comment-hover: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 88%); + --theme-actions-comment-active: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 84%); /* Bookmark */ --theme-actions-bookmark-default: var(--theme-accent-bun-default); - --theme-actions-bookmark-float: color-mix( - in srgb, - var(--theme-accent-bun-bolder), - transparent 92% - ); - --theme-actions-bookmark-hover: color-mix( - in srgb, - var(--theme-accent-bun-bolder), - transparent 88% - ); - --theme-actions-bookmark-active: color-mix( - in srgb, - var(--theme-accent-bun-bolder), - transparent 84% - ); + --theme-actions-bookmark-float: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 92%); + --theme-actions-bookmark-hover: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 88%); + --theme-actions-bookmark-active: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 84%); /* Share */ --theme-actions-share-default: var(--theme-accent-cabbage-default); - --theme-actions-share-float: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 92% - ); - --theme-actions-share-hover: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 88% - ); - --theme-actions-share-active: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 84% - ); + --theme-actions-share-float: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 92%); + --theme-actions-share-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 88%); + --theme-actions-share-active: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 84%); /* Plus */ --theme-actions-plus-default: var(--theme-accent-bacon-default); - --theme-actions-plus-float: color-mix( - in srgb, - var(--theme-accent-bacon-bolder), - transparent 92% - ); - --theme-actions-plus-hover: color-mix( - in srgb, - var(--theme-accent-bacon-bolder), - transparent 88% - ); - --theme-actions-plus-active: color-mix( - in srgb, - var(--theme-accent-bacon-bolder), - transparent 84% - ); + --theme-actions-plus-float: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 92%); + --theme-actions-plus-hover: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 88%); + --theme-actions-plus-active: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 84%); /* Help */ --theme-actions-help-default: var(--status-help); - --theme-actions-help-float: color-mix( - in srgb, - var(--theme-actions-help-default), - transparent 92% - ); - --theme-actions-help-hover: color-mix( - in srgb, - var(--theme-actions-help-default), - transparent 88% - ); - --theme-actions-help-active: color-mix( - in srgb, - var(--theme-actions-help-default), - transparent 84% - ); + --theme-actions-help-float: color-mix(in srgb, var(--theme-actions-help-default), transparent 92%); + --theme-actions-help-hover: color-mix(in srgb, var(--theme-actions-help-default), transparent 88%); + --theme-actions-help-active: color-mix(in srgb, var(--theme-actions-help-default), transparent 84%); /* Cores */ --theme-actions-cores-default: var(--theme-accent-cheese-default); - --theme-actions-cores-float: color-mix( - in srgb, - var(--theme-actions-cores-default), - transparent 92% - ); - --theme-actions-cores-hover: color-mix( - in srgb, - var(--theme-actions-cores-default), - transparent 88% - ); - --theme-actions-cores-active: color-mix( - in srgb, - var(--theme-actions-cores-default), - transparent 84% - ); + --theme-actions-cores-float: color-mix(in srgb, var(--theme-actions-cores-default), transparent 92%); + --theme-actions-cores-hover: color-mix(in srgb, var(--theme-actions-cores-default), transparent 88%); + --theme-actions-cores-active: color-mix(in srgb, var(--theme-actions-cores-default), transparent 84%); + /* Overlay */ - --theme-overlay-base-primary: color-mix( - in srgb, - var(--theme-accent-onion-subtlest), - transparent 36% - ); - --theme-overlay-base-secondary: color-mix( - in srgb, - var(--theme-accent-onion-subtlest), - transparent 60% - ); - --theme-overlay-base-tertiary: color-mix( - in srgb, - var(--theme-accent-onion-subtlest), - transparent 68% - ); - --theme-overlay-base-quaternary: color-mix( - in srgb, - var(--theme-accent-onion-subtlest), - transparent 76% - ); + --theme-overlay-base-primary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 36%); + --theme-overlay-base-secondary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 60%); + --theme-overlay-base-tertiary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 68%); + --theme-overlay-base-quaternary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 76%); /* Dark */ - --theme-overlay-dark-dark1: color-mix( - in srgb, - theme('colors.raw.pepper.90'), - transparent 68% - ); - --theme-overlay-dark-dark2: color-mix( - in srgb, - theme('colors.raw.pepper.90'), - transparent 60% - ); - --theme-overlay-dark-dark3: color-mix( - in srgb, - theme('colors.raw.pepper.90'), - transparent 36% - ); + --theme-overlay-dark-dark1: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 68%); + --theme-overlay-dark-dark2: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 60%); + --theme-overlay-dark-dark3: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%); /* Border */ /* Subtlest */ --theme-border-subtlest-primary: var(--theme-accent-salt-default); - --theme-border-subtlest-secondary: color-mix( - in srgb, - var(--theme-border-subtlest-primary), - transparent 60% - ); - --theme-border-subtlest-tertiary: color-mix( - in srgb, - var(--theme-border-subtlest-primary), - transparent 80% - ); - --theme-border-subtlest-quaternary: color-mix( - in srgb, - var(--theme-border-subtlest-primary), - transparent 92% - ); + --theme-border-subtlest-secondary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 60%); + --theme-border-subtlest-tertiary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 80%); + --theme-border-subtlest-quaternary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 92%); /* Bolder */ --theme-border-bolder-primary: var(--theme-accent-salt-bolder); - --theme-border-bolder-secondary: color-mix( - in srgb, - var(--theme-border-bolder-primary), - transparent 60% - ); - --theme-border-bolder-tertiary: color-mix( - in srgb, - var(--theme-border-bolder-primary), - transparent 80% - ); - --theme-border-bolder-quaternary: color-mix( - in srgb, - var(--theme-border-bolder-primary), - transparent 92% - ); + --theme-border-bolder-secondary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 60%); + --theme-border-bolder-tertiary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 80%); + --theme-border-bolder-quaternary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 92%); /* Status */ --status-error: var(--theme-accent-ketchup-default); @@ -470,83 +242,39 @@ body { --theme-text-primary: var(--theme-accent-salt-baseline); --theme-text-secondary: var(--theme-accent-salt-subtler); --theme-text-tertiary: var(--theme-accent-salt-default); - --theme-text-quaternary: color-mix( - in srgb, - var(--theme-accent-salt-default), - transparent 36% - ); - --theme-text-disabled: color-mix( - in srgb, - var(--theme-accent-salt-default), - transparent 68% - ); + --theme-text-quaternary: color-mix(in srgb, var(--theme-accent-salt-default), transparent 36%); + --theme-text-disabled: color-mix(in srgb, var(--theme-accent-salt-default), transparent 68%); --theme-text-link: var(--theme-accent-water-subtler); /* Highlight */ - --theme-text-highlight-default: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 76% - ); - --theme-text-highlight-hover: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 68% - ); + --theme-text-highlight-default: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 76%); + --theme-text-highlight-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 68%); /* Shadow */ - --theme-shadow-shadow1: color-mix( - in srgb, - theme('colors.raw.pepper.90'), - transparent 68% - ); - --theme-shadow-shadow2: color-mix( - in srgb, - theme('colors.raw.pepper.90'), - transparent 60% - ); - --theme-shadow-shadow3: color-mix( - in srgb, - theme('colors.raw.pepper.90'), - transparent 36% - ); + --theme-shadow-shadow1: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 68%); + --theme-shadow-shadow2: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 60%); + --theme-shadow-shadow3: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%); --theme-shadow-cabbage: theme('colors.raw.cabbage.40'); /* Blur */ - --theme-blur-blur-highlight: color-mix( - in srgb, - theme('colors.raw.pepper.70'), - transparent 12% - ); - --theme-blur-blur-baseline: color-mix( - in srgb, - theme('colors.raw.pepper.90'), - transparent 12% - ); - --theme-blur-blur-bg: color-mix( - in srgb, - theme('colors.raw.pepper.90'), - transparent 36% - ); - --theme-blur-blur-glass: color-mix( - in srgb, - theme('colors.raw.salt.90'), - transparent 92% - ); + --theme-blur-blur-highlight: color-mix(in srgb, theme('colors.raw.pepper.70'), transparent 12%); + --theme-blur-blur-baseline: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 12%); + --theme-blur-blur-bg: color-mix(in srgb, theme('colors.raw.pepper.90'), transparent 36%); + --theme-blur-blur-glass: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 92%); /** * Current old colors, these should all be changed to one of the above matching ones. */ - --theme-active: theme('colors.raw.salt.90') 33; + --theme-active: theme('colors.raw.salt.90')33; --theme-shadow2: theme('boxShadow.2-black'); --theme-shadow3: theme('boxShadow.3-black'); - --theme-post-disabled: theme('colors.raw.pepper.70') 66; + --theme-post-disabled: theme('colors.raw.pepper.70')66; --theme-overlay-quaternary: theme('colors.overlay.quaternary.white'); --theme-overlay-water: theme('colors.overlay.quaternary.water'); --theme-overlay-cabbage: theme('colors.overlay.quaternary.cabbage'); - --theme-overlay-from: theme('colors.raw.onion.40') 30; - --theme-overlay-to: theme('colors.raw.cabbage.40') 30; + --theme-overlay-from: theme('colors.raw.onion.40')30; + --theme-overlay-to: theme('colors.raw.cabbage.40')30; --theme-overlay-float-bun: theme('colors.overlay.float.bun'); --theme-overlay-float-blueCheese: theme('colors.overlay.float.blueCheese'); @@ -558,8 +286,8 @@ body { --theme-overlay-active-onion: theme('colors.overlay.active.onion'); --theme-overlay-active-salt: theme('colors.overlay.active.salt'); - --theme-gradient-cabbage: theme('colors.raw.cabbage.10') 66; - --theme-gradient-onion: theme('colors.raw.onion.10') 66; + --theme-gradient-cabbage: theme('colors.raw.cabbage.10')66; + --theme-gradient-onion: theme('colors.raw.onion.10')66; --theme-rank-highlight: theme('colors.raw.salt.10'); @@ -617,44 +345,28 @@ body { --theme-accent-burger-subtle: theme('colors.raw.burger.70'); --theme-accent-burger-default: theme('colors.raw.burger.60'); --theme-accent-burger-bolder: theme('colors.raw.burger.50'); - --theme-accent-burger-flat: color-mix( - in srgb, - var(--theme-accent-burger-default) 16%, - var(--theme-background-default) - ); + --theme-accent-burger-flat: color-mix(in srgb, var(--theme-accent-burger-default) 16%, var(--theme-background-default)); /* Blue Cheese */ --theme-accent-blueCheese-subtlest: theme('colors.raw.blueCheese.90'); --theme-accent-blueCheese-subtler: theme('colors.raw.blueCheese.80'); --theme-accent-blueCheese-subtle: theme('colors.raw.blueCheese.70'); --theme-accent-blueCheese-default: theme('colors.raw.blueCheese.60'); --theme-accent-blueCheese-bolder: theme('colors.raw.blueCheese.50'); - --theme-accent-blueCheese-flat: color-mix( - in srgb, - var(--theme-accent-blueCheese-default) 16%, - var(--theme-background-default) - ); + --theme-accent-blueCheese-flat: color-mix(in srgb, var(--theme-accent-blueCheese-default) 16%, var(--theme-background-default)); /* Avocado */ --theme-accent-avocado-subtlest: theme('colors.raw.avocado.90'); --theme-accent-avocado-subtler: theme('colors.raw.avocado.80'); --theme-accent-avocado-subtle: theme('colors.raw.avocado.70'); --theme-accent-avocado-default: theme('colors.raw.avocado.60'); --theme-accent-avocado-bolder: theme('colors.raw.avocado.50'); - --theme-accent-avocado-flat: color-mix( - in srgb, - var(--theme-accent-avocado-default) 16%, - var(--theme-background-default) - ); + --theme-accent-avocado-flat: color-mix(in srgb, var(--theme-accent-avocado-default) 16%, var(--theme-background-default)); /* Cheese */ --theme-accent-cheese-subtlest: theme('colors.raw.cheese.90'); --theme-accent-cheese-subtler: theme('colors.raw.cheese.80'); --theme-accent-cheese-subtle: theme('colors.raw.cheese.70'); --theme-accent-cheese-default: theme('colors.raw.cheese.60'); --theme-accent-cheese-bolder: theme('colors.raw.cheese.50'); - --theme-accent-cheese-flat: color-mix( - in srgb, - var(--theme-accent-cheese-default) 16%, - var(--theme-background-default) - ); + --theme-accent-cheese-flat: color-mix(in srgb, var(--theme-accent-cheese-default) 16%, var(--theme-background-default)); /* Salt */ --theme-accent-salt-baseline: theme('colors.raw.pepper.90'); --theme-accent-salt-subtlest: theme('colors.raw.pepper.80'); @@ -662,33 +374,21 @@ body { --theme-accent-salt-subtle: theme('colors.raw.pepper.30'); --theme-accent-salt-default: theme('colors.raw.pepper.10'); --theme-accent-salt-bolder: theme('colors.raw.salt.90'); - --theme-accent-salt-flat: color-mix( - in srgb, - var(--theme-accent-salt-default) 16%, - var(--theme-background-default) - ); + --theme-accent-salt-flat: color-mix(in srgb, var(--theme-accent-salt-default) 16%, var(--theme-background-default)); /* Onion */ --theme-accent-onion-subtlest: theme('colors.raw.onion.90'); --theme-accent-onion-subtler: theme('colors.raw.onion.80'); --theme-accent-onion-subtle: theme('colors.raw.onion.70'); --theme-accent-onion-default: theme('colors.raw.onion.60'); --theme-accent-onion-bolder: theme('colors.raw.onion.50'); - --theme-accent-onion-flat: color-mix( - in srgb, - var(--theme-accent-onion-default) 16%, - var(--theme-background-default) - ); + --theme-accent-onion-flat: color-mix(in srgb, var(--theme-accent-onion-default) 16%, var(--theme-background-default)); /* Water */ --theme-accent-water-subtlest: theme('colors.raw.water.90'); --theme-accent-water-subtler: theme('colors.raw.water.80'); --theme-accent-water-subtle: theme('colors.raw.water.70'); --theme-accent-water-default: theme('colors.raw.water.60'); --theme-accent-water-bolder: theme('colors.raw.water.50'); - --theme-accent-water-flat: color-mix( - in srgb, - var(--theme-accent-water-default) 16%, - var(--theme-background-default) - ); + --theme-accent-water-flat: color-mix(in srgb, var(--theme-accent-water-default) 16%, var(--theme-background-default)); /* Pepper */ --theme-accent-pepper-baseline: theme('colors.raw.salt.0'); --theme-accent-pepper-subtlest: theme('colors.raw.salt.20'); @@ -696,324 +396,124 @@ body { --theme-accent-pepper-subtle: theme('colors.raw.salt.70'); --theme-accent-pepper-default: theme('colors.raw.salt.90'); --theme-accent-pepper-bolder: theme('colors.raw.pepper.10'); - --theme-accent-pepper-flat: color-mix( - in srgb, - var(--theme-accent-pepper-default) 16%, - var(--theme-background-default) - ); + --theme-accent-pepper-flat: color-mix(in srgb, var(--theme-accent-pepper-default) 16%, var(--theme-background-default)); /* Lettuce */ --theme-accent-lettuce-subtlest: theme('colors.raw.lettuce.90'); --theme-accent-lettuce-subtler: theme('colors.raw.lettuce.80'); --theme-accent-lettuce-subtle: theme('colors.raw.lettuce.70'); --theme-accent-lettuce-default: theme('colors.raw.lettuce.60'); --theme-accent-lettuce-bolder: theme('colors.raw.lettuce.50'); - --theme-accent-lettuce-flat: color-mix( - in srgb, - var(--theme-accent-lettuce-default) 16%, - var(--theme-background-default) - ); + --theme-accent-lettuce-flat: color-mix(in srgb, var(--theme-accent-lettuce-default) 16%, var(--theme-background-default)); /* Bun */ --theme-accent-bun-subtlest: theme('colors.raw.bun.90'); --theme-accent-bun-subtler: theme('colors.raw.bun.80'); --theme-accent-bun-subtle: theme('colors.raw.bun.70'); --theme-accent-bun-default: theme('colors.raw.bun.60'); --theme-accent-bun-bolder: theme('colors.raw.bun.50'); - --theme-accent-bun-flat: color-mix( - in srgb, - var(--theme-accent-bun-default) 16%, - var(--theme-background-default) - ); + --theme-accent-bun-flat: color-mix(in srgb, var(--theme-accent-bun-default) 16%, var(--theme-background-default)); /* Ketchup */ --theme-accent-ketchup-subtlest: theme('colors.raw.ketchup.90'); --theme-accent-ketchup-subtler: theme('colors.raw.ketchup.80'); --theme-accent-ketchup-subtle: theme('colors.raw.ketchup.70'); --theme-accent-ketchup-default: theme('colors.raw.ketchup.60'); --theme-accent-ketchup-bolder: theme('colors.raw.ketchup.50'); - --theme-accent-ketchup-flat: color-mix( - in srgb, - var(--theme-accent-ketchup-default) 16%, - var(--theme-background-default) - ); + --theme-accent-ketchup-flat: color-mix(in srgb, var(--theme-accent-ketchup-default) 16%, var(--theme-background-default)); /* Cabbage */ --theme-accent-cabbage-subtlest: theme('colors.raw.cabbage.90'); --theme-accent-cabbage-subtler: theme('colors.raw.cabbage.80'); --theme-accent-cabbage-subtle: theme('colors.raw.cabbage.70'); --theme-accent-cabbage-default: theme('colors.raw.cabbage.60'); --theme-accent-cabbage-bolder: theme('colors.raw.cabbage.50'); - --theme-accent-cabbage-flat: color-mix( - in srgb, - var(--theme-accent-cabbage-default) 16%, - var(--theme-background-default) - ); + --theme-accent-cabbage-flat: color-mix(in srgb, var(--theme-accent-cabbage-default) 16%, var(--theme-background-default)); /* Bacon */ --theme-accent-bacon-subtlest: theme('colors.raw.bacon.90'); --theme-accent-bacon-subtler: theme('colors.raw.bacon.80'); --theme-accent-bacon-subtle: theme('colors.raw.bacon.70'); --theme-accent-bacon-default: theme('colors.raw.bacon.60'); --theme-accent-bacon-bolder: theme('colors.raw.bacon.50'); - --theme-accent-bacon-flat: color-mix( - in srgb, - var(--theme-accent-bacon-default) 16%, - var(--theme-background-default) - ); + --theme-accent-bacon-flat: color-mix(in srgb, var(--theme-accent-bacon-default) 16%, var(--theme-background-default)); /* Brand */ --theme-brand-subtler: var(--theme-accent-cabbage-subtler); --theme-brand-default: var(--theme-accent-cabbage-default); --theme-brand-bolder: var(--theme-accent-cabbage-bolder); - --theme-brand-float: color-mix( - in srgb, - var(--theme-brand-bolder), - transparent 92% - ); - --theme-brand-hover: color-mix( - in srgb, - var(--theme-brand-bolder), - transparent 88% - ); - --theme-brand-active: color-mix( - in srgb, - var(--theme-brand-bolder), - transparent 84% - ); + --theme-brand-float: color-mix(in srgb, var(--theme-brand-bolder), transparent 92%); + --theme-brand-hover: color-mix(in srgb, var(--theme-brand-bolder), transparent 88%); + --theme-brand-active: color-mix(in srgb, var(--theme-brand-bolder), transparent 84%); /* Surface */ --theme-surface-primary: theme('colors.raw.pepper.90'); --theme-surface-secondary: theme('colors.raw.pepper.10'); --theme-surface-invert: theme('colors.raw.salt.0'); - --theme-surface-float: color-mix( - in srgb, - var(--theme-surface-secondary), - transparent 92% - ); - --theme-surface-hover: color-mix( - in srgb, - var(--theme-surface-secondary), - transparent 88% - ); - --theme-surface-active: color-mix( - in srgb, - var(--theme-surface-secondary), - transparent 84% - ); - --theme-surface-disabled: color-mix( - in srgb, - var(--theme-surface-secondary), - transparent 80% - ); + --theme-surface-float: color-mix(in srgb, var(--theme-surface-secondary), transparent 92%); + --theme-surface-hover: color-mix(in srgb, var(--theme-surface-secondary), transparent 88%); + --theme-surface-active: color-mix(in srgb, var(--theme-surface-secondary), transparent 84%); + --theme-surface-disabled: color-mix(in srgb, var(--theme-surface-secondary), transparent 80%); --theme-surface-focus: theme('colors.raw.blueCheese.60'); /* Actions */ /* Upvote */ --theme-actions-upvote-default: var(--theme-accent-avocado-default); - --theme-actions-upvote-float: color-mix( - in srgb, - var(--theme-accent-avocado-bolder), - transparent 92% - ); - --theme-actions-upvote-hover: color-mix( - in srgb, - var(--theme-accent-avocado-bolder), - transparent 88% - ); - --theme-actions-upvote-active: color-mix( - in srgb, - var(--theme-accent-avocado-bolder), - transparent 84% - ); + --theme-actions-upvote-float: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 92%); + --theme-actions-upvote-hover: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 88%); + --theme-actions-upvote-active: color-mix(in srgb, var(--theme-accent-avocado-bolder), transparent 84%); /* Downvote */ --theme-actions-downvote-default: var(--theme-accent-ketchup-default); - --theme-actions-downvote-float: color-mix( - in srgb, - var(--theme-accent-ketchup-bolder), - transparent 92% - ); - --theme-actions-downvote-hover: color-mix( - in srgb, - var(--theme-accent-ketchup-bolder), - transparent 88% - ); - --theme-actions-downvote-active: color-mix( - in srgb, - var(--theme-accent-ketchup-bolder), - transparent 84% - ); + --theme-actions-downvote-float: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 92%); + --theme-actions-downvote-hover: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 88%); + --theme-actions-downvote-active: color-mix(in srgb, var(--theme-accent-ketchup-bolder), transparent 84%); /* Comment */ --theme-actions-comment-default: var(--theme-accent-blueCheese-default); - --theme-actions-comment-float: color-mix( - in srgb, - var(--theme-accent-blueCheese-bolder), - transparent 92% - ); - --theme-actions-comment-hover: color-mix( - in srgb, - var(--theme-accent-blueCheese-bolder), - transparent 88% - ); - --theme-actions-comment-active: color-mix( - in srgb, - var(--theme-accent-blueCheese-bolder), - transparent 84% - ); + --theme-actions-comment-float: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 92%); + --theme-actions-comment-hover: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 88%); + --theme-actions-comment-active: color-mix(in srgb, var(--theme-accent-blueCheese-bolder), transparent 84%); /* Bookmark */ --theme-actions-bookmark-default: var(--theme-accent-bun-default); - --theme-actions-bookmark-float: color-mix( - in srgb, - var(--theme-accent-bun-bolder), - transparent 92% - ); - --theme-actions-bookmark-hover: color-mix( - in srgb, - var(--theme-accent-bun-bolder), - transparent 88% - ); - --theme-actions-bookmark-active: color-mix( - in srgb, - var(--theme-accent-bun-bolder), - transparent 84% - ); + --theme-actions-bookmark-float: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 92%); + --theme-actions-bookmark-hover: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 88%); + --theme-actions-bookmark-active: color-mix(in srgb, var(--theme-accent-bun-bolder), transparent 84%); /* Share */ --theme-actions-share-default: var(--theme-accent-cabbage-default); - --theme-actions-share-float: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 92% - ); - --theme-actions-share-hover: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 88% - ); - --theme-actions-share-active: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 84% - ); + --theme-actions-share-float: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 92%); + --theme-actions-share-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 88%); + --theme-actions-share-active: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 84%); /* Plus */ --theme-actions-plus-default: var(--theme-accent-bacon-default); - --theme-actions-plus-float: color-mix( - in srgb, - var(--theme-accent-bacon-bolder), - transparent 92% - ); - --theme-actions-plus-hover: color-mix( - in srgb, - var(--theme-accent-bacon-bolder), - transparent 88% - ); - --theme-actions-plus-active: color-mix( - in srgb, - var(--theme-accent-bacon-bolder), - transparent 84% - ); + --theme-actions-plus-float: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 92%); + --theme-actions-plus-hover: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 88%); + --theme-actions-plus-active: color-mix(in srgb, var(--theme-accent-bacon-bolder), transparent 84%); /* Help */ --theme-actions-help-default: var(--status-help); - --theme-actions-help-float: color-mix( - in srgb, - var(--theme-actions-help-default), - transparent 92% - ); - --theme-actions-help-hover: color-mix( - in srgb, - var(--theme-actions-help-default), - transparent 88% - ); - --theme-actions-help-active: color-mix( - in srgb, - var(--theme-actions-help-default), - transparent 84% - ); + --theme-actions-help-float: color-mix(in srgb, var(--theme-actions-help-default), transparent 92%); + --theme-actions-help-hover: color-mix(in srgb, var(--theme-actions-help-default), transparent 88%); + --theme-actions-help-active: color-mix(in srgb, var(--theme-actions-help-default), transparent 84%); /* Cores */ --theme-actions-cores-default: var(--theme-accent-cheese-default); - --theme-actions-cores-float: color-mix( - in srgb, - var(--theme-actions-cores-default), - transparent 92% - ); - --theme-actions-cores-hover: color-mix( - in srgb, - var(--theme-actions-cores-default), - transparent 88% - ); - --theme-actions-cores-active: color-mix( - in srgb, - var(--theme-actions-cores-default), - transparent 84% - ); + --theme-actions-cores-float: color-mix(in srgb, var(--theme-actions-cores-default), transparent 92%); + --theme-actions-cores-hover: color-mix(in srgb, var(--theme-actions-cores-default), transparent 88%); + --theme-actions-cores-active: color-mix(in srgb, var(--theme-actions-cores-default), transparent 84%); /* Overlay */ - --theme-overlay-base-primary: color-mix( - in srgb, - var(--theme-accent-onion-subtlest), - transparent 36% - ); - --theme-overlay-base-secondary: color-mix( - in srgb, - var(--theme-accent-onion-subtlest), - transparent 60% - ); - --theme-overlay-base-tertiary: color-mix( - in srgb, - var(--theme-accent-onion-subtlest), - transparent 68% - ); - --theme-overlay-base-quaternary: color-mix( - in srgb, - var(--theme-accent-onion-subtlest), - transparent 76% - ); + --theme-overlay-base-primary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 36%); + --theme-overlay-base-secondary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 60%); + --theme-overlay-base-tertiary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 68%); + --theme-overlay-base-quaternary: color-mix(in srgb, var(--theme-accent-onion-subtlest), transparent 76%); /* Dark */ - --theme-overlay-dark-dark1: color-mix( - in srgb, - theme('colors.raw.pepper.10'), - transparent 68% - ); - --theme-overlay-dark-dark2: color-mix( - in srgb, - theme('colors.raw.pepper.10'), - transparent 60% - ); - --theme-overlay-dark-dark3: color-mix( - in srgb, - theme('colors.raw.pepper.10'), - transparent 36% - ); + --theme-overlay-dark-dark1: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 68%); + --theme-overlay-dark-dark2: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 60%); + --theme-overlay-dark-dark3: color-mix(in srgb, theme('colors.raw.pepper.10'), transparent 36%); /* Border */ /* Subtlest */ --theme-border-subtlest-primary: var(--theme-accent-salt-default); - --theme-border-subtlest-secondary: color-mix( - in srgb, - var(--theme-border-subtlest-primary), - transparent 60% - ); - --theme-border-subtlest-tertiary: color-mix( - in srgb, - var(--theme-border-subtlest-primary), - transparent 80% - ); - --theme-border-subtlest-quaternary: color-mix( - in srgb, - var(--theme-border-subtlest-primary), - transparent 92% - ); + --theme-border-subtlest-secondary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 60%); + --theme-border-subtlest-tertiary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 80%); + --theme-border-subtlest-quaternary: color-mix(in srgb, var(--theme-border-subtlest-primary), transparent 92%); /* Bolder */ --theme-border-bolder-primary: var(--theme-accent-salt-bolder); - --theme-border-bolder-secondary: color-mix( - in srgb, - var(--theme-border-bolder-primary), - transparent 60% - ); - --theme-border-bolder-tertiary: color-mix( - in srgb, - var(--theme-border-bolder-primary), - transparent 80% - ); - --theme-border-bolder-quaternary: color-mix( - in srgb, - var(--theme-border-bolder-primary), - transparent 92% - ); + --theme-border-bolder-secondary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 60%); + --theme-border-bolder-tertiary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 80%); + --theme-border-bolder-quaternary: color-mix(in srgb, var(--theme-border-bolder-primary), transparent 92%); /* Status */ --status-error: var(--theme-accent-ketchup-default); @@ -1026,80 +526,43 @@ body { --theme-text-primary: var(--theme-accent-salt-baseline); --theme-text-secondary: var(--theme-accent-salt-subtler); --theme-text-tertiary: var(--theme-accent-salt-default); - --theme-text-quaternary: color-mix( - in srgb, - var(--theme-accent-salt-default), - transparent 36% - ); - --theme-text-disabled: color-mix( - in srgb, - var(--theme-accent-salt-default), - transparent 68% - ); + --theme-text-quaternary: color-mix(in srgb, var(--theme-accent-salt-default), transparent 36%); + --theme-text-disabled: color-mix(in srgb, var(--theme-accent-salt-default), transparent 68%); --theme-text-link: var(--theme-accent-water-subtler); /* Highlight */ - --theme-text-highlight-default: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 76% - ); - --theme-text-highlight-hover: color-mix( - in srgb, - var(--theme-accent-cabbage-bolder), - transparent 68% - ); + --theme-text-highlight-default: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 76%); + --theme-text-highlight-hover: color-mix(in srgb, var(--theme-accent-cabbage-bolder), transparent 68%); /* Shadow */ - --theme-shadow-shadow1: color-mix( - in srgb, - theme('colors.raw.salt.90'), - transparent 68% - ); - --theme-shadow-shadow2: color-mix( - in srgb, - theme('colors.raw.salt.90'), - transparent 60% - ); - --theme-shadow-shadow3: color-mix( - in srgb, - theme('colors.raw.salt.90'), - transparent 36% - ); + --theme-shadow-shadow1: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 68%); + --theme-shadow-shadow2: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 60%); + --theme-shadow-shadow3: color-mix(in srgb, theme('colors.raw.salt.90'), transparent 36%); --theme-shadow-cabbage: theme('colors.raw.cabbage.40'); /* Blur */ - --theme-blur-blur-highlight: color-mix( - in srgb, - theme('colors.raw.salt.0'), - transparent 12% - ); - --theme-blur-blur-baseline: color-mix( - in srgb, - theme('colors.raw.salt.0'), - transparent 12% - ); - --theme-blur-blur-bg: color-mix( - in srgb, - theme('colors.raw.salt.0'), - transparent 36% - ); - --theme-blur-blur-glass: color-mix( - in srgb, - theme('colors.raw.salt.0'), - transparent 36% - ); + --theme-blur-blur-highlight: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 12%); + --theme-blur-blur-baseline: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 12%); + --theme-blur-blur-bg: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 36%); + --theme-blur-blur-glass: color-mix(in srgb, theme('colors.raw.salt.0'), transparent 36%); + + + + + + + /** * Current old colors, these should all be changed to one of the above matching ones. */ - --theme-active: theme('colors.raw.pepper.10') 33; + --theme-active: theme('colors.raw.pepper.10')33; --theme-post-disabled: #ffffff66; --theme-overlay-quaternary: theme('colors.overlay.quaternary.pepper'); --theme-overlay-water: theme('colors.overlay.quaternary.water'); --theme-overlay-cabbage: theme('colors.overlay.quaternary.cabbage'); - --theme-overlay-from: theme('colors.raw.onion.40') 30; - --theme-overlay-to: theme('colors.raw.cabbage.40') 30; + --theme-overlay-from: theme('colors.raw.onion.40')30; + --theme-overlay-to: theme('colors.raw.cabbage.40')30; --theme-overlay-float-bun: theme('colors.overlay.float.bun'); --theme-overlay-float-blueCheese: theme('colors.overlay.float.blueCheese'); @@ -1111,8 +574,8 @@ body { --theme-overlay-active-onion: theme('colors.overlay.active.onion'); --theme-overlay-active-salt: theme('colors.overlay.active.salt'); - --theme-gradient-cabbage: theme('colors.raw.cabbage.10') 66; - --theme-gradient-onion: theme('colors.raw.onion.10') 66; + --theme-gradient-cabbage: theme('colors.raw.cabbage.10')66; + --theme-gradient-onion: theme('colors.raw.onion.10')66; --theme-rank-highlight: theme('colors.raw.salt.10'); @@ -1218,19 +681,6 @@ html.light .invert .invert, } } -/* Hide third-party floating launcher injected into the app shell */ -#__next .qd-parent-container .qd-open-btn-container, -#__next [class*='qd-parent-container'] [class*='qd-open-btn-container'] { - display: none !important; - pointer-events: none !important; -} - -/* Fallback if only the launcher circle is rendered */ -#__next .qd-parent-container .qd-open-btn-container svg circle, -#__next [class*='qd-open-btn-container'] svg circle { - display: none !important; -} - img.lazyload:not([src]) { visibility: hidden; } @@ -1357,15 +807,7 @@ details.right-icon { } .plus-entry-gradient { - background: radial-gradient( - circle at 50% 100%, - var(--theme-accent-cabbage-default) 0%, - color-mix(in srgb, var(--theme-accent-onion-default), transparent 28%) - 9.6%, - color-mix(in srgb, var(--theme-accent-onion-default), transparent 100%) - 100% - ), - var(--theme-background-default); + background: radial-gradient(circle at 50% 100%, var(--theme-accent-cabbage-default) 0%, color-mix(in srgb, var(--theme-accent-onion-default), transparent 28%) 9.6%, color-mix(in srgb, var(--theme-accent-onion-default), transparent 100%) 100%), var(--theme-background-default); } @keyframes pulse { @@ -1431,56 +873,25 @@ meter::-webkit-meter-bar { .bg-gradient-funnel { &-default { - background: radial-gradient( - 100% 22.49% at 100% -10%, - var(--theme-accent-cabbage-default) 0%, - var(--theme-accent-cabbage-baseline) 100% - ), - radial-gradient( - 100% 22.49% at 0% -10%, - var(--theme-accent-onion-default) 0%, - var(--theme-accent-onion-baseline) 100% - ); + background: radial-gradient(100% 22.49% at 100% -10%, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-cabbage-baseline) 100%), + radial-gradient(100% 22.49% at 0% -10%, var(--theme-accent-onion-default) 0%, var(--theme-accent-onion-baseline) 100%); } &-top { - background: radial-gradient( - 192.5% 100% at 50% 0%, - var(--theme-accent-cabbage-default) 0%, - var(--theme-accent-onion-default) 50%, - var(--theme-accent-onion-baseline) 100% - ); + background: radial-gradient(192.5% 100% at 50% 0%, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-onion-default) 50%, var(--theme-accent-onion-baseline) 100%); } &-circle { - background: radial-gradient( - 94% 48.83% at 50% 0%, - var(--theme-accent-cabbage-default) 0%, - var(--theme-accent-onion-default) 75.12%, - var(--theme-accent-onion-baseline) 100% - ); + background: radial-gradient(94% 48.83% at 50% 0%, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-onion-default) 75.12%, var(--theme-accent-onion-baseline) 100%); } &-hourglass { - background: radial-gradient( - 192.5% 100% at 50% 100%, - var(--theme-accent-cabbage-default) 0%, - var(--theme-accent-cabbage-baseline) 50% - ), - radial-gradient( - 192.5% 100% at 50% 0%, - var(--theme-accent-onion-default) 0%, - var(--theme-accent-onion-baseline) 50% - ); + background: radial-gradient(192.5% 100% at 50% 100%, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-cabbage-baseline) 50%), + radial-gradient(192.5% 100% at 50% 0%, var(--theme-accent-onion-default) 0%, var(--theme-accent-onion-baseline) 50%); } &-best-price { - background: linear-gradient( - 135deg, - #e769fb 0%, - #9e70f8 44.71%, - #68a6fd 100% - ); + background: linear-gradient(135deg, #E769FB 0%, #9E70F8 44.71%, #68A6FD 100%); } } @@ -1507,9 +918,133 @@ meter::-webkit-meter-bar { animation: full-sequence 1s ease-in-out forwards; } - @keyframes float { - 0%, + @keyframes quest-reward-fly { + 0% { + opacity: 0; + transform: perspective(720px) translate(-50%, calc(-50% - 1.65rem)) + scale(0.62) rotateY(0deg); + } + + 14% { + opacity: 1; + transform: perspective(720px) translate(-50%, calc(-50% - 2.25rem)) + scale(0.84) rotateY(132deg); + } + + 22% { + opacity: 1; + transform: perspective(720px) translate(-50%, calc(-50% - 2.75rem)) + scale(0.98) rotateY(238deg); + } + + 30% { + opacity: 1; + transform: perspective(720px) translate(-50%, calc(-50% - 3rem)) + scale(1.16) rotateY(324deg); + } + + 36% { + opacity: 1; + transform: perspective(720px) translate(-50%, calc(-50% - 2.7rem)) + scale(1.1) rotateY(360deg); + } + + 40% { + opacity: 1; + transform: perspective(720px) translate(-50%, calc(-50% - 2.35rem)) + scale(1.04) rotateY(360deg); + animation-timing-function: cubic-bezier(0.42, 0, 1, 1); + } + + 86% { + opacity: 1; + transform: perspective(720px) + translate( + calc(-50% + var(--quest-reward-fly-x)), + calc(-50% + var(--quest-reward-fly-y)) + ) + scale(0.84) rotateY(360deg); + } + + 100% { + opacity: 0; + transform: perspective(720px) + translate( + calc(-50% + var(--quest-reward-fly-x)), + calc(-50% + var(--quest-reward-fly-y)) + ) + scale(0.78) rotateY(360deg); + } + } + + .quest-reward-flight { + animation: quest-reward-fly 1.85s linear forwards; + animation-fill-mode: both; + backface-visibility: hidden; + transform-style: preserve-3d; + will-change: transform, opacity; + } + + @keyframes quest-level-firework { + 0% { + opacity: 0; + transform: translate(-50%, -50%) scale(0.25); + } + + 12% { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } + 100% { + opacity: 0; + transform: translate( + calc(-50% + var(--quest-level-firework-x)), + calc(-50% + var(--quest-level-firework-y)) + ) + scale(0); + } + } + + .quest-level-firework-particle { + width: 0.45rem; + height: 0.45rem; + border-radius: 9999px; + background: currentColor; + box-shadow: 0 0 0.65rem currentColor, 0 0 0.2rem rgb(255 255 255 / 0.75); + animation: quest-level-firework 0.82s cubic-bezier(0.08, 0.72, 0.24, 1) forwards; + will-change: transform, opacity; + } + + @keyframes quest-claimed-stamp { + 0% { + opacity: 0; + transform: translate(-50%, -50%) rotate(-12deg) scale(1.42); + filter: saturate(1.32) blur(0.04rem); + } + + 62% { + opacity: 1; + transform: translate(-50%, -50%) rotate(-12deg) scale(0.9); + filter: saturate(1.08); + } + + 100% { + opacity: 1; + transform: translate(-50%, -50%) rotate(-12deg) scale(1); + filter: saturate(1); + } + } + + .quest-claimed-stamp { + transform-origin: center; + animation: quest-claimed-stamp 0.34s cubic-bezier(0.18, 0.82, 0.2, 1) + forwards; + will-change: transform, opacity, filter; + } + + @keyframes float { + 0%, 100% { transform: translateY(0); } 50% { @@ -1521,6 +1056,63 @@ meter::-webkit-meter-bar { animation: float 1.5s ease-in-out infinite; } + .top-hero-animated-border { + background: linear-gradient(122deg, #2d1b8f 0%, #5d1fb7 45%, #ff00a8 100%); + background-size: 200% 200%; + } + + .top-hero-panel-border { + background: linear-gradient(122deg, #2d1b8f 0%, #5d1fb7 45%, #ff00a8 100%); + } + + .top-hero-glow { + background: rgb(255 0 168 / 35%); + } + + .sidebar-notification-border { + background: conic-gradient( + from 0deg, + rgb(255 255 255 / 0.06), + rgb(255 255 255 / 0.9), + rgb(255 255 255 / 0.08), + rgb(255 255 255 / 0.95), + rgb(255 255 255 / 0.06) + ); + } + + @keyframes top-hero-border-shift { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } + } + + @keyframes sidebar-popover-border-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + @keyframes sidebar-popover-tail { + 0%, + 100% { + opacity: 0.35; + transform: translateX(0); + } + 50% { + opacity: 0.95; + transform: translateX(0.25rem); + } + } + @keyframes enable-notification-bell-ring { 0%, 100% { diff --git a/packages/webapp/lib/squadNotificationToastState.ts b/packages/webapp/lib/squadNotificationToastState.ts deleted file mode 100644 index ecd139c9cea..00000000000 --- a/packages/webapp/lib/squadNotificationToastState.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { isDevelopment } from '@dailydotdev/shared/src/lib/constants'; - -interface SquadNotificationToastState { - date: string; - shownSquadIds: string[]; - joinedMemberSquadIds: string[]; - dismissed: boolean; -} - -interface RegisterToastViewParams { - squadId: string; - isSquadMember: boolean; -} - -interface DismissToastParams { - squadId: string; -} - -export interface SquadNotificationToastStateStore { - registerToastView: (params: RegisterToastViewParams) => boolean; - dismissUntilTomorrow: (params: DismissToastParams) => void; -} - -const STATE_KEY_PREFIX = 'SQUAD_NOTIF_TOAST_STATE'; - -const getTodayDateKey = (): string => { - const today = new Date(); - const year = today.getFullYear(); - const month = String(today.getMonth() + 1).padStart(2, '0'); - const day = String(today.getDate()).padStart(2, '0'); - - return `${year}-${month}-${day}`; -}; - -const getStorageKey = (userId?: string): string => - `${STATE_KEY_PREFIX}:${userId ?? 'anonymous'}`; - -const getDefaultState = (): SquadNotificationToastState => ({ - date: getTodayDateKey(), - shownSquadIds: [], - joinedMemberSquadIds: [], - dismissed: false, -}); - -const readState = (storageKey: string): SquadNotificationToastState => { - if (typeof window === 'undefined') { - return getDefaultState(); - } - - const fallback = getDefaultState(); - - try { - const rawState = window.localStorage.getItem(storageKey); - if (!rawState) { - return fallback; - } - - const parsedState = JSON.parse(rawState) as SquadNotificationToastState; - if (parsedState.date !== fallback.date) { - return fallback; - } - - return { - date: parsedState.date, - shownSquadIds: parsedState.shownSquadIds ?? [], - joinedMemberSquadIds: parsedState.joinedMemberSquadIds ?? [], - dismissed: !!parsedState.dismissed, - }; - } catch { - return fallback; - } -}; - -const writeState = ( - storageKey: string, - state: SquadNotificationToastState, -): void => { - if (typeof window === 'undefined') { - return; - } - - window.localStorage.setItem(storageKey, JSON.stringify(state)); -}; - -export const createSquadNotificationToastStateStore = ( - userId?: string, -): SquadNotificationToastStateStore => { - const storageKey = getStorageKey(userId); - - return { - registerToastView: ({ squadId, isSquadMember }) => { - if (isDevelopment) { - return true; - } - - const state = readState(storageKey); - const isFreshJoinEvent = - isSquadMember && !state.joinedMemberSquadIds.includes(squadId); - - if (isFreshJoinEvent) { - state.joinedMemberSquadIds.push(squadId); - } - - if (state.dismissed) { - writeState(storageKey, state); - return false; - } - - const hasShownAnyToastToday = state.shownSquadIds.length > 0; - const shouldShowToast = isFreshJoinEvent || !hasShownAnyToastToday; - if (!shouldShowToast) { - writeState(storageKey, state); - return false; - } - - if (!state.shownSquadIds.includes(squadId)) { - state.shownSquadIds.push(squadId); - } - - writeState(storageKey, state); - return true; - }, - dismissUntilTomorrow: ({ squadId }) => { - if (isDevelopment) { - return; - } - - const state = readState(storageKey); - - if (!state.shownSquadIds.includes(squadId)) { - state.shownSquadIds.push(squadId); - } - - state.dismissed = true; - writeState(storageKey, state); - }, - }; -}; diff --git a/packages/webapp/next.config.ts b/packages/webapp/next.config.ts index c6c515bd8d5..52c511566c0 100644 --- a/packages/webapp/next.config.ts +++ b/packages/webapp/next.config.ts @@ -320,7 +320,6 @@ const nextConfig: NextConfig = { ]; }, poweredByHeader: false, - devIndicators: false, reactStrictMode: false, productionBrowserSourceMaps: process.env.SOURCE_MAPS === 'true', }), diff --git a/packages/webapp/pages/settings/appearance.tsx b/packages/webapp/pages/settings/appearance.tsx index b51b16a42ab..82eac71f51f 100644 --- a/packages/webapp/pages/settings/appearance.tsx +++ b/packages/webapp/pages/settings/appearance.tsx @@ -8,6 +8,7 @@ import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsCon import { useViewSize, ViewSize, + useConditionalFeature, } from '@dailydotdev/shared/src/hooks'; import { Typography, @@ -26,6 +27,7 @@ import { import classNames from 'classnames'; import { FlexCol } from '@dailydotdev/shared/src/components/utilities'; import { iOSSupportsAppIconChange } from '@dailydotdev/shared/src/lib/ios'; +import { featureFeedLayoutV2 } from '@dailydotdev/shared/src/lib/featureManagement'; import { AccountPageContainer } from '../../components/layouts/SettingsLayout/AccountPageContainer'; import { getSettingsLayout } from '../../components/layouts/SettingsLayout'; import { defaultSeo } from '../../next-seo'; @@ -67,6 +69,10 @@ const AccountManageSubscriptionPage = (): ReactElement => { toggleAutoDismissNotifications, } = useSettingsContext(); + const { value: isFeedLayoutV2 } = useConditionalFeature({ + feature: featureFeedLayoutV2, + }); + const onLayoutToggle = useCallback( async (enabled: boolean) => { logEvent({ @@ -106,37 +112,39 @@ const AccountManageSubscriptionPage = (): ReactElement => { )} - - - Density - - - {insaneMode && ( - - Not available in list layout + {!isFeedLayoutV2 && ( + + + Density - )} - - - + + {insaneMode && ( + + Not available in list layout + + )} + + + + )} {supportsAppIconChange && } diff --git a/packages/webapp/pages/squads/[handle]/index.tsx b/packages/webapp/pages/squads/[handle]/index.tsx index f5140bf0b7a..3a70dbba4c8 100644 --- a/packages/webapp/pages/squads/[handle]/index.tsx +++ b/packages/webapp/pages/squads/[handle]/index.tsx @@ -30,7 +30,10 @@ import type { import { SourceType } from '@dailydotdev/shared/src/graphql/sources'; import Unauthorized from '@dailydotdev/shared/src/components/errors/Unauthorized'; import { useQuery } from '@tanstack/react-query'; -import { LogEvent, NotificationPromptSource } from '@dailydotdev/shared/src/lib/log'; +import { + LogEvent, + NotificationPromptSource, +} from '@dailydotdev/shared/src/lib/log'; import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext'; import dynamic from 'next/dynamic'; import useSidebarRendered from '@dailydotdev/shared/src/hooks/useSidebarRendered'; @@ -51,6 +54,7 @@ import { webappUrl } from '@dailydotdev/shared/src/lib/constants'; import { usePrivateSourceJoin } from '@dailydotdev/shared/src/hooks/source/usePrivateSourceJoin'; import { GET_REFERRING_USER_QUERY } from '@dailydotdev/shared/src/graphql/users'; import type { PublicProfile } from '@dailydotdev/shared/src/lib/user'; +import { useNotificationCtaExperiment } from '@dailydotdev/shared/src/hooks/notifications/useNotificationCtaExperiment'; import { mainFeedLayoutProps } from '../../../components/layouts/MainFeedPage'; import { getLayout } from '../../../components/layouts/FeedLayout'; import type { ProtectedPageProps } from '../../../components/ProtectedPage'; @@ -239,6 +243,8 @@ const SquadPage = ({ }, [shouldManageSlack, squad, openModal, router]); const privateSourceJoin = usePrivateSourceJoin(); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); if ((isLoading && !isFetched) || privateSourceJoin.isActive) { return ( @@ -281,11 +287,13 @@ const SquadPage = ({ members={squadMembers} shouldUseListMode={shouldUseListMode} /> - + {isNotificationCtaExperimentEnabled && ( + + )} ({ tag, ranking: 'TIME' }), [tag]); const { feedSettings } = useFeedSettings(); const { FeedPageLayoutComponent } = useFeedLayout(); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const { onFollowTags, onUnfollowTags, onBlockTags, onUnblockTags } = useTagAndSource({ origin: Origin.TagPage }); const [newlyFollowedTag, setNewlyFollowedTag] = useState(null); @@ -317,7 +320,9 @@ const TagPage = ({ return; } - setNewlyFollowedTag(tag); + if (isNotificationCtaExperimentEnabled) { + setNewlyFollowedTag(tag); + } } } else { showLogin({ trigger: AuthTriggers.Filter }); @@ -409,7 +414,7 @@ const TagPage = ({ }} />
- {newlyFollowedTag && ( + {isNotificationCtaExperimentEnabled && newlyFollowedTag && ( Date: Wed, 18 Mar 2026 11:53:43 +0200 Subject: [PATCH 16/34] fix: wire notification CTA rollout correctly --- packages/shared/src/components/Feed.tsx | 28 +++++- .../components/banners/HeroBottomBanner.tsx | 58 ++++++------ .../comments/CommentActionButtons.tsx | 8 +- .../modals/post/BookmarkReminderModal.tsx | 2 +- .../notifications/EnableNotification.tsx | 22 ++--- .../src/components/post/tags/PostTagList.tsx | 9 +- .../sidebar/SidebarNotificationPrompt.tsx | 43 +++++---- .../useEnableNotification.spec.tsx | 93 +++++++++++++++++-- .../notifications/useEnableNotification.ts | 52 +++++++++-- .../useReadingReminderHero.spec.tsx | 12 +++ .../notifications/useReadingReminderHero.ts | 11 ++- packages/shared/src/hooks/post/useViewPost.ts | 4 +- 12 files changed, 248 insertions(+), 94 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index 7865f94de39..667b3311ad1 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -278,8 +278,14 @@ export default function Feed({ const shouldHideInFeedHero = shouldHidePlacement( NotificationCtaPreviewPlacement.InFeedHero, ); - const { shouldShow: shouldShowReadingReminder, onEnable } = - useReadingReminderHero(); + const { + shouldShow: shouldShowReadingReminder, + title: readingReminderTitle, + subtitle: readingReminderSubtitle, + shouldShowDismiss: shouldShowReadingReminderDismiss, + onEnable, + onDismiss, + } = useReadingReminderHero(); const [hasScrolledForHero, setHasScrolledForHero] = useState(isInFeedHeroForced); const [isHeroDismissed, setIsHeroDismissed] = useState(false); @@ -538,6 +544,14 @@ export default function Feed({ await onEnable(); setIsTopHeroDismissed(true); }, [onEnable]); + const onDismissInFeedHero = useCallback(async () => { + setIsHeroDismissed(true); + await onDismiss(); + }, [onDismiss]); + const onDismissTopHero = useCallback(async () => { + setIsTopHeroDismissed(true); + await onDismiss(); + }, [onDismiss]); if (!loadedSettings || isFallback) { return <>; @@ -656,8 +670,11 @@ export default function Feed({ className="pt-2" variant="default" applyFeedWidthConstraint={false} + title={readingReminderTitle} + subtitle={readingReminderSubtitle} + shouldShowDismiss={shouldShowReadingReminderDismiss} onCtaClick={onEnableTopHero} - onClose={() => setIsTopHeroDismissed(true)} + onClose={onDismissTopHero} /> ), header, @@ -723,8 +740,11 @@ export default function Feed({ > setIsHeroDismissed(true)} + onClose={onDismissInFeedHero} />
)} diff --git a/packages/shared/src/components/banners/HeroBottomBanner.tsx b/packages/shared/src/components/banners/HeroBottomBanner.tsx index a179dc64a27..1e049dd1897 100644 --- a/packages/shared/src/components/banners/HeroBottomBanner.tsx +++ b/packages/shared/src/components/banners/HeroBottomBanner.tsx @@ -10,6 +10,9 @@ type TopHeroProps = { className?: string; variant?: 'default' | 'lightAndTight'; applyFeedWidthConstraint?: boolean; + title?: string; + subtitle?: string; + shouldShowDismiss?: boolean; onCtaClick?: () => void; onClose?: () => void; }; @@ -18,6 +21,9 @@ export const TopHero = ({ className, variant = 'default', applyFeedWidthConstraint = true, + title = 'Never miss a learning day', + subtitle = 'Turn on your daily reading reminder and keep your routine.', + shouldShowDismiss = false, onCtaClick, onClose, }: TopHeroProps): ReactElement => { @@ -34,11 +40,9 @@ export const TopHero = ({
-

- Never miss read day -

+

{title}

- Turn on your daily reading reminder and keep your routine. + {subtitle}

@@ -50,15 +54,17 @@ export const TopHero = ({ > Enable reminder -
@@ -81,23 +87,21 @@ export const TopHero = ({
- @@ -277,7 +267,7 @@ function EnableNotification({ variant={ButtonVariant.Primary} color={ButtonColor.Cabbage} className="mr-4" - onClick={handleEnable} + onClick={onEnable} > {buttonText} @@ -381,7 +371,7 @@ function EnableNotification({ ) : undefined } - onClick={handleEnable} + onClick={onEnable} > {buttonText} @@ -398,7 +388,7 @@ function EnableNotification({ ) : undefined } - onClick={handleEnable} + onClick={onEnable} > {buttonText} @@ -437,7 +427,7 @@ function EnableNotification({ ) : undefined } - onClick={handleEnable} + onClick={onEnable} > {buttonText} diff --git a/packages/shared/src/components/post/tags/PostTagList.tsx b/packages/shared/src/components/post/tags/PostTagList.tsx index 4005d31d1e9..52db8cda726 100644 --- a/packages/shared/src/components/post/tags/PostTagList.tsx +++ b/packages/shared/src/components/post/tags/PostTagList.tsx @@ -114,16 +114,19 @@ export const PostTagList = ({ post }: PostTagListProps): ReactElement => { return null; } - const handleFollowTag = async (tag: string): Promise => { - const { successful } = await onFollowTag(tag); + const handleFollowTag = async (tag: string) => { + const result = await onFollowTag(tag); + const { successful } = result; if (!successful) { - return; + return result; } if (isNotificationCtaExperimentEnabled) { setNewlyFollowedTag(tag); } + + return result; }; return ( diff --git a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx index bd689740e08..86a3a9041c6 100644 --- a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx +++ b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx @@ -3,8 +3,7 @@ import React from 'react'; import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; import CloseButton from '../CloseButton'; import ReadingReminderCatLaptop from '../banners/ReadingReminderCatLaptop'; -import { useEnableNotification } from '../../hooks/notifications'; -import { NotificationPromptSource } from '../../lib/log'; +import { useReadingReminderHero } from '../../hooks/notifications/useReadingReminderHero'; import { NotificationCtaPreviewPlacement, useNotificationCtaExperiment, @@ -17,21 +16,23 @@ type SidebarNotificationPromptProps = { export const SidebarNotificationPrompt = ({ sidebarExpanded, }: SidebarNotificationPromptProps): ReactElement | null => { - const { isEnabled, shouldHidePlacement } = useNotificationCtaExperiment(); - const { shouldShowCta, onEnable, onDismiss } = useEnableNotification({ - source: NotificationPromptSource.NotificationsPage, + const { shouldHidePlacement } = useNotificationCtaExperiment(); + const { + shouldShow, + title, + subtitle, + shouldShowDismiss, + onEnable, + onDismiss, + } = useReadingReminderHero({ + requireMobile: false, }); const shouldHideSideMenuPrompt = shouldHidePlacement( NotificationCtaPreviewPlacement.SidebarPrompt, ); - if ( - !isEnabled || - !sidebarExpanded || - shouldHideSideMenuPrompt || - !shouldShowCta - ) { + if (!sidebarExpanded || shouldHideSideMenuPrompt || !shouldShow) { return null; } @@ -43,20 +44,18 @@ export const SidebarNotificationPrompt = ({
- + {shouldShowDismiss && ( + + )}
-

- Never miss a learning day. -

-

- Turn on your daily reading reminder and keep your routine. -

+

{title}

+

{subtitle}

diff --git a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx index 77c861d1b3f..5acb85b488f 100644 --- a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx @@ -19,6 +19,11 @@ import { ContentPreferenceStatus, ContentPreferenceType, } from '../../../graphql/contentPreference'; +import { + NotificationCtaPlacement, + NotificationPromptSource, + TargetType, +} from '../../../lib/log'; import useShowFollowAction from '../../../hooks/useShowFollowAction'; import { FollowButton } from '../../contentPreference/FollowButton'; import { useContentPreferenceStatusQuery } from '../../../hooks/contentPreference/useContentPreferenceStatusQuery'; @@ -159,7 +164,15 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { {isNotificationCtaExperimentEnabled && showNotificationCta && !haveNotificationsOn && ( - + )}
diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx index 46ac4c1466e..8619b45eb33 100644 --- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx @@ -7,6 +7,11 @@ import { TypographyType, } from '../../typography/Typography'; import type { Origin } from '../../../lib/log'; +import { + NotificationCtaPlacement, + NotificationPromptSource, + TargetType, +} from '../../../lib/log'; import { largeNumberFormat } from '../../../lib'; import { SquadActionButton } from '../../squads/SquadActionButton'; import { SourceIcon } from '../../icons'; @@ -194,7 +199,15 @@ const SquadEntityCard = ({ {isNotificationCtaExperimentEnabled && showNotificationCta && !haveNotificationsOn && ( - + )}
diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx index 6a8f358e776..2bbc69ff21d 100644 --- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx @@ -24,7 +24,7 @@ import { useContentPreference } from '../../../hooks/contentPreference/useConten import { LazyModal } from '../../modals/common/types'; import { useLazyModal } from '../../../hooks/useLazyModal'; import { usePlusSubscription } from '../../../hooks/usePlusSubscription'; -import { LogEvent, TargetId } from '../../../lib/log'; +import { LogEvent, NotificationCtaPlacement, TargetId } from '../../../lib/log'; import CustomFeedOptionsMenu from '../../CustomFeedOptionsMenu'; import AuthContext from '../../../contexts/AuthContext'; import { ButtonVariant } from '../../buttons/Button'; @@ -306,7 +306,14 @@ const UserEntityCard = ({ {isNotificationCtaExperimentEnabled && showNotificationCta && !haveNotificationsOn && ( - + )}
diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index ef6adab1d05..d5544b8afa7 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -9,7 +9,12 @@ import CommentBox from './CommentBox'; import SubComment from './SubComment'; import CollapsedRepliesPreview from './CollapsedRepliesPreview'; import AuthContext from '../../contexts/AuthContext'; -import { LogEvent, NotificationPromptSource, TargetType } from '../../lib/log'; +import { + LogEvent, + NotificationCtaPlacement, + NotificationPromptSource, + TargetType, +} from '../../lib/log'; import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentMarkdownInput'; import { useComments } from '../../hooks/post'; import { SquadCommentJoinBanner } from '../squads/SquadCommentJoinBanner'; @@ -260,6 +265,7 @@ export default function MainComment({ {shouldRenderStandaloneUpvoteCta && (
([ function EnableNotification({ source = NotificationPromptSource.NotificationsPage, + placement, contentName, className, label, @@ -86,7 +89,12 @@ function EnableNotification({ const { isEnabled: isNotificationCtaExperimentEnabled } = useNotificationCtaExperiment(); const { shouldShowCta, acceptedJustNow, onEnable, onDismiss } = - useEnableNotification({ source, ignoreDismissState, onEnableAction }); + useEnableNotification({ + source, + placement, + ignoreDismissState, + onEnableAction, + }); if ( !shouldShowCta || diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx index 10cfbd3f0ae..71c1b85e483 100644 --- a/packages/shared/src/components/post/PostActions.tsx +++ b/packages/shared/src/components/post/PostActions.tsx @@ -14,7 +14,7 @@ import { UserVote } from '../../graphql/posts'; import { QuaternaryButton } from '../buttons/QuaternaryButton'; import type { PostOrigin } from '../../hooks/log/useLogContextData'; import { useMutationSubscription, useVotePost } from '../../hooks'; -import { Origin } from '../../lib/log'; +import { NotificationCtaPlacement, Origin } from '../../lib/log'; import { PostTagsPanel } from './block/PostTagsPanel'; import { useBlockPostPanel } from '../../hooks/post/useBlockPostPanel'; import { useBookmarkPost } from '../../hooks/useBookmarkPost'; @@ -350,7 +350,14 @@ export function PostActions({
{isNotificationCtaExperimentEnabled && showNotificationCta && ( - + )} {showTagsPanel !== undefined && ( diff --git a/packages/shared/src/components/post/tags/PostTagList.tsx b/packages/shared/src/components/post/tags/PostTagList.tsx index 52db8cda726..d204436a259 100644 --- a/packages/shared/src/components/post/tags/PostTagList.tsx +++ b/packages/shared/src/components/post/tags/PostTagList.tsx @@ -3,7 +3,10 @@ import React, { useEffect, useState } from 'react'; import classNames from 'classnames'; import type { Post } from '../../../graphql/posts'; import type { BooleanPromise } from '../../../lib/func'; -import { NotificationPromptSource } from '../../../lib/log'; +import { + NotificationCtaPlacement, + NotificationPromptSource, +} from '../../../lib/log'; import { useFollowPostTags } from '../../../hooks/feed/useFollowPostTags'; import type { TypographyProps } from '../../typography/Typography'; import { @@ -148,6 +151,7 @@ export const PostTagList = ({ post }: PostTagListProps): ReactElement => { )} diff --git a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx index 86a3a9041c6..0ddde85e82c 100644 --- a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx +++ b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx @@ -1,13 +1,23 @@ import type { ReactElement } from 'react'; -import React from 'react'; +import React, { useCallback } from 'react'; import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; import CloseButton from '../CloseButton'; import ReadingReminderCatLaptop from '../banners/ReadingReminderCatLaptop'; import { useReadingReminderHero } from '../../hooks/notifications/useReadingReminderHero'; +import { + NotificationCtaKind, + NotificationCtaPlacement, + NotificationPromptSource, + TargetType, +} from '../../lib/log'; import { NotificationCtaPreviewPlacement, useNotificationCtaExperiment, } from '../../hooks/notifications/useNotificationCtaExperiment'; +import { + useNotificationCtaAnalytics, + useNotificationCtaImpression, +} from '../../hooks/notifications/useNotificationCtaAnalytics'; type SidebarNotificationPromptProps = { sidebarExpanded: boolean; @@ -17,6 +27,7 @@ export const SidebarNotificationPrompt = ({ sidebarExpanded, }: SidebarNotificationPromptProps): ReactElement | null => { const { shouldHidePlacement } = useNotificationCtaExperiment(); + const { logClick, logDismiss } = useNotificationCtaAnalytics(); const { shouldShow, title, @@ -32,7 +43,40 @@ export const SidebarNotificationPrompt = ({ NotificationCtaPreviewPlacement.SidebarPrompt, ); - if (!sidebarExpanded || shouldHideSideMenuPrompt || !shouldShow) { + const shouldShowSidebarPrompt = + sidebarExpanded && !shouldHideSideMenuPrompt && shouldShow; + + useNotificationCtaImpression( + { + kind: NotificationCtaKind.ReadingReminder, + targetType: TargetType.ReadingReminder, + source: NotificationPromptSource.ReadingReminder, + placement: NotificationCtaPlacement.SidebarPrompt, + }, + shouldShowSidebarPrompt, + ); + + const onEnableClick = useCallback(async () => { + logClick({ + kind: NotificationCtaKind.ReadingReminder, + targetType: TargetType.ReadingReminder, + source: NotificationPromptSource.ReadingReminder, + placement: NotificationCtaPlacement.SidebarPrompt, + }); + await onEnable(); + }, [logClick, onEnable]); + + const onDismissClick = useCallback(async () => { + logDismiss({ + kind: NotificationCtaKind.ReadingReminder, + targetType: TargetType.ReadingReminder, + source: NotificationPromptSource.ReadingReminder, + placement: NotificationCtaPlacement.SidebarPrompt, + }); + await onDismiss(); + }, [logDismiss, onDismiss]); + + if (!shouldShowSidebarPrompt) { return null; } @@ -48,7 +92,7 @@ export const SidebarNotificationPrompt = ({ )}
@@ -61,7 +105,7 @@ export const SidebarNotificationPrompt = ({ size={ButtonSize.XSmall} variant={ButtonVariant.Primary} className="mt-3 w-full justify-center" - onClick={onEnable} + onClick={onEnableClick} > Enable reminder diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx b/packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx index 626ae07bb8d..f231cc7538b 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx +++ b/packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx @@ -1,5 +1,10 @@ import { act, renderHook } from '@testing-library/react'; -import { NotificationPromptSource } from '../../lib/log'; +import { + LogEvent, + NotificationCtaPlacement, + NotificationPromptSource, + TargetType, +} from '../../lib/log'; import { useEnableNotification } from './useEnableNotification'; const mockUseLogContext = jest.fn(); @@ -31,12 +36,14 @@ jest.mock('./useNotificationCtaExperiment', () => ({ describe('useEnableNotification', () => { let popupGrantedHandler: (() => void) | undefined; + let logEvent: jest.Mock; beforeEach(() => { jest.clearAllMocks(); popupGrantedHandler = undefined; + logEvent = jest.fn(); - mockUseLogContext.mockReturnValue({ logEvent: jest.fn() }); + mockUseLogContext.mockReturnValue({ logEvent }); mockPersistentContext.mockReturnValue([false, jest.fn(), true]); mockUsePushNotificationMutation.mockImplementation( ({ onPopupGranted } = {}) => { @@ -93,6 +100,30 @@ describe('useEnableNotification', () => { expect(result.current.shouldShowCta).toBe(true); }); + it('should log impression with placement when shown', () => { + mockUseNotificationCtaExperiment.mockReturnValue({ + isEnabled: true, + isPreviewActive: false, + }); + + renderHook(() => + useEnableNotification({ + source: NotificationPromptSource.CommentUpvote, + placement: NotificationCtaPlacement.CommentInline, + }), + ); + + expect(logEvent).toHaveBeenCalledWith({ + event_name: LogEvent.Impression, + target_type: TargetType.EnableNotifications, + extra: JSON.stringify({ + kind: 'push_cta', + placement: NotificationCtaPlacement.CommentInline, + origin: NotificationPromptSource.CommentUpvote, + }), + }); + }); + it('should run onEnableAction after direct permission enable succeeds', async () => { const onEnableAction = jest.fn().mockResolvedValue(undefined); const onEnablePush = jest.fn().mockResolvedValue(true); @@ -120,6 +151,14 @@ describe('useEnableNotification', () => { await result.current.onEnable(); }); + expect(logEvent).toHaveBeenCalledWith({ + event_name: LogEvent.Click, + target_type: TargetType.EnableNotifications, + extra: JSON.stringify({ + kind: 'push_cta', + origin: NotificationPromptSource.CommentUpvote, + }), + }); expect(onEnablePush).toHaveBeenCalledWith( NotificationPromptSource.CommentUpvote, ); @@ -162,4 +201,31 @@ describe('useEnableNotification', () => { expect(onEnableAction).toHaveBeenCalledTimes(1); expect(result.current.acceptedJustNow).toBe(true); }); + + it('should log dismiss with placement', () => { + const setIsDismissed = jest.fn(); + mockPersistentContext.mockReturnValue([false, setIsDismissed, true]); + + const { result } = renderHook(() => + useEnableNotification({ + source: NotificationPromptSource.SquadPage, + placement: NotificationCtaPlacement.SquadPage, + }), + ); + + act(() => { + result.current.onDismiss(); + }); + + expect(logEvent).toHaveBeenCalledWith({ + event_name: LogEvent.ClickNotificationDismiss, + target_type: TargetType.EnableNotifications, + extra: JSON.stringify({ + kind: 'push_cta', + placement: NotificationCtaPlacement.SquadPage, + origin: NotificationPromptSource.SquadPage, + }), + }); + expect(setIsDismissed).toHaveBeenCalledWith(true); + }); }); diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index cc5389a363b..93f8ddee888 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -1,11 +1,19 @@ -import { useCallback, useEffect, useRef, useState } from 'react'; -import { useLogContext } from '../../contexts/LogContext'; +import { useCallback, useEffect, useState } from 'react'; import usePersistentContext from '../usePersistentContext'; -import { LogEvent, NotificationPromptSource, TargetType } from '../../lib/log'; +import { + NotificationCtaKind, + NotificationPromptSource, + TargetType, +} from '../../lib/log'; +import type { NotificationCtaPlacement } from '../../lib/log'; import { usePushNotificationMutation } from './usePushNotificationMutation'; import { usePushNotificationContext } from '../../contexts/PushNotificationContext'; import { checkIsExtension } from '../../lib/func'; import { useNotificationCtaExperiment } from './useNotificationCtaExperiment'; +import { + useNotificationCtaAnalytics, + useNotificationCtaImpression, +} from './useNotificationCtaAnalytics'; export const DISMISS_PERMISSION_BANNER = 'DISMISS_PERMISSION_BANNER'; export const FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY = @@ -16,6 +24,7 @@ const isTruthySessionFlag = (value: string | null): boolean => interface UseEnableNotificationProps { source: NotificationPromptSource; + placement?: NotificationCtaPlacement; ignoreDismissState?: boolean; onEnableAction?: () => Promise | unknown; } @@ -29,6 +38,7 @@ interface UseEnableNotification { export const useEnableNotification = ({ source = NotificationPromptSource.NotificationsPage, + placement, ignoreDismissState = false, onEnableAction, }: UseEnableNotificationProps): UseEnableNotification => { @@ -37,8 +47,7 @@ export const useEnableNotification = ({ const isCommentUpvoteSource = source === NotificationPromptSource.CommentUpvote; const isExtension = checkIsExtension(); - const { logEvent } = useLogContext(); - const hasLoggedImpression = useRef(false); + const { logClick, logDismiss } = useNotificationCtaAnalytics(); const { isInitialized, isPushSupported, isSubscribed, shouldOpenPopup } = usePushNotificationContext(); const [hasCompletedEnableAction, setHasCompletedEnableAction] = useState( @@ -99,14 +108,22 @@ export const useEnableNotification = ({ const acceptedJustNow = acceptedPushJustNow && hasCompletedEnableAction; const onDismiss = useCallback(() => { - logEvent({ - event_name: LogEvent.ClickNotificationDismiss, - extra: JSON.stringify({ origin: source }), + logDismiss({ + kind: NotificationCtaKind.PushCta, + targetType: TargetType.EnableNotifications, + source, + placement, }); setIsDismissed(true); - }, [source, logEvent, setIsDismissed]); + }, [logDismiss, placement, setIsDismissed, source]); const onEnable = useCallback(async () => { + logClick({ + kind: NotificationCtaKind.PushCta, + targetType: TargetType.EnableNotifications, + source, + placement, + }); const isEnabled = await onEnablePush(source); if (!isEnabled) { @@ -114,7 +131,7 @@ export const useEnableNotification = ({ } return runEnableAction(); - }, [source, onEnablePush, runEnableAction]); + }, [logClick, onEnablePush, placement, runEnableAction, source]); const isRolloutOnlySource = source === NotificationPromptSource.CommentUpvote || @@ -155,20 +172,15 @@ export const useEnableNotification = ({ ? computeShouldShowCta() : false; - useEffect(() => { - if (!shouldShowCta || hasLoggedImpression.current) { - return; - } - - logEvent({ - event_name: LogEvent.Impression, - target_type: TargetType.EnableNotifications, - extra: JSON.stringify({ origin: source }), - }); - hasLoggedImpression.current = true; - // @NOTE see https://dailydotdev.atlassian.net/l/cp/dK9h1zoM - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [shouldShowCta]); + useNotificationCtaImpression( + { + kind: NotificationCtaKind.PushCta, + targetType: TargetType.EnableNotifications, + source, + placement, + }, + shouldShowCta, + ); return { acceptedJustNow, diff --git a/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts b/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts new file mode 100644 index 00000000000..70d22531fe4 --- /dev/null +++ b/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts @@ -0,0 +1,95 @@ +import { useCallback } from 'react'; +import { useLogContext } from '../../contexts/LogContext'; +import { LogEvent } from '../../lib/log'; +import type { + NotificationCtaKind, + NotificationCtaPlacement, + NotificationPromptSource, +} from '../../lib/log'; +import useLogEventOnce from '../log/useLogEventOnce'; + +type NotificationCtaTargetType = string; + +interface NotificationCtaAnalyticsParams { + kind: NotificationCtaKind; + targetType: NotificationCtaTargetType; + placement?: NotificationCtaPlacement; + source?: NotificationPromptSource; + targetId?: string; + extra?: Record; +} + +const getNotificationCtaExtra = ({ + kind, + placement, + source, + extra, +}: NotificationCtaAnalyticsParams): string => { + return JSON.stringify({ + kind, + ...(placement ? { placement } : {}), + ...(source ? { origin: source } : {}), + ...extra, + }); +}; + +const getBaseNotificationCtaEvent = ( + params: NotificationCtaAnalyticsParams, +) => ({ + target_type: params.targetType, + ...(params.targetId ? { target_id: params.targetId } : {}), + extra: getNotificationCtaExtra(params), +}); + +export const useNotificationCtaImpression = ( + params: NotificationCtaAnalyticsParams, + condition = true, +): void => { + useLogEventOnce( + () => ({ + event_name: LogEvent.Impression, + ...getBaseNotificationCtaEvent(params), + }), + { condition }, + ); +}; + +export const useNotificationCtaAnalytics = () => { + const { logEvent } = useLogContext(); + + const logClick = useCallback( + (params: NotificationCtaAnalyticsParams) => { + logEvent({ + event_name: LogEvent.Click, + ...getBaseNotificationCtaEvent(params), + }); + }, + [logEvent], + ); + + const logDismiss = useCallback( + (params: NotificationCtaAnalyticsParams) => { + logEvent({ + event_name: LogEvent.ClickNotificationDismiss, + ...getBaseNotificationCtaEvent(params), + }); + }, + [logEvent], + ); + + const logImpression = useCallback( + (params: NotificationCtaAnalyticsParams) => { + logEvent({ + event_name: LogEvent.Impression, + ...getBaseNotificationCtaEvent(params), + }); + }, + [logEvent], + ); + + return { + logClick, + logDismiss, + logImpression, + }; +}; diff --git a/packages/shared/src/hooks/squads/usePostToSquad.tsx b/packages/shared/src/hooks/squads/usePostToSquad.tsx index d489b80ac20..1a264df0715 100644 --- a/packages/shared/src/hooks/squads/usePostToSquad.tsx +++ b/packages/shared/src/hooks/squads/usePostToSquad.tsx @@ -45,8 +45,14 @@ import { } from '../../components/buttons/Button'; import { usePushNotificationContext } from '../../contexts/PushNotificationContext'; import { usePushNotificationMutation } from '../notifications/usePushNotificationMutation'; -import { NotificationPromptSource } from '../../lib/log'; +import { + NotificationCtaKind, + NotificationCtaPlacement, + NotificationPromptSource, + TargetType, +} from '../../lib/log'; import { useNotificationCtaExperiment } from '../notifications/useNotificationCtaExperiment'; +import { useNotificationCtaAnalytics } from '../notifications/useNotificationCtaAnalytics'; const isApiErrorResult = (error: unknown): error is ApiErrorResult => !!(error as ApiErrorResult)?.response?.errors; @@ -115,6 +121,7 @@ export const usePostToSquad = ({ const { user } = useAuthContext(); const { isSubscribed } = usePushNotificationContext(); const { onEnablePush } = usePushNotificationMutation(); + const { logClick, logImpression } = useNotificationCtaAnalytics(); const { isEnabled: isNotificationCtaExperimentEnabled, isPreviewActive } = useNotificationCtaExperiment(); const client = useQueryClient(); @@ -259,12 +266,25 @@ export const usePostToSquad = ({ if (customToast) { displayToast(customToast.message, customToast.options); } else if (!update && shouldShowEnableNotificationToast) { + logImpression({ + kind: NotificationCtaKind.ToastCta, + targetType: TargetType.EnableNotifications, + source: NotificationPromptSource.SquadPostCommentary, + placement: NotificationCtaPlacement.SquadShareToast, + }); displayToast('Post shared. Don’t miss the replies.', { subject: ToastSubject.Feed, action: { copy: 'Turn on', - onClick: async () => - onEnablePush(NotificationPromptSource.SquadPostCommentary), + onClick: async () => { + logClick({ + kind: NotificationCtaKind.ToastCta, + targetType: TargetType.EnableNotifications, + source: NotificationPromptSource.SquadPostCommentary, + placement: NotificationCtaPlacement.SquadShareToast, + }); + await onEnablePush(NotificationPromptSource.SquadPostCommentary); + }, buttonProps: { size: ButtonSize.Small, variant: ButtonVariant.Primary, diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts index 9f4e806c4df..6efcf62fc49 100644 --- a/packages/shared/src/lib/log.ts +++ b/packages/shared/src/lib/log.ts @@ -539,6 +539,29 @@ export enum NotificationTarget { Icon = 'notifications icon', } +export enum NotificationCtaPlacement { + TopHero = 'top-hero', + InFeedHero = 'in-feed-hero', + SidebarPrompt = 'sidebar-prompt', + CommentInline = 'comment-inline', + CommentReplyFlow = 'comment-reply-flow', + TagFollowInline = 'tag-follow-inline', + TagPage = 'tag-page', + SquadPage = 'squad-page', + UserCard = 'user-card', + SourceCard = 'source-card', + SquadCard = 'squad-card', + PostActions = 'post-actions', + SquadShareToast = 'squad-share-toast', +} + +export enum NotificationCtaKind { + PushCta = 'push_cta', + ReadingReminder = 'reading_reminder', + FollowUpCta = 'followup_cta', + ToastCta = 'toast_cta', +} + export enum NotificationPromptSource { BookmarkReminder = 'bookmark reminder', NotificationsPage = 'notifications page', diff --git a/packages/webapp/pages/squads/[handle]/index.tsx b/packages/webapp/pages/squads/[handle]/index.tsx index 3a70dbba4c8..8a8f8f83265 100644 --- a/packages/webapp/pages/squads/[handle]/index.tsx +++ b/packages/webapp/pages/squads/[handle]/index.tsx @@ -32,6 +32,7 @@ import Unauthorized from '@dailydotdev/shared/src/components/errors/Unauthorized import { useQuery } from '@tanstack/react-query'; import { LogEvent, + NotificationCtaPlacement, NotificationPromptSource, } from '@dailydotdev/shared/src/lib/log'; import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext'; @@ -290,6 +291,7 @@ const SquadPage = ({ {isNotificationCtaExperimentEnabled && ( diff --git a/packages/webapp/pages/tags/[tag].tsx b/packages/webapp/pages/tags/[tag].tsx index 0f3d7df097e..2ea3a0134a7 100644 --- a/packages/webapp/pages/tags/[tag].tsx +++ b/packages/webapp/pages/tags/[tag].tsx @@ -47,6 +47,7 @@ import { } from '@dailydotdev/shared/src/lib/query'; import { LogEvent, + NotificationCtaPlacement, NotificationPromptSource, Origin, } from '@dailydotdev/shared/src/lib/log'; @@ -418,6 +419,7 @@ const TagPage = ({ )} From 266b4c058e981901ecfd19fc49e388a545ade29a Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Wed, 18 Mar 2026 13:31:12 +0200 Subject: [PATCH 19/34] fix: restore reading reminder fallback behavior --- packages/shared/src/components/Feed.tsx | 14 +++++++-- .../shared/src/components/MainFeedLayout.tsx | 29 ++++++++++++++++++- .../src/components/feeds/FeedContainer.tsx | 15 +++++++--- .../sidebar/SidebarNotificationPrompt.tsx | 12 ++++++-- .../notifications/useReadingReminderHero.ts | 4 +-- 5 files changed, 61 insertions(+), 13 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index 41b15929564..6a3955fe911 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -60,6 +60,7 @@ import { useSearchResultsLayout } from '../hooks/search/useSearchResultsLayout'; import { SearchResultsLayout } from './search/SearchResults/SearchResultsLayout'; import { acquisitionKey } from './cards/AcquisitionForm/common/common'; import type { PostClick } from '../lib/click'; +import { webappUrl } from '../lib/constants'; import { useFeedContentPreferenceMutationSubscription } from './feeds/useFeedContentPreferenceMutationSubscription'; import { useFeedBookmarkPost } from '../hooks/bookmark/useFeedBookmarkPost'; @@ -217,7 +218,7 @@ export default function Feed({ const { logEvent } = useLogContext(); const currentSettings = useContext(FeedContext); const { user } = useContext(AuthContext); - const { isFallback, query: routerQuery } = useRouter(); + const { isFallback, pathname, query: routerQuery } = useRouter(); const { openNewTab, spaciness, loadedSettings } = useContext(SettingsContext); const { value: isFeedLayoutV2 } = useConditionalFeature({ feature: featureFeedLayoutV2, @@ -276,8 +277,11 @@ export default function Feed({ feature: briefFeedEntrypointPage, shouldEvaluate: !user?.isPlus && isMyFeed, }); - const { isPlacementForced, shouldHidePlacement } = - useNotificationCtaExperiment(); + const { + isEnabled: isNotificationCtaExperimentEnabled, + isPlacementForced, + shouldHidePlacement, + } = useNotificationCtaExperiment(); const isTopHeroForced = isPlacementForced( NotificationCtaPreviewPlacement.TopHero, ); @@ -591,12 +595,16 @@ export default function Feed({ }, [logDismiss, onDismiss]); const shouldShowInFeedHero = + isNotificationCtaExperimentEnabled && + pathname === webappUrl && shouldShowReadingReminder && !shouldHideInFeedHero && (isInFeedHeroForced || hasScrolledForHero) && !isHeroDismissed && items.length > HERO_INSERT_INDEX; const shouldShowTopHero = + isNotificationCtaExperimentEnabled && + pathname === webappUrl && shouldShowReadingReminder && isTopHeroForced && !shouldHideTopHero && diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx index fb2aab9d601..cc38122ff5b 100644 --- a/packages/shared/src/components/MainFeedLayout.tsx +++ b/packages/shared/src/components/MainFeedLayout.tsx @@ -11,6 +11,7 @@ import classNames from 'classnames'; import { useRouter } from 'next/router'; import type { FeedProps } from './Feed'; import Feed from './Feed'; +import ReadingReminderHero from './banners/ReadingReminderHero'; import { AskSearchBanner } from './notifications/AskSearchBanner'; import AuthContext from '../contexts/AuthContext'; import type { LoggedUser } from '../lib/user'; @@ -65,7 +66,9 @@ import { QueryStateKeys, useQueryState } from '../hooks/utils/useQueryState'; import { useSearchResultsLayout } from '../hooks/search/useSearchResultsLayout'; import useCustomDefaultFeed from '../hooks/feed/useCustomDefaultFeed'; import { useSearchContextProvider } from '../contexts/search/SearchContext'; -import { isDevelopment, isProductionAPI } from '../lib/constants'; +import { isDevelopment, isProductionAPI, webappUrl } from '../lib/constants'; +import { useReadingReminderHero } from '../hooks/notifications/useReadingReminderHero'; +import { useNotificationCtaExperiment } from '../hooks/notifications/useNotificationCtaExperiment'; const FeedExploreHeader = dynamic( () => @@ -215,6 +218,16 @@ export default function MainFeedLayout({ const isLaptop = useViewSize(ViewSize.Laptop); const feedVersion = useFeature(feature.feedVersion); const { time, contentCurationFilter } = useSearchContextProvider(); + const { + shouldShow: shouldShowReadingReminder, + title: readingReminderTitle, + subtitle: readingReminderSubtitle, + shouldShowDismiss: shouldShowReadingReminderDismiss, + onEnable, + onDismiss, + } = useReadingReminderHero(); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment(); const { isUpvoted, isPopular, @@ -520,6 +533,10 @@ export default function MainFeedLayout({ }, [sortingEnabled, selectedAlgo, loadedSettings, loadedAlgo]); const disableTopPadding = isFinder || shouldUseListFeedLayout; + const shouldShowReadingReminderOnHomepage = + !isNotificationCtaExperimentEnabled && + router.pathname === webappUrl && + shouldShowReadingReminder; const onTabChange = useCallback( (clickedTab: ExploreTabs) => { @@ -568,6 +585,16 @@ export default function MainFeedLayout({ {isSearchOn && isFinder && !isSearchPageLaptop && ( )} + {shouldShowReadingReminderOnHomepage && ( + + )} {shouldUseCommentFeedLayout ? ( 1) || shouldUseListFeedLayout; - const v2GridGap = undefined; + const v2GridGap = isFeedLayoutV2 ? 'gap-4' : undefined; const feedGapPx = getFeedGapPx[ gapClass({ @@ -243,7 +250,7 @@ export const FeedContainer = ({
@@ -285,7 +292,7 @@ export const FeedContainer = ({ className={classNames( 'relative mx-auto w-full', styles.feed, - !isList && styles.cards, + !isList && (isFeedLayoutV2 ? styles.cardsV2 : styles.cards), )} style={cardContainerStyle} aria-live={subject === ToastSubject.Feed ? 'assertive' : 'off'} diff --git a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx index 0ddde85e82c..9d50e0174fd 100644 --- a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx +++ b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx @@ -1,5 +1,6 @@ import type { ReactElement } from 'react'; import React, { useCallback } from 'react'; +import { useRouter } from 'next/router'; import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; import CloseButton from '../CloseButton'; import ReadingReminderCatLaptop from '../banners/ReadingReminderCatLaptop'; @@ -10,6 +11,7 @@ import { NotificationPromptSource, TargetType, } from '../../lib/log'; +import { webappUrl } from '../../lib/constants'; import { NotificationCtaPreviewPlacement, useNotificationCtaExperiment, @@ -26,7 +28,9 @@ type SidebarNotificationPromptProps = { export const SidebarNotificationPrompt = ({ sidebarExpanded, }: SidebarNotificationPromptProps): ReactElement | null => { - const { shouldHidePlacement } = useNotificationCtaExperiment(); + const { pathname } = useRouter(); + const { isEnabled: isNotificationCtaExperimentEnabled, shouldHidePlacement } = + useNotificationCtaExperiment(); const { logClick, logDismiss } = useNotificationCtaAnalytics(); const { shouldShow, @@ -44,7 +48,11 @@ export const SidebarNotificationPrompt = ({ ); const shouldShowSidebarPrompt = - sidebarExpanded && !shouldHideSideMenuPrompt && shouldShow; + isNotificationCtaExperimentEnabled && + pathname === webappUrl && + sidebarExpanded && + !shouldHideSideMenuPrompt && + shouldShow; useNotificationCtaImpression( { diff --git a/packages/shared/src/hooks/notifications/useReadingReminderHero.ts b/packages/shared/src/hooks/notifications/useReadingReminderHero.ts index 9cd1021bd7c..d9ec5c9badc 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderHero.ts +++ b/packages/shared/src/hooks/notifications/useReadingReminderHero.ts @@ -68,8 +68,7 @@ export const useReadingReminderHero = ({ const { isLoggedIn, user } = useAuthContext(); const { logEvent } = useLogContext(); const { onEnablePush } = usePushNotificationMutation(); - const { isEnabled: isNotificationCtaExperimentEnabled, isPreviewActive } = - useNotificationCtaExperiment(); + const { isPreviewActive } = useNotificationCtaExperiment(); const { getPersonalizedDigest, isLoading: isDigestLoading, @@ -91,7 +90,6 @@ export const useReadingReminderHero = ({ const isEligibleViewSize = !requireMobile || isMobile; const shouldForceShow = isPreviewActive && isLoggedIn; const shouldEvaluate = - isNotificationCtaExperimentEnabled && isEligibleViewSize && isLoggedIn && !isDigestLoading && From f971f82b1712e081747df06477a1c95a3d116aac Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Wed, 18 Mar 2026 14:08:03 +0200 Subject: [PATCH 20/34] perf: defer notification CTA feature evaluation --- packages/shared/src/components/Feed.tsx | 20 +-- .../shared/src/components/MainFeedLayout.tsx | 5 +- .../cards/entity/SourceEntityCard.tsx | 19 +-- .../cards/entity/SquadEntityCard.tsx | 32 +---- .../cards/entity/UserEntityCard.tsx | 32 +---- .../src/components/comments/MainComment.tsx | 7 +- .../src/components/comments/SubComment.tsx | 6 +- .../src/components/post/PostActions.tsx | 7 +- .../src/components/post/tags/PostTagList.tsx | 10 +- .../sidebar/SidebarNotificationPrompt.tsx | 8 +- .../useNotificationCtaExperiment.ts | 123 +++++++++--------- packages/webapp/pages/tags/[tag].tsx | 10 +- 12 files changed, 124 insertions(+), 155 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index 6a3955fe911..bc239eea7ab 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -277,11 +277,21 @@ export default function Feed({ feature: briefFeedEntrypointPage, shouldEvaluate: !user?.isPlus && isMyFeed, }); + const { + shouldShow: shouldShowReadingReminder, + title: readingReminderTitle, + subtitle: readingReminderSubtitle, + shouldShowDismiss: shouldShowReadingReminderDismiss, + onEnable, + onDismiss, + } = useReadingReminderHero(); const { isEnabled: isNotificationCtaExperimentEnabled, isPlacementForced, shouldHidePlacement, - } = useNotificationCtaExperiment(); + } = useNotificationCtaExperiment({ + shouldEvaluate: pathname === webappUrl && shouldShowReadingReminder, + }); const isTopHeroForced = isPlacementForced( NotificationCtaPreviewPlacement.TopHero, ); @@ -294,14 +304,6 @@ export default function Feed({ const shouldHideInFeedHero = shouldHidePlacement( NotificationCtaPreviewPlacement.InFeedHero, ); - const { - shouldShow: shouldShowReadingReminder, - title: readingReminderTitle, - subtitle: readingReminderSubtitle, - shouldShowDismiss: shouldShowReadingReminderDismiss, - onEnable, - onDismiss, - } = useReadingReminderHero(); const { logClick, logDismiss } = useNotificationCtaAnalytics(); const [hasScrolledForHero, setHasScrolledForHero] = useState(isInFeedHeroForced); diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx index cc38122ff5b..a39475de0c4 100644 --- a/packages/shared/src/components/MainFeedLayout.tsx +++ b/packages/shared/src/components/MainFeedLayout.tsx @@ -227,7 +227,10 @@ export default function MainFeedLayout({ onDismiss, } = useReadingReminderHero(); const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); + useNotificationCtaExperiment({ + shouldEvaluate: + router.pathname === webappUrl && shouldShowReadingReminder, + }); const { isUpvoted, isPopular, diff --git a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx index 5acb85b488f..a16c487a080 100644 --- a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx @@ -47,9 +47,11 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { id: source?.id, entity: ContentPreferenceType.Source, }); - const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); const [showNotificationCta, setShowNotificationCta] = useState(false); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment({ + shouldEvaluate: showNotificationCta, + }); const prevStatusRef = useRef(contentPreference?.status); const menuProps = useSourceMenuProps({ source }); const { haveNotificationsOn, onNotify } = useSourceActionsNotify({ @@ -68,12 +70,6 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { prevStatusRef.current === ContentPreferenceStatus.Subscribed; useEffect(() => { - if (!isNotificationCtaExperimentEnabled) { - setShowNotificationCta(false); - prevStatusRef.current = currentStatus; - return; - } - if (currentStatus === prevStatusRef.current) { return; } @@ -88,12 +84,7 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { if (!isNowFollowing && wasFollowing) { setShowNotificationCta(false); } - }, [ - currentStatus, - isNotificationCtaExperimentEnabled, - isNowFollowing, - wasFollowing, - ]); + }, [currentStatus, isNowFollowing, wasFollowing]); const handleTurnOn = async () => { await onNotify(); diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx index 8619b45eb33..a410ea6f2a7 100644 --- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx @@ -48,9 +48,11 @@ const SquadEntityCard = ({ className, }: SquadEntityCardProps) => { const { squad } = useSquad({ handle }); - const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); const [showNotificationCta, setShowNotificationCta] = useState(false); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment({ + shouldEvaluate: showNotificationCta, + }); const wasSquadMemberRef = useRef(!!squad?.currentMember); const wasSquadPostUpvotedRef = useRef(isSquadPostUpvoted); const { isLoading } = useShowFollowAction({ @@ -64,12 +66,6 @@ const SquadEntityCard = ({ const isSquadMember = !!squad?.currentMember; useEffect(() => { - if (!isNotificationCtaExperimentEnabled) { - setShowNotificationCta(false); - wasSquadMemberRef.current = isSquadMember; - return; - } - if ( showNotificationCtaOnJoin && isSquadMember && @@ -82,20 +78,9 @@ const SquadEntityCard = ({ } wasSquadMemberRef.current = isSquadMember; - }, [ - haveNotificationsOn, - isNotificationCtaExperimentEnabled, - isSquadMember, - showNotificationCtaOnJoin, - ]); + }, [haveNotificationsOn, isSquadMember, showNotificationCtaOnJoin]); useEffect(() => { - if (!isNotificationCtaExperimentEnabled) { - setShowNotificationCta(false); - wasSquadPostUpvotedRef.current = isSquadPostUpvoted; - return; - } - if ( showNotificationCtaOnUpvote && isSquadPostUpvoted && @@ -106,12 +91,7 @@ const SquadEntityCard = ({ } wasSquadPostUpvotedRef.current = isSquadPostUpvoted; - }, [ - haveNotificationsOn, - isNotificationCtaExperimentEnabled, - isSquadPostUpvoted, - showNotificationCtaOnUpvote, - ]); + }, [haveNotificationsOn, isSquadPostUpvoted, showNotificationCtaOnUpvote]); const handleEnableNotifications = async () => { await onNotify(); diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx index 2bbc69ff21d..04a3026bf64 100644 --- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx @@ -54,14 +54,16 @@ const UserEntityCard = ({ }: Props) => { const { user: loggedUser } = useContext(AuthContext); const isSameUser = loggedUser?.id === user?.id; + const [showNotificationCta, setShowNotificationCta] = useState(false); const { data: contentPreference } = useContentPreferenceStatusQuery({ id: user?.id, entity: ContentPreferenceType.User, }); const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); + useNotificationCtaExperiment({ + shouldEvaluate: showNotificationCta, + }); const { unblock, block, subscribe } = useContentPreference(); - const [showNotificationCta, setShowNotificationCta] = useState(false); const prevStatusRef = useRef(contentPreference?.status); const prevAuthorPostUpvotedRef = useRef(isAuthorPostUpvoted); const blocked = contentPreference?.status === ContentPreferenceStatus.Blocked; @@ -99,12 +101,6 @@ const UserEntityCard = ({ currentStatus === ContentPreferenceStatus.Subscribed; useEffect(() => { - if (!isNotificationCtaExperimentEnabled) { - setShowNotificationCta(false); - prevStatusRef.current = currentStatus; - return; - } - const previousStatus = prevStatusRef.current; if (previousStatus === currentStatus) { @@ -122,20 +118,9 @@ const UserEntityCard = ({ } prevStatusRef.current = currentStatus; - }, [ - currentStatus, - isNotificationCtaExperimentEnabled, - isNowFollowing, - showNotificationCtaOnFollow, - ]); + }, [currentStatus, isNowFollowing, showNotificationCtaOnFollow]); useEffect(() => { - if (!isNotificationCtaExperimentEnabled) { - setShowNotificationCta(false); - prevAuthorPostUpvotedRef.current = isAuthorPostUpvoted; - return; - } - const wasAuthorPostUpvoted = prevAuthorPostUpvotedRef.current; if (wasAuthorPostUpvoted === isAuthorPostUpvoted) { @@ -152,12 +137,7 @@ const UserEntityCard = ({ } prevAuthorPostUpvotedRef.current = isAuthorPostUpvoted; - }, [ - haveNotificationsOn, - isAuthorPostUpvoted, - isNotificationCtaExperimentEnabled, - showNotificationCtaOnUpvote, - ]); + }, [haveNotificationsOn, isAuthorPostUpvoted, showNotificationCtaOnUpvote]); const options: MenuItemProps[] = [ { icon: , diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index d5544b8afa7..92c820f2d6d 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -83,8 +83,13 @@ export default function MainComment({ () => shouldShowBannerOnComment(permissionNotificationCommentId, comment), [permissionNotificationCommentId, comment], ); + const shouldEvaluateNotificationCta = + showNotificationPermissionBanner || + upvoteNotificationCommentId === comment.id; const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); + useNotificationCtaExperiment({ + shouldEvaluate: shouldEvaluateNotificationCta, + }); const showUpvoteNotificationPermissionBanner = isNotificationCtaExperimentEnabled && upvoteNotificationCommentId === comment.id; diff --git a/packages/shared/src/components/comments/SubComment.tsx b/packages/shared/src/components/comments/SubComment.tsx index bd38ea6c083..7b195902571 100644 --- a/packages/shared/src/components/comments/SubComment.tsx +++ b/packages/shared/src/components/comments/SubComment.tsx @@ -50,8 +50,12 @@ function SubComment({ ...props }: SubCommentProps): ReactElement { const { user } = useAuthContext(); + const shouldEvaluateNotificationCta = + upvoteNotificationCommentId === comment.id; const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); + useNotificationCtaExperiment({ + shouldEvaluate: shouldEvaluateNotificationCta, + }); const { inputProps, commentId, onReplyTo } = useComments(props.post); const { inputProps: editProps, onEdit } = useEditCommentProps(); const showUpvoteNotificationPermissionBanner = diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx index 71c1b85e483..d0456b0ecb0 100644 --- a/packages/shared/src/components/post/PostActions.tsx +++ b/packages/shared/src/components/post/PostActions.tsx @@ -58,11 +58,13 @@ export function PostActions({ const { showLogin, user } = useAuthContext(); const { openModal } = useLazyModal(); const creator = post.author || post.scout; + const [showNotificationCta, setShowNotificationCta] = useState(false); const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); + useNotificationCtaExperiment({ + shouldEvaluate: showNotificationCta, + }); const { data, onShowPanel, onClose } = useBlockPostPanel(post); const { showTagsPanel } = data; - const [showNotificationCta, setShowNotificationCta] = useState(false); const actionsRef = useRef(null); const canAward = useCanAwardUser({ sendingUser: user, @@ -98,7 +100,6 @@ export function PostActions({ } if ( - !isNotificationCtaExperimentEnabled || creatorContentPreference?.status === ContentPreferenceStatus.Subscribed ) { return; diff --git a/packages/shared/src/components/post/tags/PostTagList.tsx b/packages/shared/src/components/post/tags/PostTagList.tsx index d204436a259..d04f2a9915f 100644 --- a/packages/shared/src/components/post/tags/PostTagList.tsx +++ b/packages/shared/src/components/post/tags/PostTagList.tsx @@ -104,10 +104,12 @@ const PostTagItem = ({ }; export const PostTagList = ({ post }: PostTagListProps): ReactElement => { + const [newlyFollowedTag, setNewlyFollowedTag] = useState(null); const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); + useNotificationCtaExperiment({ + shouldEvaluate: !!newlyFollowedTag, + }); const { onFollowTag, tags } = useFollowPostTags({ post }); - const [newlyFollowedTag, setNewlyFollowedTag] = useState(null); useEffect(() => { setNewlyFollowedTag(null); @@ -125,9 +127,7 @@ export const PostTagList = ({ post }: PostTagListProps): ReactElement => { return result; } - if (isNotificationCtaExperimentEnabled) { - setNewlyFollowedTag(tag); - } + setNewlyFollowedTag(tag); return result; }; diff --git a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx index 9d50e0174fd..5f0813c3267 100644 --- a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx +++ b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx @@ -29,9 +29,6 @@ export const SidebarNotificationPrompt = ({ sidebarExpanded, }: SidebarNotificationPromptProps): ReactElement | null => { const { pathname } = useRouter(); - const { isEnabled: isNotificationCtaExperimentEnabled, shouldHidePlacement } = - useNotificationCtaExperiment(); - const { logClick, logDismiss } = useNotificationCtaAnalytics(); const { shouldShow, title, @@ -42,6 +39,11 @@ export const SidebarNotificationPrompt = ({ } = useReadingReminderHero({ requireMobile: false, }); + const { isEnabled: isNotificationCtaExperimentEnabled, shouldHidePlacement } = + useNotificationCtaExperiment({ + shouldEvaluate: pathname === webappUrl && sidebarExpanded && shouldShow, + }); + const { logClick, logDismiss } = useNotificationCtaAnalytics(); const shouldHideSideMenuPrompt = shouldHidePlacement( NotificationCtaPreviewPlacement.SidebarPrompt, diff --git a/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts b/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts index 536f26c3137..80faec0924a 100644 --- a/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts +++ b/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts @@ -90,65 +90,66 @@ export interface UseNotificationCtaExperiment { ) => boolean; } -export const useNotificationCtaExperiment = - (): UseNotificationCtaExperiment => { - const { value: isFeatureEnabled } = useConditionalFeature({ - feature: notificationCtaV2Feature, - }); - - const queryPreviewValue = getQueryPreviewValue(); - const previewValue = isDevelopment - ? parsePreviewValue(queryPreviewValue ?? getStoredPreviewValue()) - : null; - const forcedPlacement = - previewValue && previewValue !== 'on' ? previewValue : null; - const isPreviewActive = !!previewValue; - - useEffect(() => { - if ( - !isDevelopment || - typeof window === 'undefined' || - !queryPreviewValue - ) { - return; - } - - const normalizedValue = queryPreviewValue.trim().toLowerCase(); - if (clearPreviewValues.has(normalizedValue)) { - window.sessionStorage.removeItem(NOTIFICATION_CTA_PREVIEW_SESSION_KEY); - return; - } - - if ( - validPreviewValues.has(normalizedValue as NotificationCtaPreviewValue) - ) { - window.sessionStorage.setItem( - NOTIFICATION_CTA_PREVIEW_SESSION_KEY, - normalizedValue, - ); - } - }, [queryPreviewValue]); - - const isPlacementForced = useCallback( - (placement: NotificationCtaPreviewPlacementValue) => { - return forcedPlacement === placement; - }, - [forcedPlacement], - ); - - const shouldHidePlacement = useCallback( - (placement: NotificationCtaPreviewPlacementValue) => { - return !!forcedPlacement && forcedPlacement !== placement; - }, - [forcedPlacement], - ); - - return { - isEnabled: Boolean(isFeatureEnabled) || isPreviewActive, - isFeatureEnabled: Boolean(isFeatureEnabled), - isPreviewActive, - forcedPlacement, - isPlacementForced, - shouldHidePlacement, - }; +interface UseNotificationCtaExperimentProps { + shouldEvaluate?: boolean; +} + +export const useNotificationCtaExperiment = ({ + shouldEvaluate = true, +}: UseNotificationCtaExperimentProps = {}): UseNotificationCtaExperiment => { + const queryPreviewValue = getQueryPreviewValue(); + const previewValue = isDevelopment + ? parsePreviewValue(queryPreviewValue ?? getStoredPreviewValue()) + : null; + const forcedPlacement = + previewValue && previewValue !== 'on' ? previewValue : null; + const isPreviewActive = !!previewValue; + const { value: isFeatureEnabled } = useConditionalFeature({ + feature: notificationCtaV2Feature, + shouldEvaluate, + }); + + useEffect(() => { + if (!isDevelopment || typeof window === 'undefined' || !queryPreviewValue) { + return; + } + + const normalizedValue = queryPreviewValue.trim().toLowerCase(); + if (clearPreviewValues.has(normalizedValue)) { + window.sessionStorage.removeItem(NOTIFICATION_CTA_PREVIEW_SESSION_KEY); + return; + } + + if ( + validPreviewValues.has(normalizedValue as NotificationCtaPreviewValue) + ) { + window.sessionStorage.setItem( + NOTIFICATION_CTA_PREVIEW_SESSION_KEY, + normalizedValue, + ); + } + }, [queryPreviewValue]); + + const isPlacementForced = useCallback( + (placement: NotificationCtaPreviewPlacementValue) => { + return forcedPlacement === placement; + }, + [forcedPlacement], + ); + + const shouldHidePlacement = useCallback( + (placement: NotificationCtaPreviewPlacementValue) => { + return !!forcedPlacement && forcedPlacement !== placement; + }, + [forcedPlacement], + ); + + return { + isEnabled: Boolean(isFeatureEnabled) || isPreviewActive, + isFeatureEnabled: Boolean(isFeatureEnabled), + isPreviewActive, + forcedPlacement, + isPlacementForced, + shouldHidePlacement, }; +}; diff --git a/packages/webapp/pages/tags/[tag].tsx b/packages/webapp/pages/tags/[tag].tsx index 2ea3a0134a7..41062dc653e 100644 --- a/packages/webapp/pages/tags/[tag].tsx +++ b/packages/webapp/pages/tags/[tag].tsx @@ -274,11 +274,13 @@ const TagPage = ({ const queryVariables = useMemo(() => ({ tag, ranking: 'TIME' }), [tag]); const { feedSettings } = useFeedSettings(); const { FeedPageLayoutComponent } = useFeedLayout(); + const [newlyFollowedTag, setNewlyFollowedTag] = useState(null); const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); + useNotificationCtaExperiment({ + shouldEvaluate: !!newlyFollowedTag, + }); const { onFollowTags, onUnfollowTags, onBlockTags, onUnblockTags } = useTagAndSource({ origin: Origin.TagPage }); - const [newlyFollowedTag, setNewlyFollowedTag] = useState(null); const title = initialData?.flags?.title || tag; const jsonLd = initialData ? getTagPageJsonLd({ tag, initialData, topPosts }) @@ -321,9 +323,7 @@ const TagPage = ({ return; } - if (isNotificationCtaExperimentEnabled) { - setNewlyFollowedTag(tag); - } + setNewlyFollowedTag(tag); } } else { showLogin({ trigger: AuthTriggers.Filter }); From 93004fa7b3a26f77932148df5aeea427403c3fb8 Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Wed, 18 Mar 2026 14:16:40 +0200 Subject: [PATCH 21/34] refactor: simplify notification CTA rollout wiring --- packages/shared/src/components/Feed.tsx | 63 +++++-------------- .../shared/src/components/MainFeedLayout.tsx | 10 +-- .../cards/entity/SourceEntityCard.tsx | 28 +++++---- .../cards/entity/SquadEntityCard.tsx | 28 +++++---- .../cards/entity/UserEntityCard.tsx | 26 ++++---- .../src/components/comments/MainComment.tsx | 8 +-- .../src/components/post/PostActions.tsx | 4 +- .../src/components/post/tags/PostTagList.tsx | 6 +- .../sidebar/SidebarNotificationPrompt.tsx | 44 +++++-------- .../useNotificationCtaAnalytics.ts | 16 ++++- packages/webapp/pages/tags/[tag].tsx | 6 +- 11 files changed, 109 insertions(+), 130 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index bc239eea7ab..8cf57d5e371 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -31,12 +31,9 @@ import { usePostModalNavigation } from '../hooks/usePostModalNavigation'; import { useSharePost } from '../hooks/useSharePost'; import { LogEvent, - NotificationCtaKind, NotificationCtaPlacement, - NotificationPromptSource, Origin, TargetId, - TargetType, } from '../lib/log'; import { SharedFeedPage } from './utilities'; import type { FeedContainerProps } from './feeds/FeedContainer'; @@ -83,6 +80,7 @@ import { useNotificationCtaExperiment, } from '../hooks/notifications/useNotificationCtaExperiment'; import { + getReadingReminderCtaParams, useNotificationCtaAnalytics, useNotificationCtaImpression, } from '../hooks/notifications/useNotificationCtaAnalytics'; @@ -285,12 +283,15 @@ export default function Feed({ onEnable, onDismiss, } = useReadingReminderHero(); + const isHomePage = pathname === webappUrl; + const shouldEvaluateReminderExperiment = + isHomePage && shouldShowReadingReminder; const { isEnabled: isNotificationCtaExperimentEnabled, isPlacementForced, shouldHidePlacement, } = useNotificationCtaExperiment({ - shouldEvaluate: pathname === webappUrl && shouldShowReadingReminder, + shouldEvaluate: shouldEvaluateReminderExperiment, }); const isTopHeroForced = isPlacementForced( NotificationCtaPreviewPlacement.TopHero, @@ -555,80 +556,50 @@ export default function Feed({ openSharePost({ post, columns: virtualizedNumCards, column, row }), [openSharePost, virtualizedNumCards], ); + const canShowReminderPlacements = + isNotificationCtaExperimentEnabled && shouldEvaluateReminderExperiment; const onEnableInFeedHero = useCallback(async () => { - logClick({ - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.InFeedHero, - }); + logClick(getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero)); await onEnable(); setIsHeroDismissed(true); }, [logClick, onEnable]); const onEnableTopHero = useCallback(async () => { - logClick({ - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.TopHero, - }); + logClick(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); await onEnable(); setIsTopHeroDismissed(true); }, [logClick, onEnable]); const onDismissInFeedHero = useCallback(async () => { setIsHeroDismissed(true); - logDismiss({ - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.InFeedHero, - }); + logDismiss( + getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero), + ); await onDismiss(); }, [logDismiss, onDismiss]); const onDismissTopHero = useCallback(async () => { setIsTopHeroDismissed(true); - logDismiss({ - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.TopHero, - }); + logDismiss(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); await onDismiss(); }, [logDismiss, onDismiss]); const shouldShowInFeedHero = - isNotificationCtaExperimentEnabled && - pathname === webappUrl && - shouldShowReadingReminder && + canShowReminderPlacements && !shouldHideInFeedHero && (isInFeedHeroForced || hasScrolledForHero) && !isHeroDismissed && items.length > HERO_INSERT_INDEX; const shouldShowTopHero = - isNotificationCtaExperimentEnabled && - pathname === webappUrl && - shouldShowReadingReminder && + canShowReminderPlacements && isTopHeroForced && !shouldHideTopHero && !isTopHeroDismissed; useNotificationCtaImpression( - { - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.TopHero, - }, + getReadingReminderCtaParams(NotificationCtaPlacement.TopHero), shouldShowTopHero, ); useNotificationCtaImpression( - { - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.InFeedHero, - }, + getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero), shouldShowInFeedHero, ); diff --git a/packages/shared/src/components/MainFeedLayout.tsx b/packages/shared/src/components/MainFeedLayout.tsx index a39475de0c4..0970dc1ae67 100644 --- a/packages/shared/src/components/MainFeedLayout.tsx +++ b/packages/shared/src/components/MainFeedLayout.tsx @@ -226,10 +226,12 @@ export default function MainFeedLayout({ onEnable, onDismiss, } = useReadingReminderHero(); + const isHomePage = router.pathname === webappUrl; + const shouldEvaluateReminderExperiment = + isHomePage && shouldShowReadingReminder; const { isEnabled: isNotificationCtaExperimentEnabled } = useNotificationCtaExperiment({ - shouldEvaluate: - router.pathname === webappUrl && shouldShowReadingReminder, + shouldEvaluate: shouldEvaluateReminderExperiment, }); const { isUpvoted, @@ -537,9 +539,7 @@ export default function MainFeedLayout({ const disableTopPadding = isFinder || shouldUseListFeedLayout; const shouldShowReadingReminderOnHomepage = - !isNotificationCtaExperimentEnabled && - router.pathname === webappUrl && - shouldShowReadingReminder; + !isNotificationCtaExperimentEnabled && shouldEvaluateReminderExperiment; const onTabChange = useCallback( (clickedTab: ExploreTabs) => { diff --git a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx index a16c487a080..92595169011 100644 --- a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx @@ -68,6 +68,10 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { const wasFollowing = prevStatusRef.current === ContentPreferenceStatus.Follow || prevStatusRef.current === ContentPreferenceStatus.Subscribed; + const shouldRenderNotificationCta = + isNotificationCtaExperimentEnabled && + showNotificationCta && + !haveNotificationsOn; useEffect(() => { if (currentStatus === prevStatusRef.current) { @@ -152,19 +156,17 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { {largeNumberFormat(flags?.totalUpvotes) || 0} Upvotes
- {isNotificationCtaExperimentEnabled && - showNotificationCta && - !haveNotificationsOn && ( - - )} + {shouldRenderNotificationCta && ( + + )}
); diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx index a410ea6f2a7..4dfbb9d9871 100644 --- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx @@ -64,6 +64,10 @@ const SquadEntityCard = ({ }); const isSquadMember = !!squad?.currentMember; + const shouldRenderNotificationCta = + isNotificationCtaExperimentEnabled && + showNotificationCta && + !haveNotificationsOn; useEffect(() => { if ( @@ -176,19 +180,17 @@ const SquadEntityCard = ({ {largeNumberFormat(flags?.totalUpvotes)} Upvotes
- {isNotificationCtaExperimentEnabled && - showNotificationCta && - !haveNotificationsOn && ( - - )} + {shouldRenderNotificationCta && ( + + )}
); diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx index 04a3026bf64..6f7d361432c 100644 --- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx @@ -99,6 +99,10 @@ const UserEntityCard = ({ currentStatus === ContentPreferenceStatus.Subscribed; const haveNotificationsOn = currentStatus === ContentPreferenceStatus.Subscribed; + const shouldRenderNotificationCta = + isNotificationCtaExperimentEnabled && + showNotificationCta && + !haveNotificationsOn; useEffect(() => { const previousStatus = prevStatusRef.current; @@ -283,18 +287,16 @@ const UserEntityCard = ({ />
{bio && } - {isNotificationCtaExperimentEnabled && - showNotificationCta && - !haveNotificationsOn && ( - - )} + {shouldRenderNotificationCta && ( + + )}
); diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index 92c820f2d6d..808642a7b0b 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -83,16 +83,16 @@ export default function MainComment({ () => shouldShowBannerOnComment(permissionNotificationCommentId, comment), [permissionNotificationCommentId, comment], ); - const shouldEvaluateNotificationCta = - showNotificationPermissionBanner || + const hasUpvoteNotificationCtaCandidate = upvoteNotificationCommentId === comment.id; + const shouldEvaluateNotificationCta = + showNotificationPermissionBanner || hasUpvoteNotificationCtaCandidate; const { isEnabled: isNotificationCtaExperimentEnabled } = useNotificationCtaExperiment({ shouldEvaluate: shouldEvaluateNotificationCta, }); const showUpvoteNotificationPermissionBanner = - isNotificationCtaExperimentEnabled && - upvoteNotificationCommentId === comment.id; + isNotificationCtaExperimentEnabled && hasUpvoteNotificationCtaCandidate; const [isJoinSquadBannerDismissed] = usePersistentContext( SQUAD_COMMENT_JOIN_BANNER_KEY, diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx index d0456b0ecb0..f338a3f38a4 100644 --- a/packages/shared/src/components/post/PostActions.tsx +++ b/packages/shared/src/components/post/PostActions.tsx @@ -75,6 +75,8 @@ export function PostActions({ id: creator?.id, entity: ContentPreferenceType.User, }); + const shouldRenderNotificationCta = + isNotificationCtaExperimentEnabled && showNotificationCta; const { toggleUpvote, toggleDownvote } = useVotePost(); const isUpvoteActive = post?.userState?.vote === UserVote.Up; @@ -350,7 +352,7 @@ export function PostActions({
- {isNotificationCtaExperimentEnabled && showNotificationCta && ( + {shouldRenderNotificationCta && ( { shouldEvaluate: !!newlyFollowedTag, }); const { onFollowTag, tags } = useFollowPostTags({ post }); + const shouldShowTagFollowCta = + isNotificationCtaExperimentEnabled && !!newlyFollowedTag; useEffect(() => { setNewlyFollowedTag(null); @@ -147,10 +149,10 @@ export const PostTagList = ({ post }: PostTagListProps): ReactElement => { /> ))} - {isNotificationCtaExperimentEnabled && newlyFollowedTag && ( + {shouldShowTagFollowCta && ( diff --git a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx index 5f0813c3267..6d32619c1e0 100644 --- a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx +++ b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx @@ -5,18 +5,14 @@ import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; import CloseButton from '../CloseButton'; import ReadingReminderCatLaptop from '../banners/ReadingReminderCatLaptop'; import { useReadingReminderHero } from '../../hooks/notifications/useReadingReminderHero'; -import { - NotificationCtaKind, - NotificationCtaPlacement, - NotificationPromptSource, - TargetType, -} from '../../lib/log'; +import { NotificationCtaPlacement } from '../../lib/log'; import { webappUrl } from '../../lib/constants'; import { NotificationCtaPreviewPlacement, useNotificationCtaExperiment, } from '../../hooks/notifications/useNotificationCtaExperiment'; import { + getReadingReminderCtaParams, useNotificationCtaAnalytics, useNotificationCtaImpression, } from '../../hooks/notifications/useNotificationCtaAnalytics'; @@ -39,9 +35,12 @@ export const SidebarNotificationPrompt = ({ } = useReadingReminderHero({ requireMobile: false, }); + const isHomePage = pathname === webappUrl; + const shouldEvaluateReminderExperiment = + isHomePage && sidebarExpanded && shouldShow; const { isEnabled: isNotificationCtaExperimentEnabled, shouldHidePlacement } = useNotificationCtaExperiment({ - shouldEvaluate: pathname === webappUrl && sidebarExpanded && shouldShow, + shouldEvaluate: shouldEvaluateReminderExperiment, }); const { logClick, logDismiss } = useNotificationCtaAnalytics(); @@ -51,38 +50,25 @@ export const SidebarNotificationPrompt = ({ const shouldShowSidebarPrompt = isNotificationCtaExperimentEnabled && - pathname === webappUrl && - sidebarExpanded && - !shouldHideSideMenuPrompt && - shouldShow; + shouldEvaluateReminderExperiment && + !shouldHideSideMenuPrompt; useNotificationCtaImpression( - { - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.SidebarPrompt, - }, + getReadingReminderCtaParams(NotificationCtaPlacement.SidebarPrompt), shouldShowSidebarPrompt, ); const onEnableClick = useCallback(async () => { - logClick({ - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.SidebarPrompt, - }); + logClick( + getReadingReminderCtaParams(NotificationCtaPlacement.SidebarPrompt), + ); await onEnable(); }, [logClick, onEnable]); const onDismissClick = useCallback(async () => { - logDismiss({ - kind: NotificationCtaKind.ReadingReminder, - targetType: TargetType.ReadingReminder, - source: NotificationPromptSource.ReadingReminder, - placement: NotificationCtaPlacement.SidebarPrompt, - }); + logDismiss( + getReadingReminderCtaParams(NotificationCtaPlacement.SidebarPrompt), + ); await onDismiss(); }, [logDismiss, onDismiss]); diff --git a/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts b/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts index 70d22531fe4..f6d6752ccf3 100644 --- a/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts +++ b/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts @@ -1,11 +1,12 @@ import { useCallback } from 'react'; import { useLogContext } from '../../contexts/LogContext'; -import { LogEvent } from '../../lib/log'; -import type { +import { + LogEvent, NotificationCtaKind, - NotificationCtaPlacement, NotificationPromptSource, + TargetType, } from '../../lib/log'; +import type { NotificationCtaPlacement } from '../../lib/log'; import useLogEventOnce from '../log/useLogEventOnce'; type NotificationCtaTargetType = string; @@ -54,6 +55,15 @@ export const useNotificationCtaImpression = ( ); }; +export const getReadingReminderCtaParams = ( + placement: NotificationCtaPlacement, +): NotificationCtaAnalyticsParams => ({ + kind: NotificationCtaKind.ReadingReminder, + targetType: TargetType.ReadingReminder, + source: NotificationPromptSource.ReadingReminder, + placement, +}); + export const useNotificationCtaAnalytics = () => { const { logEvent } = useLogContext(); diff --git a/packages/webapp/pages/tags/[tag].tsx b/packages/webapp/pages/tags/[tag].tsx index 41062dc653e..25d187ff5e4 100644 --- a/packages/webapp/pages/tags/[tag].tsx +++ b/packages/webapp/pages/tags/[tag].tsx @@ -281,6 +281,8 @@ const TagPage = ({ }); const { onFollowTags, onUnfollowTags, onBlockTags, onUnblockTags } = useTagAndSource({ origin: Origin.TagPage }); + const shouldShowTagFollowCta = + isNotificationCtaExperimentEnabled && !!newlyFollowedTag; const title = initialData?.flags?.title || tag; const jsonLd = initialData ? getTagPageJsonLd({ tag, initialData, topPosts }) @@ -415,10 +417,10 @@ const TagPage = ({ }} />
- {isNotificationCtaExperimentEnabled && newlyFollowedTag && ( + {shouldShowTagFollowCta && ( From 4faa1a19a3b7bb07d8fad83f2ee18d0d6be4874e Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Wed, 18 Mar 2026 14:46:59 +0200 Subject: [PATCH 22/34] refactor: extract feed reminder rollout hook --- packages/shared/src/components/Feed.tsx | 152 ++-------------- .../useReadingReminderFeedHero.ts | 166 ++++++++++++++++++ 2 files changed, 182 insertions(+), 136 deletions(-) create mode 100644 packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index 8cf57d5e371..ff303c25d24 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -29,12 +29,7 @@ import { useLogContext } from '../contexts/LogContext'; import { feedLogExtra, postLogEvent } from '../lib/feed'; import { usePostModalNavigation } from '../hooks/usePostModalNavigation'; import { useSharePost } from '../hooks/useSharePost'; -import { - LogEvent, - NotificationCtaPlacement, - Origin, - TargetId, -} from '../lib/log'; +import { LogEvent, Origin, TargetId } from '../lib/log'; import { SharedFeedPage } from './utilities'; import type { FeedContainerProps } from './feeds/FeedContainer'; import { FeedContainer } from './feeds/FeedContainer'; @@ -57,7 +52,6 @@ import { useSearchResultsLayout } from '../hooks/search/useSearchResultsLayout'; import { SearchResultsLayout } from './search/SearchResults/SearchResultsLayout'; import { acquisitionKey } from './cards/AcquisitionForm/common/common'; import type { PostClick } from '../lib/click'; -import { webappUrl } from '../lib/constants'; import { useFeedContentPreferenceMutationSubscription } from './feeds/useFeedContentPreferenceMutationSubscription'; import { useFeedBookmarkPost } from '../hooks/bookmark/useFeedBookmarkPost'; @@ -73,17 +67,8 @@ import { getProductsQueryOptions } from '../graphql/njord'; import { useUpdateQuery } from '../hooks/useUpdateQuery'; import { BriefBannerFeed } from './cards/brief/BriefBanner/BriefBannerFeed'; import { ActionType } from '../graphql/actions'; -import { useReadingReminderHero } from '../hooks/notifications/useReadingReminderHero'; import { TopHero } from './banners/HeroBottomBanner'; -import { - NotificationCtaPreviewPlacement, - useNotificationCtaExperiment, -} from '../hooks/notifications/useNotificationCtaExperiment'; -import { - getReadingReminderCtaParams, - useNotificationCtaAnalytics, - useNotificationCtaImpression, -} from '../hooks/notifications/useNotificationCtaAnalytics'; +import { useReadingReminderFeedHero } from '../hooks/notifications/useReadingReminderFeedHero'; const FeedErrorScreen = dynamic( () => import(/* webpackChunkName: "feedErrorScreen" */ './FeedErrorScreen'), @@ -210,13 +195,11 @@ export default function Feed({ disableListFrame = false, disableListWidthConstraint = false, }: FeedProps): ReactElement { - const HERO_INSERT_INDEX = 6; - const HERO_SCROLL_THRESHOLD_PX = 300; const origin = Origin.Feed; const { logEvent } = useLogContext(); const currentSettings = useContext(FeedContext); const { user } = useContext(AuthContext); - const { isFallback, pathname, query: routerQuery } = useRouter(); + const { isFallback, query: routerQuery } = useRouter(); const { openNewTab, spaciness, loadedSettings } = useContext(SettingsContext); const { value: isFeedLayoutV2 } = useConditionalFeature({ feature: featureFeedLayoutV2, @@ -275,41 +258,6 @@ export default function Feed({ feature: briefFeedEntrypointPage, shouldEvaluate: !user?.isPlus && isMyFeed, }); - const { - shouldShow: shouldShowReadingReminder, - title: readingReminderTitle, - subtitle: readingReminderSubtitle, - shouldShowDismiss: shouldShowReadingReminderDismiss, - onEnable, - onDismiss, - } = useReadingReminderHero(); - const isHomePage = pathname === webappUrl; - const shouldEvaluateReminderExperiment = - isHomePage && shouldShowReadingReminder; - const { - isEnabled: isNotificationCtaExperimentEnabled, - isPlacementForced, - shouldHidePlacement, - } = useNotificationCtaExperiment({ - shouldEvaluate: shouldEvaluateReminderExperiment, - }); - const isTopHeroForced = isPlacementForced( - NotificationCtaPreviewPlacement.TopHero, - ); - const isInFeedHeroForced = isPlacementForced( - NotificationCtaPreviewPlacement.InFeedHero, - ); - const shouldHideTopHero = shouldHidePlacement( - NotificationCtaPreviewPlacement.TopHero, - ); - const shouldHideInFeedHero = shouldHidePlacement( - NotificationCtaPreviewPlacement.InFeedHero, - ); - const { logClick, logDismiss } = useNotificationCtaAnalytics(); - const [hasScrolledForHero, setHasScrolledForHero] = - useState(isInFeedHeroForced); - const [isHeroDismissed, setIsHeroDismissed] = useState(false); - const [isTopHeroDismissed, setIsTopHeroDismissed] = useState(false); const { items, updatePost, @@ -367,6 +315,18 @@ export default function Feed({ canFetchMore, feedName, }); + const { + heroInsertIndex, + shouldShowTopHero, + shouldShowInFeedHero, + title: readingReminderTitle, + subtitle: readingReminderSubtitle, + shouldShowDismiss: shouldShowReadingReminderDismiss, + onEnableTopHero, + onDismissTopHero, + onEnableInFeedHero, + onDismissInFeedHero, + } = useReadingReminderFeedHero({ itemCount: items.length }); useMutationSubscription({ matcher: ({ mutation }) => { @@ -511,40 +471,6 @@ export default function Feed({ }; }, []); - useEffect(() => { - if ( - !shouldShowReadingReminder || - isInFeedHeroForced || - hasScrolledForHero - ) { - return undefined; - } - - const onScroll = () => { - if (window.scrollY >= HERO_SCROLL_THRESHOLD_PX) { - setHasScrolledForHero(true); - } - }; - - window.addEventListener('scroll', onScroll, { passive: true }); - return () => window.removeEventListener('scroll', onScroll); - }, [hasScrolledForHero, isInFeedHeroForced, shouldShowReadingReminder]); - - useEffect(() => { - if (!isInFeedHeroForced) { - return; - } - - setHasScrolledForHero(true); - }, [isInFeedHeroForced]); - - useEffect(() => { - if (!shouldShowReadingReminder) { - setIsHeroDismissed(false); - setIsTopHeroDismissed(false); - } - }, [shouldShowReadingReminder]); - useEffect(() => { if (!selectedPost) { document.body.classList.remove('hidden-scrollbar'); @@ -556,52 +482,6 @@ export default function Feed({ openSharePost({ post, columns: virtualizedNumCards, column, row }), [openSharePost, virtualizedNumCards], ); - const canShowReminderPlacements = - isNotificationCtaExperimentEnabled && shouldEvaluateReminderExperiment; - const onEnableInFeedHero = useCallback(async () => { - logClick(getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero)); - await onEnable(); - setIsHeroDismissed(true); - }, [logClick, onEnable]); - const onEnableTopHero = useCallback(async () => { - logClick(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); - await onEnable(); - setIsTopHeroDismissed(true); - }, [logClick, onEnable]); - const onDismissInFeedHero = useCallback(async () => { - setIsHeroDismissed(true); - logDismiss( - getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero), - ); - await onDismiss(); - }, [logDismiss, onDismiss]); - const onDismissTopHero = useCallback(async () => { - setIsTopHeroDismissed(true); - logDismiss(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); - await onDismiss(); - }, [logDismiss, onDismiss]); - - const shouldShowInFeedHero = - canShowReminderPlacements && - !shouldHideInFeedHero && - (isInFeedHeroForced || hasScrolledForHero) && - !isHeroDismissed && - items.length > HERO_INSERT_INDEX; - const shouldShowTopHero = - canShowReminderPlacements && - isTopHeroForced && - !shouldHideTopHero && - !isTopHeroDismissed; - - useNotificationCtaImpression( - getReadingReminderCtaParams(NotificationCtaPlacement.TopHero), - shouldShowTopHero, - ); - - useNotificationCtaImpression( - getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero), - shouldShowInFeedHero, - ); if (!loadedSettings || isFallback) { return <>; @@ -769,7 +649,7 @@ export default function Feed({ }} /> )} - {shouldShowInFeedHero && index === HERO_INSERT_INDEX && ( + {shouldShowInFeedHero && index === heroInsertIndex && (
Promise; + onDismissTopHero: () => Promise; + onEnableInFeedHero: () => Promise; + onDismissInFeedHero: () => Promise; +} + +export const useReadingReminderFeedHero = ({ + itemCount, +}: UseReadingReminderFeedHeroProps): UseReadingReminderFeedHero => { + const { pathname } = useRouter(); + const { + shouldShow, + title, + subtitle, + shouldShowDismiss, + onEnable, + onDismiss, + } = useReadingReminderHero(); + const isHomePage = pathname === webappUrl; + const shouldEvaluateReminderExperiment = isHomePage && shouldShow; + const { + isEnabled: isNotificationCtaExperimentEnabled, + isPlacementForced, + shouldHidePlacement, + } = useNotificationCtaExperiment({ + shouldEvaluate: shouldEvaluateReminderExperiment, + }); + const isTopHeroForced = isPlacementForced( + NotificationCtaPreviewPlacement.TopHero, + ); + const isInFeedHeroForced = isPlacementForced( + NotificationCtaPreviewPlacement.InFeedHero, + ); + const shouldHideTopHero = shouldHidePlacement( + NotificationCtaPreviewPlacement.TopHero, + ); + const shouldHideInFeedHero = shouldHidePlacement( + NotificationCtaPreviewPlacement.InFeedHero, + ); + const { logClick, logDismiss } = useNotificationCtaAnalytics(); + const [hasScrolledForHero, setHasScrolledForHero] = + useState(isInFeedHeroForced); + const [isInFeedHeroDismissed, setIsInFeedHeroDismissed] = useState(false); + const [isTopHeroDismissed, setIsTopHeroDismissed] = useState(false); + + useEffect(() => { + if (!shouldShow || isInFeedHeroForced || hasScrolledForHero) { + return undefined; + } + + const onScroll = () => { + if (window.scrollY >= HERO_SCROLL_THRESHOLD_PX) { + setHasScrolledForHero(true); + } + }; + + window.addEventListener('scroll', onScroll, { passive: true }); + return () => window.removeEventListener('scroll', onScroll); + }, [hasScrolledForHero, isInFeedHeroForced, shouldShow]); + + useEffect(() => { + if (!isInFeedHeroForced) { + return; + } + + setHasScrolledForHero(true); + }, [isInFeedHeroForced]); + + useEffect(() => { + if (!shouldShow) { + setIsInFeedHeroDismissed(false); + setIsTopHeroDismissed(false); + } + }, [shouldShow]); + + const canShowReminderPlacements = + isNotificationCtaExperimentEnabled && shouldEvaluateReminderExperiment; + const shouldShowTopHero = + canShowReminderPlacements && + isTopHeroForced && + !shouldHideTopHero && + !isTopHeroDismissed; + const shouldShowInFeedHero = + canShowReminderPlacements && + !shouldHideInFeedHero && + (isInFeedHeroForced || hasScrolledForHero) && + !isInFeedHeroDismissed && + itemCount > HERO_INSERT_INDEX; + + useNotificationCtaImpression( + getReadingReminderCtaParams(NotificationCtaPlacement.TopHero), + shouldShowTopHero, + ); + useNotificationCtaImpression( + getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero), + shouldShowInFeedHero, + ); + + const onEnableTopHero = useCallback(async () => { + logClick(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); + await onEnable(); + setIsTopHeroDismissed(true); + }, [logClick, onEnable]); + + const onDismissTopHero = useCallback(async () => { + setIsTopHeroDismissed(true); + logDismiss(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); + await onDismiss(); + }, [logDismiss, onDismiss]); + + const onEnableInFeedHero = useCallback(async () => { + logClick(getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero)); + await onEnable(); + setIsInFeedHeroDismissed(true); + }, [logClick, onEnable]); + + const onDismissInFeedHero = useCallback(async () => { + setIsInFeedHeroDismissed(true); + logDismiss( + getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero), + ); + await onDismiss(); + }, [logDismiss, onDismiss]); + + return { + heroInsertIndex: HERO_INSERT_INDEX, + shouldShowTopHero, + shouldShowInFeedHero, + title, + subtitle, + shouldShowDismiss, + onEnableTopHero, + onDismissTopHero, + onEnableInFeedHero, + onDismissInFeedHero, + }; +}; From b0e17d773b42e1281479ea679d8d3e61f4c98f4a Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Wed, 18 Mar 2026 16:00:57 +0200 Subject: [PATCH 23/34] Subscribe sources from notification CTA --- .../components/cards/entity/SourceEntityCard.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx index 92595169011..288850c313a 100644 --- a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx @@ -27,6 +27,7 @@ import { import useShowFollowAction from '../../../hooks/useShowFollowAction'; import { FollowButton } from '../../contentPreference/FollowButton'; import { useContentPreferenceStatusQuery } from '../../../hooks/contentPreference/useContentPreferenceStatusQuery'; +import { useContentPreference } from '../../../hooks/contentPreference/useContentPreference'; import { useSourceActionsNotify } from '../../../hooks/source/useSourceActionsNotify'; import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment'; @@ -52,6 +53,7 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { useNotificationCtaExperiment({ shouldEvaluate: showNotificationCta, }); + const { subscribe } = useContentPreference(); const prevStatusRef = useRef(contentPreference?.status); const menuProps = useSourceMenuProps({ source }); const { haveNotificationsOn, onNotify } = useSourceActionsNotify({ @@ -91,6 +93,18 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { }, [currentStatus, isNowFollowing, wasFollowing]); const handleTurnOn = async () => { + if (!source?.id) { + throw new Error('Cannot subscribe to notifications without source id'); + } + + if (currentStatus !== ContentPreferenceStatus.Subscribed) { + await subscribe({ + id: source.id, + entity: ContentPreferenceType.Source, + entityName: source.name ?? source.id, + }); + } + await onNotify(); setShowNotificationCta(false); }; From 67610dc154f2533c239060f798bdaa906f27492c Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Wed, 18 Mar 2026 17:48:46 +0200 Subject: [PATCH 24/34] fix: stabilize reading reminder hero layout across feed breakpoints Align in-feed hero insertion to row boundaries and update top hero composition so the CTA stays with copy on mobile while the cat artwork scales up on larger screens. Made-with: Cursor --- packages/shared/src/components/Feed.tsx | 5 +++- .../components/banners/HeroBottomBanner.tsx | 24 +++++++++---------- .../useReadingReminderFeedHero.ts | 9 +++++-- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index ff303c25d24..ab325212f82 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -326,7 +326,10 @@ export default function Feed({ onDismissTopHero, onEnableInFeedHero, onDismissInFeedHero, - } = useReadingReminderFeedHero({ itemCount: items.length }); + } = useReadingReminderFeedHero({ + itemCount: items.length, + itemsPerRow: virtualizedNumCards, + }); useMutationSubscription({ matcher: ({ mutation }) => { diff --git a/packages/shared/src/components/banners/HeroBottomBanner.tsx b/packages/shared/src/components/banners/HeroBottomBanner.tsx index 1e049dd1897..7741460a1ed 100644 --- a/packages/shared/src/components/banners/HeroBottomBanner.tsx +++ b/packages/shared/src/components/banners/HeroBottomBanner.tsx @@ -98,22 +98,22 @@ export const TopHero = ({ /> )}
-
-
+
+

{title}

{subtitle}

+
-
-
- +
+
diff --git a/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts b/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts index ab204954878..37ba22ed157 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts +++ b/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts @@ -18,6 +18,7 @@ const HERO_SCROLL_THRESHOLD_PX = 300; interface UseReadingReminderFeedHeroProps { itemCount: number; + itemsPerRow: number; } interface UseReadingReminderFeedHero { @@ -35,7 +36,11 @@ interface UseReadingReminderFeedHero { export const useReadingReminderFeedHero = ({ itemCount, + itemsPerRow, }: UseReadingReminderFeedHeroProps): UseReadingReminderFeedHero => { + const safeItemsPerRow = Math.max(1, itemsPerRow); + const heroInsertIndex = + Math.ceil(HERO_INSERT_INDEX / safeItemsPerRow) * safeItemsPerRow; const { pathname } = useRouter(); const { shouldShow, @@ -114,7 +119,7 @@ export const useReadingReminderFeedHero = ({ !shouldHideInFeedHero && (isInFeedHeroForced || hasScrolledForHero) && !isInFeedHeroDismissed && - itemCount > HERO_INSERT_INDEX; + itemCount > heroInsertIndex; useNotificationCtaImpression( getReadingReminderCtaParams(NotificationCtaPlacement.TopHero), @@ -152,7 +157,7 @@ export const useReadingReminderFeedHero = ({ }, [logDismiss, onDismiss]); return { - heroInsertIndex: HERO_INSERT_INDEX, + heroInsertIndex, shouldShowTopHero, shouldShowInFeedHero, title, From 42d92d1c5a68d8375d9313311d86f117fc5a5bac Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Wed, 18 Mar 2026 17:56:25 +0200 Subject: [PATCH 25/34] revert: remove tag follow notification CTA surfaces Restore tag page and post tag follow flows to their main-branch behavior by removing the follow-triggered notification CTA integration. Made-with: Cursor --- .../src/components/post/tags/PostTagList.tsx | 80 ++++--------------- .../src/hooks/feed/useFollowPostTags.ts | 3 +- packages/webapp/pages/tags/[tag].tsx | 35 +------- 3 files changed, 20 insertions(+), 98 deletions(-) diff --git a/packages/shared/src/components/post/tags/PostTagList.tsx b/packages/shared/src/components/post/tags/PostTagList.tsx index dc8dd513aeb..aae5b4c84c4 100644 --- a/packages/shared/src/components/post/tags/PostTagList.tsx +++ b/packages/shared/src/components/post/tags/PostTagList.tsx @@ -1,12 +1,7 @@ -import type { MouseEvent, PropsWithChildren, ReactElement } from 'react'; -import React, { useEffect, useState } from 'react'; +import type { PropsWithChildren, ReactElement } from 'react'; +import React from 'react'; import classNames from 'classnames'; import type { Post } from '../../../graphql/posts'; -import type { BooleanPromise } from '../../../lib/func'; -import { - NotificationCtaPlacement, - NotificationPromptSource, -} from '../../../lib/log'; import { useFollowPostTags } from '../../../hooks/feed/useFollowPostTags'; import type { TypographyProps } from '../../typography/Typography'; import { @@ -21,8 +16,6 @@ import { Button, ButtonSize } from '../../buttons/Button'; import { PlusIcon } from '../../icons'; import { IconSize } from '../../Icon'; import { Tooltip } from '../../tooltip/Tooltip'; -import EnableNotification from '../../notifications/EnableNotification'; -import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNotificationCtaExperiment'; interface PostTagListProps { post: Post; @@ -30,7 +23,7 @@ interface PostTagListProps { interface PostTagItemProps { isFollowed?: boolean; - onFollow?: (tag: string) => BooleanPromise; + onFollow?: (tag: string) => void; tag: string; } @@ -58,12 +51,6 @@ const PostTagItem = ({ onFollow, tag, }: PostTagItemProps): ReactElement => { - const handleFollowClick = (event: MouseEvent): void => { - event.preventDefault(); - event.stopPropagation(); - onFollow?.(tag); - }; - if (isFollowed) { return ( @@ -94,9 +81,8 @@ const PostTagItem = ({
- {shouldShowTagFollowCta && ( - - )} {initialData?.flags?.description && (

{initialData?.flags?.description}

)} From 7cef7a63690967b961db5b6c8668cb1797af68e3 Mon Sep 17 00:00:00 2001 From: tomeredlich Date: Wed, 18 Mar 2026 18:20:52 +0200 Subject: [PATCH 26/34] fix: remove upvote notification CTAs and restore squad toast prompt Revert all upvote-triggered notification CTA behavior across comments and entity cards, and keep the squad-page prompt in toast form with the requested button styling and force flag behavior. Made-with: Cursor --- .../cards/entity/SquadEntityCard.tsx | 18 -- .../cards/entity/UserEntityCard.tsx | 23 -- .../comments/CommentActionButtons.tsx | 30 +-- .../src/components/comments/CommentBox.tsx | 2 - .../src/components/comments/MainComment.tsx | 64 +---- .../src/components/comments/SubComment.tsx | 58 ----- .../notifications/EnableNotification.tsx | 6 +- .../src/components/post/PostComments.tsx | 6 - .../src/components/post/PostEngagements.tsx | 8 - .../src/components/post/PostWidgets.tsx | 5 - .../src/components/post/SquadPostWidgets.tsx | 5 - .../useEnableNotification.spec.tsx | 231 ------------------ .../notifications/useEnableNotification.ts | 25 +- .../webapp/lib/squadNotificationToastState.ts | 128 ++++++++++ .../webapp/pages/squads/[handle]/index.tsx | 113 +++++++-- 15 files changed, 241 insertions(+), 481 deletions(-) delete mode 100644 packages/shared/src/hooks/notifications/useEnableNotification.spec.tsx create mode 100644 packages/webapp/lib/squadNotificationToastState.ts diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx index 4dfbb9d9871..dfb625d5ed9 100644 --- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx @@ -32,8 +32,6 @@ type SquadEntityCardProps = { handle: string; origin: Origin; showNotificationCtaOnJoin?: boolean; - showNotificationCtaOnUpvote?: boolean; - isSquadPostUpvoted?: boolean; className?: { container?: string; }; @@ -43,8 +41,6 @@ const SquadEntityCard = ({ handle, origin, showNotificationCtaOnJoin = false, - showNotificationCtaOnUpvote = false, - isSquadPostUpvoted = false, className, }: SquadEntityCardProps) => { const { squad } = useSquad({ handle }); @@ -54,7 +50,6 @@ const SquadEntityCard = ({ shouldEvaluate: showNotificationCta, }); const wasSquadMemberRef = useRef(!!squad?.currentMember); - const wasSquadPostUpvotedRef = useRef(isSquadPostUpvoted); const { isLoading } = useShowFollowAction({ entityId: squad?.id, entityType: ContentPreferenceType.Source, @@ -84,19 +79,6 @@ const SquadEntityCard = ({ wasSquadMemberRef.current = isSquadMember; }, [haveNotificationsOn, isSquadMember, showNotificationCtaOnJoin]); - useEffect(() => { - if ( - showNotificationCtaOnUpvote && - isSquadPostUpvoted && - !wasSquadPostUpvotedRef.current && - !haveNotificationsOn - ) { - setShowNotificationCta(true); - } - - wasSquadPostUpvotedRef.current = isSquadPostUpvoted; - }, [haveNotificationsOn, isSquadPostUpvoted, showNotificationCtaOnUpvote]); - const handleEnableNotifications = async () => { await onNotify(); setShowNotificationCta(false); diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx index 6f7d361432c..d6afe28ed06 100644 --- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx @@ -38,8 +38,6 @@ import { useNotificationCtaExperiment } from '../../../hooks/notifications/useNo type Props = { user?: UserShortProfile; showNotificationCtaOnFollow?: boolean; - showNotificationCtaOnUpvote?: boolean; - isAuthorPostUpvoted?: boolean; className?: { container?: string; }; @@ -49,8 +47,6 @@ const UserEntityCard = ({ user, className, showNotificationCtaOnFollow = false, - showNotificationCtaOnUpvote = false, - isAuthorPostUpvoted = false, }: Props) => { const { user: loggedUser } = useContext(AuthContext); const isSameUser = loggedUser?.id === user?.id; @@ -65,7 +61,6 @@ const UserEntityCard = ({ }); const { unblock, block, subscribe } = useContentPreference(); const prevStatusRef = useRef(contentPreference?.status); - const prevAuthorPostUpvotedRef = useRef(isAuthorPostUpvoted); const blocked = contentPreference?.status === ContentPreferenceStatus.Blocked; const { openModal } = useLazyModal(); const { logSubscriptionEvent } = usePlusSubscription(); @@ -124,24 +119,6 @@ const UserEntityCard = ({ prevStatusRef.current = currentStatus; }, [currentStatus, isNowFollowing, showNotificationCtaOnFollow]); - useEffect(() => { - const wasAuthorPostUpvoted = prevAuthorPostUpvotedRef.current; - - if (wasAuthorPostUpvoted === isAuthorPostUpvoted) { - return; - } - - if ( - showNotificationCtaOnUpvote && - isAuthorPostUpvoted && - !wasAuthorPostUpvoted && - !haveNotificationsOn - ) { - setShowNotificationCta(true); - } - - prevAuthorPostUpvotedRef.current = isAuthorPostUpvoted; - }, [haveNotificationsOn, isAuthorPostUpvoted, showNotificationCtaOnUpvote]); const options: MenuItemProps[] = [ { icon: , diff --git a/packages/shared/src/components/comments/CommentActionButtons.tsx b/packages/shared/src/components/comments/CommentActionButtons.tsx index 30096f48ed1..90824582e14 100644 --- a/packages/shared/src/components/comments/CommentActionButtons.tsx +++ b/packages/shared/src/components/comments/CommentActionButtons.tsx @@ -66,7 +66,6 @@ export interface CommentActionProps { onDelete: (comment: Comment, parentId: string | null) => void; onEdit: (comment: Comment, parentComment?: Comment) => void; onShowUpvotes: (commentId: string, upvotes: number) => void; - onUpvote?: (comment: Comment) => void; } export interface Props extends CommentActionProps { @@ -91,7 +90,6 @@ export default function CommentActionButtons({ onDelete, onEdit, onShowUpvotes, - onUpvote, }: Props): ReactElement { const isMobileSmall = useViewSize(ViewSize.MobileXL); const { isLoggedIn, user, showLogin } = useAuthContext(); @@ -332,26 +330,14 @@ export default function CommentActionButtons({ id={`comment-${comment.id}-upvote-btn`} size={ButtonSize.Small} pressed={voteState.userState?.vote === UserVote.Up} - onClick={async () => { - const isRemovingUpvote = voteState.userState?.vote === UserVote.Up; - const shouldShowUpvoteNotification = - !isRemovingUpvote && !!user && !!onUpvote; - - try { - await toggleUpvote({ - payload: { - ...voteState, - post, - }, - origin, - }); - - if (shouldShowUpvoteNotification) { - onUpvote(comment); - } - } catch { - // Ignore upvote callback side effects when mutation fails. - } + onClick={() => { + toggleUpvote({ + payload: { + ...voteState, + post, + }, + origin, + }); }} icon={ diff --git a/packages/shared/src/components/comments/CommentBox.tsx b/packages/shared/src/components/comments/CommentBox.tsx index 60da97e311c..22955b09ceb 100644 --- a/packages/shared/src/components/comments/CommentBox.tsx +++ b/packages/shared/src/components/comments/CommentBox.tsx @@ -29,7 +29,6 @@ function CommentBox({ onDelete, onEdit, onShowUpvotes, - onUpvote, isModalThread = false, threadRepliesControl, children, @@ -66,7 +65,6 @@ function CommentBox({ onDelete={onDelete} onEdit={onEdit} onShowUpvotes={onShowUpvotes} - onUpvote={onUpvote} isModalThread={isModalThread} threadRepliesControl={threadRepliesControl} className={ diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index 808642a7b0b..0b1ac2fa051 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -19,7 +19,6 @@ import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentM import { useComments } from '../../hooks/post'; import { SquadCommentJoinBanner } from '../squads/SquadCommentJoinBanner'; import type { Squad } from '../../graphql/sources'; -import { SourceType } from '../../graphql/sources'; import type { Comment } from '../../graphql/comments'; import { DiscussIcon, ThreadIcon } from '../icons'; import usePersistentContext from '../../hooks/usePersistentContext'; @@ -27,8 +26,6 @@ import { SQUAD_COMMENT_JOIN_BANNER_KEY } from '../../graphql/squads'; import { useEditCommentProps } from '../../hooks/post/useEditCommentProps'; import { useLogContext } from '../../contexts/LogContext'; import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; -import { useNotificationPreference } from '../../hooks/notifications'; -import { NotificationType } from '../notifications/utils'; import { useNotificationCtaExperiment } from '../../hooks/notifications/useNotificationCtaExperiment'; const CommentInputOrModal = dynamic( @@ -47,7 +44,6 @@ export interface MainCommentProps extends Omit { permissionNotificationCommentId?: string; joinNotificationCommentId?: string; - upvoteNotificationCommentId?: string; onCommented: CommentMarkdownInputProps['onCommented']; className?: ClassName; lazy?: boolean; @@ -69,7 +65,6 @@ export default function MainComment({ appendTooltipTo, permissionNotificationCommentId, joinNotificationCommentId, - upvoteNotificationCommentId, onCommented, lazy = false, logImpression, @@ -83,16 +78,10 @@ export default function MainComment({ () => shouldShowBannerOnComment(permissionNotificationCommentId, comment), [permissionNotificationCommentId, comment], ); - const hasUpvoteNotificationCtaCandidate = - upvoteNotificationCommentId === comment.id; - const shouldEvaluateNotificationCta = - showNotificationPermissionBanner || hasUpvoteNotificationCtaCandidate; const { isEnabled: isNotificationCtaExperimentEnabled } = useNotificationCtaExperiment({ - shouldEvaluate: shouldEvaluateNotificationCta, + shouldEvaluate: showNotificationPermissionBanner, }); - const showUpvoteNotificationPermissionBanner = - isNotificationCtaExperimentEnabled && hasUpvoteNotificationCtaCandidate; const [isJoinSquadBannerDismissed] = usePersistentContext( SQUAD_COMMENT_JOIN_BANNER_KEY, @@ -105,22 +94,6 @@ export default function MainComment({ ) && !props.post.source?.currentMember && !isJoinSquadBannerDismissed; - const replyNotificationType = - props.post.source?.type === SourceType.Squad - ? NotificationType.SquadReply - : NotificationType.CommentReply; - const { subscribeNotification } = useNotificationPreference({ params: [] }); - - const onEnableUpvoteNotification = async () => { - if (!upvoteNotificationCommentId) { - return; - } - - await subscribeNotification({ - type: replyNotificationType, - referenceId: upvoteNotificationCommentId, - }); - }; const { commentId, @@ -139,10 +112,6 @@ export default function MainComment({ const [areRepliesExpanded, setAreRepliesExpanded] = useState(true); const showThreadRepliesToggle = isModalThread && replyCount > 0; - const showUpvoteCtaInReplyFlow = - showUpvoteNotificationPermissionBanner && isModalThread && replyCount > 0; - const shouldRenderStandaloneUpvoteCta = - showUpvoteNotificationPermissionBanner && !showUpvoteCtaInReplyFlow; const onClick = () => { if (!logClick && !props.linkToComment) { @@ -267,17 +236,6 @@ export default function MainComment({ post={props.post} /> )} - {shouldRenderStandaloneUpvoteCta && ( - - )} {!showJoinSquadBanner && showNotificationPermissionBanner && ( )} - {showUpvoteCtaInReplyFlow && ( -
-
- -
- )} {inView && replyCount > 0 && !areRepliesExpanded && ( diff --git a/packages/shared/src/components/comments/SubComment.tsx b/packages/shared/src/components/comments/SubComment.tsx index 7b195902571..a50a96d1fd4 100644 --- a/packages/shared/src/components/comments/SubComment.tsx +++ b/packages/shared/src/components/comments/SubComment.tsx @@ -8,16 +8,6 @@ import CommentBox from './CommentBox'; import type { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentMarkdownInput'; import { useComments } from '../../hooks/post'; import { useEditCommentProps } from '../../hooks/post/useEditCommentProps'; -import EnableNotification from '../notifications/EnableNotification'; -import { - NotificationCtaPlacement, - NotificationPromptSource, -} from '../../lib/log'; -import { useAuthContext } from '../../contexts/AuthContext'; -import { SourceType } from '../../graphql/sources'; -import { useNotificationPreference } from '../../hooks/notifications'; -import { NotificationType } from '../notifications/utils'; -import { useNotificationCtaExperiment } from '../../hooks/notifications/useNotificationCtaExperiment'; const CommentInputOrModal = dynamic( () => @@ -29,7 +19,6 @@ const CommentInputOrModal = dynamic( export interface SubCommentProps extends Omit { parentComment: Comment; - upvoteNotificationCommentId?: string; onCommented: CommentMarkdownInputProps['onCommented']; isModalThread?: boolean; isFirst?: boolean; @@ -40,7 +29,6 @@ export interface SubCommentProps function SubComment({ comment, parentComment, - upvoteNotificationCommentId, className, onCommented, isModalThread = false, @@ -49,34 +37,8 @@ function SubComment({ extendTopConnector = false, ...props }: SubCommentProps): ReactElement { - const { user } = useAuthContext(); - const shouldEvaluateNotificationCta = - upvoteNotificationCommentId === comment.id; - const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment({ - shouldEvaluate: shouldEvaluateNotificationCta, - }); const { inputProps, commentId, onReplyTo } = useComments(props.post); const { inputProps: editProps, onEdit } = useEditCommentProps(); - const showUpvoteNotificationPermissionBanner = - isNotificationCtaExperimentEnabled && - upvoteNotificationCommentId === comment.id; - const replyNotificationType = - props.post.source?.type === SourceType.Squad - ? NotificationType.SquadReply - : NotificationType.CommentReply; - const { subscribeNotification } = useNotificationPreference({ params: [] }); - - const onEnableUpvoteNotification = async () => { - if (!upvoteNotificationCommentId) { - return; - } - - await subscribeNotification({ - type: replyNotificationType, - referenceId: upvoteNotificationCommentId, - }); - }; return ( <> @@ -171,26 +133,6 @@ function SubComment({ />
)} - {showUpvoteNotificationPermissionBanner && ( -
- {isModalThread && !isLast && ( - // Keep modal-thread connector continuous when CTA is inserted - // between reply items. -
- )} - -
- )} ); } diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index 40ddea97e46..509ad3a726a 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -376,7 +376,7 @@ function EnableNotification({ className="shrink-0" icon={ shouldAnimateBellCta ? ( - + ) : undefined } onClick={onEnable} @@ -393,7 +393,7 @@ function EnableNotification({ className="w-fit" icon={ shouldAnimateBellCta ? ( - + ) : undefined } onClick={onEnable} @@ -432,7 +432,7 @@ function EnableNotification({ )} icon={ shouldAnimateBellCta ? ( - + ) : undefined } onClick={onEnable} diff --git a/packages/shared/src/components/post/PostComments.tsx b/packages/shared/src/components/post/PostComments.tsx index b59895ce339..09063b79bac 100644 --- a/packages/shared/src/components/post/PostComments.tsx +++ b/packages/shared/src/components/post/PostComments.tsx @@ -38,11 +38,9 @@ interface PostCommentsProps { isComposerOpen?: boolean; permissionNotificationCommentId?: string; joinNotificationCommentId?: string; - upvoteNotificationCommentId?: string; modalParentSelector?: () => HTMLElement; onShare?: (comment: Comment) => void; onClickUpvote?: (commentId: string, upvotes: number) => unknown; - onCommentUpvoted?: (comment: Comment) => void; className?: CommentClassName; onCommented?: MainCommentProps['onCommented']; } @@ -54,11 +52,9 @@ export function PostComments({ isComposerOpen = false, onShare, onClickUpvote, - onCommentUpvoted, modalParentSelector, permissionNotificationCommentId, joinNotificationCommentId, - upvoteNotificationCommentId, className = {}, onCommented, }: PostCommentsProps): ReactElement { @@ -142,9 +138,7 @@ export function PostComments({ appendTooltipTo={modalParentSelector ?? (() => container?.current)} permissionNotificationCommentId={permissionNotificationCommentId} joinNotificationCommentId={joinNotificationCommentId} - upvoteNotificationCommentId={upvoteNotificationCommentId} onCommented={onCommented} - onUpvote={onCommentUpvoted} lazy={!commentHash && index >= lazyCommentThreshold} /> ))} diff --git a/packages/shared/src/components/post/PostEngagements.tsx b/packages/shared/src/components/post/PostEngagements.tsx index 34fb5e00893..b3797e253c2 100644 --- a/packages/shared/src/components/post/PostEngagements.tsx +++ b/packages/shared/src/components/post/PostEngagements.tsx @@ -69,8 +69,6 @@ function PostEngagements({ useState(); const [joinNotificationCommentId, setJoinNotificationCommentId] = useState(); - const [upvoteNotificationCommentId, setUpvoteNotificationCommentId] = - useState(); const [isComposerOpen, setIsComposerOpen] = useState(false); const { onShowUpvoted } = useUpvoteQuery(); const { openShareComment } = useShareComment(logOrigin); @@ -105,10 +103,6 @@ function PostEngagements({ } }; - const onCommentUpvoted = (comment: Comment) => { - setUpvoteNotificationCommentId(comment.id); - }; - useEffect(() => { if (shouldOnboardAuthor) { setAuthorOnboarding(true); @@ -177,9 +171,7 @@ function PostEngagements({ onClickUpvote={(id, count) => onShowUpvoted(id, count, 'comment')} permissionNotificationCommentId={permissionNotificationCommentId} joinNotificationCommentId={joinNotificationCommentId} - upvoteNotificationCommentId={upvoteNotificationCommentId} onCommented={onCommented} - onCommentUpvoted={onCommentUpvoted} /> {authorOnboarding && ( ) : ( )} ) : ( )} ({ - useLogContext: () => mockUseLogContext(), -})); - -jest.mock('../usePersistentContext', () => ({ - __esModule: true, - default: (...args) => mockPersistentContext(...args), -})); - -jest.mock('./usePushNotificationMutation', () => ({ - usePushNotificationMutation: (args) => mockUsePushNotificationMutation(args), -})); - -jest.mock('../../contexts/PushNotificationContext', () => ({ - usePushNotificationContext: () => mockUsePushNotificationContext(), -})); - -jest.mock('./useNotificationCtaExperiment', () => ({ - useNotificationCtaExperiment: () => mockUseNotificationCtaExperiment(), -})); - -describe('useEnableNotification', () => { - let popupGrantedHandler: (() => void) | undefined; - let logEvent: jest.Mock; - - beforeEach(() => { - jest.clearAllMocks(); - popupGrantedHandler = undefined; - logEvent = jest.fn(); - - mockUseLogContext.mockReturnValue({ logEvent }); - mockPersistentContext.mockReturnValue([false, jest.fn(), true]); - mockUsePushNotificationMutation.mockImplementation( - ({ onPopupGranted } = {}) => { - popupGrantedHandler = onPopupGranted; - - return { - hasPermissionCache: false, - acceptedJustNow: false, - onEnablePush: jest.fn(), - }; - }, - ); - mockUsePushNotificationContext.mockReturnValue({ - isInitialized: true, - isPushSupported: true, - isSubscribed: false, - shouldOpenPopup: () => false, - }); - mockUseNotificationCtaExperiment.mockReturnValue({ - isEnabled: false, - isPreviewActive: false, - }); - }); - - it('should hide rollout-only comment upvote CTA when the experiment is off', () => { - const { result } = renderHook(() => - useEnableNotification({ - source: NotificationPromptSource.CommentUpvote, - }), - ); - - expect(result.current.shouldShowCta).toBe(false); - }); - - it('should force-show the CTA while preview mode is active', () => { - mockPersistentContext.mockReturnValue([true, jest.fn(), true]); - mockUsePushNotificationContext.mockReturnValue({ - isInitialized: true, - isPushSupported: true, - isSubscribed: true, - shouldOpenPopup: () => false, - }); - mockUseNotificationCtaExperiment.mockReturnValue({ - isEnabled: true, - isPreviewActive: true, - }); - - const { result } = renderHook(() => - useEnableNotification({ - source: NotificationPromptSource.NotificationsPage, - }), - ); - - expect(result.current.shouldShowCta).toBe(true); - }); - - it('should log impression with placement when shown', () => { - mockUseNotificationCtaExperiment.mockReturnValue({ - isEnabled: true, - isPreviewActive: false, - }); - - renderHook(() => - useEnableNotification({ - source: NotificationPromptSource.CommentUpvote, - placement: NotificationCtaPlacement.CommentInline, - }), - ); - - expect(logEvent).toHaveBeenCalledWith({ - event_name: LogEvent.Impression, - target_type: TargetType.EnableNotifications, - extra: JSON.stringify({ - kind: 'push_cta', - placement: NotificationCtaPlacement.CommentInline, - origin: NotificationPromptSource.CommentUpvote, - }), - }); - }); - - it('should run onEnableAction after direct permission enable succeeds', async () => { - const onEnableAction = jest.fn().mockResolvedValue(undefined); - const onEnablePush = jest.fn().mockResolvedValue(true); - - mockUsePushNotificationMutation.mockImplementation( - ({ onPopupGranted } = {}) => { - popupGrantedHandler = onPopupGranted; - - return { - hasPermissionCache: false, - acceptedJustNow: true, - onEnablePush, - }; - }, - ); - - const { result } = renderHook(() => - useEnableNotification({ - source: NotificationPromptSource.CommentUpvote, - onEnableAction, - }), - ); - - await act(async () => { - await result.current.onEnable(); - }); - - expect(logEvent).toHaveBeenCalledWith({ - event_name: LogEvent.Click, - target_type: TargetType.EnableNotifications, - extra: JSON.stringify({ - kind: 'push_cta', - origin: NotificationPromptSource.CommentUpvote, - }), - }); - expect(onEnablePush).toHaveBeenCalledWith( - NotificationPromptSource.CommentUpvote, - ); - expect(onEnableAction).toHaveBeenCalledTimes(1); - expect(result.current.acceptedJustNow).toBe(true); - }); - - it('should run onEnableAction after popup permission is granted', async () => { - const onEnableAction = jest.fn().mockResolvedValue(undefined); - - mockUsePushNotificationMutation.mockImplementation( - ({ onPopupGranted } = {}) => { - popupGrantedHandler = onPopupGranted; - - return { - hasPermissionCache: false, - acceptedJustNow: true, - onEnablePush: jest.fn().mockResolvedValue(false), - }; - }, - ); - - const { result } = renderHook(() => - useEnableNotification({ - source: NotificationPromptSource.CommentUpvote, - onEnableAction, - }), - ); - - await act(async () => { - await result.current.onEnable(); - }); - - expect(onEnableAction).not.toHaveBeenCalled(); - - await act(async () => { - await popupGrantedHandler?.(); - }); - - expect(onEnableAction).toHaveBeenCalledTimes(1); - expect(result.current.acceptedJustNow).toBe(true); - }); - - it('should log dismiss with placement', () => { - const setIsDismissed = jest.fn(); - mockPersistentContext.mockReturnValue([false, setIsDismissed, true]); - - const { result } = renderHook(() => - useEnableNotification({ - source: NotificationPromptSource.SquadPage, - placement: NotificationCtaPlacement.SquadPage, - }), - ); - - act(() => { - result.current.onDismiss(); - }); - - expect(logEvent).toHaveBeenCalledWith({ - event_name: LogEvent.ClickNotificationDismiss, - target_type: TargetType.EnableNotifications, - extra: JSON.stringify({ - kind: 'push_cta', - placement: NotificationCtaPlacement.SquadPage, - origin: NotificationPromptSource.SquadPage, - }), - }); - expect(setIsDismissed).toHaveBeenCalledWith(true); - }); -}); diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index 93f8ddee888..907bb169532 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -16,11 +16,6 @@ import { } from './useNotificationCtaAnalytics'; export const DISMISS_PERMISSION_BANNER = 'DISMISS_PERMISSION_BANNER'; -export const FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY = - 'force_upvote_notification_cta'; - -const isTruthySessionFlag = (value: string | null): boolean => - value === '1' || value === 'true' || value === 'yes'; interface UseEnableNotificationProps { source: NotificationPromptSource; @@ -44,8 +39,6 @@ export const useEnableNotification = ({ }: UseEnableNotificationProps): UseEnableNotification => { const { isEnabled: isNotificationCtaExperimentEnabled, isPreviewActive } = useNotificationCtaExperiment(); - const isCommentUpvoteSource = - source === NotificationPromptSource.CommentUpvote; const isExtension = checkIsExtension(); const { logClick, logDismiss } = useNotificationCtaAnalytics(); const { isInitialized, isPushSupported, isSubscribed, shouldOpenPopup } = @@ -77,14 +70,6 @@ export const useEnableNotification = ({ runEnableAction().catch(() => null); }, }); - const forceUpvoteNotificationCtaFromSession = isTruthySessionFlag( - globalThis?.sessionStorage?.getItem( - FORCE_UPVOTE_NOTIFICATION_CTA_SESSION_KEY, - ) ?? null, - ); - const shouldForceUpvoteNotificationCtaForSession = - source === NotificationPromptSource.CommentUpvote && - forceUpvoteNotificationCtaFromSession; const [isDismissed, setIsDismissed, isLoaded] = usePersistentContext( DISMISS_PERMISSION_BANNER, false, @@ -92,12 +77,10 @@ export const useEnableNotification = ({ const shouldIgnoreDismissStateForSource = source === NotificationPromptSource.PostTagFollow || source === NotificationPromptSource.NewComment || - source === NotificationPromptSource.CommentUpvote || source === NotificationPromptSource.SquadPage; const effectiveIsDismissed = ignoreDismissState || shouldIgnoreDismissStateForSource || - shouldForceUpvoteNotificationCtaForSession || isPreviewActive ? false : isDismissed; @@ -139,9 +122,7 @@ export const useEnableNotification = ({ const subscribed = isSubscribed || (shouldOpenPopup() && hasPermissionCache); const enabledJustNow = subscribed && acceptedJustNow; const shouldRequireNotSubscribed = - source !== NotificationPromptSource.CommentUpvote && - !isPreviewActive && - !shouldForceUpvoteNotificationCtaForSession; + source !== NotificationPromptSource.CommentUpvote && !isPreviewActive; const conditions = [ isLoaded || isPreviewActive, @@ -155,10 +136,6 @@ export const useEnableNotification = ({ return true; } - if (isCommentUpvoteSource) { - return !effectiveIsDismissed; - } - return ( (conditions.every(Boolean) || (enabledJustNow && diff --git a/packages/webapp/lib/squadNotificationToastState.ts b/packages/webapp/lib/squadNotificationToastState.ts new file mode 100644 index 00000000000..ece80873019 --- /dev/null +++ b/packages/webapp/lib/squadNotificationToastState.ts @@ -0,0 +1,128 @@ +interface SquadNotificationToastState { + date: string; + shownSquadIds: string[]; + joinedMemberSquadIds: string[]; + dismissed: boolean; +} + +interface RegisterToastViewParams { + squadId: string; + isSquadMember: boolean; +} + +interface DismissToastParams { + squadId: string; +} + +export interface SquadNotificationToastStateStore { + registerToastView: (params: RegisterToastViewParams) => boolean; + dismissUntilTomorrow: (params: DismissToastParams) => void; +} + +const STATE_KEY_PREFIX = 'SQUAD_NOTIF_TOAST_STATE'; + +const getTodayDateKey = (): string => { + const today = new Date(); + const year = today.getFullYear(); + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + + return `${year}-${month}-${day}`; +}; + +const getStorageKey = (userId?: string): string => + `${STATE_KEY_PREFIX}:${userId ?? 'anonymous'}`; + +const getDefaultState = (): SquadNotificationToastState => ({ + date: getTodayDateKey(), + shownSquadIds: [], + joinedMemberSquadIds: [], + dismissed: false, +}); + +const readState = (storageKey: string): SquadNotificationToastState => { + if (typeof window === 'undefined') { + return getDefaultState(); + } + + const fallback = getDefaultState(); + + try { + const rawState = window.localStorage.getItem(storageKey); + if (!rawState) { + return fallback; + } + + const parsedState = JSON.parse(rawState) as SquadNotificationToastState; + if (parsedState.date !== fallback.date) { + return fallback; + } + + return { + date: parsedState.date, + shownSquadIds: parsedState.shownSquadIds ?? [], + joinedMemberSquadIds: parsedState.joinedMemberSquadIds ?? [], + dismissed: !!parsedState.dismissed, + }; + } catch { + return fallback; + } +}; + +const writeState = ( + storageKey: string, + state: SquadNotificationToastState, +): void => { + if (typeof window === 'undefined') { + return; + } + + window.localStorage.setItem(storageKey, JSON.stringify(state)); +}; + +export const createSquadNotificationToastStateStore = ( + userId?: string, +): SquadNotificationToastStateStore => { + const storageKey = getStorageKey(userId); + + return { + registerToastView: ({ squadId, isSquadMember }) => { + const state = readState(storageKey); + const isFreshJoinEvent = + isSquadMember && !state.joinedMemberSquadIds.includes(squadId); + + if (isFreshJoinEvent) { + state.joinedMemberSquadIds.push(squadId); + } + + if (state.dismissed) { + writeState(storageKey, state); + return false; + } + + const hasShownAnyToastToday = state.shownSquadIds.length > 0; + const shouldShowToast = isFreshJoinEvent || !hasShownAnyToastToday; + if (!shouldShowToast) { + writeState(storageKey, state); + return false; + } + + if (!state.shownSquadIds.includes(squadId)) { + state.shownSquadIds.push(squadId); + } + + writeState(storageKey, state); + return true; + }, + dismissUntilTomorrow: ({ squadId }) => { + const state = readState(storageKey); + + if (!state.shownSquadIds.includes(squadId)) { + state.shownSquadIds.push(squadId); + } + + state.dismissed = true; + writeState(storageKey, state); + }, + }; +}; diff --git a/packages/webapp/pages/squads/[handle]/index.tsx b/packages/webapp/pages/squads/[handle]/index.tsx index 8a8f8f83265..594ec6940d9 100644 --- a/packages/webapp/pages/squads/[handle]/index.tsx +++ b/packages/webapp/pages/squads/[handle]/index.tsx @@ -1,11 +1,13 @@ import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'; import type { ParsedUrlQuery } from 'querystring'; import type { ReactElement } from 'react'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import type { NextSeoProps } from 'next-seo'; import Head from 'next/head'; import Feed from '@dailydotdev/shared/src/components/Feed'; -import EnableNotification from '@dailydotdev/shared/src/components/notifications/EnableNotification'; +import { + BellIcon, +} from '@dailydotdev/shared/src/components/icons'; import { SOURCE_FEED_QUERY, supportedTypesForPrivateSources, @@ -32,7 +34,6 @@ import Unauthorized from '@dailydotdev/shared/src/components/errors/Unauthorized import { useQuery } from '@tanstack/react-query'; import { LogEvent, - NotificationCtaPlacement, NotificationPromptSource, } from '@dailydotdev/shared/src/lib/log'; import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext'; @@ -55,7 +56,17 @@ import { webappUrl } from '@dailydotdev/shared/src/lib/constants'; import { usePrivateSourceJoin } from '@dailydotdev/shared/src/hooks/source/usePrivateSourceJoin'; import { GET_REFERRING_USER_QUERY } from '@dailydotdev/shared/src/graphql/users'; import type { PublicProfile } from '@dailydotdev/shared/src/lib/user'; -import { useNotificationCtaExperiment } from '@dailydotdev/shared/src/hooks/notifications/useNotificationCtaExperiment'; +import { + ToastSubject, + useToastNotification, +} from '@dailydotdev/shared/src/hooks/useToastNotification'; +import { useEnableNotification } from '@dailydotdev/shared/src/hooks/notifications/useEnableNotification'; +import { + ButtonColor, + ButtonIconPosition, + ButtonSize, + ButtonVariant, +} from '@dailydotdev/shared/src/components/buttons/Button'; import { mainFeedLayoutProps } from '../../../components/layouts/MainFeedPage'; import { getLayout } from '../../../components/layouts/FeedLayout'; import type { ProtectedPageProps } from '../../../components/ProtectedPage'; @@ -64,6 +75,7 @@ import { getSquadOpenGraph } from '../../../next-seo'; import { getPageSeoTitles } from '../../../components/layouts/utils'; import type { DynamicSeoProps } from '../../../components/common'; import { getAppOrigin } from '../../../lib/seo'; +import { createSquadNotificationToastStateStore } from '../../../lib/squadNotificationToastState'; const Custom404 = dynamic( () => import(/* webpackChunkName: "404" */ '../../404'), @@ -169,12 +181,95 @@ const SquadPage = ({ const { openModal } = useLazyModal(); useJoinReferral(); const { logEvent } = useLogContext(); + const { displayToast } = useToastNotification(); const { sidebarRendered } = useSidebarRendered(); const { shouldUseListFeedLayout, shouldUseListMode } = useFeedLayout(); const { user, isFetched: isBootFetched } = useAuthContext(); const [loggedImpression, setLoggedImpression] = useState(false); const { squad, isLoading, isFetched, isForbidden } = useSquad({ handle }); const squadId = squad?.id; + const shownToastForSquadInSession = useRef>({}); + const squadNotificationToastState = useMemo( + () => createSquadNotificationToastStateStore(user?.id), + [user?.id], + ); + const { shouldShowCta, onEnable } = useEnableNotification({ + source: NotificationPromptSource.SquadPage, + }); + const shouldForceSquadNotificationCta = useMemo(() => { + const forceValue = router.query?.forceSquadNotificationCta; + const normalizedValue = Array.isArray(forceValue) ? forceValue[0] : forceValue; + + if (!normalizedValue) { + return false; + } + + return ['1', 'true', 'yes', 'on'].includes( + normalizedValue.toString().toLowerCase(), + ); + }, [router.query?.forceSquadNotificationCta]); + + useEffect(() => { + if ( + (!shouldShowCta && !shouldForceSquadNotificationCta) || + !squadId || + !isFetched || + shownToastForSquadInSession.current[squadId] + ) { + return; + } + + const shouldShowToast = shouldForceSquadNotificationCta + ? true + : squadNotificationToastState.registerToastView({ + squadId, + isSquadMember: !!squad?.currentMember, + }); + if (!shouldShowToast) { + return; + } + + shownToastForSquadInSession.current[squadId] = true; + + displayToast('Get notified about new Squad activity.', { + subject: ToastSubject.Feed, + persistent: true, + action: { + copy: 'Turn on', + onClick: async () => { + const didEnable = await onEnable(); + if (!didEnable && !shouldForceSquadNotificationCta) { + squadNotificationToastState.dismissUntilTomorrow({ squadId }); + } + + return didEnable; + }, + buttonProps: { + size: ButtonSize.Small, + variant: ButtonVariant.Primary, + color: ButtonColor.Cabbage, + icon: ( + + ), + iconPosition: ButtonIconPosition.Left, + }, + }, + onClose: () => { + if (!shouldForceSquadNotificationCta) { + squadNotificationToastState.dismissUntilTomorrow({ squadId }); + } + }, + }); + }, [ + displayToast, + isFetched, + onEnable, + shouldShowCta, + shouldForceSquadNotificationCta, + squad?.currentMember, + squadId, + squadNotificationToastState, + ]); useEffect(() => { if (loggedImpression || !squadId) { @@ -244,8 +339,6 @@ const SquadPage = ({ }, [shouldManageSlack, squad, openModal, router]); const privateSourceJoin = usePrivateSourceJoin(); - const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); if ((isLoading && !isFetched) || privateSourceJoin.isActive) { return ( @@ -288,14 +381,6 @@ const SquadPage = ({ members={squadMembers} shouldUseListMode={shouldUseListMode} /> - {isNotificationCtaExperimentEnabled && ( - - )} Date: Wed, 18 Mar 2026 18:36:18 +0200 Subject: [PATCH 27/34] fix: address review feedback on notification CTA branch Restore reviewed reminder and navigation changes to match main, re-enable streak eligibility guard, and clean up CTA hook implementation/lint issues raised in PR comments. Made-with: Cursor --- .../src/components/comments/MainComment.tsx | 6 -- .../post/common/PostContentReminder.tsx | 5 +- .../post/common/PostReminderOptions.tsx | 10 +-- .../notifications/useEnableNotification.ts | 6 +- packages/shared/src/hooks/post/useViewPost.ts | 28 +------- .../src/hooks/streaks/useStreakRecover.ts | 20 +++--- packages/shared/src/hooks/useBookmarkPost.ts | 2 +- .../shared/src/hooks/useNotificationParams.ts | 15 ++-- .../src/hooks/usePostModalNavigation.ts | 71 +++---------------- 9 files changed, 37 insertions(+), 126 deletions(-) diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index 0b1ac2fa051..884b54f90c8 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -26,7 +26,6 @@ import { SQUAD_COMMENT_JOIN_BANNER_KEY } from '../../graphql/squads'; import { useEditCommentProps } from '../../hooks/post/useEditCommentProps'; import { useLogContext } from '../../contexts/LogContext'; import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; -import { useNotificationCtaExperiment } from '../../hooks/notifications/useNotificationCtaExperiment'; const CommentInputOrModal = dynamic( () => @@ -78,11 +77,6 @@ export default function MainComment({ () => shouldShowBannerOnComment(permissionNotificationCommentId, comment), [permissionNotificationCommentId, comment], ); - const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment({ - shouldEvaluate: showNotificationPermissionBanner, - }); - const [isJoinSquadBannerDismissed] = usePersistentContext( SQUAD_COMMENT_JOIN_BANNER_KEY, false, diff --git a/packages/shared/src/components/post/common/PostContentReminder.tsx b/packages/shared/src/components/post/common/PostContentReminder.tsx index 29c2064dae9..03119bdc6af 100644 --- a/packages/shared/src/components/post/common/PostContentReminder.tsx +++ b/packages/shared/src/components/post/common/PostContentReminder.tsx @@ -3,6 +3,8 @@ import React from 'react'; import classNames from 'classnames'; import { PostContentWidget } from './PostContentWidget'; import type { Post } from '../../../graphql/posts'; +import { BookmarkReminderIcon } from '../../icons/Bookmark/Reminder'; +import { IconSize } from '../../Icon'; import { PostReminderOptions } from './PostReminderOptions'; import { useBookmarkReminderCover } from '../../../hooks/bookmark/useBookmarkReminderCover'; @@ -24,7 +26,8 @@ export function PostContentReminder({ return ( } + title="Don’t have time now? Set a reminder" > diff --git a/packages/shared/src/components/post/common/PostReminderOptions.tsx b/packages/shared/src/components/post/common/PostReminderOptions.tsx index 3786772e01c..decd48675f4 100644 --- a/packages/shared/src/components/post/common/PostReminderOptions.tsx +++ b/packages/shared/src/components/post/common/PostReminderOptions.tsx @@ -43,18 +43,18 @@ export function PostReminderOptions({ ); diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index 907bb169532..f30af7b2b5b 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -53,7 +53,7 @@ export const useEnableNotification = ({ } try { - await Promise.resolve(onEnableAction()); + await onEnableAction(); setHasCompletedEnableAction(true); return true; } catch { @@ -79,9 +79,7 @@ export const useEnableNotification = ({ source === NotificationPromptSource.NewComment || source === NotificationPromptSource.SquadPage; const effectiveIsDismissed = - ignoreDismissState || - shouldIgnoreDismissStateForSource || - isPreviewActive + ignoreDismissState || shouldIgnoreDismissStateForSource || isPreviewActive ? false : isDismissed; useEffect(() => { diff --git a/packages/shared/src/hooks/post/useViewPost.ts b/packages/shared/src/hooks/post/useViewPost.ts index b96c1d30ca6..7c9bf2f0188 100644 --- a/packages/shared/src/hooks/post/useViewPost.ts +++ b/packages/shared/src/hooks/post/useViewPost.ts @@ -1,4 +1,3 @@ -import { useCallback } from 'react'; import type { UseMutateAsyncFunction } from '@tanstack/react-query'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { sendViewPost } from '../../graphql/posts'; @@ -6,7 +5,6 @@ import { generateQueryKey, RequestKey } from '../../lib/query'; import { useAuthContext } from '../../contexts/AuthContext'; import type { UserStreak } from '../../graphql/users'; import { isSameDayInTimezone } from '../../lib/timezones'; -import type { ApiErrorResult } from '../../graphql/common'; export const useViewPost = (): UseMutateAsyncFunction< unknown, @@ -39,29 +37,5 @@ export const useViewPost = (): UseMutateAsyncFunction< }, }); - return useCallback( - async (id: string) => { - try { - return await onSendViewPost(id); - } catch (err) { - if (err instanceof TypeError) { - return null; - } - - const error = err as ApiErrorResult & { - response?: { errors?: Array<{ extensions?: { code?: string } }> }; - }; - const errorCode = error?.response?.errors?.[0]?.extensions?.code as - | string - | undefined; - - if (errorCode === 'UNAUTHENTICATED' || errorCode === 'RATE_LIMITED') { - return null; - } - - throw err; - } - }, - [onSendViewPost], - ); + return onSendViewPost; }; diff --git a/packages/shared/src/hooks/streaks/useStreakRecover.ts b/packages/shared/src/hooks/streaks/useStreakRecover.ts index 91761424e45..867dcb14f31 100644 --- a/packages/shared/src/hooks/streaks/useStreakRecover.ts +++ b/packages/shared/src/hooks/streaks/useStreakRecover.ts @@ -66,6 +66,9 @@ export const useStreakRecover = ({ const { isStreaksEnabled } = useReadingStreak(); const client = useQueryClient(); const router = useRouter(); + const { + query: { streak_restore: streakRestore }, + } = router; const recoverMutation = useMutation({ mutationKey: generateQueryKey(RequestKey.UserStreakRecover), @@ -128,15 +131,14 @@ export const useStreakRecover = ({ queryFn: async () => { const res = await gqlClient.request(USER_STREAK_RECOVER_QUERY); - // TODO(debug): temporarily disabled for preview — restore before merging - // const userCantRecoverInNotificationCenter = - // !res?.streakRecover?.canRecover && !!streakRestore; - // if (userCantRecoverInNotificationCenter) { - // await hideRemoteAlert(); - // displayToast('Oops, you are no longer eligible to restore your streak'); - // onRequestClose?.(); - // onAfterClose?.(); - // } + const userCantRecoverInNotificationCenter = + !res?.streakRecover?.canRecover && !!streakRestore; + if (userCantRecoverInNotificationCenter) { + await hideRemoteAlert(); + displayToast('Oops, you are no longer eligible to restore your streak'); + onRequestClose?.(); + onAfterClose?.(); + } return res; }, diff --git a/packages/shared/src/hooks/useBookmarkPost.ts b/packages/shared/src/hooks/useBookmarkPost.ts index 39efb304132..89ded0e0f73 100644 --- a/packages/shared/src/hooks/useBookmarkPost.ts +++ b/packages/shared/src/hooks/useBookmarkPost.ts @@ -215,7 +215,7 @@ const useBookmarkPost = ({ if (disableToast) { return; } - displayToast(`Bookmarked to ${list?.name ?? 'Quick saves'}`, { + displayToast(`Bookmarked! Saved to ${list?.name ?? 'Quick saves'}`, { action: { copy: 'Change folder', onClick: () => { diff --git a/packages/shared/src/hooks/useNotificationParams.ts b/packages/shared/src/hooks/useNotificationParams.ts index e2e84e65b10..6d4dcbe7c45 100644 --- a/packages/shared/src/hooks/useNotificationParams.ts +++ b/packages/shared/src/hooks/useNotificationParams.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from 'react'; +import { useEffect } from 'react'; import { useRouter } from 'next/router'; import { NotificationPromptSource } from '../lib/log'; import { stripLinkParameters } from '../lib/links'; @@ -8,13 +8,7 @@ import { usePushNotificationMutation } from './notifications'; export const useNotificationParams = (): void => { const router = useRouter(); const { isSubscribed } = usePushNotificationContext(); - const stripNotifyParam = useCallback(() => { - const link = stripLinkParameters(window.location.href); - return router.replace(link); - }, [router]); - const { onEnablePush } = usePushNotificationMutation({ - onPopupGranted: stripNotifyParam, - }); + const { onEnablePush } = usePushNotificationMutation(); useEffect(() => { if (isSubscribed || !router?.query.notify) { @@ -27,8 +21,9 @@ export const useNotificationParams = (): void => { return; } - stripNotifyParam(); + const link = stripLinkParameters(window.location.href); + router.replace(link); }, ); - }, [onEnablePush, isSubscribed, router?.query.notify, stripNotifyParam]); + }, [onEnablePush, isSubscribed, router]); }; diff --git a/packages/shared/src/hooks/usePostModalNavigation.ts b/packages/shared/src/hooks/usePostModalNavigation.ts index 8a968534447..52e697c62a5 100644 --- a/packages/shared/src/hooks/usePostModalNavigation.ts +++ b/packages/shared/src/hooks/usePostModalNavigation.ts @@ -41,17 +41,6 @@ export type UsePostModalNavigationProps = { feedName: string; }; -const normalizePostIdentifier = (value?: string | null): string | undefined => { - if (!value || value === 'null' || value === 'undefined') { - return undefined; - } - - return value; -}; - -const getPostIdentifier = (post: Post): string | undefined => - normalizePostIdentifier(post.slug) ?? normalizePostIdentifier(post.id); - // for extension we use in memory router const useRouter: () => UsePostModalRouter = isExtension ? useRouterMemory @@ -74,9 +63,6 @@ export const usePostModalNavigation = ({ const pmid = router.query?.pmid as string; const { logEvent } = useLogContext(); const [isFetchingNextPage, setIsFetchingNextPage] = useState(false); - const [selectedPostFallback, setSelectedPostFallback] = useState( - null, - ); const scrollPositionOnFeed = useRef(0); // if multiple feeds/hooks are rendered prevent effects from running while other modal is open @@ -97,14 +83,10 @@ export const usePostModalNavigation = ({ const foundIndex = items.findIndex((item) => { if (item.type === 'post') { - const postIdentifier = getPostIdentifier(item.post); - - return postIdentifier === pmid || item.post.id === pmid; + return item.post.slug === pmid || item.post.id === pmid; } if (isBoostedPostAd(item)) { - const postIdentifier = getPostIdentifier(item.ad.data.post); - - return postIdentifier === pmid || item.ad.data.post.id === pmid; + return item.ad.data.post.slug === pmid || item.ad.data.post.id === pmid; } return false; @@ -166,10 +148,7 @@ export const usePostModalNavigation = ({ const post = getPost(index); if (post) { - const postId = getPostIdentifier(post); - if (!postId) { - return; - } + const postId = post.slug || post.id; const newPathname = getPathnameWithQuery( basePathname, @@ -242,14 +221,10 @@ export const usePostModalNavigation = ({ const indexFromQuery = items.findIndex((item) => { if (item.type === 'post') { - const postIdentifier = getPostIdentifier(item.post); - - return postIdentifier === pmid || item.post.id === pmid; + return item.post.slug === pmid || item.post.id === pmid; } if (isBoostedPostAd(item)) { - const postIdentifier = getPostIdentifier(item.ad.data.post); - - return postIdentifier === pmid || item.ad.data.post.id === pmid; + return item.ad.data.post.slug === pmid || item.ad.data.post.id === pmid; } return false; @@ -260,29 +235,7 @@ export const usePostModalNavigation = ({ } }, [openedPostIndex, pmid, items, onChangeSelected, isNavigationActive]); - const selectedPost = useMemo(() => { - if (typeof openedPostIndex !== 'undefined') { - return getPost(openedPostIndex); - } - - return null; - }, [getPost, openedPostIndex]); - - useEffect(() => { - if (selectedPost) { - setSelectedPostFallback(selectedPost); - return; - } - - if (!pmid) { - setSelectedPostFallback(null); - } - }, [pmid, selectedPost]); - - const activeSelectedPost = selectedPost ?? selectedPostFallback; - const selectedPostIsAd = - typeof openedPostIndex !== 'undefined' && - isBoostedPostAd(items[openedPostIndex]); + const selectedPostIsAd = isBoostedPostAd(items[openedPostIndex]); const result = { postPosition: getPostPosition(), isFetchingNextPage: false, @@ -306,10 +259,6 @@ export const usePostModalNavigation = ({ }, onOpenModal, onPrevious: () => { - if (typeof openedPostIndex === 'undefined') { - return; - } - let index = openedPostIndex - 1; // look for the first post before the current one while (index > 0 && !isPostItem(items[index])) { @@ -331,10 +280,6 @@ export const usePostModalNavigation = ({ onChangeSelected(index); }, onNext: async () => { - if (typeof openedPostIndex === 'undefined') { - return; - } - let index = openedPostIndex + 1; // eslint-disable-next-line no-empty for (; index < items.length && !isPostItem(items[index]); index += 1) {} @@ -363,8 +308,8 @@ export const usePostModalNavigation = ({ ); onChangeSelected(index); }, - selectedPost: activeSelectedPost, - selectedPostIndex: openedPostIndex ?? -1, + selectedPost: getPost(openedPostIndex), + selectedPostIndex: openedPostIndex, }; const parent = typeof window !== 'undefined' ? window : null; From 9f959dbcf0f168cd35b6ef79cf31852dbae8d22e Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Thu, 19 Mar 2026 10:54:16 +0200 Subject: [PATCH 28/34] Remove notification CTA test overrides --- packages/shared/src/components/Feed.tsx | 15 -- .../components/banners/HeroBottomBanner.tsx | 58 +------- .../notifications/EnableNotification.tsx | 20 ++- .../src/components/sidebar/SidebarDesktop.tsx | 2 - .../sidebar/SidebarNotificationPrompt.tsx | 112 --------------- .../notifications/useEnableNotification.ts | 19 +-- .../useNotificationCtaExperiment.ts | 134 +----------------- .../useReadingReminderFeedHero.ts | 75 ++-------- .../useReadingReminderHero.spec.tsx | 36 +---- .../notifications/useReadingReminderHero.ts | 21 +-- .../src/hooks/squads/usePostToSquad.tsx | 4 +- packages/shared/src/lib/log.ts | 2 - packages/shared/src/styles/base.css | 49 ------- packages/webapp/pages/notifications.tsx | 2 +- .../webapp/pages/squads/[handle]/index.tsx | 35 ++--- 15 files changed, 44 insertions(+), 540 deletions(-) delete mode 100644 packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index ab325212f82..b6a5170b44a 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -317,13 +317,10 @@ export default function Feed({ }); const { heroInsertIndex, - shouldShowTopHero, shouldShowInFeedHero, title: readingReminderTitle, subtitle: readingReminderSubtitle, shouldShowDismiss: shouldShowReadingReminderDismiss, - onEnableTopHero, - onDismissTopHero, onEnableInFeedHero, onDismissInFeedHero, } = useReadingReminderFeedHero({ @@ -587,18 +584,6 @@ export default function Feed({ const containerProps = isSearchPageLaptop ? {} : { - topContent: shouldShowTopHero && ( - - ), header, inlineHeader, className, diff --git a/packages/shared/src/components/banners/HeroBottomBanner.tsx b/packages/shared/src/components/banners/HeroBottomBanner.tsx index 7741460a1ed..a821e56e09a 100644 --- a/packages/shared/src/components/banners/HeroBottomBanner.tsx +++ b/packages/shared/src/components/banners/HeroBottomBanner.tsx @@ -1,15 +1,13 @@ import classNames from 'classnames'; import type { ReactElement } from 'react'; import React from 'react'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; +import { Button, ButtonVariant } from '../buttons/Button'; import { MiniCloseIcon } from '../icons'; import feedStyles from '../Feed.module.css'; import ReadingReminderCatLaptop from './ReadingReminderCatLaptop'; type TopHeroProps = { className?: string; - variant?: 'default' | 'lightAndTight'; - applyFeedWidthConstraint?: boolean; title?: string; subtitle?: string; shouldShowDismiss?: boolean; @@ -19,67 +17,15 @@ type TopHeroProps = { export const TopHero = ({ className, - variant = 'default', - applyFeedWidthConstraint = true, title = 'Never miss a learning day', subtitle = 'Turn on your daily reading reminder and keep your routine.', shouldShowDismiss = false, onCtaClick, onClose, }: TopHeroProps): ReactElement => { - if (variant === 'lightAndTight') { - return ( -
-
-
-
-
-

{title}

-

- {subtitle} -

-
-
- - {shouldShowDismiss && ( -
-
-
-
-
- ); - } - return (
diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index 509ad3a726a..2434a4a2b60 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -27,10 +27,9 @@ type EnableNotificationProps = { className?: string; label?: string; onEnableAction?: () => Promise | unknown; - ignoreDismissState?: boolean; }; -const containerClassName: Record = { +const containerClassName: Partial> = { [NotificationPromptSource.NotificationsPage]: 'px-6 w-full bg-surface-float', [NotificationPromptSource.NewComment]: 'rounded-16 px-4 w-full bg-surface-float', @@ -40,7 +39,6 @@ const containerClassName: Record = { 'rounded-16 px-4 w-full bg-surface-float', [NotificationPromptSource.NewSourceModal]: '', [NotificationPromptSource.NotificationItem]: '', - [NotificationPromptSource.SquadPage]: 'rounded-16 border px-4 mt-6', [NotificationPromptSource.SquadPostCommentary]: '', [NotificationPromptSource.SquadPostModal]: '', [NotificationPromptSource.SquadChecklist]: '', @@ -49,13 +47,14 @@ const containerClassName: Record = { [NotificationPromptSource.BookmarkReminder]: '', }; -const sourceRenderTextCloseButton: Record = { +const sourceRenderTextCloseButton: Partial< + Record +> = { [NotificationPromptSource.NotificationsPage]: false, [NotificationPromptSource.NewComment]: false, [NotificationPromptSource.CommentUpvote]: false, [NotificationPromptSource.PostTagFollow]: false, [NotificationPromptSource.NewSourceModal]: false, - [NotificationPromptSource.SquadPage]: true, [NotificationPromptSource.SquadPostCommentary]: false, [NotificationPromptSource.SquadPostModal]: false, [NotificationPromptSource.NotificationItem]: false, @@ -84,7 +83,6 @@ function EnableNotification({ className, label, onEnableAction, - ignoreDismissState = false, }: EnableNotificationProps): ReactElement | null { const { isEnabled: isNotificationCtaExperimentEnabled } = useNotificationCtaExperiment(); @@ -92,7 +90,6 @@ function EnableNotification({ useEnableNotification({ source, placement, - ignoreDismissState, onEnableAction, }); @@ -103,7 +100,7 @@ function EnableNotification({ return null; } - const sourceToMessage: Record = { + const sourceToMessage: Partial> = { [NotificationPromptSource.SquadPostModal]: '', [NotificationPromptSource.NewComment]: isNotificationCtaExperimentEnabled ? 'Someone might reply soon. Don’t miss it.' @@ -120,15 +117,14 @@ function EnableNotification({ [NotificationPromptSource.NewSourceModal]: '', [NotificationPromptSource.NotificationItem]: '', [NotificationPromptSource.SquadPostCommentary]: '', - [NotificationPromptSource.SquadPage]: `Get notified whenever something important happens on ${contentName}.`, [NotificationPromptSource.SquadChecklist]: '', [NotificationPromptSource.SourceSubscribe]: `Get notified whenever there are new posts from ${contentName}.`, [NotificationPromptSource.ReadingReminder]: '', [NotificationPromptSource.BookmarkReminder]: '', }; - const message = sourceToMessage[source]; - const classes = containerClassName[source]; - const showTextCloseButton = sourceRenderTextCloseButton[source]; + const message = sourceToMessage[source] ?? ''; + const classes = containerClassName[source] ?? ''; + const showTextCloseButton = sourceRenderTextCloseButton[source] ?? false; const hideCloseButton = source === NotificationPromptSource.NewComment || source === NotificationPromptSource.CommentUpvote || diff --git a/packages/shared/src/components/sidebar/SidebarDesktop.tsx b/packages/shared/src/components/sidebar/SidebarDesktop.tsx index 43962bf1223..ec062985c5b 100644 --- a/packages/shared/src/components/sidebar/SidebarDesktop.tsx +++ b/packages/shared/src/components/sidebar/SidebarDesktop.tsx @@ -9,7 +9,6 @@ import { MainSection } from './sections/MainSection'; import { CustomFeedSection } from './sections/CustomFeedSection'; import { DiscoverSection } from './sections/DiscoverSection'; import { SidebarMenuIcon } from './SidebarMenuIcon'; -import { SidebarNotificationPrompt } from './SidebarNotificationPrompt'; import { CreatePostButton } from '../post/write'; import { ButtonSize } from '../buttons/Button'; import { BookmarkSection } from './sections/BookmarkSection'; @@ -111,7 +110,6 @@ export const SidebarDesktop = ({ /> - ); }; diff --git a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx b/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx deleted file mode 100644 index 6d32619c1e0..00000000000 --- a/packages/shared/src/components/sidebar/SidebarNotificationPrompt.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import type { ReactElement } from 'react'; -import React, { useCallback } from 'react'; -import { useRouter } from 'next/router'; -import { Button, ButtonSize, ButtonVariant } from '../buttons/Button'; -import CloseButton from '../CloseButton'; -import ReadingReminderCatLaptop from '../banners/ReadingReminderCatLaptop'; -import { useReadingReminderHero } from '../../hooks/notifications/useReadingReminderHero'; -import { NotificationCtaPlacement } from '../../lib/log'; -import { webappUrl } from '../../lib/constants'; -import { - NotificationCtaPreviewPlacement, - useNotificationCtaExperiment, -} from '../../hooks/notifications/useNotificationCtaExperiment'; -import { - getReadingReminderCtaParams, - useNotificationCtaAnalytics, - useNotificationCtaImpression, -} from '../../hooks/notifications/useNotificationCtaAnalytics'; - -type SidebarNotificationPromptProps = { - sidebarExpanded: boolean; -}; - -export const SidebarNotificationPrompt = ({ - sidebarExpanded, -}: SidebarNotificationPromptProps): ReactElement | null => { - const { pathname } = useRouter(); - const { - shouldShow, - title, - subtitle, - shouldShowDismiss, - onEnable, - onDismiss, - } = useReadingReminderHero({ - requireMobile: false, - }); - const isHomePage = pathname === webappUrl; - const shouldEvaluateReminderExperiment = - isHomePage && sidebarExpanded && shouldShow; - const { isEnabled: isNotificationCtaExperimentEnabled, shouldHidePlacement } = - useNotificationCtaExperiment({ - shouldEvaluate: shouldEvaluateReminderExperiment, - }); - const { logClick, logDismiss } = useNotificationCtaAnalytics(); - - const shouldHideSideMenuPrompt = shouldHidePlacement( - NotificationCtaPreviewPlacement.SidebarPrompt, - ); - - const shouldShowSidebarPrompt = - isNotificationCtaExperimentEnabled && - shouldEvaluateReminderExperiment && - !shouldHideSideMenuPrompt; - - useNotificationCtaImpression( - getReadingReminderCtaParams(NotificationCtaPlacement.SidebarPrompt), - shouldShowSidebarPrompt, - ); - - const onEnableClick = useCallback(async () => { - logClick( - getReadingReminderCtaParams(NotificationCtaPlacement.SidebarPrompt), - ); - await onEnable(); - }, [logClick, onEnable]); - - const onDismissClick = useCallback(async () => { - logDismiss( - getReadingReminderCtaParams(NotificationCtaPlacement.SidebarPrompt), - ); - await onDismiss(); - }, [logDismiss, onDismiss]); - - if (!shouldShowSidebarPrompt) { - return null; - } - - return ( -
-
-
-
-
-
-
- {shouldShowDismiss && ( - - )} -
- -
-

{title}

-

{subtitle}

- -
-
-
- ); -}; diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index f30af7b2b5b..7b8d6f9cc32 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -20,7 +20,6 @@ export const DISMISS_PERMISSION_BANNER = 'DISMISS_PERMISSION_BANNER'; interface UseEnableNotificationProps { source: NotificationPromptSource; placement?: NotificationCtaPlacement; - ignoreDismissState?: boolean; onEnableAction?: () => Promise | unknown; } @@ -34,10 +33,9 @@ interface UseEnableNotification { export const useEnableNotification = ({ source = NotificationPromptSource.NotificationsPage, placement, - ignoreDismissState = false, onEnableAction, }: UseEnableNotificationProps): UseEnableNotification => { - const { isEnabled: isNotificationCtaExperimentEnabled, isPreviewActive } = + const { isEnabled: isNotificationCtaExperimentEnabled } = useNotificationCtaExperiment(); const isExtension = checkIsExtension(); const { logClick, logDismiss } = useNotificationCtaAnalytics(); @@ -78,10 +76,9 @@ export const useEnableNotification = ({ source === NotificationPromptSource.PostTagFollow || source === NotificationPromptSource.NewComment || source === NotificationPromptSource.SquadPage; - const effectiveIsDismissed = - ignoreDismissState || shouldIgnoreDismissStateForSource || isPreviewActive - ? false - : isDismissed; + const effectiveIsDismissed = shouldIgnoreDismissStateForSource + ? false + : isDismissed; useEffect(() => { setHasCompletedEnableAction(!onEnableAction); }, [onEnableAction]); @@ -120,20 +117,16 @@ export const useEnableNotification = ({ const subscribed = isSubscribed || (shouldOpenPopup() && hasPermissionCache); const enabledJustNow = subscribed && acceptedJustNow; const shouldRequireNotSubscribed = - source !== NotificationPromptSource.CommentUpvote && !isPreviewActive; + source !== NotificationPromptSource.CommentUpvote; const conditions = [ - isLoaded || isPreviewActive, + isLoaded, shouldRequireNotSubscribed ? !subscribed : true, isInitialized, isPushSupported || isExtension, ]; const computeShouldShowCta = (): boolean => { - if (isPreviewActive) { - return true; - } - return ( (conditions.every(Boolean) || (enabledJustNow && diff --git a/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts b/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts index 80faec0924a..930f81d214b 100644 --- a/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts +++ b/packages/shared/src/hooks/notifications/useNotificationCtaExperiment.ts @@ -1,93 +1,8 @@ -import { useCallback, useEffect } from 'react'; import { notificationCtaV2Feature } from '../../lib/featureManagement'; -import { isDevelopment } from '../../lib/constants'; import { useConditionalFeature } from '../useConditionalFeature'; -/** - * QA preview note: - * - Enable the flag with GrowthBook using `notification_cta_v2`. - * - In development, force preview via `?notificationCtaPreview=on`, - * `?notificationCtaPreview=top-hero`, `?notificationCtaPreview=in-feed-hero`, - * `?notificationCtaPreview=sidebar-prompt`, or clear it with - * `?notificationCtaPreview=clear`. - * - The query param is mirrored into session storage so refreshes keep the same - * preview until cleared. - * - * Cleanup note: - * - When the QA mechanism is no longer needed, remove the query/session preview - * handling from this file and convert callers to rely only on the permanent - * flag behavior. - */ -const NOTIFICATION_CTA_PREVIEW_QUERY_PARAM = 'notificationCtaPreview'; -const NOTIFICATION_CTA_PREVIEW_SESSION_KEY = 'notification_cta_preview'; - -export const NotificationCtaPreviewPlacement = { - TopHero: 'top-hero', - InFeedHero: 'in-feed-hero', - SidebarPrompt: 'sidebar-prompt', -} as const; - -export type NotificationCtaPreviewPlacementValue = - (typeof NotificationCtaPreviewPlacement)[keyof typeof NotificationCtaPreviewPlacement]; - -type NotificationCtaPreviewValue = NotificationCtaPreviewPlacementValue | 'on'; - -const clearPreviewValues = new Set(['0', 'clear', 'off']); -const validPreviewValues = new Set([ - 'on', - NotificationCtaPreviewPlacement.TopHero, - NotificationCtaPreviewPlacement.InFeedHero, - NotificationCtaPreviewPlacement.SidebarPrompt, -]); - -const parsePreviewValue = ( - value: string | null, -): NotificationCtaPreviewValue | null => { - if (!value) { - return null; - } - - const normalizedValue = value.trim().toLowerCase(); - if (clearPreviewValues.has(normalizedValue)) { - return null; - } - - if (!validPreviewValues.has(normalizedValue as NotificationCtaPreviewValue)) { - return null; - } - - return normalizedValue as NotificationCtaPreviewValue; -}; - -const getQueryPreviewValue = (): string | null => { - if (typeof window === 'undefined') { - return null; - } - - return new URLSearchParams(window.location.search).get( - NOTIFICATION_CTA_PREVIEW_QUERY_PARAM, - ); -}; - -const getStoredPreviewValue = (): string | null => { - if (typeof window === 'undefined') { - return null; - } - - return window.sessionStorage.getItem(NOTIFICATION_CTA_PREVIEW_SESSION_KEY); -}; - export interface UseNotificationCtaExperiment { isEnabled: boolean; - isFeatureEnabled: boolean; - isPreviewActive: boolean; - forcedPlacement: NotificationCtaPreviewPlacementValue | null; - isPlacementForced: ( - placement: NotificationCtaPreviewPlacementValue, - ) => boolean; - shouldHidePlacement: ( - placement: NotificationCtaPreviewPlacementValue, - ) => boolean; } interface UseNotificationCtaExperimentProps { @@ -97,59 +12,14 @@ interface UseNotificationCtaExperimentProps { export const useNotificationCtaExperiment = ({ shouldEvaluate = true, }: UseNotificationCtaExperimentProps = {}): UseNotificationCtaExperiment => { - const queryPreviewValue = getQueryPreviewValue(); - const previewValue = isDevelopment - ? parsePreviewValue(queryPreviewValue ?? getStoredPreviewValue()) - : null; - const forcedPlacement = - previewValue && previewValue !== 'on' ? previewValue : null; - const isPreviewActive = !!previewValue; const { value: isFeatureEnabled } = useConditionalFeature({ feature: notificationCtaV2Feature, shouldEvaluate, }); - useEffect(() => { - if (!isDevelopment || typeof window === 'undefined' || !queryPreviewValue) { - return; - } - - const normalizedValue = queryPreviewValue.trim().toLowerCase(); - if (clearPreviewValues.has(normalizedValue)) { - window.sessionStorage.removeItem(NOTIFICATION_CTA_PREVIEW_SESSION_KEY); - return; - } - - if ( - validPreviewValues.has(normalizedValue as NotificationCtaPreviewValue) - ) { - window.sessionStorage.setItem( - NOTIFICATION_CTA_PREVIEW_SESSION_KEY, - normalizedValue, - ); - } - }, [queryPreviewValue]); - - const isPlacementForced = useCallback( - (placement: NotificationCtaPreviewPlacementValue) => { - return forcedPlacement === placement; - }, - [forcedPlacement], - ); - - const shouldHidePlacement = useCallback( - (placement: NotificationCtaPreviewPlacementValue) => { - return !!forcedPlacement && forcedPlacement !== placement; - }, - [forcedPlacement], - ); + const isEnabled = Boolean(isFeatureEnabled); return { - isEnabled: Boolean(isFeatureEnabled) || isPreviewActive, - isFeatureEnabled: Boolean(isFeatureEnabled), - isPreviewActive, - forcedPlacement, - isPlacementForced, - shouldHidePlacement, + isEnabled, }; }; diff --git a/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts b/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts index 37ba22ed157..9516417c788 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts +++ b/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts @@ -3,10 +3,7 @@ import { useRouter } from 'next/router'; import { NotificationCtaPlacement } from '../../lib/log'; import { webappUrl } from '../../lib/constants'; import { useReadingReminderHero } from './useReadingReminderHero'; -import { - NotificationCtaPreviewPlacement, - useNotificationCtaExperiment, -} from './useNotificationCtaExperiment'; +import { useNotificationCtaExperiment } from './useNotificationCtaExperiment'; import { getReadingReminderCtaParams, useNotificationCtaAnalytics, @@ -23,13 +20,10 @@ interface UseReadingReminderFeedHeroProps { interface UseReadingReminderFeedHero { heroInsertIndex: number; - shouldShowTopHero: boolean; shouldShowInFeedHero: boolean; title: string; subtitle: string; shouldShowDismiss: boolean; - onEnableTopHero: () => Promise; - onDismissTopHero: () => Promise; onEnableInFeedHero: () => Promise; onDismissInFeedHero: () => Promise; } @@ -52,33 +46,16 @@ export const useReadingReminderFeedHero = ({ } = useReadingReminderHero(); const isHomePage = pathname === webappUrl; const shouldEvaluateReminderExperiment = isHomePage && shouldShow; - const { - isEnabled: isNotificationCtaExperimentEnabled, - isPlacementForced, - shouldHidePlacement, - } = useNotificationCtaExperiment({ - shouldEvaluate: shouldEvaluateReminderExperiment, - }); - const isTopHeroForced = isPlacementForced( - NotificationCtaPreviewPlacement.TopHero, - ); - const isInFeedHeroForced = isPlacementForced( - NotificationCtaPreviewPlacement.InFeedHero, - ); - const shouldHideTopHero = shouldHidePlacement( - NotificationCtaPreviewPlacement.TopHero, - ); - const shouldHideInFeedHero = shouldHidePlacement( - NotificationCtaPreviewPlacement.InFeedHero, - ); + const { isEnabled: isNotificationCtaExperimentEnabled } = + useNotificationCtaExperiment({ + shouldEvaluate: shouldEvaluateReminderExperiment, + }); const { logClick, logDismiss } = useNotificationCtaAnalytics(); - const [hasScrolledForHero, setHasScrolledForHero] = - useState(isInFeedHeroForced); + const [hasScrolledForHero, setHasScrolledForHero] = useState(false); const [isInFeedHeroDismissed, setIsInFeedHeroDismissed] = useState(false); - const [isTopHeroDismissed, setIsTopHeroDismissed] = useState(false); useEffect(() => { - if (!shouldShow || isInFeedHeroForced || hasScrolledForHero) { + if (!shouldShow || hasScrolledForHero) { return undefined; } @@ -90,58 +67,27 @@ export const useReadingReminderFeedHero = ({ window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); - }, [hasScrolledForHero, isInFeedHeroForced, shouldShow]); - - useEffect(() => { - if (!isInFeedHeroForced) { - return; - } - - setHasScrolledForHero(true); - }, [isInFeedHeroForced]); + }, [hasScrolledForHero, shouldShow]); useEffect(() => { if (!shouldShow) { setIsInFeedHeroDismissed(false); - setIsTopHeroDismissed(false); } }, [shouldShow]); const canShowReminderPlacements = isNotificationCtaExperimentEnabled && shouldEvaluateReminderExperiment; - const shouldShowTopHero = - canShowReminderPlacements && - isTopHeroForced && - !shouldHideTopHero && - !isTopHeroDismissed; const shouldShowInFeedHero = canShowReminderPlacements && - !shouldHideInFeedHero && - (isInFeedHeroForced || hasScrolledForHero) && + hasScrolledForHero && !isInFeedHeroDismissed && itemCount > heroInsertIndex; - useNotificationCtaImpression( - getReadingReminderCtaParams(NotificationCtaPlacement.TopHero), - shouldShowTopHero, - ); useNotificationCtaImpression( getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero), shouldShowInFeedHero, ); - const onEnableTopHero = useCallback(async () => { - logClick(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); - await onEnable(); - setIsTopHeroDismissed(true); - }, [logClick, onEnable]); - - const onDismissTopHero = useCallback(async () => { - setIsTopHeroDismissed(true); - logDismiss(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); - await onDismiss(); - }, [logDismiss, onDismiss]); - const onEnableInFeedHero = useCallback(async () => { logClick(getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero)); await onEnable(); @@ -158,13 +104,10 @@ export const useReadingReminderFeedHero = ({ return { heroInsertIndex, - shouldShowTopHero, shouldShowInFeedHero, title, subtitle, shouldShowDismiss, - onEnableTopHero, - onDismissTopHero, onEnableInFeedHero, onDismissInFeedHero, }; diff --git a/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx b/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx index cd5f6b7edf1..37040c250e9 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx +++ b/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx @@ -15,7 +15,6 @@ const mockUsePersonalizedDigest = jest.fn(); const mockPersistentContext = jest.fn(); const mockUseViewSize = jest.fn(); const mockUsePushNotificationMutation = jest.fn(); -const mockUseNotificationCtaExperiment = jest.fn(); jest.mock('../../contexts/AuthContext', () => ({ useAuthContext: () => mockUseAuthContext(), @@ -53,10 +52,6 @@ jest.mock('./usePushNotificationMutation', () => ({ usePushNotificationMutation: () => mockUsePushNotificationMutation(), })); -jest.mock('./useNotificationCtaExperiment', () => ({ - useNotificationCtaExperiment: () => mockUseNotificationCtaExperiment(), -})); - jest.mock('../useConditionalFeature', () => ({ useConditionalFeature: jest.fn(), })); @@ -103,11 +98,6 @@ describe('useReadingReminderHero', () => { mockPersistentContext.mockReturnValue([null, setLastSeen, true]); mockUseViewSize.mockReturnValue(true); mockUsePushNotificationMutation.mockReturnValue({ onEnablePush }); - mockUseNotificationCtaExperiment.mockReturnValue({ - isEnabled: true, - isFeatureEnabled: true, - isPreviewActive: false, - }); }); it('should show for invalid persisted timestamps', () => { @@ -164,7 +154,7 @@ describe('useReadingReminderHero', () => { expect(result.current.shouldShowDismiss).toBe(true); }); - it('should not show on desktop without preview', () => { + it('should not show on desktop', () => { mockUseViewSize.mockReturnValue(false); const { result } = renderHook(() => useReadingReminderHero()); @@ -172,30 +162,6 @@ describe('useReadingReminderHero', () => { expect(result.current.shouldShow).toBe(false); }); - it('should show on desktop while preview is active', () => { - mockUseViewSize.mockReturnValue(false); - mockUseNotificationCtaExperiment.mockReturnValue({ - isEnabled: true, - isPreviewActive: true, - }); - - const { result } = renderHook(() => useReadingReminderHero()); - - expect(result.current.shouldShow).toBe(true); - }); - - it('should show on desktop when mobile-only gating is disabled', () => { - mockUseViewSize.mockReturnValue(false); - - const { result } = renderHook(() => - useReadingReminderHero({ - requireMobile: false, - }), - ); - - expect(result.current.shouldShow).toBe(true); - }); - it('should enable reminder and log schedule event', async () => { const { result } = renderHook(() => useReadingReminderHero()); diff --git a/packages/shared/src/hooks/notifications/useReadingReminderHero.ts b/packages/shared/src/hooks/notifications/useReadingReminderHero.ts index d9ec5c9badc..6b83de09cbe 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderHero.ts +++ b/packages/shared/src/hooks/notifications/useReadingReminderHero.ts @@ -10,7 +10,6 @@ import usePersistentContext, { import { useViewSize, ViewSize } from '../useViewSize'; import { usePushNotificationMutation } from './usePushNotificationMutation'; import { LogEvent, NotificationPromptSource } from '../../lib/log'; -import { useNotificationCtaExperiment } from './useNotificationCtaExperiment'; import { featureReadingReminderHeroCopy, featureReadingReminderHeroDismiss, @@ -26,10 +25,6 @@ interface UseReadingReminderHero { onDismiss: () => Promise; } -interface UseReadingReminderHeroProps { - requireMobile?: boolean; -} - const DEFAULT_READING_REMINDER_HOUR = 9; const READING_REMINDER_DISMISSED = 'dismissed'; @@ -62,13 +57,10 @@ const getIsRegisteredToday = (createdAt?: string | Date): boolean => { return isToday(parsedDate); }; -export const useReadingReminderHero = ({ - requireMobile = true, -}: UseReadingReminderHeroProps = {}): UseReadingReminderHero => { +export const useReadingReminderHero = (): UseReadingReminderHero => { const { isLoggedIn, user } = useAuthContext(); const { logEvent } = useLogContext(); const { onEnablePush } = usePushNotificationMutation(); - const { isPreviewActive } = useNotificationCtaExperiment(); const { getPersonalizedDigest, isLoading: isDigestLoading, @@ -87,10 +79,8 @@ export const useReadingReminderHero = ({ const isDismissed = isDismissedValue(lastSeen); const isMobile = useViewSize(ViewSize.MobileL); - const isEligibleViewSize = !requireMobile || isMobile; - const shouldForceShow = isPreviewActive && isLoggedIn; const shouldEvaluate = - isEligibleViewSize && + isMobile && isLoggedIn && !isDigestLoading && !isSubscribedToReadingReminder && @@ -145,10 +135,9 @@ export const useReadingReminderHero = ({ }, [setLastSeen]); const shouldShow = - shouldForceShow || - (!isSubscribedToReadingReminder && - !isDismissed && - (shouldShowBase || hasShownInSession)); + !isSubscribedToReadingReminder && + !isDismissed && + (shouldShowBase || hasShownInSession); return { shouldShow, diff --git a/packages/shared/src/hooks/squads/usePostToSquad.tsx b/packages/shared/src/hooks/squads/usePostToSquad.tsx index 1a264df0715..6d6af7752b9 100644 --- a/packages/shared/src/hooks/squads/usePostToSquad.tsx +++ b/packages/shared/src/hooks/squads/usePostToSquad.tsx @@ -122,7 +122,7 @@ export const usePostToSquad = ({ const { isSubscribed } = usePushNotificationContext(); const { onEnablePush } = usePushNotificationMutation(); const { logClick, logImpression } = useNotificationCtaAnalytics(); - const { isEnabled: isNotificationCtaExperimentEnabled, isPreviewActive } = + const { isEnabled: isNotificationCtaExperimentEnabled } = useNotificationCtaExperiment(); const client = useQueryClient(); const { completeAction } = useActions(); @@ -132,7 +132,7 @@ export const usePostToSquad = ({ const { requestMethod: requestMethodContext } = useRequestProtocol(); const requestMethod = requestMethodContext ?? gqlClient.request; const shouldShowEnableNotificationToast = - isNotificationCtaExperimentEnabled && (isPreviewActive || !isSubscribed); + isNotificationCtaExperimentEnabled && !isSubscribed; const handleMutationError = useCallback( (err: unknown): void => { diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts index 6efcf62fc49..bd77991ceb5 100644 --- a/packages/shared/src/lib/log.ts +++ b/packages/shared/src/lib/log.ts @@ -540,9 +540,7 @@ export enum NotificationTarget { } export enum NotificationCtaPlacement { - TopHero = 'top-hero', InFeedHero = 'in-feed-hero', - SidebarPrompt = 'sidebar-prompt', CommentInline = 'comment-inline', CommentReplyFlow = 'comment-reply-flow', TagFollowInline = 'tag-follow-inline', diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css index 130859f91d7..e78aa463608 100644 --- a/packages/shared/src/styles/base.css +++ b/packages/shared/src/styles/base.css @@ -1056,11 +1056,6 @@ meter::-webkit-meter-bar { animation: float 1.5s ease-in-out infinite; } - .top-hero-animated-border { - background: linear-gradient(122deg, #2d1b8f 0%, #5d1fb7 45%, #ff00a8 100%); - background-size: 200% 200%; - } - .top-hero-panel-border { background: linear-gradient(122deg, #2d1b8f 0%, #5d1fb7 45%, #ff00a8 100%); } @@ -1069,50 +1064,6 @@ meter::-webkit-meter-bar { background: rgb(255 0 168 / 35%); } - .sidebar-notification-border { - background: conic-gradient( - from 0deg, - rgb(255 255 255 / 0.06), - rgb(255 255 255 / 0.9), - rgb(255 255 255 / 0.08), - rgb(255 255 255 / 0.95), - rgb(255 255 255 / 0.06) - ); - } - - @keyframes top-hero-border-shift { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } - } - - @keyframes sidebar-popover-border-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - @keyframes sidebar-popover-tail { - 0%, - 100% { - opacity: 0.35; - transform: translateX(0); - } - 50% { - opacity: 0.95; - transform: translateX(0.25rem); - } - } - @keyframes enable-notification-bell-ring { 0%, 100% { diff --git a/packages/webapp/pages/notifications.tsx b/packages/webapp/pages/notifications.tsx index ea56558666d..0b0ad58cb95 100644 --- a/packages/webapp/pages/notifications.tsx +++ b/packages/webapp/pages/notifications.tsx @@ -116,7 +116,7 @@ const Notifications = (): ReactElement => {
- + {!showPushBanner && }

{ - const forceValue = router.query?.forceSquadNotificationCta; - const normalizedValue = Array.isArray(forceValue) ? forceValue[0] : forceValue; - - if (!normalizedValue) { - return false; - } - - return ['1', 'true', 'yes', 'on'].includes( - normalizedValue.toString().toLowerCase(), - ); - }, [router.query?.forceSquadNotificationCta]); useEffect(() => { if ( - (!shouldShowCta && !shouldForceSquadNotificationCta) || + !shouldShowCta || !squadId || !isFetched || shownToastForSquadInSession.current[squadId] @@ -219,12 +205,10 @@ const SquadPage = ({ return; } - const shouldShowToast = shouldForceSquadNotificationCta - ? true - : squadNotificationToastState.registerToastView({ - squadId, - isSquadMember: !!squad?.currentMember, - }); + const shouldShowToast = squadNotificationToastState.registerToastView({ + squadId, + isSquadMember: !!squad?.currentMember, + }); if (!shouldShowToast) { return; } @@ -238,7 +222,7 @@ const SquadPage = ({ copy: 'Turn on', onClick: async () => { const didEnable = await onEnable(); - if (!didEnable && !shouldForceSquadNotificationCta) { + if (!didEnable) { squadNotificationToastState.dismissUntilTomorrow({ squadId }); } @@ -255,9 +239,7 @@ const SquadPage = ({ }, }, onClose: () => { - if (!shouldForceSquadNotificationCta) { - squadNotificationToastState.dismissUntilTomorrow({ squadId }); - } + squadNotificationToastState.dismissUntilTomorrow({ squadId }); }, }); }, [ @@ -265,7 +247,6 @@ const SquadPage = ({ isFetched, onEnable, shouldShowCta, - shouldForceSquadNotificationCta, squad?.currentMember, squadId, squadNotificationToastState, From cef46bd0959bea37219460dfaa3fa19e92fb6e2f Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Thu, 19 Mar 2026 11:48:22 +0200 Subject: [PATCH 29/34] Fix strict CI regressions after merge --- packages/shared/src/components/Feed.tsx | 61 ++++++++------ .../shared/src/components/MainFeedLayout.tsx | 67 ++++++++++----- .../cards/entity/SourceEntityCard.tsx | 36 ++++---- .../cards/entity/SquadEntityCard.tsx | 10 +-- .../cards/entity/UserEntityCard.tsx | 25 +++--- .../src/components/comments/MainComment.tsx | 34 ++++---- .../src/components/errors/SquadLoading.tsx | 2 +- .../src/components/feeds/FeedContainer.tsx | 84 ++++++++++++------- .../modals/post/BookmarkReminderModal.tsx | 21 ++--- .../modals/streaks/StreakRecoverModal.tsx | 8 +- .../src/components/notifications/Toast.tsx | 12 +-- .../src/components/post/PostActions.tsx | 23 +++-- .../src/components/post/PostWidgets.tsx | 42 ++++++---- .../src/components/post/SquadPostWidgets.tsx | 12 +-- .../src/components/squads/SquadPageHeader.tsx | 12 ++- .../streak/popup/ReadingStreakPopup.tsx | 19 +++-- .../shared/src/contexts/ActiveFeedContext.tsx | 7 +- .../src/hooks/feed/useFeedContextMenu.ts | 13 +-- .../usePushNotificationMutation.tsx | 2 +- .../useReadingReminderHero.spec.tsx | 4 +- packages/shared/src/hooks/post/common.ts | 4 +- packages/shared/src/hooks/post/useComments.ts | 18 ++-- .../src/hooks/post/useEditCommentProps.ts | 12 +-- .../hooks/source/useSourceActionsNotify.ts | 5 +- packages/shared/src/hooks/useCoresFeature.ts | 29 +++++-- .../shared/src/hooks/useSourceMenuProps.tsx | 22 ++++- .../webapp/pages/squads/[handle]/index.tsx | 67 ++++++--------- 27 files changed, 377 insertions(+), 274 deletions(-) diff --git a/packages/shared/src/components/Feed.tsx b/packages/shared/src/components/Feed.tsx index b6a5170b44a..3ace0741d06 100644 --- a/packages/shared/src/components/Feed.tsx +++ b/packages/shared/src/components/Feed.tsx @@ -60,6 +60,7 @@ import { FeedCardContext } from '../features/posts/FeedCardContext'; import { briefCardFeedFeature, briefFeedEntrypointPage, + featureFeedAdTemplate, featureFeedLayoutV2, } from '../lib/featureManagement'; import type { AwardProps } from '../graphql/njord'; @@ -253,6 +254,8 @@ export default function Feed({ }); const showBriefCard = shouldEvaluateBriefCard && briefCardFeatureValue; const [getProducts] = useUpdateQuery(getProductsQueryOptions()); + const adTemplate = currentSettings.adTemplate ?? + featureFeedAdTemplate.defaultValue?.default ?? { adStart: 1 }; const { value: briefBannerPage } = useConditionalFeature({ feature: briefFeedEntrypointPage, @@ -274,10 +277,10 @@ export default function Feed({ pageSize ?? currentSettings.pageSize, isSquadFeed || shouldUseListFeedLayout ? { - ...currentSettings.adTemplate, + ...adTemplate, adStart: 2, // always make adStart 2 for squads due to welcome and pinned posts } - : currentSettings.adTemplate, + : adTemplate, numCards, { onEmptyFeed, @@ -296,7 +299,9 @@ export default function Feed({ }, ); const canFetchMore = allowFetchMore ?? queryCanFetchMore; - const [postModalIndex, setPostModalIndex] = useState(null); + const [postModalIndex, setPostModalIndex] = useState( + null, + ); const { onMenuClick, postMenuIndex, postMenuLocation } = useFeedContextMenu(); const useList = isListMode && numCards > 1; const virtualizedNumCards = useList ? 1 : numCards; @@ -340,19 +345,24 @@ export default function Feed({ if (type === 'POST') { const postItem = items.find( - (item: PostItem) => item.post.id === entityId && item.type === 'post', - ) as PostItem; - - const currentPost = postItem?.post; + (item): item is PostItem => + item.type === 'post' && item.post.id === entityId, + ); - if (!!currentPost && entityId !== currentPost.id) { + if (!postItem) { return; } + const currentPost = postItem.post; + const awardProduct = getProducts()?.edges.find( (item) => item.node.id === productId, )?.node; + if (!currentPost.userState || awardProduct?.value === undefined) { + return; + } + updatePost(postItem.page, postItem.index, { ...currentPost, userState: { @@ -373,13 +383,14 @@ export default function Feed({ }); const logOpts = useMemo(() => { + const modalRow = postModalIndex?.row; + const modalColumn = postModalIndex?.column; + return { columns: virtualizedNumCards, - row: !isNullOrUndefined(postModalIndex?.row) - ? postModalIndex.row - : postMenuLocation?.row, - column: !isNullOrUndefined(postModalIndex?.column) - ? postModalIndex.column + row: !isNullOrUndefined(modalRow) ? modalRow : postMenuLocation?.row, + column: !isNullOrUndefined(modalColumn) + ? modalColumn : postMenuLocation?.column, is_ad: selectedPostIsAd ? true : undefined, }; @@ -413,7 +424,7 @@ export default function Feed({ const { toggleUpvote, toggleDownvote } = useFeedVotePost({ feedName, - ranking, + ranking: ranking ?? '', items, updatePost, feedQueryKey, @@ -422,7 +433,7 @@ export default function Feed({ const { toggleBookmark } = useFeedBookmarkPost({ feedName, feedQueryKey, - ranking, + ranking: ranking ?? '', items, updatePost, }); @@ -555,7 +566,7 @@ export default function Feed({ } }; - const PostModal = PostModalMap[selectedPost?.type]; + const PostModal = selectedPost ? PostModalMap[selectedPost.type] : undefined; if (isError) { return ; @@ -623,26 +634,26 @@ export default function Feed({ {showPromoBanner && index === indexWhenShowingPromoBanner && ( )} {shouldShowInFeedHero && index === heroInsertIndex && (
; - requestKey?: string; + requestKey?: RequestKey | SharedFeedPage | OtherFeedPage; + emptyScreen?: ReactNode; }; -const propsByFeed: Record = { +type FeedConfigPage = SharedFeedPage | OtherFeedPage; + +const propsByFeed: Partial> = { 'my-feed': { query: ANONYMOUS_FEED_QUERY, queryIfLogged: FEED_QUERY, @@ -317,9 +320,7 @@ export default function MainFeedLayout({ /** * Various feeds can have different feed versions based on feature flag */ - const dynamicFeedVersionByFeed: Partial< - Record - > = { + const dynamicFeedVersionByFeed: Partial> = { [SharedFeedPage.MyFeed]: myFeedV, [OtherFeedPage.Following]: followingFeedV, [OtherFeedPage.Explore]: exploreFeedV, @@ -329,25 +330,30 @@ export default function MainFeedLayout({ [SharedFeedPage.Custom]: customFeedV, }; + const feedConfig = propsByFeed[feedName]; + const dynamicFeedConfig = + feedName in dynamicPropsByFeed + ? dynamicPropsByFeed[feedName as SharedFeedPage] + : undefined; + // do not show feed in background on new page - if (router.pathname === '/feeds/new') { + if (router.pathname === '/feeds/new' || !feedConfig) { return { query: null, }; } return { - requestKey: propsByFeed[feedName].requestKey, + requestKey: feedConfig.requestKey, query: getQueryBasedOnLogin( tokenRefreshed, - user, - dynamicPropsByFeed[feedName]?.query || propsByFeed[feedName].query, - dynamicPropsByFeed[feedName]?.queryIfLogged || - propsByFeed[feedName].queryIfLogged, + user ?? null, + dynamicFeedConfig?.query || feedConfig.query, + dynamicFeedConfig?.queryIfLogged || feedConfig.queryIfLogged || null, ), variables: { - ...propsByFeed[feedName].variables, - ...dynamicPropsByFeed[feedName]?.variables, + ...feedConfig.variables, + ...dynamicFeedConfig?.variables, version: isDevelopment && !isProductionAPI ? 1 @@ -386,7 +392,9 @@ export default function MainFeedLayout({ const search = useMemo( () => hasSearchContent ? ( - + {navChildren} {isSearchOn && searchChildren ? searchChildren : undefined} @@ -394,7 +402,16 @@ export default function MainFeedLayout({ [hasSearchContent, isSearchOn, isSearchPage, navChildren, searchChildren], ); - const feedProps = useMemo>(() => { + const handleSelectedAlgoChange = useCallback( + (value: SetStateAction) => { + const nextValue = + typeof value === 'function' ? value(selectedAlgo) : value; + setSelectedAlgo(nextValue).catch(() => undefined); + }, + [selectedAlgo, setSelectedAlgo], + ); + + const feedProps = useMemo | null>(() => { const feedWithActions = isUpvoted || isPopular || isSortableFeed || isCustomFeed; // in list search by default we do not show any results but empty state @@ -410,6 +427,10 @@ export default function MainFeedLayout({ } if (feedNameProp === 'default' && isCustomDefaultFeed) { + if (!defaultFeedId) { + return null; + } + return { feedName: SharedFeedPage.Custom, feedQueryKey: generateQueryKey( @@ -419,13 +440,13 @@ export default function MainFeedLayout({ ), query: CUSTOM_FEED_QUERY, variables: { - feedId: user.defaultFeedId, + feedId: defaultFeedId, feedName: SharedFeedPage.Custom, }, - emptyScreen: propsByFeed[feedName].emptyScreen || , + emptyScreen: propsByFeed[feedName]?.emptyScreen || , actionButtons: feedWithActions && ( ), @@ -501,10 +522,10 @@ export default function MainFeedLayout({ ), query: config.query, variables, - emptyScreen: propsByFeed[feedName].emptyScreen || , + emptyScreen: propsByFeed[feedName]?.emptyScreen || , actionButtons: feedWithActions && ( ), @@ -524,7 +545,7 @@ export default function MainFeedLayout({ feedName, user, selectedAlgo, - setSelectedAlgo, + handleSelectedAlgoChange, defaultFeedId, getFeatureValue, contentCurationFilter, @@ -611,7 +632,7 @@ export default function MainFeedLayout({ {shouldUseCommentFeedLayout ? ( { + const sourceId = source?.id ?? ''; const { showActionBtn } = useShowFollowAction({ - entityId: source?.id, + entityId: sourceId, entityType: ContentPreferenceType.Source, }); const { data: contentPreference } = useContentPreferenceStatusQuery({ - id: source?.id, + id: sourceId, entity: ContentPreferenceType.Source, }); const [showNotificationCta, setShowNotificationCta] = useState(false); @@ -60,9 +61,6 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { source, }); - const { description, membersCount, flags, name, image, permalink } = - source || {}; - const currentStatus = contentPreference?.status; const isNowFollowing = currentStatus === ContentPreferenceStatus.Follow || @@ -92,6 +90,10 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { } }, [currentStatus, isNowFollowing, wasFollowing]); + if (!source?.id || !source.name || !source.image || !source.permalink) { + return null; + } + const handleTurnOn = async () => { if (!source?.id) { throw new Error('Cannot subscribe to notifications without source id'); @@ -111,14 +113,14 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { return ( { /> {showActionBtn && ( { } >
- + { color={TypographyColor.Primary} bold > - {name} + {source.name} - {description && } + {source.description && ( + + )}
- {largeNumberFormat(membersCount) || 0} Followers + {largeNumberFormat(source.membersCount ?? 0)} Followers - {largeNumberFormat(flags?.totalUpvotes) || 0} Upvotes + {largeNumberFormat(source.flags?.totalUpvotes ?? 0)} Upvotes
{shouldRenderNotificationCta && ( @@ -176,7 +180,7 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { analytics={{ placement: NotificationCtaPlacement.SourceCard, targetType: TargetType.Source, - targetId: source?.id, + targetId: source.id, source: NotificationPromptSource.SourceSubscribe, }} /> diff --git a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx index dfb625d5ed9..d8889f3cf35 100644 --- a/packages/shared/src/components/cards/entity/SquadEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SquadEntityCard.tsx @@ -51,7 +51,7 @@ const SquadEntityCard = ({ }); const wasSquadMemberRef = useRef(!!squad?.currentMember); const { isLoading } = useShowFollowAction({ - entityId: squad?.id, + entityId: squad?.id ?? '', entityType: ContentPreferenceType.Source, }); const { haveNotificationsOn, onNotify } = useSourceActionsNotify({ @@ -84,7 +84,7 @@ const SquadEntityCard = ({ setShowNotificationCta(false); }; - if (!squad) { + if (!squad?.id || !squad.name || !squad.image || !squad.permalink) { return null; } @@ -152,14 +152,14 @@ const SquadEntityCard = ({ type={TypographyType.Footnote} color={TypographyColor.Tertiary} > - {largeNumberFormat(membersCount)} Members + {largeNumberFormat(membersCount ?? 0)} Members - {largeNumberFormat(flags?.totalUpvotes)} Upvotes + {largeNumberFormat(flags?.totalUpvotes ?? 0)} Upvotes
{shouldRenderNotificationCta && ( @@ -168,7 +168,7 @@ const SquadEntityCard = ({ analytics={{ placement: NotificationCtaPlacement.SquadCard, targetType: TargetType.Source, - targetId: squad?.id, + targetId: squad.id, source: NotificationPromptSource.SourceSubscribe, }} /> diff --git a/packages/shared/src/components/cards/entity/UserEntityCard.tsx b/packages/shared/src/components/cards/entity/UserEntityCard.tsx index d6afe28ed06..fe3f95e2196 100644 --- a/packages/shared/src/components/cards/entity/UserEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/UserEntityCard.tsx @@ -50,9 +50,10 @@ const UserEntityCard = ({ }: Props) => { const { user: loggedUser } = useContext(AuthContext); const isSameUser = loggedUser?.id === user?.id; + const userId = user?.id ?? ''; const [showNotificationCta, setShowNotificationCta] = useState(false); const { data: contentPreference } = useContentPreferenceStatusQuery({ - id: user?.id, + id: userId, entity: ContentPreferenceType.User, }); const { isEnabled: isNotificationCtaExperimentEnabled } = @@ -66,18 +67,22 @@ const UserEntityCard = ({ const { logSubscriptionEvent } = usePlusSubscription(); const menuProps = useUserMenuProps({ user }); const { isLoading } = useShowFollowAction({ - entityId: user?.id, + entityId: userId, entityType: ContentPreferenceType.User, }); const onReportUser = React.useCallback( (defaultBlocked = false) => { + if (!user?.id || !user.username) { + return; + } + openModal({ type: LazyModal.ReportUser, props: { offendingUser: { - id: user?.id, - username: user?.username, + id: user.id, + username: user.username, }, defaultBlockUser: defaultBlocked, }, @@ -119,6 +124,12 @@ const UserEntityCard = ({ prevStatusRef.current = currentStatus; }, [currentStatus, isNowFollowing, showNotificationCtaOnFollow]); + const showActionBtns = !!user && !isLoading && !isSameUser; + + if (!user || !id || !username || !image || !permalink || !createdAt) { + return null; + } + const options: MenuItemProps[] = [ { icon: , @@ -160,12 +171,6 @@ const UserEntityCard = ({ }); } - const showActionBtns = !!user && !isLoading && !isSameUser; - - if (!user) { - return null; - } - const handleEnableNotifications = async () => { if (!id || !username) { throw new Error('Cannot subscribe to notifications without user id'); diff --git a/packages/shared/src/components/comments/MainComment.tsx b/packages/shared/src/components/comments/MainComment.tsx index 884b54f90c8..6c084772fe6 100644 --- a/packages/shared/src/components/comments/MainComment.tsx +++ b/packages/shared/src/components/comments/MainComment.tsx @@ -52,11 +52,13 @@ export interface MainCommentProps } const shouldShowBannerOnComment = ( - commentId: string, + commentId: string | undefined, comment: Comment, ): boolean => - commentId === comment.id || - (comment.children?.edges?.some(({ node }) => node.id === commentId) ?? false); + !!commentId && + (commentId === comment.id || + (comment.children?.edges?.some(({ node }) => node.id === commentId) ?? + false)); export default function MainComment({ className, @@ -95,8 +97,8 @@ export default function MainComment({ onReplyTo, } = useComments(props.post); const { inputProps: editProps, onEdit } = useEditCommentProps(); - - const replyCount = comment.children?.edges?.length ?? 0; + const commentChildren = comment.children?.edges ?? []; + const replyCount = commentChildren.length; const initialInView = !lazy; const { ref: inViewRef, inView } = useInView({ @@ -149,9 +151,7 @@ export default function MainComment({ parentId={comment.id} className={{ container: classNames( - comment.children?.edges?.length > 0 && - !isModalThread && - 'border-b', + commentChildren.length > 0 && !isModalThread && 'border-b', isModalThread && 'rounded-none border-0 bg-transparent px-0 pb-0 pt-0 hover:bg-transparent', ), @@ -165,7 +165,7 @@ export default function MainComment({ appendTooltipTo={appendTooltipTo} onComment={(selected, parentId) => onReplyTo({ - username: selected.author.username, + username: selected.author?.username ?? null, parentCommentId: parentId, commentId: selected.id, }) @@ -201,7 +201,7 @@ export default function MainComment({ post={props.post} onCommented={(...params) => { onEdit(null); - onCommented(...params); + onCommented?.(...params); }} onClose={() => onEdit(null)} className={{ input: className?.commentBox }} @@ -214,7 +214,7 @@ export default function MainComment({ post={props.post} onCommented={(...params) => { onReplyTo(null); - onCommented(...params); + onCommented?.(...params); }} onClose={() => onReplyTo(null)} className={{ input: className?.commentBox }} @@ -224,7 +224,7 @@ export default function MainComment({ )} {showJoinSquadBanner && ( )} {inView && replyCount > 0 && !areRepliesExpanded && ( setAreRepliesExpanded(true)} isThreadStyle={isModalThread} className={isModalThread ? 'ml-12 mt-3' : undefined} @@ -266,7 +266,7 @@ export default function MainComment({ Hide replies )} - {comment.children?.edges.map(({ node }, index) => ( + {commentChildren.map(({ node }, index) => ( ))} diff --git a/packages/shared/src/components/errors/SquadLoading.tsx b/packages/shared/src/components/errors/SquadLoading.tsx index 8f558573020..01e32ff94bc 100644 --- a/packages/shared/src/components/errors/SquadLoading.tsx +++ b/packages/shared/src/components/errors/SquadLoading.tsx @@ -36,7 +36,7 @@ function SquadLoading({ squad, sidebarRendered, }: { - squad: Pick; + squad?: Pick; sidebarRendered: boolean; }): ReactElement { return ( diff --git a/packages/shared/src/components/feeds/FeedContainer.tsx b/packages/shared/src/components/feeds/FeedContainer.tsx index 8a87db33438..d15174e127c 100644 --- a/packages/shared/src/components/feeds/FeedContainer.tsx +++ b/packages/shared/src/components/feeds/FeedContainer.tsx @@ -51,17 +51,19 @@ export interface FeedContainerProps { disableListWidthConstraint?: boolean; } -const listGaps = { +const listGaps: Record = { + eco: 'gap-2', cozy: 'gap-5', roomy: 'gap-3', }; -const gridGaps = { +const gridGaps: Record = { + eco: 'gap-8', cozy: 'gap-14', roomy: 'gap-12', }; -const cardListClass = { +const cardListClass: Partial> = { 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', @@ -81,6 +83,8 @@ export const getFeedGapPx = { 'gap-14': 56, }; +type FeedGapClass = keyof typeof getFeedGapPx; + /** * Returns the appropriate gap class based on layout mode and spaciness. * @param defaultGridGap - Optional override for grid gap (used by feature flags like feed_layout_v2) @@ -117,7 +121,7 @@ const cardClass = ({ if (isHorizontal) { return 'auto-cols-[calc((100%/var(--num-cards))-var(--feed-gap)-calc(var(--feed-gap)*+1)/var(--num-cards))] tablet:auto-cols-[calc((100%/var(--num-cards))-var(--feed-gap)-calc(var(--feed-gap)*-1)/var(--num-cards))]'; } - return isList ? 'grid-cols-1' : cardListClass[numberOfCards]; + return isList ? 'grid-cols-1' : cardListClass[numberOfCards] ?? 'grid-cols-1'; }; const getStyle = (isList: boolean, space: Spaciness): CSSProperties => { @@ -174,8 +178,9 @@ export const FeedContainer = ({ const { shouldUseListFeedLayout, isListMode } = useFeedLayout(); const isLaptop = useViewSize(ViewSize.Laptop); const { feedName } = useActiveFeedNameContext(); + const activeFeedName = feedName ?? SharedFeedPage.MyFeed; const { isAnyExplore, isExplorePopular, isExploreLatest } = useFeedName({ - feedName, + feedName: activeFeedName, }); const router = useRouter(); const effectiveSpaciness: Spaciness = isFeedLayoutV2 @@ -187,15 +192,13 @@ export const FeedContainer = ({ ? false : (isListMode && numCards > 1) || shouldUseListFeedLayout; const v2GridGap = isFeedLayoutV2 ? 'gap-4' : undefined; - const feedGapPx = - getFeedGapPx[ - gapClass({ - isList, - isFeedLayoutList: shouldUseListFeedLayout, - space: effectiveSpaciness, - defaultGridGap: v2GridGap, - }) - ]; + const feedGapClass = gapClass({ + isList, + isFeedLayoutList: shouldUseListFeedLayout, + space: effectiveSpaciness, + defaultGridGap: v2GridGap, + }) as FeedGapClass; + const feedGapPx = getFeedGapPx[feedGapClass]; const style = { '--num-cards': isHorizontal && isListMode && numCards >= 2 ? 2 : numCards, '--feed-gap': `${feedGapPx / 16}rem`, @@ -209,7 +212,7 @@ export const FeedContainer = ({ const { feeds } = useFeeds(); const feedHeading = useMemo(() => { - if (feedName === SharedFeedPage.Custom) { + if (activeFeedName === SharedFeedPage.Custom) { const customFeed = feeds?.edges.find( ({ node: feed }) => feed.id === router.query.slugOrId || @@ -221,16 +224,26 @@ export const FeedContainer = ({ } } - return feedNameToHeading[feedName] ?? ''; - }, [feeds, feedName, router.query.slugOrId]); + if (activeFeedName in feedNameToHeading) { + return feedNameToHeading[ + activeFeedName as keyof typeof feedNameToHeading + ]; + } + + return ''; + }, [activeFeedName, feeds, router.query.slugOrId]); const { getMarketingCta, clearMarketingCta } = useBoot(); const marketingCta = getMarketingCta(MarketingCtaVariant.FeedBanner); const { onUpload, status, shouldShow } = useUploadCv({ - onUploadSuccess: () => clearMarketingCta(marketingCta.campaignId), + onUploadSuccess: () => { + if (marketingCta) { + clearMarketingCta(marketingCta.campaignId); + } + }, }); const shouldShowBanner = - !!marketingCta && shouldShow && feedName === SharedFeedPage.MyFeed; + !!marketingCta && shouldShow && activeFeedName === SharedFeedPage.MyFeed; const clearMarketingCtaRef = useRef(clearMarketingCta); clearMarketingCtaRef.current = clearMarketingCta; @@ -267,21 +280,28 @@ export const FeedContainer = ({ 'mb-0': isList, 'mt-0 tablet:mt-4': !showBriefCard, }), - image: - isList && 'laptop:bottom-0 laptop:right-0 laptop:top-[unset]', + image: isList + ? 'laptop:bottom-0 laptop:right-0 laptop:top-[unset]' + : undefined, }} status={status} onUpload={onUpload} - onClose={() => clearMarketingCta(marketingCta.campaignId)} - banner={{ - title: marketingCta?.flags?.title, - description: marketingCta?.flags?.description, - cover: { - laptop: isList ? uploadCvBgTablet : uploadCvBgLaptop, - tablet: uploadCvBgTablet, - base: uploadCvBgMobile, - }, - }} + onClose={() => + marketingCta && clearMarketingCta(marketingCta.campaignId) + } + banner={ + marketingCta?.flags?.title && marketingCta?.flags?.description + ? { + title: marketingCta.flags.title, + description: marketingCta.flags.description, + cover: { + laptop: isList ? uploadCvBgTablet : uploadCvBgLaptop, + tablet: uploadCvBgTablet, + base: uploadCvBgMobile, + }, + } + : undefined + } targetId={TargetId.Feed} />
@@ -328,7 +348,7 @@ export const FeedContainer = ({ )} > ( {feedHeading} diff --git a/packages/shared/src/components/modals/post/BookmarkReminderModal.tsx b/packages/shared/src/components/modals/post/BookmarkReminderModal.tsx index 7e9158af2db..062499b4ee7 100644 --- a/packages/shared/src/components/modals/post/BookmarkReminderModal.tsx +++ b/packages/shared/src/components/modals/post/BookmarkReminderModal.tsx @@ -15,7 +15,6 @@ import { import type { Post } from '../../../graphql/posts'; import type { ActiveFeedContextValue } from '../../../contexts'; import { ActiveFeedContext } from '../../../contexts'; -import ConditionalWrapper from '../../ConditionalWrapper'; export interface BookmarkReminderProps extends LazyModalCommonProps { onReminderSet?: (reminder: string) => void; @@ -109,7 +108,7 @@ export const BookmarkReminderModal = ( postId: post.id, preference: selectedOption, }).then(() => { - onRequestClose(null); + onRequestClose(); }); }; @@ -161,17 +160,13 @@ export const BookmarkReminderModal = ( const ModalComponent: typeof BookmarkReminderModal = ({ feedContextData, ...props -}) => ( - ( - - {component} - - )} - > +}) => + feedContextData ? ( + + + + ) : ( - -); + ); export default ModalComponent; diff --git a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx index 59c1df29795..86fb73e4fe6 100644 --- a/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx +++ b/packages/shared/src/components/modals/streaks/StreakRecoverModal.tsx @@ -74,7 +74,8 @@ const StreakRecoveryCopy = ({ }) => { const { user } = useAuthContext(); const isFree = recover.cost === 0; - const canRecover = user.balance.amount >= recover.cost; + const balance = user?.balance.amount ?? 0; + const canRecover = balance >= recover.cost; const coresLink = ( ) => { const { user } = useAuthContext(); + const balance = user?.balance.amount ?? 0; return ( @@ -236,7 +238,7 @@ const StreakRecoverNotificationReminder = () => { export const StreakRecoverModal = ( props: StreakRecoverModalProps, -): ReactElement => { +): ReactElement | null => { const { isOpen, onRequestClose, onAfterClose, user } = props; const { isStreaksEnabled } = useReadingStreak(); const { isEnabled: isNotificationCtaExperimentEnabled } = diff --git a/packages/shared/src/components/notifications/Toast.tsx b/packages/shared/src/components/notifications/Toast.tsx index 1917700d720..f66eb232f0e 100644 --- a/packages/shared/src/components/notifications/Toast.tsx +++ b/packages/shared/src/components/notifications/Toast.tsx @@ -27,7 +27,7 @@ const Progress = classed(NotifProgress, styles.toastProgress); const Toast = ({ autoDismissNotifications = false, -}: ToastProps): ReactElement => { +}: ToastProps): ReactElement | null => { const router = useRouter(); const client = useQueryClient(); const toastRef = useRef(null); @@ -36,10 +36,12 @@ const Toast = ({ autoEndAnimation: autoDismissNotifications, onAnimationEnd: () => client.setQueryData(TOAST_NOTIF_KEY, null), }); - const { data: toast } = useQuery({ + const { data: toast = null } = useQuery({ queryKey: TOAST_NOTIF_KEY, - queryFn: () => client.getQueryData(TOAST_NOTIF_KEY), - enabled: false, + queryFn: () => + client.getQueryData(TOAST_NOTIF_KEY) ?? null, + initialData: () => + client.getQueryData(TOAST_NOTIF_KEY) ?? null, }); const isPersistentToast = !!toast?.persistent; @@ -127,7 +129,7 @@ const Toast = ({ return ( diff --git a/packages/shared/src/components/post/PostActions.tsx b/packages/shared/src/components/post/PostActions.tsx index f338a3f38a4..b47286925be 100644 --- a/packages/shared/src/components/post/PostActions.tsx +++ b/packages/shared/src/components/post/PostActions.tsx @@ -68,11 +68,11 @@ export function PostActions({ const actionsRef = useRef(null); const canAward = useCanAwardUser({ sendingUser: user, - receivingUser: post.author as LoggedUser, + receivingUser: post.author as LoggedUser | undefined, }); const { subscribe } = useContentPreference(); const { data: creatorContentPreference } = useContentPreferenceStatusQuery({ - id: creator?.id, + id: creator?.id ?? '', entity: ContentPreferenceType.User, }); const shouldRenderNotificationCta = @@ -143,11 +143,11 @@ export function PostActions({ }); mutationQueryClient.invalidateQueries({ - queryKey: generateQueryKey(RequestKey.Products, null, 'summary'), + queryKey: generateQueryKey(RequestKey.Products, undefined, 'summary'), }); mutationQueryClient.invalidateQueries({ - queryKey: generateQueryKey(RequestKey.Awards, null, { + queryKey: generateQueryKey(RequestKey.Awards, undefined, { id: entityId, type, }), @@ -163,6 +163,10 @@ export function PostActions({ (item) => item.node.id === productId, )?.node; + if (!post.userState || awardProduct?.value === undefined) { + return; + } + updatePostCache(mutationQueryClient, post.id, { userState: { ...post.userState, @@ -298,10 +302,15 @@ export function PostActions({ pressed={post?.userState?.awarded} onClick={() => { if (!user) { - return showLogin({ trigger: AuthTriggers.GiveAward }); + showLogin({ trigger: AuthTriggers.GiveAward }); + return; + } + + if (!post.author) { + return; } - return openModal({ + openModal({ type: LazyModal.GiveAward, props: { type: 'POST', @@ -338,7 +347,7 @@ export function PostActions({
onCopyLinkClick(post)} + onClick={() => onCopyLinkClick?.(post)} icon={} variant={ButtonVariant.Tertiary} className={classNames( diff --git a/packages/shared/src/components/post/PostWidgets.tsx b/packages/shared/src/components/post/PostWidgets.tsx index 8fa1a357965..cbfdc35008b 100644 --- a/packages/shared/src/components/post/PostWidgets.tsx +++ b/packages/shared/src/components/post/PostWidgets.tsx @@ -49,30 +49,38 @@ export function PostWidgets({ origin, }: PostWidgetsProps): ReactElement { const { tokenRefreshed } = useContext(AuthContext); + const { source } = post; const cardClasses = 'w-full bg-transparent'; const creator = post.author || post.scout; + let sourceCard = null; + + if (source?.type === SourceType.Squad) { + sourceCard = ( + + ); + } else if (source) { + sourceCard = ( + + ); + } return ( - {post.source.type === SourceType.Squad ? ( - - ) : ( - - )} + {sourceCard} {creator && ( @@ -46,7 +48,7 @@ export function SquadPostWidgets({ className={{ container: cardClasses, }} - source={post.source as SourceTooltip} + source={source as SourceTooltip} /> ))} {!!post.author && ( diff --git a/packages/shared/src/components/squads/SquadPageHeader.tsx b/packages/shared/src/components/squads/SquadPageHeader.tsx index 5f5c6972d78..7b0c61a342d 100644 --- a/packages/shared/src/components/squads/SquadPageHeader.tsx +++ b/packages/shared/src/components/squads/SquadPageHeader.tsx @@ -50,6 +50,7 @@ export function SquadPageHeader({ const { openModal } = useLazyModal(); const allowedToPost = verifyPermission(squad, SourcePermissions.Post); const { category } = squad; + const squadId = squad.id ?? ''; const isSquadMember = !!squad.currentMember; const createdAt = squad.createdAt @@ -111,9 +112,12 @@ export function SquadPageHeader({
{component}
)} > - - - + + + {squad.flags?.totalAwards ? ( { @@ -121,7 +125,7 @@ export function SquadPageHeader({ type: LazyModal.ListAwards, props: { queryProps: { - id: squad.id, + id: squadId, type: 'SQUAD', }, }, diff --git a/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx b/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx index 81a2c495f41..dc1fe8f4006 100644 --- a/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx +++ b/packages/shared/src/components/streak/popup/ReadingStreakPopup.tsx @@ -110,16 +110,19 @@ interface ReadingStreakPopupProps { export function ReadingStreakPopup({ streak, fullWidth, -}: ReadingStreakPopupProps): ReactElement { +}: ReadingStreakPopupProps): ReactElement | null { const router = useRouter(); const { flags, updateFlag } = useSettingsContext(); const isMobile = useViewSize(ViewSize.MobileL); const { user } = useAuthContext(); const { completeAction } = useActions(); + const userId = user?.id; + const timezone = user?.timezone ?? DEFAULT_TIMEZONE; const { data: history } = useQuery({ queryKey: generateQueryKey(RequestKey.ReadingStreak30Days, user), - queryFn: () => getReadingStreak30Days(user?.id), + queryFn: () => getReadingStreak30Days(userId ?? ''), staleTime: StaleTime.Default, + enabled: !!userId, }); const isTimezoneOk = useStreakTimezoneOk(); const { showPrompt } = usePrompt(); @@ -144,14 +147,14 @@ export function ReadingStreakPopup({ const streakDays = getStreakDays(today); return streakDays.map((value) => { - const isToday = isSameDayInTimezone(value, today, user?.timezone); + const isToday = isSameDayInTimezone(value, today, timezone); const streakDef = getStreak({ value, today, history, startOfWeek: streak.weekStart, - timezone: user?.timezone, + timezone, }); return ( @@ -163,7 +166,7 @@ export function ReadingStreakPopup({ /> ); }); - }, [history, streak.weekStart, user?.timezone]); + }, [history, streak.weekStart, timezone]); const onTogglePush = async () => { logEvent({ @@ -260,7 +263,7 @@ export function ReadingStreakPopup({ const promptResult = await showPrompt({ title: 'Streak timezone mismatch', description: `We detected your current timezone setting ${getTimezoneOffsetLabel( - user?.timezone, + timezone, )} does not match your current device timezone ${getTimezoneOffsetLabel( deviceTimezone, )}. You can update your timezone in settings.`, @@ -294,9 +297,7 @@ export function ReadingStreakPopup({ }} href={timezoneSettingsUrl} > - {isTimezoneOk - ? user?.timezone || DEFAULT_TIMEZONE - : 'Timezone mismatch'} + {isTimezoneOk ? timezone : 'Timezone mismatch'}

diff --git a/packages/shared/src/contexts/ActiveFeedContext.tsx b/packages/shared/src/contexts/ActiveFeedContext.tsx index 51afdcae1e6..e4832c2415f 100644 --- a/packages/shared/src/contexts/ActiveFeedContext.tsx +++ b/packages/shared/src/contexts/ActiveFeedContext.tsx @@ -6,7 +6,12 @@ import type { Origin } from '../lib/log'; export type ActiveFeedContextValue = { queryKey?: QueryKey; items: FeedReturnType['items']; - logOpts?: { columns: number; row: number; column: number; is_ad?: boolean }; + logOpts?: { + columns: number; + row?: number; + column?: number; + is_ad?: boolean; + }; allowPin?: boolean; origin?: Origin; onRemovePost?: (postIndex: number) => void; diff --git a/packages/shared/src/hooks/feed/useFeedContextMenu.ts b/packages/shared/src/hooks/feed/useFeedContextMenu.ts index 4ad64bfa92c..0a976fda91b 100644 --- a/packages/shared/src/hooks/feed/useFeedContextMenu.ts +++ b/packages/shared/src/hooks/feed/useFeedContextMenu.ts @@ -4,8 +4,8 @@ import type { Post } from '../../graphql/posts'; export type PostLocation = { index: number; - row: number; - column: number; + row?: number; + column?: number; isAd?: boolean; }; @@ -23,13 +23,14 @@ type FeedContextMenu = { row: number, column: number, ) => void; - postMenuIndex: number; - postMenuLocation: PostLocation; - setPostMenuIndex: (value: PostLocation | undefined) => void; + postMenuIndex?: number; + postMenuLocation?: PostLocation | null; + setPostMenuIndex: (value?: PostLocation | null) => void; }; export default function useFeedContextMenu(): FeedContextMenu { - const [postMenuLocation, setPostMenuLocation] = useState(); + const [postMenuLocation, setPostMenuLocation] = + useState(); const postMenuIndex = postMenuLocation?.index; const onMenuClick = ( diff --git a/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx b/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx index c857bccf08b..fda4ed37b1f 100644 --- a/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx +++ b/packages/shared/src/hooks/notifications/usePushNotificationMutation.tsx @@ -107,7 +107,7 @@ export const usePushNotificationMutation = ({ [isSubscribed, onEnablePush, unsubscribe], ); - useEventListener(globalThis, 'message', async (e) => { + useEventListener(window, 'message', async (e) => { const { permission }: PermissionEvent = e?.data ?? {}; const earlyReturnChecks = [ e.data?.eventKey !== ENABLE_NOTIFICATION_WINDOW_KEY, diff --git a/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx b/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx index 37040c250e9..1c61dd86287 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx +++ b/packages/shared/src/hooks/notifications/useReadingReminderHero.spec.tsx @@ -38,14 +38,14 @@ jest.mock('../usePersistentContext', () => ({ PersistentContextKeys: { ReadingReminderLastSeen: 'reading_reminder_last_seen', }, - default: (...args) => mockPersistentContext(...args), + default: (...args: unknown[]) => mockPersistentContext(...args), })); jest.mock('../useViewSize', () => ({ ViewSize: { MobileL: 767, }, - useViewSize: (...args) => mockUseViewSize(...args), + useViewSize: (...args: unknown[]) => mockUseViewSize(...args), })); jest.mock('./usePushNotificationMutation', () => ({ diff --git a/packages/shared/src/hooks/post/common.ts b/packages/shared/src/hooks/post/common.ts index 0a74f311682..393cc332f6d 100644 --- a/packages/shared/src/hooks/post/common.ts +++ b/packages/shared/src/hooks/post/common.ts @@ -2,10 +2,10 @@ import type { CommentMarkdownInputProps } from '../../components/fields/Markdown export interface CommentWriteProps { commentId: string; - parentCommentId?: string; + parentCommentId?: string | null; lastUpdatedAt?: string; } export interface CommentWrite { - inputProps: Partial; + inputProps: Partial | null; } diff --git a/packages/shared/src/hooks/post/useComments.ts b/packages/shared/src/hooks/post/useComments.ts index 6ef9de7e1c9..cd7b6db9a1e 100644 --- a/packages/shared/src/hooks/post/useComments.ts +++ b/packages/shared/src/hooks/post/useComments.ts @@ -10,12 +10,12 @@ import { AuthTriggers } from '../../lib/auth'; import type { CommentWrite, CommentWriteProps } from './common'; interface ReplyTo extends CommentWriteProps { - username: string; + username: string | null; } interface UseComments extends CommentWrite { - commentId: string; - onReplyTo: (params: ReplyTo) => void; + commentId: string | null; + onReplyTo: (params: ReplyTo | null) => void; } export const getReplyToInitialContent = ( @@ -26,7 +26,7 @@ export const useComments = (post: Post): UseComments => { const { logEvent } = useLogContext(); const { logOpts } = useActiveFeedContext(); const { user, showLogin } = useAuthContext(); - const [replyTo, setReplyTo] = useState(null); + const [replyTo, setReplyTo] = useState(null); const inputProps = useMemo(() => { if (!replyTo) { @@ -36,14 +36,14 @@ export const useComments = (post: Post): UseComments => { const { username, parentCommentId } = replyTo ?? {}; return { - parentCommentId, - replyTo: username, - initialContent: getReplyToInitialContent(username), + ...(parentCommentId ? { parentCommentId } : {}), + ...(username ? { replyTo: username } : {}), + initialContent: getReplyToInitialContent(username ?? undefined), }; }, [replyTo]); const onReplyTo = useCallback( - (params: ReplyTo) => { + (params: ReplyTo | null) => { if (!user) { return showLogin({ trigger: AuthTriggers.Comment }); } @@ -73,6 +73,6 @@ export const useComments = (post: Post): UseComments => { return { onReplyTo, inputProps, - commentId: replyTo?.commentId, + commentId: replyTo?.commentId ?? null, }; }; diff --git a/packages/shared/src/hooks/post/useEditCommentProps.ts b/packages/shared/src/hooks/post/useEditCommentProps.ts index 1f35c41571c..0720e250476 100644 --- a/packages/shared/src/hooks/post/useEditCommentProps.ts +++ b/packages/shared/src/hooks/post/useEditCommentProps.ts @@ -3,13 +3,13 @@ import type { CommentWrite, CommentWriteProps } from './common'; import useCommentById from '../comments/useCommentById'; interface UseCommentEdit extends CommentWrite { - onEdit: (params: CommentWriteProps) => void; + onEdit: (params: CommentWriteProps | null) => void; } export const useEditCommentProps = (): UseCommentEdit => { - const [state, setState] = useState(); + const [state, setState] = useState(null); const { commentId: id } = state ?? {}; - const { comment, onEdit } = useCommentById({ id }); + const { comment, onEdit } = useCommentById({ id: id ?? '' }); const inputProps = useMemo(() => { if (!state || !comment) { @@ -18,8 +18,10 @@ export const useEditCommentProps = (): UseCommentEdit => { return { editCommentId: state.commentId, - parentCommentId: state.parentCommentId, - initialContent: comment?.content, + ...(state.parentCommentId + ? { parentCommentId: state.parentCommentId } + : {}), + ...(comment?.content ? { initialContent: comment.content } : {}), }; }, [comment, state]); diff --git a/packages/shared/src/hooks/source/useSourceActionsNotify.ts b/packages/shared/src/hooks/source/useSourceActionsNotify.ts index 06ca9dbff99..315fe779dd6 100644 --- a/packages/shared/src/hooks/source/useSourceActionsNotify.ts +++ b/packages/shared/src/hooks/source/useSourceActionsNotify.ts @@ -12,7 +12,7 @@ import { import { useToastNotification } from '../useToastNotification'; export type UseSourceSubscriptionProps = { - source: Pick | Source; + source?: Pick | Source | null; }; export type UseSourceSubscription = { @@ -61,7 +61,8 @@ export const useSourceActionsNotify = ({ target_type: TargetType.Source, }); - const displayName = 'name' in source ? source.name : source?.id; + const displayName = + source && 'name' in source && source.name ? source.name : source?.id; displayToast( notifications.isSubscribed diff --git a/packages/shared/src/hooks/useCoresFeature.ts b/packages/shared/src/hooks/useCoresFeature.ts index 6628443aa16..f09913e56e8 100644 --- a/packages/shared/src/hooks/useCoresFeature.ts +++ b/packages/shared/src/hooks/useCoresFeature.ts @@ -1,17 +1,17 @@ import { useAuthContext } from '../contexts/AuthContext'; import { canAwardUser, hasAccessToCores } from '../lib/cores'; -import type { PropsParameters } from '../types'; import { useIsSpecialUser } from './auth/useIsSpecialUser'; import { iOSSupportsCoresPurchase } from '../lib/ios'; import { isIOSNative } from '../lib/func'; import type { Squad, SourceMember } from '../graphql/sources'; import { SourceMemberRole } from '../graphql/sources'; import type { LoggedUser, UserShortProfile } from '../lib/user'; +import { CoresRole } from '../lib/user'; const useCoresFeature = (): boolean => { const { user } = useAuthContext(); - return !!user && user.coresRole > 0; + return !!user && (user.coresRole ?? CoresRole.None) > CoresRole.None; }; export const useHasAccessToCores = (): boolean => { @@ -19,17 +19,30 @@ export const useHasAccessToCores = (): boolean => { const hasAccess = useCoresFeature(); - return hasAccess && hasAccessToCores(user); + return hasAccess && !!user && hasAccessToCores(user); }; -export const useCanAwardUser = ( - props: PropsParameters, -): boolean => { - const isSpecialUser = useIsSpecialUser({ userId: props.receivingUser?.id }); +interface UseCanAwardUserProps { + sendingUser?: LoggedUser; + receivingUser?: LoggedUser; +} + +export const useCanAwardUser = (props: UseCanAwardUserProps): boolean => { + const isSpecialUser = useIsSpecialUser({ + userId: props.receivingUser?.id ?? '', + }); const hasAccess = useCoresFeature(); - return hasAccess && !isSpecialUser && canAwardUser(props); + if (!props.sendingUser || !props.receivingUser) { + return false; + } + + const { sendingUser, receivingUser } = props; + + return ( + hasAccess && !isSpecialUser && canAwardUser({ sendingUser, receivingUser }) + ); }; interface UseGetSquadAwardAdminProps { diff --git a/packages/shared/src/hooks/useSourceMenuProps.tsx b/packages/shared/src/hooks/useSourceMenuProps.tsx index b81d825c56f..502d6d80522 100644 --- a/packages/shared/src/hooks/useSourceMenuProps.tsx +++ b/packages/shared/src/hooks/useSourceMenuProps.tsx @@ -11,19 +11,27 @@ const useSourceMenuProps = ({ source, feedId, }: { - source: SourceTooltip; + source?: SourceTooltip | null; feedId?: string; }) => { const router = useRouter(); const { follow, unfollow } = useContentPreference(); const onCreateNewFeed = () => { + if (!source?.id) { + return; + } + router.push( `${webappUrl}feeds/new?entityId=${source.id}&entityType=${ContentPreferenceType.Source}`, ); }; const onUndo = () => { + if (!source?.id || !source.handle) { + return; + } + unfollow({ id: source.id, entity: ContentPreferenceType.Source, @@ -33,6 +41,10 @@ const useSourceMenuProps = ({ }; const onAdd = () => { + if (!source?.id || !source.handle) { + return; + } + follow({ id: source.id, entity: ContentPreferenceType.Source, @@ -42,12 +54,14 @@ const useSourceMenuProps = ({ }; const shareProps: UseShareOrCopyLinkProps = { - text: `Check out ${source.handle} on daily.dev`, - link: source.permalink, + text: source?.handle + ? `Check out ${source.handle} on daily.dev` + : 'Check out this source on daily.dev', + link: source?.permalink || webappUrl, cid: ReferralCampaignKey.ShareSource, logObject: () => ({ event_name: LogEvent.ShareSource, - target_id: source.id, + ...(source?.id ? { target_id: source.id } : {}), }), }; diff --git a/packages/webapp/pages/squads/[handle]/index.tsx b/packages/webapp/pages/squads/[handle]/index.tsx index 509342ec0d2..abf0f82c5fe 100644 --- a/packages/webapp/pages/squads/[handle]/index.tsx +++ b/packages/webapp/pages/squads/[handle]/index.tsx @@ -25,9 +25,7 @@ import { import type { BasicSourceMember, Squad, - Source, } from '@dailydotdev/shared/src/graphql/sources'; -import { SourceType } from '@dailydotdev/shared/src/graphql/sources'; import Unauthorized from '@dailydotdev/shared/src/components/errors/Unauthorized'; import { useQuery } from '@tanstack/react-query'; import { @@ -268,7 +266,7 @@ const SquadPage = ({ const { data: squadMembers } = useQuery({ queryKey: ['squadMembersInitial', handle], - queryFn: () => getSquadMembers(squadId), + queryFn: () => getSquadMembers(squadId ?? ''), enabled: isBootFetched && !!squadId, staleTime: StaleTime.OneHour, }); @@ -359,7 +357,7 @@ const SquadPage = ({
@@ -402,7 +400,12 @@ export async function getServerSideProps({ }: GetServerSidePropsContext): Promise< GetServerSidePropsResult > { - const { handle } = params; + const handle = params?.handle; + if (!handle) { + return { + notFound: true, + }; + } const { userid: userId, cid: campaign } = query; const setCacheHeader = () => { @@ -413,43 +416,23 @@ export async function getServerSideProps({ }; try { - const promises: [Promise, Promise?] = [ + const referringUserPromise = + userId && campaign + ? gqlClient + .request<{ user: SourcePageProps['referringUser'] }>( + GET_REFERRING_USER_QUERY, + { + id: userId, + }, + ) + .then((data) => data?.user) + .catch(() => undefined) + : Promise.resolve(undefined); + + const [squad, referringUser] = await Promise.all([ getSquadStaticFields(handle), - ]; - - if (userId && campaign) { - promises.push( - gqlClient - .request<{ user: SourcePageProps['referringUser'] }>( - GET_REFERRING_USER_QUERY, - { - id: userId, - }, - ) - .then((data) => data?.user) - .catch(() => undefined), - ); - } - - const [squad, referringUser] = await Promise.all(promises); - - if (squad?.type === SourceType.User) { - return { - redirect: { - destination: `/${squad.id}`, - permanent: false, - }, - }; - } - - if (squad?.type === SourceType.Machine) { - return { - redirect: { - destination: `/sources/${handle}`, - permanent: false, - }, - }; - } + referringUserPromise, + ]); setCacheHeader(); @@ -474,7 +457,7 @@ export async function getServerSideProps({ seo, handle, initialData: squad as Squad, - referringUser: referringUser || null, + referringUser: referringUser ?? undefined, ...(squad.public && { jsonLd: getSquadPageJsonLd(squad as SquadStaticData), }), From c8896f5776d7aaf220e5cdf6dcb0a12f24924338 Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Thu, 19 Mar 2026 11:57:41 +0200 Subject: [PATCH 30/34] fix: guard notification listener during SSR --- AGENTS.md | 447 +----------------- .../usePushNotificationMutation.tsx | 36 +- 2 files changed, 22 insertions(+), 461 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 9c5bc0b8969..7a3b889ad1f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,446 +1,3 @@ -# AGENTS.md +# CLAUDE.md -This file provides guidance to AI coding agents when working with code in this repository. - -## Development Philosophy - -We're a startup. We move fast, iterate quickly, and embrace change. When implementing features: -- Favor pragmatic solutions over perfect architecture -- Code will likely change - don't over-engineer -- A/B experiments are common (GrowthBook integration) -- Test coverage isn't a goal - write tests that validate functionality, not hit metrics - -## Code Style - -**Control flow:** -- Use early returns instead of if-else blocks for cleaner, flatter code -- Handle the errors or checks first and return early then proceed with happy path at the end of code block - -**Invariant handling:** -- Do not silently ignore impossible states (for example, no-op rollback fallbacks in mutation/cache flows) -- Fail fast with a clear thrown error message when an internal invariant is violated - -**Drag-and-drop UI:** -- Do not render owner-visible empty drag containers or empty categories unless the product requirement explicitly asks for visible empty drop targets -- Any drag overlay or tooltip that reads async query data must defensively handle `undefined`/empty arrays without crashing - -## Project Architecture - -This is a pnpm monorepo containing the daily.dev application suite: - -| Package | Purpose | -|---------|---------| -| `packages/webapp` | Next.js web application (main daily.dev site) | -| `packages/extension` | Browser extension (Chrome/Opera) built with Webpack | -| `packages/shared` | Shared React components, hooks, utilities, and design system | -| `packages/storybook` | Component documentation and development environment | -| `packages/eslint-config` | Shared ESLint configuration | -| `packages/eslint-rules` | Custom ESLint rules including color consistency enforcement | -| `packages/prettier-config` | Shared Prettier configuration | - -## Technology Stack - -- **Node.js v24.14** (see `package.json` `volta` and `packageManager` properties, also `.nvmrc`) -- **pnpm 9.14.4** for package management (see `package.json` `packageManager` property) -- **TypeScript** across all packages -- **React 18.3.1** with Next.js 15 for webapp (Pages Router, NOT App Router/Server Components) -- **TanStack Query v5** for server state and data fetching -- **GraphQL** with graphql-request for API communication -- **Tailwind CSS** with custom design system -- **Jest** for testing -- **GrowthBook** for feature flags and A/B experiments - -## Commonly Used Imports - -### Components -```typescript -// Buttons (variants: Primary, Secondary, Tertiary, Float, Subtle, Option, Quiz) -import { Button, ButtonVariant, ButtonSize } from '@dailydotdev/shared/src/components/buttons/Button'; -import { ClickableText } from '@dailydotdev/shared/src/components/buttons/ClickableText'; - -// Typography -import { Typography, TypographyType, TypographyColor } from '@dailydotdev/shared/src/components/typography/Typography'; - -// Form Fields -import { TextField } from '@dailydotdev/shared/src/components/fields/TextField'; -import { Switch } from '@dailydotdev/shared/src/components/fields/Switch'; -import { Checkbox } from '@dailydotdev/shared/src/components/fields/Checkbox'; -import { Radio } from '@dailydotdev/shared/src/components/fields/Radio'; - -// Layout & Utilities -import { FlexCol, FlexRow } from '@dailydotdev/shared/src/components/utilities'; -import Link from '@dailydotdev/shared/src/components/utilities/Link'; - -// Icons (500+ available) -import { PlusIcon, ShareIcon, UpvoteIcon } from '@dailydotdev/shared/src/components/icons'; -import { IconSize } from '@dailydotdev/shared/src/components/Icon'; - -// Modals -import { LazyModal } from '@dailydotdev/shared/src/components/modals/common/types'; - -// Feedback -import { Loader } from '@dailydotdev/shared/src/components/Loader'; -import Toast from '@dailydotdev/shared/src/components/notifications/Toast'; -import { Tooltip } from '@dailydotdev/shared/src/components/tooltip/Tooltip'; -``` - -### Hooks -```typescript -// Most commonly used -import { useViewSize, ViewSize } from '@dailydotdev/shared/src/hooks'; -import { useLazyModal } from '@dailydotdev/shared/src/hooks/useLazyModal'; -import { useToastNotification } from '@dailydotdev/shared/src/hooks/useToastNotification'; -import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature'; -import { useFeedLayout } from '@dailydotdev/shared/src/hooks/useFeedLayout'; -import { usePrompt } from '@dailydotdev/shared/src/hooks/usePrompt'; - -// Actions & State -import { useActions, usePlusSubscription } from '@dailydotdev/shared/src/hooks'; -import useFeedSettings from '@dailydotdev/shared/src/hooks/useFeedSettings'; -``` - -### Contexts -```typescript -import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext'; -import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext'; -import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsContext'; -import { useNotificationContext } from '@dailydotdev/shared/src/contexts/NotificationsContext'; -``` - -### GraphQL Types -```typescript -import type { Post, PostType } from '@dailydotdev/shared/src/graphql/posts'; -import type { Source, SourceType } from '@dailydotdev/shared/src/graphql/sources'; -import { gqlClient } from '@dailydotdev/shared/src/graphql/common'; -import { ActionType } from '@dailydotdev/shared/src/graphql/actions'; -``` - -### Utilities -```typescript -import type { LoggedUser } from '@dailydotdev/shared/src/lib/user'; -import { LogEvent, Origin } from '@dailydotdev/shared/src/lib/log'; -import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth'; -import { webappUrl } from '@dailydotdev/shared/src/lib/constants'; -import classed from '@dailydotdev/shared/src/lib/classed'; - -// String utilities -import { stripHtmlTags, capitalize, formatKeyword } from '@dailydotdev/shared/src/lib/strings'; -``` - -### Forms (react-hook-form + Zod) -```typescript -import { useForm, FormProvider } from 'react-hook-form'; -import { z } from 'zod'; -import { zodResolver } from '@hookform/resolvers/zod'; - -// Controlled components (use within FormProvider) -import ControlledTextField from '@dailydotdev/shared/src/components/fields/ControlledTextField'; -import ControlledTextarea from '@dailydotdev/shared/src/components/fields/ControlledTextarea'; -import ControlledSwitch from '@dailydotdev/shared/src/components/fields/ControlledSwitch'; -``` - -**IMPORTANT - Zod Type Inference:** -- **ALWAYS use `z.infer` to derive TypeScript types from Zod schemas** -- **NEVER manually define types that duplicate Zod schema structure** - -```typescript -// ❌ WRONG: Manual type definition that duplicates schema -const userSchema = z.object({ - name: z.string(), - age: z.number(), -}); - -interface User { - name: string; - age: number; -} - -// ✅ RIGHT: Infer type from schema -const userSchema = z.object({ - name: z.string(), - age: z.number(), -}); - -export type User = z.infer; -``` - -This ensures type safety, reduces duplication, and keeps types automatically in sync with schemas. - -## Quick Commands - -```bash -# Setup -nvm use # Use correct Node version from .nvmrc -npm i -g pnpm@9.14.4 -pnpm install - -# Development -pnpm --filter webapp dev # Run webapp (HTTPS) -pnpm --filter webapp dev:notls # Run webapp (HTTP) -pnpm --filter extension dev:chrome # Run Chrome extension -pnpm --filter storybook dev # Run Storybook - -# Testing & Linting -pnpm --filter test # Run tests -pnpm --filter lint # Run linter -pnpm --filter lint:fix # Fix lint issues - -# Building for production -pnpm --filter webapp build # Build webapp -pnpm --filter extension build:chrome # Build Chrome extension -``` - -**IMPORTANT**: Do NOT run `build` commands while the dev server is running - it will break hot reload. Only run builds at the end to verify your work compiles successfully. During development, rely on the dev server's hot reload and TypeScript/ESLint checks instead. - -## Where Should I Put This Code? - -``` -Is it used by both webapp AND extension? -├── Yes → packages/shared/ -│ ├── Is it a React component? → src/components/ -│ ├── Is it a custom hook? → src/hooks/ -│ ├── Is it a GraphQL query/mutation? → src/graphql/ -│ ├── Is it a complex feature with multiple files? → src/features/ -│ ├── Is it a React context? → src/contexts/ -│ └── Is it a utility function? → src/lib/ -├── No, webapp only → packages/webapp/ -│ ├── Is it a page? → pages/ -│ ├── Is it a layout? → components/layouts/ -│ └── Is it webapp-specific logic? → components/ or hooks/ -└── No, extension only → packages/extension/src/ - ├── Is it for new tab? → newtab/ - ├── Is it for companion widget? → companion/ - └── Is it background logic? → background/ -``` - -## State Management Guide - -| Use Case | Solution | -|----------|----------| -| Server data (API responses) | TanStack Query | -| Global app state (user, settings) | React Context | -| Local/UI state | useState | -| Form state | react-hook-form + Zod validation | - -**Note**: TanStack Query v5 uses `isPending` for mutations (not `isLoading`). - -## Design System Quick Reference - -- **Colors**: Food-themed palette (burger, cheese, avocado, bacon, etc.) -- **Use semantic tokens**: `text-primary`, `bg-surface-primary`, not raw colors -- **Typography**: Use `typo-*` classes (typo-title1, typo-body, typo-callout) -- **Responsive**: mobileL, mobileXL, tablet, laptop, laptopL, desktop -- **ESLint enforces** `no-custom-color` rule - use design system tokens -- For dismissible banners/cards, default to the shared `CloseButton` icon pattern used elsewhere; do not introduce a separate full-width `Dismiss` button unless the request explicitly calls for text dismiss UI. - -## Testing Approach - -We write tests to validate functionality, not to achieve coverage metrics: -- Focus on user interactions with React Testing Library -- Mock API responses with `nock` -- Test files live next to source: `Component.spec.tsx` -- Run tests: `pnpm --filter test` -- For hover/tooltip changes on navigation, verify the real interactive hover target is wrapped by the tooltip component. Do not treat a native `title` fallback as a substitute for the requested tooltip behavior unless the user explicitly asks for that fallback. - -## Feature Flags & Experiments - -GrowthBook is integrated for A/B testing. Define features in `packages/shared/src/lib/featureManagement.ts`: -```typescript -export const featureMyFlag = new Feature('my_flag', false); -``` - -Use `useConditionalFeature` with `shouldEvaluate` to gate evaluation — only evaluate the flag when the component would otherwise render (e.g., user is authenticated and Plus). This avoids unnecessary GrowthBook evaluations: -```typescript -import { useConditionalFeature } from '@dailydotdev/shared/src/hooks'; -import { featureMyFlag } from '../../lib/featureManagement'; - -const shouldEvaluate = isAuthReady && isPlus; -const { value: isEnabled } = useConditionalFeature({ - feature: featureMyFlag, - shouldEvaluate, -}); -const showComponent = shouldEvaluate && isEnabled; -``` - -## Key Configuration Files - -- `pnpm-workspace.yaml` - Monorepo workspace packages -- `packages/webapp/next.config.ts` - Next.js configuration -- `packages/shared/tailwind.config.ts` - Base Tailwind configuration -- `packages/extension/webpack.config.js` - Extension build configuration - -## Package-Specific Guides - -Each package has its own AGENTS.md with detailed guidance: -- `packages/shared/AGENTS.md` - Shared components, hooks, design system -- `packages/webapp/AGENTS.md` - Next.js webapp specifics -- `packages/extension/AGENTS.md` - Browser extension development -- `packages/storybook/AGENTS.md` - Component documentation -- `packages/playwright/AGENTS.md` - E2E testing with Playwright - -## Adding Content to Existing Pages - -When adding new content (videos, images, text blocks) to existing pages: -- **Study the page structure first** - Identify existing sections and their purpose -- **Integrate into existing components** rather than creating new wrapper components -- **Avoid duplicating section headers** - If a page has "How it works", don't add "See how it works" -- **Extend existing components** - Add content to the relevant existing component instead of creating parallel components - -Example: Adding a video to the jobs page -- ❌ Wrong: Create new `OpportunityVideo` component with its own "See how it works" title -- ✅ Right: Add the video embed inside the existing `OpportunityHowItWorks` component - -## Development Notes - -- Extension uses `webextension-polyfill` for cross-browser compatibility -- SVG imports are converted to React components via `@svgr/webpack` -- Tailwind utilities preferred over CSS-in-JS -- GraphQL schema changes require manual TypeScript type updates -## No Barrel/Index Exports - -**NEVER create `index.ts` files that re-export from other files.** Barrel exports cause dependency cycles and hurt build performance. - -```typescript -// ❌ NEVER do this - no index.ts barrel files -// hooks/index.ts -export * from './useAuth'; -export * from './useUser'; - -// ❌ NEVER import from barrel -import { useAuth } from './hooks'; - -// ✅ ALWAYS import directly from the file -import { useAuth } from './hooks/useAuth'; -import { useUser } from './hooks/useUser'; -``` - -When you see an existing barrel file, delete it and update all imports to use direct paths. - -## Avoiding Code Duplication - -**NEVER copy-paste utility functions into multiple files.** If a helper is needed in more than one place, add it to a shared utility file and import it. Do not define the same function locally in each file that needs it. - -Before implementing new functionality, always check if similar code already exists: - -1. **Search for existing utilities** - Use Grep/Glob to find similar patterns: - ```bash - # Search for similar function names - grep -r "functionName" packages/shared/src/lib - - # Search for similar logic patterns - grep -r "specific_pattern" packages/ - ``` - -2. **Check shared libraries first**: - - `packages/shared/src/lib/func.ts` - General utility functions - - `packages/shared/src/lib/strings.ts` - String manipulation, text utilities - - `packages/shared/src/lib/links.ts` - URL and link utilities - - `packages/shared/src/lib/[domain].ts` - Domain-specific utilities - -3. **Extract reusable functions**: - - If you write similar logic in multiple places, extract it to a helper - - If the logic is used only in one package → package-specific file - - If the logic could be used across packages → `packages/shared/src/lib/` - - Don't extract single-use code into separate functions - keep logic inline where it's used - - Only extract functions when the same logic is needed in multiple places - -4. **Real-world example** (from PostSEOSchema refactor): - - ❌ **Wrong**: Duplicate author schema logic in 3 places - - ✅ **Right**: Create `getPersonSchema()` helper, reuse everywhere - - ❌ **Wrong**: Local `stripHtml()` in webapp-only file - - ✅ **Right**: Move to `shared/src/lib/strings.ts` as `stripHtmlTags()` - -5. **Before submitting a PR**: - - Search for similar patterns in the codebase - - Refactor duplications into reusable functions - - Place utilities in appropriate shared locations - - Run lint to ensure code quality: `pnpm --filter lint` - -## Writing Readable Hooks - -When a hook's callback becomes hard to follow, break it into small helper functions: - -1. **Extract repeated selectors** to constants -2. **Create single-purpose helpers** - each function does one thing -3. **Name helpers by what they do** - `expandSectionIfCollapsed`, `focusFirstInput` -4. **Keep the main callback simple** - it should read like a high-level description - -Example (from `useMissingFieldNavigation` refactor): -```typescript -// ❌ Wrong: 90-line callback with nested logic -const handleClick = useCallback((key: string) => { - const el = document.querySelector(`[data-key="${key}"]`); - if (el) { - const section = el.closest('[id^="section-"]'); - if (section) { - const btn = document.querySelector(`button[aria-controls="${section.id}"]`); - if (btn?.getAttribute('aria-expanded') === 'false') { - btn.click(); - } - } - setTimeout(() => { - el.scrollIntoView({ behavior: 'smooth', block: 'center' }); - // ... 50 more lines of highlighting/focusing logic - }, 100); - } - // ... another 30 lines for fallback -}, []); - -// ✅ Right: Small helpers + simple callback -const expandSectionIfCollapsed = (element: HTMLElement): void => { /* ... */ }; -const scrollHighlightAndFocus = (element: HTMLElement): void => { /* ... */ }; -const navigateToField = (fieldElement: HTMLElement): void => { /* ... */ }; -const navigateToSection = (checkKey: string): void => { /* ... */ }; - -const handleClick = useCallback((key: string) => { - const fieldElement = document.querySelector(`[data-key="${key}"]`); - if (fieldElement) { - navigateToField(fieldElement); - return; - } - navigateToSection(key); -}, []); -``` - -## Pull Requests - -Keep PR descriptions concise and to the point. Reviewers should not be exhausted by lengthy explanations. - -Before opening a PR, run `git diff --name-only origin/main...HEAD` and confirm every changed file belongs to the current task. If unrelated files appear (for example from reverted or merged commits), clean the branch history first. - -## Code Review Guidelines - -When reviewing code (or writing code that will be reviewed): -- **Always set explicit `type` on `
)} diff --git a/packages/shared/src/components/notifications/EnableNotification.tsx b/packages/shared/src/components/notifications/EnableNotification.tsx index 2434a4a2b60..6d0e3071c89 100644 --- a/packages/shared/src/components/notifications/EnableNotification.tsx +++ b/packages/shared/src/components/notifications/EnableNotification.tsx @@ -33,10 +33,6 @@ const containerClassName: Partial> = { [NotificationPromptSource.NotificationsPage]: 'px-6 w-full bg-surface-float', [NotificationPromptSource.NewComment]: 'rounded-16 px-4 w-full bg-surface-float', - [NotificationPromptSource.CommentUpvote]: - 'ml-[3.25rem] w-[calc(100%-3.25rem)] rounded-16 px-4 bg-surface-float', - [NotificationPromptSource.PostTagFollow]: - 'rounded-16 px-4 w-full bg-surface-float', [NotificationPromptSource.NewSourceModal]: '', [NotificationPromptSource.NotificationItem]: '', [NotificationPromptSource.SquadPostCommentary]: '', @@ -52,8 +48,6 @@ const sourceRenderTextCloseButton: Partial< > = { [NotificationPromptSource.NotificationsPage]: false, [NotificationPromptSource.NewComment]: false, - [NotificationPromptSource.CommentUpvote]: false, - [NotificationPromptSource.PostTagFollow]: false, [NotificationPromptSource.NewSourceModal]: false, [NotificationPromptSource.SquadPostCommentary]: false, [NotificationPromptSource.SquadPostModal]: false, @@ -68,14 +62,8 @@ const sourceToButtonText: Partial> = { [NotificationPromptSource.SquadPostModal]: 'Subscribe', [NotificationPromptSource.SourceSubscribe]: 'Enable', [NotificationPromptSource.NewComment]: 'Notify me', - [NotificationPromptSource.CommentUpvote]: 'Turn on', }; -const rolloutOnlySources = new Set([ - NotificationPromptSource.CommentUpvote, - NotificationPromptSource.PostTagFollow, -]); - function EnableNotification({ source = NotificationPromptSource.NotificationsPage, placement, @@ -93,10 +81,7 @@ function EnableNotification({ onEnableAction, }); - if ( - !shouldShowCta || - (rolloutOnlySources.has(source) && !isNotificationCtaExperimentEnabled) - ) { + if (!shouldShowCta) { return null; } @@ -107,9 +92,6 @@ function EnableNotification({ : `Want to get notified when ${ contentName ?? 'someone' } responds so you can continue the conversation?`, - [NotificationPromptSource.CommentUpvote]: - 'Get notified when someone replies to this comment.', - [NotificationPromptSource.PostTagFollow]: `Get notified when new #${contentName} stories are posted.`, [NotificationPromptSource.NotificationsPage]: isNotificationCtaExperimentEnabled ? 'Get notified when someone replies to your posts, mentions you, or when discussions you follow get new activity.' @@ -125,28 +107,18 @@ function EnableNotification({ const message = sourceToMessage[source] ?? ''; const classes = containerClassName[source] ?? ''; const showTextCloseButton = sourceRenderTextCloseButton[source] ?? false; - const hideCloseButton = - source === NotificationPromptSource.NewComment || - source === NotificationPromptSource.CommentUpvote || - source === NotificationPromptSource.PostTagFollow; + const hideCloseButton = source === NotificationPromptSource.NewComment; const buttonText = sourceToButtonText[source] ?? 'Enable notifications'; const shouldShowNotificationArtwork = source === NotificationPromptSource.NotificationsPage; const shouldAnimateBellCta = source === NotificationPromptSource.NotificationsPage || - source === NotificationPromptSource.NewComment || - source === NotificationPromptSource.CommentUpvote || - source === NotificationPromptSource.PostTagFollow; + source === NotificationPromptSource.NewComment; const shouldShowInlineNotificationImage = source !== NotificationPromptSource.NotificationsPage && - source !== NotificationPromptSource.NewComment && - source !== NotificationPromptSource.CommentUpvote && - source !== NotificationPromptSource.PostTagFollow; + source !== NotificationPromptSource.NewComment; const shouldInlineActionWithMessage = - (source === NotificationPromptSource.NewComment || - source === NotificationPromptSource.CommentUpvote || - source === NotificationPromptSource.PostTagFollow) && - !acceptedJustNow; + source === NotificationPromptSource.NewComment && !acceptedJustNow; const shouldUseVerticalContentLayout = source === NotificationPromptSource.NotificationsPage; const notificationVisual = (() => { @@ -301,10 +273,7 @@ function EnableNotification({
@@ -403,15 +364,8 @@ function EnableNotification({
{!acceptedJustNow && @@ -421,10 +375,7 @@ function EnableNotification({ size={ButtonSize.Small} variant={ButtonVariant.Primary} className={classNames( - source !== NotificationPromptSource.NewComment && - source !== NotificationPromptSource.CommentUpvote && - source !== NotificationPromptSource.PostTagFollow && - 'mr-4', + source !== NotificationPromptSource.NewComment && 'mr-4', )} icon={ shouldAnimateBellCta ? ( diff --git a/packages/shared/src/hooks/notifications/useEnableNotification.ts b/packages/shared/src/hooks/notifications/useEnableNotification.ts index 7b8d6f9cc32..cbdf18d37b9 100644 --- a/packages/shared/src/hooks/notifications/useEnableNotification.ts +++ b/packages/shared/src/hooks/notifications/useEnableNotification.ts @@ -9,7 +9,6 @@ import type { NotificationCtaPlacement } from '../../lib/log'; import { usePushNotificationMutation } from './usePushNotificationMutation'; import { usePushNotificationContext } from '../../contexts/PushNotificationContext'; import { checkIsExtension } from '../../lib/func'; -import { useNotificationCtaExperiment } from './useNotificationCtaExperiment'; import { useNotificationCtaAnalytics, useNotificationCtaImpression, @@ -35,8 +34,6 @@ export const useEnableNotification = ({ placement, onEnableAction, }: UseEnableNotificationProps): UseEnableNotification => { - const { isEnabled: isNotificationCtaExperimentEnabled } = - useNotificationCtaExperiment(); const isExtension = checkIsExtension(); const { logClick, logDismiss } = useNotificationCtaAnalytics(); const { isInitialized, isPushSupported, isSubscribed, shouldOpenPopup } = @@ -73,7 +70,6 @@ export const useEnableNotification = ({ false, ); const shouldIgnoreDismissStateForSource = - source === NotificationPromptSource.PostTagFollow || source === NotificationPromptSource.NewComment || source === NotificationPromptSource.SquadPage; const effectiveIsDismissed = shouldIgnoreDismissStateForSource @@ -111,17 +107,12 @@ export const useEnableNotification = ({ return runEnableAction(); }, [logClick, onEnablePush, placement, runEnableAction, source]); - const isRolloutOnlySource = - source === NotificationPromptSource.CommentUpvote || - source === NotificationPromptSource.PostTagFollow; const subscribed = isSubscribed || (shouldOpenPopup() && hasPermissionCache); const enabledJustNow = subscribed && acceptedJustNow; - const shouldRequireNotSubscribed = - source !== NotificationPromptSource.CommentUpvote; const conditions = [ isLoaded, - shouldRequireNotSubscribed ? !subscribed : true, + !subscribed, isInitialized, isPushSupported || isExtension, ]; @@ -135,10 +126,7 @@ export const useEnableNotification = ({ ); }; - const shouldShowCta = - !isRolloutOnlySource || isNotificationCtaExperimentEnabled - ? computeShouldShowCta() - : false; + const shouldShowCta = computeShouldShowCta(); useNotificationCtaImpression( { diff --git a/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts b/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts index f6d6752ccf3..89a44c9850a 100644 --- a/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts +++ b/packages/shared/src/hooks/notifications/useNotificationCtaAnalytics.ts @@ -48,7 +48,7 @@ export const useNotificationCtaImpression = ( ): void => { useLogEventOnce( () => ({ - event_name: LogEvent.Impression, + event_name: LogEvent.ImpressionNotificationCta, ...getBaseNotificationCtaEvent(params), }), { condition }, @@ -70,7 +70,7 @@ export const useNotificationCtaAnalytics = () => { const logClick = useCallback( (params: NotificationCtaAnalyticsParams) => { logEvent({ - event_name: LogEvent.Click, + event_name: LogEvent.ClickNotificationCta, ...getBaseNotificationCtaEvent(params), }); }, @@ -90,7 +90,7 @@ export const useNotificationCtaAnalytics = () => { const logImpression = useCallback( (params: NotificationCtaAnalyticsParams) => { logEvent({ - event_name: LogEvent.Impression, + event_name: LogEvent.ImpressionNotificationCta, ...getBaseNotificationCtaEvent(params), }); }, diff --git a/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.spec.tsx b/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.spec.tsx index 627bad9c559..14f2a996d79 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.spec.tsx +++ b/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.spec.tsx @@ -111,7 +111,7 @@ describe('useReadingReminderFeedHero', () => { expect(result.current.shouldShowInFeedHero).toBe(false); await act(async () => { - await result.current.onEnableTopHero(); + await result.current.onEnableHero(NotificationCtaPlacement.TopHero); }); expect(logClick).toHaveBeenCalledWith( diff --git a/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts b/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts index 59a1f71b878..404f7fefc8f 100644 --- a/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts +++ b/packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts @@ -12,6 +12,9 @@ import { useReadingReminderVariation } from './useReadingReminderVariation'; const HERO_INSERT_INDEX = 6; const HERO_SCROLL_THRESHOLD_PX = 300; +type ReadingReminderHeroPlacement = + | NotificationCtaPlacement.TopHero + | NotificationCtaPlacement.InFeedHero; interface UseReadingReminderFeedHeroProps { itemCount: number; @@ -25,12 +28,18 @@ interface UseReadingReminderFeedHero { title: string; subtitle: string; shouldShowDismiss: boolean; - onEnableTopHero: () => Promise; - onDismissTopHero: () => Promise; - onEnableInFeedHero: () => Promise; - onDismissInFeedHero: () => Promise; + onEnableHero: (placement: ReadingReminderHeroPlacement) => Promise; + onDismissHero: (placement: ReadingReminderHeroPlacement) => Promise; } +const getInitialDismissedPlacements = (): Record< + ReadingReminderHeroPlacement, + boolean +> => ({ + [NotificationCtaPlacement.TopHero]: false, + [NotificationCtaPlacement.InFeedHero]: false, +}); + export const useReadingReminderFeedHero = ({ itemCount, itemsPerRow, @@ -56,8 +65,9 @@ export const useReadingReminderFeedHero = ({ }); const { logClick, logDismiss } = useNotificationCtaAnalytics(); const [hasScrolledForHero, setHasScrolledForHero] = useState(false); - const [isInFeedHeroDismissed, setIsInFeedHeroDismissed] = useState(false); - const [isTopHeroDismissed, setIsTopHeroDismissed] = useState(false); + const [dismissedPlacements, setDismissedPlacements] = useState( + getInitialDismissedPlacements, + ); useEffect(() => { if (!shouldShow || !isInline || hasScrolledForHero) { @@ -77,19 +87,20 @@ export const useReadingReminderFeedHero = ({ useEffect(() => { if (!shouldShow) { setHasScrolledForHero(false); - setIsInFeedHeroDismissed(false); - setIsTopHeroDismissed(false); + setDismissedPlacements(getInitialDismissedPlacements()); } }, [shouldShow]); const canShowReminderPlacements = shouldEvaluateReminderPlacement; const shouldShowTopHero = - canShowReminderPlacements && isHero && !isTopHeroDismissed; + canShowReminderPlacements && + isHero && + !dismissedPlacements[NotificationCtaPlacement.TopHero]; const shouldShowInFeedHero = canShowReminderPlacements && isInline && hasScrolledForHero && - !isInFeedHeroDismissed && + !dismissedPlacements[NotificationCtaPlacement.InFeedHero] && itemCount > heroInsertIndex; useNotificationCtaImpression( @@ -101,31 +112,33 @@ export const useReadingReminderFeedHero = ({ shouldShowInFeedHero, ); - const onEnableTopHero = useCallback(async () => { - logClick(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); - await onEnable(); - setIsTopHeroDismissed(true); - }, [logClick, onEnable]); - - const onDismissTopHero = useCallback(async () => { - setIsTopHeroDismissed(true); - logDismiss(getReadingReminderCtaParams(NotificationCtaPlacement.TopHero)); - await onDismiss(); - }, [logDismiss, onDismiss]); + const setPlacementDismissed = useCallback( + (placement: ReadingReminderHeroPlacement) => { + setDismissedPlacements((current) => ({ + ...current, + [placement]: true, + })); + }, + [], + ); - const onEnableInFeedHero = useCallback(async () => { - logClick(getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero)); - await onEnable(); - setIsInFeedHeroDismissed(true); - }, [logClick, onEnable]); + const onEnableHero = useCallback( + async (placement: ReadingReminderHeroPlacement) => { + logClick(getReadingReminderCtaParams(placement)); + await onEnable(); + setPlacementDismissed(placement); + }, + [logClick, onEnable, setPlacementDismissed], + ); - const onDismissInFeedHero = useCallback(async () => { - setIsInFeedHeroDismissed(true); - logDismiss( - getReadingReminderCtaParams(NotificationCtaPlacement.InFeedHero), - ); - await onDismiss(); - }, [logDismiss, onDismiss]); + const onDismissHero = useCallback( + async (placement: ReadingReminderHeroPlacement) => { + setPlacementDismissed(placement); + logDismiss(getReadingReminderCtaParams(placement)); + await onDismiss(); + }, + [logDismiss, onDismiss, setPlacementDismissed], + ); return { heroInsertIndex, @@ -134,9 +147,7 @@ export const useReadingReminderFeedHero = ({ title, subtitle, shouldShowDismiss, - onEnableTopHero, - onDismissTopHero, - onEnableInFeedHero, - onDismissInFeedHero, + onEnableHero, + onDismissHero, }; }; diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts index 86fd6f94a20..cf25dbb2af2 100644 --- a/packages/shared/src/lib/log.ts +++ b/packages/shared/src/lib/log.ts @@ -107,8 +107,10 @@ export enum LogEvent { ClickNotificationIcon = 'click notification icon', OpenNotificationList = 'open notification list', ClickNotification = 'click notification', + ClickNotificationCta = 'click notification cta', ClickEnableNotification = 'click enable notification', ClickNotificationDismiss = 'click notification dismiss', + ImpressionNotificationCta = 'impression notification cta', EnableNotification = 'enable notification', DisableNotification = 'disable notification', ScheduleDigest = 'schedule digest', @@ -544,10 +546,6 @@ export enum NotificationCtaPlacement { TopHero = 'top-hero', InFeedHero = 'in-feed-hero', CommentInline = 'comment-inline', - CommentReplyFlow = 'comment-reply-flow', - TagFollowInline = 'tag-follow-inline', - TagPage = 'tag-page', - SquadPage = 'squad-page', UserCard = 'user-card', SourceCard = 'source-card', SquadCard = 'squad-card', @@ -566,8 +564,6 @@ export enum NotificationPromptSource { BookmarkReminder = 'bookmark reminder', NotificationsPage = 'notifications page', NewComment = 'new comment', - CommentUpvote = 'comment upvote', - PostTagFollow = 'post tag follow', NewSourceModal = 'new source modal', SquadPage = 'squad page', NotificationItem = 'notification item', From 9732556144a1fd81a131a87d9c24b8393fefa828 Mon Sep 17 00:00:00 2001 From: Ido Shamun <1993245+idoshamun@users.noreply.github.com> Date: Sun, 22 Mar 2026 11:34:21 +0200 Subject: [PATCH 34/34] fix(shared): resolve source CTA strict regressions --- .../shared/src/components/cards/entity/SourceEntityCard.tsx | 4 ++-- packages/shared/src/hooks/useSourceMenuProps.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx index 69c28abd312..4853a760d8e 100644 --- a/packages/shared/src/components/cards/entity/SourceEntityCard.tsx +++ b/packages/shared/src/components/cards/entity/SourceEntityCard.tsx @@ -164,14 +164,14 @@ const SourceEntityCard = ({ source, className }: SourceEntityCardProps) => { type={TypographyType.Footnote} color={TypographyColor.Tertiary} > - {largeNumberFormat(membersCount ?? 0) || 0} Followers + {largeNumberFormat(source.membersCount ?? 0) || 0} Followers - {largeNumberFormat(flags?.totalUpvotes ?? 0) || 0} Upvotes + {largeNumberFormat(source.flags?.totalUpvotes ?? 0) || 0} Upvotes
{shouldRenderNotificationCta && ( diff --git a/packages/shared/src/hooks/useSourceMenuProps.tsx b/packages/shared/src/hooks/useSourceMenuProps.tsx index a4922f13165..1a25938348b 100644 --- a/packages/shared/src/hooks/useSourceMenuProps.tsx +++ b/packages/shared/src/hooks/useSourceMenuProps.tsx @@ -16,7 +16,7 @@ const useSourceMenuProps = ({ }) => { const router = useRouter(); const { follow, unfollow } = useContentPreference(); - const sourceId = source.id ?? ''; + const sourceId = source?.id ?? ''; const onCreateNewFeed = () => { if (!source?.id) {