ordering-ui-react-native 0.15.27 → 0.15.28-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.27",
+  "version": "0.15.28-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -57,7 +57,7 @@
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#development",
+    "ordering-components": "github:Ordering-Inc/ordering-components#release",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",
@@ -99,6 +99,7 @@
     "react-native-picker-select": "^8.0.4",
     "react-native-print": "^0.9.0",
     "react-native-reanimated": "^1.13.1",
+    "react-native-recaptcha-that-works": "^1.2.0",
     "react-native-restart": "^0.0.22",
     "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.11.0",

package/src/DeliveryApp.tsx

@@ -7,7 +7,8 @@
  */
 
 import * as React from 'react';
-import { LogBox } from 'react-native';
+import { LogBox, Platform } from 'react-native';
+import * as Sentry from "@sentry/react-native";
 import { OrderingProvider } from 'ordering-components/native';
 import RNBootSplash from "react-native-bootsplash";
 
@@ -22,6 +23,47 @@ import theme from './theme.json';
 import AppContainer from './AppContainer';
 import { FacebookPixel } from './components/FacebookPixel';
 
+Sentry.init({
+  environment: Platform.OS === 'ios' ? 'ios' : 'android',
+  dsn: 'https://e5e1115dc93b49109f4ab65f2098bef9@o460529.ingest.sentry.io/5722123',
+  release: 'ordering-ui-native@' + process.env.npm_package_version,
+  ignoreErrors: [
+    'is not defined',
+    'is not a function',
+    'can\'t find variable',
+    'objects are not valid',
+    'element type is invalid',
+    'requiring module',
+    'has not been registered',
+    'failed to connect to debugger!',
+    'rendered more hooks than',
+    'rendered fewer hooks than',
+    'should have a queue',
+    'the OS most likely terminated',
+    'Connection timed out',
+    'java.io.EOFException',
+    'Abort',
+    'Segfault',
+    'Failed to allocate a',
+    'Application Not Responding',
+    'connection no longer valid',
+    'IllegalInstruction',
+    'React.Children.only expected to receive a single React element child.',
+    'unrecognized selector sent to instance'
+  ],
+  tracesSampleRate: 0.2,
+  // Release health
+  enableAutoSessionTracking: true,
+  // Sessions close after app is 10 seconds in the background.
+  sessionTrackingIntervalMillis: 10000,
+
+  integrations: [
+    new Sentry.ReactNativeTracing({
+      routingInstrumentation: reactNavigationV5Instrumentation,
+    })
+  ]
+});
+
 LogBox.ignoreLogs([
   'Sending \`onAnimatedValueUpdate` with no listeners registered.',
   'Non-serializable values were found in the navigation state.',

package/src/components/BusinessController/index.tsx

@@ -32,6 +32,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
     business,
     handleClick,
     isBusinessOpen,
+    getBusinessOffer,
     businessWillCloseSoonMinutes,
     isBusinessClose
   } = props;
@@ -145,9 +146,14 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
           />
         </BusinessLogo>
         <BusinessState>
-          {!isBusinessOpen && (
+          {(isBusinessOpen || !!getBusinessOffer(business?.offers)) && (
             <View style={styles.businessStateView}>
-              <OText color={theme.colors.white} size={20} style={styles.businessStateText}>
+              {getBusinessOffer(business?.offers) && (
+                <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
+                  {getBusinessOffer(business?.offers) || parsePrice(0)}
+                </OText>
+              )}
+              <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
                 {t('PREORDER', 'PREORDER')}
               </OText>
             </View>

package/src/components/BusinessTypeFilter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { StyleSheet, View, ScrollView, TouchableOpacity, Dimensions, Platform, PlatformIOSStatic } from 'react-native'
+import { StyleSheet, View, ScrollView, Dimensions, Platform, PlatformIOSStatic, Pressable } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components/native'
 
@@ -9,6 +9,7 @@ import { BusinessTypeFilterParams } from '../../types'
 import { useTheme } from 'styled-components/native'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import DeviceInfo from 'react-native-device-info';
+import { TouchableOpacity } from 'react-native-gesture-handler'
 
 const windowWidth = Dimensions.get('window').width;
 
@@ -71,11 +72,13 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
           <OIcon
             url={item.image}
             style={styles.logo}
+            cover
           />
         ) : (
           <OIcon
             src={theme.images.categories.all}
             style={styles.logo}
+            cover
           />
         )}
         <OText

package/src/components/BusinessesListing/index.tsx

@@ -191,7 +191,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
       </OrderControlContainer>

package/src/components/Checkout/index.tsx

@@ -529,7 +529,6 @@ const CheckoutUI = (props: any) => {
                   paySelected={paymethodSelected}
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
-                  handlePlaceOrder={handlePlaceOrder}
                 />
               </ChPaymethods>
             </ChSection>
@@ -592,6 +591,19 @@ const CheckoutUI = (props: any) => {
                     {t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
                   </OText>
                 )}
+
+                {options.type === 1 &&
+                  validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                  validationFields?.fields?.checkout?.driver_tip?.required &&
+                  (Number(cart?.driver_tip) <= 0) && (
+                  <OText
+                    style={{ textAlign: 'center' }}
+                    color={theme.colors.error}
+                    size={14}
+                  >
+                    {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+                  </OText>
+								)}
               </ChErrors>
             </ChSection>
           )}
@@ -602,8 +614,16 @@ const CheckoutUI = (props: any) => {
           <>
             <FloatingButton
               handleClick={() => handlePlaceOrder()}
-              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
-              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
+              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
+                              (options.type === 1 &&
+                                validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                                validationFields?.fields?.checkout?.driver_tip?.required &&
+                                (Number(cart?.driver_tip) <= 0))}
+              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
+                        (options.type === 1 &&
+                          validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                          validationFields?.fields?.checkout?.driver_tip?.required &&
+                          (Number(cart?.driver_tip) <= 0))}
               btnText={cart?.subtotal_to_calculate >= cart?.minimum
                 ? (
                   placing

package/src/components/DriverTips/index.tsx

@@ -49,7 +49,7 @@ const DriverTipsUI = (props: any) => {
   const [{ configs }] = useConfig();
   const [{loading}] = useOrder()
 
-  const [value, setvalue] = useState(0);
+  const [value, setvalue] = useState('');
   const [valueOption,setValueOption] = useState(0)
 
   const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
@@ -57,9 +57,12 @@ const DriverTipsUI = (props: any) => {
     : `0${configs?.format_number_currency?.value}`
 
   const handleChangeDriverTip = (val: any) => {
-    let tip = parseFloat(val)
-    tip = isNaN(tip) ? 0 : tip
-    setvalue(tip)
+    const tip = Number(val)
+    if ((isNaN(tip) || tip < 0)) {
+      setvalue(value)
+      return
+    }
+    setvalue(val)
   }
 
   const handleChangeOptionCustom = (val : any) => {
@@ -110,6 +113,8 @@ const DriverTipsUI = (props: any) => {
             <OInput
               placeholder={placeholderCurrency}
               style={style.inputStyle}
+              value={value}
+              type={'numeric'}
               onChange={handleChangeDriverTip}
               autoCapitalize='none'
               autoCorrect={false}
@@ -121,10 +126,10 @@ const DriverTipsUI = (props: any) => {
               textStyle={{ color: 'white', fontSize: 18, maxWidth: 110, minWidth: 60 }}
               imgRightSrc={null}
               textProps={{numberOfLines: 1}}
-              isDisabled={!(value > 0 && value !== driverTip) || !value}
+              isDisabled={parseFloat(value || '0') < 0 || parseFloat(value || '0') === driverTip || value === ''}
               onClick={() => {
                 handlerChangeOption(value)
-                setvalue(0)
+                setvalue('')
               }}
             />
           </DTWrapperInput>

package/src/components/LanguageSelector/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { I18nManager, Platform, StyleSheet, View } from 'react-native'
@@ -87,7 +87,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     changeDirection(Platform.OS === 'ios' ? language : langCode)
     handleChangeLanguage(Platform.OS === 'ios' ? language : langCode)
   }
-
+  
+  useEffect(() => {
+    changeDirection(currentLanguage)
+  }, [])
+  
   return (
     <Container>
       {languagesState?.languages ? (
@@ -101,6 +105,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
           disabled={orderState.loading}
           onClose={() => Platform.OS === 'ios' ? handlerChangeLanguage() : {}}
           onDonePress={() => handlerChangeLanguage()}
+          fixAndroidTouchableBug={true}
         />
       ) : <DummyContainer />}
     </Container>

package/src/components/OrderDetails/index.tsx

@@ -514,7 +514,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 </Table>
               )}
               {
-                order?.taxes?.length === 0 && order?.tax_type === 2 && (
+                order?.taxes?.length === 0 && order?.tax_type === 2 && order?.summary?.tax > 0 && (
                   <Table>
                     <OText>
                       {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
@@ -524,7 +524,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 )
               }
               {
-                order?.fees?.length === 0 && (
+                order?.fees?.length === 0 && order?.summary?.service_fee > 0 && (
                   <Table>
                     <OText>
                       {t('SERVICE_FEE', 'Service fee')}

package/src/components/PaymentOptions/index.tsx

@@ -61,13 +61,12 @@ const PaymentOptionsUI = (props: any) => {
     handlePaymethodDataChange,
     handlePaymentMethodClickCustom,
     isOpenMethod,
-    setCardData,
-    handlePlaceOrder
+    setCardData
   } = props
 
   const theme = useTheme();
   const [, t] = useLanguage();
-  const methodsPay = ['google_pay', 'apple_pay']
+  const methodsPay = ['google_pay']
   const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
@@ -122,11 +121,8 @@ const PaymentOptionsUI = (props: any) => {
   }, [props.paySelected])
 
   useEffect(() => {
-    setCardData && setCardData(paymethodData)
-    if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-      handlePlaceOrder()
-    }
-  }, [paymethodData, paymethodSelected])
+    setCardData(paymethodData)
+  }, [paymethodData])
 
   const renderPaymethods = ({ item }: any) => {
     return (
@@ -156,7 +152,7 @@ const PaymentOptionsUI = (props: any) => {
     )
   }
 
-  const excludeGateway: any = ['stripe_connect', 'stripe_redirect']; //exclude connect & redirect
+  const excludeGateway: any = ['stripe_connect', 'stripe_redirect', 'apple_pay']; //exclude connect & redirect & apple pay
 
   return (
     <PMContainer>
@@ -285,11 +281,11 @@ const PaymentOptionsUI = (props: any) => {
         </KeyboardAvoidingView>
       </OModal>
 
-      {/* Stripe direct, Google pay, Apple pay */}
+      {/* Stripe direct */}
       <OModal
         entireModal
         title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-        open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
+        open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
         onClose={() => handlePaymethodClick(null)}
       >
         <KeyboardAvoidingView
@@ -298,13 +294,10 @@ const PaymentOptionsUI = (props: any) => {
           enabled={Platform.OS === 'ios' ? true : false}
         >
           <StripeElementsForm
-            cart={cart}
-            paymethod={isOpenMethod?.paymethod?.gateway}
-            methodsPay={methodsPay}
             businessId={props.businessId}
-            publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
+            publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
             handleSource={handlePaymethodDataChange}
-            onCancel={() => handlePaymethodClick(null)}
+            onCancel={() => handlePaymethodClick(false)}
           />
         </KeyboardAvoidingView>
       </OModal>

package/src/components/PaymentOptionsWebView/index.tsx

@@ -5,147 +5,146 @@ import WebView from 'react-native-webview';
 import { ActivityIndicator } from 'react-native-paper';
 
 import {
-  ToastType,
-  useToast,
-  useApi,
-  useLanguage,
-  useConfig
+    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
+    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 { 
+        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 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 [progClr, setProgClr] = useState('#424242');
-  const [prog, setProg] = useState(true);
-
-  const handleCloseWebview = () => {
+   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);
+   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 === '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 })
+            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 })
+            }
         }
-        setProg(true);
-        setShowGateway({ closedByUser: false, open: false })
-      }
-    }
-  }
+   }
 
-  return (
+   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, clientId: webviewPaymethod?.credentials?.application_id } : {}
-          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))
-        }}
-      />
+          <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/SingleProductCard/index.tsx

@@ -10,6 +10,7 @@ import {
 import { StyleSheet } from 'react-native'
 import { OText, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
+import FastImage from 'react-native-fast-image'
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
   const {
@@ -77,10 +78,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
       activeOpacity={1}
       onPress={() => onProductClick?.(product)}
     >
-      <OIcon
-        url={optimizeImage(product?.images, 'h_200,c_limit')}
-        style={styles.productStyle}
-      />
+      {product?.images ? (
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(product?.images, 'h_250,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<OIcon
+						src={theme?.images?.dummies?.product}
+						style={styles.productStyle}
+					/>
+				)}
       <CardInfo>
         <OText numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>{product?.name}</OText>
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>