ordering-ui-react-native 0.15.31 → 0.15.34

package/package.json

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

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

@@ -379,7 +379,7 @@ const CartUI = (props: any) => {
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={curProduct?.business_id}
+          businessId={cart?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

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

@@ -179,7 +179,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={curProduct?.business_id}
+          businessId={cart?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

package/themes/kiosk/src/components/CartBottomSheet/styles.tsx

@@ -5,7 +5,7 @@ export const StyledContainer = styled.ScrollView`
 	zIndex: 1000;
 	width: 100%;
 	background-color: #fff;
-	padding: 20px 20px 20px 0px;
+	padding: 20px 0 0;
 	bottom: 0;
 	shadow-color: #000;
 	shadow-opacity:  0.4;

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLanguage } from 'ordering-components/native';
-
+import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 import { CCNotCarts } from './styles';
 
 import { Cart } from '../Cart';
@@ -22,6 +22,7 @@ export const CartContent = (props: any) => {
 
   const [, t] = useLanguage()
   const [isCartsLoading, setIsCartsLoading] = useState(false)
+  const [, { hideCartBottomSheet }] = useCartBottomSheet();
 
   const cartProps = {
     navigation,
@@ -33,6 +34,15 @@ export const CartContent = (props: any) => {
     resetInactivityTimeout,
   }
 
+  useEffect(() => {
+    if (!cart && showNotFound) {
+      navigation?.canGoBack()
+        ? navigation.goBack()
+        : props.onNavigationRedirect && props.onNavigationRedirect('Business')
+      hideCartBottomSheet()
+    }
+  }, [cart])
+
   const content = (
     <>
       {(isOrderStateCarts && cart) && (
@@ -46,13 +56,13 @@ export const CartContent = (props: any) => {
           }
         </>
       )}
-      {(!cart && showNotFound) && (
+      {/* {(!cart && showNotFound) && (
         <CCNotCarts>
           <OText size={24} style={{ textAlign: 'center' }}>
             {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
           </OText>
         </CCNotCarts>
-      )}
+      )} */}
       <Spinner visible={isCartsLoading} />
     </>
   )

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { View, Animated, TouchableOpacity } from 'react-native';
+import { View, Animated, TouchableOpacity, ImageBackground } from 'react-native';
 import { useLanguage, useUtils } from 'ordering-components/native';
+import FastImage from 'react-native-fast-image'
 
 import {
   StyledCartItem,
@@ -70,13 +71,24 @@ const CartItem = (props: CartItemProps) => {
       >
         <StyledCartItem>
           <View style={{ flexDirection: 'row' }}>
-            <OImage
-              source={{ uri: product?.images || '' }}
-              height={60}
-              width={60}
-              resizeMode="cover"
-              borderRadius={6}
-            />
+            {product?.images ? (
+              <FastImage
+                style={{ height: 60, width: 80, borderRadius: 6 }}
+                source={{
+                  uri: product?.images,
+                  priority: FastImage.priority.normal,
+                  // cache:FastImage.cacheControl.web
+                }}
+                resizeMode={FastImage.resizeMode.cover}
+              />
+            ) : (
+              <ImageBackground
+                style={{ height: 60, width: 80, borderRadius: 6 }}
+                source={theme.images.dummies.product}
+                imageStyle={{ borderRadius: 6 }}
+                resizeMode='cover'
+              />
+            )}
 
             <View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
               <View>

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useLanguage, ToastType, useToast } from 'ordering-components/native';
-import { _setStoreData } from '../../../../../src/providers/StoreUtil';
+import { _setStoreData, _removeStoreData } from '../../../../../src/providers/StoreUtil';
 
 import { OButton, OInput, OText } from '../shared';
 import { useForm, Controller } from 'react-hook-form';
@@ -28,6 +28,11 @@ const CustomerName = (props: Props): React.ReactElement => {
     onProceedToPay()
   };
 
+  const onSkip = () => {
+    _removeStoreData('customer_name')
+    onProceedToPay()
+  }
+
   const styles = StyleSheet.create({
     inputStyle: {
       borderRadius: 4,
@@ -75,7 +80,7 @@ const CustomerName = (props: Props): React.ReactElement => {
     <View style={{ flex: 1, alignItems: 'center' }}>
       <OButton
         text={t('SKIP', 'Skip')}
-        onClick={onProceedToPay}
+        onClick={onSkip}
         textStyle={{ color: theme.colors.primary, fontSize: 20 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT

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

@@ -32,17 +32,17 @@ const Intro = (props: any): React.ReactElement => {
   };
 
   return (
-    <ScrollView
-      scrollEnabled={false}
-      refreshControl={
-        <RefreshControl
-          refreshing={showLogoutPopup ? false : refreshing}
-          onRefresh={() => setShowLogoutPopup(true)}
-        />
-      }
-    >
+    // <ScrollView
+    //   scrollEnabled={false}
+    //   refreshControl={
+    //     <RefreshControl
+    //       refreshing={showLogoutPopup ? false : refreshing}
+    //       onRefresh={() => setShowLogoutPopup(true)}
+    //     />
+    //   }
+    // >
       <Pressable onPress={goBusiness}>
-        <Container nopadding={orientationState.orientation === LANDSCAPE}>
+        <View style={{ height: orientationState?.dimensions?.height }}>
           {orientationState.orientation === PORTRAIT ? (
             <View
               style={{
@@ -132,15 +132,15 @@ const Intro = (props: any): React.ReactElement => {
             open={showLogoutPopup}
             onClose={() => setShowLogoutPopup(false)}
           />
-        </Container>
+        </View>
       </Pressable>
-    </ScrollView>
+    // </ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   buttonLandStyle: {
-    width: 290,
+    minWidth: 130,
     marginBottom: 16
   }
 });

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

@@ -212,7 +212,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           setCustomerName(name)
       } catch (e) {
         if (e) {
-          setCustomerName('')
+          setCustomerName(null)
         }
       }
     }
@@ -553,7 +553,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       size={orientationState?.dimensions?.width * 0.048}
                       weight="700"
                     >
-                      {`${t('HUNGRY', 'hungry')}, ${customerName}`}
+                      {t('HUNGRY', 'hungry')}{!!customerName && `, ${customerName}`}
                     </OText>
                   </OText>
 

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

@@ -169,7 +169,7 @@ const OrderSummaryUI = (props: any) => {
               isCartProduct
               productCart={curProduct}
               businessSlug={cart?.business?.slug}
-              businessId={curProduct?.business_id}
+              businessId={cart?.business_id}
               categoryId={curProduct?.category_id}
               productId={curProduct?.id}
               onSave={handlerProductAction}

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import FastImage from 'react-native-fast-image'
 import {
   View,
   TouchableOpacity,
@@ -69,7 +70,7 @@ export const ProductOptionsUI = (props: any) => {
 
   const { product, loading, error } = productObject;
 
-  const HEADER_EXPANDED_HEIGHT = Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
+  const HEADER_EXPANDED_HEIGHT = orientationState?.dimensions?.height * 0.4;
   const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
 
   const isError = (id: number) => {
@@ -203,7 +204,6 @@ export const ProductOptionsUI = (props: any) => {
     },
     scrollContainer: {
       padding: 16,
-      paddingTop: HEADER_EXPANDED_HEIGHT
     },
     header: {
       backgroundColor: '#fff',
@@ -225,6 +225,10 @@ export const ProductOptionsUI = (props: any) => {
       shadowOpacity: 0.4,
       shadowRadius: 3,
       elevation: 5,
+    },
+    imageStyle: {
+      width: '100%',
+      height: HEADER_EXPANDED_HEIGHT,
     }
   });
 
@@ -232,118 +236,173 @@ export const ProductOptionsUI = (props: any) => {
     <>
       <ScrollView
         style={styles.mainContainer}
-        contentContainerStyle={styles.scrollContainer}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: scrollY } } }],
           { useNativeDriver: false })
         }
         scrollEventThrottle={16}
       >
-        <Animated.View style={[styles.header, { height: headerHeight }]}>
-          {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-            <NavBar
-              {...navBarProps}
-              titleColor={theme.colors.white}
-              btnStyle={{
-                width: 55,
-                height: 55,
-                overflow: 'scroll',
-                backgroundColor: 'black',
-                borderRadius: 100,
-                color: 'white',
-                opacity: 0.8,
-                left: 20,
-              }}
-            />
-          </Animated.View>
-          )}
-          <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
-            <NavBar
-              {...navBarProps}
-              btnStyle={{
-                width: 55,
-                height: 55,
-                backgroundColor: 'transparent',
-                borderRadius: 100,
-                left: 20,
-              }}
-            />
-          </Animated.View>
+        {!isDrawer ? (
+          <Animated.View style={[styles.header, { height: headerHeight }]}>
+            {!isDrawer && (
+              <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
+                <NavBar
+                  {...navBarProps}
+                  titleColor={theme.colors.white}
+                  btnStyle={{
+                    width: 55,
+                    height: 55,
+                    overflow: 'scroll',
+                    backgroundColor: 'black',
+                    borderRadius: 100,
+                    color: 'white',
+                    opacity: 0.8,
+                    left: 20,
+                  }}
+                />
+              </Animated.View>
+            )}
+            <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
+              <NavBar
+                {...navBarProps}
+                btnStyle={{
+                  width: 55,
+                  height: 55,
+                  backgroundColor: 'transparent',
+                  borderRadius: 100,
+                  left: 20,
+                }}
+              />
+            </Animated.View>
 
-          <Animated.View style={{
-            backgroundColor: 'white',
-            width: orientationState?.dimensions?.width,
-            opacity: collapsedBarContainerOpacity,
-          }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                padding: 20,
-                paddingTop: 0,
-                paddingBottom: 10
-              }}
-            >
-              <OImage
-                source={{ uri: product?.images }}
-                width={70}
-                height={70}
-                resizeMode="cover"
-                borderRadius={6}
+            <Animated.View style={{
+              backgroundColor: 'white',
+              width: orientationState?.dimensions?.width,
+              opacity: collapsedBarContainerOpacity,
+            }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  padding: 20,
+                  paddingTop: 0,
+                  paddingBottom: 10
+                }}
+              >
+                {product?.images ? (
+                  <FastImage
+                    style={{ height: 70, width: 70, borderRadius: 6 }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ height: 70, width: 70, borderRadius: 6 }}
+                    source={theme.images.dummies.product}
+                    imageStyle={{ borderRadius: 6 }}
+                    resizeMode='cover'
+                  />
+                )}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.025}
+                  weight="bold"
+                  mLeft={20}
+                  numberOfLines={2}
+                >
+                  {product?.name}
+                </OText>
+              </View>
+              <View
+                style={{
+                  position: 'absolute',
+                  bottom: -2,
+                  height: 1,
+                  backgroundColor: 'white',
+                  width: orientationState?.dimensions?.width,
+                  ...styles.shadow,
+                }}
               />
-              <OText
-                size={orientationState?.dimensions?.width * 0.025}
-                weight="bold"
-                mLeft={20}
-                numberOfLines={2}
+            </Animated.View>
+
+            <Animated.View style={{
+              opacity: heroContainerOpacity,
+              position: 'absolute',
+              zIndex: -100,
+              transform: [{ translateY: heroTranslateY }],
+            }}>
+              <View
+                style={{
+                  width: orientationState?.dimensions?.width,
+                  height: HEADER_EXPANDED_HEIGHT,
+                  position: 'absolute',
+                  zIndex: 1,
+                  backgroundColor: 'rgba(24, 28, 50, 0.4)',
+                }}
               >
-                {product?.name}
-              </OText>
-            </View>
-            <View
-              style={{
-                position: 'absolute',
-                bottom: -2,
-                height: 1,
-                backgroundColor: 'white',
-                width: orientationState?.dimensions?.width,
-                ...styles.shadow,
-              }}
-            />
+                {product?.images ? (
+                  <FastImage
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={theme.images.dummies.product}
+                    resizeMode='cover'
+                  />
+                )}
+              </View>
+            </Animated.View>
           </Animated.View>
-
-          <Animated.View style={{
-            opacity: heroContainerOpacity,
-            position: 'absolute',
-            zIndex: -100,
-            transform: [{ translateY: heroTranslateY }],
-          }}>
-            <View
+        ) : (
+          <View style={{...styles.imageStyle}}>
+            <Animated.View
               style={{
-                width: orientationState?.dimensions?.width,
-                height: HEADER_EXPANDED_HEIGHT,
+                ...styles.imageStyle,
+                opacity: heroContainerOpacity,
                 position: 'absolute',
-                zIndex: 1,
-                backgroundColor: 'rgba(24, 28, 50, 0.4)',
+                zIndex: -100,
+                transform: [{ translateY: heroTranslateY }],
               }}
             >
-              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex: 1, justifyContent: 'center' }} />
+              <View style={styles.imageStyle}>
+                {product?.images ? (
+                  <FastImage
+                    style={{ flex: 1 }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={theme.images.dummies.product}
+                    resizeMode='cover'
+                  />
+                )}
+              </View>
+            </Animated.View>
+          </View>
+        )}
 
-            </View>
 
-            <Animated.View
-              style={{
-                transform: [{ translateY: heroTranslateY }],
-                width: orientationState?.dimensions?.width * 0.75,
-                height: HEADER_EXPANDED_HEIGHT / 2,
-                position: 'relative',
-                top: HEADER_EXPANDED_HEIGHT / 3,
-                zIndex: 100,
-                padding: 20,
-              }}
-            >
+        {!loading && !error && product && (
+          <View style={{ paddingTop: isDrawer ? 20 : HEADER_EXPANDED_HEIGHT, paddingBottom: 80, paddingHorizontal: 16 }}>
+            <WrapContent isDrawer={isDrawer}>
               <OText
-                color={theme.colors.white}
+                style={{ marginTop: 20 }}
                 size={orientationState?.dimensions?.width * 0.038}
                 weight="bold"
                 mBottom={10}
@@ -352,33 +411,23 @@ export const ProductOptionsUI = (props: any) => {
                 {product?.name || productCart?.name}
               </OText>
 
-              <OText
-                color={theme.colors.white}
-                numberOfLines={4}
-              >
-                {product?.description || productCart?.description}
-              </OText>
-            </Animated.View>
-          </Animated.View>
-        </Animated.View>
+              {(product?.description || productCart?.description) && (
+                <OText
+                  numberOfLines={4}
+                >
+                  {product?.description || productCart?.description}
+                </OText>
+              )}
+
+              {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
+                (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
+              ) && (
+                <ProductDescription>
+                  <OText size={20}>{t('SKU', 'Sku')}</OText>
+                  <OText>{product?.sku || productCart?.sku}</OText>
+                </ProductDescription>
+              )}
 
-        {/* {!isFromCheckout && (
-          <Spinner visible={loading} />
-        )} */}
-        {!loading && !error && product && (
-          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}>
-            <WrapContent isDrawer={isDrawer}>
-              <ProductDescription>
-                {(
-                  (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-                  (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-                ) && (
-                    <>
-                      <OText size={20}>{t('SKU', 'Sku')}</OText>
-                      <OText>{product?.sku || productCart?.sku}</OText>
-                    </>
-                  )}
-              </ProductDescription>
               <ProductEditions>
                 {product?.ingredients.length > 0 && (
                   <View style={styles.optionContainer}>

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

@@ -40,7 +40,7 @@ export const ProductTitle = styled.View`
 `
 
 export const ProductDescription = styled.View`
-  margin-bottom: 30px;
+  margin-top: 10px;
 `
 
 export const ProductEditions = styled.View`

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

@@ -32,6 +32,7 @@ const ProductOptionUI = (props: any) => {
         <OText
           size={26}
           weight="bold"
+          style={{ width: '80%' }}
         >
           {option.name}
         </OText>

package/themes/kiosk/src/components/ProductOption/styles.tsx

@@ -12,4 +12,5 @@ export const WrapHeader = styled.View`
   background-color: ${(props: any) => props.theme.colors.paleGray};
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
+  width: 100%;
 `