ordering-ui-react-native 0.18.3 → 0.18.4-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.3",
+  "version": "0.18.4-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -49,8 +49,8 @@
     "@react-navigation/material-bottom-tabs": "^5.3.14",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.9.3",
-    "@segment/analytics-react-native": "^2.1.11",
-    "@segment/sovran-react-native": "^0.2.6",
+    "@segment/analytics-react-native": "2.1.11",
+    "@segment/sovran-react-native": "0.2.6",
     "@sentry/react-native": "^2.6.0",
     "@stripe/stripe-react-native": "^0.2.0",
     "@types/react-native-loading-spinner-overlay": "^0.5.2",
@@ -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",
@@ -76,6 +76,7 @@
     "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
+    "react-native-date-picker": "^4.2.13",
     "react-native-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",
@@ -83,6 +84,7 @@
     "react-native-fbsdk-next": "^7.0.1",
     "react-native-geocoding": "^0.5.0",
     "react-native-gesture-handler": "^1.8.0",
+    "react-native-get-random-values": "1.8.0",
     "react-native-gifted-chat": "^0.16.3",
     "react-native-google-places-autocomplete": "^2.1.3",
     "react-native-html-to-pdf": "^0.10.0",
@@ -114,7 +116,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 +128,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/BusinessInformation/index.tsx

@@ -19,6 +19,8 @@ import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { BusinessInformationParams } from '../../types'
 import { GoogleMap } from '../GoogleMap'
 import { useTheme } from 'styled-components/native';
+import moment from 'moment';
+
 const BusinessInformationUI = (props: BusinessInformationParams) => {
   const {
     businessState,
@@ -38,14 +40,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
     t('FRIDAY_ABBREVIATION', 'Fri'),
     t('SATURDAY_ABBREVIATION', 'Sat')
   ]
-  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)}`;
-  }
+  const formatTime = configs?.general_hour_format?.value
+
+	const checkTime = (val: number) => (val < 10 ? `0${val}` : val);
+	const timeFormated = (time: any) => {
+		return moment(`1900-01-01 ${checkTime(time.hour)}:${checkTime(time.minute)}`).format(formatTime)
+	}
 
   return (
     <BusinessInformationContainer>
@@ -105,13 +106,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
                   {schedule.enabled ? (
                     schedule.lapses.map( (time: any, k: number) => (
                     <React.Fragment key={k}>
-                      <OText>{scheduleFormatted(time.open)}</OText>
+                      <OText>{timeFormated(time.open)}</OText>
                       <OText mBottom={10} style={{
                         padding: 3,
                         borderBottomColor: theme.colors.primary,
                         borderBottomWidth: 1
                       }}
-                      >{scheduleFormatted(time.close)}</OText>
+                      >{timeFormated(time.close)}</OText>
                     </React.Fragment>
                   ))) : ( <OText>{t('CLOSED', 'Closed')}</OText>)}
                 </ScheduleBlock>

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 && !orderState?.options?.moment && (
-        <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)}

package/src/components/PaymentOptionsWebView/index.tsx

@@ -9,7 +9,8 @@ import {
   useToast,
   useApi,
   useLanguage,
-  useConfig
+  useConfig,
+  useOrder
 } from 'ordering-components/native';
 
 import { OText } from '../shared';
@@ -24,7 +25,9 @@ interface PaymentOptionsWebViewParams {
   webviewPaymethod?: any,
   setShowGateway?: any,
   setOpenOrderCreating?: any,
-  locationId?: any
+  locationId?: any,
+  additionalParams?: any
+  title?: string
 }
 export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
   const {
@@ -37,7 +40,9 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
     webviewPaymethod,
     setShowGateway,
     setOpenOrderCreating,
-    locationId
+    locationId,
+    title,
+    additionalParams = {}
   } = props
 
   const webviewRef = useRef<any>(null)
@@ -45,7 +50,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
   const [ordering] = useApi()
   const [{ configs }] = useConfig();
   const [, t] = useLanguage();
-
+  const [, { confirmCart }] = useOrder()
 
   const [progClr, setProgClr] = useState('#424242');
   const [prog, setProg] = useState(true);
@@ -55,9 +60,23 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
     setShowGateway({ open: false, closedByUser: true })
   }
 
-  const onMessage = (e: any) => {
+  const onMessage = async (e: any) => {
     if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
       let payment = JSON.parse(e.nativeEvent.data);
+      if (payment?.response && payment?.responsetext && payment.orderid) {
+        const credomaticData = {
+          credomatic: {
+            ...payment
+          }
+        }
+        const confirmCartRes = await confirmCart(payment.orderid, credomaticData)
+        if (confirmCartRes.error) {
+          showToast(ToastType.Error, confirmCartRes.error.message)
+        }
+        if (confirmCartRes.result.order?.uuid) {
+          onNavigationRedirect?.('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
+        }
+      }
 
       if (payment === 'api error' || payment === 'Cancelled by user') {
         setShowGateway({ closedByUser: true, open: false })
@@ -95,7 +114,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
           marginBottom: 5,
           marginTop: 10
         }}>
-        {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
+        {title || (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} />
@@ -110,6 +129,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
         cacheMode='LOAD_NO_CACHE'
         style={{ flex: 1 }}
         onShouldStartLoadWithRequest={() => true}
+        originWhitelist={["*"]}
         onLoadStart={() => {
           setProg(true);
           setProgClr('#424242');
@@ -139,7 +159,8 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
               currency: configs?.stripe_currency?.value || currency,
               userToken: token,
               clientId: webviewPaymethod?.credentials?.client_id,
-              ...messageParams
+              ...messageParams,
+              ...additionalParams
             }
           }
           setProg(false);
@@ -148,4 +169,4 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
       />
     </View>
   )
-}
+}

package/src/components/PhoneInputNumber/index.tsx

@@ -7,7 +7,7 @@ import { Wrapper } from './styles'
 
 import { PhoneInputParams } from '../../types';
 import { OText } from '../shared';
-import {transformCountryCode} from '../../utils'
+import {transformCountryCode, verifyCountryCode} from '../../utils'
 import {I18nManager} from 'react-native'
 import { useTheme } from 'styled-components/native';
 
@@ -88,7 +88,11 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
       <PhoneInput
         ref={phoneInput}
         defaultValue={userphoneNumber || defaultValue}
-        defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
+        defaultCode={defaultCode ?
+					!isNaN(defaultCode)
+						? transformCountryCode(defaultCode)
+						: verifyCountryCode(defaultCode)
+					: verifyCountryCode(configs?.default_country_code?.value)}
         onChangeFormattedText={(text : string) => handleChangeNumber(text)}
         withDarkTheme
         textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}

package/src/components/StripeMethodForm/index.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect } from 'react'
-import { useLanguage, useConfig } from 'ordering-components/native'
-import { useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
-import { OButton, OText } from '../shared';
-import { Platform, View } from 'react-native';
+import React, { useEffect } from 'react'
+import { useLanguage, useConfig, useOrder } from 'ordering-components/native'
+import { useGooglePay, useApplePay } from '@stripe/stripe-react-native'
+import { Platform } from 'react-native';
 import { StripeMethodFormParams } from '../../types';
-import Spinner from 'react-native-loading-spinner-overlay';
 import { android_app_id } from '../../config.json'
+
 export const StripeMethodForm = (props: StripeMethodFormParams) => {
   const {
     cart,
@@ -13,68 +12,114 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     onCancel,
     setErrors,
     paymethod,
-    devMode
+    devMode,
+    setMethodPaySupported,
+    placeByMethodPay,
+    methodPaySupported,
+    setPlaceByMethodPay,
+    cartTotal
   } = props
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
-  const [initialized, setInitialized] = useState(false);
-  const [loadingGooglePayment, setLoadingGooglePayment] = useState(false)
+  const [{ loading: loadingCart }] = useOrder()
   const [, t] = useLanguage()
-  const [configs] = useConfig()
+  const [{ configs }] = useConfig()
+  const applePay = ['global_apple_pay', 'apple_pay']
+  const googlePay = ['global_google_pay', 'google_pay']
 
   useEffect(() => {
-    if (paymethod !== 'google_pay' || !initGooglePay) return
     if (Platform.OS === 'ios') {
-      setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
       return
     }
-    const initialize = async () => {
-      try {
-        const { error } = await initGooglePay({
-          testEnv: devMode,
-          merchantName: android_app_id,
-          countryCode: 'US',
-          billingAddressConfig: {
-            format: 'FULL',
-            isPhoneNumberRequired: true,
-            isRequired: false,
-          },
-          existingPaymentMethodRequired: false,
-          isEmailRequired: true,
-        });
-
-        if (error) {
-          setErrors(error.code + ' - ' + error.message);
-          return;
-        }
-        setInitialized(true);
-      } catch (err: any) {
-        setErrors('Catch ' + err?.message)
-      }
+    if (!loadingCart) {
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
+      setErrors('')
     }
-    initialize();
-  }, [initGooglePay]);
+  }, [paymethod, loadingCart]);
 
   useEffect(() => {
-    if (paymethod !== 'apple_pay') return
+    if (applePay.includes(paymethod) && !paymethod) return
     if (Platform.OS === 'android') {
-      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      setPlaceByMethodPay(false)
+      setMethodPaySupported({
+        ...methodPaySupported,
+        loading: false
+      })
       return
     }
-  }, [])
+  }, [paymethod])
+
+  const initialize = async () => {
+    try {
+      setMethodPaySupported({
+        ...methodPaySupported,
+        loading: true
+      })
+      const { error } = await initGooglePay({
+        testEnv: devMode,
+        merchantName: android_app_id,
+        countryCode: 'US',
+        billingAddressConfig: {
+          format: 'FULL',
+          isPhoneNumberRequired: true,
+          isRequired: false,
+        },
+        existingPaymentMethodRequired: false,
+        isEmailRequired: true,
+      });
+
+      if (error) {
+        setErrors(error.code + ' - ' + error.message);
+        setMethodPaySupported({
+          enabled: false,
+          loading: false
+        })
+        setPlaceByMethodPay(false)
+        return true;
+      }
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
+      setErrors('')
+    } catch (err: any) {
+      setErrors('Catch ' + err?.message)
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
+    }
+  }
 
   const createPaymentMethod = async () => {
-    setLoadingGooglePayment(true)
+    setMethodPaySupported({
+      ...methodPaySupported,
+      loading: true
+    })
+    const initializeError = await initialize()
+    if (initializeError) return
     const { error, paymentMethod } = await createGooglePayPaymentMethod({
-      amount: cart?.balance ?? cart?.total,
+      amount: cartTotal ?? cart?.balance ?? cart?.total,
       currencyCode: configs?.stripe_currency?.value ?? 'USD',
     });
     if (error) {
       setErrors(error.code + ' - ' + error.message);
-      setLoadingGooglePayment(false)
-      return;
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
     } else if (paymentMethod) {
-      handleSource({
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      const source = {
         ...paymentMethod?.Card,
         id: paymentMethod.id,
         type: paymentMethod.type,
@@ -83,39 +128,49 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           brand: paymentMethod.Card.brand,
           last4: paymentMethod.Card.last4
         }
-      })
+      }
+      handleSource(cartTotal ? JSON.stringify(source) : source)
       onCancel()
-      setLoadingGooglePayment(false)
     }
+    setPlaceByMethodPay(false)
   };
 
   const pay = async () => {
+    setMethodPaySupported({
+      ...methodPaySupported,
+      loading: true
+    })
     if (!isApplePaySupported) {
       setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      setMethodPaySupported({
+        enabled: false,
+        loading: false
+      })
+      setPlaceByMethodPay(false)
       return
     }
 
     const { error, paymentMethod } = await presentApplePay({
-      cartItems: cart?.products?.map((product: any) => ({ label: product?.name, amount: product?.price?.toString?.() })),
+      cartItems: [{
+        label: t('CART', 'Cart'),
+        amount: cartTotal?.toString?.() ?? cart?.balance?.toString() ?? cart?.total?.toString?.(),
+        paymentType: 'Immediate'
+      }],
       country: 'US',
       currency: configs?.stripe_currency?.value ?? 'USD',
-      shippingMethods: [
-        {
-          amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
-          identifier: 'standard',
-          label: 'Courier',
-          detail: 'Delivery',
-          type: 'final',
-        },
-      ],
-
-      requiredShippingAddressFields: ['emailAddress', 'phoneNumber'],
-      requiredBillingContactFields: ['phoneNumber', 'name'],
     });
     if (error) {
       setErrors(error.code + ' - ' + error.message);
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
     } else if (paymentMethod) {
-      handleSource({
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      const source = {
         ...paymentMethod?.Card,
         id: paymentMethod.id,
         type: paymentMethod.type,
@@ -124,50 +179,29 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           brand: paymentMethod.Card.brand,
           last4: paymentMethod.Card.last4
         }
-      })
+      }
+      handleSource(cartTotal ? JSON.stringify(source) : source)
     }
+    setPlaceByMethodPay(false)
   }
 
+  useEffect(() => {
+    if (isApplePaySupported && applePay.includes(paymethod)) {
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
+      setErrors('')
+    }
+  }, [isApplePaySupported, paymethod])
+
+  useEffect(() => {
+    if (placeByMethodPay) {
+      applePay.includes(paymethod) ? pay() : createPaymentMethod()
+    }
+  }, [placeByMethodPay])
+
   return (
-    <>
-      {paymethod === 'google_pay' ? (
-        <View>
-          <OButton
-            textStyle={{
-              color: '#fff'
-            }}
-            imgRightSrc={null}
-            onClick={createPaymentMethod}
-            isDisabled={loading || !initialized}
-            text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
-            isLoading={loading || !initialized}
-            style={{ marginTop: 20 }}
-          />
-        </View>
-      ) : (
-        <View>
-          {isApplePaySupported ? (
-            <>
-              <OText>{t('APPLE_PAY_PAYMENT', 'Apple pay payment')}</OText>
-              <ApplePayButton
-                onPress={pay}
-                type="plain"
-                buttonStyle="black"
-                borderRadius={4}
-                style={{
-                  width: '100%',
-                  height: 50,
-                }}
-              />
-            </>
-          ) : (
-            <OText>{t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported')}</OText>
-          )}
-        </View>
-      )}
-      <Spinner
-        visible={loadingGooglePayment}
-      />
-    </>
+    <></>
   )
 }

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/OToast.tsx

@@ -1,17 +1,18 @@
 import * as React from "react";
-import { Animated, StyleSheet, Text, View, Platform } from "react-native";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ToastType, useToast, useLanguage } from "ordering-components/native";
 import { useTheme } from 'styled-components/native';
 import { getTraduction } from '../../utils'
 
 const fadeDuration = 300;
-const topPosition = Platform.OS === 'ios' ? 40 : 20
 
 export const Toast = (props: any) => {
   const [toastConfig, { hideToast }] = useToast();
   const [, t] = useLanguage()
   const opacity = React.useRef(new Animated.Value(0)).current;
   const theme = useTheme();
+  const { top: topPosition } = useSafeAreaInsets();
 
   const fadeIn = React.useCallback(() => {
     Animated.timing(opacity, {

package/src/types/index.tsx

@@ -490,4 +490,9 @@ export interface StripeMethodFormParams {
   setErrors: (error: string) => void;
   paymethod: string;
   devMode?: boolean;
+  setMethodPaySupported?: any
+  placeByMethodPay?: any
+  methodPaySupported?: any,
+  setPlaceByMethodPay?: any,
+  cartTotal?: number
 }