ordering-ui-react-native 0.17.71 → 0.17.72-release

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

@@ -47,7 +47,7 @@ export const CitiesControl = (props: any) => {
   return (
     <Container height={height - top - bottom - 60 - (isKeyboardShow ? 250 : 0)}>
       <View>
-        {cities?.map((city: any) => (
+        {cities?.map((city: any) => city?.enabled && (
           <CityElement
             key={city?.id}
             activeOpacity={1}

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, Alert, Text } from 'react-native';
-import { CouponControl as CouponController, useLanguage } from 'ordering-components/native';
+import { CouponControl as CouponController, useLanguage, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	CContainer,
@@ -18,11 +18,13 @@ const CouponControlUI = (props: any) => {
 		handleRemoveCouponClick,
 		onChangeInputCoupon,
 		confirm,
-		setConfirm
+		setConfirm,
+		cart
 	} = props
 
 	const [, t] = useLanguage()
 	const theme = useTheme();
+	const [events] = useEvent()
 
 	const styles = StyleSheet.create({
 		inputsStyle: {
@@ -45,6 +47,11 @@ const CouponControlUI = (props: any) => {
 		setConfirm({ ...confirm, open: false, error: false })
 	}
 
+	const onButtonApplyClick = () => {
+		events.emit('coupon_entered', { ...cart, coupon: couponInput })
+		handleButtonApplyClick()
+	}
+
 	useEffect(() => {
 		if (confirm.content) {
 			Alert.alert(
@@ -94,7 +101,7 @@ const CouponControlUI = (props: any) => {
 						inputStyle={{ fontSize: 12 }}
 					/>
 					<OButton
-						onClick={() => handleButtonApplyClick()}
+						onClick={() => onButtonApplyClick()}
 						bgColor={theme.colors.primary}
 						borderColor={theme.colors.primary}
 						textStyle={{ color: 'white', fontSize: 12 }}

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

@@ -22,17 +22,22 @@ const DriverTipsUI = (props: any) => {
 	const {
 		driverTip,
 		driverTipsOptions,
-		optionSelected,
-		isFixedPrice,
+		isMulti,
+		isLoading,
+		cart,
+		carts,
 		isDriverTipUseCustom,
-		handlerChangeOption
+		handlerChangeOption,
+		isFixedPrice
 	} = props;
 
 	const [{ parsePrice }] = useUtils();
+	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
-
-	const theme = useTheme();
+	const [customTip, setCustomTip] = useState((!isMulti && isDriverTipUseCustom && !driverTipsOptions.includes(driverTip)) ?? false)
+	const currentTip = customTip ? parseFloat(driverTip || 0) > 0 : (!customTip && !driverTipsOptions.includes(driverTip) && parseFloat(driverTip || 0)) > 0
+	const [value, setvalue] = useState('');
 
 	const style = StyleSheet.create({
 		semicircle: {
@@ -48,53 +53,65 @@ const DriverTipsUI = (props: any) => {
 		}
 	})
 
-	const [value, setvalue] = useState('');
-
-	const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
+	const placeholderCurrency = !isFixedPrice ? `0%` : (configs?.currency_position?.value || 'left') === 'left'
 		? `${configs?.format_number_currency?.value}0`
 		: `0${configs?.format_number_currency?.value}`
 
 	const handleChangeDriverTip = (val: any) => {
 		const tip = Number(val)
 		if ((isNaN(tip) || tip < 0)) {
-		  setvalue(value)
-		  return
+			setvalue(value)
+			return
 		}
 		setvalue(val)
 	}
-	
+
+	const multiCartTipsAmmout = carts?.reduce((total: any, cart: any) => {
+		return total + parseFloat(cart?.driver_tip || 0)
+	}, 0)
+
 	return (
 		<DTContainer>
 			<DTLabel>
 				{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
 			</DTLabel>
 			<DTWrapperTips>
-				{!isDriverTipUseCustom && driverTipsOptions.map((option: any, i: number) => (
+				{driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
-						onPress={() => handlerChangeOption(option)}
+						onPress={() => {
+							if (!isLoading) {
+								handlerChangeOption(option)
+								setCustomTip(false)
+							}
+						}}
 					>
 						<DTCard
 							style={style.semicircle}
-							isActive={option === optionSelected}
+							isActive={(option === driverTip && !customTip)}
 						>
-							<OText size={12} numberOfLines={2} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+							<OText size={12} numberOfLines={2} color={(option === driverTip && !customTip) ? '#FFF' : theme.colors.textSecondary}>
 								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 							</OText>
 						</DTCard>
 					</TouchableOpacity>
 				))}
+				{isDriverTipUseCustom && (
+					<TouchableOpacity
+						onPress={() => { !isLoading && setCustomTip(true) }}
+					>
+						<DTCard
+							style={style.semicircle}
+							isActive={customTip}
+						>
+							<OText size={12} numberOfLines={2} color={customTip ? '#FFF' : theme.colors.textSecondary}>
+								{t('CUSTOM_TIP', 'Custom')}
+							</OText>
+						</DTCard>
+					</TouchableOpacity>
+				)}
 			</DTWrapperTips>
-			{(!isDriverTipUseCustom && !driverTipsOptions.includes(driverTip) && driverTip > 0) && (
-				<OText
-					color={theme.colors.error}
-					size={16}
-					style={{ marginTop: 10, textAlign: 'center' }}
-				>
-					{t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
-				</OText>
-			)}
-			{isDriverTipUseCustom && (
+			{customTip && (
 				<DTForm>
 					<DTWrapperInput>
 						<OInput
@@ -120,17 +137,18 @@ const DriverTipsUI = (props: any) => {
 							}}
 						/>
 					</DTWrapperInput>
-					{parseFloat(driverTip || 0) > 0 && (
-						<OText
-							color={theme.colors.error}
-							size={16}
-							style={{ marginTop: 10, textAlign: 'center' }}
-						>
-							{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}: {parsePrice(driverTip)}
-						</OText>
-					)}
 				</DTForm>
 			)}
+			{currentTip && (
+				<OText
+					color={theme.colors.primary}
+					size={16}
+					style={{ marginTop: 10, textAlign: 'center' }}
+				>
+					{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPrice &&
+						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(multiCartTipsAmmout ?? driverTip) : parsePrice(multiCartTipsAmmout ?? cart?.driver_tip)}
+				</OText>
+			)}
 		</DTContainer>
 	)
 }

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components/native'
 
-export const Container = styled.View``
+export const Container = styled.View`
+  margin-bottom: 20px;
+`
 
 export const FacebookButton = styled.TouchableOpacity`
   background-color: #FFFFFF;

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

@@ -14,8 +14,7 @@ import {
 
 export const Favorite = (props: any) => {
   const {
-    navigation,
-    franchiseId
+    navigation
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -36,7 +35,7 @@ export const Favorite = (props: any) => {
 
   return (
     <Container
-      pdng={Platform.OS === 'ios' ? '20px' : '30px'}
+      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
     >
       <NavBar
         title={t('FAVORITE', 'Favorite')}
@@ -73,7 +72,6 @@ export const Favorite = (props: any) => {
           originalURL='business'
           location={`${orderState.options?.address?.location?.lat},${orderState.options?.address?.location?.lng}`}
           propsToFetch={['id', 'name', 'header', 'logo', 'location', 'address', 'ribbon', 'timezone', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug']}
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'products' && (
@@ -82,7 +80,6 @@ export const Favorite = (props: any) => {
           originalURL='products'
           onNavigationRedirect={onRedirect}
           isProduct
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'orders' && (
@@ -91,7 +88,6 @@ export const Favorite = (props: any) => {
           favoriteURL='favorite_orders'
           originalURL='orders'
           isOrder
-          franchiseId={franchiseId}
         />
       )}
     </Container>

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

@@ -16,7 +16,7 @@ import { BusinessController } from '../BusinessController';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import moment from 'moment';
-
+import { getOrderStatus } from '../../utils'
 
 const FavoriteListUI = (props: FavoriteParams) => {
   const {
@@ -40,40 +40,6 @@ const FavoriteListUI = (props: FavoriteParams) => {
 
   const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
-  const getOrderStatus = (s: any) => {
-    const status = parseInt(s)
-    const orderStatus = [
-      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending') },
-      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed') },
-      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected') },
-      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business') },
-      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed') },
-      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business') },
-      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver') },
-      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business') },
-      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver') },
-      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver') },
-      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver') },
-      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver') },
-      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver') },
-      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder') },
-      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready') },
-      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer') },
-      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer') },
-      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer') },
-      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business') },
-      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer') },
-      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business') },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business') },
-      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver') },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way') }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-
-    return objectStatus && objectStatus
-  }
-
   const onProductClick = (product: any) => {
     const categoryId = product?.category?.id
     const businessId = product?.category?.business?.id

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

@@ -22,8 +22,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 		disabled,
 		isSecondaryBtn,
 		handleEmpty,
-		iosBottom,
-		hideButton
+		iosBottom
 	} = props;
 
 	const [, t] = useLanguage();
@@ -78,17 +77,15 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 					</View>
 				)}
 			</View>
-			{!hideButton && (
-				<Button
-					style={[isSecondaryBtn ? styles.secondaryBtn : styles.primaryBtn]}
-					onPress={handleButtonClick}
-					disabled={disabled}
-				>
-					<OText color={isSecondaryBtn ? theme.colors.textSecondary : theme.colors.white} lineHeight={24} size={14} weight={'400'}>
-						{btnText}
-					</OText>
-				</Button>
-			)}
+			<Button
+				style={[isSecondaryBtn ? styles.secondaryBtn : styles.primaryBtn]}
+				onPress={handleButtonClick}
+				disabled={disabled}
+			>
+				<OText color={isSecondaryBtn ? theme.colors.textSecondary : theme.colors.white} lineHeight={24} size={14} weight={'400'}>
+					{btnText}
+				</OText>
+			</Button>
 		</Container>
 	);
 };

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

@@ -12,7 +12,8 @@ export const GPSButton = (props: any) => {
     handleGPS,
 		apiKey,
     IconButton,
-    IconLoadingButton
+    IconLoadingButton,
+    isIntGeoCoder
   } = props
 
 	const [isLoading, setLoading] = useState(false);
@@ -31,7 +32,7 @@ export const GPSButton = (props: any) => {
             break
           }
         }
-        let data = null
+        let data : any
         const details = {
           geometry: { location: { lat: pos.latitude, lng: pos.longitude } }
         }
@@ -68,14 +69,15 @@ export const GPSButton = (props: any) => {
         setLoading(false);
         console.log(`ERROR(${err.code}): ${err.message}`)
       }, {
-        enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+        enableHighAccuracy: false, timeout: 30000, maximumAge: 1000
       })
     }
   }
 
   useEffect(() => {
+    if (isIntGeoCoder) return
     Geocoder.init(apiKey);
-  }, [])
+  }, [isIntGeoCoder])
 
   return (
     <GpsButtonStyle

package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useLanguage } from 'ordering-components/native';
+import Feather from 'react-native-vector-icons/Feather'
+import { useTheme } from 'styled-components/native';
+import { OText, OButton } from '../../shared';
+import { OModal } from '../../../../../../src/components/shared';
+import { PurchaseGiftCard } from '../PurchaseGiftCard'
+import { RedeemGiftCard } from '../RedeemGiftCard'
+
+import {
+  Container
+} from './styles'
+
+export const GiftCardUI =  React.memo((props: any) => {
+  const {
+    navigation
+  } = props
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const [openModal, setOpenModal] = useState<any>(null)
+
+  const style = StyleSheet.create({
+    title: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    actionWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 10
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      paddingLeft: 0,
+      paddingRight: 0,
+      height: 44
+    }
+  })
+
+  const handleCustomGoToCheckout = (uuid: any) => {
+    setOpenModal(null)
+    navigation.navigate('CheckoutNavigator', {
+      screen: 'CheckoutPage',
+      cartUuid: uuid
+    })
+  }
+
+  return (
+    <Container>
+      <View style={style.title}>
+        <OText size={16} color={theme.colors.textNormal} weight='bold' mBottom={0} mRight={12}>{t('GIFT_CARD', 'Gift card')}</OText>
+        <Feather name='gift' color={theme.colors.textNormal} size={16} />
+      </View>
+
+      <View style={style.actionWrapper}>
+        <OButton
+          onClick={() => setOpenModal('purchase')}
+          text={t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          textStyle={{ color: 'white', fontSize: 13 }}
+          imgRightSrc={null}
+          style={{ ...style.btnStyle, marginRight: 14 }}
+        />
+
+        <OButton
+          onClick={() => setOpenModal('redeem')}
+          text={t('REDEEM_GIFT_CARD', 'Redeem gift card')}
+          bgColor={theme.colors.lightPrimary}
+          borderColor={theme.colors.lightPrimary}
+          textStyle={{ color: theme.colors.primary, fontSize: 13 }}
+          imgRightSrc={null}
+          style={style.btnStyle}
+        />
+      </View>
+
+      <OModal
+				open={openModal === 'purchase'}
+				onClose={() => setOpenModal(null)}
+				entireModal
+			>
+				<PurchaseGiftCard handleCustomGoToCheckout={handleCustomGoToCheckout} />
+			</OModal>
+      <OModal
+				open={openModal === 'redeem'}
+				onClose={() => setOpenModal(null)}
+				entireModal
+			>
+				<RedeemGiftCard
+          onClose={() => setOpenModal(null)}
+        />
+			</OModal>
+    </Container>
+  )
+})

package/themes/original/src/components/GiftCard/GiftCardUI/styles.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+`

package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import {
+  useLanguage,
+  PurchaseGiftCard as PurchaseGiftCardController
+} from 'ordering-components/native'
+import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native';
+import { OText, OButton, OIcon } from '../../shared';
+
+import {
+  Container
+} from './styles'
+
+const PurchaseGiftCardUI = (props: any) => {
+  const {
+    productsListState,
+    selectedProduct,
+    setSelectedProduct,
+    handleAccept
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const style = StyleSheet.create({
+    itemStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 15,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.disabled
+    },
+    btnStyle: {
+      borderRadius: 7.6,
+      paddingLeft: 0,
+      paddingRight: 0,
+      height: 44,
+      marginTop: 50
+    }
+  })
+
+  return (
+    <Container>
+      <OText color={theme.colors.textNormal} weight='bold' size={20} mBottom={40}>{t('PURCHASE_GIFT_CARD', 'Purchase gift card')}</OText>
+      <OText color={theme.colors.textNormal} size={14}>{t('SELECT_ONE_OPTION', 'Select one option')}</OText>
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1
+        }}
+      >
+        {productsListState.loading && (
+          [...Array(5).keys()].map(i => (
+            <View key={i} style={style.itemStyle}>
+              <Placeholder
+                Animation={Fade}
+              >
+                <PlaceholderLine width={80} height={20} style={{ marginBottom: 0 }} />
+              </Placeholder>
+            </View>
+          ))
+        )}
+        {productsListState.products.map(product => (
+          <TouchableOpacity
+            key={product.id}
+            style={style.itemStyle}
+            onPress={() => setSelectedProduct(product)}
+          >
+            <View style={{ marginRight: 10 }}>
+              {selectedProduct?.id === product.id ? (
+                <OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+              ) : (
+                <OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
+              )}
+            </View>
+            <OText color={theme.colors.textNormal} size={14}>{product.name}</OText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+      <OButton
+        onClick={() => handleAccept()}
+        text={t('ACCEPT', 'Accept')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        textStyle={{ color: 'white', fontSize: 13 }}
+        imgRightSrc={null}
+        style={style.btnStyle}
+        isDisabled={!selectedProduct}
+      />
+    </Container>
+  )
+}
+
+export const PurchaseGiftCard = (props: any) => {
+  const purchaseGiftCardProps = {
+    ...props,
+    UIComponent: PurchaseGiftCardUI
+  }
+  return <PurchaseGiftCardController {...purchaseGiftCardProps} />
+}

package/themes/original/src/components/GiftCard/PurchaseGiftCard/styles.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding-horizontal: 40px;
+  flex: 1;
+  padding-bottom: 30px;
+`