ordering-ui-react-native 0.17.35-release → 0.17.36-release

package/package.json

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

package/src/components/PaymentOptionsWebView/index.tsx

@@ -5,146 +5,168 @@ import WebView from 'react-native-webview';
 import { ActivityIndicator } from 'react-native-paper';
 
 import {
-    ToastType,
-    useToast,
-    useApi,
-    useLanguage,
-    useConfig
+  ToastType,
+  useToast,
+  useApi,
+  useLanguage,
+  useConfig,
+  useOrder
 } from 'ordering-components/native';
 
 import { OText } from '../shared';
 
 interface PaymentOptionsWebViewParams {
-    onNavigationRedirect?: Function,
-    uri?: any,
-    user?: any,
-    token?: any,
-    cart?: any,
-    currency?: any,
-    webviewPaymethod?: any,
-    setShowGateway?: any,
-    setOpenOrderCreating?: any,
-    locationId?: any
+  onNavigationRedirect?: Function,
+  uri?: any,
+  user?: any,
+  token?: any,
+  cart?: any,
+  currency?: any,
+  webviewPaymethod?: any,
+  setShowGateway?: any,
+  setOpenOrderCreating?: any,
+  locationId?: any,
+  additionalParams?: any
+  title?: string
 }
 export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
-    const { 
-        onNavigationRedirect,
-        uri,
-        user,
-        token,
-        cart,
-        currency,
-        webviewPaymethod,
-        setShowGateway,
-        setOpenOrderCreating,
-        locationId
-    } = props
+  const {
+    onNavigationRedirect,
+    uri,
+    user,
+    token,
+    cart,
+    currency,
+    webviewPaymethod,
+    setShowGateway,
+    setOpenOrderCreating,
+    locationId,
+    title,
+    additionalParams = {}
+  } = props
 
-   const webviewRef = useRef<any>(null)
-   const [, { showToast }] = useToast();
-   const [ordering] = useApi()
-   const [{ configs }] = useConfig();
-   const [, t] = useLanguage();
+  const webviewRef = useRef<any>(null)
+  const [, { showToast }] = useToast();
+  const [ordering] = useApi()
+  const [{ configs }] = useConfig();
+  const [, t] = useLanguage();
+  const [, { confirmCart }] = useOrder()
 
-   
-   const [progClr, setProgClr] = useState('#424242');
-   const [prog, setProg] = useState(true);
+  const [progClr, setProgClr] = useState('#424242');
+  const [prog, setProg] = useState(true);
 
-   const handleCloseWebview = () => {
+  const handleCloseWebview = () => {
     setProg(true);
     setShowGateway({ open: false, closedByUser: true })
   }
 
-   const onMessage = (e: any) => {
-        if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
-            let payment = JSON.parse(e.nativeEvent.data);
+  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 })
         setProg(true);
       }
 
-            if (payment) {
-                if (payment.error) {
-                showToast(ToastType.Error, payment.result)
-                setOpenOrderCreating && setOpenOrderCreating(false)
-                } else if (payment?.result?.order?.uuid) {
-                showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
-                onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true})
-                }
-                setProg(true);
-                setShowGateway({ closedByUser: false, open: false })
-            }
+      if (payment) {
+        if (payment.error) {
+          showToast(ToastType.Error, payment.result)
+          setOpenOrderCreating && setOpenOrderCreating(false)
+        } else if (payment?.result?.order?.uuid) {
+          showToast(ToastType.Success, t('ORDER_PLACED_SUCCESSfULLY', 'The order was placed successfully'))
+          onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: payment?.result?.order?.uuid, isFromCheckout: true })
         }
-   }
+        setProg(true);
+        setShowGateway({ closedByUser: false, open: false })
+      }
+    }
+  }
 
-   return (
+  return (
     <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
-          <Icon
-            name="x"
-            size={35}
-            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
-            onPress={handleCloseWebview}
-          />
-          <OText
-            style={{
-              textAlign: 'center',
-              fontSize: 16,
-              fontWeight: 'bold',
-              color: '#00457C',
-              marginBottom: 5,
-              marginTop: 10
-            }}>
-           {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} />
-          </View>
-          <WebView
-            source={{ uri: uri }}
-            onMessage={onMessage}
-            ref={webviewRef}
-            javaScriptEnabled={true}
-            javaScriptEnabledAndroid={true}
-            cacheEnabled={false}
-            cacheMode='LOAD_NO_CACHE'
-            style={{ flex: 1 }}
-            onShouldStartLoadWithRequest={() => true}
-            onLoadStart={() => {
-              setProg(true);
-              setProgClr('#424242');
-            }}
-            onLoadProgress={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoad={() => {
-              setProg(true);
-              setProgClr('#00457C');
-            }}
-            onLoadEnd={(e) => {
-            const messageParams = locationId ? { locationId } : {}
-              const message = {
-                action: 'init',
-                data: {
-                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
-                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
-                  payData: {
-                    paymethod_id: webviewPaymethod?.id,
-                    amount: cart?.balance ?? cart?.total,
-                    delivery_zone_id: cart?.delivery_zone_id,
-                    user_id: user?.id,
-                    user_name: user?.name
-                  },
-                  currency: configs?.stripe_currency?.value || currency,
-                  userToken: token,
-                  clientId: webviewPaymethod?.credentials?.client_id,
-                  ...messageParams
-                }
-              }
-              setProg(false);
-              webviewRef?.current?.postMessage?.(JSON.stringify(message))
-            }}
-          />
+      <Icon
+        name="x"
+        size={35}
+        style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+        onPress={handleCloseWebview}
+      />
+      <OText
+        style={{
+          textAlign: 'center',
+          fontSize: 16,
+          fontWeight: 'bold',
+          color: '#00457C',
+          marginBottom: 5,
+          marginTop: 10
+        }}>
+        {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} />
+      </View>
+      <WebView
+        source={{ uri: uri }}
+        onMessage={onMessage}
+        ref={webviewRef}
+        javaScriptEnabled={true}
+        javaScriptEnabledAndroid={true}
+        cacheEnabled={false}
+        cacheMode='LOAD_NO_CACHE'
+        style={{ flex: 1 }}
+        onShouldStartLoadWithRequest={() => true}
+        originWhitelist={["*"]}
+        onLoadStart={() => {
+          setProg(true);
+          setProgClr('#424242');
+        }}
+        onLoadProgress={() => {
+          setProg(true);
+          setProgClr('#00457C');
+        }}
+        onLoad={() => {
+          setProg(true);
+          setProgClr('#00457C');
+        }}
+        onLoadEnd={(e) => {
+          const messageParams = locationId ? { locationId, clientId: webviewPaymethod?.credentials?.application_id } : {}
+          const message = {
+            action: 'init',
+            data: {
+              urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+              urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+              payData: {
+                paymethod_id: webviewPaymethod?.id,
+                amount: cart?.balance ?? cart?.total,
+                delivery_zone_id: cart?.delivery_zone_id,
+                user_id: user?.id,
+                user_name: user?.name
+              },
+              currency: configs?.stripe_currency?.value || currency,
+              userToken: token,
+              clientId: webviewPaymethod?.credentials?.client_id,
+              ...messageParams,
+              ...additionalParams
+            }
+          }
+          setProg(false);
+          webviewRef?.current?.postMessage?.(JSON.stringify(message))
+        }}
+      />
     </View>
-)}
+  )
+}

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -592,7 +592,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						setBusinessTypes={setBusinessTypes}
 					/>
 				)}
-				{!businessesList.loading && businessesList.businesses.length === 0 && (
+				{!businessesList.loading && businessesList.businesses.length === 0 && businessesList?.fetched && (
 					<NotFoundSource
 						content={t(
 							'NOT_FOUND_BUSINESSES',
@@ -625,7 +625,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						/>
 					)
 				)}
-				{businessesList.loading && (
+				{(businessesList.loading || !businessesList?.fetched) && (
 					<>
 						{[
 							...Array(

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

@@ -5,13 +5,9 @@ export const CCContainer = styled.View`
 `
 
 export const CCNotCarts = styled.View`
-  height: 300px;
-  display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 80%;
-  margin: auto;
+	align-items: center;
+	margin-top: 40px;
 `
 
 export const CCList = styled.ScrollView`

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

@@ -5,74 +5,99 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { useTheme } from 'styled-components';
 
 interface Props {
-    initialValue: number,
-    onClick: any,
-    disableAnimation?: boolean
-    toValue: number,
-    style?: ViewStyle,
-    duration?: number,
-    type: 'favorite', // animation types
-    isActive: boolean,
-    animationType?: ((value: number) => number);
-    useNativeDriver?: boolean,
-    iconProps?: { color?: string, size?: number, style?: ViewStyle }
+  initialValue: number,
+  onClick: any,
+  disableAnimation?: boolean
+  toValue: number,
+  style?: ViewStyle,
+  duration?: number,
+  type: 'favorite', // animation types
+  isActive: boolean,
+  animationType?: ((value: number) => number);
+  useNativeDriver?: boolean,
+  iconProps?: { color?: string, size?: number, style?: ViewStyle }
 }
 
 export const LottieAnimation = (props: Props) => {
-    const {
-        initialValue,
-        onClick,
-        disableAnimation,
-        toValue,
-        style,
-        duration,
-        type,
-        isActive,
-        useNativeDriver,
-        animationType,
-        iconProps
-    } = props
-    const theme = useTheme()
-    const animationProgress = useRef(new Animated.Value(initialValue))
-    const [isHide, setIsHide] = useState(true)
-    const favoriteArray = ['heart', 'hearto']
-    const icon = type === 'favorite' ? favoriteArray : []
-    const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
-    const onPressLottie = () => {
-        if (!disableAnimation) {
-            setIsHide(false)
-            Animated.timing(animationProgress.current, {
-                toValue,
-                duration: duration || 5000,
-                easing: animationType || Easing.linear,
-                useNativeDriver: useNativeDriver ?? true
-            }).start();
-            hideLottie()
-        }
-        onClick()
-    }
+  const {
+    initialValue,
+    onClick,
+    disableAnimation,
+    toValue,
+    style,
+    duration,
+    type,
+    isActive,
+    useNativeDriver,
+    animationType,
+    iconProps
+  } = props
+
+  const theme = useTheme()
+  const animationProgress = useRef(new Animated.Value(initialValue))
+  const favRef = useRef<Lottie>(null)
+  const [isHide, setIsHide] = useState(true)
 
-    const hideLottie = () => {
-        setTimeout(() => setIsHide(true), 4500)
+  const favoriteArray = ['heart', 'hearto']
+  const icon = type === 'favorite' ? favoriteArray : []
+  const animationGif = type === 'favorite' ? theme.images?.general?.heart : ''
+
+  const onPressLottie = () => {
+    if (!disableAnimation) {
+      if (type === 'favorite') {
+        favRef.current?.play()
+      } else {
+        setIsHide(false)
+        Animated.timing(animationProgress.current, {
+          toValue,
+          duration: duration || 5000,
+          easing: animationType || Easing.linear,
+          useNativeDriver: useNativeDriver ?? true
+        }).start();
+        hideLottie()
+      }
     }
+    onClick()
+  }
+
+  const hideLottie = () => {
+    setTimeout(() => setIsHide(true), 4500)
+  }
 
-    return (
-        <TouchableOpacity
-            onPress={onPressLottie}
-            style={style}
-        >
-            {!isHide &&
-                <Lottie
-                    progress={animationProgress.current}
-                    source={animationGif}
-                />
-            }
-            <IconAntDesign
-                name={isActive ? icon[0] : icon[1]}
-                color={iconProps?.color || theme.colors.danger5}
-                size={iconProps?.size || 16}
-                style={iconProps?.style}
+  return (
+    <TouchableOpacity
+      onPress={onPressLottie}
+      style={style}
+    >
+      {type === 'favorite' ? (
+        // <Lottie
+        //   ref={favRef}
+        //   progress={initialValue}
+        //   style={{ width: 20, height: 20 }}
+        //   source={animationGif}
+        // />
+        <IconAntDesign
+          name={isActive ? icon[0] : icon[1]}
+          color={iconProps?.color || theme.colors.danger5}
+          size={iconProps?.size || 16}
+          style={iconProps?.style}
+        />
+      ) : (
+        <>
+          {!isHide &&
+            <Lottie
+              progress={animationProgress.current}
+              source={animationGif}
             />
-        </TouchableOpacity>
-    )
+          }
+          <IconAntDesign
+            name={isActive ? icon[0] : icon[1]}
+            color={iconProps?.color || theme.colors.danger5}
+            size={iconProps?.size || 16}
+            style={iconProps?.style}
+          />
+        </>
+      )}
+    </TouchableOpacity>
+  )
 }

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

@@ -1,8 +1,9 @@
 import React from 'react'
 import { View } from 'react-native'
-import { OButton, OIcon, OText } from '../shared'
+import { OButton, OText } from '../shared'
 import { NotFoundSourceParams } from '../../types'
 import { useTheme } from 'styled-components/native';
+import Foundation from 'react-native-vector-icons/Foundation'
 import {
 	NotFound,
 	NotFoundImage
@@ -10,34 +11,37 @@ import {
 
 export const NotFoundSource = (props: NotFoundSourceParams) => {
 	const {
-		image,
+		hideImage,
 		content,
 		btnTitle,
+		btnStyle,
 		conditioned,
 		onClickButton
 	} = props
 
 	const theme = useTheme();
 
-	const errorImage = image || theme.images.general.notFound
-	const isUrl = typeof errorImage === 'string' && errorImage.includes('http')
-
 	return (
 		<NotFound>
-			{errorImage && (
+			{!hideImage && (
 				<NotFoundImage>
-					<OIcon url={isUrl && errorImage} src={!isUrl && errorImage} width={260} height={220} />
+					<Foundation
+						name='page-search'
+						color={theme.colors.primary}
+						size={60}
+						style={{ marginBottom: 10 }}
+					/>
 				</NotFoundImage>
 			)}
-			{content && conditioned && !errorImage && <OText color={theme.colors.disabled} size={18} style={{ textAlign: 'center' }}>{content}</OText>}
-			{content && !conditioned && <OText color={theme.colors.disabled} size={18} style={{ textAlign: 'center' }}>{content}</OText>}
+			{content && conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
+			{content && !conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
 			{!onClickButton && props.children && (
 				props.children
 			)}
 			{onClickButton && (
 				<View style={{ marginTop: 10, width: '100%' }}>
 					<OButton
-						style={{ width: '100%', height: 50 }}
+						style={{ width: '100%', height: 50, ...btnStyle }}
 						bgColor={theme.colors.primary}
 						borderColor={theme.colors.primary}
 						onClick={() => onClickButton()}

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

@@ -23,21 +23,21 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
     },
   });
 
-  const ProductList = ({ style }: any) => {
+  const ProductList = () => {
     return (
       <>
-        {products?.map((product: any) => (
-            <SingleProductCard
-              key={product?.id}
-              isProductId
-              isSoldOut={(product.inventoried && !product.quantity)}
-              product={product}
-              businessId={product?.business?.id}
-              onProductClick={onProductClick}
-              style={style}
-              productAddedToCartLength={0}
-              handleUpdateProducts={handleUpdateProducts}
-            />
+        {products?.filter((product : any) => product?.business?.available)?.map((product: any) => (
+          <SingleProductCard
+            key={product?.id}
+            isProductId
+            isSoldOut={(product.inventoried && !product.quantity)}
+            product={product}
+            businessId={product?.business?.id}
+            onProductClick={onProductClick}
+            style={{ width: windowWidth - (products?.length > 1 ? 120 : 80), marginRight: 20 }}
+            productAddedToCartLength={0}
+            handleUpdateProducts={handleUpdateProducts}
+          />
         ))}
       </>
     )
@@ -45,7 +45,7 @@ export const PreviousProductsOrdered = (props: PreviousProductsOrderedParams) =>
   return (
     <ScrollView horizontal={isBusinessesSearchList} style={styles.container} showsVerticalScrollIndicator={false}>
       {isBusinessesSearchList ? (
-        <ProductList style={{ width: windowWidth - 80, marginRight: 20 }} />
+        <ProductList />
       ) : (
         <ListWrapper isBusinessesSearchList={isBusinessesSearchList}>
           <ProductList />

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

@@ -10,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,
@@ -199,16 +200,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		<>
 			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
 				<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 && onNavigationRedirect('BusinessList')}
 					/>
-
 				</NoOrdersWrapper>
 			)}
 			{((ordersLength?.activeOrdersLength > 0 && activeOrders) || (ordersLength?.previousOrdersLength > 0 && !activeOrders)) && (

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

@@ -375,8 +375,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                 <LottieAnimation
                   type='favorite'
                   onClick={handleChangeFavorite}
-                  initialValue={order?.favorite ? 0.75 : 0}
-                  toValue={order?.favorite ? 0 : 0.75}
+                  initialValue={order?.favorite ? 0.5 : 0}
+                  toValue={order?.favorite ? 0 : 0.5}
                   style={{ marginBottom: 5 }}
                   iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
                   isActive={order?.favorite}

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

@@ -201,8 +201,8 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									<LottieAnimation
 										type='favorite'
 										onClick={handleChangeFavorite}
-										initialValue={product?.favorite ? 0.75 : 0}
-										toValue={product?.favorite ? 0 : 0.75}
+										initialValue={product?.favorite ? 0.5 : 0}
+										toValue={product?.favorite ? 0 : 0.5}
 										disableAnimation={!auth}
 										iconProps={{ color: theme.colors.danger5, size: 18 }}
 										isActive={product?.favorite}

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

@@ -353,6 +353,8 @@ export interface NotFoundSourceParams {
 	conditioned?: boolean,
 	onClickButton?: any,
 	children?: any
+	hideImage?: any
+	btnStyle?: any
 }
 export interface OrdersOptionParams {
 	orderList?: any,