ordering-ui-react-native 0.14.45 → 0.14.48

package/package.json

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

package/src/components/ProductForm/index.tsx

@@ -138,7 +138,7 @@ export const ProductOptionsUI = (props: any) => {
                       </View>
                       <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={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
                         )}
                       </View>

package/src/components/SingleProductCard/index.tsx

@@ -86,7 +86,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
         <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
         <PricesContainer>
           <OText color={theme.colors.primary}>{parsePrice(product?.price)}</OText>
-          {!!product?.offer_price && (
+          {product?.offer_price !== null && product?.in_offer && (
             <OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
           )}
         </PricesContainer>

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

@@ -7,6 +7,7 @@ import {
 	ScrollView,
 	Platform,
 	TouchableOpacity,
+	RefreshControl
 } from 'react-native';
 import {
 	BusinessList as BusinessesListingController,
@@ -57,11 +58,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
-    businessId
+		businessId
 	} = props;
 
 	const theme = useTheme();
 	const isFocused = useIsFocused();
+	const [refreshing] = useState(false);
 
 	const styles = StyleSheet.create({
 		container: {
@@ -142,15 +144,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	};
 
 	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
-    const R = 6371 // km
-    const dLat = convertToRadian(lat2 - lat1)
-    const dLon = convertToRadian(lon2 - lon1)
-    const curLat1 = convertToRadian(lat1)
-    const curLat2 = convertToRadian(lat2)
-    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
-    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-    return R * c
-  }
+		const R = 6371 // km
+		const dLat = convertToRadian(lat2 - lat1)
+		const dLon = convertToRadian(lon2 - lon1)
+		const curLat1 = convertToRadian(lat1)
+		const curLat2 = convertToRadian(lat2)
+		const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+		return R * c
+	}
 
 	useEffect(() => {
 		if (businessesList.businesses.length > 0) {
@@ -162,6 +164,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			setFeaturedBusinesses(ary);
 		}
 	}, [businessesList.businesses]);
+
 	// const resetInactivityTimeout = () => {
 	//   clearTimeout(timerId.current)
 	//   timerId.current = setInterval(() => {
@@ -173,21 +176,37 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	//   resetInactivityTimeout()
 	// }, [])
 
+	const handleOnRefresh = () => {
+		const hasMore = !(
+			paginationProps.totalPages === paginationProps.currentPage
+		);
+		if (!businessesList.loading && hasMore) {
+			getBusinesses();
+		}
+	}
+
 	useEffect(() => {
 		Geolocation.getCurrentPosition((pos) => {
-      const crd = pos.coords
-      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
-      if (distance > 20) setIsFarAway(true)
+			const crd = pos.coords
+			const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+			if (distance > 20) setIsFarAway(true)
 			else setIsFarAway(false)
-    }, (err) => {
-      console.log(`ERROR(${err.code}): ${err.message}`)
-    }, {
-      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
-    })
-  }, [orderState?.options?.address?.location])
+		}, (err) => {
+			console.log(`ERROR(${err.code}): ${err.message}`)
+		}, {
+			enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+		})
+	}, [orderState?.options?.address?.location])
 
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
+		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+			refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+		>
 			<HeaderWrapper
 				source={theme.images.backgrounds.business_list_header}
 				style={{ paddingTop: top + 20 }}>
@@ -257,72 +276,78 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 
-            {!businessId && (
-              <SearchBar
-                onSearch={handleChangeSearch}
-                searchValue={searchValue}
-                lazyLoad
-                isCancelXButtonShow={!!searchValue}
-                borderStyle={styles.borderStyle}
-                onCancel={() => handleChangeSearch('')}
-                placeholder={t('SEARCH', 'Search')}
-                height={26}
-                inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-              />
-            )}
+						{!businessId && (
+							<SearchBar
+								onSearch={handleChangeSearch}
+								searchValue={searchValue}
+								lazyLoad
+								isCancelXButtonShow={!!searchValue}
+								borderStyle={styles.borderStyle}
+								onCancel={() => handleChangeSearch('')}
+								placeholder={t('SEARCH', 'Search')}
+								height={26}
+								inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+							/>
+						)}
 
 					</View>
 				</OrderControlContainer>
 			</HeaderWrapper>
-			{isFocused && (
-				<OrderProgressWrapper>
-					<OrderProgress
-						{...props}
-					/>
-				</OrderProgressWrapper>
-			)}
-			{!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
-				<FeaturedWrapper>
-					<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
-					<ScrollView
-						showsHorizontalScrollIndicator={false}
-						nestedScrollEnabled
-						horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
-						{featuredBusiness.map((bAry: any, idx) => (
-							<View key={'f-listing_' + idx}>
-								<BusinessFeaturedController
-									key={bAry[0].id}
-									business={bAry[0]}
-									handleCustomClick={handleBusinessClick}
-									orderType={orderState?.options?.type}
-								/>
-								{bAry.length > 1 && (
+			{
+				isFocused && (
+					<OrderProgressWrapper>
+						<OrderProgress
+							{...props}
+						/>
+					</OrderProgressWrapper>
+				)
+			}
+			{
+				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
+					<FeaturedWrapper>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<ScrollView
+							showsHorizontalScrollIndicator={false}
+							nestedScrollEnabled
+							horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
+							{featuredBusiness.map((bAry: any, idx) => (
+								<View key={'f-listing_' + idx}>
 									<BusinessFeaturedController
-										key={bAry[1].id}
-										business={bAry[1]}
+										key={bAry[0].id}
+										business={bAry[0]}
 										handleCustomClick={handleBusinessClick}
 										orderType={orderState?.options?.type}
 									/>
-								)}
-							</View>
-						))}
-					</ScrollView>
-				</FeaturedWrapper>
-			)}
+									{bAry.length > 1 && (
+										<BusinessFeaturedController
+											key={bAry[1].id}
+											business={bAry[1]}
+											handleCustomClick={handleBusinessClick}
+											orderType={orderState?.options?.type}
+										/>
+									)}
+								</View>
+							))}
+						</ScrollView>
+					</FeaturedWrapper>
+				)
+			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-      {!businessId && !props.franchiseId && (
-        <HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
-      )}
+			{
+				!businessId && !props.franchiseId && (
+					<HighestRatedBusinesses onBusinessClick={handleBusinessClick} navigation={navigation} />
+				)
+			}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 			<ListWrapper>
-        {!businessId && (
-          <BusinessTypeFilter
-            images={props.images}
-            businessTypes={props.businessTypes}
-            defaultBusinessType={props.defaultBusinessType}
-            handleChangeBusinessType={handleChangeBusinessType}
-          />
-        )}
+				{!businessId && (
+					<BusinessTypeFilter
+						images={props.images}
+						businessTypes={props.businessTypes}
+						defaultBusinessType={props.defaultBusinessType}
+						handleChangeBusinessType={handleChangeBusinessType}
+					/>
+				)}
 				{!businessesList.loading && businessesList.businesses.length === 0 && (
 					<NotFoundSource
 						content={t(

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { CContainer, CheckoutAction } from './styles';
+import { CContainer, CheckoutAction, Divider } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -23,6 +23,7 @@ import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { CartStoresListing } from '../CartStoresListing';
+import { OAlert } from '../../../../../src/components/shared'
 
 const CartUI = (props: any) => {
   const {
@@ -36,7 +37,8 @@ const CartUI = (props: any) => {
     setIsCartsLoading,
     handleChangeComment,
     commentState,
-    onNavigationRedirect
+    onNavigationRedirect,
+    handleRemoveOfferClick
   } = props
 
   const theme = useTheme();
@@ -50,7 +52,8 @@ const CartUI = (props: any) => {
   const [openUpselling, setOpenUpselling] = useState(false)
   const [openChangeStore, setOpenChangeStore] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
-  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
+  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
@@ -69,12 +72,12 @@ const CartUI = (props: any) => {
   const handleEditProduct = (product: any) => {
     onNavigationRedirect('ProductDetails', {
       businessId,
-			isCartProduct: true,
+      isCartProduct: true,
       productCart: product,
       businessSlug: cart?.business?.slug,
       categoryId: product?.category_id,
       productId: product?.id,
-		})
+    })
   }
 
   const handleClearProducts = async () => {
@@ -109,6 +112,22 @@ const CartUI = (props: any) => {
     }
   }
 
+  const getIncludedTaxesDiscounts = () => {
+    return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
+  const onRemoveOffer = (id: number) => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
+      title: t('OFFER', 'Offer'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveOfferClick(id)
+      }
+    })
+  }
+
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -166,7 +185,7 @@ const CartUI = (props: any) => {
                 {parsePrice(cart?.subtotal + getIncludedTaxes())}
               </OText>
             </OSTable>
-            {cart?.discount > 0 && cart?.total >= 0 && (
+            {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
               <OSTable>
                 {cart?.discount_type === 1 ? (
                   <OText size={12} lineHeight={18}>
@@ -179,19 +198,51 @@ const CartUI = (props: any) => {
                 <OText size={12} lineHeight={18}>- {parsePrice(cart?.discount || 0)}</OText>
               </OSTable>
             )}
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
+                </OSTable>
+              ))
+            }
+            <Divider />
+            {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
+              <OSTable>
+                <OText size={12} lineHeight={18} numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                {cart?.business?.tax_type === 1 ? (
+                  <OText size={12} lineHeight={18}>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
+                ) : (
+                  <OText size={12} lineHeight={18}>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
+                )}
+              </OSTable>
+            )}
             {
               cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
                 <OSTable key={tax.id}>
                   <OSRow>
-                    <OText numberOfLines={1} >
+                    <OText size={12} lineHeight={18} numberOfLines={1} >
                       {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                       {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                     </OText>
-                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
                       <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
-                  <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                  <OText size={12} lineHeight={18}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                 </OSTable>
               ))
             }
@@ -199,33 +250,66 @@ const CartUI = (props: any) => {
               cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
                 <OSTable key={fee?.id}>
                   <OSRow>
-                    <OText numberOfLines={1} size={12} lineHeight={18}>
+                    <OText size={12} lineHeight={18} numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                       ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                     </OText>
-                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                       <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
-                  <OText>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  <OText size={12} lineHeight={18}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                </OSTable>
+              ))
+            }
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
                 </OSTable>
               ))
             }
-            {cart?.service_fee > 0 && !cart?.fees?.length && (
-              <OSTable>
-                <OText size={12} lineHeight={18}>
-                  {t('SERVICE_FEE', 'Service Fee')}
-                  {`(${verifyDecimals(cart?.business?.service_fee, parseNumber)}%)`}
-                </OText>
-                <OText size={12} lineHeight={18}>{parsePrice(cart?.service_fee)}</OText>
-              </OSTable>
-            )}
             {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                 <OText size={12} lineHeight={18}>{parsePrice(cart?.delivery_price)}</OText>
               </OSTable>
             )}
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText size={12} lineHeight={18}>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText size={12} lineHeight={18}>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText size={12} lineHeight={18}>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
+                </OSTable>
+              ))
+            }
             {cart?.driver_tip > 0 && (
               <OSTable>
                 <OText size={12} lineHeight={18}>
@@ -265,7 +349,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText size={14} lineHeight={21} weight={'600'}>
-                  {parsePrice(cart?.balance ?? cart?.total)}
+                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                 </OText>
               </OSTable>
             </OSTotal>
@@ -339,11 +423,25 @@ const CartUI = (props: any) => {
       </OModal>
       <OModal
         open={openTaxModal.open}
-        onClose={() => setOpenTaxModal({ open: false, data: null })}
+        onClose={() => setOpenTaxModal({ open: false, data: null, type: '' })}
         entireModal
+        title={`${openTaxModal.data?.name ||
+          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
-        <TaxInformation data={openTaxModal.data} products={cart.products} />
+        <TaxInformation
+          type={openTaxModal.type}
+          data={openTaxModal.data}
+          products={cart?.products}
+        />
       </OModal>
+        <OAlert
+          open={confirm.open}
+          title={confirm.title}
+          content={confirm.content}
+          onAccept={confirm.handleOnAccept}
+          onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+          onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+        />
     </CContainer>
   )
 }

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

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/native';
+import styled from 'styled-components/native';
 
 export const CContainer = styled.View`
   /* border-bottom: 1px solid #F0F0F0; */
@@ -26,3 +26,10 @@ export const CheckoutAction = styled.View`
   margin-top: 10px;
   margin-bottom: 10px;
 `
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`