ordering-ui-react-native 0.14.25 → 0.14.27-release

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

@@ -23,7 +23,6 @@ import { PaymentOptions } from '../PaymentOptions';
 import { DriverTips } from '../DriverTips';
 import { NotFoundSource } from '../NotFoundSource';
 import { UserDetails } from '../UserDetails';
-import { PaymentOptionWallet } from '../PaymentOptionWallet';
 
 import {
 	ChContainer,
@@ -38,8 +37,7 @@ import {
 	ChUserDetails,
 	ChCart,
 	DeliveryOptionsContainer,
-	DeliveryOptionItem,
-  WalletPaymentOptionContainer
+	DeliveryOptionItem
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -506,15 +504,6 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-          {!cartState.loading && cart && (
-            <WalletPaymentOptionContainer>
-              <PaymentOptionWallet
-                cart={cart}
-              />
-            </WalletPaymentOptionContainer>
-          )}
-
-
 					{!cartState.loading && cart && (
 						<ChSection>
 							<ChCart>
@@ -554,8 +543,8 @@ const CheckoutUI = (props: any) => {
 					)}
 
 					{!cartState.loading && cart && (
-            <View>
-							<ChErrors style={{ marginBottom: 0 }}>
+						<ChSection style={{ paddingTop: 0, paddingBottom: 20, paddingHorizontal: 20 }}>
+							<ChErrors>
 								{!cart?.valid_address && cart?.status !== 2 && (
 									<OText
 										color={theme.colors.error}
@@ -583,7 +572,7 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 							</ChErrors>
-						</View>
+						</ChSection>
 					)}
 					<OModal
 						open={openChangeStore && props.isFranchiseApp}

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

@@ -74,10 +74,6 @@ export const ChDriverTips = styled(ChPaymethods)``
 
 export const ChCart = styled(ChPaymethods)``
 
-export const WalletPaymentOptionContainer = styled(ChPaymethods)`
-  padding-bottom: 0;
-`
-
 export const ChPlaceOrderBtn = styled.View`
   width: 100%;
   display: flex;
@@ -103,4 +99,4 @@ export const DeliveryOptionItem = styled.View`
   align-items: center;
   flex-direction: row;
   background-color: ${(props : any) => props?.backgroundColor ?? '#fff'};
-`;
+`; 

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

@@ -11,7 +11,8 @@ export const FacebookLogin = (props: any) => {
 	const {
 		handleErrors,
 		handleLoading,
-		handleSuccessFacebookLogin
+		handleSuccessFacebookLogin,
+		notificationState
 	} = props
 
 	const [, t] = useLanguage()
@@ -30,7 +31,14 @@ export const FacebookLogin = (props: any) => {
 
 	const handleLoginClick = async (accessToken: string) => {
 		try {
-			const response = await ordering.users().authFacebook({ access_token: accessToken })
+			const body: any = {
+				access_token: accessToken
+			  }
+			  if (notificationState?.notification_token) {
+				body.notification_token = notificationState.notification_token
+				body.notification_app = notificationState.notification_app
+			  }
+			const response = await ordering.users().authFacebook(body)
 			if (!response.content.error) {
 				if (handleSuccessFacebookLogin) {
 					handleSuccessFacebookLogin(response.content.result)
@@ -38,9 +46,10 @@ export const FacebookLogin = (props: any) => {
 				}
 			} else {
 				handleLoading && handleLoading(false)
+				handleErrors && handleErrors(response.content.result)
 				logoutWithFacebook()
 			}
-		} catch (err) {
+		} catch (err: any) {
 			handleLoading && handleLoading(false)
 			handleErrors && handleErrors(err.message)
 		}
@@ -48,7 +57,7 @@ export const FacebookLogin = (props: any) => {
 
 	const loginWithFacebook = () => {
 		handleLoading && handleLoading(true)
-		LoginManager && LoginManager.logInWithPermissions(['public_profile']).then(
+		LoginManager && LoginManager.logInWithPermissions(['public_profile', 'email']).then(
 			(login: any) => {
 				if (login.isCancelled) {
 					const err = t('LOGIN_WITH_FACEBOOK_CANCELLED', 'Login cancelled')
@@ -58,6 +67,9 @@ export const FacebookLogin = (props: any) => {
 					AccessToken.getCurrentAccessToken().then((data: any) => {
 						const accessToken = data.accessToken.toString();
 						handleLoginClick(accessToken)
+					}).catch((err : any) => {
+						handleErrors && handleErrors(err.message)
+						handleLoading && handleLoading(false)
 					});
 				}
 			},
@@ -68,7 +80,10 @@ export const FacebookLogin = (props: any) => {
 				handleLoading && handleLoading(false)
 				handleErrors && handleErrors(err)
 			},
-		);
+		).catch((err : any) => {
+			handleErrors && handleErrors(err.message)
+			handleLoading && handleLoading(false)
+		});
 	};
 
 	const onPressButton = auth

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

@@ -48,8 +48,8 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders businessId={props.businessId} onRedirect={onRedirect} />
+        <LastOrders onRedirect={onRedirect} />
       </LastOrdersContainer>
     </>
   )
-}
+}

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

@@ -5,11 +5,11 @@ import { StyleSheet, View } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
 import { LanguageSelector } from '../LanguageSelector';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, Platform } from 'react-native';
 
 export const Home = (props: any) => {
 	const { onNavigationRedirect } = props;
-	const { width } = useWindowDimensions();
+	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
 	const [orderState] = useOrder();
 
@@ -18,7 +18,9 @@ export const Home = (props: any) => {
 	return (
 		<View style={styles.container}>
 			<View>
-				<LanguageSelector />
+				<View style={{paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0 }}>
+					<LanguageSelector />
+				</View>
 				<OIcon
 					src={theme.images.logos.logotypeInvert}
 					style={{

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

@@ -12,6 +12,34 @@ import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
+const ORDER_STATUS: any = {
+	0: 'ORDER_STATUS_PENDING',
+	1: 'ORDERS_COMPLETED',
+	2: 'ORDER_REJECTED',
+	3: 'ORDER_STATUS_IN_BUSINESS',
+	4: 'ORDER_READY',
+	5: 'ORDER_REJECTED_RESTAURANT',
+	6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
+	7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
+	8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
+	9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
+	10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
+	11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
+	12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
+	13: 'PREORDER',
+	14: 'ORDER_NOT_READY',
+	15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+	16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
+	17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+	18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
+	19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
+	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+}
+
+const filterSpecialStatus = ['prepared_in', 'delivered_in']
+
+
 const MessagesUI = (props: MessagesParams) => {
 	const {
 		type,
@@ -94,58 +122,6 @@ const MessagesUI = (props: MessagesParams) => {
 		});
 	};
 
-	const getStatus = (status: number) => {
-
-		switch (status) {
-			case 0:
-				return 'ORDER_STATUS_PENDING'
-			case 1:
-				return 'ORDERS_COMPLETED'
-			case 2:
-				return 'ORDER_REJECTED'
-			case 3:
-				return 'ORDER_STATUS_IN_BUSINESS'
-			case 4:
-				return 'ORDER_READY'
-			case 5:
-				return 'ORDER_REJECTED_RESTAURANT'
-			case 6:
-				return 'ORDER_STATUS_CANCELLEDBYDRIVER'
-			case 7:
-				return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT'
-			case 8:
-				return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER'
-			case 9:
-				return 'ORDER_PICKUP_COMPLETED_BY_DRIVER'
-			case 10:
-				return 'ORDER_PICKUP_FAILED_BY_DRIVER'
-			case 11:
-				return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER'
-			case 12:
-				return 'ORDER_DELIVERY_FAILED_BY_DRIVER'
-			case 13:
-				return 'PREORDER'
-			case 14:
-				return 'ORDER_NOT_READY'
-			case 15:
-				return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER'
-			case 16:
-				return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER'
-			case 17:
-				return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER'
-			case 18:
-				return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS'
-			case 19:
-				return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER'
-			case 20:
-				return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS'
-			case 21:
-				return 'ORDER_CUSTOMER_ARRIVED_BUSINESS'
-			default:
-				return status
-		}
-	}
-
 	const onSubmit = (values: any) => {
 		handleSend && handleSend()
 		setImage && setImage(null)
@@ -154,14 +130,18 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const messageConsole = (message: any) => {
 		return message.change?.attribute !== 'driver_id'
+		  ?
+		  `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
+			filterSpecialStatus.includes(message.change.attribute) ? 
+			`${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
+			`${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+		  }`
+		  : message.change.new
 			?
-			`${t('ORDER', 'Order')} ${message.change.attribute} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(getStatus(parseInt(message.change.old, 10)))} ${t('TO', 'to')} ${t(getStatus(parseInt(message.change.new, 10)))}`
-			: message.change.new
-				?
-				`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-				:
-				`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
-	}
+			`${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+			:
+			`${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+	  }
 
 	useEffect(() => {
 		let newMessages: Array<any> = []

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

@@ -104,15 +104,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 
   const { order, businessData } = props.order;
 
-  const walletName: any = {
-    cash: {
-      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
-    },
-    credit_point: {
-      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
-    }
-  }
-
   const getOrderStatus = (s: string) => {
     const status = parseInt(s);
     const orderStatus = [
@@ -611,7 +602,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
                     {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
                   </OText>
-                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>{order?.delivery_option?.name ?? t('EITHER_WAY', 'Either way')}</OText>
+                  <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
+                    {order?.delivery_option?.name ? t(order?.delivery_option?.name.toUpperCase().replace(/\s/g, '_')) : t('EITHER_WAY', 'Either way')}
+                  </OText>
                 </View>
               )}
               {order?.comment && (
@@ -835,51 +828,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </Table>
               </Total>
-              {order?.payment_events?.length > 0 && (
-                <View style={{marginTop: 10}}>
-                  <OText size={20} weight='bold' color={theme.colors.textNormal}>{t('PAYMENTS', 'Payments')}</OText>
-                  <View
-                    style={{
-                      width: '100%',
-                      marginTop: 10
-                    }}
-                  >
-                    {order?.payment_events?.map((event: any) => (
-                      <View
-                        key={event.id}
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'row',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          marginBottom: 10
-                        }}
-                      >
-                        <View
-                          style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                          }}
-                        >
-                          <OText>
-                            {event?.wallet_event
-                              ? walletName[event?.wallet_event?.wallet?.type]?.name
-                              : event?.paymethod?.name}
-                          </OText>
-                          {event?.data?.charge_id && (
-                            <OText>
-                              {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
-                            </OText>
-                          )}
-                        </View>
-                        <OText>
-                          -{parsePrice(event.amount)}
-                        </OText>
-                      </View>
-                    ))}
-                  </View>
-                </View>
-              )}
             </OrderBill>
           </OrderContent>
         </>
@@ -894,6 +842,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           orderId={order?.id}
           messages={messages}
           order={order}
+          business={openModalForBusiness}
+          driver={openModalForDriver}
           setMessages={setMessages}
           onClose={handleCloseModal}
         />

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

@@ -193,13 +193,13 @@ const OrderProgressUI = (props: any) => {
           </View>
         </View>
       )}
-      {/* {!orderList?.loading && orderList?.orders?.length === 0 && (
+      {!orderList?.loading && orderList?.orders?.length === 0 && (
         <NotFoundSource
           image={imageFails}
           content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
           conditioned
         />
-      )} */}
+      )}
 		</>
 	)
 }

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

@@ -28,6 +28,7 @@ import { TouchableOpacity } from 'react-native';
 
 const OrderSummaryUI = (props: any) => {
   const {
+    cart,
     changeQuantity,
     getProductMax,
     offsetDisabled,
@@ -75,16 +76,6 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
-  const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
-
-  const walletName: any = {
-    cash: {
-      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
-    },
-    credit_point: {
-      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
-    }
-  }
 
   return (
     <OSContainer>
@@ -177,14 +168,6 @@ const OrderSummaryUI = (props: any) => {
                   <OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
               )}
-              {cart?.payment_events?.length > 0 && cart?.payment_events?.map((event: any) => (
-                <OSTable key={event.id}>
-                  <OText size={12} numberOfLines={1}>
-                    {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
-                  </OText>
-                  <OText size={12}>-{parsePrice(event.amount)}</OText>
-                </OSTable>
-              ))}
               {isCouponEnabled && !isCartPending && (
                 <View>
                   <View style={{ paddingVertical: 5 }}>
@@ -202,7 +185,7 @@ const OrderSummaryUI = (props: any) => {
                       {t('TOTAL', 'Total')}
                     </OText>
                     <OText size={14} style={{ fontWeight: 'bold' }} >
-                      {parsePrice(cart?.balance ?? cart?.total)}
+                      {parsePrice(cart?.total)}
                     </OText>
                   </OSTable>
                 </View>
@@ -222,8 +205,7 @@ const OrderSummaryUI = (props: any) => {
                           height: 100,
                           borderColor: theme.colors.border,
                           paddingRight: 50,
-                          marginTop: 10,
-                          borderRadius: 8
+                          marginTop: 10
                         }}
                         multiline
                       />

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

@@ -380,13 +380,30 @@ export const ProductOptionsUI = (props: any) => {
 									</Placeholder>
 								) : (
 									<>
-										<OText
-											size={20}
-											lineHeight={30}
-											weight={'600'}
-											style={{ flex: 1, marginBottom: 5 }}>
-											{product?.name || productCart.name}
-										</OText>
+										<View style={{ flexDirection: 'row' }}>
+											<OText
+												size={20}
+												lineHeight={30}
+												weight={'600'}
+												style={{ flex: 1, marginBottom: 10 }}>
+												{product?.name || productCart.name}
+											</OText>
+											{product?.calories && (
+												<OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
+												</OText>
+											)}
+										</View>
+										<View style={{ flexDirection: 'row', marginBottom: 10 }}>
+											<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
+											{product?.offer_price && (
+												<OText style={{    fontSize: 14,
+													color: '#808080',
+													textDecorationLine: 'line-through',
+													marginLeft: 7,
+													marginRight: 7
+												}}>{parsePrice(product?.offer_price)}</OText>
+											)}
+										</View>
 										{((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
 											<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
 												{
@@ -663,27 +680,25 @@ export const ProductOptionsUI = (props: any) => {
 											)}
 										</>
 									)}
-									{!product?.hide_special_instructions && (
-										<ProductComment>
-											<SectionTitle>
-												<OText size={16} weight={'600'} lineHeight={24}>
-													{t('SPECIAL_COMMENT', 'Special comment')}
-												</OText>
-											</SectionTitle>
-											<OInput
-												multiline
-												placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-												value={productCart.comment}
-												onChange={(val: string) =>
-													handleChangeCommentState({ target: { value: val } })
-												}
-												isDisabled={
-													!(productCart && !isSoldOut && maxProductQuantity)
-												}
-												style={styles.comment}
-											/>
-										</ProductComment>
-									)}
+									<ProductComment>
+										<SectionTitle>
+											<OText size={16} weight={'600'} lineHeight={24}>
+												{t('SPECIAL_COMMENT', 'Special comment')}
+											</OText>
+										</SectionTitle>
+										<OInput
+											multiline
+											placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+											value={productCart.comment}
+											onChange={(val: string) =>
+												handleChangeCommentState({ target: { value: val } })
+											}
+											isDisabled={
+												!(productCart && !isSoldOut && maxProductQuantity)
+											}
+											style={styles.comment}
+										/>
+									</ProductComment>
 								</ProductEditions>
 							)}
 						</WrapContent>

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

@@ -14,7 +14,6 @@ import { ProfileParams } from '../../types';
 import { LogoutButton } from '../LogoutButton'
 import { LanguageSelector } from '../LanguageSelector'
 import MessageCircle from 'react-native-vector-icons/AntDesign'
-import Ionicons from 'react-native-vector-icons/Ionicons'
 
 import {
 	OIcon,
@@ -161,10 +160,6 @@ const ProfileListUI = (props: ProfileParams) => {
 						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MESSAGES', 'Messages')}</OText>
 					</ListItem>
-					<ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
-						<Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
-						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
-					</ListItem>
 					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>

package/themes/original/src/types/index.tsx

@@ -129,7 +129,6 @@ export interface BusinessesListingParams {
 	businessTypes?: any;
 	defaultBusinessType?: any;
 	franchiseId?: any;
-	businessId?: any;
 }
 export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
@@ -345,8 +344,8 @@ export interface MessagesParams {
 	onClose?: () => void,
 	isMeesageListing?: boolean,
 	setCanRead?: any,
-	business?: boolean,
-	driver?: boolean,
+	business: boolean,
+	driver: boolean,
 	onMessages?: any
 }
 export interface ViewInterface {
@@ -456,7 +455,6 @@ export interface GoogleMapsParams {
 
 export interface HelpParams {
 	navigation: any;
-	businessId?: any;
 }
 
 export interface LastOrdersParams {

package/themes/single-business/src/components/ProductForm/index.tsx

@@ -527,35 +527,34 @@ export const ProductOptionsUI = (props: any) => {
                     );
                   }))}
                 </View>
-                {!product?.hide_special_instructions && (
-                  <ProductComment>
-                    <SectionTitle>
-                      <OText size={16} weight={'600'} lineHeight={24}>
-                        {t('SPECIAL_COMMENT', 'Special comment')}
-                      </OText>
-                    </SectionTitle>
-                    <OInput
-                      multiline={true}
-                      numberOfLines={10}
-                      placeholder={t('SPECIAL_COMMENT', 'Special comment')}
-                      value={productCart.comment}
-                      onChange={(val: string) =>
-                        handleChangeCommentState({ target: { value: val } })
-                      }
-                      isDisabled={
-                        !(productCart && !isSoldOut && maxProductQuantity)
-                      }
-                      style={{
-                        height: 100,
-                        justifyContent: "flex-end",
-                        alignItems: 'flex-start',
-                        borderWidth: 1,
-                        borderRadius: 8,
-                        borderColor: theme.colors.border,
-                      }}
-                    />
-                  </ProductComment>
-                )}  
+
+                <ProductComment>
+                  <SectionTitle>
+                    <OText size={16} weight={'600'} lineHeight={24}>
+                      {t('SPECIAL_COMMENT', 'Special comment')}
+                    </OText>
+                  </SectionTitle>
+                  <OInput
+                    multiline={true}
+                    numberOfLines={10}
+                    placeholder={t('SPECIAL_COMMENT', 'Special comment')}
+                    value={productCart.comment}
+                    onChange={(val: string) =>
+                      handleChangeCommentState({ target: { value: val } })
+                    }
+                    isDisabled={
+                      !(productCart && !isSoldOut && maxProductQuantity)
+                    }
+                    style={{
+                      height: 100,
+                      justifyContent: "flex-end",
+                      alignItems: 'flex-start',
+                      borderWidth: 1,
+                      borderRadius: 8,
+                      borderColor: theme.colors.border,
+                    }}
+                  />
+                </ProductComment>
               </ProductEditions>
             )}
           </WrapContent>