ordering-ui-react-native 0.21.72 → 0.21.74

package/package.json

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

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

@@ -33,6 +33,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
   const [state, setState] = useState({
     selectedPrinter: { url: undefined },
   });
+  const paymethodsLength = order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
 
   const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
     if (name !== 'No') {
@@ -83,6 +84,24 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
   const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''
     }`?.replace('  ', ' ')?.trim() ?? ''
 
+  const walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet')
+    },
+    credit_point: {
+      name: t('POINTS_WALLET', 'Points Wallet')
+    }
+  }
+
+  const handlePaymethodsListString = () => {
+    const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
+      return paymethod?.wallet_event
+        ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
+        : t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+    })
+    return paymethodsList.join(', ')
+  }
+
   const orderSummary = () => {
     return `
     <div>
@@ -99,7 +118,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         : parseDate(order?.delivery_datetime, { utc: false })
       }
           </br>
-          ${t('PAYMENT_METHOD')}: ${order?.paymethod?.name}
+          ${paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD'}: ${handlePaymethodsListString()}
         </p>
 
         <h1>${t('CUSTOMER_DETAILS', 'Customer details')}</h1>
@@ -114,8 +133,8 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         } </br>`
         : ''
       }
-         ${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address} 
-         </br> 
+         ${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address}
+         </br>
          ${!!order?.customer?.internal_number
         ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number
         } </br>`
@@ -379,10 +398,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
                 }`}
             </OText>
 
-            <OText style={{ marginBottom: 5 }}>{`${t('PAYMENT_METHOD')}: ${t(
-              order?.paymethod?.name.toUpperCase(),
-              order?.paymethod?.name,
-            )}`}</OText>
+            <OText style={{ marginBottom: 5 }}>{`${t(`${paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD'}`, `${paymethodsLength > 1 ? 'Payment methods' : 'Payment method'}`)}: ${handlePaymethodsListString()}`}</OText>
           </OrderHeader>
 
           <OrderCustomer>

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/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/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>
-
+    </>
   );
 };
 

package/themes/original/src/components/shared/OButton.tsx

@@ -27,9 +27,9 @@ const StyledButton = styled.View<Props>`
 	padding-left: 20px;
 	padding-right: 20px;
 	position: relative;
-	${(props: any) => props?.theme?.general?.components?.buttons?.borderRadius && css`
-      border-radius: ${props?.theme?.general?.components?.buttons?.borderRadius}px;
-  `}
+	${(props: any) => props?.borderRadius && css`
+      border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
+  	`}
 `
 const StyledButtonDisabled = styled(StyledButton)`
 	background-color: ${(props: any) => props.theme.colors.disabled};

package/themes/original/src/components/shared/OInput.tsx

@@ -53,9 +53,9 @@ const Wrapper = styled.Pressable`
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	${(props: any) => props.theme?.general?.components?.inputs?.borderRadius && css`
-      border-radius: ${props?.theme?.general?.components?.inputs?.borderRadius};
-  `}
+	${(props: any) => props?.borderRadius && css`
+      border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
+  	`}
 `;
 
 const OInput = (props: Props): React.ReactElement => {
@@ -70,6 +70,7 @@ const OInput = (props: Props): React.ReactElement => {
 					? props.borderColor
 					: inputFocused ? theme.colors.primary : theme.colors.border,
 				...props.style,
+				borderRadius: parseInt(theme?.general?.components?.inputs?.borderRadius) || props.style?.borderRadius
 			}}>
 			{props.icon ? (
 				<OIcon
@@ -104,9 +105,9 @@ const OInput = (props: Props): React.ReactElement => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={{
-          ...(theme?.general?.components?.inputs?.color && {
-            color: theme?.general?.components?.inputs?.color
-          }),
+					...(theme?.general?.components?.inputs?.color && {
+						color: theme?.general?.components?.inputs?.color
+					}),
 					...props?.inputStyle
 				}}
 				onFocus={() => setInputFocused(true)}