ordering-ui-react-native 0.12.9 → 0.12.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.9",
+  "version": "0.12.10",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/single-business/src/components/ActiveOrders/index.tsx

@@ -10,12 +10,11 @@ import {
 	BusinessInformation,
 	Price,
 } from './styles';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
 
 import { ActiveOrdersParams } from '../../types';
 import moment from 'moment';
 import { useTheme } from 'styled-components/native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
 
 export const ActiveOrders = (props: ActiveOrdersParams) => {
 	const {
@@ -85,11 +84,11 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 							<OText size={12} lineHeight={18}>
 								{parsePrice(order?.summary?.total || order?.total)}
 							</OText>
-							{!isPreorders &&
+							{/* {!isPreorders &&
 								<TouchableOpacity onPress={handleLike}>
 									<OIcon src={theme.images.general.heart} color={theme.colors.red} width={16} />
 								</TouchableOpacity>
-							}
+							} */}
 						</Price>
 					</OrderInformation>
 				</Information>
@@ -98,21 +97,23 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 	);
 
 	return (
-		<>
-			<ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
-				{orders.length > 0 &&
-					orders.map((order: any, index: any) => (
-						<Order key={order?.id || order?.uuid} order={order} index={index} />
-					))}
-			</ActiveOrdersContainer>
-			<View
-				style={{
-					height: 8,
-					backgroundColor: theme.colors.backgroundGray100,
-					marginHorizontal: -40,
-				}}
-			/>
-		</>
+    orders.length === 0 ? null : (
+      <>
+        <ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
+          {orders.length > 0 &&
+            orders.map((order: any, index: any) => (
+              <Order key={order?.id || order?.uuid} order={order} index={index} />
+            ))}
+        </ActiveOrdersContainer>
+        <View
+          style={{
+            height: 8,
+            backgroundColor: theme.colors.backgroundGray100,
+            marginHorizontal: -40,
+          }}
+        />
+      </>
+    )
 	);
 };
 

package/themes/single-business/src/components/BusinessProductsListing/index.tsx

@@ -23,7 +23,7 @@ import {
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
 import { ProductForm } from '../ProductForm'
-import { UpsellingProducts } from '../UpsellingProducts'
+// import { UpsellingProducts } from '../UpsellingProducts'
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { _setStoreData } from '../../providers/StoreUtil';
 
@@ -237,7 +237,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					btnLeftValue={currentCart?.products?.length}
 					btnRightValue={parsePrice(currentCart?.total)}
 					disabled={openUpselling || currentCart?.subtotal < currentCart?.minimum}
-					handleClick={() => setOpenUpselling(true)}
+					handleClick={() => onRedirect('Cart')}
 					hasBottom
 				/>
 			)}
@@ -256,7 +256,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onSave={handlerProductAction}
 				/>
 			</OModal>
-			{openUpselling && (
+			{/* {openUpselling && (
 				<UpsellingProducts
 					businessId={currentCart?.business_id}
 					business={currentCart?.business}
@@ -268,7 +268,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					canOpenUpselling={canOpenUpselling}
 					setCanOpenUpselling={setCanOpenUpselling}
 				/>
-			)}
+			)} */}
 		</>
 	)
 }

package/themes/single-business/src/components/Cart/index.tsx

@@ -54,6 +54,7 @@ const CartUI = (props: any) => {
   const [curProduct, setCurProduct] = useState<any>(null)
   const [openUpselling, setOpenUpselling] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
+  const [isUpsellingProducts, setIsUpsellingProducts] = useState(false)
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
@@ -100,6 +101,7 @@ const CartUI = (props: any) => {
       <ScrollView
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
+        style={{ height, backgroundColor: theme.colors.backgroundPage }}
       >
         <Container>
           <Title>
@@ -126,7 +128,7 @@ const CartUI = (props: any) => {
                   onEditProduct={handleEditProduct}
                 />
               ))}
-  
+
               {cart?.valid_products && (
                 <OSBill>
                   <OSTable>
@@ -218,27 +220,16 @@ const CartUI = (props: any) => {
         {cart?.products?.length > 0 && (
           <>
             <LineDivider />
-  
+
             <Container>
-              <ScrollView
-                showsVerticalScrollIndicator={false}
-                showsHorizontalScrollIndicator={false}
-              >
-                <View
-                  style={{
-                    paddingTop: 20,
-                    overflow: 'visible'
-                  }}
+              <View style={{ padding: 0, }}>
+                <ScrollView
+                  showsVerticalScrollIndicator={false}
+                  showsHorizontalScrollIndicator={false}
                 >
-                  <OText
-                    size={16}
-                    lineHeight={24}
-                    weight={'500'}
-                  >
-                    {t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
-                  </OText>
                   <UpsellingProducts
                     isCustomMode
+                    isShowTitle
                     openUpselling={openUpselling}
                     businessId={cart?.business_id}
                     business={cart?.business}
@@ -247,36 +238,37 @@ const CartUI = (props: any) => {
                     setCanOpenUpselling={setCanOpenUpselling}
                     handleUpsellingPage={handleUpsellingPage}
                     handleCloseUpsellingPage={() => { }}
+                    handleUpsellingProducts={setIsUpsellingProducts}
                   />
-                </View>
-              </ScrollView>
-  
-              {cart?.valid_products && (
-                <CheckoutAction>
-                  <OButton
-                    text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
-                      !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
-                    ) : !cart?.valid_address ? (
-                      `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
-                    ) : (
-                      `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
-                    )}
-                    bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
-                    isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
-                    borderColor={theme.colors.primary}
-                    imgRightSrc={null}
-                    textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-                    onClick={() => props.onNavigationRedirect('CheckoutNavigator', {
-                      screen: 'CheckoutPage',
-                      cartUuid: cart?.uuid,
-                      businessLogo: cart?.business?.logo,
-                      businessName: cart?.business?.name,
-                      cartTotal: cart?.total
-                    })}
-                    style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
-                  />
-                </CheckoutAction>
-              )}
+                </ScrollView>
+
+                {cart?.valid_products && (
+                  <CheckoutAction>
+                    <OButton
+                      text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
+                        !openUpselling !== canOpenUpselling ? t('CHECKOUT', 'Checkout') : t('LOADING', 'Loading')
+                      ) : !cart?.valid_address ? (
+                        `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
+                      ) : (
+                        `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(cart?.minimum)}`
+                      )}
+                      bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
+                      isDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+                      borderColor={theme.colors.primary}
+                      imgRightSrc={null}
+                      textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
+                      onClick={() => props.onNavigationRedirect('CheckoutNavigator', {
+                        screen: 'CheckoutPage',
+                        cartUuid: cart?.uuid,
+                        businessLogo: cart?.business?.logo,
+                        businessName: cart?.business?.name,
+                        cartTotal: cart?.total
+                      })}
+                      style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+                    />
+                  </CheckoutAction>
+                )}
+              </View>
             </Container>
           </>
         )}

package/themes/single-business/src/components/Cart/styles.tsx

@@ -11,6 +11,7 @@ export const Title = styled.View`
 export const LineDivider = styled.View`
   height: 8px;
   background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+  margin-bottom: 20px;
 `
 
 export const OrderBill = styled.View`

package/themes/single-business/src/components/LoginForm/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Pressable, StyleSheet, View, Keyboard } from 'react-native';
+import { Pressable, StyleSheet, View, Keyboard, ScrollView } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
@@ -29,6 +29,7 @@ import {
 	OrSeparator,
 	LineSeparator,
 	SkeletonWrapper,
+  TabsContainer,
 } from './styles';
 
 import NavBar from '../NavBar';
@@ -76,6 +77,7 @@ const LoginFormUI = (props: LoginParams) => {
 	});
 
 	const theme = useTheme();
+  const scrollRefTab = useRef() as React.MutableRefObject<ScrollView>;
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
@@ -95,6 +97,45 @@ const LoginFormUI = (props: LoginParams) => {
 			flexGrow: 1,
 			marginBottom: 7,
 		},
+    btnTab: {
+      flex: 1,
+      minWidth: 88,
+      alignItems: 'flex-start',
+      borderBottomWidth: 1,
+    },
+    btnTabText: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontSize: 14,
+      marginBottom: 10,
+      paddingLeft: 8,
+      paddingRight: 8,
+    },
+    btn: {
+      borderRadius: 7.6,
+      height: 44,
+    },
+    btnText: {
+      color: theme.colors.inputTextColor,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+    btnFlag: {
+      width: 79,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      marginRight: 9,
+      borderColor: theme.colors.inputSignup,
+    },
+    textForgot: {
+      color: theme.colors.arrowColor,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 16,
+    },
 	});
 
 	const inputRef = useRef<any>({});
@@ -102,6 +143,14 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleChangeTab = (val: string) => {
 		props.handleChangeTab(val);
 		setPasswordSee(false);
+
+    if (loginTab === 'email') {
+      scrollRefTab.current?.scrollToEnd({ animated: true });
+    }
+
+    if (loginTab === 'cellphone') {
+      scrollRefTab.current?.scrollTo({ animated: true });
+    }
 	};
 
 	const onSubmit = (values: any) => {
@@ -222,56 +271,64 @@ const LoginFormUI = (props: LoginParams) => {
 				isVertical={true}
 			/>
 			<FormSide>
-				{useLoginByEmail && useLoginByCellphone && (
-					<LoginWith>
-						<OTabs>
-							{useLoginByEmail && (
-								<Pressable onPress={() => handleChangeTab('email')}>
-									<OTab
-										style={{
-											borderBottomColor:
-												loginTab === 'email'
-													? theme.colors.textNormal
-													: theme.colors.border,
-										}}>
-										<OText
-											size={14}
-											color={
-												loginTab === 'email'
-													? theme.colors.textNormal
-													: theme.colors.disabled
-											}
-											weight={loginTab === 'email' ? 'bold' : 'normal'}>
-											{t('BY_EMAIL', 'by Email')}
-										</OText>
-									</OTab>
-								</Pressable>
-							)}
-							{useLoginByCellphone && (
-								<Pressable onPress={() => handleChangeTab('cellphone')}>
-									<OTab
-										style={{
-											borderBottomColor:
-												loginTab === 'cellphone'
-													? theme.colors.textNormal
-													: theme.colors.border,
-										}}>
-										<OText
-											size={14}
-											color={
-												loginTab === 'cellphone'
-													? theme.colors.textNormal
-													: theme.colors.disabled
-											}
-											weight={loginTab === 'cellphone' ? 'bold' : 'normal'}>
-											{t('BY_PHONE', 'by Phone')}
-										</OText>
-									</OTab>
-								</Pressable>
-							)}
-						</OTabs>
-					</LoginWith>
-				)}
+        {(useLoginByEmail || useLoginByCellphone) && (
+          <LoginWith>
+            <ScrollView
+              ref={scrollRefTab}
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+              style={{
+                borderBottomColor: theme.colors.border,
+                borderBottomWidth: 2
+              }}
+            >
+              <TabsContainer>
+                {useLoginByEmail && (
+                  <Pressable
+                    style={{
+                      ...loginStyle.btnTab,
+                      borderBottomWidth: loginTab === 'email' ? 2 : 0,
+                      borderBottomColor: theme.colors.textNormal,
+                    }}
+                    onPress={() => handleChangeTab('email')}>
+                    <OText
+                      style={loginStyle.btnTabText}
+                      color={
+                        loginTab === 'email'
+                          ? theme.colors.textNormal
+                          : theme.colors.border
+                      }
+                      weight={loginTab === 'email' ? '600' : 'normal'}>
+                      {t('BY_EMAIL', 'by Email')}
+                    </OText>
+                  </Pressable>
+                )}
+
+                {useLoginByCellphone && (
+                  <Pressable
+                    style={{
+                      ...loginStyle.btnTab,
+                      borderBottomWidth: loginTab === 'cellphone' ? 2 : 0,
+                      borderBottomColor: theme.colors.textNormal
+                    }}
+                    onPress={() => handleChangeTab('cellphone')}>
+                    <OText
+                      style={loginStyle.btnTabText}
+                      color={
+                        loginTab === 'cellphone'
+                          ? theme.colors.textNormal
+                          : theme.colors.border
+                      }
+                      weight={loginTab === 'cellphone' ? '600' : 'normal'}>
+                      {t('BY_PHONE', 'by Phone')}
+                    </OText>
+                  </Pressable>
+                )}
+              </TabsContainer>
+            </ScrollView>
+          </LoginWith>
+        )}
 
 				{(useLoginByCellphone || useLoginByEmail) && (
 					<FormInput>
@@ -418,48 +475,49 @@ const LoginFormUI = (props: LoginParams) => {
 						</>
 					)}
 
-				<View
-					style={{
-						flexDirection: 'row',
-						width: '100%',
-						justifyContent: 'space-between',
-						alignItems: 'center',
-						marginVertical: 30
-					}}>
-					<View style={loginStyle.line} />
-					<OText
-						size={14}
-						mBottom={10}
-						style={{ paddingHorizontal: 19 }}
-						color={theme.colors.disabled}>
-						{t('OR', 'or')}
-					</OText>
-					<View style={loginStyle.line} />
-				</View>
-
 				{configs && Object.keys(configs).length > 0 ? (
 					(configs?.facebook_login?.value === 'true' ||
 						configs?.facebook_login?.value === '1') &&
 					configs?.facebook_id?.value && (
-						<ButtonsWrapper>
-							<SocialButtons>
-								<FacebookLogin
-									handleErrors={(err: any) => showToast(ToastType.Error, err)}
-									handleLoading={(val: boolean) => setIsFBLoading(val)}
-									handleSuccessFacebookLogin={handleSuccessFacebook}
-								/>
-								<GoogleLogin
-									handleErrors={(err: any) => showToast(ToastType.Error, err)}
-									handleLoading={(val: boolean) => setIsFBLoading(val)}
-									handleSuccessFacebookLogin={handleSuccessFacebook}
-								/>
-								<AppleLogin
-									handleErrors={(err: any) => showToast(ToastType.Error, err)}
-									handleLoading={(val: boolean) => setIsFBLoading(val)}
-									handleSuccessFacebookLogin={handleSuccessFacebook}
-								/>
-							</SocialButtons>
-						</ButtonsWrapper>
+            <>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginVertical: 30
+                }}>
+                <View style={loginStyle.line} />
+                <OText
+                  size={14}
+                  mBottom={10}
+                  style={{ paddingHorizontal: 19 }}
+                  color={theme.colors.disabled}>
+                  {t('OR', 'or')}
+                </OText>
+                <View style={loginStyle.line} />
+              </View>
+              <ButtonsWrapper>
+                <SocialButtons>
+                  <FacebookLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                  <GoogleLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                  <AppleLogin
+                    handleErrors={(err: any) => showToast(ToastType.Error, err)}
+                    handleLoading={(val: boolean) => setIsFBLoading(val)}
+                    handleSuccessFacebookLogin={handleSuccessFacebook}
+                  />
+                </SocialButtons>
+              </ButtonsWrapper>
+            </>
 					)
 				) : (
 					<SkeletonWrapper>

package/themes/single-business/src/components/LoginForm/styles.tsx

@@ -4,34 +4,17 @@ export const Container = styled.View`
   padding-bottom: 40px;
 `
 
-export const FormSide = styled.View`
+export const LoginWith = styled.View`
   display: flex;
   width: 100%;
-  flex-direction: column;
-  align-items: center;
-  margin: auto;
+  /* border-bottom-width: 2px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border}; */
 `;
 
-export const OTabs = styled.View`
+export const TabsContainer = styled.View`
+  width: auto;
+  display: flex;
   flex-direction: row;
-  width: 100%;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-bottom: -1px;
-`;
-
-export const OTab = styled.View`
-  padding-bottom: 10px;
-  border-bottom-width: 1px;
-  margin-end: 14px;
-`;
-
-export const LoginWith = styled.View`
-  font-size: 14px;
-  width: 100%;
-  align-items: flex-start;
-  border-bottom-width: 1px;
-  border-bottom-color: ${(props: any) => props.theme.colors.border}
 `;
 
 export const FormInput = styled.View`
@@ -52,11 +35,6 @@ export const ButtonsWrapper = styled.View`
   `}
 `
 
-export const SocialButtons = styled.View`
-  width: 100%;
-  margin: 0px auto 20px;
-`
-
 export const OrSeparator = styled.View`
   width: 90%;
   display: flex;
@@ -66,6 +44,33 @@ export const OrSeparator = styled.View`
   margin-bottom: 20px;
 `
 
+export const FormSide = styled.View`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+`;
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: -1px;
+`;
+
+export const OTab = styled.View`
+  padding-bottom: 5px;
+  border-bottom-width: 1px;
+  margin-end: 14px;
+`;
+
+export const SocialButtons = styled.View`
+  width: 100%;
+  margin: 0px auto 20px;
+`
+
 export const LineSeparator = styled.View`
   width: 40%;
   height: 1px;