fix(shared): preserve card sequence with in-feed reminder hero

packages/shared/src/components/Feed.tsx

@@ -310,6 +310,7 @@ export default function Feed<T>({
   const { onMenuClick, postMenuIndex, postMenuLocation } = useFeedContextMenu();
   const useList = isListMode && numCards > 1;
   const virtualizedNumCards = useList ? 1 : numCards;
+  const showFirstSlotCard = showProfileCompletionCard || showBriefCard;
   const {
     onOpenModal,
     onCloseModal,
@@ -326,7 +327,7 @@ export default function Feed<T>({
     feedName,
   });
   const {
-    heroInsertIndex,
+    adjustedHeroInsertIndex,
     shouldShowTopHero,
     shouldShowInFeedHero,
     title: readingReminderTitle,
@@ -336,6 +337,7 @@ export default function Feed<T>({
   } = useReadingReminderFeedHero({
     itemCount: items.length,
     itemsPerRow: virtualizedNumCards,
+    firstSlotOffset: Number(showProfileCompletionCard || showBriefCard),
   });
 
   useMutationSubscription({
@@ -588,7 +590,6 @@ export default function Feed<T>({
   const currentPageSize = pageSize ?? currentSettings.pageSize;
   const showPromoBanner = !!briefBannerPage;
   const columnsDiffWithPage = currentPageSize % virtualizedNumCards;
-  const showFirstSlotCard = showProfileCompletionCard || showBriefCard;
   const indexWhenShowingPromoBanner =
     currentPageSize * Number(briefBannerPage) - // number of items at that page
     columnsDiffWithPage * Number(briefBannerPage) - // cards let out of rows * page number
@@ -662,7 +663,7 @@ export default function Feed<T>({
                     }}
                   />
                 )}
-                {shouldShowInFeedHero && index === heroInsertIndex && (
+                {shouldShowInFeedHero && index === adjustedHeroInsertIndex && (
                   <div
                     style={{
                       gridColumn: !shouldUseListFeedLayout

packages/shared/src/components/notifications/EnableNotification.tsx

@@ -102,13 +102,15 @@ function EnableNotification({
     [NotificationPromptSource.SquadChecklist]: '',
     [NotificationPromptSource.SourceSubscribe]: `Get notified whenever there are new posts from ${contentName}.`,
     [NotificationPromptSource.ReadingReminder]: '',
-    [NotificationPromptSource.BookmarkReminder]: '',
+    [NotificationPromptSource.BookmarkReminder]:
+      'Get a push reminder right on time, even when you leave the app.',
   };
   const message = sourceToMessage[source] ?? '';
   const classes = containerClassName[source] ?? '';
   const showTextCloseButton = sourceRenderTextCloseButton[source] ?? false;
-  const hideCloseButton = source === NotificationPromptSource.NewComment;
   const buttonText = sourceToButtonText[source] ?? 'Enable notifications';
+  const shouldUseTopRightCloseButton =
+    source === NotificationPromptSource.NotificationsPage;
   const shouldShowNotificationArtwork =
     source === NotificationPromptSource.NotificationsPage;
   const shouldAnimateBellCta =
@@ -236,7 +238,7 @@ function EnableNotification({
             alt="A sample browser notification"
           />
         </div>
-        <div className="align-center mt-4 flex">
+        <div className="mt-4 flex items-center justify-start">
           {!acceptedJustNow && (
             <Button
               size={ButtonSize.Small}
@@ -257,8 +259,11 @@ function EnableNotification({
               Dismiss
             </Button>
           )}
+          {!showTextCloseButton && !shouldUseTopRightCloseButton && (
+            <CloseButton size={ButtonSize.XSmall} onClick={onDismiss} />
+          )}
         </div>
-        {!showTextCloseButton && (
+        {shouldUseTopRightCloseButton && (
           <CloseButton
             size={ButtonSize.XSmall}
             className="absolute right-1 top-1 laptop:right-3 laptop:top-3"
@@ -327,19 +332,22 @@ function EnableNotification({
             )}
           </p>
           {shouldInlineActionWithMessage && (
-            <Button
-              size={ButtonSize.Small}
-              variant={ButtonVariant.Primary}
-              className="shrink-0"
-              icon={
-                shouldAnimateBellCta ? (
-                  <BellIcon className="origin-top motion-safe:[animation:enable-notification-bell-ring_1.1s_ease-in-out_1.5s_infinite]" />
-                ) : undefined
-              }
-              onClick={onEnable}
-            >
-              {buttonText}
-            </Button>
+            <div className="flex items-center gap-1">
+              <Button
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Primary}
+                className="shrink-0"
+                icon={
+                  shouldAnimateBellCta ? (
+                    <BellIcon className="origin-top motion-safe:[animation:enable-notification-bell-ring_1.1s_ease-in-out_1.5s_infinite]" />
+                  ) : undefined
+                }
+                onClick={onEnable}
+              >
+                {buttonText}
+              </Button>
+              <CloseButton size={ButtonSize.XSmall} onClick={onDismiss} />
+            </div>
           )}
           {shouldUseVerticalContentLayout &&
             !acceptedJustNow &&
@@ -363,7 +371,7 @@ function EnableNotification({
       </div>
       <div
         className={classNames(
-          'align-center flex',
+          'flex items-center justify-start',
           source === NotificationPromptSource.NewComment ? 'mt-3' : 'mt-4',
           source === NotificationPromptSource.NewComment && 'justify-end',
         )}
@@ -396,8 +404,13 @@ function EnableNotification({
             Dismiss
           </Button>
         )}
+        {!showTextCloseButton &&
+          !shouldInlineActionWithMessage &&
+          !shouldUseTopRightCloseButton && (
+            <CloseButton size={ButtonSize.XSmall} onClick={onDismiss} />
+          )}
       </div>
-      {!showTextCloseButton && !hideCloseButton && (
+      {shouldUseTopRightCloseButton && (
         <CloseButton
           size={ButtonSize.XSmall}
           className="absolute right-1 top-1 laptop:right-3 laptop:top-3"

packages/shared/src/components/post/common/PostContentReminder.tsx

@@ -3,8 +3,6 @@ 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';
 
@@ -26,7 +24,6 @@ export function PostContentReminder({
   return (
     <PostContentWidget
       className={classNames('mt-6 w-full', className)}
-      icon={<BookmarkReminderIcon size={IconSize.Small} secondary />}
       title="Don’t have time now? Set a reminder"
     >
       <PostReminderOptions post={post} className="laptop:ml-auto" />

packages/shared/src/components/post/common/PostReminderOptions.tsx

@@ -39,22 +39,22 @@ export function PostReminderOptions({
     onInteract(previousInteraction);
   };
   return (
-    <span className={classNames('flex flex-row gap-3', className)}>
+    <span className={classNames('flex flex-row flex-wrap gap-3', className)}>
       <Button
         {...buttonProps}
         onClick={wrapStopPropagation(() =>
-          runBookmarkReminder(ReminderPreference.OneHour),
+          runBookmarkReminder(ReminderPreference.LaterToday),
         )}
       >
-        1h
+        Later today
       </Button>
       <Button
         {...buttonProps}
         onClick={wrapStopPropagation(() =>
           runBookmarkReminder(ReminderPreference.Tomorrow),
         )}
       >
-        24h
+        Tomorrow
       </Button>
       <Button
         {...buttonProps}

packages/shared/src/hooks/notifications/useReadingReminderFeedHero.spec.tsx

@@ -166,6 +166,31 @@ describe('useReadingReminderFeedHero', () => {
     expect(result.current.shouldShowInFeedHero).toBe(false);
   });
 
+  it('should account for the first feed slot offset when placing the inline hero', () => {
+    mockUseReadingReminderVariation.mockReturnValue({
+      variation: 'inline',
+      isControl: false,
+      isHero: false,
+      isInline: true,
+    });
+
+    const { result } = renderHook(() =>
+      useReadingReminderFeedHero({
+        itemCount: 6,
+        itemsPerRow: 1,
+        firstSlotOffset: 1,
+      }),
+    );
+
+    act(() => {
+      window.scrollY = 350;
+      window.dispatchEvent(new Event('scroll'));
+    });
+
+    expect(result.current.adjustedHeroInsertIndex).toBe(5);
+    expect(result.current.shouldShowInFeedHero).toBe(true);
+  });
+
   it('should not show either variation off the homepage', () => {
     mockUseRouter.mockReturnValue({ pathname: '/bookmarks' });
 

packages/shared/src/hooks/notifications/useReadingReminderFeedHero.ts

@@ -19,10 +19,11 @@ type ReadingReminderHeroPlacement =
 interface UseReadingReminderFeedHeroProps {
   itemCount: number;
   itemsPerRow: number;
+  firstSlotOffset?: number;
 }
 
 interface UseReadingReminderFeedHero {
-  heroInsertIndex: number;
+  adjustedHeroInsertIndex: number;
   shouldShowTopHero: boolean;
   shouldShowInFeedHero: boolean;
   title: string;
@@ -42,10 +43,15 @@ const getInitialDismissedPlacements = (): Record<
 export const useReadingReminderFeedHero = ({
   itemCount,
   itemsPerRow,
+  firstSlotOffset = 0,
 }: UseReadingReminderFeedHeroProps): UseReadingReminderFeedHero => {
   const safeItemsPerRow = Math.max(1, itemsPerRow);
   const heroInsertIndex =
     Math.ceil(HERO_INSERT_INDEX / safeItemsPerRow) * safeItemsPerRow;
+  const adjustedHeroInsertIndex = Math.max(
+    heroInsertIndex - firstSlotOffset,
+    0,
+  );
   const { pathname } = useRouter();
   const { shouldShow, title, subtitle, onEnable, onDismiss } =
     useReadingReminderHero({
@@ -94,7 +100,7 @@ export const useReadingReminderFeedHero = ({
     isInline &&
     hasScrolledForHero &&
     !dismissedPlacements[NotificationCtaPlacement.InFeedHero] &&
-    itemCount > heroInsertIndex;
+    itemCount > adjustedHeroInsertIndex;
 
   useNotificationCtaImpression(
     getReadingReminderCtaParams(NotificationCtaPlacement.TopHero),
@@ -134,7 +140,7 @@ export const useReadingReminderFeedHero = ({
   );
 
   return {
-    heroInsertIndex,
+    adjustedHeroInsertIndex,
     shouldShowTopHero,
     shouldShowInFeedHero,
     title,