ordering-ui-react-native 0.14.38 → 0.14.41

package/package.json

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

package/src/components/BusinessProductsListing/index.tsx

@@ -10,7 +10,7 @@ import {
   useToast,
   ToastType
 } from 'ordering-components/native'
-import { OButton, OModal, OText } from '../shared'
+import { OButton, OText } from '../shared'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { SearchBar } from '../SearchBar'
 import { BusinessProductsCategories } from '../BusinessProductsCategories'
@@ -45,7 +45,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     errorQuantityProducts,
     header,
     logo,
-    productModal,
     businessId,
     categoryId,
     productId,
@@ -75,7 +74,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   }
 
   const onProductClick = (product: any) => {
-    setCurProduct(product)
+    onRedirect('ProductDetails', {
+			product: product,
+      businessSlug: business.slug,
+      businessId: business.id,
+      categoryId: categoryId,
+      productId: productId,
+		})
   }
 
   const handleCancel = () => {
@@ -89,10 +94,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     updateProductModal && updateProductModal(null)
   }
 
-  const handlerProductAction = () => {
-    handleCloseProductModal()
-  }
-
   const handleUpsellingPage = () => {
     onRedirect('CheckoutNavigator', {
       screen: 'CheckoutPage',
@@ -258,27 +259,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           handleClick={() => setOpenUpselling(true)}
         />
       )}
-      <OModal
-        open={openModalProduct || !!curProduct || (!!productModal.product && !orderState.loading)}
-        onClose={handleCloseProductModal}
-        entireModal
-        customClose
-        isAvoidKeyBoardView
-      >
-        <ProductForm
-          product={curProduct || productModal.product}
-          businessSlug={business?.slug}
-          businessId={businessId || business?.id || productModal?.product?.category?.business_id}
-          onClose={handleCloseProductModal}
-          navigation={navigation}
-          onSave={handlerProductAction}
-          setProductLogin={setProductLogin}
-          categoryId={categoryId}
-          productId={productId}
-        />
-      </OModal>
       {openUpselling && (
         <UpsellingProducts
+          setOpenUpselling={setOpenUpselling}
           businessId={currentCart?.business_id}
           business={currentCart?.business}
           cartProducts={currentCart?.products}
@@ -286,6 +269,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           openUpselling={openUpselling}
           canOpenUpselling={canOpenUpselling}
           setCanOpenUpselling={setCanOpenUpselling}
+          onRedirect={onRedirect}
         />
       )}
     </>

package/src/components/Cart/index.tsx

@@ -17,7 +17,6 @@ import { BusinessItemAccordion } from '../BusinessItemAccordion';
 import { CouponControl } from '../CouponControl';
 
 import { OButton, OModal, OText, OInput } from '../shared';
-import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -46,8 +45,6 @@ const CartUI = (props: any) => {
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
   const [validationFields] = useValidationFields()
 
-  const [openProduct, setModalIsOpen] = useState(false)
-  const [curProduct, setCurProduct] = useState<any>(null)
   const [openUpselling, setOpenUpselling] = useState(false)
   const [canOpenUpselling, setCanOpenUpselling] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
@@ -64,14 +61,15 @@ const CartUI = (props: any) => {
   }
 
   const handleEditProduct = (product: any) => {
-    setCurProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handlerProductAction = (product: any) => {
-    if (Object.keys(product).length) {
-      setModalIsOpen(false)
-    }
+    props?.onNavigationRedirect &&
+    props?.onNavigationRedirect('ProductDetails', {
+      businessId: cart?.business_id,
+			isCartProduct: true,
+      productCart: product,
+      businessSlug: cart?.business?.slug,
+      categoryId: product?.category_id,
+      productId: product?.id,
+		})
   }
 
   const handleClearProducts = async () => {
@@ -292,25 +290,6 @@ const CartUI = (props: any) => {
           </CheckoutAction>
         )}
       </BusinessItemAccordion>
-      <OModal
-        open={openProduct}
-        entireModal
-        customClose
-        onClose={() => setModalIsOpen(false)}
-        isAvoidKeyBoardView
-      >
-        <ProductForm
-          isCartProduct
-          productCart={curProduct}
-          businessSlug={cart?.business?.slug}
-          businessId={cart?.business_id}
-          categoryId={curProduct?.category_id}
-          productId={curProduct?.id}
-          onSave={handlerProductAction}
-          onClose={() => setModalIsOpen(false)}
-        />
-
-      </OModal>
 
       {openUpselling && (
         <UpsellingProducts
@@ -321,6 +300,8 @@ const CartUI = (props: any) => {
           cartProducts={cart?.products}
           canOpenUpselling={canOpenUpselling}
           setCanOpenUpselling={setCanOpenUpselling}
+          setOpenUpselling={setOpenUpselling}
+          onRedirect={props.onNavigationRedirect}
         />
       )}
       <OModal

package/src/components/Checkout/index.tsx

@@ -152,8 +152,8 @@ const CheckoutUI = (props: any) => {
 
   const deliveryOptions = instructionsOptions?.result && instructionsOptions?.result?.filter((option: any) => option?.enabled)?.map((option: any) => {
     return {
-			value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name) 
-		}
+      value: option?.id, key: option?.id, label: t(option?.name.toUpperCase().replace(/\s/g, '_'), option?.name)
+    }
   })
 
   const handlePlaceOrder = () => {
@@ -241,7 +241,7 @@ const CheckoutUI = (props: any) => {
     setShowGateway({ open: false, closedByUser: true })
   }
 
-  const changeDeliveryOption = (option : any) => {
+  const changeDeliveryOption = (option: any) => {
     handleChangeDeliveryOption(option)
     setIsDeliveryOptionModalVisible(false)
   }
@@ -580,6 +580,7 @@ const CheckoutUI = (props: any) => {
                       cart={cart}
                       isCartPending={cart?.status === 2}
                       isFromCheckout
+                      onNavigationRedirect={onNavigationRedirect}
                     />
                   </>
                 )}
@@ -766,6 +767,7 @@ const CheckoutUI = (props: any) => {
                     amount: cart?.total,
                     delivery_zone_id: cart?.delivery_zone_id,
                     user_id: user?.id,
+                    user_name: user?.name
                   },
                   currency: configs?.stripe_currency?.value || currency,
                   userToken: token,

package/src/components/OrderSummary/index.tsx

@@ -20,7 +20,6 @@ import {
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
 import { OInput, OModal, OText } from '../shared';
-import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
 import { TaxInformation } from '../TaxInformation';
@@ -36,7 +35,8 @@ const OrderSummaryUI = (props: any) => {
     isCartPending,
     isFromCheckout,
     commentState,
-    handleChangeComment
+    handleChangeComment,
+    onNavigationRedirect
   } = props;
 
   const theme = useTheme();
@@ -45,8 +45,6 @@ const OrderSummaryUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ parsePrice, parseNumber }] = useUtils();
   const [validationFields] = useValidationFields();
-  const [openProduct, setModalIsOpen] = useState(false)
-  const [curProduct, setCurProduct] = useState<any>(null)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
 
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
@@ -56,14 +54,16 @@ const OrderSummaryUI = (props: any) => {
   }
 
   const handleEditProduct = (product: any) => {
-    setCurProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handlerProductAction = (product: any) => {
-    if (Object.keys(product).length) {
-      setModalIsOpen(false)
-    }
+    onNavigationRedirect &&
+    onNavigationRedirect('ProductDetails', {
+      isCartProduct: true,
+      productCart: product,
+      businessSlug: cart?.business?.slug,
+      businessId: cart?.business_id,
+      categoryId: product?.category_id,
+      productId: product?.id,
+      isFromCheckout: isFromCheckout,
+		})
   }
 
   const getIncludedTaxes = () => {
@@ -223,25 +223,6 @@ const OrderSummaryUI = (props: any) => {
               )}
             </OSBill>
           )}
-          <OModal
-            open={openProduct}
-            entireModal
-            customClose
-            onClose={() => setModalIsOpen(false)}
-            isAvoidKeyBoardView
-          >
-            <ProductForm
-              isCartProduct
-              productCart={curProduct}
-              businessSlug={cart?.business?.slug}
-              businessId={cart?.business_id}
-              categoryId={curProduct?.category_id}
-              productId={curProduct?.id}
-              onSave={handlerProductAction}
-              onClose={() => setModalIsOpen(false)}
-              isFromCheckout={isFromCheckout}
-            />
-          </OModal>
           <OModal
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null })}

package/src/components/ProductForm/index.tsx

@@ -52,7 +52,6 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeSuboptionState,
     handleChangeCommentState,
     productObject,
-    onClose,
     businessSlug
   } = props
 
@@ -84,7 +83,6 @@ export const ProductOptionsUI = (props: any) => {
   }
 
   const handleRedirectLogin = (product : any) => {
-    onClose()
     navigation.navigate('Login', {product: {businessId: product?.businessId, id: product?.id, categoryId: product?.categoryId, slug: businessSlug} })
   }
 
@@ -110,7 +108,7 @@ export const ProductOptionsUI = (props: any) => {
                         name="x"
                         size={35}
                         style={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
-                        onPress={onClose}
+                        onPress={props.handleGoBack}
                       />
                     </View>
                   </TopHeader>

package/src/components/UpsellingProducts/index.tsx

@@ -16,7 +16,6 @@ import {
   AddButton,
   CloseUpselling
 } from './styles'
-import { ProductForm } from '../ProductForm';
 import { useTheme } from 'styled-components/native'
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
@@ -27,7 +26,9 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     handleUpsellingPage,
     openUpselling,
     canOpenUpselling,
-    setCanOpenUpselling
+    setCanOpenUpselling,
+    onRedirect,
+    setOpenUpselling
   } = props
 
   const theme = useTheme();
@@ -53,8 +54,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
     }
   })
 
-  const [actualProduct, setActualProduct] = useState<any>(null)
-  const [modalIsOpen, setModalIsOpen] = useState(false)
   const [{ parsePrice }] = useUtils()
   const [, t] = useLanguage()
 
@@ -71,13 +70,15 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   }, [upsellingProducts.loading, upsellingProducts?.products.length])
 
   const handleFormProduct = (product: any) => {
-    setActualProduct(product)
-    setModalIsOpen(true)
-  }
-
-  const handleSaveProduct = () => {
-    setActualProduct(null)
-    setModalIsOpen(false)
+    setOpenUpselling && setOpenUpselling(false)
+    onRedirect && onRedirect('ProductDetails', {
+      product: product,
+      businessId: product?.api?.businessId,
+      businessSlug: business.slug,
+      onAction: () => {
+        setOpenUpselling && setOpenUpselling(true)
+      }
+		})
   }
 
   const UpsellingLayout = () => {
@@ -132,13 +133,12 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
         <>
           {!canOpenUpselling || upsellingProducts?.products?.length === 0 ? null : (
             <>
-            {!modalIsOpen && (
               <OBottomPopup
                 title={t('WANT_SOMETHING_ELSE', 'Do you want something else?')}
                 open={openUpselling}
                 onClose={() => handleUpsellingPage()}
               >
-               <UpsellingLayout />
+                <UpsellingLayout />
                 <CloseUpselling>
                   <OButton
                     imgRightSrc=''
@@ -148,28 +148,10 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                   />
                 </CloseUpselling>
               </OBottomPopup>
-            )}
             </>
           )}
         </>
       )}
-      <OModal
-        open={modalIsOpen}
-        onClose={() => setModalIsOpen(false)}
-        entireModal
-        customClose
-        isAvoidKeyBoardView
-      >
-        {actualProduct && (
-         <ProductForm
-          product={actualProduct}
-          businessId={actualProduct?.api?.businessId}
-          businessSlug={business.slug}
-          onSave={() => handleSaveProduct()}
-          onClose={() => setModalIsOpen(false)}
-        />
-        )}
-      </OModal>
     </>
   )
 }

package/src/types/index.tsx

@@ -408,6 +408,8 @@ export interface UpsellingProductsParams {
   isCustomMode?: boolean;
   upsellingProducts?: any;
   business?: any;
+  setOpenUpselling?: any;
+  onRedirect?: any;
   businessId?: number;
   cartProducts?: Array<any>; 
   handleUpsellingPage: () => void;

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

@@ -510,6 +510,7 @@ const CheckoutUI = (props: any) => {
             <WalletPaymentOptionContainer>
               <PaymentOptionWallet
                 cart={cart}
+                businessId={cart?.business_id}
               />
             </WalletPaymentOptionContainer>
           )}

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

@@ -5,11 +5,11 @@ import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
 import { LanguageSelector } from '../LanguageSelector';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, Platform } from 'react-native';
 
 export const Home = (props: any) => {
 	const { onNavigationRedirect } = props;
-	const { width } = useWindowDimensions();
+	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 
@@ -18,7 +18,9 @@ export const Home = (props: any) => {
 	return (
 		<View style={styles.container}>
 			<View>
-				<LanguageSelector />
+				<View style={{paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0 }}>
+					<LanguageSelector />
+				</View>
 				<OIcon
 					src={theme.images.logos.logotypeInvert}
 					style={{

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

@@ -7,6 +7,7 @@ import {
   PaymentOptionWallet as PaymentOptionWalletController,
   useLanguage,
   useUtils,
+  useOrder
 } from 'ordering-components/native'
 
 import {
@@ -18,7 +19,7 @@ import { OText } from '../shared'
 
 const PaymentOptionWalletUI = (props: any) => {
   const {
-    cart,
+    businessId,
     walletsState,
     selectWallet,
     deletetWalletSelected
@@ -26,8 +27,11 @@ const PaymentOptionWalletUI = (props: any) => {
 
   const theme = useTheme()
   const [, t] = useLanguage()
+  const [{ carts }] = useOrder()
   const [{ parsePrice }] = useUtils()
 
+  const cart = carts?.[`businessId:${businessId}`] ?? {}
+
   const styles = StyleSheet.create({
     checkBoxStyle: {
       width: 25,
@@ -68,7 +72,7 @@ const PaymentOptionWalletUI = (props: any) => {
     if (!walletsState.loading && walletsState.result?.length) {
       setCheckedState(
         walletsState.result?.map((wallet: any) => {
-          return !!cart?.wallets?.find((w: any) => w.id === wallet.id)
+          return !!cart?.payment_events?.find((w: any) => w.wallet_id === wallet.id)
         })
       )
     }

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

@@ -32,7 +32,8 @@ import {
 	ProductActions,
 	ExtraOptionWrap,
 	WeightUnitSwitch,
-	WeightUnitItem
+	WeightUnitItem,
+	TopActions
 } from './styles';
 import { OButton, OIcon, OInput, OText } from '../shared';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -295,13 +296,9 @@ export const ProductOptionsUI = (props: any) => {
 	return (
     <SafeAreaView style={{ flex: 1 }}>
       <TopHeader>
-        <OButton
-          imgLeftSrc={theme.images.general.arrow_left}
-          imgRightSrc={null}
-          style={styles.btnBackArrow}
-          onClick={() => handleGoBack()}
-          imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 16 }}
-        />
+	  	<TopActions onPress={() => handleGoBack()}>
+            <OIcon src={theme.images.general.arrow_left} width={15} />
+          </TopActions>
 			</TopHeader>
 			<ScrollView>
 				{!error && (
@@ -352,15 +349,13 @@ export const ProductOptionsUI = (props: any) => {
 												style={styles.slide1}
 												key={i}
 											>
-												<Grayscale amount={isSoldOut ? 1 : 0}>
-													<FastImage
-														style={{ height: '100%' }}
-														source={{
-															uri: optimizeImage(img, 'h_258,c_limit'),
-															priority: FastImage.priority.normal,
-														}}
-													/>
-												</Grayscale>
+                        <FastImage
+                          style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+                          source={{
+                            uri: optimizeImage(img, 'h_258,c_limit'),
+                            priority: FastImage.priority.normal,
+                          }}
+                        />
 											</View>
 										))}
 									</Swiper>
@@ -384,19 +379,18 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<Grayscale amount={isSoldOut ? 1 : 0}>
-														<OIcon
-															url={img}
-															style={{
-																borderColor: theme.colors.lightGray,
-																borderRadius: 8,
-																minHeight: '100%'
-															}}
-															width={56}
-															height={56}
-															cover
-														/>
-													</Grayscale>
+                          <OIcon
+                            url={img}
+                            style={{
+                              borderColor: theme.colors.lightGray,
+                              borderRadius: 8,
+                              minHeight: '100%',
+                              opacity: isSoldOut ? 0.5 : 1
+                            }}
+                            width={56}
+                            height={56}
+                            cover
+                          />
 												</View>
 											</TouchableOpacity>
 
@@ -428,12 +422,12 @@ export const ProductOptionsUI = (props: any) => {
 												style={{ flex: 1, marginBottom: 10 }}>
 												{product?.name || productCart.name}
 											</OText>
-											{product?.calories && (
+											{!!product?.calories && (
 												<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
 												</OText>
 											)}
 										</View>
-										{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
+										{((!!product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (!!product?.estimated_person)) && (
 											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
 												{
 													((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1'))
@@ -452,7 +446,7 @@ export const ProductOptionsUI = (props: any) => {
 										) : (
 											<View style={{ flexDirection: 'row', marginBottom: 10 }}>
 												<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
-												{product?.offer_price && (
+												{!!product?.offer_price && (
 													<OText style={{
 														fontSize: 14,
 														color: '#808080',
@@ -466,7 +460,7 @@ export const ProductOptionsUI = (props: any) => {
 									</>
 								)}
 							</ProductTitle>
-							<ProductDescription>
+						  <ProductDescription>
 								<OText color={theme.colors.textSecondary} size={12} lineHeight={18}>
 									{product?.description || productCart?.description}
 								</OText>
@@ -481,7 +475,7 @@ export const ProductOptionsUI = (props: any) => {
 										key={tag.id}
 										style={styles.productTagWrapper}
 									>
-										{tag?.image ? (
+										{!!tag?.image ? (
 											<OIcon
 												url={optimizeImage(tag?.image, 'h_40,c_limit')}
 												style={styles.productTagImageStyle}
@@ -764,7 +758,7 @@ export const ProductOptionsUI = (props: any) => {
 						</WrapContent>
 					</View>
 				)}
-				{error && error.length > 0 && (
+				{!!error && error.length > 0 && (
 					<NotFoundSource content={error[0]?.message || error[0]} />
 				)}
 			</ScrollView>

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

@@ -5,6 +5,12 @@ export const WrapHeader = styled.View`
   z-index: 1;
 `
 
+export const TopActions = styled.TouchableOpacity`
+	height: 44px;
+	justify-content: center;
+  padding-horizontal: 30px;
+`;
+
 export const TopHeader = styled.View`
   width: 100%;
   flex-direction: row;