ordering-ui-react-native 0.17.35 → 0.17.36-release

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

@@ -1,17 +1,9 @@
 import styled, { css } from 'styled-components/native'
 
-export const CardContainer = styled.TouchableOpacity`
-  flex: 1;
-  flex-direction: ${(props : any) => props.showAddButton ? 'column' : 'row'};
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px;
-  border-radius: 10px;
-  position: relative;
-`
 export const CardInfo = styled.View`
   padding-start: 3px;
   flex: 1;
+  min-height: 85px;
 `
 export const SoldOut = styled.View`
   position: absolute;
@@ -30,11 +22,23 @@ export const QuantityContainer = styled.View`
 export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
+  margin-vertical: 6px;
 `
 
 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`
@@ -45,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,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { View, StyleSheet, ScrollView } from 'react-native';
 import {
 	PaymentOptionStripe,
@@ -18,13 +18,15 @@ import {
 	OSItemActions,
 } from '../PaymentOptionStripe/styles';
 
-const StripeCardsListUI = (props: any) => {
+export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
 		cardSelected,
 		cardsList,
 		handleCardClick,
+		setAddCardOpen,
+		gateway
 	} = props;
 
 	const theme = useTheme();
@@ -32,11 +34,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 && !cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+			setAddCardOpen(true)
+		}
+	}, [cardsList?.loading])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
@@ -128,7 +138,7 @@ const styles = StyleSheet.create({
 	},
 	cardsList: {
 		width: '100%',
-		maxHeight: 130
+		maxHeight: 150
 	},
 })
 

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

@@ -28,7 +28,12 @@ const StripeElementsFormUI = (props: any) => {
 		onCancel,
 		cart,
 		merchantId,
-		businessIds
+		businessIds,
+		setMethodPaySupported,
+		placeByMethodPay,
+		methodPaySupported,
+		setPlaceByMethodPay,
+		cartTotal
 	} = props;
 
 	const theme = useTheme();
@@ -62,24 +67,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 +107,7 @@ const StripeElementsFormUI = (props: any) => {
 			setErrors(error?.message || error?.toString());
 		}
 	}
-	
+
 	const handleSaveCard = async () => {
 		setErrors('');
 		if (!requirements) {
@@ -111,7 +116,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 +124,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);
@@ -172,12 +177,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,9 +190,14 @@ 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
@@ -195,6 +205,9 @@ const StripeElementsFormUI = (props: any) => {
 								cardStyle={{
 									backgroundColor: '#FFFFFF',
 									textColor: '#000000',
+									borderWidth: 1,
+									borderRadius: 8,
+									borderColor: theme.colors.border
 								}}
 								style={{
 									width: '100%',