ordering-ui-react-native 0.14.17 → 0.14.20-release

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

@@ -0,0 +1,204 @@
+import React, { useState } from 'react'
+import { Pressable, View } from 'react-native';
+import { useTheme } from 'styled-components/native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import {
+  WalletList,
+  useLanguage,
+  useUtils,
+  useConfig
+} from 'ordering-components/native'
+
+import {
+  Container,
+  BalanceElement,
+  TransactionsWrapper,
+  OTabs,
+  OTab,
+  SectionContent
+} from './styles'
+
+import NavBar from '../NavBar'
+import { OIcon, OText } from '../shared';
+import { NotFoundSource } from '../NotFoundSource';
+import { WalletTransactionItem } from '../WalletTransactionItem'
+
+const WalletsUI = (props: any) => {
+  const {
+    navigation,
+    walletList,
+    transactionsList,
+    setWalletSelected
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [{ parsePrice, parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
+
+  const [tabSelected, setTabSelected] = useState('cash')
+
+  const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
+
+  const walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet'),
+      value: 0
+    },
+    credit_point: {
+      name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
+      value: 1
+    }
+  }
+
+  const handleChangeTab = (wallet: any) => {
+    setTabSelected(wallet.type)
+    setWalletSelected(wallet.id)
+  }
+
+  const goToBack = () => {
+    navigation?.canGoBack() && navigation.goBack()
+  }
+
+  return (
+    <Container>
+      <NavBar
+        title={t('WALLETS', 'Wallets')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        paddingTop={10}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+
+      {!walletList.loading &&
+        !walletList.error &&
+        walletList.wallets?.length > 0 &&
+      (
+        <>
+          <OTabs>
+            {walletList.wallets?.map((wallet: any) =>(
+              <Pressable
+                key={wallet.id}
+                onPress={() => handleChangeTab(wallet)}
+              >
+                <OTab>
+                  <OText size={18} color={tabSelected === wallet.type ? theme.colors.primary : theme.colors.disabled}>
+                    {walletName[wallet.type]?.name}
+                  </OText>
+                </OTab>
+              </Pressable>
+            ))}
+          </OTabs>
+
+          <SectionContent>
+            <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>
+            {console.log(transactionsList)}
+
+            <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}
+                      />
+                    ))}
+                  </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.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 && (
+        <>
+          <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 && (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>
+  )
+}
+
+export const Wallets = (props: any) => {
+  const walletsProps = {
+    ...props,
+    UIComponent: WalletsUI
+  }
+  return (
+    <WalletList {...walletsProps} />
+  )
+}

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

@@ -0,0 +1,43 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  display: flex;
+  flex-direction: column;
+`
+
+export const SectionContent = styled.View`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  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;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+  background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+  border-radius: 8px;
+`
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: wrap;
+`;
+
+export const OTab = styled.View`
+  padding-horizontal: 10px;
+`;

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

@@ -1,55 +1,55 @@
-import * as React from 'react'
-import styled, { css } from 'styled-components/native'
-import { Alert } from 'react-native'
-import { useLanguage } from 'ordering-components/native'
-
-const Wrapper = styled.TouchableOpacity`
-	
-`
-
-interface Props {
-  children: any,
-  title: string,
-  message?: string,
-  onCancel?: any,
-  onAccept?: any,
-  onClick?: () => void,
-  disabled?: boolean
-}
-
-const OAlert = (props: Props) => {
-
-  const [, t] = useLanguage()
-
-  const createTwoButtonAlert = () => {
-    Alert.alert(
-      props.title,
-      props.message,
-      [
-        {
-          text: t('CANCEL', 'cancel'),
-          onPress: () => props.onCancel && props.onCancel(),
-          style: 'cancel'
-        },
-        {
-          text: t('ACCEPT', 'Accept'),
-          onPress: () => props.onAccept && props.onAccept()
-        }
-      ],
-      { cancelable: false }
-    )
-  }
-
-  const handleClick = () => {
-    props.onClick && props.onClick()
-    createTwoButtonAlert()
-  }
-
-  return (
-    <Wrapper onPress={handleClick} disabled={props.disabled}>
-      {props.children}
-    </Wrapper>
-  )
-}
-
-export default OAlert;
+import * as React from 'react'
+import styled, { css } from 'styled-components/native'
+import { Alert } from 'react-native'
+import { useLanguage } from 'ordering-components/native'
+
+const Wrapper = styled.TouchableOpacity`
+	
+`
+
+interface Props {
+  children: any,
+  title: string,
+  message?: string,
+  onCancel?: any,
+  onAccept?: any,
+  onClick?: () => void,
+  disabled?: boolean
+}
+
+const OAlert = (props: Props) => {
+
+  const [, t] = useLanguage()
+
+  const createTwoButtonAlert = () => {
+    Alert.alert(
+      props.title,
+      props.message,
+      [
+        {
+          text: t('CANCEL', 'cancel'),
+          onPress: () => props.onCancel && props.onCancel(),
+          style: 'cancel'
+        },
+        {
+          text: t('ACCEPT', 'Accept'),
+          onPress: () => props.onAccept && props.onAccept()
+        }
+      ],
+      { cancelable: false }
+    )
+  }
+
+  const handleClick = () => {
+    props.onClick && props.onClick()
+    createTwoButtonAlert()
+  }
+
+  return (
+    <Wrapper onPress={handleClick} disabled={props.disabled}>
+      {props.children}
+    </Wrapper>
+  )
+}
+
+export default OAlert;

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

@@ -1,76 +1,76 @@
-import React from 'react'
-import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-const deviceHeight = Dimensions.get('window').height
-
-interface Props {
-	open: boolean;
-	title?: string;
-	children?: any;
-	onClose?: any;
-	isStatusBar?: boolean;
-}
-const OBottomPopup = (props: Props) => {
-	const {
-		open,
-		title,
-		onClose,
-		children,
-		isStatusBar
-	} = props
-	const { top, bottom } = useSafeAreaInsets();
-	return (
-		<Modal
-			animationType='slide'
-			transparent={false}
-			visible={open}
-			onRequestClose={() => onClose()}
-			presentationStyle={'fullScreen'}
-		>
-		  {isStatusBar && <StatusBar translucent={false} />}
-			<View style={styles.container}>
-				<TouchableWithoutFeedback
-					style={styles.touchableOutsideStyle}
-					onPress={() => onClose()}
-				>
-					<View style={styles.touchableOutsideStyle} />
-				</TouchableWithoutFeedback>
-				<View style={styles.bottomContainer}>
-					<View style={{ paddingTop: top, paddingBottom: bottom }}>
-						{title != '' && (
-							<Text style={styles.titleStyle}>
-								{title}
-							</Text>
-						)}
-						{children}
-					</View>
-				</View>
-			</View>
-		</Modal>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		backgroundColor: '#000000AA',
-		justifyContent: 'flex-end',
-	},
-	touchableOutsideStyle: {
-		flex: 1,
-		width: '100%'
-	},
-	bottomContainer: {
-		backgroundColor: '#ffffff',
-		width: '100%',
-		paddingHorizontal: 0,
-		height: deviceHeight
-	},
-	titleStyle: {
-		fontSize: 20,
-		fontWeight: 'bold',
-		marginVertical: 15
-	}
-})
-
-export default OBottomPopup
+import React from 'react'
+import { Modal, TouchableWithoutFeedback, Dimensions, StyleSheet, View, Text, Platform, StatusBar } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+const deviceHeight = Dimensions.get('window').height
+
+interface Props {
+	open: boolean;
+	title?: string;
+	children?: any;
+	onClose?: any;
+	isStatusBar?: boolean;
+}
+const OBottomPopup = (props: Props) => {
+	const {
+		open,
+		title,
+		onClose,
+		children,
+		isStatusBar
+	} = props
+	const { top, bottom } = useSafeAreaInsets();
+	return (
+		<Modal
+			animationType='slide'
+			transparent={false}
+			visible={open}
+			onRequestClose={() => onClose()}
+			presentationStyle={'fullScreen'}
+		>
+		  {isStatusBar && <StatusBar translucent={false} />}
+			<View style={styles.container}>
+				<TouchableWithoutFeedback
+					style={styles.touchableOutsideStyle}
+					onPress={() => onClose()}
+				>
+					<View style={styles.touchableOutsideStyle} />
+				</TouchableWithoutFeedback>
+				<View style={styles.bottomContainer}>
+					<View style={{ paddingTop: top, paddingBottom: bottom }}>
+						{title != '' && (
+							<Text style={styles.titleStyle}>
+								{title}
+							</Text>
+						)}
+						{children}
+					</View>
+				</View>
+			</View>
+		</Modal>
+	)
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: '#000000AA',
+		justifyContent: 'flex-end',
+	},
+	touchableOutsideStyle: {
+		flex: 1,
+		width: '100%'
+	},
+	bottomContainer: {
+		backgroundColor: '#ffffff',
+		width: '100%',
+		paddingHorizontal: 0,
+		height: deviceHeight
+	},
+	titleStyle: {
+		fontSize: 20,
+		fontWeight: 'bold',
+		marginVertical: 15
+	}
+})
+
+export default OBottomPopup