ordering-ui-react-native 0.15.65 → 0.15.66-release

package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx

@@ -0,0 +1,137 @@
+import styled, { css } from 'styled-components/native'
+
+export const WelcomeTitle = styled.View`
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 15px;
+`
+
+export const BusinessList = styled.View`
+  flex-wrap: wrap;
+`
+
+export const Search = styled.View`
+  justify-content: flex-end;
+  align-items: center;
+  margin-vertical: 10px;
+  margin-horizontal: 20px;
+  ${(props: any) => props.isChewLayout && css`
+    margin-horizontal: 30px;
+  `}
+`
+
+export const AddressInput = styled.TouchableOpacity`
+  flex-direction: row;
+  background-color: ${(props: any) => props.theme.colors.white};
+  border-radius: 22px;
+  padding-horizontal: 20px;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  max-height: 44px;
+  ${(props: any) => props.isChewLayout && css`
+    border-radius: 8px;
+  `}
+`
+
+export const OrderControlContainer = styled.View`
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 10;
+  padding-bottom: 20px;
+  flex: 1;
+`
+
+export const WrapMomentOption = styled.TouchableOpacity`
+  background-color: ${(props: any) => props.theme.colors.white};
+  border-radius: 7.6px;
+  font-size: 12px;
+  max-width: 240px;
+  height: 26px;
+  align-items: center;
+  justify-content: center;
+  padding-horizontal: 8px;
+  flex-direction: row;
+  margin-end: 12px;
+`
+
+export const HeaderWrapper = styled.ImageBackground`
+	width: 100%;
+	height: 270px;
+	padding: 20px 40px;
+	background-color: transparent;
+`;
+
+export const ListWrapper = styled.View`
+	background-color: ${(props: any) => props.theme.colors.backgroundLight};
+	padding-horizontal: 40px;
+`;
+
+export const FeaturedWrapper = styled.View`
+	background-color: ${(props: any) => props.theme.colors.backgroundLight};
+	height: 220px;
+	paddingVertical: 30px;
+`;
+
+export const OrderProgressWrapper = styled.View`
+  margin-top: 37px;
+  margin-bottom: 20px;
+	padding-horizontal: 40px;
+`
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  margin-bottom: 10px;
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+`
+
+export const AddressInputContainer = styled.View`
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  ${(props: any) => props.isChewLayout && css`
+    flex-direction: row-reverse;
+  `}
+`
+
+export const PreorderInput = styled(AddressInput)`
+  justify-content: center;
+`
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: -1px;
+  width: 100%;
+`;
+
+export const OTab = styled.TouchableOpacity`
+  padding-bottom: 10px;
+  border-bottom-width: 1px;
+  margin-end: 14px;
+  padding-horizontal: 5px;
+`;
+
+export const OrderTypesContainer = styled.View`
+  flex-direction: row;
+  font-size: 14px;
+  width: 180px;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+  margin-top: 10px;
+  align-self: center;
+`
+
+export const BusinessLogosContainer = styled.ScrollView`
+  padding-bottom: 10px;
+`

package/themes/original/src/components/BusinessesListing/index.tsx

@@ -1,458 +1,99 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
-import Geolocation from '@react-native-community/geolocation'
-import {
-	View,
-	StyleSheet,
-	ScrollView,
-	Platform,
-	TouchableOpacity,
-	RefreshControl,
-	AppState
-} from 'react-native';
-import {
-	BusinessList as BusinessesListingController,
-	useLanguage,
-	useSession,
-	useOrder,
-	useConfig,
-	useUtils,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import Ionicons from 'react-native-vector-icons/Ionicons'
-
-import {
-	Search,
-	OrderControlContainer,
-	AddressInput,
-	WrapMomentOption,
-	HeaderWrapper,
-	ListWrapper,
-	FeaturedWrapper,
-	OrderProgressWrapper,
-	FarAwayMessage
-} from './styles';
-
-import { SearchBar } from '../SearchBar';
-import { OIcon, OText } from '../shared';
-import { BusinessesListingParams } from '../../types';
-import { NotFoundSource } from '../NotFoundSource';
-import { BusinessTypeFilter } from '../BusinessTypeFilter';
-import { BusinessController } from '../BusinessController';
-import { OrderTypeSelector } from '../OrderTypeSelector';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { BusinessFeaturedController } from '../BusinessFeaturedController';
-import { HighestRatedBusinesses } from '../HighestRatedBusinesses';
-import { getTypesText, convertToRadian } from '../../utils';
-import { OrderProgress } from '../OrderProgress';
-import { useFocusEffect, useIsFocused } from '@react-navigation/native';
-
-const PIXELS_TO_SCROLL = 1000;
-
-const BusinessesListingUI = (props: BusinessesListingParams) => {
-	const {
-		navigation,
-		businessesList,
-		searchValue,
-		getBusinesses,
-		handleChangeBusinessType,
-		handleBusinessClick,
-		paginationProps,
-		handleChangeSearch,
-		businessId
-	} = props;
-	const theme = useTheme();
-	const isFocused = useIsFocused();
-	const appState = useRef(AppState.currentState)
-	const [appStateVisible, setAppStateVisible] = useState(appState.current);
-	const [refreshing] = useState(false);
-	const styles = StyleSheet.create({
-		container: {
-			marginBottom: 0,
-		},
-		welcome: {
-			flex: 1,
-			flexDirection: 'row',
-		},
-		inputStyle: {
-			backgroundColor: theme.colors.inputDisabled,
-			flex: 1,
-		},
-		wrapperOrderOptions: {
-			width: '100%',
-			flexDirection: 'row',
-			justifyContent: 'space-between',
-			marginBottom: 10,
-			zIndex: 100,
-		},
-		borderStyle: {
-			borderColor: theme.colors.backgroundGray,
-			borderWidth: 1,
-			borderRadius: 10,
-		},
-		searchInput: {
-			fontSize: 12,
-		},
-		iconStyle: {
-			fontSize: 18,
-			color: theme.colors.warning5,
-			marginRight: 8
-		},
-		farAwayMsg: {
-			paddingVertical: 6,
-			paddingHorizontal: 20
-		}
-	});
-
-
-	const [, t] = useLanguage();
-	const [{ user, auth }] = useSession();
-	const [orderState] = useOrder();
-	const [{ configs }] = useConfig();
-	const [{ parseDate }] = useUtils();
-
-	const { top } = useSafeAreaInsets();
-
-	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
-	const [isFarAway, setIsFarAway] = useState(false)
-	const [businessTypes, setBusinessTypes] = useState(null)
-
-	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
-		Number(configs?.max_days_preorder?.value) > 0
-	const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
-	const timerId = useRef<any>(false)
-	// const panResponder = useRef(
-	// 	PanResponder.create({
-	// 		onMoveShouldSetPanResponder: (e, gestureState) => {
-	// 			const { dx, dy } = gestureState;
-	// 			resetInactivityTimeout()
-	// 			return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
-	// 		},
-	// 	})
-	// ).current
-
-	const handleMomentClick = () => {
-		if (isPreorderEnabled) {
-			navigation.navigate('MomentOption')
-		}
-	}
-
-	const configTypes =
-		configs?.order_types_allowed?.value
-			.split('|')
-			.map((value: any) => Number(value)) || [];
-
-	const handleScroll = ({ nativeEvent }: any) => {
-		const y = nativeEvent.contentOffset.y;
-		const height = nativeEvent.contentSize.height;
-		const hasMore = !(
-			paginationProps.totalPages === paginationProps.currentPage
-		);
-
-		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
-			getBusinesses();
-		}
-	};
-
-	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
-		const R = 6371 // km
-		const dLat = convertToRadian(lat2 - lat1)
-		const dLon = convertToRadian(lon2 - lon1)
-		const curLat1 = convertToRadian(lat1)
-		const curLat2 = convertToRadian(lat2)
-		const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
-		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-		return R * c
-	}
-
-	const resetInactivityTimeout = () => {
-		clearTimeout(timerId.current)
-		timerId.current = setInterval(() => {
-			getBusinesses(true)
-		}, 120000)
-	}
-
-	useEffect(() => {
-		if (!businessesList?.loading) {
-			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
-			const ary = [];
-			while (fb.length > 0) {
-				ary.push(fb.splice(0, 2));
-			}
-			setFeaturedBusinesses(ary);
-		}
-		resetInactivityTimeout()
-	}, [businessesList.loading])
-
-	const handleOnRefresh = () => {
-		if (!businessesList.loading) {
-			getBusinesses(true);
-		}
-	}
-
-	useEffect(() => {
-		Geolocation.getCurrentPosition((pos) => {
-			const crd = pos.coords
-			const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-			if (distance > 20) setIsFarAway(true)
-			else setIsFarAway(false)
-		}, (err) => {
-			console.log(`ERROR(${err.code}): ${err.message}`)
-		}, {
-			enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
-		})
-	}, [orderState?.options?.address?.location])
-
-	useFocusEffect(
-		useCallback(() => {
-			resetInactivityTimeout()
-			return () => clearTimeout(timerId.current)
-		}, [navigation])
-	)
-
-	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
-			refreshControl={
-				<RefreshControl
-					refreshing={refreshing}
-					onRefresh={() => handleOnRefresh()}
-				/>
-			}
-		>
-			<HeaderWrapper
-				source={theme.images.backgrounds.business_list_header}
-				style={{ paddingTop: top + 20 }}>
-				{!auth && (
-					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
-					</TouchableOpacity>
-				)}
-
-				<Search>
-					<AddressInput
-						onPress={() =>
-							auth
-								? navigation.navigate('AddressList', { isFromBusinesses: true })
-								: navigation.navigate('AddressForm', {
-									address: orderState.options?.address,
-									isFromBusinesses: true,
-								})
-						}>
-						<OIcon
-							src={theme.images.general.pin}
-							color={theme.colors.disabled}
-							width={16}
-							style={{ marginRight: 10 }}
-						/>
-						<OText size={12} numberOfLines={1} style={{ width: '90%' }}>
-							{orderState?.options?.address?.address}
-						</OText>
-					</AddressInput>
-				</Search>
-				{isFarAway && (
-					<FarAwayMessage style={styles.farAwayMsg}>
-						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
-					</FarAwayMessage>
-				)}
-				<OrderControlContainer>
-					<View style={styles.wrapperOrderOptions}>
-						<WrapMomentOption onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}>
-							<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textSecondary}>{t(getTypesText(orderState?.options?.type || 1), 'Delivery')}</OText>
-							<OIcon
-								src={theme.images.general.arrow_down}
-								width={10}
-								style={{ marginStart: 8 }}
-							/>
-						</WrapMomentOption>
-						{isPreOrderSetting && (
-							<WrapMomentOption
-								onPress={() => handleMomentClick()}>
-								<OText
-									size={12}
-									numberOfLines={1}
-									ellipsizeMode="tail"
-									color={theme.colors.textSecondary}>
-									{orderState.options?.momentß
-										? parseDate(orderState.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
-										: t('ASAP_ABBREVIATION', 'ASAP')}
-								</OText>
-								{isPreorderEnabled && (
-									<OIcon
-										src={theme.images.general.arrow_down}
-										width={10}
-										style={{ marginStart: 8 }}
-									/>
-								)}
-							</WrapMomentOption>
-						)}
-
-						{!businessId && (
-							<SearchBar
-								onSearch={handleChangeSearch}
-								searchValue={searchValue}
-								lazyLoad
-								isCancelXButtonShow={!!searchValue}
-								borderStyle={styles.borderStyle}
-								onCancel={() => handleChangeSearch('')}
-								placeholder={t('SEARCH', 'Search')}
-								height={26}
-								isDisabled={configs?.advanced_business_search_enabled?.value === '1' || !businessTypes}
-								inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-								onPress={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes }) }}
-							/>
-						)}
-
-					</View>
-				</OrderControlContainer>
-			</HeaderWrapper>
-
-			<OrderProgressWrapper>
-				<OrderProgress
-					{...props}
-					isFocused={isFocused}
-				/>
-			</OrderProgressWrapper>
-
-			{
-				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
-					<FeaturedWrapper>
-						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
-						<ScrollView
-							showsHorizontalScrollIndicator={false}
-							nestedScrollEnabled
-							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
-							{featuredBusiness.map((bAry: any, idx) => (
-								<View key={'f-listing_' + idx}>
-									<BusinessFeaturedController
-										key={bAry[0].id}
-										business={bAry[0]}
-										isBusinessOpen={bAry[0]?.open}
-										handleCustomClick={handleBusinessClick}
-										orderType={orderState?.options?.type}
-									/>
-									{bAry.length > 1 && (
-										<BusinessFeaturedController
-											key={bAry[1].id}
-											business={bAry[1]}
-											isBusinessOpen={bAry[1]?.open}
-											handleCustomClick={handleBusinessClick}
-											orderType={orderState?.options?.type}
-										/>
-									)}
-								</View>
-							))}
-						</ScrollView>
-					</FeaturedWrapper>
-				)
-			}
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			{
-				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
-				)
-			}
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<ListWrapper>
-				{!businessId && (
-					<BusinessTypeFilter
-						images={props.images}
-						businessTypes={props.businessTypes}
-						defaultBusinessType={props.defaultBusinessType}
-						handleChangeBusinessType={handleChangeBusinessType}
-						setBusinessTypes={setBusinessTypes}
-					/>
-				)}
-				{!businessesList.loading && businessesList.businesses.length === 0 && (
-					<NotFoundSource
-						content={t(
-							'NOT_FOUND_BUSINESSES',
-							'No businesses to delivery / pick up at this address, please change filters or change address.',
-						)}
-					/>
-				)}
-				{businessesList.businesses?.map(
-					(business: any) => (
-						<BusinessController
-							key={business.id}
-							business={business}
-							isBusinessOpen={business.open}
-							handleCustomClick={handleBusinessClick}
-							orderType={orderState?.options?.type}
-							navigation={navigation}
-							businessHeader={business?.header}
-							businessFeatured={business?.featured}
-							businessLogo={business?.logo}
-							businessReviews={business?.reviews}
-							businessDeliveryPrice={business?.delivery_price}
-							businessDeliveryTime={business?.delivery_time}
-							businessPickupTime={business?.pickup_time}
-							businessDistance={business?.distance}
-						/>
-					)
-				)}
-				{businessesList.loading && (
-					<>
-						{[
-							...Array(
-								paginationProps.nextPageItems
-									? paginationProps.nextPageItems
-									: 8,
-							).keys(),
-						].map((item, i) => (
-							<Placeholder
-								Animation={Fade}
-								key={i}
-								style={{ marginBottom: 20 }}>
-								<View style={{ width: '100%' }}>
-									<PlaceholderLine
-										height={200}
-										style={{ marginBottom: 20, borderRadius: 25 }}
-									/>
-									<View style={{ paddingHorizontal: 10 }}>
-										<View
-											style={{
-												flexDirection: 'row',
-												justifyContent: 'space-between',
-											}}>
-											<PlaceholderLine
-												height={25}
-												width={40}
-												style={{ marginBottom: 10 }}
-											/>
-											<PlaceholderLine
-												height={25}
-												width={20}
-												style={{ marginBottom: 10 }}
-											/>
-										</View>
-										<PlaceholderLine
-											height={20}
-											width={30}
-											style={{ marginBottom: 10 }}
-										/>
-										<PlaceholderLine
-											height={20}
-											width={80}
-											style={{ marginBottom: 10 }}
-										/>
-									</View>
-								</View>
-							</Placeholder>
-						))}
-					</>
-				)}
-			</ListWrapper>
-		</ScrollView>
-	);
-};
-
-export const BusinessesListing = (props: BusinessesListingParams) => {
-	const BusinessesListingProps = {
-		...props,
-		isForceSearch: Platform.OS === 'ios',
-		UIComponent: BusinessesListingUI,
-	};
-
-	return <BusinessesListingController {...BusinessesListingProps} />;
-};
+import React, { useState, useEffect } from 'react'
+import { useOrder, useSession, useLanguage, useOrderingTheme } from 'ordering-components/native';
+
+import { useTheme } from 'styled-components/native'
+import { BusinessesListing as OriginalBusinessListing } from './Layout/Original'
+import { BusinessesListing as AppointmentBusinessListing } from './Layout/Appointment'
+import { OBottomPopup } from '../shared';
+import { ReviewTrigger } from '../ReviewTrigger';
+
+export const BusinessesListing = (props: any) => {
+  const { logosLayout } = props
+  const theme = useTheme()
+  const [orderingTheme] = useOrderingTheme()
+  const layout = orderingTheme?.theme?.business_listing_view?.components?.layout?.type || 'original'
+  const [, t] = useLanguage();
+  const [{ auth }] = useSession()
+  const [, { getLastOrderHasNoReview }] = useOrder();
+
+  const [, setIsReviewed] = useState()
+  const defaultOrder = {
+    id: 0,
+    business_id: 0,
+    business_name: '',
+    logo: '',
+    driver: {},
+    products: [],
+    review: {},
+    user_review: {},
+    delivery_datetime: ''
+  }
+  const [lastOrderReview, setLastOrderReview] = useState({
+    isReviewOpen: false,
+    order: defaultOrder,
+    defaultStar: 5,
+  })
+
+  const _getLastOrderHasNoReview = async () => {
+    const lastOrderHasNoReview = await getLastOrderHasNoReview()
+    lastOrderHasNoReview && OrderReviewRequired(lastOrderHasNoReview)
+  }
+
+  const OrderReviewRequired = (order: any) => {
+    setLastOrderReview({
+      isReviewOpen: true,
+      order: {
+        id: order?.id,
+        business_id: order?.business_id,
+        business_name: order?.business?.name,
+        logo: order.business?.logo,
+        driver: order?.driver,
+        products: order?.products,
+        review: order?.review,
+        user_review: order?.user_review,
+        delivery_datetime: order?.delivery_datetime_utc
+      },
+      defaultStar: 5
+    })
+  }
+
+  const handleOpenOrderReview = (star: number) => {
+    setLastOrderReview({
+      ...lastOrderReview, isReviewOpen: false, order: defaultOrder
+    })
+    props?.navigation && props.navigation.navigate(
+      'ReviewOrder',
+      {
+        order: lastOrderReview.order,
+        defaultStar: star || 5,
+        setIsReviewed
+      }
+    )
+  }
+
+  useEffect(() => {
+    auth && _getLastOrderHasNoReview()
+  }, [auth])
+
+  return (
+    <>
+      {((layout === 'original') || logosLayout) && <OriginalBusinessListing {...props} />}
+      {(layout === 'appointment') && !logosLayout && <AppointmentBusinessListing {...props} />}
+
+      {lastOrderReview?.isReviewOpen && (
+        <OBottomPopup
+          open={lastOrderReview?.isReviewOpen}
+          transparent={true}
+          onClose={() => setLastOrderReview({ ...lastOrderReview, isReviewOpen: false, order: defaultOrder })}
+          title={t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')}
+          bottomContainerStyle={{ height: 'auto', borderRadius: 10 }}
+          titleStyle={{ textAlign: 'center' }}
+          closeIcon={theme.images.general.close}
+        >
+          {lastOrderReview?.order && <ReviewTrigger order={lastOrderReview?.order} handleOpenOrderReview={handleOpenOrderReview} />}
+
+        </OBottomPopup>
+      )}
+    </>
+  )
+}