ordering-ui-react-native 0.21.33-test → 0.21.34-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.33-test",
+  "version": "0.21.34-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,6 +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-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",
@@ -115,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",
@@ -127,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/src/utils/index.tsx

@@ -47,10 +47,10 @@ export const getTraduction = (key: string, t: any) => {
  */
 export const convertHoursToMinutes = (time: any) => {
   const [, t] = useLanguage()
-  if (!time) return '0min'
+  if (!time) return `0 ${t('TIME_MIN', 'min')}`
   const [hour, minute] = time.split(':')
   const result = (parseInt(hour, 10) * 60) + parseInt(minute, 10)
-  return `${result}${t('MIN', 'min')}`
+  return `${result}${t('TIME_MIN', 'min')}`
 }
 
 export const getIconCard = (brand: string, size: number) => {

package/themes/business/index.tsx

@@ -1,6 +1,7 @@
 //Components
 import { AcceptOrRejectOrder } from './src/components/AcceptOrRejectOrder';
 import { BusinessController } from './src/components/BusinessController';
+import { BusinessProductList } from './src/components/BusinessProductList';
 import { Chat } from './src/components/Chat';
 import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
@@ -42,6 +43,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,
@@ -70,6 +72,7 @@ export {
   //Components
   AcceptOrRejectOrder,
   BusinessController,
+  BusinessProductList,
   Chat,
   DriverMap,
   FloatingButton,
@@ -104,6 +107,7 @@ export {
   ReviewCustomer,
   SafeAreaContainerLayout,
   SearchBar,
+  Sessions,
   SignupForm,
   StoresList,
   UserFormDetailsUI,

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

@@ -307,7 +307,11 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   }, [])
 
   return (
-    <KeyboardAvoidingView style={{ flex: 1 }}>
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}
+    >
       <View style={styles.parent}>
         <View style={styles.upper}>
           <TopActions>
@@ -511,7 +515,10 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         <View
           style={{
             ...styles.bottomParent,
-            marginBottom: (keyboardState.height === 0) ? isPage ? 0 : 30 : keyboardState.height - (isPage ? 20 : -10)
+            marginBottom: Platform.OS === 'ios'
+              ? 30 : (keyboardState.height === 0)
+                ? isPage ? 0 : 30
+                : keyboardState.height - (isPage ? 20 : -10)
           }}
         >
           <OButton

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import { StyleSheet, View, ActivityIndicator, TouchableOpacity } from 'react-native';
 import ToggleSwitch from 'toggle-switch-react-native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -14,7 +14,7 @@ import { OIcon, OText } from '../shared';
 import { BusinessControllerParams } from '../../types';
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-  const { businessState, updateBusiness, isUpdateStore, setIsUpdateStore } =
+  const { businessState, updateBusiness, isUpdateStore, setIsUpdateStore, navigation } =
     props;
 
   const { loading, business, error } = businessState;
@@ -93,21 +93,18 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
     <>
       {business && (
         <Card key={business?.id}>
-          <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
-            <Logo style={styles.logo}>
-              <OIcon
-                url={optimizeImage(business?.logo, 'h_300,c_limit')}
-                src={!business?.logo && theme?.images?.dummies?.businessLogo}
-                style={styles.icon}
-              />
-            </Logo>
-
-            <View
-              style={{
-                flex: 1,
-                flexDirection: 'row',
-                alignItems: 'flex-start',
-              }}>
+          <View style={{ flexDirection: 'row', flex: 1 }}>
+            <TouchableOpacity
+              style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}
+              onPress={() => navigation && business?.slug && navigation.navigate('BusinessProductListing', { slug: business?.slug })}
+            >
+              <Logo style={styles.logo}>
+                <OIcon
+                  url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                  src={!business?.logo && theme?.images?.dummies?.businessLogo}
+                  style={styles.icon}
+                />
+              </Logo>
               <Information>
                 <View style={styles.header}>
                   <OText style={styles.title} numberOfLines={1}>
@@ -123,7 +120,12 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
                   {business?.zipcode}
                 </OText>
               </Information>
+            </TouchableOpacity>
 
+            <View
+              style={{
+                alignItems: 'flex-start',
+              }}>
               {loading && isUpdateStore ? (
                 <ActivityIndicator size="small" color={theme.colors.primary} />
               ) : (

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

@@ -0,0 +1,63 @@
+import { OText } from "../shared"
+import React, { useState } from "react"
+import { View } from "react-native"
+import { TouchableOpacity } from "react-native-gesture-handler"
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import ToggleSwitch from 'toggle-switch-react-native';
+import { useTheme } from 'styled-components/native';
+import { CategoryTab } from './styles'
+
+export const AccordionDropdown = (props: any) => {
+  const { category, IterateCategories, handlerClickCategory, updateCategory } = props
+
+  const theme = useTheme();
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleSwitch = (enabled: boolean, categoryId: any) => {
+    updateCategory && updateCategory(categoryId, { enabled })
+  };
+
+  return (
+    <View style={{ marginLeft: !!category?.parent_category_id ? 10 : 0 }}>
+      <CategoryTab>
+        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, marginRight: 5 }}>
+          <TouchableOpacity onPress={() => setIsOpen(prev => !prev)} style={{ marginRight: 10 }}>
+            <AntDesignIcon
+              name={isOpen ? 'caretdown' : 'caretright'}
+              size={14}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handlerClickCategory(category)} style={{ flex: 1 }}>
+            <OText numberOfLines={1}>
+              {category.name}
+            </OText>
+          </TouchableOpacity>
+        </View>
+        <View>
+          <ToggleSwitch
+            isOn={category?.enabled}
+            onColor={theme.colors.primary}
+            offColor={theme.colors.offColor}
+            size="small"
+            onToggle={(value: boolean) => handleSwitch(value, category.id)}
+            // disabled={loading}
+            animationSpeed={200}
+          />
+        </View>
+      </CategoryTab>
+      {
+        isOpen && (
+          <View>
+            <IterateCategories
+              list={category.subcategories}
+              isSub
+              currentCat={category}
+              handlerClickCategory={handlerClickCategory}
+              updateCategory={updateCategory}
+            />
+          </View>
+        )
+      }
+    </View>
+  )
+}

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

@@ -0,0 +1,108 @@
+import React from "react"
+import { View, TouchableOpacity } from "react-native"
+import { OText } from "../shared"
+import ToggleSwitch from 'toggle-switch-react-native';
+import { AccordionDropdown } from './AccordionDropdown'
+import { useTheme } from 'styled-components/native';
+import { CategoryTab } from './styles'
+
+export const IterateCategories = (props: any) => {
+  const { list, currentCat, isSub, handlerClickCategory, updateCategory } = props
+
+  const theme = useTheme();
+
+  const handleSwitch = (enabled: boolean, categoryId: any) => {
+    updateCategory && updateCategory(categoryId, { enabled })
+  };
+
+  return (
+    <>
+      {list?.length > 0 && list.map((category: any, i: number) => (
+        <View key={`${category?.id}_${i}`}>
+          {(category?.subcategories?.length > 0 || isSub) ? (
+            <>
+              {category?.subcategories?.length > 0 && (
+                <>
+                  <View>
+                    <AccordionDropdown
+                      category={category}
+                      IterateCategories={IterateCategories}
+                      handlerClickCategory={handlerClickCategory}
+                      updateCategory={updateCategory}
+                    />
+                  </View>
+                </>
+              )}
+              {isSub && !category?.subcategories?.length && (
+                <CategoryTab isSpace={!!category?.parent_category_id}>
+                  <TouchableOpacity
+                    style={{ flex: 1, marginRight: 5 }}
+                    onPress={() => handlerClickCategory(category)}
+                  >
+                    <OText numberOfLines={1}>
+                      {category.name}
+                    </OText>
+                  </TouchableOpacity>
+                  <View>
+                    <ToggleSwitch
+                      isOn={category?.enabled}
+                      onColor={theme.colors.primary}
+                      offColor={theme.colors.offColor}
+                      size="small"
+                      onToggle={(value: boolean) => handleSwitch(value, category.id)}
+                      // disabled={loading}
+                      animationSpeed={200}
+                    />
+                  </View>
+                </CategoryTab>
+              )}
+            </>
+          ) : (
+            <CategoryTab
+              isSpace={!!category?.parent_category_id}
+            >
+              <TouchableOpacity onPress={() => handlerClickCategory(category)} style={{ flex: 1, marginRight: 5 }}>
+                <OText numberOfLines={1}>
+                  {category.name}
+                </OText>
+              </TouchableOpacity>
+              <View>
+                <ToggleSwitch
+                  isOn={category?.enabled}
+                  onColor={theme.colors.primary}
+                  offColor={theme.colors.offColor}
+                  size="small"
+                  onToggle={(value: boolean) => handleSwitch(value, category.id)}
+                  // disabled={loading}
+                  animationSpeed={200}
+                />
+              </View>
+            </CategoryTab>
+          )}
+        </View>
+      ))}
+      {list && list?.length === 0 && isSub && (
+        <CategoryTab
+          isSpace={!!currentCat?.parent_category_id}
+        >
+          <TouchableOpacity onPress={() => handlerClickCategory(currentCat)} style={{ flex: 1, marginRight: 5 }}>
+            <OText numberOfLines={1}>
+              {currentCat.name}
+            </OText>
+          </TouchableOpacity>
+          <View>
+            <ToggleSwitch
+              isOn={currentCat?.enabled}
+              onColor={theme.colors.primary}
+              offColor={theme.colors.offColor}
+              size="small"
+              onToggle={(value: boolean) => handleSwitch(value, currentCat.id)}
+              // disabled={loading}
+              animationSpeed={200}
+            />
+          </View>
+        </CategoryTab>
+      )}
+    </>
+  )
+}