ordering-ui-react-native 0.18.73 → 0.18.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.73",
+  "version": "0.18.75",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/PaymentOptionsWebView/index.tsx

@@ -9,7 +9,8 @@ import {
   useToast,
   useApi,
   useLanguage,
-  useConfig
+  useConfig,
+  useOrder
 } from 'ordering-components/native';
 
 import { OText } from '../shared';
@@ -24,7 +25,9 @@ interface PaymentOptionsWebViewParams {
   webviewPaymethod?: any,
   setShowGateway?: any,
   setOpenOrderCreating?: any,
-  locationId?: any
+  locationId?: any,
+  additionalParams?: any
+  title?: string
 }
 export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
   const {
@@ -37,7 +40,9 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
     webviewPaymethod,
     setShowGateway,
     setOpenOrderCreating,
-    locationId
+    locationId,
+    title,
+    additionalParams = {}
   } = props
 
   const webviewRef = useRef<any>(null)
@@ -45,7 +50,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
   const [ordering] = useApi()
   const [{ configs }] = useConfig();
   const [, t] = useLanguage();
-
+  const [, { confirmCart }] = useOrder()
 
   const [progClr, setProgClr] = useState('#424242');
   const [prog, setProg] = useState(true);
@@ -55,9 +60,23 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
     setShowGateway({ open: false, closedByUser: true })
   }
 
-  const onMessage = (e: any) => {
+  const onMessage = async (e: any) => {
     if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
       let payment = JSON.parse(e.nativeEvent.data);
+      if (payment?.response && payment?.responsetext && payment.orderid) {
+        const credomaticData = {
+          credomatic: {
+            ...payment
+          }
+        }
+        const confirmCartRes = await confirmCart(payment.orderid, credomaticData)
+        if (confirmCartRes.error) {
+          showToast(ToastType.Error, confirmCartRes.error.message)
+        }
+        if (confirmCartRes.result.order?.uuid) {
+          onNavigationRedirect?.('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
+        }
+      }
 
       if (payment === 'api error' || payment === 'Cancelled by user') {
         setShowGateway({ closedByUser: true, open: false })
@@ -95,7 +114,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
           marginBottom: 5,
           marginTop: 10
         }}>
-        {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
+        {title || (webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment')))}
       </OText>
       <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
         <ActivityIndicator size={24} color={progClr} />
@@ -110,6 +129,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
         cacheMode='LOAD_NO_CACHE'
         style={{ flex: 1 }}
         onShouldStartLoadWithRequest={() => true}
+        originWhitelist={["*"]}
         onLoadStart={() => {
           setProg(true);
           setProgClr('#424242');
@@ -139,7 +159,8 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
               currency: configs?.stripe_currency?.value || currency,
               userToken: token,
               clientId: webviewPaymethod?.credentials?.client_id,
-              ...messageParams
+              ...messageParams,
+              ...additionalParams
             }
           }
           setProg(false);
@@ -148,4 +169,4 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
       />
     </View>
   )
-}
+}

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -523,7 +523,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           ))
         }
         {
-          order?.summary?.delivery_price > 0 && (
+          typeof order?.summary?.delivery_price === 'number' && (
             <Table>
               <OText mBottom={4}>
                 {t('DELIVERY_FEE', 'Delivery Fee')}

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

@@ -380,12 +380,14 @@ const LoginFormUI = (props: LoginParams) => {
   );
 
   const note = (
-    <OText size={24} mBottom={18}>
-      {t('IF_NOT_HAVE_ACCOUNT', 'If you don\'t have and account, please contact Ordering')}&nbsp;
-      <OText size={24} mBottom={18} color={theme.colors.skyBlue}>
-        {t('SUPPORT_DEPARTMENT', 'support department')}
+    useRootPoint && (
+      <OText size={24} mBottom={18}>
+        {t('IF_NOT_HAVE_ACCOUNT', 'If you don\'t have and account, please contact Ordering')}&nbsp;
+        <OText size={24} mBottom={18} color={theme.colors.skyBlue}>
+          {t('SUPPORT_DEPARTMENT', 'support department')}
+        </OText>
       </OText>
-    </OText>
+    )
   )
 
   return (

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

@@ -156,6 +156,8 @@ const CheckoutUI = (props: any) => {
 	const [allowedGuest, setAllowedGuest] = useState(false)
 	const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
 	const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
+	const [cardList, setCardList] = useState<any>({ cards: [], loading: false, error: null })
+	const cardsMethods = ['credomatic']
 	const placeSpotTypes = [3, 4, 5]
 	const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
 	const isGiftCardCart = !cart?.business_id
@@ -185,6 +187,7 @@ const CheckoutUI = (props: any) => {
 
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) ||
 		placing || errorCash || subtotalWithTaxes < cart?.minimum ||
+		(cardsMethods.includes(paymethodSelected?.gateway) && cardList?.cards?.length === 0) ||
 		(options.type === 1 &&
 			validationFields?.fields?.checkout?.driver_tip?.enabled &&
 			validationFields?.fields?.checkout?.driver_tip?.required &&
@@ -200,6 +203,9 @@ const CheckoutUI = (props: any) => {
 
 	const cartsWithProducts = carts && Object.values(carts).filter((cart: any) => cart.products.length) || null
 
+	const isSandboxCredomatic = configs?.credomatic_integration_sandbox?.value === '1'
+	const credomaticKeyId = isSandboxCredomatic ? configs?.credomatic_integration_public_sandbox_key?.value : configs?.credomatic_integration_public_production_key?.value
+	const credomaticUrl = `https://integrations.ordering.co/credomatic/front/auth_mobile.html?title=${t('CREDOMATIC_PAYMENT', 'Credomatic payment')}&body=${t('CREDOMATIC_PROCESSING', 'Processing transaction')}`
 	const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
 		return {
 			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name)
@@ -235,7 +241,7 @@ const CheckoutUI = (props: any) => {
 	const handlePlaceOrder = (confirmPayment: any, forcePlace: boolean = false) => {
 		if (!userErrors.length && (!requiredFields?.length || allowedGuest) || forcePlace) {
 			vibrateApp()
-			handlerClickPlaceOrder && handlerClickPlaceOrder(null, null, confirmPayment)
+			handlerClickPlaceOrder && handlerClickPlaceOrder(null, { isNative: true }, confirmPayment)
 			return
 		}
 		if (requiredFields?.length) {
@@ -351,6 +357,16 @@ const CheckoutUI = (props: any) => {
 		cart && events.emit('checkout_started', cart)
 	}, [])
 
+	useEffect(() => {
+		if (cart?.paymethod_data?.gateway === 'credomatic') {
+			if (cart?.paymethod_data?.status === 2) {
+				setShowGateway({ ...showGateway, open: true })
+			} else if (cart?.paymethod_data?.gateway === 'credomatic' && cart?.paymethod_data?.status === 4) {
+				setShowGateway({ ...showGateway, open: false })
+			}
+		}
+	}, [cart?.paymethod_data])
+
 	return (
 		<>
 			<Container noPadding>
@@ -678,6 +694,8 @@ const CheckoutUI = (props: any) => {
 									methodPaySupported={methodPaySupported}
 									placeByMethodPay={placeByMethodPay}
 									setPlaceByMethodPay={setPlaceByMethodPay}
+									cardList={cardList}
+									setCardList={setCardList}
 								/>
 							</ChPaymethods>
 						</ChSection>
@@ -947,6 +965,29 @@ const CheckoutUI = (props: any) => {
 					locationId={'L1NGAY5M6KJRX'}
 				/>
 			)}
+			{cart?.paymethod_data?.gateway === 'credomatic' && cart?.paymethod_data?.status === 2 && showGateway.open && (
+				<PaymentOptionsWebView
+					title={t('CREDOMATIC_PAYMENT', 'Credomatic payment')}
+					onNavigationRedirect={onNavigationRedirect}
+					uri={credomaticUrl}
+					user={user}
+					cart={cart}
+					additionalParams={{
+						type: 'auth',
+						key_id: credomaticKeyId,
+						hash: cart?.paymethod_data?.result?.hash,
+						time: cart?.paymethod_data?.result?.time,
+						amount: cart?.total,
+						orderid: cart?.uuid,
+						ccnumber: cardList?.cards?.[0]?.number,
+						ccexp: cardList?.cards?.[0]?.expiryString,
+						cvv: cardList?.cards?.[0]?.cvc,
+						redirect: credomaticUrl
+					}}
+					webviewPaymethod={webviewPaymethod}
+					setShowGateway={setShowGateway}
+				/>
+			)}
 		</>
 	)
 }
@@ -973,7 +1014,8 @@ export const Checkout = (props: any) => {
 	const getOrder = async (cartId: any) => {
 		try {
 			let result: any = {}
-			const cart = orderState?.carts.find((cart: any) => cart.uuid === cartId)
+			const cartsWithProducts = orderState?.carts && (Object.values(orderState?.carts)?.filter(cart => cart?.products && cart?.products?.length) || null)
+			const cart = cartsWithProducts?.find((cart: any) => cart.uuid === cartId)
 			if (cart) {
 				result = { ...cart }
 			} else {

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

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Platform } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
-import { OText, OButton } from '../../shared';
+import { OText, OButton, OIcon } from '../../shared';
 import OtpInputs from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
@@ -16,7 +16,9 @@ export const Otp = (props: otpParams) => {
     onSubmit,
     handleLoginOtp,
     setAlertState,
-    pinCount
+    pinCount,
+    otpError,
+    setOtpError
   } = props
 
   const theme = useTheme();
@@ -26,6 +28,7 @@ export const Otp = (props: otpParams) => {
 
   const [code, setCode] = useState('')
   const inputRef = useRef<any>()
+
   const handleOnSubmit = () => {
     setAlertState({
       open: true,
@@ -35,6 +38,16 @@ export const Otp = (props: otpParams) => {
     onSubmit()
   }
 
+  const handleChangeCode = (code : string) => {
+    setCode(code)
+    setOtpError(null)
+  }
+
+  const handleCloseOtp = () => {
+    setWillVerifyOtpState(false)
+    setOtpError(null)
+  }
+
   useEffect(() => {
     if (otpLeftTime === 0) {
       setAlertState({
@@ -73,11 +86,36 @@ export const Otp = (props: otpParams) => {
       color: theme.colors.primary,
       fontSize: 16
     },
+    wrapperIcon: {
+      marginTop: Platform.OS === 'ios' ? 40 : 12,
+      marginBottom: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingRight: 35
+    },
+    closeContainer: {
+      width: '100%',
+      flexDirection: 'row',
+    }
   });
 
   return (
     <>
       <OTPContainer>
+        <View
+          style={loginStyle.closeContainer}>
+          <TouchableOpacity onPress={() => handleCloseOtp()} style={loginStyle.wrapperIcon}>
+            <OIcon
+              src={theme.images.general.close}
+              width={22}
+            />
+          </TouchableOpacity>
+          <OText size={22} style={{
+            marginTop: 5
+          }}>
+            {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+          </OText>
+        </View>
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>
@@ -87,15 +125,24 @@ export const Otp = (props: otpParams) => {
           numberOfInputs={pinCount || 6}
           style={loginStyle.container}
           inputStyles={loginStyle.underlineStyleBase}
-          handleChange={setCode}
+          handleChange={handleChangeCode}
         />
+        {!!otpError && (
+          <OText
+            color={theme?.colors?.error}
+            size={20}
+            mBottom={10}
+          >
+            {t(otpError, otpError)}
+          </OText>
+        )}
         <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
           <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
             {t('RESEND_CODE', 'Resend code')}
           </OText>
         </TouchableOpacity>
         <OButton
-          onClick={() => setWillVerifyOtpState(false)}
+          onClick={() => handleCloseOtp()}
           bgColor={theme.colors.white}
           borderColor={theme.colors.primary}
           textStyle={{ color: theme.colors.primary }}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet, View, Keyboard } from 'react-native';
+import { StyleSheet, View, Keyboard, Modal } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
@@ -97,6 +97,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [otpError, setOtpError] = useState(null)
 	const tabsRef = useRef<any>(null)
 	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 	const theme = useTheme();
@@ -270,11 +271,7 @@ const LoginFormUI = (props: LoginParams) => {
 		if (logged) {
 			setWillVerifyOtpState(false)
 		} else {
-			setAlertState({
-				open: true,
-				title: '',
-				content: t('OTP_CODE_INCORRECT', 'Otp code incorrect')
-			})
+			setOtpError(t('OTP_CODE_INCORRECT', 'Otp code incorrect'))
 		}
 	}
 
@@ -851,20 +848,21 @@ const LoginFormUI = (props: LoginParams) => {
 					onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
-			<OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState(false)}
-				entireModal
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<Modal
+				visible={willVerifyOtpState}
+				onDismiss={() => setWillVerifyOtpState(false)}
+				animationType='slide'
 			>
 				<Otp
 					willVerifyOtpState={willVerifyOtpState}
+					otpError={otpError}
+					setOtpError={setOtpError}
 					setWillVerifyOtpState={setWillVerifyOtpState}
 					handleLoginOtp={handleLoginOtp}
 					onSubmit={onSubmit}
 					setAlertState={setAlertState}
 				/>
-			</OModal>
+			</Modal>
 			<Alert
 				open={alertState.open}
 				content={alertState.content}

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

@@ -934,7 +934,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </Table>
                 ))
               }
-              {order?.summary?.delivery_price > 0 && (
+              {typeof order?.summary?.delivery_price === 'number' && (
                 <Table>
                   <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
                   <OText size={12} lineHeight={18} weight={'400'} color={theme.colors.textNormal}>{parsePrice(order?.summary?.delivery_price)}</OText>

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

@@ -245,7 +245,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>

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/PaymentOptions/index.tsx

@@ -16,6 +16,8 @@ import { useTheme } from 'styled-components/native';
 import { PaymentOptionCash } from '../PaymentOptionCash';
 import { StripeElementsForm } from '../StripeElementsForm';
 import { StripeCardsList } from '../StripeCardsList';
+import { PaymentOptionCard } from '../PaymentOptionCard'
+
 // import { PaymentOptionStripe } from '../PaymentOptionStripe';
 // import { StripeRedirectForm } from '../StripeRedirectForm';
 // import { PaymentOptionPaypal } from '../PaymentOptionPaypal'
@@ -44,6 +46,7 @@ const stripeDirectMethods = ['stripe_direct']
 
 const webViewPaymentGateway: any = ['paypal', 'square']
 const multiCheckoutMethods = ['global_google_pay', 'global_apple_pay']
+const cardsPaymethods = ['credomatic']
 
 const PaymentOptionsUI = (props: any) => {
 	const {
@@ -64,7 +67,9 @@ const PaymentOptionsUI = (props: any) => {
 		setMethodPaySupported,
 		placeByMethodPay,
 		methodPaySupported,
-		setPlaceByMethodPay
+		setPlaceByMethodPay,
+		setCardList,
+		onPaymentChange
 	} = props
 
 	const theme = useTheme();
@@ -96,7 +101,7 @@ const PaymentOptionsUI = (props: any) => {
 
 	const [, t] = useLanguage();
 
-	const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
+	const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false, card: false });
 	const paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
 	// const [{ token }] = useSession()
 
@@ -192,7 +197,7 @@ const PaymentOptionsUI = (props: any) => {
 	}
 
 	const excludeIds: any = [32]; //exclude paypal & connect & redirect
-	const filterMethodsPay = (gateway : string) => Platform.OS === 'ios' ? gateway !== 'google_pay' : gateway !== 'apple_pay' 
+	const filterMethodsPay = (gateway: string) => Platform.OS === 'ios' ? gateway !== 'google_pay' : gateway !== 'apple_pay'
 
 	return (
 		<PMContainer>
@@ -202,9 +207,9 @@ const PaymentOptionsUI = (props: any) => {
 					showsHorizontalScrollIndicator={false}
 					// data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id)}
 					data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id)
-						.filter((p: any) => 
-							!multiCheckoutMethods.includes(p.gateway) && 
-							filterMethodsPay(p.gateway) && 
+						.filter((p: any) =>
+							!multiCheckoutMethods.includes(p.gateway) &&
+							filterMethodsPay(p.gateway) &&
 							!excludeIds.includes(p.id))}
 					renderItem={renderPaymethods}
 					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
@@ -324,6 +329,24 @@ const PaymentOptionsUI = (props: any) => {
 				/>
 			)}
 
+			{(cardsPaymethods.includes(isOpenMethod?.paymethod?.gateway) || cardsPaymethods.includes(paymethodSelected?.gateway)) && (
+				<PaymentOptionCard
+					setCardList={setCardList}
+					paymethod={isOpenMethod?.paymethod}
+					businessId={props.businessId}
+					publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
+					gateway={isOpenMethod?.paymethod?.gateway || paymethodSelected?.gateway}
+					onPaymentChange={onPaymentChange}
+					payType={isOpenMethod?.paymethod?.name}
+					onSelectCard={handlePaymethodDataChange}
+					addCardOpen={addCardOpen} 
+					setAddCardOpen={setAddCardOpen}
+					onCancel={() => handlePaymethodClick(null)}
+					paymethodSelected={paymethodSelected?.data?.id}
+					handlePaymentMethodClick={handlePaymentMethodClick}
+				/>
+			)}
+
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}

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

@@ -169,7 +169,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 190 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<InView style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					onClick={() => handleClickproduct()}
@@ -182,7 +182,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					<View style={{ flexDirection: logoPosition === 'left' ? 'row-reverse' : 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer businessSingleId={businessSingleId} style={[styles.quantityContainer, {
-								transform: [{ translateX: 25 }, { translateY: -25 }],
+								transform: [{ translateX: logoPosition === 'right' ? 25 : -25 }, { translateY: -25 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>

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

@@ -18,7 +18,6 @@ export const QuantityContainer = styled.View`
   background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
-  left: 0;
 `
 export const PricesContainer = styled.View`
   flex-direction: row;

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

@@ -18,14 +18,15 @@ import {
 	OSItemActions,
 } from '../PaymentOptionStripe/styles';
 
-const StripeCardsListUI = (props: any) => {
+export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
 		cardSelected,
 		cardsList,
 		handleCardClick,
-		setAddCardOpen
+		setAddCardOpen,
+		gateway
 	} = props;
 
 	const theme = useTheme();
@@ -33,13 +34,15 @@ const StripeCardsListUI = (props: any) => {
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
 
+	const paymethodsWithoutSaveCards = ['credomatic']
+
 	const handleCardSelected = (card: any) => {
 		handleCardClick(card);
 		onSelectCard(card);
 	}
 
 	useEffect(() => {
-		if (!cardsList && !cardsList?.loading && cardsList?.cards?.length === 0) {
+		if (!cardsList && !cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
 			setAddCardOpen(true)
 		}
 	}, [cardsList?.loading])

package/themes/original/src/types/index.tsx

@@ -726,6 +726,8 @@ export interface otpParams {
 	handleLoginOtp: (code: string) => void,
 	setAlertState: any;
 	pinCount: number;
+	otpError: any,
+	setOtpError: any
 }
 
 export interface FavoriteParams {