ordering-ui-react-native 0.21.71 → 0.21.72-release

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

@@ -227,7 +227,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             </View>
           ) : (
             <MultiLogosContainer>
-              {order?.logo?.map((logo : string, i : number) => (
+              {order?.logo?.map((logo: string, i: number) => (
                 <React.Fragment key={logo}>
                   <View style={styles.logoWrapper}>
                     <OIcon
@@ -333,7 +333,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={t('CONTINUE', 'Continue')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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

@@ -104,7 +104,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={order?.driver && !order?.user_review ? t('CONTINUE', 'Continue') : t('SEND_REVIEW', 'Send Review')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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

@@ -90,7 +90,7 @@ export const ReviewTrigger = (props: any) => {
             </View>
           ) : (
             <MultiLogosContainer>
-              {order?.logo?.map((logo : string, i : number) => (
+              {order?.logo?.map((logo: string, i: number) => (
                 <React.Fragment key={logo}>
                   <View style={styles.logoWrapper}>
                     <OIcon
@@ -122,7 +122,7 @@ export const ReviewTrigger = (props: any) => {
       <FloatingBottomContainer borderTopWidth={0} borderRadius={10}>
         <ActionContainer>
           <OButton
-            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            textStyle={{ paddingRight: 10 }}
             text={t('GOTO_REVIEW', 'Go to review')}
             style={{ borderRadius: 8 }}
             imgRightSrc={theme.images.general.arrow_right}

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)
@@ -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

@@ -111,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 }}
                 />
@@ -136,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

@@ -155,7 +155,7 @@ const SignupFormUI = (props: SignupParams) => {
 	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 = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
 
 	const closeAlert = () => {
 		setAlertState({
@@ -583,65 +583,67 @@ const SignupFormUI = (props: SignupParams) => {
 							{sortInputFields({
 								values: validationFields?.fields?.checkout,
 							}).map(
-								(field: any, i: number) =>
-									!notValidationFields.includes(field.code) &&
-									showField &&
-									showField(field.code) &&
-									(signUpTab === 'default' ||
-										(signUpTab === 'otpEmail' && field.code === 'email')) && (
-										<React.Fragment key={field.id}>
-											{errors?.[`${field.code}`] && (
-												<OText
-													size={14}
-													color={theme.colors.danger5}
-													weight={'normal'}>
-													{errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
-												</OText>
-											)}
-											<Controller
-												control={control}
-												render={({ onChange, value }: any) => (
-													<OInput
-														placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
-														style={style.inputStyle}
-														icon={
-															field.code === 'email'
-																? theme.images.general.email
-																: theme.images.general.user
-														}
-														value={value}
-														onChange={(val: any) =>
-															field.code !== 'email'
-																? (onChange(val))
-																: handleChangeInputEmail(val, onChange)
-														}
-														autoCapitalize={
-															field.code === 'email' ? 'none' : 'sentences'
-														}
-														autoCorrect={field.code === 'email' && false}
-														type={
-															field.code === 'email' ? 'email-address' : 'default'
-														}
-														autoCompleteType={
-															field.code === 'email' ? 'email' : 'off'
-														}
-														returnKeyType="next"
-														blurOnSubmit={false}
-														forwardRef={(ref: any) => handleRefs(ref, field.code)}
-														onSubmitEditing={() =>
-															field.code === 'email'
-																? phoneRef?.current?.focus?.()
-																: handleFocusRef(getNextFieldCode(i))
-														}
-														borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
-													/>
+								(item: any, i: number) => {
+									const field = item?.validation_field || item
+									return (!notValidationFields.includes(field.code) &&
+										showField &&
+										showField(field.code) &&
+										(signUpTab === 'default' ||
+											(signUpTab === 'otpEmail' && field.code === 'email')) && (
+											<React.Fragment key={field.id}>
+												{errors?.[`${field.code}`] && (
+													<OText
+														size={14}
+														color={theme.colors.danger5}
+														weight={'normal'}>
+														{errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
+													</OText>
 												)}
-												name={field.code}
-												rules={getInputRules(field)}
-												defaultValue=""
-											/>
-										</React.Fragment>
-									),
+												<Controller
+													control={control}
+													render={({ onChange, value }: any) => (
+														<OInput
+															placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
+															style={style.inputStyle}
+															icon={
+																field.code === 'email'
+																	? theme.images.general.email
+																	: theme.images.general.user
+															}
+															value={value}
+															onChange={(val: any) =>
+																field.code !== 'email'
+																	? (onChange(val))
+																	: handleChangeInputEmail(val, onChange)
+															}
+															autoCapitalize={
+																field.code === 'email' ? 'none' : 'sentences'
+															}
+															autoCorrect={field.code === 'email' && false}
+															type={
+																field.code === 'email' ? 'email-address' : 'default'
+															}
+															autoCompleteType={
+																field.code === 'email' ? 'email' : 'off'
+															}
+															returnKeyType="next"
+															blurOnSubmit={false}
+															forwardRef={(ref: any) => handleRefs(ref, field.code)}
+															onSubmitEditing={() =>
+																field.code === 'email'
+																	? phoneRef?.current?.focus?.()
+																	: handleFocusRef(getNextFieldCode(i))
+															}
+															borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
+														/>
+													)}
+													name={field.code}
+													rules={getInputRules(field)}
+													defaultValue=""
+												/>
+											</React.Fragment>
+										))
+								}
 							)}
 
 							{(!!showInputPhoneNumber && (signUpTab === 'default' || signUpTab === 'otpCellphone')) && (
@@ -787,9 +789,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)}
 										/>
@@ -833,6 +835,7 @@ const SignupFormUI = (props: SignupParams) => {
 														/>
 													)
 												}
+												autoCapitalize='none'
 												value={value}
 												onChange={(val: any) => onChange(val)}
 												returnKeyType="done"
@@ -874,9 +877,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 }}
@@ -885,9 +886,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 }}

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

@@ -82,7 +82,6 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       elevation: 3
     },
     buttonText: {
-      color: theme.colors.primary,
       fontSize: 10,
       marginLeft: 2,
       marginRight: 2,
@@ -285,7 +284,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                   ) : (
                     <Price>
                       <OText size={12} lineHeight={18}>
-                        {parsePrice(order?.summary?.total || order?.total)}
+                        {parsePrice(order?.total)}
                       </OText>
                     </Price>
                   )}

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

@@ -48,6 +48,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+	const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
 	const hideProductLogo = viewString
 		? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
 		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
@@ -169,7 +170,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<View style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					onClick={() => handleClickproduct()}
@@ -283,7 +284,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							{!hideProductLogo && (
+							{(!hideProductLogo && (product?.images || !hideProductDummyLogo)) && (
 								<FastImage
 									style={styles.productStyle}
 									source={product?.images ? {
@@ -313,9 +314,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')}
 						/>
 					)}
@@ -340,7 +339,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					</Placeholder>
 				</View>
 			)}
-		</InView>
+		</View>
 	);
 }, SingleProductCardPropsAreEqual);
 

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,16 +26,13 @@ export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
-		cardSelected,
 		cardsList,
 		handleCardClick,
 		onOpen,
-		onCancel,
 		gateway,
-		setCardsList,
-		addCardOpen,
-		isOpenMethod,
-		handlePaymethodDataChange
+		paySelected,
+		newCardAdded,
+		addNewCardAsDefault
 	} = props;
 
 	const theme = useTheme();
@@ -59,6 +56,12 @@ export const StripeCardsListUI = (props: any) => {
 		}
 	}, [cardsList?.loading])
 
+	useEffect(() => {
+		if (newCardAdded && addNewCardAsDefault) {
+			handleCardSelected(newCardAdded)
+		}
+	}, [JSON.stringify(newCardAdded)])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
@@ -98,10 +101,9 @@ export const StripeCardsListUI = (props: any) => {
 				>
 					{cardsList.cards.map((card: any) => (
 						<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 ? (
+									{(card.id === paySelected?.data?.id) ? (
 										<OIcon
 											src={theme.images.general.radio_act}
 											width={16}
@@ -148,33 +150,6 @@ export const StripeCardsListUI = (props: any) => {
 					))}
 				</ScrollView>
 			)}
-			<OModal
-				entireModal
-				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={addCardOpen?.stripe}
-				onClose={onCancel}
-				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={onCancel}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
 		</>
 	)
 }