diff --git a/components/brave_rewards/core/engine/endpoints/brave/get_ui_cards.cc b/components/brave_rewards/core/engine/endpoints/brave/get_ui_cards.cc index a65c50ac37e..49f8468119b 100644 --- a/components/brave_rewards/core/engine/endpoints/brave/get_ui_cards.cc +++ b/components/brave_rewards/core/engine/endpoints/brave/get_ui_cards.cc @@ -66,6 +66,12 @@ std::optional> 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); } diff --git a/components/brave_rewards/core/engine/endpoints/brave/get_ui_cards_unittest.cc b/components/brave_rewards/core/engine/endpoints/brave/get_ui_cards_unittest.cc index b4a202f748b..4fd9b0874c8 100644 --- a/components/brave_rewards/core/engine/endpoints/brave/get_ui_cards_unittest.cc +++ b/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(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(1)); EXPECT_EQ(promo_card->items[0]->title, "$title"); EXPECT_EQ(promo_card->items[0]->description, "$description"); diff --git a/components/brave_rewards/core/mojom/rewards.mojom b/components/brave_rewards/core/mojom/rewards.mojom index 992ad394c80..f4618d08740 100644 --- a/components/brave_rewards/core/mojom/rewards.mojom +++ b/components/brave_rewards/core/mojom/rewards.mojom @@ -365,5 +365,7 @@ struct UICardItem { struct UICard { string name; string title; + string section; + int32 order; array items; }; diff --git a/components/brave_rewards/resources/rewards_page/components/explore/card_view.tsx b/components/brave_rewards/resources/rewards_page/components/explore/card_view.tsx index 72946d5c860..394ef339745 100644 --- a/components/brave_rewards/resources/rewards_page/components/explore/card_view.tsx +++ b/components/brave_rewards/resources/rewards_page/components/explore/card_view.tsx @@ -41,3 +41,20 @@ export function CardView(props: Props) { ) } + +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] +} diff --git a/components/brave_rewards/resources/rewards_page/components/explore/explore_view.tsx b/components/brave_rewards/resources/rewards_page/components/explore/explore_view.tsx index f01c4fd175d..14dc1abc77c 100644 --- a/components/brave_rewards/resources/rewards_page/components/explore/explore_view.tsx +++ b/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' + }) } diff --git a/components/brave_rewards/resources/rewards_page/lib/app_state.ts b/components/brave_rewards/resources/rewards_page/lib/app_state.ts index 75de13b9b92..b8e0104526c 100644 --- a/components/brave_rewards/resources/rewards_page/lib/app_state.ts +++ b/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[] } diff --git a/components/brave_rewards/resources/rewards_page/stories/storybook_model.ts b/components/brave_rewards/resources/rewards_page/stories/storybook_model.ts index 19035dd36d9..9702b3360e1 100644 --- a/components/brave_rewards/resources/rewards_page/stories/storybook_model.ts +++ b/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',