-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* [CLEAN]: Remove unused component and condition to declutter code * [REFACTO]: Rethink existing styling logic to ease future component integration * [FIX]: remove empty `other offers` block * [DEV]: Create new components + use FF + fix styling * [TESTS]: Add test and revert unwanted change * [FIX]: styling cleanup * [DEV-REVIEW]: Inverse condition
- Loading branch information
1 parent
d1d5cc4
commit bede96a
Showing
13 changed files
with
329 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
src/features/offer/components/OfferNewXPCine/CineBlock.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React, { FunctionComponent } from 'react' | ||
| import { View } from 'react-native' | ||
| import styled from 'styled-components/native' | ||
|
|
||
| import { OfferResponseV2 } from 'api/gen' | ||
| import { VenueBlock } from 'features/offer/components/OfferVenueBlock/VenueBlock' | ||
| import { EventCardProps } from 'ui/components/eventCard/EventCard' | ||
| import { EventCardList } from 'ui/components/eventCard/EventCardList' | ||
| import { Spacer } from 'ui/theme' | ||
|
|
||
| type Props = { | ||
| offer: OfferResponseV2 | ||
| distance?: string | ||
| onSeeVenuePress?: VoidFunction | ||
| CTAOfferModal?: React.ReactElement<unknown, string | React.JSXElementConstructor<unknown>> | null | ||
| eventCardData: EventCardProps[] | ||
| } | ||
| export const CineBlock: FunctionComponent<Props> = ({ | ||
| offer, | ||
| distance, | ||
| onSeeVenuePress, | ||
| CTAOfferModal, | ||
| eventCardData, | ||
| }) => { | ||
| return ( | ||
| <CineBlockContainer> | ||
| <Spacer.Column numberOfSpaces={6} /> | ||
| <VenueBlock distance={distance} offer={offer} onSeeVenuePress={onSeeVenuePress} /> | ||
| <Spacer.Column numberOfSpaces={4} /> | ||
| {eventCardData ? <EventCardList data={eventCardData} /> : null} | ||
| {CTAOfferModal} | ||
| </CineBlockContainer> | ||
| ) | ||
| } | ||
|
|
||
| const CineBlockContainer = styled(View)(({ theme }) => ({ | ||
| marginHorizontal: theme.contentPage.marginHorizontal, | ||
| })) |
109 changes: 109 additions & 0 deletions
109
src/features/offer/components/OfferNewXPCine/OfferNewXPCineBlock.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import React, { useEffect, useMemo, useRef } from 'react' | ||
| import { FlatList, View } from 'react-native' | ||
| import styled, { useTheme } from 'styled-components/native' | ||
|
|
||
| import { OfferResponseV2 } from 'api/gen' | ||
| import { MovieCalendar } from 'features/offer/components/MovieCalendar/MovieCalendar' | ||
| import { useMovieScreeningCalendar } from 'features/offer/components/MovieScreeningCalendar/useMovieScreeningCalendar' | ||
| import { useSelectedDateScreening } from 'features/offer/components/MovieScreeningCalendar/useSelectedDateScreenings' | ||
| import { useOfferCTAButton } from 'features/offer/components/OfferCTAButton/useOfferCTAButton' | ||
| import { CineBlock } from 'features/offer/components/OfferNewXPCine/CineBlock' | ||
| import { Subcategory } from 'libs/subcategories/types' | ||
| import { getSpacing, Spacer, TypoDS } from 'ui/theme' | ||
| import { getHeadingAttrs } from 'ui/theme/typographyAttrs/getHeadingAttrs' | ||
|
|
||
| type Props = { | ||
| title: string | ||
| distance?: string | ||
| offer: OfferResponseV2 | ||
| subcategory: Subcategory | ||
| onSeeVenuePress?: VoidFunction | ||
| } | ||
|
|
||
| export function OfferNewXPCineBlock({ | ||
| title, | ||
| distance, | ||
| onSeeVenuePress, | ||
| offer, | ||
| subcategory, | ||
| }: Readonly<Props>) { | ||
| const theme = useTheme() | ||
| const { stocks, isExternalBookingsDisabled } = offer | ||
| const offerVenueId = offer.venue.id | ||
|
|
||
| const { movieScreeningDates, selectedDate, setSelectedDate, selectedScreeningStock } = | ||
| useMovieScreeningCalendar(stocks) | ||
|
|
||
| const { bookingData, selectedDateScreenings } = useSelectedDateScreening( | ||
| selectedScreeningStock, | ||
| isExternalBookingsDisabled | ||
| ) | ||
|
|
||
| const { | ||
| onPress: onPressOfferCTA, | ||
| CTAOfferModal, | ||
| movieScreeningUserData, | ||
| } = useOfferCTAButton(offer, subcategory, bookingData) | ||
|
|
||
| const flatListRef = useRef<FlatList | null>(null) | ||
|
|
||
| const eventCardData = useMemo( | ||
| () => selectedDateScreenings(offerVenueId, onPressOfferCTA, movieScreeningUserData), | ||
| [offerVenueId, onPressOfferCTA, selectedDateScreenings, movieScreeningUserData] | ||
| ) | ||
|
|
||
| useEffect(() => { | ||
| if (flatListRef?.current) { | ||
| setSelectedDate(movieScreeningDates[0]) | ||
| flatListRef.current?.scrollToOffset({ offset: 0 }) | ||
| } | ||
| }, [flatListRef, movieScreeningDates, setSelectedDate]) | ||
|
|
||
| return ( | ||
| <Container testID="offer-new-xp-cine-block"> | ||
| <TitleContainer> | ||
| <TypoDS.Title3 {...getHeadingAttrs(2)}>{title}</TypoDS.Title3> | ||
| </TitleContainer> | ||
|
|
||
| <Spacer.Column numberOfSpaces={4} /> | ||
|
|
||
| <MovieCalendarContainer> | ||
| <MovieCalendar | ||
| dates={movieScreeningDates} | ||
| selectedDate={selectedDate} | ||
| onTabChange={setSelectedDate} | ||
| flatListRef={flatListRef} | ||
| /> | ||
| </MovieCalendarContainer> | ||
|
|
||
| <View> | ||
| <CineBlock | ||
| offer={offer} | ||
| distance={distance} | ||
| onSeeVenuePress={onSeeVenuePress} | ||
| CTAOfferModal={CTAOfferModal} | ||
| eventCardData={eventCardData} | ||
| /> | ||
| <Spacer.Column numberOfSpaces={theme.isDesktopViewport ? 6 : 4} /> | ||
| <Divider /> | ||
| </View> | ||
| </Container> | ||
| ) | ||
| } | ||
|
|
||
| const Container = styled(View)({ | ||
| marginVertical: 0, | ||
| }) | ||
|
|
||
| const MovieCalendarContainer = styled(View)(({ theme }) => ({ | ||
| marginRight: theme.isDesktopViewport ? -getSpacing(16) : 0, // cancels padding of the parent container | ||
| })) | ||
|
|
||
| const TitleContainer = styled(View)(({ theme }) => ({ | ||
| marginHorizontal: theme.isDesktopViewport ? undefined : theme.contentPage.marginHorizontal, | ||
| })) | ||
|
|
||
| const Divider = styled.View(({ theme }) => ({ | ||
| height: 1, | ||
| backgroundColor: theme.colors.greyMedium, | ||
| })) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.