ordering-ui-react-native 0.21.73 → 0.21.75

package/package.json

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

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

@@ -389,6 +389,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
         <IconWrapper>
+          <View style={{ marginRight: 10 }}>
+            <WebsocketStatus />
+          </View>
           <FeatherIcon
             name='refresh-cw'
             color={theme.colors.backgroundDark}
@@ -404,10 +407,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           />
         </IconWrapper>
       </View>
-      <WebsocketStatus />
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
-          <View style={{ flex: 0.5 }}>
+          {/* <View style={{ flex: 0.5 }}>
             <OButton
               text={t('SLA_SETTING', 'SLA’s Settings')}
               textStyle={{ color: theme.colors.backArrow }}
@@ -421,9 +423,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               }}
               onClick={onClickSetting}
             />
-          </View>
-          <View style={{ width: 10, height: '100%' }} />
-          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+          </View> */}
+          {/* <View style={{ width: 10, height: '100%' }} /> */}
+          {/* <View style={{ flex: 0.5, justifyContent: 'center' }}>
             <SelectDropdown
               defaultButtonText={t('SLA', 'SLA\'s')}
               data={preorderTypeList}
@@ -453,7 +455,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 );
               }}
             />
-          </View>
+          </View> */}
         </View>
       )}
       <FiltersTab>
@@ -713,6 +715,39 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             {openSearchModal && (
               <SearchModalContent>
                 <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
+                <InputContainer style={{ marginBottom: 24 }}>
+                  <SelectDropdown
+                    defaultButtonText={search?.timeStatus
+                      ? preorderTypeList.find(type => type.key === search?.timeStatus)?.name
+                      : t('SLA', 'SLA\'s')}
+                    data={preorderTypeList}
+                    onSelect={(selectedItem, index) => {
+                      setSearch({ ...search, timeStatus: selectedItem?.key })
+                    }}
+                    buttonTextAfterSelection={(selectedItem, index) => {
+                      return selectedItem.name
+                    }}
+                    rowTextForSelection={(item, index) => {
+                      return item.key
+                    }}
+                    buttonStyle={styles.selectOption}
+                    buttonTextStyle={styles.buttonTextStyle}
+                    renderDropdownIcon={isOpened => {
+                      return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+                    }}
+                    dropdownStyle={styles.dropdownStyle}
+                    dropdownOverlayColor='transparent'
+                    rowStyle={styles.rowStyle}
+                    renderCustomizedRowChild={(item, index) => {
+                      return (
+                        <SlaOption>
+                          {index !== 0 && <OrderStatus timeState={item?.key} />}
+                          <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
+                        </SlaOption>
+                      );
+                    }}
+                  />
+                </InputContainer>
                 <InputContainer>
                   <OInput
                     value={search.id}

package/themes/business/src/components/PreviousOrders/OrderItem.tsx

@@ -153,10 +153,10 @@ export const OrderItem = React.memo((props: any) => {
         <Logo style={styles.logo}>
           <FastImage
             style={styles.icon}
-            source={order.business?.logo ? {
-              uri: optimizeImage(order.business?.logo, 'h_100,c_limit'),
+            source={order.business?.logo?.includes('https') ? {
+              uri: order.business?.logo,
               priority: FastImage.priority.normal,
-            } : theme?.images?.dummies?.businessLogo}
+            } : order.business?.logo ?? theme?.images?.dummies?.businessLogo}
             resizeMode={FastImage.resizeMode.cover}
           />
         </Logo>

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

@@ -46,11 +46,10 @@ const ProfileUI = (props: ProfileParams) => {
     toggleIsEdit,
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
-    userState,
     isAlsea
   } = props;
 
-  const [{ user }] = useSession();
+  const [{ user, sessionLoading }] = useSession();
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const [{ optimizeImage }] = useUtils();
@@ -67,6 +66,7 @@ const ProfileUI = (props: ProfileParams) => {
     },
   });
   const [phoneUpdate, setPhoneUpdate] = useState(false);
+  const [userState, setUserState] = useState(props.userState)
   const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
   const [phoneToShow, setPhoneToShow] = useState('');
   const [openModal, setOpenModal] = useState(false)
@@ -207,6 +207,22 @@ const ProfileUI = (props: ProfileParams) => {
     }
   }, [user?.country_phone_code]);
 
+  useEffect(() => {
+    setUserState({ ...userState, ...props.userState })
+  }, [props.userState])
+
+  useEffect(() => {
+    if (!user?.id) return
+
+    setUserState({
+      ...userState,
+      result: {
+        error: true,
+        result: user
+      }
+    })
+  }, [user, props.isFocused])
+
   const styles = StyleSheet.create({
     label: {
       color: theme.colors.textGray,
@@ -255,7 +271,7 @@ const ProfileUI = (props: ProfileParams) => {
         />
       )}
 
-      {formState?.loading && !validationFields.error && (
+      {(formState?.loading || sessionLoading) && !validationFields.error && (
         <View
           style={{
             backgroundColor: theme.colors.backgroundLight,
@@ -326,7 +342,7 @@ const ProfileUI = (props: ProfileParams) => {
         </View>
       )}
 
-      {!formState?.loading && !validationFields.error && (
+      {!(formState?.loading || sessionLoading) && !validationFields.error && (
         <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
           <CenterView>
             <OIcon

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

@@ -51,7 +51,7 @@ const SocketStatusUI = (props: any) => {
         return '#E63757';
       default:
         return '#FF9922';
-    }  
+    }
   }
 
   return (
@@ -73,7 +73,7 @@ const SocketStatusUI = (props: any) => {
         <OText
           style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
         >
-          {t('CONNECTION_STATUS', 'Connection status')}
+          {t('CONNECTION_STATUS_SHORT', 'Status')}
         </OText>
         <MaterialIcon
           name='circle'

package/themes/business/src/types/index.tsx

@@ -58,6 +58,7 @@ export interface ProfileParams {
   isRequiredField?: any;
   isAlsea?: boolean;
   isShowDriverStatus?: boolean;
+  isFocused?: boolean;
 }
 
 export interface AddressListParams {

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

@@ -120,53 +120,55 @@ export const CartContent = (props: any) => {
 					{isMultiCheckout && (
 						<>
 							{!!cartsAvailable.length && (
-								<ChCartsTotal>
-									{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
-										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-												{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
-											</OText>
-											<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-												{parsePrice(totalCartsFee)}
-											</OText>
-										</View>
-									)}
-									{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
-										configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+								<>
+									<ChCartsTotal>
+										{!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
 											<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
 												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-													{t('DRIVER_TIP', 'Driver tip')}
+													{t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
 												</OText>
 												<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
-													{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+													{parsePrice(totalCartsFee)}
 												</OText>
 											</View>
 										)}
-									<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
-											{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
-										</OText>
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
-									</View>
-									<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
-										<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
-											{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
-										</OText>
-									</View>
-								</ChCartsTotal>
+										{cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
+											configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
+												<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+													<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+														{t('DRIVER_TIP', 'Driver tip')}
+													</OText>
+													<OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
+														{parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
+													</OText>
+												</View>
+											)}
+										<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+												{t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
+											</OText>
+											<OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
+										</View>
+										<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
+											<OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
+												{t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
+											</OText>
+										</View>
+									</ChCartsTotal>
+									<CheckoutAction style={{ marginTop: 0 }}>
+										<OButton
+											text={t('CHECKOUT', 'Checkout')}
+											bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
+											isDisabled={!cartsAvailable.length}
+											borderColor={theme.colors.primary}
+											imgRightSrc={null}
+											textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+											onClick={() => handleCheckoutRedirect()}
+											style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+										/>
+									</CheckoutAction>
+								</>
 							)}
-							<CheckoutAction style={{ marginTop: 0 }}>
-								<OButton
-									text={t('CHECKOUT', 'Checkout')}
-									bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
-									isDisabled={!cartsAvailable.length}
-									borderColor={theme.colors.primary}
-									imgRightSrc={null}
-									textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-									onClick={() => handleCheckoutRedirect()}
-									style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-								/>
-							</CheckoutAction>
 						</>
 					)}
 				</>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
 import Picker from 'react-native-country-picker-modal';
@@ -159,7 +159,7 @@ const CheckoutUI = (props: any) => {
 	const [phoneUpdate, setPhoneUpdate] = useState(false);
 	const [openChangeStore, setOpenChangeStore] = useState(false)
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
-	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
+	const [showGateway, setShowGateway] = useState<any>({ closedByUser: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
 	const [requiredFields, setRequiredFields] = useState<any>([])
@@ -431,6 +431,21 @@ const CheckoutUI = (props: any) => {
 		}
 	}, [])
 
+	useEffect(() => {
+		const onBackFunction = () => {
+			if (webviewPaymethod?.gateway === 'paypal' && showGateway.open) {
+				setShowGateway({ open: false, closedByUser: true })
+				return true
+			} else {
+				return false
+			}
+		}
+		BackHandler.addEventListener('hardwareBackPress', onBackFunction)
+		return () => {
+			BackHandler.removeEventListener('hardwareBackPress', onBackFunction)
+		}
+	}, [BackHandler, webviewPaymethod?.gateway, showGateway.open])
+
 	return (
 		<>
 			<View style={styles.wrapperNavbar}>

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

@@ -12,6 +12,7 @@ import {
 } from 'ordering-components/native'
 import { View, StyleSheet, Platform, ScrollView } from 'react-native'
 import { useTheme } from 'styled-components/native';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OText, OIcon, OModal, OButton } from '../shared';
@@ -30,6 +31,8 @@ import { SignupForm } from '../SignupForm'
 import { LoginForm } from '../LoginForm'
 
 import {
+  TopHeader,
+  TopActions,
   ChContainer,
   ChSection,
   ChHeader,
@@ -76,7 +79,11 @@ const MultiCheckoutUI = (props: any) => {
       paddingLeft: 20,
       paddingRight: 20
     },
-    wrapperNavbar: { paddingHorizontal: 20 },
+    wrapperNavbar: {
+      paddingHorizontal: 20,
+      backgroundColor: theme?.colors?.white,
+			borderWidth: 0
+    },
     detailWrapper: {
 			paddingHorizontal: 20,
 			width: '100%'
@@ -136,6 +143,7 @@ const MultiCheckoutUI = (props: any) => {
     ?.reduce((sum: any, cart: any) => sum + clearAmount((cart?.subtotal + getIncludedTaxes(cart)) * accumulationRateBusiness(cart?.business_id)), 0)
     ?.toFixed(configs.format_number_decimal_length?.value ?? 2)
 
+	const [showTitle, setShowTitle] = useState(false)
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [userErrors, setUserErrors] = useState<any>([]);
@@ -233,6 +241,10 @@ const MultiCheckoutUI = (props: any) => {
 		if (user) setOpenModal({ ...openModal, login: false })
 	}
 
+  const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+		setShowTitle(contentOffset.y > 30)
+	}
+
   useEffect(() => {
     if (validationFields && validationFields?.fields?.checkout) {
       checkValidationFields()
@@ -273,15 +285,42 @@ const MultiCheckoutUI = (props: any) => {
 
   return (
     <>
-      <Container noPadding>
+      <View style={styles.wrapperNavbar}>
+				<TopHeader>
+					<>
+						<TopActions onPress={() => navigation?.canGoBack() && navigation.goBack()}>
+							<IconAntDesign
+								name='arrowleft'
+								size={26}
+							/>
+						</TopActions>
+						{showTitle && (
+							<OText
+								size={16}
+								style={{ flex: 1, textAlign: 'center', right: 15 }}
+								weight={Platform.OS === 'ios' ? '600' : 'bold'}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+							>
+								{t('CHECKOUT', 'Checkout')}
+							</OText>
+						)}
+					</>
+				</TopHeader>
+			</View>
+      <Container noPadding onScroll={handleScroll}>
         <View style={styles.wrapperNavbar}>
           <NavBar
+            hideArrowLeft
             title={t('CHECKOUT', 'Checkout')}
             titleAlign={'center'}
             onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
             showCall={false}
             paddingTop={Platform.OS === 'ios' ? 0 : 4}
             btnStyle={{ paddingLeft: 0 }}
+            titleWrapStyle={{ paddingHorizontal: 0 }}
+						titleStyle={{ marginRight: 0, marginLeft: 0 }}
+						style={{ marginTop: 20 }}
           />
         </View>
         <ChContainer style={styles.pagePadding}>

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

@@ -1,5 +1,22 @@
 import styled from 'styled-components/native'
 
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`
+
 export const ChContainer = styled.View`
   margin-bottom: 60px;
 `

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

@@ -368,7 +368,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [order?.delivery_type])
 
   return (
-    <SafeAreaView>
+    <>
       <View style={styles.wrapperNavbar}>
         <TopHeader>
           <>
@@ -1125,8 +1125,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           />
         </OModal>
       </OrderDetailsContainer>
-    </SafeAreaView>
-
+    </>
   );
 };