ordering-ui-react-native 0.17.60 → 0.17.62

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

@@ -67,51 +67,51 @@ export const MyOrders = (props: any) => {
   });
 
   return (
-    <Container noPadding refreshControl={
-      <RefreshControl
-        refreshing={refreshing}
-        onRefresh={() => handleOnRefresh()}
-      />
-    }>
+    <Container
+      pt={0}
+      noPadding
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => handleOnRefresh()}
+        />
+      }
+    >
       {(isChewLayout || showNavbar) && (
         <View style={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingHorizontal: 40,
-          marginTop: Platform.OS === 'android' ? 50 : 30,
+          ...{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 40,
+            marginTop: Platform.OS === 'android' ? 50 : 30,
+          },
+          ...props.titleStyle
         }}>
-          <OButton
-            imgLeftStyle={{ width: 18 }}
-            imgRightSrc={null}
-            style={{
-              borderWidth: 0,
-              width: 26,
-              height: 26,
-              backgroundColor: '#FFF',
-              borderColor: '#FFF',
-              shadowColor: '#FFF',
-              paddingLeft: 0,
-              paddingRight: 0
-            }}
-            onClick={goToBack}
-            icon={AntDesignIcon}
-            iconProps={{
-              name: 'arrowleft',
-              size: 26
-            }}
-          />
-          <OText
-            size={24}
-            style={{
-              textTransform: 'capitalize',
-              marginLeft: 20,
-              top: 2
-            }}
-          >
-            {t('MY_ORDERS', 'My Orders')}
-          </OText>
+          {!props.hideBackBtn && (
+            <OButton
+              imgLeftStyle={{ width: 18 }}
+              imgRightSrc={null}
+              style={{
+                borderWidth: 0,
+                width: 26,
+                height: 26,
+                backgroundColor: '#FFF',
+                borderColor: '#FFF',
+                shadowColor: '#FFF',
+                paddingLeft: 0,
+                paddingRight: 0
+              }}
+              onClick={goToBack}
+              icon={AntDesignIcon}
+              iconProps={{
+                name: 'arrowleft',
+                size: 26
+              }}
+            />
+          )}
+          <HeaderTitle ph={0} text={t('MY_ORDERS', 'My Orders')} />
         </View>
       )}
       {!hideOrders && !isChewLayout && !showNavbar && (

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

@@ -44,9 +44,7 @@ export const ProductTitle = styled.View`
   padding-bottom: 7px;
 `
 
-export const ProductDescription = styled.View`
-  margin-bottom: 20px;
-`
+export const ProductDescription = styled.View``
 
 export const ProductEditions = styled.View`
   padding: 0 40px;
@@ -96,7 +94,7 @@ export const WeightUnitItem = styled.View`
   `}
 `
 export const ProductSummary = styled.View`
-  padding: 26px 40px;
+  padding: 26px 40px 0;
   position: relative;
   background-color: white;
   z-index: 100;

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

@@ -236,12 +236,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 										<MaterialCommunityIcon name='chevron-down' size={18} />
 									)}
 								</View>
-								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
+								<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', height: 20 }}>
 									{onEditProduct && isCartProduct && !isCartPending && product?.valid_menu && (
-										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginEnd: 7 }}>
-											<OIcon
-												src={theme.images.general.pencil}
-												width={20}
+										<TouchableOpacity onPress={() => handleEditProduct(product)} style={{ marginRight: 5 }}>
+											<MaterialCommunityIcon
+												name='pencil-outline'
+												size={20}
 												color={theme.colors.textSecondary}
 											/>
 										</TouchableOpacity>
@@ -252,9 +252,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 											message={t('QUESTION_DELETE_PRODUCT', 'Are you sure that you want to delete the product?')}
 											onAccept={() => onDeleteProduct(product)}
 										>
-											<OIcon
-												src={theme.images.general.trash}
-												width={20}
+											<MaterialCommunityIcon
+												name='trash-can-outline'
+												size={20}
 												color={theme.colors.textSecondary}
 											/>
 										</OAlert>

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

@@ -6,6 +6,7 @@ import {
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import { StyleSheet, View } from 'react-native'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 import {
 	Container,
@@ -33,13 +34,16 @@ export const ProductOptionSubOptionUI = (props: any) => {
 
 	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
 	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
-	
+
 	const theme = useTheme();
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
 	const [isDirty, setIsDirty] = useState(false)
 
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const iconsSize = isChewLayout ? 20 : 16
+
 	const handleSuboptionClick = () => {
 		toggleSelect()
 		setIsDirty(true)
@@ -87,9 +91,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					{option?.allow_suboption_quantity && state?.selected && (
 						<>
 							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-								<OIcon
-									src={theme.images.general.minus}
-									width={16}
+								<IconAntDesign
+									name='minuscircleo'
+									size={iconsSize}
 									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
@@ -97,9 +101,9 @@ export const ProductOptionSubOptionUI = (props: any) => {
 								{state.quantity}
 							</OText>
 							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-								<OIcon
-									src={theme.images.general.plus}
-									width={16}
+								<IconAntDesign
+									name='pluscircleo'
+									size={iconsSize}
 									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
 								/>
 							</Checkbox>
@@ -140,7 +144,11 @@ export const ProductOptionSubOptionUI = (props: any) => {
 					</OText>
 				)}
 			</Container>
-			{showMessage && <OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}</OText>}
+			{showMessage && (
+				<OText size={10} mLeft={4} mRight={4} style={{ flex: 1, textAlign: 'center' }} color={theme.colors.primary}>
+					{`${t('OPTIONS_MAX_LIMIT', 'Maximum options to choose')}: ${option?.max}`}
+				</OText>
+			)}
 		</View>
 	)
 }

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

@@ -21,7 +21,6 @@ export const QuantityControl = styled.View`
   margin-horizontal: 5px;
   flex: 1;
   width: 60px;
-
 `
 
 export const PositionControl = styled.View`