ordering-ui-react-native 0.16.39 → 0.16.40-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;
 `
 
 export const SectionTitle = styled.View`
@@ -65,26 +63,23 @@ 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;
 `;
 
 export const WeightUnitSwitch = styled.View`
@@ -99,4 +94,8 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
+  padding: 26px 40px 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 && (
-							<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 ? (
+										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/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/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,
@@ -33,13 +34,16 @@ 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
-	
+
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === '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>
@@ -140,7 +144,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					</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

@@ -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/index.tsx

@@ -97,7 +97,8 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
                 />
               ) : (
                 <OIcon
-                  src={theme?.images?.dummies?.product}
+                  src={theme?.images?.general?.user}
+                  cover={false}
                   style={styles.photoStyle}
                 />
               )}

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

@@ -6,7 +6,7 @@ import CalendarPicker from 'react-native-calendar-picker'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import moment from 'moment'
 import SelectDropdown from 'react-native-select-dropdown'
-import { OButton, OText } from '../shared'
+import { OButton, OText, OIcon } from '../shared'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ProfessionalProfileParams } from '../../types'
@@ -58,11 +58,14 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
       height: 40,
       marginBottom: 30
     },
+    photoStyle: {
+      alignSelf: 'center'
+    }
   })
 
   const onDateChange = (date: any) => {
     setSelectedDate(date)
-    dropdownRef.current.reset()
+    dropdownRef?.current && dropdownRef.current.reset()
   }
 
   const dropDownIcon = () => {
@@ -151,13 +154,21 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
 
   return (
     <Container>
-			<ProfessionalPhoto
-				source={{
-					uri:
-          professional?.photo ||
-						optimizeImage(theme.images.general.user, 'h_250,c_limit'),
-				}}
-      />
+      {!!professional?.photo ? (
+        <ProfessionalPhoto
+          source={{
+            uri: professional?.photo
+          }}
+        />
+      ) : (
+        <OIcon
+          src={theme.images.general.user}
+          style={styles.photoStyle}
+          cover={false}
+          width={200}
+          height={200}
+        />
+      )}
       <InfoWrapper>
         <OText
           size={20}
@@ -191,9 +202,9 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
             {t('REQUIRED', 'Required')}
           </OText>
         </View>
-        {(!!professional?.schedule && isEnabled) ? (
+        {!!professional?.schedule ? (
           <CalendarWrapper>
-            {timeList?.length > 0 ? (
+            {(timeList?.length > 0 && isEnabled) ? (
               <SelectDropdown
                 ref={dropdownRef} 
                 data={timeList}
@@ -237,11 +248,12 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
               />
             ) : (
               <OText
-                size={20}
+                size={12}
                 style={{ marginBottom: 30 }}
-                weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                weight={'400'}
+                color={theme.colors?.danger5}
               >
-                {t('NOT_AVAILABLE', 'Not available')}
+                {t('PROFESSIONAL_NOT_AVAILABLE', 'Professional is not available at the moment')}
               </OText>
             )}