ordering-ui-react-native 0.13.2 → 0.13.6

package/package.json

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

package/src/DeliveryApp.tsx

@@ -25,13 +25,30 @@ import AppContainer from './AppContainer';
 Sentry.init({
   environment: Platform.OS === 'ios' ? 'ios' : 'android',
   dsn: 'https://90197fffe6a1431b8c3eb79e1e36f0ee@o460529.ingest.sentry.io/5722123',
-  release: process.env.npm_package_version ? 'ordering-ui-native@' + process.env.npm_package_version : 'ordering-ui-native@' + '0.0.2',
+  release: process.env.npm_package_version ? 'ordering-ui-native@' + process.env.npm_package_version : 'ordering-ui-native@' + '0.0.4',
   ignoreErrors: [
     'is not defined',
     'is not a function',
     'can\'t find variable',
     'objects are not valid',
-    'element type is invalid'
+    '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'
   ],
 });
 

package/src/components/BusinessProductsListing/index.tsx

@@ -191,7 +191,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           <>
             {!(business?.categories?.length === 0) && (
               <BusinessProductsCategories
-                categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
+                categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)]}
                 categorySelected={categorySelected}
                 onClickCategory={handleChangeCategory}
                 featured={featuredProducts}
@@ -203,7 +203,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 categories={[
                   { id: null, name: t('ALL', 'All') },
                   { id: 'featured', name: t('FEATURED', 'Featured') },
-                  ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+                  ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)
                 ]}
                 category={categorySelected}
                 categoryState={categoryState}

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

@@ -56,9 +56,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
     clearTimeout(timerId.current);
     timerId.current = setTimeout(() => {
       setClearCart(true)
-      navigation.reset({
-        routes: [{ name: 'Intro' }],
-      })
+      navigation.navigate('Intro')
     }, 60000*2);
   }, []);
   

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

@@ -1,14 +1,12 @@
 import React from 'react'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native'
 import { BusinessAndProductList, useLanguage } from 'ordering-components/native'
-import Carousel from 'react-native-snap-carousel';
-import { BusinessProductsListingParams, Business, Product } from '../../types'
+import { BusinessProductsListingParams, Business } from '../../types'
 import { OCard, OText, OIcon } from '../shared'
 import GridContainer from '../../layouts/GridContainer'
-import PromoCard from '../PromoCard';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
-import { useTheme } from 'styled-components/native';
+import styled, { useTheme } from 'styled-components/native';
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const {navigation, businessState, resetInactivityTimeout, clearInactivityTimeout, bottomSheetVisibility } = props;
@@ -18,6 +16,27 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
+  const styles = StyleSheet.create({
+    logo: {
+      width: 500,
+      height: 400,
+      alignSelf: 'center',
+    },
+    soldOut: {
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      width: WIDTH_SCREEN * 0.15,
+      height: 50,
+      justifyContent: 'center',
+      backgroundColor: theme.colors.white,
+      alignItems: 'center',
+      borderRadius: 15,
+      opacity: 0.8,
+    },
+  });
 
   const _categories: any = business?.original?.categories;
   let _promos: any = [];
@@ -39,13 +58,30 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     </View>
   );
 
-  const _renderItem = ({item, index}: {item: Product; index: number}) => {
+  const RenderCategories = ({ item, cardStyle, widthScreen }: any) => {
+    const Category = styled.ImageBackground`
+      position: relative;
+      height: 150px;
+      width: ${(props: any) => props.w * 0.45}px;
+      border-radius: 10px;
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    `
+    const WrapText = styled.View`
+      height: 90px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 10px;
+    `
+
     return (
-      <PromoCard
-        title={item?.name}
-        {...(!!item?.description && {description: item?.description})}
-        image={{uri: item?.images}}
-        isOutOfStock={!item?.inventoried}
+      <TouchableOpacity
+        key={item.id}
+        activeOpacity={1}
         onPress={() => {
           resetInactivityTimeout()
           navigation.navigate('ProductDetails', {
@@ -54,37 +90,71 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             product: item,
           });
         }}
-      />
-    );
-  };
-
-  let _carousel: Carousel<Product> | null;
+      >
+        <Category
+          style={cardStyle}
+          source={{uri: item.images}}
+          resizeMode="cover"
+          w={widthScreen}
+          borderRadius={16}
+        >
+          {item?.inventoried && (
+            <View style={styles.soldOut}>
+              <OText size={28} color={theme.colors.error}>
+                {t('SOLD_OUT', 'SOLD OUT')}
+              </OText>
+            </View>
+          )}
+          <WrapText>
+            <OText
+              color={theme.colors.white}
+              mLeft={0}
+              size={32}
+              numberOfLines={1}
+              // mBottom={8}
+              style={{...props?.titleStyle}}
+              weight="bold"
+            >
+              {item.name}
+            </OText>
+            {!!item?.description && (
+              <OText
+                color={theme.colors.white}
+                numberOfLines={1}
+                // mBottom={4}
+                size={18}
+                style={{...props?.descriptionStyle}}
+                weight="400"
+              >
+                {item.description}
+              </OText>
+            )}
+          </WrapText>
+        </Category>
+      </TouchableOpacity>
+    )
+  }
 
   const _renderPromos = (): React.ReactElement => (
     <>
       {_renderTitle(t('FEATURED', 'Featured'))}
-      <Carousel
-        keyExtractor={(item: any) => item.id}
-        ref={(c: any) => {
-          _carousel = c;
-        }}
-        data={_promos || []}
-        renderItem={_renderItem}
-        sliderWidth={orientationState?.dimensions?.width}
-        itemWidth={orientationState?.dimensions?.width * 0.4}
-        alwaysBounceHorizontal={false}
-        slideStyle={{
-          width: orientationState?.dimensions?.width * 0.45,
-          marginLeft: 20,
-        }}
-        inactiveSlideScale={1}
-        snapToAlignment="start"
-        activeSlideAlignment="start"
-        inactiveSlideOpacity={1}
-        initialScrollIndex={0}
-        onScrollToIndexFailed={(_: any) => {}}
-        enableMomentum={true}
-      />
+      <View style={{ paddingVertical: 20, marginLeft: 20, width: '100%' }}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          style={{ width: '100%' }}
+        >
+          {_promos.map((category: any) => (
+            <RenderCategories
+              key={category.id}
+              item={category}
+              widthScreen={WIDTH_SCREEN}
+              cardStyle={{ marginRight: 20 }}
+            />
+          ))}
+        </ScrollView>
+      </View>
     </>
   );
 
@@ -148,23 +218,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   );
 };
 
-const styles = StyleSheet.create({
-  logo: {
-    width: 500,
-    height: 400,
-    alignSelf: 'center',
-  },
-  wrapper: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    backgroundColor: 'yellow'
-  },
-});
-
 export const BusinessProductsListing = (props: any) => {
   const businessProductslistingProps = {
     ...props,

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { TouchableOpacity, View, StyleSheet } from 'react-native'
-import { LanguageSelector as LanguageSelectorController, useLanguage } from 'ordering-components/native'
+import { LanguageSelector as LanguageSelectorController } from 'ordering-components/native'
 import CountryPicker, { Flag } from 'react-native-country-picker-modal'
 
 import { Container, LanguageItem } from './styles'
@@ -17,9 +17,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     handleChangeLanguage,
   } = props
 
-	const theme = useTheme()
-  const [{loading}] = useLanguage()
-  const [isLoading, setIsLoading] = useState(true)
+  const theme = useTheme()
   const styles = StyleSheet.create({
     closeIcon: {
       width: 48, marginLeft: 32
@@ -28,15 +26,6 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
       marginLeft: 40
     }
   })
-  useEffect(() => {
-    if (!isLoading) return
-    const loadingLanguage = setTimeout(() =>{
-      setIsLoading(false)
-    }, 1000);
-    return () => {
-      clearTimeout(loadingLanguage);
-    }
-  }, [])
 
   const _languages = languagesState?.languages?.map((language: any) => {
     return {
@@ -59,7 +48,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
 	return (
 		<>
-		{ isLoading ? 
+		{ languagesState.loading ? 
 		(<Container>
 			<Placeholder  style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
 				<PlaceholderLine height={15}/>
@@ -78,7 +67,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 							renderFlagButton={() => (
 								<TouchableOpacity
 									onPress={() => setCountryModalVisible(true)}
-									disabled={loading}
+									disabled={languagesState.loading}
 								>
 									<LanguageItem>
 											<Flag
@@ -102,7 +91,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 											handleChangeLanguage(item.value);
 											setCountryModalVisible(false);
 										}}
-										disabled={loading}
+										disabled={languagesState.loading}
 									>
 										<LanguageItem>
 											<View style={styles.flagsContainer} />

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

@@ -3,7 +3,7 @@ import styled from 'styled-components/native'
 import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform } from 'react-native'
 import { OrderTypeSelector } from '../OrderTypeSelector'
-import { useConfig } from 'ordering-components/native'
+import { useConfig, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View`
@@ -60,6 +60,7 @@ interface Props {
 const NavBar = (props: Props) => {
   const theme = useTheme();
   const [{ configs }] = useConfig();
+  const [, t] = useLanguage();
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || [];
 
   return (
@@ -113,7 +114,13 @@ const NavBar = (props: Props) => {
       </TitleTopWrapper>
 
       {props?.includeOrderTypeSelector && (
-        <View style={{ paddingHorizontal: props.rightComponent ? 4 : 20 }}>
+        <View
+          style={{
+            paddingHorizontal: props.rightComponent ? 4 : 20,
+            flexDirection: 'row'
+          }}
+        >
+          <OText style={{ paddingRight: 5 }}>{t('THIS_ORDER_IS_TO', 'This order is to')}</OText>
           <OrderTypeSelector configTypes={configTypes} />
         </View>
       )}

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

@@ -85,11 +85,11 @@ export const OrderTypeSelector = (props: any) => {
     orderTypes: props.orderType || [
       {
         value: 2,
-        content: `${t('THIS_ORDER_IS_TO', 'This order is to')} ${t('TAKE_OUT', 'Take out')}`
+        content: t('TAKE_OUT', 'Take out')
       },
       {
         value: 3,
-        content: `${t('THIS_ORDER_IS_TO', 'This order is to')} ${t('EAT_IN', 'Eat in')}`
+        content: t('EAT_IN', 'Eat in')
       },
     ]
   }

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

@@ -365,9 +365,9 @@ export const ProductOptionsUI = (props: any) => {
           </Animated.View>
         </Animated.View>
 
-        {!isFromCheckout && (
+        {/* {!isFromCheckout && (
           <Spinner visible={loading} />
-        )}
+        )} */}
         {!loading && !error && product && (
           <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}> 
             <WrapContent isDrawer={isDrawer}>

package/themes/kiosk/src/components/shared/OCard.tsx

@@ -44,7 +44,7 @@ const OCard = (props: Props): React.ReactElement => {
 			)}
 			<OImage
 				source={props.image}
-				height={Platform.OS === 'ios' ? 250 : 150}
+				height={120}
 				resizeMode="cover"
 				borderRadius={16}
 			/>

package/themes/kiosk/src/types/index.d.ts

@@ -15,6 +15,8 @@ export interface BusinessProductsListingParams {
   resetInactivityTimeout: any;
   clearInactivityTimeout: any;
   bottomSheetVisibility: any;
+  titleStyle: any;
+  descriptionStyle: any;
 }
 
 export interface OrderDetailsParams {

package/themes/uber-eats/src/components/Cart/index.tsx

@@ -239,9 +239,9 @@ const CartUI = (props: any) => {
               </OSTotal>
               {cart?.status !== 2 && (
                 <OSTable>
-                  <View style={{ width: '100%', marginTop: 20 }}>
+                  <View style={{ flex: 1, marginTop: 20, paddingBottom: 20 }}>
                     <OText>{t('COMMENTS', 'Comments')}</OText>
-                    <View style={{ flex: 1, width: '100%' }}>
+                    <View style={{ flex: 1 }}>
                       <OInput
                         value={cart?.comment}
                         placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}

package/themes/uber-eats/src/components/Cart/styles.tsx

@@ -6,7 +6,7 @@ export const CContainer = styled.View`
 
 export const CartContent = styled.View`
   ${((props: any) => props.isBusinessCart && css`
-    margin-bottom: 45px;
+    margin-bottom: 65px;
   `)}
 `
 

package/themes/uber-eats/src/components/shared/OBottomPopup.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, ScrollView, Text } from 'react-native'
+import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, ScrollView, Text, Platform } from 'react-native'
 import { OText } from '../shared'
 import Icon from 'react-native-vector-icons/Feather'
-import { useTheme } from 'styled-components/native'
+import styled,{ useTheme } from 'styled-components/native'
 
 const deviceHeight = Dimensions.get('window').height
 
@@ -24,6 +24,11 @@ const OBottomPopup = (props: Props) => {
 
   const theme = useTheme()
 
+  const KeyboardView = styled.KeyboardAvoidingView`
+    flex-grow: 1;
+    flex-shrink: 1;
+  `;
+
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -79,26 +84,31 @@ const OBottomPopup = (props: Props) => {
           <View style={styles.touchableOutsideStyle} />
         </TouchableWithoutFeedback>
         <View style={styles.bottomContainer}>
-          <ScrollView showsVerticalScrollIndicator={false}>
-            {customHeaderShow ? (
-              <View style={styles.customHeaderStyle}>
-                <OText size={16} numberOfLines={1} style={styles.customTitleStyle}>
+          <KeyboardView
+            enabled
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          >
+            <ScrollView showsVerticalScrollIndicator={false} >
+              {customHeaderShow ? (
+                <View style={styles.customHeaderStyle}>
+                  <OText size={16} numberOfLines={1} style={styles.customTitleStyle}>
+                    {title}
+                  </OText>
+                  <Icon
+                    name='x'
+                    size={30}
+                    style={styles.closeBtnStyle}
+                    onPress={onClose}
+                  />
+                </View>
+              ) : (
+                <Text style={styles.titleStyle}>
                   {title}
-                </OText>
-                <Icon
-                  name='x'
-                  size={30}
-                  style={styles.closeBtnStyle}
-                  onPress={onClose}
-                />
-              </View>
-            ) : (
-              <Text style={styles.titleStyle}>
-                {title}
-              </Text>
-            )}
-            {children}
-          </ScrollView>
+                </Text>
+              )}
+              {children}
+            </ScrollView>
+          </KeyboardView>
         </View>
       </View>
     </Modal>