ordering-ui-react-native 0.16.23-release → 0.16.24-release

package/package.json

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

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

@@ -589,10 +589,11 @@ const AddressFormUI = (props: AddressFormParams) => {
 													borderColor: theme.colors.border,
 													flexGrow: 1,
 													fontSize: 15,
-													paddingHorizontal: 16,
+													paddingLeft: 16,
+													paddingRight: 32,
 													minHeight: 50,
 													fontFamily: 'Poppins-Regular',
-													marginBottom: 24,
+													marginBottom: 24
 												},
 											}}
 										/>
@@ -600,10 +601,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 								/>
 
 								{(
-									(!isEditing && !isGuestUser && !formState.changes?.address) ||
-									(isEditing && !isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined)) ||
-									(isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined) &&
-								(
+									((!isEditing && !isGuestUser) ||
+										(isEditing && !isGuestUser)) ||
+									(isGuestUser)) &&
+									(
 										<View style={styles.pinIcon}>
 											<GPSButton
 												apiKey={googleMapsApiKey}
@@ -617,7 +618,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
 											/>
 										</View>
-								)}
+									)}
 							</AutocompleteInput>
 
 							{(locationChange || formState.changes?.location) && (

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

@@ -57,12 +57,12 @@ export const BusinessBasicInformation = (
 			height: isChewLayout ? 170 : 260,
 		},
 		logoStyle: {
-      width: 72,
-      height: 72,
-      borderRadius: 7.6,
-      justifyContent: 'flex-start',
-      alignItems: 'flex-start'
-    },
+			width: 72,
+			height: 72,
+			borderRadius: 7.6,
+			justifyContent: 'flex-start',
+			alignItems: 'flex-start'
+		},
 		businessInfo: {
 			paddingHorizontal: 40,
 			paddingTop: isChewLayout ? 0 : 56,
@@ -303,15 +303,21 @@ export const BusinessBasicInformation = (
 				{showLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
 						{!isBusinessInfoShow && (
-							<FastImage
-								style={styles.logoStyle}
-								source={{
-									uri: logo || optimizeImage(businessState?.business?.logo || theme?.images?.dummies?.businessLogo, 'h_70,c_limit'),
-									priority: FastImage.priority.high,
-									cache:FastImage.cacheControl.web
-								}}
-								resizeMode={FastImage.resizeMode.contain}
-							/>
+							logo || businessState?.business?.logo ?
+								<FastImage
+									style={styles.logoStyle}
+									source={{
+										uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit'),
+										priority: FastImage.priority.high,
+										cache: FastImage.cacheControl.web
+									}}
+									resizeMode={FastImage.resizeMode.contain}
+								/>
+								:
+								<OIcon
+									src={theme?.images?.dummies?.businessLogo}
+									style={styles.logoStyle}
+								/>
 						)}
 					</BusinessLogo>
 				)}

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

@@ -186,7 +186,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			paginationProps.totalPages === paginationProps.currentPage
 		);
 
-		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
+		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore && businessesList?.businesses?.length > 0) {
 			getBusinesses();
 		}
 	};

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

@@ -7,7 +7,7 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 import { View, TouchableOpacity, FlatList, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native'
-import { Placeholder,	PlaceholderLine, Fade } from 'rn-placeholder'
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
 import { OText, OIcon, OModal, OButton } from '../shared'
 import { getIconCard, flatArray } from '../../utils'
 import { StripeElementsForm } from '../StripeElementsForm'
@@ -37,7 +37,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
 
-	const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
+  const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
 
   const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
   const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
@@ -54,52 +54,52 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   }
 
   const getPayIcon = (method: string) => {
-		switch (method) {
-			case 'cash':
-				return theme.images.general.cash
-			case 'card_delivery':
-				return theme.images.general.carddelivery
-			case 'paypal':
-				return theme.images.general.paypal
-			case 'stripe':
-				return theme.images.general.stripe
-			case 'stripe_direct':
-				return theme.images.general.stripecc
-			case 'stripe_connect':
-				return theme.images.general.stripes
-			case 'stripe_redirect':
-				return theme.images.general.stripesb
-			default:
-				return theme.images.general.creditCard
-		}
-	}
+    switch (method) {
+      case 'cash':
+        return theme.images.general.cash
+      case 'card_delivery':
+        return theme.images.general.carddelivery
+      case 'paypal':
+        return theme.images.general.paypal
+      case 'stripe':
+        return theme.images.general.stripe
+      case 'stripe_direct':
+        return theme.images.general.stripecc
+      case 'stripe_connect':
+        return theme.images.general.stripes
+      case 'stripe_redirect':
+        return theme.images.general.stripesb
+      default:
+        return theme.images.general.creditCard
+    }
+  }
 
   const renderPaymethods = ({ item }: any) => {
-		return (
-			<TouchableOpacity
-				onPress={() => handleSelectPaymethod(item)}
-			>
-				<PMItem
-					key={item.id}
-					isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
-				>
-					<OIcon
-						src={getPayIcon(item.paymethod?.gateway)}
-						width={20}
-						height={20}
-						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
-					/>
-					<OText
-						size={10}
-						style={{ margin: 0, marginTop: 4 }}
-						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
-					>
-						{t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
-					</OText>
-				</PMItem>
-			</TouchableOpacity>
-		)
-	}
+    return (
+      <TouchableOpacity
+        onPress={() => handleSelectPaymethod(item)}
+      >
+        <PMItem
+          key={item.id}
+          isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
+        >
+          <OIcon
+            src={getPayIcon(item.paymethod?.gateway)}
+            width={20}
+            height={20}
+            color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
+          />
+          <OText
+            size={10}
+            style={{ margin: 0, marginTop: 4 }}
+            color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
+          >
+            {t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
+          </OText>
+        </PMItem>
+      </TouchableOpacity>
+    )
+  }
 
   return (
     <PMContainer>
@@ -123,10 +123,10 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
       ) : (
         <FlatList
           horizontal
-					showsHorizontalScrollIndicator={false}
-          data={businessPaymethods.result.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
-					renderItem={renderPaymethods}
-					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
+          showsHorizontalScrollIndicator={false}
+          data={businessPaymethods?.result?.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
+          renderItem={renderPaymethods}
+          keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
         />
       )}
       {!paymethodsAndWallets.loading && !paymethodsAndWallets.error && paymethodsAndWallets.paymethods.length === 0 && (
@@ -138,22 +138,22 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
       {paymethodSelected?.paymethod?.gateway === 'stripe' && (
         <View>
           <OButton
-						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
-						bgColor={theme.colors.white}
-						borderColor={theme.colors.primary}
-						style={styles.btnAddStyle}
-						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
-						imgRightSrc={null}
-						onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
-					/>
+            text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
+            bgColor={theme.colors.white}
+            borderColor={theme.colors.primary}
+            style={styles.btnAddStyle}
+            textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+            imgRightSrc={null}
+            onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+          />
           <StripeCardsList
-						paymethod={paymethodSelected?.paymethod}
-						businessId={businessIds[0]}
+            paymethod={paymethodSelected?.paymethod}
+            businessId={businessIds[0]}
             businessIds={businessIds}
-						publicKey={paymethodSelected?.data?.publishable}
-						payType={paymethodSelected?.paymethod?.name}
-						onSelectCard={handlePaymethodDataChange}
-					/>
+            publicKey={paymethodSelected?.data?.publishable}
+            payType={paymethodSelected?.paymethod?.name}
+            onSelectCard={handlePaymethodDataChange}
+          />
         </View>
       )}
 
@@ -170,7 +170,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         </>
       ) : (
         <>
-          {walletsState.result.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
+          {walletsState?.result?.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
             <WalletItem
               key={wallet.type}
               isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
@@ -197,40 +197,40 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
       )}
 
       <OModal
-				entireModal
-				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={addCardOpen.stripe}
-				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-				style={{ backgroundColor: 'red' }}
-			>
-				<KeyboardAvoidingView
-					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
-					enabled={Platform.OS === 'ios' ? true : false}
-				>
-					<StripeElementsForm
-						toSave
-						businessId={businessIds[0]}
+        entireModal
+        title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
+        open={addCardOpen.stripe}
+        onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+        style={{ backgroundColor: 'red' }}
+      >
+        <KeyboardAvoidingView
+          behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+          keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
+          enabled={Platform.OS === 'ios' ? true : false}
+        >
+          <StripeElementsForm
+            toSave
+            businessId={businessIds[0]}
             businessIds={businessIds}
             publicKey={paymethodSelected?.data?.publishable}
-						requirements={props.clientSecret}
-						onSelectCard={handlePaymethodDataChange}
-						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
+            requirements={props.clientSecret}
+            onSelectCard={handlePaymethodDataChange}
+            onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+          />
+        </KeyboardAvoidingView>
+      </OModal>
     </PMContainer>
   )
 }
 
 const styles = StyleSheet.create({
-	btnAddStyle: {
-		marginVertical: 20,
-		borderRadius: 7.6,
-		shadowOpacity: 0,
-		height: 44,
-		borderWidth: 1
-	},
+  btnAddStyle: {
+    marginVertical: 20,
+    borderRadius: 7.6,
+    shadowOpacity: 0,
+    height: 44,
+    borderWidth: 1
+  },
 })
 
 

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

@@ -36,6 +36,7 @@ export const MyOrders = (props: any) => {
     { key: 'products', value: t('PRODUCTS', 'Products') }
   ]
   const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+  const showNavbar = theme?.bar_menu?.components?.orders?.hidden
 
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -72,47 +73,48 @@ export const MyOrders = (props: any) => {
         onRefresh={() => handleOnRefresh()}
       />
     }>
-      {isChewLayout && (
+      {(isChewLayout || showNavbar) && (
         <View style={{
           width: '100%',
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
-          paddingHorizontal: 40
+          paddingHorizontal: 40,
+          marginTop: Platform.OS === 'android' ? 50 : 30,
         }}>
+          <OButton
+            imgLeftStyle={{ width: 18 }}
+            imgRightSrc={null}
+            style={{
+              borderWidth: 0,
+              width: 26,
+              height: 26,
+              backgroundColor: '#FFF',
+              borderColor: '#FFF',
+              shadowColor: '#FFF',
+              paddingLeft: 0,
+              paddingRight: 0
+            }}
+            onClick={goToBack}
+            icon={AntDesignIcon}
+            iconProps={{
+              name: 'arrowleft',
+              size: 26
+            }}
+          />
           <OText
               size={24}
               style={{
-                marginTop: Platform.OS === 'android' ? 50 : 30,
-                paddingHorizontal: 20,
-                textTransform: 'capitalize'
+                textTransform: 'capitalize',
+                marginLeft: 20,
+                top: 2
               }}
             >
-              <OButton
-                imgLeftStyle={{ width: 18 }}
-                imgRightSrc={null}
-                style={{
-                  borderWidth: 0,
-                  width: 26,
-                  height: 26,
-                  backgroundColor: '#FFF',
-                  borderColor: '#FFF',
-                  shadowColor: '#FFF',
-                  paddingLeft: 0,
-                  paddingRight: 0,
-                }}
-                onClick={goToBack}
-                icon={AntDesignIcon}
-                iconProps={{
-                  name: 'arrowleft',
-                  size: 26
-                }}
-              />
               {t('MY_ORDERS', 'My Orders')}
             </OText>
         </View>
       )}
-      {!hideOrders && !isChewLayout && (
+      {!hideOrders && !isChewLayout && !showNavbar && (
         <HeaderTitle text={t('MY_ORDERS', 'My Orders')} />
       )}
       {!allEmpty && (

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

@@ -1,15 +1,15 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import {
-  View,
-  Keyboard,
-  TextInput,
-  TouchableOpacity,
-  StyleSheet,
-  Dimensions,
-  I18nManager,
-  SafeAreaView,
-  Platform,
-  Button
+	View,
+	Keyboard,
+	TextInput,
+	TouchableOpacity,
+	StyleSheet,
+	Dimensions,
+	I18nManager,
+	SafeAreaView,
+	Platform,
+	Button
 } from 'react-native';
 import {
 	ProductForm as ProductOptions,
@@ -459,13 +459,13 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	useEffect(() => {
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+		const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
 			scrollViewRef.current.scrollToEnd({ animated: true })
-    })
-    return () => {
-      keyboardDidShowListener.remove()
-    }
-  }, [])
+		})
+		return () => {
+			keyboardDidShowListener.remove()
+		}
+	}, [])
 
 
 	return (
@@ -1054,7 +1054,7 @@ export const ProductOptionsUI = (props: any) => {
 											width={16}
 											color={
 												maxProductQuantity <= 0 ||
-												(productCart?.quantity + productAddedToCartLength) >= maxProductQuantity ||
+													(productCart?.quantity + productAddedToCartLength) >= maxProductQuantity ||
 													((productCart?.quantity + productAddedToCartLength) >= product?.maximum_per_order && product?.maximum_per_order) ||
 													isSoldOut
 													? theme.colors.backgroundGray
@@ -1108,20 +1108,20 @@ export const ProductOptionsUI = (props: any) => {
 
 
 export const ProductForm = (props: any) => {
-  const productOptionsProps = {
-    ...props,
-    productCart: {
-      ...props.productCart,
-      quantity: props.productCart?.code
-        ? props.productCart?.quantity
-        : props?.product?.minimum_per_order || 1
-    },
-    UIComponent: ProductOptionsUI
-  }
+	const productOptionsProps = {
+		...props,
+		productCart: {
+			...props.productCart,
+			quantity: props.productCart?.code
+				? props.productCart?.quantity
+				: props?.product?.minimum_per_order || 1
+		},
+		UIComponent: ProductOptionsUI
+	}
 
-  return <ProductOptions {...productOptionsProps} />
+	return <ProductOptions {...productOptionsProps} />
 };
 
 ProductForm.defaultProps = {
-  productAddedToCartLength: 0
+	productAddedToCartLength: 0
 }

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

@@ -191,7 +191,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										)
 									)}
 								</ProductImage>
-								)}
+							)}
 							{!!product?.calendar_event ? (
 								<View style={{ flex: 1, marginLeft: 10, flexDirection: 'column' }}>
 									<View>
@@ -201,7 +201,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										{parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}
 									</OText>
 								</View>
-							): (
+							) : (
 								<>
 									{isCartProduct && !isCartPending && getProductMax && (
 										<ProductInfo>
@@ -316,22 +316,22 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 				</View>
 			</AccordionSection>
 			<OModal
-        open={isServiceOpen}
-        onClose={() => setIsServiceOpen(false)}
-        entireModal
-      >
-        <ServiceForm
-          isCartProduct
-          isService
-          businessId={product?.business_id}
+				open={isServiceOpen}
+				onClose={() => setIsServiceOpen(false)}
+				entireModal
+			>
+				<ServiceForm
+					isCartProduct
+					isService
+					businessId={product?.business_id}
 					categoryId={product?.category_id}
 					productId={product?.id}
 					productCart={product}
-          onSave={() => setIsServiceOpen(false)}
-          onClose={() => setIsServiceOpen(false)}
-          professionalSelected={product?.calendar_event?.professional}
-        />
-      </OModal>
+					onSave={() => setIsServiceOpen(false)}
+					onClose={() => setIsServiceOpen(false)}
+					professionalSelected={product?.calendar_event?.professional}
+				/>
+			</OModal>
 		</>
 	)
 }

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

@@ -146,7 +146,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 												</AddButton>
 											</View>
 											<View>
-												<OIcon url={product.images} style={styles.imageStyle} />
+												<OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
 											</View>
 										</Item>
 									)) : (

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

@@ -114,7 +114,6 @@ const ProfileListUI = (props: ProfileParams) => {
 	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 	const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 	const IsPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
-	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -200,12 +199,10 @@ const ProfileListUI = (props: ProfileParams) => {
 						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MESSAGES', 'Messages')}</OText>
 					</ListItem>
-					{isChewLayout && (
-						<ListItem onPress={() => onRedirect('MyOrders', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
-							<FontAwesome name='list-alt' style={styles.messageIconStyle} color={theme.colors.textNormal} />
-							<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MY_ORDERS', 'My Orders')}</OText>
-						</ListItem>
-					)}
+					<ListItem onPress={() => onRedirect('MyOrders', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+						<FontAwesome name='list-alt' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MY_ORDERS', 'My Orders')}</OText>
+					</ListItem>
 					{isWalletEnabled && (
 						<ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 							<Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />