ordering-ui-react-native 0.15.90 → 0.15.91-release

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Dimensions, Platform, View } from 'react-native';
 import { useLanguage, useOrder, useUtils } from 'ordering-components/native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -12,6 +12,7 @@ import {
   OText
 } from '../../components/shared';
 import { CartBottomSheet } from '../../components/CartBottomSheet';
+import { NotFoundSource } from '../NotFoundSource';
 import { Category } from '../../types';
 import { CartContent } from '../../components/CartContent';
 import { TouchableOpacity } from 'react-native-gesture-handler';
@@ -40,20 +41,22 @@ const CategoriesMenu = (props: any): React.ReactElement => {
 
   const theme = useTheme()
   const [, t] = useLanguage();
-  const [curIndexCateg, setIndexCateg] = useState(categories.indexOf(category));
   const [{ parsePrice }] = useUtils();
   const [orientationState] = useDeviceOrientation();
   const [bottomSheetVisibility, { showCartBottomSheet, hideCartBottomSheet }] = useCartBottomSheet();
-  const [productSelected, setProductSelected] = useState({})
+
+  const [productState, setProductState] = useState<any>(null)
+  const [productSelected, setProductSelected] = useState<any>({})
+  const [curIndexCateg, setIndexCateg] = useState(categories.indexOf(category));
   const [drawerState, setDrawerState] = useState({ isOpen: false, data: { order: null } });
 
   const width_dimension = Dimensions.get('window').width;
   const height_dimension = Dimensions.get('window').height;
-  
+
   const KeyboardView = styled.KeyboardAvoidingView`
     flex: 1;
   `;
-  
+
   const onChangeTabs = (idx: number) => {
     resetInactivityTimeout();
     setIndexCateg(idx);
@@ -75,6 +78,16 @@ const CategoriesMenu = (props: any): React.ReactElement => {
     cart = cartsList?.find((item: any) => item.business_id == businessId);
   }
 
+  const onEditProduct = (product: any) => {
+    setProductSelected({ ...product, _isEditProduct: true })
+    setDrawerValues({ isOpen: true, data: null })
+  }
+
+  const onAddProduct = (product: any) => {
+    setProductSelected(product)
+    setDrawerValues({ isOpen: true, data: null })
+  }
+
   const cartProps = {
     ...props,
     cart,
@@ -87,16 +100,32 @@ const CategoriesMenu = (props: any): React.ReactElement => {
       visible: bottomSheetVisibility,
       clearInactivityTimeout,
       resetInactivityTimeout,
+      onEditProduct,
+      onAddProduct
     },
     showNotFound: false,
     showCartBottomSheet,
   }
 
+  const onClickDrawer = () => {
+    setDrawerValues({ isOpen: !drawerState.isOpen, data: null })
+    setProductState(null)
+  }
+
+  const onSaveProductForm = () => {
+    showCartBottomSheet()
+    onClickDrawer()
+  }
+
   const onToggleCart = () => {
     if (bottomSheetVisibility) hideCartBottomSheet();
     else showCartBottomSheet();
   }
 
+  const onProductStateChange = useCallback((val: any) => {
+    setProductState({ ...productState, ...val })
+  }, [setProductState])
+
   return (
     <>
       <View style={{
@@ -112,44 +141,46 @@ const CategoriesMenu = (props: any): React.ReactElement => {
           }}
         >
           <Container nopadding nestedScrollEnabled>
-            <View style={{ paddingTop: 20 }}>
-              <NavBar
-                title={categories[curIndexCateg].name}
-                onActionLeft={goToBack}
-                rightComponent={cart && (
-                  <TouchableOpacity
-                    style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
-                    onPress={onToggleCart}
+            {Platform.OS === 'android' && (<View style={{ paddingTop: 20 }} />)}
+            <NavBar
+              title={categories[curIndexCateg].name}
+              onActionLeft={goToBack}
+              rightComponent={cart && (
+                <TouchableOpacity
+                  style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
+                  onPress={onToggleCart}
+                >
+                  <OText
+                    color={theme.colors.mediumGray}
                   >
-                    <OText
-                      color={theme.colors.mediumGray}
-                    >
-                      {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
-                    </OText>
-
-                    <MaterialIcon
-                      name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
-                      color={theme.colors.primary}
-                      size={30}
-                    />
-                  </TouchableOpacity>
-                )}
-              />
-              <OSegment
-                items={categories.map((category) => ({
-                  text: category.name
-                }))}
-                selectedIdx={curIndexCateg}
-                onSelectItem={onChangeTabs}
-              />
-            </View>
-
-            <GridContainer 
-              style={{ 
-                marginTop: 20, 
+                    {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
+                  </OText>
+
+                  <MaterialIcon
+                    name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
+                    color={theme.colors.primary}
+                    size={30}
+                  />
+                </TouchableOpacity>
+              )}
+            />
+
+            <OSegment
+              items={categories.map((category) => ({
+                text: category.name
+              }))}
+              selectedIdx={curIndexCateg}
+              onSelectItem={onChangeTabs}
+            />
+
+            <GridContainer
+              style={{
+                marginTop: 20,
                 paddingLeft: orientationState?.orientation === LANDSCAPE
-                        ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.004 :orientationState?.dimensions?.width * 0.008
-                        : 0
+                  ? bottomSheetVisibility
+                    ? orientationState?.dimensions?.width * 0.004
+                    : orientationState?.dimensions?.width * 0.008
+                  : 0
               }}
             >
               {categories[curIndexCateg].products.map((product) => (
@@ -170,8 +201,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                   onPress={() => {
                     resetInactivityTimeout()
                     if (isDrawer) {
-                      setProductSelected(product)
-                      setDrawerValues({ isOpen: true, data: null })
+                      onAddProduct && onAddProduct(product)
                     } else {
                       navigation.navigate('ProductDetails', {
                         businessId,
@@ -182,26 +212,31 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                   }}
                 />
               ))}
+
+              {categories[curIndexCateg].products.length === 0 && (
+                <NotFoundSource
+                  content={t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time')}
+                />
+              )}
             </GridContainer>
           </Container>
         </View>
-
-          <View
-            style={{
-              flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
-              display: bottomSheetVisibility ? 'flex' : 'none'
-            }}
-          >
-            <CartContent
-              {...cartProps}
-            />
-          </View>
+        <View
+          style={{
+            flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
+            display: bottomSheetVisibility ? 'flex' : 'none'
+          }}
+        >
+          <CartContent
+            {...cartProps}
+          />
+        </View>
       </View>
       <DrawerView
         isOpen={drawerState.isOpen}
         width={width_dimension - (width_dimension * 0.4)}
         height={height_dimension}
-        onClickIcon={() => setDrawerValues({ isOpen: !drawerState.isOpen, data: null })}
+        onClickIcon={onClickDrawer}
       >
         <KeyboardView
           enabled
@@ -209,14 +244,24 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         >
           <ProductForm
             isDrawer
-            product={productSelected}
-            businessId={parseInt(businessId, 10)}
-            businessSlug={businessSlug}
-            onSave={() => {
-              showCartBottomSheet()
-              setDrawerValues({ isOpen: !drawerState.isOpen, data: null })
-            }}
             navigation={navigation}
+            {...(productSelected?._isEditProduct ? {
+              isEdit: true,
+              productCart: productState?.productCart ?? productSelected,
+              product: productState?.product,
+              businessSlug: cart?.business?.slug,
+              businessId: cart?.business_id,
+              categoryId: productSelected?.category_id,
+              productId: productSelected?.id,
+            } : {
+              product: productSelected,
+              businessSlug: businessSlug,
+              businessId: parseInt(businessId, 10),
+              productState: productState,
+              productCart: productState,
+            })}
+            onSave={onSaveProductForm}
+            onProductStateChange={onProductStateChange}
           />
         </KeyboardView>
       </DrawerView>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-
+import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
 import {
   Checkout as CheckoutController,
   useOrder,
@@ -35,28 +35,46 @@ const CheckoutUI = (props: any) => {
   } = props
 
   const [errorCash, setErrorCash] = useState(false);
+  const [customerName, setCustomerName] = useState(null);
+
+  const getCustomerName = async () => {
+    const data = await _retrieveStoreData('customer_name');
+    setCustomerName(data?.customerName)
+  }
+
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    } else {
+      getCustomerName()
+    }
+  }, [cart])
+
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
 
   return (
     <>
-      {!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
-        <PaymentOptions
-          navigation={navigation}
-          cart={cart}
-          errors={errors}
-          onPaymentChange={handlePaymethodChange}
-          onNavigationRedirect={onNavigationRedirect}
-          paySelected={paymethodSelected}
-          handlerClickPlaceOrder={handlerClickPlaceOrder}
-          placing={placing}
-
-          errorCash={errorCash}
-          isDisabled={cart?.status === 2}
-          businessId={businessDetails?.business?.id}
-          isLoading={businessDetails.loading}
-          paymethods={businessDetails?.business?.paymethods}
-          setErrorCash={setErrorCash}
-        />
-      )}
+      <PaymentOptions
+        navigation={navigation}
+        cart={cart}
+        errors={errors}
+        customerName={customerName}
+        onPaymentChange={handlePaymethodChange}
+        onNavigationRedirect={onNavigationRedirect}
+        paySelected={paymethodSelected}
+        handlerClickPlaceOrder={handlerClickPlaceOrder}
+        placing={placing}
+        errorCash={errorCash}
+        isDisabled={cart?.status === 2}
+        businessId={businessDetails?.business?.id}
+        isLoading={cartState.loading || businessDetails.loading}
+        paymethods={businessDetails?.business?.paymethods}
+        setErrorCash={setErrorCash}
+      />
     </>
   )
 }
@@ -107,7 +125,7 @@ export const Checkout = (props: any) => {
             loading: false,
             cart: result
           })
-        } catch (error) {
+        } catch (error: any) {
           showToast(ToastType.Error, error?.toString() || error.message)
         }
       } else {
@@ -119,7 +137,7 @@ export const Checkout = (props: any) => {
           error: cart ? null : result
         })
       }
-    } catch (e) {
+    } catch (e: any) {
       setCartState({
         ...cartState,
         loading: false,

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

@@ -113,12 +113,6 @@ const CustomerName = (props: Props): React.ReactElement => {
             style={{ bottom: 20 }}
           >
             {t('WHATS_YOUR_NAME', "What's your name?")}
-            {/* <OText
-                  size={orientationState?.dimensions?.width * 0.05}
-                  weight={'700'}
-                >
-                  {`${t('ORDER_BE_FOR', 'order be for?')}`}
-                </OText> */}
           </OText>
           <Controller
             control={control}

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

@@ -53,5 +53,6 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.21,
     shadowRadius: 5,
+    elevation: 16
   }
 })

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

@@ -19,12 +19,12 @@ export const WrapperFloatBtn = styled.View`
   top: 10%;
   right: ${(props: any) => props.outside ? 11 : 58}%;
   z-index: 20002;
-  elevation: 11;
+  elevation: 17;
 `;
 
 export const IconControl = styled.TouchableOpacity`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px;
   border-radius: 8px;
-  elevation: 11;
+  elevation: 17;
 `;

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

@@ -4,6 +4,7 @@ import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
 import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,28 +66,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -134,7 +134,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

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

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

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

@@ -395,7 +395,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         </View>
       </OSTable>
 
-      {order?.products?.length && (
+      {order?.products?.length > 0 && (
         <>
           <View
             style={{
@@ -598,7 +598,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     <>
       <Spinner visible={!order || Object.keys(order).length === 0} />
 
-      {order && Object.keys(order).length > 0 && (
+      {!!order && Object.keys(order).length > 0 && (
         <>
           <Container>
             <NavBar

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

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -59,7 +57,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
       <Container>
         <NavBar
           title={t('ORDER_TYPE_X_ID', 'Order type')}
-          {...(goBack && { onActionLeft: goBack })}
+          onActionLeft={goBack}
           btnStyle={{ paddingLeft: 0 }}
         />
 
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

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

@@ -107,7 +107,7 @@ const PaymentOptionsUI = (props: any) => {
 
   const handlePlaceOrder = () => {
     if (!userErrors.length) {
-      handlerClickPlaceOrder && handlerClickPlaceOrder();
+      handlerClickPlaceOrder && handlerClickPlaceOrder(null, { on_behalf_of: props.customerName });
       return;
     }
     let stringError = '';
@@ -192,64 +192,66 @@ const PaymentOptionsUI = (props: any) => {
       <Spinner visible={isLoading || placing || paymethodsList?.loading} />
 
       <Container nestedScrollEnabled>
-        <NavBar
-          title={t('PAYMENT_METHODS', 'Payment methods')}
-          onActionLeft={goToBack}
-          btnStyle={{ paddingLeft: 0 }}
-        />
-
-        <View
-          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-          <OText size={orientationState?.dimensions?.width * 0.048}>
-            {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight={'700'}>
-              {`${t('LIKE_TO_PAY', 'like to pay')}?`}
-            </OText>
-          </OText>
-        </View>
-
         {supportedMethods?.length > 0 && (
-          <GridContainer style={{ justifyContent: 'space-between' }}>
-            {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
-                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
-              </View>
-            )}
+          <>
+            <NavBar
+              title={t('PAYMENT_METHODS', 'Payment methods')}
+              onActionLeft={goToBack}
+              btnStyle={{ paddingLeft: 0 }}
+            />
 
             <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
+              style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
+              <OText size={orientationState?.dimensions?.width * 0.048}>
+                {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.048}
+                  weight={'700'}>
+                  {`${t('LIKE_TO_PAY', 'like to pay')}?`}
+                </OText>
+              </OText>
+            </View>
 
-            {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+            <GridContainer style={{ justifyContent: 'space-between' }}>
+              {propsOfItems.CARD_ON_DELIVERY_ID && (
+                <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                  <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
+                </View>
+              )}
 
-            <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
+
+              {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
 
-            {propsOfItems.STRIPE && (
-              <OptionCard {...propsOfItems?.STRIPE} />
-            )}
-          </GridContainer>
+              {propsOfItems.STRIPE && (
+                <OptionCard {...propsOfItems?.STRIPE} />
+              )}
+            </GridContainer>
+          </>
         )}
         <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal