ordering-ui-react-native 0.16.3 → 0.16.4-release

package/themes/business/src/components/DriverMap/index.tsx

@@ -13,6 +13,7 @@ import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
 import { showLocation } from 'react-native-map-link';
+import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
@@ -56,6 +57,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     content: Array<string>;
     key?: string | null;
   }>({ open: false, content: [], key: null });
+  const distanceUnit = configState?.configs?.distance_unit?.value
 
   const {
     hasLocation,
@@ -327,6 +329,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       justifyContent: 'center',
       paddingVertical: 10,
       paddingHorizontal: 80,
+      position: 'absolute'
     },
     showButton: {
       alignSelf: 'center',
@@ -474,9 +477,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 src={theme.images.general.arrow_distance}
                 style={styles.arrowDistance}
               />
-              <OText size={12} numberOfLines={3}>{`${(
-                distancesFromTwoPlacesKm * 3280.84
-              ).toFixed(0)} ${t('FT', 'Ft')}`}</OText>
+              <OText size={12} numberOfLines={3}>
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`} 
+              </OText>
+
             </View>
             <View style={{ width: '75%', paddingRight: 20 }}>
               <OText
@@ -484,20 +488,19 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 size={13}
                 numberOfLines={2}
                 adjustsFontSizeToFit>
-                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
-                  } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
+                {`${travelTime.toFixed(2)} - ${isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')}`}
               </OText>
             </View>
           </View>
         </View>
-        <View style={styles.buttonContainer}>
+        <View style={{
+          ...styles.buttonContainer,
+          bottom: showAcceptOrReject ? 80 : 0
+        }}>
           <OButton
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
-            style={{
-              ...styles.showButton,
-              bottom: showAcceptOrReject ? 80 : 0
-            }}
+            style={styles.showButton}
             onClick={() => showLocation({
               latitude: destination.latitude,
               longitude: destination.longitude,

package/themes/business/src/components/DriverSchedule/index.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import { RefreshControl, ScrollView, View } from 'react-native'
+import { OText } from '../shared'
+import { useLanguage, useSession } from 'ordering-components/native'
+import { DayContainer } from './styles'
+import { useTheme } from 'styled-components/native'
+export const DriverSchedule = (props: any) => {
+    const { schedule } = props
+    const [, t] = useLanguage()
+    const theme = useTheme()
+    const [, { refreshUserInfo }] = useSession()
+    const [refreshing] = useState(false);
+
+    const daysOfWeek = [
+        t('SUNDAY_ABBREVIATION', 'Sun'),
+        t('MONDAY_ABBREVIATION', 'Mon'),
+        t('TUESDAY_ABBREVIATION', 'Tues'),
+        t('WEDNESDAY_ABBREVIATION', 'Wed'),
+        t('THURSDAY_ABBREVIATION', 'Thur'),
+        t('FRIDAY_ABBREVIATION', 'Fri'),
+        t('SATURDAY_ABBREVIATION', 'Sat')
+    ]
+
+    const scheduleFormatted = ({ hour, minute }: any) => {
+        const checkTime = (val: number) => val < 10 ? `0${val}` : val
+        return `${checkTime(hour)}:${checkTime(minute)}`
+    }
+
+    return (
+        <ScrollView
+            refreshControl={<RefreshControl
+                refreshing={refreshing}
+                onRefresh={() => refreshUserInfo()}
+            />}
+        >
+            <OText size={24} style={{ paddingLeft: 30 }}>
+                {t('SCHEDULE', 'Schedule')}
+            </OText>
+            <View style={{ padding: 30 }}>
+                {schedule.map((item: any, i: number) => (
+                    <DayContainer key={daysOfWeek[i]}>
+                        <OText style={{ width: '20%' }} size={22} weight={700}>{daysOfWeek[i]}</OText>
+                        <View style={{ width: '80%', alignItems: 'center' }}>
+                            <>
+                                {item?.enabled ? (
+                                    <View>
+                                        {item?.lapses.map((lapse: any, i: number) => (
+                                            <View key={`${daysOfWeek[i]}_${i}`} style={{ marginTop: 3, marginBottom: 20, flexDirection: 'row', justifyContent: 'space-between' }}>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.open)}
+                                                </OText>
+                                                <OText size={18} style={{ width: 15 }}>
+                                                    -
+                                                </OText>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.close)}
+                                                </OText>
+                                            </View>
+                                        ))}
+                                    </View>
+                                ) : (
+                                    <OText size={18} style={{ marginTop: 3, marginBottom: 10 }} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
+                                )}
+                            </>
+                        </View>
+                    </DayContainer>
+                ))}
+            </View>
+        </ScrollView>
+    )
+}

package/themes/business/src/components/DriverSchedule/styles.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components/native";
+
+export const DayContainer = styled.View`
+    flex-direction: row;
+    width: 100%;
+`

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

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
@@ -52,8 +53,8 @@ const LoginFormUI = (props: LoginParams) => {
     allowedLevels,
     useRootPoint,
     notificationState,
-		handleReCaptcha,
-		enableReCaptcha
+    handleReCaptcha,
+    enableReCaptcha
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -67,7 +68,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
-  const [projectName, setProjectName] = useState({name: '', isFocued: false});
+  const [projectName, setProjectName] = useState({ name: '', isFocued: false });
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -92,36 +93,50 @@ const LoginFormUI = (props: LoginParams) => {
   const [formValues, setFormValues] = useState(null);
 
   const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
-	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
   const recaptchaRef = useRef<any>({});
 
   const handleOpenRecaptcha = () => {
-		setRecaptchaVerified(false)
-	  	if (!recaptchaConfig?.siteKey) {
-			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			return
-		}
-		if (!recaptchaConfig?.baseUrl) {
-			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			return
-		}
-		recaptchaRef.current.open()
-  	}
-
-	const onRecaptchaVerify = (token: any) => {
-		setRecaptchaVerified(true)
-		handleReCaptcha(token)
-	}
-
-	useEffect(() => {
-		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			setRecaptchaConfig({
-				siteKey: configs?.security_recaptcha_site_key?.value || null,
-				baseUrl: configs?.security_recaptcha_base_url?.value || null
-			})
-		}
-	}, [configs, enableReCaptcha])
+    setRecaptchaVerified(false)
+    if (!recaptchaConfig?.siteKey) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+      return
+    }
+    if (!recaptchaConfig?.baseUrl) {
+      showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+      return
+    }
+    recaptchaRef.current.open()
+  }
+
+  const onRecaptchaVerify = (token: any) => {
+    setRecaptchaVerified(true)
+    handleReCaptcha({ code: token, version: recaptchaConfig?.version })
+  }
+
+  useEffect(() => {
+    if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+      if (configs?.security_recaptcha_type?.value === 'v3' &&
+        configs?.security_recaptcha_score_v3?.value > 0 &&
+        configs?.security_recaptcha_site_key_v3?.value
+      ) {
+        setRecaptchaConfig({
+          version: 'v3',
+          siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        return
+      }
+      if (configs?.security_recaptcha_site_key?.value) {
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+      }
+    }
+  }, [configs, enableReCaptcha])
 
   useEffect(() => {
     const projectInputInterval = setInterval(() => {
@@ -164,6 +179,7 @@ const LoginFormUI = (props: LoginParams) => {
         'An error occurred while trying to pay by PayPal',
       ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY:
         'Error adding product, very far for delivery',
+      ERROR_AUTH_DRIVER_LOGIN_VALIDATION: 'Error auth driver login validation'
     };
 
     return keyList[key] ? t(key, keyList[key]) : t(key);
@@ -245,6 +261,17 @@ const LoginFormUI = (props: LoginParams) => {
 
   useEffect(() => {
     if (!formState?.loading && formState?.result?.error) {
+      if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+        setRecaptchaVerified(false)
+        setSubmitted(false)
+        setRecaptchaConfig({
+          version: 'v2',
+          siteKey: configs?.security_recaptcha_site_key?.value || null,
+          baseUrl: configs?.security_recaptcha_base_url?.value || null
+        })
+        showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+        return
+      }
       formState?.result?.result &&
         showToast(
           ToastType.Error,
@@ -252,17 +279,17 @@ const LoginFormUI = (props: LoginParams) => {
             ? getTraduction(formState.result?.result)
             : loginTab === 'email' &&
               typeof formState.result?.result !== 'string'
-            ? getTraduction(formState.result?.result[0])
-            : loginTab === 'cellphone' &&
-              typeof formState.result?.result === 'string'
-            ? getTraduction(formState.result?.result).replace(
-                t('USER', 'user').toLowerCase(),
-                t('PHONE_NUMER', 'Phone number'),
-              )
-            : getTraduction(formState.result?.result[0]).replace(
-                t('USER', 'user').toLowerCase(),
-                t('PHONE_NUMER', 'Phone number'),
-              ),
+              ? getTraduction(formState.result?.result[0])
+              : loginTab === 'cellphone' &&
+                typeof formState.result?.result === 'string'
+                ? getTraduction(formState.result?.result).replace(
+                  t('USER', 'user').toLowerCase(),
+                  t('PHONE_NUMER', 'Phone number'),
+                )
+                : getTraduction(formState.result?.result[0]).replace(
+                  t('USER', 'user').toLowerCase(),
+                  t('PHONE_NUMER', 'Phone number'),
+                ),
         );
       setSubmitted(false)
     }
@@ -516,7 +543,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName({name: e?.target?.value, isFocued: true})
+                    setProjectName({ name: e?.target?.value, isFocued: true })
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -545,7 +572,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.logos.emailInputIcon}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName({...projectName, isFocued: false})
+                    setProjectName({ ...projectName, isFocued: false })
                     handleChangeInputEmail(e, onChange);
                   }}
                   selectionColor={theme.colors.primary}
@@ -650,40 +677,50 @@ const LoginFormUI = (props: LoginParams) => {
               </OText>
             </Pressable>
           )}
-
-          {enableReCaptcha && (
+          {(enableReCaptcha && recaptchaConfig?.version) && (
             <>
-              <TouchableOpacity
-                style={{ marginBottom: 15 }}
-                onPress={handleOpenRecaptcha}
-              >
-                <RecaptchaButton>
-                  {recaptchaVerified ? (
-                    <MaterialCommunityIcons
-                      name="checkbox-marked"
-                      size={26}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="checkbox-blank-outline"
-                      size={26}
-                      color={theme.colors.mediumGray}
-                    />
-                  )}
-                  <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-                </RecaptchaButton>
-              </TouchableOpacity>
-              <Recaptcha
-                ref={recaptchaRef}
-                siteKey={recaptchaConfig?.siteKey}
-                baseUrl={recaptchaConfig?.baseUrl}
-                onVerify={onRecaptchaVerify}
-                onExpire={() => setRecaptchaVerified(false)}
-              />
+              {recaptchaConfig?.version === 'v3' ? (
+                <ReCaptcha
+                  url={recaptchaConfig?.baseUrl}
+                  siteKey={recaptchaConfig?.siteKey}
+                  containerStyle={{ height: 40 }}
+                  onExecute={onRecaptchaVerify}
+                  reCaptchaType={1}
+                />
+              ) : (
+                <>
+                  <TouchableOpacity
+                    style={{ marginBottom: 15 }}
+                    onPress={handleOpenRecaptcha}
+                  >
+                    <RecaptchaButton>
+                      {recaptchaVerified ? (
+                        <MaterialCommunityIcons
+                          name="checkbox-marked"
+                          size={26}
+                          color={theme.colors.primary}
+                        />
+                      ) : (
+                        <MaterialCommunityIcons
+                          name="checkbox-blank-outline"
+                          size={26}
+                          color={theme.colors.mediumGray}
+                        />
+                      )}
+                      <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                    </RecaptchaButton>
+                  </TouchableOpacity>
+                  <Recaptcha
+                    ref={recaptchaRef}
+                    siteKey={recaptchaConfig?.siteKey}
+                    baseUrl={recaptchaConfig?.baseUrl}
+                    onVerify={onRecaptchaVerify}
+                    onExpire={() => setRecaptchaVerified(false)}
+                  />
+                </>)
+              }
             </>
-					)}
-
+          )}
           <OButton
             onClick={handleLogin}
             text={t('LOGIN', 'Login')}

package/themes/business/src/components/MapView/index.tsx

@@ -191,7 +191,7 @@ const MapViewComponent = (props: MapViewParams) => {
             {((customer && marker?.business?.zipcode) || (!customer && marker?.business?.zipcode)) && (
               <OText>{customer ? marker?.customer?.zipcode : marker?.business?.zipcode}</OText>
             )}
-            {customer && marker?.customer?.internal_number && (
+            {customer && !!marker?.customer?.internal_number && (
               <OText>{marker?.customer?.internal_number}</OText>
             )}
             <OText textDecorationLine='underline' color={theme.colors.primary}>

package/themes/business/src/components/MessagesOption/index.tsx

@@ -5,6 +5,7 @@ import {
   StyleSheet,
   Dimensions,
   ScrollView,
+  RefreshControl,
 } from 'react-native';
 import { Contacts, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -24,6 +25,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     messages,
     onNavigationRedirect,
     setSortBy,
+    getOrders
   } = props;
 
   const theme = useTheme();
@@ -55,6 +57,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
   const [tabsFilter, setTabsFilter] = useState(tabs[0].tags);
   const [activeTag, setActiveTag] = useState(tags[0].key);
   const [reload, setReload] = useState(false);
+  const [refreshing] = useState(false);
   const [unreadMessages, setUnreadMessages] = useState(
     values?.reduce(
       (total: number, order: any) => total + order.unread_count,
@@ -247,7 +250,14 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
         />
       )}
 
-      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+      <ScrollView 
+        showsVerticalScrollIndicator={false}
+        style={{ flex: 1 }}
+        refreshControl={<RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => getOrders?.()}
+      />}
+      >
         {!reload &&
           !error &&
           values.length > 0 &&

package/themes/business/src/components/OrderDetails/Business.tsx

@@ -439,7 +439,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
             <>
               <OrderContentComponent order={order} />
               {(order?.status === 7 || order?.status === 4) &&
-                order?.delivery_type === 1 && (
+                order?.delivery_type === 1 && configs?.assign_driver_enabled?.value === '1' && (
                   <AssignDriver>
                     <OText style={{ marginBottom: 5 }} size={16} weight="600">
                       {t('ASSIGN_DRIVER', 'Assign driver')}

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -247,17 +247,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   let isToFollow = false;
   let isBusinessMarker = false;
 
-  if (order?.status === 7 || order?.status === 8) {
+  if (order?.status === 7 || order?.status === 8 || order?.status === 18) {
     const markerBusiness = 'Business';
     isBusinessMarker = true;
     locationMarker = locations.find(
       (location: any) => location.type === markerBusiness,
     );
 
-    if (order?.status === 8) {
+    if (order?.status === 8 || order?.status === 18) {
       isToFollow = true;
     }
-  } else if (order?.status === 3 || order?.status === 9) {
+  } else if (order?.status === 3 || order?.status === 9 || order?.status === 19 || order?.status === 23) {
     const markerCustomer = 'Customer';
     isToFollow = true;
     isBusinessMarker = false;

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -274,8 +274,8 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${order?.customer?.cellphone}`}
-              shorcut={order?.customer?.cellphone}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -323,6 +323,12 @@ export const OrderContentComponent = (props: OrderContent) => {
             {order?.customer?.zipcode}
           </OText>
         )}
+
+        {!!order?.on_behalf_of && (
+          <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+            {t('ON_BEHALF_OF', 'On behalf of')}{': '} {order?.on_behalf_of}
+          </OText>
+        )}
         {((order?.delivery_option !== undefined && order?.delivery_type === 1) || !!order?.comment) && (
           <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
@@ -358,6 +364,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <ProductItemAccordion
               key={product?.id || i}
               product={product}
+              currency={order?.currency}
             />
           ))}
       </OrderProducts>
@@ -366,7 +373,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency})}
           </OText>
         </Table>
         {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -379,7 +386,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             ) : (
               <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount)}</OText>
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency})}</OText>
           </Table>
         )}
         {
@@ -393,7 +400,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -401,9 +408,9 @@ export const OrderContentComponent = (props: OrderContent) => {
           <Table>
             <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
             {order?.tax_type === 1 ? (
-              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency})}</OText>
             ) : (
-              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency})}</OText>
             )}
           </Table>
         )}
@@ -413,7 +420,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
             <OText mBottom={4}>
-              {parsePrice(order?.summary?.tax ?? 0)}
+              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency})}
             </OText>
           </Table>
         )}
@@ -424,7 +431,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 {t('SERVICE_FEE', 'Service fee')}
                 {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
-              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency})}</OText>
             </Table>
           )
         }
@@ -437,7 +444,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -447,10 +454,10 @@ export const OrderContentComponent = (props: OrderContent) => {
               <OSRow>
                 <OText mBottom={4}>
                   {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency})} + `}{fee.percentage}%){' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -465,7 +472,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -477,7 +484,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               </OText>
 
               <OText mBottom={4}>
-                {parsePrice(order?.summary?.delivery_price)}
+                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency})}
               </OText>
             </Table>
           )
@@ -493,7 +500,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -508,7 +515,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency})}</OText>
           </Table>
         )}
 
@@ -522,7 +529,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? order?.total)}
+              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency})}
             </OText>
           </Table>
         </Total>
@@ -565,7 +572,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount)}
+                    -{parsePrice(event.amount, { currency: order?.currency})}
                   </OText>
                 </View>
               ))}