ordering-ui-react-native 0.15.80 → 0.15.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.80",
+  "version": "0.15.83",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -51,7 +51,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     orderTitle,
     appTitle,
     handleClickLogisticOrder,
-    forceUpdate
+    forceUpdate,
+    getPermissions
   } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
@@ -101,9 +102,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleOpenMapView = async () => {
-    if (permissions?.locationStatus === 'granted') {
+    const _permissions = await getPermissions()
+
+    const isBlocked = _permissions.some((_permission: string) => permissions?.locationStatus?.[_permission] === 'blocked')
+    const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && permissions?.locationStatus?.[_permission] === 'granted', true)
+
+    if (isGranted) {
       setOpenModalForMapView(!openModalForMapView);
-    } else if (permissions?.locationStatus === 'blocked') {
+    } else if (isBlocked) {
       // redirectToSettings();
       showToast(
         ToastType.Error,
@@ -114,8 +120,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       );
     } else {
       const response = await askLocationPermission();
-      if (response === 'granted') {
-        setOpenModalForMapView(!openModalForMapView);
+      const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && response?.locationStatus?.[_permission] === 'granted', true)
+      if (isGranted) {
+        setOpenModalForMapView(true)
       }
     }
   };

package/themes/business/src/types/index.tsx

@@ -373,6 +373,7 @@ export interface OrderDetailsParams {
   handleClickLogisticOrder?: (status: number, orderId: number) => void;
   orderTitle?: any;
   forceUpdate?: number;
+  getPermissions?: any
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -578,4 +579,4 @@ export interface ReviewCustomerParams {
 
 export interface NoNetworkParams {
   image?: any;
-}
+}

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

@@ -162,7 +162,7 @@ const CartUI = (props: any) => {
         handleClearProducts={handleClearProducts}
         handleCartOpen={handleCartOpen}
         onNavigationRedirect={props.onNavigationRedirect}
-        handleChangeStore={props.isFranchiseApp ? () => setOpenChangeStore(true) : null}
+        handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
       >

package/themes/original/src/components/Checkout/index.tsx

@@ -597,21 +597,19 @@ const CheckoutUI = (props: any) => {
 												</OText>
 											</TouchableOpacity>
 										</CartHeader>
-										{props.isFranchiseApp && (
-											<TouchableOpacity
-												onPress={() => setOpenChangeStore(true)}
-												style={{ alignSelf: 'flex-start' }}
+										<TouchableOpacity
+											onPress={() => setOpenChangeStore(true)}
+											style={{ alignSelf: 'flex-start' }}
+										>
+											<OText
+												size={12}
+												lineHeight={18}
+												color={theme.colors.textSecondary}
+												style={{ textDecorationLine: 'underline' }}
 											>
-												<OText
-													size={12}
-													lineHeight={18}
-													color={theme.colors.textSecondary}
-													style={{ textDecorationLine: 'underline' }}
-												>
-													{t('CHANGE_STORE', 'Change store')}
-												</OText>
-											</TouchableOpacity>
-										)}
+												{t('CHANGE_STORE', 'Change store')}
+											</OText>
+										</TouchableOpacity>
 										<OrderSummary
 											cart={cart}
 											isCartPending={cart?.status === 2}
@@ -664,7 +662,7 @@ const CheckoutUI = (props: any) => {
 						</View>
 					)}
 					<OModal
-						open={openChangeStore && props.isFranchiseApp}
+						open={openChangeStore}
 						entireModal
 						customClose
 						onClose={() => setOpenChangeStore(false)}
@@ -873,7 +871,7 @@ export const Checkout = (props: any) => {
 		...props,
 		UIComponent: CheckoutUI,
 		cartState,
-		[props.isFranchiseApp ? 'uuid' : 'businessId']: props.isFranchiseApp ? cartUuid : cartState.cart?.business_id
+		uuid: cartUuid
 	}
 
 	return (

package/themes/original/src/components/ForgotPasswordForm/index.tsx

@@ -1,16 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { StyleSheet } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import {
 	ForgotPasswordForm as ForgotPasswordController,
 	useLanguage,
 	useToast,
 	ToastType,
+	useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import NavBar from '../NavBar';
-import { FormInput, FormSide } from '../LoginForm/styles'
+import { FormInput, FormSide, RecaptchaButton } from '../LoginForm/styles'
 import { Container } from './styles'
 
 import { OButton, OInput, OText } from '../shared';
@@ -20,10 +24,15 @@ const ForgotPasswordUI = (props: any) => {
 		navigation,
 		formState,
 		handleButtonForgotPasswordClick,
+		handleReCaptcha,
+		enableReCaptcha
 	} = props;
 	const [, t] = useLanguage();
 	const [, { showToast }] = useToast();
+	const [{ configs }] = useConfig();
 	const { control, handleSubmit, errors } = useForm();
+	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 
 	const theme = useTheme();
 
@@ -38,6 +47,7 @@ const ForgotPasswordUI = (props: any) => {
 	});
 
 	const [emailSent, setEmailSent] = useState(null);
+	const recaptchaRef = useRef<any>({});
 
 	const onSubmit = (values: any) => {
 		setEmailSent(values.email)
@@ -48,23 +58,52 @@ const ForgotPasswordUI = (props: any) => {
 		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
 	}
 
+	  	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 (!formState.loading && emailSent) {
 			if (formState.result?.error) {
 				setEmailSent(null)
 				formState.result?.result && showToast(
 					ToastType.Error,
-					formState.result?.result[0]
+					typeof formState.result?.result === 'string'
+          ? formState.result?.result
+          : formState.result?.result[0]
 				)
 				return
 			}
 			showToast(
 				ToastType.Success,
-				`${t('SUCCESS_SEND_FORGOT_PASSWORD', 'Your link has been sent to the email')}: ${emailSent}`
+				t('IF_ACCOUNT_EXIST_EMAIL_SEND_PASSWORD', 'If an account exists with this email a password will be sent')
 			)
 		}
 	}, [formState])
 
+	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])
+
 	return (
 		<Container>
 			<NavBar
@@ -126,6 +165,37 @@ const ForgotPasswordUI = (props: any) => {
 						}}
 						defaultValue=""
 					/>
+					{enableReCaptcha && (
+						<>
+							<TouchableOpacity
+								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
 						text={emailSent && !formState.result?.error ? t('LINK_SEND_FORGOT_PASSWORD', 'Link Sent') : t('FRONT_RECOVER_PASSWORD', 'Recover Password')}
@@ -146,6 +216,7 @@ const ForgotPasswordUI = (props: any) => {
 export const ForgotPasswordForm = (props: any) => {
 	const ForgotPasswordProps = {
 		...props,
+		isRecaptchaEnable: true,
 		UIComponent: ForgotPasswordUI
 	}
 	return <ForgotPasswordController {...ForgotPasswordProps} />

package/themes/original/src/components/Messages/index.tsx

@@ -39,7 +39,7 @@ const ORDER_STATUS: any = {
   	23: 'ORDER_DRIVER_ON_WAY'
 }
 
-const filterSpecialStatus = ['prepared_in', 'delivered_in']
+const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
 
 
 const MessagesUI = (props: MessagesParams) => {

package/themes/original/src/components/OrderDetails/index.tsx

@@ -363,6 +363,27 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     )
   }
 
+  const RenderGoogleMap = () => {
+    const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l : string) => l.replace(/[^-.0-9]/g, ''))
+    const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
+      ...location,
+      lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+      lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+    } : location)
+
+    return (
+      <GoogleMap
+        location={typeof order?.driver?.location?.location === 'string'
+          ? {
+            lat: parseFloat(driverLocationString[0]),
+            lng: parseFloat(driverLocationString[1]),
+          } : order?.driver?.location
+        }
+        locations={parsedLocations}
+        readOnly
+      />
+    )
+  }
 
   useEffect(() => {
     if (reorderState?.error) {
@@ -683,11 +704,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                 <>
                   {order?.driver?.location && mapValidStatuses.includes(parseInt(order?.status)) && (
                     <Map>
-                      <GoogleMap
-                        location={order?.driver?.location}
-                        locations={locations}
-                        readOnly
-                      />
+                      <RenderGoogleMap />
                     </Map>
                   )}
                 </>

package/themes/original/src/components/Promotions/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { PromotionsController, useLanguage, useUtils, useEvent } from 'ordering-components/native'
+import { PromotionsController, useLanguage, useUtils } from 'ordering-components/native'
 import {
     PromotionsContainer,
     SingleOfferContainer,
@@ -17,9 +17,11 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView } from 'react-native'
+import { View, StyleSheet, ScrollView, Platform } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { PromotionParams } from '../../types'
+import { Container } from '../../layouts/Container'
+
 const PromotionsUI = (props: PromotionParams) => {
     const {
         navigation,
@@ -85,139 +87,138 @@ const PromotionsUI = (props: PromotionParams) => {
             : t('SERVICE_FEE', 'Service fee')
 
     return (
-        <PromotionsContainer>
+        <Container noPadding>
             <NavBar
-                onActionLeft={() => navigation.goBack()}
-                btnStyle={{ paddingLeft: 0 }}
-                paddingTop={20}
-                style={{ paddingBottom: 0, flexDirection: 'column', alignItems: 'flex-start' }}
                 title={t('PROMOTIONS', 'Promotions')}
                 titleAlign={'center'}
-                titleStyle={{ fontSize: 16, marginRight: 0, marginLeft: 0, marginBottom: 10 }}
-                titleWrapStyle={{ paddingHorizontal: 0 }}
+                onActionLeft={() => navigation.goBack()}
+                showCall={false}
+                style={{ paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginLeft: 20 }}
             />
-            <SearchBarContainer>
-                <SearchBar
-                    placeholder={t('SEARCH_OFFERS', 'Search offers')}
-                    onSearch={handleSearchValue}
-                />
-            </SearchBarContainer>
+            <PromotionsContainer>
+                <SearchBarContainer>
+                    <SearchBar
+                        placeholder={t('SEARCH_OFFERS', 'Search offers')}
+                        onSearch={handleSearchValue}
+                    />
+                </SearchBarContainer>
 
-            {offersState?.loading && (
-                <>
-                    {[...Array(5).keys()].map((key, i) => (
-                        <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
-                            <PlaceholderLine height={10} width={45} />
-                            <PlaceholderLine height={10} width={60} />
-                            <PlaceholderLine height={10} width={75} />
-                        </Placeholder>
-                    ))}
-                </>
-            )}
-            {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
-                <NotFoundSource
-                    content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
-                />
-            )}
-            <ScrollView>
-                {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
-                    <SingleOfferContainer key={offer.id}>
-                        <OfferInformation>
-                            <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
-                            {offer?.description && (
-                                <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
-                            )}
-                            <OText style={styles.offerExtraInfo}>
-                                {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
-                            </OText>
-                            <AvailableBusinesses>
-                                <OText style={styles.offerExtraInfo} numberOfLines={1}>
-                                    {t('APPLY_FOR', 'Apply for')}:
-                                    {offer.businesses.map((business: any, i: number) => (
-                                        <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
-                                    ))}
+                {offersState?.loading && (
+                    <>
+                        {[...Array(5).keys()].map((key, i) => (
+                            <Placeholder key={i} style={{ flexDirection: 'row', marginBottom: 20 }}>
+                                <PlaceholderLine height={10} width={45} />
+                                <PlaceholderLine height={10} width={60} />
+                                <PlaceholderLine height={10} width={75} />
+                            </Placeholder>
+                        ))}
+                    </>
+                )}
+                {((!offersState?.loading && filteredOffers?.length === 0) || offersState?.error) && (
+                    <NotFoundSource
+                        content={offersState?.error || t('NOT_FOUND_OFFERS', 'Not found offers')}
+                    />
+                )}
+                <ScrollView>
+                    {!offersState?.loading && offersState.offers?.length > 0 && filteredOffers?.map((offer: any) => (
+                        <SingleOfferContainer key={offer.id}>
+                            <OfferInformation>
+                                <OText style={styles.offerTitle} numberOfLines={2}>{offer?.name}</OText>
+                                {offer?.description && (
+                                    <OText style={styles.offerDescription} numberOfLines={2}>{offer?.description}</OText>
+                                )}
+                                <OText style={styles.offerExtraInfo}>
+                                    {t('EXPIRES', 'Expires')} {parseDate(offer?.end, { outputFormat: 'MMM DD, YYYY' })}
                                 </OText>
-                            </AvailableBusinesses>
-                        </OfferInformation>
-                        <OButton
-                            onClick={() => handleClickOffer(offer)}
-                            text={t('VIEW', 'View')}
-                            style={styles.buttonStyle}
-                            textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
-                        />
-                    </SingleOfferContainer>
-                ))}
-            </ScrollView>
-            <OModal
-                open={openModal}
-                onClose={() => setOpenModal(false)}
-                entireModal
+                                <AvailableBusinesses>
+                                    <OText style={styles.offerExtraInfo} numberOfLines={1}>
+                                        {t('APPLY_FOR', 'Apply for')}:
+                                        {offer.businesses.map((business: any, i: number) => (
+                                            <React.Fragment key={i}>{' '}{business?.name}{i + 1 < offer.businesses?.length ? ',' : ''}</React.Fragment>
+                                        ))}
+                                    </OText>
+                                </AvailableBusinesses>
+                            </OfferInformation>
+                            <OButton
+                                onClick={() => handleClickOffer(offer)}
+                                text={t('VIEW', 'View')}
+                                style={styles.buttonStyle}
+                                textStyle={{ fontSize: 10, color: '#fff', flexWrap: 'nowrap' }}
+                            />
+                        </SingleOfferContainer>
+                    ))}
+                </ScrollView>
+                <OModal
+                    open={openModal}
+                    onClose={() => setOpenModal(false)}
+                    entireModal
 
-                title={``}
-            >
-                <View style={{ padding: 20 }}>
-                    <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
-                        {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
-                    </OText>
-                    <OfferData>
-                        {offerSelected?.type === 2 && (
-                            <Code>
-                                <OText>{t('YOUR_CODE', 'Your code')}</OText>
-                                <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
-                            </Code>
-                        )}
-                        <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
-                        {offerSelected?.auto && (
-                            <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
-                        )}
-                        {offerSelected?.minimum && (
-                            <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
-                        )}
-                        {offerSelected?.max_discount && (
-                            <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
-                        )}
-                        {offerSelected?.description && (
-                            <OText>{offerSelected?.description}</OText>
-                        )}
-                    </OfferData>
-                    <OText style={{ marginTop: 10, marginBottom: 10 }}>
-                        {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
-                    </OText>
-                    <ScrollView style={{ height: '75%' }}>
-                        {offerSelected?.businesses?.map((business: any) => {
-                            return (
-                                <SingleBusinessOffer key={business.id}>
-                                    {business?.logo ? (
-                                        <FastImage
-                                            style={styles.productStyle}
-                                            source={{
-                                                uri: optimizeImage(business?.logo, 'h_250,c_limit'),
-                                                priority: FastImage.priority.normal,
-                                            }}
-                                            resizeMode={FastImage.resizeMode.cover}
-                                        />
-                                    ) : (
-                                        <OIcon
-                                            src={theme?.images?.dummies?.product}
-                                            style={styles.productStyle}
-                                        />
-                                    )}
-                                    <BusinessInfo>
-                                        <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
-                                        <OButton
-                                            onClick={() => handleBusinessClick(business)}
-                                            text={t('GO_TO_BUSINESSS', 'Go to business')}
-                                            style={styles.modalButtonStyle}
-                                            textStyle={{ fontSize: 10, color: '#fff' }}
-                                        />
-                                    </BusinessInfo>
-                                </SingleBusinessOffer>
-                            )
-                        })}
-                    </ScrollView>
-                </View>
-            </OModal>
-        </PromotionsContainer>
+                    title={``}
+                >
+                    <View style={{ padding: 20 }}>
+                        <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
+                            {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
+                        </OText>
+                        <OfferData>
+                            {offerSelected?.type === 2 && (
+                                <Code>
+                                    <OText>{t('YOUR_CODE', 'Your code')}</OText>
+                                    <OText color={theme.colors.primary}>{offerSelected.coupon}</OText>
+                                </Code>
+                            )}
+                            <OText>{t('APPLIES_TO', 'Applies to')}: {targetString}</OText>
+                            {offerSelected?.auto && (
+                                <OText>{t('OFFER_AUTOMATIC', 'This offer applies automatic')}</OText>
+                            )}
+                            {offerSelected?.minimum && (
+                                <OText>{t('MINIMUM_PURCHASE_FOR_OFFER', 'Minimum purchase for use this offer')}: {parsePrice(offerSelected?.minimum)}</OText>
+                            )}
+                            {offerSelected?.max_discount && (
+                                <OText>{t('MAX_DISCOUNT_ALLOWED', 'Max discount allowed')}: {parsePrice(offerSelected?.max_discount)}</OText>
+                            )}
+                            {offerSelected?.description && (
+                                <OText>{offerSelected?.description}</OText>
+                            )}
+                        </OfferData>
+                        <OText style={{ marginTop: 10, marginBottom: 10 }}>
+                            {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
+                        </OText>
+                        <ScrollView style={{ height: '75%' }}>
+                            {offerSelected?.businesses?.map((business: any) => {
+                                return (
+                                    <SingleBusinessOffer key={business.id}>
+                                        {business?.logo ? (
+                                            <FastImage
+                                                style={styles.productStyle}
+                                                source={{
+                                                    uri: optimizeImage(business?.logo, 'h_250,c_limit'),
+                                                    priority: FastImage.priority.normal,
+                                                }}
+                                                resizeMode={FastImage.resizeMode.cover}
+                                            />
+                                        ) : (
+                                            <OIcon
+                                                src={theme?.images?.dummies?.product}
+                                                style={styles.productStyle}
+                                            />
+                                        )}
+                                        <BusinessInfo>
+                                            <OText style={{ maxWidth: '60%' }}>{business.name}</OText>
+                                            <OButton
+                                                onClick={() => handleBusinessClick(business)}
+                                                text={t('GO_TO_BUSINESSS', 'Go to business')}
+                                                style={styles.modalButtonStyle}
+                                                textStyle={{ fontSize: 10, color: '#fff' }}
+                                            />
+                                        </BusinessInfo>
+                                    </SingleBusinessOffer>
+                                )
+                            })}
+                        </ScrollView>
+                    </View>
+                </OModal>
+            </PromotionsContainer>
+        </Container>
     )
 }
 

package/themes/original/src/components/Promotions/styles.tsx

@@ -2,6 +2,8 @@ import styled, { css } from 'styled-components/native'
 
 export const PromotionsContainer = styled.View`
   width: 100%;
+  padding-left: 40px;
+	padding-right: 40px;
 `
 
 export const SingleOfferContainer = styled.View`