ordering-ui-react-native 0.20.0 → 0.21.1

package/package.json

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

package/themes/business/src/components/NewOrderNotification/index.tsx

@@ -45,7 +45,7 @@ const NewOrderNotificationUI = (props: any) => {
     },
   }
 
-  const notificationSound = new Sound('https://cdn.freesound.org/previews/81/81205_1274366-lq.mp3', '', () => {});
+  const notificationSound = new Sound(theme.sounds.notification, '', () => { });
 
   let _timeout: any = null
   let times = 0

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -464,6 +464,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     return (
       <>
         <OrderContentComponent
+          isDelivery
           order={order}
           logisticOrderStatus={logisticOrderStatus}
           isOrderGroup={isOrderGroup}

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -37,14 +37,15 @@ interface OrderContent {
   order: any,
   logisticOrderStatus?: Array<number>,
   isOrderGroup?: boolean,
-  lastOrder?: boolean
+  lastOrder?: boolean,
+  isDelivery?: boolean
 }
 
 export const OrderContentComponent = (props: OrderContent) => {
   const [, t] = useLanguage();
   const theme = useTheme()
   const [{ user }] = useSession()
-  const { order, logisticOrderStatus, isOrderGroup, lastOrder } = props;
+  const { order, logisticOrderStatus, isOrderGroup, lastOrder, isDelivery } = props;
   const [{ parsePrice, parseNumber }] = useUtils();
   const [{ configs }] = useConfig();
   const [orientationState] = useDeviceOrientation();
@@ -218,6 +219,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               })}
               shorcut={order?.business?.address_notes}
               TextStyle={styles.textLink}
+              numberOfLines={isDelivery ? 0 : 1}
             />
           </View>
         )}

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

@@ -284,7 +284,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   }, []);
 
   const handleBackNavigation = () => {
-    navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
+    navigation?.canGoBack() && !props.fromMulti ? navigation.goBack() : navigation.navigate('BottomTab')
   }
 
   const adjustBusiness = async (adjustBusinessId: number) => {

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

@@ -13,7 +13,8 @@ export const CartContent = (props: any) => {
 	const {
 		carts,
 		isOrderStateCarts,
-		onNavigationRedirect
+		onNavigationRedirect,
+		singleBusiness
 	} = props
 
 	const theme = useTheme();
@@ -156,7 +157,7 @@ export const CartContent = (props: any) => {
 						btnStyle={{ borderRadius: 8 }}
 						content={t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
 						btnTitle={t('START_SHOPPING', 'Start shopping')}
-						onClickButton={() => onNavigationRedirect('BusinessList')}
+						onClickButton={() => singleBusiness ? onNavigationRedirect('Business') : onNavigationRedirect('BusinessList')}
 					/>
 				</CCNotCarts>
 			)}

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

@@ -327,7 +327,7 @@ const CheckoutUI = (props: any) => {
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
 			if (cart?.business?.slug) {
-				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
+				onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null, fromMulti: props.fromMulti })
 			} else {
 				onNavigationRedirect('Wallets')
 			}

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

@@ -47,7 +47,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const [{ parsePrice }] = useUtils()
-	const [, { showToast }] = useToast();
+  const [, { showToast }] = useToast();
   const { confirmApplePayPayment } = useApplePay()
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
@@ -214,6 +214,13 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
             publicKey={paymethodSelected?.data?.publishable}
             payType={paymethodSelected?.paymethod?.name}
             onSelectCard={handlePaymethodDataChange}
+            addCardOpen={addCardOpen}
+            setAddCardOpen={setAddCardOpen}
+            openCarts={openCarts}
+            toSave
+            handlePaymethodDataChange={handlePaymethodDataChange}
+            clientSecret={props.clientSecret}
+            onPaymentChange={handlePaymethodDataChange}
           />
         </View>
       )}
@@ -297,7 +304,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
         </>
       )}
 
-      <OModal
+      {/* <OModal
         entireModal
         title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
         open={addCardOpen.stripe}
@@ -320,7 +327,7 @@ const MultiCartsPaymethodsAndWalletsUI = (props: any) => {
             onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
           />
         </KeyboardAvoidingView>
-      </OModal>
+      </OModal> */}
     </PMContainer>
   )
 }

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

@@ -209,8 +209,8 @@ const OrderSummaryUI = (props: any) => {
                 ))
               }
               {
-                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                  <OSTable key={fee?.id}>
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={fee?.id + i}>
                     <OSRow>
                       <OText size={12} numberOfLines={1}>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}

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

@@ -51,7 +51,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		businesses,
 		businessPaginationProps,
 		handleUpdateProducts,
-		handleUpdateBusinesses
+		handleUpdateBusinesses,
+		businessId
 	} = props
 
 	const theme = useTheme();
@@ -207,7 +208,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						btnStyle={{ borderRadius: 8 }}
 						content={t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
 						btnTitle={t('ORDER_NOW', 'Order now')}
-						onClickButton={() => onNavigationRedirect && onNavigationRedirect('BusinessList')}
+						onClickButton={() => onNavigationRedirect && (businessId ? onNavigationRedirect('Business') : onNavigationRedirect('BusinessList'))}
 					/>
 				</NoOrdersWrapper>
 			)}

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

@@ -262,7 +262,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 +291,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 +312,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>
 			)}
@@ -353,29 +360,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
@@ -424,7 +408,7 @@ const PaymentOptionsUI = (props: any) => {
 					/>
 				</View>
 			)}
-
+			{/** Stripe connect add cards */}
 			<OModal
 				entireModal
 				title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}

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

@@ -539,7 +539,10 @@ export const ProductOptionsUI = (props: any) => {
 				<TopHeader>
 					<>
 						<TopActions onPress={() => handleGoBack()}>
-							<OIcon src={theme.images.general.arrow_left} color={theme.colors.textNormal} />
+							<IconAntDesign
+								name='arrowleft'
+								size={26}
+							/>
 						</TopActions>
 						{showTitle && (
 							<OText

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

@@ -82,7 +82,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
 						)
 					)}
-					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={5} style={{ flex: 1 }}>
 						{suboption?.name}
 					</OText>
 				</IconControl>
@@ -96,7 +96,7 @@ export const ProductOptionSubOptionUI = (props: any) => {
 									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
-							<OText size={12} mLeft={5} mRight={5}>
+							<OText size={12}>
 								{state.quantity}
 							</OText>
 							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>

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

@@ -9,30 +9,28 @@ export const Container = styled.TouchableOpacity`
 
 export const IconControl = styled.TouchableOpacity`
   flex-direction: row;
-  padding: 10px;
-  width: 38%;
+  padding: 10px 0 10px 10px;
+  width: 35%;
   align-items: center;
 `
 
 export const QuantityControl = styled.View`
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   margin-right: 5px;
-  flex: 1;
-  width: 60px;
+  width: 55px;
 `
 
 export const PositionControl = styled.View`
   flex-direction: row;
   align-items: center;
   margin-right: 5px;
-  flex: 1;
 `
 
 export const Checkbox = styled.TouchableOpacity`
 `
 
 export const Circle = styled.TouchableOpacity`
-  margin: 0 1px;
+  margin: 0 1.5px;
 `

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

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView, Platform } from 'react-native';
 import {
 	PaymentOptionStripe,
 	useSession,
@@ -8,7 +8,7 @@ import {
 import { PlaceholderLine } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
 import { getIconCard } from '../../utils';
-import { OAlert, OIcon, OText } from '../shared';
+import { OAlert, OIcon, OText, OModal } from '../shared';
 
 import { NotFoundSource } from '../NotFoundSource';
 
@@ -17,6 +17,9 @@ import {
 	OSItemContent,
 	OSItemActions,
 } from '../PaymentOptionStripe/styles';
+import { StripeElementsForm } from '../StripeElementsForm';
+
+import { KeyboardAvoidingView } from 'react-native';
 
 export const StripeCardsListUI = (props: any) => {
 	const {
@@ -26,7 +29,11 @@ export const StripeCardsListUI = (props: any) => {
 		cardsList,
 		handleCardClick,
 		setAddCardOpen,
-		gateway
+		gateway,
+		setCardsList,
+		addCardOpen,
+		isOpenMethod,
+		handlePaymethodDataChange
 	} = props;
 
 	const theme = useTheme();
@@ -42,8 +49,8 @@ export const StripeCardsListUI = (props: any) => {
 	}
 
 	useEffect(() => {
-		if (!cardsList && !cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
-			setAddCardOpen(true)
+		if (!cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+			setAddCardOpen({ ...addCardOpen, stripe: true })
 		}
 	}, [cardsList?.loading])
 
@@ -128,6 +135,33 @@ 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/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/types/index.tsx

@@ -256,6 +256,7 @@ export interface BusinessProductsListingParams {
 	onBusinessClick?: any;
 	onNavigationRedirect?: any;
 	businessSingleId?: number | string
+	fromMulti?: boolean
 }
 export interface BusinessBasicInformationParams {
 	navigation?: any;
@@ -392,6 +393,7 @@ export interface OrdersOptionParams {
 	BusinessControllerSkeletons?: any,
 	businessPaginationProps?: any,
 	businesses?: any
+	businessId?: any;
 }
 export interface ActiveOrdersParams {
 	orders?: any,