ordering-ui-react-native 0.15.3 → 0.15.5-release

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

@@ -85,7 +85,11 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 				order: {
 					id: order?.id,
 					business_id: order?.business_id,
-					logo: order.business?.logo,
+					logo: order?.business?.logo,
+					driver: order?.driver,
+					products: order?.products,
+					review: order?.review,
+					user_review: order?.user_review
 				},
 			});
 	};
@@ -139,18 +143,20 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 							</OText>
 						</Information>
 						<Status>
-							<OButton
-								text={t('REORDER', 'Reorder')}
-								imgRightSrc={''}
-								textStyle={styles.buttonText}
-								style={
-									reorderLoading && order.id === reorderSelected
-										? styles.reorderLoading
-										: styles.reorderbutton
-								}
-								onClick={() => handleReorderClick(order.id)}
-								isLoading={reorderLoading && order.id === reorderSelected}
-							/>
+							{order.cart && (
+								<OButton
+									text={t('REORDER', 'Reorder')}
+									imgRightSrc={''}
+									textStyle={styles.buttonText}
+									style={
+										reorderLoading && order.id === reorderSelected
+											? styles.reorderLoading
+											: styles.reorderbutton
+									}
+									onClick={() => handleReorderClick(order.id)}
+									isLoading={reorderLoading && order.id === reorderSelected}
+								/>
+							)}
 							{allowedOrderStatus.includes(parseInt(order?.status)) &&
 								!order.review && (
 									<TouchableOpacity