feat: boosted post as ad

packages/shared/src/components/Feed.tsx

@@ -48,6 +48,8 @@ import { useFeedContentPreferenceMutationSubscription } from './feeds/useFeedCon
 import { useFeedBookmarkPost } from '../hooks/bookmark/useFeedBookmarkPost';
 import type { AdActions } from '../lib/ads';
 import usePlusEntry from '../hooks/usePlusEntry';
+import { FeedItemType } from './cards/common/common';
+import { FeedCardContext } from '../features/posts/FeedCardContext';
 
 const FeedErrorScreen = dynamic(
   () => import(/* webpackChunkName: "feedErrorScreen" */ './FeedErrorScreen'),
@@ -432,33 +434,39 @@ export default function Feed<T>({
         ) : (
           <>
             {items.map((item, index) => (
-              <FeedItemComponent
-                item={item}
-                index={index}
-                row={calculateRow(index, virtualizedNumCards)}
-                column={calculateColumn(index, virtualizedNumCards)}
-                columns={virtualizedNumCards}
+              <FeedCardContext.Provider
                 key={getFeedItemKey(item, index)}
-                openNewTab={openNewTab}
-                postMenuIndex={postMenuIndex}
-                showCommentPopupId={showCommentPopupId}
-                setShowCommentPopupId={setShowCommentPopupId}
-                isSendingComment={isSendingComment}
-                comment={comment}
-                user={user}
-                feedName={feedName}
-                ranking={ranking}
-                toggleBookmark={toggleBookmark}
-                toggleUpvote={toggleUpvote}
-                toggleDownvote={toggleDownvote}
-                onPostClick={onPostCardClick}
-                onShare={onShareClick}
-                onMenuClick={onMenuClick}
-                onCopyLinkClick={onCopyLinkClickLogged}
-                onCommentClick={onCommentClick}
-                onAdAction={onAdAction}
-                onReadArticleClick={onReadArticleClick}
-              />
+                value={{
+                  isBoostedAdPost: item.type === FeedItemType.Ad && !!item.post,
+                }}
+              >
+                <FeedItemComponent
+                  item={item}
+                  index={index}
+                  row={calculateRow(index, virtualizedNumCards)}
+                  column={calculateColumn(index, virtualizedNumCards)}
+                  columns={virtualizedNumCards}
+                  openNewTab={openNewTab}
+                  postMenuIndex={postMenuIndex}
+                  showCommentPopupId={showCommentPopupId}
+                  setShowCommentPopupId={setShowCommentPopupId}
+                  isSendingComment={isSendingComment}
+                  comment={comment}
+                  user={user}
+                  feedName={feedName}
+                  ranking={ranking}
+                  toggleBookmark={toggleBookmark}
+                  toggleUpvote={toggleUpvote}
+                  toggleDownvote={toggleDownvote}
+                  onPostClick={onPostCardClick}
+                  onShare={onShareClick}
+                  onMenuClick={onMenuClick}
+                  onCopyLinkClick={onCopyLinkClickLogged}
+                  onCommentClick={onCommentClick}
+                  onAdAction={onAdAction}
+                  onReadArticleClick={onReadArticleClick}
+                />
+              </FeedCardContext.Provider>
             ))}
             {!isFetching && !isInitialLoading && !isHorizontal && (
               <InfiniteScrollScreenOffset ref={infiniteScrollRef} />

packages/shared/src/components/FeedItemComponent.tsx

@@ -197,86 +197,90 @@ export default function FeedItemComponent({
     postType: (item as PostItem).post?.type,
   });
 
-  switch (item.type) {
-    case FeedItemType.Post: {
-      if (
-        !!item.post.pinnedAt &&
-        item.post.source?.currentMember?.flags?.collapsePinnedPosts
-      ) {
-        return null;
-      }
-
-      return (
-        <PostTag
-          enableSourceHeader={
-            feedName !== 'squad' && item.post.source?.type === 'squad'
-          }
-          ref={inViewRef}
-          post={{
-            ...item.post,
-          }}
-          data-testid="postItem"
-          onUpvoteClick={(post, origin = Origin.Feed) => {
-            toggleUpvote({
-              payload: post,
-              origin,
-              opts: {
-                columns,
-                column,
-                row,
-              },
-            });
-          }}
-          onDownvoteClick={(post, origin = Origin.Feed) => {
-            toggleDownvote({
-              payload: post,
-              origin,
-              opts: {
-                columns,
-                column,
-                row,
-              },
-            });
-          }}
-          onPostClick={(post) => onPostClick(post, index, row, column)}
-          onPostAuxClick={(post) => onPostClick(post, index, row, column, true)}
-          onReadArticleClick={() =>
-            onReadArticleClick(item.post, index, row, column)
-          }
-          onShare={(post) => onShare(post, row, column)}
-          onBookmarkClick={(post, origin = Origin.Feed) => {
-            toggleBookmark({
-              post,
-              origin,
-              opts: {
-                columns,
-                column,
-                row,
-              },
-            });
-          }}
-          openNewTab={openNewTab}
-          enableMenu={!!user}
-          onMenuClick={(event) => onMenuClick(event, index, row, column)}
-          onCopyLinkClick={(event, post) =>
-            onCopyLinkClick(event, post, index, row, column)
-          }
-          menuOpened={postMenuIndex === index}
-          onCommentClick={(post) => onCommentClick(post, index, row, column)}
-          eagerLoadImage={row === 0 && column === 0}
-        >
-          {showCommentPopupId === item.post.id && (
-            <CommentPopup
-              onClose={() => setShowCommentPopupId(null)}
-              onSubmit={(content) =>
-                comment({ post: item.post, content, row, column, columns })
-              }
-              loading={isSendingComment}
-            />
-          )}
-        </PostTag>
-      );
+  if (
+    item.type === FeedItemType.Post ||
+    (item.type === FeedItemType.Ad && item.post)
+  ) {
+    if (
+      !!item.post.pinnedAt &&
+      item.post.source?.currentMember?.flags?.collapsePinnedPosts
+    ) {
+      return null;
     }
+
+    return (
+      <PostTag
+        enableSourceHeader={
+          feedName !== 'squad' && item.post.source?.type === 'squad'
+        }
+        ref={inViewRef}
+        post={{
+          ...item.post,
+        }}
+        data-testid="postItem"
+        onUpvoteClick={(post, origin = Origin.Feed) => {
+          toggleUpvote({
+            payload: post,
+            origin,
+            opts: {
+              columns,
+              column,
+              row,
+            },
+          });
+        }}
+        onDownvoteClick={(post, origin = Origin.Feed) => {
+          toggleDownvote({
+            payload: post,
+            origin,
+            opts: {
+              columns,
+              column,
+              row,
+            },
+          });
+        }}
+        onPostClick={(post) => onPostClick(post, index, row, column)}
+        onPostAuxClick={(post) => onPostClick(post, index, row, column, true)}
+        onReadArticleClick={() =>
+          onReadArticleClick(item.post, index, row, column)
+        }
+        onShare={(post) => onShare(post, row, column)}
+        onBookmarkClick={(post, origin = Origin.Feed) => {
+          toggleBookmark({
+            post,
+            origin,
+            opts: {
+              columns,
+              column,
+              row,
+            },
+          });
+        }}
+        openNewTab={openNewTab}
+        enableMenu={!!user}
+        onMenuClick={(event) => onMenuClick(event, index, row, column)}
+        onCopyLinkClick={(event, post) =>
+          onCopyLinkClick(event, post, index, row, column)
+        }
+        menuOpened={postMenuIndex === index}
+        onCommentClick={(post) => onCommentClick(post, index, row, column)}
+        eagerLoadImage={row === 0 && column === 0}
+      >
+        {showCommentPopupId === item.post.id && (
+          <CommentPopup
+            onClose={() => setShowCommentPopupId(null)}
+            onSubmit={(content) =>
+              comment({ post: item.post, content, row, column, columns })
+            }
+            loading={isSendingComment}
+          />
+        )}
+      </PostTag>
+    );
+  }
+
+  switch (item.type) {
     case FeedItemType.Ad:
       return (
         <AdTag

packages/shared/src/components/cards/common/PostMetadata.tsx

@@ -6,6 +6,7 @@ import { Separator } from './common';
 import type { Post } from '../../../graphql/posts';
 import { formatReadTime, TruncateText, DateFormat } from '../../utilities';
 import { largeNumberFormat } from '../../../lib';
+import { useFeedCardContext } from '../../../features/posts/FeedCardContext';
 
 interface PostMetadataProps
   extends Pick<Post, 'createdAt' | 'readTime' | 'numUpvotes'> {
@@ -28,6 +29,7 @@ export default function PostMetadata({
 }: PostMetadataProps): ReactElement {
   const timeActionContent = isVideoType ? 'watch' : 'read';
   const showReadTime = isVideoType ? Number.isInteger(readTime) : !!readTime;
+  const { isBoostedAdPost } = useFeedCardContext();
 
   return (
     <div
@@ -36,6 +38,8 @@ export default function PostMetadata({
         className,
       )}
     >
+      {isBoostedAdPost && <strong>Boosted</strong>}
+      {isBoostedAdPost && <Separator />}
       {!!description && (
         <TruncateText title={description}>{description}</TruncateText>
       )}

packages/shared/src/components/icons/Before/index.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import type { IconProps } from '../../Icon';
 import Icon from '../../Icon';
 import FilledIcon from './filled.svg';
+import OutlinedIcon from './outlined.svg';
 
 export const BeforeIcon = (props: IconProps): ReactElement => (
-  <Icon {...props} IconPrimary={FilledIcon} IconSecondary={FilledIcon} />
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
 );