ordering-ui-react-native 0.15.46 → 0.15.47-release

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

@@ -10,7 +10,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CheckoutAction, OrderTypeWrapper, FloatingLayout } from './styles';
+import { CheckoutAction, OrderTypeWrapper, FloatingLayout, OSRow } from './styles';
 
 import { OSBill, OSCoupon, OSTable } from '../OrderSummary/styles';
 
@@ -90,13 +90,26 @@ const CartUI = (props: any) => {
 
   const goToBack = () => navigation.goBack();
 
+  const getIncludedTaxes = () => {
+    if (cart?.taxes === null) {
+      return cart.business.tax_type === 1 ? cart?.tax : 0
+    } else {
+      return cart?.taxes.reduce((taxIncluded: number, tax: any) => {
+        return taxIncluded + (tax.type === 1 ? tax.summary?.tax : 0)
+      }, 0)
+    }
+  }
+
+  const getIncludedTaxesDiscounts = () => {
+    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
   return (
     <>
       <Container>
         <NavBar
           title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
           onActionLeft={goToBack}
-          style={{ height: orientationState?.dimensions?.height * 0.08 }}
           btnStyle={{ paddingLeft: 0 }}
           rightComponent={(
             <OButton
@@ -177,13 +190,10 @@ const CartUI = (props: any) => {
               <OSTable>
                 <OText>{t('SUBTOTAL', 'Subtotal')}</OText>
                 <OText>
-                  {cart.business.tax_type === 1
-                    ? parsePrice((cart?.subtotal + cart?.tax) || 0)
-                    : parsePrice(cart?.subtotal || 0)}
+                  {parsePrice(cart?.subtotal + getIncludedTaxes())}
                 </OText>
               </OSTable>
-              {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == PORTRAIT && (
-
+              {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && orientationState?.orientation == PORTRAIT && (
                 <OSTable
                   style={{
                     backgroundColor: theme.colors.success,
@@ -226,44 +236,107 @@ const CartUI = (props: any) => {
                   </OText>
                 </OSTable>
               )}
-              {cart.business.tax_type !== 1 && (
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
+              {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
                 <OSTable>
-                  <OText>
-                    {t('TAX', 'Tax')}
-                    {`(${verifyDecimals(cart?.business?.tax, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(cart?.tax || 0)}</OText>
+                  <OText numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                  {cart?.business?.tax_type === 1 ? (
+                    <OText>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                  ) : (
+                    <OText>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
+                  )}
                 </OSTable>
               )}
+              {
+                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+                  <OSTable key={`${tax?.id}_${i}`}>
+                    <OSRow>
+                      <OText>
+                        {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
+                      </OText>
+                    </OSRow>
+                    <OText>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={`${fee?.id}_${i}`}>
+                    <OSRow>
+                      <OText>
+                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                        ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)}${fee.percentage > 0 ? ' + ' : ''}`}{fee.percentage > 0 && `${fee.percentage}%`}){' '}
+                      </OText>
+                    </OSRow>
+                    <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                  </OSTable>
+                ))
+              }
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {selectedOrderType === 1 && cart?.delivery_price > 0 && (
                 <OSTable>
                   <OText>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                   <OText>{parsePrice(cart?.delivery_price)}</OText>
                 </OSTable>
               )}
+              {
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
+                    <OSRow>
+                      <OText>{offer.name}</OText>
+                      {offer.rate_type === 1 && (
+                        <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                      )}
+                    </OSRow>
+                    <OText>
+                      - {parsePrice(offer?.summary?.discount)}
+                    </OText>
+                  </OSTable>
+                ))
+              }
               {cart?.driver_tip > 0 && (
                 <OSTable>
                   <OText>
                     {t('DRIVER_TIP', 'Driver tip')}
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
-                      !!!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
+                      !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
                       (
-                        `(${parseNumber(cart?.driver_tip_rate)}%)`
+                        `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
                       )}
                   </OText>
                   <OText>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
-              {cart?.service_fee > 0 && (
-                <OSTable>
-                  <OText>
-                    {t('SERVICE_FEE', 'Service Fee')}
-                    {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                  </OText>
-                  <OText>{parsePrice(cart?.service_fee)}</OText>
-                </OSTable>
-              )}
               {!cart?.discount_type && isCouponEnabled && !isCartPending && orientationState?.orientation == PORTRAIT && (
                 <OSTable>
                   <OSCoupon>
@@ -279,7 +352,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText weight='bold' color={theme.colors.primary}>
-                  {cart?.total >= 1 && parsePrice(cart?.total)}
+                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                 </OText>
               </OSTable>
             </OSBill>
@@ -379,7 +452,7 @@ const CartUI = (props: any) => {
         <ProductForm
           productCart={curProduct}
           businessSlug={cart?.business?.slug}
-          businessId={cart?.business_id}
+          businessId={curProduct?.business_id}
           categoryId={curProduct?.category_id}
           productId={curProduct?.id}
           onSave={handlerProductAction}

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

@@ -68,3 +68,9 @@ export const FloatingLayout = styled.View`
     padding-bottom: 20px;
   `)}
 `
+
+export const OSRow = styled.View`
+  flex-direction: row;
+  overflow: hidden;
+  width: 80%;
+`

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

@@ -62,6 +62,10 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
   }
 
   const handleEditProduct = (product: any) => {
+    if (props.onEditProduct) {
+      props.onEditProduct(product)
+      return
+    }
     setCurProduct(product)
     setModalIsOpen(true)
   }
@@ -148,7 +152,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
       <StyledBottomContent
         style={{bottom:10}}
         minHeight={props.height * 0.01}
-      > 
+      >
         <OButton
           text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
             !openUpselling !== canOpenUpselling ? `${t('CHECKOUT', 'Checkout')} ${parsePrice(cart?.total)}`: t('LOADING', 'Loading')
@@ -198,6 +202,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
           canOpenUpselling={canOpenUpselling}
           setCanOpenUpselling={setCanOpenUpselling}
           onClose={onCloseUpselling}
+          onAddProduct={props.onAddProduct}
           resetInactivityTimeout={resetInactivityTimeout}
         />
       )}
@@ -231,7 +236,7 @@ const TopBar = (props:any) => {
 			<OIconButton
         bgColor="transparent"
         borderColor="transparent"
-        RenderIcon={() => 
+        RenderIcon={() =>
             <EvilIcons
               name={'close'}
               size={40}
@@ -260,6 +265,8 @@ interface CartBottomSheetUIProps {
 	onNavigationRedirect: any,
   clearInactivityTimeout: any,
   resetInactivityTimeout: any,
+  onEditProduct: any,
+  onAddProduct: any,
 }
 
 export const CartBottomSheet = (props: any) => {

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

@@ -1,10 +1,7 @@
 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';
-import { OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { Cart as TypeCart } from '../../types';
 
@@ -20,7 +17,6 @@ export const CartContent = (props: any) => {
     resetInactivityTimeout,
   }: Props = props
 
-  const [, t] = useLanguage()
   const [isCartsLoading, setIsCartsLoading] = useState(false)
   const [, { hideCartBottomSheet }] = useCartBottomSheet();
 
@@ -56,13 +52,6 @@ export const CartContent = (props: any) => {
           }
         </>
       )}
-      {/* {(!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

@@ -56,9 +56,10 @@ const CartItem = (props: CartItemProps) => {
     return product
   }
   const isProductIngredients = productInfo()?.ingredients.length > 0 || productInfo()?.options.length > 0 || product?.comment
-  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
+  const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: any }) => {
     const pos = position ? `(${position})` : ''
-    return `${quantity} x ${name} ${pos} +${price}`
+    const str = `${quantity} x ${name} ${pos}`
+    return price ? `${str} ${price}` : str
   }
 
   return (
@@ -184,7 +185,7 @@ const CartItem = (props: CartItemProps) => {
                             quantity: suboption.quantity,
                             name: suboption.name,
                             position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
+                            price: suboption.price > 0 && `+${parsePrice(suboption.price)}`
                           })}
                         </OText>
                       </ProductSubOption>

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}