ordering-ui-react-native 0.20.1-release → 0.20.3-release

package/package.json

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

package/src/components/PaymentOptionsWebView/index.tsx

@@ -156,6 +156,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
                 user_id: user?.id,
                 user_name: user?.name
               },
+              xappx: ordering?.appId,
               currency: configs?.stripe_currency?.value || currency,
               userToken: token,
               clientId: webviewPaymethod?.credentials?.client_id,

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

@@ -11,6 +11,7 @@ import {
   useToast,
   useLanguage,
   useUtils,
+  useConfig
 } from 'ordering-components/native';
 import {
   CenterView,
@@ -55,6 +56,7 @@ const ProfileUI = (props: ProfileParams) => {
   const [, t] = useLanguage();
   const [, { showToast }] = useToast();
   const [{ optimizeImage }] = useUtils();
+  const [{ configs }] = useConfig()
   const { errors } = useForm();
   const theme = useTheme();
 
@@ -70,7 +72,7 @@ const ProfileUI = (props: ProfileParams) => {
   const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
   const [phoneToShow, setPhoneToShow] = useState('');
   const [openModal, setOpenModal] = useState(false)
-
+  const allowDriverUpdateData = user?.level !== 4 || configs?.allow_driver_update_data?.value === "1"
   useEffect(() => {
     if (phoneInputData.phone.cellphone) {
       const codeNumberPhone = phoneInputData.phone.cellphone.slice(0, 3);
@@ -116,14 +118,14 @@ const ProfileUI = (props: ProfileParams) => {
         includeBase64: true,
       },
       (image: any) => {
-        const response = image?.assets[0];
-        if (response.didCancel) {
+        const response = image?.assets?.[0];
+        if (response?.didCancel) {
           console.log('User cancelled image picker');
-        } else if (response.errorMessage) {
+        } else if (response?.errorMessage) {
           console.log('ImagePicker Error: ', response.errorMessage);
           showToast(ToastType.Error, response.errorMessage);
         } else {
-          if (response.uri) {
+          if (response?.uri) {
             const url = `data:${response.type};base64,${response.base64}`;
             handleButtonUpdateClick(null, true, url);
           } else {
@@ -352,14 +354,15 @@ const ProfileUI = (props: ProfileParams) => {
               height={150}
               style={{ borderRadius: 7.2 }}
             />
-
-            <OIconButton
-              icon={theme.images.general.camera}
-              borderColor={theme.colors.clear}
-              iconStyle={{ width: 21, height: 21 }}
-              style={{ maxWidth: 40 }}
-              onClick={() => handleImagePicker()}
-            />
+            {allowDriverUpdateData && (
+              <OIconButton
+                icon={theme.images.general.camera}
+                borderColor={theme.colors.clear}
+                iconStyle={{ width: 21, height: 21 }}
+                style={{ maxWidth: 40 }}
+                onClick={() => handleImagePicker()}
+              />
+            )}
           </CenterView>
 
           {user?.level === 4 && (
@@ -485,7 +488,7 @@ const ProfileUI = (props: ProfileParams) => {
               />
             </View>
           )}
-          {!validationFields.loading && !isEdit && (
+          {!validationFields.loading && !isEdit && allowDriverUpdateData && (
             <EditButton>
               <OButton
                 text={t('EDIT', 'Edit')}

package/themes/original/index.tsx

@@ -100,7 +100,7 @@ import { MultiCart } from './src/components/MultiCart'
 import { PageBanner } from './src/components/PageBanner'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
 import { DatePickerUI } from './src/components/DatePicker'
-
+import { WebsocketStatus } from './src/components/WebsocketStatus';
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
 
 import { FormInput, FormSide, ButtonsWrapper, LoginWith, OTab, OTabs } from './src/components/LoginForm/styles';
@@ -265,6 +265,7 @@ export {
 	PageBanner,
 	MyOrders,
 	MultiCart,
+	WebsocketStatus,
 	ORDER_TYPES,
 	USER_TYPE,
 

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

@@ -1,27 +1,37 @@
 import React from 'react';
 import FastImage from 'react-native-fast-image'
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import {
 	AddressDetails as AddressDetailsController,
 	useOrder,
 	useLanguage,
 } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
 
 import { ADContainer, ADHeader, ADAddress, ADMap } from './styles';
-
-import { useTheme } from 'styled-components/native';
-import { OText, OIcon } from '../shared';
-import { useWindowDimensions } from 'react-native';
+import { OText } from '../shared';
+import { getTypesText } from '../../utils';
 
 const AddressDetailsUI = (props: any) => {
-	const { navigation, addressToShow, isCartPending, googleMapsUrl, apiKey } =
-		props;
+	const {
+		navigation,
+		addressToShow,
+		isCartPending,
+		googleMapsUrl,
+		apiKey
+	} = props;
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
+	const [{ options }] = useOrder();
 	const [, t] = useLanguage();
 	const { width } = useWindowDimensions();
 
+	const orderTypeText = {
+		key: getTypesText(options?.type || 1),
+		value: t(getTypesText(options?.type || 1), 'Delivery')
+	}
+
 	const styles = StyleSheet.create({
 		productStyle: {
 			width,
@@ -39,7 +49,7 @@ const AddressDetailsUI = (props: any) => {
 						lineHeight={24}
 						color={theme.colors.textNormal}
 					>
-						{t('DELIVERY_ADDRESS', 'Delivery address')}
+						{t(`${orderTypeText.key}_ADDRESS`, `${orderTypeText.value} address`)}
 					</OText>
 				)}
 			</ADHeader>

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

@@ -247,7 +247,7 @@ export const BusinessBasicInformation = (
 								<View style={styles.tiktokIcon}>
 									<OIcon
 										src={theme.images.general.tiktok}
-										style={{ width: 10, height: 12 }}
+										style={{ width: 10, height: 12, bottom: 1 }}
 										cover
 									/>
 								</View>

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

@@ -237,7 +237,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection={!isFiltMode}
+                      // enableIntersection={!isFiltMode}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler, ScrollView } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -534,7 +534,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             </View>
           </FiltProductsContainer>
         )}
-        <IOScrollView
+        <ScrollView
           stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
           style={{
             ...styles.mainContainer,
@@ -662,7 +662,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           {isOpenFiltProducts && (
             <BackgroundGray isIos={Platform.OS === 'ios'} />
           )}
-        </IOScrollView>
+        </ScrollView>
         {viewOrderButtonVisible && (
           <View style={{ marginBottom: 0 }}>
             <FloatingButton

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

@@ -219,7 +219,7 @@ const CartUI = (props: any) => {
 
   return (
     <CContainer>
-      {openUpselling && (
+      {!!openUpselling && (
         <UpsellingProducts
           handleUpsellingPage={handleUpsellingPage}
           openUpselling={openUpselling}

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

@@ -859,7 +859,7 @@ const CheckoutUI = (props: any) => {
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
-								{cartsWithProducts && cart?.products?.length === 0 ? (
+								{cartsWithProducts?.length > 0 && cart?.products?.length === 0 ? (
 									<NotFoundSource
 										content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
 										btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
@@ -937,13 +937,15 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 
-								{!cart?.valid_products && cart?.status !== 2 && (
-									<OText
-										color={theme.colors.error}
-										size={12}
-									>
-										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
-									</OText>
+								{!cart?.valid_products && cart?.status !== 2 && cart?.total !== 0 && (
+									<>
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
+										</OText>
+									</>
 								)}
 								{cart?.valid_preorder !== undefined && !cart?.valid_preorder && (
 									<OText

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

@@ -310,7 +310,7 @@ const MultiCheckoutUI = (props: any) => {
           </TopHeader>
         </View>
       </SafeAreaView>
-      <Container pt={0} noPadding onScroll={handleScroll}>
+      <Container pt={0} noPadding onScroll={handleScroll} showsVerticalScrollIndicator={false}>
         <View style={styles.wrapperNavbar}>
           <NavBar
             hideArrowLeft

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

@@ -62,8 +62,6 @@ import { IOScrollView } from 'react-native-intersection-observer';
 
 const windowWidth = Dimensions.get('window').width;
 
-
-
 export const ProductOptionsUI = (props: any) => {
 	const {
 		navigation,
@@ -441,7 +439,7 @@ export const ProductOptionsUI = (props: any) => {
 		selOpt
 	}
 
-	const suboptionsLength = product.extras.reduce((acc : number, extras : any) => acc + extras?.options?.reduce((accSuboptions : number, options: any) => accSuboptions + options?.suboptions?.length, 0), 0)
+	const suboptionsLength = product?.extras?.reduce((acc : number, extras : any) => acc + extras?.options?.reduce((accSuboptions : number, options: any) => accSuboptions + options?.suboptions?.length, 0), 0)
 
 	return (
 		<SafeAreaView style={{ flex: 1 }}>

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

@@ -169,7 +169,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<View style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					onClick={() => handleClickproduct()}
@@ -340,7 +340,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					</Placeholder>
 				</View>
 			)}
-		</InView>
+		</View>
 	);
 }, SingleProductCardPropsAreEqual);
 

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

@@ -20,7 +20,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import FontAwesome from 'react-native-vector-icons/FontAwesome'
 import FastImage from 'react-native-fast-image'
 import { OAlert } from '../../../../../src/components/shared'
-
+import { WebsocketStatus } from '../WebsocketStatus'
 import {
 	OIcon,
 	OText,
@@ -270,6 +270,7 @@ const ProfileListUI = (props: ProfileParams) => {
 					<View style={{ height: 17 }} />
 				</Actions>
 			</ListWrap>
+			<WebsocketStatus />
 			<OAlert
 				open={confirm.open}
 				title={confirm.title}

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

@@ -0,0 +1,172 @@
+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,
+          marginHorizontal: 15
+        }}
+        activeOpacity={0.6}
+        onPress={() => setOpenModal(true)}
+      >
+        <OText
+          style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
+        >
+          {t('CONNECTION_STATUS', '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/original/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};
+`