ordering-ui-react-native 0.21.0 → 0.21.1-release

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

@@ -11,6 +11,7 @@ import {
 	useLanguage,
 	ToastType,
 	useToast,
+	useSession
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { PaymentOptionCash } from '../PaymentOptionCash';
@@ -64,16 +65,23 @@ const PaymentOptionsUI = (props: any) => {
 		handlePaymentMethodClickCustom,
 		handlePlaceOrder,
 		merchantId,
+		urlscheme,
 		setMethodPaySupported,
 		placeByMethodPay,
 		methodPaySupported,
 		setPlaceByMethodPay,
 		setCardList,
-		onPaymentChange
+		onPaymentChange,
+		requiredFields,
+		openUserModal,
+		paymethodClicked,
+		setPaymethodClicked,
+		androidAppId
 	} = props
 
 	const theme = useTheme();
 	const [, { showToast }] = useToast();
+	const [{ user }] = useSession()
 	const { confirmApplePayPayment } = useApplePay()
 
 	const getPayIcon = (method: string) => {
@@ -94,6 +102,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
 		}
@@ -111,8 +121,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)
@@ -158,10 +178,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)}
 					>
@@ -192,7 +219,7 @@ const PaymentOptionsUI = (props: any) => {
 								style={{ margin: 0, marginTop: 4 }}
 								color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
 							>
-								{t(item.gateway.toUpperCase(), item.name)}
+								{t(item?.gateway?.toUpperCase(), item.name)}
 							</OText>
 						</PMItem>
 					</TouchableOpacity>
@@ -262,7 +289,7 @@ const PaymentOptionsUI = (props: any) => {
 				/>
 			)}
 
-			{stripeOptions.includes(paymethodSelected?.gateway) &&
+			{/* {stripeOptions.includes(paymethodSelected?.gateway) &&
 				(paymethodData?.brand || paymethodData?.card?.brand) &&
 				(paymethodData?.last4 || paymethodData?.card?.last4) &&
 				(
@@ -291,10 +318,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')}
@@ -312,8 +339,15 @@ const PaymentOptionsUI = (props: any) => {
 						payType={paymethodsList?.name}
 						onSelectCard={handlePaymethodDataChange}
 						onNavigationRedirect={onNavigationRedirect}
+						paymethodCardId={paymethodData?.id}
 						onCancel={() => handlePaymethodClick(null)}
-						setAddCardOpen={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+						setAddCardOpen={setAddCardOpen}
+						addCardOpen={addCardOpen}
+						isOpenMethod={isOpenMethod}
+						handlePaymethodDataChange={handlePaymethodDataChange}
+						clientSecret={props.clientSecret}
+						businessId={props.businessId}
+						onPaymentChange={onPaymentChange}
 					/>
 				</View>
 			)}
@@ -328,10 +362,13 @@ const PaymentOptionsUI = (props: any) => {
 					handleSource={handlePaymethodDataChange}
 					onCancel={() => handlePaymethodClick(null)}
 					merchantId={merchantId}
+					urlscheme={urlscheme}
+					androidAppId={androidAppId}
 					setMethodPaySupported={setMethodPaySupported}
 					methodPaySupported={methodPaySupported}
 					placeByMethodPay={placeByMethodPay}
 					setPlaceByMethodPay={setPlaceByMethodPay}
+					publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
 				/>
 			)}
 
@@ -353,29 +390,6 @@ const PaymentOptionsUI = (props: any) => {
 				/>
 			)}
 
-			<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>
-
 			{/* Stripe direct */}
 			<OModal
 				entireModal
@@ -397,6 +411,9 @@ const PaymentOptionsUI = (props: any) => {
 						handleSource={handlePaymethodDataChange}
 						onCancel={() => handlePaymethodClick(null)}
 						merchantId={merchantId}
+						urlscheme={urlscheme}
+						androidAppId={androidAppId}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>
@@ -416,15 +433,16 @@ const PaymentOptionsUI = (props: any) => {
 					<StripeCardsList
 						paymethod={isOpenMethod?.paymethod}
 						businessId={props.businessId}
-						publicKey={isOpenMethod?.paymethod?.credentials.publishable}
 						payType={paymethodsList?.name}
 						onSelectCard={handlePaymethodDataChange}
 						onNavigationRedirect={onNavigationRedirect}
 						onCancel={() => handlePaymethodClick(null)}
+						publicKey={isOpenMethod?.paymethod?.credentials.publishable}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
 					/>
 				</View>
 			)}
-
+			{/** Stripe connect add cards */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
@@ -437,6 +455,7 @@ const PaymentOptionsUI = (props: any) => {
 					enabled={Platform.OS === 'ios' ? true : false}
 				>
 					<StripeElementsForm
+						openCarts={props.openCarts}
 						toSave
 						businessId={props.businessId}
 						publicKey={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
@@ -444,6 +463,35 @@ const PaymentOptionsUI = (props: any) => {
 						accountId={isOpenMethod?.paymethod?.credentials?.user}
 						onSelectCard={handlePaymethodDataChange}
 						onCancel={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
+
+			{/* Stripe Add card */}
+			<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
+						openCarts={props.openCarts}
+						toSave
+						businessId={props.businessId}
+						businessIds={props.businessIds}
+						publicKey={props.publicKey || isOpenMethod?.paymethod?.credentials?.publishable}
+						setCardsList={setCardList}
+						requirements={props.clientSecret}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>

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

@@ -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 === '') && (

package/themes/original/src/components/ProductForm/ActionButton.tsx

@@ -0,0 +1,120 @@
+import React from 'react'
+import { useSession, useOrder, useLanguage, useConfig } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { TouchableOpacity, View } from 'react-native'
+import { OButton, OText } from '../shared';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+
+export const ActionButton = (props : any) => {
+    const {
+        navigation,
+        isHaveWeight,
+        isSoldOut,
+        maxProductQuantity,
+        productCart,
+        handleSaveProduct,
+        editMode,
+        product,
+        errors,
+        productAddedToCartLength,
+        handleRedirectLogin,
+        guestCheckoutEnabled,
+        orderTypeEnabled,
+        handleUpdateGuest,
+        actionStatus
+    } = props
+    const [,t] = useLanguage()
+    const [{ auth }] = useSession()
+    const [orderState] = useOrder()
+    const theme = useTheme()
+	const [{ configs }] = useConfig()
+    const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
+	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+
+    const saveErrors =
+		orderState.loading ||
+		maxProductQuantity === 0 ||
+		Object.keys(errors)?.length > 0;
+
+    return (
+        <View
+            style={{
+                width: isHaveWeight ? '100%' : ((isSoldOut || maxProductQuantity <= 0) ? '60%' : '40%'),
+            }}>
+            {((productCart &&
+                auth &&
+                (orderState.options?.address_id || isAllowUnaddressOrderType)) || (isSoldOut || maxProductQuantity <= 0)) && (
+                    <OButton
+                        onClick={() => handleSaveProduct()}
+                        imgRightSrc=""
+                        text={`${orderState.loading
+                            ? t('LOADING', 'Loading')
+                            : (isSoldOut || maxProductQuantity <= 0)
+                                ? t('SOLD_OUT', 'Sold out')
+                                : editMode
+                                    ? t('UPDATE', 'Update')
+                                    : t('ADD', 'Add')
+                            }`}
+                        isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))}
+                        textStyle={{
+                            color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
+                            fontSize: orderState.loading || editMode ? 10 : 14
+                        }}
+                        style={{
+                            backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
+                            borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
+                            opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
+                            borderRadius: 7.6,
+                            height: 44,
+                            shadowOpacity: 0,
+                            borderWidth: 1,
+                            marginTop: isHaveWeight ? 10 : 0
+                        }}
+                    />
+                )}
+            {auth &&
+                !orderState.options?.address_id && !isAllowUnaddressOrderType &&
+                (orderState.loading ? (
+                    <OButton
+                        isDisabled
+                        text={t('LOADING', 'Loading')}
+                        imgRightSrc=""
+                        textStyle={{ fontSize: 10 }}
+                    />
+                ) : (
+                    <OButton onClick={navigation.navigate('AddressList')} />
+                ))}
+            {!auth && (
+                <OButton
+                    isDisabled={isSoldOut || maxProductQuantity <= 0}
+                    onClick={() => handleRedirectLogin()}
+                    text={
+                        isSoldOut || maxProductQuantity <= 0
+                            ? t('SOLD_OUT', 'Sold out')
+                            : t('LOGIN_SIGNUP', 'Login / Sign Up')
+                    }
+                    imgRightSrc=""
+                    textStyle={{ color: theme.colors.primary, fontSize: 13, textAlign: 'center' }}
+                    style={{
+                        height: 42,
+                        borderColor: theme.colors.primary,
+                        backgroundColor: theme.colors.white,
+                        paddingLeft: 0,
+                        paddingRight: 0
+                    }}
+                />
+            )}
+            {!auth && guestCheckoutEnabled && orderTypeEnabled && (
+                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                    {actionStatus?.loading ? (
+                        <Placeholder Animation={Fade}>
+                            <PlaceholderLine height={20} />
+                        </Placeholder>
+                    ) : (
+                        <OText color={theme.colors.primary} size={13} style={{ textAlign: 'center' }}>{t('AS_GUEST_USER', 'As guest user')}</OText>
+                    )}
+                </TouchableOpacity>
+            )}
+        </View>
+    )
+}

package/themes/original/src/components/ProductForm/ExtraOptions.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from 'styled-components/native';
+import { OText } from '../shared';
+
+export const ExtraOptions = (props : any) => {
+    const {
+        options,
+        setSelectedOpt,
+        scrollViewRef,
+        optionLayout,
+        editionsLayoutY,
+        styles,
+        selOpt
+    } = props
+
+    const theme = useTheme()
+
+    return (
+        <>
+            {options.map(({ id, name, respect_to, suboptions }: any) => (
+                <React.Fragment key={`cont_key_${id}`}>
+                    {respect_to == null && suboptions?.length > 0 && (
+                        <TouchableOpacity
+                            key={`eopt_key_${id}`}
+                            onPress={() => {
+                                setSelectedOpt(id)
+                                scrollViewRef?.current?.scrollTo && scrollViewRef.current.scrollTo({
+                                    y: optionLayout[`id:${id}`]?.y + editionsLayoutY - 50,
+                                    animated: true
+                                })
+                            }}
+                            style={[
+                                styles.extraItem,
+                                {
+                                    borderBottomColor:
+                                        selOpt == id ? theme.colors.textNormal : theme.colors.backgroundPage,
+                                },
+                            ]}>
+                            <OText
+                                color={
+                                    selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
+                                }
+                                size={12}
+                                weight={selOpt == id ? '600' : 'normal'}
+                                style={{ maxWidth: 150 }}
+                                numberOfLines={1}>
+                                {name}
+                            </OText>
+                        </TouchableOpacity>
+                    )}
+                </React.Fragment>
+            ))}
+        </>
+    )
+}