ordering-ui-react-native 0.16.89 → 0.16.90-release

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, StyleSheet, View, ScrollView } from 'react-native';
+import { Pressable, StyleSheet, View, ScrollView, TouchableOpacity } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import FastImage from 'react-native-fast-image'
@@ -9,6 +9,7 @@ import {
   useUtils,
   useConfig
 } from 'ordering-components/native'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container,
@@ -23,7 +24,6 @@ import {
   WalletTransactionsWrapper
 } from './styles'
 
-import NavBar from '../NavBar'
 import { OButton, OIcon, OText, OModal } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import { WalletTransactions } from '../WalletTransactions'
@@ -47,8 +47,6 @@ const WalletsUI = (props: any) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
-  console.log(theme)
-
   const styles = StyleSheet.create({
     logoStyle: {
       width: 120,
@@ -64,7 +62,8 @@ const WalletsUI = (props: any) => {
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
-	const isChewLayout = theme?.wallets_view?.components?.layout?.type === 'original'
+  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)
 
@@ -79,7 +78,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
     }
@@ -103,7 +102,7 @@ const WalletsUI = (props: any) => {
   }, [configs])
 
   useEffect(() => {
-    if(refreshWallets){
+    if (refreshWallets) {
       getWallets()
       setRefreshWallets && setRefreshWallets(false)
     }
@@ -113,15 +112,7 @@ const WalletsUI = (props: any) => {
     <>
       <Container>
         <Header>
-          <NavBar
-            title={isChewLayout ? '' : t('WALLETS', 'Wallets')}
-            titleAlign={'center'}
-            onActionLeft={goToBack}
-            showCall={false}
-            paddingTop={10}
-            btnStyle={{ paddingLeft: 0 }}
-            style={{ flex: 1 }}
-          />
+        <OText size={24} style={{ marginTop: 30 }}>{t('WALLETS', 'Wallets')}</OText>
           {isChewLayout && (
             <OButton
               text={t('WALLET_HISTORY', 'Wallet history')}
@@ -139,83 +130,92 @@ const WalletsUI = (props: any) => {
           !userLoyaltyLevel.loading &&
           !walletList.error &&
           walletList.wallets?.length > 0 &&
-        (
-          <>
-            <OTabs
-              horizontal
-              showsHorizontalScrollIndicator={false}
-            >
-              {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
-                <Pressable
-                  key={wallet.id}
-                  onPress={() => handleChangeTab(wallet)}
-                >
-                  <OTab isSelected={tabSelected === wallet.type}>
-                    <OText size={18}>
-                      {walletName[wallet.type]?.name}
-                    </OText>
-                  </OTab>
-                </Pressable>
-              ))}
-            </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}
+          (
+            <>
+              <OTabs
+                horizontal
+                showsHorizontalScrollIndicator={false}
+              >
+                {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
+                  <TouchableOpacity
+                    key={wallet.id}
+                    onPress={() => handleChangeTab(wallet)}
+                  >
+                    <OTab
+                      isSelected={tabSelected === wallet.type}
+                      style={{
+                        borderBottomWidth: 1,
+                        borderBottomColor:
+                          tabSelected === wallet.type
+                            ? theme.colors.textNormal
+                            : theme.colors.border
+                      }}
                     >
-                      {loyaltyLevel.name}
-                    </OText>
-                  </LoyaltyWrapp>
-                </LoyaltyContent>
-              )}
-              <BalanceElement>
-                <OText size={20} style={{fontWeight: '600'}}>
-                  {currentWalletSelected?.type === 'cash'
-                    ? parsePrice(currentWalletSelected?.balance)
-                    : currentWalletSelected?.balance
-                  }
-                </OText>
-                <OText style={{ paddingLeft: 5 }}>
-                  {currentWalletSelected?.type === 'cash'
-                    ? configs?.stripe_currency?.value
-                    : t('POINTS', 'Points')}
-                </OText>
-              </BalanceElement>
+                      <OText>
+                        {walletName[wallet.type]?.name}
+                      </OText>
+                    </OTab>
+                  </TouchableOpacity>
+                ))}
+              </OTabs>
 
-              {!isChewLayout && (
-                <WalletTransactions
-                  transactionsList={transactionsList}
-                  currentWalletSelected={currentWalletSelected}
-                />
-              )}
-            </SectionContent>
-          </>
-        )}
+              <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'
+                      ? parsePrice(currentWalletSelected?.balance)
+                      : currentWalletSelected?.balance
+                    }
+                  </OText>
+                  <OText style={{ paddingLeft: 5 }}>
+                    {currentWalletSelected?.type === 'cash'
+                      ? configs?.stripe_currency?.value
+                      : t('POINTS', 'Points')}
+                  </OText>
+                </BalanceElement>
+
+                {!isChewLayout && (
+                  <WalletTransactions
+                    transactionsList={transactionsList}
+                    currentWalletSelected={currentWalletSelected}
+                  />
+                )}
+              </SectionContent>
+            </>
+          )}
 
         {(walletList?.loading || userLoyaltyLevel.loading) && (
           <>
@@ -260,8 +260,6 @@ const WalletsUI = (props: any) => {
         <ScrollView>
           <WalletTransactionsWrapper>
             <OButton
-              imgLeftSrc={theme.images.general.arrow_left}
-              imgLeftStyle={{ width: 18 }}
               imgRightSrc={null}
               style={{
                 borderWidth: 0,
@@ -273,6 +271,11 @@ const WalletsUI = (props: any) => {
                 paddingRight: 0
               }}
               onClick={() => setOpenHistory(false)}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26
+              }}
             />
             <WalletTransactions
               transactionsList={transactionsList}

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

@@ -34,10 +34,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

@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import { StyleSheet, ViewStyle } from 'react-native'
+import styled from 'styled-components/native'
+
+const CardContainerTouchable = styled.TouchableOpacity``
+
+interface Props {
+    children: React.ReactChildren | Element,
+    style?: Array<ViewStyle> | any,
+    onClick: any
+}
+
+export const CardAnimation = (props: Props) => {
+    const {
+        children,
+        onClick,
+        style
+    } = props
+    const [isPressed, setIsPressed] = useState(false)
+    const styles = StyleSheet.create({
+        cardAnimation: {
+            elevation: isPressed ? 2 : 0,
+            shadowColor: '#888',
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 0,
+            shadowOpacity: isPressed ? 0.8 : 0,
+            borderRadius: 12,
+        }
+    })
+
+    const styleProvided = style || []
+    return (
+        <CardContainerTouchable
+            onPress={onClick}
+            activeOpacity={0.8}
+            delayPressIn={20}
+            onPressIn={() => setIsPressed(true)}
+            onPressOut={() => setIsPressed(false)}
+            style={[
+                ...styleProvided,
+                styles.cardAnimation
+            ]}
+        >
+            {children}
+        </CardContainerTouchable>
+    )
+}

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>

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

@@ -26,7 +26,14 @@ const OImage = (props: Props): React.ReactElement => {
 	return (
 		<Wrapper style={{ borderRadius: props.style?.borderRadius, overflow: 'hidden', marginHorizontal: props.style?.marginHorizontal }}>
 			<SImage
-				source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy}
+				source={
+					props.src
+						? props.src
+						: props.url
+							? typeof props.url === 'number'
+								? props.url
+								: { uri: props.url }
+							: props.dummy}
 				style={{
 					tintColor: props.color,
 					flex: props.isWrap ? 1 : 0,

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

@@ -3,6 +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 } from 'styled-components/native';
 
 const Input = styled.TextInput`
   flex-grow: 1;
@@ -39,6 +40,7 @@ interface Props extends TextInputProps {
 	inputStyle?: TextStyle;
 	wrapperRef?: any;
 	onPress?: any;
+	isFocusHighlight?: boolean
 }
 
 const Wrapper = styled.Pressable`
@@ -54,12 +56,16 @@ const Wrapper = styled.Pressable`
 `;
 
 const OInput = (props: Props): React.ReactElement => {
+	const theme = useTheme();
+	const [inputFocused, setInputFocused] = React.useState(false)
 	return (
 		<Wrapper
 			onPress={() => { props.forwardRef?.current?.focus?.(); props.onPress && props.onPress() }}
 			style={{
 				backgroundColor: props.bgColor,
-				borderColor: props.borderColor,
+				borderColor: !props.isFocusHighlight
+					? props.borderColor
+					: inputFocused ? theme.colors.primary : theme.colors.border,
 				...props.style,
 			}}>
 			{props.icon ? (
@@ -95,6 +101,8 @@ const OInput = (props: Props): React.ReactElement => {
 					props.forwardRef && (props.forwardRef.current = e)
 				}}
 				style={props?.inputStyle}
+				onFocus={() => setInputFocused(true)}
+				onBlur={() => setInputFocused(false)}
 			/>
 			{props.iconRight && (
 				<OIcon
@@ -114,6 +122,7 @@ OInput.defaultProps = {
 	iconColor: '#959595',
 	bgColor: 'white',
 	borderColor: 'white',
+	isFocusHighlight: false
 };
 
 export default OInput;

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

@@ -52,7 +52,7 @@ const OModal = (props: Props): React.ReactElement => {
 
 	const theme = useTheme();
 
-	const RenderSafeAreaView = () => (
+	const renderSafeAreaView = () => (
 		<SafeAreaView style={styles.container}>
 			{!entireModal ? (
 				<View style={styles.centeredView}>
@@ -101,10 +101,10 @@ const OModal = (props: Props): React.ReactElement => {
 					enabled
 					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
 				>
-					<RenderSafeAreaView/>
+					{renderSafeAreaView()}
 				</KeyboardView>
 			) : (
-				<RenderSafeAreaView/>
+				renderSafeAreaView()
 			)}
 		</Modal>
 	);

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import styled, { css } from 'styled-components/native';
-import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import styled, { css, useTheme } from 'styled-components/native';
+import { Platform, View } from 'react-native';
 
 const ContainerStyled = styled.ScrollView`
   flex: 1;
@@ -10,17 +11,20 @@ const ContainerStyled = styled.ScrollView`
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
 
-const SafeAreaStyled = styled.SafeAreaView`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
-
 export const Container = (props: any) => {
+  const theme = useTheme()
+  const insets = useSafeAreaInsets()
   return (
-    <SafeAreaStyled>
+    <View
+      style={{
+        flex: 1,
+        paddingTop: props.pt ?? insets.top,
+        backgroundColor: theme.colors.backgroundPage
+      }}
+    >
       <ContainerStyled {...props} ref={props?.forwardRef} keyboardShouldPersistTaps='handled' style={{...props.style}}>
         {props.children}
       </ContainerStyled>
-    </SafeAreaStyled>
+    </View>
   )
 }