ordering-ui-react-native 0.12.54 → 0.12.58

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>

package/themes/franchises/index.tsx

@@ -1,111 +0,0 @@
-import { AddressForm } from './src/components/AddressForm';
-import { AddressDetails } from './src/components/AddressDetails';
-import { Home } from './src/components/Home';
-import { LoginForm } from './src/components/LoginForm';
-import { SignupForm } from './src/components/SignupForm';
-import { ActiveOrders } from './src/components/ActiveOrders';
-import { AddressList } from './src/components/AddressList';
-import { AppleLogin } from './src/components/AppleLogin';
-import { BusinessesListing } from './src/components/BusinessesListing';
-import { BusinessProductsListing } from './src/components/BusinessProductsListing';
-import { CartContent } from './src/components/CartContent';
-import { Checkout } from './src/components/Checkout';
-import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
-import { MomentOption } from './src/components/MomentOption';
-import { OrdersOption } from './src/components/OrdersOption';
-import { OrderDetails } from './src/components/OrderDetails';
-import { UserProfileForm } from './src/components/UserProfileForm';
-import { ReviewOrder } from './src/components/ReviewOrder';
-import { UserProfile } from './src/components/UserProfile';
-import { NotFoundSource } from './src/components/NotFoundSource';
-import { Help } from './src/components/Help';
-import { HelpOrder } from './src/components/HelpOrder';
-import { HelpGuide } from './src/components/HelpGuide';
-import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
-import { OrderTypeSelector } from './src/components/OrderTypeSelector';
-import Notifications from './src/components/Notifications';
-import { ReviewProduct } from './src/components/ReviewProduct';
-import { ReviewDriver } from './src/components/ReviewDriver';
-
-import { Toast } from './src/components/shared/OToast';
-import {
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-	OModal,
-	OBottomPopup,
-} from './src/components/shared';
-
-import { Container } from './src/layouts/Container';
-import { SafeAreaContainer } from './src/layouts/SafeAreaContainer';
-import {
-	_retrieveStoreData,
-	_setStoreData,
-	_removeStoreData,
-	_clearStoreData
-} from './src/providers/StoreUtil';
-
-export {
-	AddressForm,
-	AddressDetails,
-	Home as HomeView,
-	SignupForm,
-	LoginForm,
-	ActiveOrders,
-	AddressList,
-	AppleLogin,
-	BusinessesListing,
-	BusinessProductsListing,
-	CartContent,
-	Checkout,
-	ForgotPasswordForm,
-	MomentOption,
-	OrdersOption,
-	OrderDetails,
-	UserProfileForm,
-	ReviewOrder,
-	UserProfile,
-	NotFoundSource,
-	Help,
-	HelpGuide,
-	HelpOrder,
-	HelpAccountAndPayment,
-	OrderTypeSelector,
-	Notifications,
-	ReviewProduct,
-	ReviewDriver,
-
-	// OComponents
-	Toast,
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-	OModal,
-	OBottomPopup,
-
-	// layout
-	Container,
-	SafeAreaContainer,
-
-	// utils
-	_retrieveStoreData,
-	_setStoreData,
-	_removeStoreData,
-	_clearStoreData
-}

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

@@ -1,134 +0,0 @@
-import React, { useEffect } from 'react';
-import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
-import { OIcon, OIconButton, OText } from '../shared';
-import {
-	ActiveOrdersContainer,
-	Card,
-	Information,
-	Logo,
-	OrderInformation,
-	BusinessInformation,
-	Price,
-} from './styles';
-import { View, StyleSheet } from 'react-native';
-
-import { ActiveOrdersParams } from '../../types';
-import moment from 'moment';
-import { useTheme } from 'styled-components/native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-
-export const ActiveOrders = (props: ActiveOrdersParams) => {
-	const {
-		onNavigationRedirect,
-		orders,
-		pagination,
-		loadMoreOrders,
-		getOrderStatus,
-		isPreorders
-	} = props;
-
-	const theme = useTheme();
-	const [{ configs }] = useConfig();
-	const [, t] = useLanguage();
-	const [{ parseDate, parsePrice, optimizeImage }] = useUtils();
-
-	const formatDate = (date: string, option?: any) => {
-		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
-	};
-
-	const handleClickCard = (uuid: string) => {
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const handleLike = () => {
-
-	}
-
-	const Order = ({ order, index }: { order: any; index: number }) => (
-		<React.Fragment>
-			<Card
-				isMiniCard={configs?.google_maps_api_key?.value}
-				onPress={() => handleClickCard(order?.uuid)}
-				activeOpacity={0.7}>
-				<Information>
-					{/* {!!order.business?.logo && (
-						<Logo>
-							<OIcon
-								url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-								style={styles.logo}
-							/>
-						</Logo>
-					)} */}
-					<OrderInformation>
-						<BusinessInformation>
-							<OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
-								{`${t('ORDER_NO', 'Order No')}.${order.id}`}
-							</OText>
-							<OText size={10} lineHeight={21} color={theme.colors.textSecondary}>
-								{order?.delivery_datetime_utc
-									? formatDate(order?.delivery_datetime_utc)
-									: formatDate(order?.delivery_datetime, { utc: false })}
-							</OText>
-							{/* {order?.status !== 0 && ( */}
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								weight={400}
-								numberOfLines={2}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-							{/* )} */}
-						</BusinessInformation>
-						<Price>
-							<OText size={12} lineHeight={18}>
-								{parsePrice(order?.summary?.total || order?.total)}
-							</OText>
-							{!isPreorders &&
-								<TouchableOpacity onPress={handleLike}>
-									<OIcon src={theme.images.general.heart} color={theme.colors.red} width={16} />
-								</TouchableOpacity>
-							}
-						</Price>
-					</OrderInformation>
-				</Information>
-			</Card>
-		</React.Fragment>
-	);
-
-	return (
-		<>
-			<ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
-				{orders.length > 0 &&
-					orders.map((order: any, index: any) => (
-						<Order key={order?.id || order?.uuid} order={order} index={index} />
-					))}
-			</ActiveOrdersContainer>
-			<View
-				style={{
-					height: 8,
-					backgroundColor: theme.colors.backgroundGray100,
-					marginHorizontal: -40,
-				}}
-			/>
-		</>
-	);
-};
-
-const styles = StyleSheet.create({
-	logo: {
-		borderRadius: 7.6,
-		width: 64,
-		height: 64,
-	},
-	orderNumber: {
-		flexDirection: 'row',
-		marginVertical: 3,
-	},
-	loadOrders: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		minWidth: 230,
-	},
-});

package/themes/franchises/src/components/ActiveOrders/styles.tsx

@@ -1,44 +0,0 @@
-import styled from 'styled-components/native'
-
-export const ActiveOrdersContainer = styled.View`
-  margin-bottom: 20px;
-`
-
-export const Card = styled.TouchableOpacity`
-  flex: 1;
-`
-
-export const Map = styled.View`
-  flex: 1;
-  height: 125px;
-  margin-bottom: 22px
-`
-
-export const Information = styled.View`
-  flex-direction: row;
-  align-items: center;
-  padding-vertical: 5px;
-  margin-bottom: 12px;
-`
-
-export const Logo = styled.View`
-	border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-`
-
-export const OrderInformation = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-`
-
-export const BusinessInformation = styled.View`
-	flex-basis: 65%;
-`
-
-export const Price = styled.View`
-  justify-content: flex-start;
-  align-items: flex-end;
-  margin-left: 10px;
-  width: 30%;
-`

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

@@ -1,77 +0,0 @@
-import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import {
-	AddressDetails as AddressDetailsController,
-	useOrder,
-	useLanguage,
-} from 'ordering-components/native';
-
-import { ADContainer, ADHeader, ADAddress, ADMap } from './styles';
-
-import { useTheme } from 'styled-components/native';
-import { OText, OIcon } from '../shared';
-import { useWindowDimensions } from 'react-native';
-
-const AddressDetailsUI = (props: any) => {
-	const { navigation, addressToShow, isCartPending, googleMapsUrl, apiKey } =
-		props;
-
-	const theme = useTheme();
-	const [orderState] = useOrder();
-	const [, t] = useLanguage();
-	const { width } = useWindowDimensions();
-
-	return (
-		<ADContainer>
-			<ADHeader>
-				<OText
-					size={16}
-					lineHeight={24}
-					color={theme.colors.textNormal}
-					weight={'500'}>
-					{t('DELIVERY_ADDRESS', 'Delivery address')}
-				</OText>
-			</ADHeader>
-			{!!apiKey && (
-				<ADMap
-					style={{ marginStart: -40, marginEnd: -40, width: width, flex: 1 }}>
-					<OIcon url={googleMapsUrl} height={151} width={width} />
-				</ADMap>
-			)}
-			<ADAddress>
-				<OText
-					size={12}
-					color={theme.colors.textNormal}
-					numberOfLines={1}
-					ellipsizeMode="tail"
-					style={{ width: '85%' }}>
-					{addressToShow || orderState?.options?.address?.address}
-				</OText>
-				<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-					{orderState?.options?.address?.address_notes}
-				</OText>
-				{orderState?.options?.type === 1 && !isCartPending && (
-					<TouchableOpacity
-						onPress={() =>
-							navigation.navigate('AddressList', { isFromCheckout: true })
-						}>
-						<OText
-							size={12}
-							color={theme.colors.primary}
-							style={{ textDecorationLine: 'underline' }}>
-							{t('CHANGE', 'Change')}
-						</OText>
-					</TouchableOpacity>
-				)}
-			</ADAddress>
-		</ADContainer>
-	);
-};
-
-export const AddressDetails = (props: any) => {
-	const addressDetailsProps = {
-		...props,
-		UIComponent: AddressDetailsUI,
-	};
-	return <AddressDetailsController {...addressDetailsProps} />;
-};

package/themes/franchises/src/components/AddressDetails/styles.tsx

@@ -1,21 +0,0 @@
-import styled from 'styled-components/native';
-
-export const ADContainer = styled.View`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`
-
-export const ADHeader = styled.View`
-  display: flex;
-  justify-content: flex-start;
-`
-
-export const ADAddress = styled.View`
-  align-items: flex-start;
-  justify-content: flex-start;
-`
-
-export const ADMap = styled.View`
-  width: 100%;
-`