ordering-ui-react-native 0.21.53 → 0.21.54-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.53",
+  "version": "0.21.54-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -52,13 +52,13 @@
     "@segment/analytics-react-native": "2.1.11",
     "@segment/sovran-react-native": "0.2.6",
     "@sentry/react-native": "^2.6.0",
-    "@stripe/stripe-react-native": "^0.2.0",
+		"@stripe/stripe-react-native": "0.23.0",
     "@types/react-native-loading-spinner-overlay": "^0.5.2",
     "@types/react-native-snap-carousel": "^3.8.4",
     "@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",
@@ -76,7 +76,7 @@
     "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
-    "react-native-date-picker": "^4.2.13",
+    "react-native-date-picker": "4.2.14",
     "react-native-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",
@@ -86,7 +86,7 @@
     "react-native-gesture-handler": "^1.8.0",
     "react-native-get-random-values": "1.8.0",
     "react-native-gifted-chat": "^0.16.3",
-    "react-native-google-places-autocomplete": "^2.1.3",
+    "react-native-google-places-autocomplete": "2.1.3",
     "react-native-html-to-pdf": "^0.10.0",
     "react-native-image-picker": "^4.0.6",
     "react-native-intersection-observer": "^0.0.9",
@@ -116,7 +116,7 @@
     "react-native-tracking-transparency": "^0.1.1",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
-    "react-native-webview": "^11.22.7",
+    "react-native-webview": "^11.6.4",
     "react-native-youtube-iframe": "^2.2.2",
     "rn-placeholder": "^3.0.3",
     "styled-components": "^5.1.1",
@@ -128,8 +128,8 @@
     "@babel/core": "^7.11.6",
     "@babel/runtime": "^7.11.2",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-native": "^0.63.25",
     "@types/react-native-calendar-picker": "^7.0.2",
     "babel-jest": "^26.3.0",

package/src/DeliveryApp.tsx

@@ -7,7 +7,8 @@
  */
 
 import * as React from 'react';
-import { LogBox } from 'react-native';
+import { LogBox, Platform } from 'react-native';
+import * as Sentry from "@sentry/react-native";
 import { OrderingProvider } from 'ordering-components/native';
 import RNBootSplash from "react-native-bootsplash";
 
@@ -22,6 +23,47 @@ import theme from './theme.json';
 import AppContainer from './AppContainer';
 import { FacebookPixel } from './components/FacebookPixel';
 
+Sentry.init({
+  environment: Platform.OS === 'ios' ? 'ios' : 'android',
+  dsn: 'https://e5e1115dc93b49109f4ab65f2098bef9@o460529.ingest.sentry.io/5722123',
+  release: 'ordering-ui-native@' + process.env.npm_package_version,
+  ignoreErrors: [
+    'is not defined',
+    'is not a function',
+    'can\'t find variable',
+    'objects are not valid',
+    'element type is invalid',
+    'requiring module',
+    'has not been registered',
+    'failed to connect to debugger!',
+    'rendered more hooks than',
+    'rendered fewer hooks than',
+    'should have a queue',
+    'the OS most likely terminated',
+    'Connection timed out',
+    'java.io.EOFException',
+    'Abort',
+    'Segfault',
+    'Failed to allocate a',
+    'Application Not Responding',
+    'connection no longer valid',
+    'IllegalInstruction',
+    'React.Children.only expected to receive a single React element child.',
+    'unrecognized selector sent to instance'
+  ],
+  tracesSampleRate: 0.2,
+  // Release health
+  enableAutoSessionTracking: true,
+  // Sessions close after app is 10 seconds in the background.
+  sessionTrackingIntervalMillis: 10000,
+
+  integrations: [
+    new Sentry.ReactNativeTracing({
+      routingInstrumentation: reactNavigationV5Instrumentation,
+    })
+  ]
+});
+
 LogBox.ignoreLogs([
   'Sending \`onAnimatedValueUpdate` with no listeners registered.',
   'Non-serializable values were found in the navigation state.',

package/src/components/BusinessesListing/index.tsx

@@ -191,7 +191,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
       </OrderControlContainer>

package/src/components/PaymentOptionsWebView/index.tsx

@@ -156,6 +156,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
                 user_id: user?.id,
                 user_name: user?.name
               },
+              xappx: ordering?.appId,
               currency: configs?.stripe_currency?.value || currency,
               userToken: token,
               clientId: webviewPaymethod?.credentials?.client_id,

package/src/components/StripeMethodForm/index.tsx

@@ -3,7 +3,6 @@ import { useLanguage, useConfig, useOrder } from 'ordering-components/native'
 import { useGooglePay, useApplePay } from '@stripe/stripe-react-native'
 import { Platform } from 'react-native';
 import { StripeMethodFormParams } from '../../types';
-import { android_app_id } from '../../config.json'
 
 export const StripeMethodForm = (props: StripeMethodFormParams) => {
   const {
@@ -17,7 +16,9 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     placeByMethodPay,
     methodPaySupported,
     setPlaceByMethodPay,
-    cartTotal
+    cartTotal,
+    androidAppId,
+    businessNames
   } = props
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
@@ -61,7 +62,7 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
       })
       const { error } = await initGooglePay({
         testEnv: devMode,
-        merchantName: android_app_id,
+        merchantName: androidAppId,
         countryCode: 'US',
         billingAddressConfig: {
           format: 'FULL',
@@ -152,7 +153,8 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
 
     const { error, paymentMethod } = await presentApplePay({
       cartItems: [{
-        label: t('CART', 'Cart'),
+        label: businessNames ? `${businessNames.join(', ')} ${t('VIA_CHEW_APP', 'via Chew App')}`
+        : `${cart?.business?.name} ${t('VIA_CHEW_APP', 'via Chew App')}`,
         amount: cartTotal?.toString?.() ?? cart?.balance?.toString() ?? cart?.total?.toString?.(),
         paymentType: 'Immediate'
       }],

package/src/components/VerifyPhone/styles.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components/native';
 
 export const Container = styled.View`
   width: 100%;
-  padding: 0 43px;
+  padding: 0 30px;
 `
 
 export const CountDownContainer = styled.View`
@@ -20,7 +20,6 @@ export const ResendSection = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: center;
-  flex-wrap: wrap;
 `
 
 export const WrappCountdown = styled.View`

package/src/types/index.tsx

@@ -494,5 +494,7 @@ export interface StripeMethodFormParams {
   placeByMethodPay?: any
   methodPaySupported?: any,
   setPlaceByMethodPay?: any,
-  cartTotal?: number
+  cartTotal?: number,
+  androidAppId?: string,
+  businessNames?: Array<string>
 }

package/themes/business/index.tsx

@@ -29,6 +29,7 @@ import { OrderSummary } from './src/components/OrderSummary';
 import { PhoneInputNumber } from './src/components/PhoneInputNumber';
 import { PreviousMessages } from './src/components/PreviousMessages';
 import { PreviousOrders } from './src/components/PreviousOrders';
+import { PrinterSettings } from './src/components/PrinterSettings';
 import { ProductItemAccordion } from './src/components/ProductItemAccordion';
 import { ReviewCustomer } from './src/components/ReviewCustomer'
 import { SearchBar } from './src/components/SearchBar';
@@ -43,6 +44,7 @@ import { NewOrderNotification } from './src/components/NewOrderNotification';
 import { DriverSchedule } from './src/components/DriverSchedule';
 import { ScheduleBlocked } from './src/components/ScheduleBlocked';
 import { OrderDetailsLogistic } from './src/components/OrderDetailsLogistic'
+import { Sessions } from './src/components/Sessions';
 //OComponents
 import {
   OText,
@@ -102,10 +104,12 @@ export {
   PhoneInputNumber,
   PreviousMessages,
   PreviousOrders,
+  PrinterSettings,
   ProductItemAccordion,
   ReviewCustomer,
   SafeAreaContainerLayout,
   SearchBar,
+  Sessions,
   SignupForm,
   StoresList,
   UserFormDetailsUI,

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

@@ -31,6 +31,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     notShowCustomerPhone,
     orderTitle,
     appTitle,
+    isLoadingOrder
   } = props;
 
   const [, t] = useLanguage();
@@ -277,7 +278,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     }
 
     bodyToSend.id = orderId;
-    handleUpdateOrder && handleUpdateOrder(bodyToSend.status, bodyToSend);
+    handleUpdateOrder?.(bodyToSend.status, bodyToSend);
   };
 
   useEffect(() => {
@@ -517,7 +518,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             ...styles.bottomParent,
             marginBottom: Platform.OS === 'ios'
               ? 30 : (keyboardState.height === 0)
-                ? isPage ? 0 : 30
+                ? isPage ? 0 : 40
                 : keyboardState.height - (isPage ? 20 : -10)
           }}
         >
@@ -529,7 +530,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             style={{ borderRadius: 7, height: 45 }}
             parentStyle={{ width: '100%' }}
             textStyle={{ color: '#FFF', fontSize: 18 }}
-            isDisabled={showTextArea && !comments}
+            isDisabled={(showTextArea && !comments) || isLoadingOrder}
             onClick={() => handleAcceptOrReject()}
           />
         </View>

package/themes/business/src/components/BusinessProductList/ProductList.tsx

@@ -1,45 +1,56 @@
-import React from 'react'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import React, { useCallback } from 'react'
+import { StyleSheet, View, TouchableOpacity } from 'react-native'
 import { useTheme } from 'styled-components/native';
-import { OIcon, OText, OIconButton } from '../shared';
+import { OIcon, OText } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import ToggleSwitch from 'toggle-switch-react-native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import { SearchBar } from '../SearchBar';
+import { IOScrollView } from 'react-native-intersection-observer';
 import {
   useLanguage,
-  useUtils
+  useUtils,
+  ToastType,
+  useToast,
 } from 'ordering-components/native'
 
+const PIXELS_TO_SCROLL = 2000
+
 export const ProductList = (props: any) => {
-  const { categoryState, onClose, updateProduct } = props
+  const { productsList, onClose, updateProduct, searchValue, handleChangeSearch, getCategoryProducts } = props
 
-  const { loading, products, error } = categoryState
+  const { loading, products, error } = productsList
 
   const theme = useTheme()
   const [{ optimizeImage }] = useUtils();
+  const [, { showToast }] = useToast()
   const [, t] = useLanguage()
 
   const styles = StyleSheet.create({
     container: {
-      paddingBottom: 20,
-      marginBottom: 0,
       flex: 1,
+      marginBottom: 0
     },
     header: {
       flexDirection: 'row',
       justifyContent: 'space-between',
       marginBottom: 10,
     },
-    arrowLeft: {
-      maxWidth: 40,
-      height: 25,
-      justifyContent: 'flex-end',
-      marginTop: 8
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0
     },
     sectionTitle: {
       fontStyle: 'normal',
       fontWeight: '600',
-      fontSize: 24,
+      fontSize: 20,
       color: theme.colors.textGray,
     },
     logo: {
@@ -60,27 +71,61 @@ export const ProductList = (props: any) => {
       height: 35,
       marginRight: 5
     },
+    borderStyle: {
+      borderColor: theme.colors.red,
+      borderWidth: 0,
+      borderRadius: 10,
+    },
   });
 
   const handleSwitch = (enabled: boolean, categoryId: any, productId: any) => {
     updateProduct && updateProduct(categoryId, productId, { enabled })
   };
 
+  const handleScroll = ({ nativeEvent }: any) => {
+    const y = nativeEvent.contentOffset.y;
+    const height = nativeEvent.contentSize.height;
+    const hasMore = !(
+      productsList.pagination.totalPages === productsList.pagination.currentPage
+    );
+
+    if (y + PIXELS_TO_SCROLL > height && !productsList.loading && hasMore && productsList?.products?.length > 0) {
+      getCategoryProducts(false)
+      showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
+    }
+  };
+
   return (
     <View style={{ flex: 1, paddingHorizontal: 20, paddingVertical: 20 }}>
       <View style={styles.header}>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          borderColor={theme.colors.clear}
-          iconStyle={{ width: 20, height: 20 }}
-          style={styles.arrowLeft}
-          onClick={onClose}
-        />
-        <OText style={styles.sectionTitle}>{t('PRODUCTS', 'Products')}</OText>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <TouchableOpacity
+            onPress={onClose}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <OText style={styles.sectionTitle}>{t('PRODUCTS', 'Products')}</OText>
+        </View>
+        <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
+          <SearchBar
+            borderStyle={styles.borderStyle}
+            onSearch={handleChangeSearch}
+            searchValue={searchValue}
+            lazyLoad
+            isCancelXButtonShow={!!searchValue}
+            onCancel={() => handleChangeSearch('')}
+            placeholder={t('SEARCH', 'Search')}
+            containerStyle={{ width: 180 }}
+          />
+        </View>
       </View>
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        style={styles.container}>
+      <IOScrollView
+        style={styles.container}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        bounces={false}
+      >
         {!loading && products?.length === 0 && (
           <NotFoundSource
             content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
@@ -98,7 +143,7 @@ export const ProductList = (props: any) => {
                   justifyContent: 'space-between',
                   borderBottomColor: theme.colors.borderTops,
                   borderBottomWidth: 1,
-                  paddingVertical: 10
+                  paddingVertical: 15
                 }}
               >
                 <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', marginRight: 36 }}>
@@ -145,7 +190,7 @@ export const ProductList = (props: any) => {
             ))}
           </View>
         )}
-      </ScrollView>
+      </IOScrollView>
     </View>
   )
 }

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

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { View, StyleSheet, ScrollView, Dimensions } from 'react-native';
+import { View, StyleSheet, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { useTheme } from 'styled-components/native';
+import { SearchBar } from '../SearchBar';
 import {
   ToastType,
   useToast,
   useLanguage,
-  BusinessAndProductList,
+  StoreProductList
 } from 'ordering-components/native';
 import { NotFoundSource } from '../NotFoundSource';
-import { OText, OIconButton } from '../shared';
+import { OText, OIcon } from '../shared';
 import { IterateCategories } from './IterateCategories';
 import { ProductList } from './ProductList'
 
@@ -17,10 +18,16 @@ const BusinessProductListUI = (props: any) => {
   const {
     navigation,
     businessState,
-    handleChangeCategory,
-    categoryState,
+    productsList,
     updateStoreCategory,
-    updateStoreProduct
+    updateStoreProduct,
+    productSearch,
+    categorySearch,
+    handleChangeCategory,
+    handleChangeProductSearch,
+    handleChangeCategorySearch,
+    getCategoryProducts,
+    categories
   } = props;
 
   const { loading, error, business } = businessState;
@@ -59,28 +66,51 @@ const BusinessProductListUI = (props: any) => {
     sectionTitle: {
       fontStyle: 'normal',
       fontWeight: '600',
-      fontSize: 24,
+      fontSize: 20,
       color: theme.colors.textGray,
     },
-    arrowLeft: {
-      maxWidth: 40,
-      height: 25,
-      justifyContent: 'flex-end',
-      marginTop: 8
+    borderStyle: {
+      borderColor: theme.colors.red,
+      borderWidth: 0,
+      borderRadius: 10,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0
     },
   });
 
   return (
     <>
       <View style={styles.header}>
-        <OIconButton
-          icon={theme.images.general.arrow_left}
-          borderColor={theme.colors.clear}
-          iconStyle={{ width: 20, height: 20 }}
-          style={styles.arrowLeft}
-          onClick={() => navigation?.canGoBack() && navigation.goBack()}
-        />
-        <OText style={styles.sectionTitle}>{t('CATEGORIES', 'Categories')}</OText>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <TouchableOpacity
+            onPress={() => navigation?.canGoBack() && navigation.goBack()}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <OText style={styles.sectionTitle}>{t('CATEGORIES', 'Categories')}</OText>
+        </View>
+        <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
+          <SearchBar
+            borderStyle={styles.borderStyle}
+            onSearch={handleChangeCategorySearch}
+            searchValue={categorySearch}
+            lazyLoad
+            isCancelXButtonShow={!!categorySearch}
+            onCancel={() => handleChangeCategorySearch('')}
+            placeholder={t('SEARCH', 'Search')}
+            containerStyle={{ width: 180 }}
+          />
+        </View>
       </View>
       <ScrollView
         showsVerticalScrollIndicator={false}
@@ -92,7 +122,7 @@ const BusinessProductListUI = (props: any) => {
             conditioned={false}
           />
         )}
-        {!error && !loading && business?.categories?.length > 0 && (
+        {!error && !loading && categories?.length > 0 && (
           <View
             style={{
               borderTopColor: theme.colors.borderTops,
@@ -100,7 +130,7 @@ const BusinessProductListUI = (props: any) => {
             }}
           >
             <IterateCategories
-              list={business?.categories}
+              list={categories}
               handlerClickCategory={handleOpenProducts}
               updateCategory={updateStoreCategory}
             />
@@ -143,8 +173,11 @@ const BusinessProductListUI = (props: any) => {
           }}
         >
           <ProductList
-            categoryState={categoryState}
+            productsList={productsList}
             updateProduct={updateStoreProduct}
+            searchValue={productSearch}
+            handleChangeSearch={handleChangeProductSearch}
+            getCategoryProducts={getCategoryProducts}
             onClose={() => setShowModal(false)}
           />
         </View>
@@ -156,9 +189,8 @@ const BusinessProductListUI = (props: any) => {
 export const BusinessProductList = (props: any) => {
   const businessProductListProps = {
     ...props,
-    isFetchAllProducts: true,
     UIComponent: BusinessProductListUI,
   };
 
-  return <BusinessAndProductList {...businessProductListProps} />;
+  return <StoreProductList {...businessProductListProps} />;
 };