ordering-ui-react-native 0.14.33 → 0.14.34-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.33",
+  "version": "0.14.34-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -55,7 +55,7 @@
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#development",
+    "ordering-components": "github:Ordering-Inc/ordering-components#release",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",

package/src/components/BusinessItemAccordion/index.tsx

@@ -80,9 +80,9 @@ export const BusinessItemAccordion = (props: any) => {
           </BIContentInfo>
         </BIInfo>
 
-        {!isClosed && !!isProducts && cart?.valid_products && cart?.total > 0 && (
+        {!isClosed && !!isProducts && cart?.valid_products && (
           <BITotal>
-            <OText color='#000'>{parsePrice(cart?.total)}</OText>
+            <OText color='#000'>{parsePrice(cart?.total >= 0 ? cart?.total : 0)}</OText>
             <OText>{t('CART_TOTAL', 'Total')}</OText>
           </BITotal>
         )}

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

@@ -8,7 +8,7 @@ import {
   useValidationFields,
 } from 'ordering-components/native';
 
-import { CContainer, CheckoutAction, } from './styles';
+import { CContainer, CheckoutAction, Divider } from './styles';
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from '../OrderSummary/styles';
 
@@ -16,8 +16,7 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
 import { BusinessItemAccordion } from '../BusinessItemAccordion';
 import { CouponControl } from '../CouponControl';
 
-import { OButton, OModal, OText, OInput } from '../shared';
-import { ProductForm } from '../ProductForm';
+import { OButton, OModal, OText, OInput, OAlert } from '../shared';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -36,7 +35,8 @@ const CartUI = (props: any) => {
     handleCartOpen,
     setIsCartsLoading,
     handleChangeComment,
-    commentState
+    commentState,
+    handleRemoveOfferClick
   } = props
 
   const theme = useTheme()
@@ -46,11 +46,10 @@ 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 })
+  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
   const isCartPending = cart?.status === 2
   const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled
@@ -64,14 +63,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 () => {
@@ -106,6 +106,22 @@ const CartUI = (props: any) => {
     }
   }
 
+  const getIncludedTaxesDiscounts = () => {
+    return cart?.taxes?.filter((tax : any) => tax?.type === 1)?.reduce((carry : number, tax : any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
+  }
+
+  const onRemoveOffer = (id: number) => {
+    setConfirm({
+      open: true,
+      content: [t('QUESTION_DELETE_OFFER', 'Are you sure that you want to delete the offer?')],
+      title: t('OFFER', 'Offer'),
+      handleOnAccept: () => {
+        setConfirm({ ...confirm, open: false })
+        handleRemoveOfferClick(id)
+      }
+    })
+  }
+
   return (
     <CContainer>
       <BusinessItemAccordion
@@ -137,11 +153,11 @@ const CartUI = (props: any) => {
                 {parsePrice(cart?.subtotal + getIncludedTaxes())}
               </OText>
             </OSTable>
-            {cart?.discount > 0 && cart?.total >= 0 && (
+            {cart?.discount > 0 && cart?.total >= 0 && cart?.offers?.length === 0 && (
               <OSTable>
                 {cart?.discount_type === 1 ? (
                   <OText>
-                    {t('DISCOUNT', 'Discount')}
+                    {t('DISCOUNT', 'Discount')}{' '}
                     <OText>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
                   </OText>
                 ) : (
@@ -150,18 +166,35 @@ const CartUI = (props: any) => {
                 <OText>- {parsePrice(cart?.discount || 0)}</OText>
               </OSTable>
             )}
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_1' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
+                </OSTable>
+              ))
+            }
+            <Divider />
             {cart?.subtotal_with_discount > 0 && cart?.discount > 0 && cart?.total >= 0 && (
               <OSTable>
-                {cart?.discount_type === 1 ? (
-                  <>
-                    <OText>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
-                    <OText>{parsePrice(cart?.subtotal_with_discount + cart?.tax || 0)}</OText>
-                  </>
+                <OText numberOfLines={1}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
+                {cart?.business?.tax_type === 1 ? (
+                  <OText>{parsePrice(cart?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0)}</OText>
                 ) : (
-                  <>
-                    <OText>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
-                    <OText>{parsePrice(cart?.subtotal_with_discount || 0)}</OText>
-                  </>
+                  <OText>{parsePrice(cart?.subtotal_with_discount ?? 0)}</OText>
                 )}
               </OSTable>
             )}
@@ -173,11 +206,11 @@ const CartUI = (props: any) => {
                       {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                       {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                     </OText>
-                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax })} >
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: tax, type: 'tax' })} >
                       <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                     </TouchableOpacity>
                   </OSRow>
-                  <OText>{parsePrice(tax?.summary?.tax || 0)}</OText>
+                  <OText>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
                 </OSTable>
               ))
             }
@@ -189,11 +222,32 @@ const CartUI = (props: any) => {
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
                       ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
                     </OText>
-                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+                </OSTable>
+              ))
+            }
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_3' })}>
                       <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
                     </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
                   </OSRow>
-                  <OText>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                  <OText>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
                 </OSTable>
               ))
             }
@@ -203,6 +257,27 @@ const CartUI = (props: any) => {
                 <OText>{parsePrice(cart?.delivery_price)}</OText>
               </OSTable>
             )}
+            {
+              cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
+                <OSTable key={offer.id}>
+                  <OSRow>
+                    <OText>{offer.name}</OText>
+                    {offer.rate_type === 1 && (
+                      <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
+                    )}
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => setOpenTaxModal({ open: true, data: offer, type: 'offer_target_2' })}>
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                    <TouchableOpacity style={{ marginLeft: 3 }} onPress={() => onRemoveOffer(offer?.id)}>
+                      <AntIcon name='closecircle' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText>
+                    - {parsePrice(offer?.summary?.discount)}
+                  </OText>
+                </OSTable>
+              ))
+            }
             {cart?.driver_tip > 0 && (
               <OSTable>
                 <OText>
@@ -233,7 +308,7 @@ const CartUI = (props: any) => {
                   {t('TOTAL', 'Total')}
                 </OText>
                 <OText style={{ fontWeight: 'bold' }} color={theme.colors.primary}>
-                  {cart?.total >= 1 && parsePrice(cart?.total)}
+                  {parsePrice(cart?.total >= 0 ? cart?.total : 0)}
                 </OText>
               </OSTable>
             </OSTotal>
@@ -292,45 +367,44 @@ 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
-          handleUpsellingPage={handleUpsellingPage}
-          openUpselling={openUpselling}
-          businessId={cart?.business_id}
-          business={cart?.business}
-          cartProducts={cart?.products}
-          canOpenUpselling={canOpenUpselling}
-          setCanOpenUpselling={setCanOpenUpselling}
-        />
-      )}
+      {
+        openUpselling && (
+          <UpsellingProducts
+            handleUpsellingPage={handleUpsellingPage}
+            openUpselling={openUpselling}
+            businessId={cart?.business_id}
+            business={cart?.business}
+            cartProducts={cart?.products}
+            canOpenUpselling={canOpenUpselling}
+            setCanOpenUpselling={setCanOpenUpselling}
+            setOpenUpselling={setOpenUpselling}
+            onRedirect={props.onNavigationRedirect}
+          />
+        )
+      }
       <OModal
         open={openTaxModal.open}
         onClose={() => setOpenTaxModal({ open: false, data: null })}
         entireModal
+        title={`${openTaxModal.data?.name ||
+          t('INHERIT_FROM_BUSINESS', 'Inherit from business')} ${openTaxModal.data?.rate_type !== 2 ? `(${typeof openTaxModal.data?.rate === 'number' ? `${openTaxModal.data?.rate}%` : `${parsePrice(openTaxModal.data?.fixed ?? 0)} + ${openTaxModal.data?.percentage}%`})` : ''}  `}
       >
-        <TaxInformation data={openTaxModal.data} products={cart?.products} />
+        <TaxInformation
+          type={openTaxModal.type}
+          data={openTaxModal.data}
+          products={cart?.products}
+        />
       </OModal>
-    </CContainer>
+      <OAlert
+        open={confirm.open}
+        title={confirm.title}
+        content={confirm.content}
+        onAccept={confirm.handleOnAccept}
+        onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
+        onClose={() => setConfirm({ ...confirm, open: false, title: null })}
+      />
+    </CContainer >
   )
 }
 

package/src/components/Cart/styles.tsx

@@ -26,3 +26,10 @@ export const CheckoutAction = styled.View`
   margin-top: 10px;
   margin-bottom: 10px;
 `
+
+export const Divider = styled.View`
+  border-color: #EAEAEA;
+  border-width: 1px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+`

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)
   }
@@ -309,9 +309,11 @@ const CheckoutUI = (props: any) => {
                 <OText size={22} numberOfLines={2} ellipsizeMode='tail' >
                   {businessName || businessDetails?.business?.name}
                 </OText>
-                <OText size={22}>
-                  {cart?.total >= 1 && parsePrice(cart?.total) || cartTotal >= 1 && parsePrice(cartTotal)}
-                </OText>
+                {!cartState.loading && (
+                  <OText size={22}>
+                    {parsePrice(cart?.total >= 0 ? cart?.total : 0) || parsePrice(cartTotal >= 0 ? cartTotal : 0)}
+                  </OText>
+                )}
               </View>
             </ChTotal>
           </ChSection>
@@ -580,6 +582,7 @@ const CheckoutUI = (props: any) => {
                       cart={cart}
                       isCartPending={cart?.status === 2}
                       isFromCheckout
+                      onNavigationRedirect={onNavigationRedirect}
                     />
                   </>
                 )}
@@ -766,6 +769,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,