ordering-ui-react-native 0.16.13 → 0.16.14-release

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

@@ -49,7 +49,7 @@ export const ProductDescription = styled.View`
 `
 
 export const ProductEditions = styled.View`
-
+  padding: 0 40px;
 `
 
 export const SectionTitle = styled.View`
@@ -65,26 +65,24 @@ export const WrapperSubOption = styled.View`
 `
 
 export const ProductComment = styled.View`
-  padding-bottom: 50px;
+  padding-bottom: ${(props: any) => props.pb || 60}px;
 `
 
 export const ProductActions = styled.View`
   position: absolute;
   bottom: 0px;
-	min-height: 70px;
   padding-top: ${(props: any) => props.ios ? '20px' : '0'};
   padding-horizontal: 40px;
+  padding-vertical: 20px;
   width: 100%;
-  flex-direction: row;
+  flex-direction: ${(props: any) => props.isColumn ? 'column' : 'row'};
   background-color: #FFF;
   z-index: 1000;
-  align-items: center;
-  justify-content: space-between;
   border-top-width: 1px;
   border-top-color: ${(props: any) => props.theme.colors.border};
 `
 export const ExtraOptionWrap = styled.ScrollView`
-	margin-horizontal: -40px;
+	margin-horizontal: 30px;
 `;
 
 export const WeightUnitSwitch = styled.View`
@@ -99,4 +97,8 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
+  padding: 26px 40px;
+  position: relative;
+  background-color: white;
+  z-index: 100;
 `

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

@@ -4,6 +4,7 @@ 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 {
 	Accordion,
@@ -18,7 +19,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 +69,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 +94,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 +143,167 @@ 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 && (
-							<ProductImage>
-								{isFromCheckout ? (
-									<OIcon url={optimizeImage(product?.images, 'h_100,c_limit')} style={{ ...styles.productImage, ...{ width: 82, height: 82 } }} />
-								) : (
-									<OIcon url={optimizeImage(product?.images, '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 ? (
+										<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>
+							)}
+							{!!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' }}>
+									{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
+										<TouchableOpacity onPress={() => handleEditProduct(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>
+									)}
+								</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/ProductOption/index.tsx

@@ -30,7 +30,7 @@ const ProductOptionUI = (props: any) => {
 	return (
 		<Container style={{ color: error ? 'orange' : theme.colors.white }}>
 			<WrapHeader>
-				<OText size={16} lineHeight={24} weight={'600'}>{option.name}</OText>
+				<OText size={16} lineHeight={24} weight={'600'} style={{ flex: 1 }}>{option.name}</OText>
 				<OText color={theme.colors.red}>{maxMin}</OText>
 			</WrapHeader>
 			{children}

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

@@ -0,0 +1,129 @@
+import React, { useState } from 'react'
+import { ScrollView, TouchableOpacity, View, StyleSheet, Platform } from 'react-native'
+import { useUtils, useLanguage } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import FastImage from 'react-native-fast-image'
+import { OIcon, OText, OModal } from '../shared'
+import { ProfessionalProfile } from '../ProfessionalProfile'
+import { ProfessionalFilterParams } from '../../types'
+
+export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
+  const {
+    professionals,
+    professionalSelected,
+		handleChangeProfessionalSelected
+  } = props
+
+  const theme = useTheme()
+  const [{ optimizeImage }] = useUtils()
+  const [, t] = useLanguage()
+  const [open, setOpen] = useState(false)
+  const [currentProfessional, setCurrentProfessional] = useState(null)
+
+  const handleOpenProfile = (professional: any) => {
+    setCurrentProfessional(professional)
+    setOpen(true)
+  }
+
+  const handleCloseProfile = () => {
+    setCurrentProfessional(null)
+    setOpen(false)
+  }
+
+  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
+		}
+  })
+
+  return (
+    <>
+      <ScrollView
+        horizontal
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      >
+        <TouchableOpacity
+          onPress={() => handleChangeProfessionalSelected(null)}
+        >
+          <View
+            style={{
+              ...styles.professionalItem,
+              borderColor: !professionalSelected
+                ? theme.colors.primary
+                : theme.colors.border 
+            }}
+          >
+            <OText
+              size={12}
+              weight={'400'}
+            >
+              {t('ANY_PROFESSIONAL_MEMBER', 'Any professional member')}
+            </OText>
+          </View>
+        </TouchableOpacity>
+        {professionals.map((professional: any, i: number) => (
+          <TouchableOpacity
+            key={i}
+            onPress={() => handleOpenProfile(professional)}
+          >
+            <View
+              style={{
+                ...styles.professionalItem,
+                borderColor: (professional?.id === professionalSelected?.id)
+                  ? 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}
+                />
+              )}
+              <OText
+                size={12}
+                style={{ marginLeft: 12 }}
+                weight={'400'}
+              >
+                {professional?.name} {professional?.lastname}
+              </OText>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+      <OModal
+				open={open}
+				onClose={() => handleCloseProfile()}
+				entireModal
+			>
+				<ProfessionalProfile
+          professional={currentProfessional}
+          onClose={() => handleCloseProfile()}
+          handleChangeProfessionalSelected={handleChangeProfessionalSelected}
+        />
+			</OModal>
+    </>
+  )
+}