ordering-ui-react-native 0.17.44 → 0.17.46

package/package.json

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

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

@@ -130,6 +130,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 	const [openService, setOpenService] = useState(false)
 	const [currentProduct, setCurrentProduct] = useState(null)
+  const [searchBarHeight, setSearchBarHeight] = useState(60)
 
 	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const openCarts = (Object.values(orderState?.carts)?.filter((cart: any) => cart?.products && cart?.products?.length && cart?.status !== 2 && cart?.valid_schedule && cart?.valid_products && cart?.valid_address && cart?.valid_maximum && cart?.valid_minimum && !cart?.wallets) || null) || []
@@ -262,6 +263,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						style={{
 							marginTop: Platform.OS === 'ios' ? insets.top : 0
 						}}
+            onLayout={(event: any) => setSearchBarHeight(event.nativeEvent.layout.height) }
 					>
 						{!isOpenSearchBar && (
 							<>
@@ -322,12 +324,12 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 				{business?.categories?.length > 0 && isOpenFiltProducts && (
 					<FiltProductsContainer
-						isIos={Platform.OS === 'ios'}
-						style={{
-							height: Dimensions.get('window').height - filtProductsHeight
-						}}
-						contentContainerStyle={{ flexGrow: 1 }}
-					>
+          style={{
+            height: Dimensions.get('window').height - filtProductsHeight,
+            top: Platform.OS === 'ios' ? searchBarHeight + insets.top : searchBarHeight							
+          }}
+          contentContainerStyle={{ flexGrow: 1 }}
+        >
 						<View style={{ padding: 20, backgroundColor: theme.colors.white }}>
 							<BusinessProductsList
 								categories={[
@@ -485,22 +487,24 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					)}
 				</IOScrollView>
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
-					<FloatingButton
-						btnText={
-							openUpselling
-								? t('LOADING', 'Loading')
-								: currentCart?.subtotal >= currentCart?.minimum
-									? t('VIEW_ORDER', 'View Order')
-									: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
-						}
-						isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
-						btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-						btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
-						btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
-						btnRightValue={parsePrice(currentCart?.total)}
-						disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
-						handleClick={() => setOpenUpselling(true)}
-					/>
+					<View style={{ marginBottom: Platform.OS === 'ios' ? 20 : 0 }}>
+						<FloatingButton
+              btnText={
+                openUpselling
+                  ? t('LOADING', 'Loading')
+                  : currentCart?.subtotal >= currentCart?.minimum
+                    ? t('VIEW_ORDER', 'View Order')
+                    : `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
+              }
+              isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
+              btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
+              btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
+              btnLeftValue={currentCart?.products.reduce((prev: number, product: any) => prev + product.quantity, 0)}
+              btnRightValue={parsePrice(currentCart?.total)}
+              disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
+              handleClick={() => setOpenUpselling(true)}
+            />
+					</View>
 				)}
 				{openUpselling && (
 					<UpsellingRedirect

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

@@ -38,8 +38,6 @@ export const FiltProductsContainer = styled.ScrollView`
   position: absolute;
   width: 100%;
   z-index: 20000;
-  top: 80px;
-  margin-top: 20px;
 `
 
 export const BackgroundGray = styled.View`

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

@@ -167,6 +167,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const timerId = useRef<any>(false)
 	const [favoriteIds, setFavoriteIds] = useState<any>([])
 	const chewOrderTypes = [{ name: t('DELIVERY', 'Delivery').toUpperCase(), value: 1 }, { name: t('PICKUP', 'Pickup').toUpperCase(), value: 2 }]
+	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
 	const handleMomentClick = () => {
 		if (isPreorderEnabled) {
@@ -353,6 +354,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				/>
 			}
 		>
+			{enabledPoweredByOrdering && auth && (
+				<View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', top: 20 }}>
+					<OText>
+						Powered By Ordering.co
+					</OText>
+				</View>
+			)}
 			<View style={{
 				height: !isPreOrderSetting && isChewLayout ? 150 : isChewLayout ? 200 : isFarAway ? 150 : 100,
 				marginTop: Platform.OS == 'ios' ? 0 : 50,
@@ -458,7 +466,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			</View>
 			{!isChewLayout ? (
 				<HeaderWrapper
-					source={bgHeader ? {uri: bgHeader} : theme.images.backgrounds.business_list_header}
+					source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
 					style={{ paddingTop: top + 20 }}
 					resizeMode='cover'
 				>

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

@@ -118,9 +118,11 @@ const CheckoutUI = (props: any) => {
 			paddingHorizontal: 40,
 			width: '100%'
 		},
-		wrapperNavbar: Platform.OS === 'ios'
-			? { paddingVertical: 0, paddingHorizontal: 40 }
-			: { paddingVertical: 20, paddingHorizontal: 40 }
+		wrapperNavbar: {
+			paddingVertical: 0,
+			paddingHorizontal: 40,
+			marginVertical: 2
+		}
 	})
 
 	const [, { showToast }] = useToast();
@@ -180,8 +182,8 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = (confirmPayment: any) => {
-		if (!userErrors.length && !requiredFields?.length) {
+	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
+		if (!userErrors.length && !requiredFields?.length || forcePlace) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
@@ -284,7 +286,6 @@ const CheckoutUI = (props: any) => {
 						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
 						showCall={false}
 						btnStyle={{ paddingLeft: 0 }}
-						style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
 						titleWrapStyle={{ paddingHorizontal: 0 }}
 						titleStyle={{ marginRight: 0, marginLeft: 0 }}
 					/>
@@ -741,7 +742,10 @@ const CheckoutUI = (props: any) => {
 								togglePhoneUpdate={togglePhoneUpdate}
 								requiredFields={requiredFields}
 								hideUpdateButton
-								onClose={() => setIsOpen(false)}
+								onClose={() => {
+									setIsOpen(false)
+									handlePlaceOrder(null, true)
+								}}
 							/>
 						</View>
 					</OModal>

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -1,91 +1,113 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { formatSeconds } from '../../../utils'
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
 import { OText, OButton } from '../../shared';
-import OTPInputView from '@twotalltotems/react-native-otp-input'
+import OtpInputs from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
 
 export const Otp = (props: otpParams) => {
-    const {
-        willVerifyOtpState,
-        setWillVerifyOtpState,
-        onSubmit,
-        handleLoginOtp,
-        setAlertState,
-        pinCount
-    } = props
+  const {
+    willVerifyOtpState,
+    setWillVerifyOtpState,
+    onSubmit,
+    handleLoginOtp,
+    setAlertState,
+    pinCount
+  } = props
 
-    const theme = useTheme();
-    const [, t] = useLanguage();
-    const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
-        600, willVerifyOtpState)
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [otpLeftTime, _, resetOtpLeftTime]: any = useCountdownTimer(
+    600, willVerifyOtpState)
 
+  const [code, setCode] = useState('')
 
-    const handleOnSubmit = () => {
-        setAlertState({
-            open: true,
-            title: t('CODE_SENT', 'The code has been sent'),
-        })
-        resetOtpLeftTime()
-        onSubmit()
+
+  const handleOnSubmit = () => {
+    setAlertState({
+      open: true,
+      title: t('CODE_SENT', 'The code has been sent'),
+    })
+    resetOtpLeftTime()
+    onSubmit()
+  }
+
+  useEffect(() => {
+    if (otpLeftTime === 0) {
+      setAlertState({
+        open: true,
+        title: t('TIME_IS_UP', 'Time is up'),
+        content: t('PLEASE_RESEND_CODE', 'Please resend code again')
+      })
     }
+  }, [otpLeftTime])
 
-    useEffect(() => {
-        if (otpLeftTime === 0) {
-            setAlertState({
-                open: true,
-                title: t('TIME_IS_UP', 'Time is up'),
-                content: t('PLEASE_RESEND_CODE', 'Please resend code again')
-            })
-        }
-    }, [otpLeftTime])
+  useEffect(() => {
+    if (code?.length === (pinCount || 6)) {
+      handleLoginOtp(code)
+    }
+  }, [code])
 
-    const loginStyle = StyleSheet.create({
-        underlineStyleBase: {
-            width: 45,
-            height: 60,
-            borderWidth: 1,
-            fontSize: 16
-        },
-        underlineStyleHighLighted: {
-            borderColor: theme.colors.primary,
-            color: theme.colors.primary,
-            fontSize: 16
-        },
-    });
+  const loginStyle = StyleSheet.create({
+    container: {
+      width: '100%',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginVertical: 30
+    },
+    focusStyles: {
+      borderColor: theme.colors.primary,
+      borderWidth: 1,
+      borderRadius: 8
+    },
+    underlineStyleBase: {
+      width: 45,
+      height: 50,
+      borderWidth: 1,
+      fontSize: 16,
+      borderRadius: 8,
+      borderColor: theme.colors.lightGray,
+      textAlign: 'center'
+    },
+    underlineStyleHighLighted: {
+      borderColor: theme.colors.primary,
+      color: theme.colors.primary,
+      fontSize: 16
+    },
+  });
 
-    return (
-        <>
-            <OTPContainer>
-                <OText size={24}>
-                    {formatSeconds(otpLeftTime)}
-                </OText>
-                <OTPInputView
-                    style={{ width: '100%', height: 150 }}
-                    pinCount={pinCount || 6}
-                    codeInputFieldStyle={loginStyle.underlineStyleBase}
-                    codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
-                    onCodeFilled={(code: string) => handleLoginOtp(code)}
-                    selectionColor={theme.colors.primary}
-                />
-                <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
-                    <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
-                        {t('RESEND_CODE', 'Resend code')}
-                    </OText>
-                </TouchableOpacity>
-                <OButton
-                    onClick={() => setWillVerifyOtpState(false)}
-                    bgColor={theme.colors.white}
-                    borderColor={theme.colors.primary}
-                    textStyle={{ color: theme.colors.primary }}
-                    style={{ borderRadius: 8, width: '100%' }}
-                    text={t('CANCEL', 'Cancel')}
-                />
-            </OTPContainer>
-        </>
-    )
+  return (
+    <>
+      <OTPContainer>
+        <OText size={24}>
+          {formatSeconds(otpLeftTime)}
+        </OText>
+        <OtpInputs
+          autofillFromClipboard
+          numberOfInputs={pinCount || 6}
+          style={loginStyle.container}
+          inputStyles={loginStyle.underlineStyleBase}
+          focusStyles={loginStyle.focusStyles}
+          handleChange={setCode}
+        />
+        <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
+          <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
+            {t('RESEND_CODE', 'Resend code')}
+          </OText>
+        </TouchableOpacity>
+        <OButton
+          onClick={() => setWillVerifyOtpState(false)}
+          bgColor={theme.colors.white}
+          borderColor={theme.colors.primary}
+          textStyle={{ color: theme.colors.primary }}
+          style={{ borderRadius: 8, width: '100%' }}
+          text={t('CANCEL', 'Cancel')}
+        />
+      </OTPContainer>
+    </>
+  )
 }

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

@@ -96,7 +96,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 	const [tabLayouts, setTabLayouts] = useState<any>({})
 	const tabsRef = useRef<any>(null)
-
+	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 	const theme = useTheme();
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
@@ -789,6 +789,12 @@ const LoginFormUI = (props: LoginParams) => {
 						</Placeholder>
 					</SkeletonWrapper>
 				)}
+
+				{enabledPoweredByOrdering && (
+					<OText>
+						Powered By Ordering.co
+					</OText>
+				)}
 			</FormSide>
 			<OModal
 				open={isModalVisible}

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

@@ -118,6 +118,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const mapValidStatuses = [9, 19, 23]
   const placeSpotTypes = [3, 4, 5]
   const directionTypes = [2, 3, 4, 5]
+  const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
   const walletName: any = {
     cash: {
@@ -599,6 +600,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   : parseDate(order?.delivery_datetime, { utc: false })}
               </OText>}
             />
+            {enabledPoweredByOrdering && (
+              <View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <OText>
+                  Powered By Ordering.co
+                </OText>
+              </View>
+            )}
             <OrderInfo>
               <OrderData>
                 <View style={styles.linkWrapper}>

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

@@ -124,7 +124,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 				flagButtonStyle={flagStyle}
 				countryPickerButtonStyle={{ ...style.countryBtn, ...boxStyle ? boxStyle : {} }}
 				placeholder={t('PHONE_NUMBER', 'Phone Number')}
-				textInputProps={{ autoCompleteType: 'tel', ref: forwardRef, ...textInputProps }}
+				textInputProps={{ keyboardType: 'number-pad', autoCompleteType: 'tel', textContentType: 'telephoneNumber', dataDetectorTypes: 'phoneNumber', ref: forwardRef, ...textInputProps }}
 				containerStyle={{ width: '100%' }}
 				renderDropdownImage={noDropIcon ? <View /> : <OIcon src={theme.images.general.arrow_down} width={13} color={'#B1BCCC'}></OIcon>}
 			/>

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

@@ -111,7 +111,7 @@ const WalletsUI = (props: any) => {
     <>
       <Container>
         <Header>
-        <OText size={24}>{t('WALLETS', 'Wallets')}</OText>
+        <OText size={24} style={{ marginTop: 30 }}>{t('WALLETS', 'Wallets')}</OText>
           {isChewLayout && (
             <OButton
               text={t('WALLET_HISTORY', 'Wallet history')}