ordering-ui-react-native 0.14.83 → 0.14.85-release

package/themes/kiosk/src/components/shared/OCard.tsx

@@ -1,110 +1,144 @@
 import React from 'react';
-import { TextStyle, ViewStyle, Platform } from 'react-native';
+import { TextStyle, ImageBackground, StyleSheet } from 'react-native';
 import { useTheme } from 'styled-components/native';
+import FastImage from 'react-native-fast-image'
 
-import styled from 'styled-components/native';
-import OImage from './OImage';
+import styled, { css } from 'styled-components/native';
 import OText from './OText';
 
 const CardContainer = styled.TouchableOpacity`
-	width: 21%;
-	margin: 10px 20px;
-	overflow: hidden;
+	position: relative;
+  flex-direction: column;
+  border-radius: 10px;
+  position: relative;
+  margin: 0 30px 30px 0;
+  align-self: flex-start;
 `
 
-const CardBody = styled.View`
-	padding: 4%;
+const WrapPrice = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 10px;
 `
 
-const CardBadge = styled.Text`
-	padding: 2% 4%;
-	position: absolute;
-	background-color: ${(props: any) => props.theme.theme.colors.primary};
-	z-index: 100;
-	border-radius: 5px;
-	color: #fff;
-	font-weight: bold;
-	margin: 10px 0;
+const WrapImage = styled.View`
+  width: 100%;
+  height: 120px;
+`
+
+const WrapContent = styled.View`
+  display: flex;
+  flex-direction: column;
+	${(props: any) => props.isCentered && css`
+		align-items: center;
+	`}
 `
 
 const OCard = (props: Props): React.ReactElement => {
 	const theme = useTheme()
 
+	const styles = StyleSheet.create({
+    textStyle: {
+      marginTop: 10
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+			borderBottomLeftRadius: 0,
+			borderBottomRightRadius: 0,
+    }
+  })
+
 	return (
 		<CardContainer
-		 style={{...props.style}}
-		 onPress={props?.onPress}
-		 disabled={!props?.onPress}
-     activeOpacity={1}
-		>
-			{props?.badgeText && (
-				<CardBadge>
-					{props?.badgeText}
-				</CardBadge>
-			)}
-			<OImage
-				source={props.image}
-				height={120}
-				resizeMode="cover"
-				borderRadius={16}
-			/>
-			<CardBody>
-				<OText
-					mLeft={0}
-					size={18}
-					numberOfLines={2}
-					mBottom={8}
-					style={{...props?.titleStyle}}
-				>
-					{props.title}
-				</OText>
-
-				{props?.description && (
-					<OText
-						color={theme.colors.mediumGray}
-						numberOfLines={3}
-						mBottom={8}
-						style={{...props?.descriptionStyle}}
-					>
-						{props.description}
-					</OText>
+			activeOpacity={1}
+      style={props.style}
+      onPress={props?.onPress}
+			disabled={!props?.onPress}
+    >
+      <WrapImage>
+				{props.isUri ? (
+					<FastImage
+						style={[styles.image, props.style]}
+						source={{
+							uri: props.image?.uri,
+							priority: FastImage.priority.normal,
+							// cache:FastImage.cacheControl.web
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<ImageBackground
+						style={[styles.image, props.style]}
+						source={props.image}
+						imageStyle={{
+							borderBottomLeftRadius: 0,
+							borderBottomRightRadius: 0,
+							borderRadius: 10
+						}}
+						resizeMode='cover'
+					/>
 				)}
-				
-				{props?.price && (
-					<OText>
-						<OText
-							color={theme.colors.primary}
-							weight="bold"
-						>
-							{props.price}
-						</OText>
-
-						<OText
-							color={theme.colors.mediumGray}
-							size={12}
-							style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
-						>
-							{props?.prevPrice ? `  ${props?.prevPrice}  ` : ''}
-						</OText>
-					</OText>
-				)}
-
-			</CardBody>
-		</CardContainer>
-	);
+      </WrapImage>
+      <WrapContent isCentered={props.isCentered}>
+        <OText
+          size={18}
+          numberOfLines={1}
+          ellipsizeMode='tail'
+          style={styles.textStyle}
+        >
+          {props.title}
+        </OText>
+        {!!props?.description && (
+          <OText
+            color={theme.colors.mediumGray}
+            size={18}
+            numberOfLines={3}
+            ellipsizeMode='tail'
+            style={styles.textStyle}
+          >
+            {props?.description}
+          </OText>
+        )}
+        <WrapPrice>
+          <OText
+            size={18}
+          >
+            {props.price}
+          </OText>
+          {props?.prevPrice && (
+            <OText
+              size={18}
+              color={theme.colors.mediumGray}
+              style={{
+                textDecorationLine: 'line-through',
+                textDecorationStyle: 'solid',
+                marginLeft: 20,
+              }}
+            >
+              {props?.prevPrice}
+            </OText>
+          )}
+        </WrapPrice>
+      </WrapContent>
+    </CardContainer>
+	)
 }
 
 interface Props {
 	badgeText?: string;
+	isUri?: boolean;
 	onPress?(): void;
-	image: string | { uri: string };
+	image: any;
+	isCentered?: any;
 	title: string;
 	titleStyle?: TextStyle;
 	description?: string;
 	descriptionStyle?: TextStyle;
 	price?: string;
 	prevPrice?: string;
-	style?: ViewStyle;
+	style?: any;
 }
 
 export default OCard;

package/themes/kiosk/src/types/index.d.ts

@@ -473,3 +473,7 @@ export interface Cart {
   total: number;
   clearInactivityTimeout: any;
 }
+
+export interface NoNetworkParams {
+  image?: any;
+}

package/themes/original/index.tsx

@@ -1,16 +1,21 @@
 import { AddressForm } from './src/components/AddressForm';
 import { AddressDetails } from './src/components/AddressDetails';
+import { AnalyticsSegment } from './src/components/AnalyticsSegment';
 import { Home } from './src/components/Home';
 import { LoginForm } from './src/components/LoginForm';
 import { SignupForm } from './src/components/SignupForm';
 import { ActiveOrders } from './src/components/ActiveOrders';
 import { AddressList } from './src/components/AddressList';
 import { AppleLogin } from './src/components/AppleLogin';
+import { BusinessBasicInformation } from './src/components/BusinessBasicInformation';
+import { BusinessProductsCategories } from './src/components/BusinessProductsCategories';
+import { BusinessProductsList } from './src/components/BusinessProductsList';
 import { BusinessesListing } from './src/components/BusinessesListing';
 import { BusinessProductsListing } from './src/components/BusinessProductsListing';
 import { CartContent } from './src/components/CartContent';
 import { BusinessCart } from './src/components/BusinessCart';
 import { Checkout } from './src/components/Checkout';
+import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
 import { MomentOption } from './src/components/MomentOption';
 import { OrdersOption } from './src/components/OrdersOption';
@@ -20,14 +25,19 @@ import { BusinessPreorder } from './src/components/BusinessPreorder';
 import { BusinessMenuList } from './src/components/BusinessMenuList';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
+import { ReviewProducts } from './src/components/ReviewProducts';
+import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
+import { Messages } from './src/components/Messages';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
 import { HelpOrder } from './src/components/HelpOrder';
+import { NetworkError } from './src/components/NetworkError';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { SearchBar } from './src/components/SearchBar';
 import { Wallets } from './src/components/Wallets';
 import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
 import { ProductForm } from './src/components/ProductForm';
@@ -63,6 +73,7 @@ import {
 export {
 	AddressForm,
 	AddressDetails,
+	AnalyticsSegment,
 	Home as HomeView,
 	SignupForm,
 	LoginForm,
@@ -72,7 +83,7 @@ export {
 	BusinessesListing,
 	BusinessProductsListing,
 	CartContent,
-  BusinessCart,
+	BusinessCart,
 	Checkout,
 	ForgotPasswordForm,
 	MomentOption,
@@ -82,20 +93,29 @@ export {
 	BusinessPreorder,
 	UserProfileForm,
 	ReviewOrder,
+	ReviewProducts,
+	ReviewDriver,
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,
+  	Messages,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
-  Wallets,
-  PaymentOptionWallet,
-  ProductForm,
-  UpsellingProducts,
-  UserVerification,
+	Wallets,
+	PaymentOptionWallet,
+	ProductForm,
+	UpsellingProducts,
+	UserVerification,
+	BusinessBasicInformation,
+	BusinessProductsCategories,
+	BusinessProductsList,
+	FloatingButton,
+	SearchBar,
 
 	// OComponents
 	Toast,

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

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
+import { useEvent, useConfig } from 'ordering-components/native';
+
+export const AnalyticsSegment = (props: any) => {
+  const { children } = props
+
+  const [events] = useEvent()
+  const [configState] = useConfig()
+  const [segmentClient, setSegmentClient] = useState<any>({})
+
+  const handleClickProduct = (product: any) => {
+    segmentClient.track('Product Clicked', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price
+    })
+  }
+
+  const handleProductAdded = (product: any) => {
+    segmentClient.track('Product Added', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
+  const handleProductRemoved = (product: any) => {
+    segmentClient.track('Product Removed', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
+  const handleOrderPlaced = (order: any) => {
+    segmentClient.track('Order Placed', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+    segmentClient.track('Payment Info Entered', {
+      order: order.id,
+      business: order.business?.name,
+      business_id: order.business_id,
+      total: order.total,
+      tax: order.tax_total,
+      delivery: order.delivery_zone_price,
+      paymethod: order.paymethod
+    })
+  }
+
+  const handleUpdateOrder = (order: any) => {
+    segmentClient.track('Order Updated', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+  }
+
+  const handleAddOrder = (order: any) => {
+    segmentClient.track('Order Added', {
+      id: order.id,
+      affiliation: order.business?.name,
+      revenue: order.total,
+      tax: order.tax_total,
+      shipping: order.delivery_zone_price
+    })
+  }
+
+  const handleLogin = (data: any) => {
+    segmentClient.identify(data.id, {
+      email: data.email,
+      name: data.name
+    })
+  }
+
+  useEffect(() => {
+    if (segmentClient?.config?.writeKey) {
+      events.on('product_clicked', handleClickProduct)
+      events.on('userLogin', handleLogin)
+      events.on('product_added', handleProductAdded)
+      events.on('order_placed', handleOrderPlaced)
+      events.on('order_updated', handleUpdateOrder)
+      events.on('order_added', handleAddOrder)
+      events.on('cart_product_removed', handleProductRemoved)
+    }
+    return () => {
+      if (segmentClient?.config?.writeKey) {
+        events.off('product_clicked', handleClickProduct)
+        events.off('userLogin', handleLogin)
+        events.off('product_added', handleProductAdded)
+        events.off('order_placed', handleOrderPlaced)
+        events.off('order_updated', handleUpdateOrder)
+        events.off('order_added', handleAddOrder)
+        events.off('cart_product_removed', handleProductRemoved)
+      }
+    }
+  }, [segmentClient])
+
+  useEffect(() => {
+    if (configState?.configs?.segment_track_id?.value) {
+      const _segmentClient: any = createClient({
+        writeKey: configState?.configs?.segment_track_id?.value
+      });
+      setSegmentClient(_segmentClient)
+    }
+  }, [configState])
+
+  return (
+    <>
+      <AnalyticsProvider client={segmentClient}>
+        {children}
+      </AnalyticsProvider>
+    </>
+
+  )
+}

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

@@ -29,7 +29,7 @@ const types = ['food', 'laundry', 'alcohol', 'groceries'];
 export const BusinessBasicInformation = (
 	props: BusinessBasicInformationParams,
 ) => {
-	const { navigation, businessState, isBusinessInfoShow, logo, header } = props;
+	const { navigation, businessState, isBusinessInfoShow, logo, header, isPreOrder } = props;
 	const { business, loading } = businessState;
 
 	const theme = useTheme();
@@ -181,12 +181,16 @@ export const BusinessBasicInformation = (
 				<WrapReviews>
 					{!isBusinessInfoShow && (
 						<>
-							<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-									{t('PRE_ORDER', 'Preorder')}
-								</OText>
-							</TouchableOpacity>
-							<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+							{ isPreOrder && (
+								<>
+								<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+									<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+										{t('PRE_ORDER', 'Preorder')}
+									</OText>
+								</TouchableOpacity>
+								<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+								</>
+							)}
 							<TouchableOpacity onPress={() => setOpenBusinessReviews(true)}>
 								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
 									{t('REVIEWS', 'Reviews')}

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

@@ -111,7 +111,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 				<FastImage
 					style={{ height: 120 }}
 					source={{
-							uri: optimizeImage(business?.header, 'h_120,c_limit'),
+							uri: optimizeImage(business?.header, 'h_500,c_limit'),
 							priority: FastImage.priority.normal,
 					}}
 					resizeMode={FastImage.resizeMode.cover}
@@ -140,7 +140,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						<FastImage
 							style={{ width: 56, height: 56 }}
 							source={{
-									uri: optimizeImage(business?.logo, 'h_60,c_limit'),
+									uri: optimizeImage(business?.logo, 'h_150,c_limit'),
 									priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}

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

@@ -7,6 +7,7 @@ import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import SelectDropdown from 'react-native-select-dropdown'
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const windowHeight = Dimensions.get('window').height;
 
@@ -18,6 +19,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const {top} = useSafeAreaInsets()
 
   const styles = StyleSheet.create({
     container: {
@@ -81,7 +83,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 dropdownStyle={{
                   borderRadius: 8,
                   borderColor: theme.colors.lightGray,
-                  marginTop: Platform.OS === 'ios' ? 12 : -15,
+                  marginTop: Platform.OS === 'ios' ? 12 : -top,
                   maxHeight: 160
                 }}
                 rowStyle={{
@@ -123,4 +125,4 @@ export const BusinessMenuList = (props: any) => {
   };
 
   return <BusinessMenuListing {...businessMenuListProps} />;
-};
+};

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

@@ -21,6 +21,7 @@ import {
   TimeContentWrapper,
   TimeItem
 } from './styles'
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const windowHeight = Dimensions.get('window').height;
 
@@ -50,7 +51,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [selectDate, setSelectedDate] = useState<any>(null)
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
-
+  const {top} = useSafeAreaInsets()
   const styles = StyleSheet.create({
     container: {
       height: windowHeight,
@@ -333,7 +334,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             dropdownStyle={{
               borderRadius: 8,
               borderColor: theme.colors.lightGray,
-              marginTop: Platform.OS === 'ios' ? 12 : -15
+              marginTop: Platform.OS === 'ios' ? 12 : -top
             }}
             rowStyle={{
               borderBottomColor: theme.colors.backgroundGray100,

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

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ProductsList, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
-import { OIcon, OText } from '../shared';
+import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native';
+import { useTheme } from 'styled-components/native';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -32,8 +33,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const [, t] = useLanguage();
   const [{ optimizeImage }] = useUtils()
   const [{ configs }] = useConfig()
+  const theme = useTheme()
   const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
-
+  const [openDescription, setOpenDescription] = useState<any>(null)
   const handleOnLayout = (event: any, categoryId: any) => {
     const _categoriesLayout = { ...categoriesLayout }
     const categoryKey = 'cat_' + categoryId
@@ -84,8 +86,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
         const products = !isUseParentCategory
-          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
-          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+          ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
+
+        const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
+
         return (
           <React.Fragment key={'cat_' + category.id}>
             {products.length > 0 && (
@@ -96,7 +101,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 >
                   <View style={bpStyles.catIcon}>
                     <OIcon
-                      url={optimizeImage(category.image, 'h_100,c_limit')}
+                      url={optimizeImage(category.image, 'h_250,c_limit')}
                       width={41}
                       height={41}
                       style={{ borderRadius: 7.6 }}
@@ -106,6 +111,28 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     {category.name}
                   </OText>
                 </View>
+                {!!category?.description && (
+                  <View style={{ position: 'relative' }}>
+                    <OText size={12} weight={'500'} mBottom={5}>
+                      {shortCategoryDescription}
+                      {category?.description?.length > 80 && (
+                        <OButton
+                          style={{ height: 15, paddingRight: 0, paddingLeft: 0, borderWidth: 0 }}
+                          text={t('SEE_MORE', 'See more')}
+                          parentStyle={{ padding: 0 }}
+                          onClick={() => setOpenDescription(category)}
+                          bgColor='transparent'
+                          textStyle={{
+                            fontSize: 12,
+                            borderBottomWidth: 1,
+                            borderBottomColor: theme.colors.primary,
+                            color: theme.colors.primary
+                          }}
+                        />
+                      )}
+                    </OText>
+                  </View>
+                )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
@@ -188,6 +215,23 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
+      <OModal
+        open={!!openDescription}
+        title={openDescription?.name}
+        onClose={() => setOpenDescription(null)}
+      >
+        <View style={{ padding: 20 }}>
+          {!!openDescription?.image && (
+            <OIcon
+              url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
+              width={240}
+              height={240}
+              style={{ borderRadius: 7.6 }}
+            />
+          )}
+          <OText>{openDescription?.description}</OText>
+        </View>
+      </OModal>
     </ProductsContainer>
   );
 };