ordering-ui-react-native 0.14.41 → 0.14.42-release

package/src/components/PaymentOptionsWebView/index.tsx

@@ -0,0 +1,150 @@
+import React, { useRef, useState } from 'react'
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import WebView from 'react-native-webview';
+import { ActivityIndicator } from 'react-native-paper';
+
+import {
+    ToastType,
+    useToast,
+    useApi,
+    useLanguage,
+    useConfig
+} from 'ordering-components/native';
+
+import { OText } from '../shared';
+
+interface PaymentOptionsWebViewParams {
+    onNavigationRedirect?: Function,
+    uri?: any,
+    user?: any,
+    token?: any,
+    cart?: any,
+    currency?: any,
+    webviewPaymethod?: any,
+    setShowGateway?: any,
+    setOpenOrderCreating?: any,
+    locationId?: any
+}
+export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
+    const { 
+        onNavigationRedirect,
+        uri,
+        user,
+        token,
+        cart,
+        currency,
+        webviewPaymethod,
+        setShowGateway,
+        setOpenOrderCreating,
+        locationId
+    } = props
+
+   const webviewRef = useRef<any>(null)
+   const [, { showToast }] = useToast();
+   const [ordering] = useApi()
+   const [{ configs }] = useConfig();
+   const [, t] = useLanguage();
+
+   
+   const [progClr, setProgClr] = useState('#424242');
+   const [prog, setProg] = useState(true);
+
+   const handleCloseWebview = () => {
+    setProg(true);
+    setShowGateway({ open: false, closedByUser: true })
+  }
+
+   const onMessage = (e: any) => {
+        if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
+            let payment = JSON.parse(e.nativeEvent.data);
+
+            if (payment === 'api error') {
+                setShowGateway({ closedByUser: true, open: false })
+                setProg(true);
+            }
+
+            if (payment) {
+                if (payment.error) {
+                showToast(ToastType.Error, payment.result)
+                setOpenOrderCreating && setOpenOrderCreating(false)
+                } else if (payment?.result?.order?.uuid) {
+                showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
+                onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true})
+                }
+                setProg(true);
+                setShowGateway({ closedByUser: false, open: false })
+            }
+        }
+   }
+
+   return (
+    <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
+          <Icon
+            name="x"
+            size={35}
+            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+            onPress={handleCloseWebview}
+          />
+          <OText
+            style={{
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#00457C',
+              marginBottom: 5,
+              marginTop: 10
+            }}>
+           {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
+          </OText>
+          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
+            <ActivityIndicator size={24} color={progClr} />
+          </View>
+          <WebView
+            source={{ uri: uri }}
+            onMessage={onMessage}
+            ref={webviewRef}
+            javaScriptEnabled={true}
+            javaScriptEnabledAndroid={true}
+            cacheEnabled={false}
+            cacheMode='LOAD_NO_CACHE'
+            style={{ flex: 1 }}
+            onShouldStartLoadWithRequest={() => true}
+            onLoadStart={() => {
+              setProg(true);
+              setProgClr('#424242');
+            }}
+            onLoadProgress={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoad={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoadEnd={(e) => {
+            const messageParams = locationId ? { locationId } : {}
+              const message = {
+                action: 'init',
+                data: {
+                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+                  payData: {
+                    paymethod_id: webviewPaymethod?.id,
+                    amount: cart?.balance ?? cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id,
+                    user_name: user?.name
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: webviewPaymethod?.credentials?.client_id,
+                  ...messageParams
+                }
+              }
+              setProg(false);
+              webviewRef?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
+    </View>
+)}

package/src/components/ProductForm/index.tsx

@@ -132,26 +132,26 @@ export const ProductOptionsUI = (props: any) => {
                     <View style={{ flexDirection: 'column', width: '100%' }}>
                       <View style={{ flexDirection: 'row', marginTop: 15 }}>
                         <OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{' '}</OText>
-                        {product?.calories && (
+                        {!!product?.calories && (
                           <OText size={16} style={styles.caloriesStyle}>{product?.calories} cal</OText>
                         )}
                       </View>
                       <View style={{ flexDirection: 'row', marginBottom: 10 }}>
                         <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-                        {product?.offer_price && (
+                        {!!product?.offer_price !== null && product?.in_offer && (
                           <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
                         )}
                       </View>
-                      {(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
+                      {(!!product?.estimated_person || (!!product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
                         <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
                           {
                             ((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
                             && <>{t('SKU', 'Sku')}{' '}{product?.sku || productCart?.sku}</>
                           }
-                          {product?.sku && product?.sku !== '-1' && product?.sku !== '1' && product?.estimated_person && (
+                          {!!product?.sku && product?.sku !== '-1' && product?.sku !== '1' && !!product?.estimated_person && (
                             <>&nbsp;&#183;&nbsp;</>
                           )}
-                          {product?.estimated_person
+                          {!!product?.estimated_person
                             && <>{product?.estimated_person}{' '}{t('ESTIMATED_PERSONS', 'persons')}</>
                           }
                         </OText>
@@ -335,7 +335,7 @@ export const ProductOptionsUI = (props: any) => {
                 />
               ) : (
                 <OButton
-                  onClick={navigation.navigate('AddressList')}
+                  onClick={() => navigation.navigate('AddressList')}
                 />
               )
             )}

package/src/components/SingleProductCard/index.tsx

@@ -86,7 +86,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
         <PricesContainer>
           <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
-          {product?.offer_price && (
+          {!!product?.offer_price !== null && product?.in_offer && (
             <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
           )}
         </PricesContainer>

package/src/components/StripeElementsForm/index.tsx

@@ -33,19 +33,33 @@ const StripeElementsFormUI = (props: any) => {
   const { confirmSetupIntent, loading: confirmSetupLoading } = useConfirmSetupIntent();
   const [createPmLoading, setCreatePmLoading] = useState(false);
 
-  const billingDetails = {
-    name: `${user.name} ${user.lastname}`,
-    email: user.email,
-    address: user.address
-  };
+  let billingDetails: any = {}
+
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
+
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
+
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
   const createPayMethod = async () => {
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
     try {
       setCreatePmLoading(true)
-      const { paymentMethod } = await createPaymentMethod({
-        type: 'Card',
-        billingDetails,
-      });
+      const { paymentMethod } = await createPaymentMethod(params);
 
       setCreatePmLoading(false)
       handleSource && handleSource({
@@ -68,11 +82,12 @@ const StripeElementsFormUI = (props: any) => {
       createPayMethod();
       return
     }
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
     try {
-      const { setupIntent, error } = await confirmSetupIntent(requirements, {
-        type: 'Card',
-        billingDetails,
-      });
+      const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
       if (setupIntent?.status === 'Succeeded') {
         stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);

package/src/components/TaxInformation/index.tsx

@@ -1,51 +1,83 @@
 import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components/native'
+import { useLanguage } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { TaxInformationContainer, ProductContainer } from './styles'
 import { OText } from '../shared'
 
 interface taxInformationParams {
-  data: { name: string, description?: string, rate: string | number, type: number, fixed?: number, percentage?: number, id: number },
-  products: Array<any>
+  data: {
+    name: string,
+    description?: string,
+    rate: string | number,
+    type: number,
+    fixed?: number,
+    percentage?: number,
+    id: number,
+    discounts?: any
+  },
+  products: Array<any>,
+  type: string
 }
 
 export const TaxInformation = (props: taxInformationParams) => {
   const {
     data,
-    products
+    products,
+    type
   } = props
 
   const [, t] = useLanguage()
-  const [{ parsePrice }] = useUtils()
 
-  const isTax = typeof data?.rate === 'number'
-  const TaxFeeString = isTax ? 'tax' : 'fee'
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
 
+  const getFilterValidation = (product: any) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find(offer => offer?.name === data?.name)
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
   return (
     <TaxInformationContainer>
-      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {`${data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
-      </OText>
-      {data?.description && (
+      {!!data?.description ? (
+        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
+        </OText>
+      ) : (
         <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
-          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
         </OText>
       )}
-      <OText>{t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:</OText>
-      <ProductContainer>
-        {
-          products.filter((product: any) => isTax ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null) : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))).map(product => (
-            <SingleProductCard
-              key={product.id}
-              product={product}
-              isSoldOut={false}
-              businessId={product?.business_id}
-            />
-          ))
-        }
-      </ProductContainer>
+      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+        <>
+          <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
+          <ProductContainer>
+            {
+              products.filter((product: any) => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                  isSoldOut={false}
+                  businessId={product?.business_id}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
     </TaxInformationContainer>
   )
 }

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/components/shared/OIcon.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import { ImageStyle } from 'react-native'
 import styled from 'styled-components/native'
+import { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View``
 
@@ -23,10 +24,12 @@ interface Props {
 }
 
 const OImage = (props: Props): React.ReactElement => {
+  const theme = useTheme();
+  
   return (
     <Wrapper style={{ borderRadius: props.style?.borderRadius, overflow: 'hidden', marginHorizontal: props.style?.marginHorizontal }}>
       <SImage
-        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : require('../../assets/icons/lunch.png')}
+        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : theme.images.general.lunch || require('../../assets/icons/lunch.png')}
         style={{
           tintColor: props.color,
           flex: props.isWrap ? 1 : 0,

package/src/index.tsx

@@ -45,6 +45,7 @@ import { OrdersOption } from './components/OrdersOption';
 import { PaymentOptionCash } from './components/PaymentOptionCash';
 import { PaymentOptionStripe } from './components/PaymentOptionStripe';
 import { PaymentOptions } from './components/PaymentOptions';
+import { PaymentOptionsWebView } from './components/PaymentOptionsWebView';
 import { PhoneInputNumber } from './components/PhoneInputNumber';
 import { PreviousOrders } from './components/PreviousOrders';
 import { ProductForm } from './components/ProductForm';
@@ -144,6 +145,7 @@ export {
   PaymentOptionCash,
   PaymentOptionStripe,
   PaymentOptions,
+  PaymentOptionsWebView,
   PhoneInputNumber,
   PreviousOrders,
   ProductForm,

package/src/navigators/HomeNavigator.tsx

@@ -21,6 +21,7 @@ import HelpOrder from '../pages/HelpOrder'
 import HelpGuide from '../pages/HelpGuide'
 import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
 import Splash from '../pages/Splash';
+import ProductDetails from '../pages/ProductDetails';
 const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
@@ -101,6 +102,11 @@ const HomeNavigator = (e : any) => {
                     component={BusinessProductsList}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="ProductDetails"
+                    component={ProductDetails}
+                    options={{ headerShown: false }}
+                  />
                   <Stack.Screen
                     name="ReviewOrder"
                     component={ReviewOrder}

package/src/pages/ProductDetails.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import styled, { useTheme } from 'styled-components/native';
+import { Platform } from 'react-native';
+import { ProductForm as ProductFormController } from '../components/ProductForm';
+interface Props {
+  navigation: any;
+  route: any;
+}
+
+const ProductDetails = (props: Props) => {
+  const theme = useTheme()
+
+  const productProps = {
+    ...props,
+    isCartProduct: props.route.params?.isCartProduct,
+    isFromCheckout: props.route.params?.isFromCheckout,
+    productCart: props.route.params?.productCart,
+    product: props.route.params?.product,
+    businessSlug: props.route.params?.businessSlug,
+    businessId: props.route.params?.businessId,
+    categoryId: props.route.params?.categoryId,
+    productId: props.route.params?.productId,
+    onSave: props?.navigation?.canGoBack()
+      ? () => { props.route.params?.onAction && props.route.params?.onAction(); props?.navigation?.goBack(); }
+      : () => { props.route.params?.onAction && props.route.params?.onAction(); props?.navigation?.navigate('BottomTab') }
+    ,
+    handleGoBack: props?.navigation?.canGoBack()
+      ? () => {
+        props.route.params?.onAction &&
+        props.route.params?.onAction();
+        props?.navigation?.goBack();
+      }
+      : (businessSlug: any) => {
+        props.route.params?.onAction &&
+        props.route.params?.onAction();
+        businessSlug
+          ? props?.navigation.navigate('Business', { store: businessSlug })
+          : props?.navigation.navigate('BottomTab')
+      }
+  };
+
+  const BusinessProductsListView = styled.SafeAreaView`
+    flex: 1;
+    background-color: ${theme.colors.backgroundPage};
+    padding-top: ${Platform.OS === 'ios' ? '0px' : '20px'};
+  `;
+
+  return (
+    <BusinessProductsListView>
+      <ProductFormController {...productProps} />
+    </BusinessProductsListView>
+  );
+};
+
+export default ProductDetails;

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -410,8 +410,7 @@ const LoginFormUI = (props: LoginParams) => {
                     textInputProps={{
                       returnKeyType: 'next',
                       onSubmitEditing: () => inputRef?.current?.focus?.(),
-                      style: { borderWidth: 0, fontSize: 12 },
-					  maxLength: 10
+                      style: { borderWidth: 0, fontSize: 12 }
                     }}
                     textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
                   />

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

@@ -21,10 +21,10 @@ import { Cart as TypeCart } from '../../types';
 import CartItem from '../CartItem';
 import NavBar from '../NavBar';
 import { CouponControl } from '../CouponControl';
-import { LANDSCAPE, PORTRAIT, useDeviceOrientation} from "../../../../../src/hooks/DeviceOrientation";
+import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 import { Container } from '../../../../../src/layouts/Container';
-
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 const CartUI = (props: any) => {
   const {
     cart,
@@ -35,7 +35,7 @@ const CartUI = (props: any) => {
     removeProduct,
     setIsCartsLoading,
     navigation,
-  } : CartUIProps = props
+  }: CartUIProps = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -83,8 +83,8 @@ const CartUI = (props: any) => {
 
   const handleChangeOrderType = () => {
     navigation.push('DeliveryType', {
-      callback : () => {navigation.pop(1)},
-      goBack: () => {navigation.pop(1)},
+      callback: () => { navigation.pop(1) },
+      goBack: () => { navigation.pop(1) },
     });
   }
 
@@ -97,7 +97,7 @@ const CartUI = (props: any) => {
           title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
           onActionLeft={goToBack}
           style={{ height: orientationState?.dimensions?.height * 0.08 }}
-          btnStyle={{paddingLeft: 0}}
+          btnStyle={{ paddingLeft: 0 }}
           rightComponent={(
             <OButton
               text={t('CANCEL_ORDER', 'Cancel order')}
@@ -183,6 +183,7 @@ const CartUI = (props: any) => {
                 </OText>
               </OSTable>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == PORTRAIT && (
+
                 <OSTable
                   style={{
                     backgroundColor: theme.colors.success,
@@ -197,10 +198,7 @@ const CartUI = (props: any) => {
                       flexDirection: 'row',
                     }}
                   >
-                    <OIcon
-                      src={theme.images.general.check_decagram}
-                    />
-
+                    <AntDesignIcon name='checkcircle' size={24} color='#00D27A' />
                     {cart?.discount_type === 1 ? (
                       <OText
                         mLeft={15}
@@ -219,8 +217,6 @@ const CartUI = (props: any) => {
                       </OText>
                     )}
                   </View>
-
-
                   <OText
                     size={16}
                     color={theme.colors.green}
@@ -252,9 +248,9 @@ const CartUI = (props: any) => {
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
                       !!!parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                    (
-                      `(${parseNumber(cart?.driver_tip_rate)}%)`
-                    )}
+                      (
+                        `(${parseNumber(cart?.driver_tip_rate)}%)`
+                      )}
                   </OText>
                   <OText>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
@@ -294,7 +290,7 @@ const CartUI = (props: any) => {
       <>
         <FloatingLayout isIos={Platform.OS === 'ios'}>
           <CheckoutAction>
-            <View style={{display: 'flex', flexDirection: 'row'}}>
+            <View style={{ display: 'flex', flexDirection: 'row' }}>
               {cart?.discount > 0 && cart?.total >= 0 && orientationState?.orientation == LANDSCAPE && (
                 <OSTable
                   style={{
@@ -311,10 +307,7 @@ const CartUI = (props: any) => {
                       flexDirection: 'row',
                     }}
                   >
-                    <OIcon
-                      src={theme.images.general.check_decagram}
-                    />
-
+                    <AntDesignIcon name='checkcircle' size={24} color='#00D27A' />
                     {cart?.discount_type === 1 ? (
                       <OText
                         mLeft={15}
@@ -369,7 +362,7 @@ const CartUI = (props: any) => {
                   imgRightSrc={null}
                   textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
                   onClick={() => { navigation?.navigate('CustomerName', { cartUuid: cart?.uuid }) }}
-                  style={{width: '100%', marginTop: 4}}
+                  style={{ width: '100%', marginTop: 4 }}
                 />
               </View>
             </View>

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

@@ -16,6 +16,7 @@ import { Product } from '../../types';
 import QuantityControl from '../QuantityControl';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
 import { useTheme } from 'styled-components/native';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
 
 const CartItem = (props: CartItemProps) => {
   const theme = useTheme()
@@ -97,7 +98,6 @@ const CartItem = (props: CartItemProps) => {
                 <OButton
                   bgColor="transparent"
                   borderColor="transparent"
-                  imgLeftSrc={theme.images.general.edit}
                   text={t('EDIT', 'Edit')}
                   style={{ justifyContent: 'flex-start', paddingLeft: 0, maxWidth: 80 }}
                   textStyle={{
@@ -105,16 +105,18 @@ const CartItem = (props: CartItemProps) => {
                     marginLeft: 6,
                   }}
                   onClick={() => { onEditProduct ? onEditProduct(product) : null }}
+                  iconProps={{ name: 'edit' }}
+                  IconCustom={() => <FontAwesomeIcon name='edit' size={24} color={theme.colors.primary} />}
                 />
                 <OIconButton
                   bgColor="transparent"
                   borderColor="transparent"
-                  RenderIcon={isProductIngredients && (() => 
-                      <EvilIcons
-                        name={isActive ? 'chevron-up': 'chevron-down'}
-                        size={40}
-                        color={theme.colors.primary}
-                      />
+                  RenderIcon={isProductIngredients && (() =>
+                    <EvilIcons
+                      name={isActive ? 'chevron-up' : 'chevron-down'}
+                      size={40}
+                      color={theme.colors.primary}
+                    />
                   )}
                   style={{ justifyContent: 'flex-start', right: 40 }}
                   onClick={() => (!product?.valid_menu && isCartProduct)