ordering-ui-react-native 0.17.98 → 0.17.99-release

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

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

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

@@ -40,6 +40,9 @@ export const OSItem = styled.View`
   justify-content: space-between;
   align-items: center;
   padding: 10px 0px;
+  ${({ isInvalid } : any) => isInvalid && css`
+    opacity: 0.7;
+  `}
 `;
 
 export const OSItemContent = styled.TouchableOpacity`

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

@@ -45,7 +45,7 @@ const PaymentOptionWalletUI = (props: any) => {
     new Array(walletsState.result?.length).fill(false)
   );
 
-  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate, { isTruncable: true })}`
+  const creditBalance: any = (wallet: any) => ` = ${parsePrice(wallet.balance / wallet.redemption_rate)}`
 
   const walletName: any = {
     cash: {
@@ -87,65 +87,65 @@ const PaymentOptionWalletUI = (props: any) => {
       {!walletsState.loading &&
         !walletsState.error &&
         walletsState.result?.length > 0 &&
-        (
-          <>
-            {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
-              <Container
-                key={wallet.id}
-                isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
-                onPress={() => handleOnChange(idx, wallet)}
-                disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
-              >
-                <SectionLeft>
-                  {checkedState[idx] ? (
-                    <MaterialCommunityIcons
-                      name="checkbox-marked"
-                      size={25}
-                      color={theme.colors.primary}
-                    />
-                  ) : (
-                    <MaterialCommunityIcons
-                      name="checkbox-blank-outline"
-                      size={25}
-                      color={theme.colors.disabled}
-                    />
-                  )}
-                  <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
-                    <View>
-                      <OText
-                        style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ? {
-                          color: theme.colors.disabled
-                        } : {}}
-                      >
-                        {walletName[wallet.type]?.name}
-                      </OText>
-                    </View>
+      (
+        <>
+          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && walletName[wallet.type]?.isActive && (
+            <Container
+              key={wallet.id}
+              isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
+              onPress={() => handleOnChange(idx, wallet)}
+              disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0}
+            >
+              <SectionLeft>
+                {checkedState[idx] ? (
+                  <MaterialCommunityIcons
+                    name="checkbox-marked"
+                    size={25}
+                    color={theme.colors.primary}
+                  />
+                ) : (
+                  <MaterialCommunityIcons
+                    name="checkbox-blank-outline"
+                    size={25}
+                    color={theme.colors.disabled}
+                  />
+                )}
+                <View style={{ alignItems: 'baseline', marginLeft: 5 }}>
+                  <View>
+                    <OText
+                      style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
+                        color: theme.colors.disabled
+                      } : {}}
+                    >
+                      {walletName[wallet.type]?.name}
+                    </OText>
                   </View>
-                </SectionLeft>
-
-                <View style={{ maxWidth: '35%', alignItems: 'flex-end' }}>
-                  {wallet.type === 'cash' && (
-                    <OText>
-                      {parsePrice(wallet?.balance, { isTruncable: true })}
+              </View>
+              </SectionLeft>
+
+              <View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
+                {wallet.type === 'cash' && (
+                  <OText>
+                    {parsePrice(wallet?.balance)}
+                  </OText>
+                )}
+                {wallet.type === 'credit_point' && (
+                  <OText>
+                    <OText color={theme.colors.primary} weight='bold'>
+                    {`${wallet?.balance} ${t('POINTS', 'Points')}`}
                     </OText>
-                  )}
-                  {wallet.type === 'credit_point' && (
                     <OText>
-                      <OText color={theme.colors.primary} weight='bold'>
-                        {`${wallet?.balance} ${t('POINTS', 'Points')}`}
-                      </OText>
-                      <OText>
-                        {wallet?.balance > 0
-                          ? creditBalance(wallet)
-                          : null}
-                      </OText>
+                      {wallet?.balance > 0
+                        ? creditBalance(wallet)
+                        : null}
                     </OText>
-                  )}
-                </View>
-              </Container>
-            ))}
-          </>
-        )}
+                  </OText>
+                )}
+              </View>
+            </Container>
+          ))}
+        </>
+      )}
 
       {walletsState?.loading && (
         <View>

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

@@ -11,11 +11,14 @@ import {
 	useLanguage,
 	ToastType,
 	useToast,
+	useSession
 } from 'ordering-components/native';
 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'
@@ -34,7 +37,7 @@ import { useApplePay } from '@stripe/stripe-react-native';
 
 const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
 const methodsPay = ['google_pay', 'apple_pay']
-const stripeDirectMethods = ['stripe_direct', ...methodsPay]
+const stripeDirectMethods = ['stripe_direct']
 // const stripeRedirectOptions = [
 //   { name: 'Bancontact', value: 'bancontact' },
 //   { name: 'Alipay', value: 'alipay' },
@@ -43,6 +46,8 @@ const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 // ]
 
 const webViewPaymentGateway: any = ['paypal', 'square']
+const multiCheckoutMethods = ['global_google_pay', 'global_apple_pay']
+const cardsPaymethods = ['credomatic']
 
 const PaymentOptionsUI = (props: any) => {
 	const {
@@ -59,11 +64,22 @@ const PaymentOptionsUI = (props: any) => {
 		isOpenMethod,
 		handlePaymentMethodClickCustom,
 		handlePlaceOrder,
-		merchantId
+		merchantId,
+		setMethodPaySupported,
+		placeByMethodPay,
+		methodPaySupported,
+		setPlaceByMethodPay,
+		setCardList,
+		onPaymentChange,
+		requiredFields,
+		openUserModal,
+		paymethodClicked,
+		setPaymethodClicked
 	} = props
 
 	const theme = useTheme();
 	const [, { showToast }] = useToast();
+	const [{ user }] = useSession()
 	const { confirmApplePayPayment } = useApplePay()
 
 	const getPayIcon = (method: string) => {
@@ -75,7 +91,7 @@ const PaymentOptionsUI = (props: any) => {
 			case 'paypal':
 				return theme.images.general.paypal
 			case 'stripe':
-				return theme.images.general.stripe
+				return theme.images.general.creditCard
 			case 'stripe_direct':
 				return theme.images.general.stripecc
 			case 'stripe_connect':
@@ -84,6 +100,8 @@ const PaymentOptionsUI = (props: any) => {
 				return theme.images.general.stripesb
 			case 'apple_pay':
 				return theme.images.general.applePayMark
+			case 'google_pay':
+				return theme.images.general.googlePayMark
 			default:
 				return theme.images.general.creditCard
 		}
@@ -91,7 +109,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()
 
@@ -101,8 +119,18 @@ const PaymentOptionsUI = (props: any) => {
 	//   { name: t('SELECT_A_PAYMENT_METHOD', 'Select a payment method'), value: '-1' },
 	// ]
 
+	const paymethodsFieldRequired = ['paypal', 'apple_pay', 'global_apple_pay']
+
 	const handlePaymentMethodClick = (paymethod: any) => {
-		if (cart?.balance > 0) {
+		if (cart?.balance > 0 || !!user?.guest_id) {
+			if (paymethodsFieldRequired.includes(paymethod?.gateway) && requiredFields.length > 0) {
+				openUserModal && openUserModal(true)
+				setPaymethodClicked({
+					confirmed: false,
+					paymethod
+				})
+				return
+			}
 			const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
 			if (webViewPaymentGateway.includes(paymethod?.gateway)) {
 				handlePaymentMethodClickCustom(paymethod)
@@ -116,6 +144,12 @@ const PaymentOptionsUI = (props: any) => {
 			;
 	}
 
+	useEffect(() => {
+		if (cart?.balance === 0) {
+			handlePaymethodClick(null)
+		}
+	}, [cart?.balance])
+
 	useEffect(() => {
 		if (paymethodsList.paymethods.length === 1) {
 			handlePaymethodClick && handlePaymethodClick(paymethodsList.paymethods[0])
@@ -142,10 +176,17 @@ const PaymentOptionsUI = (props: any) => {
 		}
 	}, [paymethodData, paymethodSelected])
 
+	useEffect(() => {
+		if (paymethodClicked?.confirmed) {
+			handlePaymentMethodClickCustom(paymethodClicked?.paymethod)
+		}
+	}, [paymethodClicked?.confirmed])
+
+
 	const renderPaymethods = ({ item }: any) => {
 		return (
 			<>
-				{item?.gateway === 'apple_pay' ? (
+				{methodsPay.includes(item?.gateway) ? (
 					<TouchableOpacity
 						onPress={() => handlePaymentMethodClick(item)}
 					>
@@ -187,6 +228,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'
 
 	return (
 		<PMContainer>
@@ -195,7 +237,11 @@ const PaymentOptionsUI = (props: any) => {
 					horizontal
 					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) => !excludeIds.includes(p.id))}
+					data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id)
+						.filter((p: any) =>
+							!multiCheckoutMethods.includes(p.gateway) &&
+							filterMethodsPay(p.gateway) &&
+							!excludeIds.includes(p.id))}
 					renderItem={renderPaymethods}
 					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
 				/>
@@ -241,7 +287,7 @@ const PaymentOptionsUI = (props: any) => {
 				/>
 			)}
 
-			{stripeOptions.includes(paymethodSelected?.gateway) &&
+			{/* {stripeOptions.includes(paymethodSelected?.gateway) &&
 				(paymethodData?.brand || paymethodData?.card?.brand) &&
 				(paymethodData?.last4 || paymethodData?.card?.last4) &&
 				(
@@ -270,10 +316,10 @@ const PaymentOptionsUI = (props: any) => {
 							</View>
 						</PMCardItemContent>
 					</PMCardSelected>
-				)}
+				)} */}
 
 			{/* Stripe */}
-			{isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
+			{isOpenMethod?.paymethod?.gateway === 'stripe' && (
 				<View>
 					<OButton
 						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
@@ -291,35 +337,55 @@ const PaymentOptionsUI = (props: any) => {
 						payType={paymethodsList?.name}
 						onSelectCard={handlePaymethodDataChange}
 						onNavigationRedirect={onNavigationRedirect}
+						paymethodCardId={paymethodData?.id}
 						onCancel={() => handlePaymethodClick(null)}
+						setAddCardOpen={setAddCardOpen}
+						addCardOpen={addCardOpen}
+						isOpenMethod={isOpenMethod}
+						handlePaymethodDataChange={handlePaymethodDataChange}
+						clientSecret={props.clientSecret}
+						businessId={props.businessId}
+						onPaymentChange={onPaymentChange}
 					/>
 				</View>
 			)}
+			{/* Google pay, Apple pay */}
+			{methodsPay.includes(isOpenMethod?.paymethod?.gateway) && (
+				<StripeElementsForm
+					cart={cart}
+					paymethod={isOpenMethod?.paymethod?.gateway}
+					methodsPay={methodsPay}
+					businessId={props.businessId}
+					publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
+					handleSource={handlePaymethodDataChange}
+					onCancel={() => handlePaymethodClick(null)}
+					merchantId={merchantId}
+					setMethodPaySupported={setMethodPaySupported}
+					methodPaySupported={methodPaySupported}
+					placeByMethodPay={placeByMethodPay}
+					setPlaceByMethodPay={setPlaceByMethodPay}
+				/>
+			)}
 
-			<OModal
-				entireModal
-				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-				open={addCardOpen.stripe}
-				onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-				style={{ backgroundColor: 'red' }}
-			>
-				<KeyboardAvoidingView
-					behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
-					keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
-					enabled={Platform.OS === 'ios' ? true : false}
-				>
-					<StripeElementsForm
-						toSave
-						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
-						requirements={props.clientSecret}
-						onSelectCard={handlePaymethodDataChange}
-						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
+			{(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}
+				/>
+			)}
 
-			{/* Stripe direct, Google pay, Apple pay */}
+			{/* Stripe direct */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
@@ -367,7 +433,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 				</View>
 			)}
-
+			{/** Stripe connect add cards */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}

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

@@ -7,7 +7,7 @@ import { Wrapper } from './styles'
 
 import { PhoneInputParams } from '../../types';
 import { OIcon, OText } from '../shared';
-import { transformCountryCode } from '../../utils'
+import { findExitingCode, transformCountryCode } from '../../utils'
 
 export const PhoneInputNumber = (props: PhoneInputParams) => {
 	const {
@@ -24,7 +24,8 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		noDropIcon,
 		isDisabled,
 		isStartValidation,
-		changeCountry
+		changeCountry,
+		updateStateWithSubmit
 	} = props
 
 	const theme = useTheme();
@@ -95,6 +96,19 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		}
 	}, [userphoneNumber])
 
+	useEffect(() => {
+		if (defaultValue && updateStateWithSubmit) {
+			phoneInput.current?.setState({
+				number: defaultValue,
+				countryCode: defaultCode ?
+					!isNaN(defaultCode)
+						? transformCountryCode(defaultCode)
+						: findExitingCode(defaultCode)
+					: findExitingCode(configs?.default_country_code?.value?.toUpperCase())
+			})
+		}
+	}, [defaultValue])
+
 	return (
 		<Wrapper onPress={() => forwardRef?.current?.focus?.()}>
 			{(isStartValidation && userphoneNumber === '') && (
@@ -112,8 +126,8 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 				defaultCode={defaultCode ?
 					!isNaN(defaultCode)
 						? transformCountryCode(defaultCode)
-						: defaultCode
-					: configs?.default_country_code?.value}
+						: findExitingCode(defaultCode)
+					: findExitingCode(configs?.default_country_code?.value?.toUpperCase())}
 				onChangeFormattedText={(text: string) => handleChangeNumber(text)}
 				withDarkTheme
 				onChangeCountry={(country) => changeCountry?.(country)}