ordering-ui-react-native 0.12.52 → 0.12.56

package/themes/uber-eats/src/components/Cart/index.tsx

@@ -16,14 +16,14 @@ import { ProductItemAccordion } from '../ProductItemAccordion';
 import { BusinessItemAccordion } from '../BusinessItemAccordion';
 import { CouponControl } from '../CouponControl';
 
-import { OButton, OModal, OText } from '../shared';
+import { OButton, OInput, OModal, OText } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
-import { TouchableOpacity } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 
 const CartUI = (props: any) => {
   const {
@@ -36,7 +36,9 @@ const CartUI = (props: any) => {
     handleCartOpen,
     setIsCartsLoading,
     isForceOpenCart,
-    isBusinessCart
+    isBusinessCart,
+    handleChangeComment,
+    commentState
   } = props
 
   const theme = useTheme()
@@ -235,6 +237,38 @@ const CartUI = (props: any) => {
                   </OText>
                 </OSTable>
               </OSTotal>
+              {cart?.status !== 2 && (
+                <OSTable>
+                  <View style={{ width: '100%', marginTop: 20 }}>
+                    <OText>{t('COMMENTS', 'Comments')}</OText>
+                    <View style={{ flex: 1, width: '100%' }}>
+                      <OInput
+                        value={cart?.comment}
+                        placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
+                        onChange={(value: string) => handleChangeComment(value)}
+                        style={{
+                          alignItems: 'flex-start',
+                          width: '100%',
+                          height: 100,
+                          borderColor: theme.colors.textSecondary,
+                          paddingRight: 50,
+                          marginTop: 10
+                        }}
+                        multiline
+                      />
+                      {commentState?.loading && (
+                        <View style={{ position: 'absolute', right: 20 }}>
+                          <ActivityIndicator
+                            size='large'
+                            style={{ height: 100 }}
+                            color={theme.colors.primary}
+                          />
+                        </View>
+                      )}
+                    </View>
+                  </View>
+                </OSTable>
+              )}
             </OSBill>
           )}
         </CartContent>

package/themes/uber-eats/src/components/OrderDetails/index.tsx

@@ -410,6 +410,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText style={styles.textBold} color={theme.colors.primary}>{parsePrice(order?.summary?.total || order?.total)}</OText>
                 </Table>
               </Total>
+              {order?.comment && (
+                <Table>
+                  <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
+                  <OText style={{ maxWidth: '70%' }}>
+                    {order?.comment}
+                  </OText>
+                </Table>
+              )}
             </OrderBill>
             <OrderCustomer>
               <OText size={18} mBottom={5} style={{ textAlign: 'left' }}>{t('CUSTOMER', 'Customer')}</OText>

package/themes/uber-eats/src/components/OrderSummary/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native'
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
 import {
   Cart,
   useOrder,
@@ -19,7 +19,7 @@ import {
 
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { CouponControl } from '../CouponControl';
-import { OModal, OText } from '../shared';
+import { OInput, OModal, OText } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -34,7 +34,9 @@ const OrderSummaryUI = (props: any) => {
     offsetDisabled,
     removeProduct,
     isCartPending,
-    isFromCheckout
+    isFromCheckout,
+    handleChangeComment,
+    commentState
   } = props;
 
   const theme = useTheme();
@@ -158,9 +160,9 @@ const OrderSummaryUI = (props: any) => {
                     {cart?.driver_tip_rate > 0 &&
                       parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
                       !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
-                    (
-                      `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
-                    )}
+                      (
+                        `(${verifyDecimals(cart?.driver_tip_rate, parseNumber)}%)`
+                      )}
                   </OText>
                   <OText size={16}>{parsePrice(cart?.driver_tip)}</OText>
                 </OSTable>
@@ -187,6 +189,38 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 </View>
               )}
+              {cart?.status !== 2 && (
+                <OSTable>
+                  <View style={{ width: '100%', marginTop: 20 }}>
+                    <OText>{t('COMMENTS', 'Comments')}</OText>
+                    <View style={{ flex: 1, width: '100%' }}>
+                      <OInput
+                        value={cart?.comment}
+                        placeholder={t('SPECIAL_COMMENTS', 'Special Comments')}
+                        onChange={(value: string) => handleChangeComment(value)}
+                        style={{
+                          alignItems: 'flex-start',
+                          width: '100%',
+                          height: 100,
+                          borderColor: theme.colors.textSecondary,
+                          paddingRight: 50,
+                          marginTop: 10
+                        }}
+                        multiline
+                      />
+                      {commentState?.loading && (
+                        <View style={{ position: 'absolute', right: 20 }}>
+                          <ActivityIndicator
+                            size='large'
+                            style={{ height: 100 }}
+                            color={theme.colors.primary}
+                          />
+                        </View>
+                      )}
+                    </View>
+                  </View>
+                </OSTable>
+              )}
             </OSBill>
           )}
           <OModal

package/themes/uber-eats/src/layouts/Container.tsx

@@ -18,7 +18,7 @@ const ContentView = styled.View`
 export const Container = (props: any) => {
   return (
     <SafeAreaStyled>
-      <ContainerStyled keyboardShouldPersistTaps='handled'>
+      <ContainerStyled ref={props?.forwardRef} keyboardShouldPersistTaps='handled'>
         <ContentView>
           {props.children}
         </ContentView>