ordering-ui-react-native 0.19.4-release → 0.19.6-release

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler, SafeAreaView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
 import Picker from 'react-native-country-picker-modal';
@@ -448,9 +448,9 @@ const CheckoutUI = (props: any) => {
 
 	return (
 		<>
-			<View style={styles.wrapperNavbar}>
-				<TopHeader>
-					<>
+			<SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
+				<View style={styles.wrapperNavbar}>
+					<TopHeader>
 						<TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
 							<IconAntDesign
 								name='arrowleft'
@@ -468,10 +468,10 @@ const CheckoutUI = (props: any) => {
 								{t('CHECKOUT', 'Checkout')}
 							</OText>
 						)}
-					</>
-				</TopHeader>
-			</View>
-			<Container forwardRef={containerRef} noPadding onScroll={handleScroll}>
+					</TopHeader>
+				</View>
+			</SafeAreaView>
+			<Container pt={0} forwardRef={containerRef} noPadding onScroll={handleScroll}>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
 						hideArrowLeft

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

@@ -10,8 +10,9 @@ import {
   ToastType,
   MultiCheckout as MultiCheckoutController
 } from 'ordering-components/native'
-import { View, StyleSheet, Platform, ScrollView } from 'react-native'
+import { View, StyleSheet, Platform, ScrollView, SafeAreaView } from 'react-native'
 import { useTheme } from 'styled-components/native';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OText, OIcon, OModal, OButton } from '../shared';
@@ -30,6 +31,8 @@ import { SignupForm } from '../SignupForm'
 import { LoginForm } from '../LoginForm'
 
 import {
+  TopHeader,
+  TopActions,
   ChContainer,
   ChSection,
   ChHeader,
@@ -76,7 +79,11 @@ const MultiCheckoutUI = (props: any) => {
       paddingLeft: 20,
       paddingRight: 20
     },
-    wrapperNavbar: { paddingHorizontal: 20 },
+    wrapperNavbar: {
+      paddingHorizontal: 20,
+      backgroundColor: theme?.colors?.white,
+			borderWidth: 0
+    },
     detailWrapper: {
 			paddingHorizontal: 20,
 			width: '100%'
@@ -136,6 +143,7 @@ const MultiCheckoutUI = (props: any) => {
     ?.reduce((sum: any, cart: any) => sum + clearAmount((cart?.subtotal + getIncludedTaxes(cart)) * accumulationRateBusiness(cart?.business_id)), 0)
     ?.toFixed(configs.format_number_decimal_length?.value ?? 2)
 
+	const [showTitle, setShowTitle] = useState(false)
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [userErrors, setUserErrors] = useState<any>([]);
@@ -233,6 +241,10 @@ const MultiCheckoutUI = (props: any) => {
 		if (user) setOpenModal({ ...openModal, login: false })
 	}
 
+  const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+		setShowTitle(contentOffset.y > 30)
+	}
+
   useEffect(() => {
     if (validationFields && validationFields?.fields?.checkout) {
       checkValidationFields()
@@ -273,15 +285,44 @@ const MultiCheckoutUI = (props: any) => {
 
   return (
     <>
-      <Container noPadding>
+      <SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
+        <View style={styles.wrapperNavbar}>
+          <TopHeader>
+            <>
+              <TopActions onPress={() => navigation?.canGoBack() && navigation.goBack()}>
+                <IconAntDesign
+                  name='arrowleft'
+                  size={26}
+                />
+              </TopActions>
+              {showTitle && (
+                <OText
+                  size={16}
+                  style={{ flex: 1, textAlign: 'center', right: 15 }}
+                  weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                  numberOfLines={2}
+                  ellipsizeMode='tail'
+                >
+                  {t('CHECKOUT', 'Checkout')}
+                </OText>
+              )}
+            </>
+          </TopHeader>
+        </View>
+      </SafeAreaView>
+      <Container pt={0} noPadding onScroll={handleScroll}>
         <View style={styles.wrapperNavbar}>
           <NavBar
+            hideArrowLeft
             title={t('CHECKOUT', 'Checkout')}
             titleAlign={'center'}
             onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
             showCall={false}
             paddingTop={Platform.OS === 'ios' ? 0 : 4}
             btnStyle={{ paddingLeft: 0 }}
+            titleWrapStyle={{ paddingHorizontal: 0 }}
+						titleStyle={{ marginRight: 0, marginLeft: 0 }}
+						style={{ marginTop: 20 }}
           />
         </View>
         <ChContainer style={styles.pagePadding}>

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

@@ -53,6 +53,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
   const [{ configs }] = useConfig()
 
   const isTaxIncludedOnPrice = orders.every((_order: any) => _order.taxes?.length ? _order.taxes?.every((_tax: any) => _tax.type === 1) : true)
+  const deliveryType = orders.find((order: any) => order.delivery_type)?.delivery_type
   const progressBarStyle = configs.multi_business_checkout_progress_bar_style?.value
   const showBarInOrder = ['group', 'both']
   const showBarInIndividual = ['individual', 'both']
@@ -171,19 +172,23 @@ export const MultiOrdersDetailsUI = (props: any) => {
         ))}
       </Section>
       <Divider />
-      <Section>
-        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={20}>
-          {t('DELIVERYA_V21', 'Delivery address')}
-        </OText>
-        {loading ? (
-          <PlaceholderLine height={18} noMargin style={{ borderRadius: 2 }} />
-        ) : (
-          <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
-            {customer?.address}
-          </OText>
-        )}
-      </Section>
-      <Divider />
+      {deliveryType === 1 && (
+        <>
+          <Section>
+            <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={20}>
+              {t('DELIVERYA_V21', 'Delivery address')}
+            </OText>
+            {loading ? (
+              <PlaceholderLine height={18} noMargin style={{ borderRadius: 2 }} />
+            ) : (
+              <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
+                {customer?.address}
+              </OText>
+            )}
+          </Section>
+          <Divider />
+        </>
+      )}
       {loading ? (
         <Placeholder Animation={Fade}>
           <PlaceholderLine

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

@@ -26,7 +26,7 @@ const PaymentOptionCardUI = (props: any) => {
     const [alertState, setAlertState] = useState<{ open: boolean, content: Array<string> }>({ open: false, content: [] })
     const [newCard, setNewCard] = useState<any>(null)
 
-    const onChangeCardForm = (values : any) => {
+    const onChangeCardForm = (values: any) => {
         if (values?.valid) {
             const expiry = values?.values?.expiry?.split('/')
             const expiryMonth = expiry[0]
@@ -107,6 +107,8 @@ const PaymentOptionCardUI = (props: any) => {
                     cardsList={cardsList}
                     noShowErrors
                     gateway={gateway}
+                    onOpen={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+                    onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
                 />
             </>
             <Modal
@@ -169,7 +171,7 @@ const PaymentOptionCardUI = (props: any) => {
     )
 }
 
-export const PaymentOptionCard = (props : any) => {
+export const PaymentOptionCard = (props: any) => {
     const paymentOptions = {
         ...props,
         UIComponent: PaymentOptionCardUI

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

@@ -364,6 +364,7 @@ const PaymentOptionsUI = (props: any) => {
 					methodPaySupported={methodPaySupported}
 					placeByMethodPay={placeByMethodPay}
 					setPlaceByMethodPay={setPlaceByMethodPay}
+					publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
 				/>
 			)}
 
@@ -406,6 +407,7 @@ const PaymentOptionsUI = (props: any) => {
 						handleSource={handlePaymethodDataChange}
 						onCancel={() => handlePaymethodClick(null)}
 						merchantId={merchantId}
+						publicKeyAddCard={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
 					/>
 				</KeyboardAvoidingView>
 			</OModal>
@@ -425,11 +427,12 @@ 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>
 			)}
@@ -446,6 +449,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}
@@ -453,6 +457,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/StripeCardsList/index.tsx

@@ -29,12 +29,8 @@ export const StripeCardsListUI = (props: any) => {
 		cardSelected,
 		cardsList,
 		handleCardClick,
-		setAddCardOpen,
+		onOpen,
 		gateway,
-		setCardsList,
-		addCardOpen,
-		isOpenMethod,
-		handlePaymethodDataChange
 	} = props;
 
 	const theme = useTheme();
@@ -54,7 +50,7 @@ export const StripeCardsListUI = (props: any) => {
 
 	useEffect(() => {
 		if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
-			setAddCardOpen({ ...addCardOpen, stripe: true })
+			onOpen && onOpen();
 		}
 	}, [cardsList?.loading])
 
@@ -147,33 +143,6 @@ export const StripeCardsListUI = (props: any) => {
 					))}
 				</ScrollView>
 			)}
-			<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={setCardsList}
-						cardsList={cardsList}
-						requirements={props.clientSecret}
-						handleCardClick={handleCardClick}
-						onSelectCard={handlePaymethodDataChange}
-						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
-					/>
-				</KeyboardAvoidingView>
-			</OModal>
 		</>
 	)
 }

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

@@ -33,7 +33,8 @@ const StripeElementsFormUI = (props: any) => {
 		placeByMethodPay,
 		methodPaySupported,
 		setPlaceByMethodPay,
-		cartTotal
+		cartTotal,
+		publicKeyAddCard
 	} = props;
 
 	const theme = useTheme();
@@ -52,6 +53,7 @@ const StripeElementsFormUI = (props: any) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
 	const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
+	const isToSave = methodsPay?.includes(paymethod) ? publicKey : publicKeyAddCard
 	const styles = StyleSheet.create({
 		container: {
 			width: '100%',
@@ -200,7 +202,7 @@ const StripeElementsFormUI = (props: any) => {
 			{publicKey ? (
 				<View style={{ flex: 1 }}>
 					<StripeProvider
-						publishableKey={publicKey}
+						publishableKey={isToSave}
 						merchantIdentifier={merchantId}
 						urlScheme={merchantId}
 					>