ordering-ui-react-native 0.17.62 → 0.17.63-release

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

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, useWindowDimensions, Keyboard, View } from 'react-native';
+import { useLanguage, useOrder } from 'ordering-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from 'styled-components/native';
+
+import { OButton, OIcon, OText } from '../shared';
+
+import { CityElement, Container } from './styles'
+
+export const CitiesControl = (props: any) => {
+  const {
+    cities,
+    onClose,
+    handleChangeCity
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+  const { height } = useWindowDimensions();
+  const { top, bottom } = useSafeAreaInsets();
+
+  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+  const [cityState, setCityState] = useState(orderState?.options?.city_id)
+
+  const handleClick = () => {
+    cityState !== orderState?.options?.city_id && handleChangeCity(cityState)
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => setIsKeyboardShow(true)
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => setIsKeyboardShow(false)
+    );
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+  return (
+    <Container height={height - top - bottom - 60 - (isKeyboardShow ? 250 : 0)}>
+      <View>
+        {cities?.map((city: any) => city?.enabled && (
+          <CityElement
+            key={city?.id}
+            activeOpacity={1}
+            disabled={orderState?.loading}
+            onPress={() => setCityState(city?.id === cityState ? null : city?.id)}
+          >
+            <OIcon
+              src={cityState === city?.id
+                ? theme.images.general.option_checked
+                : theme.images.general.option_normal}
+              width={16}
+              style={{ marginEnd: 24 }}
+            />
+            <OText color={theme.colors.black}>
+              {city?.name}
+            </OText>
+          </CityElement>
+        ))}
+      </View>
+      <OButton
+        text={t('CONTINUE', 'Continue')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        style={styles.btnStyle}
+        textStyle={{ color: 'white' }}
+        onClick={() => handleClick()}
+      />
+    </Container>
+  )
+}
+
+const styles = StyleSheet.create({
+  btnStyle: {
+    marginTop: 20,
+    borderRadius: 8,
+    shadowOpacity: 0,
+    height: 44
+  },
+})

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

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding: 0 40px;
+  justify-content: space-between;
+  padding-bottom: 12px;
+
+  ${(props: any) => props.height && css`
+    height: ${props.height}px;
+  `}
+`
+
+export const CityElement = styled.TouchableOpacity`
+  padding: 10px;
+  flex-direction: row;
+`

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+import { Platform } from 'react-native'
 import { FavoriteList } from '../FavoriteList'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
@@ -13,8 +14,7 @@ import {
 
 export const Favorite = (props: any) => {
   const {
-    navigation,
-    franchiseId
+    navigation
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
@@ -34,7 +34,9 @@ export const Favorite = (props: any) => {
   }
 
   return (
-    <Container>
+    <Container
+      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
+    >
       <NavBar
         title={t('FAVORITE', 'Favorite')}
         titleAlign={'center'}
@@ -52,9 +54,9 @@ export const Favorite = (props: any) => {
           >
             <OText
               color={menu.key === tabSelected ? theme.colors.textNormal : theme.colors.disabled}
-					    size={14}
-					    weight={menu.key === tabSelected ? '500' : '400'}
-					    style={{ marginBottom: 12 }}
+              size={14}
+              weight={menu.key === tabSelected ? '500' : '400'}
+              style={{ marginBottom: 12 }}
             >
               {menu.name}
             </OText>
@@ -70,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' && (
@@ -79,7 +80,6 @@ export const Favorite = (props: any) => {
           originalURL='products'
           onNavigationRedirect={onRedirect}
           isProduct
-          franchiseId={franchiseId}
         />
       )}
       {tabSelected === 'orders' && (
@@ -88,7 +88,6 @@ export const Favorite = (props: any) => {
           favoriteURL='favorite_orders'
           originalURL='orders'
           isOrder
-          franchiseId={franchiseId}
         />
       )}
     </Container>

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

@@ -18,5 +18,5 @@ export const Tab = styled.TouchableOpacity`
 export const Container = styled.View`
   padding-horizontal: 40px;
   padding-bottom: 20px;
-  padding-top: 30px;
+  padding-top: ${(props: any) => props.pdng};
 `

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

@@ -62,7 +62,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 	return (
 		<Container
 			style={{
-				paddingBottom: Platform.OS === 'ios' ? iosBottom ?? 0 : bottom + 16
+				paddingBottom: Platform.OS === 'ios' ? 20 : bottom + 16
 			}}>
 
 			<View style={styles.infoCont}>
@@ -86,7 +86,6 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 					{btnText}
 				</OText>
 			</Button>
-
 		</Container>
 	);
 };

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

@@ -12,7 +12,7 @@ export const Container = styled.View`
   width: 100%;
   justify-content: space-between;
   background-color: #FFF;
-  z-index: 9999;
+  z-index: 20001;
   justify-content: space-between;
 `
 

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%;
+`