fix(llm): fix carousel pagination for content cards

.changeset/strong-moose-report.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+fix pagination for carousel

apps/ledger-live-mobile/src/contentCards/cards/types.tsx

@@ -1,9 +1,10 @@
 import { ComponentProps } from "react";
 import { TouchableOpacity } from "react-native-gesture-handler";
+import { AnyContentCard } from "../../dynamicContent/types";
 
 export type ButtonAction = ComponentProps<typeof TouchableOpacity>["onPress"];
 
-export type ContentCardProps = {
+export type ContentCardProps = AnyContentCard & {
   metadata: ContentCardMetadata;
 };
 

apps/ledger-live-mobile/src/contentCards/layouts/carousel/index.tsx

@@ -39,7 +39,7 @@ const Carousel = ContentLayoutBuilder<Props>(({ items, styles: _styles = default
 
   const separatorWidth = useTheme().space[styles.gap];
 
-  const isPaginationEnabled = styles.pagination && styles.widthFactor >= WidthFactor.ThreeQuarters;
+  const isPaginationEnabled = styles.pagination;
 
   const carouselRef = useRef<FlatList>(null);
   const [carouselIndex, setCarouselIndex] = useState(0);

apps/ledger-live-mobile/src/contentCards/layouts/carousel/pagination/index.tsx

@@ -3,25 +3,33 @@ import React from "react";
 import { ContentCardItem, ContentCardProps } from "~/contentCards/cards/types";
 import Bullet from "~/contentCards/layouts/carousel/pagination/bullets";
 import { getItemStatus } from "~/contentCards/layouts/carousel/pagination/utils";
+import { WidthFactor } from "../../types";
 
 type Props<P extends ContentCardProps> = {
   items: ContentCardItem<P>[];
   carouselIndex: number;
 };
 
-const Pagination = <P extends ContentCardProps>({ items, carouselIndex }: Props<P>) => (
-  <Flex
-    alignSelf="center"
-    flexDirection="row"
-    columnGap={4}
-    justifyContent="center"
-    width={250}
-    overflow="hidden"
-  >
-    {items.map((item, index) => (
-      <Bullet key={item.props.metadata.id} type={getItemStatus(index, carouselIndex)} />
-    ))}
-  </Flex>
-);
+const Pagination = <P extends ContentCardProps>({ items, carouselIndex }: Props<P>) => {
+  const hasHalfWidth = items[0].props.carouselWidthFactor === WidthFactor.Half;
+  const isSmallCard = carouselIndex === items.length - 2 && hasHalfWidth;
+  return (
+    <Flex
+      alignSelf="center"
+      flexDirection="row"
+      columnGap={4}
+      justifyContent="center"
+      width={250}
+      overflow="hidden"
+    >
+      {items.map((item, index) => (
+        <Bullet
+          key={item.props.metadata.id}
+          type={getItemStatus(index, isSmallCard ? carouselIndex + 1 : carouselIndex)}
+        />
+      ))}
+    </Flex>
+  );
+};
 
 export default Pagination;

apps/ledger-live-mobile/src/dynamicContent/ContentCardsCategory/Layout.tsx

@@ -126,7 +126,7 @@ const Layout = ({ category, cards }: LayoutProps) => {
           items={items}
           styles={{
             widthFactor: cardsSorted[0].carouselWidthFactor || WidthFactor.Full,
-            pagination: category.pagination,
+            pagination: category.hasPaggination,
           }}
         />
       );

apps/ledger-live-mobile/src/dynamicContent/types.ts

@@ -51,7 +51,7 @@ type CategoryContentCard = ContentCardCommonProperties & {
   cta?: string;
   link?: string;
   isDismissable?: boolean;
-  pagination?: boolean;
+  hasPaggination?: boolean;
 };
 
 type WalletContentCard = ContentCardCommonProperties & {

apps/ledger-live-mobile/src/dynamicContent/utils.tsx

@@ -79,6 +79,7 @@ export const mapAsCategoryContentCard = (card: BrazeContentCard): CategoryConten
   link: card.extras.link,
   cta: card.extras.cta,
   isDismissable: Boolean(card.extras.isDismissable && card.extras.isDismissable === "true"),
+  hasPaggination: Boolean(card.extras.hasPaggination && card.extras.hasPaggination === "true"),
 });
 
 export const mapAsWalletContentCard = (card: BrazeContentCard): WalletContentCard => ({