ordering-ui-react-native 0.14.40 → 0.14.42-release

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

@@ -155,7 +155,7 @@ export const ProductOptionsUI = (props: any) => {
 	const { product, loading, error } = productObject;
 	const [gallery, setGallery] = useState([])
 	const [thumbsSwiper, setThumbsSwiper] = useState(0)
-
+	const [indexGallery, setIndexGallery] = useState(0)
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
 	const [qtyBy, setQtyBy] = useState({
@@ -208,11 +208,16 @@ export const ProductOptionsUI = (props: any) => {
 	}
 
 	const handleClickThumb = (index: number) => {
-		swiperRef?.current.scrollBy(index - thumbsSwiper, true);
+		if (index !== indexGallery) {
+			swiperRef?.current.scrollBy(index - thumbsSwiper, true);
+			setIndexGallery(index)
+		}
 	}
 
 	const handleRedirectLogin = () => {
-		navigation.navigate('Login');
+		navigation.navigate('Login', {
+			store_slug:  props.businessSlug
+		});
 	};
 
 	const handleSwitchQtyUnit = (val: string) => {
@@ -289,16 +294,16 @@ export const ProductOptionsUI = (props: any) => {
 		</>
 	);
 
-  const handleGoBack = navigation?.canGoBack()
-    ? () => navigation.goBack()
-    : () => navigation.navigate('Business', { store: props.businessSlug })
+	const handleGoBack = navigation?.canGoBack()
+		? () => navigation.goBack()
+		: () => navigation.navigate('Business', { store: props.businessSlug })
 
 	return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <TopHeader>
-	  	<TopActions onPress={() => handleGoBack()}>
-            <OIcon src={theme.images.general.arrow_left} width={15} />
-          </TopActions>
+		<SafeAreaView style={{ flex: 1 }}>
+			<TopHeader>
+				<TopActions onPress={() => handleGoBack()}>
+					<OIcon src={theme.images.general.arrow_left} width={15} />
+				</TopActions>
 			</TopHeader>
 			<ScrollView>
 				{!error && (
@@ -349,13 +354,13 @@ export const ProductOptionsUI = (props: any) => {
 												style={styles.slide1}
 												key={i}
 											>
-                        <FastImage
-                          style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
-                          source={{
-                            uri: optimizeImage(img, 'h_258,c_limit'),
-                            priority: FastImage.priority.normal,
-                          }}
-                        />
+												<FastImage
+													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+													source={{
+														uri: optimizeImage(img, 'h_258,c_limit'),
+														priority: FastImage.priority.normal,
+													}}
+												/>
 											</View>
 										))}
 									</Swiper>
@@ -379,18 +384,18 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-                          <OIcon
-                            url={img}
-                            style={{
-                              borderColor: theme.colors.lightGray,
-                              borderRadius: 8,
-                              minHeight: '100%',
-                              opacity: isSoldOut ? 0.5 : 1
-                            }}
-                            width={56}
-                            height={56}
-                            cover
-                          />
+													<OIcon
+														url={img}
+														style={{
+															borderColor: theme.colors.lightGray,
+															borderRadius: 8,
+															minHeight: '100%',
+															opacity: isSoldOut ? 0.5 : 1
+														}}
+														width={56}
+														height={56}
+														cover
+													/>
 												</View>
 											</TouchableOpacity>
 
@@ -446,21 +451,21 @@ export const ProductOptionsUI = (props: any) => {
 										) : (
 											<View style={{ flexDirection: 'row', marginBottom: 10 }}>
 												<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-												{!!product?.offer_price && (
+												{product?.offer_price !== null && product?.in_offer && (
 													<OText style={{
 														fontSize: 14,
 														color: '#808080',
 														textDecorationLine: 'line-through',
 														marginLeft: 7,
 														marginRight: 7
-													}}>{parsePrice(product?.offer_price)}</OText>
+													}}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 												)}
 											</View>
 										)}
 									</>
 								)}
 							</ProductTitle>
-						  <ProductDescription>
+							<ProductDescription>
 								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
 									{product?.description || productCart?.description}
 								</OText>
@@ -785,7 +790,7 @@ export const ProductOptionsUI = (props: any) => {
 							<OText
 								size={12}
 								lineHeight={18}
-								style={{ minWidth: 29, textAlign: 'center' }}
+								style={{ minWidth: 40, textAlign: 'center' }}
 							>
 								{qtyBy?.pieces && productCart.quantity}
 								{qtyBy?.weight_unit && productCart.quantity * product?.weight}
@@ -809,36 +814,38 @@ export const ProductOptionsUI = (props: any) => {
 									}
 								/>
 							</TouchableOpacity>
-							<WeightUnitSwitch>
-								<TouchableOpacity
-									onPress={() => handleSwitchQtyUnit('pieces')}
-								>
-									<WeightUnitItem active={qtyBy?.pieces}>
-										<OText
-											size={12}
-											lineHeight={18}
-											color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
-										>
-											{t('PIECES', 'pieces')}
-										</OText>
-									</WeightUnitItem>
-								</TouchableOpacity>
-								<View style={{ alignItems: 'flex-start' }}>
+							{isHaveWeight && (
+								<WeightUnitSwitch>
 									<TouchableOpacity
-										onPress={() => handleSwitchQtyUnit('weight_unit')}
+										onPress={() => handleSwitchQtyUnit('pieces')}
 									>
-										<WeightUnitItem active={qtyBy?.weight_unit}>
+										<WeightUnitItem active={qtyBy?.pieces}>
 											<OText
 												size={12}
 												lineHeight={18}
-												color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
+												color={qtyBy?.pieces ? theme.colors.primary : theme.colors.textNormal}
 											>
-												{product?.weight_unit}
+												{t('PIECES', 'pcs')}
 											</OText>
 										</WeightUnitItem>
 									</TouchableOpacity>
-								</View>
-							</WeightUnitSwitch>
+									<View style={{ alignItems: 'flex-start' }}>
+										<TouchableOpacity
+											onPress={() => handleSwitchQtyUnit('weight_unit')}
+										>
+											<WeightUnitItem active={qtyBy?.weight_unit}>
+												<OText
+													size={12}
+													lineHeight={18}
+													color={qtyBy?.weight_unit ? theme.colors.primary : theme.colors.textNormal}
+												>
+													{product?.weight_unit}
+												</OText>
+											</WeightUnitItem>
+										</TouchableOpacity>
+									</View>
+								</WeightUnitSwitch>
+							)}
 						</View>
 					)}
 					<View
@@ -907,7 +914,7 @@ export const ProductOptionsUI = (props: any) => {
 					</View>
 				</ProductActions>
 			)}
-    </SafeAreaView>
+		</SafeAreaView>
 	);
 };
 

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 import {
 	useUtils,
 	useLanguage,
-	ProductOptionSuboption as ProductSubOptionController,
+	ProductOptionSuboption as ProductSubOptionController
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { StyleSheet } from 'react-native'
@@ -51,7 +51,6 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
-
 	return (
 		<Container>
 			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
@@ -73,54 +72,57 @@ export const ProductOptionSubOptionUI = (props: any) => {
 				</OText>
 			</IconControl>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
-			{option?.allow_suboption_quantity && state?.selected && (
-				<QuantityControl>
-					<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-						<OIcon
-							src={theme.images.general.minus}
-							width={16}
-							color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-						/>
-					</Checkbox>
-					<OText mLeft={5} mRight={5}>
-						{state.quantity}
-					</OText>
-					<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-						<OIcon
-							src={theme.images.general.plus}
-							width={16}
-							color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
-						/>
-					</Checkbox>
-				</QuantityControl>
-			)}
-			{option?.with_half_option && state?.selected && (
-				<PositionControl>
-					<Circle disabled={disabled} onPress={() => changePosition('left')}>
-						<OIcon
-							src={theme.images.general.half_l}
-							color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-							style={styles.inverse}
-						/>
-					</Circle>
-					<Circle disabled={disabled} onPress={() => changePosition('whole')}>
-						<OIcon
-							src={theme.images.general.half_f}
-							color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-						/>
-					</Circle>
-					<Circle disabled={disabled} onPress={() => changePosition('right')}>
-						<OIcon
-							src={theme.images.general.half_r}
-							color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-							width={16}
-						/>
-					</Circle>
-				</PositionControl>
-			)
-			}
+			<QuantityControl>
+				{option?.allow_suboption_quantity && state?.selected && (
+					<>
+						<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+							<OIcon
+								src={theme.images.general.minus}
+								width={16}
+								color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
+							/>
+						</Checkbox>
+						<OText size={12} mLeft={5} mRight={5}>
+							{state.quantity}
+						</OText>
+						<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+							<OIcon
+								src={theme.images.general.plus}
+								width={16}
+								color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+							/>
+						</Checkbox>
+					</>
+				)}
+			</QuantityControl>
+			<PositionControl>
+				{option?.with_half_option && state?.selected && (
+					<>
+						<Circle disabled={disabled} onPress={() => changePosition('left')}>
+							<OIcon
+								src={theme.images.general.half_l}
+								color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
+								width={16}
+								style={styles.inverse}
+							/>
+						</Circle>
+						<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+							<OIcon
+								src={theme.images.general.half_f}
+								color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
+								width={16}
+							/>
+						</Circle>
+						<Circle disabled={disabled} onPress={() => changePosition('right')}>
+							<OIcon
+								src={theme.images.general.half_r}
+								color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
+								width={16}
+							/>
+						</Circle>
+					</>
+				)}
+			</PositionControl>
 			<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
 				+ {parsePrice(price)}
 			</OText>
@@ -137,7 +139,8 @@ const styles = StyleSheet.create({
 export const ProductOptionSubOption = (props: any) => {
 	const productOptionSubOptionProps = {
 		...props,
-		UIComponent: ProductOptionSubOptionUI
+		UIComponent: ProductOptionSubOptionUI,
+		isOrigin: true
 	}
 
 	return (

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

@@ -5,28 +5,35 @@ export const Container = styled.View`
   align-items: center;
   justify-content: space-between;
   padding: 10px;
+  width: 100%;
 `
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  flex: 1;
+  width: 45%;
   align-items: center;
 `
 
 export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
+  justify-content: flex-start;
   margin-horizontal: 5px;
+  flex: 1;
+  width: 60px;
+
 `
 
 export const PositionControl = styled.View`
   flex-direction: row;
   align-items: center;
   margin-right: 5px;
+  flex: 1;
 `
 
 export const Checkbox = styled.TouchableOpacity`
 `
 
 export const Circle = styled.TouchableOpacity`
+  margin: 0 1px;
 `

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

@@ -7,7 +7,7 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer } from './styles';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
 import { StyleSheet } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
@@ -51,6 +51,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			textAlign: 'center',
 			borderRadius: 25,
 			alignItems: 'center'
+		},
+		regularPriceStyle: {
+			fontSize: 12,
+			color: '#808080',
+			textDecorationLine: 'line-through',
+			marginLeft: 7,
+			marginRight: 7
 		}
 	});
 
@@ -97,13 +104,13 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
 			]}
 			onPress={() => onProductClick?.(product)}>
-				{productAddedToCartLength > 0 && (
-					<QuantityContainer style={[styles.quantityContainer, {
-						transform: [{ translateX: 10 }, { translateY: -10 }],
-					}]}>
-						<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
-					</QuantityContainer>
-				)}
+			{productAddedToCartLength > 0 && (
+				<QuantityContainer style={[styles.quantityContainer, {
+					transform: [{ translateX: 10 }, { translateY: -10 }],
+				}]}>
+					<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
+				</QuantityContainer>
+			)}
 			<CardInfo>
 				<OText
 					size={12}
@@ -113,9 +120,12 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					style={styles.line18}>
 					{product?.name}
 				</OText>
-				<OText size={12} weight={'400'} style={styles.line18} color={theme.colors.textNormal}>
-					{parsePrice(product?.price)}
-				</OText>
+				<PricesContainer>
+					<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
+					{product?.offer_price !== null && product?.in_offer && (
+						<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
+					)}
+				</PricesContainer>
 				<OText
 					size={10}
 					numberOfLines={2}
@@ -125,14 +135,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			<FastImage
-				style={styles.productStyle}
-				source={{
-					uri: optimizeImage(product?.images, 'h_75,c_limit'),
-					priority: FastImage.priority.normal,
-				}}
-				resizeMode={FastImage.resizeMode.cover}
-			/>
+			{product?.images ? (
+				<FastImage
+					style={styles.productStyle}
+					source={{
+						uri: optimizeImage(product?.images, 'h_75,c_limit'),
+						priority: FastImage.priority.normal,
+					}}
+					resizeMode={FastImage.resizeMode.cover}
+				/>
+			) : (
+				<OIcon
+					src={theme?.images?.dummies?.product}
+					style={styles.productStyle}
+				/>
+			)}
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>

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

@@ -27,3 +27,7 @@ export const QuantityContainer = styled.View`
   align-items: center;
   justify-content: center;
 `
+export const PricesContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+`

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

@@ -37,19 +37,33 @@ const StripeElementsFormUI = (props: any) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 
-	const billingDetails = {
-		name: `${user.name} ${user.lastname}`,
-		email: user.email,
-		addressLine1: user.address
-	};
+  let billingDetails: any = {}
+
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
+
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
+
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
 	const createPayMethod = async () => {
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			setCreatePmLoading(true)
-			const { paymentMethod } = await createPaymentMethod({
-				type: 'Card',
-				billingDetails,
-			});
+			const { paymentMethod } = await createPaymentMethod(params);
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({
@@ -79,11 +93,12 @@ const StripeElementsFormUI = (props: any) => {
 			createPayMethod();
 			return
 		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
-			const { setupIntent, error } = await confirmSetupIntent(requirements, {
-				type: 'Card',
-				billingDetails,
-			});
+			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
 			if (setupIntent?.status === 'Succeeded') {
 				stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);

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

@@ -1,51 +1,83 @@
-import React from 'react'
-import { useLanguage, useUtils } from 'ordering-components/native'
+import React, { Mixin } from 'react'
+import { useLanguage } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { TaxInformationContainer, ProductContainer } from './styles'
 import { OText } from '../shared'
 
 interface taxInformationParams {
-  data: { name: string, description?: string, rate: string | number, type: number, fixed?: number, percentage?: number, id: number },
-  products: Array<any>
+  data: {
+    name: string,
+    description?: string,
+    rate: string | number,
+    type: number,
+    fixed?: number,
+    percentage?: number,
+    id: number,
+    discounts?: any
+  } | null,
+  products: Array<any>,
+  type: string
 }
 
 export const TaxInformation = (props: taxInformationParams) => {
   const {
     data,
-    products
+    products,
+    type
   } = props
 
   const [, t] = useLanguage()
-  const [{ parsePrice }] = useUtils()
 
-  const isTax = typeof data?.rate === 'number'
-  const TaxFeeString = isTax ? 'tax' : 'fee'
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
 
+  const getFilterValidation = (product: any) => {
+    return (
+      type === 'tax'
+        ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null)
+        : type === 'fee'
+          ? (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))
+          : Object.keys(data?.discounts ?? {}).map(code => code.includes(product?.code)) && product?.offers?.find((offer : any) => offer?.name === data?.name)
+    )
+  }
+
+  const getTypeString = () => {
+    return (
+      type === 'offer_target_1'
+        ? t('PRODUCT_DISCOUNT', 'Product discount')
+        : type === 'tax'
+          ? t('TAX', 'Tax')
+          : t('Fee', 'Fee')
+    )
+  }
+
   return (
     <TaxInformationContainer>
-      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
-        {`${data?.name ||
-          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} (${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})`}
-      </OText>
-      {data?.description && (
+      {!!data?.description ? (
+        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
+        </OText>
+      ) : (
         <OText mBottom={10} size={18} style={{ alignSelf: 'center', textAlign: 'center' }}>
-          {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && includedOnPriceString}
+          {t('WITHOUT_DESCRIPTION', 'Without description')}
         </OText>
       )}
-      <OText>{t(`OTHER_PRODUCTS_WITH_THIS_${TaxFeeString.toUpperCase()}`, `Other products with this ${TaxFeeString}`)}:</OText>
-      <ProductContainer>
-        {
-          products.filter((product: any) => isTax ? (product.tax?.id ? product.tax?.id === data?.id : product.tax?.id === null && data?.id === null) : (product.fee?.id ? product.fee?.id === data?.id : (product.fee?.id === null && data?.id === null))).map(product => (
-            <SingleProductCard
-              key={product.id}
-              product={product}
-              isSoldOut={false}
-              businessId={product?.business_id}
-            />
-          ))
-        }
-      </ProductContainer>
+      {!(type === 'offer_target_2' || type === 'offer_target_3') && (
+        <>
+          <OText>{t('OTHER_PRODUCTS_WITH_THIS', 'Other products with this')} {getTypeString()}:</OText>
+          <ProductContainer>
+            {
+              products.filter((product: any) => getFilterValidation(product)).map(product => (
+                <SingleProductCard
+                  key={product.id}
+                  product={product}
+                  isSoldOut={false}
+                  businessId={product?.business_id}
+                />
+              ))
+            }
+          </ProductContainer>
+        </>
+      )}
     </TaxInformationContainer>
   )
 }