ordering-ui-react-native 0.17.62 → 0.17.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.62",
+  "version": "0.17.64",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -166,14 +166,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   style={bpStyles.catWrap}
                   onLayout={(event: any) => handleOnLayout(event, category.id)}
                 >
-                  <View style={bpStyles.catIcon}>
-                    <OIcon
-                      url={optimizeImage(category.image, 'h_250,c_limit')}
-                      width={41}
-                      height={41}
-                      style={{ borderRadius: 7.6 }}
-                    />
-                  </View>
+                  {!!category.image && (
+                    <View style={bpStyles.catIcon}>
+                      <OIcon
+                        url={optimizeImage(category.image, 'h_250,c_limit')}
+                        width={41}
+                        height={41}
+                        style={{ borderRadius: 7.6 }}
+                      />
+                    </View>
+                  )}
                   <OText size={16} weight="600">
                     {category.name}
                   </OText>

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

@@ -394,7 +394,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<BackgroundGray isIos={Platform.OS === 'ios'} />
 				)}
 				<IOScrollView
-					stickyHeaderIndices={[business?.professionals?.length > 0 ? 3 : 2]}
+					stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
 					style={{
 						...styles.mainContainer,
 						marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?

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

@@ -39,8 +39,7 @@ import {
 	BusinessLogosContainer
 } from './styles';
 
-import { SearchBar } from '../../../SearchBar';
-import { OButton, OIcon, OText, OBottomPopup, OModal } from '../../../shared';
+import { OIcon, OText, OModal } from '../../../shared';
 import { BusinessesListingParams } from '../../../../types';
 import { NotFoundSource } from '../../../NotFoundSource';
 import { BusinessTypeFilter } from '../../../BusinessTypeFilter';
@@ -49,12 +48,13 @@ 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 { getTypesText } from '../../../../utils';
 import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { PageBanner } from '../../../PageBanner'
+import { CitiesControl } from '../../../CitiesControl'
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -62,12 +62,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const {
 		navigation,
 		businessesList,
-		searchValue,
 		getBusinesses,
 		handleChangeBusinessType,
 		handleBusinessClick,
 		paginationProps,
-		handleChangeSearch,
 		businessId,
 		isGuestUser,
 		handleUpdateBusinessList,
@@ -79,8 +77,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
-	const searchBarRef = useRef<any>()
-	const [appStateVisible, setAppStateVisible] = useState(appState.current);
 	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
 	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
@@ -193,6 +189,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	};
 
+	const convertToRadian = (value: number) => {
+		return value * Math.PI / 180
+	}
+
 	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
 		const R = 6371 // km
 		const dLat = convertToRadian(lat2 - lat1)
@@ -494,6 +494,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					<TouchableOpacity
 						style={styles.buttonCityStyle}
 						onPress={() => setIsOpenCities(true)}
+						disabled={orderState?.loading}
 					>
 						<OText size={18} color={theme.colors.backgroundGray} weight='bold' style={{ textAlign: 'center' }}>
 							{citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
@@ -652,36 +653,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				onClose={() => setIsOpenCities(false)}
 				title={t('SELECT_A_CITY', 'Select a city')}
 			>
-				<View style={{ padding: 40, width: '100%' }}>
-					{citiesState?.cities?.map((city: any) => (
-						<TouchableOpacity
-							key={city?.id}
-							style={{
-								padding: 10,
-								flexDirection: 'row'
-							}}
-							onPress={() => handleChangeCity(city?.id)}
-							disabled={orderState?.loading}
-						>
-							{orderState?.options?.city_id === city?.id ? (
-								<OIcon
-									src={theme.images.general.option_checked}
-									width={16}
-									style={{ marginEnd: 24 }}
-								/>
-							) : (
-								<OIcon
-									src={theme.images.general.option_normal}
-									width={16}
-									style={{ marginEnd: 24 }}
-								/>
-							)}
-							<OText color={theme.colors.black}>
-								{city?.name}
-							</OText>
-						</TouchableOpacity>
-					))}
-				</View>
+				<CitiesControl
+					cities={citiesState?.cities}
+					onClose={() => setIsOpenCities(false)}
+					handleChangeCity={handleChangeCity}
+				/>
 			</OModal>
 		</IOScrollView>
 	);

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

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, useWindowDimensions, Keyboard, View } from 'react-native';
+import { useLanguage, useOrder } from 'ordering-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from 'styled-components/native';
+
+import { OButton, OIcon, OText } from '../shared';
+
+import { CityElement, Container } from './styles'
+
+export const CitiesControl = (props: any) => {
+  const {
+    cities,
+    onClose,
+    handleChangeCity
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+  const { height } = useWindowDimensions();
+  const { top, bottom } = useSafeAreaInsets();
+
+  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+  const [cityState, setCityState] = useState(orderState?.options?.city_id)
+
+  const handleClick = () => {
+    cityState !== orderState?.options?.city_id && handleChangeCity(cityState)
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => setIsKeyboardShow(true)
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => setIsKeyboardShow(false)
+    );
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+  return (
+    <Container height={height - top - bottom - 60 - (isKeyboardShow ? 250 : 0)}>
+      <View>
+        {cities?.map((city: any) => (
+          <CityElement
+            key={city?.id}
+            activeOpacity={1}
+            disabled={orderState?.loading}
+            onPress={() => setCityState(city?.id === cityState ? null : city?.id)}
+          >
+            <OIcon
+              src={cityState === city?.id
+                ? theme.images.general.option_checked
+                : theme.images.general.option_normal}
+              width={16}
+              style={{ marginEnd: 24 }}
+            />
+            <OText color={theme.colors.black}>
+              {city?.name}
+            </OText>
+          </CityElement>
+        ))}
+      </View>
+      <OButton
+        text={t('CONTINUE', 'Continue')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        style={styles.btnStyle}
+        textStyle={{ color: 'white' }}
+        onClick={() => handleClick()}
+      />
+    </Container>
+  )
+}
+
+const styles = StyleSheet.create({
+  btnStyle: {
+    marginTop: 20,
+    borderRadius: 8,
+    shadowOpacity: 0,
+    height: 44
+  },
+})

package/themes/original/src/components/CitiesControl/styles.tsx

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding: 0 40px;
+  justify-content: space-between;
+  padding-bottom: 12px;
+
+  ${(props: any) => props.height && css`
+    height: ${props.height}px;
+  `}
+`
+
+export const CityElement = styled.TouchableOpacity`
+  padding: 10px;
+  flex-direction: row;
+`

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

@@ -358,7 +358,10 @@ export const ProductOptionsUI = (props: any) => {
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
-		product?.images?.length > 0 ? imageList.push(product.images) : imageList.push(theme?.images?.dummies?.product)
+		imageList.push(product?.images?.length > 0
+			? product.images
+			: theme?.images?.dummies?.product)
+
 		if (product?.gallery && product?.gallery.length > 0) {
 			for (const img of product?.gallery) {
 				if (img?.file) {
@@ -537,7 +540,7 @@ export const ProductOptionsUI = (props: any) => {
 											style={styles.slide1}
 											key={i}
 										>
-											{String(img).includes('image') || typeof img === 'number' ? (
+											{(String(img).includes('http') || typeof img === 'number') ? (
 												<FastImage
 													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 3 / 2 }}
 													source={typeof img !== 'number' ? {
@@ -548,7 +551,8 @@ export const ProductOptionsUI = (props: any) => {
 											) : (
 												<>
 													<YoutubePlayer
-														height={300}
+														height={'100%'}
+														width={'100%'}
 														play={playing}
 														videoId={img}
 														onChangeState={onStateChange}
@@ -579,7 +583,7 @@ export const ProductOptionsUI = (props: any) => {
 													opacity: index === thumbsSwiper ? 1 : 0.8
 												}}
 											>
-												{String(img).includes('image') ? (
+												{String(img).includes('http') ? (
 													<OIcon
 														url={img}
 														style={{
@@ -594,7 +598,7 @@ export const ProductOptionsUI = (props: any) => {
 													/>
 												) : (
 													<OIcon
-														url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
+														url={'https://img.youtube.com/vi/' + img + '/0.jpg'}
 														style={{
 															borderColor: theme.colors.lightGray,
 															borderRadius: 8,