ordering-ui-react-native 0.17.73 → 0.17.74-release

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

@@ -3,7 +3,6 @@ import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-
 import { useTheme } from 'styled-components/native';
 import { useFocusEffect } from '@react-navigation/native'
 import { OText, OButton } from '../shared'
-import { NotFoundSource } from '../NotFoundSource'
 import { ActiveOrders } from '../ActiveOrders'
 import { PreviousOrders } from '../PreviousOrders'
 import { PreviousBusinessOrdered } from './PreviousBusinessOrdered'
@@ -11,6 +10,7 @@ import { PreviousProductsOrdered } from './PreviousProductsOrdered'
 import { OptionTitle, NoOrdersWrapper } from './styles'
 import { OrdersOptionParams } from '../../types'
 import { _setStoreData } from '../../providers/StoreUtil';
+import { NotFoundSource } from '../NotFoundSource';
 import {
 	Placeholder,
 	PlaceholderLine,
@@ -18,6 +18,7 @@ import {
 } from "rn-placeholder";
 
 import { View, ScrollView } from 'react-native'
+import { getOrderStatus, flatArray } from '../../utils'
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const {
@@ -50,7 +51,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businesses,
 		businessPaginationProps,
 		handleUpdateProducts,
-		handleUpdateBusinesses
+		handleUpdateBusinesses,
+		businessId
 	} = props
 
 	const theme = useTheme();
@@ -69,67 +71,37 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	const _orders = customArray || values || []
 	const uniqueOrders: any = []
 
-
 	useEffect(() => {
 		if (loading || error) return
-		const orders = _orders.map((order: any) => order?.cart_group_id
+		const ordersReduced = _orders.map((order: any) => order?.cart_group_id
 			? _orders
-				.filter((_order : any) => _order?.cart_group_id === order?.cart_group_id)
-				?.reduce((orderCompleted : any, currentOrder : any) => ({
-					...orderCompleted,
-					total: orderCompleted.summary?.total + currentOrder?.summary?.total,
-					business: [orderCompleted.business, currentOrder.business].flat(),
-					business_id: [orderCompleted.business_id, currentOrder.business_id].flat(),
-					id: [orderCompleted.id, currentOrder.id].flat(),
-					review: orderCompleted.review && currentOrder.review,
-					user_review: orderCompleted.user_review && currentOrder.user_review,
-					products: [orderCompleted.products, currentOrder.products].flat()
-				})).filter((order: any) => {
-					const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
-					if (!isDuplicate) {
-						uniqueOrders.push(order?.cart_group_id)
-						return true
+				.filter((_order: any) => _order?.cart_group_id === order?.cart_group_id)
+				.map((_o: any, _: any, _ordersList: any) => {
+					const obj = {
+						..._o,
+						id: _ordersList.map(o => o.id),
+						review: _o.review,
+						user_review: _o.user_review,
+						total: _ordersList.reduce((acc: any, o: any) => acc + o.summary.total, 0),
+						business: _ordersList.map((o: any) => o.business),
+						business_id: _ordersList.map((o: any) => o.business_id),
+						products: _ordersList.map((o: any) => o.products)
 					}
-					return false
-				})
+					return obj
+				}).find((o: any) => o)
 			: order)
+		const orders = ordersReduced?.filter((order: any) => {
+			if (!order?.cart_group_id) return true
+			const isDuplicate = uniqueOrders.includes(order?.cart_group_id)
+			if (!isDuplicate) {
+				uniqueOrders.push(order?.cart_group_id)
+				return true
+			}
+			return false
+		})
 		setOrders(orders)
 	}, [JSON.stringify(_orders)])
 
-	const getOrderStatus = (s: string) => {
-		const status = parseInt(s)
-		const orderStatus = [
-			{ key: 0, value: t('PENDING', 'Pending') },
-			{ key: 1, value: t('COMPLETED', 'Completed') },
-			{ key: 2, value: t('REJECTED', 'Rejected') },
-			{ key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
-			{ key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
-			{ key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
-			{ key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
-			{ key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
-			{ key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
-			{ key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
-			{ key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
-			{ key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
-			{ key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
-			{ key: 13, value: t('PREORDER', 'PreOrder') },
-			{ key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
-			{ key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
-			{ key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
-			{ key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
-			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
-			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
-			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
-			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
-			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
-		]
-
-		const objectStatus = orderStatus.find((o) => o.key === status)
-
-		return objectStatus && objectStatus
-	}
-
 	const onProductClick = (product: any) => {
 		if (product?.product_id && product?.category_id && product?.businessId &&
 			product?.business.slug && product?.business.header && product?.business.logo) {
@@ -150,6 +122,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	}
 
 	useEffect(() => {
+		if (reorderState?.loading) return
 		const _businessId = 'businessId:' + reorderState?.result?.business_id
 		if (reorderState?.error) {
 			if (reorderState?.result?.business_id) {
@@ -157,21 +130,39 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 				navigation.navigate('Business', { store: reorderState?.result?.business?.slug })
 			}
 		}
-		if (!reorderState?.error && reorderState.loading === false && reorderState?.result?.business_id) {
+		if (!reorderState?.error && !reorderState.loading && reorderState?.result?.business_id) {
 			const cartProducts = carts?.[_businessId]?.products
-			const available = cartProducts.every((product: any) => product.valid === true)
-			const orderProducts = orders.find((order: any) => order?.id === reorderState?.result?.orderId)?.products
 
-			if (available && reorderState?.result?.uuid && (cartProducts?.length === orderProducts?.length)) {
-				onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+			const available = cartProducts.every((product: any) => product.valid)
+			const orderProducts = orders.find(
+				(order: any) => Array.isArray(order?.id)
+					? order?.id?.includes(reorderState?.result?.orderId)
+					: order?.id === reorderState?.result?.orderId
+			)?.products
+
+			const productsFlatten = orderProducts?.length && flatArray(orderProducts)?.filter(product => product?.order_id === reorderState?.result?.orderId)
+
+			if (available && reorderState?.result?.uuid && (cartProducts?.length === productsFlatten?.length)) {
+				const multiOrders = flatArray(orderProducts)?.map(product => product.order_id)
+				const params = multiOrders?.length > 1
+					? { screen: 'MultiCheckout', checkCarts: true }
+					: { cartUuid: reorderState?.result.uuid }
+
+				onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', params)
 			} else {
 				_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
-				cartProducts?.length !== orderProducts?.length && _setStoreData('already-removed', JSON.stringify('removed'))
+				cartProducts?.length !== productsFlatten?.length && _setStoreData('already-removed', JSON.stringify('removed'))
 				navigation.navigate('Business', { store: reorderState?.result?.business?.slug })
 			}
 		}
 	}, [reorderState])
 
+	useEffect(() => {
+		if (reorderState?.error) {
+			showToast(ToastType.Error, reorderState?.result)
+		}
+	}, [reorderState])
+
 	useFocusEffect(
 		React.useCallback(() => {
 			if (!businessesSearchList) {
@@ -190,14 +181,16 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 	useEffect(() => {
 		if (loading) return
 
-		const updateOrders = orders.filter((order: any) => orderStatus.includes(order.status))
+		const updateOrders = _orders.filter((order: any) => orderStatus.includes(order.status))
 
 		if (activeOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, activeOrdersLength: updateOrders?.length })
 		} else if (!preOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
+		} else {
+			setOrdersLength && setOrdersLength({ ...ordersLength, preordersLength: updateOrders?.length })
 		}
-	}, [orders, activeOrders, preOrders])
+	}, [_orders, activeOrders, preOrders])
 
 	useEffect(() => {
 		if (refreshOrders) {
@@ -208,21 +201,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	return (
 		<>
-			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
+			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && ordersLength?.preordersLength === 0 && !activeOrders && !preOrders && (
 				<NoOrdersWrapper>
-					<OText size={14} numberOfLines={1}>
-						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
-					</OText>
-					<OButton
-						text={t('ORDER_NOW', 'Order now')}
-						onClick={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
-						textStyle={{ color: 'white', fontSize: 14 }}
-						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
+					<NotFoundSource
+						hideImage
+						btnStyle={{ borderRadius: 8 }}
+						content={t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
+						btnTitle={t('ORDER_NOW', 'Order now')}
+						onClickButton={() => onNavigationRedirect && (businessId ? onNavigationRedirect('Business') : onNavigationRedirect('BusinessList'))}
 					/>
-
 				</NoOrdersWrapper>
 			)}
-			{(ordersLength?.activeOrdersLength > 0 || ordersLength?.previousOrdersLength > 0) && (
+			{((ordersLength?.activeOrdersLength > 0 && activeOrders) ||
+				(ordersLength?.previousOrdersLength > 0 && !activeOrders && !preOrders) ||
+				(ordersLength?.preordersLength > 0 && preOrders)
+			) && (
 				<>
 					{((titleContent && ((isBusiness && businessOrderIds?.length > 0) || isProducts)) || !titleContent) && (
 						<OptionTitle titleContent={!!titleContent} isBusinessesSearchList={!!businessesSearchList}>
@@ -235,17 +228,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 							</OText>
 						</OptionTitle>
 					)}
-
-					{!(ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) &&
-						!loading &&
-						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
-						(
-							<NotFoundSource
-								content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-								image={imageFails}
-								conditioned
-							/>
-						)}
 				</>
 			)}
 			{isBusiness && !!businessesSearchList && businesses?.loading && (

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

@@ -10,5 +10,5 @@ export const OptionTitle = styled.View`
 export const NoOrdersWrapper = styled.View`
 	flex-direction: column;
 	align-items: center;
-	margin-top: 50px;
+	margin-top: 60px;
 `

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

@@ -1,22 +1,25 @@
-import React, { useRef } from 'react'
-import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
-
+import React, { useEffect, useState, useRef } from 'react'
+import { useUtils, useEvent, PageBanner as PageBannerController } from 'ordering-components/native'
 import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Carousel from 'react-native-snap-carousel'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { useTheme } from 'styled-components/native';
-import { PageBannerWrapper, ArrowButtonsContainer } from './styles'
+import { PageBannerWrapper } from './styles'
 
 const PageBannerUI = (props: any) => {
   const {
-    pageBannerState
+    pageBannerState,
+    navigation
   } = props
 
 	const theme = useTheme();
 	const [{ optimizeImage }] = useUtils();
-  const carouselRef = useRef(null)
+  const [events] = useEvent()
+  const carouselRef = useRef<any>(null)
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [viewedBanner, setViewedBanner] = useState<any>(null)
 
   const windowWidth = Dimensions.get('window').width;
 
@@ -25,7 +28,8 @@ const PageBannerUI = (props: any) => {
 			height: 300,
 		},
     swiperButton: {
-			marginHorizontal: 25,
+      position: 'absolute',
+      zIndex: 100,
 			alignItems: 'center',
 			justifyContent: 'center',
 			width: 32,
@@ -39,18 +43,71 @@ const PageBannerUI = (props: any) => {
     }
   })
 
+  const onRedirect = (route: string, params?: any) => {
+		navigation.push(route, params)
+	}
+
+  const handleGoToPage = (item: any) => {
+    const action = item.action
+    if (!action?.url) return
+    let slug
+    if (action.type === 'business') {
+      slug = action.url.split('store/')[1]
+      onRedirect('Business', {
+        store: slug
+      })
+    }
+    if (action.type === 'product') {
+      slug = action.url.split('store/')[1]?.split('?')[0]
+      onRedirect('ProductDetails', {
+				businessSlug: slug,
+				businessId: action.business_id,
+        categoryId: action.category_id,
+        productId: action.product_id,
+        isRedirect: 'business',
+        business: {
+          store: slug
+        }
+			})
+    }
+    const clickedBanner = pageBannerState.result.find(banner => banner.id === item?.banner_id)
+    events.emit('promotion_clicked', clickedBanner)
+  }
+
   const renderItem = ({ item, index }) => {
     return (
-      <View style={styles.sliderWrapper}>
-        <FastImage
-          style={{ height: '100%', width: '100%' }}
-          resizeMode='cover'
-          source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
-        />
-      </View>
+      <TouchableOpacity
+        onPress={() => handleGoToPage(item)}
+      >
+        <View style={styles.sliderWrapper}>
+          <FastImage
+            style={{ height: '100%', width: '100%' }}
+            resizeMode='cover'
+            source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
+          />
+        </View>
+      </TouchableOpacity>
     )
   }
 
+  const updateIndex = () => {
+    setCurrentIndex(carouselRef?.current?.currentIndex)
+  }
+
+  useEffect(() => {
+    if (pageBannerState.loading) return
+    if (pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0) {
+      const bannerId = pageBannerState.banner.items[currentIndex]?.banner_id
+      if (pageBannerState.result && bannerId) {
+        const _viewedBanner = pageBannerState.result.find(banner => banner.id === bannerId)
+        if (_viewedBanner?.id !== viewedBanner?.id) {
+          setViewedBanner(_viewedBanner)
+          events.emit('promotion_viewed', _viewedBanner)
+        }
+      }
+    }
+  }, [pageBannerState.loading, currentIndex, viewedBanner])
+
   return (
     <>
       {pageBannerState.loading ? (
@@ -68,39 +125,42 @@ const PageBannerUI = (props: any) => {
         <>
           {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
             <PageBannerWrapper>
-              <ArrowButtonsContainer>
-                <TouchableOpacity
-                  style={styles.swiperButton}
-                  onPress={() => carouselRef.current.snapToPrev()}
-                >
-                  <IconAntDesign
-                    name="caretleft"
-                    color={theme.colors.white}
-                    size={13}
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={styles.swiperButton}
-                  onPress={() => carouselRef.current.snapToNext()}
-                >
-                  <IconAntDesign
-                    name="caretright"
-                    color={theme.colors.white}
-                    size={13}
-                  />
-                </TouchableOpacity>
-              </ArrowButtonsContainer>
+              {pageBannerState.banner?.items.length > 1 && (
+                <>
+                  <TouchableOpacity
+                    style={[styles.swiperButton, { left: 25 }]}
+                    onPress={() => carouselRef.current.snapToPrev()}
+                  >
+                    <IconAntDesign
+                      name="caretleft"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    style={[styles.swiperButton, { right: 25 }]}
+                    onPress={() => carouselRef.current.snapToNext()}
+                  >
+                    <IconAntDesign
+                      name="caretright"
+                      color={theme.colors.white}
+                      size={13}
+                    />
+                  </TouchableOpacity>
+                </>
+              )}
               <Carousel
                 ref={carouselRef}
                 loop={pageBannerState.banner?.items.length > 1}
                 data={pageBannerState.banner?.items}
                 renderItem={renderItem}
-                sliderWidth={windowWidth - 80}
-                itemWidth={windowWidth - 80}
+                sliderWidth={windowWidth}
+                itemWidth={windowWidth}
                 inactiveSlideScale={1}
                 pagingEnabled
                 removeClippedSubviews={false}
                 inactiveSlideOpacity={1}
+                onSnapToItem={updateIndex}
               />
             </PageBannerWrapper>
           )}

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

@@ -1,18 +1,8 @@
 import styled from 'styled-components/native'
 
 export const PageBannerWrapper = styled.View`
-  margin-horizontal: 40px;
-  border-radius: 8px;
   overflow: hidden;
-  margin-vertical: 30px;
   position: relative;
   flex-direction: row;
   align-items: center;
 `
-export const ArrowButtonsContainer = styled.View`
-  position: absolute;
-  z-index: 100;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-`

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

@@ -0,0 +1,180 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { View, Modal, TouchableOpacity, StyleSheet, SafeAreaView, KeyboardAvoidingView, Platform, ScrollView } from 'react-native'
+import { OButton, OIcon, OInput, OModal, OText } from '../shared'
+import { PaymentOptionStripe, useLanguage, useSession } from 'ordering-components/native'
+import { StripeCardsListUI } from '../StripeCardsList'
+import { useTheme } from 'styled-components/native';
+import { CreditCardInput } from "react-native-credit-card-input-plus";
+import Alert from '../../providers/AlertProvider'
+
+const PaymentOptionCardUI = (props: any) => {
+    const {
+        cardSelected,
+        deleteCard,
+        onSelectCard,
+        handleCardClick,
+        cardsList,
+        addCardOpen,
+        setAddCardOpen,
+        gateway,
+        handleNewCard,
+        paymethodsWithoutSaveCards
+    } = props
+    const [, t] = useLanguage()
+    const theme = useTheme()
+    const [{ token }] = useSession()
+    const [alertState, setAlertState] = useState<{ open: boolean, content: Array<string> }>({ open: false, content: [] })
+    const [newCard, setNewCard] = useState<any>(null)
+
+    const onChangeCardForm = (values : any) => {
+        if (values?.valid) {
+            const expiry = values?.values?.expiry?.split('/')
+            const expiryMonth = expiry[0]
+            const expiryYear = expiry[1]
+            const expiryString = expiryMonth + expiryYear
+            let lastFourDigits = values?.values?.number?.substr(-4);
+            setNewCard({
+                name: values?.values.name,
+                number: values?.values.number.replace(/\s/g, ''),
+                cvc: values?.values.cvc,
+                expiryMonth: expiryMonth,
+                expiryYear: expiryYear,
+                expiry: expiry,
+                brand: values?.values?.type,
+                last4: lastFourDigits,
+                expiryString: expiryString
+            })
+        }
+    }
+
+    const handleAddNewCard = () => {
+        handleNewCard(newCard)
+        setAddCardOpen({ ...addCardOpen, card: false })
+        setNewCard(null)
+    }
+
+    useEffect(() => {
+        if (cardsList.error && !cardsList.loading) {
+            setAlertState({
+                open: true,
+                content: cardsList.error
+            })
+        }
+    }, [JSON.stringify(cardsList)])
+
+    const style = StyleSheet.create({
+        wrapperIcon: {
+            marginLeft: 25,
+            marginTop: Platform.OS === 'ios' ? 40 : 12,
+            marginBottom: 20,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        buttonStyle: {
+            marginVertical: 20,
+            borderRadius: 7.6,
+            shadowOpacity: 0,
+            height: 44,
+            borderWidth: 1
+        }
+    })
+
+    return (
+        <View>
+            <>
+                {token && (!cardSelected || !paymethodsWithoutSaveCards.includes(gateway)) && (
+                    <OButton
+                        text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
+                        bgColor={theme.colors.white}
+                        borderColor={theme.colors.primary}
+                        style={{
+                            marginVertical: 20,
+                            borderRadius: 7.6,
+                            shadowOpacity: 0,
+                            height: 44,
+                            borderWidth: 1
+                        }}
+                        textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+                        imgRightSrc={null}
+                        onClick={() => setAddCardOpen({ ...addCardOpen, card: true })}
+                    />
+                )}
+                <StripeCardsListUI
+                    cardSelected={cardSelected}
+                    deleteCard={deleteCard}
+                    onSelectCard={onSelectCard}
+                    handleCardClick={handleCardClick}
+                    cardsList={cardsList}
+                    noShowErrors
+                    gateway={gateway}
+                />
+            </>
+            <Modal
+                animationType="slide"
+                visible={addCardOpen?.card}
+                onDismiss={() => setAddCardOpen({ ...addCardOpen, card: false })}
+            >
+                <KeyboardAvoidingView
+                    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                    style={{
+                        flex: 1,
+                    }}
+                >
+                    <ScrollView>
+                        <TouchableOpacity onPress={() => setAddCardOpen({ ...addCardOpen, card: false })}>
+                            <OIcon
+                                src={theme.images.general.close}
+                                width={16}
+                                style={style.wrapperIcon}
+                            />
+                        </TouchableOpacity>
+                        <>
+                            <CreditCardInput
+                                onChange={onChangeCardForm}
+                                requiresName
+                            />
+                            {alertState?.content?.[0] && !cardsList?.loading && (
+                                <OText
+                                    color={theme?.colors?.error}
+                                    style={{
+                                        alignSelf: 'center'
+                                    }}
+                                    size={20}
+                                >
+                                    {alertState.content[0]}
+                                </OText>
+                            )}
+                            <OButton
+                                text={t('ADD_CARD', 'Add card')}
+                                isDisabled={!newCard || cardsList?.loading}
+                                isLoading={cardsList?.loading}
+                                onClick={() => handleAddNewCard()}
+                                style={{
+                                    margin: 20,
+                                    ...style.buttonStyle
+                                }}
+                            />
+                        </>
+                    </ScrollView>
+                </KeyboardAvoidingView>
+            </Modal>
+            <Alert
+                open={alertState?.open || false}
+                title=''
+                content={alertState.content}
+                onClose={() => setAlertState({ open: false, content: [] })}
+                onAccept={() => setAlertState({ open: false, content: [] })}
+            />
+        </View>
+    )
+}
+
+export const PaymentOptionCard = (props : any) => {
+    const paymentOptions = {
+        ...props,
+        UIComponent: PaymentOptionCardUI
+    }
+    return (
+        <PaymentOptionStripe {...paymentOptions} />
+    )
+}

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

@@ -39,7 +39,7 @@ export const OSItem = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 0px;
+  padding: 10px 0px;
 `;
 
 export const OSItemContent = styled.TouchableOpacity`