ordering-ui-react-native 0.21.70 → 0.21.71-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.70",
+  "version": "0.21.71-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -52,13 +52,13 @@
     "@segment/analytics-react-native": "2.1.11",
     "@segment/sovran-react-native": "0.2.6",
     "@sentry/react-native": "^2.6.0",
-    "@stripe/stripe-react-native": "^0.2.0",
+		"@stripe/stripe-react-native": "0.23.0",
     "@types/react-native-loading-spinner-overlay": "^0.5.2",
     "@types/react-native-snap-carousel": "^3.8.4",
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#development",
+    "ordering-components": "github:Ordering-Inc/ordering-components#release",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",
@@ -76,7 +76,7 @@
     "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
-    "react-native-date-picker": "^4.2.13",
+    "react-native-date-picker": "4.2.14",
     "react-native-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",
@@ -86,12 +86,12 @@
     "react-native-gesture-handler": "^1.8.0",
     "react-native-get-random-values": "1.8.0",
     "react-native-gifted-chat": "^0.16.3",
-    "react-native-google-places-autocomplete": "^2.1.3",
+    "react-native-google-places-autocomplete": "2.1.3",
     "react-native-html-to-pdf": "^0.10.0",
     "react-native-image-picker": "^4.0.6",
     "react-native-intersection-observer": "^0.0.9",
     "react-native-lightbox": "^0.8.1",
-    "react-native-linear-gradient": "^2.5.6",
+    "react-native-linear-gradient": "2.7.3",
     "react-native-loading-spinner-overlay": "^2.0.0",
     "react-native-map-link": "^2.8.2",
     "react-native-maps": "^0.28.0",
@@ -102,7 +102,6 @@
     "react-native-phone-number-input": "^2.0.0",
     "react-native-picker-select": "^8.0.4",
     "react-native-print": "^0.9.0",
-    "react-native-reanimated": "^1.13.1",
     "react-native-recaptcha-that-works": "^1.2.0",
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "^3.1.8",

package/src/DeliveryApp.tsx

@@ -7,7 +7,8 @@
  */
 
 import * as React from 'react';
-import { LogBox } from 'react-native';
+import { LogBox, Platform } from 'react-native';
+import * as Sentry from "@sentry/react-native";
 import { OrderingProvider } from 'ordering-components/native';
 import RNBootSplash from "react-native-bootsplash";
 
@@ -22,6 +23,47 @@ import theme from './theme.json';
 import AppContainer from './AppContainer';
 import { FacebookPixel } from './components/FacebookPixel';
 
+Sentry.init({
+  environment: Platform.OS === 'ios' ? 'ios' : 'android',
+  dsn: 'https://e5e1115dc93b49109f4ab65f2098bef9@o460529.ingest.sentry.io/5722123',
+  release: 'ordering-ui-native@' + process.env.npm_package_version,
+  ignoreErrors: [
+    'is not defined',
+    'is not a function',
+    'can\'t find variable',
+    'objects are not valid',
+    'element type is invalid',
+    'requiring module',
+    'has not been registered',
+    'failed to connect to debugger!',
+    'rendered more hooks than',
+    'rendered fewer hooks than',
+    'should have a queue',
+    'the OS most likely terminated',
+    'Connection timed out',
+    'java.io.EOFException',
+    'Abort',
+    'Segfault',
+    'Failed to allocate a',
+    'Application Not Responding',
+    'connection no longer valid',
+    'IllegalInstruction',
+    'React.Children.only expected to receive a single React element child.',
+    'unrecognized selector sent to instance'
+  ],
+  tracesSampleRate: 0.2,
+  // Release health
+  enableAutoSessionTracking: true,
+  // Sessions close after app is 10 seconds in the background.
+  sessionTrackingIntervalMillis: 10000,
+
+  integrations: [
+    new Sentry.ReactNativeTracing({
+      routingInstrumentation: reactNavigationV5Instrumentation,
+    })
+  ]
+});
+
 LogBox.ignoreLogs([
   'Sending \`onAnimatedValueUpdate` with no listeners registered.',
   'Non-serializable values were found in the navigation state.',

package/src/components/BusinessesListing/index.tsx

@@ -191,7 +191,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>
 				)}
       </OrderControlContainer>

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/src/components/StripeMethodForm/index.tsx

@@ -3,7 +3,6 @@ import { useLanguage, useConfig, useOrder } from 'ordering-components/native'
 import { useGooglePay, useApplePay } from '@stripe/stripe-react-native'
 import { Platform } from 'react-native';
 import { StripeMethodFormParams } from '../../types';
-import { android_app_id } from '../../config.json'
 
 export const StripeMethodForm = (props: StripeMethodFormParams) => {
   const {
@@ -17,7 +16,9 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     placeByMethodPay,
     methodPaySupported,
     setPlaceByMethodPay,
-    cartTotal
+    cartTotal,
+    androidAppId,
+    businessNames
   } = props
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
@@ -61,7 +62,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
       })
       const { error } = await initGooglePay({
         testEnv: devMode,
-        merchantName: android_app_id,
+        merchantName: androidAppId,
         countryCode: 'US',
         billingAddressConfig: {
           format: 'FULL',
@@ -152,7 +153,8 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
 
     const { error, paymentMethod } = await presentApplePay({
       cartItems: [{
-        label: t('CART', 'Cart'),
+        label: businessNames ? `${businessNames.join(', ')} ${t('VIA_CHEW_APP', 'via Chew App')}`
+        : `${cart?.business?.name} ${t('VIA_CHEW_APP', 'via Chew App')}`,
         amount: cartTotal?.toString?.() ?? cart?.balance?.toString() ?? cart?.total?.toString?.(),
         paymentType: 'Immediate'
       }],

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/types/index.tsx

@@ -494,5 +494,7 @@ export interface StripeMethodFormParams {
   placeByMethodPay?: any
   methodPaySupported?: any,
   setPlaceByMethodPay?: any,
-  cartTotal?: number
+  cartTotal?: number,
+  androidAppId?: string,
+  businessNames?: Array<string>
 }

package/themes/business/index.tsx

@@ -29,6 +29,7 @@ import { OrderSummary } from './src/components/OrderSummary';
 import { PhoneInputNumber } from './src/components/PhoneInputNumber';
 import { PreviousMessages } from './src/components/PreviousMessages';
 import { PreviousOrders } from './src/components/PreviousOrders';
+import { PrinterSettings } from './src/components/PrinterSettings';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
 import { ReviewCustomer } from './src/components/ReviewCustomer'
 import { SearchBar } from './src/components/SearchBar';
@@ -43,6 +44,7 @@ import { NewOrderNotification } from './src/components/NewOrderNotification';
 import { DriverSchedule } from './src/components/DriverSchedule';
 import { ScheduleBlocked } from './src/components/ScheduleBlocked';
 import { OrderDetailsLogistic } from './src/components/OrderDetailsLogistic'
+import { Sessions } from './src/components/Sessions';
 //OComponents
 import {
   OText,
@@ -102,10 +104,12 @@ export {
   PhoneInputNumber,
   PreviousMessages,
   PreviousOrders,
+  PrinterSettings,
   ProductItemAccordion,
   ReviewCustomer,
   SafeAreaContainerLayout,
   SearchBar,
+  Sessions,
   SignupForm,
   StoresList,
   UserFormDetailsUI,

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

@@ -31,6 +31,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     notShowCustomerPhone,
     orderTitle,
     appTitle,
+    isLoadingOrder
   } = props;
 
   const [, t] = useLanguage();
@@ -277,7 +278,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     }
 
     bodyToSend.id = orderId;
-    handleUpdateOrder && handleUpdateOrder(bodyToSend.status, bodyToSend);
+    handleUpdateOrder?.(bodyToSend.status, bodyToSend);
   };
 
   useEffect(() => {
@@ -427,13 +428,15 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             {action === 'accept' && (
               <View style={{ height: 300, justifyContent: 'center' }}>
                 <Timer onPress={() => openTimerIOnput()}>
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
+                  <OText weight="600" size={55}>
                     {hour}
                   </OText>
-                  {hour.length > 0 && <OText size={55}>:</OText>}
-                  <OText weight="600" style={{ textAlign: 'center' }} size={55}>
+                  {hour.length > 0 && <OText size={55} style={{ marginBottom: 10 }}>:</OText>}
+                  <OText weight="600" size={55}>
                     {min}
                   </OText>
+                  {time?.length > 2 && <OText style={{ position: 'absolute', bottom: 60, left: 55 }}>{t('HOURS', 'Hours')}</OText>}
+                  <OText style={{ position: 'absolute', bottom: 60, right: time?.length > 2 ? 55 : 95 }}>{t('MINUTES', 'Minutes')}</OText>
                 </Timer>
               </View>
             )}
@@ -517,7 +520,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             ...styles.bottomParent,
             marginBottom: Platform.OS === 'ios'
               ? 30 : (keyboardState.height === 0)
-                ? isPage ? 0 : 30
+                ? isPage ? 0 : 40
                 : keyboardState.height - (isPage ? 20 : -10)
           }}
         >
@@ -529,7 +532,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             style={{ borderRadius: 7, height: 45 }}
             parentStyle={{ width: '100%' }}
             textStyle={{ color: '#FFF', fontSize: 18 }}
-            isDisabled={showTextArea && !comments}
+            isDisabled={(showTextArea && !comments) || isLoadingOrder}
             onClick={() => handleAcceptOrReject()}
           />
         </View>

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

@@ -10,6 +10,7 @@ export const TopActions = styled.View`
 `
 
 export const Timer = styled.TouchableOpacity`
+  position: relative;
   padding: 40px;
   justify-content: center;
   flex-direction: row;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, ScrollView, Dimensions, TouchableOpacity, Platform } from 'react-native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { SearchBar } from '../SearchBar';
@@ -190,6 +190,7 @@ export const BusinessProductList = (props: any) => {
   const businessProductListProps = {
     ...props,
     UIComponent: BusinessProductListUI,
+    isIos: Platform.OS === 'ios'
   };
 
   return <StoreProductList {...businessProductListProps} />;

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

@@ -96,7 +96,9 @@ const ChatUI = (props: MessagesParams) => {
     20: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Order customer almost arrived to business'),
     21: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Order customer arrived to business'),
     22: t('ORDER_LOOKING_FOR_DRIVER', 'Order looking for driver'),
-    23: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
+    23: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
+    24: t('ORDER_DRIVER_WAITING_FOR_ORDER', 'Driver waiting for order'),
+    25: t('ORDER_ACCEPTED_BY_DRIVER_COMPANY', 'Accepted by driver company')
   }
 
   const getLogisticTag = (status: any) => {

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

@@ -30,7 +30,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     isBusinessMarker,
     isToFollow,
     handleViewActionOrder,
-    updateDriverPosition,
     driverUpdateLocation,
     setDriverUpdateLocation,
   } = props;
@@ -70,11 +69,20 @@ export const DriverMap = (props: GoogleMapsParams) => {
     stopFollowUserLocation,
   } = useLocation();
 
-  const origin = {
-    latitude: initialPosition.latitude,
-    longitude: initialPosition.longitude,
+  const destination = {
+    latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0
   };
-  const destination = { latitude: location.lat, longitude: location.lng };
+
+  const parsedInitialPosition = {
+    latitude: typeof initialPosition.latitude === 'string' ? parseFloat(initialPosition.latitude) || 0 : initialPosition.latitude || 0,
+    longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
+  }
+
+  const parsedUserLocation = {
+    latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
+    longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
+  }
 
   useEffect(() => {
     if (isToFollow) {
@@ -162,7 +170,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (driverUpdateLocation.error) return;
 
     calculateDistance(
-      { lat: userLocation.latitude, lng: userLocation.longitude },
+      { lat: parsedUserLocation.latitude, lng: parsedUserLocation.longitude },
       destination,
     );
     // geocodePosition(userLocation);
@@ -170,13 +178,13 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (!following.current) return;
     fitCoordinates();
 
-    const { latitude, longitude } = userLocation;
+    const { latitude, longitude } = parsedUserLocation;
 
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
 
-  }, [userLocation]);
+  }, [parsedUserLocation]);
 
   const handleArrowBack: any = () => {
     setDriverUpdateLocation?.({
@@ -242,8 +250,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
         [
           { latitude: location.lat, longitude: location.lng },
           {
-            latitude: initialPosition.latitude,
-            longitude: initialPosition.longitude,
+            latitude: parsedInitialPosition.latitude,
+            longitude: parsedInitialPosition.longitude,
           },
         ],
         {
@@ -256,7 +264,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (initialPosition.latitude !== 0 && autoFit.current) {
+      if (parsedInitialPosition.latitude !== 0 && autoFit.current) {
         if (mapRef.current) {
           fitCoordinates();
           autoFit.current = false;
@@ -264,7 +272,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       }
     }, 1000);
     return () => clearInterval(interval);
-  }, [initialPosition]);
+  }, [parsedInitialPosition]);
 
   const fitCoordinatesZoom = () => {
     following.current = false;
@@ -347,8 +355,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ref={mapRef}
             provider={PROVIDER_GOOGLE}
             initialRegion={{
-              latitude: initialPosition.latitude,
-              longitude: initialPosition.longitude,
+              latitude: parsedInitialPosition.latitude,
+              longitude: parsedInitialPosition.longitude,
               latitudeDelta: 0.001,
               longitudeDelta: 0.001 * ASPECT_RATIO,
             }}
@@ -370,8 +378,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
               <>
                 <Marker
                   coordinate={{
-                    latitude: location.lat,
-                    longitude: location.lng,
+                    latitude: typeof destination?.latitude !== 'object' ? destination?.latitude : 0,
+                    longitude: typeof destination?.longitude !== 'object' ? destination?.latitude : 0
                   }}
                   title={location.title}>
                   <Icon
@@ -388,7 +396,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
                     />
                   </View>
                 </Marker>
-                <Marker coordinate={userLocation}>
+                <Marker coordinate={{
+                  latitude: typeof parsedUserLocation?.latitude !== 'object' ? parsedUserLocation?.latitude : 0,
+                  longitude: typeof parsedUserLocation?.longitude !== 'object' ? parsedUserLocation?.latitude : 0
+                }}>
                   <View style={styles.driverIcon}>
                     <OIcon
                       style={styles.image}
@@ -402,8 +413,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ) : (
               <Marker
                 coordinate={{
-                  latitude: userLocation.latitude,
-                  longitude: userLocation.longitude,
+                  latitude: typeof parsedUserLocation?.latitude !== 'object' ? parsedUserLocation?.latitude : 0,
+                  longitude: typeof parsedUserLocation?.longitude !== 'object' ? parsedUserLocation?.latitude : 0
                 }}
                 title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
               />
@@ -517,8 +528,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
-              sourceLatitude: userLocation.latitude,
-              sourceLongitude: userLocation.longitude,
+              sourceLatitude: parsedUserLocation.latitude,
+              sourceLongitude: parsedUserLocation.longitude,
               naverCallerName: 'com.deliveryapp',
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
@@ -540,7 +551,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
             secondButton={true}
             firstColorCustom={theme.colors.red}
             secondColorCustom={theme.colors.green}
-            widthButton={isHideRejectButtons ? '100%': '45%'}
+            widthButton={isHideRejectButtons ? '100%' : '45%'}
             isPadding
             isHideRejectButtons={isHideRejectButtons}
           />

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

@@ -50,12 +50,16 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const ASPECT_RATIO = width / height;
   const [isMapReady, setIsMapReady] = useState(false);
   const [markerPosition, setMarkerPosition] = useState({
-    latitude: locations ? locations[locations.length - 1].lat : location.lat,
-    longitude: locations ? locations[locations.length - 1].lng : location.lng,
+    latitude: locations 
+      ? typeof locations[locations.length - 1].lat === 'string' ? parseFloat(locations[locations.length - 1].lat) || 0 : locations[locations.length - 1].lat || 0
+      : typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: locations 
+      ? typeof locations[locations.length - 1].lng === 'string' ? parseFloat(locations[locations.length - 1].lng) || 0 : locations[locations.length - 1].lng || 0
+      : typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0,
   });
   const [region, setRegion] = useState({
-    latitude: location.lat,
-    longitude: location.lng,
+    latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0,
     latitudeDelta: 0.001,
     longitudeDelta: 0.001 * ASPECT_RATIO,
   });
@@ -78,12 +82,15 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   let MARKERS =
     locations &&
     locations.map((location: { lat: number; lng: number; level: number }) => {
-      return location.level === 4 && driverLocation?.lat
+      return location.level === 4 && driverLocation?.lat && driverLocation?.lng
         ? {
-          latitude: driverLocation?.lat,
-          longitude: driverLocation?.lng,
+          latitude: typeof driverLocation?.lat === 'string' ? parseFloat(driverLocation?.lat) || 0 : driverLocation?.lat,
+          longitude: typeof driverLocation?.lng === 'string' ? parseFloat(driverLocation?.lng) || 0 : driverLocation?.lng,
         }
-        : { latitude: location.lat, longitude: location.lng };
+        : {
+          latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat,
+          longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng
+        };
     });
 
   const handleArrowBack: any = () => {

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

@@ -138,7 +138,10 @@ export const Home = (props: any) => {
                       placeholder={t('PROJECT_NAME', 'Project Name')}
                       icon={theme.images.general.project}
                       iconColor={theme.colors.arrowColor}
-                      onChange={(e: any) => onChange(e?.target?.value)}
+                      onChange={(e: any) => {
+                        const project = e?.target?.value?.replace(/\s/g, '')
+                        onChange(project)
+                      }}
                       selectionColor={theme.colors.primary}
                       color={theme.colors.white}
                       value={value}
@@ -148,6 +151,7 @@ export const Home = (props: any) => {
                       autoCapitalize='none'
                       blurOnSubmit={false}
                       onSubmitEditing={() => handleSubmit(onSubmit)()}
+                      isValueSync
                     />
                   )}
                 />

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

@@ -25,8 +25,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
       value: language?.code,
       label: language?.name,
       inputLabel: language?.code.toUpperCase(),
-      countryCode: langCountries.find(item => item.value == language?.code)
-        ?.countryCode,
+      countryCode: langCountries.find(item => item.value == language?.code)?.countryCode,
     };
   });
 
@@ -50,7 +49,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     },
   });
 
-  return (
+  return !languagesState?.loading && languagesState?.languages?.length > 1 && (
     <Container style={{ backgroundColor: theme.colors.inputChat }}>
       {languagesState?.languages && (
         <CountryPicker