ordering-ui-react-native 0.16.99 → 0.17.0-release

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

@@ -9,7 +9,7 @@ export const TopActions = styled.TouchableOpacity`
 	height: 60px;
 	justify-content: center;
   padding-horizontal: 30px;
-  width: 80px;
+  width: 100px;
 `;
 
 export const TopHeader = styled.View`
@@ -44,12 +44,10 @@ export const ProductTitle = styled.View`
   padding-bottom: 7px;
 `
 
-export const ProductDescription = styled.View`
-  margin-bottom: 20px;
-`
+export const ProductDescription = styled.View``
 
 export const ProductEditions = styled.View`
-  padding: 0 40px;
+  padding-vertical: 0;
 `
 
 export const SectionTitle = styled.View`
@@ -82,7 +80,6 @@ export const ProductActions = styled.View`
   border-top-color: ${(props: any) => props.theme.colors.border};
 `
 export const ExtraOptionWrap = styled.ScrollView`
-	margin-horizontal: 30px;
 `;
 
 export const WeightUnitSwitch = styled.View`
@@ -97,7 +94,7 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
-  padding: 26px 40px;
+  padding: 26px ${(props: any) => props.ph}px 0;
   position: relative;
   background-color: white;
   z-index: 100;

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

@@ -4,6 +4,8 @@ import { useUtils, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import RNPickerSelect from 'react-native-picker-select'
+import { ServiceForm } from '../ServiceForm';
+import FastImage from 'react-native-fast-image'
 
 import {
 	Accordion,
@@ -18,7 +20,7 @@ import {
 	ProductSubOption,
 	ProductComment
 } from './styles'
-import { OIcon, OText, OAlert } from '../shared'
+import { OIcon, OText, OAlert, OModal } from '../shared'
 
 import { ProductItemAccordionParams } from '../../types'
 
@@ -68,9 +70,10 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const [, t] = useLanguage()
 	const [orderState] = useOrder()
-	const [{ parsePrice, optimizeImage }] = useUtils()
+	const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
 
 	const [isActive, setActiveState] = useState(false)
+	const [isServiceOpen, setIsServiceOpen] = useState(false)
 	// const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
 	// const [setRotate, setRotateState] = useState({ angle: new Animated.Value(0) })
 
@@ -92,6 +95,14 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		return product
 	}
 
+	const handleEditProduct = (curProduct: any) => {
+		if (!curProduct?.calendar_event) {
+			onEditProduct && onEditProduct(curProduct)
+			return
+		}
+		setIsServiceOpen(true)
+	}
+
 	/* const toggleAccordion = () => {
 		if ((!product?.valid_menu && isCartProduct)) return
 		if (isActive) {
@@ -133,135 +144,195 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 	})
 
 	return (
-		<AccordionSection>
-			<Accordion
-				isValid={product?.valid ?? true}
-				onPress={() => (!product?.valid_menu && isCartProduct)
-					? {}
-					: setActiveState(!isActive)}
-				activeOpacity={1}
-			>
-				<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
-					<ContentInfo>
-						{(product?.images || theme?.images?.dummies?.product) && (
-							<ProductImage>
-								{isFromCheckout ? (
-									<OIcon url={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_100,c_limit')} style={{ ...styles.productImage, ...{ width: 82, height: 82 } }} />
-								) : (
-									<OIcon url={optimizeImage(product?.images || theme?.images?.dummies?.product, 'h_100,c_limit')} style={styles.productImage} />
-								)}
-							</ProductImage>
-						)}
-						{isCartProduct && !isCartPending && getProductMax && (
-							<ProductInfo>
-								<RNPickerSelect
-									items={productOptions}
-									onValueChange={handleChangeQuantity}
-									value={product.quantity.toString()}
-									style={pickerStyle}
-									useNativeAndroidPickerStyle={false}
-									placeholder={{}}
-									Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
-									disabled={orderState.loading}
-								/>
-							</ProductInfo>
-						)}
-						{isFromCheckout && (
-							<ProductQuantity>
-								<OText size={12} lineHeight={18}>
-									{product?.quantity}
-								</OText>
-							</ProductQuantity>
-						)}
-						<View style={{ flex: 1 }}>
-							<OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
-						</View>
-						<View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end' }}>
-							<View style={{ flexDirection: 'row' }}>
-								<OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
-								{(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || product.comment) && (
-									<MaterialCommunityIcon name='chevron-down' size={18} />
-								)}
+		<>
+			<AccordionSection>
+				<Accordion
+					isValid={product?.valid ?? true}
+					onPress={() => (!product?.valid_menu && isCartProduct)
+						? {}
+						: setActiveState(!isActive)}
+					activeOpacity={1}
+				>
+					<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+						<ContentInfo>
+							{(product?.images || theme?.images?.dummies?.product) && (
+								<ProductImage>
+									{isFromCheckout ? (
+										product?.images ? (
+											<FastImage
+												style={{ ...styles.productImage, ...{ width: 82, height: 82 } }}
+												source={{
+													uri: optimizeImage(product?.images, 'h_100,c_limit'),
+													priority: FastImage.priority.normal,
+												}}
+												resizeMode={FastImage.resizeMode.cover}
+											/>
+										) : (
+											<OIcon
+												src={theme?.images?.dummies?.product}
+												style={{ ...styles.productImage, ...{ width: 82, height: 82 } }}
+											/>
+										)
+									) : (
+										product?.images ? (
+											<FastImage
+												style={styles.productImage}
+												source={{
+													uri: optimizeImage(product?.images, 'h_100,c_limit'),
+													priority: FastImage.priority.normal,
+												}}
+												resizeMode={FastImage.resizeMode.cover}
+											/>
+										) : (
+											<OIcon
+												src={theme?.images?.dummies?.product}
+												style={styles.productImage}
+											/>
+										)
+									)}
+								</ProductImage>
+							)}
+							{!!product?.calendar_event ? (
+								<View style={{ flex: 1, marginLeft: 10, flexDirection: 'column' }}>
+									<View>
+										<OText size={12} lineHeight={18} weight={'400'} numberOfLines={1}>{product?.name}</OText>
+									</View>
+									<OText size={10} color={theme.colors.textSecondary} style={{ marginTop: 3 }}>
+										{parseDate(product?.calendar_event?.start, { outputFormat: 'hh:mm a' })} - {parseDate(product?.calendar_event?.end, { outputFormat: 'hh:mm a' })}
+									</OText>
+								</View>
+							) : (
+								<>
+									{isCartProduct && !isCartPending && getProductMax && (
+										<ProductInfo>
+											<RNPickerSelect
+												items={productOptions}
+												onValueChange={handleChangeQuantity}
+												value={product.quantity.toString()}
+												style={pickerStyle}
+												useNativeAndroidPickerStyle={false}
+												placeholder={{}}
+												Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
+												disabled={orderState.loading}
+											/>
+										</ProductInfo>
+									)}
+									{isFromCheckout && (
+										<ProductQuantity>
+											<OText size={12} lineHeight={18}>
+												{product?.quantity}
+											</OText>
+										</ProductQuantity>
+									)}
+									<View style={{ flex: 1 }}>
+										<OText size={12} lineHeight={18} weight={'400'}>{product.name}</OText>
+									</View>
+								</>
+							)}
+							<View style={{ display: 'flex', flexDirection: 'column', flex: 1, alignItems: 'flex-end', maxWidth: 100 }}>
+								<View style={{ flexDirection: 'row' }}>
+									<OText size={12} lineHeight={18} weight={'400'}>{parsePrice(product.total || product.price)}</OText>
+									{(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || !!product.comment) && (
+										<MaterialCommunityIcon name='chevron-down' size={18} />
+									)}
+								</View>
+								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', height: 20 }}>
+									{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
+										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginRight: 5 }}>
+											<MaterialCommunityIcon
+												name='pencil-outline'
+												size={20}
+												color={theme.colors.textSecondary}
+											/>
+										</TouchableOpacity>
+									)}
+									{onDeleteProduct && isCartProduct && !isCartPending && (
+										<OAlert
+											title={t('DELETE_PRODUCT', 'Delete Product')}
+											message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
+											onAccept={() => onDeleteProduct(product)}
+										>
+											<MaterialCommunityIcon
+												name='trash-can-outline'
+												size={20}
+												color={theme.colors.textSecondary}
+											/>
+										</OAlert>
+									)}
+								</View>
 							</View>
-							<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
-								{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
-									<TouchableOpacity onPress={() => onEditProduct(product)} style={{ marginEnd: 7 }}>
-										<OIcon
-											src={theme.images.general.pencil}
-											width={16}
-											color={theme.colors.textSecondary}
-										/>
-									</TouchableOpacity>
-								)}
-								{onDeleteProduct && isCartProduct && !isCartPending && (
-									<OAlert
-										title={t('DELETE_PRODUCT', 'Delete Product')}
-										message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
-										onAccept={() => onDeleteProduct(product)}
-									>
-										<OIcon
-											src={theme.images.general.trash}
-											width={17}
-											color={theme.colors.textSecondary}
-										/>
-									</OAlert>
-								)}
+						</ContentInfo>
+					</View>
+					{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
+						(!product?.valid_menu && isCartProduct && !isCartPending)) && (
+							<View style={{ alignItems: 'flex-end', width: '100%', }}>
+								<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
+									{t('NOT_AVAILABLE', 'Not available')}
+								</OText>
 							</View>
-						</View>
-					</ContentInfo>
-				</View>
-				{((isCartProduct && !isCartPending && product?.valid_menu && !product?.valid_quantity) ||
-					(!product?.valid_menu && isCartProduct && !isCartPending)) && (
-						<View style={{ alignItems: 'flex-end', width: '100%', }}>
-							<OText size={14} color={theme.colors.red} style={{ textAlign: 'right', marginTop: 5 }}>
-								{t('NOT_AVAILABLE', 'Not available')}
-							</OText>
-						</View>
-					)}
-			</Accordion>
-
-			<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 40 }}>
-				<Animated.View>
-					<AccordionContent>
-						{productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
-							<ProductOptionsList>
-								<OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
-								{productInfo().ingredients.map((ingredient: any) => !ingredient.selected && (
-									<OText size={10} color={theme.colors.textThird} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
-								))}
-							</ProductOptionsList>
-						)}
-						{productInfo().options.length > 0 && (
-							<ProductOptionsList>
-								{productInfo().options.map((option: any, i: number) => (
-									<ProductOption key={option.id + i}>
-										<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
-										{option.suboptions.map((suboption: any) => (
-											<ProductSubOption key={suboption.id}>
-												<OText size={10} color={theme.colors.textThird}>
-													{getFormattedSubOptionName({
-														quantity: suboption.quantity,
-														name: suboption.name,
-														position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-														price: parsePrice(suboption.price)
-													})}
-												</OText>
-											</ProductSubOption>
-										))}
-									</ProductOption>
-								))}
-							</ProductOptionsList>
 						)}
-						{product.comment && (
-							<ProductComment>
-								<OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
-								<OText size={10} color={theme.colors.textThird}>{product.comment}</OText>
-							</ProductComment>
-						)}
-					</AccordionContent>
-				</Animated.View>
-			</View>
-		</AccordionSection>
+				</Accordion>
+
+				<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 40 }}>
+					<Animated.View>
+						<AccordionContent>
+							{productInfo().ingredients.length > 0 && productInfo().ingredients.some((ingredient: any) => !ingredient.selected) && (
+								<ProductOptionsList>
+									<OText size={10} color={theme.colors.textSecondary}>{t('INGREDIENTS', 'Ingredients')}</OText>
+									{productInfo().ingredients.map((ingredient: any) => !ingredient.selected && (
+										<OText size={10} color={theme.colors.textThird} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
+									))}
+								</ProductOptionsList>
+							)}
+							{productInfo().options.length > 0 && (
+								<ProductOptionsList>
+									{productInfo().options.map((option: any, i: number) => (
+										<ProductOption key={option.id + i}>
+											<OText size={10} color={theme.colors.textSecondary}>{option.name}</OText>
+											{option.suboptions.map((suboption: any) => (
+												<ProductSubOption key={suboption.id}>
+													<OText size={10} color={theme.colors.textThird}>
+														{getFormattedSubOptionName({
+															quantity: suboption.quantity,
+															name: suboption.name,
+															position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
+															price: parsePrice(suboption.price)
+														})}
+													</OText>
+												</ProductSubOption>
+											))}
+										</ProductOption>
+									))}
+								</ProductOptionsList>
+							)}
+							{!!product.comment && (
+								<ProductComment>
+									<OText size={10} color={theme.colors.textSecondary}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
+									<OText size={10} color={theme.colors.textThird}>{product.comment}</OText>
+								</ProductComment>
+							)}
+						</AccordionContent>
+					</Animated.View>
+				</View>
+			</AccordionSection>
+			<OModal
+				open={isServiceOpen}
+				onClose={() => setIsServiceOpen(false)}
+				entireModal
+			>
+				<ServiceForm
+					isCartProduct
+					isService
+					businessId={product?.business_id}
+					categoryId={product?.category_id}
+					productId={product?.id}
+					productCart={product}
+					onSave={() => setIsServiceOpen(false)}
+					onClose={() => setIsServiceOpen(false)}
+					professionalSelected={product?.calendar_event?.professional}
+				/>
+			</OModal>
+		</>
 	)
 }
 

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

@@ -6,6 +6,7 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 import {
 	Container,
@@ -31,15 +32,18 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		setIsScrollAvailable
 	} = props
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max || state.quantity === suboption?.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
-	
+
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const iconsSize = isChewLayout ? 20 : 16
+
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
@@ -87,9 +91,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					{option?.allow_suboption_quantity && state?.selected && (
 						<>
 							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-								<OIcon
-									src={theme.images.general.minus}
-									width={16}
+								<IconAntDesign
+									name='minuscircleo'
+									size={iconsSize}
 									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
@@ -97,9 +101,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								{state.quantity}
 							</OText>
 							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-								<OIcon
-									src={theme.images.general.plus}
-									width={16}
+								<IconAntDesign
+									name='pluscircleo'
+									size={iconsSize}
 									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
@@ -135,12 +139,16 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					)}
 				</PositionControl>
 				{price > 0 && (
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} style={{ paddingRight: 10 }}>
 						+ {parsePrice(price)}
 					</OText>
 				)}
 			</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>}
+			{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>
+			)}
 		</View>
 	)
 }

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

@@ -4,12 +4,12 @@ export const Container = styled.TouchableOpacity`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 10px;
   width: 100%;
 `
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
+  padding: 10px;
   width: 45%;
   align-items: center;
 `
@@ -21,7 +21,6 @@ export const QuantityControl = styled.View`
   margin-horizontal: 5px;
   flex: 1;
   width: 60px;
-
 `
 
 export const PositionControl = styled.View`

package/themes/original/src/components/ProfessionalFilter/SingleProfessionalCard/index.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import {
+  useSession,
+  useUtils,
+  SingleProfessionalCard as SingleProfessionalCardController
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import { OIcon, OText } from '../../shared'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+
+const SingleProfessionalCardUI = (props) => {
+  const {
+    professional,
+    handleFavoriteProfessional,
+    active,
+    handleProfessionalClick
+  } = props
+
+  const theme = useTheme()
+  const [{ auth }] = useSession()
+  const [{ optimizeImage }] = useUtils()
+
+  const handleChangeFavorite = () => {
+    if (auth) {
+      handleFavoriteProfessional && handleFavoriteProfessional(!professional?.favorite)
+    }
+  }
+
+  const styles = StyleSheet.create({
+    professionalItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      borderRadius: 7.6,
+      padding: 11,
+      borderWidth: 1,
+      marginRight: 12,
+      minHeight: 64
+    },
+		photoStyle: {
+			width: 42,
+			height: 42,
+			borderRadius: 7.6
+		},
+    favoriteIconStyle: {
+			width: 16,
+			height: 16,
+		},
+  })
+
+  return (
+    <TouchableOpacity
+      onPress={() => handleProfessionalClick(professional)}
+    >
+      <View
+        style={{
+          ...styles.professionalItem,
+          borderColor: active
+            ? theme.colors.primary
+            : theme.colors.border 
+        }}
+      >
+        {professional?.photo ? (
+          <FastImage
+            style={styles.photoStyle}
+            source={{
+              uri: optimizeImage(professional?.photo, 'h_250,c_limit'),
+              priority: FastImage.priority.normal,
+            }}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+        ) : (
+          <OIcon
+            src={theme?.images?.general?.user}
+            cover={false}
+            style={styles.photoStyle}
+          />
+        )}
+        <View style={{ marginLeft: 12 }}>
+          <OText
+            size={12}
+            weight={'400'}
+          >
+            {professional?.name} {professional?.lastname}
+          </OText>
+
+          <TouchableOpacity
+            onPress={() => handleChangeFavorite()}
+          >
+            {professional?.favorite
+              ? <IconAntDesign name='heart' size={16} color={theme.colors.danger5} />
+              : <IconAntDesign name='hearto' size={16} color={theme.colors.danger5} />
+            }
+          </TouchableOpacity>
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export const SingleProfessionalCard = (props) => {
+  const singleProfessionalCardProps = {
+    ...props,
+    UIComponent: SingleProfessionalCardUI
+  }
+  return <SingleProfessionalCardController {...singleProfessionalCardProps} />
+}