ordering-ui-react-native 0.18.0 → 0.18.1-release

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Vibration } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -8,6 +8,7 @@ import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
 import Recaptcha from 'react-native-recaptcha-that-works'
 import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	SignupForm as SignUpController,
@@ -164,6 +165,14 @@ const SignupFormUI = (props: SignupParams) => {
 		})
 	}
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
 			case 'name': {
@@ -246,7 +255,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (
@@ -264,7 +273,7 @@ const SignupFormUI = (props: SignupParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
@@ -323,7 +332,7 @@ const SignupFormUI = (props: SignupParams) => {
 	};
 
 	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+		onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
 	const handleOpenTermsUrl = async (url: any) => {
@@ -333,7 +342,7 @@ const SignupFormUI = (props: SignupParams) => {
 			await Linking.openURL(url);
 		} else {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
-			Vibration.vibrate()
+			vibrateApp()
 		}
 	}
 
@@ -341,12 +350,12 @@ const SignupFormUI = (props: SignupParams) => {
 		setRecaptchaVerified(false)
 		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 		recaptchaRef.current.open()
@@ -390,11 +399,13 @@ const SignupFormUI = (props: SignupParams) => {
 					baseUrl: configs?.security_recaptcha_base_url?.value || null
 				})
 				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
-				Vibration.vibrate()
+				vibrateApp()
 				return
 			}
-			formState.result?.result && showToast(ToastType.Error, formState.result?.result[0]);
-			formState.result?.result && Vibration.vibrate()
+			formState.result?.result && formState.result?.result[0]?.includes("_") ?
+				showToast(ToastType.Error, t(`${formState.result?.result[0]}`, 'Phone number already used')) :
+				showToast(ToastType.Error, formState.result?.result[0])
+			formState.result?.result && vibrateApp()
 			setIsLoadingVerifyModal(false);
 		}
 	}, [formState]);
@@ -402,7 +413,7 @@ const SignupFormUI = (props: SignupParams) => {
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
-			Vibration.vibrate()
+			vibrateApp()
 		}
 	}, [errors])
 
@@ -431,7 +442,7 @@ const SignupFormUI = (props: SignupParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
-				verifyPhoneState.result?.result && Vibration.vibrate()
+				verifyPhoneState.result?.result && vibrateApp()
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -591,7 +602,7 @@ const SignupFormUI = (props: SignupParams) => {
 												control={control}
 												render={({ onChange, value }: any) => (
 													<OInput
-														placeholder={t(field.name)}
+														placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
 														style={style.inputStyle}
 														icon={
 															field.code === 'email'
@@ -930,7 +941,7 @@ const SignupFormUI = (props: SignupParams) => {
 										(
 											<FacebookLogin
 												notificationState={notificationState}
-												handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 												handleLoading={(val: boolean) => setIsFBLoading(val)}
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
@@ -939,7 +950,7 @@ const SignupFormUI = (props: SignupParams) => {
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
@@ -947,7 +958,7 @@ const SignupFormUI = (props: SignupParams) => {
 									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessAppleLogin={handleSuccessFacebook}
 										/>

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

@@ -1,16 +1,18 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
   useOrder,
   useLanguage
 } from 'ordering-components/native';
+import FastImage from 'react-native-fast-image'
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OButton } from '../shared';
 import { SingleOrderCardParams } from '../../types';
 import { OAlert } from '../../../../../src/components/shared'
-
+import { OrderEta } from '../OrderDetails/OrderEta'
+import { useIsFocused } from '@react-navigation/native';
 import {
   InnerContainer,
   Logo,
@@ -44,12 +46,14 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [, t] = useLanguage();
   const [{ carts }] = useOrder()
   const theme = useTheme();
+  const isFocused = useIsFocused();
 
-  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+  let [reorderSelected, setReorderSelected] = useState<number | null>(null);
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [isPressed, setIsPressed] = useState(false)
 
-  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
+  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
+  const isGiftCardOrder = !order?.business_id
 
   const styles = StyleSheet.create({
     container: {
@@ -128,19 +132,29 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   });
 
   const handleReorderClick = (order: any) => {
-    if (carts[`businessId:${order?.business_id}`] && carts[`businessId:${order?.business_id}`]?.products?.length > 0) {
+    setReorderSelected(null)
+    reorderSelected = null
+    const isMultiOrders = Array.isArray(order?.id)
+
+    const isRemoveCart = isMultiOrders
+      ? order?.business_id?.some((businessId: any) => !!carts[`businessId:${businessId}`]?.uuid)
+      : carts[`businessId:${order?.business_id}`] && !!carts[`businessId:${order?.business_id}`]?.uuid
+
+    if (isRemoveCart) {
       setConfirm({
         open: true,
         content: [t('QUESTION_DELETE_PRODUCTS_FROM_CART', 'Are you sure that you want to delete all products from cart?')],
         title: t('ORDER', 'Order'),
         handleOnAccept: async () => {
-          handleRemoveCart()
+          handleRemoveCart(order)
           setConfirm({ ...confirm, open: false })
         }
       })
     } else {
-      setReorderSelected(order?.id);
-      handleReorder && handleReorder(order?.id);
+      const orderId = Array.isArray(order?.id) ? order?.id[0] : order?.id
+      setReorderSelected(orderId)
+      reorderSelected = orderId
+      handleReorder && handleReorder(order?.id)
     }
   };
 
@@ -198,6 +212,10 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const hideFavorite = theme?.orders?.components?.favorite?.hidden
   const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
 
+  useEffect(() => {
+    if (isFocused) setReorderSelected(null)
+  }, [isFocused])
+
   return (
     <>
       <CardAnimation
@@ -215,10 +233,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                       key={business?.id}
                       style={styles.logoWrapper}
                     >
-                      <OIcon
-                        url={optimizeImage(business?.logo, 'h_300,c_limit')}
-                        src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                      <FastImage
                         style={styles.minilogo}
+                        source={business?.logo ? {
+                          uri: optimizeImage(business?.logo, 'h_300,c_limit'),
+                          priority: FastImage.priority.normal,
+                        } : theme?.images?.dummies?.businessLogo}
+                        resizeMode={FastImage.resizeMode.contain}
                       />
                     </Logo>
                   ))}
@@ -228,10 +249,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                 </MultiLogosContainer>
               ) : (
                 <Logo style={styles.logoWrapper}>
-                  <OIcon
-                    url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                    src={optimizeImage(!order.business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                  <FastImage
                     style={styles.logo}
+                    source={order.business?.logo ? {
+                      uri: optimizeImage(order.business?.logo, 'h_300,c_limit'),
+                      priority: FastImage.priority.normal,
+                    } : theme?.images?.dummies?.businessLogo}
+                    resizeMode={FastImage.resizeMode.contain}
                   />
                 </Logo>
               )}
@@ -267,11 +291,11 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   )}
                 </>
               )}
-              {!!pastOrders && (
+              {!!pastOrders && !isGiftCardOrder && (
                 <ButtonWrapper>
                   {!hideReviewOrderButton &&
                     allowedOrderStatus.includes(parseInt(order?.status)) &&
-                    !order.review && (
+                    !order.review && order?.cart && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
                         style={styles.reviewButton}>
@@ -280,7 +304,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {order.cart && !hideReorderButton && (
+                  {!hideReorderButton && typeof order?.id === 'number' && order?.cart && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}
@@ -333,7 +357,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                       {
                         pastOrders
                           ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
-                          : order?.eta_time + 'min'
+                          : <OrderEta order={order} />
                       }
                     </OText>
                   )}
@@ -352,8 +376,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                 <LottieAnimation
                   type='favorite'
                   onClick={handleChangeFavorite}
-                  initialValue={order?.favorite ? 0.75 : 0}
-                  toValue={order?.favorite ? 0 : 0.75}
+                  initialValue={order?.favorite ? 0.5 : 0}
+                  toValue={order?.favorite ? 0 : 0.5}
                   style={{ marginBottom: 5 }}
                   iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
                   isActive={order?.favorite}

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

@@ -19,7 +19,7 @@ export const CardInfoWrapper = styled.View`
 
 export const ContentHeader = styled.View`
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-end;
 `
 
 export const ButtonWrapper = styled.View`

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

@@ -17,7 +17,7 @@ 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'
 
@@ -40,7 +40,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		navigation,
 		businessId,
 		isPreviously,
-		viewString
+		viewString,
+		businessSingleId
 	} = props;
 
 	const theme = useTheme();
@@ -108,7 +109,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		},
 		productTagsStyle: {
 			width: 30,
-    		height: 30,
+			height: 30,
 			marginRight: 5
 		}
 	});
@@ -168,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()}
@@ -180,8 +181,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 				>
 					<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>
@@ -200,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}
@@ -221,7 +222,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 										showsHorizontalScrollIndicator={false}
 										horizontal
 										style={{ marginLeft: 10 }}
-										contentContainerStyle={{flexGrow: 1}}
+										contentContainerStyle={{ flexGrow: 1 }}
 									>
 										{product?.tags.map((tag: any, i: any) => (
 											<TouchableWithoutFeedback key={i}>
@@ -265,13 +266,15 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 							{!!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}

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

@@ -49,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,14 +1,15 @@
-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,
 	useLanguage,
+	useValidationFields
 } from 'ordering-components/native';
 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,26 +18,46 @@ 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();
 
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
+	const [validationFields] = useValidationFields()
+	const validateZipcodeCard =
+		validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required
+	const paymethodsWithoutSaveCards = ['credomatic']
 
 	const handleCardSelected = (card: any) => {
+		if (!card?.zipcode && validateZipcodeCard) return
 		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 && (
@@ -75,7 +96,8 @@ const StripeCardsListUI = (props: any) => {
 					style={styles.cardsList}
 				>
 					{cardsList.cards.map((card: any) => (
-						<OSItem key={card.id} isUnique={cardsList.cards.length}>
+						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
+							{console.log(card?.zipcode && validateZipcodeCard)}
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
 									{card.id === cardSelected?.id ? (
@@ -100,6 +122,13 @@ const StripeCardsListUI = (props: any) => {
 										XXXX-XXXX-XXXX-{card.last4}
 									</OText>
 								</View>
+								{!card?.zipcode && validateZipcodeCard && (
+									<View style={styles.viewStyle}>
+										<OText size={10} color={theme?.colors?.danger5}>
+											({t('MISSING_ZIPCODE', 'Missing zipcode')})
+										</OText>
+									</View>
+								)}
 							</OSItemContent>
 							<OSItemActions>
 								<OAlert
@@ -118,6 +147,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>
 		</>
 	)
 }