ordering-ui-react-native 0.21.21 → 0.21.23

package/package.json

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

package/themes/business/src/components/NewOrderNotification/index.tsx

@@ -45,7 +45,9 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound(theme.sounds.notification, '', () => { });
+  const soundSrc = 'https://d33aymufw4jvwf.cloudfront.net/notification.mp3' ?? theme.sounds.notification
+
+  const notificationSound = new Sound(soundSrc, '', () => { });
 
   let _timeout: any = null
   let times = 0

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

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
-import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
+import { AddressList as AddressListController, useLanguage, useOrder } from 'ordering-components/native'
 import { AddressItem, Container } from './styles'
 import { Platform, RefreshControl, StyleSheet, View } from 'react-native'
-import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
+import { OButton, OText, OAlert, OIcon } from '../shared'
 import { AddressListParams } from '../../types'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
@@ -18,12 +18,10 @@ const AddressListUI = (props: AddressListParams) => {
 		route,
 		addressList,
 		isFromProfile,
-		nopadding,
 		handleSetDefault,
 		handleDelete,
 		setAddressList,
 		isGoBack,
-		actionStatus,
 		isFromBusinesses,
 		isFromProductsList,
 		afterSignup,
@@ -34,7 +32,6 @@ const AddressListUI = (props: AddressListParams) => {
 
 	const [orderState] = useOrder()
 	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
 	const [refreshing] = useState(false);
 
 	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
@@ -296,8 +293,8 @@ const AddressListUI = (props: AddressListParams) => {
 							<OButton
 								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
 								imgRightSrc=''
-								bgColor={theme.colors.white}
-								textStyle={{ color: theme.colors.primary }}
+								bgColor={theme.colors.primary}
+								textStyle={{ color: theme.colors.white }}
 								style={styles.button}
 								borderColor={theme.colors.primary}
 								onClick={() => !afterSignup ? onNavigationRedirect(

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

@@ -217,7 +217,7 @@ export const BusinessBasicInformation = (
 					<Placeholder Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
 							{[...Array(5).keys()].map(i => (
-								<View style={styles.socialIcon} key={i}>
+								<View style={{ ...styles.socialIcon, borderWidth: 0 }} key={i}>
 									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
 								</View>
 							))}

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

@@ -270,10 +270,10 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 								</BusinessLogo>
 							)}
 						</BusinessInfo>
-						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5 }}>
+						<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', marginTop: 5, alignItems: 'flex-start' }}>
 							<OText
 								size={textSize + 2}
-								style={{ lineHeight: 18, marginBottom: 6 }}
+								style={{ lineHeight: 18, marginBottom: 6, width: '90%' }}
 								weight={'500'}>
 								{business?.name}
 							</OText>

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

@@ -351,9 +351,15 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   onClick={() => onBusinessClick(business)}
                   textStyle={{ color: theme.colors.primary, fontSize: 10 }}
                   text={t('GO_TO_STORE', 'Go to store')}
-                  bgColor='#F5F9FF'
-                  borderColor='#fff'
-                  style={{ borderRadius: 50, paddingLeft: 5, paddingRight: 5, height: 20 }}
+                  style={{
+                    borderRadius: 23,
+                    paddingLeft: 10,
+                    paddingRight: 10,
+                    height: 23,
+                    shadowOpacity: 0,
+                    backgroundColor: theme.colors.primaryContrast,
+                    borderWidth: 0
+                  }}
                 />
               </SingleBusinessContainer>
               <ScrollView horizontal style={styles.productsContainer} contentContainerStyle={{ flexGrow: 1 }}>

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

@@ -45,6 +45,7 @@ import { ProfessionalFilter } from '../ProfessionalFilter';
 import { ServiceForm } from '../ServiceForm';
 import { BusinessesListing } from '../BusinessesListing/Layout/Original'
 import { PageBanner } from '../PageBanner'
+import { NavBack } from 'ordering-ui-react-native/src/components/OrderDetails/styles';
 
 const PIXELS_TO_SCROLL = 2000
 
@@ -72,7 +73,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     handleUpdateProfessionals,
     handleChangeProfessionalSelected,
     onBusinessClick,
-    businessSingleId
+    businessSingleId,
+    productModal
   } = props
 
   const insets = useSafeAreaInsets()
@@ -191,7 +193,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
       onRedirect('ProductDetails', {
         product: product,
         businessSlug: business.slug,
-        businessId: business.id,
+        businessId: business.id || product?.category?.business_id,
         productAddedToCartLength
       })
     }
@@ -388,6 +390,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     }
   }, [])
 
+  useEffect(() => {
+    if (!business && !loading && !error) {
+      showToast(ToastType.Error, t('BUSINESS_NOT_FOUND', 'Business not found'))
+      navigation.navigate('BusinessList')
+    }
+  }, [business, error, loading])
+
+  useEffect(() => {
+    if (productModal?.product && !productModal?.loading && !productModal?.error) {
+      onProductClick(props?.productModal?.product)
+    }
+  }, [productModal])
+
   return (
     <>
       <View style={{ flex: 1, backgroundColor: backgroundColor }}>

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

@@ -42,10 +42,9 @@ export const FiltProductsContainer = styled.ScrollView`
 
 export const BackgroundGray = styled.View`
   flex: 1;
-  height: ${(props: any) => props.isIos ? '80%' : '100%'};
+  height: 100%;
   background-color: rgba(0,0,0,0.5);
   position: absolute;
-  margin-top: 100px;
   z-index: 10000;
   width: 100%;
 `

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

@@ -377,6 +377,16 @@ const CheckoutUI = (props: any) => {
 		setLengthMore((e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3)
 	}, [])
 
+	useEffect(() => {
+		if (!cartState?.loading && (cartState?.error || typeof cartState?.cart === 'string')) {
+			const error = cartState?.error || typeof cartState.cart === 'string' && cartState.cart
+			if (error) {
+				showToast(ToastType.Error, cartState?.error || cartState.cart)
+				navigation.navigate('BusinessList')
+			}
+		}
+	}, [cartState?.error, cartState?.cart, cartState?.loading])
+
 	return (
 		<>
 			<Container noPadding>

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

@@ -126,9 +126,13 @@ const MessagesUI = (props: MessagesParams) => {
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
 			?
-			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
-				`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
-				`${message.change?.attribute !== 'logistic_status' ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)]) : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status' ? t(ORDER_STATUS[parseInt(message.change.new, 10)]) : getLogisticTag(message.change.new)}`
+			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
+        ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
+        : `${message.change?.attribute !== 'logistic_status'
+          ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
+          : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
+            ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
+            : getLogisticTag(message.change.new)}`
 			}`
 			: message.change.new
 				?

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

@@ -7,7 +7,9 @@ import {
   OrderDetails as OrderDetailsConTableoller,
   useUtils,
   useOrder,
-  useConfig
+  useConfig,
+  useToast,
+  ToastType
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { showLocation } from 'react-native-map-link';
@@ -65,7 +67,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   } = props;
 
   const theme = useTheme();
-
+  const [, { showToast }] = useToast()
   const styles = StyleSheet.create({
     rowDirection: {
       flexDirection: 'row',
@@ -336,6 +338,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [driverLocation]);
 
+  useEffect(() => {
+    if (props?.order?.error && !props?.order?.loading) {
+      showToast(ToastType.Error, props?.order?.error)
+      navigation.navigate('BusinessList')
+    }
+  }, [props?.order?.error, props?.order?.loading])
+
   return (
     <OrderDetailsContainer
       keyboardShouldPersistTaps="handled"

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

@@ -77,6 +77,7 @@ const PageBannerUI = (props: any) => {
   const renderItem = ({ item, index }) => {
     return (
       <TouchableOpacity
+        activeOpacity={1}
         onPress={() => handleGoToPage(item)}
       >
         <View style={styles.sliderWrapper}>
@@ -128,6 +129,7 @@ const PageBannerUI = (props: any) => {
               {pageBannerState.banner?.items.length > 1 && (
                 <>
                   <TouchableOpacity
+                    activeOpacity={1}
                     style={[styles.swiperButton, { left: 25 }]}
                     onPress={() => carouselRef.current.snapToPrev()}
                   >
@@ -138,6 +140,7 @@ const PageBannerUI = (props: any) => {
                     />
                   </TouchableOpacity>
                   <TouchableOpacity
+                    activeOpacity={1}
                     style={[styles.swiperButton, { right: 25 }]}
                     onPress={() => carouselRef.current.snapToNext()}
                   >

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

@@ -137,7 +137,9 @@ export const ProductOptionsUI = (props: any) => {
 		},
 		slide1: {
 			flex: 1,
-			alignItems: 'center'
+			alignItems: 'center',
+			width: '100%',
+			marginLeft: 32
 		},
 		mainSwiper: {
 			height: 258,
@@ -371,12 +373,8 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
-	const handleScroll = ({ nativeEvent: { contentOffset, layoutMeasurement } }: any) => {
+	const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
 		setShowTitle(contentOffset.y > 30)
-		const _topOption = Object.keys(optionLayout).find(((option: any) => Math.abs(contentOffset?.y - layoutMeasurement?.height - optionLayout[option]?.y) < 20))
-		if (_topOption) {
-			const _topOptionId = Number(_topOption.replace('id:', ''))
-		}
 	}
 
 	const handleGoBack = navigation?.canGoBack()
@@ -563,6 +561,7 @@ export const ProductOptionsUI = (props: any) => {
 					ref={scrollViewRef}
 					contentContainerStyle={{ paddingBottom: 80 }}
 					stickyHeaderIndices={[2]}
+					scrollEventThrottle={100}
 					onScroll={handleScroll}
 				>
 					<WrapHeader onLayout={(event: any) => setHeaderRefHeight(event.nativeEvent.layout?.height)}>
@@ -760,6 +759,7 @@ export const ProductOptionsUI = (props: any) => {
 						</ProductDescription>
 						<ScrollView
 							horizontal
+							scrollEventThrottle={100}
 							showsHorizontalScrollIndicator={false}
 							contentContainerStyle={{ paddingBottom: 30 }}
 						>
@@ -787,6 +787,7 @@ export const ProductOptionsUI = (props: any) => {
 					{(!loading && product) && (
 						<ExtraOptionWrap
 							horizontal
+							scrollEventThrottle={100}
 							showsHorizontalScrollIndicator={false}
 							style={{
 								marginBottom: 20,
@@ -913,12 +914,7 @@ export const ProductOptionsUI = (props: any) => {
 																}}>
 																{option?.suboptions?.sort((a: any, b: any) => a.rank - b.rank).map(
 																	(suboption: any) => {
-																		const currentState =
-																			productCart.options[
-																				`id:${option.id}`
-																			]?.suboptions[
-																			`id:${suboption.id}`
-																			] || {};
+																		const currentState = productCart.options[`id:${option.id}`]?.suboptions[`id:${suboption.id}`] || {};
 																		const balance =
 																			productCart.options[
 																				`id:${option.id}`
@@ -933,6 +929,7 @@ export const ProductOptionsUI = (props: any) => {
 																				balance={balance}
 																				option={option}
 																				suboption={suboption}
+																				image={option.image}
 																				state={currentState}
 																				disabled={
 																					isSoldOut ||

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

@@ -7,6 +7,7 @@ import {
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import FastImage from 'react-native-fast-image';
 
 import {
 	Container,
@@ -14,7 +15,8 @@ import {
 	QuantityControl,
 	Checkbox,
 	PositionControl,
-	Circle
+	Circle,
+	Logo
 } from './styles'
 import { OIcon, OText } from '../shared'
 
@@ -29,7 +31,8 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		setIsScrollAvailable
+		setIsScrollAvailable,
+		image
 	} = props
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
@@ -37,12 +40,24 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const theme = useTheme();
 	const [, t] = useLanguage()
-	const [{ parsePrice }] = useUtils()
+	const [{ parsePrice, optimizeImage }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
 	const iconsSize = 20
 
+	const styles = StyleSheet.create({
+		icon: {
+			borderRadius: 7.6,
+			width: 60,
+			height: 60
+		},
+		logo: {
+			borderRadius: 10,
+			marginLeft: 3,
+		},
+	});
+
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
@@ -82,6 +97,18 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
 						)
 					)}
+					{image && (
+						<Logo style={styles.logo}>
+							<FastImage
+								style={styles.icon}
+								source={{
+									uri: optimizeImage(image, 'h_100,c_limit'),
+									priority: FastImage.priority.normal,
+								}}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						</Logo>
+					)}
 					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
 						{suboption?.name}
 					</OText>
@@ -141,7 +168,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					</PositionControl>
 				)}
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{width: 70, maxWidth: 70}}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ width: 70, maxWidth: 70 }}>
 						+ {parsePrice(price)}
 					</OText>
 				)}

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

@@ -10,7 +10,7 @@ export const Container = styled.TouchableOpacity`
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
   padding: 10px 0 10px 10px;
-  width: 35%;
+  width: 50%;
   align-items: center;
 `
 
@@ -32,3 +32,8 @@ export const Checkbox = styled.TouchableOpacity`
 export const Circle = styled.TouchableOpacity`
   margin: 0 1.5px;
 `
+
+export const Logo = styled.View`
+  height: 65px;
+  width: 65px;
+`;

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

@@ -448,8 +448,8 @@ export const UserFormDetailsUI = (props: any) => {
 										? t('UPDATING', 'Updating...')
 										: t('UPDATE', 'Update')
 								}
-								bgColor={theme.colors.white}
-								textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+								bgColor={theme.colors.primary}
+								textStyle={{ color: theme.colors.white, fontSize: 14 }}
 								borderColor={theme.colors.primary}
 								isDisabled={formState.loading}
 								imgRightSrc={null}

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

@@ -288,43 +288,37 @@ const ProfileUI = (props: ProfileParams) => {
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
 				/>
-				<KeyboardAvoidingView
-					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-					enabled={Platform.OS === 'ios' ? true : false}
-					style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}
-				>
-					<CenterView>
-						<View style={styles.photo}>
-							{user?.photo ? (
-								<FastImage
-									style={{ height: 80, width: 80, borderRadius: 8 }}
-									source={{
-										uri: user?.photo,
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
-							) : (
-								<Ionicons name='person-outline' size={50} />
-							)}
-						</View>
-						<OIconButton
-							icon={theme.images.general.camera}
-							borderColor={theme.colors.clear}
-							iconStyle={{ width: 20, height: 20 }}
-							style={{ maxWidth: 40, position: 'absolute', alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
-							onClick={() => handleImagePicker()}
-						/>
-					</CenterView>
-					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
-					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
-					<UserFormDetailsUI
-						{...props}
-						isProfile
-						isEdit
-						setWillVerifyOtpState={setWillVerifyOtpState}
+				<CenterView>
+					<View style={styles.photo}>
+						{user?.photo ? (
+							<FastImage
+								style={{ height: 80, width: 80, borderRadius: 8 }}
+								source={{
+									uri: user?.photo,
+									priority: FastImage.priority.normal,
+								}}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						) : (
+							<Ionicons name='person-outline' size={50} />
+						)}
+					</View>
+					<OIconButton
+						icon={theme.images.general.camera}
+						borderColor={theme.colors.clear}
+						iconStyle={{ width: 20, height: 20 }}
+						style={{ maxWidth: 40, position: 'absolute', alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
+						onClick={() => handleImagePicker()}
 					/>
-				</KeyboardAvoidingView>
+				</CenterView>
+				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
+				<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
+				<UserFormDetailsUI
+					{...props}
+					isProfile
+					isEdit
+					setWillVerifyOtpState={setWillVerifyOtpState}
+				/>
 			</Container>
 			<OModal
 				open={isModalVisible}

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

@@ -73,7 +73,7 @@ const WalletsUI = (props: any) => {
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
   const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const hideWalletsTheme = theme?.bar_menu?.components?.wallets?.hidden
+  const hideWalletsTheme = theme?.bar_menu?.components?.wallet?.hidden === true
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
@@ -128,10 +128,10 @@ const WalletsUI = (props: any) => {
             ...{
               width: '100%',
               display: 'flex',
-              flexDirection: hideWalletsTheme ? 'column' : 'row',
-              justifyContent: hideWalletsTheme ? 'flex-start' : 'space-between',
-              alignItems: hideWalletsTheme ? 'flex-start' : 'center',
-              marginTop: hideWalletsTheme ? 0 : 10,
+              flexDirection: !hideWalletsTheme ? 'column' : 'row',
+              justifyContent: !hideWalletsTheme ? 'flex-start' : 'space-between',
+              alignItems: !hideWalletsTheme ? 'flex-start' : 'center',
+              marginTop: !hideWalletsTheme ? 0 : 10,
             },
           }}>
             <NavBar
@@ -151,7 +151,7 @@ const WalletsUI = (props: any) => {
                 imgRightSrc={null}
                 textStyle={{ fontSize: 12, color: theme.colors.disabled }}
                 onClick={() => setOpenHistory(true)}
-                style={{ borderRadius: 8, height: 40, width: hideWalletsTheme ? '100%' : 150, marginTop: hideWalletsTheme ? 10 : 0 }}
+                style={{ borderRadius: 8, height: 40, width: !hideWalletsTheme ? '100%' : 150, marginTop: !hideWalletsTheme ? 10 : 0 }}
               />
             )}
           </View>