diff --git a/__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap b/__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap index 77d74bbf7ae..498fc001603 100644 --- a/__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap +++ b/__snapshots__/features/venue/pages/Venue/Venue.native.test.tsx.native-snap @@ -103,97 +103,44 @@ exports[`<Venue /> should match snapshot 1`] = ` } > <View - maxHeight={56} + gap={4} style={ [ { - "flexDirection": "row", - "flexWrap": "wrap", - "gap": 8, - "maxHeight": 56, - "overflow": "hidden", + "gap": 16, }, ] } - testID="tagsContainer" > <View + maxHeight={56} style={ [ { - "alignSelf": "baseline", - "backgroundColor": "#F1F1F4", - "borderRadius": 6, "flexDirection": "row", - "paddingHorizontal": 8, - "paddingVertical": 4, + "flexWrap": "wrap", + "gap": 8, + "maxHeight": 56, + "overflow": "hidden", }, ] } + testID="tagsContainer" > - <Text + <View style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 16, + "alignSelf": "baseline", + "backgroundColor": "#F1F1F4", + "borderRadius": 6, + "flexDirection": "row", + "paddingHorizontal": 8, + "paddingVertical": 4, }, ] } > - Librairie - </Text> - </View> - </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <View - gap={1} - style={ - [ - { - "gap": 4, - }, - ] - } - > - <Text - accessibilityLabel="Nom du lieu : Le Petit Rintintin 1" - adjustsFontSizeToFit={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 19, - "lineHeight": 30.4, - }, - ] - } - > - Le Petit Rintintin 1 - </Text> - <View - gap={3} - style={ - [ - { - "gap": 12, - }, - ] - } - > - <View> <Text style={ [ @@ -201,158 +148,94 @@ exports[`<Venue /> should match snapshot 1`] = ` "color": "#161617", "fontFamily": "Montserrat-SemiBold", "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Adresse - </Text> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "lineHeight": 16, }, ] } > - 1 boulevard Poissonnière, 75000 Paris + Librairie </Text> </View> - <View + </View> + <View + gap={1} + style={ + [ + { + "gap": 4, + }, + ] + } + > + <Text + accessibilityLabel="Nom du lieu : Le Petit Rintintin 1" + adjustsFontSizeToFit={true} style={ [ { - "backgroundColor": "#F1F1F4", - "height": 1, - "width": "100%", + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 19, + "lineHeight": 30.4, }, ] } - /> + > + Le Petit Rintintin 1 + </Text> <View - accessibilityLabel="Copier l’adresse" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={true} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + gap={3} style={ - { - "alignItems": "center", - "backgroundColor": "transparent", - "borderRadius": 24, - "flexDirection": "row", - "justifyContent": "flex-start", - "maxWidth": 500, - "minHeight": 40, - "opacity": 1, - "paddingBottom": 2, - "paddingLeft": 2, - "paddingRight": 2, - "paddingTop": 2, - "userSelect": "auto", - "width": "100%", - } + [ + { + "gap": 12, + }, + ] } - testID="Copier l’adresse" > - <View - style={ - [ - { - "alignItems": "center", - "flexDirection": "row", - }, - ] - } - > - <View + <View> + <Text style={ [ { - "flexDirection": "row", - "flexShrink": 0, + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, ] } > - <View - height={20} - testID="button-icon-left" - width={20} - > - <Text> - button-icon-left-SVG-Mock - </Text> - </View> - <View - numberOfSpaces={2} - style={ - [ - { - "width": 8, - }, - ] - } - /> - </View> + Adresse + </Text> <Text - adjustsFontSizeToFit={false} - numberOfLines={1} style={ [ { "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 15, - "lineHeight": 20, - "maxWidth": "100%", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, }, ] } > - Copier l’adresse + 1 boulevard Poissonnière, 75000 Paris </Text> </View> - </View> - <View - style={ - [ - { - "alignItems": "flex-start", - }, - ] - } - > <View - accessibilityLabel="Voir l’itinéraire" + style={ + [ + { + "backgroundColor": "#F1F1F4", + "height": 1, + "width": "100%", + }, + ] + } + /> + <View + accessibilityLabel="Copier l’adresse" accessibilityState={ { "busy": undefined, @@ -384,23 +267,21 @@ exports[`<Venue /> should match snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "transparent", - "borderRadius": 0, - "borderWidth": 0, + "borderRadius": 24, "flexDirection": "row", - "justifyContent": "center", - "marginTop": 0, + "justifyContent": "flex-start", "maxWidth": 500, - "minHeight": 20, + "minHeight": 40, "opacity": 1, - "paddingBottom": 0, - "paddingLeft": 0, - "paddingRight": 0, - "paddingTop": 0, + "paddingBottom": 2, + "paddingLeft": 2, + "paddingRight": 2, + "paddingTop": 2, "userSelect": "auto", - "width": "auto", + "width": "100%", } } - testID="Voir l’itinéraire" + testID="Copier l’adresse" > <View style={ @@ -423,7 +304,6 @@ exports[`<Venue /> should match snapshot 1`] = ` } > <View - accessibilityLabel="Nouvelle fenêtre" height={20} testID="button-icon-left" width={20} @@ -458,555 +338,596 @@ exports[`<Venue /> should match snapshot 1`] = ` ] } > - Voir l’itinéraire + Copier l’adresse </Text> </View> </View> + <View + style={ + [ + { + "alignItems": "flex-start", + }, + ] + } + > + <View + accessibilityLabel="Voir l’itinéraire" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "backgroundColor": "transparent", + "borderRadius": 0, + "borderWidth": 0, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "maxWidth": 500, + "minHeight": 20, + "opacity": 1, + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "userSelect": "auto", + "width": "auto", + } + } + testID="Voir l’itinéraire" + > + <View + style={ + [ + { + "alignItems": "center", + "flexDirection": "row", + }, + ] + } + > + <View + style={ + [ + { + "flexDirection": "row", + "flexShrink": 0, + }, + ] + } + > + <View + accessibilityLabel="Nouvelle fenêtre" + height={20} + testID="button-icon-left" + width={20} + > + <Text> + button-icon-left-SVG-Mock + </Text> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "width": 8, + }, + ] + } + /> + </View> + <Text + adjustsFontSizeToFit={false} + numberOfLines={1} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 15, + "lineHeight": 20, + "maxWidth": "100%", + }, + ] + } + > + Voir l’itinéraire + </Text> + </View> + </View> + </View> </View> </View> </View> </View> </View> <View - numberOfSpaces={6} + gap={6} style={ [ { - "height": 24, + "gap": 24, }, ] } - /> - <View - animatedStyle={ - { - "value": {}, - } - } - collapsable={false} - layout={ - LinearTransition { - "build": [Function], - "callbackV": undefined, - "dampingV": undefined, - "delayV": undefined, - "durationV": 200, - "easingV": undefined, - "initialValues": undefined, - "massV": undefined, - "overshootClampingV": undefined, - "randomizeDelay": false, - "restDisplacementThresholdV": undefined, - "restSpeedThresholdV": undefined, - "rotateV": undefined, - "stiffnessV": undefined, - "type": undefined, - } - } > <View - gap={6} - style={ - [ - { - "gap": 24, - }, - ] + animatedStyle={ + { + "value": {}, + } } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 8, - }, - ] + collapsable={false} + layout={ + LinearTransition { + "build": [Function], + "callbackV": undefined, + "dampingV": undefined, + "delayV": undefined, + "durationV": 200, + "easingV": undefined, + "initialValues": undefined, + "massV": undefined, + "overshootClampingV": undefined, + "randomizeDelay": false, + "restDisplacementThresholdV": undefined, + "restSpeedThresholdV": undefined, + "rotateV": undefined, + "stiffnessV": undefined, + "type": undefined, } - /> + } + > <View + gap={6} style={ [ { - "flexGrow": 1, - "flexShrink": 1, - "width": "100%", + "gap": 24, }, ] } > <View - accessibilityRole="tablist" style={ [ { - "flexDirection": "row", + "backgroundColor": "#F1F1F4", + "height": 8, }, ] } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "bottom": 0, - "height": 4, - "position": "absolute", - "width": "100%", - }, - ] - } - /> + /> + <View + style={ + [ + { + "flexGrow": 1, + "flexShrink": 1, + "width": "100%", + }, + ] + } + > <View - numberOfSpaces={6} + accessibilityRole="tablist" style={ [ { - "width": 24, + "flexDirection": "row", }, ] } - /> - <View - accessibilityRole="tab" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": true, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "maxWidth": 180, - "opacity": 1, - "userSelect": "auto", - } - } > <View - gap={2} - style={ - [ - { - "alignItems": "center", - "flexDirection": "row", - "flexGrow": 1, - "gap": 8, - "justifyContent": "center", - }, - ] - } - > - <Text - isHover={false} - isSelected={true} - style={ - [ - { - "color": "#eb0055", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 16, - "lineHeight": 25.6, - "textAlign": "center", - }, - ] - } - > - Offres disponibles - </Text> - </View> - <View - numberOfSpaces={2} style={ [ { - "height": 8, + "backgroundColor": "#F1F1F4", + "bottom": 0, + "height": 4, + "position": "absolute", + "width": "100%", }, ] } /> <View - isSelected={true} + numberOfSpaces={6} style={ [ { - "backgroundColor": "#eb0055", - "borderRadius": 4, - "bottom": 0, - "height": 4, - "width": "100%", + "width": 24, }, ] } /> - </View> - <View - accessibilityRole="tab" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": false, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, + <View + accessibilityRole="tab" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": true, + } } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "maxWidth": 180, - "opacity": 1, - "userSelect": "auto", + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } } - } - > - <View - gap={2} + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "alignItems": "center", - "flexDirection": "row", - "flexGrow": 1, - "gap": 8, - "justifyContent": "center", - }, - ] + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "maxWidth": 180, + "opacity": 1, + "userSelect": "auto", + } } > - <Text - isHover={false} - isSelected={false} + <View + gap={2} style={ [ { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 16, - "lineHeight": 25.6, - "textAlign": "center", + "alignItems": "center", + "flexDirection": "row", + "flexGrow": 1, + "gap": 8, + "justifyContent": "center", }, ] } > - Infos pratiques - </Text> + <Text + isHover={false} + isSelected={true} + style={ + [ + { + "color": "#eb0055", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 16, + "lineHeight": 25.6, + "textAlign": "center", + }, + ] + } + > + Offres disponibles + </Text> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <View + isSelected={true} + style={ + [ + { + "backgroundColor": "#eb0055", + "borderRadius": 4, + "bottom": 0, + "height": 4, + "width": "100%", + }, + ] + } + /> </View> <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <View - isSelected={false} - style={ - [ - { - "backgroundColor": "transparent", - "borderRadius": 4, - "bottom": 0, - "height": 4, - "width": "100%", - }, - ] - } - /> - </View> - <View - numberOfSpaces={6} - style={ - [ + accessibilityRole="tab" + accessibilityState={ { - "width": 24, - }, - ] - } - /> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "flexGrow": 1, - "flexShrink": 1, - }, - ] - } - > - <View - numberOfSpaces={6} - style={ - [ + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": false, + } + } + accessibilityValue={ { - "height": 24, - }, - ] - } - /> - <View - gap={4} - style={ - [ + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ { - "gap": 16, - "paddingBottom": 24, - }, - ] - } - > - <View> + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "maxWidth": 180, + "opacity": 1, + "userSelect": "auto", + } + } + > <View + gap={2} style={ [ { + "alignItems": "center", "flexDirection": "row", + "flexGrow": 1, + "gap": 8, + "justifyContent": "center", }, ] } > <Text - numberOfLines={2} + isHover={false} + isSelected={false} style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 19, - "lineHeight": 30.4, - "marginHorizontal": 24, + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 16, + "lineHeight": 25.6, + "textAlign": "center", }, ] } - testID="playlistTitle" > - Toutes les offres + Infos pratiques </Text> </View> - </View> - <View - onLayout={[Function]} - style={ - [ + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <View + isSelected={false} + style={ + [ + { + "backgroundColor": "transparent", + "borderRadius": 4, + "bottom": 0, + "height": 4, + "width": "100%", + }, + ] + } + /> + </View> + <View + numberOfSpaces={6} + style={ + [ { - "position": "relative", - "width": "100%", + "width": 24, + }, + ] + } + /> + </View> + <View + accessibilityRole="none" + style={ + [ + { + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + > + <View + numberOfSpaces={6} + style={ + [ + { + "height": 24, + }, + ] + } + /> + <View + gap={4} + style={ + [ + { + "gap": 16, + "paddingBottom": 24, }, ] } > - <View - style={{}} - > - <RCTScrollView - ItemSeparatorComponent={ - { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 16, - }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], - }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - } - } - ListFooterComponent={ - { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 24, - }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], + <View> + <View + style={ + [ + { + "flexDirection": "row", }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - } + ] } - ListHeaderComponent={ - { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ + > + <Text + numberOfLines={2} + style={ + [ { - "width": 24, + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 19, + "lineHeight": 30.4, + "marginHorizontal": 24, }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], - }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], + ] } - } - applyWindowCorrection={[Function]} - canChangeSize={true} - contentContainerStyle={ + testID="playlistTitle" + > + Toutes les offres + </Text> + </View> + </View> + <View + onLayout={[Function]} + style={ + [ { - "backgroundColor": undefined, - "minHeight": 1, - "minWidth": 1, - "paddingBottom": 0, - "paddingTop": 0, - } - } - contentHeight={250} - contentWidth={432} - data={ - [ + "position": "relative", + "width": "100%", + }, + ] + } + > + <View + style={{}} + > + <RCTScrollView + ItemSeparatorComponent={ { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, - }, - "objectID": "223342", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, - ], - "isDigital": false, - "isDuo": true, - "name": "Titane - VF", - "prices": [ - 0, - 0, - 0, + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 16, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", }, - "venue": {}, - }, + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + } + } + ListFooterComponent={ { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, - }, - "objectID": "223338", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, - ], - "isDigital": false, - "isDuo": true, - "name": "Bac Nord - VF", - "prices": [ - 0, - 0, - 0, + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 24, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", }, - "venue": {}, - }, + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + } + } + ListHeaderComponent={ { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, - }, - "objectID": "223339", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, - ], - "isDigital": false, - "isDuo": true, - "name": "Black Widow - VF", - "prices": [ - 0, - 0, - 0, + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 24, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMA", }, - "venue": {}, - }, - ] - } - dataProvider={ - DataProvider { - "_data": [ + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + } + } + applyWindowCorrection={[Function]} + canChangeSize={true} + contentContainerStyle={ + { + "backgroundColor": undefined, + "minHeight": 1, + "minWidth": 1, + "paddingBottom": 0, + "paddingTop": 0, + } + } + contentHeight={250} + contentWidth={432} + data={ + [ { "_geoloc": { "lat": 47.8898, @@ -1082,174 +1003,67 @@ exports[`<Venue /> should match snapshot 1`] = ` }, "venue": {}, }, - ], - "_firstIndexToProcess": 0, - "_hasStableIds": true, - "_requiresDataChangeHandling": false, - "_size": 3, - "getStableId": [Function], - "rowHasChanged": [Function], + ] } - } - disableRecycling={false} - estimatedItemSize={144} - extendedState={{}} - externalScrollView={[Function]} - finalRenderAheadOffset={187.5} - forceNonDeterministicRendering={true} - horizontal={true} - initialOffset={0} - initialRenderIndex={0} - isHorizontal={true} - keyExtractor={[Function]} - layoutProvider={ - GridLayoutProviderWithProps { - "_acceptableRelayoutDelta": 1, - "_getHeightOrWidth": [Function], - "_getLayoutTypeForIndex": [Function], - "_getSpan": [Function], - "_hasExpired": false, - "_isHorizontal": true, - "_lastLayoutManager": GridLayoutManager { - "_acceptableRelayoutDelta": 1, - "_getSpan": [Function], - "_isGridHorizontal": true, - "_isHorizontal": true, - "_layoutProvider": [Circular], - "_layouts": [ + dataProvider={ + DataProvider { + "_data": [ { - "height": 250, - "type": 0, - "width": 144, - "x": 0, - "y": 0, + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223342", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Titane - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + }, + "venue": {}, }, { - "height": 250, - "type": 0, - "width": 144, - "x": 144, - "y": 0, + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223338", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Bac Nord - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + }, + "venue": {}, }, - { - "height": 250, - "type": 0, - "width": 144, - "x": 288, - "y": 0, - }, - ], - "_maxSpan": 1, - "_renderWindowSize": { - "height": 250, - "width": 800, - }, - "_totalHeight": 250, - "_totalWidth": 432, - "_window": { - "height": 250, - "width": 800, - }, - }, - "_maxSpan": 1, - "_renderWindowSize": { - "height": 250, - "width": 800, - }, - "_setLayoutForType": [Function], - "_tempDim": { - "height": 0, - "width": 0, - }, - "averageWindow": AverageWindow { - "currentAverage": 144, - "currentCount": 1, - "inputValues": [ - 144, - , - , - , - , - , - , - , - , - , - , - , - ], - "nextIndex": 1, - }, - "defaultEstimatedItemSize": 100, - "layoutObject": { - "size": undefined, - "span": undefined, - }, - "props": { - "ItemSeparatorComponent": { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 16, - }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], - }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - }, - "ListFooterComponent": { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 24, - }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], - }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - }, - "ListHeaderComponent": { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 24, - }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], - }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - }, - "data": [ { "_geoloc": { "lat": 47.8898, "lng": -2.83593, }, - "objectID": "223342", + "objectID": "223339", "offer": { "dates": [ 1629312300, @@ -1258,1217 +1072,1405 @@ exports[`<Venue /> should match snapshot 1`] = ` ], "isDigital": false, "isDuo": true, - "name": "Titane - VF", + "name": "Black Widow - VF", "prices": [ 0, 0, 0, ], "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMA", }, "venue": {}, }, - { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, + ], + "_firstIndexToProcess": 0, + "_hasStableIds": true, + "_requiresDataChangeHandling": false, + "_size": 3, + "getStableId": [Function], + "rowHasChanged": [Function], + } + } + disableRecycling={false} + estimatedItemSize={144} + extendedState={{}} + externalScrollView={[Function]} + finalRenderAheadOffset={187.5} + forceNonDeterministicRendering={true} + horizontal={true} + initialOffset={0} + initialRenderIndex={0} + isHorizontal={true} + keyExtractor={[Function]} + layoutProvider={ + GridLayoutProviderWithProps { + "_acceptableRelayoutDelta": 1, + "_getHeightOrWidth": [Function], + "_getLayoutTypeForIndex": [Function], + "_getSpan": [Function], + "_hasExpired": false, + "_isHorizontal": true, + "_lastLayoutManager": GridLayoutManager { + "_acceptableRelayoutDelta": 1, + "_getSpan": [Function], + "_isGridHorizontal": true, + "_isHorizontal": true, + "_layoutProvider": [Circular], + "_layouts": [ + { + "height": 250, + "type": 0, + "width": 144, + "x": 0, + "y": 0, }, - "objectID": "223338", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, - ], - "isDigital": false, - "isDuo": true, - "name": "Bac Nord - VF", - "prices": [ - 0, - 0, - 0, - ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + { + "height": 250, + "type": 0, + "width": 144, + "x": 144, + "y": 0, }, - "venue": {}, + { + "height": 250, + "type": 0, + "width": 144, + "x": 288, + "y": 0, + }, + ], + "_maxSpan": 1, + "_renderWindowSize": { + "height": 250, + "width": 800, }, - { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, + "_totalHeight": 250, + "_totalWidth": 432, + "_window": { + "height": 250, + "width": 800, + }, + }, + "_maxSpan": 1, + "_renderWindowSize": { + "height": 250, + "width": 800, + }, + "_setLayoutForType": [Function], + "_tempDim": { + "height": 0, + "width": 0, + }, + "averageWindow": AverageWindow { + "currentAverage": 144, + "currentCount": 1, + "inputValues": [ + 144, + , + , + , + , + , + , + , + , + , + , + , + ], + "nextIndex": 1, + }, + "defaultEstimatedItemSize": 100, + "layoutObject": { + "size": undefined, + "span": undefined, + }, + "props": { + "ItemSeparatorComponent": { + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 16, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", + ], }, - "objectID": "223339", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + }, + "ListFooterComponent": { + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 24, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", ], - "isDigital": false, - "isDuo": true, - "name": "Black Widow - VF", - "prices": [ - 0, - 0, - 0, + }, + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + }, + "ListHeaderComponent": { + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 24, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMA", }, - "venue": {}, + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], }, - ], - "drawDistance": 187.5, - "estimatedItemSize": 144, - "horizontal": true, - "keyExtractor": [Function], - "numColumns": 1, - "onContentSizeChange": [Function], - "onEndReached": undefined, - "onEndReachedThreshold": 0.2, - "onScroll": [Function], - "renderItem": [Function], - "scrollEnabled": true, - "scrollEventThrottle": 16, - "showsHorizontalScrollIndicator": false, - "testID": "offersModuleList", - }, - "renderWindowInsets": { - "height": 0, - "width": 0, - }, - "shouldRefreshWithAnchoring": true, - } - } - maxRenderAhead={562.5} - numColumns={1} - onContentSizeChange={[Function]} - onEndReached={[Function]} - onEndReachedThreshold={0} - onEndReachedThresholdRelative={0.2} - onItemLayout={[Function]} - onLayout={[Function]} - onScroll={[Function]} - onScrollBeginDrag={[Function]} - onSizeChanged={[Function]} - onVisibleIndicesChanged={[Function]} - removeClippedSubviews={false} - renderAheadOffset={0} - renderAheadStep={187.5} - renderContentContainer={[Function]} - renderItem={[Function]} - renderItemContainer={[Function]} - rowRenderer={[Function]} - scrollEnabled={true} - scrollEventThrottle={16} - scrollThrottle={16} - scrollViewProps={ - { - "contentContainerStyle": { - "backgroundColor": undefined, - "minHeight": 1, - "minWidth": 1, - "paddingBottom": 0, - "paddingTop": 0, - }, - "onLayout": [Function], - "onScrollBeginDrag": [Function], - "refreshControl": undefined, - "style": { - "minHeight": 1, - "minWidth": 1, - }, + "data": [ + { + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223342", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Titane - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + }, + "venue": {}, + }, + { + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223338", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Bac Nord - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + }, + "venue": {}, + }, + { + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223339", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Black Widow - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMA", + }, + "venue": {}, + }, + ], + "drawDistance": 187.5, + "estimatedItemSize": 144, + "horizontal": true, + "keyExtractor": [Function], + "numColumns": 1, + "onContentSizeChange": [Function], + "onEndReached": undefined, + "onEndReachedThreshold": 0.2, + "onScroll": [Function], + "renderItem": [Function], + "scrollEnabled": true, + "scrollEventThrottle": 16, + "showsHorizontalScrollIndicator": false, + "testID": "offersModuleList", + }, + "renderWindowInsets": { + "height": 0, + "width": 0, + }, + "shouldRefreshWithAnchoring": true, + } } - } - showsHorizontalScrollIndicator={false} - style={ - { - "minHeight": 1, - "minWidth": 1, + maxRenderAhead={562.5} + numColumns={1} + onContentSizeChange={[Function]} + onEndReached={[Function]} + onEndReachedThreshold={0} + onEndReachedThresholdRelative={0.2} + onItemLayout={[Function]} + onLayout={[Function]} + onScroll={[Function]} + onScrollBeginDrag={[Function]} + onSizeChanged={[Function]} + onVisibleIndicesChanged={[Function]} + removeClippedSubviews={false} + renderAheadOffset={0} + renderAheadStep={187.5} + renderContentContainer={[Function]} + renderItem={[Function]} + renderItemContainer={[Function]} + rowRenderer={[Function]} + scrollEnabled={true} + scrollEventThrottle={16} + scrollThrottle={16} + scrollViewProps={ + { + "contentContainerStyle": { + "backgroundColor": undefined, + "minHeight": 1, + "minWidth": 1, + "paddingBottom": 0, + "paddingTop": 0, + }, + "onLayout": [Function], + "onScrollBeginDrag": [Function], + "refreshControl": undefined, + "style": { + "minHeight": 1, + "minWidth": 1, + }, + } } - } - suppressBoundedSizeException={true} - testID="offersModuleList" - windowCorrectionConfig={ - { - "applyToInitialOffset": true, - "applyToItemScroll": true, - "value": { - "endCorrection": 0, - "startCorrection": 0, - "windowShift": -1, - }, + showsHorizontalScrollIndicator={false} + style={ + { + "minHeight": 1, + "minWidth": 1, + } } - } - > - <View> - <View - style={ - { - "flexDirection": "row", - } + suppressBoundedSizeException={true} + testID="offersModuleList" + windowCorrectionConfig={ + { + "applyToInitialOffset": true, + "applyToItemScroll": true, + "value": { + "endCorrection": 0, + "startCorrection": 0, + "windowShift": -1, + }, } - > + } + > + <View> <View style={ { - "paddingLeft": 0, - "paddingTop": 0, + "flexDirection": "row", } } - /> - <View - style={ - [ - undefined, - undefined, - ] - } > <View style={ - [ - { - "width": 24, - }, - ] + { + "paddingLeft": 0, + "paddingTop": 0, + } } - width={24} /> - </View> - <AutoLayoutView - enableInstrumentation={false} - horizontal={true} - onBlankAreaEvent={[Function]} - onLayout={[Function]} - renderAheadOffset={0} - scrollOffset={0} - style={ - { - "height": 250, - "width": 432, + <View + style={ + [ + undefined, + undefined, + ] } - } - windowSize={800} - > - <CellContainer - index={1} + > + <View + style={ + [ + { + "width": 24, + }, + ] + } + width={24} + /> + </View> + <AutoLayoutView + enableInstrumentation={false} + horizontal={true} + onBlankAreaEvent={[Function]} onLayout={[Function]} + renderAheadOffset={0} + scrollOffset={0} style={ { - "alignItems": "stretch", - "flexDirection": "row", "height": 250, - "left": 144, - "position": "absolute", - "top": 0, + "width": 432, } } + windowSize={800} > - <View + <CellContainer + index={1} + onLayout={[Function]} style={ { - "flexDirection": "column", + "alignItems": "stretch", + "flexDirection": "row", + "height": 250, + "left": 144, + "position": "absolute", + "top": 0, } } > - <View> - <View - accessibilityLabel="Offre Bac Nord - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." - accessibilityRole="link" - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={true} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - [ - { - "textDecorationColor": "black", - "textDecorationLine": "none", - "textDecorationStyle": "solid", - }, - { - "borderRadius": 8, - "height": 288, - "marginVertical": 4, - }, - ] + <View + style={ + { + "flexDirection": "column", } - testID="Offre Bac Nord - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." - > + } + > + <View> <View + accessibilityLabel="Offre Bac Nord - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." + accessibilityRole="link" + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ [ { - "flexDirection": "column-reverse", + "textDecorationColor": "black", + "textDecorationLine": "none", + "textDecorationStyle": "solid", + }, + { + "borderRadius": 8, + "height": 288, + "marginVertical": 4, }, ] } + testID="Offre Bac Nord - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." > <View - imageWidth={144} style={ [ { - "marginTop": 8, - "maxWidth": 144, + "flexDirection": "column-reverse", }, ] } > - <Text - numberOfLines={2} + <View + imageWidth={144} style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Bac Nord - VF - </Text> - <Text - numberOfLines={1} - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Dès le 18 août 2021 - </Text> - <Text - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "marginTop": 8, + "maxWidth": 144, }, ] } - testID="priceIsDuo" > - Gratuit - </Text> - </View> - <View> - <View - style={ - [ - { - "overflow": "hidden", - }, + <Text + numberOfLines={2} + style={ [ { - "backgroundColor": "#F1F1F4", + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, + ] + } + > + Bac Nord - VF + </Text> + <Text + numberOfLines={1} + style={ + [ { - "borderTopLeftRadius": 8, - "borderTopRightRadius": 8, - "height": 192, - "width": 144, + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, - ], - ] - } - > - <FastImageView - defaultSource={null} - resizeMode="cover" - source={ - { - "uri": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", - } + ] } + > + Dès le 18 août 2021 + </Text> + <Text style={ - { - "bottom": 0, - "left": 0, - "position": "absolute", - "right": 0, - "top": 0, - } + [ + { + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] } - testID="tileImage" - /> + testID="priceIsDuo" + > + Gratuit + </Text> </View> - <View - height={24} - style={ - [ - { - "alignItems": "center", - "backgroundColor": "#161617", - "borderBottomLeftRadius": 8, - "borderBottomRightRadius": 8, - "flexDirection": "row", - "height": 24, - "width": 144, - }, - ] - } - width={144} - > + <View> + <View + style={ + [ + { + "overflow": "hidden", + }, + [ + { + "backgroundColor": "#F1F1F4", + }, + { + "borderTopLeftRadius": 8, + "borderTopRightRadius": 8, + "height": 192, + "width": 144, + }, + ], + ] + } + > + <FastImageView + defaultSource={null} + resizeMode="cover" + source={ + { + "uri": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + } + } + style={ + { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + testID="tileImage" + /> + </View> <View + height={24} style={ [ { "alignItems": "center", - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "justifyContent": "center", - "paddingHorizontal": 2, + "backgroundColor": "#161617", + "borderBottomLeftRadius": 8, + "borderBottomRightRadius": 8, + "flexDirection": "row", + "height": 24, + "width": 144, }, ] } + width={144} > - <Text - numberOfLines={1} + <View style={ [ { - "color": "#ffffff", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "justifyContent": "center", + "paddingHorizontal": 2, }, ] } - testID="categoryImageCaption" > - Cinéma - </Text> + <Text + numberOfLines={1} + style={ + [ + { + "color": "#ffffff", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + testID="categoryImageCaption" + > + Cinéma + </Text> + </View> </View> </View> </View> </View> </View> </View> - </View> - <View - leadingItem={ - { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, - }, - "objectID": "223338", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, - ], - "isDigital": false, - "isDuo": true, - "name": "Bac Nord - VF", - "prices": [ - 0, - 0, - 0, - ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", - }, - "venue": {}, + <View + leadingItem={ + { + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223338", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Bac Nord - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + }, + "venue": {}, + } } - } - style={ - [ + style={ + [ + { + "width": 16, + }, + ] + } + trailingItem={ { - "width": 16, - }, - ] - } - trailingItem={ - { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, - }, - "objectID": "223339", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, - ], - "isDigital": false, - "isDuo": true, - "name": "Black Widow - VF", - "prices": [ - 0, - 0, - 0, - ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMA", - }, - "venue": {}, + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223339", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Black Widow - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMA", + }, + "venue": {}, + } } - } - width={16} - /> - </CellContainer> - <CellContainer - index={2} - onLayout={[Function]} - style={ - { - "alignItems": "stretch", - "flexDirection": "row", - "height": 250, - "left": 288, - "position": "absolute", - "top": 0, - } - } - > - <View + width={16} + /> + </CellContainer> + <CellContainer + index={2} + onLayout={[Function]} style={ { - "flexDirection": "column", + "alignItems": "stretch", + "flexDirection": "row", + "height": 250, + "left": 288, + "position": "absolute", + "top": 0, } } > - <View> - <View - accessibilityLabel="Offre Black Widow - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." - accessibilityRole="link" - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } + <View + style={ + { + "flexDirection": "column", } - accessible={true} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - [ + } + > + <View> + <View + accessibilityLabel="Offre Black Widow - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." + accessibilityRole="link" + accessibilityValue={ { - "textDecorationColor": "black", - "textDecorationLine": "none", - "textDecorationStyle": "solid", - }, - { - "borderRadius": 8, - "height": 288, - "marginVertical": 4, - }, - ] - } - testID="Offre Black Widow - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." - > - <View + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ [ { - "flexDirection": "column-reverse", + "textDecorationColor": "black", + "textDecorationLine": "none", + "textDecorationStyle": "solid", + }, + { + "borderRadius": 8, + "height": 288, + "marginVertical": 4, }, ] } + testID="Offre Black Widow - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." > <View - imageWidth={144} style={ [ { - "marginTop": 8, - "maxWidth": 144, + "flexDirection": "column-reverse", }, ] } > - <Text - numberOfLines={2} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Black Widow - VF - </Text> - <Text - numberOfLines={1} - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Dès le 18 août 2021 - </Text> - <Text + <View + imageWidth={144} style={ [ { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "marginTop": 8, + "maxWidth": 144, }, ] } - testID="priceIsDuo" > - Gratuit - </Text> - </View> - <View> - <View - style={ - [ - { - "overflow": "hidden", - }, + <Text + numberOfLines={2} + style={ [ { - "backgroundColor": "#F1F1F4", + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, + ] + } + > + Black Widow - VF + </Text> + <Text + numberOfLines={1} + style={ + [ { - "borderTopLeftRadius": 8, - "borderTopRightRadius": 8, - "height": 192, - "width": 144, + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, - ], - ] - } - > - <FastImageView - defaultSource={null} - resizeMode="cover" - source={ - { - "uri": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMA", - } + ] } + > + Dès le 18 août 2021 + </Text> + <Text style={ - { - "bottom": 0, - "left": 0, - "position": "absolute", - "right": 0, - "top": 0, - } + [ + { + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] } - testID="tileImage" - /> + testID="priceIsDuo" + > + Gratuit + </Text> </View> - <View - height={24} - style={ - [ - { - "alignItems": "center", - "backgroundColor": "#161617", - "borderBottomLeftRadius": 8, - "borderBottomRightRadius": 8, - "flexDirection": "row", - "height": 24, - "width": 144, - }, - ] - } - width={144} - > + <View> + <View + style={ + [ + { + "overflow": "hidden", + }, + [ + { + "backgroundColor": "#F1F1F4", + }, + { + "borderTopLeftRadius": 8, + "borderTopRightRadius": 8, + "height": 192, + "width": 144, + }, + ], + ] + } + > + <FastImageView + defaultSource={null} + resizeMode="cover" + source={ + { + "uri": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMA", + } + } + style={ + { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + testID="tileImage" + /> + </View> <View + height={24} style={ [ { "alignItems": "center", - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "justifyContent": "center", - "paddingHorizontal": 2, + "backgroundColor": "#161617", + "borderBottomLeftRadius": 8, + "borderBottomRightRadius": 8, + "flexDirection": "row", + "height": 24, + "width": 144, }, ] } + width={144} > - <Text - numberOfLines={1} + <View style={ [ { - "color": "#ffffff", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "justifyContent": "center", + "paddingHorizontal": 2, }, ] } - testID="categoryImageCaption" > - Cinéma - </Text> + <Text + numberOfLines={1} + style={ + [ + { + "color": "#ffffff", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + testID="categoryImageCaption" + > + Cinéma + </Text> + </View> </View> </View> </View> </View> </View> </View> - </View> - </CellContainer> - <CellContainer - index={0} - onLayout={[Function]} - style={ - { - "alignItems": "stretch", - "flexDirection": "row", - "height": 250, - "left": 0, - "position": "absolute", - "top": 0, - } - } - > - <View + </CellContainer> + <CellContainer + index={0} + onLayout={[Function]} style={ { - "flexDirection": "column", + "alignItems": "stretch", + "flexDirection": "row", + "height": 250, + "left": 0, + "position": "absolute", + "top": 0, } } > - <View> - <View - accessibilityLabel="Offre Titane - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." - accessibilityRole="link" - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } + <View + style={ + { + "flexDirection": "column", } - accessible={true} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - [ - { - "textDecorationColor": "black", - "textDecorationLine": "none", - "textDecorationStyle": "solid", - }, - { - "borderRadius": 8, - "height": 288, - "marginVertical": 4, - }, - ] - } - testID="Offre Titane - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." - > + } + > + <View> <View + accessibilityLabel="Offre Titane - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." + accessibilityRole="link" + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ [ { - "flexDirection": "column-reverse", + "textDecorationColor": "black", + "textDecorationLine": "none", + "textDecorationStyle": "solid", + }, + { + "borderRadius": 8, + "height": 288, + "marginVertical": 4, }, ] } + testID="Offre Titane - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." > <View - imageWidth={144} style={ [ { - "marginTop": 8, - "maxWidth": 144, + "flexDirection": "column-reverse", }, ] } > - <Text - numberOfLines={2} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Titane - VF - </Text> - <Text - numberOfLines={1} - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Dès le 18 août 2021 - </Text> - <Text + <View + imageWidth={144} style={ [ { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "marginTop": 8, + "maxWidth": 144, }, ] } - testID="priceIsDuo" > - Gratuit - </Text> - </View> - <View> - <View - style={ - [ - { - "overflow": "hidden", - }, + <Text + numberOfLines={2} + style={ [ { - "backgroundColor": "#F1F1F4", + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, + ] + } + > + Titane - VF + </Text> + <Text + numberOfLines={1} + style={ + [ { - "borderTopLeftRadius": 8, - "borderTopRightRadius": 8, - "height": 192, - "width": 144, + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, - ], - ] - } - > - <FastImageView - defaultSource={null} - resizeMode="cover" - source={ - { - "uri": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", - } + ] } + > + Dès le 18 août 2021 + </Text> + <Text style={ - { - "bottom": 0, - "left": 0, - "position": "absolute", - "right": 0, - "top": 0, - } + [ + { + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] } - testID="tileImage" - /> + testID="priceIsDuo" + > + Gratuit + </Text> </View> - <View - height={24} - style={ - [ - { - "alignItems": "center", - "backgroundColor": "#161617", - "borderBottomLeftRadius": 8, - "borderBottomRightRadius": 8, - "flexDirection": "row", - "height": 24, - "width": 144, - }, - ] - } - width={144} - > + <View> + <View + style={ + [ + { + "overflow": "hidden", + }, + [ + { + "backgroundColor": "#F1F1F4", + }, + { + "borderTopLeftRadius": 8, + "borderTopRightRadius": 8, + "height": 192, + "width": 144, + }, + ], + ] + } + > + <FastImageView + defaultSource={null} + resizeMode="cover" + source={ + { + "uri": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + } + } + style={ + { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + testID="tileImage" + /> + </View> <View + height={24} style={ [ { "alignItems": "center", - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "justifyContent": "center", - "paddingHorizontal": 2, + "backgroundColor": "#161617", + "borderBottomLeftRadius": 8, + "borderBottomRightRadius": 8, + "flexDirection": "row", + "height": 24, + "width": 144, }, ] } + width={144} > - <Text - numberOfLines={1} + <View style={ [ { - "color": "#ffffff", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "justifyContent": "center", + "paddingHorizontal": 2, }, ] } - testID="categoryImageCaption" > - Cinéma - </Text> + <Text + numberOfLines={1} + style={ + [ + { + "color": "#ffffff", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + testID="categoryImageCaption" + > + Cinéma + </Text> + </View> </View> </View> </View> </View> </View> </View> - </View> - <View - leadingItem={ - { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, - }, - "objectID": "223342", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, - ], - "isDigital": false, - "isDuo": true, - "name": "Titane - VF", - "prices": [ - 0, - 0, - 0, - ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", - }, - "venue": {}, + <View + leadingItem={ + { + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223342", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Titane - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + }, + "venue": {}, + } } - } + style={ + [ + { + "width": 16, + }, + ] + } + trailingItem={ + { + "_geoloc": { + "lat": 47.8898, + "lng": -2.83593, + }, + "objectID": "223338", + "offer": { + "dates": [ + 1629312300, + 1629485100, + 1629657900, + ], + "isDigital": false, + "isDuo": true, + "name": "Bac Nord - VF", + "prices": [ + 0, + 0, + 0, + ], + "subcategoryId": "CINE_PLEIN_AIR", + "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + }, + "venue": {}, + } + } + width={16} + /> + </CellContainer> + </AutoLayoutView> + <CellContainer + index={-1} + style={ + [ + undefined, + undefined, + ] + } + > + <View style={ [ { - "width": 16, + "width": 24, }, ] } - trailingItem={ - { - "_geoloc": { - "lat": 47.8898, - "lng": -2.83593, - }, - "objectID": "223338", - "offer": { - "dates": [ - 1629312300, - 1629485100, - 1629657900, - ], - "isDigital": false, - "isDuo": true, - "name": "Bac Nord - VF", - "prices": [ - 0, - 0, - 0, - ], - "subcategoryId": "CINE_PLEIN_AIR", - "thumbUrl": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", - }, - "venue": {}, - } - } - width={16} + width={24} /> </CellContainer> - </AutoLayoutView> - <CellContainer - index={-1} - style={ - [ - undefined, - undefined, - ] - } - > <View style={ - [ - { - "width": 24, - }, - ] + { + "paddingBottom": 0, + "paddingRight": 0, + } } - width={24} /> - </CellContainer> - <View - style={ - { - "paddingBottom": 0, - "paddingRight": 0, - } - } - /> - <View - pointerEvents="none" - style={ - { - "opacity": 0, - } - } - > - <View> - <View - accessibilityLabel="Offre Bac Nord - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." - accessibilityRole="link" - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={true} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - [ - { - "textDecorationColor": "black", - "textDecorationLine": "none", - "textDecorationStyle": "solid", - }, - { - "borderRadius": 8, - "height": 288, - "marginVertical": 4, - }, - ] + <View + pointerEvents="none" + style={ + { + "opacity": 0, } - testID="Offre Bac Nord - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." - > + } + > + <View> <View + accessibilityLabel="Offre Bac Nord - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." + accessibilityRole="link" + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ [ { - "flexDirection": "column-reverse", + "textDecorationColor": "black", + "textDecorationLine": "none", + "textDecorationStyle": "solid", + }, + { + "borderRadius": 8, + "height": 288, + "marginVertical": 4, }, ] } + testID="Offre Bac Nord - VF de la catégorie Cinéma, Dès le 18 août 2021, Gratuit. Possibilité de réserver 2 places." > <View - imageWidth={144} style={ [ { - "marginTop": 8, - "maxWidth": 144, + "flexDirection": "column-reverse", }, ] } > - <Text - numberOfLines={2} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Bac Nord - VF - </Text> - <Text - numberOfLines={1} - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Dès le 18 août 2021 - </Text> - <Text + <View + imageWidth={144} style={ [ { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "marginTop": 8, + "maxWidth": 144, }, ] } - testID="priceIsDuo" > - Gratuit - </Text> - </View> - <View> - <View - style={ - [ - { - "overflow": "hidden", - }, + <Text + numberOfLines={2} + style={ [ { - "backgroundColor": "#F1F1F4", + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, + ] + } + > + Bac Nord - VF + </Text> + <Text + numberOfLines={1} + style={ + [ { - "borderTopLeftRadius": 8, - "borderTopRightRadius": 8, - "height": 192, - "width": 144, + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, - ], - ] - } - > - <FastImageView - defaultSource={null} - resizeMode="cover" - source={ - { - "uri": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", - } + ] } + > + Dès le 18 août 2021 + </Text> + <Text style={ - { - "bottom": 0, - "left": 0, - "position": "absolute", - "right": 0, - "top": 0, - } + [ + { + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] } - testID="tileImage" - /> + testID="priceIsDuo" + > + Gratuit + </Text> </View> - <View - height={24} - style={ - [ - { - "alignItems": "center", - "backgroundColor": "#161617", - "borderBottomLeftRadius": 8, - "borderBottomRightRadius": 8, - "flexDirection": "row", - "height": 24, - "width": 144, - }, - ] - } - width={144} - > + <View> + <View + style={ + [ + { + "overflow": "hidden", + }, + [ + { + "backgroundColor": "#F1F1F4", + }, + { + "borderTopLeftRadius": 8, + "borderTopRightRadius": 8, + "height": 192, + "width": 144, + }, + ], + ] + } + > + <FastImageView + defaultSource={null} + resizeMode="cover" + source={ + { + "uri": "https://storage.googleapis.com/passculture-metier-ehp-testing-assets/thumbs/products/FARMG", + } + } + style={ + { + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + } + } + testID="tileImage" + /> + </View> <View + height={24} style={ [ { "alignItems": "center", - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "justifyContent": "center", - "paddingHorizontal": 2, + "backgroundColor": "#161617", + "borderBottomLeftRadius": 8, + "borderBottomRightRadius": 8, + "flexDirection": "row", + "height": 24, + "width": 144, }, ] } + width={144} > - <Text - numberOfLines={1} + <View style={ [ { - "color": "#ffffff", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "justifyContent": "center", + "paddingHorizontal": 2, }, ] } - testID="categoryImageCaption" > - Cinéma - </Text> + <Text + numberOfLines={1} + style={ + [ + { + "color": "#ffffff", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + testID="categoryImageCaption" + > + Cinéma + </Text> + </View> </View> </View> </View> @@ -2477,191 +2479,170 @@ exports[`<Venue /> should match snapshot 1`] = ` </View> </View> </View> - </View> - </RCTScrollView> + </RCTScrollView> + </View> </View> </View> - </View> - <View - style={ - [ - { - "position": "relative", - }, - ] - } - > - <View - onChange={[Function]} - onLayout={[Function]} - style={ - [ - { - "bottom": 0, - "left": 0, - "position": "absolute", - "right": 0, - "top": "50%", - }, - ] - } - testID="intersectionObserver" - threshold="50%" - triggerOnce={false} - /> <View - gap={4} style={ [ { - "gap": 16, - "paddingBottom": 24, + "position": "relative", }, ] } > - <View> - <View - style={ - [ - { - "flexDirection": "row", - }, - ] - } - > - <Text - numberOfLines={2} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 19, - "lineHeight": 30.4, - "marginHorizontal": 24, - }, - ] - } - testID="playlistTitle" - > - Test - </Text> - </View> - </View> <View + onChange={[Function]} onLayout={[Function]} style={ [ { - "position": "relative", - "width": "100%", + "bottom": 0, + "left": 0, + "position": "absolute", + "right": 0, + "top": "50%", + }, + ] + } + testID="intersectionObserver" + threshold="50%" + triggerOnce={false} + /> + <View + gap={4} + style={ + [ + { + "gap": 16, + "paddingBottom": 24, }, ] } > - <View - style={{}} - > - <RCTScrollView - ItemSeparatorComponent={ - { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 16, - }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], + <View> + <View + style={ + [ + { + "flexDirection": "row", }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - } + ] } - ListFooterComponent={ - { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ + > + <Text + numberOfLines={2} + style={ + [ { - "width": 24, + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 19, + "lineHeight": 30.4, + "marginHorizontal": 24, }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], - }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], + ] } - } - ListHeaderComponent={ + testID="playlistTitle" + > + Test + </Text> + </View> + </View> + <View + onLayout={[Function]} + style={ + [ { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 24, - }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", + "position": "relative", + "width": "100%", + }, + ] + } + > + <View + style={{}} + > + <RCTScrollView + ItemSeparatorComponent={ + { + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 16, + }, ], - }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - } - } - applyWindowCorrection={[Function]} - canChangeSize={true} - contentContainerStyle={ - { - "backgroundColor": undefined, - "minHeight": 1, - "minWidth": 1, - "paddingBottom": 0, - "paddingTop": 0, + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", + ], + }, + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + } } - } - contentHeight={250} - contentWidth={192} - data={ - [ + ListFooterComponent={ { - "_geoloc": { - "lat": 2, - "lng": 2, - }, - "objectID": "12", - "offer": { - "name": "Test", - "subcategoryId": "ABO_BIBLIOTHEQUE", + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 24, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", + ], }, - "venue": { - "address": "Avenue des Tests", - "city": "Jest", + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + } + } + ListHeaderComponent={ + { + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 24, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", + ], }, - }, - ] - } - dataProvider={ - DataProvider { - "_data": [ + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + } + } + applyWindowCorrection={[Function]} + canChangeSize={true} + contentContainerStyle={ + { + "backgroundColor": undefined, + "minHeight": 1, + "minWidth": 1, + "paddingBottom": 0, + "paddingTop": 0, + } + } + contentHeight={250} + contentWidth={192} + data={ + [ { "_geoloc": { "lat": 2, @@ -2677,1619 +2658,1495 @@ exports[`<Venue /> should match snapshot 1`] = ` "city": "Jest", }, }, - ], - "_firstIndexToProcess": 0, - "_hasStableIds": true, - "_requiresDataChangeHandling": false, - "_size": 1, - "getStableId": [Function], - "rowHasChanged": [Function], + ] } - } - disableRecycling={false} - estimatedItemSize={192} - extendedState={{}} - externalScrollView={[Function]} - finalRenderAheadOffset={187.5} - forceNonDeterministicRendering={true} - horizontal={true} - initialOffset={0} - initialRenderIndex={0} - isHorizontal={true} - keyExtractor={[Function]} - layoutProvider={ - GridLayoutProviderWithProps { - "_acceptableRelayoutDelta": 1, - "_getHeightOrWidth": [Function], - "_getLayoutTypeForIndex": [Function], - "_getSpan": [Function], - "_hasExpired": false, - "_isHorizontal": true, - "_lastLayoutManager": GridLayoutManager { + dataProvider={ + DataProvider { + "_data": [ + { + "_geoloc": { + "lat": 2, + "lng": 2, + }, + "objectID": "12", + "offer": { + "name": "Test", + "subcategoryId": "ABO_BIBLIOTHEQUE", + }, + "venue": { + "address": "Avenue des Tests", + "city": "Jest", + }, + }, + ], + "_firstIndexToProcess": 0, + "_hasStableIds": true, + "_requiresDataChangeHandling": false, + "_size": 1, + "getStableId": [Function], + "rowHasChanged": [Function], + } + } + disableRecycling={false} + estimatedItemSize={192} + extendedState={{}} + externalScrollView={[Function]} + finalRenderAheadOffset={187.5} + forceNonDeterministicRendering={true} + horizontal={true} + initialOffset={0} + initialRenderIndex={0} + isHorizontal={true} + keyExtractor={[Function]} + layoutProvider={ + GridLayoutProviderWithProps { "_acceptableRelayoutDelta": 1, + "_getHeightOrWidth": [Function], + "_getLayoutTypeForIndex": [Function], "_getSpan": [Function], - "_isGridHorizontal": true, + "_hasExpired": false, "_isHorizontal": true, - "_layoutProvider": [Circular], - "_layouts": [ - { + "_lastLayoutManager": GridLayoutManager { + "_acceptableRelayoutDelta": 1, + "_getSpan": [Function], + "_isGridHorizontal": true, + "_isHorizontal": true, + "_layoutProvider": [Circular], + "_layouts": [ + { + "height": 250, + "type": 0, + "width": 192, + "x": 0, + "y": 0, + }, + ], + "_maxSpan": 1, + "_renderWindowSize": { "height": 250, - "type": 0, - "width": 192, - "x": 0, - "y": 0, + "width": 800, }, - ], + "_totalHeight": 250, + "_totalWidth": 192, + "_window": { + "height": 250, + "width": 800, + }, + }, "_maxSpan": 1, "_renderWindowSize": { "height": 250, "width": 800, }, - "_totalHeight": 250, - "_totalWidth": 192, - "_window": { - "height": 250, - "width": 800, + "_setLayoutForType": [Function], + "_tempDim": { + "height": 0, + "width": 0, }, - }, - "_maxSpan": 1, - "_renderWindowSize": { - "height": 250, - "width": 800, - }, - "_setLayoutForType": [Function], - "_tempDim": { - "height": 0, - "width": 0, - }, - "averageWindow": AverageWindow { - "currentAverage": 192, - "currentCount": 1, - "inputValues": [ - 192, - , - , - , - , - , - , - , - ], - "nextIndex": 1, - }, - "defaultEstimatedItemSize": 100, - "layoutObject": { - "size": undefined, - "span": undefined, - }, - "props": { - "ItemSeparatorComponent": { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 16, - }, + "averageWindow": AverageWindow { + "currentAverage": 192, + "currentCount": 1, + "inputValues": [ + 192, + , + , + , + , + , + , + , ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", + "nextIndex": 1, + }, + "defaultEstimatedItemSize": 100, + "layoutObject": { + "size": undefined, + "span": undefined, + }, + "props": { + "ItemSeparatorComponent": { + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 16, + }, ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", + ], + }, + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - }, - "ListFooterComponent": { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ - { - "width": 24, + "ListFooterComponent": { + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 24, + }, + ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", + ], }, - ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], + }, + "ListHeaderComponent": { + "$$typeof": Symbol(react.forward_ref), + "attrs": [ + { + "width": 24, + }, ], + "inlineStyle": InlineStyle { + "rules": [ + [Function], + "", + ], + }, + "render": [Function], + "shouldForwardProp": undefined, + "styledComponentId": "StyledNativeComponent", + "target": [Function], + "withComponent": [Function], }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], - }, - "ListHeaderComponent": { - "$$typeof": Symbol(react.forward_ref), - "attrs": [ + "data": [ { - "width": 24, + "_geoloc": { + "lat": 2, + "lng": 2, + }, + "objectID": "12", + "offer": { + "name": "Test", + "subcategoryId": "ABO_BIBLIOTHEQUE", + }, + "venue": { + "address": "Avenue des Tests", + "city": "Jest", + }, }, ], - "inlineStyle": InlineStyle { - "rules": [ - [Function], - "", - ], - }, - "render": [Function], - "shouldForwardProp": undefined, - "styledComponentId": "StyledNativeComponent", - "target": [Function], - "withComponent": [Function], + "drawDistance": 187.5, + "estimatedItemSize": 192, + "horizontal": true, + "keyExtractor": [Function], + "numColumns": 1, + "onContentSizeChange": [Function], + "onEndReached": [Function], + "onEndReachedThreshold": 0.2, + "onScroll": [Function], + "renderItem": [Function], + "scrollEnabled": true, + "scrollEventThrottle": 16, + "showsHorizontalScrollIndicator": false, + "testID": "offersModuleList", }, - "data": [ - { - "_geoloc": { - "lat": 2, - "lng": 2, - }, - "objectID": "12", - "offer": { - "name": "Test", - "subcategoryId": "ABO_BIBLIOTHEQUE", - }, - "venue": { - "address": "Avenue des Tests", - "city": "Jest", - }, - }, - ], - "drawDistance": 187.5, - "estimatedItemSize": 192, - "horizontal": true, - "keyExtractor": [Function], - "numColumns": 1, - "onContentSizeChange": [Function], - "onEndReached": [Function], - "onEndReachedThreshold": 0.2, - "onScroll": [Function], - "renderItem": [Function], - "scrollEnabled": true, - "scrollEventThrottle": 16, - "showsHorizontalScrollIndicator": false, - "testID": "offersModuleList", - }, - "renderWindowInsets": { - "height": 0, - "width": 0, - }, - "shouldRefreshWithAnchoring": true, + "renderWindowInsets": { + "height": 0, + "width": 0, + }, + "shouldRefreshWithAnchoring": true, + } } - } - maxRenderAhead={562.5} - numColumns={1} - onContentSizeChange={[Function]} - onEndReached={[Function]} - onEndReachedThreshold={0} - onEndReachedThresholdRelative={0.2} - onItemLayout={[Function]} - onLayout={[Function]} - onScroll={[Function]} - onScrollBeginDrag={[Function]} - onSizeChanged={[Function]} - onVisibleIndicesChanged={[Function]} - removeClippedSubviews={false} - renderAheadOffset={0} - renderAheadStep={187.5} - renderContentContainer={[Function]} - renderItem={[Function]} - renderItemContainer={[Function]} - rowRenderer={[Function]} - scrollEnabled={true} - scrollEventThrottle={16} - scrollThrottle={16} - scrollViewProps={ - { - "contentContainerStyle": { - "backgroundColor": undefined, - "minHeight": 1, - "minWidth": 1, - "paddingBottom": 0, - "paddingTop": 0, - }, - "onLayout": [Function], - "onScrollBeginDrag": [Function], - "refreshControl": undefined, - "style": { + maxRenderAhead={562.5} + numColumns={1} + onContentSizeChange={[Function]} + onEndReached={[Function]} + onEndReachedThreshold={0} + onEndReachedThresholdRelative={0.2} + onItemLayout={[Function]} + onLayout={[Function]} + onScroll={[Function]} + onScrollBeginDrag={[Function]} + onSizeChanged={[Function]} + onVisibleIndicesChanged={[Function]} + removeClippedSubviews={false} + renderAheadOffset={0} + renderAheadStep={187.5} + renderContentContainer={[Function]} + renderItem={[Function]} + renderItemContainer={[Function]} + rowRenderer={[Function]} + scrollEnabled={true} + scrollEventThrottle={16} + scrollThrottle={16} + scrollViewProps={ + { + "contentContainerStyle": { + "backgroundColor": undefined, + "minHeight": 1, + "minWidth": 1, + "paddingBottom": 0, + "paddingTop": 0, + }, + "onLayout": [Function], + "onScrollBeginDrag": [Function], + "refreshControl": undefined, + "style": { + "minHeight": 1, + "minWidth": 1, + }, + } + } + showsHorizontalScrollIndicator={false} + style={ + { "minHeight": 1, "minWidth": 1, - }, - } - } - showsHorizontalScrollIndicator={false} - style={ - { - "minHeight": 1, - "minWidth": 1, - } - } - suppressBoundedSizeException={true} - testID="offersModuleList" - windowCorrectionConfig={ - { - "applyToInitialOffset": true, - "applyToItemScroll": true, - "value": { - "endCorrection": 0, - "startCorrection": 0, - "windowShift": -1, - }, + } } - } - > - <View> - <View - style={ - { - "flexDirection": "row", - } + suppressBoundedSizeException={true} + testID="offersModuleList" + windowCorrectionConfig={ + { + "applyToInitialOffset": true, + "applyToItemScroll": true, + "value": { + "endCorrection": 0, + "startCorrection": 0, + "windowShift": -1, + }, } - > + } + > + <View> <View style={ { - "paddingLeft": 0, - "paddingTop": 0, + "flexDirection": "row", } } - /> - <View - style={ - [ - undefined, - undefined, - ] - } > <View - style={ - [ - { - "width": 24, - }, - ] - } - width={24} - /> - </View> - <AutoLayoutView - enableInstrumentation={false} - horizontal={true} - onBlankAreaEvent={[Function]} - onLayout={[Function]} - renderAheadOffset={0} - scrollOffset={0} - style={ - { - "height": 250, - "width": 192, - } - } - windowSize={800} - > - <CellContainer - index={0} - onLayout={[Function]} style={ { - "alignItems": "stretch", - "flexDirection": "row", - "height": 250, - "left": 0, - "position": "absolute", - "top": 0, + "paddingLeft": 0, + "paddingTop": 0, } } - > - <View + /> + <View + style={ + [ + undefined, + undefined, + ] + } + > + <View + style={ + [ + { + "width": 24, + }, + ] + } + width={24} + /> + </View> + <AutoLayoutView + enableInstrumentation={false} + horizontal={true} + onBlankAreaEvent={[Function]} + onLayout={[Function]} + renderAheadOffset={0} + scrollOffset={0} + style={ + { + "height": 250, + "width": 192, + } + } + windowSize={800} + > + <CellContainer + index={0} + onLayout={[Function]} style={ { - "flexDirection": "column", + "alignItems": "stretch", + "flexDirection": "row", + "height": 250, + "left": 0, + "position": "absolute", + "top": 0, } } > - <View> - <View - accessibilityLabel="Offre Test de la catégorie Livre, prix . " - accessibilityRole="link" - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={true} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - [ - { - "textDecorationColor": "black", - "textDecorationLine": "none", - "textDecorationStyle": "solid", - }, - { - "borderRadius": 8, - "height": 360, - "marginVertical": 4, - }, - ] + <View + style={ + { + "flexDirection": "column", } - testID="Offre Test de la catégorie Livre, prix . " - > + } + > + <View> <View + accessibilityLabel="Offre Test de la catégorie Livre, prix . " + accessibilityRole="link" + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ [ { - "flexDirection": "column-reverse", + "textDecorationColor": "black", + "textDecorationLine": "none", + "textDecorationStyle": "solid", + }, + { + "borderRadius": 8, + "height": 360, + "marginVertical": 4, }, ] } + testID="Offre Test de la catégorie Livre, prix . " > <View - imageWidth={192} style={ [ { - "marginTop": 8, - "maxWidth": 192, + "flexDirection": "column-reverse", }, ] } > - <Text - numberOfLines={2} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Test - </Text> - <Text - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - testID="priceIsDuo" - /> - </View> - <View> <View - height={264} + imageWidth={192} style={ [ { - "height": 264, - "width": 192, + "marginTop": 8, + "maxWidth": 192, }, ] } - width={192} > - <BVLinearGradient - borderRadius={8} - colors={ + <Text + numberOfLines={2} + style={ [ - 4294046196, - 4291546578, + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, ] } - endPoint={ - { - "x": 0.5, - "y": 1, - } - } - locations={null} - onlyTopBorderRadius={true} - startPoint={ - { - "x": 0.5, - "y": 0, - } - } + > + Test + </Text> + <Text style={ [ { - "alignItems": "center", - "backgroundColor": "#F1F1F4", - "borderRadius": 8, - "height": "100%", - "justifyContent": "center", - "width": "100%", + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, + ] + } + testID="priceIsDuo" + /> + </View> + <View> + <View + height={264} + style={ + [ { - "borderRadius": 0, - "borderTopLeftRadius": 8, - "borderTopRightRadius": 8, + "height": 264, + "width": 192, }, ] } - testID="imagePlaceholder" + width={192} > - <View - height={64} - testID="categoryIcon" - width={64} + <BVLinearGradient + borderRadius={8} + colors={ + [ + 4294046196, + 4291546578, + ] + } + endPoint={ + { + "x": 0.5, + "y": 1, + } + } + locations={null} + onlyTopBorderRadius={true} + startPoint={ + { + "x": 0.5, + "y": 0, + } + } + style={ + [ + { + "alignItems": "center", + "backgroundColor": "#F1F1F4", + "borderRadius": 8, + "height": "100%", + "justifyContent": "center", + "width": "100%", + }, + { + "borderRadius": 0, + "borderTopLeftRadius": 8, + "borderTopRightRadius": 8, + }, + ] + } + testID="imagePlaceholder" > - <Text> - categoryIcon-SVG-Mock - </Text> - </View> - </BVLinearGradient> - </View> - <View - height={24} - style={ - [ - { - "alignItems": "center", - "backgroundColor": "#161617", - "borderBottomLeftRadius": 8, - "borderBottomRightRadius": 8, - "flexDirection": "row", - "height": 24, - "width": 192, - }, - ] - } - width={192} - > + <View + height={64} + testID="categoryIcon" + width={64} + > + <Text> + categoryIcon-SVG-Mock + </Text> + </View> + </BVLinearGradient> + </View> <View + height={24} style={ [ { "alignItems": "center", - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "justifyContent": "center", - "paddingHorizontal": 2, + "backgroundColor": "#161617", + "borderBottomLeftRadius": 8, + "borderBottomRightRadius": 8, + "flexDirection": "row", + "height": 24, + "width": 192, }, ] } + width={192} > - <Text - numberOfLines={1} + <View style={ [ { - "color": "#ffffff", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "justifyContent": "center", + "paddingHorizontal": 2, }, ] } - testID="categoryImageCaption" > - Livre - </Text> + <Text + numberOfLines={1} + style={ + [ + { + "color": "#ffffff", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + testID="categoryImageCaption" + > + Livre + </Text> + </View> </View> </View> </View> </View> </View> </View> - </View> - </CellContainer> - </AutoLayoutView> - <CellContainer - index={-1} - style={ - [ - undefined, - undefined, - ] - } - > - <View + </CellContainer> + </AutoLayoutView> + <CellContainer + index={-1} style={ [ - { - "width": 24, - }, + undefined, + undefined, ] } - width={24} - /> - </CellContainer> - <View - style={ - { - "paddingBottom": 0, - "paddingRight": 0, - } - } - /> - <View - pointerEvents="none" - style={ - { - "opacity": 0, - } - } - > - <View> + > <View - accessibilityLabel="Offre Test de la catégorie Livre, prix . " - accessibilityRole="link" - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={true} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} style={ [ { - "textDecorationColor": "black", - "textDecorationLine": "none", - "textDecorationStyle": "solid", - }, - { - "borderRadius": 8, - "height": 360, - "marginVertical": 4, + "width": 24, }, ] } - testID="Offre Test de la catégorie Livre, prix . " - > + width={24} + /> + </CellContainer> + <View + style={ + { + "paddingBottom": 0, + "paddingRight": 0, + } + } + /> + <View + pointerEvents="none" + style={ + { + "opacity": 0, + } + } + > + <View> <View + accessibilityLabel="Offre Test de la catégorie Livre, prix . " + accessibilityRole="link" + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ [ { - "flexDirection": "column-reverse", + "textDecorationColor": "black", + "textDecorationLine": "none", + "textDecorationStyle": "solid", + }, + { + "borderRadius": 8, + "height": 360, + "marginVertical": 4, }, ] } + testID="Offre Test de la catégorie Livre, prix . " > <View - imageWidth={192} style={ [ { - "marginTop": 8, - "maxWidth": 192, + "flexDirection": "column-reverse", }, ] } > - <Text - numberOfLines={2} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Test - </Text> - <Text - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - testID="priceIsDuo" - /> - </View> - <View> <View - height={264} + imageWidth={192} style={ [ { - "height": 264, - "width": 192, + "marginTop": 8, + "maxWidth": 192, }, ] } - width={192} > - <BVLinearGradient - borderRadius={8} - colors={ + <Text + numberOfLines={2} + style={ [ - 4294046196, - 4291546578, + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, ] } - endPoint={ - { - "x": 0.5, - "y": 1, - } - } - locations={null} - onlyTopBorderRadius={true} - startPoint={ - { - "x": 0.5, - "y": 0, - } - } + > + Test + </Text> + <Text style={ [ { - "alignItems": "center", - "backgroundColor": "#F1F1F4", - "borderRadius": 8, - "height": "100%", - "justifyContent": "center", - "width": "100%", + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, + ] + } + testID="priceIsDuo" + /> + </View> + <View> + <View + height={264} + style={ + [ { - "borderRadius": 0, - "borderTopLeftRadius": 8, - "borderTopRightRadius": 8, + "height": 264, + "width": 192, }, ] } - testID="imagePlaceholder" + width={192} > - <View - height={64} - testID="categoryIcon" - width={64} + <BVLinearGradient + borderRadius={8} + colors={ + [ + 4294046196, + 4291546578, + ] + } + endPoint={ + { + "x": 0.5, + "y": 1, + } + } + locations={null} + onlyTopBorderRadius={true} + startPoint={ + { + "x": 0.5, + "y": 0, + } + } + style={ + [ + { + "alignItems": "center", + "backgroundColor": "#F1F1F4", + "borderRadius": 8, + "height": "100%", + "justifyContent": "center", + "width": "100%", + }, + { + "borderRadius": 0, + "borderTopLeftRadius": 8, + "borderTopRightRadius": 8, + }, + ] + } + testID="imagePlaceholder" > - <Text> - categoryIcon-SVG-Mock - </Text> - </View> - </BVLinearGradient> - </View> - <View - height={24} - style={ - [ - { - "alignItems": "center", - "backgroundColor": "#161617", - "borderBottomLeftRadius": 8, - "borderBottomRightRadius": 8, - "flexDirection": "row", - "height": 24, - "width": 192, - }, - ] - } - width={192} - > + <View + height={64} + testID="categoryIcon" + width={64} + > + <Text> + categoryIcon-SVG-Mock + </Text> + </View> + </BVLinearGradient> + </View> <View + height={24} style={ [ { "alignItems": "center", - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "justifyContent": "center", - "paddingHorizontal": 2, + "backgroundColor": "#161617", + "borderBottomLeftRadius": 8, + "borderBottomRightRadius": 8, + "flexDirection": "row", + "height": 24, + "width": 192, }, ] } + width={192} > - <Text - numberOfLines={1} + <View style={ [ { - "color": "#ffffff", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "justifyContent": "center", + "paddingHorizontal": 2, }, ] } - testID="categoryImageCaption" > - Livre - </Text> - </View> - </View> - </View> - </View> - </View> - </View> - </View> - </View> - </View> - </RCTScrollView> - </View> - </View> - </View> - </View> - </View> - </View> - </View> - <View - numberOfSpaces={6} - style={ - [ - { - "height": 24, - }, - ] - } - /> - <View - gap={0} - style={ - [ - { - "gap": 0, - }, - ] - } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 8, - }, - ] - } - /> - <View - style={ - [ - { - "flexDirection": "row", - "gap": 16, - "marginHorizontal": 16, - "marginVertical": 24, - }, - ] - } - > - <View - size="medium" - style={ - [ - { - "borderRadius": 8, - "height": 48, - "overflow": "hidden", - "width": 48, - }, - ] - } - > - <BVLinearGradient - colors={ - [ - 4294614806, - 4290271489, - ] - } - endPoint={ - { - "x": 0.5, - "y": 1, - } - } - locations={null} - startPoint={ - { - "x": 0.5, - "y": 0, - } - } - style={ - [ - { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - }, - ] - } - > - <View - size="medium" - style={ - [ - { - "position": "absolute", - "top": -20, - }, - ] - } - > - <View - fill="none" - height={92} - width={82} - > - <Text> - undefined-SVG-Mock - </Text> - </View> - </View> - </BVLinearGradient> - </View> - <View - style={ - [ - { - "flexShrink": 1, - }, - ] - } - > - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - Fan de lecture ? - </Text> - <Text - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Reçois nos recos lecture, nos jeux-concours et le meilleur de l’actu littéraire ! - </Text> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <View - accessibilityLabel="Suivre le thème" - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={true} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "alignSelf": "flex-start", - "backgroundColor": "#ffffff", - "borderColor": "#90949D", - "borderRadius": 24, - "borderWidth": 1, - "flexDirection": "row", - "height": "auto", - "justifyContent": "center", - "opacity": 1, - "paddingHorizontal": 12, - "paddingVertical": 4, - "userSelect": "auto", - "width": "auto", - } - } - testID="Suivre le thème" - > - <View> - undefined-Lottie-Mock - </View> - <View - numberOfSpaces={2} - style={ - [ - { - "width": 8, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Suivre le thème - </Text> + <Text + numberOfLines={1} + style={ + [ + { + "color": "#ffffff", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + testID="categoryImageCaption" + > + Livre + </Text> + </View> + </View> + </View> + </View> + </View> + </View> + </View> + </View> + </View> + </RCTScrollView> + </View> + </View> + </View> + </View> </View> </View> </View> - <Modal - accessibilityLabelledBy="testUuidV4" - accessibilityModal={true} - animationType="none" - deviceHeight={1334} - deviceWidth={750} - hardwareAccelerated={false} - hideModalContentWhileAnimating={false} - onBackdropPress={[Function]} - onModalHide={[Function]} - onModalWillHide={[Function]} - onModalWillShow={[Function]} - onRequestClose={[Function]} - panResponderThreshold={4} - scrollHorizontal={false} - scrollOffset={0} - scrollOffsetMax={0} - scrollTo={null} - statusBarTranslucent={true} - supportedOrientations={ - [ - "portrait", - "landscape", - ] - } - swipeThreshold={100} - testID="modal" - transparent={true} - visible={false} - /> - <Modal - accessibilityLabelledBy="testUuidV4" - accessibilityModal={true} - animationType="none" - deviceHeight={1334} - deviceWidth={750} - hardwareAccelerated={false} - hideModalContentWhileAnimating={false} - onBackdropPress={[Function]} - onModalHide={[Function]} - onModalWillHide={[Function]} - onModalWillShow={[Function]} - onRequestClose={[Function]} - panResponderThreshold={4} - scrollHorizontal={false} - scrollOffset={0} - scrollOffsetMax={0} - scrollTo={null} - statusBarTranslucent={true} - supportedOrientations={ - [ - "portrait", - "landscape", - ] - } - swipeThreshold={100} - testID="modal" - transparent={true} - visible={false} - /> - <Modal - accessibilityLabelledBy="testUuidV4" - accessibilityModal={true} - animationType="none" - deviceHeight={1334} - deviceWidth={750} - hardwareAccelerated={false} - hideModalContentWhileAnimating={false} - onBackdropPress={[Function]} - onModalHide={[Function]} - onModalWillHide={[Function]} - onModalWillShow={[Function]} - onRequestClose={[Function]} - panResponderThreshold={4} - scrollHorizontal={false} - scrollOffset={0} - scrollOffsetMax={0} - scrollTo={null} - statusBarTranslucent={true} - supportedOrientations={ - [ - "portrait", - "landscape", - ] - } - swipeThreshold={100} - testID="modal" - transparent={true} - visible={false} - /> - </View> - <View - gap={6} - style={ - [ - { - "gap": 24, - }, - ] - } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 8, - }, - ] - } - /> <View + gap={6} style={ [ { - "marginHorizontal": 24, + "gap": 24, }, ] } > <View - gap={4} style={ [ { + "backgroundColor": "#F1F1F4", + "height": 8, + }, + ] + } + /> + <View + style={ + [ + { + "flexDirection": "row", "gap": 16, + "marginHorizontal": 16, + "marginVertical": 24, }, ] } > - <Text + <View + size="medium" style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 19, - "lineHeight": 30.4, + "borderRadius": 8, + "height": 48, + "overflow": "hidden", + "width": 48, }, ] } > - Passe le bon plan ! - </Text> + <BVLinearGradient + colors={ + [ + 4294614806, + 4290271489, + ] + } + endPoint={ + { + "x": 0.5, + "y": 1, + } + } + locations={null} + startPoint={ + { + "x": 0.5, + "y": 0, + } + } + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + > + <View + size="medium" + style={ + [ + { + "position": "absolute", + "top": -20, + }, + ] + } + > + <View + fill="none" + height={92} + width={82} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + </View> + </BVLinearGradient> + </View> <View style={ [ { - "flexDirection": "row", - "maxWidth": 500, - "width": "100%", + "flexShrink": 1, }, ] } > + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Fan de lecture ? + </Text> + <Text + style={ + [ + { + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + > + Reçois nos recos lecture, nos jeux-concours et le meilleur de l’actu littéraire ! + </Text> <View - accessibilityRole="list" + numberOfSpaces={2} style={ [ { - "flexBasis": 0, - "flexDirection": "row", - "flexGrow": 1, - "flexShrink": 1, - "flexWrap": "wrap", - "justifyContent": "flex-start", - "paddingLeft": 0, + "height": 8, }, ] } + /> + <View + accessibilityLabel="Suivre le thème" + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "alignSelf": "flex-start", + "backgroundColor": "#ffffff", + "borderColor": "#90949D", + "borderRadius": 24, + "borderWidth": 1, + "flexDirection": "row", + "height": "auto", + "justifyContent": "center", + "opacity": 1, + "paddingHorizontal": 12, + "paddingVertical": 4, + "userSelect": "auto", + "width": "auto", + } + } + testID="Suivre le thème" > + <View> + undefined-Lottie-Mock + </View> <View - accessibilityRole="none" + numberOfSpaces={2} style={ [ { - "alignItems": "center", - "display": "flex", - "flexBasis": "8.333333333333334%", - "flexGrow": 1, - "flexShrink": 0, - "marginBottom": 20, - "marginHorizontal": 4, - "maxWidth": 76, + "width": 8, }, ] } - > - <View - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ + /> + <Text + style={ + [ { - "alignItems": "center", - "height": 96, - "opacity": 1, - "userSelect": "auto", - "width": 76, - } - } - > - <View - style={ - [ - { - "alignItems": "center", - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - }, - ] - } - > - <View - style={ - [ - { - "paddingBottom": 4, - "paddingLeft": 4, - "paddingRight": 4, - "paddingTop": 4, - }, - ] - } - > - <View - height={48} - width={48} - > - <Text> - undefined-SVG-Mock - </Text> - </View> - </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <Text - disabled={false} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "textAlign": "center", - }, - ] - } - > - Envoyer sur -Instagram - </Text> - </View> - </View> - </View> + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + > + Suivre le thème + </Text> + </View> + </View> + </View> + <Modal + accessibilityLabelledBy="testUuidV4" + accessibilityModal={true} + animationType="none" + deviceHeight={1334} + deviceWidth={750} + hardwareAccelerated={false} + hideModalContentWhileAnimating={false} + onBackdropPress={[Function]} + onModalHide={[Function]} + onModalWillHide={[Function]} + onModalWillShow={[Function]} + onRequestClose={[Function]} + panResponderThreshold={4} + scrollHorizontal={false} + scrollOffset={0} + scrollOffsetMax={0} + scrollTo={null} + statusBarTranslucent={true} + supportedOrientations={ + [ + "portrait", + "landscape", + ] + } + swipeThreshold={100} + testID="modal" + transparent={true} + visible={false} + /> + <Modal + accessibilityLabelledBy="testUuidV4" + accessibilityModal={true} + animationType="none" + deviceHeight={1334} + deviceWidth={750} + hardwareAccelerated={false} + hideModalContentWhileAnimating={false} + onBackdropPress={[Function]} + onModalHide={[Function]} + onModalWillHide={[Function]} + onModalWillShow={[Function]} + onRequestClose={[Function]} + panResponderThreshold={4} + scrollHorizontal={false} + scrollOffset={0} + scrollOffsetMax={0} + scrollTo={null} + statusBarTranslucent={true} + supportedOrientations={ + [ + "portrait", + "landscape", + ] + } + swipeThreshold={100} + testID="modal" + transparent={true} + visible={false} + /> + <Modal + accessibilityLabelledBy="testUuidV4" + accessibilityModal={true} + animationType="none" + deviceHeight={1334} + deviceWidth={750} + hardwareAccelerated={false} + hideModalContentWhileAnimating={false} + onBackdropPress={[Function]} + onModalHide={[Function]} + onModalWillHide={[Function]} + onModalWillShow={[Function]} + onRequestClose={[Function]} + panResponderThreshold={4} + scrollHorizontal={false} + scrollOffset={0} + scrollOffsetMax={0} + scrollTo={null} + statusBarTranslucent={true} + supportedOrientations={ + [ + "portrait", + "landscape", + ] + } + swipeThreshold={100} + testID="modal" + transparent={true} + visible={false} + /> + </View> + <View + gap={6} + style={ + [ + { + "gap": 24, + }, + ] + } + > + <View + style={ + [ + { + "backgroundColor": "#F1F1F4", + "height": 8, + }, + ] + } + /> + <View + style={ + [ + { + "marginHorizontal": 24, + }, + ] + } + > + <View + style={ + [ + { + "marginBottom": 16, + }, + ] + } + > + <View + gap={4} + style={ + [ + { + "gap": 16, + }, + ] + } + > + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 19, + "lineHeight": 30.4, + }, + ] + } + > + Passe le bon plan ! + </Text> <View - accessibilityRole="none" style={ [ { - "alignItems": "center", - "display": "flex", - "flexBasis": "8.333333333333334%", - "flexGrow": 1, - "flexShrink": 0, - "marginBottom": 20, - "marginHorizontal": 4, - "maxWidth": 76, + "flexDirection": "row", + "maxWidth": 500, + "width": "100%", }, ] } > <View - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + accessibilityRole="list" style={ - { - "alignItems": "center", - "height": 96, - "opacity": 1, - "userSelect": "auto", - "width": 76, - } + [ + { + "flexBasis": 0, + "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, + "flexWrap": "wrap", + "justifyContent": "flex-start", + "paddingLeft": 0, + }, + ] } > <View + accessibilityRole="none" style={ [ { "alignItems": "center", - "flexBasis": 0, + "display": "flex", + "flexBasis": "8.333333333333334%", "flexGrow": 1, - "flexShrink": 1, + "flexShrink": 0, + "marginBottom": 20, + "marginHorizontal": 4, + "maxWidth": 76, }, ] } > <View + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "paddingBottom": 4, - "paddingLeft": 4, - "paddingRight": 4, - "paddingTop": 4, - }, - ] + { + "alignItems": "center", + "height": 96, + "opacity": 1, + "userSelect": "auto", + "width": 76, + } } > <View - height={48} - width={48} + style={ + [ + { + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } > - <Text> - undefined-SVG-Mock + <View + style={ + [ + { + "paddingBottom": 4, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 4, + }, + ] + } + > + <View + height={48} + width={48} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <Text + disabled={false} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "textAlign": "center", + }, + ] + } + > + Envoyer sur +Instagram </Text> </View> </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <Text - disabled={false} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "textAlign": "center", - }, - ] - } - > - Envoyer sur -WhatsApp - </Text> </View> - </View> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "alignItems": "center", - "display": "flex", - "flexBasis": "8.333333333333334%", - "flexGrow": 1, - "flexShrink": 0, - "marginBottom": 20, - "marginHorizontal": 4, - "maxWidth": 76, - }, - ] - } - > - <View - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "height": 96, - "opacity": 1, - "userSelect": "auto", - "width": 76, - } - } - > <View + accessibilityRole="none" style={ [ { "alignItems": "center", - "flexBasis": 0, + "display": "flex", + "flexBasis": "8.333333333333334%", "flexGrow": 1, - "flexShrink": 1, + "flexShrink": 0, + "marginBottom": 20, + "marginHorizontal": 4, + "maxWidth": 76, }, ] } > <View - style={ - [ - { - "paddingBottom": 4, - "paddingLeft": 4, - "paddingRight": 4, - "paddingTop": 4, - }, - ] + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } } - > - <View - height={48} - width={48} - > - <Text> - undefined-SVG-Mock - </Text> - </View> - </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } } - /> - <Text - disabled={false} + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "textAlign": "center", - }, - ] + { + "alignItems": "center", + "height": 96, + "opacity": 1, + "userSelect": "auto", + "width": 76, + } } > - Envoyer sur -iMessage - </Text> + <View + style={ + [ + { + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + > + <View + style={ + [ + { + "paddingBottom": 4, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 4, + }, + ] + } + > + <View + height={48} + width={48} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <Text + disabled={false} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "textAlign": "center", + }, + ] + } + > + Envoyer sur +WhatsApp + </Text> + </View> + </View> </View> - </View> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "alignItems": "center", - "display": "flex", - "flexBasis": "8.333333333333334%", - "flexGrow": 1, - "flexShrink": 0, - "marginBottom": 20, - "marginHorizontal": 4, - "maxWidth": 76, - }, - ] - } - > - <View - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "height": 96, - "opacity": 1, - "userSelect": "auto", - "width": 76, - } - } - > <View + accessibilityRole="none" style={ [ { "alignItems": "center", - "flexBasis": 0, + "display": "flex", + "flexBasis": "8.333333333333334%", "flexGrow": 1, - "flexShrink": 1, + "flexShrink": 0, + "marginBottom": 20, + "marginHorizontal": 4, + "maxWidth": 76, }, ] } > <View + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "paddingBottom": 4, - "paddingLeft": 4, - "paddingRight": 4, - "paddingTop": 4, - }, - ] + { + "alignItems": "center", + "height": 96, + "opacity": 1, + "userSelect": "auto", + "width": 76, + } } > <View @@ -4297,102 +4154,236 @@ iMessage [ { "alignItems": "center", - "borderColor": "#CBCDD2", - "borderRadius": 24, - "borderWidth": 1, - "height": 48, - "justifyContent": "center", - "width": 48, + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, }, ] } > <View - height={28} - width={28} + style={ + [ + { + "paddingBottom": 4, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 4, + }, + ] + } > - <Text> - undefined-SVG-Mock - </Text> + <View + height={48} + width={48} + > + <Text> + undefined-SVG-Mock + </Text> + </View> </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <Text + disabled={false} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "textAlign": "center", + }, + ] + } + > + Envoyer sur +iMessage + </Text> </View> </View> + </View> + <View + accessibilityRole="none" + style={ + [ + { + "alignItems": "center", + "display": "flex", + "flexBasis": "8.333333333333334%", + "flexGrow": 1, + "flexShrink": 0, + "marginBottom": 20, + "marginHorizontal": 4, + "maxWidth": 76, + }, + ] + } + > <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } } - /> - <Text - disabled={false} + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "textAlign": "center", - }, - ] + { + "alignItems": "center", + "height": 96, + "opacity": 1, + "userSelect": "auto", + "width": 76, + } } > - Plus + <View + style={ + [ + { + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + > + <View + style={ + [ + { + "paddingBottom": 4, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 4, + }, + ] + } + > + <View + style={ + [ + { + "alignItems": "center", + "borderColor": "#CBCDD2", + "borderRadius": 24, + "borderWidth": 1, + "height": 48, + "justifyContent": "center", + "width": 48, + }, + ] + } + > + <View + height={28} + width={28} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + </View> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <Text + disabled={false} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "textAlign": "center", + }, + ] + } + > + Plus d’options - </Text> + </Text> + </View> + </View> </View> </View> </View> </View> </View> </View> + </View> + <View + gap={22} + style={ + [ + { + "gap": 88, + }, + ] + } + > <View - numberOfSpaces={4} style={ [ { - "height": 16, + "backgroundColor": "#F1F1F4", + "height": 8, + }, + ] + } + /> + <View + style={ + [ + { + "marginBottom": 24, }, ] } /> </View> </View> - <View - gap={22} - style={ - [ - { - "gap": 88, - }, - ] - } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 8, - }, - ] - } - /> - <View - numberOfSpaces={6} - style={ - [ - { - "height": 24, - }, - ] - } - /> - </View> </View> </View> </RCTScrollView> @@ -5059,97 +5050,44 @@ exports[`<Venue /> should match snapshot with practical information 1`] = ` } > <View - maxHeight={56} + gap={4} style={ [ { - "flexDirection": "row", - "flexWrap": "wrap", - "gap": 8, - "maxHeight": 56, - "overflow": "hidden", + "gap": 16, }, ] } - testID="tagsContainer" > <View + maxHeight={56} style={ [ { - "alignSelf": "baseline", - "backgroundColor": "#F1F1F4", - "borderRadius": 6, "flexDirection": "row", - "paddingHorizontal": 8, - "paddingVertical": 4, + "flexWrap": "wrap", + "gap": 8, + "maxHeight": 56, + "overflow": "hidden", }, ] } + testID="tagsContainer" > - <Text + <View style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 16, + "alignSelf": "baseline", + "backgroundColor": "#F1F1F4", + "borderRadius": 6, + "flexDirection": "row", + "paddingHorizontal": 8, + "paddingVertical": 4, }, ] } > - Librairie - </Text> - </View> - </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <View - gap={1} - style={ - [ - { - "gap": 4, - }, - ] - } - > - <Text - accessibilityLabel="Nom du lieu : Le Petit Rintintin 1" - adjustsFontSizeToFit={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 19, - "lineHeight": 30.4, - }, - ] - } - > - Le Petit Rintintin 1 - </Text> - <View - gap={3} - style={ - [ - { - "gap": 12, - }, - ] - } - > - <View> <Text style={ [ @@ -5157,158 +5095,94 @@ exports[`<Venue /> should match snapshot with practical information 1`] = ` "color": "#161617", "fontFamily": "Montserrat-SemiBold", "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Adresse - </Text> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "lineHeight": 16, }, ] } > - 1 boulevard Poissonnière, 75000 Paris + Librairie </Text> </View> - <View + </View> + <View + gap={1} + style={ + [ + { + "gap": 4, + }, + ] + } + > + <Text + accessibilityLabel="Nom du lieu : Le Petit Rintintin 1" + adjustsFontSizeToFit={true} style={ [ { - "backgroundColor": "#F1F1F4", - "height": 1, - "width": "100%", + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 19, + "lineHeight": 30.4, }, ] } - /> + > + Le Petit Rintintin 1 + </Text> <View - accessibilityLabel="Copier l’adresse" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={true} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + gap={3} style={ - { - "alignItems": "center", - "backgroundColor": "transparent", - "borderRadius": 24, - "flexDirection": "row", - "justifyContent": "flex-start", - "maxWidth": 500, - "minHeight": 40, - "opacity": 1, - "paddingBottom": 2, - "paddingLeft": 2, - "paddingRight": 2, - "paddingTop": 2, - "userSelect": "auto", - "width": "100%", - } + [ + { + "gap": 12, + }, + ] } - testID="Copier l’adresse" > - <View - style={ - [ - { - "alignItems": "center", - "flexDirection": "row", - }, - ] - } - > - <View + <View> + <Text style={ [ { - "flexDirection": "row", - "flexShrink": 0, + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, ] } > - <View - height={20} - testID="button-icon-left" - width={20} - > - <Text> - button-icon-left-SVG-Mock - </Text> - </View> - <View - numberOfSpaces={2} - style={ - [ - { - "width": 8, - }, - ] - } - /> - </View> + Adresse + </Text> <Text - adjustsFontSizeToFit={false} - numberOfLines={1} style={ [ { "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 15, - "lineHeight": 20, - "maxWidth": "100%", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, }, ] } > - Copier l’adresse + 1 boulevard Poissonnière, 75000 Paris </Text> </View> - </View> - <View - style={ - [ - { - "alignItems": "flex-start", - }, - ] - } - > <View - accessibilityLabel="Voir l’itinéraire" + style={ + [ + { + "backgroundColor": "#F1F1F4", + "height": 1, + "width": "100%", + }, + ] + } + /> + <View + accessibilityLabel="Copier l’adresse" accessibilityState={ { "busy": undefined, @@ -5340,23 +5214,21 @@ exports[`<Venue /> should match snapshot with practical information 1`] = ` { "alignItems": "center", "backgroundColor": "transparent", - "borderRadius": 0, - "borderWidth": 0, + "borderRadius": 24, "flexDirection": "row", - "justifyContent": "center", - "marginTop": 0, + "justifyContent": "flex-start", "maxWidth": 500, - "minHeight": 20, + "minHeight": 40, "opacity": 1, - "paddingBottom": 0, - "paddingLeft": 0, - "paddingRight": 0, - "paddingTop": 0, + "paddingBottom": 2, + "paddingLeft": 2, + "paddingRight": 2, + "paddingTop": 2, "userSelect": "auto", - "width": "auto", + "width": "100%", } } - testID="Voir l’itinéraire" + testID="Copier l’adresse" > <View style={ @@ -5379,7 +5251,6 @@ exports[`<Venue /> should match snapshot with practical information 1`] = ` } > <View - accessibilityLabel="Nouvelle fenêtre" height={20} testID="button-icon-left" width={20} @@ -5404,2030 +5275,2054 @@ exports[`<Venue /> should match snapshot with practical information 1`] = ` numberOfLines={1} style={ [ - { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 15, - "lineHeight": 20, - "maxWidth": "100%", - }, - ] - } - > - Voir l’itinéraire - </Text> - </View> - </View> - </View> - </View> - </View> - </View> - </View> - <View - numberOfSpaces={6} - style={ - [ - { - "height": 24, - }, - ] - } - /> - <View - animatedStyle={ - { - "value": {}, - } - } - collapsable={false} - layout={ - LinearTransition { - "build": [Function], - "callbackV": undefined, - "dampingV": undefined, - "delayV": undefined, - "durationV": 200, - "easingV": undefined, - "initialValues": undefined, - "massV": undefined, - "overshootClampingV": undefined, - "randomizeDelay": false, - "restDisplacementThresholdV": undefined, - "restSpeedThresholdV": undefined, - "rotateV": undefined, - "stiffnessV": undefined, - "type": undefined, - } - } - > - <View - gap={6} - style={ - [ - { - "gap": 24, - }, - ] - } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 8, - }, - ] - } - /> - <View - style={ - [ - { - "flexGrow": 1, - "flexShrink": 1, - "width": "100%", - }, - ] - } - > - <View - accessibilityRole="tablist" - style={ - [ - { - "flexDirection": "row", - }, - ] - } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "bottom": 0, - "height": 4, - "position": "absolute", - "width": "100%", - }, - ] - } - /> - <View - numberOfSpaces={6} - style={ - [ - { - "width": 24, - }, - ] - } - /> - <View - accessibilityRole="tab" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": false, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "maxWidth": 180, - "opacity": 1, - "userSelect": "auto", - } - } - > - <View - gap={2} - style={ - [ - { - "alignItems": "center", - "flexDirection": "row", - "flexGrow": 1, - "gap": 8, - "justifyContent": "center", - }, - ] - } - > - <Text - isHover={false} - isSelected={false} - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 16, - "lineHeight": 25.6, - "textAlign": "center", - }, - ] - } - > - Offres disponibles - </Text> - </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <View - isSelected={false} - style={ - [ - { - "backgroundColor": "transparent", - "borderRadius": 4, - "bottom": 0, - "height": 4, - "width": "100%", - }, - ] - } - /> - </View> - <View - accessibilityRole="tab" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": true, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, - "maxWidth": 180, - "opacity": 1, - "userSelect": "auto", - } - } - > + { + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 15, + "lineHeight": 20, + "maxWidth": "100%", + }, + ] + } + > + Copier l’adresse + </Text> + </View> + </View> <View - gap={2} style={ [ { - "alignItems": "center", - "flexDirection": "row", - "flexGrow": 1, - "gap": 8, - "justifyContent": "center", + "alignItems": "flex-start", }, ] } > - <Text - isHover={false} - isSelected={true} + <View + accessibilityLabel="Voir l’itinéraire" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "color": "#eb0055", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 16, - "lineHeight": 25.6, - "textAlign": "center", - }, - ] + { + "alignItems": "center", + "backgroundColor": "transparent", + "borderRadius": 0, + "borderWidth": 0, + "flexDirection": "row", + "justifyContent": "center", + "marginTop": 0, + "maxWidth": 500, + "minHeight": 20, + "opacity": 1, + "paddingBottom": 0, + "paddingLeft": 0, + "paddingRight": 0, + "paddingTop": 0, + "userSelect": "auto", + "width": "auto", + } } + testID="Voir l’itinéraire" > - Infos pratiques - </Text> + <View + style={ + [ + { + "alignItems": "center", + "flexDirection": "row", + }, + ] + } + > + <View + style={ + [ + { + "flexDirection": "row", + "flexShrink": 0, + }, + ] + } + > + <View + accessibilityLabel="Nouvelle fenêtre" + height={20} + testID="button-icon-left" + width={20} + > + <Text> + button-icon-left-SVG-Mock + </Text> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "width": 8, + }, + ] + } + /> + </View> + <Text + adjustsFontSizeToFit={false} + numberOfLines={1} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 15, + "lineHeight": 20, + "maxWidth": "100%", + }, + ] + } + > + Voir l’itinéraire + </Text> + </View> + </View> </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <View - isSelected={true} - style={ - [ - { - "backgroundColor": "#eb0055", - "borderRadius": 4, - "bottom": 0, - "height": 4, - "width": "100%", - }, - ] - } - /> </View> - <View - numberOfSpaces={6} - style={ - [ - { - "width": 24, - }, - ] - } - /> </View> + </View> + </View> + </View> + <View + gap={6} + style={ + [ + { + "gap": 24, + }, + ] + } + > + <View + animatedStyle={ + { + "value": {}, + } + } + collapsable={false} + layout={ + LinearTransition { + "build": [Function], + "callbackV": undefined, + "dampingV": undefined, + "delayV": undefined, + "durationV": 200, + "easingV": undefined, + "initialValues": undefined, + "massV": undefined, + "overshootClampingV": undefined, + "randomizeDelay": false, + "restDisplacementThresholdV": undefined, + "restSpeedThresholdV": undefined, + "rotateV": undefined, + "stiffnessV": undefined, + "type": undefined, + } + } + > + <View + gap={6} + style={ + [ + { + "gap": 24, + }, + ] + } + > + <View + style={ + [ + { + "backgroundColor": "#F1F1F4", + "height": 8, + }, + ] + } + /> <View - accessibilityRole="none" style={ [ { "flexGrow": 1, "flexShrink": 1, + "width": "100%", }, ] } > <View + accessibilityRole="tablist" style={ [ { - "marginHorizontal": 24, + "flexDirection": "row", }, ] - } - > - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Modalités de retrait - </Text> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - How to withdraw, https://test.com - </Text> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 1, - "width": "100%", - }, - ] - } - /> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Description - </Text> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text + } + > + <View style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "backgroundColor": "#F1F1F4", + "bottom": 0, + "height": 4, + "position": "absolute", + "width": "100%", }, ] } - > - https://pass.culture.fr/ lorem ipsum consectetur adipisicing elit. Debitis officiis maiores quia unde, hic quisquam odit ea quo ipsam possimus, labore nesciunt numquam. Id itaque in sed sapiente blanditiis necessitatibus. consectetur adipisicing elit. Debitis officiis maiores quia unde, hic quisquam odit ea quo ipsam possimus, consectetur adipisicing elit. Debitis officiis maiores quia unde, hic quisquam odit ea quo ipsam possimus, - </Text> + /> <View - numberOfSpaces={4} + numberOfSpaces={6} style={ [ { - "height": 16, + "width": 24, }, ] } /> <View + accessibilityRole="tab" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": false, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 1, - "width": "100%", - }, - ] + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "maxWidth": 180, + "opacity": 1, + "userSelect": "auto", + } } - /> + > + <View + gap={2} + style={ + [ + { + "alignItems": "center", + "flexDirection": "row", + "flexGrow": 1, + "gap": 8, + "justifyContent": "center", + }, + ] + } + > + <Text + isHover={false} + isSelected={false} + style={ + [ + { + "color": "#696A6F", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 16, + "lineHeight": 25.6, + "textAlign": "center", + }, + ] + } + > + Offres disponibles + </Text> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <View + isSelected={false} + style={ + [ + { + "backgroundColor": "transparent", + "borderRadius": 4, + "bottom": 0, + "height": 4, + "width": "100%", + }, + ] + } + /> + </View> <View - numberOfSpaces={4} + accessibilityRole="tab" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": true, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "height": 16, - }, - ] + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + "maxWidth": 180, + "opacity": 0.7, + "userSelect": "auto", + } } - /> - <Text + > + <View + gap={2} + style={ + [ + { + "alignItems": "center", + "flexDirection": "row", + "flexGrow": 1, + "gap": 8, + "justifyContent": "center", + }, + ] + } + > + <Text + isHover={false} + isSelected={true} + style={ + [ + { + "color": "#eb0055", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 16, + "lineHeight": 25.6, + "textAlign": "center", + }, + ] + } + > + Infos pratiques + </Text> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <View + isSelected={true} + style={ + [ + { + "backgroundColor": "#eb0055", + "borderRadius": 4, + "bottom": 0, + "height": 4, + "width": "100%", + }, + ] + } + /> + </View> + <View + numberOfSpaces={6} style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, + "width": 24, }, ] } - > - Contact - </Text> + /> + </View> + <View + accessibilityRole="none" + style={ + [ + { + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + > <View - numberOfSpaces={4} style={ [ { - "height": 16, + "marginHorizontal": 24, }, ] } - /> - <View - accessibilityLabel="contact@venue.com" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, + > + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + > + Modalités de retrait + </Text> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + How to withdraw, https://test.com + </Text> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <View + style={ + [ + { + "backgroundColor": "#F1F1F4", + "height": 1, + "width": "100%", + }, + ] } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, + /> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] } - } - accessible={true} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "backgroundColor": "transparent", - "borderRadius": 24, - "flexDirection": "row", - "justifyContent": "flex-start", - "maxWidth": 500, - "minHeight": 40, - "opacity": 1, - "paddingBottom": 2, - "paddingLeft": 2, - "paddingRight": 2, - "paddingTop": 2, - "userSelect": "auto", - "width": "100%", + /> + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] } - } - testID="contact@venue.com" - > + > + Description + </Text> <View + numberOfSpaces={4} style={ [ { - "alignItems": "center", - "flexDirection": "row", + "height": 16, + }, + ] + } + /> + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + https://pass.culture.fr/ lorem ipsum consectetur adipisicing elit. Debitis officiis maiores quia unde, hic quisquam odit ea quo ipsam possimus, labore nesciunt numquam. Id itaque in sed sapiente blanditiis necessitatibus. consectetur adipisicing elit. Debitis officiis maiores quia unde, hic quisquam odit ea quo ipsam possimus, consectetur adipisicing elit. Debitis officiis maiores quia unde, hic quisquam odit ea quo ipsam possimus, + </Text> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <View + style={ + [ + { + "backgroundColor": "#F1F1F4", + "height": 1, + "width": "100%", + }, + ] + } + /> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + > + Contact + </Text> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, }, ] } + /> + <View + accessibilityLabel="contact@venue.com" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "backgroundColor": "transparent", + "borderRadius": 24, + "flexDirection": "row", + "justifyContent": "flex-start", + "maxWidth": 500, + "minHeight": 40, + "opacity": 1, + "paddingBottom": 2, + "paddingLeft": 2, + "paddingRight": 2, + "paddingTop": 2, + "userSelect": "auto", + "width": "100%", + } + } + testID="contact@venue.com" > <View style={ [ { + "alignItems": "center", "flexDirection": "row", - "flexShrink": 0, }, ] } > <View - height={20} - testID="button-icon-left" - width={20} + style={ + [ + { + "flexDirection": "row", + "flexShrink": 0, + }, + ] + } > - <Text> - button-icon-left-SVG-Mock - </Text> + <View + height={20} + testID="button-icon-left" + width={20} + > + <Text> + button-icon-left-SVG-Mock + </Text> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "width": 8, + }, + ] + } + /> </View> - <View - numberOfSpaces={2} + <Text + adjustsFontSizeToFit={false} + numberOfLines={1} style={ [ { - "width": 8, + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 15, + "lineHeight": 20, + "maxWidth": "100%", }, ] } - /> + > + contact@venue.com + </Text> </View> - <Text - adjustsFontSizeToFit={false} - numberOfLines={1} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 15, - "lineHeight": 20, - "maxWidth": "100%", - }, - ] - } - > - contact@venue.com - </Text> </View> - </View> - <View - accessibilityLabel="+33102030405" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, + <View + accessibilityLabel="+33102030405" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } } - } - accessible={true} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "backgroundColor": "transparent", - "borderRadius": 24, - "flexDirection": "row", - "justifyContent": "flex-start", - "maxWidth": 500, - "minHeight": 40, - "opacity": 1, - "paddingBottom": 2, - "paddingLeft": 2, - "paddingRight": 2, - "paddingTop": 2, - "userSelect": "auto", - "width": "100%", + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } } - } - testID="+33102030405" - > - <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "alignItems": "center", - "flexDirection": "row", - }, - ] + { + "alignItems": "center", + "backgroundColor": "transparent", + "borderRadius": 24, + "flexDirection": "row", + "justifyContent": "flex-start", + "maxWidth": 500, + "minHeight": 40, + "opacity": 1, + "paddingBottom": 2, + "paddingLeft": 2, + "paddingRight": 2, + "paddingTop": 2, + "userSelect": "auto", + "width": "100%", + } } + testID="+33102030405" > <View style={ [ { + "alignItems": "center", "flexDirection": "row", - "flexShrink": 0, }, ] } > <View - height={20} - testID="button-icon-left" - width={20} + style={ + [ + { + "flexDirection": "row", + "flexShrink": 0, + }, + ] + } > - <Text> - button-icon-left-SVG-Mock - </Text> + <View + height={20} + testID="button-icon-left" + width={20} + > + <Text> + button-icon-left-SVG-Mock + </Text> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "width": 8, + }, + ] + } + /> </View> - <View - numberOfSpaces={2} + <Text + adjustsFontSizeToFit={false} + numberOfLines={1} style={ [ { - "width": 8, + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 15, + "lineHeight": 20, + "maxWidth": "100%", }, ] } - /> + > + +33102030405 + </Text> </View> - <Text - adjustsFontSizeToFit={false} - numberOfLines={1} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 15, - "lineHeight": 20, - "maxWidth": "100%", - }, - ] - } - > - +33102030405 - </Text> </View> - </View> - <View - accessibilityLabel="https://my@website.com" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, + <View + accessibilityLabel="https://my@website.com" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } } - } - accessible={true} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "backgroundColor": "transparent", - "borderRadius": 24, - "flexDirection": "row", - "justifyContent": "flex-start", - "maxWidth": 500, - "minHeight": 40, - "opacity": 1, - "paddingBottom": 2, - "paddingLeft": 2, - "paddingRight": 2, - "paddingTop": 2, - "userSelect": "auto", - "width": "100%", + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } } - } - testID="https://my@website.com" - > - <View + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "alignItems": "center", - "flexDirection": "row", - }, - ] + { + "alignItems": "center", + "backgroundColor": "transparent", + "borderRadius": 24, + "flexDirection": "row", + "justifyContent": "flex-start", + "maxWidth": 500, + "minHeight": 40, + "opacity": 1, + "paddingBottom": 2, + "paddingLeft": 2, + "paddingRight": 2, + "paddingTop": 2, + "userSelect": "auto", + "width": "100%", + } } + testID="https://my@website.com" > <View style={ [ { + "alignItems": "center", "flexDirection": "row", - "flexShrink": 0, }, ] } > <View - accessibilityLabel="Nouvelle fenêtre" - height={20} - testID="button-icon-left" - width={20} + style={ + [ + { + "flexDirection": "row", + "flexShrink": 0, + }, + ] + } > - <Text> - button-icon-left-SVG-Mock - </Text> + <View + accessibilityLabel="Nouvelle fenêtre" + height={20} + testID="button-icon-left" + width={20} + > + <Text> + button-icon-left-SVG-Mock + </Text> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "width": 8, + }, + ] + } + /> </View> - <View - numberOfSpaces={2} + <Text + adjustsFontSizeToFit={false} + numberOfLines={1} style={ [ { - "width": 8, + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 15, + "lineHeight": 20, + "maxWidth": "100%", }, ] } - /> + > + https://my@website.com + </Text> </View> - <Text - adjustsFontSizeToFit={false} - numberOfLines={1} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 15, - "lineHeight": 20, - "maxWidth": "100%", - }, - ] - } - > - https://my@website.com - </Text> </View> - </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 1, - "width": "100%", - }, - ] - } - /> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Accessibilité - </Text> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <View - accessibilityRole="list" - style={ - [ - { - "flexDirection": "row", - "gap": 0, - "justifyContent": "space-between", - "overflow": "visible", - "paddingLeft": 0, - "width": "100%", - }, - ] - } - testID="BasicAccessibilityInfo" - > <View - accessibilityRole="none" + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <View + style={ + [ + { + "backgroundColor": "#F1F1F4", + "height": 1, + "width": "100%", + }, + ] + } + /> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + > + Accessibilité + </Text> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <View + accessibilityRole="list" style={ [ { - "display": "flex", - "maxWidth": 72, + "flexDirection": "row", + "gap": 0, + "justifyContent": "space-between", + "overflow": "visible", + "paddingLeft": 0, + "width": "100%", }, ] } + testID="BasicAccessibilityInfo" > <View - accessibilityLabel="Handicap visuel : Accessible" - accessibilityRole="image" + accessibilityRole="none" style={ [ { - "alignItems": "center", + "display": "flex", + "maxWidth": 72, }, ] } - testID="accessibilityBadgeContainer" > <View - accessibilityHidden={true} + accessibilityLabel="Handicap visuel : Accessible" + accessibilityRole="image" style={ [ { "alignItems": "center", - "borderColor": "#CBCDD2", - "borderRadius": 8, - "borderWidth": 1, - "height": 48, - "width": 48, }, ] } + testID="accessibilityBadgeContainer" > <View + accessibilityHidden={true} style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "alignItems": "center", + "borderColor": "#CBCDD2", + "borderRadius": 8, + "borderWidth": 1, + "height": 48, + "width": 48, }, ] } - /> - <View - fill="#161617" - height={24} - width={24} > - <Text> - undefined-SVG-Mock - </Text> + <View + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + /> + <View + fill="#161617" + height={24} + width={24} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + <View + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + /> + <View + style={ + [ + { + "bottom": -8, + "position": "absolute", + }, + ] + } + > + <View + accessibilityLabel="Accessible" + height={16} + testID="valid-icon" + width={16} + > + <Text> + valid-icon-SVG-Mock + </Text> + </View> + </View> </View> <View + numberOfSpaces={4} style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "height": 16, }, ] } /> - <View + <Text style={ [ { - "bottom": -8, - "position": "absolute", + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "paddingHorizontal": 1, + "textAlign": "center", }, ] } > - <View - accessibilityLabel="Accessible" - height={16} - testID="valid-icon" - width={16} - > - <Text> - valid-icon-SVG-Mock - </Text> - </View> - </View> + Handicap visuel + </Text> </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "paddingHorizontal": 1, - "textAlign": "center", - }, - ] - } - > - Handicap visuel - </Text> </View> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "display": "flex", - "maxWidth": 72, - }, - ] - } - > <View - accessibilityLabel="Handicap psychique ou cognitif : Non accessible" - accessibilityRole="image" + accessibilityRole="none" style={ [ { - "alignItems": "center", + "display": "flex", + "maxWidth": 72, }, ] } - testID="accessibilityBadgeContainer" > <View - accessibilityHidden={true} + accessibilityLabel="Handicap psychique ou cognitif : Non accessible" + accessibilityRole="image" style={ [ { "alignItems": "center", - "borderColor": "#CBCDD2", - "borderRadius": 8, - "borderWidth": 1, - "height": 48, - "width": 48, }, ] } + testID="accessibilityBadgeContainer" > <View + accessibilityHidden={true} style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "alignItems": "center", + "borderColor": "#CBCDD2", + "borderRadius": 8, + "borderWidth": 1, + "height": 48, + "width": 48, }, ] } - /> - <View - fill="#161617" - height={24} - width={24} > - <Text> - undefined-SVG-Mock - </Text> + <View + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + /> + <View + fill="#161617" + height={24} + width={24} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + <View + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + /> + <View + style={ + [ + { + "bottom": -8, + "position": "absolute", + }, + ] + } + > + <View + accessibilityLabel="Non accessible" + fill="#696A6F" + height={16} + testID="invalid-icon" + width={16} + > + <Text> + invalid-icon-SVG-Mock + </Text> + </View> + </View> </View> <View + numberOfSpaces={4} style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "height": 16, }, ] } /> - <View + <Text style={ [ { - "bottom": -8, - "position": "absolute", + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "paddingHorizontal": 1, + "textAlign": "center", }, ] } > - <View - accessibilityLabel="Non accessible" - fill="#696A6F" - height={16} - testID="invalid-icon" - width={16} - > - <Text> - invalid-icon-SVG-Mock - </Text> - </View> - </View> + Handicap psychique ou cognitif + </Text> </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "paddingHorizontal": 1, - "textAlign": "center", - }, - ] - } - > - Handicap psychique ou cognitif - </Text> </View> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "display": "flex", - "maxWidth": 72, - }, - ] - } - > <View - accessibilityLabel="Handicap moteur : Non accessible" - accessibilityRole="image" + accessibilityRole="none" style={ [ { - "alignItems": "center", + "display": "flex", + "maxWidth": 72, }, ] } - testID="accessibilityBadgeContainer" > <View - accessibilityHidden={true} + accessibilityLabel="Handicap moteur : Non accessible" + accessibilityRole="image" style={ [ { "alignItems": "center", - "borderColor": "#CBCDD2", - "borderRadius": 8, - "borderWidth": 1, - "height": 48, - "width": 48, }, ] } + testID="accessibilityBadgeContainer" > <View + accessibilityHidden={true} style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "alignItems": "center", + "borderColor": "#CBCDD2", + "borderRadius": 8, + "borderWidth": 1, + "height": 48, + "width": 48, }, ] } - /> - <View - fill="#161617" - height={24} - width={24} > - <Text> - undefined-SVG-Mock - </Text> + <View + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + /> + <View + fill="#161617" + height={24} + width={24} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + <View + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + /> + <View + style={ + [ + { + "bottom": -8, + "position": "absolute", + }, + ] + } + > + <View + accessibilityLabel="Non accessible" + fill="#696A6F" + height={16} + testID="invalid-icon" + width={16} + > + <Text> + invalid-icon-SVG-Mock + </Text> + </View> + </View> </View> <View + numberOfSpaces={4} style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "height": 16, }, ] } /> - <View + <Text style={ [ { - "bottom": -8, - "position": "absolute", - }, - ] - } - > - <View - accessibilityLabel="Non accessible" - fill="#696A6F" - height={16} - testID="invalid-icon" - width={16} - > - <Text> - invalid-icon-SVG-Mock - </Text> - </View> - </View> - </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "paddingHorizontal": 1, - "textAlign": "center", - }, - ] - } - > - Handicap moteur - </Text> + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "paddingHorizontal": 1, + "textAlign": "center", + }, + ] + } + > + Handicap moteur + </Text> + </View> </View> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "display": "flex", - "maxWidth": 72, - }, - ] - } - > <View - accessibilityLabel="Handicap auditif : Non accessible" - accessibilityRole="image" + accessibilityRole="none" style={ [ { - "alignItems": "center", + "display": "flex", + "maxWidth": 72, }, ] } - testID="accessibilityBadgeContainer" > <View - accessibilityHidden={true} + accessibilityLabel="Handicap auditif : Non accessible" + accessibilityRole="image" style={ [ { "alignItems": "center", - "borderColor": "#CBCDD2", - "borderRadius": 8, - "borderWidth": 1, - "height": 48, - "width": 48, }, ] } + testID="accessibilityBadgeContainer" > <View + accessibilityHidden={true} style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "alignItems": "center", + "borderColor": "#CBCDD2", + "borderRadius": 8, + "borderWidth": 1, + "height": 48, + "width": 48, }, ] } - /> - <View - fill="#161617" - height={24} - width={24} > - <Text> - undefined-SVG-Mock - </Text> + <View + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + /> + <View + fill="#161617" + height={24} + width={24} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + <View + style={ + [ + { + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + /> + <View + style={ + [ + { + "bottom": -8, + "position": "absolute", + }, + ] + } + > + <View + accessibilityLabel="Non accessible" + fill="#696A6F" + height={16} + testID="invalid-icon" + width={16} + > + <Text> + invalid-icon-SVG-Mock + </Text> + </View> + </View> </View> <View + numberOfSpaces={4} style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "height": 16, }, ] } /> - <View + <Text style={ [ { - "bottom": -8, - "position": "absolute", + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "paddingHorizontal": 1, + "textAlign": "center", }, ] } > - <View - accessibilityLabel="Non accessible" - fill="#696A6F" - height={16} - testID="invalid-icon" - width={16} - > - <Text> - invalid-icon-SVG-Mock - </Text> - </View> - </View> + Handicap auditif + </Text> </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "paddingHorizontal": 1, - "textAlign": "center", - }, - ] - } - > - Handicap auditif - </Text> </View> </View> - </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 1, - "width": "100%", - }, - ] - } - /> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Horaires d’ouverture - </Text> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <View - accessibilityRole="list" - style={ - [ - { - "display": "flex", - "flexDirection": "column", - "gap": 8, - "paddingLeft": 0, - }, - ] - } - > <View - accessibilityLabel="Lundi 09:00 - 19:00" - accessibilityRole="none" + numberOfSpaces={4} style={ [ { - "display": "flex", + "height": 16, }, ] } - > - <Text - accessibilityHidden={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - Lundi - </Text> - <Text - accessibilityHidden={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - 09:00 - 19:00 - </Text> - </View> + /> <View - accessibilityLabel="Mardi 09:00 - 12:00 puis 14:00 - 19:00" - accessibilityRole="none" style={ [ { - "display": "flex", + "backgroundColor": "#F1F1F4", + "height": 1, + "width": "100%", + }, + ] + } + /> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, }, ] } > - <Text - accessibilityHidden={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - Mardi - </Text> - <Text - accessibilityHidden={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - 09:00 - 12:00 / 14:00 - 19:00 - </Text> - </View> + Horaires d’ouverture + </Text> + <View + numberOfSpaces={4} + style={ + [ + { + "height": 16, + }, + ] + } + /> <View - accessibilityLabel="Mercredi 09:00 - 12:00 puis 14:00 - 19:00" - accessibilityRole="none" + accessibilityRole="list" style={ [ { "display": "flex", + "flexDirection": "column", + "gap": 8, + "paddingLeft": 0, }, ] } > - <Text - accessibilityHidden={true} + <View + accessibilityLabel="Lundi 09:00 - 19:00" + accessibilityRole="none" + style={ + [ + { + "display": "flex", + }, + ] + } + > + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Lundi + </Text> + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + 09:00 - 19:00 + </Text> + </View> + <View + accessibilityLabel="Mardi 09:00 - 12:00 puis 14:00 - 19:00" + accessibilityRole="none" style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "display": "flex", }, ] } > - Mercredi - </Text> - <Text - accessibilityHidden={true} + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Mardi + </Text> + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + 09:00 - 12:00 / 14:00 - 19:00 + </Text> + </View> + <View + accessibilityLabel="Mercredi 09:00 - 12:00 puis 14:00 - 19:00" + accessibilityRole="none" style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "display": "flex", }, ] } > - 09:00 - 12:00 / 14:00 - 19:00 - </Text> - </View> - <View - accessibilityLabel="Jeudi 09:00 - 12:00 puis 14:00 - 19:00" - accessibilityRole="none" - style={ - [ - { - "display": "flex", - }, - ] - } - > - <Text - accessibilityHidden={true} + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Mercredi + </Text> + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + 09:00 - 12:00 / 14:00 - 19:00 + </Text> + </View> + <View + accessibilityLabel="Jeudi 09:00 - 12:00 puis 14:00 - 19:00" + accessibilityRole="none" style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "display": "flex", }, ] } > - Jeudi - </Text> - <Text - accessibilityHidden={true} + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Jeudi + </Text> + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + 09:00 - 12:00 / 14:00 - 19:00 + </Text> + </View> + <View + accessibilityLabel="Vendredi 09:00 - 19:00" + accessibilityRole="none" style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "display": "flex", }, ] } > - 09:00 - 12:00 / 14:00 - 19:00 - </Text> - </View> - <View - accessibilityLabel="Vendredi 09:00 - 19:00" - accessibilityRole="none" - style={ - [ - { - "display": "flex", - }, - ] - } - > - <Text - accessibilityHidden={true} + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Vendredi + </Text> + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + 09:00 - 19:00 + </Text> + </View> + <View + accessibilityLabel="Samedi Fermé" + accessibilityRole="none" style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "display": "flex", }, ] } > - Vendredi - </Text> - <Text - accessibilityHidden={true} + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Samedi + </Text> + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Fermé + </Text> + </View> + <View + accessibilityLabel="Dimanche Fermé" + accessibilityRole="none" style={ [ { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, + "display": "flex", }, ] } > - 09:00 - 19:00 - </Text> + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Dimanche + </Text> + <Text + accessibilityHidden={true} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Medium", + "fontSize": 16, + "lineHeight": 25.6, + }, + ] + } + > + Fermé + </Text> + </View> </View> <View - accessibilityLabel="Samedi Fermé" - accessibilityRole="none" + numberOfSpaces={4} style={ [ { - "display": "flex", + "height": 16, }, ] } - > - <Text - accessibilityHidden={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - Samedi - </Text> - <Text - accessibilityHidden={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - Fermé - </Text> - </View> + /> <View - accessibilityLabel="Dimanche Fermé" - accessibilityRole="none" style={ [ { - "display": "flex", - }, - ] - } - > - <Text - accessibilityHidden={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - Dimanche - </Text> - <Text - accessibilityHidden={true} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Medium", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - Fermé - </Text> - </View> + "backgroundColor": "#F1F1F4", + "height": 1, + "width": "100%", + }, + ] + } + /> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> </View> - <View - numberOfSpaces={4} - style={ - [ - { - "height": 16, - }, - ] - } - /> - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 1, - "width": "100%", - }, - ] - } - /> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> </View> </View> </View> - </View> - <View - numberOfSpaces={6} - style={ - [ - { - "height": 24, - }, - ] - } - /> - <View - gap={0} - style={ - [ - { - "gap": 0, - }, - ] - } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 8, - }, - ] - } - /> <View + gap={6} style={ [ { - "flexDirection": "row", - "gap": 16, - "marginHorizontal": 16, - "marginVertical": 24, + "gap": 24, }, ] } > <View - size="medium" style={ [ { - "borderRadius": 8, - "height": 48, - "overflow": "hidden", - "width": 48, + "backgroundColor": "#F1F1F4", + "height": 8, }, ] } - > - <BVLinearGradient - colors={ - [ - 4294614806, - 4290271489, - ] - } - endPoint={ - { - "x": 0.5, - "y": 1, - } - } - locations={null} - startPoint={ + /> + <View + style={ + [ { - "x": 0.5, - "y": 0, - } - } + "flexDirection": "row", + "gap": 16, + "marginHorizontal": 16, + "marginVertical": 24, + }, + ] + } + > + <View + size="medium" style={ [ { - "flexBasis": 0, - "flexGrow": 1, - "flexShrink": 1, + "borderRadius": 8, + "height": 48, + "overflow": "hidden", + "width": 48, }, ] } > - <View - size="medium" + <BVLinearGradient + colors={ + [ + 4294614806, + 4290271489, + ] + } + endPoint={ + { + "x": 0.5, + "y": 1, + } + } + locations={null} + startPoint={ + { + "x": 0.5, + "y": 0, + } + } style={ [ { - "position": "absolute", - "top": -20, + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, }, ] } > <View - fill="none" - height={92} - width={82} + size="medium" + style={ + [ + { + "position": "absolute", + "top": -20, + }, + ] + } > - <Text> - undefined-SVG-Mock - </Text> + <View + fill="none" + height={92} + width={82} + > + <Text> + undefined-SVG-Mock + </Text> + </View> </View> - </View> - </BVLinearGradient> - </View> - <View - style={ - [ - { - "flexShrink": 1, - }, - ] - } - > - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 16, - "lineHeight": 25.6, - }, - ] - } - > - Fan de lecture ? - </Text> - <Text - style={ - [ - { - "color": "#696A6F", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - }, - ] - } - > - Reçois nos recos lecture, nos jeux-concours et le meilleur de l’actu littéraire ! - </Text> + </BVLinearGradient> + </View> <View - numberOfSpaces={2} style={ [ { - "height": 8, + "flexShrink": 1, }, ] } - /> - <View - accessibilityLabel="Suivre le thème" - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={true} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "alignSelf": "flex-start", - "backgroundColor": "#ffffff", - "borderColor": "#90949D", - "borderRadius": 24, - "borderWidth": 1, - "flexDirection": "row", - "height": "auto", - "justifyContent": "center", - "opacity": 1, - "paddingHorizontal": 12, - "paddingVertical": 4, - "userSelect": "auto", - "width": "auto", - } - } - testID="Suivre le thème" > - <View> - undefined-Lottie-Mock - </View> - <View - numberOfSpaces={2} + <Text style={ [ { - "width": 8, + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 16, + "lineHeight": 25.6, }, ] } - /> + > + Fan de lecture ? + </Text> <Text style={ [ { - "color": "#161617", + "color": "#696A6F", "fontFamily": "Montserrat-SemiBold", "fontSize": 12, "lineHeight": 19.2, @@ -7435,617 +7330,689 @@ exports[`<Venue /> should match snapshot with practical information 1`] = ` ] } > - Suivre le thème + Reçois nos recos lecture, nos jeux-concours et le meilleur de l’actu littéraire ! </Text> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <View + accessibilityLabel="Suivre le thème" + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "alignSelf": "flex-start", + "backgroundColor": "#ffffff", + "borderColor": "#90949D", + "borderRadius": 24, + "borderWidth": 1, + "flexDirection": "row", + "height": "auto", + "justifyContent": "center", + "opacity": 1, + "paddingHorizontal": 12, + "paddingVertical": 4, + "userSelect": "auto", + "width": "auto", + } + } + testID="Suivre le thème" + > + <View> + undefined-Lottie-Mock + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "width": 8, + }, + ] + } + /> + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + }, + ] + } + > + Suivre le thème + </Text> + </View> </View> </View> + <Modal + accessibilityLabelledBy="testUuidV4" + accessibilityModal={true} + animationType="none" + deviceHeight={1334} + deviceWidth={750} + hardwareAccelerated={false} + hideModalContentWhileAnimating={false} + onBackdropPress={[Function]} + onModalHide={[Function]} + onModalWillHide={[Function]} + onModalWillShow={[Function]} + onRequestClose={[Function]} + panResponderThreshold={4} + scrollHorizontal={false} + scrollOffset={0} + scrollOffsetMax={0} + scrollTo={null} + statusBarTranslucent={true} + supportedOrientations={ + [ + "portrait", + "landscape", + ] + } + swipeThreshold={100} + testID="modal" + transparent={true} + visible={false} + /> + <Modal + accessibilityLabelledBy="testUuidV4" + accessibilityModal={true} + animationType="none" + deviceHeight={1334} + deviceWidth={750} + hardwareAccelerated={false} + hideModalContentWhileAnimating={false} + onBackdropPress={[Function]} + onModalHide={[Function]} + onModalWillHide={[Function]} + onModalWillShow={[Function]} + onRequestClose={[Function]} + panResponderThreshold={4} + scrollHorizontal={false} + scrollOffset={0} + scrollOffsetMax={0} + scrollTo={null} + statusBarTranslucent={true} + supportedOrientations={ + [ + "portrait", + "landscape", + ] + } + swipeThreshold={100} + testID="modal" + transparent={true} + visible={false} + /> + <Modal + accessibilityLabelledBy="testUuidV4" + accessibilityModal={true} + animationType="none" + deviceHeight={1334} + deviceWidth={750} + hardwareAccelerated={false} + hideModalContentWhileAnimating={false} + onBackdropPress={[Function]} + onModalHide={[Function]} + onModalWillHide={[Function]} + onModalWillShow={[Function]} + onRequestClose={[Function]} + panResponderThreshold={4} + scrollHorizontal={false} + scrollOffset={0} + scrollOffsetMax={0} + scrollTo={null} + statusBarTranslucent={true} + supportedOrientations={ + [ + "portrait", + "landscape", + ] + } + swipeThreshold={100} + testID="modal" + transparent={true} + visible={false} + /> </View> - <Modal - accessibilityLabelledBy="testUuidV4" - accessibilityModal={true} - animationType="none" - deviceHeight={1334} - deviceWidth={750} - hardwareAccelerated={false} - hideModalContentWhileAnimating={false} - onBackdropPress={[Function]} - onModalHide={[Function]} - onModalWillHide={[Function]} - onModalWillShow={[Function]} - onRequestClose={[Function]} - panResponderThreshold={4} - scrollHorizontal={false} - scrollOffset={0} - scrollOffsetMax={0} - scrollTo={null} - statusBarTranslucent={true} - supportedOrientations={ - [ - "portrait", - "landscape", - ] - } - swipeThreshold={100} - testID="modal" - transparent={true} - visible={false} - /> - <Modal - accessibilityLabelledBy="testUuidV4" - accessibilityModal={true} - animationType="none" - deviceHeight={1334} - deviceWidth={750} - hardwareAccelerated={false} - hideModalContentWhileAnimating={false} - onBackdropPress={[Function]} - onModalHide={[Function]} - onModalWillHide={[Function]} - onModalWillShow={[Function]} - onRequestClose={[Function]} - panResponderThreshold={4} - scrollHorizontal={false} - scrollOffset={0} - scrollOffsetMax={0} - scrollTo={null} - statusBarTranslucent={true} - supportedOrientations={ - [ - "portrait", - "landscape", - ] - } - swipeThreshold={100} - testID="modal" - transparent={true} - visible={false} - /> - <Modal - accessibilityLabelledBy="testUuidV4" - accessibilityModal={true} - animationType="none" - deviceHeight={1334} - deviceWidth={750} - hardwareAccelerated={false} - hideModalContentWhileAnimating={false} - onBackdropPress={[Function]} - onModalHide={[Function]} - onModalWillHide={[Function]} - onModalWillShow={[Function]} - onRequestClose={[Function]} - panResponderThreshold={4} - scrollHorizontal={false} - scrollOffset={0} - scrollOffsetMax={0} - scrollTo={null} - statusBarTranslucent={true} - supportedOrientations={ - [ - "portrait", - "landscape", - ] - } - swipeThreshold={100} - testID="modal" - transparent={true} - visible={false} - /> - </View> - <View - gap={6} - style={ - [ - { - "gap": 24, - }, - ] - } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 8, - }, - ] - } - /> <View + gap={6} style={ [ { - "marginHorizontal": 24, + "gap": 24, }, ] } > <View - gap={4} style={ [ { - "gap": 16, + "backgroundColor": "#F1F1F4", + "height": 8, + }, + ] + } + /> + <View + style={ + [ + { + "marginHorizontal": 24, }, ] } > - <Text - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-Bold", - "fontSize": 19, - "lineHeight": 30.4, - }, - ] - } - > - Passe le bon plan ! - </Text> <View style={ [ { - "flexDirection": "row", - "maxWidth": 500, - "width": "100%", + "marginBottom": 16, }, ] } > <View - accessibilityRole="list" + gap={4} style={ [ { - "flexBasis": 0, - "flexDirection": "row", - "flexGrow": 1, - "flexShrink": 1, - "flexWrap": "wrap", - "justifyContent": "flex-start", - "paddingLeft": 0, + "gap": 16, }, ] } > + <Text + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-Bold", + "fontSize": 19, + "lineHeight": 30.4, + }, + ] + } + > + Passe le bon plan ! + </Text> <View - accessibilityRole="none" style={ [ { - "alignItems": "center", - "display": "flex", - "flexBasis": "8.333333333333334%", - "flexGrow": 1, - "flexShrink": 0, - "marginBottom": 20, - "marginHorizontal": 4, - "maxWidth": 76, + "flexDirection": "row", + "maxWidth": 500, + "width": "100%", }, ] } > <View - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} + accessibilityRole="list" style={ - { - "alignItems": "center", - "height": 96, - "opacity": 1, - "userSelect": "auto", - "width": 76, - } + [ + { + "flexBasis": 0, + "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, + "flexWrap": "wrap", + "justifyContent": "flex-start", + "paddingLeft": 0, + }, + ] } > <View + accessibilityRole="none" style={ [ { "alignItems": "center", - "flexBasis": 0, + "display": "flex", + "flexBasis": "8.333333333333334%", "flexGrow": 1, - "flexShrink": 1, + "flexShrink": 0, + "marginBottom": 20, + "marginHorizontal": 4, + "maxWidth": 76, }, ] } > <View + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "paddingBottom": 4, - "paddingLeft": 4, - "paddingRight": 4, - "paddingTop": 4, - }, - ] + { + "alignItems": "center", + "height": 96, + "opacity": 1, + "userSelect": "auto", + "width": 76, + } } > <View - height={48} - width={48} + style={ + [ + { + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } > - <Text> - undefined-SVG-Mock + <View + style={ + [ + { + "paddingBottom": 4, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 4, + }, + ] + } + > + <View + height={48} + width={48} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <Text + disabled={false} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "textAlign": "center", + }, + ] + } + > + Envoyer sur +Instagram </Text> </View> </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <Text - disabled={false} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "textAlign": "center", - }, - ] - } - > - Envoyer sur -Instagram - </Text> </View> - </View> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "alignItems": "center", - "display": "flex", - "flexBasis": "8.333333333333334%", - "flexGrow": 1, - "flexShrink": 0, - "marginBottom": 20, - "marginHorizontal": 4, - "maxWidth": 76, - }, - ] - } - > - <View - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "height": 96, - "opacity": 1, - "userSelect": "auto", - "width": 76, - } - } - > <View + accessibilityRole="none" style={ [ { "alignItems": "center", - "flexBasis": 0, + "display": "flex", + "flexBasis": "8.333333333333334%", "flexGrow": 1, - "flexShrink": 1, + "flexShrink": 0, + "marginBottom": 20, + "marginHorizontal": 4, + "maxWidth": 76, }, ] } > <View - style={ - [ - { - "paddingBottom": 4, - "paddingLeft": 4, - "paddingRight": 4, - "paddingTop": 4, - }, - ] + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } } - > - <View - height={48} - width={48} - > - <Text> - undefined-SVG-Mock - </Text> - </View> - </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } } - /> - <Text - disabled={false} + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "textAlign": "center", - }, - ] + { + "alignItems": "center", + "height": 96, + "opacity": 1, + "userSelect": "auto", + "width": 76, + } } > - Envoyer sur + <View + style={ + [ + { + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } + > + <View + style={ + [ + { + "paddingBottom": 4, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 4, + }, + ] + } + > + <View + height={48} + width={48} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <Text + disabled={false} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "textAlign": "center", + }, + ] + } + > + Envoyer sur WhatsApp - </Text> + </Text> + </View> + </View> </View> - </View> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "alignItems": "center", - "display": "flex", - "flexBasis": "8.333333333333334%", - "flexGrow": 1, - "flexShrink": 0, - "marginBottom": 20, - "marginHorizontal": 4, - "maxWidth": 76, - }, - ] - } - > - <View - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "height": 96, - "opacity": 1, - "userSelect": "auto", - "width": 76, - } - } - > <View + accessibilityRole="none" style={ [ { "alignItems": "center", - "flexBasis": 0, + "display": "flex", + "flexBasis": "8.333333333333334%", "flexGrow": 1, - "flexShrink": 1, + "flexShrink": 0, + "marginBottom": 20, + "marginHorizontal": 4, + "maxWidth": 76, }, ] } > <View + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "paddingBottom": 4, - "paddingLeft": 4, - "paddingRight": 4, - "paddingTop": 4, - }, - ] + { + "alignItems": "center", + "height": 96, + "opacity": 1, + "userSelect": "auto", + "width": 76, + } } > <View - height={48} - width={48} + style={ + [ + { + "alignItems": "center", + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, + }, + ] + } > - <Text> - undefined-SVG-Mock + <View + style={ + [ + { + "paddingBottom": 4, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 4, + }, + ] + } + > + <View + height={48} + width={48} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <Text + disabled={false} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "textAlign": "center", + }, + ] + } + > + Envoyer sur +iMessage </Text> </View> </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <Text - disabled={false} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "textAlign": "center", - }, - ] - } - > - Envoyer sur -iMessage - </Text> </View> - </View> - </View> - <View - accessibilityRole="none" - style={ - [ - { - "alignItems": "center", - "display": "flex", - "flexBasis": "8.333333333333334%", - "flexGrow": 1, - "flexShrink": 0, - "marginBottom": 20, - "marginHorizontal": 4, - "maxWidth": 76, - }, - ] - } - > - <View - accessibilityRole="button" - accessibilityState={ - { - "busy": undefined, - "checked": undefined, - "disabled": undefined, - "expanded": undefined, - "selected": undefined, - } - } - accessibilityValue={ - { - "max": undefined, - "min": undefined, - "now": undefined, - "text": undefined, - } - } - accessible={false} - collapsable={false} - focusable={true} - onClick={[Function]} - onResponderGrant={[Function]} - onResponderMove={[Function]} - onResponderRelease={[Function]} - onResponderTerminate={[Function]} - onResponderTerminationRequest={[Function]} - onStartShouldSetResponder={[Function]} - style={ - { - "alignItems": "center", - "height": 96, - "opacity": 1, - "userSelect": "auto", - "width": 76, - } - } - > <View + accessibilityRole="none" style={ [ { "alignItems": "center", - "flexBasis": 0, + "display": "flex", + "flexBasis": "8.333333333333334%", "flexGrow": 1, - "flexShrink": 1, + "flexShrink": 0, + "marginBottom": 20, + "marginHorizontal": 4, + "maxWidth": 76, }, ] } > <View + accessibilityRole="button" + accessibilityState={ + { + "busy": undefined, + "checked": undefined, + "disabled": undefined, + "expanded": undefined, + "selected": undefined, + } + } + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={false} + collapsable={false} + focusable={true} + onClick={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} style={ - [ - { - "paddingBottom": 4, - "paddingLeft": 4, - "paddingRight": 4, - "paddingTop": 4, - }, - ] + { + "alignItems": "center", + "height": 96, + "opacity": 1, + "userSelect": "auto", + "width": 76, + } } > <View @@ -8053,102 +8020,117 @@ iMessage [ { "alignItems": "center", - "borderColor": "#CBCDD2", - "borderRadius": 24, - "borderWidth": 1, - "height": 48, - "justifyContent": "center", - "width": 48, + "flexBasis": 0, + "flexGrow": 1, + "flexShrink": 1, }, ] } > <View - height={28} - width={28} + style={ + [ + { + "paddingBottom": 4, + "paddingLeft": 4, + "paddingRight": 4, + "paddingTop": 4, + }, + ] + } > - <Text> - undefined-SVG-Mock - </Text> + <View + style={ + [ + { + "alignItems": "center", + "borderColor": "#CBCDD2", + "borderRadius": 24, + "borderWidth": 1, + "height": 48, + "justifyContent": "center", + "width": 48, + }, + ] + } + > + <View + height={28} + width={28} + > + <Text> + undefined-SVG-Mock + </Text> + </View> + </View> </View> + <View + numberOfSpaces={2} + style={ + [ + { + "height": 8, + }, + ] + } + /> + <Text + disabled={false} + style={ + [ + { + "color": "#161617", + "fontFamily": "Montserrat-SemiBold", + "fontSize": 12, + "lineHeight": 19.2, + "textAlign": "center", + }, + ] + } + > + Plus +d’options + </Text> </View> </View> - <View - numberOfSpaces={2} - style={ - [ - { - "height": 8, - }, - ] - } - /> - <Text - disabled={false} - style={ - [ - { - "color": "#161617", - "fontFamily": "Montserrat-SemiBold", - "fontSize": 12, - "lineHeight": 19.2, - "textAlign": "center", - }, - ] - } - > - Plus -d’options - </Text> </View> </View> </View> </View> </View> </View> + </View> + <View + gap={22} + style={ + [ + { + "gap": 88, + }, + ] + } + > <View - numberOfSpaces={4} style={ [ { - "height": 16, + "backgroundColor": "#F1F1F4", + "height": 8, + }, + ] + } + /> + <View + style={ + [ + { + "marginBottom": 24, }, ] } /> </View> </View> - <View - gap={22} - style={ - [ - { - "gap": 88, - }, - ] - } - > - <View - style={ - [ - { - "backgroundColor": "#F1F1F4", - "height": 8, - }, - ] - } - /> - <View - numberOfSpaces={6} - style={ - [ - { - "height": 24, - }, - ] - } - /> - </View> </View> </View> </RCTScrollView> diff --git a/src/features/venue/components/VenueBody/VenueBody.native.test.tsx b/src/features/venue/components/VenueBody/VenueBody.native.test.tsx index 6a0a2bd8d5c..9f3add23470 100644 --- a/src/features/venue/components/VenueBody/VenueBody.native.test.tsx +++ b/src/features/venue/components/VenueBody/VenueBody.native.test.tsx @@ -1,20 +1,16 @@ import mockdate from 'mockdate' import React from 'react' import { Linking } from 'react-native' -import Share, { Social } from 'react-native-share' -import { UseQueryResult } from 'react-query' import { useRoute } from '__mocks__/@react-navigation/native' import { gtlPlaylistAlgoliaSnapshot } from 'features/gtlPlaylist/fixtures/gtlPlaylistAlgoliaSnapshot' import * as useGTLPlaylists from 'features/gtlPlaylist/hooks/useGTLPlaylists' -import * as useVenueOffers from 'features/venue/api/useVenueOffers' +import { useVenueOffers } from 'features/venue/api/useVenueOffers' import { VenueBody } from 'features/venue/components/VenueBody/VenueBody' import { venueDataTest } from 'features/venue/fixtures/venueDataTest' import { VenueOffersResponseSnap } from 'features/venue/fixtures/venueOffersResponseSnap' -import { VenueOffers } from 'features/venue/types' import { analytics } from 'libs/analytics' import * as useFeatureFlag from 'libs/firebase/firestore/featureFlags/useFeatureFlag' -import { Network } from 'libs/share/types' import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC' import { fireEvent, render, screen } from 'tests/utils' @@ -22,18 +18,17 @@ jest.spyOn(useFeatureFlag, 'useFeatureFlag').mockReturnValue(false) mockdate.set(new Date('2021-08-15T00:00:00Z')) -jest.mock('features/venue/api/useVenue') -jest.mock('@react-native-clipboard/clipboard') -const mockShareSingle = jest.spyOn(Share, 'shareSingle') const canOpenURLSpy = jest.spyOn(Linking, 'canOpenURL').mockResolvedValue(false) jest .spyOn(useGTLPlaylists, 'useGTLPlaylists') .mockReturnValue({ isLoading: false, gtlPlaylists: gtlPlaylistAlgoliaSnapshot }) -jest.spyOn(useVenueOffers, 'useVenueOffers').mockReturnValue({ + +jest.mock('features/venue/api/useVenueOffers') +const mockUseVenueOffers = useVenueOffers as jest.Mock +mockUseVenueOffers.mockReturnValue({ isLoading: false, data: { hits: VenueOffersResponseSnap, nbHits: 10 }, -} as unknown as UseQueryResult<VenueOffers, unknown>) - +}) jest.mock('libs/location') jest.mock('libs/subcategories/useSubcategories') @@ -50,35 +45,23 @@ describe('<VenueBody />', () => { canOpenURLSpy.mockResolvedValueOnce(true) }) - it('should display withdrawal details', async () => { + it('should display expected tabs', async () => { render(reactQueryProviderHOC(<VenueBody venue={venueDataTest} />)) - await waitUntilRendered() - fireEvent.press(screen.getByText('Infos pratiques')) - - expect(screen.getByText('How to withdraw, https://test.com')).toBeOnTheScreen() + expect(await screen.findByText('Offres disponibles')).toBeOnTheScreen() + expect(await screen.findByText('Infos pratiques')).toBeOnTheScreen() }) - it('should share on Instagram', async () => { + it('should display withdrawal details', async () => { render(reactQueryProviderHOC(<VenueBody venue={venueDataTest} />)) - const instagramButton = await screen.findByText(`Envoyer sur ${Network.instagram}`) - - fireEvent.press(instagramButton) + fireEvent.press(screen.getByText('Infos pratiques')) - expect(mockShareSingle).toHaveBeenCalledWith({ - social: Social.Instagram, - message: encodeURIComponent( - `Retrouve "${venueDataTest.name}" sur le pass Culture\u00a0:\nhttps://webapp-v2.example.com/lieu/5543?utm_gen=product&utm_campaign=share_venue&utm_medium=social_media&utm_source=Instagram` - ), - type: 'text', - url: undefined, - }) + expect(screen.getByText('How to withdraw, https://test.com')).toBeOnTheScreen() }) it('should log event when pressing on Infos pratiques tab', async () => { render(reactQueryProviderHOC(<VenueBody venue={venueDataTest} />)) - await waitUntilRendered() fireEvent.press(screen.getByText('Infos pratiques')) @@ -89,16 +72,9 @@ describe('<VenueBody />', () => { it('should log event when pressing on Offres disponibles tab', async () => { render(reactQueryProviderHOC(<VenueBody venue={venueDataTest} />)) - await waitUntilRendered() fireEvent.press(screen.getByText('Offres disponibles')) expect(analytics.logConsultVenueOffers).toHaveBeenCalledWith({ venueId: venueDataTest.id }) }) }) - -const waitUntilRendered = async () => { - // We wait until the full render is done - // This is due to asynchronous calls to check the media on the phone - await screen.findByText(`Envoyer sur ${Network.instagram}`) -} diff --git a/src/features/venue/components/VenueBody/VenueBody.tsx b/src/features/venue/components/VenueBody/VenueBody.tsx index 9a139bf423a..c8934060bdd 100644 --- a/src/features/venue/components/VenueBody/VenueBody.tsx +++ b/src/features/venue/components/VenueBody/VenueBody.tsx @@ -6,22 +6,17 @@ import { VenueResponse } from 'api/gen' import { GtlPlaylistData } from 'features/gtlPlaylist/types' import { PracticalInformation } from 'features/venue/components/PracticalInformation/PracticalInformation' import { TabLayout } from 'features/venue/components/TabLayout/TabLayout' -import { VENUE_CTA_HEIGHT_IN_SPACES } from 'features/venue/components/VenueCTA/VenueCTA' -import { VenueMessagingApps } from 'features/venue/components/VenueMessagingApps/VenueMessagingApps' import { VenueOffers } from 'features/venue/components/VenueOffers/VenueOffers' -import { VenueThematicSection } from 'features/venue/components/VenueThematicSection/VenueThematicSection' import type { VenueOffersArtists, VenueOffers as VenueOffersType } from 'features/venue/types' import { Tab } from 'features/venue/types' import { analytics } from 'libs/analytics' import { SectionWithDivider } from 'ui/components/SectionWithDivider' -import { Spacer } from 'ui/theme' interface Props { venue: VenueResponse venueArtists?: VenueOffersArtists venueOffers?: VenueOffersType playlists?: GtlPlaylistData[] - shouldDisplayCTA?: boolean } export const VenueBody: FunctionComponent<Props> = ({ @@ -29,12 +24,11 @@ export const VenueBody: FunctionComponent<Props> = ({ venueArtists, venueOffers, playlists, - shouldDisplayCTA, }) => { const { isDesktopViewport, isTabletViewport } = useTheme() const isLargeScreen = isDesktopViewport || isTabletViewport - const FirstSectionContainer = isLargeScreen ? View : SectionWithDivider + const SectionContainer = isLargeScreen ? View : SectionWithDivider const tabPanels = { [Tab.OFFERS]: ( @@ -49,37 +43,22 @@ export const VenueBody: FunctionComponent<Props> = ({ } return ( - <React.Fragment> - <FirstSectionContainer visible gap={6}> - <TabLayout - tabPanels={tabPanels} - tabs={[{ key: Tab.OFFERS }, { key: Tab.INFOS }]} - defaultTab={Tab.OFFERS} - onTabChange={{ - 'Offres disponibles': () => - analytics.logConsultVenueOffers({ - venueId: venue.id, - }), - 'Infos pratiques': () => - analytics.logConsultPracticalInformations({ - venueId: venue.id, - }), - }} - /> - </FirstSectionContainer> - - <Spacer.Column numberOfSpaces={6} /> - - <VenueThematicSection venue={venue} /> - - <SectionWithDivider visible margin gap={6}> - <VenueMessagingApps venue={venue} /> - <Spacer.Column numberOfSpaces={4} /> - </SectionWithDivider> - - <SectionWithDivider visible={!!shouldDisplayCTA} gap={VENUE_CTA_HEIGHT_IN_SPACES}> - <Spacer.Column numberOfSpaces={6} /> - </SectionWithDivider> - </React.Fragment> + <SectionContainer visible gap={6}> + <TabLayout + tabPanels={tabPanels} + tabs={[{ key: Tab.OFFERS }, { key: Tab.INFOS }]} + defaultTab={Tab.OFFERS} + onTabChange={{ + 'Offres disponibles': () => + analytics.logConsultVenueOffers({ + venueId: venue.id, + }), + 'Infos pratiques': () => + analytics.logConsultPracticalInformations({ + venueId: venue.id, + }), + }} + /> + </SectionContainer> ) } diff --git a/src/features/venue/components/VenueCTA/VenueCTA.native.test.tsx b/src/features/venue/components/VenueCTA/VenueCTA.native.test.tsx index 5695cf3bac0..883a1f9709d 100644 --- a/src/features/venue/components/VenueCTA/VenueCTA.native.test.tsx +++ b/src/features/venue/components/VenueCTA/VenueCTA.native.test.tsx @@ -4,10 +4,10 @@ import { push } from '__mocks__/@react-navigation/native' import { SearchState } from 'features/search/types' import { VenueCTA } from 'features/venue/components/VenueCTA/VenueCTA' import { venueDataTest } from 'features/venue/fixtures/venueDataTest' -import * as useNavigateToSearchWithVenueOffers from 'features/venue/helpers/useNavigateToSearchWithVenueOffers' +import { SearchNavConfig } from 'features/venue/types' import { analytics } from 'libs/analytics' import { LocationMode } from 'libs/location/types' -import { fireEvent, render, screen, waitFor } from 'tests/utils' +import { render, screen, userEvent, waitFor } from 'tests/utils' const defaultParams: SearchState = { beginningDatetime: undefined, @@ -34,27 +34,28 @@ const defaultParams: SearchState = { }, } as SearchState -jest - .spyOn(useNavigateToSearchWithVenueOffers, 'useNavigateToSearchWithVenueOffers') - .mockReturnValue({ - screen: 'TabNavigator', +const searchNavConfigMock: SearchNavConfig = { + screen: 'TabNavigator', + params: { + screen: 'SearchStackNavigator', params: { - screen: 'SearchStackNavigator', - params: { - screen: 'SearchResults', - params: defaultParams, - }, + screen: 'SearchResults', + params: defaultParams, }, - withPush: true, - }) + }, + withPush: true, +} jest.mock('libs/firebase/analytics/analytics') +jest.useFakeTimers() +const user = userEvent.setup() + describe('<VenueCTA />', () => { it('should navigate to the search page when pressed on', async () => { - render(<VenueCTA venue={venueDataTest} />) + render(<VenueCTA searchNavConfig={searchNavConfigMock} onBeforeNavigate={jest.fn()} />) - fireEvent.press(screen.getByText('Rechercher une offre')) + await user.press(await screen.findByText('Rechercher une offre')) await waitFor(() => { expect(push).toHaveBeenCalledWith('TabNavigator', { @@ -76,9 +77,14 @@ describe('<VenueCTA />', () => { }) it('should log event when pressed on', async () => { - render(<VenueCTA venue={venueDataTest} />) + render( + <VenueCTA + searchNavConfig={searchNavConfigMock} + onBeforeNavigate={() => analytics.logVenueSeeAllOffersClicked(venueDataTest.id)} + /> + ) - fireEvent.press(screen.getByText('Rechercher une offre')) + await user.press(await screen.findByText('Rechercher une offre')) expect(analytics.logVenueSeeAllOffersClicked).toHaveBeenCalledWith(venueDataTest.id) }) diff --git a/src/features/venue/components/VenueCTA/VenueCTA.tsx b/src/features/venue/components/VenueCTA/VenueCTA.tsx index 9b7096e527f..042ef076204 100644 --- a/src/features/venue/components/VenueCTA/VenueCTA.tsx +++ b/src/features/venue/components/VenueCTA/VenueCTA.tsx @@ -1,9 +1,7 @@ import React, { FunctionComponent } from 'react' import styled from 'styled-components/native' -import { VenueResponse } from 'api/gen' -import { useNavigateToSearchWithVenueOffers } from 'features/venue/helpers/useNavigateToSearchWithVenueOffers' -import { analytics } from 'libs/analytics' +import { SearchNavConfig } from 'features/venue/types' import { ButtonPrimary } from 'ui/components/buttons/ButtonPrimary' import { StickyBottomWrapper } from 'ui/components/StickyBottomWrapper/StickyBottomWrapper' import { InternalTouchableLink } from 'ui/components/touchableLink/InternalTouchableLink' @@ -13,18 +11,18 @@ import { Spacer } from 'ui/theme' export const VENUE_CTA_HEIGHT_IN_SPACES = 6 + 10 + 6 interface Props { - venue: VenueResponse + searchNavConfig: SearchNavConfig + onBeforeNavigate: () => void } -export const VenueCTA: FunctionComponent<Props> = ({ venue }) => { - const searchNavConfig = useNavigateToSearchWithVenueOffers(venue) +export const VenueCTA: FunctionComponent<Props> = ({ searchNavConfig, onBeforeNavigate }) => { return ( <StickyBottomWrapper> <CallToActionContainer> <Spacer.Column numberOfSpaces={6} /> <InternalTouchableLink navigateTo={searchNavConfig} - onBeforeNavigate={() => analytics.logVenueSeeAllOffersClicked(venue.id)} + onBeforeNavigate={onBeforeNavigate} as={ButtonPrimary} wording="Rechercher une offre" icon={SmallMagnifyingGlass} diff --git a/src/features/venue/components/VenueContent/VenueContent.native.test.tsx b/src/features/venue/components/VenueContent/VenueContent.native.test.tsx index 64ee313c000..5708c47af60 100644 --- a/src/features/venue/components/VenueContent/VenueContent.native.test.tsx +++ b/src/features/venue/components/VenueContent/VenueContent.native.test.tsx @@ -3,28 +3,17 @@ import React, { createRef } from 'react' import { ScrollView } from 'react-native' import { push } from '__mocks__/@react-navigation/native' -import { VenueTypeCodeKey } from 'api/gen' -import { CineContentCTAID } from 'features/offer/components/OfferCine/CineContentCTA' import { OfferCTAProvider } from 'features/offer/components/OfferContent/OfferCTAProvider' import { VenueContent } from 'features/venue/components/VenueContent/VenueContent' import { venueDataTest } from 'features/venue/fixtures/venueDataTest' -import { - VenueMoviesOffersResponseSnap, - VenueOffersResponseSnap, -} from 'features/venue/fixtures/venueOffersResponseSnap' -import { DEFAULT_REMOTE_CONFIG } from 'libs/firebase/remoteConfig/remoteConfig.constants' -import * as useRemoteConfigContextModule from 'libs/firebase/remoteConfig/RemoteConfigProvider' import { LocationMode } from 'libs/location/types' import { BatchEvent, BatchProfile } from 'libs/react-native-batch' import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC' -import { act, fireEvent, render, screen, userEvent, waitFor } from 'tests/utils' -import * as AnchorContextModule from 'ui/components/anchor/AnchorContext' +import { act, render, screen, userEvent, waitFor } from 'tests/utils' import { AnchorProvider } from 'ui/components/anchor/AnchorContext' import * as useModalAPI from 'ui/components/modals/useModal' -const useScrollToAnchorSpy = jest.spyOn(AnchorContextModule, 'useScrollToAnchor') - -let mockFFValue = false +const mockFFValue = false jest.mock('libs/firebase/firestore/featureFlags/useFeatureFlag', () => ({ useFeatureFlag: () => mockFFValue, })) @@ -47,28 +36,6 @@ jest.mock('libs/location') jest.mock('features/search/context/SearchWrapper') jest.mock('libs/firebase/analytics/analytics') -const mockInView = jest.fn() -const InViewMock = ({ - onChange, - children, -}: { - onChange: VoidFunction - children: React.ReactNode -}) => { - mockInView.mockImplementation(onChange) - return <React.Fragment>{children}</React.Fragment> -} - -jest.mock('react-native-intersection-observer', () => { - return { - ...jest.requireActual('react-native-intersection-observer'), - InView: InViewMock, - mockInView, - } -}) - -const useRemoteConfigContextSpy = jest.spyOn(useRemoteConfigContextModule, 'useRemoteConfigContext') - const defaultSearchParams = { beginningDatetime: undefined, date: null, @@ -101,20 +68,22 @@ const renderVenueContent = (props?: Partial<React.ComponentProps<typeof VenueCon reactQueryProviderHOC( <AnchorProvider scrollViewRef={createRef<ScrollView>()} handleCheckScrollY={() => 0}> <OfferCTAProvider> - <VenueContent venue={venueDataTest} {...props} /> + <VenueContent venue={venueDataTest} {...props}> + <React.Fragment></React.Fragment> + </VenueContent> </OfferCTAProvider> </AnchorProvider> ) ) } +const user = userEvent.setup() + describe('<VenueContent />', () => { it('should search the offers associated when pressing "Rechercher une offre"', async () => { - renderVenueContent({ - venueOffers: { hits: VenueOffersResponseSnap, nbHits: 4 }, - }) + renderVenueContent({ isCTADisplayed: true }) - fireEvent.press(screen.getByText('Rechercher une offre')) + await user.press(screen.getByText('Rechercher une offre')) await waitFor(() => { expect(push).toHaveBeenCalledWith('TabNavigator', { @@ -163,97 +132,4 @@ describe('<VenueContent />', () => { expect(BatchProfile.trackEvent).not.toHaveBeenCalled() }) }) - - it('should display default background image when no banner for venue', async () => { - renderVenueContent() - - expect(await screen.findByTestId('defaultVenueBackground')).toBeOnTheScreen() - }) - - describe('movie screening access button', () => { - beforeAll(() => { - useRemoteConfigContextSpy.mockReturnValue({ - ...DEFAULT_REMOTE_CONFIG, - showAccessScreeningButton: true, - }) - }) - - const venueMoviesOffersMock = { hits: VenueMoviesOffersResponseSnap, nbHits: 4 } - mockFFValue = true - - // TODO(PC-33563): fix flaky tests - // eslint-disable-next-line jest/no-disabled-tests - it.skip('should show button', async () => { - renderVenueContent({ - venue: { ...venueDataTest, venueTypeCode: VenueTypeCodeKey.MOVIE }, - venueOffers: venueMoviesOffersMock, - }) - await act(async () => { - mockInView(false) - }) - - await screen.findByText('Les films à l’affiche') - - expect(await screen.findByTestId(CineContentCTAID)).toBeOnTheScreen() - }) - - it('should not show button', async () => { - renderVenueContent({ - venue: { ...venueDataTest, venueTypeCode: VenueTypeCodeKey.MOVIE }, - venueOffers: venueMoviesOffersMock, - }) - await act(async () => { - mockInView(true) - }) - - await screen.findByText('Les films à l’affiche') - - expect(screen.queryByTestId(CineContentCTAID)).not.toBeOnTheScreen() - }) - - // TODO(PC-33563): fix flaky tests - // eslint-disable-next-line jest/no-disabled-tests - it.skip('should scroll to anchor', async () => { - renderVenueContent({ - venue: { ...venueDataTest, venueTypeCode: VenueTypeCodeKey.MOVIE }, - venueOffers: venueMoviesOffersMock, - }) - - await act(async () => { - mockInView(false) - }) - - const button = await screen.findByTestId(CineContentCTAID) - - await userEvent.press(button) - - expect(useScrollToAnchorSpy).toHaveBeenCalledWith() - }) - - // TODO(PC-33563): fix flaky tests - // eslint-disable-next-line jest/no-disabled-tests - describe.skip('remote config flag is deactivated', () => { - beforeAll(() => { - useRemoteConfigContextSpy.mockReturnValue({ - ...DEFAULT_REMOTE_CONFIG, - showAccessScreeningButton: false, - }) - }) - - it('should not display the button if the remote config flag is deactivated', async () => { - renderVenueContent({ - venue: { ...venueDataTest, venueTypeCode: VenueTypeCodeKey.MOVIE }, - venueOffers: venueMoviesOffersMock, - }) - - await act(async () => { - mockInView(false) - }) - - await screen.findByText('Les films à l’affiche') - - expect(screen.queryByTestId(CineContentCTAID)).not.toBeOnTheScreen() - }) - }) - }) }) diff --git a/src/features/venue/components/VenueContent/VenueContent.tsx b/src/features/venue/components/VenueContent/VenueContent.tsx index d513ea2957f..7c89d8de2fb 100644 --- a/src/features/venue/components/VenueContent/VenueContent.tsx +++ b/src/features/venue/components/VenueContent/VenueContent.tsx @@ -1,44 +1,37 @@ import React, { useCallback, useEffect, useRef } from 'react' -import { NativeScrollEvent, NativeSyntheticEvent, Platform, ScrollView } from 'react-native' +import { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native' import { IOScrollView as IntersectionObserverScrollView } from 'react-native-intersection-observer' -import Animated, { Layout } from 'react-native-reanimated' import styled, { useTheme } from 'styled-components/native' -import { VenueResponse, VenueTypeCodeKey } from 'api/gen' -import { GtlPlaylistData } from 'features/gtlPlaylist/types' +import { VenueResponse } from 'api/gen' import { CineContentCTA } from 'features/offer/components/OfferCine/CineContentCTA' import { useOfferCTA } from 'features/offer/components/OfferContent/OfferCTAProvider' -import { VenueBody } from 'features/venue/components/VenueBody/VenueBody' +import { VenueHeaderWrapper } from 'features/venue/components/VenueContent/VenueHeaderWrapper' import { VenueCTA } from 'features/venue/components/VenueCTA/VenueCTA' import { VenueHeader } from 'features/venue/components/VenueHeader/VenueHeader' -import { VenueTopComponent } from 'features/venue/components/VenueTopComponent/VenueTopComponent' import { VenueWebMetaHeader } from 'features/venue/components/VenueWebMetaHeader' -import { VenueOffers, VenueOffersArtists } from 'features/venue/types' -import { isCloseToBottom } from 'libs/analytics' +import { useNavigateToSearchWithVenueOffers } from 'features/venue/helpers/useNavigateToSearchWithVenueOffers' +import { analytics, isCloseToBottom } from 'libs/analytics' import { useRemoteConfigContext } from 'libs/firebase/remoteConfig/RemoteConfigProvider' import { useFunctionOnce } from 'libs/hooks' import { BatchEvent, BatchProfile } from 'libs/react-native-batch' import { useOpacityTransition } from 'ui/animations/helpers/useOpacityTransition' import { AnchorProvider } from 'ui/components/anchor/AnchorContext' import { useGetHeaderHeight } from 'ui/components/headers/PageHeaderWithoutPlaceholder' -import { Spacer } from 'ui/theme' type Props = { venue: VenueResponse - gtlPlaylists?: GtlPlaylistData[] - venueArtists?: VenueOffersArtists - venueOffers?: VenueOffers + isCTADisplayed?: boolean + children: React.ReactNode } const trackEventHasSeenVenueForSurvey = () => BatchProfile.trackEvent(BatchEvent.hasSeenVenueForSurvey) -const isWeb = Platform.OS === 'web' export const VenueContent: React.FunctionComponent<Props> = ({ venue, - gtlPlaylists, - venueArtists, - venueOffers, + isCTADisplayed, + children, }) => { const triggerBatch = useFunctionOnce(trackEventHasSeenVenueForSurvey) const scrollViewRef = useRef<ScrollView>(null) @@ -77,44 +70,45 @@ export const VenueContent: React.FunctionComponent<Props> = ({ const headerHeight = useGetHeaderHeight() const isLargeScreen = isDesktopViewport || isTabletViewport const { isButtonVisible, wording } = useOfferCTA() - - const shouldDisplayCTA = - venue.venueTypeCode !== VenueTypeCodeKey.MOVIE && - ((venueOffers && venueOffers.hits.length > 0) || (gtlPlaylists && gtlPlaylists.length > 0)) + const searchNavConfig = useNavigateToSearchWithVenueOffers(venue) const renderVenueCTA = useCallback(() => { if (showAccessScreeningButton && wording.length) { return isButtonVisible ? <CineContentCTA /> : null } - return shouldDisplayCTA ? <VenueCTA venue={venue} /> : null - }, [isButtonVisible, shouldDisplayCTA, showAccessScreeningButton, venue, wording.length]) + return isCTADisplayed ? ( + <VenueCTA + searchNavConfig={searchNavConfig} + onBeforeNavigate={() => analytics.logVenueSeeAllOffersClicked(venue.id)} + /> + ) : null + }, [ + isButtonVisible, + isCTADisplayed, + showAccessScreeningButton, + venue.id, + wording.length, + searchNavConfig, + ]) return ( <AnchorProvider scrollViewRef={scrollViewRef} handleCheckScrollY={handleCheckScrollY}> <Container> - <VenueWebMetaHeader venue={venue} /> - {/* On web VenueHeader is called before Body for accessibility navigate order */} - {isWeb ? <VenueHeader headerTransition={headerTransition} venue={venue} /> : null} - <ContentContainer - onScroll={handleScroll} - scrollEventThrottle={16} - bounces={false} - ref={scrollViewRef}> - {isLargeScreen ? <Placeholder height={headerHeight} /> : null} - <VenueTopComponent venue={venue} /> - <Spacer.Column numberOfSpaces={isDesktopViewport ? 10 : 6} /> - <Animated.View layout={Layout.duration(200)}> - <VenueBody - venue={venue} - playlists={gtlPlaylists} - venueArtists={venueArtists} - venueOffers={venueOffers} - shouldDisplayCTA={shouldDisplayCTA} - /> - </Animated.View> - </ContentContainer> - {/* On native VenueHeader is called after Body to implement the BlurView for iOS */} - {isWeb ? null : <VenueHeader headerTransition={headerTransition} venue={venue} />} + <VenueWebMetaHeader + title={venue.publicName || venue.name} + description={venue.description} + /> + <VenueHeaderWrapper + header={<VenueHeader headerTransition={headerTransition} venue={venue} />}> + <ContentContainer + onScroll={handleScroll} + scrollEventThrottle={16} + bounces={false} + ref={scrollViewRef}> + {isLargeScreen ? <Placeholder height={headerHeight} /> : null} + {children} + </ContentContainer> + </VenueHeaderWrapper> {renderVenueCTA()} </Container> </AnchorProvider> @@ -131,7 +125,6 @@ const ContentContainer = styled(IntersectionObserverScrollView).attrs({ })({ overflow: 'visible', }) - const Placeholder = styled.View<{ height: number }>(({ height }) => ({ height, })) diff --git a/src/features/venue/components/VenueContent/VenueHeaderWrapper.tsx b/src/features/venue/components/VenueContent/VenueHeaderWrapper.tsx new file mode 100644 index 00000000000..9037f531612 --- /dev/null +++ b/src/features/venue/components/VenueContent/VenueHeaderWrapper.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +type Props = { + children: React.ReactNode + header?: React.ReactNode +} + +/* On native VenueHeader is called after Body to implement the BlurView for iOS */ +export const VenueHeaderWrapper = ({ children, header }: Props) => { + return ( + <React.Fragment> + {children} + {header} + </React.Fragment> + ) +} diff --git a/src/features/venue/components/VenueContent/VenueHeaderWrapper.web.tsx b/src/features/venue/components/VenueContent/VenueHeaderWrapper.web.tsx new file mode 100644 index 00000000000..680513831d0 --- /dev/null +++ b/src/features/venue/components/VenueContent/VenueHeaderWrapper.web.tsx @@ -0,0 +1,16 @@ +import React from 'react' + +type Props = { + children: React.ReactNode + header?: React.ReactNode +} + +/* On web VenueHeader is called before Body for accessibility navigate order */ +export const VenueHeaderWrapper = ({ children, header }: Props) => { + return ( + <React.Fragment> + {header} + {children} + </React.Fragment> + ) +} diff --git a/src/features/venue/components/VenueMessagingApps/VenueMessagingApps.tsx b/src/features/venue/components/VenueMessagingApps/VenueMessagingApps.tsx index d95b985c042..761f3ab2c48 100644 --- a/src/features/venue/components/VenueMessagingApps/VenueMessagingApps.tsx +++ b/src/features/venue/components/VenueMessagingApps/VenueMessagingApps.tsx @@ -1,10 +1,13 @@ import React, { useCallback } from 'react' import { Social } from 'react-native-share' +import styled from 'styled-components/native' import { VenueResponse } from 'api/gen' import { MessagingApps } from 'features/share/components/MessagingApps/MessagingApps' import { getShareVenue } from 'features/share/helpers/getShareVenue' import { analytics } from 'libs/analytics' +import { SectionWithDivider } from 'ui/components/SectionWithDivider' +import { getSpacing } from 'ui/theme' type MessagingAppsProps = { venue: VenueResponse @@ -23,10 +26,16 @@ export const VenueMessagingApps = ({ venue }: MessagingAppsProps) => { if (!shareContent?.url) return null return ( - <MessagingApps - shareContent={shareContent} - share={share} - messagingAppAnalytics={messagingAppAnalytics} - /> + <SectionWithDivider visible margin gap={6}> + <Container> + <MessagingApps + shareContent={shareContent} + share={share} + messagingAppAnalytics={messagingAppAnalytics} + /> + </Container> + </SectionWithDivider> ) } + +const Container = styled.View({ marginBottom: getSpacing(4) }) diff --git a/src/features/venue/components/VenueThematicSection/VenueThematicSection.tsx b/src/features/venue/components/VenueThematicSection/VenueThematicSection.tsx index a3f8c26f292..0e6d12e599d 100644 --- a/src/features/venue/components/VenueThematicSection/VenueThematicSection.tsx +++ b/src/features/venue/components/VenueThematicSection/VenueThematicSection.tsx @@ -85,7 +85,7 @@ export const VenueThematicSection: FunctionComponent<Props> = ({ venue }: Props) return null return ( - <SectionWithDivider visible gap={0}> + <SectionWithDivider visible gap={6}> <ThematicSubscriptionBlock thematic={thematic} isSubscribeButtonActive={isSubscribeButtonActive} diff --git a/src/features/venue/components/VenueTopComponent/VenueTopComponentBase.tsx b/src/features/venue/components/VenueTopComponent/VenueTopComponentBase.tsx index 3eb30c07df9..2d6b43b11c6 100644 --- a/src/features/venue/components/VenueTopComponent/VenueTopComponentBase.tsx +++ b/src/features/venue/components/VenueTopComponent/VenueTopComponentBase.tsx @@ -17,7 +17,7 @@ import { CopyToClipboardButton } from 'shared/CopyToClipboardButton/CopyToClipbo import { Separator } from 'ui/components/Separator' import { ViewGap } from 'ui/components/ViewGap/ViewGap' import { InformationTags } from 'ui/InformationTags/InformationTags' -import { getSpacing, Spacer, TypoDS } from 'ui/theme' +import { getSpacing, TypoDS } from 'ui/theme' import { getHeadingAttrs } from 'ui/theme/typographyAttrs/getHeadingAttrs' type Props = { @@ -59,38 +59,39 @@ export const VenueTopComponentBase: React.FunctionComponent<Props> = ({ handleImagePress={onPressBannerImage} /> <MarginContainer> - <InformationTags tags={venueTags} /> - <Spacer.Column numberOfSpaces={4} /> - <ViewGap gap={1}> - <VenueTitle accessibilityLabel={`Nom du lieu\u00a0: ${venueName}`} adjustsFontSizeToFit> - {venueName} - </VenueTitle> - {isDynamicOpeningHoursDisplayed ? ( - <OpeningHoursStatus - currentDate={currentDate} - openingHours={venue.openingHours} - timezone={venue.timezone} - /> - ) : null} - <ViewGap gap={3}> - <View> - <TypoDS.BodyAccentXs>Adresse</TypoDS.BodyAccentXs> - <TypoDS.Body>{venueFullAddress}</TypoDS.Body> - </View> - <Separator.Horizontal /> - <CopyToClipboardButton - wording="Copier l’adresse" - textToCopy={`${venueName}, ${venueFullAddress}`} - onCopy={() => analytics.logCopyAddress({ venueId: venue.id, from: 'venue' })} - snackBarMessage="L’adresse a bien été copiée." - /> - <SeeItineraryButton - externalNav={{ - url: getGoogleMapsItineraryUrl(venueFullAddress), - address: venueFullAddress, - }} - onPress={() => analytics.logConsultItinerary({ venueId: venue.id, from: 'venue' })} - /> + <ViewGap gap={4}> + <InformationTags tags={venueTags} /> + <ViewGap gap={1}> + <VenueTitle accessibilityLabel={`Nom du lieu\u00a0: ${venueName}`} adjustsFontSizeToFit> + {venueName} + </VenueTitle> + {isDynamicOpeningHoursDisplayed ? ( + <OpeningHoursStatus + currentDate={currentDate} + openingHours={venue.openingHours} + timezone={venue.timezone} + /> + ) : null} + <ViewGap gap={3}> + <View> + <TypoDS.BodyAccentXs>Adresse</TypoDS.BodyAccentXs> + <TypoDS.Body>{venueFullAddress}</TypoDS.Body> + </View> + <Separator.Horizontal /> + <CopyToClipboardButton + wording="Copier l’adresse" + textToCopy={`${venueName}, ${venueFullAddress}`} + onCopy={() => analytics.logCopyAddress({ venueId: venue.id, from: 'venue' })} + snackBarMessage="L’adresse a bien été copiée." + /> + <SeeItineraryButton + externalNav={{ + url: getGoogleMapsItineraryUrl(venueFullAddress), + address: venueFullAddress, + }} + onPress={() => analytics.logConsultItinerary({ venueId: venue.id, from: 'venue' })} + /> + </ViewGap> </ViewGap> </ViewGap> </MarginContainer> diff --git a/src/features/venue/components/VenueWebMetaHeader.tsx b/src/features/venue/components/VenueWebMetaHeader.tsx index 5d9153af2a2..0ea55673324 100644 --- a/src/features/venue/components/VenueWebMetaHeader.tsx +++ b/src/features/venue/components/VenueWebMetaHeader.tsx @@ -1,18 +1,18 @@ import React from 'react' -import { VenueResponse } from 'api/gen' import { Helmet } from 'libs/react-helmet/Helmet' import { description } from '../../../../package.json' interface Props { - venue: VenueResponse + title: string + description?: string | null } -export const VenueWebMetaHeader = ({ venue }: Props) => ( +export const VenueWebMetaHeader = (props: Props) => ( <Helmet> - <title>{(venue.publicName || venue.name) + ' | pass Culture'}</title> - <meta name="title" content={venue.publicName || venue.name} /> - <meta name="description" content={venue.description || description} /> + <title>{props.title + ' | pass Culture'}</title> + <meta name="title" content={props.title} /> + <meta name="description" content={props.description || description} /> </Helmet> ) diff --git a/src/features/venue/pages/Venue/Venue.native.test.tsx b/src/features/venue/pages/Venue/Venue.native.test.tsx index c71e94bfa1e..a9fe05d472b 100644 --- a/src/features/venue/pages/Venue/Venue.native.test.tsx +++ b/src/features/venue/pages/Venue/Venue.native.test.tsx @@ -4,17 +4,28 @@ import mockdate from 'mockdate' import React from 'react' import { useRoute } from '__mocks__/@react-navigation/native' -import { SubcategoryIdEnum, VenueResponse } from 'api/gen' +import { OffersStocksResponseV2, SubcategoryIdEnum, VenueResponse, VenueTypeCodeKey } from 'api/gen' import { useGTLPlaylists } from 'features/gtlPlaylist/hooks/useGTLPlaylists' import { Referrals } from 'features/navigation/RootNavigator/types' +import { CineContentCTAID } from 'features/offer/components/OfferCine/CineContentCTA' +import { useVenueOffers } from 'features/venue/api/useVenueOffers' import { venueDataTest } from 'features/venue/fixtures/venueDataTest' +import { + VenueMoviesOffersResponseSnap, + VenueOffersResponseSnap, +} from 'features/venue/fixtures/venueOffersResponseSnap' import { Venue } from 'features/venue/pages/Venue/Venue' import { analytics } from 'libs/analytics' import { setFeatureFlags } from 'libs/firebase/firestore/featureFlags/__tests__/setFeatureFlags' +import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types' +import { DEFAULT_REMOTE_CONFIG } from 'libs/firebase/remoteConfig/remoteConfig.constants' +import * as useRemoteConfigContextModule from 'libs/firebase/remoteConfig/RemoteConfigProvider' +import { Network } from 'libs/share/types' import { Offer } from 'shared/offer/types' import { mockServer } from 'tests/mswServer' import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC' -import { fireEvent, render, screen, waitFor } from 'tests/utils' +import { render, screen, userEvent, waitFor } from 'tests/utils' +import * as AnchorContextModule from 'ui/components/anchor/AnchorContext' const getItemSpy = jest.spyOn(AsyncStorage, 'getItem') @@ -28,6 +39,8 @@ jest.unmock('react-native/Libraries/Animated/createAnimatedComponent') jest.mock('libs/itinerary/useItinerary') jest.mock('features/venue/api/useVenueOffers') +const mockUseVenueOffers = useVenueOffers as jest.Mock + jest.mock('features/search/context/SearchWrapper') jest.mock('libs/location') @@ -83,7 +96,19 @@ jest.mock('@shopify/flash-list', () => { } }) +const useRemoteConfigContextSpy = jest.spyOn(useRemoteConfigContextModule, 'useRemoteConfigContext') +const useScrollToAnchorSpy = jest.spyOn(AnchorContextModule, 'useScrollToAnchor') + +const user = userEvent.setup() + describe('<Venue />', () => { + beforeAll(() => { + mockUseVenueOffers.mockReturnValue({ + isLoading: false, + data: { hits: VenueOffersResponseSnap, nbHits: 3 }, + }) + }) + beforeEach(() => { setFeatureFlags() getItemSpy.mockReset() @@ -93,7 +118,7 @@ describe('<Venue />', () => { it('should match snapshot', async () => { renderVenue(venueId) - await screen.findByText('Infos pratiques') + await screen.findByText(`Envoyer sur ${Network.instagram}`) expect(screen).toMatchSnapshot() }) @@ -101,11 +126,52 @@ describe('<Venue />', () => { it('should match snapshot with practical information', async () => { renderVenue(venueId) - fireEvent.press(await screen.findByText('Infos pratiques')) + await user.press(await screen.findByText('Infos pratiques')) expect(screen).toMatchSnapshot() }) + it('should display default background image when no banner for venue', async () => { + renderVenue(venueId) + + expect(await screen.findByTestId('defaultVenueBackground')).toBeOnTheScreen() + }) + + describe('CTA', () => { + it('should not display CTA if venueTypeCode is Movie', async () => { + const mockedVenue = { ...venueDataTest, venueTypeCode: VenueTypeCodeKey.MOVIE } + mockServer.getApi<VenueResponse>(`/v1/venue/${venueId}`, mockedVenue) + + renderVenue(venueId) + + await screen.findAllByText('Le Petit Rintintin 1') + + expect(screen.queryByText('Rechercher une offre')).not.toBeOnTheScreen() + }) + + it('should display CTA if venueTypeCode is not Movie and venueOffers hits have length', async () => { + mockUseGTLPlaylists.mockReturnValueOnce({ + isLoading: false, + gtlPlaylists: [], + }) + + renderVenue(venueId) + + expect(await screen.findByText('Rechercher une offre')).toBeOnTheScreen() + }) + + it('should display CTA if venueTypeCode is not Movie and gtlPlaylists have length', async () => { + mockUseVenueOffers.mockReturnValueOnce({ + isLoading: false, + data: { hits: {}, nbHits: 0 }, + }) + + renderVenue(venueId) + + expect(await screen.findByText('Rechercher une offre')).toBeOnTheScreen() + }) + }) + describe('analytics', () => { it.each([['deeplink'], ['venueMap']])( 'should log consult venue when URL from param equal to %s', @@ -137,6 +203,101 @@ describe('<Venue />', () => { expect(analytics.logConsultVenue).not.toHaveBeenCalled() }) }) + + describe('movie screening access button', () => { + const mockInView = jest.fn() + const InViewMock = ({ + onChange, + children, + }: { + onChange: VoidFunction + children: React.ReactNode + }) => { + mockInView.mockImplementation(onChange) + return <React.Fragment>{children}</React.Fragment> + } + jest.mock('react-native-intersection-observer', () => { + return { + ...jest.requireActual('react-native-intersection-observer'), + InView: InViewMock, + mockInView, + } + }) + + beforeAll(() => { + useRemoteConfigContextSpy.mockReturnValue({ + ...DEFAULT_REMOTE_CONFIG, + showAccessScreeningButton: true, + }) + + mockUseVenueOffers.mockReturnValue({ + isLoading: false, + data: { hits: VenueMoviesOffersResponseSnap, nbHits: 4 }, + }) + }) + + beforeEach(() => { + setFeatureFlags([RemoteStoreFeatureFlags.WIP_ENABLE_NEW_XP_CINE_FROM_VENUE]) + + // Mock API Calls + const mockedVenue = { ...venueDataTest, venueTypeCode: VenueTypeCodeKey.MOVIE } + mockServer.getApi<VenueResponse>(`/v1/venue/${venueId}`, mockedVenue) + mockServer.postApi<OffersStocksResponseV2>(`/v2/offers/stocks`, {}) + }) + + it('should show button when not in View', async () => { + renderVenue(venueId) + + mockInView(false) + + await screen.findByText('Les films à l’affiche') + + expect(await screen.findByTestId(CineContentCTAID)).toBeOnTheScreen() + }) + + // TODO(PC-33563): fix flaky tests + // eslint-disable-next-line jest/no-disabled-tests + it.skip('should not show button when in View', async () => { + renderVenue(venueId) + + mockInView(true) + + await screen.findByText('Les films à l’affiche') + + expect(screen.queryByTestId(CineContentCTAID)).not.toBeOnTheScreen() + }) + + it('should scroll to anchor', async () => { + renderVenue(venueId) + + mockInView(false) + + const button = await screen.findByTestId(CineContentCTAID) + + await userEvent.press(button) + + expect(useScrollToAnchorSpy).toHaveBeenCalledWith() + }) + + describe('remote config flag is deactivated', () => { + beforeAll(() => { + useRemoteConfigContextSpy.mockReturnValue({ + ...DEFAULT_REMOTE_CONFIG, + showAccessScreeningButton: false, + }) + }) + + it('should not display the button if the remote config flag is deactivated', async () => { + renderVenue(venueId) + + mockInView(false) + + await screen.findByText('Les films à l’affiche') + + expect(screen.queryByTestId(CineContentCTAID)).not.toBeOnTheScreen() + }) + }) + }) }) async function renderVenue(id: number, from?: Referrals) { diff --git a/src/features/venue/pages/Venue/Venue.tsx b/src/features/venue/pages/Venue/Venue.tsx index d800e508f88..d1256544720 100644 --- a/src/features/venue/pages/Venue/Venue.tsx +++ b/src/features/venue/pages/Venue/Venue.tsx @@ -1,14 +1,25 @@ import { useRoute } from '@react-navigation/native' import React, { FunctionComponent, useEffect } from 'react' +import Animated, { Layout } from 'react-native-reanimated' +import styled, { useTheme } from 'styled-components/native' +import { VenueTypeCodeKey } from 'api/gen' import { useGTLPlaylists } from 'features/gtlPlaylist/hooks/useGTLPlaylists' import { UseRouteType } from 'features/navigation/RootNavigator/types' import { OfferCTAProvider } from 'features/offer/components/OfferContent/OfferCTAProvider' import { useVenue } from 'features/venue/api/useVenue' import { useVenueOffers } from 'features/venue/api/useVenueOffers' import { useVenueOffersArtists } from 'features/venue/api/useVenueOffersArtists/useVenueOffersArtists' +import { VenueBody } from 'features/venue/components/VenueBody/VenueBody' import { VenueContent } from 'features/venue/components/VenueContent/VenueContent' +import { VENUE_CTA_HEIGHT_IN_SPACES } from 'features/venue/components/VenueCTA/VenueCTA' +import { VenueMessagingApps } from 'features/venue/components/VenueMessagingApps/VenueMessagingApps' +import { VenueThematicSection } from 'features/venue/components/VenueThematicSection/VenueThematicSection' +import { VenueTopComponent } from 'features/venue/components/VenueTopComponent/VenueTopComponent' import { analytics } from 'libs/analytics' +import { SectionWithDivider } from 'ui/components/SectionWithDivider' +import { ViewGap } from 'ui/components/ViewGap/ViewGap' +import { getSpacing } from 'ui/theme' export const Venue: FunctionComponent = () => { const { params } = useRoute<UseRouteType<'Venue'>>() @@ -16,6 +27,7 @@ export const Venue: FunctionComponent = () => { const { gtlPlaylists } = useGTLPlaylists({ venue, queryKey: 'VENUE_GTL_PLAYLISTS' }) const { data: venueOffers } = useVenueOffers(venue) const { data: venueArtists } = useVenueOffersArtists(venue) + const { isDesktopViewport } = useTheme() useEffect(() => { if ((params.from === 'deeplink' || params.from === 'venueMap') && venue?.id) { @@ -23,14 +35,41 @@ export const Venue: FunctionComponent = () => { } }, [params.from, venue?.id]) + const isCTADisplayed = + venue?.venueTypeCode !== VenueTypeCodeKey.MOVIE && + ((venueOffers && venueOffers.hits.length > 0) || (gtlPlaylists && gtlPlaylists.length > 0)) + return venue ? ( <OfferCTAProvider> - <VenueContent - venue={venue} - gtlPlaylists={gtlPlaylists} - venueArtists={venueArtists} - venueOffers={venueOffers} - /> + <VenueContent venue={venue} isCTADisplayed={isCTADisplayed}> + <VenueTopComponent venue={venue} /> + <ViewGap gap={isDesktopViewport ? 10 : 6}> + <Animated.View layout={Layout.duration(200)}> + <VenueBody + venue={venue} + playlists={gtlPlaylists} + venueOffers={venueOffers} + venueArtists={venueArtists} + /> + + <VenueThematicSection venue={venue} /> + + <VenueMessagingApps venue={venue} /> + + <EmptyBottomSection isVisible={!!isCTADisplayed} /> + </Animated.View> + </ViewGap> + </VenueContent> </OfferCTAProvider> ) : null } + +const EmptyBottomSection = ({ isVisible }: { isVisible: boolean }) => { + return ( + <SectionWithDivider visible={isVisible} gap={VENUE_CTA_HEIGHT_IN_SPACES}> + <EmptySectionContainer /> + </SectionWithDivider> + ) +} + +const EmptySectionContainer = styled.View({ marginBottom: getSpacing(6) }) diff --git a/src/features/venue/types.ts b/src/features/venue/types.ts index 3ef44d6ddec..3b659c03930 100644 --- a/src/features/venue/types.ts +++ b/src/features/venue/types.ts @@ -1,5 +1,6 @@ import { ReactNode } from 'react' +import { RootNavigateParams } from 'features/navigation/RootNavigator/types' import { Geoloc } from 'libs/algolia/types' import { VenueTypeCode } from 'libs/parsers/venueType' import { Offer } from 'shared/offer/types' @@ -68,3 +69,11 @@ export type Artist = { } export type VenueOffersArtists = { artists: Artist[] } + +export type SearchNavConfig = { + screen: RootNavigateParams[0] + params?: RootNavigateParams[1] + withPush?: boolean + withReset?: boolean + fromRef?: boolean +}