ordering-ui-react-native 0.15.31 → 0.15.33-release

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

@@ -4,22 +4,25 @@ import {
 	useConfig,
 	useOrder,
 	useUtils,
+	SingleProductCard as SingleProductCardController
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer } from './styles';
-import { StyleSheet } from 'react-native';
+import { CardContainer, CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { shape } from '../../utils';
 
-export const SingleProductCard = (props: SingleProductCardParams) => {
+const SinguleProductCardUI = (props: SingleProductCardParams) => {
 	const {
-		businessId,
 		product,
 		isSoldOut,
 		onProductClick,
 		productAddedToCartLength,
-		style
+		style,
+		handleFavoriteProduct
 	} = props;
 
 	const theme = useTheme();
@@ -31,6 +34,11 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			borderColor: theme.colors.border,
 			marginBottom: 28,
 		},
+		titleWrapper: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'space-between'
+		},
 		line18: {
 			lineHeight: 18,
 		},
@@ -46,8 +54,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		productStyle: {
 			width: 75,
 			height: 75,
-			borderRadius: 7.6,
-			marginStart: 12
+			borderRadius: 7.6
 		},
 		quantityContainer: {
 			position: 'absolute',
@@ -97,6 +104,11 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
+
+	const handleChangeFavorite = () => {
+		handleFavoriteProduct && handleFavoriteProduct(!product?.favorite)
+	}
+
 	return (
 		<CardContainer
 			style={[
@@ -113,14 +125,25 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 				</QuantityContainer>
 			)}
 			<CardInfo>
-				<OText
-					size={12}
-					weight={'500'}
-					numberOfLines={1}
-					ellipsizeMode="tail"
-					style={styles.line18}>
-					{product?.name}
-				</OText>
+				<View style={styles.titleWrapper}>
+					<OText
+						size={12}
+						weight={'500'}
+						numberOfLines={1}
+						ellipsizeMode="tail"
+						style={styles.line18}>
+						{product?.name}
+					</OText>
+					<TouchableOpacity
+						onPress={handleChangeFavorite}
+					>
+						<IconAntDesign
+							name={product?.favorite ? 'heart' : 'hearto'}
+							color={theme.colors.danger5}
+							size={18}
+						/>
+					</TouchableOpacity>
+				</View>
 				<PricesContainer>
 					<OText color={theme.colors.primary}>{product?.price ? parsePrice(product?.price) : ''}</OText>
 					{product?.offer_price !== null && product?.in_offer && (
@@ -136,21 +159,42 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 					{product?.description}
 				</OText>
 			</CardInfo>
-			{product?.images ? (
-				<FastImage
-					style={styles.productStyle}
-					source={{
-						uri: optimizeImage(product?.images, 'h_250,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-			) : (
-				<OIcon
-					src={theme?.images?.dummies?.product}
-					style={styles.productStyle}
-				/>
-			)}
+			<LogoWrapper>
+				{product?.ribbon?.enabled && (
+					<RibbonBox
+						bgColor={product?.ribbon?.color}
+						isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
+						isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
+					>
+						<OText
+							size={10}
+							weight={'400'}
+							color={theme.colors.white}
+							numberOfLines={2}
+							ellipsizeMode='tail'
+							lineHeight={13}
+						>
+							{product?.ribbon?.text}
+						</OText>
+					</RibbonBox>
+				)}
+				{product?.images ? (
+					<FastImage
+						style={styles.productStyle}
+						source={{
+							uri: optimizeImage(product?.images, 'h_250,c_limit'),
+							priority: FastImage.priority.normal,
+						}}
+						resizeMode={FastImage.resizeMode.cover}
+					/>
+				) : (
+					<OIcon
+						src={theme?.images?.dummies?.product}
+						style={styles.productStyle}
+					/>
+				)}
+			</LogoWrapper>
+
 			{(isSoldOut || maxProductQuantity <= 0) && (
 				<SoldOut>
 					<OText size={12} weight="bold" color={theme.colors.textSecondary} style={styles.soldOutTextStyle}>
@@ -161,3 +205,11 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 		</CardContainer>
 	);
 };
+
+export const SingleProductCard = (props: SingleProductCardParams) => {
+	const singleProductCardProps = {
+		...props,
+		UIComponent: SinguleProductCardUI
+	}
+	return <SingleProductCardController {...singleProductCardProps} />
+}

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const CardContainer = styled.TouchableOpacity`
   flex: 1;
@@ -31,3 +31,30 @@ export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const LogoWrapper = styled.View`
+  position: relative;
+  margin-left: 12px;
+`
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  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/StripeElementsForm/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, StyleSheet, useWindowDimensions, Keyboard } from 'react-native';
-import { useLanguage, useSession, useConfig } from 'ordering-components/native';
+import { useLanguage, useSession } from 'ordering-components/native';
 import {
 	StripeProvider,
 	CardField,
@@ -13,7 +13,6 @@ import { ErrorMessage } from './styles';
 import { StripeElementsForm as StripeFormController } from './naked';
 import { OButton, OText } from '../shared';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { StripeMethodForm } from '../../../../../src/components/StripeMethodForm';
 
 const StripeElementsFormUI = (props: any) => {
 	const {
@@ -23,18 +22,12 @@ const StripeElementsFormUI = (props: any) => {
 		businessId,
 		requirements,
 		stripeTokenHandler,
-		methodsPay,
-		paymethod,
-		onCancel,
-		cart,
-		merchantId
 	} = props;
 
 	const theme = useTheme();
 
 	const [, t] = useLanguage();
 	const [{ user }] = useSession();
-	const [{ configs }] = useConfig();
 	const [card, setCard] = useState<any>(null);
 	const [isCompleted, setIsCompleted] = useState(false);
 	const [errors, setErrors] = useState('')
@@ -44,30 +37,30 @@ const StripeElementsFormUI = (props: any) => {
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 
-	let billingDetails: any = {}
+  let billingDetails: any = {}
 
-	if (user?.name || user?.lastname) {
-		if (user?.name) {
-			billingDetails.name = user?.name
-		}
-		if (user?.lastname) {
-			billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
-		}
-	}
+  if (user?.name || user?.lastname) {
+    if (user?.name) {
+      billingDetails.name = user?.name
+    }
+    if (user?.lastname) {
+      billingDetails.name = `${billingDetails?.name} ${user?.lastname}`
+    }
+  }
 
-	if (user?.email) {
-		billingDetails.email = user?.email
-	}
+  if (user?.email) {
+    billingDetails.email = user?.email
+  }
 
-	if (user?.address) {
-		billingDetails.addressLine1 = user?.address
-	}
+  if (user?.address) {
+    billingDetails.addressLine1 = user?.address
+  }
 
 	const createPayMethod = async () => {
-		const params: any = { type: 'Card' }
-		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
-		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			setCreatePmLoading(true)
 			const { paymentMethod } = await createPaymentMethod(params);
@@ -100,10 +93,10 @@ const StripeElementsFormUI = (props: any) => {
 			createPayMethod();
 			return
 		}
-		const params: any = { type: 'Card' }
-		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
-		}
+    const params: any = { type: 'Card' }
+    if (Object.keys(billingDetails).length > 0) {
+      params.billingDetails = billingDetails
+    }
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
 
@@ -159,36 +152,27 @@ const StripeElementsFormUI = (props: any) => {
 		<View style={{ ...styles.container, height: height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
-					<StripeProvider
-						publishableKey={publicKey}
-						merchantIdentifier={`merchant.${merchantId}`}
-						urlScheme={merchantId}
-					>
-						{methodsPay?.includes(paymethod) ? (
-							<StripeMethodForm
-								handleSource={handleSource}
-								onCancel={onCancel}
-								cart={cart}
-								setErrors={setErrors}
-								paymethod={paymethod}
-								devMode={publicKey?.includes('test')}
-							/>
-						) : (
-							<CardField
-								postalCodeEnabled={true}
-								cardStyle={{
-									backgroundColor: '#FFFFFF',
-									textColor: '#000000',
-								}}
-								style={{
-									width: '100%',
-									height: 50,
-									marginVertical: 30,
-									zIndex: 9999,
-								}}
-								onCardChange={(cardDetails: any) => setCard(cardDetails)}
-							/>
-						)}
+					<StripeProvider publishableKey={publicKey}>
+						<CardField
+							postalCodeEnabled={false}
+							cardStyle={{
+								backgroundColor: '#FFFFFF',
+								textColor: '#000000',
+								fontSize: 17,
+								styles: {
+									
+								}
+							}}
+							style={{
+								width: '100%',
+								height: 50,
+								marginVertical: 50,
+								borderWidth: 1,
+								borderColor: theme.colors.border,
+								borderRadius: 7.6,
+							}}
+							onCardChange={(cardDetails: any) => setCard(cardDetails)}
+						/>
 					</StripeProvider>
 					{!!errors && (
 						<ErrorMessage>
@@ -213,19 +197,16 @@ const StripeElementsFormUI = (props: any) => {
 					</OText>
 				</ErrorMessage>
 			)}
-			{!methodsPay?.includes(paymethod) && (
-				<OButton
-					text={t('SAVE_CARD', 'Save card')}
-					bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-					borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-					style={styles.btnAddStyle}
-					textStyle={{ color: 'white' }}
-					imgRightSrc={null}
-					onClick={() => handleSaveCard()}
-					isDisabled={!isCompleted}
-					isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
-				/>
-			)}
+			<OButton
+				text={t('SAVE_CARD', 'Save card')}
+				bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+				borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+				style={styles.btnAddStyle}
+				textStyle={{ color: 'white', fontSize: 14 }}
+				imgRightSrc={null}
+				onClick={isCompleted ? () => handleSaveCard() : () => { }}
+				isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+			/>
 		</View>
 	)
 }

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useLanguage } from 'ordering-components/native'
+import { useLanguage, useUtils } from 'ordering-components/native'
 import { SingleProductCard } from '../SingleProductCard'
 import { TaxInformationContainer, ProductContainer } from './styles'
 import { OText } from '../shared'
@@ -13,8 +13,9 @@ interface taxInformationParams {
     fixed?: number,
     percentage?: number,
     id: number,
-    discounts?: any
-  } | null,
+    discounts?: any,
+    rate_type?: number
+  },
   products: Array<any>,
   type: string
 }
@@ -27,6 +28,7 @@ export const TaxInformation = (props: taxInformationParams) => {
   } = props
 
   const [, t] = useLanguage()
+  const [{ parsePrice }] = useUtils()
 
   const includedOnPriceString = data?.type === 1 ? `(${t('INCLUDED_ON_PRICE', 'Included on price')})` : `(${t('NOT_INCLUDED_ON_PRICE', 'Not included on price')})`
   const offersHideArray = ['offer_target_2', 'offer_target_3']
@@ -56,8 +58,12 @@ export const TaxInformation = (props: taxInformationParams) => {
 
   return (
     <TaxInformationContainer>
+      <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+      {`${data?.name ||
+              t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${data?.rate_type !== 2 ? `(${typeof data?.rate === 'number' ? `${data?.rate}%` : `${parsePrice(data?.fixed ?? 0)} + ${data?.percentage}%`})` : ''}  `}
+      </OText>
       {!!data?.description ? (
-        <OText size={24} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
+        <OText size={20} style={{ alignSelf: 'center', textAlign: 'center' }} mBottom={10}>
           {t('DESCRIPTION', 'Description')}: {data?.description} {data?.type && !type?.includes('offer') && includedOnPriceString}
         </OText>
       ) : (

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

@@ -4,7 +4,7 @@ import {
 	UpsellingPage as UpsellingPageController,
 	useUtils,
 	useLanguage,
-  useOrder
+	useOrder
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OText, OIcon, OBottomPopup, OButton } from '../shared'
@@ -62,7 +62,19 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.textSecondary,
 			height: 38
-		}
+		},
+		headerItem: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			marginVertical: 2,
+			marginHorizontal: 20,
+		},
+		btnBackArrow: {
+			borderWidth: 0,
+			backgroundColor: theme.colors.clear,
+			shadowColor: theme.colors.clear,
+			padding: 40,
+		},
 	})
 
 	const [modalIsOpen, setModalIsOpen] = useState(false)
@@ -77,11 +89,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		? cart?.products.map((product: any) => product.id)
 		: []
 
-  	const productsList = !upsellingProducts.loading && !upsellingProducts.error
-      ? upsellingProducts?.products?.length
-      	? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
-      	: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
-      : []
+	const productsList = !upsellingProducts.loading && !upsellingProducts.error
+		? upsellingProducts?.products?.length
+			? upsellingProducts?.products.filter((product: any) => !cartProducts.includes(product.id))
+			: (props?.products ?? []).filter((product: any) => !cartProducts.includes(product.id)) ?? []
+		: []
 
 	useEffect(() => {
 		if (!isCustomMode && !props.products) {
@@ -95,15 +107,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		}
 	}, [upsellingProducts.loading, upsellingProducts?.products.length])
 
-	useEffect(() => {
-		isCheckout && Object.keys(cart).length === 0 && onNavigationRedirect && onNavigationRedirect('MyOrders')
-	}, [cart, isCheckout])
-
 	const handleFormProduct = (product: any) => {
-    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-      product: product,
-      businessId: product?.api?.businessId,
-      businessSlug: business.slug,
+		onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			product: product,
+			businessId: product?.api?.businessId,
+			businessSlug: business.slug,
 		})
 	}
 
@@ -119,8 +127,8 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 						!upsellingProducts.loading && (
 							<>
 								{
-									!upsellingProducts.error ? productsList.map((product: any) => (
-										<Item key={product.id}>
+									!upsellingProducts.error ? productsList.map((product: any, i: number) => (
+										<Item key={`${product.id}_${i}`}>
 											<View style={{ flexBasis: '57%' }}>
 												<Details>
 													<OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
@@ -148,50 +156,54 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 		)
 	}
 
-  const UpsellingContent = () => {
-    return (
-      <>
-        <TopBar style={{ paddingTop: Platform.OS == 'ios' ? 10 : 30 }}>
-          <TopActions onPress={() => onGoBack()}>
-            <OIcon src={theme.images.general.arrow_left} width={15} />
-          </TopActions>
-        </TopBar>
-        <ScrollView style={{ marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
+	const UpsellingContent = () => {
+		return (
+			<>
+				<View style={{ ...styles.headerItem, flex: 1, marginTop: Platform.OS == 'ios' ? 35 : 70 }}>
+					<OButton
+						imgLeftSrc={theme.images.general.arrow_left}
+						imgRightSrc={null}
+						style={styles.btnBackArrow}
+						onClick={() => onGoBack()}
+						imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
+					/>
+				</View>
+				<ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false}>
 					{productsList.length > 0 &&
-            <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
-              <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
-              <UpsellingLayout />
-            </View>
-          }
-          <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}
-              onNavigationRedirect={onNavigationRedirect}
-            />
-          </View>
-        </ScrollView>
-        <View
-          style={{
-            alignItems: 'center',
-            bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom  + 59 :  bottom + 125
-          }}
-        >
-          <OButton
-            imgRightSrc=''
-            text={t('CHECKOUT', 'Checkout')}
-            style={{...styles.closeUpsellingButton}}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
-            onClick={() => {
-				handleUpsellingPage()
-				setIsCheckout(true)
-			}}
-          />
-        </View>
-      </>
-    )
-  }
+						<View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+							<OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+							<UpsellingLayout />
+						</View>
+					}
+					<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}
+							onNavigationRedirect={onNavigationRedirect}
+						/>
+					</View>
+				</ScrollView>
+				<View
+					style={{
+						alignItems: 'center',
+						bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+					}}
+				>
+					<OButton
+						imgRightSrc=''
+						text={t('CHECKOUT', 'Checkout')}
+						style={{ ...styles.closeUpsellingButton }}
+						textStyle={{ color: theme.colors.white, fontSize: 14 }}
+						onClick={() => {
+							handleUpsellingPage()
+							setIsCheckout(true)
+						}}
+					/>
+				</View>
+			</>
+		)
+	}
 
 	return (
 		<>
@@ -199,20 +211,20 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
 				<UpsellingLayout />
 			) : (
 				<>
-          {props.isPage ? (
-            <UpsellingContent />
-          ) : (
-            canOpenUpselling && !modalIsOpen && (
-              <OBottomPopup
-                title={''}
-                open={openUpselling}
-                onClose={() => handleUpsellingPage()}
-                isStatusBar
-              >
-                <UpsellingContent />
-              </OBottomPopup>
-            )
-          )}
+					{props.isPage ? (
+						<UpsellingContent />
+					) : (
+						canOpenUpselling && !modalIsOpen && (
+							<OBottomPopup
+								title={''}
+								open={openUpselling}
+								onClose={() => handleUpsellingPage()}
+								isStatusBar
+							>
+								<UpsellingContent />
+							</OBottomPopup>
+						)
+					)}
 				</>
 			)}
 		</>