ordering-ui-react-native 0.17.42-release → 0.17.43-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.17.42-release",
+  "version": "0.17.43-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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,
@@ -41,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('')
@@ -49,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 = {}
 
@@ -150,7 +168,8 @@ const StripeElementsFormUI = (props: any) => {
 				!!card?.last4 &&
 				!!card?.expiryMonth &&
 				!!card?.expiryYear &&
-				!!card?.brand
+				!!card?.brand &&
+				((!zipCodeEnabled || !zipCodeRequired || !!card?.postalCode))
 			)
 		}
 	}, [card])
@@ -201,7 +220,7 @@ const StripeElementsFormUI = (props: any) => {
 							/>
 						) : (
 							<CardField
-								postalCodeEnabled={true}
+								postalCodeEnabled={zipCodeEnabled}
 								cardStyle={{
 									backgroundColor: '#FFFFFF',
 									textColor: '#000000',
@@ -259,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,