ordering-ui-react-native 0.22.54 → 0.22.55-release

package/themes/kiosk/src/components/PaymentOptions/index.tsx

@@ -24,6 +24,11 @@ import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const PaymentOptionsUI = (props: any) => {
   const {
+    cart,
+    onNavigationRedirect,
+    isDisabled,
+    paymethodData,
+    handlePaymethodDataChange,
     errorCash,
     isLoading,
     paymethodsList,
@@ -43,11 +48,11 @@ const PaymentOptionsUI = (props: any) => {
   const [orientationState] = useDeviceOrientation();
   const [userErrors, setUserErrors] = useState<any>([]);
   const [isOpenModal, setIsOpenModal] = useState(false)
-  const paymethodSelected = paySelected || props.paymethodSelected || isOpenMethod.paymethod;
-  const includePaymethods = ['cash', 'card_delivery'];
+  const paymethodSelected =
+    paySelected || props.paymethodSelected || isOpenMethod.paymethod;
 
   useEffect(() => {
-    if (paymethodsList?.paymethods?.length === 1) {
+    if (paymethodsList.paymethods.length === 1) {
       handlePaymethodClick &&
         handlePaymethodClick(paymethodsList.paymethods[0]);
     }
@@ -80,11 +85,23 @@ const PaymentOptionsUI = (props: any) => {
     }
   }, [isOpenMethod.paymethod, placing, isLoading, paySelected]);
 
-  const supportedMethods = paymethodsList?.paymethods?.filter((p: any) =>
+  // const includePaymethods = ['cash', 'card_delivery', 'stripe'];
+  const includePaymethods = ['cash', 'card_delivery'];
+
+  const supportedMethods = paymethodsList.paymethods.filter((p: any) =>
     includePaymethods.includes(p.gateway),
   );
 
-  const onSelectPaymethod = (paymethod: any) => {
+  const cashIndex: number = supportedMethods?.findIndex(
+    (item: any) => item?.gateway === 'cash',
+  );
+  const cardOnDeliveryIndex = supportedMethods?.findIndex(
+    (item: any) => item?.gateway === 'card_delivery',
+  );
+  const stripeIndex = supportedMethods?.findIndex(
+    (item: any) => item?.gateway === 'stripe',
+  );
+  const onSelectPaymethod = (paymethod: any, isPopupMethod: boolean) => {
     handlePaymethodClick(paymethod);
   };
 
@@ -115,15 +132,57 @@ const PaymentOptionsUI = (props: any) => {
         : orientationState?.dimensions?.height * 0.55,
   };
 
-  const description = {
-    cash: t(
-      'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
-      'Pay with cash in the front counter',
-    ),
-    card_delivery: t(
-      'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
-      'We accept every debit or credit card',
-    ),
+  const propsOfItems = {
+    CASH_ID:
+      cashIndex !== -1
+        ? {
+          style: cardStyle,
+          title: t('CASH', 'Cash'),
+          description: t(
+            'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
+            'Pay with cash in the front counter',
+          ),
+          bgImage: theme.images.general.cash,
+          callToActionText: t('LETS_GO', 'LETS_GO'),
+          VectorIcon: () => <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () =>
+            onSelectPaymethod(supportedMethods[cashIndex], false),
+          ...supportedMethods[cashIndex],
+        }
+        : null,
+
+    CARD_ON_DELIVERY_ID:
+      cardOnDeliveryIndex !== -1
+        ? {
+          style: cardStyle,
+          title: t('CARD', supportedMethods[cardOnDeliveryIndex]?.name),
+          description: t(
+            'WE_ACCEPT_EVERY_DEBIT_OR_CREDIT_CARD',
+            'We accept every debit or credit card',
+          ),
+          bgImage: theme.images.general.carddelivery,
+          callToActionText: t("LETS_GO", "Let's go"),
+          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
+          ...supportedMethods[cardOnDeliveryIndex],
+        }
+        : null,
+    STRIPE:
+      stripeIndex !== -1
+        ? {
+          style: cardStyle,
+          title: t('STRIPE', supportedMethods[stripeIndex]?.name),
+          description: t('STRIPE', 'Stripe'),
+          bgImage: theme.images.general.carddelivery,
+          callToActionText: t('INSERT_INFO', 'Test info'),
+          VectorIcon: () => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
+          onClick: () => {
+            onSelectPaymethod(supportedMethods[stripeIndex], false);
+            setIsOpenModal(true)
+          },
+          ...supportedMethods[stripeIndex],
+        }
+        : null,
   };
 
   const goToBack = () => navigation?.goBack();
@@ -133,40 +192,47 @@ const PaymentOptionsUI = (props: any) => {
       <Spinner visible={isLoading || placing || paymethodsList?.loading} />
 
       <Container nestedScrollEnabled>
-        <NavBar
-          title={t('PAYMENT_METHODS', 'Payment methods')}
-          onActionLeft={goToBack}
-          btnStyle={{ paddingLeft: 0 }}
-        />
-
-        <View
-          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-          <OText size={orientationState?.dimensions?.width * 0.048}>
-            {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight={'700'}>
-              {`${t('LIKE_TO_PAY', 'like to pay')}?`}
-            </OText>
-          </OText>
-        </View>
-
-        <GridContainer style={{ justifyContent: 'space-between' }}>
-          {supportedMethods?.length > 0 ? (supportedMethods?.map((paymethod: any, i: number) => (
-            <>
-              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
-                <OptionCard
-                  {...{
-                    style: cardStyle,
-                    title: t(`${paymethod.gateway.toUpperCase().replace(/\s/g, '_')}`, paymethod.name),
-                    description: description[paymethod.gateway] ?? t(`${paymethod.gateway.toUpperCase().replace(/\s/g, '_')}`, paymethod.name),
-                    bgImage: paymethod.name === 'Cash' ? theme.images.general.cash : theme.images.general.carddelivery,
-                    callToActionText: paymethod.name === 'Cash' ? t('LETS_GO', 'LETS_GO') : t('INSERT_INFO', 'Test info'),
-                    VectorIcon: () => paymethod.name === 'Cash' ? <AntIconDesign name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} /> : <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />,
-                    onClick: () => onSelectPaymethod(paymethod, false),
-                  }}
-                />
-              </View>
+        {supportedMethods?.length > 0 && (
+          <>
+            <NavBar
+              title={t('PAYMENT_METHODS', 'Payment methods')}
+              onActionLeft={goToBack}
+              btnStyle={{ paddingLeft: 0 }}
+            />
+
+            <View
+              style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
+              <OText size={orientationState?.dimensions?.width * 0.048}>
+                {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.048}
+                  weight={'700'}>
+                  {`${t('LIKE_TO_PAY', 'like to pay')}?`}
+                </OText>
+              </OText>
+            </View>
+
+            <GridContainer style={{ justifyContent: 'space-between' }}>
+              {propsOfItems.CARD_ON_DELIVERY_ID && (
+                <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                  <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
+                </View>
+              )}
+
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
+
+              {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
 
               <View
                 style={{
@@ -180,15 +246,13 @@ const PaymentOptionsUI = (props: any) => {
                       : 1,
                 }}
               />
-            </>
-          ))) : (
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight={'700'}>
-              {`${t('NO_PAYMETHODS_AVAILABLES', 'No paymethods availables')}`}
-            </OText>
-          )}
-        </GridContainer>
+
+              {propsOfItems.STRIPE && (
+                <OptionCard {...propsOfItems?.STRIPE} />
+              )}
+            </GridContainer>
+          </>
+        )}
         <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal
           open={isOpenModal}

package/themes/kiosk/src/components/shared/OButton.tsx

@@ -10,8 +10,6 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -79,19 +77,17 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
-  iconProps?: IconProps;
-  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
+      <StyledButtonDisabled style={props.style}>
+        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+          {props.text}
+        </StyledTextDisabled>
+      </StyledButtonDisabled>
       </View>
     );
   }
@@ -115,15 +111,6 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
-        {props.iconProps ? (
-          <>
-            {props?.IconCustom ? (
-              <props.IconCustom {...props.iconProps} />
-            ) : (
-              <AntDesignIcon {...props.iconProps} />
-            )}
-          </>
-        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}

package/themes/original/index.tsx

@@ -19,6 +19,7 @@ import { Favorite } from './src/components/Favorite';
 import { FavoriteList } from './src/components/FavoriteList';
 import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
+import { GPSButton } from './src/components/GPSButton';
 import { MomentOption } from './src/components/MomentOption';
 import { OrdersOption } from './src/components/OrdersOption';
 import { OrderDetails } from './src/components/OrderDetails';
@@ -85,6 +86,7 @@ import { VerifyPhone } from './src/components/VerifyPhone';
 import { GoogleLogin } from './src/components/GoogleLogin';
 import { PreviousOrders } from './src/components/PreviousOrders';
 import { PaymentOptionCash } from './src/components/PaymentOptionCash';
+import { SendGiftCard } from './src/components/GiftCard/SendGiftCard';
 import { StripeElementsForm } from './src/components/StripeElementsForm';
 import { StripeCardsList } from './src/components/StripeCardsList';
 import { ProductIngredient } from './src/components/ProductIngredient';
@@ -106,7 +108,7 @@ import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/Orde
 import { FormInput, FormSide, ButtonsWrapper, LoginWith, OTab, OTabs } from './src/components/LoginForm/styles';
 import { OSItem, OSItemContent, OSItemActions } from './src/components/PaymentOptionStripe/styles';
 
-import { orderTypeList } from './src/utils'
+import { orderTypeList, getTraduction, verifyDecimals, getOrderStatus, getOrderStatuPickUp } from './src/utils'
 
 import Alert from './src/providers/AlertProvider'
 
@@ -184,6 +186,7 @@ export {
 	Checkout,
 	Favorite,
 	FavoriteList,
+  GPSButton,
 	ForgotPasswordForm,
 	MomentOption,
 	OrdersOption,
@@ -258,6 +261,7 @@ export {
 	ProductIngredient,
 	ProductOption,
 	ProductOptionSubOption,
+  SendGiftCard,
 	Sessions,
 	SingleProductReview,
 	LogoutButton,
@@ -346,6 +350,10 @@ export {
 	_removeStoreData,
 	_clearStoreData,
 	orderTypeList,
+  getTraduction,
+  verifyDecimals,
+  getOrderStatus,
+  getOrderStatuPickUp,
 
 	// Date Picker
 	DatePickerUI

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

@@ -67,7 +67,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 		hasAddressDefault,
 		afterSignup,
 		businessSlug,
-		isFromCheckout
+		isFromCheckout,
+		onNavigationRedirect
 	} = props;
 
 	const theme = useTheme();
@@ -133,6 +134,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const [configState] = useConfig();
 	const [orderState] = useOrder();
 	const { handleSubmit, errors, control, setValue } = useForm();
+	const [autoCompleteAddress, setAutoCompleteAddress] = useState(false)
 
 	const [toggleMap, setToggleMap] = useState(false);
 	const [alertState, setAlertState] = useState<{
@@ -173,6 +175,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const isHideMap = theme?.address?.components?.map?.hidden
 	const isHideIcons = theme?.address?.components?.icons?.hidden
 	const continueAsGuest = () => navigation.navigate(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true });
+	const unaddressedTypes = configState?.configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const getAddressFormatted = (address: any) => {
@@ -352,9 +356,6 @@ const AddressFormUI = (props: AddressFormParams) => {
 			map_data: { library: 'google', place_id: data.place_id },
 			zip_code: data?.zip_code || null,
 		};
-		if (googleInput?.current) {
-			googleInput?.current?.setAddressText(addressSelected.address);
-		}
 		updateChanges(addressSelected);
 	};
 
@@ -527,6 +528,12 @@ const AddressFormUI = (props: AddressFormParams) => {
 		setIsSignUpEffect(true);
 	}, [orderState.loading]);
 
+	useEffect(() => {
+		if (isAllowUnaddressOrderType) {
+			onNavigationRedirect && onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList')
+		}
+	}, [isAllowUnaddressOrderType])
+
 	return (
 		<ScrollView
 			keyboardShouldPersistTaps='always'
@@ -572,6 +579,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 											placeholder={t('ADD_ADDRESS', 'Add a address')}
 											onPress={(data, details: any) => {
 												handleChangeAddress(data, details);
+												setAutoCompleteAddress(true);
 											}}
 											query={{
 												key: googleMapsApiKey,
@@ -586,6 +594,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 															target: { name: 'address', value: text },
 														});
 														setValue('address', text);
+														setAutoCompleteAddress(true)
 													}
 													setIsFirstTime(false);
 													setAddressEditing(text.length == 0);
@@ -673,13 +682,15 @@ const AddressFormUI = (props: AddressFormParams) => {
 											setSaveLocation={setSaveMapLocation}
 											handleToggleMap={handleToggleMap}
 											isIntGeoCoder
+											setAutoCompleteAddress={setAutoCompleteAddress}
+											autoCompleteAddress={autoCompleteAddress}
 										/>
 									</GoogleMapContainer>
 								</View>
 							)}
 
 							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								{((isRequiredField && isRequiredField('internal_number')) || showFieldWithTheme('internal_number')) && (
+								{showField?.('internal_number') && ((isRequiredField && isRequiredField('internal_number')) || showFieldWithTheme('internal_number')) && (
 									<Controller
 										control={control}
 										name="internal_number"
@@ -726,7 +737,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 									/>
 								)}
 
-								{((isRequiredField && isRequiredField('zipcode')) || showFieldWithTheme('zipcode')) && (
+								{showField?.('zipcode') && ((isRequiredField && isRequiredField('zipcode')) || showFieldWithTheme('zipcode')) && (
 									<Controller
 										control={control}
 										name="zipcode"
@@ -771,7 +782,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 								)}
 							</View>
 
-							{((isRequiredField && isRequiredField('address_notes')) || showFieldWithTheme('address_notes')) && (
+							{showField?.('address_notes') && ((isRequiredField && isRequiredField('address_notes')) || showFieldWithTheme('address_notes')) && (
 								<Controller
 									control={control}
 									name="address_notes"
@@ -861,7 +872,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 								text={t('CANCEL', 'Cancel')}
 								bgColor={theme.colors.secundary}
 								borderColor={theme.colors.secundary}
-								textStyle={{ color: theme.colors.black }}
+								textStyle={{ color: theme.colors.textNormal }}
 								style={{ borderRadius: 7.6, borderWidth: 1, shadowOpacity: 0 }}
 								onClick={() => navigation?.canGoBack() && navigation.goBack()}
 							/>

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

@@ -21,7 +21,7 @@ export const AppleLogin = (props: any) => {
   const [{ configs }] = useConfig();
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
@@ -53,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -66,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -79,7 +79,7 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
+
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>

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

@@ -452,7 +452,7 @@ export const BusinessBasicInformation = (
 							</BusinessInfoItem>
 						</View>
 						<WrapReviews>
-							{!isBusinessInfoShow && (
+							{!isBusinessInfoShow && !loading && (
 								<>
 									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
 										<>

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

@@ -40,6 +40,8 @@ function BusinessControllerPropsAreEqual(prevProps: any, nextProps: any) {
 		prevProps.isBusinessOpen === nextProps.isBusinessOpen
 }
 
+const deliveryTypes = [1, 7]
+
 export const BusinessControllerUI = React.memo((props: BusinessControllerParams) => {
 	const {
 		business,
@@ -321,14 +323,14 @@ export const BusinessControllerUI = React.memo((props: BusinessControllerParams)
 								</View>
 							) : (
 								<View style={styles.bullet}>
-									{orderState?.options?.type === 1 && !hideBusinessFee && (
+									{deliveryTypes.includes(orderState?.options?.type) && !hideBusinessFee && (
 										<OText size={textSize} color={theme.colors.textSecondary}>
 											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
 										</OText>
 									)}
 									{!hideBusinessTime && (
 										<OText size={textSize} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-											orderState?.options?.type === 1
+											deliveryTypes.includes(orderState?.options?.type)
 												? (businessDeliveryTime ?? business?.delivery_time)
 												: (businessPickupTime ?? business?.pickup_time),
 										)} \u2022 `}</OText>

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

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, Vibration } from 'react-native';
 import { useOrder, useLanguage, useUtils, useConfig, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -49,7 +49,7 @@ export const BusinessItemAccordion = (props: any) => {
 		if (cartsLength === 1) {
 			changeActiveState && changeActiveState(!isClosed, cart?.uuid)
 		}
-	}, [orderState?.carts, isClosed])
+	}, [orderState?.carts?.length, isClosed])
 
 	const subtotalWithTaxes = cart?.taxes?.reduce((acc: any, item: any) => {
 		if (item?.type === 1)
@@ -58,6 +58,7 @@ export const BusinessItemAccordion = (props: any) => {
 	}, cart?.subtotal)
 
 	const bgStyle = (subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary
+	const textStyles = (subtotalWithTaxes < cart?.minimum || !cart?.valid_address) ? theme.colors.black : theme.colors.white
 
 	useEffect(() => {
 		if (isActive && !isFromUpselling) {
@@ -68,6 +69,11 @@ export const BusinessItemAccordion = (props: any) => {
 		}
 	}, [isActive, viewedCart])
 
+	const handleGoToStore = () => {
+		Vibration.vibrate(100)
+		props.onNavigationRedirect('Business', { store: cart?.business?.slug })
+	}
+
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>
 			<BIHeader
@@ -81,7 +87,7 @@ export const BusinessItemAccordion = (props: any) => {
 						<View style={{ flexDirection: 'row' }}>
 							{props.onNavigationRedirect && !isClosed && !isGiftCart && (
 								<>
-									<TouchableOpacity onPress={() => props.onNavigationRedirect('Business', { store: cart?.business?.slug })}>
+									<TouchableOpacity onPress={() => handleGoToStore()}>
 										<OText color={theme.colors.primary} size={12} lineHeight={18} style={{ textDecorationLine: 'underline' }}>{t('GO_TO_STORE', 'Go to store')}</OText>
 									</TouchableOpacity>
 								</>
@@ -155,7 +161,7 @@ export const BusinessItemAccordion = (props: any) => {
 					{cart?.valid_products && (
 						<OButton
 							onClick={handleClickCheckout}
-							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+							textStyle={{ color: textStyles, textAlign: 'center', flex: 1 }}
 							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 							text={t('CHECKOUT', 'Checkout')}
 							bgColor={bgStyle}