ordering-ui-react-native 0.14.96 → 0.14.99

package/package.json

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

package/src/components/StripeMethodForm/index.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import { useLanguage } from 'ordering-components/native'
-import { GooglePayButton, useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
+import { useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
 import { OButton } from '../shared';
 import { Platform, View } from 'react-native';
 import { StripeMethodFormParams } from '../../types';
-
+import Spinner from 'react-native-loading-spinner-overlay';
+import { android_app_id } from '../../config.json'
 export const StripeMethodForm = (props: StripeMethodFormParams) => {
   const {
     cart,
@@ -17,10 +18,11 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
   const [initialized, setInitialized] = useState(false);
+  const [loadingGooglePayment, setLoadingGooglePayment] = useState(false)
   const [, t] = useLanguage()
- 
+
   useEffect(() => {
-    if (paymethod !== 'google_pay') return
+    if (paymethod !== 'google_pay' || !initGooglePay) return
     if (Platform.OS === 'ios') {
       setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
       return
@@ -29,7 +31,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
       try {
         const { error } = await initGooglePay({
           testEnv: devMode,
-          merchantName: 'Widget Store',
+          merchantName: android_app_id,
           countryCode: 'US',
           billingAddressConfig: {
             format: 'FULL',
@@ -61,14 +63,14 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
   }, [])
 
   const createPaymentMethod = async () => {
-
+    setLoadingGooglePayment(true)
     const { error, paymentMethod } = await createGooglePayPaymentMethod({
       amount: cart?.balance ?? cart?.total,
       currencyCode: 'USD',
     });
-
     if (error) {
       setErrors(error.code + ' - ' + error.message);
+      setLoadingGooglePayment(false)
       return;
     } else if (paymentMethod) {
       handleSource({
@@ -82,8 +84,8 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
         }
       })
       onCancel()
+      setLoadingGooglePayment(false)
     }
-    setInitialized(false);
   };
 
   const pay = async () => {
@@ -130,17 +132,17 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     <>
       {paymethod === 'google_pay' ? (
         <View>
-          {!loading && initialized && (
-            <OButton
-              textStyle={{
-                color: '#fff'
-              }}
-              imgRightSrc={null}
-              onClick={createPaymentMethod}
-              isDisabled={!initialized}
-              text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
-            />
-          )}
+          <OButton
+            textStyle={{
+              color: '#fff'
+            }}
+            imgRightSrc={null}
+            onClick={createPaymentMethod}
+            isDisabled={loading || !initialized}
+            text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
+            isLoading={loading || !initialized}
+            style={{ marginTop: 20 }}
+          />
         </View>
       ) : (
         <View>
@@ -158,6 +160,9 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
           )}
         </View>
       )}
+      <Spinner
+        visible={loadingGooglePayment}
+      />
     </>
   )
 }

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

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ProductsList, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
-import { OIcon, OText } from '../shared';
+import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native';
+import { useTheme } from 'styled-components/native';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -32,8 +33,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const [, t] = useLanguage();
   const [{ optimizeImage }] = useUtils()
   const [{ configs }] = useConfig()
+  const theme = useTheme()
   const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
-
+  const [openDescription, setOpenDescription] = useState<any>(null)
   const handleOnLayout = (event: any, categoryId: any) => {
     const _categoriesLayout = { ...categoriesLayout }
     const categoryKey = 'cat_' + categoryId
@@ -84,8 +86,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
         const products = !isUseParentCategory
-          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
-          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+          ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
+
+        const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
+
         return (
           <React.Fragment key={'cat_' + category.id}>
             {products.length > 0 && (
@@ -106,6 +111,28 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     {category.name}
                   </OText>
                 </View>
+                {!!category?.description && (
+                  <View style={{ position: 'relative' }}>
+                    <OText size={12} weight={'500'} mBottom={5}>
+                      {shortCategoryDescription}
+                      {category?.description?.length > 80 && (
+                        <OButton
+                          style={{ height: 15, paddingRight: 0, paddingLeft: 0, borderWidth: 0 }}
+                          text={t('SEE_MORE', 'See more')}
+                          parentStyle={{ padding: 0 }}
+                          onClick={() => setOpenDescription(category)}
+                          bgColor='transparent'
+                          textStyle={{
+                            fontSize: 12,
+                            borderBottomWidth: 1,
+                            borderBottomColor: theme.colors.primary,
+                            color: theme.colors.primary
+                          }}
+                        />
+                      )}
+                    </OText>
+                  </View>
+                )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
@@ -188,6 +215,23 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
+      <OModal
+        open={!!openDescription}
+        title={openDescription?.name}
+        onClose={() => setOpenDescription(null)}
+      >
+        <View style={{ padding: 20 }}>
+          {!!openDescription?.image && (
+            <OIcon
+              url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
+              width={240}
+              height={240}
+              style={{ borderRadius: 7.6 }}
+            />
+          )}
+          <OText>{openDescription?.description}</OText>
+        </View>
+      </OModal>
     </ProductsContainer>
   );
 };

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

@@ -96,11 +96,24 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const onProductClick = (product: any) => {
-    onRedirect('ProductDetails', {
-			product: product,
-      businessSlug: business.slug,
-      businessId: business.id,
-		})
+		const cartProduct = currentCart?.products?.find((cproduct: any) => cproduct?.id === product?.id)
+		if (cartProduct) {
+			onRedirect('ProductDetails', {
+				businessId:  business.id,
+				isCartProduct: true,
+				productCart: cartProduct,
+				businessSlug: business?.slug,
+				categoryId: cartProduct?.category_id,
+				productId: cartProduct?.id,
+			})
+		} else {
+			onRedirect('ProductDetails', {
+				product: product,
+				businessSlug: business.slug,
+				businessId: business.id,
+			})
+		}
+
 	}
 
 	const handleCancel = () => {

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

@@ -77,25 +77,18 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 	const editMode = typeof product?.code !== 'undefined';
 
 	const removeToBalance = editMode ? product?.quantity : 0;
-	const cart = orderState.carts[`businessId:${businessId}`];
-	const productCart = cart?.products?.find(
-		(prod: any) => prod.id === product?.id,
-	);
-	const totalBalance = (productCart?.quantity || 0) - removeToBalance;
+	const cartProducts: any = Object.values(orderState.carts).reduce((products: any, _cart: any) => [...products, ..._cart?.products], [])
+	const productBalance = cartProducts.reduce((sum: any, _product: any) => sum + (_product.id === product?.id ? _product.quantity : 0), 0)
+
+	const totalBalance = (productBalance || 0) - removeToBalance
 
 	const maxCartProductConfig =
 		(stateConfig.configs.max_product_amount
 			? parseInt(stateConfig.configs.max_product_amount)
 			: 100) - totalBalance;
 
-	const productBalance =
-		(cart?.products?.reduce(
-			(sum: any, _product: any) =>
-				sum + (product && _product.id === product?.id ? _product.quantity : 0),
-			0,
-		) || 0) - removeToBalance;
 	let maxCartProductInventory =
-		(product?.inventoried ? product?.quantity : undefined) - productBalance;
+		(product?.inventoried ? product?.quantity : undefined) - totalBalance;
 	maxCartProductInventory = !isNaN(maxCartProductInventory)
 		? maxCartProductInventory
 		: maxCartProductConfig;