ordering-ui-react-native 0.14.85 → 0.14.88

package/package.json

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

package/src/utils/index.tsx

@@ -191,3 +191,197 @@ export const transformCountryCode = (countryCode : number) => {
   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
   return R * c
 }
+
+/**
+ * function to manage review comment list
+ * @param {number} param0 type of reviews to return
+ * @returns object with reviews dictionary
+ */
+ export const reviewCommentList = (type: string) => {
+  const [, t] = useLanguage()
+
+  const reviews: any = {
+    order: {
+      1: {
+        title: t('QUICK_COMMENT_TITLE_1', "What went wrong?"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_1_0', "Not handled with care") },
+          { key: 1, content: t('QUICK_COMMENT_1_1', "Poor communication") },
+          { key: 2, content: t('QUICK_COMMENT_1_2', "COVID-19 issue") },
+          { key: 3, content: t('QUICK_COMMENT_1_3', "Didn't follow instructions") },
+          { key: 4, content: t('QUICK_COMMENT_1_4', "Rude") },
+          { key: 5, content: t('QUICK_COMMENT_1_5', "Not on-time") },
+        ]
+      },
+      2: {
+        title: t('QUICK_COMMENT_TITLE_2', "What went wrong?"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_2_0', "Not handled with care") },
+          { key: 1, content: t('QUICK_COMMENT_2_1', "Poor communication") },
+          { key: 2, content: t('QUICK_COMMENT_2_2', "COVID-19 issue") },
+          { key: 3, content: t('QUICK_COMMENT_2_3', "Didn't follow instructions") },
+          { key: 4, content: t('QUICK_COMMENT_2_4', "Rude") },
+          { key: 5, content: t('QUICK_COMMENT_2_5', "Not on-time") },
+        ]
+      },
+      3: {
+        title: t('QUICK_COMMENT_TITLE_3', "What could have been better?"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_3_0', "Not handled with care") },
+          { key: 1, content: t('QUICK_COMMENT_3_1', "Poor communication") },
+          { key: 2, content: t('QUICK_COMMENT_3_2', "COVID-19 issue") },
+          { key: 3, content: t('QUICK_COMMENT_3_3', "Didn't follow instructions") },
+          { key: 4, content: t('QUICK_COMMENT_3_4', "Rude") },
+          { key: 5, content: t('QUICK_COMMENT_3_5', "Not on-time") },
+        ]
+      },
+      4: {
+        title: t('QUICK_COMMENT_TITLE_4', " Tell us more"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_4_0', "Not handled with care") },
+          { key: 1, content: t('QUICK_COMMENT_4_1', "Poor communication") },
+          { key: 2, content: t('QUICK_COMMENT_4_2', "COVID-19 issue") },
+          { key: 3, content: t('QUICK_COMMENT_4_3', "Didn't follow instructions") },
+          { key: 4, content: t('QUICK_COMMENT_4_4', "Rude") },
+          { key: 5, content: t('QUICK_COMMENT_4_5', "Not on-time") },
+        ]
+      },
+      5: {
+        title: t('QUICK_COMMENT_TITLE_5', "What went well?"),
+        list: [
+          { key: 0, content: t('QUICK_COMMENT_5_0', "Good communication") },
+          { key: 1, content: t('QUICK_COMMENT_5_1', "Followed instructions") },
+          { key: 2, content: t('QUICK_COMMENT_5_2', "Friendly") },
+          { key: 3, content: t('QUICK_COMMENT_5_3', 'Handled with care') },
+          { key: 4, content: t('QUICK_COMMENT_5_4', "Above and beyond") },
+        ]
+      },
+    },
+    customer: {
+      1: {
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_1', "What went wrong?"),
+        list: [
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_1_0', "Poor communication") },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_1_1', "Wrong address") },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_1_2', "COVID-19 issue") },
+          { key: 3, content: t('CUSTOMER_QUICK_COMMENT_1_3', "Didn't follow instructions") },
+          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_1_4', "Rude") },
+          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_1_5', "Not on-time") },
+        ]
+      },
+      2: {
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_2', "What went wrong?"),
+        list: [
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_2_0', "Poor communication") },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_2_1', "Wrong address") },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_2_2', "COVID-19 issue") },
+          { key: 3, content: t('CUSTOMER_QUICK_COMMENT_2_3', "Didn't follow instructions") },
+          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_2_4', "Rude") },
+          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_2_5', "Not on-time") },
+        ]
+      },
+      3: {
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_3', "What could have been better?"),
+        list: [
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_3_0', "Poor communication") },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_3_1', "Wrong address") },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_3_2', "COVID-19 issue") },
+          { key: 3, content: t('CUSTOMER_QUICK_COMMENT_3_3', "Didn't follow instructions") },
+          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_3_4', "Rude") },
+          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_3_5', "Not on-time") },
+        ]
+      },
+      4: {
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_4', " Tell us more"),
+        list: [
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_4_0', "Poor communication") },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_4_1', "Wrong address") },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_4_2', "COVID-19 issue") },
+          { key: 3, content: t('CUSTOMER_QUICK_COMMENT_4_3', "Didn't follow instructions") },
+          { key: 4, content: t('CUSTOMER_QUICK_COMMENT_4_4', "Rude") },
+          { key: 5, content: t('CUSTOMER_QUICK_COMMENT_4_5', "Not on-time") },
+        ]
+      },
+      5: {
+        title: t('CUSTOMER_QUICK_COMMENT_TITLE_5', "What went well?"),
+        list: [
+          { key: 0, content: t('CUSTOMER_QUICK_COMMENT_5_0', "Good communication") },
+          { key: 1, content: t('CUSTOMER_QUICK_COMMENT_5_1', "Friendly") },
+          { key: 2, content: t('CUSTOMER_QUICK_COMMENT_5_2', "Above and beyond") },
+        ]
+      },
+    },
+    driver: {
+      1: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_1', "What went wrong?"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_1_0', "Not handled with care") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_1_1', "Poor communication") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_1_2', "COVID-19 issue") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_1_3', "Didn't follow instructions") },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_1_4', "Rude") },
+          { key: 5, content: t('DRIVER_QUICK_COMMENT_1_5', "Not on-time") },
+        ]
+      },
+      2: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_2', "What went wrong?"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_2_0', "Not handled with care") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_2_1', "Poor communication") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_2_2', "COVID-19 issue") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_2_3', "Didn't follow instructions") },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_2_4', "Rude") },
+          { key: 5, content: t('DRIVER_QUICK_COMMENT_2_5', "Not on-time") },
+        ]
+      },
+      3: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_3', "What could have been better?"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_3_0', "Not handled with care") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_3_1', "Poor communication") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_3_2', "COVID-19 issue") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_3_3', "Didn't follow instructions") },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_3_4', "Rude") },
+          { key: 5, content: t('DRIVER_QUICK_COMMENT_3_5', "Not on-time") },
+        ]
+      },
+      4: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_4', " Tell us more"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_4_0', "Not handled with care") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_4_1', "Poor communication") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_4_2', "COVID-19 issue") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_4_3', "Didn't follow instructions") },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_4_4', "Rude") },
+          { key: 5, content: t('DRIVER_QUICK_COMMENT_4_5', "Not on-time") },
+        ]
+      },
+      5: {
+        title: t('DRIVER_QUICK_COMMENT_TITLE_5', "What went well?"),
+        list: [
+          { key: 0, content: t('DRIVER_QUICK_COMMENT_5_0', "Good communication") },
+          { key: 1, content: t('DRIVER_QUICK_COMMENT_5_1', "Followed instructions") },
+          { key: 2, content: t('DRIVER_QUICK_COMMENT_5_2', "Friendly") },
+          { key: 3, content: t('DRIVER_QUICK_COMMENT_5_3', 'Handled with care') },
+          { key: 4, content: t('DRIVER_QUICK_COMMENT_5_4', "Above and beyond") },
+        ]
+      },
+    },
+    product: {
+      like: [
+        { key: 0, content: t('QUICK_COMMENT_LIKE_0', "Tasty") },
+        { key: 1, content: t('QUICK_COMMENT_LIKE_1', "Good price") },
+        { key: 2, content: t('QUICK_COMMENT_LIKE_2', "Good portion size") },
+        { key: 3, content: t('QUICK_COMMENT_LIKE_3', "Packed well") },
+      ],
+      dislike: [
+        { key: 0, content: t('QUICK_COMMENT_DISLIKE_0', "Not tasty") },
+        { key: 1, content: t('QUICK_COMMENT_DISLIKE_1', "High price") },
+        { key: 2, content: t('QUICK_COMMENT_DISLIKE_2', "Bad portion size") },
+        { key: 3, content: t('QUICK_COMMENT_DISLIKE_3', "Not packed well") },
+      ]
+    }
+  }
+
+  return reviews[type]
+}

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

@@ -20,6 +20,8 @@ import { FloatingButton } from '../FloatingButton'
 import LinearGradient from 'react-native-linear-gradient'
 import Alert from '../../providers/AlertProvider'
 
+import { reviewCommentList } from '../../../../../src/utils'
+
 import {
   Content,
   ActionButtonWrapper,
@@ -101,11 +103,8 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
   ]
 
-  const commentsList = [
-    { key: 0, content: t('RESPECTFUL', 'Respectful') },
-    { key: 1, content: t('EXCELLENT_COMMUNICATION', "Excellent communication") },
-    { key: 2, content: t('CORDIAL_SERVICE', 'Cordial service') }
-  ]
+  const commentsList = reviewCommentList('customer')
+
   const isSelectedComment = (commentKey: number) => {
     const found = comments.find((comment: any) => comment?.key === commentKey)
     return found
@@ -251,10 +250,10 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
           size={12}
           style={{ marginTop: 30 }}
         >
-          {t('COMMENTS', 'Comments')}
+          {commentsList[reviewState?.qualification || 1]?.title}
         </OText>
         <CommentsButtonGroup>
-          {commentsList.map(commentItem => (
+          {commentsList[reviewState?.qualification || 1]?.list?.map(commentItem => (
             <OButton
               key={commentItem.key}
               text={commentItem.content}

package/themes/original/index.tsx

@@ -20,6 +20,8 @@ import { BusinessPreorder } from './src/components/BusinessPreorder';
 import { BusinessMenuList } from './src/components/BusinessMenuList';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
+import { ReviewProducts } from './src/components/ReviewProducts';
+import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
 import { Help } from './src/components/Help';
@@ -82,6 +84,8 @@ export {
 	BusinessPreorder,
 	UserProfileForm,
 	ReviewOrder,
+	ReviewProducts,
+	ReviewDriver,
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,

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

@@ -667,6 +667,19 @@ const CheckoutUI = (props: any) => {
 					setShowGateway={setShowGateway}
 				/>
 			)}
+			{webviewPaymethod?.gateway === 'square' && showGateway.open && (
+				<PaymentOptionsWebView
+					onNavigationRedirect={onNavigationRedirect}
+					uri={`https://test-square-f50f7.web.app`}
+					user={user}
+					token={token}
+					cart={cart}
+					currency={currency}
+					webviewPaymethod={webviewPaymethod}
+					setShowGateway={setShowGateway}
+					locationId={'L1NGAY5M6KJRX'}
+				/>
+			)}
 		</>
 	)
 }

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

@@ -139,7 +139,7 @@ const OrderProgressUI = (props: any) => {
   return (
     <>
       {orderList?.loading && (
-        <Placeholder Animation={Fade} height={160}>
+        <Placeholder Animation={Fade} height={158}>
           <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
           <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
           <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />

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

@@ -154,7 +154,7 @@ const PaymentOptionsUI = (props: any) => {
 		)
 	}
 
-	const excludeIds: any = [32, 66]; //exclude paypal & connect & redirect
+	const excludeIds: any = [32]; //exclude paypal & connect & redirect
 
 	return (
 		<PMContainer>

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

@@ -935,28 +935,29 @@ export const ProductOptionsUI = (props: any) => {
 						style={{
 							width: isSoldOut || maxProductQuantity <= 0 ? '60%' : '40%',
 						}}>
-						{productCart &&
-							!isSoldOut &&
-							maxProductQuantity > 0 &&
+						{((productCart &&
 							auth &&
-							orderState.options?.address_id && (
+							orderState.options?.address_id) || (isSoldOut || maxProductQuantity <= 0)) && (
 								<OButton
 									onClick={() => handleSaveProduct()}
 									imgRightSrc=""
 									text={`${orderState.loading
 										? t('LOADING', 'Loading')
-										: editMode
-											? t('UPDATE', 'Update')
-											: t('ADD', 'Add')
+										: (isSoldOut || maxProductQuantity <= 0)
+											? t('SOLD_OUT', 'Sold out')
+											: editMode
+												? t('UPDATE', 'Update')
+												: t('ADD', 'Add')
 										}`}
+									isDisabled={isSoldOut || maxProductQuantity <= 0}
 									textStyle={{
-										color: (saveErrors || !productCart.quantity) ? theme.colors.primary : theme.colors.white,
+										color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
 										fontSize: orderState.loading || editMode ? 10 : 14
 									}}
 									style={{
-										backgroundColor: (saveErrors || !productCart.quantity) ? theme.colors.lightGray : theme.colors.primary,
-										borderColor: (saveErrors || !productCart.quantity) ? theme.colors.white : theme.colors.primary,
-										opacity: (saveErrors || !productCart.quantity) ? 0.3 : 1,
+										backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.lightGray : theme.colors.primary,
+										borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.white : theme.colors.primary,
+										opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
 										borderRadius: 7.6,
 										height: 44,
 										shadowOpacity: 0,
@@ -976,7 +977,7 @@ export const ProductOptionsUI = (props: any) => {
 							) : (
 								<OButton onClick={navigation.navigate('AddressList')} />
 							))}
-						{(!auth || isSoldOut || maxProductQuantity <= 0) && (
+						{!auth && (
 							<OButton
 								isDisabled={isSoldOut || maxProductQuantity <= 0}
 								onClick={() => handleRedirectLogin()}

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

@@ -5,7 +5,7 @@ import {
 	ProductOptionSuboption as ProductSubOptionController
 } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
-import { StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
 import {
 	Container,
@@ -52,81 +52,83 @@ 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
 	return (
-		<Container onPress={() => handleSuboptionClick()}>
-			<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
-				{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
-					state?.selected ? (
-						<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
+		<View>
+			<Container onPress={() => handleSuboptionClick()}>
+				<IconControl disabled={disabled} onPress={() => handleSuboptionClick()}>
+					{((option?.min === 0 && option?.max === 1) || option?.max > 1) ? (
+						state?.selected ? (
+							<OIcon src={theme.images.general.check_act} color={theme.colors.primary} width={16} />
+						) : (
+							<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
+						)
 					) : (
-						<OIcon src={theme.images.general.check_nor} color={theme.colors.disabled} width={16} />
-					)
-				) : (
-					state?.selected ? (
-						<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
-					) : (
-						<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
-					)
-				)}
-				<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
-					{suboption?.name}
+						state?.selected ? (
+							<OIcon src={theme.images.general.radio_act} color={theme.colors.primary} width={16} />
+						) : (
+							<OIcon src={theme.images.general.radio_nor} color={theme.colors.disabled} width={16} />
+						)
+					)}
+					<OText size={12} lineHeight={18} color={theme.colors.textSecondary} mLeft={10} style={{ flex: 1 }}>
+						{suboption?.name}
+					</OText>
+				</IconControl>
+				<QuantityControl>
+					{option?.allow_suboption_quantity && state?.selected && (
+						<>
+							<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
+								<OIcon
+									src={theme.images.general.minus}
+									width={16}
+									color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
+								/>
+							</Checkbox>
+							<OText size={12} mLeft={5} mRight={5}>
+								{state.quantity}
+							</OText>
+							<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
+								<OIcon
+									src={theme.images.general.plus}
+									width={16}
+									color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
+								/>
+							</Checkbox>
+						</>
+					)}
+				</QuantityControl>
+				<PositionControl>
+					{option?.with_half_option && state?.selected && (
+						<>
+							<Circle disabled={disabled} onPress={() => changePosition('left')}>
+								<OIcon
+									src={theme.images.general.half_l}
+									color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+									style={styles.inverse}
+								/>
+							</Circle>
+							<Circle disabled={disabled} onPress={() => changePosition('whole')}>
+								<OIcon
+									src={theme.images.general.half_f}
+									color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+								/>
+							</Circle>
+							<Circle disabled={disabled} onPress={() => changePosition('right')}>
+								<OIcon
+									src={theme.images.general.half_r}
+									color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
+									width={16}
+								/>
+							</Circle>
+						</>
+					)}
+				</PositionControl>
+				<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
+					+ {parsePrice(price)}
 				</OText>
-			</IconControl>
+			</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>}
-			<QuantityControl>
-				{option?.allow_suboption_quantity && state?.selected && (
-					<>
-						<Checkbox disabled={disabled || state.quantity === 0} onPress={decrement}>
-							<OIcon
-								src={theme.images.general.minus}
-								width={16}
-								color={state.quantity === 0 || disabled ? theme.colors.disabled : theme.colors.primary}
-							/>
-						</Checkbox>
-						<OText size={12} mLeft={5} mRight={5}>
-							{state.quantity}
-						</OText>
-						<Checkbox disabled={disabled || disableIncrement} onPress={increment}>
-							<OIcon
-								src={theme.images.general.plus}
-								width={16}
-								color={disableIncrement || disabled ? theme.colors.disabled : theme.colors.primary}
-							/>
-						</Checkbox>
-					</>
-				)}
-			</QuantityControl>
-			<PositionControl>
-				{option?.with_half_option && state?.selected && (
-					<>
-						<Circle disabled={disabled} onPress={() => changePosition('left')}>
-							<OIcon
-								src={theme.images.general.half_l}
-								color={state.selected && state.position === 'left' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-								style={styles.inverse}
-							/>
-						</Circle>
-						<Circle disabled={disabled} onPress={() => changePosition('whole')}>
-							<OIcon
-								src={theme.images.general.half_f}
-								color={state.selected && state.position === 'whole' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-							/>
-						</Circle>
-						<Circle disabled={disabled} onPress={() => changePosition('right')}>
-							<OIcon
-								src={theme.images.general.half_r}
-								color={state.selected && state.position === 'right' ? theme.colors.primary : '#cbcbcb'}
-								width={16}
-							/>
-						</Circle>
-					</>
-				)}
-			</PositionControl>
-			<OText size={12} lineHeight={18} color={theme.colors.textSecondary}>
-				+ {parsePrice(price)}
-			</OText>
-		</Container>
+		</View>
 	)
 }