ordering-ui-react-native 0.12.21 → 0.12.25

package/package.json

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

package/src/components/ActiveOrders/index.tsx

@@ -3,10 +3,11 @@ import { useLanguage, useUtils, useConfig } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OText } from '../shared'
 import { ActiveOrdersContainer, Card, Map, Information, Logo, OrderInformation, BusinessInformation, Price } from './styles'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native'
 import { getGoogleMapImage } from '../../utils'
 
 import { ActiveOrdersParams } from '../../types'
+import { ScrollView as GestureHandlerScrollView } from 'react-native-gesture-handler'
 
 export const ActiveOrders = (props: ActiveOrdersParams) => {
   const {
@@ -73,19 +74,35 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
           )}
           <OrderInformation>
             <BusinessInformation style={{ width: '60%' }}>
-              <View>
-                <OText
-                  size={16}
-                  numberOfLines={1}
-                  ellipsizeMode='tail'
-                >
-                  {order.business?.name}
-                </OText>
-              </View>
-              <View style={styles.orderNumber}>
-                <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
-                <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
-              </View>
+              <GestureHandlerScrollView
+                  showsVerticalScrollIndicator={false}
+                  showsHorizontalScrollIndicator={false}
+                  horizontal
+              >
+                <TouchableWithoutFeedback>
+                  <View>
+                    <OText
+                      size={16}
+                      numberOfLines={1}
+                      ellipsizeMode='tail'
+                    >
+                      {order.business?.name}
+                    </OText>
+                  </View>
+                </TouchableWithoutFeedback>
+              </GestureHandlerScrollView>
+              <GestureHandlerScrollView
+                showsVerticalScrollIndicator={false}
+                showsHorizontalScrollIndicator={false}
+                horizontal
+              >
+                <TouchableWithoutFeedback>
+                  <View style={styles.orderNumber}>
+                    <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
+                    <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
+                  </View>
+                </TouchableWithoutFeedback>
+              </GestureHandlerScrollView>
               <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
                 ? parseDate(order?.delivery_datetime_utc)
                 : parseDate(order?.delivery_datetime, { utc: false })}</OText>

package/src/components/Messages/index.tsx

@@ -5,9 +5,9 @@ import { useTheme } from 'styled-components/native';
 import { GiftedChat, Actions, InputToolbar, Composer, Send, Bubble, MessageImage } from 'react-native-gifted-chat'
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { OIcon, OIconButton, OText } from '../shared'
+import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard,I18nManager } from 'react-native'
-import { Header, TitleHeader, Wrapper } from './styles'
+import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
 
 const ImageDummy = require('../../assets/images/image.png')
@@ -66,6 +66,13 @@ const MessagesUI = (props: MessagesParams) => {
   const [, { showToast }] = useToast();
   const theme = useTheme();
 
+  const quickMessageList = [
+    { key: 'driver_message_1', text: t('DRIVER_MESSAGE_1', 'driver_message_1') },
+    { key: 'driver_message_2', text: t('DRIVER_MESSAGE_2', 'driver_message_2') },
+    { key: 'driver_message_3', text: t('DRIVER_MESSAGE_3', 'driver_message_3') },
+    { key: 'driver_message_4', text: t('DRIVER_MESSAGE_4', 'driver_message_4') }
+  ]
+
   const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
   const [isKeyboardShow, setIsKeyboardShow] = useState(false)
 
@@ -76,6 +83,10 @@ const MessagesUI = (props: MessagesParams) => {
     setMessage && setMessage(val)
   }
 
+  const handleClickQuickMessage = (text: string) => {
+    setMessage && setMessage(`${message}${text}`)
+  }
+
   const removeImage = () => {
     setImage && setImage(null)
   }
@@ -198,12 +209,47 @@ const MessagesUI = (props: MessagesParams) => {
     <InputToolbar
       {...props}
       containerStyle={{
-        padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10
+        padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+        flexDirection: 'column-reverse'
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
+      renderAccessory={() => renderAccessory()}
     />
   )
 
+  const renderAccessory = () => {
+    return (
+      <QuickMessageContainer
+        style={{
+          marginLeft: 10,
+          marginBottom: 10
+        }}
+        contentContainerStyle={{
+          alignItems: 'center',
+        }}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+      >
+        {quickMessageList.map((quickMessage, i) => (
+          <OButton
+            key={i}
+            text={quickMessage.text}
+            bgColor='#E9ECEF'
+            borderColor='#E9ECEF'
+            imgRightSrc={null}
+            textStyle={{
+              fontSize: 11,
+              lineHeight: 16,
+              color: '#414954'
+            }}
+            style={{ ...styles.editButton }}
+            onClick={() => handleClickQuickMessage(quickMessage.text)}
+          />
+        ))}
+      </QuickMessageContainer>
+    )
+  }
+
   const renderComposer = (props: any) => (
     chatDisabled ? (
       <View
@@ -337,7 +383,7 @@ const MessagesUI = (props: MessagesParams) => {
           renderMessageImage={renderMessageImage}
           scrollToBottomComponent={() => renderScrollToBottomComponent()}
           messagesContainerStyle={{
-            paddingBottom: 20
+            paddingBottom: 55
           }}
           isLoadingEarlier={messages.loading}
           renderLoading={() => <ActivityIndicator size="small" color="#000" />}
@@ -363,6 +409,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     marginHorizontal: 4
+  },
+  editButton : {
+    borderRadius: 50,
+    backgroundColor: '#E9ECEF',
+    marginRight: 10,
+    height: 24,
+    borderWidth: 1,
+    paddingLeft: 0,
+    paddingRight: 0
   }
 })
 

package/src/components/Messages/styles.tsx

@@ -5,6 +5,7 @@ export const Wrapper = styled.View`
   flex: 1;
   background-color: ${(props: any) => props.theme.colors.white};
 `
+
 export const Header = styled.View`
   flex-direction: row;
   align-items: center;
@@ -19,3 +20,5 @@ export const TitleHeader = styled.View`
   align-items: flex-start;
   max-width: 85%;
 `
+
+export const QuickMessageContainer = styled.ScrollView``

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

@@ -37,8 +37,8 @@ import {
   useUtils,
   useLanguage,
 } from 'ordering-components/native';
-import { Header, TitleHeader, Wrapper } from './styles';
-import { OIcon, OIconButton, OText } from '../shared';
+import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles';
+import { OIcon, OIconButton, OText, OButton } from '../shared';
 import { MessagesParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 
@@ -67,6 +67,17 @@ const ChatUI = (props: MessagesParams) => {
   const [, { showToast }] = useToast();
   const theme = useTheme();
 
+  const quickMessageList = [
+    { key: 'store_message_1', text: t('STORE_MESSAGE_1', 'store_message_1') },
+    { key: 'store_message_2', text: t('STORE_MESSAGE_2', 'store_message_2') },
+    { key: 'store_message_3', text: t('STORE_MESSAGE_3', 'store_message_3') },
+    { key: 'store_message_4', text: t('STORE_MESSAGE_4', 'store_message_4') }
+  ]
+
+  const handleClickQuickMessage = (text: string) => {
+    setMessage && setMessage(`${message}${text}`)
+  }
+
   const { bottom } = useSafeAreaInsets();
 
   const [formattedMessages, setFormattedMessages] = useState<Array<any>>([]);
@@ -131,6 +142,7 @@ const ChatUI = (props: MessagesParams) => {
     accessoryIcon: {
       height: 32,
       width: 32,
+      minWidth: 32,
       borderRadius: 7.6,
       resizeMode: 'stretch',
     },
@@ -198,6 +210,15 @@ const ChatUI = (props: MessagesParams) => {
       paddingLeft: 12,
       paddingRight: 5,
     },
+    editButton : {
+      borderRadius: 50,
+      backgroundColor: '#E9ECEF',
+      marginRight: 10,
+      height: 24,
+      borderWidth: 1,
+      paddingLeft: 0,
+      paddingRight: 0
+    }
   });
   const [file, setFile] = useState({
     uri: '',
@@ -590,6 +611,7 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   const renderAccessory = () => (
+    <View>
       <Header
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
@@ -636,7 +658,7 @@ const ChatUI = (props: MessagesParams) => {
               <OText
                 adjustsFontSizeToFit
                 color={theme.colors.unselectText}
-                size={14}>
+                size={13}>
                 {t('BUSINESS', 'Business')}
               </OText>
             </TitleHeader>
@@ -677,7 +699,7 @@ const ChatUI = (props: MessagesParams) => {
             <OText
               adjustsFontSizeToFit
               color={theme.colors.unselectText}
-              size={14}>
+              size={13}>
               {t('CUSTOMER', 'Customer')}
             </OText>
           </TitleHeader>
@@ -718,13 +740,39 @@ const ChatUI = (props: MessagesParams) => {
               <OText
                 adjustsFontSizeToFit
                 color={theme.colors.unselectText}
-                size={14}>
+                size={13}>
                 {t('DRIVER', 'Driver')}
               </OText>
             </TitleHeader>
           </Pressable>
         )}
       </Header>
+      <QuickMessageContainer
+        contentContainerStyle={{
+          alignItems: 'center'
+        }}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+      >
+        {quickMessageList.map((quickMessage, i) => (
+          <OButton
+            key={i}
+            text={quickMessage.text}
+            bgColor='#E9ECEF'
+            borderColor='#E9ECEF'
+            imgRightSrc={null}
+            textStyle={{
+              fontSize: 11,
+              lineHeight: 16,
+              color: '#414954'
+            }}
+            style={{ ...styles.editButton }}
+            onClick={() => handleClickQuickMessage(quickMessage.text)}
+          />
+        ))}
+      </QuickMessageContainer>
+    </View>
+
   );
 
   const userRoles: any = {
@@ -741,7 +789,7 @@ const ChatUI = (props: MessagesParams) => {
       {...props}
       containerStyle={styles.toolbarStyle}
       primaryStyle={{ alignItems: 'center', justifyContent: 'space-between' }}
-      accessoryStyle={{ position: 'relative', marginBottom: 10 }}
+      accessoryStyle={{ position: 'relative', marginBottom: 45 }}
       renderAccessory={order ? () => renderAccessory && renderAccessory() : undefined}
     />
   );
@@ -1128,10 +1176,10 @@ const ChatUI = (props: MessagesParams) => {
           renderBubble={renderBubble}
           renderMessageImage={renderMessageImage}
           scrollToBottomComponent={() => renderScrollToBottomComponent()}
-          messagesContainerStyle={{ paddingBottom: 12 }}
+          messagesContainerStyle={{ paddingBottom: 25 }}
           showUserAvatar={true}
           bottomOffset={bottom}
-          minInputToolbarHeight={115}
+          minInputToolbarHeight={145}
           isLoadingEarlier={messages?.loading}
           renderLoading={() => (
             <ActivityIndicator size="small" color={theme.colors.black} />

package/themes/business/src/components/Chat/styles.tsx

@@ -10,3 +10,7 @@ export const Header = styled.ScrollView``;
 export const TitleHeader = styled.View`
   margin-left: 11px;
 `;
+
+export const QuickMessageContainer = styled.ScrollView`
+  margin-top: 8px;
+`

package/themes/doordash/src/components/Messages/index.tsx

@@ -5,9 +5,9 @@ import { GiftedChat, Actions, InputToolbar, Composer, Send, Bubble, MessageImage
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { useTheme } from 'styled-components/native'
-import { OIcon, OIconButton, OText } from '../shared'
+import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard, I18nManager } from 'react-native'
-import { Header, TitleHeader, Wrapper } from './styles'
+import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
 
 const MessagesUI = (props: MessagesParams) => {
@@ -33,9 +33,20 @@ const MessagesUI = (props: MessagesParams) => {
   const [, t] = useLanguage()
   const [, { showToast }] = useToast();
 
+  const quickMessageList = [
+    { key: 'customer_message_1', text: t('CUSTOMER_MESSAGE_1', 'customer_message_1') },
+    { key: 'customer_message_2', text: t('CUSTOMER_MESSAGE_2', 'customer_message_2') },
+    { key: 'customer_message_3', text: t('CUSTOMER_MESSAGE_3', 'customer_message_3') },
+    { key: 'customer_message_4', text: t('CUSTOMER_MESSAGE_4', 'customer_message_4') }
+  ]
+
   const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
   const [isKeyboardShow, setIsKeyboardShow] = useState(false)
 
+  const handleClickQuickMessage = (text: string) => {
+    setMessage && setMessage(`${message}${text}`)
+  }
+
   const onChangeMessage = (val: string) => {
     setMessage && setMessage(val)
   }
@@ -220,13 +231,51 @@ const MessagesUI = (props: MessagesParams) => {
     )
   }
 
+  const renderAccessory = () => {
+    return (
+      <QuickMessageContainer
+        style={{
+          marginLeft: 10,
+          marginBottom: 10
+        }}
+        contentContainerStyle={{
+          alignItems: 'center',
+        }}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+      >
+        {quickMessageList.map((quickMessage, i) => (
+          <OButton
+            key={i}
+            text={quickMessage.text}
+            bgColor='#E9ECEF'
+            borderColor='#E9ECEF'
+            imgRightSrc={null}
+            textStyle={{
+              fontSize: 11,
+              lineHeight: 16,
+              color: '#414954'
+            }}
+            wrapperStyle={{
+              width: 'auto'
+            }}
+            style={{ ...styles.editButton }}
+            onClick={() => handleClickQuickMessage(quickMessage.text)}
+          />
+        ))}
+      </QuickMessageContainer>
+    )
+  }
+
   const renderInputToolbar = (props: any) => (
     <InputToolbar
       {...props}
       containerStyle={{
-        padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10
+        padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+        flexDirection: 'column-reverse'
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
+      renderAccessory={() => renderAccessory()}
     />
   )
 
@@ -347,7 +396,7 @@ const MessagesUI = (props: MessagesParams) => {
           renderMessageImage={renderMessageImage}
           scrollToBottomComponent={() => renderScrollToBottomComponent()}
           messagesContainerStyle={{
-            paddingBottom: 20
+            paddingBottom: 55
           }}
           isLoadingEarlier={messages.loading}
           renderLoading={() => <ActivityIndicator size="small" color="#000" />}
@@ -373,6 +422,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     marginHorizontal: 4
+  },
+  editButton : {
+    borderRadius: 50,
+    backgroundColor: '#E9ECEF',
+    marginRight: 10,
+    height: 24,
+    borderWidth: 1,
+    paddingLeft: 0,
+    paddingRight: 0
   }
 })
 

package/themes/doordash/src/components/Messages/styles.tsx

@@ -20,3 +20,5 @@ export const TitleHeader = styled.View`
   align-items: flex-start;
   max-width: 85%;
 `
+
+export const QuickMessageContainer = styled.ScrollView``

package/themes/doordash/src/components/shared/OButton.tsx

@@ -47,6 +47,7 @@ interface Props {
 	bgColor?: string;
 	borderColor?: string;
 	loadingStyle?: ViewStyle;
+	wrapperStyle?: ViewStyle
 }
 
 const StyledButton = styled.View<Props>`
@@ -114,7 +115,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<StyledImage style={{ transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }], ...props.imgLeftStyle }} source={props.imgLeftSrc} />
 				) : null}
 				{props.text ? (
-					<View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: props.textSub ? 'space-between' : 'center' }}>
+					<View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: props.textSub ? 'space-between' : 'center', ...props.wrapperStyle }}>
 						<StyledText style={props.textStyle}>{props.text}</StyledText>
 						{props.textSub ? <StyledText style={props.textStyle}>{props.textSub}</StyledText> : null}
 					</View>

package/themes/instacart/src/components/Messages/index.tsx

@@ -5,9 +5,9 @@ import { useTheme } from 'styled-components/native';
 import { GiftedChat, Actions, InputToolbar, Composer, Send, Bubble, MessageImage } from 'react-native-gifted-chat'
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { OIcon, OIconButton, OText } from '../shared'
+import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard, I18nManager } from 'react-native'
-import { Header, TitleHeader, Wrapper } from './styles'
+import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
 
 const ORDER_STATUS: any = {
@@ -61,6 +61,17 @@ const MessagesUI = (props: MessagesParams) => {
 	const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
   const chatDisabled = previousStatus.includes(order?.status)
 
+	const quickMessageList = [
+    { key: 'customer_message_1', text: t('CUSTOMER_MESSAGE_1', 'customer_message_1') },
+    { key: 'customer_message_2', text: t('CUSTOMER_MESSAGE_2', 'customer_message_2') },
+    { key: 'customer_message_3', text: t('CUSTOMER_MESSAGE_3', 'customer_message_3') },
+    { key: 'customer_message_4', text: t('CUSTOMER_MESSAGE_4', 'customer_message_4') }
+  ]
+
+	const handleClickQuickMessage = (text: string) => {
+    setMessage && setMessage(`${message}${text}`)
+  }
+
 	const onChangeMessage = (val: string) => {
 		setMessage && setMessage(val)
 	}
@@ -193,13 +204,48 @@ const MessagesUI = (props: MessagesParams) => {
 		)
 	}
 
+	const renderAccessory = () => {
+    return (
+      <QuickMessageContainer
+        style={{
+          marginLeft: 10,
+          marginBottom: 10
+        }}
+        contentContainerStyle={{
+          alignItems: 'center',
+        }}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+      >
+        {quickMessageList.map((quickMessage, i) => (
+          <OButton
+            key={i}
+            text={quickMessage.text}
+            bgColor='#E9ECEF'
+            borderColor='#E9ECEF'
+            imgRightSrc={null}
+            textStyle={{
+              fontSize: 11,
+              lineHeight: 16,
+              color: '#414954'
+            }}
+            style={{ ...styles.editButton }}
+            onClick={() => handleClickQuickMessage(quickMessage.text)}
+          />
+        ))}
+      </QuickMessageContainer>
+    )
+  }
+
 	const renderInputToolbar = (props: any) => (
 		<InputToolbar
 			{...props}
 			containerStyle={{
-				padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10
+				padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+				flexDirection: 'column-reverse'
 			}}
 			primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
+      renderAccessory={() => renderAccessory()}
 		/>
 	)
 
@@ -337,7 +383,7 @@ const MessagesUI = (props: MessagesParams) => {
 					renderMessageImage={renderMessageImage}
 					scrollToBottomComponent={() => renderScrollToBottomComponent()}
 					messagesContainerStyle={{
-						paddingBottom: 20
+						paddingBottom: 55
 					}}
 					isLoadingEarlier={messages.loading}
 					renderLoading={() => <ActivityIndicator size="small" color="#000" />}
@@ -363,7 +409,16 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 		marginHorizontal: 4
-	}
+	},
+	editButton : {
+    borderRadius: 50,
+    backgroundColor: '#E9ECEF',
+    marginRight: 10,
+    height: 24,
+    borderWidth: 1,
+    paddingLeft: 0,
+    paddingRight: 0
+  }
 })
 
 export const Messages = (props: MessagesParams) => {

package/themes/instacart/src/components/Messages/styles.tsx

@@ -19,3 +19,5 @@ export const TitleHeader = styled.View`
   align-items: flex-start;
   max-width: 85%;
 `
+
+export const QuickMessageContainer = styled.ScrollView``

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

@@ -91,7 +91,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const _renderCategories = (): React.ReactElement => (
     <>
       {_renderTitle(t('CATEGORIES', 'Categories'))}
-      <GridContainer>
+      <GridContainer 
+        style={{
+          paddingLeft: orientationState?.orientation === LANDSCAPE
+          ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.004 :orientationState?.dimensions?.width * 0.008
+          : 0
+        }}
+      >
         {_categories && _categories.map((category: any) => (
           <OCard
             key={category.id}

package/themes/kiosk/src/components/CartBottomSheet/styles.tsx

@@ -5,7 +5,7 @@ export const StyledContainer = styled.ScrollView`
 	zIndex: 1000;
 	width: 100%;
 	background-color: #fff;
-	padding: 20px;
+	padding: 20px 20px 20px 0px;
 	bottom: 0;
 	shadow-color: #000;
 	shadow-opacity:  0.4;

package/themes/kiosk/src/components/CategoriesMenu/index.tsx

@@ -144,7 +144,14 @@ const CategoriesMenu = (props: any): React.ReactElement => {
               />
             </View>
 
-            <GridContainer style={{ marginTop: 20 }}>
+            <GridContainer 
+              style={{ 
+                marginTop: 20, 
+                paddingLeft: orientationState?.orientation === LANDSCAPE
+                        ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.004 :orientationState?.dimensions?.width * 0.008
+                        : 0
+              }}
+            >
               {categories[curIndexCateg].products.map((product) => (
                 <OCard
                   key={product.id}