ordering-ui-react-native 0.18.55-test1 → 0.18.56-crash-driver-1

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

@@ -10,7 +10,7 @@ export const NavBack = styled.TouchableOpacity`
 
 
 export const Header = styled.View`
-  padding: 10px 40px;
+  padding: 10px 20px;
   flex: 1;
 `
 
@@ -24,7 +24,7 @@ export const OrderContent = styled.View`
 export const OrderBusiness = styled.View`
   position: relative; 
   padding-vertical: 10px;
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   background-color: ${(props: any) => props.theme.colors.white};
   align-items: flex-start;
 `
@@ -64,7 +64,7 @@ export const SectionTitle = styled.View`
 `
 
 export const OrderCustomer = styled.View`
-  padding: 20px 40px 10px;
+  padding: 20px 20px 10px;
   background-color: ${(props: any) => props.theme.colors.white};
 `
 
@@ -86,7 +86,7 @@ export const InfoBlock = styled.View`
 export const HeaderInfo = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-  padding: 20px 40px;
+  padding: 20px 20px;
 `
 
 export const OrderProducts = styled(OrderCustomer)``
@@ -100,7 +100,7 @@ export const Table = styled.View`
 `
 
 export const OrderBill = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
   padding-vertical: 10px;
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
@@ -130,7 +130,7 @@ export const OrderAction = styled.View`
 `
 
 export const PlaceSpotWrapper = styled.View`
-  padding-horizontal: 40px;
+  padding-horizontal: 20px;
 `
 
 export const ProfessionalPhoto = styled.ImageBackground`
@@ -141,4 +141,21 @@ export const ProfessionalPhoto = styled.ImageBackground`
   width: 80px;
   resize-mode: cover;
   margin-right: 10px;
-`;
+`;
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  min-width: 30px;
+  padding-right: 15px;
+`;
+
+export const TopHeader = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 60px;
+  min-height: 60px;
+`

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

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
 import {
   OrderList,
   useLanguage,
-  useUtils
+  useUtils,
+  useConfig
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -21,7 +22,8 @@ import {
   OrderInfoWrapper,
   OrderProgressWrapper
 } from './styles'
-import { getOrderStatus } from '../../utils'
+import { getOrderStatuPickUp, getOrderStatus } from '../../utils'
+import DeviceInfo from 'react-native-device-info'
 
 const OrderProgressUI = (props: any) => {
   const {
@@ -34,10 +36,12 @@ const OrderProgressUI = (props: any) => {
   const theme = useTheme();
 
   const [, t] = useLanguage()
-  const [{ optimizeImage, parseTime }] = useUtils()
+  const [{ optimizeImage, parseTime, parseDate }] = useUtils()
+  const [{ configs }] = useConfig()
   const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
   const [initialLoaded, setInitialLoaded] = useState(false)
+  const statusToShow = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
 
   const styles = StyleSheet.create({
     main: {
@@ -53,7 +57,9 @@ const OrderProgressUI = (props: any) => {
       shadowColor: '#000',
       shadowOpacity: 0.2,
       shadowRadius: 2,
-      elevation: 3
+      elevation: 3,
+      borderWidth: 1,
+      borderColor: 'rgba(0,0,0,0.1)'
     },
     logoWrapper: {
       overflow: 'hidden',
@@ -84,7 +90,15 @@ const OrderProgressUI = (props: any) => {
   useEffect(() => {
     if (orderList?.orders.length > 0) {
       const sortedOrders = orderList.orders.sort((a: any, b: any) => a.id > b.id ? -1 : 1)
-      setLastOrder(sortedOrders[0])
+      const orderInProgress = sortedOrders.find((order: any) => (statusToShow.includes(order.status)))
+
+      let _lastOrder = null
+      if (orderInProgress) {
+        _lastOrder = orderInProgress
+      } else {
+        _lastOrder = sortedOrders[0]
+      }
+      setLastOrder(_lastOrder)
     }
   }, [orderList?.orders])
 
@@ -99,6 +113,8 @@ const OrderProgressUI = (props: any) => {
     setInitialLoaded(true)
   }, [orderList.loading, initialLoaded])
 
+  const progressBarObjt = (s: any) => lastOrder?.delivery_type && lastOrder?.delivery_type === 2 ? getOrderStatuPickUp(s) : getOrderStatus(s)
+
   return (
     <>
       {(orderList?.loading && !initialLoaded) && (
@@ -117,7 +133,7 @@ const OrderProgressUI = (props: any) => {
               <View style={styles.logoWrapper}>
                 <FastImage
                   style={{ width: 50, height: 50 }}
-                  source={orderList?.orders.length === 1 ? {
+                  source={orderList?.orders.length === 1 && lastOrder?.business?.logo?.includes?.('http') ? {
                     uri: optimizeImage(lastOrder?.business?.logo, 'h_50,c_limit'),
                     priority: FastImage.priority.normal,
                   } : theme.images.logos.logotype}
@@ -135,8 +151,7 @@ const OrderProgressUI = (props: any) => {
                     fontWeight: 'bold',
                     marginBottom: 3
                   }}
-                >{t('ORDER_IN_PROGRESS', 'Order in progress')}</OText>
-                <OText size={11} numberOfLines={1} ellipsizeMode='tail'>{t('RESTAURANT_PREPARING_YOUR_ORDER', 'The restaurant is preparing your order')}</OText>
+                >{statusToShow.includes(lastOrder?.status) ? t('ORDER_IN_PROGRESS', 'Order in progress') : t('ORDER', 'Order')}</OText>
                 <TouchableOpacity onPress={() => handleGoToOrder('MyOrders')}>
                   <View style={styles.navigationButton}>
                     <OText size={11} color={theme.colors.primary}>{t('GO_TO_MY_ORDERS', 'Go to my orders')}</OText>
@@ -152,18 +167,22 @@ const OrderProgressUI = (props: any) => {
             </OrderInfoWrapper>
             <View style={{ flex: 1 }}>
               <ProgressContentWrapper>
-                <ProgressBar style={{ width: getOrderStatus(lastOrder.status)?.percentage ? `${(getOrderStatus(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
+                <ProgressBar style={{ width: progressBarObjt(lastOrder.status)?.percentage ? `${(progressBarObjt(lastOrder.status) as any).percentage * 100}%` : '0%' }} />
               </ProgressContentWrapper>
               <ProgressTextWrapper>
-                <OText size={12} style={{ width: '50%' }}>{getOrderStatus(lastOrder.status)?.value}</OText>
+                <OText size={12} style={{ width: '50%' }}>{progressBarObjt(lastOrder.status)?.value}</OText>
                 <TimeWrapper>
-                  <OText size={11}>{t('ESTIMATED_DELIVERY', 'Estimated delivery')}</OText>
+                  <OText size={11}>{lastOrder?.delivery_type === 1 ? t('ESTIMATED_DELIVERY', 'Estimated delivery') : t('ESTIMATED_TIME', 'Estimated time')}</OText>
                   <OText size={11}>
                     {lastOrder?.delivery_datetime_utc
-                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
+                      ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: configs?.general_hour_format?.value || 'HH:mm' })
                       : parseTime(lastOrder?.delivery_datetime, { utc: false })}
                     &nbsp;-&nbsp;
-                    <OrderEta order={lastOrder} outputFormat='hh:mm A' />
+                    {statusToShow.includes(lastOrder?.status) ? (
+                      <OrderEta order={lastOrder} outputFormat={configs?.general_hour_format?.value || 'HH:mm'} />
+                    ) : (
+                      parseDate(lastOrder?.reporting_data?.at[`status:${lastOrder.status}`], { outputFormat: configs?.general_hour_format?.value })
+                    )}
                   </OText>
                 </TimeWrapper>
               </ProgressTextWrapper>
@@ -192,7 +211,24 @@ export const OrderProgress = (props: any) => {
       initialPage: 1,
       pageSize: 10,
       controlType: 'infinity'
-    }
+    },
+    propsToFetch: [
+      'id',
+      'name',
+      'business',
+      'status',
+      'delivery_type',
+      'delivery_datetime_utc',
+      'delivery_datetime',
+      'reporting_data',
+      'eta_current_status_time',
+      'eta_previous_status_times',
+      'eta_time',
+      'delivered_in',
+      'prepared_in',
+      'eta_drive_time'
+    ],
+    noGiftCardOrders: true
   }
 
   return <OrderList {...orderProgressProps} />

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

@@ -32,5 +32,5 @@ export const OrderInfoWrapper = styled.View`
 export const OrderProgressWrapper = styled.View`
   margin-top: 37px;
   margin-bottom: 20px;
-	padding-horizontal: 40px;
+	padding-horizontal: 20px;
 `

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { ActivityIndicator, View } from 'react-native'
 import {
   Cart,
@@ -20,12 +20,11 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OInput, OModal, OText } from '../shared';
+import { OInput, OModal, OText, OAlert } from '../shared';
 import { verifyDecimals } from '../../utils';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
-import { OAlert } from '../../../../../src/components/shared'
 import { MomentOption } from '../MomentOption';
 
 const OrderSummaryUI = (props: any) => {
@@ -57,8 +56,8 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
+  const commentRef = useRef()
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null, type: '' })
-  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
   const hideCartComments = !validationFields?.fields?.checkout?.comments?.enabled
 
@@ -106,16 +105,16 @@ const OrderSummaryUI = (props: any) => {
     return cart?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
-  const onRemoveOffer = (id: number) => {
-    setConfirm({
-      open: true,
-      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
-      title: t('OFFER', 'Offer'),
-      handleOnAccept: () => {
-        setConfirm({ ...confirm, open: false })
-        handleRemoveOfferClick(id)
-      }
-    })
+  const OfferAlert = ({ offerId }: any) => {
+    return (
+      <OAlert
+        title={t('OFFER', 'Offer')}
+        message={t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')}
+        onAccept={() => handleRemoveOfferClick(offerId)}
+      >
+        <AntIcon style={{ marginLeft: 3 }} name='closecircle' size={16} color={theme.colors.primary} />
+      </OAlert>
+    )
   }
 
   return (
@@ -171,9 +170,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -211,8 +210,8 @@ const OrderSummaryUI = (props: any) => {
                 ))
               }
               {
-                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                  <OSTable key={fee?.id}>
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={fee?.id + i}>
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -237,9 +236,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -247,7 +246,7 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 ))
               }
-              {orderState?.options?.type === 1 && cart?.delivery_price_with_discount > 0 && !hideDeliveryFee && (
+              {orderState?.options?.type === 1 && !hideDeliveryFee && (
                 <OSTable>
                   <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                   <OText size={12}>{parsePrice(cart?.delivery_price_with_discount)}</OText>
@@ -264,9 +263,9 @@ const OrderSummaryUI = (props: any) => {
                       <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
                         <AntIcon name='infocirlceo' size={16} color={theme.colors.primary} />
                       </TouchableOpacity>
-                      <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
-                        <AntIcon name='closecircle' size={16} color={theme.colors.primary} />
-                      </TouchableOpacity>
+                      {!!offer?.id && (
+                        <OfferAlert offerId={offer?.id} />
+                      )}
                     </OSRow>
                     <OText size={12}>
                       - {parsePrice(offer?.summary?.discount)}
@@ -343,6 +342,7 @@ const OrderSummaryUI = (props: any) => {
                           marginTop: 10,
                           borderRadius: 8
                         }}
+                        forwardRef={commentRef}
                         multiline
                       />
                       {commentState?.loading && (
@@ -388,14 +388,6 @@ const OrderSummaryUI = (props: any) => {
               products={cart?.products}
             />
           </OModal>
-          <OAlert
-            open={confirm.open}
-            title={confirm.title}
-            content={confirm.content}
-            onAccept={confirm.handleOnAccept}
-            onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
-            onClose={() => setConfirm({ ...confirm, open: false, title: null })}
-          />
         </>
       )}
     </OSContainer>

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

@@ -103,6 +103,11 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 						title={t('HOW_WILL_YOU_DELIVERY_TYPE', 'How will your order type?')}
 						titleAlign={'center'}
 						noMargin
+            buttonProps={{
+              bgColor: theme.colors.white,
+              borderColor: theme.colors.white,
+              textStyle: { color: theme.colors.btnFont }
+            }}
 					/>
 					{
 						items.length > 0 && (

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

@@ -2,5 +2,5 @@ import styled, { css } from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '40px'};
+	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '20px'};
 `;

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

@@ -2,5 +2,5 @@ import styled from 'styled-components/native'
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '40px'};
+	padding-horizontal: ${(props : any) => props.isBusinessesSearchList ? '0' : '20px'};
 `;

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

@@ -51,7 +51,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businesses,
 		businessPaginationProps,
 		handleUpdateProducts,
-		handleUpdateBusinesses
+		handleUpdateBusinesses,
+		businessId
 	} = props
 
 	const theme = useTheme();
@@ -158,7 +159,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useEffect(() => {
 		if (reorderState?.error) {
-			showToast(ToastType.Error, reorderState?.result)
+			const errorMessage = (Array.isArray(reorderState?.result) || typeof reorderState?.result === 'string')
+				? reorderState?.result
+				: t('CANT_REORDER_FOR_THIS_BUSINESS', 'Can’t reorder for this store, please create order manually.')
+			showToast(ToastType.Error, errorMessage)
 		}
 	}, [reorderState])
 
@@ -200,18 +204,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>
 					<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 && onNavigationRedirect('BusinessList')}
+						onClickButton={() => onNavigationRedirect && (businessId ? onNavigationRedirect('Business') : onNavigationRedirect('BusinessList'))}
 					/>
 				</NoOrdersWrapper>
 			)}
-			{((ordersLength?.activeOrdersLength > 0 && activeOrders) || (ordersLength?.previousOrdersLength > 0 && !activeOrders)) && (
+			{((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}>
@@ -305,7 +312,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 					/>
 				)
 			)}
-			{loading && !hideOrders && (
+			{loading && !hideOrders && !preOrders && (
 				<>
 					{!activeOrders ? (
 						<Placeholder style={{ marginTop: 30 }} Animation={Fade}>
@@ -346,6 +353,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
 	const MyOrdersProps = {
 		...props,
 		UIComponent: OrdersOptionUI,
+		noGiftCardOrders: true,
 		orderStatus: getAllOrders
 			? [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
 			: props.preOrders ? [13] : props.activeOrders

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

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components/native'
 export const OptionTitle = styled.View`
 	margin-top: 24px;
 	${(props : any) => props.titleContent && css`
-		margin-left: ${() => props.isBusinessesSearchList ? '0' : '40px'};
+		margin-left: ${() => props.isBusinessesSearchList ? '0' : '20px'};
 	`}
 `
 

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

@@ -77,6 +77,7 @@ const PageBannerUI = (props: any) => {
   const renderItem = ({ item, index }) => {
     return (
       <TouchableOpacity
+        activeOpacity={1}
         onPress={() => handleGoToPage(item)}
       >
         <View style={styles.sliderWrapper}>
@@ -128,6 +129,7 @@ const PageBannerUI = (props: any) => {
               {pageBannerState.banner?.items.length > 1 && (
                 <>
                   <TouchableOpacity
+                    activeOpacity={1}
                     style={[styles.swiperButton, { left: 25 }]}
                     onPress={() => carouselRef.current.snapToPrev()}
                   >
@@ -138,6 +140,7 @@ const PageBannerUI = (props: any) => {
                     />
                   </TouchableOpacity>
                   <TouchableOpacity
+                    activeOpacity={1}
                     style={[styles.swiperButton, { right: 25 }]}
                     onPress={() => carouselRef.current.snapToNext()}
                   >

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

@@ -0,0 +1,182 @@
+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}
+                    onOpen={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+                    onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+                />
+            </>
+            <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} />
+    )
+}