ordering-ui-react-native 0.16.38 → 0.16.41

package/package.json

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

package/src/components/LoginForm/index.tsx

@@ -165,6 +165,12 @@ const LoginFormUI = (props: LoginParams) => {
 
   const handleOpenRecaptcha = () => {
     setRecaptchaVerified(false)
+
+    if (recaptchaVerified) {
+      handleReCaptcha && handleReCaptcha('')
+      return
+    }
+
     if (!recaptchaConfig?.siteKey) {
       showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
       return
@@ -385,6 +391,15 @@ const LoginFormUI = (props: LoginParams) => {
                   baseUrl={recaptchaConfig?.baseUrl}
                   onVerify={onRecaptchaVerify}
                   onExpire={() => setRecaptchaVerified(false)}
+                  footerComponent={<OButton
+                    onClick={() => recaptchaRef.current.close()}
+                    style={{ borderRadius: 0 }}
+                    text={t('CLOSE', 'Close')}
+                    bgColor={theme.colors.primary}
+                    borderColor={theme.colors.primary}
+                    textStyle={{ color: 'white' }}
+                    imgRightSrc={null}
+                  />}
                 />
               </>
             )}

package/src/components/OrderDetails/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager, AppState } from 'react-native'
+import React, { useState, useEffect } from 'react'
+import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -109,7 +109,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [isReviewed, setIsReviewed] = useState(false)
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
-  const appState = useRef(AppState.currentState)
 
   const { order, loading, businessData, error } = props.order
 
@@ -259,23 +258,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     })
   }, [])
 
-  useEffect(() => {
-    const onFocusApp = (nextAppState: any) => {
-      if (
-        appState.current.match(/inactive|background/) &&
-        nextAppState === "active"
-      ) {
-        getOrder && getOrder()
-      }
-      appState.current = nextAppState;
-    }
-
-    AppState.addEventListener("change", onFocusApp);
-    return () => {
-      AppState.removeEventListener('change', onFocusApp);
-    };
-  }, [])
-
   return (
     <OrderDetailsContainer keyboardShouldPersistTaps='handled'>
       {order && order?.id && !error && !loading && (

package/src/components/PaymentOptions/index.tsx

@@ -89,6 +89,8 @@ const PaymentOptionsUI = (props: any) => {
         return theme.images.general.stripes
       case 'stripe_redirect':
         return theme.images.general.stripesb
+      case 'apple_pay':
+        return theme.images.general.applePayMark
       default:
         return theme.images.general.creditCard
     }
@@ -97,7 +99,7 @@ const PaymentOptionsUI = (props: any) => {
   const handlePaymentMethodClick = (paymethod: any) => {
     const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
     handlePaymethodClick(paymethod, isPopupMethod)
-		if (webViewPaymentGateway.includes(paymethod?.gateway)) {
+    if (webViewPaymentGateway.includes(paymethod?.gateway)) {
       handlePaymentMethodClickCustom(paymethod)
     }
     setCardData(paymethodData)
@@ -130,29 +132,44 @@ const PaymentOptionsUI = (props: any) => {
 
   const renderPaymethods = ({ item }: any) => {
     return (
-      <TouchableOpacity
-        onPress={() => handlePaymentMethodClick(item)}
-      >
-        <PMItem
-          key={item.id}
-          isDisabled={isDisabled}
-          isActive={paymethodSelected?.id === item.id}
-        >
-          <OIcon
-            src={getPayIcon(item.gateway)}
-            width={40}
-            height={40}
-            color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
-          />
-          <OText
-            size={12}
-            style={{ margin: 0 }}
-            color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+      <>
+        {item?.gateway === 'apple_pay' ? (
+          <TouchableOpacity
+            onPress={() => handlePaymentMethodClick(item)}
           >
-            {t(item.gateway.toUpperCase(), item.name)}
-          </OText>
-        </PMItem>
-      </TouchableOpacity>
+            <OIcon
+              src={getPayIcon(item.gateway)}
+              width={120}
+              height={100}
+              style={{ marginRight: 10 }}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            onPress={() => handlePaymentMethodClick(item)}
+          >
+            <PMItem
+              key={item.id}
+              isDisabled={isDisabled}
+              isActive={paymethodSelected?.id === item.id}
+            >
+              <OIcon
+                src={getPayIcon(item.gateway)}
+                width={40}
+                height={40}
+                color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+              />
+              <OText
+                size={12}
+                style={{ margin: 0 }}
+                color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+              >
+                {t(item.gateway.toUpperCase(), item.name)}
+              </OText>
+            </PMItem>
+          </TouchableOpacity>
+        )}
+      </>
     )
   }
 
@@ -213,31 +230,31 @@ const PaymentOptionsUI = (props: any) => {
       {stripeOptions.includes(paymethodSelected?.gateway) &&
         (paymethodData?.brand || paymethodData?.card?.brand) &&
         (paymethodData?.last4 || paymethodData?.card?.last4) &&
-      (
-        <PMCardSelected>
-          <PMCardItemContent>
-            <View style={styles.viewStyle}>
-              <MaterialCommunityIcons
-                name='radiobox-marked'
-                size={24}
-                color={theme.colors.primary}
-              />
-            </View>
-            <View style={styles.viewStyle}>
-              <OText>
-                {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
-              </OText>
-            </View>
-            <View style={styles.viewStyle}>
-              <OText
-                size={20}
-              >
-                XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
-              </OText>
-            </View>
-          </PMCardItemContent>
-        </PMCardSelected>
-      )}
+        (
+          <PMCardSelected>
+            <PMCardItemContent>
+              <View style={styles.viewStyle}>
+                <MaterialCommunityIcons
+                  name='radiobox-marked'
+                  size={24}
+                  color={theme.colors.primary}
+                />
+              </View>
+              <View style={styles.viewStyle}>
+                <OText>
+                  {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
+                </OText>
+              </View>
+              <View style={styles.viewStyle}>
+                <OText
+                  size={20}
+                >
+                  XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
+                </OText>
+              </View>
+            </PMCardItemContent>
+          </PMCardSelected>
+        )}
 
       {/* Stripe */}
       {isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
@@ -317,7 +334,7 @@ const PaymentOptionsUI = (props: any) => {
             bgColor={theme.colors.primary}
             borderColor={theme.colors.primary}
             style={styles.btnAddStyle}
-            textStyle={{color: 'white'}}
+            textStyle={{ color: 'white' }}
             imgRightSrc={null}
             onClick={() => setAddCardOpen({ ...addCardOpen, stripeConnect: true })}
           />

package/src/components/SignupForm/index.tsx

@@ -245,6 +245,12 @@ const SignupFormUI = (props: SignupParams) => {
 
   const handleOpenRecaptcha = () => {
     setRecaptchaVerified(false)
+
+    if (recaptchaVerified) {
+      handleReCaptcha && handleReCaptcha('')
+      return
+    }
+
     if (!recaptchaConfig?.siteKey) {
       showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
       return
@@ -555,6 +561,15 @@ const SignupFormUI = (props: SignupParams) => {
                 baseUrl={recaptchaConfig?.baseUrl}
                 onVerify={onRecaptchaVerify}
                 onExpire={() => setRecaptchaVerified(false)}
+                footerComponent={<OButton
+                  onClick={() => recaptchaRef.current.close()}
+                  style={{ borderRadius: 0 }}
+                  text={t('CLOSE', 'Close')}
+                  bgColor={theme.colors.primary}
+                  borderColor={theme.colors.primary}
+                  textStyle={{ color: 'white' }}
+                  imgRightSrc={null}
+                />}
               />
             </>
           )}

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

@@ -94,7 +94,8 @@ export const BusinessBasicInformation = (
 			height: 20,
 			justifyContent: 'center',
 			alignItems: 'center',
-			marginLeft: 5
+			marginRight: 5,
+			marginBottom: 7
 		},
 		tiktokIcon: {
 			height: 12,
@@ -238,53 +239,6 @@ export const BusinessBasicInformation = (
 									</OText>
 								</RibbonBox>
 							)}
-							<SocialListWrapper
-								showsVerticalScrollIndicator={false}
-								showsHorizontalScrollIndicator={false}
-								horizontal
-								contentContainerStyle={{ flex: 1, justifyContent: 'flex-end'}}
-							>
-								{!!business?.facebook_profile && (
-									<SocialNetWork
-										socialLink={business?.facebook_profile}
-										iconTitle='facebook'
-									/>
-								)}
-								{!!business?.instagram_profile && (
-									<SocialNetWork
-										socialLink={business?.instagram_profile}
-										iconTitle='instagram'
-									/>
-								)}
-								{!!business?.tiktok_profile && (
-									<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
-										<View style={styles.tiktokIcon}>
-											<OIcon
-												src={theme.images.general.tiktok}
-												style={{ width: '100%', height: '100%'}}
-											/>
-										</View>
-									</TouchableOpacity>
-								)}
-								{!!business?.pinterest_profile && (
-									<SocialNetWork
-										socialLink={business?.pinterest_profile}
-										iconTitle='pinterest'
-									/>
-								)}
-								{!!business?.whatsapp_number && (
-									<SocialNetWork
-										socialLink={business?.whatsapp_number}
-										iconTitle='whatsapp'
-									/>
-								)}
-								{!!business?.snapchat_profile && (
-									<SocialNetWork
-										socialLink={business?.snapchat_profile}
-										iconTitle='snapchat'
-									/>
-								)}
-							</SocialListWrapper>
 						</TitleWrapper>
 					)}
 				</BusinessInfoItem>
@@ -297,6 +251,65 @@ export const BusinessBasicInformation = (
 						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
 					</View>
 				)}
+				{loading ? (
+					<Placeholder Animation={Fade}>
+						<View style={{ flexDirection: 'row' }}>
+							{[...Array(5).keys()].map(i => (
+								<View style={styles.socialIcon} key={i}>
+									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
+								</View>
+							))}
+						</View>
+					</Placeholder>
+				) : (
+					<SocialListWrapper
+						showsVerticalScrollIndicator={false}
+						showsHorizontalScrollIndicator={false}
+						horizontal
+						contentContainerStyle={{ flex: 1}}
+					>
+						{!!business?.facebook_profile && (
+							<SocialNetWork
+								socialLink={business?.facebook_profile}
+								iconTitle='facebook'
+							/>
+						)}
+						{!!business?.instagram_profile && (
+							<SocialNetWork
+								socialLink={business?.instagram_profile}
+								iconTitle='instagram'
+							/>
+						)}
+						{!!business?.tiktok_profile && (
+							<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+								<View style={styles.tiktokIcon}>
+									<OIcon
+										src={theme.images.general.tiktok}
+										style={{ width: '100%', height: '100%'}}
+									/>
+								</View>
+							</TouchableOpacity>
+						)}
+						{!!business?.pinterest_profile && (
+							<SocialNetWork
+								socialLink={business?.pinterest_profile}
+								iconTitle='pinterest'
+							/>
+						)}
+						{!!business?.whatsapp_number && (
+							<SocialNetWork
+								socialLink={business?.whatsapp_number}
+								iconTitle='whatsapp'
+							/>
+						)}
+						{!!business?.snapchat_profile && (
+							<SocialNetWork
+								socialLink={business?.snapchat_profile}
+								iconTitle='snapchat'
+							/>
+						)}
+					</SocialListWrapper>
+				)}
 				<View>
 					<BusinessInfoItem>
 						{loading && (

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
 	BusinessReviews as BusinessReviewController,
 	useLanguage,
@@ -22,6 +22,7 @@ import {
 import { BusinessReviewsParams } from '../../types';
 import { ProgressBar, TouchableRipple } from 'react-native-paper';
 import moment from 'moment';
+import { setLocalMoment } from '../../utils';
 
 const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const { businessState, reviewsList } = props;
@@ -99,6 +100,10 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 		</View>
 	);
 
+	useEffect(() => {
+		setLocalMoment(moment, t)
+	}, [])
+
 	return (
 		<BusinessReviewsContainer>
 			<BusinessReviewContent

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

@@ -361,7 +361,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText size={14} lineHeight={21} weight={'600'}>
-                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
+                  {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                 </OText>
               </OSTable>
             </OSTotal>

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

@@ -75,6 +75,7 @@ export const Favorite = (props: any) => {
         <FavoriteList
           favoriteURL='favorite_products'
           originalURL='products'
+          onNavigationRedirect={onRedirect}
           isProduct
         />
       )}

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

@@ -73,6 +73,17 @@ const FavoriteListUI = (props: FavoriteParams) => {
     return objectStatus && objectStatus
   }
 
+  const onProductClick = (product: any) => {
+    const categoryId = product?.category?.id
+    const businessId = product?.category?.business?.id
+    if (!categoryId || !businessId) return
+    onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+			productId: product?.id,
+			categoryId: categoryId,
+			businessId: businessId
+		})
+  }
+
   useEffect(() => {
 		const _businessId = 'businessId:' + reorderState?.result?.business_id
 		if (reorderState?.error) {
@@ -248,9 +259,9 @@ const FavoriteListUI = (props: FavoriteParams) => {
             favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((product: any, i: number) => (
               <SingleProductCard
                 key={`${product?.id}_${i}`}
-                isSoldOut={product.inventoried && !product.quantity}
+                isSoldOut={product?.inventoried && !product?.quantity}
                 product={product}
-                onProductClick={() => {}}
+                onProductClick={onProductClick}
                 handleUpdateProducts={handleUpdateFavoriteList}
               />
             ))

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

@@ -299,7 +299,7 @@ const OrderSummaryUI = (props: any) => {
                       {t('TOTAL', 'Total')}
                     </OText>
                     <OText size={14} style={{ fontWeight: 'bold' }} >
-                      {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
+                      {parsePrice(cart?.balance >= 0 ? cart?.balance : 0)}
                     </OText>
                   </OSTable>
                 </View>

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

@@ -82,6 +82,8 @@ const PaymentOptionsUI = (props: any) => {
 				return theme.images.general.stripes
 			case 'stripe_redirect':
 				return theme.images.general.stripesb
+			case 'apple_pay':
+				return theme.images.general.applePayMark
 			default:
 				return theme.images.general.creditCard
 		}
@@ -142,29 +144,46 @@ const PaymentOptionsUI = (props: any) => {
 
 	const renderPaymethods = ({ item }: any) => {
 		return (
-			<TouchableOpacity
-				onPress={() => handlePaymentMethodClick(item)}
-			>
-				<PMItem
-					key={item.id}
-					isDisabled={isDisabled}
-					isActive={paymethodSelected?.id === item.id}
-				>
-					<OIcon
-						src={getPayIcon(item.gateway)}
-						width={20}
-						height={20}
-						color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
-					/>
-					<OText
-						size={10}
-						style={{ margin: 0, marginTop: 4 }}
-						color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+			<>
+				{item?.gateway === 'apple_pay' ? (
+					<TouchableOpacity
+						onPress={() => handlePaymentMethodClick(item)}
 					>
-						{t(item.gateway.toUpperCase(), item.name)}
-					</OText>
-				</PMItem>
-			</TouchableOpacity>
+						<OIcon
+							src={getPayIcon(item.gateway)}
+							width={70}
+							height={70}
+							style={{ marginRight: 10 }}
+						/>
+					</TouchableOpacity>
+				) : (
+					<TouchableOpacity
+						onPress={() => handlePaymentMethodClick(item)}
+					>
+						{console.log(item?.gateway)}
+						<PMItem
+							key={item.id}
+							isDisabled={isDisabled}
+							isActive={paymethodSelected?.id === item.id}
+						>
+							<OIcon
+								src={getPayIcon(item.gateway)}
+								width={20}
+								height={20}
+								color={item?.gateway === 'apple_pay' ? '' : paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
+							/>
+							<OText
+								size={10}
+								style={{ margin: 0, marginTop: 4 }}
+								color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
+							>
+								{t(item.gateway.toUpperCase(), item.name)}
+							</OText>
+						</PMItem>
+					</TouchableOpacity>
+				)}
+			</>
+
 		)
 	}
 

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

@@ -78,7 +78,6 @@ const SignupFormUI = (props: SignupParams) => {
 		handleChangeInput,
 		willVerifyOtpState,
 		setOtpState,
-		otpState,
 		setSignUpTab,
 		signUpTab,
 		useSignUpFullDetails,
@@ -120,10 +119,9 @@ const SignupFormUI = (props: SignupParams) => {
 	const [, t] = useLanguage();
 	const [, { login }] = useSession();
 	const [{ configs }] = useConfig();
-	const { control, handleSubmit, errors, register, setValue } = useForm();
+	const { control, handleSubmit, clearErrors, errors, register, unregister, setValue } = useForm();
 
 	const [passwordSee, setPasswordSee] = useState(false);
-	const [otpErrMsg, setOtpErrMsg] = useState('')
 	const [formValues, setFormValues] = useState(null);
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
@@ -238,6 +236,11 @@ const SignupFormUI = (props: SignupParams) => {
 		navigation.navigate('Home');
 	};
 
+	const handleSignUpTab = (tab: string) => {
+		setSignUpTab && setSignUpTab(tab)
+		clearErrors()
+	}
+
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
@@ -344,7 +347,7 @@ const SignupFormUI = (props: SignupParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha(token)
+		handleReCaptcha && handleReCaptcha(token)
 	}
 
 	useEffect(() => {
@@ -368,15 +371,19 @@ const SignupFormUI = (props: SignupParams) => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
 		}
-	}, [errors]);
+	}, [errors])
 
 	useEffect(() => {
-		register('cellphone', {
-			required: isRequiredField('cellphone')
-				? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
-				: null
-		})
-	}, [register])
+		if (signUpTab === 'default' || signUpTab === 'otpCellphone') {
+			register('cellphone', {
+				required: isRequiredField('cellphone')
+					? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+					: null
+			})
+		} else {
+			unregister('cellphone')
+		}
+	}, [signUpTab])
 
 	useEffect(() => {
 		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
@@ -415,9 +422,11 @@ const SignupFormUI = (props: SignupParams) => {
 
 	useEffect(() => {
 		if (checkPhoneCodeState?.result?.error) {
-			setOtpErrMsg((typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0]) || t('ERROR', 'Error'))
-		} else if (checkPhoneCodeState?.result?.result && checkPhoneCodeState?.result?.result?.[0] === 'VERIFICATION_CODE_WAS_SENT_TO') {
-			setOtpErrMsg(t('CODE_SENT', 'The code has been sent'))
+			setAlertState({
+				open: true,
+				title: (typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0].toString()) || t('ERROR', 'Error'),
+				content: []
+			})
 		}
 	}, [checkPhoneCodeState])
 
@@ -442,7 +451,7 @@ const SignupFormUI = (props: SignupParams) => {
 							ref={tabsRef}
 						>
 							<TabBtn
-								onPress={() => setSignUpTab && setSignUpTab('default')}
+								onPress={() => handleSignUpTab('default')}
 								onLayout={(event: any) => handleOnLayout(event, 'default')}
 							>
 								<OTab
@@ -466,7 +475,7 @@ const SignupFormUI = (props: SignupParams) => {
 							</TabBtn>
 							{useSignUpOtpEmail && (
 								<TabBtn
-									onPress={() => setSignUpTab && setSignUpTab('otpEmail')}
+									onPress={() => handleSignUpTab('otpEmail')}
 									onLayout={(event: any) => handleOnLayout(event, 'otpEmail')}
 								>
 									<OTab
@@ -492,7 +501,7 @@ const SignupFormUI = (props: SignupParams) => {
 							)}
 							{useSignUpOtpCellphone && (
 								<TabBtn
-									onPress={() => setSignUpTab && setSignUpTab('otpCellphone')}
+									onPress={() => handleSignUpTab('otpCellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'otpCellphone')}
 								>
 									<OTab

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

@@ -61,13 +61,13 @@ const StripeElementsFormUI = (props: any) => {
 	}
 
 	if (user?.address) {
-		billingDetails.addressLine1 = user?.address
+		billingDetails.address.line1 = user?.address
 	}
 
 	const createPayMethod = async () => {
-		const params: any = { type: 'Card' }
+		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
 		}
 		try {
 			setCreatePmLoading(true)
@@ -94,16 +94,16 @@ const StripeElementsFormUI = (props: any) => {
 			setErrors(error?.message || error?.toString());
 		}
 	}
-
+	
 	const handleSaveCard = async () => {
 		setErrors('');
 		if (!requirements) {
 			createPayMethod();
 			return
 		}
-		const params: any = { type: 'Card' }
+		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.billingDetails = billingDetails
+			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
 		}
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);

package/themes/original/src/types/index.tsx

@@ -120,7 +120,7 @@ export interface SignupParams {
 	handleChangeInput?: (in1: any, in2: any) => void;
 	enableReCaptcha?: boolean;
 	generateOtpCode?: (in1?: any) => void;
-	handleReCaptcha?: () => void;
+	handleReCaptcha?: (token?: any) => void;
 	setSignUpTab?: (in1: string) => void;
 	setWillVerifyOtpState?: (in1: boolean) => void;
 	setOtpState?: (in1: string) => void;

package/themes/original/src/utils/index.tsx

@@ -40,6 +40,72 @@ export const getTraduction = (key: string) => {
   return keyList[key] ? t(key, keyList[key]) : t(key)
 }
 
+/**
+ * Change local moment variables
+ */
+ export const setLocalMoment = (moment : any, t : any) => {
+  moment.locale('custom', {
+    months: [
+      t('MONTH1','January'),
+      t('MONTH2','February'),
+      t('MONTH3','March'),
+      t('MONTH4','April'),
+      t('MONTH5','May'),
+      t('MONTH6','June'),
+      t('MONTH7','July'),
+      t('MONTH8','August'),
+      t('MONTH9','September'),
+      t('MONTH10','October'),
+      t('MONTH11','November'),
+      t('MONTH12','December')
+    ],
+    monthsShort: [
+      t('MONTHSHORT1','Jan'),
+      t('MONTHSHORT2','Feb'),
+      t('MONTHSHORT3','Mar'),
+      t('MONTHSHORT4','Apr'),
+      t('MONTHSHORT5','May'),
+      t('MONTHSHORT6','Jun'),
+      t('MONTHSHORT7','Jul'),
+      t('MONTHSHORT8','Aug'),
+      t('MONTHSHORT9','Sep'),
+      t('MONTHSHORT10','Oct'),
+      t('MONTHSHORT11','Nov'),
+      t('MONTHSHORT12','Dec')
+    ],
+    weekdays: [
+      t('DAY7','Sunday'),
+      t('DAY1','Monday'),
+      t('DAY2','Tuesday'),
+      t('DAY3','Wednesday'),
+      t('DAY4','Thursday'),
+      t('DAY5','Friday'),
+      t('DAY6','Saturday')
+    ],
+    weekdaysShort: [
+      t('DAYSHORT7','Sun'),
+      t('DAYSHORT1','Mon'),
+      t('DAYSHORT2','Tue'),
+      t('DAYSHORT3','Wed'),
+      t('DAYSHORT4','Thu'),
+      t('DAYSHORT5','Fri'),
+      t('DAYSHORT6','Sat')
+    ],
+    weekdaysMin: [
+      t('DAYMIN7','Su'),
+      t('DAYMIN1','Mo'),
+      t('DAYMIN2','Tu'),
+      t('DAYMIN3','We'),
+      t('DAYMIN4','Th'),
+      t('DAYMIN5','Fr'),
+      t('DAYMIN6','Sa')
+    ],
+    meridiem : function (hours : any) {
+      return hours < 12 ? t('AM', 'AM') : t('PM','PM');
+    }
+  })
+}
+
 /**
  * Function to convert delivery time in minutes
  * @param {string} time business delivery time