ordering-ui-react-native 0.18.72 → 0.18.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.72",
+  "version": "0.18.74",
   "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/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/AddressForm/index.tsx

@@ -436,16 +436,16 @@ const AddressFormUI = (props: AddressFormParams) => {
 		if (isEditing) {
 			if (formState?.changes?.location) {
 				const prevLocation = {
-					lat: Math.trunc(locationChange.lat),
-					lng: Math.trunc(locationChange.lng),
+					lat: locationChange?.lat?.toFixed(5),
+					lng: locationChange?.lng?.toFixed(5),
 				};
 				const newLocation = {
-					lat: Math.trunc(formState?.changes?.location?.lat),
-					lng: Math.trunc(formState?.changes?.location?.lng),
+					lat: formState?.changes?.location?.lat?.toFixed(5),
+					lng: formState?.changes?.location?.lng?.toFixed(5),
 				};
 				if (
-					prevLocation.lat !== newLocation.lat &&
-					prevLocation.lng !== newLocation.lng
+					prevLocation?.lat !== newLocation?.lat &&
+					prevLocation?.lng !== newLocation?.lng
 				) {
 					setLocationChange(formState?.changes?.location);
 				}

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/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/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])