ordering-ui-react-native 0.18.0 → 0.18.1-release

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

@@ -288,38 +288,37 @@ const ProfileUI = (props: ProfileParams) => {
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
 				/>
-				<KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : 'height'} enabled style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
-					<CenterView>
-						<View style={styles.photo}>
-							{user?.photo ? (
-								<FastImage
-									style={{ height: 60, 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}
-						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

@@ -195,38 +195,39 @@ const UserVerificationUI = (props: any) => {
   }
 
   useEffect(() => {
-    let _timer = TIME_COUNTDOWN - 1;
-    let minutes = 0;
-    let seconds = 0;
-    const interval = setInterval(() => {
-      minutes = _timer / 60;
-      seconds = _timer % 60;
-
-      minutes = minutes < 10 ? 0 + minutes : minutes;
-      seconds = seconds < 10 ? 0 + seconds : seconds;
-
-      const formatMinutes = parseInt(minutes.toString()) < 10
-        ? `0${parseInt(minutes.toString())}`
-        : parseInt(minutes.toString());
-
-      const formatseconds = parseInt(seconds.toString()) < 10
-        ? `0${parseInt(seconds.toString())}`
-        : parseInt(seconds.toString());
-
-      setTimer(`${formatMinutes}:${formatseconds}`);
-
-      if (--_timer < 0) {
-        clearInterval(interval);
-      }
-
-      if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
-        setIsSendCodeAgain(false)
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval)
-  }, [isSendCodeAgain])
+    if (verificationState.phone) {
+      let _timer = TIME_COUNTDOWN - 1;
+      let minutes = 0;
+      let seconds = 0;
+      const interval = setInterval(() => {
+        minutes = _timer / 60;
+        seconds = _timer % 60;
+
+        minutes = minutes < 10 ? 0 + minutes : minutes;
+        seconds = seconds < 10 ? 0 + seconds : seconds;
+
+        const formatMinutes = parseInt(minutes.toString()) < 10
+          ? `0${parseInt(minutes.toString())}`
+          : parseInt(minutes.toString());
+
+        const formatseconds = parseInt(seconds.toString()) < 10
+          ? `0${parseInt(seconds.toString())}`
+          : parseInt(seconds.toString());
+
+        setTimer(`${formatMinutes}:${formatseconds}`);
+
+        if (--_timer < 0) {
+          clearInterval(interval);
+        }
+
+        if (timer === `${TIME_COUNTDOWN / 60}:00` && isSendCodeAgain) {
+          setIsSendCodeAgain(false)
+          clearInterval(interval);
+        }
+      }, 1000);
+      return () => clearInterval(interval)
+    }
+  }, [isSendCodeAgain, verificationState.phone])
 
   useEffect(() => {
     if (otpState?.length === CODE_LENGTH) {
@@ -292,7 +293,7 @@ const UserVerificationUI = (props: any) => {
 
   useEffect(() => {
     setupUserPhoneNumber()
-  }, [user])
+  }, [user?.cellphone, user?.country_phone_code])
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
@@ -401,6 +402,7 @@ const UserVerificationUI = (props: any) => {
                       textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
                       noDropIcon
                       isDisabled
+                      updateStateWithSubmit
                     />
                   </InputWrapper>
                 </>
@@ -460,28 +462,31 @@ const UserVerificationUI = (props: any) => {
           )}
 
         </Container>
-        <ButtonsActions>
-          <View style={{ width: '100%' }}>
-            <OButton
-              onClick={(verificationState.email || verificationState.phone)
-                ? () => setVerificationState({ email: false, phone: false })
-                : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
-              }
-              text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
-              bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-              borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
-              textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
-              imgRightSrc={null}
-              isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
-              style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
-            />
-          </View>
-        </ButtonsActions>
+        {!!phoneState?.cellphone && (
+          <ButtonsActions>
+            <View style={{ width: '100%' }}>
+              <OButton
+                onClick={(verificationState.email || verificationState.phone)
+                  ? () => setVerificationState({ email: false, phone: false })
+                  : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
+                }
+                text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
+                bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+                borderColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}
+                textStyle={{ color: (verificationState.email || verificationState.phone) ? 'black' : 'white' }}
+                imgRightSrc={null}
+                isLoading={verifyEmailState?.loadingSendCode || verifyEmailState?.loadingCheckCode || verifyPhoneState?.loadingSendCode || verifyPhoneState?.loadingCheckCode}
+                style={(verificationState.email || verificationState.phone) ? style.btnStyle : { borderRadius: 7.6 }}
+              />
+            </View>
+          </ButtonsActions>
+        )}
         <View style={{ paddingHorizontal: 20, paddingBottom: 80 }}>
           <UserDetails
             user={user}
             isEdit
             isVerifiedPhone
+            dontToggleEditMode
           />
         </View>
       </ScrollView>

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/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

@@ -3,6 +3,7 @@ import { Pressable, StyleSheet, View, ScrollView, TouchableOpacity, Platform } f
 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,
@@ -72,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)
 
@@ -121,58 +122,38 @@ const WalletsUI = (props: any) => {
     <>
       <Container>
         <Header>
-        <View style={{
-          ...{
-            width: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        }}>
-            {(!props.hideBackBtn || !hideWalletsTheme) && !isChewLayout && (
+          <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 }}
+              isVertical={!hideWalletsTheme}
+              hideArrowLeft={!hideWalletsTheme}
+            />
+            {isChewLayout && !openHistory && (
               <OButton
-                imgLeftStyle={{ width: 18 }}
+                text={t('WALLET_HISTORY', 'Wallet history')}
+                bgColor={theme.colors.white}
+                borderColor={theme.colors.lightGray}
                 imgRightSrc={null}
-                style={{
-                  borderWidth: 0,
-                  width: 26,
-                  height: 26,
-                  backgroundColor: '#FFF',
-                  borderColor: '#FFF',
-                  shadowColor: '#FFF',
-                  paddingLeft: 0,
-                  paddingRight: 0,
-                  marginTop: 30,
-                }}
-                onClick={goToBack}
-                icon={AntDesignIcon}
-                iconProps={{
-                  name: 'arrowleft',
-                  size: 26
-                }}
+                textStyle={{ fontSize: 12, color: theme.colors.disabled }}
+                onClick={() => setOpenHistory(true)}
+                style={{ borderRadius: 8, height: 40, width: !hideWalletsTheme ? '100%' : 150, marginTop: !hideWalletsTheme ? 10 : 0 }}
               />
             )}
-            <OText
-              size={20}
-              style={{
-                marginTop: 30,
-                marginLeft: (!props.hideBackBtn || !hideWalletsTheme) && !isChewLayout ? 10 : 0,
-                color: theme.colors.textNormal,
-              }}
-              weight={Platform.OS === 'ios' ? '600' : 'bold'}
-            >{t('WALLETS', 'Wallets')}</OText>
-        </View>
-          {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>
         </Header>
 
         {!walletList.loading &&
@@ -213,9 +194,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={{
@@ -230,7 +211,7 @@ const WalletsUI = (props: any) => {
                           source={theme.images.dummies.loyaltyLevel}
                           resizeMode='contain'
                         />
-                      )} */}
+                      )}
                       <OText
                         size={22}
                         weight='bold'
@@ -256,9 +237,13 @@ const WalletsUI = (props: any) => {
                   </OText>
                 </BalanceElement>
 
-                <View style={styles.dividerStyle} />
-                <GiftCardUI navigation={navigation} />
-                <View style={styles.dividerStyle} />
+                {currentWalletSelected?.type === 'cash' && (
+                  <>
+                    <View style={styles.dividerStyle} />
+                    <GiftCardUI navigation={navigation} />
+                    <View style={styles.dividerStyle} />
+                  </>
+                )}
 
                 {!isChewLayout && (
                   <WalletTransactions
@@ -313,15 +298,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%;

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,8 +27,8 @@ 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};
+	${(props: any) => props?.theme?.general?.components?.buttons?.borderRadius && css`
+      border-radius: ${props?.theme?.general?.components?.buttons?.borderRadius}px;
   `}
 `
 const StyledButtonDisabled = styled(StyledButton)`
@@ -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 } : 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}

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 => {
@@ -104,7 +101,9 @@ const OInput = (props: Props): React.ReactElement => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={{
-					color: theme?.general?.components?.inputs?.color,
+          ...(theme?.general?.components?.inputs?.color && {
+            color: theme?.general?.components?.inputs?.color
+          }),
 					...props?.inputStyle
 				}}
 				onFocus={() => setInputFocused(true)}

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 = () => (
+	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 ? (
@@ -101,10 +99,10 @@ const OModal = (props: Props): React.ReactElement => {
 					enabled
 					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
 				>
-					<RenderSafeAreaView/>
+					{renderSafeAreaView()}
 				</KeyboardView>
 			) : (
-				<RenderSafeAreaView/>
+				renderSafeAreaView()
 			)}
 		</Modal>
 	);
@@ -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: {

package/themes/original/src/layouts/Container.tsx

@@ -6,7 +6,7 @@ import { Platform, View } from 'react-native';
 const ContainerStyled = styled.ScrollView`
   flex: 1;
   ${(props: any) => !props.noPadding && css`
-    padding: ${Platform.OS === 'ios' ? '0px 40px' : '20px 40px'};
+    padding: ${Platform.OS === 'ios' ? '0px 20px' : '20px 20px'};
   `}
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;