ordering-ui-react-native 0.16.24 → 0.16.25-release

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

@@ -0,0 +1,76 @@
+import React from 'react'
+import { View } from 'react-native'
+import { useLanguage } from 'ordering-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native'
+import { OText } from '../shared';
+import { WalletTransactionItem } from '../WalletTransactionItem'
+import { NotFoundSource } from '../NotFoundSource';
+
+import {
+  Container,
+  TransactionsWrapper
+} from './styles'
+
+export const WalletTransactions = (props: any) => {
+  const {
+    transactionsList,
+    currentWalletSelected
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  return (
+    <Container>
+      <View style={{ width: '100%', paddingHorizontal: 1, paddingBottom: 40 }}>
+        {!transactionsList?.loading &&
+          !transactionsList?.error &&
+          transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 &&
+        (
+          <>
+            <OText style={{fontSize: 20, color: theme.colors.textNormal, marginBottom: 30}}>
+              {t('TRANSACTIONS_HISTORY', 'Transactions history')}
+            </OText>
+            <TransactionsWrapper>
+              {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction: any, i: number) =>(
+                <WalletTransactionItem
+                  idx={i}
+                  type={currentWalletSelected?.type}
+                  key={transaction.id}
+                  item={transaction}
+                  withFormatPrice={currentWalletSelected?.type === 'cash'}
+                />
+              ))}
+            </TransactionsWrapper>
+          </>
+        )}
+
+        {(transactionsList?.loading || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) && (
+          <View>
+            {[...Array(4).keys()].map(i => (
+              <View style={{ marginBottom: 10 }} key={i}>
+                <Placeholder Animation={Fade}>
+                  <PlaceholderLine width={100} height={100} style={{ marginBottom: 0, borderRadius: 8 }} />
+                </Placeholder>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {!transactionsList?.loading &&
+          !(transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) &&
+          (transactionsList?.error ||
+            !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
+        (
+          <NotFoundSource
+            content={transactionsList?.error
+              ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
+              : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
+            }
+          />
+        )}
+      </View>
+    </Container>
+  )
+}

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+
+export const TransactionsWrapper = styled.View`
+  display: flex;
+  flex-direction: column;
+  border-left-width: 2px;
+  border-left-color: ${(props: any) => props.theme.colors.disabled};
+`

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View, ScrollView } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import FastImage from 'react-native-fast-image'
@@ -9,23 +9,25 @@ import {
   useUtils,
   useConfig
 } from 'ordering-components/native'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Container,
+  Header,
   BalanceElement,
-  TransactionsWrapper,
   OTabs,
   OTab,
   SectionContent,
   LoyaltyContent,
   LoyaltyWrapp,
-  LoyaltyImg
+  LoyaltyImg,
+  WalletTransactionsWrapper
 } from './styles'
 
 import NavBar from '../NavBar'
-import { OText } from '../shared';
+import { OButton, OIcon, OText, OModal } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
-import { WalletTransactionItem } from '../WalletTransactionItem'
+import { WalletTransactions } from '../WalletTransactions'
 
 const WalletsUI = (props: any) => {
   const {
@@ -60,6 +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 === 'chew'
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
@@ -98,180 +102,188 @@ const WalletsUI = (props: any) => {
   }, [configs])
 
   useEffect(() => {
-    if(refreshWallets){
+    if (refreshWallets) {
       getWallets()
       setRefreshWallets && setRefreshWallets(false)
     }
   }, [refreshWallets])
 
   return (
-    <Container>
-      <NavBar
-        title={t('WALLETS', 'Wallets')}
-        titleAlign={'center'}
-        onActionLeft={goToBack}
-        showCall={false}
-        paddingTop={10}
-        btnStyle={{ paddingLeft: 0 }}
-      />
+    <>
+      <Container>
+        <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 }}
+            />
+          )}
+        </Header>
 
-      {!walletList.loading &&
-        !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)}
+        {!walletList.loading &&
+          !userLoyaltyLevel.loading &&
+          !walletList.error &&
+          walletList.wallets?.length > 0 &&
+          (
+            <>
+              <OTabs
+                horizontal
+                showsHorizontalScrollIndicator={false}
               >
-                <OTab isSelected={tabSelected === wallet.type}>
-                  <OText size={18}>
-                    {walletName[wallet.type]?.name}
-                  </OText>
-                </OTab>
-              </Pressable>
-            ))}
-          </OTabs>
+                {walletList.wallets?.map((wallet: any) => walletName[wallet.type]?.isActive && (
+                  <Pressable
+                    key={wallet.id}
+                    onPress={() => handleChangeTab(wallet)}
+                  >
+                    <OTab isSelected={tabSelected === wallet.type}>
+                      <OText size={18} color={tabSelected === wallet.type && theme.colors.primary}>
+                        {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')}:`}
+              <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>
-                  {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 style={{ paddingLeft: 5 }}>
+                    {currentWalletSelected?.type === 'cash'
+                      ? configs?.stripe_currency?.value
+                      : t('POINTS', 'Points')}
                   </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>
+                </BalanceElement>
 
-            <View style={{ marginTop: 20, width: '100%', paddingHorizontal: 1, paddingBottom: 40 }}>
-              {!transactionsList?.loading &&
-                !transactionsList?.error &&
-                transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 &&
-              (
-                <>
-                  <OText style={{fontSize: 20}}>
-                    {t('TRANSACTIONS_HISTORY', 'Transactions history')}
-                  </OText>
-                  <TransactionsWrapper>
-                    {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction: any, i: number) =>(
-                      <WalletTransactionItem
-                        idx={i}
-                        type={currentWalletSelected?.type}
-                        key={transaction.id}
-                        item={transaction}
-                        withFormatPrice={currentWalletSelected?.type === 'cash'}
-                      />
-                    ))}
-                  </TransactionsWrapper>
-                </>
-              )}
+                {!isChewLayout && (
+                  <WalletTransactions
+                    transactionsList={transactionsList}
+                    currentWalletSelected={currentWalletSelected}
+                  />
+                )}
+              </SectionContent>
+            </>
+          )}
 
-              {(transactionsList?.loading || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) && (
-                <View>
-                  {[...Array(4).keys()].map(i => (
-                    <View style={{ marginBottom: 10 }} key={i}>
-                      <Placeholder Animation={Fade}>
-                        <PlaceholderLine width={100} height={100} style={{ marginBottom: 0, borderRadius: 8 }} />
-                      </Placeholder>
-                    </View>
-                  ))}
+        {(walletList?.loading || userLoyaltyLevel.loading) && (
+          <>
+            <View>
+              <Placeholder Animation={Fade}>
+                <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
+              </Placeholder>
+            </View>
+            <View style={{ marginTop: 10, marginBottom: 20 }}>
+              <Placeholder Animation={Fade}>
+                <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
+              </Placeholder>
+            </View>
+            <View>
+              {[...Array(4).keys()].map(i => (
+                <View style={{ marginBottom: 10 }} key={i}>
+                  <Placeholder Animation={Fade}>
+                    <PlaceholderLine width={100} height={60} style={{ marginBottom: 0 }} />
+                  </Placeholder>
                 </View>
-              )}
-
-              {!transactionsList?.loading &&
-                !(transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) &&
-                (transactionsList?.error ||
-                  !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
-              (
-                <NotFoundSource
-                  content={transactionsList?.error
-                    ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
-                    : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
-                  }
-                />
-              )}
+              ))}
             </View>
-          </SectionContent>
-        </>
-      )}
+          </>
+        )}
 
-      {(walletList?.loading || userLoyaltyLevel.loading) && (
-        <>
-          <View>
-            <Placeholder Animation={Fade}>
-              <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
-            </Placeholder>
-          </View>
-          <View style={{ marginTop: 10, marginBottom: 20 }}>
-            <Placeholder Animation={Fade}>
-              <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
-            </Placeholder>
-          </View>
-          <View>
-            {[...Array(4).keys()].map(i => (
-              <View style={{ marginBottom: 10 }} key={i}>
-                <Placeholder Animation={Fade}>
-                  <PlaceholderLine width={100} height={60} style={{ marginBottom: 0 }} />
-                </Placeholder>
-              </View>
-            ))}
-          </View>
-        </>
-      )}
+        {!walletList?.loading && !userLoyaltyLevel.loading && (walletList?.error || !walletList?.wallets?.length) && (
+          <NotFoundSource
+            content={walletList?.error
+              ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')
+              : t('NOT_FOUND_WALLETS', 'No wallets to show at this time.')
+            }
+          />
+        )}
+      </Container>
 
-      {!walletList?.loading && !userLoyaltyLevel.loading && (walletList?.error || !walletList?.wallets?.length) && (
-        <NotFoundSource
-          content={walletList?.error
-            ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')
-            : t('NOT_FOUND_WALLETS', 'No wallets to show at this time.')
-          }
-        />
-      )}
-    </Container>
+      <OModal
+        open={openHistory}
+        onClose={() => setOpenHistory(false)}
+        entireModal
+        customClose
+      >
+        <ScrollView>
+          <WalletTransactionsWrapper>
+            <OButton
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                backgroundColor: theme.colors.white,
+                padding: 0,
+                paddingHorizontal: 0,
+                width: 30,
+                paddingLeft: 0,
+                paddingRight: 0
+              }}
+              onClick={() => setOpenHistory(false)}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26
+              }}
+            />
+            <WalletTransactions
+              transactionsList={transactionsList}
+              currentWalletSelected={currentWalletSelected}
+            />
+          </WalletTransactionsWrapper>
+        </ScrollView>
+      </OModal>
+    </>
   )
 }
 

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

@@ -4,7 +4,11 @@ export const Container = styled.View`
   display: flex;
   flex-direction: column;
 `
-
+export const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`
 export const SectionContent = styled.View`
   width: 100%;
   display: flex;
@@ -14,13 +18,6 @@ export const SectionContent = styled.View`
   margin-top: 20px;
 `
 
-export const TransactionsWrapper = styled.View`
-  display: flex;
-  flex-direction: column;
-  border-left-width: 2px;
-  border-left-color: ${(props: any) => props.theme.colors.disabled};
-`
-
 export const BalanceElement = styled.View`
   width: 100%;
   padding: 10px 0;
@@ -30,6 +27,7 @@ export const BalanceElement = styled.View`
   align-items: center;
   background-color: ${(props: any) => props.theme.colors.backgroundGray100};
   border-radius: 8px;
+  margin-bottom: 20px;
 `
 
 export const OTabs = styled.View`
@@ -62,3 +60,7 @@ export const LoyaltyImg = styled.ImageBackground`
   justify-content: center;
   align-items: center;
 `
+export const WalletTransactionsWrapper = styled.View`
+  padding-horizontal: 40px;
+  padding-top: 20px;
+`

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/OBottomPopup.tsx

@@ -1,33 +1,45 @@
 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;
+	presentationStyle?: "fullScreen" | "pageSheet" | "formSheet" | "overFullScreen" | undefined
 }
 const OBottomPopup = (props: Props) => {
 	const {
 		open,
+		transparent,
 		title,
 		onClose,
 		children,
-		isStatusBar
+		isStatusBar,
+		titleStyle,
+		bottomContainerStyle,
+		closeIcon,
+		presentationStyle
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
+	
 	return (
 		<Modal
 			animationType='slide'
-			transparent={false}
+			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}
-			presentationStyle={'fullScreen'}
+			presentationStyle={presentationStyle || 'fullScreen'}
 		>
-		  {isStatusBar && <StatusBar translucent={false} />}
+			{isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>
 				<TouchableWithoutFeedback
 					style={styles.touchableOutsideStyle}
@@ -35,13 +47,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 +77,7 @@ const styles = StyleSheet.create({
 	container: {
 		flex: 1,
 		backgroundColor: '#000000AA',
-		justifyContent: 'flex-end',
+		justifyContent: 'flex-end'
 	},
 	touchableOutsideStyle: {
 		flex: 1,
@@ -68,8 +91,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
 	}
 })