ordering-ui-react-native 0.12.8 → 0.12.12

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

@@ -1,16 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
 	ProductForm as ProductOptions,
 	useSession,
 	useLanguage,
 	useOrder,
-	useUtils,
+	useUtils
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { ProductIngredient } from '../ProductIngredient';
 import { ProductOption } from '../ProductOption';
+import Swiper from 'react-native-swiper'
+import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, Platform } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, Platform, AppRegistry } from 'react-native';
 
 import {
 	ProductHeader,
@@ -25,7 +28,7 @@ import {
 	WrapperSubOption,
 	ProductComment,
 	ProductActions,
-	ExtraOptionWrap,
+	ExtraOptionWrap
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -110,13 +113,30 @@ export const ProductOptionsUI = (props: any) => {
 			borderBottomColor: theme.colors.border,
 			justifyContent: 'center',
 		},
+		slide1: {
+			flex: 1,
+		},
+		mainSwiper : {
+			height: 258,
+		},
+		swiperButton: {
+			marginHorizontal: 30,
+			alignItems: 'center',
+			justifyContent: 'center',
+			width: 32,
+			height: 32,
+			borderRadius: 16,
+			backgroundColor: 'rgba(255,255,255,0.3)'
+		}
 	});
 
-	const [{ parsePrice }] = useUtils();
+	const [{ parsePrice, optimizeImage }] = useUtils();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 	const [{ auth }] = useSession();
 	const { product, loading, error } = productObject;
+	const [gallery, setGallery] = useState([])
+	const [thumbsSwiper, setThumbsSwiper] = useState(0)
 
 	const { top, bottom } = useSafeAreaInsets();
 	const { height } = useWindowDimensions();
@@ -154,63 +174,76 @@ export const ProductOptionsUI = (props: any) => {
 		return sel[0]?.id !== undefined;
 	};
 
+	const handleChangeMainIndex = (index: number) => {
+		setThumbsSwiper(index)
+	}
+
 	const handleRedirectLogin = () => {
 		onClose();
 		navigation.navigate('Login');
 	};
 
+	useEffect(() => {
+		const productImgList: any = []
+		product?.images && productImgList.push(product.images)
+		for (const img of product?.gallery) {
+			productImgList.push(img.file)
+		}
+		setGallery(productImgList)
+	}, [product])
+
 	const saveErrors =
 		orderState.loading ||
 		maxProductQuantity === 0 ||
 		Object.keys(errors).length > 0;
 
 	const ExtraOptions = ({ eID, options }: any) => (
-			<>
-				{product?.ingredients.length > 0 && (
-					<TouchableOpacity
-						key={`eopt_all_00`}
-						onPress={() => setSelectedOpt(-1)}
-						style={[
-							styles.extraItem,
-							{
-								borderBottomColor:
-									selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
-							},
-						]}>
-						<OText
-							color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
-							size={selOpt == -1 ? 14 : 12}
-							weight={selOpt == -1 ? '600' : 'normal'}>
-							{t('INGREDIENTS', 'Ingredients')}
-						</OText>
-					</TouchableOpacity>
-				)}
-				{options.map(({ id, name, respect_to }: any) => (
-					<React.Fragment key={`cont_key_${id}`}>
-						{respect_to == null && (
-							<TouchableOpacity
-								key={`eopt_key_${id}`}
-								onPress={() => setSelectedOpt(id)}
-								style={[
-									styles.extraItem,
-									{
-										borderBottomColor:
-											selOpt == id ? theme.colors.textNormal : theme.colors.border,
-									},
-								]}>
-								<OText
-									color={
-										selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
-									}
-									size={selOpt == id ? 14 : 12}
-									weight={selOpt == id ? '600' : 'normal'}>
-									{name}
-								</OText>
-							</TouchableOpacity>
-						)}
-					</React.Fragment>
-				))}
-			</>
+		<>
+			{product?.ingredients.length > 0 && (
+				<TouchableOpacity
+					key={`eopt_all_00`}
+					onPress={() => setSelectedOpt(-1)}
+					style={[
+						styles.extraItem,
+						{
+							borderBottomColor:
+								selOpt == -1 ? theme.colors.textNormal : theme.colors.border,
+						},
+					]}>
+					<OText
+						color={selOpt == -1 ? theme.colors.textNormal : theme.colors.textSecondary}
+						size={selOpt == -1 ? 14 : 12}
+						weight={selOpt == -1 ? '600' : 'normal'}>
+						{t('INGREDIENTS', 'Ingredients')}
+					</OText>
+				</TouchableOpacity>
+			)}
+			{options.map(({ id, name, respect_to }: any) => (
+				<React.Fragment key={`cont_key_${id}`}>
+					{respect_to == null && (
+						<TouchableOpacity
+							key={`eopt_key_${id}`}
+							onPress={() => setSelectedOpt(id)}
+							style={[
+								styles.extraItem,
+								{
+									borderBottomColor:
+										selOpt == id ? theme.colors.textNormal : theme.colors.border,
+								},
+							]}>
+							<OText
+								color={
+									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
+								}
+								size={selOpt == id ? 14 : 12}
+								weight={selOpt == id ? '600' : 'normal'}>
+								{name}
+							</OText>
+						</TouchableOpacity>
+					)}
+				</React.Fragment>
+			))}
+		</>
 	);
 
 	return (
@@ -238,11 +271,81 @@ export const ProductOptionsUI = (props: any) => {
 								</View>
 							) : (
 								<>
-									<ProductHeader
-										source={{ uri: product?.images || productCart?.images }}
-										style={{height: windowWidth}}
-										resizeMode={'contain'}
-									/>
+									<Swiper
+										loop={false}
+										showsButtons={true}
+										style={styles.mainSwiper}
+										// index={thumbsSwiper}
+										onIndexChanged={(index) => handleChangeMainIndex(index)}
+										prevButton={
+											<View style={styles.swiperButton}>
+												<IconAntDesign
+													name="caretleft"
+													color={theme.colors.white}
+													size={13}
+													// style={styles.starIcon}
+												/>
+											</View>
+										}
+										nextButton={
+											<View style={styles.swiperButton}>
+												<IconAntDesign
+													name="caretright"
+													color={theme.colors.white}
+													size={13}
+													// style={styles.starIcon}
+												/>
+											</View>
+										}
+									>
+										{gallery.length > 0 && gallery.map((img, i) => (
+											<View
+												style={styles.slide1}
+												key={i}
+											>
+												<FastImage
+													style={{ height: '100%' }}
+													source={{
+														uri: optimizeImage(img, 'h_258,c_limit'),
+														priority: FastImage.priority.normal,
+													}}
+												/>
+											</View>
+										))}
+									</Swiper>
+									<ScrollView
+										horizontal
+										contentContainerStyle={{
+											paddingHorizontal: 30,
+											paddingVertical: 15
+										}}
+									>
+										{gallery.length > 0 && gallery.map((img, index) => (
+											<View
+												key={index}
+												style={{
+													height: 56,
+													borderRadius: 8,
+													margin: 8,
+													opacity: index === thumbsSwiper ? 1 : 0.8
+												}}
+											>
+												<OIcon
+													url={img}
+													style={{
+														borderColor: theme.colors.lightGray,
+														borderRadius: 8,
+														minHeight: '100%'
+													}}
+													width={56}
+													height={56}
+													cover
+												/>
+												{/* {thumbsSwiper === 2 && <OText color='red'>{index.toString()}</OText>}
+												{thumbsSwiper === 3 && <OText color='red'>{index.toString()}</OText>} */}
+											</View>
+										))}
+									</ScrollView>
 								</>
 							)}
 						</WrapHeader>

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

@@ -77,4 +77,4 @@ export const ProductActions = styled.View`
 `
 export const ExtraOptionWrap = styled.ScrollView`
 	margin-horizontal: -40px;
-`;
+`;

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`