ordering-ui-react-native 0.16.82 → 0.16.84

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
 	useLanguage,
 	useConfig,
@@ -42,8 +42,6 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 
-	const fadeAnim = useRef(new Animated.Value(enableIntersection ? 0 : 1)).current;
-
 	const styles = StyleSheet.create({
 		container: {
 			borderWidth: 1,
@@ -123,14 +121,6 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
-	
-	const fadeIn = () => {
-		Animated.timing(fadeAnim, {
-			toValue: 1,
-			duration: 500,
-			useNativeDriver: true
-		}).start();
-	};
 
 	const handleChangeFavorite = () => {
 		if (auth) {
@@ -143,14 +133,9 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const handleChangeIntersection = () => {
 		if (enableIntersection) {
 			setIsIntersectionObserver(true);
-			fadeIn();
 		}
 	}
 
-	useEffect(() => {
-		if (enableIntersection) fadeIn()
-	}, [enableIntersection])
-
 	return (
 		<InView style={{ minHeight: hideAddButton ? 125 : 165 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
@@ -238,23 +223,14 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</RibbonBox>
 							)}
 							{product?.images && (
-								<Animated.View
-									style={[
-										{
-											// Bind opacity to animated value
-											opacity: fadeAnim
-										}
-									]}
-								>
-									<FastImage
-										style={styles.productStyle}
-										source={{
-											uri: optimizeImage(product?.images, 'h_250,c_limit'),
-											priority: FastImage.priority.normal,
-										}}
-										resizeMode={FastImage.resizeMode.cover}
-									/>
-								</Animated.View>
+								<FastImage
+									style={styles.productStyle}
+									source={{
+										uri: optimizeImage(product?.images, 'h_250,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
 							)}
 						</LogoWrapper>
 

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
 import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
@@ -21,6 +21,7 @@ import {
 import { OrderSummary } from '../OrderSummary';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 	const {
@@ -161,11 +162,14 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			<>
 				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
 					<OButton
-						imgLeftSrc={theme.images.general.arrow_left}
 						imgRightSrc={null}
 						style={styles.btnBackArrow}
 						onClick={() => onGoBack()}
-						imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+						icon={AntDesignIcon}
+						iconProps={{
+							name: 'arrowleft',
+							size: 26
+						}}
 					/>
 				</View>
 				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>

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'
@@ -12,20 +12,21 @@ import {
 
 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 {
@@ -46,6 +47,8 @@ const WalletsUI = (props: any) => {
   const [{ parsePrice }] = useUtils()
   const [{ configs }] = useConfig()
 
+  console.log(theme)
+
   const styles = StyleSheet.create({
     logoStyle: {
       width: 120,
@@ -60,6 +63,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 isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
@@ -105,173 +110,178 @@ const WalletsUI = (props: any) => {
   }, [refreshWallets])
 
   return (
-    <Container>
-      <NavBar
-        title={t('WALLETS', 'Wallets')}
-        titleAlign={'center'}
-        onActionLeft={goToBack}
-        showCall={false}
-        paddingTop={10}
-        btnStyle={{ paddingLeft: 0 }}
-      />
-
-      {!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)}
-              >
-                <OTab isSelected={tabSelected === wallet.type}>
-                  <OText size={18}>
-                    {walletName[wallet.type]?.name}
-                  </OText>
-                </OTab>
-              </Pressable>
-            ))}
-          </OTabs>
+    <>
+      <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>
 
-          <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>
+        {!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)}
+                >
+                  <OTab isSelected={tabSelected === wallet.type}>
+                    <OText size={18}>
+                      {walletName[wallet.type]?.name}
+                    </OText>
+                  </OTab>
+                </Pressable>
+              ))}
+            </OTabs>
 
-            <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'}
+            <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}
                       />
-                    ))}
-                  </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>
+                    ) : (
+                      <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>
               )}
-
-              {!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.')
+              <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) && (
+          <>
+            <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>
-          </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
+              imgLeftSrc={theme.images.general.arrow_left}
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                backgroundColor: theme.colors.white,
+                padding: 0,
+                paddingHorizontal: 0,
+                width: 30,
+                paddingLeft: 0,
+                paddingRight: 0
+              }}
+              onClick={() => setOpenHistory(false)}
+            />
+            <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/OButton.tsx

@@ -79,6 +79,8 @@ interface Props {
 	loadingStyle?: ViewStyle;
 	showNextIcon?: boolean;
 	isDisabledWithSameStyles?: boolean;
+	icon?: any;
+	iconProps?: any
 }
 
 const OButton = (props: Props): React.ReactElement => {
@@ -114,6 +116,9 @@ const OButton = (props: Props): React.ReactElement => {
 			disabled={props.isDisabledWithSameStyles}
 		>
 			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor } : props.style}>
+				{props.icon ? (
+					<props.icon {...props.iconProps} />
+				) : null}
 				{props.imgLeftSrc ? (
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} />
 				) : null}
@@ -122,9 +127,9 @@ const OButton = (props: Props): React.ReactElement => {
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />
-				) : props.showNextIcon ? 
-					<EndImage source={theme.images.general.arrow_left} 
-					style={{width: 16, tintColor: 'white', transform: [{rotate: I18nManager.isRTL ? '0deg' : '180deg'}]}} /> : null }
+				) : props.showNextIcon ?
+					<EndImage source={theme.images.general.arrow_left}
+						style={{ width: 16, tintColor: 'white', transform: [{ rotate: I18nManager.isRTL ? '0deg' : '180deg' }] }} /> : null}
 			</StyledButton>
 		</TouchableOpacity>
 	);