ordering-ui-react-native 0.16.72-release → 0.16.73-release

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

@@ -1,21 +1,21 @@
 import React, { useState } from 'react'
-import { ScrollView, TouchableOpacity, View, StyleSheet, Platform } from 'react-native'
-import { useUtils, useLanguage } from 'ordering-components/native'
+import { ScrollView, TouchableOpacity, View, StyleSheet } from 'react-native'
+import { 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 { OText, OModal } from '../shared'
 import { ProfessionalProfile } from '../ProfessionalProfile'
 import { ProfessionalFilterParams } from '../../types'
+import { SingleProfessionalCard } from './SingleProfessionalCard'
 
 export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
   const {
     professionals,
     professionalSelected,
-		handleChangeProfessionalSelected
+		handleChangeProfessionalSelected,
+    handleUpdateProfessionals
   } = props
 
   const theme = useTheme()
-  const [{ optimizeImage }] = useUtils()
   const [, t] = useLanguage()
   const [open, setOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState(null)
@@ -30,6 +30,11 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
     setOpen(false)
   }
 
+  const onUpdateProfessionals = (id, changes) => {
+    const updatedProfessional = professionals.find(professional => professional.id === id)
+    handleUpdateProfessionals({ ...updatedProfessional, ...changes })
+  }
+
   const styles = StyleSheet.create({
     professionalItem: {
       flexDirection: 'row',
@@ -39,12 +44,7 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
       borderWidth: 1,
       marginRight: 12,
       minHeight: 64
-    },
-		photoStyle: {
-			width: 42,
-			height: 42,
-			borderRadius: 7.6
-		}
+    }
   })
 
   return (
@@ -73,44 +73,14 @@ export const ProfessionalFilter = (props: ProfessionalFilterParams) => {
             </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>
+        {professionals.map((professional: any) => (
+          <SingleProfessionalCard
+            key={professional.id}
+            professional={professional}
+            active={professional?.id === professionalSelected?.id}
+            handleProfessionalClick={handleOpenProfile}
+            handleUpdateProfessionals={onUpdateProfessionals}
+          />
         ))}
       </ScrollView>
       <OModal

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

@@ -147,7 +147,7 @@ export const ProfessionalProfile = (props: ProfessionalProfileParams) => {
   }
 
   useEffect(() => {
-    if (selectDate === null) return
+    if (selectDate === null || !professional?.schedule) return
     const _times = getTimes(selectDate, professional)
     setTimeList(_times)
   }, [selectDate, professional])

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

@@ -110,16 +110,24 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   })
 
   const isBusyTime = (professional: any) => {
-    if (professional?.busy_times?.length === 0 || !dateSelected) return false
+    if (!dateSelected) return false
+    const startDay = moment(dateSelected).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
     const duration = product?.duration ?? 0
+    const endDay = moment(dateSelected).add(duration - 1, 'minutes').utc().format('d')
+    const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
+    if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+  
     const busyTimes = isCartProduct
       ? professional?.busy_times.filter((item: any) => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
       : [...professional?.busy_times]
     const valid = busyTimes.some((item: any) => {
       return (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() <= moment.utc(item?.end).local().valueOf()) ||
+        moment(dateSelected).valueOf() < moment.utc(item?.end).local().valueOf()) ||
         (moment.utc(item?.start).local().valueOf() <= moment(dateSelected).add(duration, 'minutes').valueOf() &&
-        moment(dateSelected).add(duration, 'minutes').valueOf() <= moment.utc(item?.end).local().valueOf())
+        moment(dateSelected).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, TouchableOpacity } from 'react-native'
+import { View, TouchableOpacity, Platform } from 'react-native'
 import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { SessionsParams } from '../../types'
@@ -12,7 +12,8 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import {
   SessionsWrapper,
   SessionItem,
-  DurationWrapper
+  DurationWrapper,
+  Container
 } from './styles'
 
 export const SessionsUI = (props: SessionsParams) => {
@@ -27,7 +28,7 @@ export const SessionsUI = (props: SessionsParams) => {
   const [, t] = useLanguage()
   const [{ user }] = useSession()
   const [{ parseDate }] = useUtils()
-	const theme = useTheme()
+  const theme = useTheme()
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -61,7 +62,9 @@ export const SessionsUI = (props: SessionsParams) => {
   }
 
   return (
-    <>
+    <Container
+      pdng={Platform.OS === 'ios' ? '10px' : '0'}
+    >
       <NavBar
         title={t('SESSIONS', 'Sessions')}
         titleAlign={'center'}
@@ -77,11 +80,11 @@ export const SessionsUI = (props: SessionsParams) => {
               <SessionItem key={i}>
                 <Placeholder Animation={Fade}>
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <View style={{ flex: 1}}>
+                    <View style={{ flex: 1 }}>
                       <PlaceholderLine width={40} />
                       <PlaceholderLine width={40} />
                     </View>
-                    <PlaceholderLine width={5}/>
+                    <PlaceholderLine width={5} />
                   </View>
                 </Placeholder>
               </SessionItem>
@@ -120,7 +123,7 @@ export const SessionsUI = (props: SessionsParams) => {
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
               </SessionsWrapper>
-             ) : (
+            ) : (
               <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
             )
           )}
@@ -147,7 +150,7 @@ export const SessionsUI = (props: SessionsParams) => {
         onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
         onClose={() => setConfirm({ ...confirm, open: false, title: null })}
       />
-    </>
+    </Container>
   )
 }
 

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

@@ -13,3 +13,8 @@ export const SessionItem = styled.View`
 export const DurationWrapper = styled.View`
   /* flex-direction: row; */
 `
+
+export const Container = styled.View`
+  padding-top: ${(props: any) => props.pdng};
+  margin-bottom: 50px;
+`

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

@@ -11,8 +11,8 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet, View } from 'react-native';
+import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper, TagsContainer } from './styles';
+import { ScrollView, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OText } from '../shared';
@@ -39,14 +39,19 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		enableIntersection,
 		navigation,
 		businessId,
-		isPreviously
+		isPreviously,
+		viewString
 	} = props;
 
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
-  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
-
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+	const hideProductLogo = viewString
+		? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
+		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
 	const textSize = isChewLayout ? 12 : 10
+	const logoPosition = theme?.business_view?.components?.products?.components?.product?.components?.image?.position
 
 	const styles = StyleSheet.create({
 		container: {
@@ -99,7 +104,12 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			color: '#808080',
 			textDecorationLine: 'line-through',
 			marginLeft: 7,
-			marginRight: 7
+			marginRight: 0
+		},
+		productTagsStyle: {
+			width: 30,
+    		height: 30,
+			marginRight: 5
 		}
 	});
 
@@ -168,7 +178,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 						(style && { ...style })
 					]}
 				>
-					<View style={{ flexDirection: 'row' }}>
+					<View style={{ flexDirection: logoPosition === 'left' ? 'row-reverse' : 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer style={[styles.quantityContainer, {
 								transform: [{ translateX: 25 }, { translateY: -25 }],
@@ -205,15 +215,41 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								{product?.offer_price !== null && !!product?.in_offer && (
 									<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 								)}
+								{!isPreviously && product?.tags && product?.tags.length > 0 && (
+									<ScrollView
+										showsVerticalScrollIndicator={false}
+										showsHorizontalScrollIndicator={false}
+										horizontal
+										style={{ marginLeft: 10 }}
+										contentContainerStyle={{flexGrow: 1}}
+									>
+										{product?.tags.map((tag: any, i: any) => (
+											<TouchableWithoutFeedback key={i}>
+												<TagsContainer>
+													<FastImage
+														style={styles.productTagsStyle}
+														source={tag.image ? {
+															uri: optimizeImage(tag.image, 'h_250,c_limit'),
+															priority: FastImage.priority.normal,
+														} : theme?.images?.dummies?.product}
+														resizeMode={FastImage.resizeMode.cover}
+													/>
+												</TagsContainer>
+											</TouchableWithoutFeedback>
+										))}
+									</ScrollView>
+								)}
 							</PricesContainer>
-							<OText
-								size={textSize}
-								numberOfLines={!isPreviously ? 2 : 1}
-								ellipsizeMode="tail"
-								color={theme.colors.textSecondary}
-								style={styles.line15}>
-								{product?.description}
-							</OText>
+							{!hideProductDescription && (
+								<OText
+									size={textSize}
+									numberOfLines={!isPreviously ? 2 : 1}
+									ellipsizeMode="tail"
+									color={theme.colors.textSecondary}
+									style={styles.line15}>
+									{product?.description}
+								</OText>
+							)}
 							{isPreviously && (
 								<OText
 									size={textSize}
@@ -225,7 +261,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</OText>
 							)}
 						</CardInfo>
-						<LogoWrapper>
+						<LogoWrapper logoPosition={logoPosition}>
 							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={product?.ribbon?.color}
@@ -244,14 +280,16 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							<FastImage
-								style={styles.productStyle}
-								source={product?.images ? {
-									uri: optimizeImage(product?.images, 'h_250,c_limit'),
-									priority: FastImage.priority.normal,
-								} : theme?.images?.dummies?.product}
-								resizeMode={FastImage.resizeMode.cover}
-							/>
+							{!hideProductLogo && (
+								<FastImage
+									style={styles.productStyle}
+									source={product?.images ? {
+										uri: optimizeImage(product?.images, 'h_250,c_limit'),
+										priority: FastImage.priority.normal,
+									} : theme?.images?.dummies?.product}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							)}
 						</LogoWrapper>
 
 						{(isSoldOut || maxProductQuantity <= 0) && (

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

@@ -27,7 +27,18 @@ export const PricesContainer = styled.View`
 
 export const LogoWrapper = styled.View`
   position: relative;
-  margin-left: 12px;
+  margin-left: ${(props) => !props.logoPosition || props.logoPosition === 'right' ? '12px' : '0px'};
+  margin-right: ${(props) => props.logoPosition === 'right' ? '0px' : '12px'};
+`
+export const WrapTags = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin-left: 10px;
+`
+export const TagsContainer = styled.View`
+    display: flex;
+    margin: auto;
 `
 
 export const RibbonBox = styled.View`
@@ -38,15 +49,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

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

@@ -117,7 +117,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
         if (upsellingProducts?.products?.length && !isFromCart) {
           setCanOpenUpselling && setCanOpenUpselling(true)
         } else {
-          handleUpsellingPage && handleUpsellingPage()
+          handleUpsellingPage && handleUpsellingPage(cart)
         }
       }
     }
@@ -225,7 +225,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
             style={{ ...styles.closeUpsellingButton }}
             textStyle={{ color: theme.colors.white, fontSize: 14 }}
             onClick={() => {
-              handleUpsellingPage()
+              handleUpsellingPage(cart)
               setIsCheckout(true)
             }}
           />
@@ -247,7 +247,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
               <OBottomPopup
                 title={''}
                 open={openUpselling}
-                onClose={() => handleUpsellingPage()}
+                onClose={() => handleUpsellingPage(cart)}
                 isStatusBar
               >
                 <UpsellingContent />

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

@@ -278,7 +278,9 @@ const ProfileUI = (props: ProfileParams) => {
 
 	return (
 		<>
-			<Container>
+			<Container
+				pdng={Platform.OS === 'ios' ? '20px' : '10px'}
+			>
 				<NavBar
 					title={t('ACCOUNT', 'Account')}
 					titleAlign={'center'}

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

@@ -12,7 +12,7 @@ export const UserData = styled.View`
 export const Container = styled.ScrollView`
     position: relative;
     flex: 1;
-	  paddingTop: 20px;
+	  padding-top: ${(props: any) => props.pdng};
     margin-bottom: 40px;
 `
 

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

@@ -62,7 +62,8 @@ const WalletsUI = (props: any) => {
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
   const [openHistory, setOpenHistory] = useState(false)
-  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+  const hideWalletsTheme = theme?.bar_menu?.components?.wallets?.hidden
 
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
@@ -146,8 +147,8 @@ const WalletsUI = (props: any) => {
                         borderBottomWidth: 1,
                         borderBottomColor:
                           tabSelected === wallet.type
-                          ? theme.colors.textNormal
-                          : theme.colors.border
+                            ? theme.colors.textNormal
+                            : theme.colors.border
                       }}
                     >
                       <OText>

package/themes/original/src/types/index.tsx

@@ -765,7 +765,8 @@ export interface ServiceFormParams {
 export interface ProfessionalFilterParams {
 	professionals?: any,
 	professionalSelected?: any,
-	handleChangeProfessionalSelected: any
+	handleChangeProfessionalSelected: any,
+	handleUpdateProfessionals?: any
 }
 
 export interface ProfessionalProfileParams {

package/themes/original/src/utils/index.tsx

@@ -355,6 +355,18 @@ export const priceList = [
   { level: '5', content: '$$$$$' }
 ]
 
+export const getLogisticTag = (status: any) => {
+  const [, t] = useLanguage()
+  const keyList: any = {
+    0: t('PENDING', 'Pending'),
+    1: t('IN_PROGRESS', 'In progress'),
+    2: t('IN_QUEUE', 'In queue'),
+    3: t('EXPIRED', 'Expired'),
+    4: t('RESOLVED', 'Resolved'),
+  }
+  return keyList[status] ? keyList[status] : t('UNKNOWN', 'Unknown')
+}
+
 export const getOrderStatus = (s: string) => {
   const status = parseInt(s);
   const orderStatus = [