ordering-ui-react-native 0.12.55 → 0.12.59

package/package.json

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

package/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, OModal, OText, OInput } 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 {
@@ -35,6 +35,8 @@ const CartUI = (props: any) => {
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
+    handleChangeComment,
+    commentState
   } = props
 
   const theme = useTheme()
@@ -180,19 +182,19 @@ const CartUI = (props: any) => {
               ))
             }
             {
-              cart?.fees?.length > 0 && cart?.fees?.filter((fee : any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                  <OSTable key={fee?.id}>
-                    <OSRow>
-                      <OText numberOfLines={1}>
-                        {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                        ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
-                      </OText>
-                      <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
-                        <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
-                      </TouchableOpacity>
-                    </OSRow>
-                    <OText>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
-                  </OSTable>
+              cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
+                <OSTable key={fee?.id}>
+                  <OSRow>
+                    <OText numberOfLines={1}>
+                      {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
+                      ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                    </OText>
+                    <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee })} >
+                      <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />
+                    </TouchableOpacity>
+                  </OSRow>
+                  <OText>{parsePrice(fee?.summary?.fixed + fee?.summary?.percentage || 0)}</OText>
+                </OSTable>
               ))
             }
             {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
@@ -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>
         )}
         {cart?.valid_products && (
@@ -294,7 +328,7 @@ const CartUI = (props: any) => {
         onClose={() => setOpenTaxModal({ open: false, data: null })}
         entireModal
       >
-        <TaxInformation data={openTaxModal.data} products={cart.products} />
+        <TaxInformation data={openTaxModal.data} products={cart?.products} />
       </OModal>
     </CContainer>
   )

package/src/components/OrderDetails/index.tsx

@@ -527,6 +527,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   </OText>
                 </Table>
               </Total>
+              {order?.comment && (
+                <Table>
+                  <OText style={{flex: 1}}>{t('COMMENT', 'Comment')}</OText>
+                  <OText style={{maxWidth: '70%'}}>
+                    {order?.comment}
+                  </OText>
+                </Table>
+              )}
               {
                 (
                   parseInt(order?.status) === 1 ||

package/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,12 +19,13 @@ 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';
 import { TaxInformation } from '../TaxInformation';
 import AntIcon from 'react-native-vector-icons/AntDesign'
+
 const OrderSummaryUI = (props: any) => {
   const {
     cart,
@@ -33,7 +34,9 @@ const OrderSummaryUI = (props: any) => {
     offsetDisabled,
     removeProduct,
     isCartPending,
-    isFromCheckout
+    isFromCheckout,
+    commentState,
+    handleChangeComment
   } = props;
 
   const theme = useTheme();
@@ -186,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/src/layouts/Container.tsx

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

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -428,6 +428,14 @@ export const OrderContentComponent = (props: OrderContent) => {
               {parsePrice(order?.summary?.total ?? 0)}
             </OText>
           </Table>
+          {order?.comment && (
+            <Table>
+              <OText style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
+              <OText style={{ maxWidth: '70%' }}>
+                {order?.comment}
+              </OText>
+            </Table>
+          )}
         </Total>
       </OrderBill >
       <OModal

package/themes/business/src/components/OrderDetails/styles.tsx

@@ -68,6 +68,7 @@ export const Table = styled.View`
 
 export const OrderBill = styled.View`
   padding-vertical: 20px;
+  padding-bottom: 30px;
   flex: 1;
 `;
 

package/themes/business/src/layouts/Container.tsx

@@ -46,7 +46,9 @@ export const Container = (props: any) => {
       <ContainerStyled
         contentContainerStyle={props.style}
         keyboardShouldPersistTaps="handled"
-        orientation={orientation}>
+        orientation={orientation}
+        ref={props?.forwardRef}
+      >
         {props.children}
       </ContainerStyled>
     </SafeAreaStyled>

package/themes/doordash/src/components/Cart/index.tsx

@@ -16,12 +16,12 @@ 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 { useTheme } from 'styled-components/native';
 import { ProductForm } from '../ProductForm';
 import { UpsellingProducts } from '../UpsellingProducts';
 import { verifyDecimals } from '../../utils';
-import { Platform } from 'react-native';
+import { ActivityIndicator, Platform, View } from 'react-native';
 import { TaxInformation } from '../TaxInformation';
 import { TouchableOpacity } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
@@ -36,6 +36,8 @@ const CartUI = (props: any) => {
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
+    handleChangeComment,
+    commentState
     // isFromCart
   } = props
   const theme = useTheme();
@@ -222,6 +224,39 @@ 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
+                      inputStyle={{color: theme.colors.textPrimary}}
+                    />
+                    {commentState?.loading && (
+                      <View style={{ position: 'absolute', right: 20 }}>
+                        <ActivityIndicator
+                          size='large'
+                          color={theme.colors.primary}
+                          style={{ height: 100 }}
+                        />
+                      </View>
+                    )}
+                  </View>
+                </View>
+              </OSTable>
+            )}
           </OSBill>
         )}
         {cart?.valid_products && (

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

@@ -445,6 +445,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText size={12} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{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>
           </OrderContent>
         </>

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TextStyle, TouchableOpacity, View } from 'react-native'
+import { ActivityIndicator, TextStyle, 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 { useTheme } from 'styled-components/native';
 import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
@@ -40,6 +40,8 @@ const OrderSummaryUI = (props: any) => {
     title,
     paddingH,
     isMini,
+    commentState,
+    handleChangeComment
   } = props;
 
   const theme = useTheme();
@@ -235,7 +237,39 @@ const OrderSummaryUI = (props: any) => {
                   )}
                 </View>
               ) : null}
-
+              {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
+                        inputStyle={{color: theme.colors.textPrimary}}
+                      />
+                      {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/doordash/src/layouts/Container.tsx

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

package/themes/instacart/src/components/Cart/index.tsx

@@ -16,12 +16,12 @@ 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 { TouchableOpacity } from 'react-native';
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 const CartUI = (props: any) => {
@@ -34,7 +34,9 @@ const CartUI = (props: any) => {
     removeProduct,
     handleCartOpen,
     setIsCartsLoading,
-    isExpanded
+    isExpanded,
+    handleChangeComment,
+    commentState
   } = props
 
   const theme = useTheme()
@@ -245,6 +247,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>
         )}
         {cart?.valid_products && (

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

@@ -478,6 +478,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText style={{ ...theme.labels.normal, fontWeight: '600', color: theme.colors.textPrimary }}>{t('TOTAL', 'Total')}</OText>
                   <OText style={{ ...theme.labels.normal, fontWeight: '600', color: theme.colors.textPrimary }}>{parsePrice(order?.summary?.total || order?.total)}</OText>
                 </Table>
+                {order?.comment && (
+                  <Table>
+                    <OText color={theme.colors.textPrimary} size={12} style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
+                    <OText color={theme.colors.textPrimary} size={12} style={{ maxWidth: '70%' }}>
+                      {order?.comment}
+                    </OText>
+                  </Table>
+                )}
               </OrderBill>
             </OrderContent>
           </>

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

@@ -1,5 +1,5 @@
 import React, { useEffect, 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 { OIcon, OModal, OText } from '../shared';
+import { OIcon, OInput, OModal, OText } from '../shared';
 import { ProductForm } from '../ProductForm';
 import { verifyDecimals } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -38,7 +38,9 @@ const OrderSummaryUI = (props: any) => {
     isFromCheckout,
     isDriverTips,
     handleProductDelete,
-    handleProductEdit
+    handleProductEdit,
+    handleChangeComment,
+    commentState
   } = props;
 
   const theme = useTheme();
@@ -218,7 +220,38 @@ const OrderSummaryUI = (props: any) => {
                   </View>
                 </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/instacart/src/layouts/Container.tsx

@@ -20,7 +20,7 @@ export const Container = (props: any) => {
 					{props.children}
 				</View>
 			) : (
-				<ContainerStyled keyboardShouldPersistTaps='handled' {...props} style={{ padding: props.nopadding ? 0 : 40, paddingTop: 0 }}>
+				<ContainerStyled {...props} ref={props?.forwardRef} keyboardShouldPersistTaps='handled' {...props} style={{ padding: props.nopadding ? 0 : 40, paddingTop: 0 }}>
 					{props.children}
 				</ContainerStyled>
 			)}

package/themes/kiosk/src/layouts/Container.tsx

@@ -22,7 +22,7 @@ export const Container = (props: Props) => {
     <SafeAreStyled
       nestedScrollEnabled={props.nestedScrollEnabled}
     >
-      <ContainerStyled {...props}>{props.children}</ContainerStyled>
+      <ContainerStyled {...props} ref={props?.forwardRef}>{props.children}</ContainerStyled>
     </SafeAreStyled>
   );
 };
@@ -35,4 +35,5 @@ interface Props {
   nestedScrollEnabled: boolean,
   nopadding?: boolean;
   children?: any;
+  forwardRef?: any
 }