[Rewards] Add support for "section" and "order" on UI cards (#28967)

components/brave_rewards/core/engine/endpoints/brave/get_ui_cards.cc

@@ -66,6 +66,12 @@ std::optional<std::vector<mojom::UICardPtr>> ReadResponseBody(
       if (auto* title = dict.FindString("title")) {
         card->title = *title;
       }
+      if (auto* section = dict.FindString("section")) {
+        card->section = *section;
+      }
+      if (auto order = dict.FindInt("order")) {
+        card->order = *order;
+      }
       if (auto* list = dict.FindList("items")) {
         card->items = ReadItemList(*list);
       }

components/brave_rewards/core/engine/endpoints/brave/get_ui_cards_unittest.cc

@@ -41,6 +41,8 @@ TEST_F(RewardsGetUICardsTest, ExpectedResponse) {
     }],
     "partner-promo-card": {
       "title": "$card-title",
+      "section": "explore",
+      "order": 1,
       "items": [{
         "title": "$title",
         "description": "$description",
@@ -56,6 +58,8 @@ TEST_F(RewardsGetUICardsTest, ExpectedResponse) {
   auto& community_card = result->at(0);
   EXPECT_EQ(community_card->name, "community-card");
   EXPECT_EQ(community_card->title, "");
+  EXPECT_EQ(community_card->section, "");
+  EXPECT_EQ(community_card->order, 0);
   ASSERT_EQ(community_card->items.size(), static_cast<size_t>(1));
   EXPECT_EQ(community_card->items[0]->title, "$title");
   EXPECT_EQ(community_card->items[0]->description, "$description");
@@ -65,6 +69,8 @@ TEST_F(RewardsGetUICardsTest, ExpectedResponse) {
   auto& promo_card = result->at(1);
   EXPECT_EQ(promo_card->name, "partner-promo-card");
   EXPECT_EQ(promo_card->title, "$card-title");
+  EXPECT_EQ(promo_card->section, "explore");
+  EXPECT_EQ(promo_card->order, 1);
   ASSERT_EQ(promo_card->items.size(), static_cast<size_t>(1));
   EXPECT_EQ(promo_card->items[0]->title, "$title");
   EXPECT_EQ(promo_card->items[0]->description, "$description");

components/brave_rewards/core/mojom/rewards.mojom

@@ -365,5 +365,7 @@ struct UICardItem {
 struct UICard {
   string name;
   string title;
+  string section;
+  int32 order;
   array<UICardItem> items;
 };

components/brave_rewards/resources/rewards_page/components/explore/card_view.tsx

@@ -41,3 +41,20 @@ export function CardView(props: Props) {
     </div>
   )
 }
+
+export function sortCards(cards: UICard[]) {
+  return cards.sort((a, b) => a.order - b.order)
+}
+
+export function splitCardsIntoColumns(cards: UICard[]) {
+  const left: UICard[] = []
+  const right: UICard[] = []
+  for (const card of cards) {
+    if (left.length > right.length) {
+      right.push(card)
+    } else {
+      left.push(card)
+    }
+  }
+  return [left, right]
+}

components/brave_rewards/resources/rewards_page/components/explore/explore_view.tsx

@@ -10,7 +10,7 @@ import { useLocaleContext } from '../../lib/locale_strings'
 import { useAppState } from '../../lib/app_model_context'
 import { useBreakpoint } from '../../lib/breakpoint'
 import { UICard } from '../../lib/app_state'
-import { CardView } from './card_view'
+import { CardView, sortCards, splitCardsIntoColumns } from './card_view'
 
 import { style } from './explore_view.style'
 
@@ -29,7 +29,7 @@ export function ExploreView() {
     )
   }
 
-  cards = getExploreCards(cards)
+  cards = sortCards(getExploreCards(cards))
 
   if (viewType === 'double') {
     const [left, right] = splitCardsIntoColumns(cards)
@@ -57,18 +57,10 @@ export function ExploreView() {
 }
 
 function getExploreCards(cards: UICard[]) {
-  return cards.filter((card) => card.name !== 'benefits-card')
-}
-
-function splitCardsIntoColumns(cards: UICard[]) {
-  const left: UICard[] = []
-  const right: UICard[] = []
-  for (const card of cards) {
-    if (left.length > right.length) {
-      right.push(card)
-    } else {
-      left.push(card)
+  return cards.filter((card) => {
+    if (!card.section) {
+      return card.name !== 'benefits-card'
     }
-  }
-  return [left, right]
+    return card.section === 'explore'
+  })
 }

components/brave_rewards/resources/rewards_page/lib/app_state.ts

@@ -137,6 +137,8 @@ export interface UICardItem {
 export interface UICard {
   name: string
   title: string
+  section: string
+  order: number
   items: UICardItem[]
 }
 

components/brave_rewards/resources/rewards_page/stories/storybook_model.ts

@@ -133,6 +133,8 @@ export function createModel(): AppModel {
       {
         name: 'community-card',
         title: '',
+        order: 0,
+        section: '',
         items: [
           {
             title: 'Brave meetup in Toronto!',
@@ -145,6 +147,8 @@ export function createModel(): AppModel {
       {
         name: 'merch-store-card',
         title: '',
+        order: 0,
+        section: '',
         items: [
           {
             title: 'Brave Embroidered Crop Top',
@@ -157,6 +161,8 @@ export function createModel(): AppModel {
       {
         name: 'partner-promo-card',
         title: 'Ledger Hardware Wallet',
+        order: 0,
+        section: '',
         items: [
           {
             title: 'Secure Your Crypto with Ledger Nano',