ordering-ui-react-native 0.12.7 → 0.12.11

package/themes/single-business/src/components/ReviewOrder/styles.tsx

@@ -1,47 +1,44 @@
 import styled from 'styled-components/native'
 
-export const ReviewOrderContainer = styled.View`
-  width: 100%;
-  flex: 1;
-`
-export const ReviewOrderTitle = styled.View`
-
+export const ReviewOrderContainer = styled.ScrollView`
+  padding: 20px 40px;
+  margin-bottom: 100px;
 `
 
 export const BusinessLogo = styled.View`
   margin-vertical: 5px;
   align-items: center;
-  box-shadow: 0 1px 2px #ddd;
-  border-radius: 7.6px;
-  margin-bottom: 20px;
 `
 
 export const FormReviews = styled.View`
   flex: 1;
   height: 100%;
+  margin-top: 30px;
 `
 
-export const Category = styled.View`
-  padding: 10px;
-  border-width: 1px;
-  border-color: ${(props: any) => props.theme.colors.secundaryContrast};
+export const CommentsButtonGroup = styled.View`
   flex-direction: row;
-  justify-content: space-between;
-  margin-vertical: 5px;
-  border-radius: 10px;
+  flex-wrap: wrap;
 `
 
-export const Stars = styled.View`
+export const ActionContainer = styled.View`
   flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3px 10px;
 `
 
-export const BlockWrap = styled.View`
-  margin-vertical: 16px;
-  padding-bottom: 20px;
-`;
+export const SkipButton = styled.TouchableOpacity`
+`
 
-export const CommentItem = styled.TouchableOpacity`
-  padding: 3px 10px;
-  border-radius: 20px;
-  min-height: 24px;
-`;
+export const RatingBarContainer = styled.View`
+  margin-top: 10px;
+  margin-bottom: 25px;
+`
+
+export const RatingTextContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+`

package/themes/single-business/src/components/UpsellingProducts/index.tsx

@@ -1,24 +1,24 @@
 import React, { useState, useEffect } from 'react'
-import Spinner from 'react-native-loading-spinner-overlay';
-import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { Platform, SafeAreaView, StyleSheet, TouchableOpacity, View } from 'react-native'
 import {
-	UpsellingPage as UpsellingPageController,
-	useUtils,
-	useLanguage,
+  UpsellingPage as UpsellingPageController,
+  useUtils,
+  useLanguage,
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OModal, OBottomPopup, OButton } from '../shared'
 import { UpsellingProductsParams } from '../../types'
 import {
-	Container,
-	UpsellingContainer,
-	Item,
-	Details,
-	AddButton,
-	CloseUpselling,
-	TopBar,
-	TopActions
+  Container,
+  UpsellingContainer,
+  Item,
+  Details,
+  AddButton,
+  CloseUpselling,
+  TopBar,
+  TopActions,
+  WrapPrice,
+  WrapperAdd
 } from './styles'
 import { ProductForm } from '../ProductForm';
 import { OrderSummary } from '../OrderSummary';
@@ -27,192 +27,233 @@ import NavBar from '../NavBar';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
-	const {
-		isCustomMode,
-		upsellingProducts,
-		business,
-		cart,
-		handleUpsellingPage,
-		handleCloseUpsellingPage,
-		openUpselling,
-		canOpenUpselling,
-		setCanOpenUpselling
-	} = props
+  const {
+    isCustomMode,
+    isShowTitle,
+    upsellingProducts,
+    business,
+    cart,
+    handleUpsellingPage,
+    handleCloseUpsellingPage,
+    openUpselling,
+    canOpenUpselling,
+    setCanOpenUpselling
+  } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
 
+  const styles = StyleSheet.create({
+    imageStyle: {
+      width: 73,
+      height: 73,
+      resizeMode: 'cover',
+      borderRadius: 7.6,
+    },
+    closeUpsellingButton: {
+      borderRadius: 7.6,
+      borderColor: theme.colors.primary,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 1,
+      height: 44,
+      marginBottom: 10,
+      shadowOpacity: 0
+    },
+    cancelBtn: {
+      paddingHorizontal: 18,
+      borderWidth: 1,
+      borderRadius: 7.6,
+      borderColor: theme.colors.textSecondary,
+      height: 38
+    }
+  })
 
-	const styles = StyleSheet.create({
-		imageStyle: {
-			width: 73,
-			height: 73,
-			resizeMode: 'cover',
-			borderRadius: 7.6,
-		},
-		closeUpsellingButton: {
-			borderRadius: 7.6,
-			borderColor: theme.colors.primary,
-			backgroundColor: theme.colors.primary,
-			borderWidth: 1,
-			height: 44,
-			marginBottom: 10,
-			shadowOpacity: 0
-		},
-		cancelBtn: {
-			paddingHorizontal: 18,
-			borderWidth: 1,
-			borderRadius: 7.6,
-			borderColor: theme.colors.textSecondary,
-			height: 38
-		}
-	})
+  const [actualProduct, setActualProduct] = useState<any>(null)
+  const [modalIsOpen, setModalIsOpen] = useState(false)
+  const [{ parsePrice, optimizeImage }] = useUtils()
+  const [, t] = useLanguage()
+  const { bottom } = useSafeAreaInsets()
 
-	const [actualProduct, setActualProduct] = useState<any>(null)
-	const [modalIsOpen, setModalIsOpen] = useState(false)
-	const [{ parsePrice }] = useUtils()
-	const [, t] = useLanguage()
-	const { bottom } = useSafeAreaInsets()
+  useEffect(() => {
+    if (!isCustomMode) {
+      if (upsellingProducts?.products?.length && !upsellingProducts.loading) {
+        setCanOpenUpselling && setCanOpenUpselling(true)
+      }
+      if ((!upsellingProducts?.products?.length && !upsellingProducts.loading && !canOpenUpselling && openUpselling) ||
+        (!upsellingProducts?.products?.length && !upsellingProducts.loading && openUpselling)) {
+        handleUpsellingPage && handleUpsellingPage()
+      }
+    }
+  }, [upsellingProducts.loading, upsellingProducts?.products.length])
 
-	useEffect(() => {
-		if (!isCustomMode) {
-			if (upsellingProducts?.products?.length && !upsellingProducts.loading) {
-				setCanOpenUpselling && setCanOpenUpselling(true)
-			}
-			if ((!upsellingProducts?.products?.length && !upsellingProducts.loading && !canOpenUpselling && openUpselling) ||
-				(!upsellingProducts?.products?.length && !upsellingProducts.loading && openUpselling)) {
-				handleUpsellingPage && handleUpsellingPage()
-			}
-		}
-	}, [upsellingProducts.loading, upsellingProducts?.products.length])
+  const handleFormProduct = (product: any) => {
+    setActualProduct(product)
+    setModalIsOpen(true)
+  }
 
-	const handleFormProduct = (product: any) => {
-		setActualProduct(product)
-		setModalIsOpen(true)
-	}
+  const handleSaveProduct = () => {
+    setActualProduct(null)
+    setModalIsOpen(false)
+  }
 
-	const handleSaveProduct = () => {
-		setActualProduct(null)
-		setModalIsOpen(false)
-	}
+  const getProductPriceWithOffers = (product: any) => {
+    return product?.in_offer
+      ? product?.offer_rate_type === 1
+        ? product?.price - ((product?.price * product?.offer_rate) / 100)
+        : product?.offer_rate
+      : product?.price
+  }
 
-	const UpsellingLayout = () => {
-		return (
-			<Container>
-				<UpsellingContainer
-					horizontal
-					showsHorizontalScrollIndicator={false}
-					contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
-				>
-					{
-						!upsellingProducts.loading && (
-							<>
-								{
-									!upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
-										<Item key={product.id}>
-											<View style={{ flexBasis: '57%' }}>
-												<Details>
-													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
-													<OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
-												</Details>
-												<AddButton onPress={() => handleFormProduct(product)}>
-													<OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
-												</AddButton>
-											</View>
-											<View style={{}}>
-												<OIcon url={product.images} style={styles.imageStyle} />
-											</View>
-										</Item>
-									)) : (
-										<OText>
-											{upsellingProducts.message}
-										</OText>
-									)
-								}
-							</>
-						)
-					}
-				</UpsellingContainer>
-			</Container>
-		)
-	}
+  const UpsellingLayout = () => {
+    return (
+      <Container>
+        {isShowTitle && (
+          <OText
+            size={16}
+            lineHeight={24}
+            weight={'500'}
+            style={{ marginBottom: 10, marginTop: 0, paddingTop: 0 }}
+          >
+            {t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
+          </OText>
+        )}
+        <UpsellingContainer
+          horizontal
+          showsHorizontalScrollIndicator={false}
+        >
+          {upsellingProducts.products.map((product: any) =>(
+            <Item key={product.id}>
+              <Details>
+                <OText
+                  size={16}
+                  numberOfLines={1}
+                  ellipsizeMode='tail'
+                  weight='bold'
+                >
+                  {product.name}
+                </OText>
+                <WrapPrice>
+                  <OText
+                    size={14}
+                  >
+                    {parsePrice(getProductPriceWithOffers(product))}
+                  </OText>
+                  {product?.in_offer && (
+                    <OText
+                      size={15}
+                      color={theme.colors.lightGray}
+                      style={{
+                        textDecorationLine: 'line-through',
+                        textDecorationStyle: 'solid',
+                        marginLeft: 20
+                      }}
+                    >
+                      {parsePrice(product?.price)}
+                    </OText>
+                  )}
+                </WrapPrice>
+                <AddButton onPress={() => handleFormProduct(product)}>
+                  <WrapperAdd>
+                    <OText
+                      color={theme.colors.primary}
+                      size={14}
+                    >
+                      {t('ADD', 'Add')}
+                    </OText>
+                  </WrapperAdd>
+                </AddButton>
+              </Details>
+              <View style={{ width: '30%', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
+                <OIcon
+                  url={optimizeImage(product?.images, 'h_200,c_limit')}
+                  style={styles.imageStyle}
+                />
+              </View>
+            </Item>
+          ))}
+        </UpsellingContainer>
+      </Container>
+    )
+  }
 
-	return (
-		<>
-			{isCustomMode ? (
-				<UpsellingLayout />
-			) : (
-				<>
-					{!canOpenUpselling || upsellingProducts?.products?.length === 0 ? null : (
-						<>
-							{!modalIsOpen && (
-								<OBottomPopup
-									title={''}
-									open={openUpselling}
-									onClose={() => handleUpsellingPage()}
-								>
-									<TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-										<TopActions onPress={() => handleCloseUpsellingPage()}>
-											<OIcon src={theme.images.general.arrow_left} width={20} />
-										</TopActions>
-										{/* <TopActions style={styles.cancelBtn} onPress={() => handleCloseUpsellingPage()}>
-											<OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
-										</TopActions> */}
-									</TopBar>
-									<ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 46 : 70) }} showsVerticalScrollIndicator={false}>
-										<View style={{ paddingHorizontal: 40 }}>
-											<OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
-											<OrderSummary
-												cart={cart}
-												isCartPending={cart?.status === 2}
-											/>
-										</View>
-										<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 23 }} />
-										<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-											<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-											<UpsellingLayout />
-											<CloseUpselling>
-												<OButton
-													imgRightSrc=''
-													text={t('CHECKOUT', 'Checkout')}
-													style={styles.closeUpsellingButton}
-													textStyle={{ color: theme.colors.white, fontSize: 14 }}
-													onClick={() => handleUpsellingPage()}
-												/>
-											</CloseUpselling>
-										</View>
-									</ScrollView>
-								</OBottomPopup>
-							)}
-						</>
-					)}
-				</>
-			)}
-			<OModal
-				open={modalIsOpen}
-				onClose={() => setModalIsOpen(false)}
-				entireModal
-				customClose
-			>
-				{actualProduct && (
-					<ProductForm
-						product={actualProduct}
-						businessId={actualProduct?.api?.businessId}
-						businessSlug={business.slug}
-						onSave={() => handleSaveProduct()}
-						onClose={() => setModalIsOpen(false)}
-					/>
-				)}
-			</OModal>
-		</>
-	)
+  return (
+    <>
+      {upsellingProducts?.products?.length === 0 ? null : (
+        isCustomMode ? (
+          <UpsellingLayout />
+        ) : (
+          <>
+            {!canOpenUpselling || upsellingProducts?.products?.length === 0 ? null : (
+              <>
+                {!modalIsOpen && (
+                  <OBottomPopup
+                    title={''}
+                    open={openUpselling}
+                    onClose={() => handleUpsellingPage()}
+                  >
+                    <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
+                      <TopActions onPress={() => handleCloseUpsellingPage()}>
+                        <OIcon src={theme.images.general.arrow_left} width={20} />
+                      </TopActions>
+                      {/* <TopActions style={styles.cancelBtn} onPress={() => handleCloseUpsellingPage()}>
+                        <OText size={12} color={theme.colors.textSecondary}>{t('CANCEL', 'Cancel')}</OText>
+                      </TopActions> */}
+                    </TopBar>
+                    <ScrollView style={{ marginBottom: bottom + (Platform.OS == 'ios' ? 46 : 70) }} showsVerticalScrollIndicator={false}>
+                      <View style={{ paddingHorizontal: 40 }}>
+                        <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+                        <OrderSummary
+                          cart={cart}
+                          isCartPending={cart?.status === 2}
+                        />
+                      </View>
+                      <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 23 }} />
+                      <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+                        <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+                        <UpsellingLayout />
+                        <CloseUpselling>
+                          <OButton
+                            imgRightSrc=''
+                            text={t('CHECKOUT', 'Checkout')}
+                            style={styles.closeUpsellingButton}
+                            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                            onClick={() => handleUpsellingPage()}
+                          />
+                        </CloseUpselling>
+                      </View>
+                    </ScrollView>
+                  </OBottomPopup>
+                )}
+              </>
+            )}
+          </>
+        )
+      )}
+      <OModal
+        open={modalIsOpen}
+        onClose={() => setModalIsOpen(false)}
+        entireModal
+        customClose
+      >
+        {actualProduct && (
+          <ProductForm
+            product={actualProduct}
+            businessId={actualProduct?.api?.businessId}
+            businessSlug={business.slug}
+            onSave={() => handleSaveProduct()}
+            onClose={() => setModalIsOpen(false)}
+          />
+        )}
+      </OModal>
+    </>
+  )
 }
 
 export const UpsellingProducts = (props: UpsellingProductsParams) => {
-	const upsellingProductsProps = {
-		...props,
-		UIComponent: UpsellingProductsUI
-	}
-	return (
-		<UpsellingPageController {...upsellingProductsProps} />
-	)
+  const upsellingProductsProps = {
+    ...props,
+    UIComponent: UpsellingProductsUI,
+  }
+  return (
+    <UpsellingPageController {...upsellingProductsProps} />
+  )
 }

package/themes/single-business/src/components/UpsellingProducts/styles.tsx

@@ -1,43 +1,49 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  margin: 20px 0;
-  margin-start: -40px;
-  margin-end: -40px;
+  /* margin: 20px 0; */
 `
 export const UpsellingContainer = styled.ScrollView`
-  max-height: 92px;
-  margin-right: 40px;
+  max-height: 220px;
 `
 export const Item = styled.View`
   border-width: 1px;
   border-color: ${(props: any) => props.theme.colors.border};
-  border-radius: 7.6px;
+  border-radius: 10px;
   flex-direction: row;
-  align-items: flex-start;
+  width: 250px;
+  align-items: center;
   justify-content: space-between;
   padding: 10px;
-  margin-right: 12px;
-  min-width: 207px;
-  max-width: 207px;
-  width: 207px;
+  margin-right: 15px;
 `
 export const Details = styled.View`
+  flex-direction: column;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: flex-start;
+  max-width: 69%;
 `
 export const AddButton = styled.TouchableOpacity`
-	padding: 4px 8px;
-	background-color: ${(props: any) => props.theme.colors.primaryContrast};
-	border-radius: 30px;
-	width: 40%;
-	align-items: center;
-	margin-top: 6px;
+  margin-top: 7px;
 `
 export const CloseUpselling = styled.View`
   margin-vertical: 10px;
   width: 100%;
 `
+
+export const WrapperAdd = styled.View`
+  padding: 6px 20px;
+  border-radius: 50px;
+  background-color: ${(props: any) => props.theme.colors.primaryContrast};
+`
+
+export const WrapPrice = styled.View`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 5px;
+`
+
 export const TopBar = styled.View`
   flex-direction: row;
   justify-content: space-between;

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

@@ -235,6 +235,7 @@ export interface NotFoundSourceParams {
 }
 export interface OrdersOptionParams {
 	orderList?: any,
+	sortOrders?: any,
 	activeOrders?: boolean,
 	pagination?: any,
 	titleContent?: string,
@@ -285,6 +286,7 @@ export interface OrderDetailsParams {
 	isFromCheckout?: boolean,
 	driverLocation?: any,
 	isFromRoot?: any,
+	onNavigationRedirect?: any,
 	goToBusinessList?: boolean
 }
 export interface ProductItemAccordionParams {
@@ -300,7 +302,7 @@ export interface ProductItemAccordionParams {
 	isFromCheckout?: any
 }
 export interface ReviewOrderParams {
-	order?: { orderId: number, businessId: number, logo: string },
+	order?: any,
 	stars?: any,
 	handleChangeInput?: any,
 	handleChangeRating?: any,
@@ -308,6 +310,10 @@ export interface ReviewOrderParams {
 	formState?: any,
 	navigation?: any,
 	orderComments?: any,
+	setStars?: any,
+  onNavigationRedirect?: any,
+  handleReviewState?: any,
+  setIsReviewed?: any,
 }
 export interface MessagesParams {
 	type?: string,
@@ -385,6 +391,7 @@ export interface OrderTypeSelectParams {
 }
 export interface UpsellingProductsParams {
 	isCustomMode?: boolean;
+	isShowTitle?: boolean;
 	upsellingProducts?: any;
 	business?: any;
 	businessId?: number;
@@ -394,6 +401,7 @@ export interface UpsellingProductsParams {
 	canOpenUpselling?: boolean;
 	setCanOpenUpselling?: (value: any) => void;
 	cart?: any;
+	handleUpsellingProducts?: any;
 	handleCloseUpsellingPage: () => void;
 }
 
@@ -419,4 +427,4 @@ export interface HelpParams {
 export interface LastOrdersParams {
   orderList?: any,
   onRedirect?: any,
-}
+}