ordering-ui-react-native 0.16.77 → 0.16.78-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.77",
+  "version": "0.16.78-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -58,7 +58,7 @@
     "@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",
@@ -114,7 +114,7 @@
     "react-native-tracking-transparency": "^0.1.1",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
-    "react-native-webview": "^11.22.7",
+    "react-native-webview": "^11.6.4",
     "react-native-youtube-iframe": "^2.2.2",
     "rn-placeholder": "^3.0.3",
     "styled-components": "^5.1.1",
@@ -126,8 +126,8 @@
     "@babel/core": "^7.11.6",
     "@babel/runtime": "^7.11.2",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-native": "^0.63.25",
     "@types/react-native-calendar-picker": "^7.0.2",
     "babel-jest": "^26.3.0",

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/ActiveOrders/styles.tsx

@@ -1,10 +1,6 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
-export const ActiveOrdersContainer = styled.ScrollView`
-  margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '450px'};
-  max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
-`
+export const ActiveOrdersContainer = styled.ScrollView``
 
 export const Card = styled.TouchableOpacity`
   flex: 1;
@@ -13,25 +9,24 @@ export const Card = styled.TouchableOpacity`
   margin-right: 10px;
   min-width: 320px;
   width: 320px;
-  height: ${({ isMiniCard }: { isMiniCard: boolean }) => !isMiniCard ? '100px' : '200px'};
+  margin-bottom: 10px;
+  ${({ isMiniCard }: { isMiniCard: boolean }) => !isMiniCard && css`
+    padding: 10px 0;
+  `};
 `
 
 export const Map = styled.View`
   flex: 1;
-  height: 125px;
-  margin-bottom: 10px;
 `
 
 export const Information = styled.View`
   flex-direction: row;
   flex: 1;
-  height: 100px;
   align-items: center;
   padding: 10px;
 `
 
-export const Logo = styled.View`
-`
+export const Logo = styled.View``
 
 export const OrderInformation = styled.View`
   flex-direction: row;
@@ -40,8 +35,7 @@ export const OrderInformation = styled.View`
   padding-left: 10px;
 `
 
-export const BusinessInformation = styled.View`
-`
+export const BusinessInformation = styled.View``
 
 export const Price = styled.View`
   justify-content: space-between;

package/src/components/BusinessInformation/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import {
   BusinessInformation as BusinessInformationController,
-  useLanguage
+  useLanguage,
+  useConfig
 } from 'ordering-components/native'
 import { OText } from '../shared'
 import {
@@ -26,6 +27,8 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
+	const [{ configs }] = useConfig();
+
   const daysOfWeek = [
     t('SUNDAY_ABBREVIATION', 'Sun'),
     t('MONDAY_ABBREVIATION', 'Mon'),
@@ -35,9 +38,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
     t('FRIDAY_ABBREVIATION', 'Fri'),
     t('SATURDAY_ABBREVIATION', 'Sat')
   ]
-  const scheduleFormatted = ({ hour, minute } : {hour : number | string, minute : number | string}) => {
-    const checkTime = (val : number | string) => val < 10 ? `0${val}` : val
-    return `${checkTime(hour)}:${checkTime(minute)}`
+  const is12hours = configs?.format_time?.value?.includes('12')
+
+  const scheduleFormatted = ({ hour, minute } : { hour : number | string, minute : number | string}) => {
+    const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
+		const zz = hour === 0 ? t('AM', 'AM') : hour >= 12 ? t('PM', 'PM') : t('AM', 'AM');
+		const h = parseInt(`${hour}`);
+		return is12hours ? `${h === 0 ? 12 : h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}` : `${checkTime(hour)}:${checkTime(minute)}`;
   }
 
   return (
@@ -48,6 +55,14 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
       />
       <WrapMainContent>
         <InnerContent>
+          {(!!businessState?.business?.description) && (
+            <>
+              <GrayBackground>
+                <OText size={16} weight='bold'>{t('BUSINESS_DESCRIPTION', 'Business description')}</OText>
+              </GrayBackground>
+              <OText size={14} mBottom={20} mLeft={15} mRight={15} style={{ marginTop: 10 }}>{businessState?.business?.description}</OText>
+            </>
+          )}
           {(!!businessState?.business?.email || !!businessState?.business?.cellphone) && (
             <>
               <GrayBackground>

package/src/components/BusinessInformation/styles.tsx

@@ -18,7 +18,7 @@ export const InnerContent = styled.View`
 `
 export const WrapScheduleBlock = styled.ScrollView`
   margin: 20px 0;
-  max-height: 500px;
+  max-height: 520px;
 `
 export const ScheduleBlock = styled.View`
   display: flex;
@@ -27,7 +27,7 @@ export const ScheduleBlock = styled.View`
   padding: 0 20px;
   border-left-width: 1px;
   border-color: ${(props: any) => props.theme.colors.lightGray};
-  max-width: 100px;
+  max-width: 120px;
 `
 export const WrapBusinessMap = styled.View`
   max-height: 200px;

package/src/components/BusinessProductsList/index.tsx

@@ -34,9 +34,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   return (
     <ProductsContainer>
       {category.id && (
-        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
+        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => (
           <SingleProductCard
-            key={product.id}
+            key={`category${category.id}-${product.id}-${index}`}
             isSoldOut={(product.inventoried && !product.quantity)}
             product={product}
             businessId={businessId}
@@ -51,9 +51,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <>
               <OText size={18} weight='bold' mBottom={10}>{t('FEATURED', 'Featured')}</OText>
               <>
-                {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => product.featured && (
+                {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => product.featured && (
                   <SingleProductCard
-                    key={product.id}
+                    key={`featured${product.id}-${index}`}
                     isSoldOut={(product.inventoried && !product.quantity)}
                     product={product}
                     businessId={businessId}
@@ -68,18 +68,18 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {
         !category.id && categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
-          const products = categoryState.products?.filter((product: any) => product.category_id === category.id) || []
+          const products = categoryState.products?.filter((product: any) => category?.children?.some((cat: any) => cat?.category_id === product?.category_id) || product.category_id === category.id) || []
           return (
-            <View key={category.id} style={{alignItems: 'flex-start', flex:1}}>
+            <View key={`category${category.id}`} style={{ alignItems: 'flex-start', flex: 1 }}>
               {
                 products.length > 0 && (
                   <>
                     <OText size={18} weight='bold' mBottom={10}>{category.name}</OText>
                     <>
                       {
-                        products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
+                        products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => (
                           <SingleProductCard
-                            key={product.id}
+                            key={`all${product.id}-${index}`}
                             isSoldOut={product.inventoried && !product.quantity}
                             businessId={businessId}
                             product={product}
@@ -104,8 +104,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 <View style={{ flexDirection: 'row' }}>
                   <PlaceholderLine width={24} height={70} style={{ marginRight: 10, marginBottom: 10 }} />
                   <Placeholder style={{ paddingVertical: 10 }}>
-                      <PlaceholderLine width={60} style={{marginBottom: 25}}/>
-                      <PlaceholderLine width={20} />
+                    <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+                    <PlaceholderLine width={20} />
                   </Placeholder>
                 </View>
               </Placeholder>

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/LanguageSelector/index.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
+import { Platform, StyleSheet, NativeModules } from 'react-native'
 import { useTheme } from 'styled-components/native';
-import { I18nManager, Platform, StyleSheet, View } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { LanguageSelector as LanguageSelectorController, useOrder, useLanguage } from 'ordering-components/native'
 
 import RNPickerSelect from 'react-native-picker-select'
 import { Container, DummyContainer } from './styles'
 import { LanguageSelectorParams } from '../../types'
-import { OIcon } from '../shared'
-import RNRestart from 'react-native-restart'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
@@ -19,6 +18,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
   } = props
 
   const [orderState] = useOrder()
+  const [langugageState] = useLanguage()
   const theme = useTheme();
 
   const [language, setLanguage] = useState(currentLanguage)
@@ -70,16 +70,18 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
   )
 
   const changeDirection = async (language: any) => {
-    if (language !== 'ar') {
-      if (I18nManager.isRTL) {
-        await I18nManager.forceRTL(false)
-        RNRestart.Restart();
-      }
-    } else {
-      if (!I18nManager.isRTL) {
-        await I18nManager.forceRTL(true)
-        RNRestart.Restart();
-      }
+    if (language === langugageState?.language?.code) return
+    const isArabicLang = language === 'ar'
+    const isRTLOn = NativeModules.I18nManager.isRTL
+
+    if (isArabicLang && !isRTLOn) {
+      NativeModules.I18nManager.forceRTL(!isRTLOn)
+      RNRestart.Restart();
+    }
+
+    if (!isArabicLang && isRTLOn) {
+      NativeModules.I18nManager.forceRTL(!isRTLOn)
+      RNRestart.Restart();
     }
   }
 
@@ -87,11 +89,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     changeDirection(Platform.OS === 'ios' ? language : langCode)
     handleChangeLanguage(Platform.OS === 'ios' ? language : langCode)
   }
-  
+
   useEffect(() => {
     changeDirection(currentLanguage)
   }, [])
-  
+
   return (
     <Container>
       {languagesState?.languages ? (
@@ -113,8 +115,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 }
 
 export const LanguageSelector = (props: LanguageSelectorParams) => {
+  const [langugageState] = useLanguage()
+
   const LanguageProps = {
     ...props,
+    currentLanguage: langugageState?.language?.code ?? NativeModules.I18nManager.localeIdentifier?.split('_')?.[0] ?? 'en',
     UIComponent: LanguageSelectorUI
   }
 

package/src/components/Messages/index.tsx

@@ -42,8 +42,8 @@ const ORDER_STATUS: any = {
 
 const imgOptions = {
   mediaType: 'photo',
-  maxHeight: 300,
-  maxWidth: 300,
+  maxHeight: 2048,
+  maxWidth: 2048,
   includeBase64: true,
   selectionLimit: 0
 }

package/src/components/OrderCreating/index.tsx

@@ -131,7 +131,7 @@ export const OrderCreating = (props: any) => {
           <OText size={14}>{address}</OText>
         </LocationWrapper>
       )}
-      {cart && (
+      {cart && !orderState?.options?.moment && (
         <DeliveryWrapper>
           <DeliveryContentWrapper>
             <SimpleIcon
@@ -175,4 +175,4 @@ export const OrderCreating = (props: any) => {
       )}
     </OrderCreatingContainer>
   )
-}
+}

package/src/components/OrdersOption/index.tsx

@@ -102,46 +102,71 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   }
 
   useEffect(() => {
+    const length = orders.filter((order : any) => orderStatus.includes(order.status)).length
+
     setOrdersLength && setOrdersLength({
       ...ordersLength,
-      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
+      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: length
     })
-  }, [orders.length])
+    ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] = length
+  }, [orders])
 
   useEffect(() => {
-    setOrdersFiltered(filterForOrders === 'preorders' ? orders.filter((order : any) => order.status === 13) : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13))
+    setOrdersFiltered(filterForOrders === 'preorders'
+      ? orders.filter((order : any) => order.status === 13)
+      : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13)
+    )
   }, [filterForOrders, orders])
 
   return (
-    <>
+    <View style={{ marginBottom: 20 }}>
       <OptionTitle>
-        {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
-          <>
-            <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
-              <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
-                {titleContent || (activeOrders
-                  ? t('ACTIVE_ORDERS', 'Active Orders')
-                  : t('PREVIOUS_ORDERS', 'Previous Orders'))}
-              </OText>
-            </TouchableOpacity>
-            {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
-            <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
-              <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
-                {t('PREORDERS', 'Preorders')}
-              </OText>
-            </TouchableOpacity>
-            )}
-          </>
+        <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
+          <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
+            {titleContent || (activeOrders
+              ? t('ACTIVE_ORDERS', 'Active Orders')
+              : t('PREVIOUS_ORDERS', 'Previous Orders'))}
+          </OText>
+        </TouchableOpacity>
+        {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
+          <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
+            <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
+              {t('PREORDERS', 'Preorders')}
+            </OText>
+          </TouchableOpacity>
         )}
       </OptionTitle>
-      {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={imageFails}
-          conditioned
-        />
+      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
+        activeOrders ? (
+          <ActiveOrders
+            orders={ordersFiltered}
+            pagination={pagination}
+            loadMoreOrders={loadMoreOrders}
+            reorderLoading={reorderLoading}
+            customArray={customArray}
+            getOrderStatus={getOrderStatus}
+            onNavigationRedirect={onNavigationRedirect}
+            setScreen={setScreen}
+            screen={screen}
+            isPreorders={filterForOrders === 'preorders'}
+            preordersLength={orders.filter((order : any) => order.status === 13)?.length}
+          />
+        ) : (
+          <PreviousOrders
+            reorderLoading={reorderLoading}
+            orders={ordersFiltered}
+            pagination={pagination}
+            loadMoreOrders={loadMoreOrders}
+            getOrderStatus={getOrderStatus}
+            onNavigationRedirect={onNavigationRedirect}
+            handleReorder={handleReorder}
+          />
+        )
       )}
-      {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
+      {!loading &&
+        !isLoadingFirstRender &&
+        ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] === 0 &&
+      (
         <NotFoundSource
           content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
           image={imageFails}
@@ -179,34 +204,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           )}
         </>
       )}
-      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
-        activeOrders ? (
-          <ActiveOrders
-            orders={ordersFiltered}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            reorderLoading={reorderLoading}
-            customArray={customArray}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            setScreen={setScreen}
-            screen={screen}
-            isPreorders={filterForOrders === 'preorders'}
-            preordersLength={orders.filter((order : any) => order.status === 13)?.length}
-          />
-        ) : (
-          <PreviousOrders
-            reorderLoading={reorderLoading}
-            orders={ordersFiltered}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            handleReorder={handleReorder}
-          />
-        )
-      )}
-    </>
+    </View>
   )
 }