ordering-ui-react-native 0.14.38 → 0.14.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.38",
+  "version": "0.14.39",
   "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/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/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 && (

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;