ordering-ui-react-native 0.12.52 → 0.12.56

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

@@ -1,25 +1,25 @@
 import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native'
+import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
 import {
-	Cart,
-	useOrder,
-	useLanguage,
-	useUtils,
-	useConfig,
-	useValidationFields,
+  Cart,
+  useOrder,
+  useLanguage,
+  useUtils,
+  useConfig,
+  useValidationFields,
 } from 'ordering-components/native';
 
 import {
-	OSContainer,
-	OSProductList,
-	OSBill,
-	OSTable,
+  OSContainer,
+  OSProductList,
+  OSBill,
+  OSTable,
   OSRow
 } from './styles';
 
 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 { TaxInformation } from '../TaxInformation';
@@ -27,42 +27,44 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import { useTheme } from 'styled-components/native';
 
 const OrderSummaryUI = (props: any) => {
-	const {
-		cart,
-		changeQuantity,
-		getProductMax,
-		offsetDisabled,
-		removeProduct,
-		isCartPending,
-		isFromCheckout
-	} = props;
+  const {
+    cart,
+    changeQuantity,
+    getProductMax,
+    offsetDisabled,
+    removeProduct,
+    isCartPending,
+    isFromCheckout,
+    commentState,
+    handleChangeComment
+  } = props;
 
   const theme = useTheme()
-	const [, t] = useLanguage();
-	const [{ configs }] = useConfig();
-	const [orderState] = useOrder();
-	const [{ parsePrice, parseNumber }] = useUtils();
-	const [validationFields] = useValidationFields();
-	const [openProduct, setModalIsOpen] = useState(false)
-	const [curProduct, setCurProduct] = useState<any>(null)
+  const [, t] = useLanguage();
+  const [{ configs }] = useConfig();
+  const [orderState] = useOrder();
+  const [{ parsePrice, parseNumber }] = useUtils();
+  const [validationFields] = useValidationFields();
+  const [openProduct, setModalIsOpen] = useState(false)
+  const [curProduct, setCurProduct] = useState<any>(null)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, data: null })
 
-	const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
+  const isCouponEnabled = validationFields?.fields?.checkout?.coupon?.enabled;
 
-	const handleDeleteClick = (product: any) => {
-		removeProduct(product, cart)
-	}
+  const handleDeleteClick = (product: any) => {
+    removeProduct(product, cart)
+  }
 
-	const handleEditProduct = (product: any) => {
-		setCurProduct(product)
-		setModalIsOpen(true)
-	}
+  const handleEditProduct = (product: any) => {
+    setCurProduct(product)
+    setModalIsOpen(true)
+  }
 
-	const handlerProductAction = (product: any) => {
-		if (Object.keys(product).length) {
-			setModalIsOpen(false)
-		}
-	}
+  const handlerProductAction = (product: any) => {
+    if (Object.keys(product).length) {
+      setModalIsOpen(false)
+    }
+  }
 
   const getIncludedTaxes = () => {
     if (cart?.taxes === null) {
@@ -74,46 +76,46 @@ const OrderSummaryUI = (props: any) => {
     }
   }
 
-	return (
-		<OSContainer>
-			{cart?.products?.length > 0 && (
-				<>
-					<OSProductList>
-						{cart?.products.map((product: any) => (
-							<ProductItemAccordion
-								key={product.code}
-								product={product}
-								isCartPending={isCartPending}
-								isCartProduct
-								changeQuantity={changeQuantity}
-								getProductMax={getProductMax}
-								offsetDisabled={offsetDisabled}
-								onDeleteProduct={handleDeleteClick}
-								onEditProduct={handleEditProduct}
-								isFromCheckout={isFromCheckout}
-							/>
-						))}
-					</OSProductList>
-					{cart?.valid && (
-						<OSBill>
-							<OSTable>
-								<OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
-								<OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
-							</OSTable>
-							{cart?.discount > 0 && cart?.total >= 0 && (
-								<OSTable>
-									{cart?.discount_type === 1 ? (
-										<OText size={12}>
-											{t('DISCOUNT', 'Discount')}
-											<OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
-										</OText>
-									) : (
-										<OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
-									)}
-									<OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
-								</OSTable>
-							)}
-							{
+  return (
+    <OSContainer>
+      {cart?.products?.length > 0 && (
+        <>
+          <OSProductList>
+            {cart?.products.map((product: any) => (
+              <ProductItemAccordion
+                key={product.code}
+                product={product}
+                isCartPending={isCartPending}
+                isCartProduct
+                changeQuantity={changeQuantity}
+                getProductMax={getProductMax}
+                offsetDisabled={offsetDisabled}
+                onDeleteProduct={handleDeleteClick}
+                onEditProduct={handleEditProduct}
+                isFromCheckout={isFromCheckout}
+              />
+            ))}
+          </OSProductList>
+          {cart?.valid && (
+            <OSBill>
+              <OSTable>
+                <OText size={12}>{t('SUBTOTAL', 'Subtotal')}</OText>
+                <OText size={12}>{parsePrice(cart?.subtotal + getIncludedTaxes())}</OText>
+              </OSTable>
+              {cart?.discount > 0 && cart?.total >= 0 && (
+                <OSTable>
+                  {cart?.discount_type === 1 ? (
+                    <OText size={12}>
+                      {t('DISCOUNT', 'Discount')}
+                      <OText size={12}>{`(${verifyDecimals(cart?.discount_rate, parsePrice)}%)`}</OText>
+                    </OText>
+                  ) : (
+                    <OText size={12}>{t('DISCOUNT', 'Discount')}</OText>
+                  )}
+                  <OText size={12}>- {parsePrice(cart?.discount || 0)}</OText>
+                </OSTable>
+              )}
+              {
                 cart?.taxes?.length > 0 && cart?.taxes?.filter((tax: any) => tax?.type === 2 && tax?.rate !== 0).map((tax: any) => (
                   <OSTable key={tax?.id}>
                     <OSRow>
@@ -145,68 +147,100 @@ const OrderSummaryUI = (props: any) => {
                   </OSTable>
                 ))
               }
-							{orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
-								<OSTable>
-									<OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
-									<OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
-								</OSTable>
-							)}
-							{cart?.driver_tip > 0 && (
-								<OSTable>
-									<OText size={12}>
-										{t('DRIVER_TIP', 'Driver tip')}
-										{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)}%)`
-											)}
-									</OText>
-									<OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
-								</OSTable>
-							)}
-							{isCouponEnabled && !isCartPending && (
-								<View>
-									<View style={{ paddingVertical: 5 }}>
-										<CouponControl
-											businessId={cart.business_id}
-											price={cart.total}
-										/>
-									</View>
-								</View>
-							)}
-							{cart?.total >= 1 && (
-								<View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
-									<OSTable style={{ marginTop: 15 }}>
-										<OText size={14} style={{ fontWeight: 'bold' }}>
-											{t('TOTAL', 'Total')}
-										</OText>
-										<OText size={14} style={{ fontWeight: 'bold' }} >
-											{parsePrice(cart?.total)}
-										</OText>
-									</OSTable>
-								</View>
-							)}
-						</OSBill>
-					)}
-					<OModal
-						open={openProduct}
-						entireModal
-						customClose
-						onClose={() => setModalIsOpen(false)}
-					>
-						<ProductForm
-							isCartProduct
-							productCart={curProduct}
-							businessSlug={cart?.business?.slug}
-							businessId={cart?.business_id}
-							categoryId={curProduct?.category_id}
-							productId={curProduct?.id}
-							onSave={handlerProductAction}
-							onClose={() => setModalIsOpen(false)}
-							isFromCheckout={isFromCheckout}
-						/>
-					</OModal>
+              {orderState?.options?.type === 1 && cart?.delivery_price > 0 && (
+                <OSTable>
+                  <OText size={12}>{t('DELIVERY_FEE', 'Delivery Fee')}</OText>
+                  <OText size={12}>{parsePrice(cart?.delivery_price)}</OText>
+                </OSTable>
+              )}
+              {cart?.driver_tip > 0 && (
+                <OSTable>
+                  <OText size={12}>
+                    {t('DRIVER_TIP', 'Driver tip')}
+                    {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)}%)`
+                      )}
+                  </OText>
+                  <OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
+                </OSTable>
+              )}
+              {isCouponEnabled && !isCartPending && (
+                <View>
+                  <View style={{ paddingVertical: 5 }}>
+                    <CouponControl
+                      businessId={cart.business_id}
+                      price={cart.total}
+                    />
+                  </View>
+                </View>
+              )}
+              {cart?.total >= 1 && (
+                <View style={{ marginTop: 15, borderTopWidth: 1, borderTopColor: '#d9d9d9' }}>
+                  <OSTable style={{ marginTop: 15 }}>
+                    <OText size={14} style={{ fontWeight: 'bold' }}>
+                      {t('TOTAL', 'Total')}
+                    </OText>
+                    <OText size={14} style={{ fontWeight: 'bold' }} >
+                      {parsePrice(cart?.total)}
+                    </OText>
+                  </OSTable>
+                </View>
+              )}
+              {cart?.status !== 2 && (
+                <OSTable>
+                  <View style={{ width: '100%', marginTop: 20 }}>
+                    <OText size={12}>{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
+            open={openProduct}
+            entireModal
+            customClose
+            onClose={() => setModalIsOpen(false)}
+          >
+            <ProductForm
+              isCartProduct
+              productCart={curProduct}
+              businessSlug={cart?.business?.slug}
+              businessId={cart?.business_id}
+              categoryId={curProduct?.category_id}
+              productId={curProduct?.id}
+              onSave={handlerProductAction}
+              onClose={() => setModalIsOpen(false)}
+              isFromCheckout={isFromCheckout}
+            />
+          </OModal>
           <OModal
             open={openTaxModal.open}
             onClose={() => setOpenTaxModal({ open: false, data: null })}
@@ -214,19 +248,19 @@ const OrderSummaryUI = (props: any) => {
           >
             <TaxInformation data={openTaxModal.data} products={cart.products} />
           </OModal>
-				</>
-			)}
-		</OSContainer>
-	)
+        </>
+      )}
+    </OSContainer>
+  )
 }
 
 export const OrderSummary = (props: any) => {
-	const orderSummaryProps = {
-		...props,
-		UIComponent: OrderSummaryUI
-	}
+  const orderSummaryProps = {
+    ...props,
+    UIComponent: OrderSummaryUI
+  }
 
-	return (
-		<Cart {...orderSummaryProps} />
-	)
+  return (
+    <Cart {...orderSummaryProps} />
+  )
 }

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

@@ -15,7 +15,7 @@ const SafeAreaStyled = styled.SafeAreaView`
 export const Container = (props: any) => {
   return (
     <SafeAreaStyled>
-      <ContainerStyled keyboardShouldPersistTaps='handled' {...props} style={{...props.style}}>
+      <ContainerStyled {...props} ref={props?.forwardRef} keyboardShouldPersistTaps='handled' style={{...props.style}}>
         {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 style={{ flex: 1 }}>{t('COMMENT', 'Comment')}</OText>
+                    <OText 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
 }