ordering-ui-react-native 0.17.0 → 0.17.1-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.0",
+  "version": "0.17.1-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -58,7 +58,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",
@@ -114,7 +114,7 @@
     "react-native-tracking-transparency": "^0.1.1",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
-    "react-native-webview": "^11.22.7",
+    "react-native-webview": "^11.6.4",
     "react-native-youtube-iframe": "^2.2.2",
     "rn-placeholder": "^3.0.3",
     "styled-components": "^5.1.1",
@@ -126,8 +126,8 @@
     "@babel/core": "^7.11.6",
     "@babel/runtime": "^7.11.2",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-native": "^0.63.25",
     "@types/react-native-calendar-picker": "^7.0.2",
     "babel-jest": "^26.3.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/ActiveOrders/styles.tsx

@@ -1,10 +1,6 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
-export const ActiveOrdersContainer = styled.ScrollView`
-  margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '450px'};
-  max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
-`
+export const ActiveOrdersContainer = styled.ScrollView``
 
 export const Card = styled.TouchableOpacity`
   flex: 1;
@@ -13,25 +9,24 @@ export const Card = styled.TouchableOpacity`
   margin-right: 10px;
   min-width: 320px;
   width: 320px;
-  height: ${({ isMiniCard }: { isMiniCard: boolean }) => !isMiniCard ? '100px' : '200px'};
+  margin-bottom: 10px;
+  ${({ isMiniCard }: { isMiniCard: boolean }) => !isMiniCard && css`
+    padding: 10px 0;
+  `};
 `
 
 export const Map = styled.View`
   flex: 1;
-  height: 125px;
-  margin-bottom: 10px;
 `
 
 export const Information = styled.View`
   flex-direction: row;
   flex: 1;
-  height: 100px;
   align-items: center;
   padding: 10px;
 `
 
-export const Logo = styled.View`
-`
+export const Logo = styled.View``
 
 export const OrderInformation = styled.View`
   flex-direction: row;
@@ -40,8 +35,7 @@ export const OrderInformation = styled.View`
   padding-left: 10px;
 `
 
-export const BusinessInformation = styled.View`
-`
+export const BusinessInformation = styled.View``
 
 export const Price = styled.View`
   justify-content: space-between;

package/src/components/BusinessInformation/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import {
   BusinessInformation as BusinessInformationController,
-  useLanguage
+  useLanguage,
+  useConfig
 } from 'ordering-components/native'
 import { OText } from '../shared'
 import {
@@ -26,6 +27,8 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
+	const [{ configs }] = useConfig();
+
   const daysOfWeek = [
     t('SUNDAY_ABBREVIATION', 'Sun'),
     t('MONDAY_ABBREVIATION', 'Mon'),
@@ -35,9 +38,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
     t('FRIDAY_ABBREVIATION', 'Fri'),
     t('SATURDAY_ABBREVIATION', 'Sat')
   ]
-  const scheduleFormatted = ({ hour, minute } : {hour : number | string, minute : number | string}) => {
-    const checkTime = (val : number | string) => val < 10 ? `0${val}` : val
-    return `${checkTime(hour)}:${checkTime(minute)}`
+  const is12hours = configs?.format_time?.value?.includes('12')
+
+  const scheduleFormatted = ({ hour, minute } : { hour : number | string, minute : number | string}) => {
+    const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
+		const zz = hour === 0 ? t('AM', 'AM') : hour >= 12 ? t('PM', 'PM') : t('AM', 'AM');
+		const h = parseInt(`${hour}`);
+		return is12hours ? `${h === 0 ? 12 : h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}` : `${checkTime(hour)}:${checkTime(minute)}`;
   }
 
   return (

package/src/components/BusinessInformation/styles.tsx

@@ -18,7 +18,7 @@ export const InnerContent = styled.View`
 `
 export const WrapScheduleBlock = styled.ScrollView`
   margin: 20px 0;
-  max-height: 500px;
+  max-height: 520px;
 `
 export const ScheduleBlock = styled.View`
   display: flex;
@@ -27,7 +27,7 @@ export const ScheduleBlock = styled.View`
   padding: 0 20px;
   border-left-width: 1px;
   border-color: ${(props: any) => props.theme.colors.lightGray};
-  max-width: 100px;
+  max-width: 120px;
 `
 export const WrapBusinessMap = styled.View`
   max-height: 200px;

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/OrderCreating/index.tsx

@@ -131,26 +131,6 @@ export const OrderCreating = (props: any) => {
           <OText size={14}>{address}</OText>
         </LocationWrapper>
       )}
-      {cart && (
-        <DeliveryWrapper>
-          <DeliveryContentWrapper>
-            <SimpleIcon
-              name='clock'
-              size={20}
-              color={theme.colors.primary}
-              style={{ marginRight: 10 }}
-            />
-            <OText size={14}>
-            {orderState?.options?.type === 1
-              ? t('DELIVERY_TIME', 'Delivery Time')
-              : t('PICK_UP', 'Pick Time')}
-            </OText>
-          </DeliveryContentWrapper>
-          <View>
-            <OText size={14} weight='700'>{parseDeliveryTime()}</OText>
-          </View>
-        </DeliveryWrapper>
-      )}
       {cardData?.card?.brand && (
         <View style={{ flexDirection: 'row', marginBottom: 27 }}>
           {getIconCard(cardData?.card?.brand, 20)}
@@ -175,4 +155,4 @@ export const OrderCreating = (props: any) => {
       )}
     </OrderCreatingContainer>
   )
-}
+}

package/src/components/OrdersOption/index.tsx

@@ -102,46 +102,71 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   }
 
   useEffect(() => {
+    const length = orders.filter((order : any) => orderStatus.includes(order.status)).length
+
     setOrdersLength && setOrdersLength({
       ...ordersLength,
-      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: orders.length
+      [activeOrders ? 'activeOrdersLength' : 'previousOrdersLength']: length
     })
-  }, [orders.length])
+    ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] = length
+  }, [orders])
 
   useEffect(() => {
-    setOrdersFiltered(filterForOrders === 'preorders' ? orders.filter((order : any) => order.status === 13) : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13))
+    setOrdersFiltered(filterForOrders === 'preorders'
+      ? orders.filter((order : any) => order.status === 13)
+      : orders.filter((order : any) => orderStatus.includes(order.status) && order.status !== 13)
+    )
   }, [filterForOrders, orders])
 
   return (
-    <>
+    <View style={{ marginBottom: 20 }}>
       <OptionTitle>
-        {(!activeOrders || (activeOrders && ordersLength.activeOrdersLength > 0) || (ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength === 0)) && !isLoadingFirstRender && (
-          <>
-            <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
-              <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
-                {titleContent || (activeOrders
-                  ? t('ACTIVE_ORDERS', 'Active Orders')
-                  : t('PREVIOUS_ORDERS', 'Previous Orders'))}
-              </OText>
-            </TouchableOpacity>
-            {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
-            <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
-              <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
-                {t('PREORDERS', 'Preorders')}
-              </OText>
-            </TouchableOpacity>
-            )}
-          </>
+        <TouchableOpacity onPress={() => setFilterForOrders('active-orders')}>
+          <OText size={16} color={filterForOrders === 'active-orders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} mRight={10} >
+            {titleContent || (activeOrders
+              ? t('ACTIVE_ORDERS', 'Active Orders')
+              : t('PREVIOUS_ORDERS', 'Previous Orders'))}
+          </OText>
+        </TouchableOpacity>
+        {activeOrders && orders.filter((order : any) => order.status === 13)?.length > 0 && (
+          <TouchableOpacity onPress={() => setFilterForOrders('preorders')}>
+            <OText size={16} color={filterForOrders === 'preorders' ? theme.colors.black : theme.colors.textSecondary} mBottom={10} >
+              {t('PREORDERS', 'Preorders')}
+            </OText>
+          </TouchableOpacity>
         )}
       </OptionTitle>
-      {!loading && orders.length === 0 && !isLoadingFirstRender && activeOrders && ordersLength.previousOrdersLength === 0 && ordersLength.activeOrdersLength !== 0 && (
-        <NotFoundSource
-          content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-          image={imageFails}
-          conditioned
-        />
+      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
+        activeOrders ? (
+          <ActiveOrders
+            orders={ordersFiltered}
+            pagination={pagination}
+            loadMoreOrders={loadMoreOrders}
+            reorderLoading={reorderLoading}
+            customArray={customArray}
+            getOrderStatus={getOrderStatus}
+            onNavigationRedirect={onNavigationRedirect}
+            setScreen={setScreen}
+            screen={screen}
+            isPreorders={filterForOrders === 'preorders'}
+            preordersLength={orders.filter((order : any) => order.status === 13)?.length}
+          />
+        ) : (
+          <PreviousOrders
+            reorderLoading={reorderLoading}
+            orders={ordersFiltered}
+            pagination={pagination}
+            loadMoreOrders={loadMoreOrders}
+            getOrderStatus={getOrderStatus}
+            onNavigationRedirect={onNavigationRedirect}
+            handleReorder={handleReorder}
+          />
+        )
       )}
-      {!loading && orders.length === 0 && !isLoadingFirstRender && ordersLength.previousOrdersLength === 0 && (
+      {!loading &&
+        !isLoadingFirstRender &&
+        ordersLength[activeOrders ? 'activeOrdersLength' : 'previousOrdersLength'] === 0 &&
+      (
         <NotFoundSource
           content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
           image={imageFails}
@@ -179,34 +204,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           )}
         </>
       )}
-      {!loading && !error && orders.length > 0 && !isLoadingFirstRender && (
-        activeOrders ? (
-          <ActiveOrders
-            orders={ordersFiltered}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            reorderLoading={reorderLoading}
-            customArray={customArray}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            setScreen={setScreen}
-            screen={screen}
-            isPreorders={filterForOrders === 'preorders'}
-            preordersLength={orders.filter((order : any) => order.status === 13)?.length}
-          />
-        ) : (
-          <PreviousOrders
-            reorderLoading={reorderLoading}
-            orders={ordersFiltered}
-            pagination={pagination}
-            loadMoreOrders={loadMoreOrders}
-            getOrderStatus={getOrderStatus}
-            onNavigationRedirect={onNavigationRedirect}
-            handleReorder={handleReorder}
-          />
-        )
-      )}
-    </>
+    </View>
   )
 }
 

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' || payment === 'Cancelled by user') {
         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>
-  )
-}
+)}