ordering-ui-react-native 0.22.25 → 0.22.27

package/package.json

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

package/themes/business/src/components/PreviousOrders/OrderItem.tsx

@@ -47,6 +47,7 @@ export const OrderItem = React.memo((props: any) => {
     timer: configState?.configs?.order_deadlines_enabled?.value === '1',
     slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
   })
+  const showExternalId = configState?.configs?.change_order_id?.value === '1'
 
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
   const platformIOS = Platform as PlatformIOSStatic
@@ -76,7 +77,7 @@ export const OrderItem = React.memo((props: any) => {
       marginLeft: 3,
     },
     title: {
-      marginBottom: 6,
+      marginBottom: showExternalId ? 0 : 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: '600',
@@ -84,7 +85,7 @@ export const OrderItem = React.memo((props: any) => {
       color: theme.colors.textGray,
     },
     date: {
-      marginBottom: 6,
+      marginBottom: showExternalId ? 0 : 6,
       fontFamily: 'Poppins',
       fontStyle: 'normal',
       fontWeight: 'normal',
@@ -179,17 +180,27 @@ export const OrderItem = React.memo((props: any) => {
               />
             </NotificationIcon>
           )}
-          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+          <View style={{ flexDirection: `${showExternalId ? 'column' : 'row'}`, flexWrap: 'wrap' }}>
+            {!order?.order_group_id && showExternalId && !order?.order_group && (
+              <OText
+                style={styles.date}
+                color={theme.colors.unselectText}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+              >
+                {order?.external_id ?? t('NO_EXTERNAL_ID', 'No external Id ') + t('NO', 'Order No.') + order?.id}
+              </OText>
+            )}
             <OText
               style={styles.date}
               color={theme.colors.unselectText}
               numberOfLines={1}
               adjustsFontSizeToFit
             >
-              {(!!order?.order_group_id && order?.order_group && isLogisticOrder
+              {(!showExternalId && ((!!order?.order_group_id && order?.order_group && isLogisticOrder
                 ? `${order?.order_group?.orders?.length} ${t('ORDERS', 'Orders')}`
-                : (t('NO', 'Order No.') + order.id)
-              ) + ' · '}
+                : (t('NO', 'Order No.') + order?.id)
+              ) + ' · '))}
               {order?.delivery_datetime_utc
                 ? parseDate(order?.delivery_datetime_utc)
                 : parseDate(order?.delivery_datetime, { utc: false })}

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

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { View, Animated, StyleSheet, Platform, TouchableOpacity } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { View, Animated, StyleSheet, TouchableOpacity } from 'react-native'
 import { useUtils, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -47,25 +47,34 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const pickerStyle = StyleSheet.create({
 		inputAndroid: {
-			width: 34,
+			width: 45,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,
-			height: 20,
-			padding: 0,
-			color: theme.colors.textNormal
+			height: 30,
+			color: theme.colors.textNormal,
+			backgroundColor: theme.colors.backgroundGray100,
+			paddingVertical: 8,
+			paddingRight: 10,
+			paddingLeft: 0,
+			borderRadius: 7.6,
 		},
 		inputIOS: {
-			width: 34,
+			width: 45,
 			textAlign: 'center',
 			overflow: 'visible',
 			fontSize: 12,
+			backgroundColor: theme.colors.backgroundGray100,
+			paddingVertical: 8,
+			paddingRight: 15,
+			paddingLeft: 0,
+			borderRadius: 7.6,
 		},
 		icon: {
 			position: 'absolute',
 			zIndex: 1,
-			top: -4,
-			end: -4,
+			top: 0,
+			end: 8,
 		},
 		placeholder: {
 			color: theme.colors.secundaryContrast
@@ -79,9 +88,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
 	const [isActive, setActiveState] = useState(false)
 	const [isServiceOpen, setIsServiceOpen] = useState(false)
-	const [productQuantityState, setProductQuantityState] = useState(product.quantity.toString())
-	// const [setHeight, setHeightState] = useState({ height: new Animated.Value(0) })
-	// const [setRotate, setRotateState] = useState({ angle: new Animated.Value(0) })
+	const [productQuantityState, setProductQuantityState] = useState<any>(product.quantity.toString())
 
 	const productInfo = () => {
 		if (isCartProduct) {
@@ -109,20 +116,6 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		setIsServiceOpen(true)
 	}
 
-	/* const toggleAccordion = () => {
-		if ((!product?.valid_menu && isCartProduct)) return
-		if (isActive) {
-			Animated.timing(setHeight.height, {
-			 toValue: 100,
-			 duration: 500,
-			 easing: Easing.linear,
-			 useNativeDriver: false,
-			}).start()
-		} else {
-			setHeightState({height: new Animated.Value(0)})
-		}
-	 }*/
-
 	const handleChangeQuantity = (value: string) => {
 		if (!orderState.loading) {
 			setProductQuantityState(value)
@@ -139,10 +132,6 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		return `${quantity} x ${name} ${pos} +${price}`
 	}
 
-	/*useEffect(() => {
-		toggleAccordion()
-	}, [isActive])*/
-
 	const productOptions = getProductMax && [...Array(getProductMax(product) + 1),].map((_: any, opt: number) => {
 		return {
 			label: opt === 0 ? t('REMOVE', 'Remove') : opt.toString(),
@@ -150,15 +139,23 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 		}
 	})
 
+	useEffect(() => {
+		if (product.quantity.toString() === productQuantityState || productQuantityState) {
+			setProductQuantityState(null)
+		}
+	}, [product.quantity])
+
 	return (
 		<>
 			<AccordionSection>
 				<Accordion
-					isValid={product?.valid ?? true}
-					onPress={() => (!product?.valid_menu && isCartProduct)
-						? {}
-						: setActiveState(!isActive)}
 					activeOpacity={1}
+					isValid={product?.valid ?? true}
+					onPress={
+						(!product?.valid_menu && isCartProduct) ||
+						!(productInfo().ingredients.length > 0 || productInfo().options.length > 0 || !!product.comment)
+						? null : () => setActiveState(!isActive)
+					}
 				>
 					<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
 						<ContentInfo>
@@ -215,16 +212,20 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 											<RNPickerSelect
 												items={productOptions}
 												onValueChange={handleChangeQuantity}
-												value={productQuantityState}
+												value={productQuantityState ?? product.quantity.toString()}
 												style={pickerStyle}
 												useNativeAndroidPickerStyle={false}
 												placeholder={{}}
-												touchableWrapperProps={{
-													style: {
-														width: 40,
-													}
-												}}
-												Icon={() => <View style={pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} /></View>}
+												touchableWrapperProps={{ style: { width: 45 } }}
+												Icon={() => (
+													<View style={pickerStyle.icon}>
+														<OIcon
+															src={theme.images.general.arrow_down}
+															color={theme.colors.textNormal}
+															width={8}
+														/>
+													</View>
+												)}
 												disabled={orderState.loading}
 											/>
 										</ProductInfo>

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

@@ -17,9 +17,6 @@ export const Accordion = styled.TouchableOpacity`
 
 export const ProductInfo = styled.View`
 	margin-horizontal: 7px;
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-	padding: 4px 12px 4px 0px;
-	border-radius: 7.6px;
 `
 
 export const ProductQuantity = styled.View`