ordering-ui-react-native 0.17.76 → 0.17.77-release

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

@@ -11,13 +11,13 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { SingleProductCardParams } from '../../types';
-import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
-import { StyleSheet, View } from 'react-native';
+import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper, TagsContainer } from './styles';
+import { ScrollView, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
 import { InView } from 'react-native-intersection-observer'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { OButton, OIcon, OText } from '../shared';
 import FastImage from 'react-native-fast-image'
-import { shape } from '../../utils';
+import { lightenDarkenColor, shape } from '../../utils';
 import { LottieAnimation } from '../LottieAnimation';
 import { CardAnimation } from '../shared/CardAnimation'
 
@@ -39,14 +39,20 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		enableIntersection,
 		navigation,
 		businessId,
-		isPreviously
+		isPreviously,
+		viewString,
+		businessSingleId
 	} = props;
 
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
-	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
-
+	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+	const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+	const hideProductLogo = viewString
+		? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
+		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
 	const textSize = isChewLayout ? 12 : 10
+	const logoPosition = theme?.business_view?.components?.products?.components?.product?.components?.image?.position
 
 	const styles = StyleSheet.create({
 		container: {
@@ -99,7 +105,12 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			color: '#808080',
 			textDecorationLine: 'line-through',
 			marginLeft: 7,
-			marginRight: 7
+			marginRight: 0
+		},
+		productTagsStyle: {
+			width: 30,
+			height: 30,
+			marginRight: 5
 		}
 	});
 
@@ -158,7 +169,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 190 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<InView style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					onClick={() => handleClickproduct()}
@@ -168,10 +179,10 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 						(style && { ...style })
 					]}
 				>
-					<View style={{ flexDirection: 'row' }}>
+					<View style={{ flexDirection: logoPosition === 'left' ? 'row-reverse' : 'row' }}>
 						{productAddedToCartLength > 0 && (
-							<QuantityContainer style={[styles.quantityContainer, {
-								transform: [{ translateX: 25 }, { translateY: -25 }],
+							<QuantityContainer businessSingleId={businessSingleId} style={[styles.quantityContainer, {
+								transform: [{ translateX: logoPosition === 'right' ? 25 : -25 }, { translateY: -25 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -190,8 +201,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									<LottieAnimation
 										type='favorite'
 										onClick={handleChangeFavorite}
-										initialValue={product?.favorite ? 0.75 : 0}
-										toValue={product?.favorite ? 0 : 0.75}
+										initialValue={product?.favorite ? 0.5 : 0}
+										toValue={product?.favorite ? 0 : 0.5}
 										disableAnimation={!auth}
 										iconProps={{ color: theme.colors.danger5, size: 18 }}
 										isActive={product?.favorite}
@@ -205,15 +216,41 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								{product?.offer_price !== null && !!product?.in_offer && (
 									<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
 								)}
+								{!isPreviously && product?.tags && product?.tags.length > 0 && (
+									<ScrollView
+										showsVerticalScrollIndicator={false}
+										showsHorizontalScrollIndicator={false}
+										horizontal
+										style={{ marginLeft: 10 }}
+										contentContainerStyle={{ flexGrow: 1 }}
+									>
+										{product?.tags.map((tag: any, i: any) => (
+											<TouchableWithoutFeedback key={i}>
+												<TagsContainer>
+													<FastImage
+														style={styles.productTagsStyle}
+														source={tag.image ? {
+															uri: optimizeImage(tag.image, 'h_250,c_limit'),
+															priority: FastImage.priority.normal,
+														} : theme?.images?.dummies?.product}
+														resizeMode={FastImage.resizeMode.cover}
+													/>
+												</TagsContainer>
+											</TouchableWithoutFeedback>
+										))}
+									</ScrollView>
+								)}
 							</PricesContainer>
-							<OText
-								size={textSize}
-								numberOfLines={!isPreviously ? 2 : 1}
-								ellipsizeMode="tail"
-								color={theme.colors.textSecondary}
-								style={styles.line15}>
-								{product?.description}
-							</OText>
+							{!hideProductDescription && (
+								<OText
+									size={textSize}
+									numberOfLines={!isPreviously ? 2 : 1}
+									ellipsizeMode="tail"
+									color={theme.colors.textSecondary}
+									style={styles.line15}>
+									{product?.description}
+								</OText>
+							)}
 							{isPreviously && (
 								<OText
 									size={textSize}
@@ -225,17 +262,19 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								</OText>
 							)}
 						</CardInfo>
-						<LogoWrapper>
+						<LogoWrapper logoPosition={logoPosition}>
 							{!!product?.ribbon?.enabled && (
 								<RibbonBox
 									bgColor={product?.ribbon?.color}
+									colorText={lightenDarkenColor(product?.ribbon?.color)}
+									borderRibbon={lightenDarkenColor(product?.ribbon?.color)}
 									isRoundRect={product?.ribbon?.shape === shape?.rectangleRound}
 									isCapsule={product?.ribbon?.shape === shape?.capsuleShape}
 								>
 									<OText
 										size={textSize}
 										weight={'400'}
-										color={theme.colors.white}
+										color={lightenDarkenColor(product?.ribbon?.color) ? theme.colors.black : theme.colors.white}
 										numberOfLines={2}
 										ellipsizeMode='tail'
 										lineHeight={13}
@@ -244,14 +283,16 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							<FastImage
-								style={styles.productStyle}
-								source={product?.images ? {
-									uri: optimizeImage(product?.images, 'h_250,c_limit'),
-									priority: FastImage.priority.normal,
-								} : theme?.images?.dummies?.product}
-								resizeMode={FastImage.resizeMode.cover}
-							/>
+							{!hideProductLogo && (
+								<FastImage
+									style={styles.productStyle}
+									source={product?.images ? {
+										uri: optimizeImage(product?.images, 'h_250,c_limit'),
+										priority: FastImage.priority.normal,
+									} : theme?.images?.dummies?.product}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							)}
 						</LogoWrapper>
 
 						{(isSoldOut || maxProductQuantity <= 0) && (

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

@@ -27,7 +27,18 @@ export const PricesContainer = styled.View`
 
 export const LogoWrapper = styled.View`
   position: relative;
-  margin-left: 12px;
+  margin-left: ${(props) => !props.logoPosition || props.logoPosition === 'right' ? '12px' : '0px'};
+  margin-right: ${(props) => props.logoPosition === 'right' ? '0px' : '12px'};
+`
+export const WrapTags = styled.View`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin-left: 10px;
+`
+export const TagsContainer = styled.View`
+    display: flex;
+    margin: auto;
 `
 
 export const RibbonBox = styled.View`
@@ -38,16 +49,21 @@ export const RibbonBox = styled.View`
   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;
   `}
+
+  ${(props: any) => props.colorText && css`
+    color: ${props.colorText ? 'black' : 'white'};
+  `}
+
+  ${(props: any) => props.borderRibbon && css`
+    border: 1px solid ${props.borderRibbon ? 'black' : 'white'};
+  `}
 `

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

@@ -19,7 +19,7 @@ export const LogoWrapper = styled.View`
   shadowRadius: 3;
   shadowOffset: { width: 1, height: 4 };
   elevation: 3;
-  borderRadius: 8;
+  border-radius: 8;
   shadowOpacity: 0.1;
   overflow: hidden;
   width: 80;

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import React, { useEffect } from 'react';
+import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import {
 	PaymentOptionStripe,
 	useSession,
@@ -8,7 +8,7 @@ import {
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { getIconCard } from '../../utils';
-import { OAlert, OIcon, OText } from '../shared';
+import { OAlert, OIcon, OText, OModal } from '../shared';
 
 import { NotFoundSource } from '../NotFoundSource';
 
@@ -17,14 +17,23 @@ import {
 	OSItemContent,
 	OSItemActions,
 } from '../PaymentOptionStripe/styles';
+import { StripeElementsForm } from '../StripeElementsForm';
 
-const StripeCardsListUI = (props: any) => {
+import { KeyboardAvoidingView } from 'react-native';
+
+export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
 		cardSelected,
 		cardsList,
 		handleCardClick,
+		setAddCardOpen,
+		gateway,
+		setCardsList,
+		addCardOpen,
+		isOpenMethod,
+		handlePaymethodDataChange
 	} = props;
 
 	const theme = useTheme();
@@ -32,11 +41,19 @@ const StripeCardsListUI = (props: any) => {
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
 
+	const paymethodsWithoutSaveCards = ['credomatic']
+
 	const handleCardSelected = (card: any) => {
 		handleCardClick(card);
 		onSelectCard(card);
 	}
 
+	useEffect(() => {
+		if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+			setAddCardOpen({ ...addCardOpen, stripe: true })
+		}
+	}, [cardsList?.loading])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
@@ -118,6 +135,33 @@ const StripeCardsListUI = (props: any) => {
 					))}
 				</ScrollView>
 			)}
+			<OModal
+				entireModal
+				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
+				open={addCardOpen.stripe}
+				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+				style={{ backgroundColor: 'red' }}
+			>
+				<KeyboardAvoidingView
+					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
+					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
+					enabled={Platform.OS === 'ios' ? true : false}
+				>
+					<StripeElementsForm
+						openCarts={props.openCarts}
+						toSave
+						businessId={props.businessId}
+						businessIds={props.businessIds}
+						publicKey={props.publicKey || isOpenMethod?.paymethod?.credentials?.publishable}
+						setCardsList={setCardsList}
+						cardsList={cardsList}
+						requirements={props.clientSecret}
+						handleCardClick={handleCardClick}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
 		</>
 	)
 }
@@ -128,7 +172,7 @@ const styles = StyleSheet.create({
 	},
 	cardsList: {
 		width: '100%',
-		maxHeight: 130
+		maxHeight: 150
 	},
 })
 

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 { View, StyleSheet, useWindowDimensions, Keyboard, Platform } from 'react-native';
+import { useLanguage, useSession, useConfig, useValidationFields } from 'ordering-components/native';
 import {
 	StripeProvider,
 	CardField,
@@ -28,7 +28,12 @@ const StripeElementsFormUI = (props: any) => {
 		onCancel,
 		cart,
 		merchantId,
-		businessIds
+		businessIds,
+		setMethodPaySupported,
+		placeByMethodPay,
+		methodPaySupported,
+		setPlaceByMethodPay,
+		cartTotal
 	} = props;
 
 	const theme = useTheme();
@@ -36,6 +41,7 @@ const StripeElementsFormUI = (props: any) => {
 	const [, t] = useLanguage();
 	const [{ user }] = useSession();
 	const [{ configs }] = useConfig();
+	const [validationFields] = useValidationFields()
 	const [card, setCard] = useState<any>(null);
 	const [isCompleted, setIsCompleted] = useState(false);
 	const [errors, setErrors] = useState('')
@@ -44,6 +50,23 @@ const StripeElementsFormUI = (props: any) => {
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+	const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
+	const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
+	const styles = StyleSheet.create({
+		container: {
+			width: '100%',
+			paddingHorizontal: 40,
+			justifyContent: 'space-between',
+			paddingBottom: 12
+		},
+		btnAddStyle: {
+			marginTop: 20,
+			borderRadius: 7.6,
+			shadowOpacity: 0,
+			height: 44,
+			marginBottom: isKeyboardShow && Platform.OS === 'ios' ? 40 : 0
+		},
+	})
 
 	let billingDetails: any = {}
 
@@ -62,24 +85,24 @@ const StripeElementsFormUI = (props: any) => {
 
 	if (user?.address) {
 		billingDetails.address = {
-      line1: user?.address
-    }
+			line1: user?.address
+		}
 	}
 
 	const createPayMethod = async () => {
 		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+			params.paymentMethodData.billingDetails = { ...billingDetails, token: card?.last4 }
 		}
 		try {
 			setCreatePmLoading(true)
 			const { paymentMethod, error } = await createPaymentMethod(params);
 
-      if (error) {
-        setErrors(error?.message);
-        setCreatePmLoading(false)
-        return
-      }
+			if (error) {
+				setErrors(error?.message);
+				setCreatePmLoading(false)
+				return
+			}
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({
@@ -102,7 +125,7 @@ const StripeElementsFormUI = (props: any) => {
 			setErrors(error?.message || error?.toString());
 		}
 	}
-	
+
 	const handleSaveCard = async () => {
 		setErrors('');
 		if (!requirements) {
@@ -111,7 +134,7 @@ const StripeElementsFormUI = (props: any) => {
 		}
 		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+			params.paymentMethodData.billingDetails = { ...billingDetails, token: card?.last4 }
 		}
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
@@ -119,8 +142,8 @@ const StripeElementsFormUI = (props: any) => {
 			if (setupIntent?.status === 'Succeeded') {
 				if (businessIds) {
 					businessIds.forEach((_businessId: any, index: any) => {
-					  const _isNewCard = index === 0
-					  stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
+						const _isNewCard = index === 0
+						stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
 					})
 				} else {
 					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
@@ -145,7 +168,8 @@ const StripeElementsFormUI = (props: any) => {
 				!!card?.last4 &&
 				!!card?.expiryMonth &&
 				!!card?.expiryYear &&
-				!!card?.brand
+				!!card?.brand &&
+				((!zipCodeEnabled || !zipCodeRequired || !!card?.postalCode))
 			)
 		}
 	}, [card])
@@ -172,12 +196,12 @@ const StripeElementsFormUI = (props: any) => {
 	}, []);
 
 	return (
-		<View style={{ ...styles.container, height: height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
+		<View style={{ ...styles.container, height: methodsPay?.includes(paymethod) ? 'auto' : height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
 					<StripeProvider
 						publishableKey={publicKey}
-						merchantIdentifier={`merchant.${merchantId}`}
+						merchantIdentifier={merchantId}
 						urlScheme={merchantId}
 					>
 						{methodsPay?.includes(paymethod) ? (
@@ -185,13 +209,18 @@ const StripeElementsFormUI = (props: any) => {
 								handleSource={handleSource}
 								onCancel={onCancel}
 								cart={cart}
+								cartTotal={cartTotal}
 								setErrors={setErrors}
 								paymethod={paymethod}
 								devMode={publicKey?.includes('test')}
+								setMethodPaySupported={setMethodPaySupported}
+								placeByMethodPay={placeByMethodPay}
+								methodPaySupported={methodPaySupported}
+								setPlaceByMethodPay={setPlaceByMethodPay}
 							/>
 						) : (
 							<CardField
-								postalCodeEnabled={true}
+								postalCodeEnabled={zipCodeEnabled}
 								cardStyle={{
 									backgroundColor: '#FFFFFF',
 									textColor: '#000000',
@@ -249,21 +278,6 @@ const StripeElementsFormUI = (props: any) => {
 	)
 }
 
-const styles = StyleSheet.create({
-	container: {
-		width: '100%',
-		paddingHorizontal: 40,
-		justifyContent: 'space-between',
-		paddingBottom: 12
-	},
-	btnAddStyle: {
-		marginTop: 20,
-		borderRadius: 7.6,
-		shadowOpacity: 0,
-		height: 44
-	},
-})
-
 export const StripeElementsForm = (props: any) => {
 	const stripeProps = {
 		...props,

package/themes/original/src/components/StripeElementsForm/naked.tsx

@@ -4,7 +4,10 @@ import { useApi, useSession } from 'ordering-components/native';
 export const StripeElementsForm = (props: any) => {
   const {
     UIComponent,
-    toSave
+    toSave,
+    setCardsList,
+    cardsList,
+    handleCardClick
   } = props;
 
   const [ordering] = useApi();
@@ -61,6 +64,14 @@ export const StripeElementsForm = (props: any) => {
       })
       const response = await result.json();
       isNewCard && props.onSelectCard && props.onSelectCard(response.result);
+      setCardsList && setCardsList({
+        ...cardsList,
+        cards: [
+          ...cardsList.cards,
+          response.result
+        ]
+      })
+      handleCardClick(response.result)
       setState({
         ...state,
         loadingAdd: false