ordering-ui-react-native 0.15.62 → 0.15.64-release

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

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import FastImage from 'react-native-fast-image'
 import {
   WalletList,
   useLanguage,
@@ -15,7 +16,10 @@ import {
   TransactionsWrapper,
   OTabs,
   OTab,
-  SectionContent
+  SectionContent,
+  LoyaltyContent,
+  LoyaltyWrapp,
+  LoyaltyImg
 } from './styles'
 
 import NavBar from '../NavBar'
@@ -27,10 +31,14 @@ const WalletsUI = (props: any) => {
   const {
     navigation,
     walletList,
+    userLoyaltyLevel,
     transactionsList,
     setWalletSelected,
     isWalletCashEnabled,
-    isWalletPointsEnabled
+    isWalletPointsEnabled,
+    getWallets,
+    refreshWallets,
+    setRefreshWallets
   } = props
 
   const [, t] = useLanguage()
@@ -38,12 +46,27 @@ const WalletsUI = (props: any) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
+  const styles = StyleSheet.create({
+    logoStyle: {
+      width: 120,
+      height: 120,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+  });
+
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
 
-  const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
+  const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
   const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
 
+  const loyaltyLevel = Object.keys(userLoyaltyLevel.loyaltyLevel ?? {}).length > 0 && userLoyaltyLevel.loyaltyLevel
+
   const walletName: any = {
     cash: {
       name: t('CASH_WALLET', 'Cash Wallet'),
@@ -74,6 +97,13 @@ const WalletsUI = (props: any) => {
     }
   }, [configs])
 
+  useEffect(() => {
+    if(refreshWallets){
+      getWallets()
+      setRefreshWallets && setRefreshWallets(false)
+    }
+  }, [refreshWallets])
+
   return (
     <Container>
       <NavBar
@@ -86,18 +116,22 @@ const WalletsUI = (props: any) => {
       />
 
       {!walletList.loading &&
+        !userLoyaltyLevel.loading &&
         !walletList.error &&
         walletList.wallets?.length > 0 &&
       (
         <>
-          <OTabs>
+          <OTabs
+            horizontal
+            showsHorizontalScrollIndicator={false}
+          >
             {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
               <Pressable
                 key={wallet.id}
                 onPress={() => handleChangeTab(wallet)}
               >
-                <OTab>
-                  <OText size={18} color={tabSelected === wallet.type ? theme.colors.primary : theme.colors.disabled}>
+                <OTab isSelected={tabSelected === wallet.type}>
+                  <OText size={18}>
                     {walletName[wallet.type]?.name}
                   </OText>
                 </OTab>
@@ -106,6 +140,39 @@ const WalletsUI = (props: any) => {
           </OTabs>
 
           <SectionContent>
+            {!!loyaltyLevel && tabSelected === 'credit_point' && (
+              <LoyaltyContent>
+                <LoyaltyWrapp>
+                  <OText size={20}>
+                    {`${t('LOYALTY_LEVEL_TITLE', 'Your level is')}:`}
+                  </OText>
+                  {loyaltyLevel.image ? (
+                    <FastImage
+                      style={styles.logoStyle}
+                      source={{
+                        uri: loyaltyLevel.image,
+                        priority: FastImage.priority.high,
+                        cache:FastImage.cacheControl.web
+                      }}
+                      resizeMode={FastImage.resizeMode.contain}
+                    />
+                  ) : (
+                    <LoyaltyImg
+                      source={theme.images.dummies.loyaltyLevel}
+                      resizeMode='contain'
+                    />
+                  )}
+                  <OText
+                    size={22}
+                    weight='bold'
+                    style={{ textTransform: 'uppercase' }}
+                    color={theme.colors.primary}
+                  >
+                    {loyaltyLevel.name}
+                  </OText>
+                </LoyaltyWrapp>
+              </LoyaltyContent>
+            )}
             <BalanceElement>
               <OText size={20} style={{fontWeight: '600'}}>
                 {currentWalletSelected?.type === 'cash'
@@ -172,7 +239,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {walletList?.loading && (
+      {(walletList?.loading || userLoyaltyLevel.loading) && (
         <>
           <View>
             <Placeholder Animation={Fade}>
@@ -196,7 +263,7 @@ const WalletsUI = (props: any) => {
         </>
       )}
 
-      {!walletList?.loading && (walletList?.error || !walletList?.wallets?.length) && (
+      {!walletList?.loading && !userLoyaltyLevel.loading && (walletList?.error || !walletList?.wallets?.length) && (
         <NotFoundSource
           content={walletList?.error
             ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')

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

@@ -41,3 +41,24 @@ export const OTabs = styled.View`
 export const OTab = styled.View`
   padding-horizontal: 10px;
 `;
+
+export const LoyaltyContent = styled.View`
+  width: 100%;
+  margin-bottom: 20px;
+`
+
+export const LoyaltyWrapp = styled.View`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+export const LoyaltyImg = styled.ImageBackground`
+  position: relative;
+  height: 150px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`

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

@@ -1,33 +1,43 @@
 import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
+import { Modal, TouchableWithoutFeedback, TouchableOpacity, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { OIcon } from '.';
 const deviceHeight = Dimensions.get('window').height
 
 interface Props {
 	open: boolean;
+	transparent?: boolean;
 	title?: string;
 	children?: any;
 	onClose?: any;
 	isStatusBar?: boolean;
+	bottomContainerStyle?: any;
+	titleStyle?: any;
+	closeIcon?: any;
 }
 const OBottomPopup = (props: Props) => {
 	const {
 		open,
+		transparent,
 		title,
 		onClose,
 		children,
-		isStatusBar
+		isStatusBar,
+		titleStyle,
+		bottomContainerStyle,
+		closeIcon
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
+
 	return (
 		<Modal
 			animationType='slide'
-			transparent={false}
+			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}
 			presentationStyle={'fullScreen'}
 		>
-		  {isStatusBar && <StatusBar translucent={false} />}
+			{isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>
 				<TouchableWithoutFeedback
 					style={styles.touchableOutsideStyle}
@@ -35,13 +45,24 @@ const OBottomPopup = (props: Props) => {
 				>
 					<View style={styles.touchableOutsideStyle} />
 				</TouchableWithoutFeedback>
-				<View style={styles.bottomContainer}>
+				<View style={{ ...styles.bottomContainer, ...bottomContainerStyle }}>
 					<View style={{ paddingTop: top, paddingBottom: bottom }}>
-						{title != '' && (
-							<Text style={styles.titleStyle}>
-								{title}
-							</Text>
-						)}
+						<View style={styles.modalTitleStyle}>
+							{closeIcon && (
+								<TouchableOpacity onPress={() => onClose()} style={styles.closeIconStyle}>
+									<OIcon
+										src={closeIcon}
+										width={20}
+										height={20}
+									/>
+								</TouchableOpacity>
+							)}
+							{!!title && (
+								<Text style={{ ...styles.titleStyle, ...titleStyle }}>
+									{title}
+								</Text>
+							)}
+						</View>
 						{children}
 					</View>
 				</View>
@@ -54,7 +75,7 @@ const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		backgroundColor: '#000000AA',
-		justifyContent: 'flex-end',
+		justifyContent: 'flex-end'
 	},
 	touchableOutsideStyle: {
 		flex: 1,
@@ -68,8 +89,18 @@ const styles = StyleSheet.create({
 	},
 	titleStyle: {
 		fontSize: 20,
-		fontWeight: 'bold',
-		marginVertical: 15
+		fontWeight: 'bold'
+	},
+	closeIconStyle: {
+		position: 'absolute',
+		left: 25,
+		top: 25,
+		zIndex: 100
+	},
+	modalTitleStyle: {
+		position: 'relative',
+		paddingHorizontal: 10,
+		paddingVertical: 20
 	}
 })
 

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

@@ -78,6 +78,7 @@ interface Props {
 	borderColor?: string;
 	loadingStyle?: ViewStyle;
 	showNextIcon?: boolean;
+	isDisabledWithSameStyles?: boolean;
 }
 
 const OButton = (props: Props): React.ReactElement => {
@@ -110,6 +111,7 @@ const OButton = (props: Props): React.ReactElement => {
 			activeOpacity={props.activeOpacity}
 			onPress={props.onClick}
 			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}>
 				{props.imgLeftSrc ? (

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

@@ -56,7 +56,7 @@ const Wrapper = styled.Pressable`
 const OInput = (props: Props): React.ReactElement => {
 	return (
 		<Wrapper
-			onPress={() => {props.forwardRef?.current?.focus?.(); props.onPress && props.onPress()}}
+			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
 			style={{
 				backgroundColor: props.bgColor,
 				borderColor: props.borderColor,
@@ -75,6 +75,7 @@ const OInput = (props: Props): React.ReactElement => {
 				<MaterialIcon name={props?.vertorIcon} size={20} color={props?.vectorIconColor} style={{ marginHorizontal: 10 }} />
 			)}
 			<Input
+				autoFocus={props?.autoFocus}
 				name={props.name}
 				secureTextEntry={props.isSecured}
 				onChangeText={(txt: any) => props.name ? props.onChange({ target: { name: props.name, value: txt } }) : props.onChange(txt)}
@@ -90,7 +91,7 @@ const OInput = (props: Props): React.ReactElement => {
 				returnKeyType={props.returnKeyType}
 				onSubmitEditing={props.onSubmitEditing}
 				blurOnSubmit={props.blurOnSubmit}
-				ref={(e : any) => {
+				ref={(e: any) => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={props?.inputStyle}

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

@@ -21,6 +21,7 @@ interface Props {
 	isNotDecoration?: boolean;
 	styleCloseButton?: any,
 	isAvoidKeyBoardView?: boolean;
+	styleContainerCloseButton?: any;
 }
 const KeyboardView = styled.KeyboardAvoidingView`
   flex-grow: 1;
@@ -45,6 +46,7 @@ const OModal = (props: Props): React.ReactElement => {
 		isNotDecoration,
 		style,
 		styleCloseButton,
+		styleContainerCloseButton,
 		isAvoidKeyBoardView
 	} = props
 
@@ -55,7 +57,7 @@ const OModal = (props: Props): React.ReactElement => {
 			{!entireModal ? (
 				<View style={styles.centeredView}>
 					<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-						<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
+						<TouchableOpacity style={{...styles.wrapperIcon, ...styleContainerCloseButton}} onPress={onClose}>
 							<OIcon
 								src={theme.images.general.close}
 								width={16}
@@ -91,7 +93,7 @@ const OModal = (props: Props): React.ReactElement => {
 			animationType="slide"
 			transparent={isTransparent}
 			visible={open}
-			onRequestClose={() => onClose()}
+			onRequestClose={() =>  onClose && onClose()}
 			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
 		>
 			{isAvoidKeyBoardView ? (

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

@@ -19,7 +19,11 @@ export const Container = styled.View`
 
 export const FloatingBottomContainer = (props: any) => {
   return (
-    <Container style={{ width: windowWidth }}>
+    <Container style={{
+      width: windowWidth,
+      borderTopWidth: props?.borderTopWidth ?? 1,
+      borderRadius: props?.borderRadius ?? 0
+    }}>
       {props.children}
     </Container>
   )