From 0a2545e823463d1bf53704ee6fc7cc5892ada235 Mon Sep 17 00:00:00 2001 From: YassinL <62058919+YassinL@users.noreply.github.com> Date: Mon, 23 Sep 2024 09:49:13 +0200 Subject: [PATCH] (PC-31778) feat(Bookings): post reaction on tab change or on change screen (#6909) * (PC-31778) feat(api): update api file * (PC-31778) feat(TabLayout): adapt tabLayout on change * (PC-31778) feat(EndedBookings): adapt types with new post reaction * (PC-31778) feat(Bookings): post reaction on tab change or on change screen * (PC-31778) fix(EndedBookings): fix test * (PC-31778) fix types * (PC-31778) refacto wording after review --- .../EndedBookings.native.test.tsx.native-snap | 3 ++ src/api/gen/api.ts | 19 ++++++-- .../bookings/components/EndedBookingItem.tsx | 5 +-- .../bookings/fixtures/bookingsSnap.ts | 2 + .../pages/Bookings/Bookings.native.test.tsx | 42 +++++++++++++++-- .../bookings/pages/Bookings/Bookings.tsx | 45 ++++++++++++++++++- .../pages/Bookings/Bookings.web.test.tsx | 2 +- .../EndedBookings.native.test.tsx | 17 ++----- .../EndedBookings/EndedBookings.perf.test.tsx | 2 +- .../pages/EndedBookings/EndedBookings.tsx | 14 +++--- .../EndedBookings/EndedBookings.web.test.tsx | 4 +- src/features/bookings/types.ts | 4 +- ...mingReactionModalContainer.native.test.tsx | 16 +++++-- .../IncomingReactionModalContainer.tsx | 17 ++++--- .../reactions/api/useReactionMutation.test.ts | 4 +- .../ReactionChoiceModal.tsx | 9 +++- .../venue/components/TabLayout/TabLayout.tsx | 8 +++- 17 files changed, 160 insertions(+), 53 deletions(-) diff --git a/__snapshots__/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx.native-snap b/__snapshots__/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx.native-snap index c9f066779b2..ba573679033 100644 --- a/__snapshots__/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx.native-snap +++ b/__snapshots__/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx.native-snap @@ -253,6 +253,7 @@ exports[`EndedBookings should render correctly 1`] = ` }, "token": "352UW5", "totalAmount": 1900, + "userReaction": null, }, { "confirmationDate": "2021-02-15T23:01:37.925926", @@ -297,6 +298,7 @@ exports[`EndedBookings should render correctly 1`] = ` }, "token": "352UW5", "totalAmount": 1900, + "userReaction": null, }, ] } @@ -787,6 +789,7 @@ exports[`EndedBookings should render correctly 1`] = ` }, "token": "352UW5", "totalAmount": 1900, + "userReaction": null, } } style={ diff --git a/src/api/gen/api.ts b/src/api/gen/api.ts index 505835fb9a5..5993c3d5ef6 100644 --- a/src/api/gen/api.ts +++ b/src/api/gen/api.ts @@ -2710,20 +2710,31 @@ export interface PostFeedbackBody { } /** * @export - * @interface PostReactionRequest + * @interface PostOneReactionRequest */ -export interface PostReactionRequest { +export interface PostOneReactionRequest { /** * @type {number} - * @memberof PostReactionRequest + * @memberof PostOneReactionRequest */ offerId: number /** * @type {ReactionTypeEnum} - * @memberof PostReactionRequest + * @memberof PostOneReactionRequest */ reactionType: ReactionTypeEnum } +/** + * @export + * @interface PostReactionRequest + */ +export interface PostReactionRequest { + /** + * @type {Array} + * @memberof PostReactionRequest + */ + reactions: Array +} /** * @export * @interface ProfileUpdateRequest diff --git a/src/features/bookings/components/EndedBookingItem.tsx b/src/features/bookings/components/EndedBookingItem.tsx index 2b280521a10..b26a77f0936 100644 --- a/src/features/bookings/components/EndedBookingItem.tsx +++ b/src/features/bookings/components/EndedBookingItem.tsx @@ -2,7 +2,7 @@ import React, { ComponentProps, FunctionComponent, useCallback, useMemo, useStat import { View } from 'react-native' import styled from 'styled-components/native' -import { BookingCancellationReasons, PostReactionRequest, ReactionTypeEnum } from 'api/gen' +import { BookingCancellationReasons, PostOneReactionRequest, ReactionTypeEnum } from 'api/gen' import { BookingItemTitle } from 'features/bookings/components/BookingItemTitle' import { isEligibleBookingsForArchive } from 'features/bookings/helpers/expirationDateUtils' import { BookingItemProps } from 'features/bookings/types' @@ -50,7 +50,6 @@ export const EndedBookingItem = ({ booking, onSaveReaction }: BookingItemProps) const { cancellationDate, cancellationReason, dateUsed, stock } = booking const subcategoriesMapping = useSubcategoriesMapping() const subCategory = subcategoriesMapping[stock.offer.subcategoryId] - const prePopulateOffer = usePrePopulateOffer() const netInfo = useNetInfoContext() const { showErrorSnackBar } = useSnackBarContext() @@ -150,7 +149,7 @@ export const EndedBookingItem = ({ booking, onSaveReaction }: BookingItemProps) utmMedium: 'ended_booking', }) - const handleSaveReaction = async ({ offerId, reactionType }: PostReactionRequest) => { + const handleSaveReaction = async ({ offerId, reactionType }: PostOneReactionRequest) => { await onSaveReaction?.({ offerId, reactionType }) setUserReaction(reactionType) hideReactionModal() diff --git a/src/features/bookings/fixtures/bookingsSnap.ts b/src/features/bookings/fixtures/bookingsSnap.ts index 2d9bb918520..ac1d8c2102b 100644 --- a/src/features/bookings/fixtures/bookingsSnap.ts +++ b/src/features/bookings/fixtures/bookingsSnap.ts @@ -66,6 +66,7 @@ export const bookingsSnap = toMutable({ totalAmount: 1900, token: '352UW5', quantity: 10, + userReaction: null, stock: { id: 150230, price: 400, @@ -106,6 +107,7 @@ export const bookingsSnap = toMutable({ totalAmount: 1900, token: '352UW5', quantity: 10, + userReaction: null, stock: { id: 150230, price: 400, diff --git a/src/features/bookings/pages/Bookings/Bookings.native.test.tsx b/src/features/bookings/pages/Bookings/Bookings.native.test.tsx index d93c4f4fc2a..8a473c47e07 100644 --- a/src/features/bookings/pages/Bookings/Bookings.native.test.tsx +++ b/src/features/bookings/pages/Bookings/Bookings.native.test.tsx @@ -2,7 +2,7 @@ import React from 'react' import { QueryObserverResult } from 'react-query' import { navigate } from '__mocks__/@react-navigation/native' -import { BookingsResponse, SubcategoriesResponseModelv2 } from 'api/gen' +import { BookingsResponse, ReactionTypeEnum, SubcategoriesResponseModelv2 } from 'api/gen' import * as bookingsAPI from 'features/bookings/api/useBookings' import { bookingsSnap, emptyBookingsSnap } from 'features/bookings/fixtures/bookingsSnap' import * as useFeatureFlagAPI from 'libs/firebase/firestore/featureFlags/useFeatureFlag' @@ -49,6 +49,11 @@ jest.mock('react-native/Libraries/Animated/createAnimatedComponent', () => { } }) +const mockMutate = jest.fn() +jest.mock('features/reactions/api/useReactionMutation', () => ({ + useReactionMutation: () => ({ mutate: mockMutate }), +})) + describe('Bookings', () => { beforeEach(() => { mockServer.getApi('/v1/subcategories/v2', subcategoriesDataTest) @@ -66,8 +71,8 @@ describe('Bookings', () => { renderBookings() await act(async () => {}) - //Due to multiple renders useBookings is called twice - expect(useBookingsSpy).toHaveBeenCalledTimes(2) + //Due to multiple renders useBookings is called three times + expect(useBookingsSpy).toHaveBeenCalledTimes(3) }) it('should display the right number of ongoing bookings', async () => { @@ -82,10 +87,11 @@ describe('Bookings', () => { data: emptyBookingsSnap, isFetching: false, } as unknown as QueryObserverResult - // Due to multiple renders we need to mock useBookings twice + // Due to multiple renders we need to mock useBookings three times useBookingsSpy .mockReturnValueOnce(useBookingsResultMock) .mockReturnValueOnce(useBookingsResultMock) + .mockReturnValueOnce(useBookingsResultMock) renderBookings() await act(async () => {}) @@ -112,6 +118,9 @@ describe('Bookings', () => { describe('when feature flag is activated', () => { beforeEach(() => { + // Due to multiple renders we need to mock useBookings three times + useFeatureFlagSpy.mockReturnValueOnce(true) + useFeatureFlagSpy.mockReturnValueOnce(true) useFeatureFlagSpy.mockReturnValueOnce(true) }) @@ -135,6 +144,31 @@ describe('Bookings', () => { expect(await screen.findAllByText('Avez-vous déjà vu\u00a0?')).toHaveLength(2) }) + + it('should call updateReactions when switching from COMPLETED tab', async () => { + renderBookings() + + fireEvent.press(await screen.findByText('Terminées')) + + fireEvent.press(await screen.findByText('En cours')) + + expect(mockMutate).toHaveBeenCalledTimes(1) + }) + + it('should update reactions for ended bookings without user reaction', async () => { + renderBookings() + + fireEvent.press(await screen.findByText('Terminées')) + + fireEvent.press(await screen.findByText('En cours')) + + expect(mockMutate).toHaveBeenCalledWith({ + reactions: [ + { offerId: 147874, reactionType: ReactionTypeEnum.NO_REACTION }, + { offerId: 147874, reactionType: ReactionTypeEnum.NO_REACTION }, + ], + }) + }) }) }) diff --git a/src/features/bookings/pages/Bookings/Bookings.tsx b/src/features/bookings/pages/Bookings/Bookings.tsx index 1719c0be874..0c9e34f7f17 100644 --- a/src/features/bookings/pages/Bookings/Bookings.tsx +++ b/src/features/bookings/pages/Bookings/Bookings.tsx @@ -1,8 +1,12 @@ -import React from 'react' +import { useFocusEffect } from '@react-navigation/native' +import React, { useCallback, useState } from 'react' import styled from 'styled-components/native' +import { ReactionTypeEnum } from 'api/gen' +import { useBookings } from 'features/bookings/api' import { OnGoingBookingsList } from 'features/bookings/components/OnGoingBookingsList' import { EndedBookings } from 'features/bookings/pages/EndedBookings/EndedBookings' +import { useReactionMutation } from 'features/reactions/api/useReactionMutation' import { TabLayout } from 'features/venue/components/TabLayout/TabLayout' import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag' import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types' @@ -16,10 +20,44 @@ enum Tab { export function Bookings() { const enableBookingImprove = useFeatureFlag(RemoteStoreFeatureFlags.WIP_BOOKING_IMPROVE) + const [activeTab, setActiveTab] = useState(Tab.CURRENT) + const [previousTab, setPreviousTab] = useState(activeTab) + const { data: bookings } = useBookings() + const { mutate: addReaction } = useReactionMutation() + + const updateReactions = useCallback(() => { + const bookingsToUpdate = + bookings?.ended_bookings + .filter((ended_booking) => ended_booking.userReaction === null) + .map((booking) => booking.stock.offer.id) ?? [] + + const mutationPayload = bookingsToUpdate.map((bookingId) => ({ + offerId: bookingId, + reactionType: ReactionTypeEnum.NO_REACTION, + })) + if (mutationPayload.length > 0) { + addReaction({ reactions: mutationPayload }) + } + }, [addReaction, bookings?.ended_bookings]) + + useFocusEffect( + useCallback(() => { + return () => { + if (previousTab === Tab.COMPLETED) { + updateReactions() + } + setPreviousTab(activeTab) + } + }, [activeTab, previousTab, updateReactions]) + ) + const tabPanels = { [Tab.CURRENT]: , - [Tab.COMPLETED]: , + [Tab.COMPLETED]: ( + + ), } + return ( {enableBookingImprove ? ( @@ -29,6 +67,9 @@ export function Bookings() { tabPanels={tabPanels} defaultTab={Tab.CURRENT} tabs={[{ key: Tab.CURRENT }, { key: Tab.COMPLETED }]} + onTabChange={(key) => { + setActiveTab(key) + }} /> ) : ( diff --git a/src/features/bookings/pages/Bookings/Bookings.web.test.tsx b/src/features/bookings/pages/Bookings/Bookings.web.test.tsx index a238b3fa1ab..61689727ba2 100644 --- a/src/features/bookings/pages/Bookings/Bookings.web.test.tsx +++ b/src/features/bookings/pages/Bookings/Bookings.web.test.tsx @@ -52,7 +52,7 @@ describe('Bookings', () => { renderBookings(bookingsSnap) await waitFor(() => { - expect(useBookings).toHaveBeenCalledTimes(1) + expect(useBookings).toHaveBeenCalledTimes(2) }) }) diff --git a/src/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx b/src/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx index c1372f23eaa..3c47a530283 100644 --- a/src/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx +++ b/src/features/bookings/pages/EndedBookings/EndedBookings.native.test.tsx @@ -1,8 +1,6 @@ import React, { Fragment, FunctionComponent } from 'react' -import { QueryObserverResult } from 'react-query' import { BookingsResponse } from 'api/gen' -import * as bookingsAPI from 'features/bookings/api/useBookings' import { bookingsSnap } from 'features/bookings/fixtures/bookingsSnap' import * as useGoBack from 'features/navigation/useGoBack' import * as useFeatureFlagAPI from 'libs/firebase/firestore/featureFlags/useFeatureFlag' @@ -62,13 +60,6 @@ describe('EndedBookings', () => { expect(screen).toMatchSnapshot() }) - it('should always execute the query (in cache or in network)', () => { - const useBookings = jest.spyOn(bookingsAPI, 'useBookings') - renderEndedBookings(bookingsSnap) - - expect(useBookings).toHaveBeenCalledTimes(1) - }) - it('should display the right number of ended bookings', () => { renderEndedBookings(bookingsSnap) @@ -107,11 +98,9 @@ const renderEndedBookings = ( bookings: BookingsResponse, Wrapper: FunctionComponent<{ children: JSX.Element }> = Fragment ) => { - jest - .spyOn(bookingsAPI, 'useBookings') - .mockReturnValue({ data: bookings } as QueryObserverResult) - return render( - {reactQueryProviderHOC()} + + {reactQueryProviderHOC()} + ) } diff --git a/src/features/bookings/pages/EndedBookings/EndedBookings.perf.test.tsx b/src/features/bookings/pages/EndedBookings/EndedBookings.perf.test.tsx index bc15782bdf7..785271c9b05 100644 --- a/src/features/bookings/pages/EndedBookings/EndedBookings.perf.test.tsx +++ b/src/features/bookings/pages/EndedBookings/EndedBookings.perf.test.tsx @@ -50,7 +50,7 @@ describe('', () => { await measurePerformance( reactQueryProviderHOC( - + ), { diff --git a/src/features/bookings/pages/EndedBookings/EndedBookings.tsx b/src/features/bookings/pages/EndedBookings/EndedBookings.tsx index 04cdfb80af4..3e493597105 100644 --- a/src/features/bookings/pages/EndedBookings/EndedBookings.tsx +++ b/src/features/bookings/pages/EndedBookings/EndedBookings.tsx @@ -2,8 +2,7 @@ import React, { FunctionComponent, useCallback } from 'react' import { FlatList, ListRenderItem } from 'react-native' import styled from 'styled-components/native' -import { PostReactionRequest } from 'api/gen' -import { useBookings } from 'features/bookings/api' +import { BookingsResponse, PostOneReactionRequest, PostReactionRequest } from 'api/gen' import { EndedBookingItem } from 'features/bookings/components/EndedBookingItem' import { NoBookingsView } from 'features/bookings/components/NoBookingsView' import { Booking } from 'features/bookings/types' @@ -25,10 +24,10 @@ const keyExtractor: (item: Booking) => string = (item) => item.id.toString() type Props = { enableBookingImprove: boolean + bookings: BookingsResponse | undefined } -export const EndedBookings: FunctionComponent = ({ enableBookingImprove }) => { - const { data: bookings } = useBookings() +export const EndedBookings: FunctionComponent = ({ enableBookingImprove, bookings }) => { const { goBack } = useGoBack(...getTabNavConfig('Bookings')) const headerHeight = useGetHeaderHeight() const { mutate: addReaction } = useReactionMutation() @@ -40,8 +39,11 @@ export const EndedBookings: FunctionComponent = ({ enableBookingImprove } }) const handleSaveReaction = useCallback( - ({ offerId, reactionType }: PostReactionRequest) => { - addReaction({ offerId, reactionType }) + ({ offerId, reactionType }: PostOneReactionRequest) => { + const reactionRequest: PostReactionRequest = { + reactions: [{ offerId, reactionType }], + } + addReaction(reactionRequest) return Promise.resolve(true) }, [addReaction] diff --git a/src/features/bookings/pages/EndedBookings/EndedBookings.web.test.tsx b/src/features/bookings/pages/EndedBookings/EndedBookings.web.test.tsx index c450448d9fd..83e140fa739 100644 --- a/src/features/bookings/pages/EndedBookings/EndedBookings.web.test.tsx +++ b/src/features/bookings/pages/EndedBookings/EndedBookings.web.test.tsx @@ -45,5 +45,7 @@ const renderEndedBookings = (bookings: BookingsResponse) => { .spyOn(bookingsAPI, 'useBookings') .mockReturnValue({ data: bookings } as QueryObserverResult) - return render(reactQueryProviderHOC()) + return render( + reactQueryProviderHOC() + ) } diff --git a/src/features/bookings/types.ts b/src/features/bookings/types.ts index 7957f04834e..b50cdc1bd80 100644 --- a/src/features/bookings/types.ts +++ b/src/features/bookings/types.ts @@ -1,4 +1,4 @@ -import { BookingReponse, PostReactionRequest } from 'api/gen' +import { BookingReponse, PostOneReactionRequest } from 'api/gen' export type BookingProperties = { isDuo?: boolean @@ -14,5 +14,5 @@ export type Booking = BookingReponse export interface BookingItemProps { booking: Booking eligibleBookingsForArchive?: Booking[] - onSaveReaction?: (reactionParams: PostReactionRequest) => Promise + onSaveReaction?: (reactionParams: PostOneReactionRequest) => Promise } diff --git a/src/features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer.native.test.tsx b/src/features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer.native.test.tsx index e1fa5848481..d55dd6f2a88 100644 --- a/src/features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer.native.test.tsx +++ b/src/features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer.native.test.tsx @@ -142,8 +142,12 @@ describe('IncomingReactionModalContainer', () => { await waitFor(() => { expect(mockMutate).toHaveBeenNthCalledWith(1, { - offerId: bookingsSnap.ended_bookings[0].stock.offer.id, - reactionType: ReactionTypeEnum.LIKE, + reactions: [ + { + offerId: bookingsSnap.ended_bookings[0].stock.offer.id, + reactionType: ReactionTypeEnum.LIKE, + }, + ], }) }) }) @@ -197,8 +201,12 @@ describe('IncomingReactionModalContainer', () => { await waitFor(() => { expect(mockMutate).toHaveBeenNthCalledWith(1, { - offerId: bookingsSnap.ended_bookings[0].stock.offer.id, - reactionType: ReactionTypeEnum.NO_REACTION, + reactions: [ + { + offerId: bookingsSnap.ended_bookings[0].stock.offer.id, + reactionType: ReactionTypeEnum.NO_REACTION, + }, + ], }) }) }) diff --git a/src/features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer.tsx b/src/features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer.tsx index 268715e6050..95ba0f3d0c7 100644 --- a/src/features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer.tsx +++ b/src/features/home/components/IncomingReactionModalContainer/IncomingReactionModalContainer.tsx @@ -1,6 +1,6 @@ import React, { useCallback } from 'react' -import { PostReactionRequest, ReactionTypeEnum } from 'api/gen' +import { PostOneReactionRequest, PostReactionRequest, ReactionTypeEnum } from 'api/gen' import { useBookings } from 'features/bookings/api' import { TWENTY_FOUR_HOURS } from 'features/home/constants' import { useReactionMutation } from 'features/reactions/api/useReactionMutation' @@ -30,8 +30,11 @@ export const IncomingReactionModalContainer = () => { const firstBooking = bookingsWithoutReaction[0] const handleSaveReaction = useCallback( - ({ offerId, reactionType }: PostReactionRequest) => { - addReaction({ offerId, reactionType }) + ({ offerId, reactionType }: PostOneReactionRequest) => { + const reactionRequest: PostReactionRequest = { + reactions: [{ offerId, reactionType }], + } + addReaction(reactionRequest) return Promise.resolve(true) }, [addReaction] @@ -41,8 +44,12 @@ export const IncomingReactionModalContainer = () => { if (!firstBooking) return addReaction({ - offerId: firstBooking.stock.offer.id, - reactionType: ReactionTypeEnum.NO_REACTION, + reactions: [ + { + offerId: firstBooking.stock.offer.id, + reactionType: ReactionTypeEnum.NO_REACTION, + }, + ], }) hideReactionModal() diff --git a/src/features/reactions/api/useReactionMutation.test.ts b/src/features/reactions/api/useReactionMutation.test.ts index 960c0f2b57c..492b3de3f80 100644 --- a/src/features/reactions/api/useReactionMutation.test.ts +++ b/src/features/reactions/api/useReactionMutation.test.ts @@ -21,7 +21,7 @@ describe('useReactionMutation', () => { const { result } = renderUseReactionMutation() - result.current.mutate({ offerId: 12, reactionType: ReactionTypeEnum.LIKE }) + result.current.mutate({ reactions: [{ offerId: 12, reactionType: ReactionTypeEnum.LIKE }] }) await waitFor(() => expect(result.current.isSuccess).toBeTruthy()) }) @@ -31,7 +31,7 @@ describe('useReactionMutation', () => { const { result } = renderUseReactionMutation() - result.current.mutate({ offerId: 12, reactionType: ReactionTypeEnum.LIKE }) + result.current.mutate({ reactions: [{ offerId: 12, reactionType: ReactionTypeEnum.LIKE }] }) await waitFor(() => { expect(result.current.isError).toBeTruthy() diff --git a/src/features/reactions/components/ReactionChoiceModal/ReactionChoiceModal.tsx b/src/features/reactions/components/ReactionChoiceModal/ReactionChoiceModal.tsx index b26eb7d8d43..ef8b997b5d1 100644 --- a/src/features/reactions/components/ReactionChoiceModal/ReactionChoiceModal.tsx +++ b/src/features/reactions/components/ReactionChoiceModal/ReactionChoiceModal.tsx @@ -2,7 +2,12 @@ import React, { FunctionComponent, useCallback, useEffect, useMemo, useState } f import { useWindowDimensions } from 'react-native' import styled, { useTheme } from 'styled-components/native' -import { BookingOfferResponse, OfferResponse, PostReactionRequest, ReactionTypeEnum } from 'api/gen' +import { + BookingOfferResponse, + OfferResponse, + PostOneReactionRequest, + ReactionTypeEnum, +} from 'api/gen' import { ReactionToggleButton } from 'features/reactions/components/ReactionToggleButton/ReactionToggleButton' import { ReactionFromEnum } from 'features/reactions/enum' import { useSubcategory } from 'libs/subcategories' @@ -24,8 +29,8 @@ type Props = { visible: boolean defaultReaction?: ReactionTypeEnum | null closeModal: () => void - onSave?: ({ offerId, reactionType }: PostReactionRequest) => void from: ReactionFromEnum + onSave?: ({ offerId, reactionType }: PostOneReactionRequest) => void } export const ReactionChoiceModal: FunctionComponent = ({ diff --git a/src/features/venue/components/TabLayout/TabLayout.tsx b/src/features/venue/components/TabLayout/TabLayout.tsx index e92f124377f..80fa4e58730 100644 --- a/src/features/venue/components/TabLayout/TabLayout.tsx +++ b/src/features/venue/components/TabLayout/TabLayout.tsx @@ -10,7 +10,7 @@ import { InfoTab } from './InfoTab' type TabLayoutProps = { tabPanels: Record - onTabChange?: Partial void>> + onTabChange?: Partial void>> | ((tab: TabKeyType) => void) tabs: { key: TabKeyType; Icon?: React.FC }[] defaultTab: TabKeyType } @@ -30,7 +30,11 @@ export const TabLayout = ({ const onTabPress = (tab: TabKeyType) => { setSelectedTab(tab) - onTabChange?.[tab]?.() + if (typeof onTabChange === 'object') { + onTabChange?.[tab]?.() + } else if (typeof onTabChange === 'function') { + onTabChange(tab) + } } useTabArrowNavigation({