ordering-ui-react-native 0.21.13 → 0.21.14-release

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

@@ -5,7 +5,7 @@ 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 { UDForm, UDLoader, UDWrapper, WrapperPhone, WrapperBirthdate } from './styles';
 
 import { OText, OButton, OInput, OModal, OIcon } from '../shared';
 import { OAlert } from '../../../../../src/components/shared'
@@ -13,6 +13,8 @@ import { OAlert } from '../../../../../src/components/shared'
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
 import { ListItem } from '../UserProfile/styles';
+import moment from 'moment';
+import { DatePickerUI } from '../DatePicker';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -81,6 +83,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
 	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [birthdate, setBirthdate] = useState(user?.birthdate ?? null)
+	const [showDatePicker, setShowDatePicker] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -92,6 +96,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -206,6 +211,13 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const _handleChangeDate = (date: any) => {
+		setBirthdate(date)
+		const _birthdate = moment(date).format('YYYY-MM-DD')
+		handleChangeInput({ target: { name: 'birthdate', value: _birthdate } })
+		setShowDatePicker(false)
+	}
+
 	const onRemoveAccount = () => {
 		setConfirm({
 			open: true,
@@ -268,6 +280,14 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
 
+	useEffect(() => {
+		if (!validationFields.loading && birthdate) {
+			setValue('birthdate', formState?.result?.result
+				? formState?.result?.result?.birthdate
+				: formState?.changes?.birthdate ?? (user && user?.birthdate) ?? '')
+		}
+	}, [validationFields, birthdate])
+
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
 		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
@@ -359,7 +379,21 @@ export const UserFormDetailsUI = (props: any) => {
 										</React.Fragment>
 									),
 							)}
-
+							{showInputBirthday && (
+								<>
+									<WrapperBirthdate>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+											{t('BIRTHDATE', 'Birthdate')}
+										</OText>
+										<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+											<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
+												{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+											</OText>
+										</TouchableOpacity>
+									</WrapperBirthdate>
+									<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
+								</>
+							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
@@ -448,8 +482,8 @@ export const UserFormDetailsUI = (props: any) => {
 										? t('UPDATING', 'Updating...')
 										: t('UPDATE', 'Update')
 								}
-								bgColor={theme.colors.white}
-								textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+								bgColor={theme.colors.primary}
+								textStyle={{ color: theme.colors.white, fontSize: 14 }}
 								borderColor={theme.colors.primary}
 								isDisabled={formState.loading}
 								imgRightSrc={null}
@@ -468,12 +502,25 @@ export const UserFormDetailsUI = (props: any) => {
 								? 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 }}
+					bgColor={theme.colors.primary}
+					textStyle={{
+						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
+						fontSize: 14
+					}}
 					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}
 					imgRightSrc={null}
-					style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
+					style={{
+						borderRadius: 7.6,
+						shadowOpacity: 0,
+						width: '100%',
+						borderWidth: 1,
+						marginTop: 20,
+						marginBottom: 20,
+						backgroundColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.lightGray : theme.colors.primary,
+						borderColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.white : theme.colors.primary,
+						opacity: !user?.guest_id && (formState.loading || !isValid) ? 0.3 : 1,
+					}}
 					onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
 				/>
 			)}
@@ -507,4 +554,3 @@ export const UserFormDetailsUI = (props: any) => {
 		</>
 	);
 };
-

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

@@ -32,3 +32,10 @@ export const WrapperPhone = styled.View`
   border-bottom-width: 1px;
   border-bottom-color: ${(props: any) => props.theme.colors.border};
 `
+
+export const WrapperBirthdate = styled.View`
+  margin-bottom: 25px;
+  width: 100%;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+`

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

@@ -20,7 +20,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
 import FontAwesome from 'react-native-vector-icons/FontAwesome'
 import FastImage from 'react-native-fast-image'
 import { OAlert } from '../../../../../src/components/shared'
-
+import { WebsocketStatus } from '../WebsocketStatus'
 import {
 	OIcon,
 	OText,
@@ -101,7 +101,7 @@ const ProfileListUI = (props: ProfileParams) => {
 			marginEnd: 14
 		},
 		pagePadding: {
-			paddingHorizontal: isChewLayout ? 20 : 40
+			paddingHorizontal: 20
 		},
 		messageIconStyle: {
 			fontSize: 18,
@@ -270,6 +270,7 @@ const ProfileListUI = (props: ProfileParams) => {
 					<View style={{ height: 17 }} />
 				</Actions>
 			</ListWrap>
+			<WebsocketStatus />
 			<OAlert
 				open={confirm.open}
 				title={confirm.title}

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

@@ -288,43 +288,37 @@ const ProfileUI = (props: ProfileParams) => {
 					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
-									style={{ height: 80, width: 80, borderRadius: 8 }}
-									source={{
-										uri: user?.photo,
-										priority: FastImage.priority.normal,
-									}}
-									resizeMode={FastImage.resizeMode.cover}
-								/>
-							) : (
-								<Ionicons name='person-outline' size={50} />
-							)}
-						</View>
-						<OIconButton
-							icon={theme.images.general.camera}
-							borderColor={theme.colors.clear}
-							iconStyle={{ width: 20, height: 20 }}
-							style={{ maxWidth: 40, position: 'absolute', alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
-							onClick={() => handleImagePicker()}
-						/>
-					</CenterView>
-					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
-					<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
-					<UserFormDetailsUI
-						{...props}
-						isProfile
-						isEdit
-						setWillVerifyOtpState={setWillVerifyOtpState}
+				<CenterView>
+					<View style={styles.photo}>
+						{user?.photo ? (
+							<FastImage
+								style={{ height: 80, width: 80, borderRadius: 8 }}
+								source={{
+									uri: user?.photo,
+									priority: FastImage.priority.normal,
+								}}
+								resizeMode={FastImage.resizeMode.cover}
+							/>
+						) : (
+							<Ionicons name='person-outline' size={50} />
+						)}
+					</View>
+					<OIconButton
+						icon={theme.images.general.camera}
+						borderColor={theme.colors.clear}
+						iconStyle={{ width: 20, height: 20 }}
+						style={{ maxWidth: 40, position: 'absolute', alignSelf: 'center', backgroundColor: '#000', opacity: 0.5 }}
+						onClick={() => handleImagePicker()}
 					/>
-				</KeyboardAvoidingView>
+				</CenterView>
+				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginVertical: 32, zIndex: 10 }} />
+				<Spinner visible={formState?.loading || verifyPhoneState?.loading} />
+				<UserFormDetailsUI
+					{...props}
+					isProfile
+					isEdit
+					setWillVerifyOtpState={setWillVerifyOtpState}
+				/>
 			</Container>
 			<OModal
 				open={isModalVisible}

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

@@ -293,7 +293,7 @@ const UserVerificationUI = (props: any) => {
 
   useEffect(() => {
     setupUserPhoneNumber()
-  }, [user])
+  }, [user?.cellphone, user?.country_phone_code])
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
@@ -402,6 +402,7 @@ const UserVerificationUI = (props: any) => {
                       textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
                       noDropIcon
                       isDisabled
+                      updateStateWithSubmit
                     />
                   </InputWrapper>
                 </>
@@ -485,6 +486,7 @@ const UserVerificationUI = (props: any) => {
             user={user}
             isEdit
             isVerifiedPhone
+            dontToggleEditMode
           />
         </View>
       </ScrollView>

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

@@ -3,6 +3,7 @@ import styled from 'styled-components/native'
 export const Container = styled.View`
   display: flex;
   flex-direction: column;
+  width: 100%;
 `
 
 export const TransactionsWrapper = styled.View`

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

@@ -73,7 +73,7 @@ const WalletsUI = (props: any) => {
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
   const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-  const hideWalletsTheme = theme?.bar_menu?.components?.wallets?.hidden
+  const hideWalletsTheme = theme?.bar_menu?.components?.wallet?.hidden === true
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
@@ -120,18 +120,16 @@ const WalletsUI = (props: any) => {
 
   return (
     <>
-      <Container
-        pdng={Platform.OS === 'ios' ? '10px' : '0'}
-      >
+      <Container>
         <Header>
           <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,
+              flexDirection: !hideWalletsTheme ? 'column' : 'row',
+              justifyContent: !hideWalletsTheme ? 'flex-start' : 'space-between',
+              alignItems: !hideWalletsTheme ? 'flex-start' : 'center',
+              marginTop: !hideWalletsTheme ? Platform.OS === 'ios' ? 20 : 30 : 10,
             },
           }}>
             <NavBar
@@ -141,6 +139,7 @@ const WalletsUI = (props: any) => {
               showCall={false}
               paddingTop={10}
               btnStyle={{ paddingLeft: 0 }}
+              isVertical={!hideWalletsTheme}
               hideArrowLeft={!hideWalletsTheme}
             />
             {isChewLayout && !openHistory && (
@@ -151,7 +150,7 @@ const WalletsUI = (props: any) => {
                 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 }}
+                style={{ borderRadius: 8, height: 40, width: !hideWalletsTheme ? '100%' : 150, marginTop: !hideWalletsTheme ? 10 : 0 }}
               />
             )}
           </View>

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

@@ -3,7 +3,7 @@ import styled from 'styled-components/native'
 export const Container = styled.View`
   padding-horizontal: 20px;
   padding-bottom: 20px;
-  padding-top: ${(props: any) => props.pdng};
+  padding-top: ${(props: any) => props.pdng || 0};
 `
 export const Header = styled.View`
   flex-direction: row;

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

@@ -0,0 +1,172 @@
+import React, { useState } from 'react'
+import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet } from 'react-native'
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTheme } from 'styled-components/native'
+import RNRestart from 'react-native-restart'
+import { OModal, OButton, OText, OIcon } from '../shared'
+
+import {
+  Container,
+  ModalContainer,
+  ModalTitle,
+  StatusItemWrapper,
+  StatusText
+} from './styles'
+
+const SocketStatusUI = (props: any) => {
+  const {
+    socketStatus,
+    connectedDate
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ parseDate }] = useUtils()
+  const [openModal, setOpenModal] = useState(false)
+
+  const styles = StyleSheet.create({
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0,
+      marginBottom: 30,
+      marginTop: 30
+    },
+  })
+
+  const getStatusColor = (status: number) => {
+    switch (status) {
+      case 0:
+        return '#FF9922';
+      case 1:
+        return '#00D27A';
+      case 2:
+        return '#E63757';
+      default:
+        return '#FF9922';
+    }
+  }
+
+  return (
+    <Container>
+      <TouchableOpacity
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.inputChat,
+          borderRadius: 7.6,
+          marginVertical: 10,
+          paddingVertical: 10,
+          paddingHorizontal: 15,
+          marginHorizontal: 15
+        }}
+        activeOpacity={0.6}
+        onPress={() => setOpenModal(true)}
+      >
+        <OText
+          style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
+        >
+          {t('CONNECTION_STATUS', 'Status')}
+        </OText>
+        <MaterialIcon
+          name='circle'
+          size={12}
+          color={getStatusColor(socketStatus)}
+          style={{ marginLeft: 8 }}
+        />
+      </TouchableOpacity>
+
+      <OModal
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        entireModal
+        customClose
+      >
+        <ModalContainer nestedScrollEnabled={true}>
+          <TouchableOpacity
+            onPress={() => setOpenModal(false)}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <View>
+            <ModalTitle>{t('CONNECTION_STATUS', 'Connection status')}</ModalTitle>
+            <OText style={{ marginBottom: 20 }}>
+              {t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}
+            </OText>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(1)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('OK', 'Ok')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_OK', 'The websocket works normally.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(0)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('CONNECTING', 'Connecting')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</OText>
+              </View>
+            </StatusItemWrapper>
+            <StatusItemWrapper>
+              <MaterialIcon
+                name='circle'
+                size={12}
+                color={getStatusColor(2)}
+                style={{ marginTop: 10, marginHorizontal: 8 }}
+              />
+              <View style={{ marginLeft: 16 }}>
+                <StatusText>{t('DISCONNECTED', 'Disconnected')}</StatusText>
+                <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</OText>
+              </View>
+            </StatusItemWrapper>
+
+            <View style={{ flexDirection: 'row', marginTop: 50 }}>
+              <OButton
+                onClick={() => setOpenModal(false)}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.primary }}
+                style={{ borderRadius: 8, height: 48 }}
+                text={t('CLOSE', 'Close')}
+              />
+               <OButton
+                onClick={() => RNRestart.Restart()}
+                borderColor={theme.colors.primary}
+                textStyle={{ color: theme.colors.white }}
+                style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
+                text={t('UPDATE', 'Update')}
+              />
+            </View>
+          </View>
+        </ModalContainer>
+      </OModal>
+    </Container>
+  )
+}
+
+export const WebsocketStatus = (props: any) => {
+  const socketProps = {
+    ...props,
+    UIComponent: SocketStatusUI
+  }
+  return <WebsocketStatusController {...socketProps} />
+}

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

@@ -0,0 +1,28 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+export const ModalContainer = styled.ScrollView`
+  padding: 0px 30px;
+`
+export const ModalTitle = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  color: ${(props: any) => props.theme.colors.textGray};
+  margin-bottom: 10px;
+`
+export const StatusItemWrapper = styled.View`
+  flex-direction: row;
+  margin-bottom: 16px;
+`
+export const StatusText = styled.Text`
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: ${(props: any) => props.theme.colors.textGray};
+`

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

@@ -13,7 +13,7 @@ const HeaderTitle = (props: any) => {
       weight={Platform.OS === 'ios' ? '600' : 'bold'}
       style={style ?? {
         marginTop: Platform.OS === 'android' ? 50 : 30,
-        paddingHorizontal: props.ph ?? 40,
+        paddingHorizontal: props.ph ?? 20,
         textTransform: 'capitalize',
         color: props.titleColor || theme.colors.textNormal,
       }}

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

@@ -27,9 +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;
-  `}
+	${(props: any) => props?.borderRadius && css`
+      border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
+  	`}
 `
 const StyledButtonDisabled = styled(StyledButton)`
 	background-color: ${(props: any) => props.theme.colors.disabled};
@@ -119,7 +119,7 @@ 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, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius } : { ...props.style, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
+			<StyledButton style={{ ...props.style, backgroundColor: theme?.general?.components?.buttons?.color ?? props.bgColor, borderColor: theme?.general?.components?.buttons?.color ?? props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
@@ -127,7 +127,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
-					<StyledText style={props.textStyle}>{props.text}</StyledText>
+					<StyledText style={{ ...props.textStyle, color: theme?.general?.components?.buttons?.buttonTextColor ?? props?.textStyle?.color }}>{props.text}</StyledText>
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />

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

@@ -3,7 +3,7 @@ import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle }
 import styled from 'styled-components/native';
 import OIcon from './OIcon';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import { useTheme, css } from 'styled-components/native';
+import { useTheme } from 'styled-components/native';
 
 const Input = styled.TextInput`
   flex-grow: 1;
@@ -53,9 +53,6 @@ const Wrapper = styled.Pressable`
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	${(props: any) => props.theme?.general?.components?.inputs?.borderRadius && css`
-      border-radius: ${props?.theme?.general?.components?.inputs?.borderRadius};
-  `}
 `;
 
 const OInput = (props: Props): React.ReactElement => {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
-import { OIcon } from '.';
-import styled, { useTheme } from 'styled-components/native';
+import styled from 'styled-components/native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 interface Props {
 	open?: boolean;
@@ -50,17 +50,15 @@ const OModal = (props: Props): React.ReactElement => {
 		isAvoidKeyBoardView
 	} = props
 
-	const theme = useTheme();
-
 	const renderSafeAreaView = () => (
 		<SafeAreaView style={styles.container}>
 			{!entireModal ? (
 				<View style={styles.centeredView}>
 					<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-						<TouchableOpacity style={{...styles.wrapperIcon, ...styleContainerCloseButton}} onPress={onClose}>
-							<OIcon
-								src={theme.images.general.close}
-								width={16}
+						<TouchableOpacity style={{ ...styles.wrapperIcon, ...styleContainerCloseButton }} onPress={onClose}>
+							<AntDesignIcon
+								name='close'
+								size={26}
 								style={isNotDecoration && (styleCloseButton || styles.cancelBtn)}
 							/>
 						</TouchableOpacity>
@@ -73,9 +71,9 @@ const OModal = (props: Props): React.ReactElement => {
 					{!customClose && (
 						<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
 							<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
-								<OIcon
-									src={theme.images.general.close}
-									width={16}
+								<AntDesignIcon
+									name='close'
+									size={26}
 									style={styleCloseButton || styles.cancelBtn}
 								/>
 							</TouchableOpacity>
@@ -93,7 +91,7 @@ const OModal = (props: Props): React.ReactElement => {
 			animationType="slide"
 			transparent={isTransparent}
 			visible={open}
-			onRequestClose={() =>  onClose && onClose()}
+			onRequestClose={() => onClose && onClose()}
 			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
 		>
 			{isAvoidKeyBoardView ? (
@@ -125,8 +123,8 @@ const styles = StyleSheet.create({
 		flex: 1,
 		justifyContent: 'space-between',
 		alignItems: 'flex-start',
-		paddingLeft: 40,
-		paddingRight: 40,
+		paddingLeft: 20,
+		paddingRight: 20,
 		marginBottom: 40
 	},
 	cancelBtn: {