ordering-ui-react-native 0.16.59 → 0.16.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.59",
+  "version": "0.16.62",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/UserFormDetails/index.tsx

@@ -36,6 +36,7 @@ export const UserFormDetailsUI = (props: any) => {
     handleCancelEdit,
     toggleIsEdit,
     isCheckout,
+    isAlsea
   } = props;
 
   const theme = useTheme();
@@ -265,7 +266,9 @@ export const UserFormDetailsUI = (props: any) => {
               }).map(
                 (field: any) =>
                   showField &&
-                  showField(field.code) && (
+                  showField(field.code) &&
+                  !isAlsea
+                  && (
                     <React.Fragment key={field.id}>
                       <OText style={styles.label}>
                         {t(field?.code.toUpperCase(), field?.name)}
@@ -442,7 +445,7 @@ export const UserFormDetailsUI = (props: any) => {
                 </OText>
               )}
 
-              {!!showInputPhoneNumber && (
+              {!!showInputPhoneNumber && !isAlsea && (
                 <WrapperPhone>
                   <PhoneInputNumber
                     data={phoneInputData}

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

@@ -49,6 +49,7 @@ const ProfileUI = (props: ProfileParams) => {
     handleToggleAvalaibleStatusDriver,
     userState,
     isAvailableLoading,
+    isAlsea
   } = props;
 
   const [{ user }] = useSession();
@@ -459,6 +460,7 @@ const ProfileUI = (props: ProfileParams) => {
                 hideUpdateButton
                 handleCancelEdit={handleCancelEdit}
                 toggleIsEdit={toggleIsEdit}
+                isAlsea={isAlsea}
               />
             </View>
           )}

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

@@ -41,6 +41,7 @@ export interface ProfileParams {
   validationFields?: any;
   showField?: any;
   isRequiredField?: any;
+  isAlsea?: boolean;
 }
 
 export interface AddressListParams {

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

@@ -7,6 +7,7 @@ import {
 	useLanguage,
 	useConfig,
 	useToast,
+	useSession,
 	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
@@ -53,6 +54,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
+	const [ { auth }] = useSession()
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
@@ -135,7 +137,11 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	}
 
 	const handleChangeFavorite = () => {
-		handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+		if (auth) {
+			handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+		} else {
+			navigation && navigation.navigate('Login');
+		}
 	}
 
 	return (

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

@@ -35,7 +35,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     onClickCategory,
     lazyLoadProductsRecommended,
     handleUpdateProducts,
-    isFiltMode
+    isFiltMode,
+    navigation
   } = props;
 
   const [, t] = useLanguage();
@@ -128,6 +129,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
               onProductClick={() => onProductClick(product)}
               productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
               handleUpdateProducts={handleUpdateProducts}
+							navigation={navigation}
             />
           ))
       }
@@ -153,6 +155,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       onProductClick={onProductClick}
                       handleUpdateProducts={handleUpdateProducts}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                      navigation={navigation}
                     />
                   ),
               )}
@@ -246,6 +249,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       categoryState={categoryState}
                       onProductClick={onProductClick}
                       handleUpdateProducts={handleUpdateProducts}
+                      navigation={navigation}
                       productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
                     />
                   ))}

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

@@ -277,7 +277,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</WrapSearchBar>
 						)}
 					</TopHeader>
-					{showBusinessNearCity && (
+					{showBusinessNearCity && businessState?.business?.city_id && (
 						<NearBusiness>
 							<BusinessesListing
 								logosLayout
@@ -323,6 +323,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								setSubcategoriesSelected={setSubcategoriesSelected}
 								onClickCategory={handleChangeCategory}
 								handleUpdateProducts={handleUpdateProducts}
+								navigation={navigation}
 								isFiltMode
 							/>
 						</View>
@@ -425,6 +426,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									setSubcategoriesSelected={setSubcategoriesSelected}
 									onClickCategory={handleChangeCategory}
 									handleUpdateProducts={handleUpdateProducts}
+									navigation={navigation}
 								/>
 							</WrapContent>
 						</>
@@ -447,6 +449,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									isBusinessLoading={loading}
 									errorQuantityProducts={errorQuantityProducts}
 									handleUpdateProducts={handleUpdateProducts}
+									navigation={navigation}
 								/>
 							</WrapContent>
 						</>

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

@@ -64,4 +64,5 @@ export const ProfessionalFilterWrapper = styled.View`
 export const NearBusiness = styled.View`
   width: 100%;
   padding-left: 20px;
+  max-height: 80px;
 `

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -133,7 +133,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			borderRadius: 8,
 			marginHorizontal: 40,
 			height: 45
-		}
+		},
+		businessSkeleton: {
+			borderRadius: 8,
+			marginRight: 20,
+			width: 56,
+			height: 56
+		},
 	});
 
 
@@ -286,9 +292,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			<BusinessLogosContainer horizontal>
 				{businessesList?.loading ? (
 					<Placeholder Animation={Fade}>
-						{[...Array(10).keys()].map(item => (
-							<PlaceholderLine key={item} width={56} height={56} />
-						))}
+						<View style={{ flexDirection: 'row' }}>
+							{[...Array(10).keys()].map(i => (
+								<View style={styles.businessSkeleton} key={i}>
+									<PlaceholderLine style={{ width: '100%', height: '100%' }} />
+								</View>
+							))}
+						</View>
 					</Placeholder>
 				) : (
 					<>

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

@@ -9,6 +9,7 @@ import { OBottomPopup } from '../shared';
 import { ReviewTrigger } from '../ReviewTrigger';
 
 export const BusinessesListing = (props: any) => {
+  const { logosLayout } = props
   const theme = useTheme()
   const layout = theme?.layouts?.business_listing_view?.components?.layout?.type || 'original'
   const [, t] = useLanguage();
@@ -76,8 +77,8 @@ export const BusinessesListing = (props: any) => {
 
   return (
     <>
-      {(layout === 'original') && <OriginalBusinessListing {...props} />}
-      {(layout === 'appointment') && <AppointmentBusinessListing {...props} />}
+      {((layout === 'original') || logosLayout) && <OriginalBusinessListing {...props} />}
+      {(layout === 'appointment') && !logosLayout && <AppointmentBusinessListing {...props} />}
 
       {lastOrderReview?.isReviewOpen && (
         <OBottomPopup

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

@@ -141,9 +141,9 @@ const CheckoutUI = (props: any) => {
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	const [isOpen, setIsOpen] = useState(false)
-  const [requiredFields, setRequiredFields] = useState<any>([])
+	const [requiredFields, setRequiredFields] = useState<any>([])
 
-	const placeSpotTypes = [3, 4]
+	const placeSpotTypes = [4]
 	const businessConfigs = businessDetails?.business?.configs ?? []
 	const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
 	const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
@@ -178,15 +178,15 @@ const CheckoutUI = (props: any) => {
 		}
 	}
 
-	const handlePlaceOrder = (confirmPayment : any) => {
+	const handlePlaceOrder = (confirmPayment: any) => {
 		if (!userErrors.length && !requiredFields?.length) {
 			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
 			return
 		}
 		if (requiredFields?.length) {
-      setIsOpen(true)
-      return
-    }
+			setIsOpen(true)
+			return
+		}
 		let stringError = ''
 		Object.values(userErrors).map((item: any, i: number) => {
 			stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
@@ -646,6 +646,7 @@ const CheckoutUI = (props: any) => {
 											cart={cart}
 											isCartPending={cart?.status === 2}
 											onNavigationRedirect={onNavigationRedirect}
+											placeSpotTypes={placeSpotTypes}
 										/>
 									</>
 								)}

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

@@ -39,7 +39,8 @@ const OrderSummaryUI = (props: any) => {
     commentState,
     handleChangeComment,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    placeSpotTypes
   } = props;
 
   const theme = useTheme()
@@ -52,7 +53,6 @@ const OrderSummaryUI = (props: any) => {
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [openPlaceModal, setOpenPlaceModal] = useState(false)
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
-  const placeSpotTypes = [3, 4]
 
   const handleDeleteClick = (product: any) => {
     removeProduct(product, cart)
@@ -304,7 +304,7 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 </View>
               )}
-              {placeSpotTypes.includes(orderState?.options?.type) && (
+              {placeSpotTypes && placeSpotTypes.includes(orderState?.options?.type) && (
                 <OSTable style={{ marginTop: 15 }}>
                   <OText size={14} lineHeight={21} weight={'600'}>
                     {t('SPOT', 'Spot')}: {cart?.place?.name || t('NO_SELECTED', 'No selected')}

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

@@ -6,7 +6,7 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { Platform, View } from 'react-native'
-import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, Wrapper } from './styles'
+import { BgImage, ListWrapper, MaskCont, OrderTypeWrapper, OTab, OTabs, TabBtn, Wrapper } from './styles'
 import { OrderTypeSelectParams } from '../../types'
 import { OIcon, OText } from '../shared'
 import NavBar from '../NavBar';
@@ -20,14 +20,16 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		defaultValue,
 		configTypes,
 		orderTypes,
-		setOrderTypeValue
+		setOrderTypeValue,
+		isChewLayout,
+		chewOrderTypes
 	} = props
 
 	const theme = useTheme();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
-	
+
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
@@ -42,43 +44,83 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 		if (!orderState.loading) {
 			setOrderTypeValue && setOrderTypeValue(orderType)
 			handleChangeOrderType(orderType)
-			goToBack();
+			if(!isChewLayout){
+				goToBack();
+			}
 		}
 	}
 
 	return (
 		<Wrapper>
-			<NavBar
-				onActionLeft={() => goToBack()}
-				btnStyle={{ paddingLeft: 0 }}
-				paddingTop={0}
-				style={{ paddingBottom: 0 }}
-				title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
-				titleAlign={'center'}
-				titleStyle={{ fontSize: 14 }}
-			/>
-			{
-			items.length > 0 && (
-				<ListWrapper>
-				{
-					items && items.map((item: any, idx: number) => 
-						<OrderTypeWrapper activeOpacity={0.8} key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
-							<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4}}>
-								<MaskCont>
-									<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
-									<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
-									<View style={{flexDirection: 'row', alignItems: 'center'}}>
-										<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
-										<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{transform: [{ rotate: '180deg' }], marginStart: 4}} />
-									</View>
-								</MaskCont>
-							</BgImage>
-						</OrderTypeWrapper>
-					)
-				}
-				</ListWrapper>
-				)
-			}
+			{isChewLayout ? (
+				<View>
+					<OTabs
+						horizontal
+						showsHorizontalScrollIndicator={false}
+					>
+						{chewOrderTypes?.map((type : any) => (
+							<TabBtn
+								key={type.value}
+								onPress={() => handleChangeOrderTypeCallback(type.value)}
+							>
+								<OTab
+									style={{
+										borderBottomColor:
+											type.value === typeSelected
+												? theme.colors.textNormal
+												: theme.colors.border,
+									}}>
+									<OText
+										size={14}
+										color={
+											type.value === typeSelected
+												? theme.colors.textNormal
+												: theme.colors.disabled
+										}
+										weight={type.value === typeSelected ? 'bold' : 'normal'}>
+										{type.name}
+									</OText>
+								</OTab>
+							</TabBtn>
+						))}
+					</OTabs>
+				</View>
+			) : (
+				<>
+					<NavBar
+						onActionLeft={() => goToBack()}
+						btnStyle={{ paddingLeft: 0 }}
+						paddingTop={0}
+						style={{ paddingBottom: 0 }}
+						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
+						titleAlign={'center'}
+						titleStyle={{ fontSize: 14 }}
+					/>
+					{
+						items.length > 0 && (
+							<ListWrapper>
+								{
+									items && items.map((item: any, idx: number) =>
+										<OrderTypeWrapper activeOpacity={0.8} key={idx} disabled={orderState.loading} onPress={() => handleChangeOrderTypeCallback(item.value)}>
+											<BgImage source={theme.images.orderTypes[`type${item?.value || 1}`]} resizeMode={'cover'} style={{ opacity: item?.value == typeSelected || typeSelected === undefined ? 1 : 0.4 }}>
+												<MaskCont>
+													<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
+													<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
+													<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+														<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
+														<OIcon src={theme.images.general.arrow_left} width={16} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
+													</View>
+												</MaskCont>
+											</BgImage>
+										</OrderTypeWrapper>
+									)
+								}
+							</ListWrapper>
+						)
+					}
+				</>
+			)}
+
 		</Wrapper>
 	)
 }

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

@@ -24,4 +24,22 @@ export const MaskCont = styled.View`
   padding: 16px 39px;
   background-color: #0000004D;
   height: 100%;
-`;
+`;
+
+export const OTabs = styled.View`
+  flex-direction: row;
+  width: 100%;
+  margin-bottom: -1px;
+  justify-content: space-between;
+`;
+
+export const OTab = styled.View`
+  padding-bottom: 10px;
+  border-bottom-width: 1px;
+  padding-horizontal: 10px;
+`;
+
+export const TabBtn = styled.TouchableOpacity`
+  min-height: 30px;
+  height: 30px;
+`;