From 15e0dbff4caef7d6f5f3736cf8ab38f44e8b0397 Mon Sep 17 00:00:00 2001 From: Joe Bergeron Date: Tue, 30 Apr 2024 18:27:55 -0400 Subject: [PATCH] feat(points): Implement empty state for points history bottom sheet (#5361) ### Description Implements the empty state for the points history bottom sheet. See designs [here](https://www.figma.com/file/rXBDplfMHHqYmuu6EkgMEo/Gamification-experiments?type=design&node-id=1486-5899&mode=design&t=gVtyIzOM0LmxJaDy-4). ### Test plan Units and manual tested. See video below https://github.com/valora-inc/wallet/assets/569401/b9ed634a-4784-4c6a-a7db-fdbeaf9eb395 ### Related issues - Fixes #[issue number here] ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added) --- locales/base/translation.json | 5 +++ src/analytics/Events.tsx | 1 + src/analytics/Properties.tsx | 1 + src/analytics/docs.ts | 1 + src/points/PointsHistoryBottomSheet.test.tsx | 15 ++++++++ src/points/PointsHistoryBottomSheet.tsx | 40 +++++++++++++++----- 6 files changed, 54 insertions(+), 9 deletions(-) diff --git a/locales/base/translation.json b/locales/base/translation.json index e60a73cf3b2..4a4fa1f3a3e 100644 --- a/locales/base/translation.json +++ b/locales/base/translation.json @@ -2273,6 +2273,11 @@ "title": "Unable to load points activity", "subtitle": "Oops, something went wrong when trying to load your points activity feed. Please try again.", "tryAgain": "Try again" + }, + "empty": { + "title": "No points activity yet", + "subtitle": "It looks like you haven't earned any points yet. Use {{appName}} to start earning points!", + "gotIt": "Got it" } }, "loading": { diff --git a/src/analytics/Events.tsx b/src/analytics/Events.tsx index 3ac1831b55b..7fa8f68dfba 100644 --- a/src/analytics/Events.tsx +++ b/src/analytics/Events.tsx @@ -672,4 +672,5 @@ export enum PointsEvents { points_screen_activity_press = 'points_screen_activity_press', points_screen_activity_try_again_press = 'points_screen_activity_try_again_press', points_screen_activity_fetch_more = 'points_screen_activity_fetch_more', + points_screen_activity_learn_more_press = 'points_screen_activity_learn_more_press', } diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx index c53468ede10..1e831cc3d98 100644 --- a/src/analytics/Properties.tsx +++ b/src/analytics/Properties.tsx @@ -1563,6 +1563,7 @@ interface PointsEventsProperties { [PointsEvents.points_screen_activity_press]: undefined [PointsEvents.points_screen_activity_try_again_press]: undefined [PointsEvents.points_screen_activity_fetch_more]: undefined + [PointsEvents.points_screen_activity_learn_more_press]: undefined } export type AnalyticsPropertiesList = AppEventsProperties & diff --git a/src/analytics/docs.ts b/src/analytics/docs.ts index 3d487fa6ee8..a3aae9f8a9a 100644 --- a/src/analytics/docs.ts +++ b/src/analytics/docs.ts @@ -482,6 +482,7 @@ export const eventDocs: Record = { [PointsEvents.points_screen_activity_press]: `when the Activity button is pressed from Points home screen`, [PointsEvents.points_screen_activity_try_again_press]: `when the Try Again button is pressed after an error while fetching Points activity`, [PointsEvents.points_screen_activity_fetch_more]: `when the user requests to fetch more Points history`, + [PointsEvents.points_screen_activity_learn_more_press]: `when the Learn button is pressed when a user has no points history`, // Events related to WalletConnect pairing (technical: opening up the communication channel via QR code or deeplink) [WalletConnectEvents.wc_pairing_start]: `when WC pairing is started (no UI at this point)`, diff --git a/src/points/PointsHistoryBottomSheet.test.tsx b/src/points/PointsHistoryBottomSheet.test.tsx index 353de5033b7..9fa4d917d8c 100644 --- a/src/points/PointsHistoryBottomSheet.test.tsx +++ b/src/points/PointsHistoryBottomSheet.test.tsx @@ -130,4 +130,19 @@ describe(PointsHistoryBottomSheet, () => { ) expect(dispatch).toHaveBeenCalledWith(getHistoryStarted({ getNextPage: false })) }) + + it('shows empty screen if no info after fetch', async () => { + const tree = renderScreen({ points: { getHistoryStatus: 'idle', pointsHistory: [] } }) + expect(tree.getByTestId('PointsHistoryBottomSheet/Empty')).toBeTruthy() + }) + + it('closes bottom sheet if got it is pressed', async () => { + const { getByText } = renderScreen({ points: { getHistoryStatus: 'idle', pointsHistory: [] } }) + fireEvent.press(getByText('points.history.empty.gotIt')) + await waitFor(() => + expect(ValoraAnalytics.track).toHaveBeenCalledWith( + PointsEvents.points_screen_activity_learn_more_press + ) + ) + }) }) diff --git a/src/points/PointsHistoryBottomSheet.tsx b/src/points/PointsHistoryBottomSheet.tsx index d57b8deb2b5..75d3ebda6bc 100644 --- a/src/points/PointsHistoryBottomSheet.tsx +++ b/src/points/PointsHistoryBottomSheet.tsx @@ -87,6 +87,11 @@ function PointsHistoryBottomSheet({ forwardedRef }: Props) { ) } + const onPressLearnMore = () => { + ValoraAnalytics.track(PointsEvents.points_screen_activity_learn_more_press) + forwardedRef.current?.close() + } + const Loading = pointsHistoryStatus === 'loading' ? ( + {t('points.history.error.title')} @@ -115,8 +120,23 @@ function PointsHistoryBottomSheet({ forwardedRef }: Props) { /> ) : ( - - ) // TODO: Render empty/no history state + + + {t('points.history.empty.title')} + {t('points.history.empty.subtitle')} + +