ordering-ui-react-native 0.21.77 → 0.21.78

package/package.json

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

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

@@ -237,7 +237,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection={!isFiltMode}
+                      // enableIntersection={!isFiltMode}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView, Keyboard, KeyboardEvent, BackHandler, ScrollView } from 'react-native'
 import { IOScrollView } from 'react-native-intersection-observer'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native';
@@ -534,7 +534,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             </View>
           </FiltProductsContainer>
         )}
-        <IOScrollView
+        <ScrollView
           stickyHeaderIndices={[business?.professionals?.length > 0 ? 4 : 3]}
           style={{
             ...styles.mainContainer,
@@ -662,7 +662,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           {isOpenFiltProducts && (
             <BackgroundGray isIos={Platform.OS === 'ios'} />
           )}
-        </IOScrollView>
+        </ScrollView>
         {viewOrderButtonVisible && (
           <View style={{ marginBottom: 0 }}>
             <FloatingButton

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

@@ -219,7 +219,7 @@ const CartUI = (props: any) => {
 
   return (
     <CContainer>
-      {openUpselling && (
+      {!!openUpselling && (
         <UpsellingProducts
           handleUpsellingPage={handleUpsellingPage}
           openUpselling={openUpselling}

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

@@ -859,7 +859,7 @@ const CheckoutUI = (props: any) => {
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
-								{cartsWithProducts && cart?.products?.length === 0 ? (
+								{cartsWithProducts?.length > 0 && cart?.products?.length === 0 ? (
 									<NotFoundSource
 										content={t('NOT_FOUND_CARTS', 'Sorry, You don\'t seem to have any carts.')}
 										btnTitle={t('SEARCH_REDIRECT', 'Go to Businesses')}
@@ -937,13 +937,15 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 
-								{!cart?.valid_products && cart?.status !== 2 && (
-									<OText
-										color={theme.colors.error}
-										size={12}
-									>
-										{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
-									</OText>
+								{!cart?.valid_products && cart?.status !== 2 && cart?.total !== 0 && (
+									<>
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_PRODUCTS_CHECKOUT', 'To continue with your checkout, please remove from your cart the products that are not available.')}
+										</OText>
+									</>
 								)}
 								{cart?.valid_preorder !== undefined && !cart?.valid_preorder && (
 									<OText

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

@@ -10,7 +10,7 @@ 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';
@@ -285,30 +285,32 @@ const MultiCheckoutUI = (props: any) => {
 
   return (
     <>
-      <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>
-      <Container noPadding onScroll={handleScroll}>
+      <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

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/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/ProductForm/index.tsx

@@ -62,8 +62,6 @@ import { IOScrollView } from 'react-native-intersection-observer';
 
 const windowWidth = Dimensions.get('window').width;
 
-
-
 export const ProductOptionsUI = (props: any) => {
 	const {
 		navigation,
@@ -441,7 +439,7 @@ export const ProductOptionsUI = (props: any) => {
 		selOpt
 	}
 
-	const suboptionsLength = product.extras.reduce((acc : number, extras : any) => acc + extras?.options?.reduce((accSuboptions : number, options: any) => accSuboptions + options?.suboptions?.length, 0), 0)
+	const suboptionsLength = product?.extras?.reduce((acc : number, extras : any) => acc + extras?.options?.reduce((accSuboptions : number, options: any) => accSuboptions + options?.suboptions?.length, 0), 0)
 
 	return (
 		<SafeAreaView style={{ flex: 1 }}>

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

@@ -169,7 +169,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<View style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					onClick={() => handleClickproduct()}
@@ -340,7 +340,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					</Placeholder>
 				</View>
 			)}
-		</InView>
+		</View>
 	);
 }, SingleProductCardPropsAreEqual);
 

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

@@ -30,12 +30,7 @@ export const StripeCardsListUI = (props: any) => {
 		cardsList,
 		handleCardClick,
 		onOpen,
-		onCancel,
 		gateway,
-		setCardsList,
-		addCardOpen,
-		isOpenMethod,
-		handlePaymethodDataChange
 	} = props;
 
 	const theme = useTheme();
@@ -148,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={onCancel}
-				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={onCancel}
-					/>
-				</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}
 					>