ordering-ui-react-native 0.13.2 → 0.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "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/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/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 {