ordering-ui-react-native 0.15.92 → 0.15.93-release

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

@@ -20,7 +20,10 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     onBusinessClick,
     navigation,
     isLoading,
-    getBusinesses
+    getBusinesses,
+    favoriteIds,
+    setFavoriteIds,
+    handleUpdateBusinessList
   } = props;
 
   const [, t] = useLanguage()
@@ -33,6 +36,17 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
     getBusinesses(true)
   }, [isLoading])
 
+  useEffect(() => {
+    if (!businessesList?.businesses?.length) return
+    const ids = [...favoriteIds]
+    businessesList.businesses.forEach(business => {
+      if (business?.favorite) {
+        ids.push(business.id)
+      }
+    })
+    setFavoriteIds([...new Set(ids)])
+  }, [businessesList?.businesses?.length])
+
   return (
     <>
 
@@ -123,6 +137,9 @@ const HighestRatedBusinessesUI = (props: HighestRatedBusinessesParams) => {
                           handleCustomClick={onBusinessClick}
                           orderType={orderState?.options?.type}
                           navigation={navigation}
+                          favoriteIds={favoriteIds}
+                          setFavoriteIds={setFavoriteIds}
+                          handleUpdateBusinessList={handleUpdateBusinessList}
                         />
                       </View>
                     )

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -15,7 +15,8 @@ export const Otp = (props: otpParams) => {
         setWillVerifyOtpState,
         onSubmit,
         handleLoginOtp,
-        setAlertState
+        setAlertState,
+        pinCount
     } = props
 
     const theme = useTheme();
@@ -65,7 +66,7 @@ export const Otp = (props: otpParams) => {
                 </OText>
                 <OTPInputView
                     style={{ width: '100%', height: 150 }}
-                    pinCount={6}
+                    pinCount={pinCount || 6}
                     codeInputFieldStyle={loginStyle.underlineStyleBase}
                     codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
                     onCodeFilled={(code: string) => handleLoginOtp(code)}

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

@@ -99,6 +99,11 @@ const LoginFormUI = (props: LoginParams) => {
 	const theme = useTheme();
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
 	const isOtpCellphone = loginTab === 'otp' && otpType === 'cellphone'
+
+	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 loginStyle = StyleSheet.create({
 		btnOutline: {
 			backgroundColor: '#FFF',
@@ -251,7 +256,7 @@ const LoginFormUI = (props: LoginParams) => {
 		})
 	}
 
-	const handleCategoryScroll = (opc : string) => {
+	const handleCategoryScroll = (opc: string) => {
 		tabsRef.current.scrollTo({
 			x: tabLayouts?.[opc]?.x - 40,
 			animated: true
@@ -346,15 +351,15 @@ const LoginFormUI = (props: LoginParams) => {
 				titleStyle={{ marginRight: 0, marginLeft: 0 }}
 			/>
 			<FormSide>
-				{((useLoginByEmail && useLoginByCellphone) || useLoginOtp) && (
+				{(Number(useLoginByEmail) + Number(useLoginByCellphone) + Number(useLoginOtpEmail) + Number(useLoginOtpCellphone) > 1) && (
 					<LoginWith>
 						<OTabs
-							horizontal 
+							horizontal
 							showsHorizontalScrollIndicator={false}
 							ref={tabsRef}
 						>
 							{useLoginByEmail && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeTab('email')}
 									onLayout={(event: any) => handleOnLayout(event, 'email')}
 								>
@@ -379,7 +384,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginByCellphone && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeTab('cellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
 								>
@@ -404,7 +409,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpEmail && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeOtpType('email')}
 									onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
 								>
@@ -429,7 +434,7 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpCellphone && (
-								<TabBtn 
+								<TabBtn
 									onPress={() => handleChangeOtpType('cellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
 								>
@@ -702,7 +707,8 @@ const LoginFormUI = (props: LoginParams) => {
 							<ButtonsWrapper>
 								<SocialButtons>
 									{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
-										configs?.facebook_id?.value && (
+										configs?.facebook_id?.value &&
+										facebookLoginEnabled && (
 											<FacebookLogin
 												notificationState={notificationState}
 												handleErrors={(err: any) => showToast(ToastType.Error, err)}
@@ -710,7 +716,7 @@ const LoginFormUI = (props: LoginParams) => {
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
 										)}
-									{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+									{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
@@ -719,7 +725,7 @@ const LoginFormUI = (props: LoginParams) => {
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
 									)}
-									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
+									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
 											handleErrors={(err: any) => showToast(ToastType.Error, err)}

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

@@ -5,6 +5,7 @@ import { launchImageLibrary } from 'react-native-image-picker'
 import { GiftedChat, Actions, ActionsProps, InputToolbar, Composer, Send, Bubble, MessageImage, InputToolbarProps, ComposerProps } from 'react-native-gifted-chat'
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
@@ -36,7 +37,7 @@ const ORDER_STATUS: any = {
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
 	22: 'ORDER_LOOKING_FOR_DRIVER',
-  	23: 'ORDER_DRIVER_ON_WAY'
+	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in', 'delivery_datetime']
@@ -122,18 +123,17 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
-		  ?
-		  `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
-			filterSpecialStatus.includes(message.change.attribute) ? 
-			`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
-			`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
-		  }`
-		  : message.change.new
 			?
-			`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-			:
-			`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
-	  }
+			`${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+				`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
+				`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+			}`
+			: message.change.new
+				?
+				`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+				:
+				`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+	}
 
 	useEffect(() => {
 		let newMessages: Array<any> = []
@@ -402,7 +402,9 @@ const MessagesUI = (props: MessagesParams) => {
 			<Wrapper>
 				{!isMeesageListing ? (
 					<Header>
-						<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
+						<TouchableOpacity onPress={onClose} style={{ paddingStart: 10, borderColor: theme.colors.clear }}>
+							<AntDesignIcon name='arrowleft' size={26} />
+						</TouchableOpacity>
 						<View style={{ marginRight: 10, shadowColor: theme.colors.black, shadowOpacity: 0.1, shadowOffset: { width: 0, height: 1 }, shadowRadius: 2 }}>
 							<OIcon
 								url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
@@ -419,10 +421,8 @@ const MessagesUI = (props: MessagesParams) => {
 				) : (
 					<ProfileMessageHeader>
 						<View style={{ ...styles.headerTitle }}>
-							<TouchableOpacity
-								style={styles.headerItem}
-								onPress={onClose}>
-								<OIcon src={theme.images.general.arrow_left} width={16} />
+							<TouchableOpacity onPress={onClose} style={styles.headerItem}>
+								<AntDesignIcon name='arrowleft' size={26} />
 							</TouchableOpacity>
 							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
 						</View>

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

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react'
+import { StyleSheet, View, Platform } from 'react-native'
+import SelectDropdown from 'react-native-select-dropdown'
+import { useTheme } from 'styled-components/native'
+import {
+  MomentOption as MomentOptionController,
+  useConfig,
+  useUtils
+} from 'ordering-components/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import IconAntDesign from 'react-native-vector-icons/AntDesign'
+import { Container } from './styles'
+import moment from 'moment'
+
+const MomentSelectorUI = (props: any) => {
+  const {
+		datesList,
+		hoursList,
+		dateSelected,
+		timeSelected,
+		handleChangeDate,
+		handleChangeTime,
+  } = props
+
+  const theme = useTheme()
+  const { top } = useSafeAreaInsets()
+  const [{ configs }] = useConfig()
+  const [{ parseTime }] = useUtils()
+
+  const [customizedDateList, setCustomizedDateList] = useState([])
+  const [customizedTimeList, setCustomizedTimeList] = useState([])
+
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+
+  const styles = StyleSheet.create({
+    selectOption: {
+      width: '100%',
+      backgroundColor: theme.colors.backgroundGray100,
+      paddingVertical: 5,
+      paddingHorizontal: 14,
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      height: 30
+    },
+    selectWrapper: {
+      flex: 1
+    }
+  })
+
+  useEffect(() => {
+    const updatedDatesList = datesList?.map((date: any) => {
+      return { value: moment(date).format('MMM DD, YYYY'), key: date }
+    })
+    setCustomizedDateList(updatedDatesList)
+  }, [datesList])
+
+  useEffect(() => {
+    if (hoursList?.length > 0) {
+      
+      const updatedHoursList = hoursList?.map((hour: any) => {
+        const timeValue = is12hours ? (
+          hour?.startTime?.includes('12')
+            ? `${hour.startTime}PM`
+            : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
+        ) : (
+          parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
+          )
+          return { value: timeValue, key: hour.startTime }
+        })
+      setCustomizedTimeList(updatedHoursList)
+    }
+  }, [hoursList])
+
+  const dropDownIcon = () => {
+    return (
+      <IconAntDesign
+        name='down'
+        color={theme.colors.textThird}
+        size={12}
+      />
+    )
+  }
+
+  return (
+    <Container>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedDateList?.find((item: any) => item.key === dateSelected)}
+          data={customizedDateList}
+          onSelect={(selectedItem, index) => {
+            handleChangeDate(selectedItem?.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem?.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopLeftRadius: 7.6, borderBottomLeftRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.lightGray,
+            marginTop: Platform.OS === 'ios' ? 12 : -top
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.backgroundGray100,
+            backgroundColor: theme.colors.backgroundGray100,
+            height: 30,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 12
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+      <View style={styles.selectWrapper}>
+        <SelectDropdown
+          defaultValue={customizedTimeList?.find((item: any) => item.key === timeSelected)}
+          data={customizedTimeList}
+          onSelect={(selectedItem, index) => {
+            handleChangeTime(selectedItem.key)
+          }}
+          buttonTextAfterSelection={(selectedItem, index) => {
+            return selectedItem.value
+          }}
+          rowTextForSelection={(item, index) => {
+            return item.value
+          }}
+          buttonStyle={{borderTopRightRadius: 7.6, borderBottomRightRadius: 7.6, ...styles.selectOption}}
+          buttonTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            textAlign: 'left',
+            marginHorizontal: 0
+          }}
+          dropdownStyle={{
+            borderRadius: 8,
+            borderColor: theme.colors.lightGray,
+            marginTop: Platform.OS === 'ios' ? 12 : -top
+          }}
+          rowStyle={{
+            borderBottomColor: theme.colors.backgroundGray100,
+            backgroundColor: theme.colors.backgroundGray100,
+            height: 30,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            paddingTop: 8,
+            paddingHorizontal: 14
+          }}
+          rowTextStyle={{
+            color: theme.colors.disabled,
+            fontSize: 12,
+            marginHorizontal: 0
+          }}
+          renderDropdownIcon={() => dropDownIcon()}
+          dropdownOverlayColor='transparent'
+        />
+      </View>
+    </Container>
+  )
+}
+
+export const MomentSelector = (props: any) => {
+  const [{ configs }] = useConfig()
+
+  const limitDays = parseInt(configs?.max_days_preorder?.value, 10)
+
+  const currentDate = new Date()
+  const time = limitDays > 1
+    ? currentDate.getTime() + ((limitDays - 1) * 24 * 60 * 60 * 1000)
+    : limitDays === 1 ? currentDate.getTime() : currentDate.getTime() + (6 * 24 * 60 * 60 * 1000)
+
+  currentDate.setTime(time)
+  currentDate.setHours(23)
+  currentDate.setMinutes(59)
+
+  const businessPreorderProps = {
+    ...props,
+    UIComponent: MomentSelectorUI,
+    maxDate: currentDate
+  }
+  return <MomentOptionController {...businessPreorderProps} />
+}

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex-direction: row;
+  width: 100%;
+`

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

@@ -0,0 +1,243 @@
+import React, { useState } from 'react'
+import {
+  useLanguage,
+  useConfig,
+  useUtils,
+  MultiCartsPaymethodsAndWallets as MultiCartsPaymethodsAndWalletsController
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { View, TouchableOpacity, FlatList, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native'
+import { Placeholder,	PlaceholderLine, Fade } from 'rn-placeholder'
+import { OText, OIcon, OModal, OButton } from '../shared'
+import { getIconCard, flatArray } from '../../utils'
+import { StripeElementsForm } from '../StripeElementsForm'
+import { StripeCardsList } from '../StripeCardsList'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {
+  PMContainer,
+  PMItem,
+  WalletItem
+} from './styles'
+
+const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
+  const {
+    businessIds,
+    paymethodsAndWallets,
+    walletsState,
+    businessPaymethods,
+    paymethodSelected,
+    handleSelectPaymethod,
+    handleSelectWallet,
+    handlePaymethodDataChange
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parsePrice }] = useUtils()
+
+	const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
+
+  const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
+  const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
+
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+      isActive: isWalletCashEnabled
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+      isActive: isWalletPointsEnabled
+    }
+  }
+
+  const getPayIcon = (method: string) => {
+		switch (method) {
+			case 'cash':
+				return theme.images.general.cash
+			case 'card_delivery':
+				return theme.images.general.carddelivery
+			case 'paypal':
+				return theme.images.general.paypal
+			case 'stripe':
+				return theme.images.general.stripe
+			case 'stripe_direct':
+				return theme.images.general.stripecc
+			case 'stripe_connect':
+				return theme.images.general.stripes
+			case 'stripe_redirect':
+				return theme.images.general.stripesb
+			default:
+				return theme.images.general.creditCard
+		}
+	}
+
+  const renderPaymethods = ({ item }: any) => {
+		return (
+			<TouchableOpacity
+				onPress={() => handleSelectPaymethod(item)}
+			>
+				<PMItem
+					key={item.id}
+					isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
+				>
+					<OIcon
+						src={getPayIcon(item.paymethod?.gateway)}
+						width={20}
+						height={20}
+						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
+					/>
+					<OText
+						size={10}
+						style={{ margin: 0, marginTop: 4 }}
+						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
+					>
+						{t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
+					</OText>
+				</PMItem>
+			</TouchableOpacity>
+		)
+	}
+
+  return (
+    <PMContainer>
+      <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+        {t('PAYMENT_METHODS', 'Payment Methods')}
+      </OText>
+      {paymethodsAndWallets.loading ? (
+        <Placeholder style={{ marginTop: 10, marginBottom: 10 }} Animation={Fade}>
+          <View style={{ display: 'flex', flexDirection: 'row' }}>
+            {[...Array(3)].map((_, i) => (
+              <PlaceholderLine
+                key={i}
+                width={37}
+                height={80}
+                noMargin
+                style={{ borderRadius: 10, marginRight: 10, }}
+              />
+            ))}
+          </View>
+        </Placeholder>
+      ) : (
+        <FlatList
+          horizontal
+					showsHorizontalScrollIndicator={false}
+          data={businessPaymethods.result.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
+					renderItem={renderPaymethods}
+					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
+        />
+      )}
+      {!paymethodsAndWallets.loading && !paymethodsAndWallets.error && paymethodsAndWallets.paymethods.length === 0 && (
+        <OText size={12} style={{ margin: 0 }}>
+          {t('NO_PAYMENT_METHODS', 'No payment methods!')}
+        </OText>
+      )}
+
+      {paymethodSelected?.paymethod?.gateway === 'stripe' && (
+        <View>
+          <OButton
+						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
+						bgColor={theme.colors.white}
+						borderColor={theme.colors.primary}
+						style={styles.btnAddStyle}
+						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+						imgRightSrc={null}
+						onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+					/>
+          <StripeCardsList
+						paymethod={paymethodSelected?.paymethod}
+						businessId={businessIds[0]}
+            businessIds={businessIds}
+						publicKey={paymethodSelected?.data?.publishable}
+						payType={paymethodSelected?.paymethod?.name}
+						onSelectCard={handlePaymethodDataChange}
+					/>
+        </View>
+      )}
+
+      {(paymethodsAndWallets.loading || walletsState.loading) ? (
+        <>
+          {[...Array(2).keys()].map(i => (
+            <PlaceholderLine
+              key={i}
+              height={40}
+              noMargin
+              style={{ marginBottom: 10 }}
+            />
+          ))}
+        </>
+      ) : (
+        <>
+          {walletsState.result.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
+            <WalletItem
+              key={wallet.type}
+              isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
+              onPress={() => handleSelectWallet(paymethodSelected.wallet_id === wallet.id ? false : true, wallet)}
+            >
+              {paymethodSelected.wallet_id === wallet.id ? (
+                <MaterialCommunityIcons
+                  name="checkbox-marked"
+                  size={25}
+                  color={theme.colors.primary}
+                />
+              ) : (
+                <MaterialCommunityIcons
+                  name="checkbox-blank-outline"
+                  size={25}
+                  color={theme.colors.disabled}
+                />
+              )}
+              <OText size={12} style={{ flex: 1, marginLeft: 15 }}>{walletName[wallet.type]?.name}</OText>
+              <OText size={12}>{parsePrice(wallet.balance)}</OText>
+            </WalletItem>
+          ))}
+        </>
+      )}
+
+      <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
+						toSave
+						businessId={businessIds[0]}
+            businessIds={businessIds}
+            publicKey={paymethodSelected?.data?.publishable}
+						requirements={props.clientSecret}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
+    </PMContainer>
+  )
+}
+
+const styles = StyleSheet.create({
+	btnAddStyle: {
+		marginVertical: 20,
+		borderRadius: 7.6,
+		shadowOpacity: 0,
+		height: 44,
+		borderWidth: 1
+	},
+})
+
+
+export const MultiCartsPaymethodsAndWallets = (props: any) => {
+  const multiCartsPaymethodsAndWalletsProps = {
+    ...props,
+    UIComponent: MultiCartsPaymethodsAndWalletsUI
+  }
+  return <MultiCartsPaymethodsAndWalletsController {...multiCartsPaymethodsAndWalletsProps} />
+}