ordering-ui-react-native 0.16.14 → 0.16.15

package/package.json

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

package/src/navigators/CheckoutNavigator.tsx

@@ -6,6 +6,7 @@ import AddressForm from '../pages/AddressForm'
 import CartList from '../pages/CartList'
 import CheckoutPage from '../pages/Checkout';
 import BusinessProductsList from '../pages/BusinessProductsList';
+import MultiCheckout from '../pages/MultiCheckout';
 
 const Stack = createStackNavigator();
 
@@ -53,6 +54,11 @@ const CheckoutNavigator = (props: any) => {
         component={AddressForm}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name="MultiCheckout"
+        children={() => <MultiCheckout {...checkoutProps} />}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 }

package/src/navigators/HomeNavigator.tsx

@@ -23,6 +23,7 @@ import HelpAccountAndPayment from '../pages/HelpAccountAndPayment'
 import Sessions from '../pages/Sessions';
 import Splash from '../pages/Splash';
 import ProductDetails from '../pages/ProductDetails';
+import MultiOrdersDetails from '../pages/MultiOrdersDetails';
 const Stack = createStackNavigator();
 
 const HomeNavigator = (e : any) => {
@@ -170,6 +171,11 @@ const HomeNavigator = (e : any) => {
                     component={Sessions}
                     options={{ headerShown: false }}
                   />
+                  <Stack.Screen
+                    name="MultiOrdersDetails"
+                    component={MultiOrdersDetails}
+                    options={{ headerShown: false }}
+                  />
                 </>
               )}
             </>

package/src/pages/MultiCheckout.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Platform, KeyboardAvoidingView, StyleSheet } from 'react-native'
+import { MultiCheckout as MultiCheckoutController } from '../../themes/original/src/components/MultiCheckout'
+
+const MultiCheckout = (props: any) => {
+  const multiCheckoutProps = {
+    ...props,
+    onPlaceOrderClick: (orderUuids: any) => {
+      props.navigation.navigate('MultiOrdersDetails', { orderUuids: orderUuids, isFromMultiCheckout: true })
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={styles.container}
+    >
+      <MultiCheckoutController {...multiCheckoutProps} />
+    </KeyboardAvoidingView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingBottom: 70,
+  },
+});
+
+export default MultiCheckout

package/src/pages/MultiOrdersDetails.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import { MultiOrdersDetails as MultiOrdersDetailsController } from '../../themes/original/src/components/MultiOrdersDetails'
+import styled from 'styled-components/native';
+
+const SafeAreaContainer = styled.SafeAreaView`
+  flex: 1;
+  background-color: ${(props: any) => props.theme.colors.backgroundPage};
+  padding-top: ${Platform.OS === 'ios' ? '0px' : '24px'};
+`;
+
+const MultiOrdersDetails = ({ navigation, route }: any) => {
+  const multiOrdersDetailsProps = {
+    navigation,
+    orderUuids: route.params?.orderUuids || [],
+    isFromMultiCheckout: route.params?.isFromMultiCheckout,
+    onRedirectPage: () => navigation.navigate('BusinessList')
+  }
+
+  return (
+    <SafeAreaContainer>
+      <MultiOrdersDetailsController {...multiOrdersDetailsProps} />
+    </SafeAreaContainer>
+  )
+}
+
+export default MultiOrdersDetails

package/themes/original/index.tsx

@@ -32,6 +32,7 @@ import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
 import { Messages } from './src/components/Messages';
+import { MyOrders } from './src/components/MyOrders';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
@@ -47,6 +48,8 @@ import { UpsellingProducts } from './src/components/UpsellingProducts';
 import { UserVerification } from './src/components/UserVerification';
 import { BusinessListingSearch } from './src/components/BusinessListingSearch';
 import { LastOrders } from './src/components/LastOrders';
+import { MultiCheckout } from './src/components/MultiCheckout'
+import { MultiOrdersDetails } from './src/components/MultiOrdersDetails'
 import NavBar from './src/components/NavBar';
 import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
 import { BusinessController } from './src/components/BusinessController';
@@ -187,6 +190,8 @@ export {
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	MultiCheckout,
+	MultiOrdersDetails,
 	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
@@ -240,6 +245,7 @@ export {
 	UserFormDetailsUI,
 	WalletTransactionItem,
 	Promotions,
+	MyOrders,
 	ORDER_TYPES,
 	USER_TYPE,
 

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

@@ -21,7 +21,8 @@ export const BusinessItemAccordion = (props: any) => {
 		singleBusiness,
 		handleClearProducts,
 		handleClickCheckout,
-		checkoutButtonDisabled
+		checkoutButtonDisabled,
+		isMultiCheckout
 	} = props
 
 	const [orderState] = useOrder();
@@ -139,7 +140,7 @@ export const BusinessItemAccordion = (props: any) => {
 					)}
 				</BIActions>
 			</BIHeader>
-			{!isActive && !isClosed && !!isProducts && (
+			{!isActive && !isClosed && !!isProducts && !isMultiCheckout && (
 				<PriceContainer>
 					<OText>{parsePrice(cart?.total)}</OText>
 					{cart?.valid_products && (

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

@@ -7,10 +7,8 @@ export const BIContainer = styled.View`
   opacity: 1;
   border-radius: 7.6px;
   overflow: hidden;
-  min-height: 120px;
   ${(props: any) => props.isClosed && css`
 	  opacity: 0.5;
-    min-height: 60px;
   `}
 `
 

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

@@ -102,6 +102,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [isCategoryClicked, setCategoryClicked] = useState(false)
 	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 
+	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 	const isOpenFiltProducts = isOpenSearchBar && !!searchValue
 	const filtProductsHeight = Platform.OS === 'ios' ? 0 : 35
@@ -123,13 +124,19 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const handleUpsellingPage = () => {
-		onRedirect('CheckoutNavigator', {
-			screen: 'CheckoutPage',
-			cartUuid: currentCart?.uuid,
-			businessLogo: logo,
-			businessName: business?.name,
-			cartTotal: currentCart?.total
-		})
+		if (isCheckoutMultiBusinessEnabled) {
+			onRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout'
+			})
+		} else {
+			onRedirect('CheckoutNavigator', {
+				screen: 'CheckoutPage',
+				cartUuid: currentCart?.uuid,
+				businessLogo: logo,
+				businessName: business?.name,
+				cartTotal: currentCart?.total
+			})
+		}
 		setOpenUpselling(false)
 	}
 

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

@@ -39,7 +39,8 @@ const CartUI = (props: any) => {
     handleChangeComment,
     commentState,
     onNavigationRedirect,
-    handleRemoveOfferClick
+    handleRemoveOfferClick,
+    isMultiCheckout
   } = props
 
   const theme = useTheme();
@@ -59,6 +60,7 @@ const CartUI = (props: any) => {
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
+	const isCheckoutMultiBusinessEnabled: Boolean = configs?.checkout_multi_business_enabled?.value === '1'
 
   const business: any = (orderState?.carts && Object.values(orderState.carts).find((_cart: any) => _cart?.uuid === props.cartuuid)) ?? {}
   const businessId = business?.business_id ?? null
@@ -96,13 +98,19 @@ const CartUI = (props: any) => {
   const handleUpsellingPage = () => {
     setOpenUpselling(false)
     setCanOpenUpselling(false)
-    props.onNavigationRedirect('CheckoutNavigator', {
-      screen: 'CheckoutPage',
-      cartUuid: cart?.uuid,
-      businessLogo: cart?.business?.logo,
-      businessName: cart?.business?.name,
-      cartTotal: cart?.total
-    })
+    if (isCheckoutMultiBusinessEnabled) {
+			props.onNavigationRedirect('CheckoutNavigator', {
+				screen: 'MultiCheckout'
+			})
+		} else {
+      props.onNavigationRedirect('CheckoutNavigator', {
+        screen: 'CheckoutPage',
+        cartUuid: cart?.uuid,
+        businessLogo: cart?.business?.logo,
+        businessName: cart?.business?.name,
+        cartTotal: cart?.total
+      })
+    }
   }
 
   const getIncludedTaxes = () => {
@@ -165,6 +173,7 @@ const CartUI = (props: any) => {
         handleChangeStore={() => setOpenChangeStore(true)}
         handleClickCheckout={() => setOpenUpselling(true)}
         checkoutButtonDisabled={(openUpselling && !canOpenUpselling) || cart?.subtotal < cart?.minimum || !cart?.valid_address}
+        isMultiCheckout={isMultiCheckout}
       >
         {cart?.products?.length > 0 && cart?.products.map((product: any, i: number) => (
           <ProductItemAccordion

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

@@ -0,0 +1,243 @@
+import React, { useState } from 'react'
+import {
+  useLanguage,
+  useConfig,
+  useUtils,
+  MultiCartsPaymethodsAndWallets as MultiCartsPaymethodsAndWalletsController
+} from 'ordering-components/native'
+import { useTheme } from 'styled-components/native'
+import { View, TouchableOpacity, FlatList, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native'
+import { Placeholder,	PlaceholderLine, Fade } from 'rn-placeholder'
+import { OText, OIcon, OModal, OButton } from '../shared'
+import { getIconCard, flatArray } from '../../utils'
+import { StripeElementsForm } from '../StripeElementsForm'
+import { StripeCardsList } from '../StripeCardsList'
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+import {
+  PMContainer,
+  PMItem,
+  WalletItem
+} from './styles'
+
+const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
+  const {
+    businessIds,
+    paymethodsAndWallets,
+    walletsState,
+    businessPaymethods,
+    paymethodSelected,
+    handleSelectPaymethod,
+    handleSelectWallet,
+    handlePaymethodDataChange
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [{ configs }] = useConfig()
+  const [{ parsePrice }] = useUtils()
+
+	const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
+
+  const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
+  const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'
+
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+      isActive: isWalletCashEnabled
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+      isActive: isWalletPointsEnabled
+    }
+  }
+
+  const getPayIcon = (method: string) => {
+		switch (method) {
+			case 'cash':
+				return theme.images.general.cash
+			case 'card_delivery':
+				return theme.images.general.carddelivery
+			case 'paypal':
+				return theme.images.general.paypal
+			case 'stripe':
+				return theme.images.general.stripe
+			case 'stripe_direct':
+				return theme.images.general.stripecc
+			case 'stripe_connect':
+				return theme.images.general.stripes
+			case 'stripe_redirect':
+				return theme.images.general.stripesb
+			default:
+				return theme.images.general.creditCard
+		}
+	}
+
+  const renderPaymethods = ({ item }: any) => {
+		return (
+			<TouchableOpacity
+				onPress={() => handleSelectPaymethod(item)}
+			>
+				<PMItem
+					key={item.id}
+					isActive={paymethodSelected?.paymethod_id === item.paymethod_id}
+				>
+					<OIcon
+						src={getPayIcon(item.paymethod?.gateway)}
+						width={20}
+						height={20}
+						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : theme.colors.backgroundDark}
+					/>
+					<OText
+						size={10}
+						style={{ margin: 0, marginTop: 4 }}
+						color={paymethodSelected?.paymethod_id === item.paymethod_id ? theme.colors.white : '#000'}
+					>
+						{t(item?.paymethod?.gateway.toUpperCase(), item?.paymethod?.name)}
+					</OText>
+				</PMItem>
+			</TouchableOpacity>
+		)
+	}
+
+  return (
+    <PMContainer>
+      <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
+        {t('PAYMENT_METHODS', 'Payment Methods')}
+      </OText>
+      {paymethodsAndWallets.loading ? (
+        <Placeholder style={{ marginTop: 10 }} Animation={Fade}>
+          <View style={{ display: 'flex', flexDirection: 'row' }}>
+            {[...Array(3)].map((_, i) => (
+              <PlaceholderLine
+                key={i}
+                width={37}
+                height={80}
+                noMargin
+                style={{ borderRadius: 10, marginRight: 10 }}
+              />
+            ))}
+          </View>
+        </Placeholder>
+      ) : (
+        <FlatList
+          horizontal
+					showsHorizontalScrollIndicator={false}
+          data={businessPaymethods.result.filter((paymethod: any) => paymethodsAndWallets.paymethods.find((item: any) => item.id === paymethod.paymethod_id))}
+					renderItem={renderPaymethods}
+					keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
+        />
+      )}
+      {!paymethodsAndWallets.loading && !paymethodsAndWallets.error && paymethodsAndWallets.paymethods.length === 0 && (
+        <OText size={12} style={{ margin: 0 }}>
+          {t('NO_PAYMENT_METHODS', 'No payment methods!')}
+        </OText>
+      )}
+
+      {paymethodSelected?.paymethod?.gateway === 'stripe' && (
+        <View>
+          <OButton
+						text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
+						bgColor={theme.colors.white}
+						borderColor={theme.colors.primary}
+						style={styles.btnAddStyle}
+						textStyle={{ color: theme.colors.primary, fontSize: 12 }}
+						imgRightSrc={null}
+						onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
+					/>
+          <StripeCardsList
+						paymethod={paymethodSelected?.paymethod}
+						businessId={businessIds[0]}
+            businessIds={businessIds}
+						publicKey={paymethodSelected?.data?.publishable}
+						payType={paymethodSelected?.paymethod?.name}
+						onSelectCard={handlePaymethodDataChange}
+					/>
+        </View>
+      )}
+
+      {(paymethodsAndWallets.loading || walletsState.loading) ? (
+        <>
+          {[...Array(2).keys()].map(i => (
+            <PlaceholderLine
+              key={i}
+              height={40}
+              noMargin
+              style={{ marginBottom: 10 }}
+            />
+          ))}
+        </>
+      ) : (
+        <>
+          {walletsState.result.filter((wallet: any) => paymethodsAndWallets.wallets.find((item: any) => item.type === wallet.type)).map((wallet: any, idx: any) => walletName[wallet.type]?.isActive && (
+            <WalletItem
+              key={wallet.type}
+              isBottomBorder={idx === paymethodsAndWallets.wallets?.length - 1}
+              onPress={() => handleSelectWallet(paymethodSelected.wallet_id === wallet.id ? false : true, wallet)}
+            >
+              {paymethodSelected.wallet_id === wallet.id ? (
+                <MaterialCommunityIcons
+                  name="checkbox-marked"
+                  size={25}
+                  color={theme.colors.primary}
+                />
+              ) : (
+                <MaterialCommunityIcons
+                  name="checkbox-blank-outline"
+                  size={25}
+                  color={theme.colors.disabled}
+                />
+              )}
+              <OText size={12} style={{ flex: 1, marginLeft: 15 }}>{walletName[wallet.type]?.name}</OText>
+              <OText size={12}>{parsePrice(wallet.balance)}</OText>
+            </WalletItem>
+          ))}
+        </>
+      )}
+
+      <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={businessIds[0]}
+            businessIds={businessIds}
+            publicKey={paymethodSelected?.data?.publishable}
+						requirements={props.clientSecret}
+						onSelectCard={handlePaymethodDataChange}
+						onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
+					/>
+				</KeyboardAvoidingView>
+			</OModal>
+    </PMContainer>
+  )
+}
+
+const styles = StyleSheet.create({
+	btnAddStyle: {
+		marginVertical: 20,
+		borderRadius: 7.6,
+		shadowOpacity: 0,
+		height: 44,
+		borderWidth: 1
+	},
+})
+
+
+export const MultiCartsPaymethodsAndWallets = (props: any) => {
+  const multiCartsPaymethodsAndWalletsProps = {
+    ...props,
+    UIComponent: MultiCartsPaymethodsAndWalletsUI
+  }
+  return <MultiCartsPaymethodsAndWalletsController {...multiCartsPaymethodsAndWalletsProps} />
+}

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

@@ -0,0 +1,46 @@
+import styled, { css } from 'styled-components/native'
+
+export const PMContainer = styled.View`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+export const PMItem = styled.View`
+  width: 120px;
+  height: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  margin-right: 10px;
+  margin-top: 10px;
+  text-align: center;
+  background-color: ${(props: any) => props.theme.colors.inputDisabled};
+
+  ${(props: any) => props.theme?.rtl && css`
+    margin-left: 10px;
+    margin-right: 0;
+  `}
+
+  ${(props: any) => props.isActive ? css`
+    background-color: ${(props: any) => props.theme.colors.primary};
+  ` : css`
+    border: 1px solid #EAEAEA;
+  `}
+`
+export const WalletItem = styled.TouchableOpacity`
+  width: 100%;
+  display: flex;
+  padding: 20px 0;
+  margin-top: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-top-width: 1px;
+  border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  ${(props: any) => props.isBottomBorder && css`
+    border-bottom-width: 1px;
+    border-bottom-color: ${(props: any) => props.theme.colors.backgroundGray200};
+  `}
+`