ordering-ui-react-native 0.22.49 → 0.22.50-release

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

@@ -57,9 +57,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [{ optimizeImage, parsePrice, parseDate }] = useUtils()
   const { top } = useSafeAreaInsets()
   const [{ configs }] = useConfig()
-	const [orderState] = useOrder()
-	const [{ auth }] = useSession()
-	const { product, loading, error } = productObject;
+  const [orderState] = useOrder()
+  const [{ auth }] = useSession()
+  const { product, loading, error } = productObject;
 
   const [selectDate, setSelectedDate] = useState<any>(new Date())
   const [timeList, setTimeList] = useState<any>([])
@@ -77,8 +77,8 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const styles = StyleSheet.create({
     photoStyle: {
       width: 45,
-			height: 45,
-			borderRadius: 7.6
+      height: 45,
+      borderRadius: 7.6
     },
     buttonStyle: {
       borderRadius: 7.6,
@@ -144,7 +144,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
         moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
         (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
-        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
+          moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -166,9 +166,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleUpdateGuest = () => {
-		const guestToken = uuid.v4()
-		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
-	}
+    const guestToken = uuid.v4()
+    if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+  }
 
   const customDayHeaderStylesCallback = () => {
     return {
@@ -193,11 +193,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   const handleRedirectLogin = () => {
-		navigation && navigation.navigate('Login', {
-			store_slug: props.businessSlug
-		});
+    navigation && navigation.navigate('Login', {
+      store_slug: props.businessSlug
+    });
     onClose && onClose()
-	};
+  };
 
   const getTimes = (curdate: any, menu: any) => {
     validateSelectedDate(curdate, menu)
@@ -259,7 +259,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   }
 
   useEffect(() => {
-    if (selectDate === null || currentProfessional === null) return
+    if (selectDate === null || !currentProfessional?.schedule) return
     const _times = getTimes(selectDate, currentProfessional)
     setTimeList(_times)
   }, [selectDate, currentProfessional])
@@ -290,7 +290,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     setSelectedDate(moment.utc(productCart?.calendar_event?.start).local())
     setTimeSelected(moment.utc(productCart?.calendar_event?.start).local().format('HH:mm'))
   }, [productCart])
-  
+
   return (
     <>
       {loading && !error && (
@@ -450,7 +450,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               <CalendarWrapper>
                 {(timeList?.length > 0 && isEnabled) ? (
                   <SelectDropdown
-                    ref={dropdownRef} 
+                    ref={dropdownRef}
                     defaultValueByIndex={timeList.findIndex((item: any) => item.value === timeSelected)}
                     data={timeList}
                     onSelect={(selectedItem, index) => {
@@ -462,7 +462,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     rowTextForSelection={(item, index) => {
                       return item.text
                     }}
-                    buttonStyle={{borderRadius: 7.6, ...styles.selectOption}}
+                    buttonStyle={{ borderRadius: 7.6, ...styles.selectOption }}
                     buttonTextStyle={{
                       color: theme.colors.disabled,
                       fontSize: 14,
@@ -485,7 +485,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     }}
                     renderCustomizedRowChild={(item, index) => {
                       return (
-                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary }]}>
                           {item.text}
                         </Text>
                       )
@@ -553,7 +553,6 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               auth &&
               orderState.options?.address_id)) && (
                 <OButton
-                  bgColor={theme.colors.primary}
                   onClick={() => handleSaveService()}
                   text={orderState.loading
                     ? t('LOADING', 'Loading')
@@ -562,7 +561,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       : t('BOOK', 'Book'))}
                   style={styles.buttonStyle}
                   isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
-                  textStyle={{ fontSize: 14, color: theme.colors.white }}
+                  textStyle={{ fontSize: 14 }}
                 />
               )}
             {auth &&
@@ -577,45 +576,44 @@ const ServiceFormUI = (props: ServiceFormParams) => {
               ) : (
                 <OButton onClick={() => addressRedirect()} />
               ))}
-              {!auth && (
-                <OButton
-                  isDisabled={isSoldOut || maxProductQuantity <= 0}
-                  onClick={() => handleRedirectLogin()}
-                  text={
-                    isSoldOut || maxProductQuantity <= 0
-                      ? t('SOLD_OUT', 'Sold out')
-                      : t('LOGIN_SIGNUP', 'Login / Sign Up')
-                  }
-                  imgRightSrc=""
-                  textStyle={{ color: theme.colors.primary, fontSize: 14 }}
-                  style={{
-                    height: 44,
-                    borderColor: theme.colors.primary,
-                    backgroundColor: theme.colors.white,
-                  }}
-                />
-              )}
-              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
-                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
-                  {actionStatus?.loading ? (
-                    <Placeholder Animation={Fade}>
-                      <PlaceholderLine width={60} height={20} />
-                    </Placeholder>
-                  ) : (
-                    <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
-                  )}
-                </TouchableOpacity>
-              )}
+            {!auth && (
+              <OButton
+                isDisabled={isSoldOut || maxProductQuantity <= 0}
+                onClick={() => handleRedirectLogin()}
+                text={
+                  isSoldOut || maxProductQuantity <= 0
+                    ? t('SOLD_OUT', 'Sold out')
+                    : t('LOGIN_SIGNUP', 'Login / Sign Up')
+                }
+                imgRightSrc=""
+                textStyle={{ color: theme.colors.primary, fontSize: 14 }}
+                style={{
+                  height: 44,
+                  backgroundColor: theme.colors.white,
+                }}
+              />
+            )}
+            {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+              <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                {actionStatus?.loading ? (
+                  <Placeholder Animation={Fade}>
+                    <PlaceholderLine width={60} height={20} />
+                  </Placeholder>
+                ) : (
+                  <OText color={theme.colors.primary} size={13}>{t('AS_GUEST_USER', 'As guest user')}</OText>
+                )}
+              </TouchableOpacity>
+            )}
           </ButtonWrapper>
         </Container>
       )}
 
       <OModal
-				open={isOpen}
-				onClose={() => setIsOpen(false)}
-				entireModal
-			>
-				<ScrollView contentContainerStyle={styles.professionalList}>
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        entireModal
+      >
+        <ScrollView contentContainerStyle={styles.professionalList}>
           <View style={{ paddingVertical: 11 }}>
             <OText
               size={14}
@@ -671,7 +669,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
             </TouchableOpacity>
           ))}
         </ScrollView>
-			</OModal>
+      </OModal>
     </>
   )
 }

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

@@ -72,11 +72,6 @@ export const SessionsUI = (props: SessionsParams) => {
         showCall={false}
         paddingTop={10}
         btnStyle={{ paddingLeft: 0 }}
-        buttonProps={{
-          bgColor: theme.colors.white,
-          borderColor: theme.colors.white,
-          textStyle: { color: theme.colors.btnFont }
-        }}
       />
       {user?.session_strategy === 'jwt_session' ? (
         <>
@@ -116,14 +111,14 @@ export const SessionsUI = (props: SessionsParams) => {
                 <OButton
                   text={t('DELETE_ALL_SESSIONS', 'Delete all sessions')}
                   isDisabled={actionState.loading}
-                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  textStyle={{ fontSize: 14 }}
                   onClick={() => onDeleteAllSessions(false, true)}
                   style={{ borderRadius: 7.6, marginTop: 30 }}
                 />
                 <OButton
                   text={t('DELETE_ALL_SESSIONS_EXCEPT_CURRENT', 'Delete all sessions except current')}
                   isDisabled={actionState.loading}
-                  textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                  textStyle={{ fontSize: 14 }}
                   onClick={() => onDeleteAllSessions(false, false)}
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
@@ -141,7 +136,7 @@ export const SessionsUI = (props: SessionsParams) => {
           <OButton
             text={t('ACTIVE_SESSIONS', 'Active sessions')}
             isDisabled={actionState.loading}
-            textStyle={{ color: theme.colors.white, fontSize: 14 }}
+            textStyle={{ fontSize: 14 }}
             onClick={() => onDeleteAllSessions(true, false)}
             style={{ borderRadius: 7.6, marginTop: 20 }}
           />

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 } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Modal } 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';
@@ -32,11 +32,9 @@ import {
 } from '../LoginForm/styles';
 
 import NavBar from '../NavBar';
-import { VerifyPhone } from '../VerifyPhone';
 
 import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
-import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
 import { sortInputFields } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
@@ -85,7 +83,8 @@ const SignupFormUI = (props: SignupParams) => {
 		useSignUpFullDetails,
 		useSignUpOtpEmail,
 		useSignUpOtpCellphone,
-		isGuest
+		isGuest,
+		setCellphoneStartZero
 	} = props;
 
 	const theme = useTheme();
@@ -141,6 +140,8 @@ const SignupFormUI = (props: SignupParams) => {
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [isCheckingCode, setCheckingCode] = useState(false)
+	const [otpError, setOtpError] = useState(null)
 
 	const tabsRef = useRef<any>(null)
 	const nameRef = useRef<any>(null);
@@ -153,9 +154,9 @@ const SignupFormUI = (props: SignupParams) => {
 	const recaptchaRef = useRef<any>({});
 
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
-	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
-	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
+	const googleLoginEnabled = configs?.google_login_enabled?.value === '1'
+	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1'
+	const appleLoginEnabled = Platform.OS === 'ios' && configs?.apple_login_enabled?.value === '1'
 
 	const closeAlert = () => {
 		setAlertState({
@@ -366,6 +367,19 @@ const SignupFormUI = (props: SignupParams) => {
 		handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
+	const handleChangePhoneNumber = (number: any, rawNumber: any) => {
+		setPhoneInputData({
+			...phoneInputData,
+			...number,
+			phone: {
+				...phoneInputData.phone,
+				...number.phone,
+				country_code: phoneInputData.phone.country_code
+			}
+		})
+		setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			if (configs?.security_recaptcha_type?.value === 'v3' &&
@@ -467,9 +481,16 @@ const SignupFormUI = (props: SignupParams) => {
 
 	useEffect(() => {
 		if (checkPhoneCodeState?.result?.error) {
-			setAlertState({
+			const titleText = (
+				typeof checkPhoneCodeState?.result?.result === 'string'
+					? checkPhoneCodeState?.result?.result
+					: checkPhoneCodeState?.result?.result[0].toString()
+			) || t('ERROR', 'Error')
+			setCheckingCode(false)
+			setOtpError(titleText)
+			checkPhoneCodeState?.generate && setAlertState({
 				open: true,
-				title: (typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0].toString()) || t('ERROR', 'Error'),
+				title: titleText,
 				content: []
 			})
 		}
@@ -488,11 +509,6 @@ const SignupFormUI = (props: SignupParams) => {
 					btnStyle={{ paddingLeft: 0 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginLeft: 0, marginRight: 0 }}
-          buttonProps={{
-						bgColor: theme.colors.white,
-						borderColor: theme.colors.white,
-						textStyle: { color: theme.colors.btnFont }
-					}}
 				/>
 			)}
 			<FormSide>
@@ -655,15 +671,7 @@ const SignupFormUI = (props: SignupParams) => {
 								<View style={{ marginBottom: 25 }}>
 									<PhoneInputNumber
 										data={phoneInputData}
-										handleData={(val: any) => setPhoneInputData({
-											...phoneInputData,
-											...val,
-											phone: {
-												...phoneInputData.phone,
-												...val.phone,
-												country_code: phoneInputData.phone.country_code
-											}
-										})}
+										handleData={handleChangePhoneNumber}
 										forwardRef={phoneRef}
 										changeCountry={(val: any) => setPhoneInputData({
 											...phoneInputData,
@@ -794,9 +802,9 @@ const SignupFormUI = (props: SignupParams) => {
 										<OButton
 											imgRightSrc={null}
 											text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
-											bgColor='#FFF'
-											borderColor='#FFF'
-											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
+											bgColor={theme.colors.white}
+											borderColor={theme.colors.white}
+											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: theme.colors.white }}
 											textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
 											onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
 										/>
@@ -840,6 +848,7 @@ const SignupFormUI = (props: SignupParams) => {
 														/>
 													)
 												}
+												autoCapitalize='none'
 												value={value}
 												onChange={(val: any) => onChange(val)}
 												returnKeyType="done"
@@ -881,9 +890,7 @@ const SignupFormUI = (props: SignupParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-							borderColor={theme.colors.primary}
 							imgRightSrc={null}
-							textStyle={{ color: 'white' }}
 							isLoading={isLoadingVerifyModal}
 							indicatorColor={theme.colors.white}
 							style={{ borderRadius: 7.6, marginTop: 6 }}
@@ -892,9 +899,6 @@ const SignupFormUI = (props: SignupParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={signupButtonText}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isDisabled={formState.loading || validationFields.loading}
 							style={{ borderRadius: 7.6, marginTop: 6, shadowOpacity: 0 }}
@@ -976,13 +980,16 @@ const SignupFormUI = (props: SignupParams) => {
 					)
 				)}
 			</FormSide>
-			<OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
-				entireModal
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<Modal
+				visible={willVerifyOtpState}
+				onDismiss={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
+				animationType='slide'
 			>
 				<Otp
+					isCheckingCode={isCheckingCode}
+					setCheckingCode={setCheckingCode}
+					otpError={otpError}
+					setOtpError={setOtpError}
 					pinCount={numOtpInputs || 6}
 					willVerifyOtpState={willVerifyOtpState || false}
 					setWillVerifyOtpState={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
@@ -990,7 +997,7 @@ const SignupFormUI = (props: SignupParams) => {
 					onSubmit={onSubmit}
 					setAlertState={setAlertState}
 				/>
-			</OModal>
+			</Modal>
 			<Spinner
 				visible={formState.loading || validationFields.loading || isFBLoading}
 			/>

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

@@ -3,7 +3,8 @@ import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
   useOrder,
-  useLanguage
+  useLanguage,
+  useConfig
 } from 'ordering-components/native';
 import FastImage from 'react-native-fast-image'
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -45,6 +46,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
   const [, t] = useLanguage();
   const [{ carts }] = useOrder()
+  const [{ configs }] = useConfig()
   const theme = useTheme();
   const isFocused = useIsFocused();
 
@@ -54,6 +56,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
   const isGiftCardOrder = !order?.business_id
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
 
   const styles = StyleSheet.create({
     container: {
@@ -82,7 +85,6 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       elevation: 3
     },
     buttonText: {
-      color: theme.colors.primary,
       fontSize: 10,
       marginLeft: 2,
       marginRight: 2,
@@ -285,7 +287,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   ) : (
                     <Price>
                       <OText size={12} lineHeight={18}>
-                        {parsePrice(order?.total)}
+                        {parsePrice(order?.summary?.total ?? order?.total)}
                       </OText>
                     </Price>
                   )}
@@ -334,7 +336,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order?.business?.length > 1 ? order?.business?.length : (t('ORDER_NO', 'Order No') + '.')}
+                        {order?.business?.length > 1 ? order?.business?.length : !(changeIdToExternalId && order?.external_id) && (t('ORDER_NO', 'Order No') + '.')}
                       </OText>
                       <OText
                         size={10}
@@ -343,7 +345,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : order.id + ` \u2022 `}
+                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : ((changeIdToExternalId && order?.external_id) || order.id) + ` \u2022 `}
                       </OText>
                     </>
                   )}

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

@@ -54,6 +54,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		: 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 hideFavoriteIcon = theme?.business_view?.components?.products?.components?.product?.components?.favorite?.hidden
 
 	const styles = StyleSheet.create({
 		container: {
@@ -198,7 +199,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									style={{ ...styles.line18, flex: 1 }}>
 									{product?.name}
 								</OText>
-								{!isPreviously && (
+								{!isPreviously && !hideFavoriteIcon && (
 									<LottieAnimation
 										type='favorite'
 										onClick={handleChangeFavorite}
@@ -314,9 +315,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								height: 40
 
 							}}
-							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
-							borderColor={theme?.colors.primary}
-							textStyle={{ color: theme.colors.primary }}
+							isDisabled={isSoldOut}
 							text={t('ADD', 'Add')}
 						/>
 					)}

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

@@ -49,15 +49,12 @@ 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;
   `}

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

@@ -65,9 +65,6 @@ const StripeCardFormUI = (props: any) => {
 					<OButton
 						text={loading ? t('LOADING', 'Loading...') : t('ADD', 'Add')}
 						isDisabled={!cardState?.valid || loading}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white' }}
 						imgRightSrc={null}
 						onClick={handleSubmit}
 					/>

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

@@ -26,12 +26,14 @@ export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
-		cardSelected,
 		cardsList,
 		handleCardClick,
 		onOpen,
 		gateway,
-		paySelected
+		paySelected,
+		newCardAdded,
+		addNewCardAsDefault,
+		setUserHasCards
 	} = props;
 
 	const theme = useTheme();
@@ -55,6 +57,17 @@ export const StripeCardsListUI = (props: any) => {
 		}
 	}, [cardsList?.loading])
 
+	useEffect(() => {
+		if (newCardAdded && addNewCardAsDefault) {
+			handleCardSelected(newCardAdded)
+		}
+	}, [JSON.stringify(newCardAdded)])
+
+	useEffect(() => {
+		const hasCardSelected = cardsList?.cards?.some?.((card : any) => card?.id === paySelected?.data?.id)
+		setUserHasCards && setUserHasCards(cardsList?.cards?.length > 0 && hasCardSelected)
+	}, [cardsList?.cards?.length, paySelected])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
@@ -96,7 +109,7 @@ export const StripeCardsListUI = (props: any) => {
 						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
-									{(card.id === cardSelected?.id || card.id === paySelected?.data?.id) ? (
+									{(card.id === paySelected?.data?.id) ? (
 										<OIcon
 											src={theme.images.general.radio_act}
 											width={16}

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

@@ -35,9 +35,10 @@ const StripeElementsFormUI = (props: any) => {
 		setPlaceByMethodPay,
 		cartTotal,
 		publicKeyAddCard,
-		urlScheme,
+		urlscheme,
 		androidAppId,
-		businessNames
+		businessNames,
+		setNewCardAdded
 	} = props;
 
 	const theme = useTheme();
@@ -150,6 +151,10 @@ const StripeElementsFormUI = (props: any) => {
 						const _isNewCard = index === 0
 						stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
 					})
+					setNewCardAdded?.({
+						...card,
+						id: setupIntent?.paymentMethodId
+					})
 				} else {
 					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
 				}
@@ -213,7 +218,7 @@ const StripeElementsFormUI = (props: any) => {
 							<StripeProvider
 								publishableKey={isToSave}
 								merchantIdentifier={merchantId}
-								urlScheme={`${urlScheme}://checkout/${cart?.uuid}`}
+								urlscheme={`${urlscheme}://checkout/${cart?.uuid}`}
 							>
 								{methodsPay?.includes(paymethod) ? (
 									<StripeMethodForm
@@ -282,7 +287,6 @@ const StripeElementsFormUI = (props: any) => {
 					bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					style={styles.btnAddStyle}
-					textStyle={{ color: 'white' }}
 					imgRightSrc={null}
 					onClick={() => handleSaveCard()}
 					isDisabled={!isCompleted}

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

@@ -53,7 +53,7 @@ export const StripeElementsForm = (props: any) => {
       const result = await fetch(`${ordering.root}/payments/stripe/cards`, {
         method: 'POST',
         headers: {
-          Authorization: `Bearer ${user?.session?.access_token}`,
+          Authorization: `Bearer ${token}`,
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({

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

@@ -138,9 +138,6 @@ const StripeRedirectFormUI = (props: any) => {
 			<OButton
 				// text={formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
 				text={t('OK', 'OK')}
-				bgColor={theme.colors.primary}
-				borderColor={theme.colors.primary}
-				textStyle={{ color: 'white' }}
 				imgRightSrc={null}
 				// isDisabled={formState.isSubmitting}
 				// onClick={() => handleSubmit(onSubmit)}