ordering-ui-react-native 0.14.67 → 0.14.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.67",
+  "version": "0.14.70",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -108,6 +108,7 @@
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",
+    "react-native-youtube-iframe": "^2.2.2",
     "rn-placeholder": "^3.0.3",
     "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",

package/src/components/Checkout/index.tsx

@@ -529,6 +529,7 @@ const CheckoutUI = (props: any) => {
                   paySelected={paymethodSelected}
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
+                  handlePlaceOrder={handlePlaceOrder}
                 />
               </ChPaymethods>
             </ChSection>

package/src/components/PaymentOptions/index.tsx

@@ -61,11 +61,14 @@ const PaymentOptionsUI = (props: any) => {
     handlePaymethodDataChange,
     handlePaymentMethodClickCustom,
     isOpenMethod,
-    setCardData
+    setCardData,
+    handlePlaceOrder
   } = props
 
   const theme = useTheme();
   const [, t] = useLanguage();
+  const methodsPay = ['google_pay', 'apple_pay']
+  const stripeDirectMethods = ['stripe_direct', ...methodsPay]
 
   const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
   let paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
@@ -119,8 +122,11 @@ const PaymentOptionsUI = (props: any) => {
   }, [props.paySelected])
 
   useEffect(() => {
-    setCardData(paymethodData)
-  }, [paymethodData])
+    setCardData && setCardData(paymethodData)
+    if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
+      handlePlaceOrder()
+    }
+  }, [paymethodData, paymethodSelected])
 
   const renderPaymethods = ({ item }: any) => {
     return (
@@ -283,7 +289,7 @@ const PaymentOptionsUI = (props: any) => {
       <OModal
         entireModal
         title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
-        open={isOpenMethod?.paymethod?.gateway === 'stripe_direct' && !paymethodData?.id}
+        open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
         onClose={() => handlePaymethodClick(null)}
       >
         <KeyboardAvoidingView
@@ -292,10 +298,13 @@ const PaymentOptionsUI = (props: any) => {
           enabled={Platform.OS === 'ios' ? true : false}
         >
           <StripeElementsForm
+            cart={cart}
+            paymethod={isOpenMethod?.paymethod?.gateway}
+            methodsPay={methodsPay}
             businessId={props.businessId}
-            publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
+            publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
             handleSource={handlePaymethodDataChange}
-            onCancel={() => handlePaymethodClick(false)}
+            onCancel={() => handlePaymethodClick(null)}
           />
         </KeyboardAvoidingView>
       </OModal>

package/src/components/StripeElementsForm/index.tsx

@@ -7,10 +7,11 @@ import {
   useConfirmSetupIntent,
   createPaymentMethod
 } from '@stripe/stripe-react-native';
-
+import configs from '../../config.json'
 import { ErrorMessage } from './styles';
 
 import { StripeElementsForm as StripeFormController } from './naked';
+import { StripeMethodForm } from '../StripeMethodForm';
 import { OButton, OText } from '../shared';
 import { useTheme } from 'styled-components/native';
 
@@ -22,6 +23,10 @@ const StripeElementsFormUI = (props: any) => {
     businessId,
     requirements,
     stripeTokenHandler,
+    methodsPay,
+    paymethod,
+    onCancel,
+    cart
   } = props;
 
   const theme = useTheme();
@@ -121,33 +126,49 @@ const StripeElementsFormUI = (props: any) => {
     <View style={styles.container}>
       {publicKey ? (
         <View style={{ flex: 1 }}>
-          <StripeProvider publishableKey={publicKey}>
-            <CardField
-              postalCodeEnabled={true}
-              cardStyle={{
-                backgroundColor: '#FFFFFF',
-                textColor: '#000000',
-              }}
-              style={{
-                width: '100%',
-                height: 50,
-                marginVertical: 30,
-                zIndex: 9999,
-              }}
-              onCardChange={(cardDetails: any) => setCard(cardDetails)}
-            />
+          <StripeProvider 
+            publishableKey={publicKey}
+            merchantIdentifier={`merchant.${configs.apple_app_id}`}
+          >
+            {methodsPay.includes(paymethod) ? (
+              <StripeMethodForm 
+                handleSource={handleSource}
+                onCancel={onCancel}
+                cart={cart}
+                setErrors={setErrors}
+                paymethod={paymethod}
+                devMode={publicKey?.includes('test')}
+              />
+            ) : (
+              <CardField
+                postalCodeEnabled={true}
+                cardStyle={{
+                  backgroundColor: '#FFFFFF',
+                  textColor: '#000000',
+                }}
+                style={{
+                  width: '100%',
+                  height: 50,
+                  marginVertical: 30,
+                  zIndex: 9999,
+                }}
+                onCardChange={(cardDetails: any) => setCard(cardDetails)}
+              />
+            )}
           </StripeProvider>
-          <OButton
-            text={t('SAVE_CARD', 'Save card')}
-            bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
-            borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
-            style={styles.btnAddStyle}
-            textStyle={{color: 'white'}}
-            imgRightSrc={null}
-            onClick={() => handleSaveCard()}
-            isDisabled={!isCompleted}
-            isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
-          />
+          {!methodsPay?.includes(paymethod) && (
+            <OButton
+              text={t('SAVE_CARD', 'Save card')}
+              bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
+              borderColor={isCompleted ? theme.colors.primary :theme.colors.backgroundGray}
+              style={styles.btnAddStyle}
+              textStyle={{color: 'white'}}
+              imgRightSrc={null}
+              onClick={() => handleSaveCard()}
+              isDisabled={!isCompleted}
+              isLoading={confirmSetupLoading || values.loadingAdd || createPmLoading}
+            />
+          )}
           {!!errors && (
             <ErrorMessage>
               <OText

package/src/components/StripeMethodForm/index.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { GooglePayButton, useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
+import { OButton } from '../shared';
+import { Platform, View } from 'react-native';
+import { StripeMethodFormParams } from '../../types';
+
+export const StripeMethodForm = (props: StripeMethodFormParams) => {
+  const {
+    cart,
+    handleSource,
+    onCancel,
+    setErrors,
+    paymethod,
+    devMode
+  } = props
+  const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
+  const { presentApplePay, isApplePaySupported } = useApplePay();
+  const [initialized, setInitialized] = useState(false);
+  const [, t] = useLanguage()
+ 
+  useEffect(() => {
+    if (paymethod !== 'google_pay') return
+    if (Platform.OS === 'ios') {
+      setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
+      return
+    }
+    const initialize = async () => {
+      try {
+        const { error } = await initGooglePay({
+          testEnv: devMode,
+          merchantName: 'Widget Store',
+          countryCode: 'US',
+          billingAddressConfig: {
+            format: 'FULL',
+            isPhoneNumberRequired: true,
+            isRequired: false,
+          },
+          existingPaymentMethodRequired: false,
+          isEmailRequired: true,
+        });
+
+        if (error) {
+          setErrors(error.code + ' - ' + error.message);
+          return;
+        }
+        setInitialized(true);
+      } catch (err: any) {
+        setErrors('Catch ' + err?.message)
+      }
+    }
+    initialize();
+  }, [initGooglePay]);
+
+  useEffect(() => {
+    if (paymethod !== 'apple_pay') return
+    if (Platform.OS === 'android') {
+      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      return
+    }
+  }, [])
+
+  const createPaymentMethod = async () => {
+
+    const { error, paymentMethod } = await createGooglePayPaymentMethod({
+      amount: cart?.balance ?? cart?.total,
+      currencyCode: 'USD',
+    });
+
+    if (error) {
+      setErrors(error.code + ' - ' + error.message);
+      return;
+    } else if (paymentMethod) {
+      handleSource({
+        ...paymentMethod?.Card,
+        id: paymentMethod.id,
+        type: paymentMethod.type,
+        source_id: paymentMethod?.id,
+        card: {
+          brand: paymentMethod.Card.brand,
+          last4: paymentMethod.Card.last4
+        }
+      })
+      onCancel()
+    }
+    setInitialized(false);
+  };
+
+  const pay = async () => {
+    if (!isApplePaySupported) {
+      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      return
+    }
+
+    const { error, paymentMethod } = await presentApplePay({
+      cartItems: cart?.products?.map((product: any) => ({ label: product?.name, amount: product?.price?.toString?.() })),
+      country: 'US',
+      currency: 'USD',
+      shippingMethods: [
+        {
+          amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
+          identifier: 'DPS',
+          label: 'Courier',
+          detail: 'Delivery',
+          type: 'final',
+        },
+      ],
+
+      requiredShippingAddressFields: ['emailAddress', 'phoneNumber'],
+      requiredBillingContactFields: ['phoneNumber', 'name'],
+    });
+    if (error) {
+      setErrors(error.code + ' - ' + error.message);
+    } else if (paymentMethod) {
+      handleSource({
+        ...paymentMethod?.Card,
+        id: paymentMethod.id,
+        type: paymentMethod.type,
+        source_id: paymentMethod?.id,
+        card: {
+          brand: paymentMethod.Card.brand,
+          last4: paymentMethod.Card.last4
+        }
+      })
+      onCancel()
+    }
+  }
+
+  return (
+    <>
+      {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')}
+            />
+          )}
+        </View>
+      ) : (
+        <View>
+          {isApplePaySupported && (
+            <ApplePayButton
+              onPress={pay}
+              type="plain"
+              buttonStyle="black"
+              borderRadius={4}
+              style={{
+                width: '100%',
+                height: 50,
+              }}
+            />
+          )}
+        </View>
+      )}
+    </>
+  )
+}

package/src/components/shared/OIcon.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react'
 import { ImageStyle } from 'react-native'
 import styled from 'styled-components/native'
+import { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View``
 
@@ -23,10 +24,12 @@ interface Props {
 }
 
 const OImage = (props: Props): React.ReactElement => {
+  const theme = useTheme();
+  
   return (
     <Wrapper style={{ borderRadius: props.style?.borderRadius, overflow: 'hidden', marginHorizontal: props.style?.marginHorizontal }}>
       <SImage
-        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : require('../../assets/icons/lunch.png')}
+        source={props.src ? props.src : props.url ? { uri: props.url } : props.dummy ? props.dummy : theme.images.general.lunch || require('../../assets/icons/lunch.png')}
         style={{
           tintColor: props.color,
           flex: props.isWrap ? 1 : 0,

package/src/config.json

@@ -3,6 +3,8 @@
   "notification_app": "orderingapp",
   "app_name": "Ordering",
   "project": "reactdemo",
+  "apple_app_id": "com.delivery",
+  "android_app_id": "com.delivery",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/src/types/index.tsx

@@ -473,3 +473,12 @@ export interface HelpGuideParams {
 export interface HelpAccountAndPaymentParams {
   navigation: any;
 }
+
+export interface StripeMethodFormParams {
+  cart: any;
+  handleSource: ({id, card} : {id : string, card : any}) => void;
+  onCancel: () => void;
+  setErrors: (error: string) => void;
+  paymethod: string;
+  devMode?: boolean;
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ProductsList, useLanguage, useUtils } from 'ordering-components/native';
+import { ProductsList, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
@@ -31,6 +31,8 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
   const [, t] = useLanguage();
   const [{ optimizeImage }] = useUtils()
+  const [{ configs }] = useConfig()
+  const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
 
   const handleOnLayout = (event: any, categoryId: any) => {
     const _categoriesLayout = { ...categoriesLayout }
@@ -80,52 +82,47 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           </View>
         )}
 
-      {!category.id &&
-        categories &&
-        categories
-          .filter((category) => category.id !== null)
-          .map((category, i, _categories) => {
-            const products =
-              categoryState.products?.filter(
-                (product: any) => product.category_id === category.id,
-              ) || [];
-            return (
-              <React.Fragment key={'cat_' + category.id}>
-                {products.length > 0 && (
-                  <>
-                    <View
-                      style={bpStyles.catWrap}
-                      onLayout={(event: any) => handleOnLayout(event, category.id)}
-                    >
-                      <View style={bpStyles.catIcon}>
-                        <OIcon
-                          url={optimizeImage(category.image, 'h_100,c_limit')}
-                          width={41}
-                          height={41}
-                          style={{ borderRadius: 7.6 }}
-                        />
-                      </View>
-                      <OText size={16} weight="600">
-                        {category.name}
-                      </OText>
-                    </View>
-                    <>
-                      {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
-                        <SingleProductCard
-                          key={i}
-                          isSoldOut={product.inventoried && !product.quantity}
-                          businessId={businessId}
-                          product={product}
-                          onProductClick={onProductClick}
-                          productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-                        />
-                      ))}
-                    </>
-                  </>
-                )}
-              </React.Fragment>
-            );
-          })}
+      {!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)) ?? []
+        return (
+          <React.Fragment key={'cat_' + category.id}>
+            {products.length > 0 && (
+              <>
+                <View
+                  style={bpStyles.catWrap}
+                  onLayout={(event: any) => handleOnLayout(event, category.id)}
+                >
+                  <View style={bpStyles.catIcon}>
+                    <OIcon
+                      url={optimizeImage(category.image, 'h_100,c_limit')}
+                      width={41}
+                      height={41}
+                      style={{ borderRadius: 7.6 }}
+                    />
+                  </View>
+                  <OText size={16} weight="600">
+                    {category.name}
+                  </OText>
+                </View>
+                <>
+                  {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
+                    <SingleProductCard
+                      key={i}
+                      isSoldOut={product.inventoried && !product.quantity}
+                      businessId={businessId}
+                      product={product}
+                      onProductClick={onProductClick}
+                      productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                    />
+                  ))}
+                </>
+              </>
+            )}
+          </React.Fragment>
+        );
+      })}
 
       {(categoryState.loading || isBusinessLoading) && (
         <>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import {
 	ProductForm as ProductOptions,
 	useSession,
@@ -12,11 +12,12 @@ import { ProductOption } from '../ProductOption';
 import Swiper from 'react-native-swiper'
 import FastImage from 'react-native-fast-image';
 import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import YoutubePlayer from "react-native-youtube-iframe"
 import {
 	Grayscale
 } from 'react-native-color-matrix-image-filters'
 
-import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Dimensions, I18nManager, SafeAreaView, Button, Alert } from 'react-native';
 
 import {
 	WrapHeader,
@@ -158,6 +159,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [indexGallery, setIndexGallery] = useState(0)
 	const [selOpt, setSelectedOpt] = useState(0);
 	const [isHaveWeight, setIsHaveWeight] = useState(false)
+	const [playing, setPlaying] = useState(false);
 	const [qtyBy, setQtyBy] = useState({
 		weight_unit: false,
 		pieces: true
@@ -216,7 +218,7 @@ export const ProductOptionsUI = (props: any) => {
 
 	const handleRedirectLogin = () => {
 		navigation.navigate('Login', {
-			store_slug:  props.businessSlug
+			store_slug: props.businessSlug
 		});
 	};
 
@@ -224,15 +226,34 @@ export const ProductOptionsUI = (props: any) => {
 		setQtyBy({ [val]: true, [!val]: false })
 	}
 
+	const onStateChange = useCallback((state) => {
+		if (state === "ended") {
+			setPlaying(false);
+		}
+	}, []);
+
+	const togglePlaying = useCallback(() => {
+		setPlaying((prev) => !prev);
+	}, []);
+
 	useEffect(() => {
-		const productImgList: any = []
-		product?.images && productImgList.push(product.images)
+		const imageList: any = []
+		const videoList: any = []
+		product?.images && imageList.push(product.images)
 		if (product?.gallery && product?.gallery.length > 0) {
 			for (const img of product?.gallery) {
-				productImgList.push(img.file)
+				if (img?.file) {
+					imageList.push(img?.file)
+				}
+				if (img?.video) {
+					const keys = img?.video.split('/')
+					const _videoId = keys[keys.length - 1]
+					videoList.push(_videoId)
+				}
 			}
 		}
-		setGallery(productImgList)
+		const gallery = imageList.concat(videoList)
+		setGallery(gallery)
 
 		if (product?.weight && product?.weight_unit) {
 			setIsHaveWeight(true)
@@ -349,18 +370,30 @@ export const ProductOptionsUI = (props: any) => {
 											</View>
 										}
 									>
-										{gallery.length > 0 && gallery.map((img, i) => (
+										{gallery && gallery.length > 0 && gallery.map((img, i) => (
 											<View
 												style={styles.slide1}
 												key={i}
 											>
-												<FastImage
-													style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
-													source={{
-														uri: optimizeImage(img, 'h_258,c_limit'),
-														priority: FastImage.priority.normal,
-													}}
-												/>
+												{img.includes('image') ? (
+													<FastImage
+														style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
+														source={{
+															uri: optimizeImage(img, 'h_258,c_limit'),
+															priority: FastImage.priority.normal,
+														}}
+													/>
+												) : (
+													<>
+														<YoutubePlayer
+															height={300}
+															play={playing}
+															videoId={img}
+															onChangeState={onStateChange}
+														/>
+														<Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
+													</>
+												)}
 											</View>
 										))}
 									</Swiper>
@@ -384,18 +417,33 @@ export const ProductOptionsUI = (props: any) => {
 														opacity: index === thumbsSwiper ? 1 : 0.8
 													}}
 												>
-													<OIcon
-														url={img}
-														style={{
-															borderColor: theme.colors.lightGray,
-															borderRadius: 8,
-															minHeight: '100%',
-															opacity: isSoldOut ? 0.5 : 1
-														}}
-														width={56}
-														height={56}
-														cover
-													/>
+													{img.includes('image') ? (
+														<OIcon
+															url={img}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%',
+																opacity: isSoldOut ? 0.5 : 1
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													) : (
+														<OIcon
+															url={'http://img.youtube.com/vi/' + img + '/0.jpg'}
+															style={{
+																borderColor: theme.colors.lightGray,
+																borderRadius: 8,
+																minHeight: '100%',
+																opacity: isSoldOut ? 0.5 : 1
+															}}
+															width={56}
+															height={56}
+															cover
+														/>
+													)}
 												</View>
 											</TouchableOpacity>
 

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

@@ -126,11 +126,11 @@ const UserVerificationUI = (props: any) => {
     },
     phoneInputStyle: {
       height: 30,
-      borderWidth: 0,
+      borderWidth: 1,
       fontSize: 12,
-      paddingStart: 0,
       paddingBottom: 0,
       marginBottom: -0,
+      paddingHorizontal: 10
     }
   });
 
@@ -475,7 +475,7 @@ const UserVerificationUI = (props: any) => {
           <OButton
             onClick={(verificationState.email || verificationState.phone)
               ? () => setVerificationState({ email: false, phone: false })
-              : () => handleSendOtp(verificationState.phone ? 'phone' : '')
+              : () => handleSendOtp(isPhoneVerifyRequired && !isEmailVerifyRequired ? 'phone' : '')
             }
             text={(verificationState.email || verificationState.phone) ? t('CANCEL', 'Cancel') : t('SEND_CODE', 'Send code')}
             bgColor={(verificationState.email || verificationState.phone) ? theme.colors.secundary : theme.colors.primary}

package/themes/original/src/components/UserVerification/styles.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const Container = styled.View`
   padding: 20px;
@@ -11,7 +11,13 @@ export const WrapperText = styled.View`
   align-items: center;
 `
 
-export const InputWrapper = styled.View``
+export const InputWrapper = styled.View`
+  ${(props: any) => props.phone && css`
+    width: 60%;
+    align-self: center;
+    padding-top: 20px;
+  `}
+`
 
 export const WrapperActions = styled.View`
   position: relative;

package/themes/original/src/types/index.tsx

@@ -203,7 +203,7 @@ export interface BusinessProductsListParams {
 	errors?: any;
 	businessId?: number;
 	category?: any;
-	categories?: Array<any>;
+	categories: Array<any>;
 	categoryState?: any;
 	onProductClick?: any;
 	handleSearchRedirect?: () => {};