ordering-ui-react-native 0.14.85 → 0.14.86-release

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
 				},
 			});
 	};

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

@@ -264,7 +264,15 @@ export const ProductOptionsUI = (props: any) => {
 				}
 				if (img?.video) {
 					const keys = img?.video.split('/')
-					const _videoId = keys[keys.length - 1]
+					let _videoId = keys[keys.length - 1]
+					if (_videoId.includes('watch')) {
+						const __url = _videoId.split('=')[1]
+						_videoId = __url
+					}
+					if (_videoId.includes('?')) {
+						const __url = _videoId.split('?')[0]
+						_videoId = __url
+					}
 					videoList.push(_videoId)
 				}
 			}
@@ -304,9 +312,9 @@ export const ProductOptionsUI = (props: any) => {
 					</OText>
 				</TouchableOpacity>
 			)}
-			{options.map(({ id, name, respect_to }: any) => (
+			{options.map(({ id, name, respect_to, suboptions }: any) => (
 				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && (
+					{respect_to == null && suboptions?.length > 0 && (
 						<TouchableOpacity
 							key={`eopt_key_${id}`}
 							onPress={() => setSelectedOpt(id)}
@@ -396,7 +404,7 @@ export const ProductOptionsUI = (props: any) => {
 													<FastImage
 														style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
 														source={{
-															uri: optimizeImage(img, 'h_258,c_limit'),
+															uri: optimizeImage(img, 'h_1024,c_limit'),
 															priority: FastImage.priority.normal,
 														}}
 													/>
@@ -436,7 +444,7 @@ export const ProductOptionsUI = (props: any) => {
 												>
 													{img.includes('image') ? (
 														<OIcon
-															url={img}
+															url={optimizeImage(img, 'h_250,c_limit')}
 															style={{
 																borderColor: theme.colors.lightGray,
 																borderRadius: 8,
@@ -834,9 +842,13 @@ export const ProductOptionsUI = (props: any) => {
 			</ScrollView>
 			{!loading && !error && product && (
 				<ProductActions ios={Platform?.OS === 'ios'}>
-					<OText size={16} lineHeight={24} weight={'600'}>
-						{productCart.total ? parsePrice(productCart?.total) : ''}
-					</OText>
+					<View>
+						<OText size={16} lineHeight={24} weight={'600'}>
+							{productCart.total ? parsePrice(productCart?.total) : ''}
+						</OText>
+						{product?.minimum_per_order && productCart?.quantity < product?.minimum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MINIMUM_TO_ORDER', 'Min. _number_ ').replace('_number_', product?.minimum_per_order)}</OText>}
+						{product?.maximum_per_order && productCart?.quantity > product?.maximum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MAXIMUM_TO_ORDER', 'Max. _number_'.replace('_number_', product?.maximum_per_order))}</OText>}
+					</View>
 					{productCart && !isSoldOut && maxProductQuantity > 0 && (
 						<View style={styles.quantityControl}>
 							<TouchableOpacity
@@ -845,6 +857,7 @@ export const ProductOptionsUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.minus}
 									width={16}
+									style={{ borderWidth: 1, borderColor: 'red' }}
 									color={
 										productCart.quantity === 1 || isSoldOut
 											? theme.colors.backgroundGray
@@ -888,6 +901,7 @@ export const ProductOptionsUI = (props: any) => {
 								<OIcon
 									src={theme.images.general.plus}
 									width={16}
+									style={{ borderWidth: 1, borderColor: 'red' }}
 									color={
 										maxProductQuantity <= 0 ||
 											productCart.quantity >= maxProductQuantity ||
@@ -935,28 +949,29 @@ export const ProductOptionsUI = (props: any) => {
 						style={{
 							width: isSoldOut || maxProductQuantity <= 0 ? '60%' : '40%',
 						}}>
-						{productCart &&
-							!isSoldOut &&
-							maxProductQuantity > 0 &&
+						{((productCart &&
 							auth &&
-							orderState.options?.address_id && (
+							orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
 								<OButton
 									onClick={() => handleSaveProduct()}
 									imgRightSrc=""
 									text={`${orderState.loading
 										? t('LOADING', 'Loading')
-										: editMode
-											? t('UPDATE', 'Update')
-											: t('ADD', 'Add')
+										: (isSoldOut || maxProductQuantity <= 0)
+											? t('SOLD_OUT', 'Sold out')
+											: editMode
+												? t('UPDATE', 'Update')
+												: t('ADD', 'Add')
 										}`}
+									isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
 									textStyle={{
-										color: (saveErrors || !productCart.quantity) ? theme.colors.primary : theme.colors.white,
+										color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
 										fontSize: orderState.loading || editMode ? 10 : 14
 									}}
 									style={{
-										backgroundColor: (saveErrors || !productCart.quantity) ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: (saveErrors || !productCart.quantity) ? theme.colors.white : theme.colors.primary,
-										opacity: (saveErrors || !productCart.quantity) ? 0.3 : 1,
+										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
+										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
+										opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
 										borderRadius: 7.6,
 										height: 44,
 										shadowOpacity: 0,
@@ -976,7 +991,7 @@ export const ProductOptionsUI = (props: any) => {
 							) : (
 								<OButton onClick={navigation.navigate('AddressList')} />
 							))}
-						{(!auth || isSoldOut || maxProductQuantity <= 0) && (
+						{!auth && (
 							<OButton
 								isDisabled={isSoldOut || maxProductQuantity <= 0}
 								onClick={() => handleRedirectLogin()}

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

@@ -48,7 +48,6 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
 `
 
 export const SectionTitle = styled.View`

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

@@ -5,7 +5,7 @@ import {
 	ProductOptionSuboption as ProductSubOptionController
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
-import { StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import {
 	Container,
@@ -27,7 +27,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		suboption,
 		toggleSelect,
 		changePosition,
-		disabled
+		disabled,
+		error,
+		scrollDown
 	} = props
 
 	const theme = useTheme();
@@ -38,6 +40,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
+		if (error) {
+			scrollDown(option?.id)
+		}
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}
@@ -52,81 +57,83 @@ export const ProductOptionSubOptionUI = (props: any) => {
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 	return (
-		<Container onPress={() => handleSuboptionClick()}>
-			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
-				{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
-					state?.selected ? (
-						<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
-					) : (
-						<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
-					)
-				) : (
-					state?.selected ? (
-						<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+		<View>
+			<Container onPress={() => handleSuboptionClick()}>
+				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
+					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
+						state?.selected ? (
+							<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
+						) : (
+							<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
+						)
 					) : (
-						<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
-					)
-				)}
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
-					{suboption?.name}
+						state?.selected ? (
+							<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} />
+						)
+					)}
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
+						{suboption?.name}
+					</OText>
+				</IconControl>
+				<QuantityControl>
+					{option?.allow_suboption_quantity && state?.selected && (
+						<>
+							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+								<OIcon
+									src={theme.images.general.minus}
+									width={16}
+									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
+								/>
+							</Checkbox>
+							<OText size={12} mLeft={5} mRight={5}>
+								{state.quantity}
+							</OText>
+							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+								<OIcon
+									src={theme.images.general.plus}
+									width={16}
+									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+								/>
+							</Checkbox>
+						</>
+					)}
+				</QuantityControl>
+				<PositionControl>
+					{option?.with_half_option && state?.selected && (
+						<>
+							<Circle disabled={disabled} onPress={() => changePosition('left')}>
+								<OIcon
+									src={theme.images.general.half_l}
+									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+									style={styles.inverse}
+								/>
+							</Circle>
+							<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+								<OIcon
+									src={theme.images.general.half_f}
+									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+								/>
+							</Circle>
+							<Circle disabled={disabled} onPress={() => changePosition('right')}>
+								<OIcon
+									src={theme.images.general.half_r}
+									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+								/>
+							</Circle>
+						</>
+					)}
+				</PositionControl>
+				<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+					+ {parsePrice(price)}
 				</OText>
-			</IconControl>
+			</Container>
 			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
-			<QuantityControl>
-				{option?.allow_suboption_quantity && state?.selected && (
-					<>
-						<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-							<OIcon
-								src={theme.images.general.minus}
-								width={16}
-								color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-							/>
-						</Checkbox>
-						<OText size={12} mLeft={5} mRight={5}>
-							{state.quantity}
-						</OText>
-						<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-							<OIcon
-								src={theme.images.general.plus}
-								width={16}
-								color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
-							/>
-						</Checkbox>
-					</>
-				)}
-			</QuantityControl>
-			<PositionControl>
-				{option?.with_half_option && state?.selected && (
-					<>
-						<Circle disabled={disabled} onPress={() => changePosition('left')}>
-							<OIcon
-								src={theme.images.general.half_l}
-								color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-								style={styles.inverse}
-							/>
-						</Circle>
-						<Circle disabled={disabled} onPress={() => changePosition('whole')}>
-							<OIcon
-								src={theme.images.general.half_f}
-								color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-							/>
-						</Circle>
-						<Circle disabled={disabled} onPress={() => changePosition('right')}>
-							<OIcon
-								src={theme.images.general.half_r}
-								color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-							/>
-						</Circle>
-					</>
-				)}
-			</PositionControl>
-			<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-				+ {parsePrice(price)}
-			</OText>
-		</Container>
+		</View>
 	)
 }