ordering-ui-react-native 0.18.0 → 0.18.1-release

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, useWindowDimensions, Keyboard } from 'react-native';
-import { useLanguage, useSession, useConfig } from 'ordering-components/native';
+import { View, StyleSheet, useWindowDimensions, Keyboard, Platform } from 'react-native';
+import { useLanguage, useSession, useConfig, useValidationFields } from 'ordering-components/native';
 import {
 	StripeProvider,
 	CardField,
@@ -28,7 +28,12 @@ const StripeElementsFormUI = (props: any) => {
 		onCancel,
 		cart,
 		merchantId,
-		businessIds
+		businessIds,
+		setMethodPaySupported,
+		placeByMethodPay,
+		methodPaySupported,
+		setPlaceByMethodPay,
+		cartTotal
 	} = props;
 
 	const theme = useTheme();
@@ -36,6 +41,7 @@ const StripeElementsFormUI = (props: any) => {
 	const [, t] = useLanguage();
 	const [{ user }] = useSession();
 	const [{ configs }] = useConfig();
+	const [validationFields] = useValidationFields()
 	const [card, setCard] = useState<any>(null);
 	const [isCompleted, setIsCompleted] = useState(false);
 	const [errors, setErrors] = useState('')
@@ -44,6 +50,23 @@ const StripeElementsFormUI = (props: any) => {
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+	const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
+	const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
+	const styles = StyleSheet.create({
+		container: {
+			width: '100%',
+			paddingHorizontal: 20,
+			justifyContent: 'space-between',
+			paddingBottom: 12
+		},
+		btnAddStyle: {
+			marginTop: 20,
+			borderRadius: 7.6,
+			shadowOpacity: 0,
+			height: 44,
+			marginBottom: isKeyboardShow && Platform.OS === 'ios' ? 40 : 0
+		},
+	})
 
 	let billingDetails: any = {}
 
@@ -62,24 +85,24 @@ const StripeElementsFormUI = (props: any) => {
 
 	if (user?.address) {
 		billingDetails.address = {
-      line1: user?.address
-    }
+			line1: user?.address
+		}
 	}
 
 	const createPayMethod = async () => {
 		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+			params.paymentMethodData.billingDetails = { ...billingDetails, token: card?.last4 }
 		}
 		try {
 			setCreatePmLoading(true)
 			const { paymentMethod, error } = await createPaymentMethod(params);
 
-      if (error) {
-        setErrors(error?.message);
-        setCreatePmLoading(false)
-        return
-      }
+			if (error) {
+				setErrors(error?.message);
+				setCreatePmLoading(false)
+				return
+			}
 
 			setCreatePmLoading(false)
 			handleSource && handleSource({
@@ -102,7 +125,7 @@ const StripeElementsFormUI = (props: any) => {
 			setErrors(error?.message || error?.toString());
 		}
 	}
-	
+
 	const handleSaveCard = async () => {
 		setErrors('');
 		if (!requirements) {
@@ -111,7 +134,7 @@ const StripeElementsFormUI = (props: any) => {
 		}
 		const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
 		if (Object.keys(billingDetails).length > 0) {
-			params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
+			params.paymentMethodData.billingDetails = { ...billingDetails, token: card?.last4 }
 		}
 		try {
 			const { setupIntent, error } = await confirmSetupIntent(requirements, params);
@@ -119,8 +142,8 @@ const StripeElementsFormUI = (props: any) => {
 			if (setupIntent?.status === 'Succeeded') {
 				if (businessIds) {
 					businessIds.forEach((_businessId: any, index: any) => {
-					  const _isNewCard = index === 0
-					  stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
+						const _isNewCard = index === 0
+						stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
 					})
 				} else {
 					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
@@ -145,7 +168,8 @@ const StripeElementsFormUI = (props: any) => {
 				!!card?.last4 &&
 				!!card?.expiryMonth &&
 				!!card?.expiryYear &&
-				!!card?.brand
+				!!card?.brand &&
+				((!zipCodeEnabled || !zipCodeRequired || !!card?.postalCode))
 			)
 		}
 	}, [card])
@@ -172,12 +196,12 @@ const StripeElementsFormUI = (props: any) => {
 	}, []);
 
 	return (
-		<View style={{ ...styles.container, height: height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
+		<View style={{ ...styles.container, height: methodsPay?.includes(paymethod) ? 'auto' : height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
 					<StripeProvider
 						publishableKey={publicKey}
-						merchantIdentifier={`merchant.${merchantId}`}
+						merchantIdentifier={merchantId}
 						urlScheme={merchantId}
 					>
 						{methodsPay?.includes(paymethod) ? (
@@ -185,13 +209,18 @@ const StripeElementsFormUI = (props: any) => {
 								handleSource={handleSource}
 								onCancel={onCancel}
 								cart={cart}
+								cartTotal={cartTotal}
 								setErrors={setErrors}
 								paymethod={paymethod}
 								devMode={publicKey?.includes('test')}
+								setMethodPaySupported={setMethodPaySupported}
+								placeByMethodPay={placeByMethodPay}
+								methodPaySupported={methodPaySupported}
+								setPlaceByMethodPay={setPlaceByMethodPay}
 							/>
 						) : (
 							<CardField
-								postalCodeEnabled={true}
+								postalCodeEnabled={zipCodeEnabled}
 								cardStyle={{
 									backgroundColor: '#FFFFFF',
 									textColor: '#000000',
@@ -249,21 +278,6 @@ const StripeElementsFormUI = (props: any) => {
 	)
 }
 
-const styles = StyleSheet.create({
-	container: {
-		width: '100%',
-		paddingHorizontal: 40,
-		justifyContent: 'space-between',
-		paddingBottom: 12
-	},
-	btnAddStyle: {
-		marginTop: 20,
-		borderRadius: 7.6,
-		shadowOpacity: 0,
-		height: 44
-	},
-})
-
 export const StripeElementsForm = (props: any) => {
 	const stripeProps = {
 		...props,

package/themes/original/src/components/StripeElementsForm/naked.tsx

@@ -4,7 +4,10 @@ import { useApi, useSession } from 'ordering-components/native';
 export const StripeElementsForm = (props: any) => {
   const {
     UIComponent,
-    toSave
+    toSave,
+    setCardsList,
+    cardsList,
+    handleCardClick
   } = props;
 
   const [ordering] = useApi();
@@ -61,6 +64,14 @@ export const StripeElementsForm = (props: any) => {
       })
       const response = await result.json();
       isNewCard && props.onSelectCard && props.onSelectCard(response.result);
+      setCardsList && setCardsList({
+        ...cardsList,
+        cards: [
+          ...cardsList.cards,
+          response.result
+        ]
+      })
+      handleCardClick(response.result)
       setState({
         ...state,
         loadingAdd: false

package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import {
+    useLanguage,
+    useOrder,
+    useConfig
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { OText, OButton } from '../shared'
+import {
+    CartList,
+    CartDivider,
+    TopActionsHeader,
+    TopHeader
+} from './styles'
+import { OrderSummary } from '../OrderSummary';
+import { Cart } from '../Cart';
+import { ScrollView } from 'react-native-gesture-handler';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { UpsellingLayout } from './UpsellingLayout';
+
+export const UpsellingContent = (props : any) => {
+    const {
+        onGoBack,
+        handleUpsellingPage,
+        onNavigationRedirect,
+        cart,
+        productsList
+    } = props
+
+    const theme = useTheme();
+
+    const [{ carts }] = useOrder()
+    const [{ configs }] = useConfig()
+    const [, t] = useLanguage()
+    const { bottom } = useSafeAreaInsets()
+    const [isCartsLoading, setIsCartsLoading] = useState(false)
+    const [showTitle, setShowTitle] = useState(false)
+
+    const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
+    const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+    const showCartList = isChewLayout
+    const commentDelayTime = isChewLayout ? 500 : null
+
+    const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
+    
+    const styles = StyleSheet.create({
+        closeUpsellingButton: {
+            borderRadius: 7.6,
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.primary,
+            borderWidth: 1,
+            alignSelf: 'center',
+            height: 44,
+            shadowOpacity: 0,
+            width: '80%',
+        },
+        cancelBtn: {
+            paddingHorizontal: 18,
+            borderWidth: 1,
+            borderRadius: 7.6,
+            borderColor: theme.colors.textSecondary,
+            height: 38
+        },
+        headerItem: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginVertical: 2,
+            marginHorizontal: 20,
+        },
+        btnBackArrow: {
+            borderWidth: 0,
+            width: 26,
+            height: 26,
+            backgroundColor: theme.colors.clear,
+            borderColor: theme.colors.clear,
+            shadowColor: theme.colors.clear,
+            paddingLeft: 0,
+            paddingRight: 0,
+            marginLeft: 20,
+            marginBottom: 10
+        },
+        wrapperNavbar: {
+            paddingHorizontal: 20,
+            paddingTop: 0,
+        }
+    })
+
+
+    const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+        setShowTitle(contentOffset.y > 30)
+    }
+
+    return (
+        <>
+            <View style={styles.wrapperNavbar}>
+                <TopHeader>
+                    <>
+                        <TopActionsHeader onPress={() => onGoBack()}>
+                            <IconAntDesign
+                                name='arrowleft'
+                                size={26}
+                            />
+                        </TopActionsHeader>
+                        {showTitle && (
+                            <OText
+                                size={16}
+                                style={{ flex: 1, textAlign: 'center', right: 15 }}
+                                weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                                numberOfLines={2}
+                                ellipsizeMode='tail'
+                            >
+                                {t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
+                            </OText>
+                        )}
+                    </>
+                </TopHeader>
+            </View>
+            <ScrollView style={{ marginTop: 10, marginBottom: props.isPage ? 40 : bottom + (Platform.OS == 'ios' ? 96 : 130) }} showsVerticalScrollIndicator={false} onScroll={handleScroll}>
+                {productsList.length > 0 &&
+                    <View style={{ paddingHorizontal: 40, overflow: 'visible' }}>
+                        <OText size={16} lineHeight={24} weight={'500'}>{t('WANT_SOMETHING_ELSE', 'Do you want something else?')}</OText>
+                        <UpsellingLayout {...props} />
+                    </View>
+                }
+                <View style={{ paddingHorizontal: 40 }}>
+                    <OText size={20} lineHeight={30} weight={600} style={{ marginTop: 10, marginBottom: 17 }}>{t('YOUR_CART', 'Your cart')}</OText>
+                    <OrderSummary
+                        cart={cart}
+                        commentDelayTime={commentDelayTime}
+                        isCartPending={cart?.status === 2}
+                        onNavigationRedirect={onNavigationRedirect}
+                    />
+                </View>
+                {showCartList && cartList.map((cart: any, i: number) => (
+                    <CartList key={i}>
+                        <Cart
+                            isFromUpselling
+                            cart={cart}
+                            cartuuid={cart.uuid}
+                            hideUpselling
+                            singleBusiness={props.singleBusiness}
+                            isFranchiseApp={props.isFranchiseApp}
+                            isCartsLoading={isCartsLoading}
+                            setIsCartsLoading={setIsCartsLoading}
+                            isMultiCheckout={isMultiCheckout}
+                            onNavigationRedirect={props.onNavigationRedirect}
+                        />
+                        <CartDivider />
+                    </CartList>
+                ))}
+            </ScrollView>
+            <View
+                style={{
+                    alignItems: 'center',
+                    bottom: props.isPage ? Platform.OS === 'ios' ? 0 : 20 : Platform.OS === 'ios' ? bottom + 59 : bottom + 125
+                }}
+            >
+                <OButton
+                    imgRightSrc=''
+                    text={t('CHECKOUT', 'Checkout')}
+                    style={{ ...styles.closeUpsellingButton }}
+                    textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                    onClick={() => handleUpsellingPage(cart)}
+                />
+            </View>
+        </>
+    )
+}

package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Platform, StyleSheet, View } from 'react-native'
+import {
+    useUtils,
+    useLanguage
+} from 'ordering-components/native'
+import {
+    Container,
+    UpsellingContainer,
+    Item,
+    Details,
+    AddButton,
+} from './styles'
+import { OIcon, OText } from '../shared'
+import { useTheme } from 'styled-components/native';
+
+export const UpsellingLayout = (props : any) => {
+    const {
+        upsellingProducts,
+        productsList,
+        onNavigationRedirect,
+        business
+    } = props
+    const theme = useTheme()
+    const [{ parsePrice }] = useUtils()
+    const [, t] = useLanguage()
+
+    const styles = StyleSheet.create({
+        imageStyle: {
+            width: 73,
+            height: 73,
+            resizeMode: 'cover',
+            borderRadius: 7.6,
+        },
+    })
+
+    const handleFormProduct = (product: any) => {
+        onNavigationRedirect && onNavigationRedirect('ProductDetails', {
+            product: product,
+            businessId: product?.api?.businessId,
+            businessSlug: business.slug,
+        })
+    }
+
+
+    return (
+        <>
+            <Container>
+                <UpsellingContainer
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerStyle={{ paddingHorizontal: Platform.OS === 'ios' ? 40 : 0 }}
+                >
+                    {
+                        !upsellingProducts.loading && (
+                            <>
+                                {
+                                    !upsellingProducts.error ? productsList.map((product: any, i: number) => (
+                                        <Item key={`${product.id}_${i}`}>
+                                            <View style={{ flexBasis: '57%' }}>
+                                                <Details>
+                                                    <OText size={12} lineHeight={18} numberOfLines={1} ellipsizeMode='tail'>{product.name}</OText>
+                                                    <OText size={12} lineHeight={18} color={theme.colors.textNormal}>{parsePrice(product.price)}</OText>
+                                                </Details>
+                                                <AddButton onPress={() => handleFormProduct(product)}>
+                                                    <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
+                                                </AddButton>
+                                            </View>
+                                            <View>
+                                                <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
+                                            </View>
+                                        </Item>
+                                    )) : (
+                                        <OText>
+                                            {upsellingProducts.message}
+                                        </OText>
+                                    )
+                                }
+                            </>
+                        )
+                    }
+                </UpsellingContainer>
+            </Container>
+        </>
+    )
+}