ordering-ui-react-native 0.19.7-testing → 0.19.9-release

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

@@ -41,6 +41,16 @@ export const Timestatus = styled.View`
   height: 55px;
   border-radius: 20px;
   top: 5px;
+
+  ${({ timeState }: any) => timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+  ${({ timeState }: any) => timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+  ${({ timeState }: any) => timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
 `
 
 export const AccordionSection = styled.View`

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

@@ -72,7 +72,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const getProductPrice = (product: any) => {
     let subOptionPrice = 0;
-    if (product?.options?.length > 0 && product?.options?.suboptions?.length > 0) {
+    if (product?.options?.length > 0 && product?.options[0]?.suboptions?.length > 0) {
       for (const option of product?.options) {
         for (const suboption of option?.suboptions) {
           subOptionPrice += suboption.quantity * suboption.price;
@@ -118,7 +118,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const onTextLayout = useCallback((e: any) => {
     setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
-  },[]);
+  }, []);
 
   return (
     <AccordionSection>

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

@@ -1,3 +1,5 @@
+
+
 import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,

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

@@ -16,6 +16,7 @@ export const SearchBar = (props: any) => {
     isCancelXButtonShow,
     noBorderShow,
     borderStyle,
+    containerStyle
   } = props;
 
   const [, t] = useLanguage();
@@ -67,7 +68,7 @@ export const SearchBar = (props: any) => {
   });
 
   return (
-    <View style={[styles.container]}>
+    <View style={{ ...styles.container, ...containerStyle}}>
       <OInput
         forwardRef={inputRef}
         value={searchValue}

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

@@ -133,7 +133,8 @@ const StoresListUI = (props: BusinessesListingParams) => {
               lazyLoad
               isCancelXButtonShow={!!searchValue}
               onCancel={() => handleChangeSearch('')}
-              placeholder={t('FIND_BUSINESS', 'Find a business')}
+              placeholder={t('SEARCH', 'Search')}
+              containerStyle={{ width: 210 }}
             />
           </View>
         )}
@@ -148,10 +149,10 @@ const StoresListUI = (props: BusinessesListingParams) => {
             width={12}
             height={12}
             color={theme.colors.skyBlue}
-            style={{ marginRight: 5, marginTop: 3 }}
+            style={{ marginRight: 5 }}
           />
           <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to')}{' '}
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
           </OText>
           <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
             <OText size={12} color={theme.colors.skyBlue}>
@@ -180,6 +181,7 @@ const StoresListUI = (props: BusinessesListingParams) => {
               isBusinessOpen={business?.open}
               setIsUpdateStore={setIsUpdateStore}
               isUpdateStore={isUpdateStore}
+              navigation={navigation}
             />
           ))}
 

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

@@ -39,7 +39,6 @@ import { NotFoundSource } from '../NotFoundSource';
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const ProfileUI = (props: ProfileParams) => {
   const {
-    navigation,
     formState,
     isEdit,
     validationFields,
@@ -47,13 +46,13 @@ const ProfileUI = (props: ProfileParams) => {
     toggleIsEdit,
     cleanFormState,
     handleToggleAvalaibleStatusDriver,
-    userState,
-    isAvailableLoading,
-    isAlsea
+    isAlsea,
+    isShowDriverStatus,
+    navigation
   } = props;
 
-  const [{ user }] = useSession();
-  const [state, t] = useLanguage();
+  const [{ user, sessionLoading }] = useSession();
+  const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const [{ optimizeImage }] = useUtils();
   const { errors } = useForm();
@@ -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)
@@ -115,7 +115,8 @@ const ProfileUI = (props: ProfileParams) => {
         maxWidth: 200,
         includeBase64: true,
       },
-      (response: any) => {
+      (image: any) => {
+        const response = image?.assets[0];
         if (response.didCancel) {
           console.log('User cancelled image picker');
         } else if (response.errorMessage) {
@@ -206,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,
@@ -254,7 +271,7 @@ const ProfileUI = (props: ProfileParams) => {
         />
       )}
 
-      {(formState?.loading || state?.loading) && !validationFields.error && (
+      {(formState?.loading || sessionLoading) && !validationFields.error && (
         <View
           style={{
             backgroundColor: theme.colors.backgroundLight,
@@ -325,7 +342,7 @@ const ProfileUI = (props: ProfileParams) => {
         </View>
       )}
 
-      {!formState?.loading && !state?.loading && !validationFields.error && (
+      {!(formState?.loading || sessionLoading) && !validationFields.error && (
         <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
           <CenterView>
             <OIcon
@@ -353,29 +370,33 @@ const ProfileUI = (props: ProfileParams) => {
                   adjustsFontSizeToFit
                   style={{ ...styles.label, paddingHorizontal: 0 }}>
                   {t(
-                    'AVAILABLE_TO_RECEIVE_ORDERS',
-                    'Available to receive orders',
+                    `${!isShowDriverStatus ? 'NOT_' : ''}AVAILABLE_TO_RECEIVE_ORDERS`,
+                    `${!isShowDriverStatus ? 'You are not ' : ''}Available to receive orders`
                   )}
                 </OText>
               </View>
 
-              {userState.loadingDriver ? (
-                <ActivityIndicator size="small" color={theme.colors.primary} />
-              ) : (
-                <ToggleSwitch
-                  isOn={userState?.result?.result?.available}
-                  onColor={theme.colors.primary}
-                  offColor={theme.colors.offColor}
-                  size="small"
-                  onToggle={() =>
-                    handleToggleAvalaibleStatusDriver &&
-                    handleToggleAvalaibleStatusDriver(
-                      !userState?.result?.result?.available,
-                    )
-                  }
-                  disabled={userState?.loading}
-                  animationSpeed={200}
-                />
+              {isShowDriverStatus && (
+                <>
+                  {userState.loadingDriver ? (
+                    <ActivityIndicator size="small" color={theme.colors.primary} />
+                  ) : (
+                    <ToggleSwitch
+                      isOn={userState?.result?.result?.available}
+                      onColor={theme.colors.primary}
+                      offColor={theme.colors.offColor}
+                      size="small"
+                      onToggle={() =>
+                        handleToggleAvalaibleStatusDriver &&
+                        handleToggleAvalaibleStatusDriver(
+                          !userState?.result?.result?.available,
+                        )
+                      }
+                      disabled={userState?.loading}
+                      animationSpeed={200}
+                    />
+                  )}
+                </>
               )}
             </EnabledStatusDriver>
           )}

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

@@ -0,0 +1,171 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme } from 'styled-components/native'
+import RNRestart from 'react-native-restart'
+import { OModal, OButton, OText, OIcon } from '../shared'
+
+import {
+  Container,
+  ModalContainer,
+  ModalTitle,
+  StatusItemWrapper,
+  StatusText
+} from './styles'
+
+const SocketStatusUI = (props: any) => {
+  const {
+    socketStatus,
+    connectedDate
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [openModal, setOpenModal] = useState(false)
+
+  const styles = StyleSheet.create({
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 30,
+      marginTop: 30
+    },
+  })
+
+  const getStatusColor = (status: number) => {
+    switch (status) {
+      case 0:
+        return '#FF9922';
+      case 1:
+        return '#00D27A';
+      case 2:
+        return '#E63757';
+      default:
+        return '#FF9922';
+    }
+  }
+
+  return (
+    <Container>
+      <TouchableOpacity
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.inputChat,
+          borderRadius: 7.6,
+          marginVertical: 10,
+          paddingVertical: 10,
+          paddingHorizontal: 15,
+        }}
+        activeOpacity={0.6}
+        onPress={() => setOpenModal(true)}
+      >
+        <OText
+          style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
+        >
+          {t('CONNECTION_STATUS_SHORT', 'Status')}
+        </OText>
+        <MaterialIcon
+          name='circle'
+          size={12}
+          color={getStatusColor(socketStatus)}
+          style={{ marginLeft: 8 }}
+        />
+      </TouchableOpacity>
+
+      <OModal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        entireModal
+        customClose
+      >
+        <ModalContainer nestedScrollEnabled={true}>
+          <TouchableOpacity
+            onPress={() => setOpenModal(false)}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <View>
+            <ModalTitle>{t('CONNECTION_STATUS', 'Connection status')}</ModalTitle>
+            <OText style={{ marginBottom: 20 }}>
+              {t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}
+            </OText>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(1)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('OK', 'Ok')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_OK', 'The websocket works normally.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(0)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('CONNECTING', 'Connecting')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(2)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('DISCONNECTED', 'Disconnected')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</OText>
+              </View>
+            </StatusItemWrapper>
+
+            <View style={{ flexDirection: 'row', marginTop: 50 }}>
+              <OButton
+                onClick={() => setOpenModal(false)}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.primary }}
+                style={{ borderRadius: 8, height: 48 }}
+                text={t('CLOSE', 'Close')}
+              />
+               <OButton
+                onClick={() => RNRestart.Restart()}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
+                text={t('UPDATE', 'Update')}
+              />
+            </View>
+          </View>
+        </ModalContainer>
+      </OModal>
+    </Container>
+  )
+}
+
+export const WebsocketStatus = (props: any) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 10px;
+`
+export const StatusItemWrapper = styled.View`
+  flex-direction: row;
+  margin-bottom: 16px;
+`
+export const StatusText = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: ${(props: any) => props.theme.colors.textGray};
+`

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

@@ -57,6 +57,8 @@ export interface ProfileParams {
   showField?: any;
   isRequiredField?: any;
   isAlsea?: boolean;
+  isShowDriverStatus?: boolean;
+  isFocused?: boolean;
 }
 
 export interface AddressListParams {
@@ -172,6 +174,7 @@ export interface BusinessControllerParams {
   isBusinessOpen?: boolean;
   businessWillCloseSoonMinutes?: number;
   updateBusiness?: (id: any, value: any) => {};
+  navigation?: any;
 }
 export interface BusinessProductsListingParams {
   navigation?: any;
@@ -365,6 +368,12 @@ export interface PreviousMessagesParams {
   loadMessages?: (id: any) => {};
   handleReorder?: (order: any) => {};
   onNavigationRedirect?: (route: string, params?: any) => {};
+  getOrders?: any;
+  loading?: boolean;
+  reload?: boolean;
+  tabs?: any;
+  loadMore: any
+  error?: boolean
 }
 export interface OrderDetailsParams {
   handleUpdateLocationDriver?: () => {};
@@ -485,6 +494,7 @@ export interface FloatingButtonParams {
   firstColorCustom?: string;
   secondColorCustom?: string;
   paddingBottomIos?: any;
+  isHideRejectButtons?: boolean
 }
 export interface MomentOptionParams {
   navigation: any;

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -197,7 +197,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{isFarAway && (
 				<FarAwayMessage style={styles.farAwayMsg}>
 					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 				</FarAwayMessage>
 			)}
 			{!auth && (

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

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -155,7 +155,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<View style={styles.wrapperOrderOptions}>

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

@@ -50,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions