ordering-ui-react-native 0.17.98 → 0.17.99-release

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

@@ -1,14 +1,49 @@
 import React, { useEffect, useState } from 'react';
-import { createClient, AnalyticsProvider } from '@segment/analytics-react-native';
-import { useEvent, useConfig } from 'ordering-components/native';
+import {
+  createClient,
+  AnalyticsProvider
+} from '@segment/analytics-react-native';
+import { useEvent, useConfig, useLanguage } from 'ordering-components/native';
 
 export const AnalyticsSegment = (props: any) => {
   const { children } = props
 
   const [events] = useEvent()
   const [configState] = useConfig()
+  const [, t] = useLanguage()
   const [segmentClient, setSegmentClient] = useState<any>({})
 
+  const handleProductsSearched = (query: any) => {
+    segmentClient.track('Products Searched', {
+      query: query
+    })
+  }
+
+  const handleProductListViewed = (category: any) => {
+    segmentClient.track('Product List Viewed', {
+      business_id: category?.business_id,
+      category_id: category?.id,
+      category: category?.name,
+      products: category?.products
+    })
+  }
+
+  const handlePromotionViewed = (promotion: any) => {
+    segmentClient.track('Promotion Viewed', {
+      promotion_id: (promotion?.id || '').toString(),
+      name: promotion.name,
+      position: promotion.position
+    })
+  }
+
+  const handlePromotionClicked = (promotion: any) => {
+    segmentClient.track('Promotion Clicked', {
+      promotion_id: (promotion?.id || '').toString(),
+      name: promotion.name,
+      position: promotion.position
+    })
+  }
+
   const handleClickProduct = (product: any) => {
     segmentClient.track('Product Clicked', {
       id: product.id,
@@ -18,6 +53,15 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleProductViewed = (product: any) => {
+    segmentClient.track('Product Viewed', {
+      id: product.id,
+      name: product.name,
+      category: product.category_id,
+      price: product.price
+    })
+  }
+
   const handleProductAdded = (product: any) => {
     segmentClient.track('Product Added', {
       id: product.id,
@@ -38,6 +82,23 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleCartViewed = (cart: any) => {
+    segmentClient.track('Cart Viewed', {
+      id: cart.uuid,
+      products: cart?.products
+    })
+  }
+
+  const handleCheckoutStarted = (cart: any) => {
+    segmentClient.track('Checkout Started', {
+      cart_id: cart?.uuid,
+      affiliation: cart?.business?.name,
+      revenue: cart?.total,
+      tax: cart?.tax_total,
+      shipping: cart?.delivery_zone_price
+    })
+  }
+
   const handleOrderPlaced = (order: any) => {
     segmentClient.track('Order Placed', {
       id: order.id,
@@ -65,6 +126,35 @@ export const AnalyticsSegment = (props: any) => {
       tax: order.tax_total,
       shipping: order.delivery_zone_price
     })
+
+    if (order?.history?.length) {
+      const lasthistory = order.history[order.history.length - 1]
+      if (lasthistory?.data) {
+        lasthistory.data.forEach(item => {
+          if (item.attribute === 'status') {
+            if (item.new === 15) {
+              segmentClient.track('Order Completed', {
+                id: order.id,
+                affiliation: order.business?.name,
+                revenue: order.total,
+                tax: order.tax_total,
+                shipping: order.delivery_zone_price
+              })
+            }
+            const orderCancelled = [2, 5, 6, 10, 12, 16, 17]
+            if (orderCancelled.includes(item.new)) {
+              segmentClient.track('Order Cancelled', {
+                id: order.id,
+                affiliation: order.business?.name,
+                revenue: order.total,
+                tax: order.tax_total,
+                shipping: order.delivery_zone_price
+              })
+            }
+          }
+        })
+      }
+    }
   }
 
   const handleAddOrder = (order: any) => {
@@ -77,6 +167,51 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleCouponEntered = (cart: any) => {
+    segmentClient.track('Coupon Entered', {
+      cart_id: cart.uuid,
+      coupon: cart.coupon
+    })
+  }
+
+  const handleCouponApplied = (cart: any) => {
+    const coupon: any = cart?.offers?.find(offer => offer.type === 2)
+    if (coupon) {
+      segmentClient.track('Coupon Applied', {
+        cart_id: cart.uuid,
+        coupon_id: coupon.id,
+        coupon_name: coupon?.name,
+        discount: coupon?.summary?.discount
+      })
+    }
+  }
+
+  const handleCouponDenied = (coupon: any) => {
+    segmentClient.track('Coupon Denied', {
+      business_id: coupon.business_id,
+      coupon: coupon.coupon,
+      user_id: coupon?.user_id,
+      reason: typeof coupon.reason === 'string' ? t(coupon.reason) : t(coupon.reason[0])
+    })
+  }
+
+  const handleCouponRemoved = (coupon: any) => {
+    segmentClient.track('Coupon Removed', {
+      business_id: coupon.business_id,
+      coupon_id: coupon.offer_id,
+    })
+  }
+
+  const handleProductReviewed = (products: any) => {
+    products.forEach((product: any) => {
+      segmentClient.track('Product Reviewed', {
+        product_id: product.product_id,
+        review_body: product.comment,
+        rating: product.qualification
+      })
+    })
+  }
+
   const handleLogin = (data: any) => {
     segmentClient.identify(data.id, {
       email: data.email,
@@ -84,25 +219,74 @@ export const AnalyticsSegment = (props: any) => {
     })
   }
 
+  const handleProductAddedToWishlist = (product: any) => {
+    segmentClient.track('Product Added to Wishlist', product)
+  }
+
+  const handleProductRemovedFromWishlist = (product: any) => {
+    segmentClient.track('Product Removed from Wishlist', product)
+  }
+
+  const handleWishlistProductAddedToCart = (product: any, result: any) => {
+    segmentClient.track('Wishlist Product Added to Cart', {
+      cart_id: result.uuid,
+      product_id: product.id,
+      name: product.name,
+      category: product.categoryId,
+      price: product.price,
+      quantity: product.quantity
+    })
+  }
+
   useEffect(() => {
     if (segmentClient?.config?.writeKey) {
+      events.on('products_searched', handleProductsSearched)
+      events.on('product_list_viewed', handleProductListViewed)
+      events.on('promotion_viewed', handlePromotionViewed)
+      events.on('promotion_clicked', handlePromotionClicked)
       events.on('product_clicked', handleClickProduct)
-      events.on('userLogin', handleLogin)
+      events.on('product_viewed', handleProductViewed)
       events.on('product_added', handleProductAdded)
-      events.on('order_placed', handleOrderPlaced)
+      events.on('cart_product_removed', handleProductRemoved)
+      events.on('cart_viewed', handleCartViewed)
+      events.on('checkout_started', handleCheckoutStarted)
       events.on('order_updated', handleUpdateOrder)
+      events.on('coupon_entered', handleCouponEntered)
+      events.on('offer_applied', handleCouponApplied)
+      events.on('offer_denied', handleCouponDenied)
+      events.on('offer_removed', handleCouponRemoved)
+      events.on('product_reviewed', handleProductReviewed)
+      events.on('userLogin', handleLogin)
+      events.on('order_placed', handleOrderPlaced)
       events.on('order_added', handleAddOrder)
-      events.on('cart_product_removed', handleProductRemoved)
+      events.on('product_added_to_wishlist', handleProductAddedToWishlist)
+      events.on('product_removed_from_wishlist', handleProductRemovedFromWishlist)
+      events.on('wishlist_product_added_to_cart', handleWishlistProductAddedToCart)
     }
     return () => {
       if (segmentClient?.config?.writeKey) {
+        events.off('products_searched', handleProductsSearched)
+        events.off('product_list_viewed', handleProductListViewed)
+        events.off('promotion_viewed', handlePromotionViewed)
+        events.off('promotion_clicked', handlePromotionClicked)
         events.off('product_clicked', handleClickProduct)
-        events.off('userLogin', handleLogin)
+        events.off('product_viewed', handleProductViewed)
         events.off('product_added', handleProductAdded)
-        events.off('order_placed', handleOrderPlaced)
+        events.off('cart_product_removed', handleProductRemoved)
+        events.off('cart_viewed', handleCartViewed)
+        events.off('checkout_started', handleCheckoutStarted)
         events.off('order_updated', handleUpdateOrder)
+        events.off('coupon_entered', handleCouponEntered)
+        events.off('offer_applied', handleCouponApplied)
+        events.off('offer_denied', handleCouponDenied)
+        events.off('offer_removed', handleCouponRemoved)
+        events.off('product_reviewed', handleProductReviewed)
+        events.off('userLogin', handleLogin)
+        events.off('order_placed', handleOrderPlaced)
         events.off('order_added', handleAddOrder)
-        events.off('cart_product_removed', handleProductRemoved)
+        events.off('product_added_to_wishlist', handleProductAddedToWishlist)
+        events.off('product_removed_from_wishlist', handleProductRemovedFromWishlist)
+        events.off('wishlist_product_added_to_cart', handleWishlistProductAddedToCart)
       }
     }
   }, [segmentClient])
@@ -110,7 +294,7 @@ export const AnalyticsSegment = (props: any) => {
   useEffect(() => {
     if (configState?.configs?.segment_track_id?.value) {
       const _segmentClient: any = createClient({
-        writeKey: configState?.configs?.segment_track_id?.value
+        writeKey: configState?.configs?.segment_track_id?.value,
       });
       setSegmentClient(_segmentClient)
     }
@@ -122,6 +306,5 @@ export const AnalyticsSegment = (props: any) => {
         {children}
       </AnalyticsProvider>
     </>
-
   )
 }

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

@@ -21,7 +21,7 @@ export const AppleLogin = (props: any) => {
   const [{ configs }] = useConfig();
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
@@ -53,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -66,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -79,7 +79,7 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
+
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components/native'
 
-export const Container = styled.View``
+export const Container = styled.View`
+  margin-bottom: 20px;
+`
 
 export const AppleButton = styled.TouchableOpacity`
   background-color: #FFFFFF;

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

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking, Pressable, Image } from 'react-native';
 import FastImage from 'react-native-fast-image'
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes, shape } from '../../utils';
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../utils';
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
@@ -21,7 +21,6 @@ import {
 	BusinessInfo,
 	BusinessInfoItem,
 	WrapReviews,
-	WrapBusinessInfo,
 	TitleWrapper,
 	RibbonBox,
 	SocialListWrapper
@@ -46,6 +45,7 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
+	const [imageRealSize, setImageRealSize] = useState({ width: 16, height: 9, loading: true })
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const hideLogo = theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
 	const hideDeliveryFee = theme?.business_view?.components?.header?.components?.business?.components?.fee?.hidden
@@ -62,7 +62,7 @@ export const BusinessBasicInformation = (
 			height: 150,
 		},
 		headerStyle: {
-			height: isChewLayout ? 170 : 260,
+			aspectRatio: imageRealSize?.width / imageRealSize?.height
 		},
 		logoStyle: {
 			width: 72,
@@ -101,11 +101,11 @@ export const BusinessBasicInformation = (
 			borderRadius: 3,
 			borderColor: theme.colors.border,
 			borderWidth: isChewLayout ? 0 : 1,
-			width: 20,
-			height: 20,
+			width: 30,
+			height: 30,
 			justifyContent: 'center',
 			alignItems: 'center',
-			marginRight: 5,
+			marginRight: 10,
 			marginBottom: 7
 		},
 		tiktokIcon: {
@@ -146,7 +146,7 @@ export const BusinessBasicInformation = (
 	}
 
 	const getBusinessType = () => {
-		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
+		if (Object.keys(business || {}).length <= 0) return t('GENERAL', 'General');
 		const _types: any = [];
 		types.forEach(
 			(type) =>
@@ -166,7 +166,7 @@ export const BusinessBasicInformation = (
 				<MaterialComIcon
 					name={iconTitle}
 					color={isChewLayout ? theme.colors.black : theme.colors.textNormal}
-					size={isChewLayout ? 18 : 14}
+					size={isChewLayout ? 25 : 22}
 				/>
 			</TouchableOpacity>
 		)
@@ -196,6 +196,20 @@ export const BusinessBasicInformation = (
 		}
 	}, [businessState?.business])
 
+	useEffect(() => {
+		const bannerImage = header || businessState?.business?.header
+		if (!bannerImage) {
+			setImageRealSize({ width: 16, height: 9, loading: false })
+			return
+		}
+		Image.getSize(bannerImage, (width: number, height: number) => {
+			setImageRealSize({ width: width, height: height, loading: false });
+		  }, (error: any) => {
+			setImageRealSize({ ...imageRealSize, loading: false });
+			console.log(error);
+		  });
+	}, [header, businessState?.business?.header])
+
 	const SocialIcons = () => {
 		return (
 			<>
@@ -203,7 +217,7 @@ export const BusinessBasicInformation = (
 					<Placeholder Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
 							{[...Array(5).keys()].map(i => (
-								<View style={styles.socialIcon} key={i}>
+								<View style={{ ...styles.socialIcon, borderWidth: 0 }} key={i}>
 									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
 								</View>
 							))}
@@ -284,18 +298,13 @@ export const BusinessBasicInformation = (
 							? styles.businesInfoheaderStyle
 							: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
 					}
-					{...(!loading && {
-						source: (header || businessState?.business?.header) ? {
-							uri: header || optimizeImage(businessState?.business?.header, 'h_250,c_limit')
+					{...(!loading && !imageRealSize?.loading && {
+						source: (header || businessState?.business?.header || typeof theme?.images?.dummies?.businessHeader === 'string') ? {
+							uri: optimizeImage(businessState?.business?.header, 'h_250,c_limit') || header || theme?.images?.dummies?.businessHeader
 						} : theme?.images?.dummies?.businessHeader
 					})}
 					imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
 				>
-					{!isBusinessInfoShow && !hideInfoIcon && !isChewLayout && (
-						<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
-							<OIcon src={theme.images.general.info} width={24} />
-						</WrapBusinessInfo>
-					)}
 					{isChewLayout && !loading && (
 						<View style={styles.headerChewStyle}>
 							<OText size={24} weight={'600'} mBottom={-5}>
@@ -317,21 +326,31 @@ export const BusinessBasicInformation = (
 				{!hideLogo && (
 					<BusinessLogo isChewLayout={isChewLayout}>
 						{!isBusinessInfoShow && (
-							logo || businessState?.business?.logo ?
-								<FastImage
-									style={styles.logoStyle}
-									source={{
-										uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit'),
-										priority: FastImage.priority.high,
-										cache: FastImage.cacheControl.web
-									}}
-									resizeMode={FastImage.resizeMode.contain}
-								/>
-								:
-								<OIcon
-									src={theme?.images?.dummies?.businessLogo}
-									style={styles.logoStyle}
-								/>
+							<>
+								{loading ? (
+									<View style={styles.logoStyle}>
+										<Placeholder Animation={Fade}>
+											<PlaceholderLine height={72} style={{ borderRadius: 8 }} />
+										</Placeholder>
+									</View>
+								) : (
+									logo || businessState?.business?.logo || typeof theme.images.dummies.businessLogo === 'string' ?
+										<FastImage
+											style={styles.logoStyle}
+											source={{
+												uri: logo || optimizeImage(businessState?.business?.logo, 'h_70,c_limit') || theme.images.dummies.businessLogo,
+												priority: FastImage.priority.high,
+												cache: FastImage.cacheControl.web
+											}}
+											resizeMode={FastImage.resizeMode.contain}
+										/>
+										:
+										<OIcon
+											src={theme?.images?.dummies?.businessLogo}
+											style={styles.logoStyle}
+										/>
+								)}
+							</>
 						)}
 					</BusinessLogo>
 				)}
@@ -351,13 +370,15 @@ export const BusinessBasicInformation = (
 									{business?.ribbon?.enabled && (
 										<RibbonBox
 											bgColor={business?.ribbon?.color}
+											colorText={lightenDarkenColor(business?.ribbon?.color)}
+											borderRibbon={lightenDarkenColor(business?.ribbon?.color)}
 											isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
 											isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 										>
 											<OText
 												size={10}
 												weight={'400'}
-												color={theme.colors.white}
+												color={lightenDarkenColor(business?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 												numberOfLines={2}
 												ellipsizeMode='tail'
 												lineHeight={13}
@@ -451,13 +472,28 @@ export const BusinessBasicInformation = (
 										</>
 									)}
 									{!hideReviewsPopup && (
-										<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
+										<>
+											<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
+												<OText
+													color={theme.colors.primary}
+													style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
+													size={12}
+												>
+													{t('REVIEWS', 'Reviews')}
+												</OText>
+											</TouchableOpacity>
+											<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+										</>
+									)}
+
+									{!isBusinessInfoShow && !hideInfoIcon && !isChewLayout && (
+										<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
 											<OText
 												color={theme.colors.primary}
 												style={{ textDecorationColor: theme.colors.primary, textDecorationLine: 'underline' }}
 												size={12}
 											>
-												{t('REVIEWS', 'Reviews')}
+												{t('INFORMATION', 'Information')}
 											</OText>
 										</TouchableOpacity>
 									)}

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

@@ -8,9 +8,6 @@ export const BusinessContainer = styled.View`
 export const BusinessHeader = styled.ImageBackground`
   width: 100%;
   position: relative;
-  max-height: 258px;
-  height: 258px;
-  resize-mode: cover;
 `;
 export const BusinessLogo = styled.View`
   position: absolute;
@@ -36,25 +33,18 @@ export const WrapReviews = styled.View`
   align-items: center;
   justify-content: flex-start;
 `;
-export const WrapBusinessInfo = styled.TouchableOpacity`
-  position: absolute;
-  top: 16px;
-  end: 39px;
-`;
 
 export const TitleWrapper = styled.View`
   width: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
 `
 
 export const RibbonBox = styled.View`
-  margin-left: 5px;
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 2px 8px;
   max-width: 180px;
   align-self: flex-start;
+  margin-bottom: 5px;
 
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
@@ -67,6 +57,14 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `
 
 export const SocialListWrapper = styled.ScrollView`