ordering-ui-react-native 0.17.39 → 0.17.40-release

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

@@ -34,7 +34,8 @@ const UserDetailsUI = (props: any) => {
 		isCheckout,
 		handleSendVerifyCode,
 		verifyPhoneState,
-		setFormState
+		setFormState,
+		setIsOpen
 	} = props
 
 	const theme = useTheme();
@@ -152,9 +153,11 @@ const UserDetailsUI = (props: any) => {
 			{!(validationFields.loading || formState.loading) && (
 				<UDContainer>
 					<UDHeader>
-						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
-							{t('CUSTOMER_DETAILS', 'Customer Details')}
-						</OText>
+						{props.HeaderTitle ?? (
+							<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal}>
+								{t('CUSTOMER_DETAILS', 'Customer Details')}
+							</OText>
+						)}
 						{cartStatus !== 2 && !requiredFields && (
 							!isEdit ? (
 								<EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
@@ -207,6 +210,7 @@ const UserDetailsUI = (props: any) => {
 							isCheckout={isCheckout}
 							setWillVerifyOtpState={setWillVerifyOtpState}
 							setIsSubmit={setIsSubmit}
+							setIsOpen={setIsOpen}
 						/>
 					)}
 				</UDContainer>

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

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, StyleSheet, TouchableOpacity } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import { useSession, useLanguage, ToastType, useToast, useConfig } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
+import { SignupForm } from '../SignupForm'
 
 import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
 
-import { OText, OButton, OInput } from '../shared';
+import { OText, OButton, OInput, OModal } from '../shared';
+import Alert from '../../providers/AlertProvider'
 
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
@@ -27,6 +29,9 @@ export const UserFormDetailsUI = (props: any) => {
 		phoneUpdate,
 		hideUpdateButton,
 		setWillVerifyOtpState,
+		handlePlaceOrderAsGuest,
+		isCheckout,
+		setIsOpen
 	} = props;
 
 	const theme = useTheme();
@@ -68,10 +73,11 @@ export const UserFormDetailsUI = (props: any) => {
 	const [, { showToast }] = useToast();
 	const { handleSubmit, control, errors, setValue } = useForm();
 
-	const [{ user }] = useSession();
+	const [{ user }, { login }] = useSession();
 	const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
+	const [isModalOpen, setIsModalOpen] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -79,9 +85,18 @@ export const UserFormDetailsUI = (props: any) => {
 			cellphone: null,
 		},
 	});
+	const [alertState, setAlertState] = useState({ open: false, content: '' })
 
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
+	const handleSuccessSignup = (user: any) => {
+		login({
+			user,
+			token: user?.session?.access_token
+		})
+		handlePlaceOrderAsGuest && handlePlaceOrderAsGuest()
+	}
+
 	const getInputRules = (field: any) => {
 		const rules: any = {
 			required: isRequiredField(field.code)
@@ -206,6 +221,10 @@ export const UserFormDetailsUI = (props: any) => {
 		if (!formState?.loading && formState?.result?.error) {
 			formState.result?.result &&
 				showToast(ToastType.Error, formState.result?.result[0]);
+			if (isCheckout) {
+				setIsOpen && setIsOpen(false)
+				cleanFormState && cleanFormState({ changes: {} })
+			}
 		}
 	}, [formState?.loading]);
 
@@ -423,18 +442,39 @@ export const UserFormDetailsUI = (props: any) => {
 					text={
 						formState.loading
 							? t('UPDATING', 'Updating...')
-							: t('CONTINUE', 'Continue')
+							: ((isCheckout && !!user?.guest_id)
+								? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
+								: t('CONTINUE', 'Continue'))
 					}
 					bgColor={theme.colors.white}
 					textStyle={{ color: theme.colors.primary, fontSize: 14 }}
 					borderColor={theme.colors.primary}
-					isDisabled={formState.loading || !isValid}
+					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
 					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
-					onClick={handleSubmit(onSubmit)}
+					onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
 				/>
 			)}
+			{isCheckout && !!user?.guest_id && (
+				<TouchableOpacity style={{ marginTop: 10 }} onPress={() => handlePlaceOrderAsGuest()}>
+					<OText color={theme.colors.primary} style={{ textAlign: 'center' }}>{t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}</OText>
+				</TouchableOpacity>
+			)}
+			<OModal
+				open={isModalOpen}
+				onClose={() => setIsModalOpen(false)}
+			>
+				<ScrollView style={{ paddingHorizontal: 20, width: '100%' }}>
+					<SignupForm
+						handleSuccessSignup={handleSuccessSignup}
+						isGuest
+						signupButtonText={t('SIGNUP', 'Signup')}
+						useSignupByEmail
+						useChekoutFileds
+					/>
+				</ScrollView>
+			</OModal>
+			
 		</>
 	);
 };
-

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

@@ -49,6 +49,8 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const theme = useTheme();
 
+  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+
 	const langPickerStyle = StyleSheet.create({
 		inputAndroid: {
 			color: theme.colors.textNormal,
@@ -89,8 +91,7 @@ const ProfileListUI = (props: ProfileParams) => {
 			marginEnd: 14
 		},
 		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
+			paddingHorizontal: isChewLayout ? 20 : 40
 		},
 		messageIconStyle: {
 			fontSize: 18,
@@ -163,10 +164,7 @@ const ProfileListUI = (props: ProfileParams) => {
 	}, [removeAccountState])
 
 	return (
-		<View style={{ flex: 1, height: height - top - bottom - 62, paddingTop: 20 }}>
-			{/* <OText size={24} style={{ marginTop: 15, paddingHorizontal: 40 }}>
-				{t('PROFILE', 'Profile')}
-			</OText> */}
+		<View style={{ flex: 1, height: height - top - bottom, paddingTop: 20 }}>
 			<CenterView style={styles.pagePadding}>
 				{user?.photo && (
 					<View style={styles.photo}>
@@ -183,7 +181,7 @@ const ProfileListUI = (props: ProfileParams) => {
 				<View style={{ flexBasis: '70%' }}>
 					<OText size={20} lineHeight={30} weight={Platform.OS === 'ios' ? '500' : 'bold'} color={theme.colors.textNormal}>{user?.name} {user?.lastname}</OText>
 					<TouchableOpacity onPress={() => navigation.navigate('ProfileForm', { ...detailProps })}>
-						<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
+						<OText size={12} lineHeight={18} color={theme.colors.primary} style={{ textDecorationLine: 'underline' }}>{t('VIEW_ACCOUNT', 'View account')}</OText>
 					</TouchableOpacity>
 				</View>
 			</CenterView>

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

@@ -16,9 +16,8 @@ import { ProfileParams } from '../../types';
 import { UserFormDetailsUI } from '../UserFormDetails';
 
 import { OIcon, OIconButton, OModal } from '../shared';
-import { CenterView } from './styles';
+import { CenterView, Container } from './styles';
 import NavBar from '../NavBar';
-import { Container } from '../../layouts/Container';
 import { VerifyPhone } from '../VerifyPhone'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import FastImage from 'react-native-fast-image'
@@ -51,11 +50,6 @@ const ProfileUI = (props: ProfileParams) => {
 			shadowOpacity: 0.2,
 			backgroundColor: theme.colors.white,
 		},
-		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40,
-			justifyContent: 'center',
-		},
 		navBarStyle: {
 			paddingLeft: 40,
 			paddingRight: 40,
@@ -284,17 +278,22 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
-			<NavBar
-				title={t('ACCOUNT', 'Account')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation.goBack()}
-				showCall={false}
-				style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 30 }}
-			/>
-			<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
-				<Container noPadding>
-
-					<CenterView style={styles.pagePadding}>
+			<Container
+				pdng={Platform.OS === 'ios' ? '20px' : '10px'}
+			>
+				<NavBar
+					title={t('ACCOUNT', 'Account')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+				/>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					enabled={Platform.OS === 'ios' ? true : false}
+					style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}
+				>
+					<CenterView>
 						<View style={styles.photo}>
 							{user?.photo ? (
 								<FastImage
@@ -317,17 +316,15 @@ const ProfileUI = (props: ProfileParams) => {
 							onClick={() => handleImagePicker()}
 						/>
 					</CenterView>
-					<View style={{ height: 8, marginLeft: -40, marginRight: -40, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
+					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
 					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
-					<View style={styles.pagePadding}>
-						<UserFormDetailsUI
-							{...props}
-							isEdit
-							setWillVerifyOtpState={setWillVerifyOtpState}
-						/>
-					</View>
-				</Container>
-			</KeyboardAvoidingView>
+					<UserFormDetailsUI
+						{...props}
+						isEdit
+						setWillVerifyOtpState={setWillVerifyOtpState}
+					/>
+				</KeyboardAvoidingView>
+			</Container>
 			<OModal
 				open={isModalVisible}
 				onClose={() => setIsModalVisible(false)}

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

@@ -9,6 +9,13 @@ export const UserData = styled.View`
   text-align: center;
 `
 
+export const Container = styled.ScrollView`
+    position: relative;
+    flex: 1;
+	  padding-top: ${(props: any) => props.pdng};
+    margin-bottom: 40px;
+`
+
 export const Names = styled.View`
   flex-direction: row;
 `

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

@@ -54,7 +54,7 @@ export const WalletTransactionItem = (props: any) => {
           <OText>{item?.description}</OText>
         </DescriptionBlock>
       )}
-      {!!item?.code && (
+      {/* {!!item?.code && (
         <DescriptionBlock>
           <OText weight={'bold'}>
             {t('CODE', 'Code')}
@@ -63,7 +63,7 @@ export const WalletTransactionItem = (props: any) => {
             </OText>
           </OText>
         </DescriptionBlock>
-      )}
+      )} */}
     </Container>
   )
 }

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

@@ -63,12 +63,12 @@ export const WalletTransactions = (props: any) => {
           (transactionsList?.error ||
             !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
         (
-          <NotFoundSource
-            content={transactionsList?.error
+          <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>
+            {transactionsList?.error
               ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
               : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
             }
-          />
+          </OText>
         )}
       </View>
     </Container>

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

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, StyleSheet, View, ScrollView } from 'react-native';
+import { Pressable, StyleSheet, View, ScrollView, TouchableOpacity, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import FastImage from 'react-native-fast-image'
+import NavBar from '../NavBar'
 import {
   WalletList,
   useLanguage,
@@ -24,10 +25,10 @@ import {
   WalletTransactionsWrapper
 } from './styles'
 
-import NavBar from '../NavBar'
 import { OButton, OIcon, OText, OModal } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { WalletTransactions } from '../WalletTransactions'
+import { GiftCardUI } from '../GiftCard/GiftCardUI'
 
 const WalletsUI = (props: any) => {
   const {
@@ -48,6 +49,7 @@ const WalletsUI = (props: any) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
+
   const styles = StyleSheet.create({
     logoStyle: {
       width: 120,
@@ -58,12 +60,20 @@ const WalletsUI = (props: any) => {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
+    },
+    dividerStyle: {
+      height: 8,
+      backgroundColor: theme.colors.backgroundGray100,
+      marginVertical: 25,
+      marginHorizontal: -40,
+      width: '100%'
     }
   });
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
-  const isChewLayout = theme?.wallets_view?.components?.layout?.type === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const hideWalletsTheme = theme?.bar_menu?.components?.wallets?.hidden
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
@@ -78,7 +88,7 @@ const WalletsUI = (props: any) => {
       isActive: isWalletCashEnabled
     },
     credit_point: {
-      name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
+      name: t('POINTS_WALLET', 'Points Wallet'),
       value: 1,
       isActive: isWalletPointsEnabled
     }
@@ -110,28 +120,41 @@ const WalletsUI = (props: any) => {
 
   return (
     <>
-      <Container>
+      <Container
+        pdng={Platform.OS === 'ios' ? '10px' : '0'}
+      >
         <Header>
-          <NavBar
-            title={isChewLayout ? '' : t('WALLETS', 'Wallets')}
-            titleAlign={'center'}
-            onActionLeft={goToBack}
-            showCall={false}
-            paddingTop={10}
-            btnStyle={{ paddingLeft: 0 }}
-            style={{ flex: 1 }}
-          />
-          {isChewLayout && (
-            <OButton
-              text={t('WALLET_HISTORY', 'Wallet history')}
-              bgColor={theme.colors.white}
-              borderColor={theme.colors.lightGray}
-              imgRightSrc={null}
-              textStyle={{ fontSize: 12, color: theme.colors.disabled }}
-              onClick={() => setOpenHistory(true)}
-              style={{ borderRadius: 8, height: 40 }}
+          <View style={{
+            ...{
+              width: '100%',
+              display: 'flex',
+              flexDirection: hideWalletsTheme ? 'column' : 'row',
+              justifyContent: hideWalletsTheme ? 'flex-start' : 'space-between',
+              alignItems: hideWalletsTheme ? 'flex-start' : 'center',
+              marginTop: hideWalletsTheme ? 0 : 10,
+            },
+          }}>
+            <NavBar
+              title={t('WALLETS', 'Wallets')}
+              titleAlign={'center'}
+              onActionLeft={goToBack}
+              showCall={false}
+              paddingTop={10}
+              btnStyle={{ paddingLeft: 0 }}
+              hideArrowLeft={!hideWalletsTheme}
             />
-          )}
+            {isChewLayout && (
+              <OButton
+                text={t('WALLET_HISTORY', 'Wallet history')}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.lightGray}
+                imgRightSrc={null}
+                textStyle={{ fontSize: 12, color: theme.colors.disabled }}
+                onClick={() => setOpenHistory(true)}
+                style={{ borderRadius: 8, height: 40, width: hideWalletsTheme ? '100%' : 150, marginTop: hideWalletsTheme ? 10 : 0 }}
+              />
+            )}
+          </View>
         </Header>
 
         {!walletList.loading &&
@@ -145,16 +168,25 @@ const WalletsUI = (props: any) => {
                 showsHorizontalScrollIndicator={false}
               >
                 {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
-                  <Pressable
+                  <TouchableOpacity
                     key={wallet.id}
                     onPress={() => handleChangeTab(wallet)}
                   >
-                    <OTab isSelected={tabSelected === wallet.type}>
-                      <OText size={18} color={tabSelected === wallet.type && theme.colors.primary}>
+                    <OTab
+                      isSelected={tabSelected === wallet.type}
+                      style={{
+                        borderBottomWidth: 1,
+                        borderBottomColor:
+                          tabSelected === wallet.type
+                            ? theme.colors.textNormal
+                            : theme.colors.border
+                      }}
+                    >
+                      <OText>
                         {walletName[wallet.type]?.name}
                       </OText>
                     </OTab>
-                  </Pressable>
+                  </TouchableOpacity>
                 ))}
               </OTabs>
 
@@ -163,9 +195,9 @@ const WalletsUI = (props: any) => {
                   <LoyaltyContent>
                     <LoyaltyWrapp>
                       <OText size={20}>
-                        {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
+                        {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}`}
                       </OText>
-                      {/* {loyaltyLevel.image ? (
+                      {loyaltyLevel.image ? (
                         <FastImage
                           style={styles.logoStyle}
                           source={{
@@ -180,7 +212,7 @@ const WalletsUI = (props: any) => {
                           source={theme.images.dummies.loyaltyLevel}
                           resizeMode='contain'
                         />
-                      )} */}
+                      )}
                       <OText
                         size={22}
                         weight='bold'
@@ -206,6 +238,14 @@ const WalletsUI = (props: any) => {
                   </OText>
                 </BalanceElement>
 
+                {/* {currentWalletSelected?.type === 'cash' && (
+                  <>
+                    <View style={styles.dividerStyle} />
+                    <GiftCardUI navigation={navigation} />
+                    <View style={styles.dividerStyle} />
+                  </>
+                )} */}
+
                 {!isChewLayout && (
                   <WalletTransactions
                     transactionsList={transactionsList}
@@ -259,15 +299,18 @@ const WalletsUI = (props: any) => {
         <ScrollView>
           <WalletTransactionsWrapper>
             <OButton
+              imgLeftStyle={{ width: 18 }}
               imgRightSrc={null}
               style={{
                 borderWidth: 0,
-                backgroundColor: theme.colors.white,
-                padding: 0,
-                paddingHorizontal: 0,
-                width: 30,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
                 paddingLeft: 0,
-                paddingRight: 0
+                paddingRight: 0,
+                marginBottom: 10
               }}
               onClick={() => setOpenHistory(false)}
               icon={AntDesignIcon}

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

@@ -1,13 +1,12 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  display: flex;
-  flex-direction: column;
+  padding-horizontal: 20px;
+  padding-bottom: 20px;
+  padding-top: ${(props: any) => props.pdng};
 `
 export const Header = styled.View`
   flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
 `
 export const SectionContent = styled.View`
   width: 100%;
@@ -34,10 +33,12 @@ export const OTabs = styled.View`
   flex-direction: row;
   width: 100%;
   flex-wrap: wrap;
+  padding-vertical: 5px;
 `;
 
 export const OTab = styled.View`
   padding-horizontal: 10px;
+  padding-vertical: 10px;
 `;
 
 export const LoyaltyContent = styled.View`

package/themes/original/src/components/shared/CardAnimation.tsx

@@ -10,7 +10,7 @@ interface Props {
     onClick: any
 }
 
-export const CardAnimation = (props : Props) => {
+export const CardAnimation = (props: Props) => {
     const {
         children,
         onClick,
@@ -21,8 +21,8 @@ export const CardAnimation = (props : Props) => {
         cardAnimation: {
             elevation: isPressed ? 2 : 0,
             shadowColor: '#888',
-            shadowOffset: { width: 0, height: isPressed ? 2 : 0 },
-            shadowRadius: 18,
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 0,
             shadowOpacity: isPressed ? 0.8 : 0,
             borderRadius: 12,
         }

package/themes/original/src/components/shared/HeaderTitle.tsx

@@ -1,16 +1,21 @@
 import React from 'react';
 import { Platform } from 'react-native';
 import OText from './OText';
+import { useTheme } from 'styled-components/native'
 
 const HeaderTitle = (props: any) => {
   const { text, style } = props
+	const theme = useTheme();
+
   return (
     <OText
-      size={24}
+      size={20}
+      weight={Platform.OS === 'ios' ? '600' : 'bold'}
       style={style ?? {
         marginTop: Platform.OS === 'android' ? 50 : 30,
-        paddingHorizontal: 40,
-        textTransform: 'capitalize'
+        paddingHorizontal: props.ph ?? 40,
+        textTransform: 'capitalize',
+        color: props.titleColor || theme.colors.textNormal,
       }}
     >
       {text}

package/themes/original/src/components/shared/OBottomPopup.tsx

@@ -33,7 +33,7 @@ const OBottomPopup = (props: Props) => {
 	
 	return (
 		<Modal
-			animationType='slide'
+			animationType='fade'
 			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}

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

@@ -12,6 +12,7 @@ import {
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components/native';
 import { OIcon } from './';
+import { css } from 'styled-components';
 
 const StyledButton = styled.View<Props>`
 	background-color: ${(props: any) => props.theme.colors.primary};
@@ -26,6 +27,9 @@ const StyledButton = styled.View<Props>`
 	padding-left: 20px;
 	padding-right: 20px;
 	position: relative;
+	${(props: any) => props?.theme?.general?.components?.buttons?.borderRadius && css`
+      border-radius: ${props?.theme?.general?.components?.buttons?.borderRadius}px;
+  `}
 `
 const StyledButtonDisabled = styled(StyledButton)`
 	background-color: ${(props: any) => props.theme.colors.disabled};
@@ -115,12 +119,12 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor } : props.style}>
+			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius } : { ...props.style, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
 				{props.imgLeftSrc ? (
-					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} />
+					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
 					<StyledText style={props.textStyle}>{props.text}</StyledText>