Hotels: Add filter stripe for stay22 hotels

app/hotels/src/allHotels/HotelsPaginationContainer.js

@@ -69,7 +69,6 @@ export function HotelsPaginationContainer(props: Props) {
         isLoading={isLoading}
         // $FlowExpectedError: Relay flow types does not work for plural: true
         data={data}
-        top={56}
         closeHotels={closeHotels}
       />
     </>

app/hotels/src/allHotels/NewAllHotelsSearch.js

@@ -9,10 +9,10 @@ import {
   type HotelsFilterState,
 } from '../HotelsFilterContext';
 import { type HotelsContextState, HotelsContext } from '../HotelsContext';
-import { sanitizeHotelAmenities } from '../GraphQLSanitizers';
 import type { NewAllHotelsSearchQueryResponse } from './__generated__/NewAllHotelsSearchQuery.graphql';
 import HotelsPaginationContainer from './HotelsPaginationContainer';
 import HotelsSearch from './HotelsSearch';
+import useHotelsFilter from './useHotelsFilter';
 
 const query = graphql`
   query NewAllHotelsSearchQuery(
@@ -33,9 +33,7 @@ const renderAllHotelsSearchList = (
 };
 
 const NewAllHotelsSearch = () => {
-  const { orderBy, filterParams }: HotelsFilterState = React.useContext(
-    HotelsFilterContext,
-  );
+  const { orderBy }: HotelsFilterState = React.useContext(HotelsFilterContext);
   const {
     checkin,
     checkout,
@@ -44,12 +42,8 @@ const NewAllHotelsSearch = () => {
     cityId,
     closeHotels: onClose,
   }: HotelsContextState = React.useContext(HotelsContext);
-  const {
-    hotelAmenities,
-    maxPrice,
-    minPrice,
-    ...restFilterParams
-  } = filterParams;
+  const hotelsFilter = useHotelsFilter();
+
   return (
     <HotelsSearch
       shouldRenderDateError={checkin === null || checkout === null}
@@ -62,12 +56,7 @@ const NewAllHotelsSearch = () => {
           checkout: DateFormatter(checkout ?? new Date()).formatForMachine(),
           roomsConfiguration,
         },
-        filter: {
-          ...restFilterParams,
-          ...(maxPrice != null ? { maxPrice: maxPrice.toNumber() } : {}),
-          ...(minPrice != null ? { minPrice: minPrice.toNumber() } : {}),
-          hotelAmenities: sanitizeHotelAmenities(hotelAmenities),
-        },
+        filter: hotelsFilter,
         first: 50,
         options: {
           currency,

app/hotels/src/allHotels/RenderSearchResults.js

@@ -20,7 +20,6 @@ type Props = {|
   +hasMore: boolean,
   +isLoading: boolean,
   +onLoadMore: () => void,
-  +top: number,
   +closeHotels: () => void,
 |};
 
@@ -92,11 +91,12 @@ export const RenderSearchResults = (props: Props) => {
   return (
     <>
       <Animated.View
-        style={{
-          ...StyleSheet.absoluteFillObject,
-          top: props.top,
-          transform: [{ translateY: listAnimation }],
-        }}
+        style={[
+          styles.container,
+          {
+            transform: [{ translateY: listAnimation }],
+          },
+        ]}
         testID="list-wrapper"
         onLayout={onLayout}
       >
@@ -115,11 +115,12 @@ export const RenderSearchResults = (props: Props) => {
         </View>
       </Animated.View>
       <Animated.View
-        style={{
-          ...StyleSheet.absoluteFillObject,
-          top: props.top,
-          transform: [{ translateY: mapAnimation }],
-        }}
+        style={[
+          styles.container,
+          {
+            transform: [{ translateY: mapAnimation }],
+          },
+        ]}
         testID="map-wrapper"
       >
         <MapScreen data={data} />
@@ -134,6 +135,10 @@ const styles = StyleSheet.create({
     paddingBottom,
     flex: 1,
   },
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    top: 56,
+  },
 });
 
 export default createFragmentContainer(RenderSearchResults, {

app/hotels/src/allHotels/Stay22HotelsSearch.js

@@ -8,10 +8,12 @@ import { HotelsContext, type HotelsContextState } from '../HotelsContext';
 import type { Stay22HotelsSearchQueryResponse } from './__generated__/Stay22HotelsSearchQuery.graphql';
 import Stay22PaginationContainer from './Stay22PaginationContainer';
 import HotelsSearch from './HotelsSearch';
+import useHotelsFilter from './useHotelsFilter';
 
 const query = graphql`
   query Stay22HotelsSearchQuery(
     $search: Stay22HotelsSearchInput!
+    $filter: HotelsFilterInput!
     $first: Int
     $after: String
   ) {
@@ -34,6 +36,7 @@ export function Stay22HotelsSearch() {
     longitude,
     closeHotels: onClose,
   }: HotelsContextState = React.useContext(HotelsContext);
+  const hotelsFilter = useHotelsFilter();
 
   const shouldRenderDateError =
     checkin === null ||
@@ -56,6 +59,7 @@ export function Stay22HotelsSearch() {
           guests: getGuestCount(),
           currency,
         },
+        filter: hotelsFilter,
       }}
       render={renderAllHotelsSearchList}
     />

app/hotels/src/allHotels/Stay22PaginationContainer.js

@@ -6,12 +6,15 @@ import {
   createPaginationContainer,
   type RelayPaginationProp,
 } from '@kiwicom/mobile-relay';
-import { Logger } from '@kiwicom/mobile-shared';
+import { Logger, StyleSheet } from '@kiwicom/mobile-shared';
 import { Decimal } from 'decimal.js-light';
+import { View } from 'react-native';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import type { Stay22PaginationContainer_data as Stay22PaginationContainerType } from './__generated__/Stay22PaginationContainer_data.graphql';
 import { HotelsContext, type HotelsContextState } from '../HotelsContext';
 import RenderSearchResults from './RenderSearchResults';
+import FilterStripe from '../filter/FilterStripe';
 
 type Props = {|
   +data: Stay22PaginationContainerType,
@@ -26,9 +29,9 @@ export function Stay22PaginationContainer(props: Props) {
   }: HotelsContextState = React.useContext(HotelsContext);
 
   const priceMax =
-    props.data.allAvailableStay22Hotels?.stats?.minPrice?.amount ?? 0;
-  const priceMin =
     props.data.allAvailableStay22Hotels?.stats?.maxPrice?.amount ?? 0;
+  const priceMin =
+    props.data.allAvailableStay22Hotels?.stats?.minPrice?.amount ?? 0;
 
   React.useEffect(() => {
     Logger.ancillaryDisplayed(
@@ -57,24 +60,39 @@ export function Stay22PaginationContainer(props: Props) {
   const data = edges.map(hotel => hotel?.node);
 
   return (
-    <RenderSearchResults
-      // $FlowExpectedError: Relay flow types does not work for plural: true
-      data={data}
-      onLoadMore={loadMore}
-      isLoading={isLoading}
-      hasMore={props.relay.hasMore()}
-      top={0}
-      closeHotels={closeHotels}
-    />
+    <>
+      <View style={styles.filterContainer}>
+        <FilterStripe />
+      </View>
+      <RenderSearchResults
+        // $FlowExpectedError: Relay flow types does not work for plural: true
+        data={data}
+        onLoadMore={loadMore}
+        isLoading={isLoading}
+        hasMore={props.relay.hasMore()}
+        closeHotels={closeHotels}
+      />
+    </>
   );
 }
 
+const styles = StyleSheet.create({
+  filterContainer: {
+    zIndex: parseInt(defaultTokens.zIndexSticky, 10),
+  },
+});
+
 export default createPaginationContainer(
   Stay22PaginationContainer,
   {
     data: graphql`
       fragment Stay22PaginationContainer_data on RootQuery {
-        allAvailableStay22Hotels(search: $search, first: $first, after: $after)
+        allAvailableStay22Hotels(
+          search: $search
+          first: $first
+          after: $after
+          filter: $filter
+        )
           @connection(
             key: "Stay22PaginationContainer_allAvailableStay22Hotels"
           ) {
@@ -99,16 +117,18 @@ export default createPaginationContainer(
   },
   {
     getVariables(props, { count, cursor }, fragmentVariables) {
-      const { search } = fragmentVariables;
+      const { search, filter } = fragmentVariables;
       return {
         first: count,
         after: cursor,
         search,
+        filter,
       };
     },
     query: graphql`
       query Stay22PaginationContainerQuery(
         $search: Stay22HotelsSearchInput!
+        $filter: HotelsFilterInput!
         $after: String
         $first: Int
       ) {