ordering-ui-react-native 0.18.55 → 0.18.56-crash-driver-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.18.55",
+  "version": "0.18.56-crash-driver-1",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -49,10 +49,10 @@
     "@react-navigation/material-bottom-tabs": "^5.3.14",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.9.3",
-    "@segment/analytics-react-native": "^2.1.11",
-    "@segment/sovran-react-native": "^0.2.6",
+    "@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",
@@ -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",
@@ -83,6 +84,7 @@
     "react-native-fbsdk-next": "^7.0.1",
     "react-native-geocoding": "^0.5.0",
     "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-html-to-pdf": "^0.10.0",

package/src/components/BusinessInformation/index.tsx

@@ -19,6 +19,8 @@ import { BusinessBasicInformation } from '../BusinessBasicInformation'
 import { BusinessInformationParams } from '../../types'
 import { GoogleMap } from '../GoogleMap'
 import { useTheme } from 'styled-components/native';
+import moment from 'moment';
+
 const BusinessInformationUI = (props: BusinessInformationParams) => {
   const {
     businessState,
@@ -38,14 +40,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
     t('FRIDAY_ABBREVIATION', 'Fri'),
     t('SATURDAY_ABBREVIATION', 'Sat')
   ]
-  const is12hours = configs?.format_time?.value?.includes('12')
 
-  const scheduleFormatted = ({ hour, minute } : { hour : number | string, minute : number | string}) => {
-    const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
-		const zz = hour === 0 ? t('AM', 'AM') : hour >= 12 ? t('PM', 'PM') : t('AM', 'AM');
-		const h = parseInt(`${hour}`);
-		return is12hours ? `${h === 0 ? 12 : h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}` : `${checkTime(hour)}:${checkTime(minute)}`;
-  }
+  const formatTime = configs?.general_hour_format?.value
+
+	const checkTime = (val: number) => (val < 10 ? `0${val}` : val);
+	const timeFormated = (time: any) => {
+		return moment(`1900-01-01 ${checkTime(time.hour)}:${checkTime(time.minute)}`).format(formatTime)
+	}
 
   return (
     <BusinessInformationContainer>
@@ -105,13 +106,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
                   {schedule.enabled ? (
                     schedule.lapses.map( (time: any, k: number) => (
                     <React.Fragment key={k}>
-                      <OText>{scheduleFormatted(time.open)}</OText>
+                      <OText>{timeFormated(time.open)}</OText>
                       <OText mBottom={10} style={{
                         padding: 3,
                         borderBottomColor: theme.colors.primary,
                         borderBottomWidth: 1
                       }}
-                      >{scheduleFormatted(time.close)}</OText>
+                      >{timeFormated(time.close)}</OText>
                     </React.Fragment>
                   ))) : ( <OText>{t('CLOSED', 'Closed')}</OText>)}
                 </ScheduleBlock>

package/src/components/PaymentOptionsWebView/index.tsx

@@ -9,7 +9,8 @@ import {
   useToast,
   useApi,
   useLanguage,
-  useConfig
+  useConfig,
+  useOrder
 } from 'ordering-components/native';
 
 import { OText } from '../shared';
@@ -24,7 +25,9 @@ interface PaymentOptionsWebViewParams {
   webviewPaymethod?: any,
   setShowGateway?: any,
   setOpenOrderCreating?: any,
-  locationId?: any
+  locationId?: any,
+  additionalParams?: any
+  title?: string
 }
 export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
   const {
@@ -37,7 +40,9 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
     webviewPaymethod,
     setShowGateway,
     setOpenOrderCreating,
-    locationId
+    locationId,
+    title,
+    additionalParams = {}
   } = props
 
   const webviewRef = useRef<any>(null)
@@ -45,7 +50,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
   const [ordering] = useApi()
   const [{ configs }] = useConfig();
   const [, t] = useLanguage();
-
+  const [, { confirmCart }] = useOrder()
 
   const [progClr, setProgClr] = useState('#424242');
   const [prog, setProg] = useState(true);
@@ -55,9 +60,23 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
     setShowGateway({ open: false, closedByUser: true })
   }
 
-  const onMessage = (e: any) => {
+  const onMessage = async (e: any) => {
     if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
       let payment = JSON.parse(e.nativeEvent.data);
+      if (payment?.response && payment?.responsetext && payment.orderid) {
+        const credomaticData = {
+          credomatic: {
+            ...payment
+          }
+        }
+        const confirmCartRes = await confirmCart(payment.orderid, credomaticData)
+        if (confirmCartRes.error) {
+          showToast(ToastType.Error, confirmCartRes.error.message)
+        }
+        if (confirmCartRes.result.order?.uuid) {
+          onNavigationRedirect?.('OrderDetails', { orderId: confirmCartRes.result.order.uuid, isFromCheckout: true })
+        }
+      }
 
       if (payment === 'api error' || payment === 'Cancelled by user') {
         setShowGateway({ closedByUser: true, open: false })
@@ -95,7 +114,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
           marginBottom: 5,
           marginTop: 10
         }}>
-        {webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment'))}
+        {title || (webviewPaymethod?.gateway === 'paypal' ? (t('PAYPAL_GATEWAY', 'PayPal GateWay')) : (t('SQUARE_PAYMENT', 'Square payment')))}
       </OText>
       <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
         <ActivityIndicator size={24} color={progClr} />
@@ -110,6 +129,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
         cacheMode='LOAD_NO_CACHE'
         style={{ flex: 1 }}
         onShouldStartLoadWithRequest={() => true}
+        originWhitelist={["*"]}
         onLoadStart={() => {
           setProg(true);
           setProgClr('#424242');
@@ -136,10 +156,12 @@ 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,
-              ...messageParams
+              ...messageParams,
+              ...additionalParams
             }
           }
           setProg(false);
@@ -148,4 +170,4 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
       />
     </View>
   )
-}
+}

package/src/components/PhoneInputNumber/index.tsx

@@ -7,7 +7,7 @@ import { Wrapper } from './styles'
 
 import { PhoneInputParams } from '../../types';
 import { OText } from '../shared';
-import {transformCountryCode} from '../../utils'
+import {transformCountryCode, verifyCountryCode} from '../../utils'
 import {I18nManager} from 'react-native'
 import { useTheme } from 'styled-components/native';
 
@@ -88,7 +88,11 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
       <PhoneInput
         ref={phoneInput}
         defaultValue={userphoneNumber || defaultValue}
-        defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
+        defaultCode={defaultCode ?
+					!isNaN(defaultCode)
+						? transformCountryCode(defaultCode)
+						: verifyCountryCode(defaultCode)
+					: verifyCountryCode(configs?.default_country_code?.value)}
         onChangeFormattedText={(text : string) => handleChangeNumber(text)}
         withDarkTheme
         textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}

package/src/components/StripeMethodForm/index.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect } from 'react'
-import { useLanguage, useConfig } from 'ordering-components/native'
+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,90 +16,95 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
     placeByMethodPay,
     methodPaySupported,
     setPlaceByMethodPay,
-    cartTotal
+    cartTotal,
+    androidAppId,
+    businessNames
   } = props
   const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
   const { presentApplePay, isApplePaySupported } = useApplePay();
+  const [{ loading: loadingCart }] = useOrder()
   const [, t] = useLanguage()
   const [{ configs }] = useConfig()
   const applePay = ['global_apple_pay', 'apple_pay']
   const googlePay = ['global_google_pay', 'google_pay']
+
   useEffect(() => {
     if (Platform.OS === 'ios') {
-      setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
+      return
+    }
+    if (!loadingCart) {
       setMethodPaySupported({
-        enabled: false,
+        enabled: true,
         loading: false
       })
       setPlaceByMethodPay(false)
+      setErrors('')
+    }
+  }, [paymethod, loadingCart]);
+
+  useEffect(() => {
+    if (applePay.includes(paymethod) && !paymethod) return
+    if (Platform.OS === 'android') {
+      setPlaceByMethodPay(false)
+      setMethodPaySupported({
+        ...methodPaySupported,
+        loading: false
+      })
       return
     }
-    const initialize = async () => {
-      try {
-        setMethodPaySupported({
-          ...methodPaySupported,
-          loading: true
-        })
-        const { error } = await initGooglePay({
-          testEnv: devMode,
-          merchantName: android_app_id,
-          countryCode: 'US',
-          billingAddressConfig: {
-            format: 'FULL',
-            isPhoneNumberRequired: true,
-            isRequired: false,
-          },
-          existingPaymentMethodRequired: false,
-          isEmailRequired: true,
-        });
+  }, [paymethod])
 
-        if (error) {
-          setErrors(error.code + ' - ' + error.message);
-          setMethodPaySupported({
-            enabled: false,
-            loading: false
-          })
-          setPlaceByMethodPay(false)
-          return;
-        }
-        setMethodPaySupported({
-          enabled: true,
-          loading: false
-        })
-        setPlaceByMethodPay(false)
-        setErrors('')
-      } catch (err: any) {
-        setErrors('Catch ' + err?.message)
+  const initialize = async () => {
+    try {
+      setMethodPaySupported({
+        ...methodPaySupported,
+        loading: true
+      })
+      const { error } = await initGooglePay({
+        testEnv: devMode,
+        merchantName: androidAppId,
+        countryCode: 'US',
+        billingAddressConfig: {
+          format: 'FULL',
+          isPhoneNumberRequired: true,
+          isRequired: false,
+        },
+        existingPaymentMethodRequired: false,
+        isEmailRequired: true,
+      });
+
+      if (error) {
+        setErrors(error.code + ' - ' + error.message);
         setMethodPaySupported({
           enabled: false,
           loading: false
         })
         setPlaceByMethodPay(false)
+        return true;
       }
-    }
-    if (googlePay.includes(paymethod)) {
-      initialize();
-    }
-  }, [initGooglePay, paymethod]);
-
-  useEffect(() => {
-    if (applePay.includes(paymethod) && !paymethod) return
-    if (Platform.OS === 'android') {
+      setMethodPaySupported({
+        enabled: true,
+        loading: false
+      })
       setPlaceByMethodPay(false)
-      setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
+      setErrors('')
+    } catch (err: any) {
+      setErrors('Catch ' + err?.message)
       setMethodPaySupported({
         enabled: false,
         loading: false
       })
-      return
+      setPlaceByMethodPay(false)
     }
-  }, [paymethod])
+  }
 
   const createPaymentMethod = async () => {
     setMethodPaySupported({
       ...methodPaySupported,
       loading: true
     })
+    const initializeError = await initialize()
+    if (initializeError) return
     const { error, paymentMethod } = await createGooglePayPaymentMethod({
       amount: cartTotal ?? cart?.balance ?? cart?.total,
       currencyCode: configs?.stripe_currency?.value ?? 'USD',
@@ -111,7 +115,6 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
         enabled: true,
         loading: false
       })
-      return;
     } else if (paymentMethod) {
       setMethodPaySupported({
         enabled: true,
@@ -150,8 +153,10 @@ export const StripeMethodForm = (props: StripeMethodFormParams) => {
 
     const { error, paymentMethod } = await presentApplePay({
       cartItems: [{
-        label: t('CART', 'Cart'),
-        amount: cartTotal?.toString?.() ?? cart?.balance?.toString() ?? cart?.total?.toString?.()
+        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'
       }],
       country: 'US',
       currency: configs?.stripe_currency?.value ?? 'USD',

package/src/components/shared/OToast.tsx

@@ -1,17 +1,18 @@
 import * as React from "react";
-import { Animated, StyleSheet, Text, View, Platform } from "react-native";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ToastType, useToast, useLanguage } from "ordering-components/native";
 import { useTheme } from 'styled-components/native';
 import { getTraduction } from '../../utils'
 
 const fadeDuration = 300;
-const topPosition = Platform.OS === 'ios' ? 40 : 20
 
 export const Toast = (props: any) => {
   const [toastConfig, { hideToast }] = useToast();
   const [, t] = useLanguage()
   const opacity = React.useRef(new Animated.Value(0)).current;
   const theme = useTheme();
+  const { top: topPosition } = useSafeAreaInsets();
 
   const fadeIn = React.useCallback(() => {
     Animated.timing(opacity, {

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';
@@ -28,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';
@@ -42,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,
@@ -70,6 +73,7 @@ export {
   //Components
   AcceptOrRejectOrder,
   BusinessController,
+  BusinessProductList,
   Chat,
   DriverMap,
   FloatingButton,
@@ -100,10 +104,12 @@ export {
   PhoneInputNumber,
   PreviousMessages,
   PreviousOrders,
+  PrinterSettings,
   ProductItemAccordion,
   ReviewCustomer,
   SafeAreaContainerLayout,
   SearchBar,
+  Sessions,
   SignupForm,
   StoresList,
   UserFormDetailsUI,

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

@@ -215,7 +215,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 7,
       },
       rejectByBusiness: {
-        comment: comments,
+        reasons: comments,
         status: 5,
       },
       acceptByDriver: {
@@ -223,22 +223,22 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 8,
       },
       rejectByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 6,
         reject_reason: rejectReason
       },
       pickupFailedByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 10,
         reject_reason: rejectReason
       },
       deliveryFailedByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 12,
         reject_reason: rejectReason
       },
       orderNotReady: {
-        comment: comments,
+        reasons: comments,
         status: 14,
         reject_reason: rejectReason
       },
@@ -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>
@@ -342,7 +346,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
                         )}
                       </OText>
 
-                      {numberToShow ? (
+                      {!!numberToShow ? (
                         <OButton
                           bgColor="transparent"
                           borderColor={theme.colors.primary}
@@ -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>
+  )
+}