ordering-ui-react-native 0.14.90 → 0.14.92-release

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

@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react'
 import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
-import { OText, OButton } from '../shared'
+import { OText } from '../shared'
 import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 
-import { OptionTitle, NoOrdersWrapper } from './styles'
+import { OptionTitle } from './styles'
 import { OrdersOptionParams } from '../../types'
 
 import {
@@ -32,8 +32,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		loadMoreStatus,
 		loadMoreOrders,
 		loadOrders,
-		setOrdersLength,
-		ordersLength
 	} = props
 
 	const theme = useTheme();
@@ -116,50 +114,28 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		}
 	}, [loadMoreStatus, loading, pagination])
 
-	useEffect(() => {
-		if (loading) return
-
-		const updateOrders = orders.filter((order: any) => orderStatus.includes(order.status))
-
-		if (activeOrders) {
-			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
-		} else if (!preOrders) {
-			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
-		}
-	}, [orders?.length])
-
 	return (
 		<>
-			<OptionTitle>
-				<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-					{titleContent || (activeOrders
-						? t('ACTIVE', 'Active')
-						: preOrders
-							? t('PREORDERS', 'Preorders')
-							: t('PAST', 'Past'))}
-				</OText>
-			</OptionTitle>
-			{!(activeOrders && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) && !loading && orders.length === 0 && (
+			{(orders.length > 0) && (
+				<>
+					<OptionTitle>
+						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+							{titleContent || (activeOrders
+								? t('ACTIVE', 'Active')
+								: preOrders
+									? t('PREORDERS', 'Preorders')
+									: t('PAST', 'Past'))}
+						</OText>
+					</OptionTitle>
+				</>
+			)}
+			{!loading && orders.length === 0 && (
 				<NotFoundSource
 					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
 					image={imageFails}
 					conditioned
 				/>
 			)}
-			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && activeOrders && (
-				<NoOrdersWrapper>
-					<OText size={14} numberOfLines={1}>
-						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
-					</OText>
-					<OButton
-						text={t('ORDER_NOW', 'Order now')}
-						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
-						textStyle={{ color: 'white', fontSize: 14 }}
-						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
-					/>
-					
-				</NoOrdersWrapper>
-			)}
 			{loading && (
 				<>
 					{!activeOrders ? (

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

@@ -3,8 +3,3 @@ import styled from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 `
-
-export const NoOrdersWrapper = styled.View`
-	flex-direction: column;
-	align-items: center;
-`

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

@@ -9,6 +9,8 @@ import {
 import {
 	PaymentOptions as PaymentOptionsController,
 	useLanguage,
+  ToastType,
+	useToast,
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { PaymentOptionCash } from '../PaymentOptionCash';
@@ -30,8 +32,6 @@ import {
 import { getIconCard, flatArray } from '../../utils';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
-const methodsPay = ['google_pay', 'apple_pay']
-const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 // const stripeRedirectOptions = [
 //   { name: 'Bancontact', value: 'bancontact' },
 //   { name: 'Alipay', value: 'alipay' },
@@ -54,12 +54,11 @@ const PaymentOptionsUI = (props: any) => {
 		handlePaymethodClick,
 		handlePaymethodDataChange,
 		isOpenMethod,
-		handlePaymentMethodClickCustom,
-		handlePlaceOrder
+		handlePaymentMethodClickCustom
 	} = props
 
 	const theme = useTheme();
-
+  const [, { showToast }] = useToast();
 
 	const getPayIcon = (method: string) => {
 		switch (method) {
@@ -95,11 +94,18 @@ const PaymentOptionsUI = (props: any) => {
 	// ]
 
 	const handlePaymentMethodClick = (paymethod: any) => {
-		const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
-		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
-			handlePaymentMethodClickCustom(paymethod)
-		}
-		handlePaymethodClick(paymethod, isPopupMethod)
+    if (cart?.balance > 0) {
+      const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+      if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+        handlePaymentMethodClickCustom(paymethod)
+      }
+      handlePaymethodClick(paymethod, isPopupMethod)
+      return
+    }
+    showToast(
+			ToastType.Error,
+			t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method'))
+		;
 	}
 
 	useEffect(() => {
@@ -116,16 +122,12 @@ const PaymentOptionsUI = (props: any) => {
 
 	useEffect(() => {
 		if (props.paySelected && props.paySelected?.data) {
-			setPaymethodData && setPaymethodData(props.paySelected?.data)
+			requestAnimationFrame(() => {
+				setPaymethodData && setPaymethodData(props.paySelected?.data)
+			})
 		}
 	}, [props.paySelected])
 
-	useEffect(() => {
-		if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
-		  handlePlaceOrder()
-		}
-	}, [paymethodData, paymethodSelected])
-
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<TouchableOpacity
@@ -154,7 +156,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [32]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>
@@ -287,11 +289,11 @@ const PaymentOptionsUI = (props: any) => {
 				</KeyboardAvoidingView>
 			</OModal>
 
-			{/* Stripe direct, Google pay, Apple pay */}
+			{/* Stripe direct */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
+				open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
 				onClose={() => handlePaymethodClick(null)}
 			>
 				<KeyboardAvoidingView
@@ -300,13 +302,10 @@ const PaymentOptionsUI = (props: any) => {
 					enabled={Platform.OS === 'ios' ? true : false}
 				>
 					<StripeElementsForm
-						cart={cart}
-						paymethod={isOpenMethod?.paymethod?.gateway}
-						methodsPay={methodsPay}
 						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
+						publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
 						handleSource={handlePaymethodDataChange}
-						onCancel={() => handlePaymethodClick(null)}
+						onCancel={() => handlePaymethodClick(false)}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>

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

@@ -22,18 +22,23 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		textStyle,
 		flagStyle,
 		noDropIcon,
-    isDisabled
+    isDisabled,
+		isStartValidation
 	} = props
 
 	const theme = useTheme();
 
+	const [, t] = useLanguage()
+	const [{ configs }] = useConfig()
+	const phoneInput = useRef<PhoneInput>(null);
+	const [userphoneNumber, setUserphoneNumber] = useState('');
 
 	const style = StyleSheet.create({
 		input: {
 			backgroundColor: theme.colors.white,
 			borderRadius: 7.6,
 			borderWidth: 1,
-			borderColor: theme.colors.border,
+			borderColor: (isStartValidation && userphoneNumber === '') ? theme.colors.danger5 : theme.colors.border,
 			paddingBottom: 0,
 			paddingTop: 0,
 			flexGrow: 1,
@@ -48,12 +53,6 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		}
 	})
 
-
-	const [, t] = useLanguage()
-	const [{ configs }] = useConfig()
-	const phoneInput = useRef<PhoneInput>(null);
-	const [userphoneNumber, setUserphoneNumber] = useState('');
-
 	const handleChangeNumber = (number: any) => {
 		setUserphoneNumber(number)
 	}
@@ -97,6 +96,14 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 
 	return (
 		<Wrapper onPress={() => forwardRef?.current?.focus?.()}>
+			{(isStartValidation && userphoneNumber === '') && (
+				<OText
+					size={14}
+					color={theme.colors.danger5}
+				>
+					{t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))}*
+				</OText>
+			)}
 			<PhoneInput
 				ref={phoneInput}
         disabled={isDisabled}

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

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react'
+import { View } from 'react-native'
+import { PlaceSpot as PlaceSpotController, useLanguage } from 'ordering-components/native'
+import { PlaceGroupContainer, PlaceSpotContainer } from './styles'
+import { NotFoundSource } from '../NotFoundSource'
+import { OText, ODropDown } from '../shared'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { PlaceSpotParams } from '../../types'
+
+const PlaceSpotUI = (props: PlaceSpotParams) => {
+  const {
+    isOpenPlaceSpot,
+    cart,
+    placesState,
+    handleChangePlace,
+    getPlacesList,
+    setOpenPlaceModal
+  } = props
+
+  const [, t] = useLanguage()
+  const [placeGroupSelected, setPlaceGroupSelected] = useState<any>(null)
+
+  const getPlacesGroups = () => {
+    const groups = placesState.placeGroups?.filter((group: any) => group?.enabled && placesState?.places?.find((place: any) => place?.enabled && place?.place_group_id === group?.id))
+    return groups.map((group: any) => ({
+      value: group,
+      content: group?.name,
+      showOnSelected: group?.name
+    }))
+  }
+
+  const getPlaces = () => {
+    const places = placeGroupSelected && placesState?.places?.filter((place: any) => place?.enabled && place?.place_group_id === placeGroupSelected?.id)
+    return places.map((place: any) => ({
+      value: place,
+      content: place.name,
+      showOnSelected: place.name
+    }))
+  }
+
+  const handlerChangePlace = (place: any) => {
+    setOpenPlaceModal(false)
+    handleChangePlace(place)
+  }
+
+
+  useEffect(() => {
+    if (!placesState?.loading) {
+      const placeGroupOnCart = placesState?.placeGroups.find((group: any) => group?.id === cart?.place?.place_group_id)
+      setPlaceGroupSelected(placeGroupOnCart)
+    }
+  }, [placesState])
+
+  useEffect(() => {
+    getPlacesList()
+  }, [isOpenPlaceSpot])
+
+  return (
+    <PlaceSpotContainer>
+      {(placesState.error || placesState?.placeGroups?.length === 0) && !placesState?.loading && (
+        <NotFoundSource
+          content={t('NO_PLACES_THIS_BUSINESS', 'There are not places for this business')}
+        />
+      )}
+      {placesState?.loading && (
+        <Placeholder>
+          <PlaceGroupContainer>
+            <PlaceholderLine width={100} height={25} />
+            <PlaceholderLine height={30} />
+          </PlaceGroupContainer>
+          <View>
+            <PlaceholderLine width={120} height={25} />
+            <PlaceholderLine height={30} />
+          </View>
+        </Placeholder>
+      )}
+      {!(placesState.error || placesState?.placeGroups?.length === 0) && !placesState?.loading && (
+        <>
+          <PlaceGroupContainer>
+            <OText size={16} mBottom={10}>{t('PLACE_GROUP', 'Place group')}</OText>
+            <ODropDown
+              placeholder={t('PLACE_GROUP', 'Place group')}
+              options={getPlacesGroups()}
+              onSelect={(group: any) => setPlaceGroupSelected(group)}
+              defaultValue={placeGroupSelected ?? cart?.place}
+              isModal
+            />
+          </PlaceGroupContainer>
+          {placeGroupSelected && (
+            <View>
+              <OText size={16} mBottom={10}>{t('SELECT_YOUR_SPOT', 'Select your spot')}</OText>
+              <ODropDown
+                onSelect={(place: any) => handlerChangePlace(place)}
+                placeholder={t('SELECT_YOUR_SPOT', 'Select your spot')}
+                options={getPlaces()}
+                defaultValue={placesState?.places?.find((place : any) => place?.id === cart?.place_id)}
+                isModal
+              />
+            </View>
+          )}
+        </>
+      )}
+    </PlaceSpotContainer>
+  )
+}
+
+export const PlaceSpot = (props: PlaceSpotParams) => {
+  const placeSpotProps = {
+    ...props,
+    UIComponent: PlaceSpotUI
+  }
+
+  return <PlaceSpotController {...placeSpotProps} />
+}

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const PlaceSpotContainer = styled.View`
+  min-height: 300px;
+  padding: 20px;
+`
+
+export const PlaceGroupContainer = styled.View`
+  margin-bottom: 40px;
+  margin-top: 20px;
+`

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

@@ -86,6 +86,10 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 					id: order?.id,
 					business_id: order?.business_id,
 					logo: order.business?.logo,
+					driver: order?.driver,
+					products: order?.products,
+					review: order?.review,
+					user_review: order?.user_review
 				},
 			});
 	};