ordering-ui-react-native 0.12.84 → 0.12.88

package/package.json

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

package/themes/business/src/components/AcceptOrRejectOrder/index.tsx

@@ -46,7 +46,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const phoneNumber = customerCellphone;
   const titleOrder = t(orderTitle[action]?.key, orderTitle[action]?.text)
   const buttonText = t(orderTitle[action]?.btnKey, orderTitle[action]?.btnText)
-  const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady'].includes(action)
+  const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady', 'forcePickUp', 'forceDelivery'].includes(action)
 
   const handleFocus = () => {
     viewRef?.current?.measure((x: any, y: any) => {
@@ -187,6 +187,14 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
       orderNotReady: {
         comment: comments,
         status: 14
+      },
+      forcePickUp: {
+        reasons: comments,
+        status: 9
+      },
+      forceDelivery: {
+        reasons: comments,
+        status: 11
       }
     };
 
@@ -205,6 +213,12 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     if (actions && action === 'notReady') {
       bodyToSend = orderStatus[actions.notReady]
     }
+    if (actions && action === 'forcePickUp') {
+      bodyToSend = orderStatus[actions.forcePickUp]
+    }
+    if (actions && action === 'forceDelivery') {
+      bodyToSend = orderStatus[actions.forceDelivery]
+    }
 
     bodyToSend.id = orderId;
     handleUpdateOrder && handleUpdateOrder(bodyToSend.status, bodyToSend);

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

@@ -51,7 +51,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     orderTitle,
     appTitle,
     handleClickLogisticOrder,
-
+    forceUpdate
   } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
@@ -214,6 +214,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [messagesReadList]);
 
+  useEffect(() => {
+    forceUpdate && handleViewActionOrder && handleViewActionOrder(forceUpdate === 9 ? 'forcePickUp': 'forceDelivery')
+  },[forceUpdate])
+
   const styles = StyleSheet.create({
     btnPickUp: {
       borderWidth: 0,

package/themes/business/src/components/shared/OTextarea.tsx

@@ -8,6 +8,7 @@ const Wrapper = styled.View`
 `;
 const Inner = styled.TextInput`
   height: 100px;
+  padding: 5px 10px 5px 10px;
 `;
 
 interface Props {

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

@@ -370,7 +370,8 @@ export interface OrderDetailsParams {
   driverUpdateLocation?: any;
   setDriverUpdateLocation?: any;
   handleClickLogisticOrder?: (status: number, orderId: number) => void;
-  orderTitle?: any
+  orderTitle?: any;
+  forceUpdate?: number;
 }
 export interface ProductItemAccordionParams {
   isCartPending?: boolean;
@@ -529,6 +530,8 @@ interface actions {
   pickupFailed: string;
   deliveryFailed: string;
   notReady: string;
+  forcePickUp: string;
+  forceDelivery: string;
 }
 
 interface textTranslate {

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

@@ -170,7 +170,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   ? t('SEARCH_REDIRECT', 'Go to Businesses')
                   : t('CLEAR_FILTERS', 'Clear filters')
               }
-              onClickButton={() =>
+              onClickButton={props.isSingleBusiness ? null : () =>
                 !searchValue
                   ? handleSearchRedirect && handleSearchRedirect()
                   : handleCancelSearch && handleCancelSearch()

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

@@ -210,6 +210,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								noBorderShow
 								placeholder={t('SEARCH', 'Search')}
 								lazyLoad={businessState?.business?.lazy_load_products_recommended}
+                inputStyle={{
+                  borderRadius: 8,
+                  borderBottomWidth: 1,
+                  borderBottomColor: theme.colors.border,
+                  borderBottomLeftRadius: 0,
+                  borderBottomRightRadius: 0,
+                }}
 							/>
 						</WrapSearchBar>
 						{!(business?.categories?.length === 0) && (
@@ -244,6 +251,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									{ id: 'featured', name: t('FEATURED', 'Featured') },
 									...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
 								]}
+                isSingleBusiness={props.isSingleBusiness}
 								category={categorySelected}
 								categoryState={categoryState}
 								businessId={business.id}

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

@@ -24,7 +24,11 @@ import { ProgressBar, TouchableRipple } from 'react-native-paper';
 import moment from 'moment';
 
 const BusinessReviewsUI = (props: BusinessReviewsParams) => {
-	const { businessState, reviewsList } = props;
+	const {
+    reviewsList,
+    businessState,
+    handleChangeSearch,
+  } = props;
 	const [, t] = useLanguage();
 	const theme = useTheme();
 	const [orderState] = useOrder();
@@ -146,11 +150,13 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 						</StarPointsView>
 
 						<ReviewSearchView>
-							<OInput
+              <OInput
 								icon={theme.images.general.search}
 								inputStyle={{ fontSize: 14 }}
 								placeholder={t('SEARCH_REVIEWS', 'Search reviews')}
-								style={{ paddingStart: 0 }}></OInput>
+								style={{ paddingStart: 0 }}
+                onChange={handleChangeSearch}
+              />
 						</ReviewSearchView>
 						<ReviewProgressView>
 							<OText style={{ marginBottom: 6 }}>

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

@@ -106,10 +106,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			color: theme.colors.warning5,
 			marginRight: 8
 		},
-		farAwayMsg: {
-			paddingVertical: 6,
-			paddingHorizontal: 20
-		}
   });
 
 
@@ -199,11 +195,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
           </OText>
         </AddressInput>
         {isFarAway && (
-					<FarAwayMessage style={styles.farAwayMsg}>
-						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
-					</FarAwayMessage>
-				)}
+          <FarAwayMessage>
+            <Ionicons name='md-warning-outline' style={styles.iconStyle} />
+            <OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+          </FarAwayMessage>
+        )}
         <OrderControlContainer>
           <View style={styles.wrapperOrderOptions}>
             <DropOptionButton
@@ -256,6 +252,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
           noBorderShow
           placeholder={t('SEARCH', 'Search')}
           lazyLoad
+          inputStyle={{
+            borderRadius: 8,
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          }}
         />
       </WrapSearchBar>
       <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />

package/themes/single-business/src/components/BusinessesListing/styles.tsx

@@ -23,7 +23,7 @@ export const AddressInput = styled.TouchableOpacity`
   justify-content: flex-start;
   background-color: white;
   padding-horizontal: 15px;
-  border-radius: 24px;
+  border-radius: 8px;
   height: 44px;
   min-height: 44px;
 `
@@ -93,14 +93,16 @@ export const WrapSearchBar = styled.View`
   padding: 10px 30px;
   margin-bottom: 10px;
   background-color: ${(props: any) => props.theme.colors.white};
-  flex: 1;
 `
 
 export const FarAwayMessage = styled.View`
+  display: flex;
   flex-direction: row;
   align-items: center;
 	background-color: ${(props: any) => props.theme.colors.warning1};
-  border-radius: 7.6px;
+  border-radius: 8px;
   border: 1px solid ${(props: any) => props.theme.colors.warning5};
   width: 100%;
+  padding: 6px 20px;
+  margin-top: 20px;
 `

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

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import moment, { Moment } from 'moment';
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
 import {
 	useLanguage,
 	useConfig,
@@ -9,19 +9,17 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
-	ImageStore,
+	TouchableOpacity,
 	StyleSheet,
 	useWindowDimensions,
 	View,
 } from 'react-native';
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { MomentOptionParams } from '../../types';
 import NavBar from '../NavBar';
 import { OIcon, OText } from '../shared';
 import { Container } from '../../layouts/Container';
 import {
-	HeaderTitle,
 	WrapSelectOption,
 	Days,
 	Day,
@@ -30,7 +28,6 @@ import {
 	Hour,
 	WrapDelveryTime,
 } from './styles';
-import CalendarPicker from 'react-native-calendar-picker';
 import { TouchableRipple } from 'react-native-paper';
 
 const MomentOptionUI = (props: MomentOptionParams) => {
@@ -65,6 +62,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 			paddingHorizontal: 12,
 			paddingVertical: 9,
 			marginBottom: 12,
+      marginHorizontal: 10,
+      marginTop: 10
 		},
 		dateWrap: {
 			marginTop: 40,
@@ -89,6 +88,9 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 	const [{ configs }] = useConfig();
 	const [{ parseTime }] = useUtils();
 	const [orderState] = useOrder();
+  const { width } = useWindowDimensions();
+
+  const [toggleTime, setToggleTime] = useState(false);
 	const [optionSelected, setOptionSelected] = useState({
 		isAsap: false,
 		isSchedule: false,
@@ -97,9 +99,9 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		isLoading: 0,
 		isEditing: false,
 	});
-	const { width } = useWindowDimensions();
-
-	const [toggleTime, setToggleTime] = useState(false);
+	const momento = moment(`${dateSelected} ${timeSelected}`, 'YYYY-MM-DD HH:mm').toDate();
+	const momentUnix = momento.getTime() / 1000;
+	const momentFormat = moment.unix(momentUnix).utc().format('YYYY-MM-DD HH:mm:ss');
 
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
@@ -117,29 +119,6 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		handleChangeTime(time);
 	};
 
-	const momento = moment(
-		`${dateSelected} ${timeSelected}`,
-		'YYYY-MM-DD HH:mm',
-	).toDate();
-	const momentUnix = momento.getTime() / 1000;
-	const momentFormat = moment
-		.unix(momentUnix)
-		.utc()
-		.format('YYYY-MM-DD HH:mm:ss');
-
-	const getTwoChar = (ori: string) => {
-		return ori.substring(0, 2);
-	};
-	const weekDays = [
-		getTwoChar(t('SUNDAY_ABBREVIATION', 'Su')),
-		getTwoChar(t('MONDAY_ABBREVIATION', 'Mo')),
-		getTwoChar(t('TUESDAY_ABBREVIATION', 'Tu')),
-		getTwoChar(t('WEDNESDAY_ABBREVIATION', 'We')),
-		getTwoChar(t('THURSDAY_ABBREVIATION', 'Th')),
-		getTwoChar(t('FRIDAY_ABBREVIATION', 'Fr')),
-		getTwoChar(t('SATURDAY_ABBREVIATION', 'Sa')),
-	];
-
 	useEffect(() => {
 		if (orderState.options?.moment) {
 			setOptionSelected({ isAsap: false, isSchedule: true });
@@ -161,15 +140,6 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 		}
 	}, [momentState.isLoading]);
 
-	const customDayHeaderStylesCallback = () => {
-		return {
-			textStyle: {
-				color: theme.colors.disabled,
-				fontSize: 12,
-			},
-		};
-	};
-
 	return (
 		<Container style={{ paddingLeft: 40, paddingRight: 40 }}>
 			<View style={{ paddingBottom: 10 }}>
@@ -200,7 +170,11 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 							style={{ marginEnd: 24 }}
 						/>
 					)}
-					<OText color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}>{t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM d, yyyy h:mm A')} + delivery time)`}</OText>
+					<OText
+            color={optionSelected.isAsap ? theme.colors.textNormal : theme.colors.disabled}
+          >
+            {t('ASAP_ABBREVIATION', 'ASAP') + ` (${moment().format('dddd, MMM D, yyyy h:mm A')} + delivery time)`}
+          </OText>
 				</WrapSelectOption>
 				<WrapSelectOption
 					onPress={() => setOptionSelected({ isAsap: false, isSchedule: true })}
@@ -228,36 +202,31 @@ const MomentOptionUI = (props: MomentOptionParams) => {
 								<View style={styles.dateLabel}>
 									<OText size={12} color={theme.colors.disabled}>{dateSelected}</OText>
 								</View>
-								<CalendarPicker
-									nextTitle=">"
-									width={width - 80}
-									previousTitle="<"
-									nextComponent={
-										<OIcon
-											src={theme.images.general.chevron_right}
-											color={theme.colors.disabled}
-											width={12}
-											style={{ marginHorizontal: 4 }}
-										/>
-									}
-									previousComponent={
-										<OIcon
-											src={theme.images.general.chevron_left}
-											color={theme.colors.disabled}
-											width={12}
-											style={{ marginHorizontal: 4 }}
-										/>
-									}
-									onDateChange={(date: moment.Moment) =>
-										handleChangeDate(date.format('YYYY-MM-DD'))
-									}
-									selectedDayColor={theme.colors.primaryContrast}
-									todayBackgroundColor={theme.colors.border}
-									dayLabelsWrapper={{ borderColor: theme.colors.clear }}
-									customDayHeaderStyles={customDayHeaderStylesCallback}
-									weekdays={weekDays}
-									selectedStartDate={momento}
-								/>
+								<Days>
+                  {datesList.slice(0, 6).map((date: any, i: any) => {
+                    const dateParts = date.split('-')
+                    const _date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2])
+                    const dayName = t('DAY' + (_date.getDay() >= 1 ? _date.getDay() : 7)).substring(0, 3).toUpperCase()
+                    const dayNumber = (_date.getDate() < 10 ? '0' : '') + _date.getDate()
+                    return (
+                      <TouchableOpacity
+                        key={dayNumber}
+                        style={{ paddingHorizontal: 10, paddingBottom: 10, paddingTop: 10, borderColor: 'transparent', borderWidth: 1 }}
+                      >
+                        <Day onPress={() => handleChangeDate(date)} style={{ width: (width * 0.25) - 108 }}>
+                          <OText
+                            style={styles.dayNameStyle}
+                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
+                          >{dayName}</OText>
+                          <OText
+                            size={20}
+                            color={(dateSelected === date && optionSelected.isSchedule) ? theme.colors.primary : theme.colors.textSecondary}
+                          >{dayNumber}</OText>
+                        </Day>
+                      </TouchableOpacity>
+                    )
+                  })}
+                </Days>
 							</View>
 						)}
 

package/themes/single-business/src/components/MomentOption/styles.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/native'
+import styled from 'styled-components/native'
 
 export const Container = styled.ScrollView`
   flex: 1;
@@ -16,23 +16,22 @@ export const WrapSelectOption = styled.TouchableOpacity`
   margin-vertical: 5px;
 `
 export const Days = styled.View`
-  flex-wrap: wrap;
+  display: flex;
   flex-direction: row;
-  margin-vertical: 10px;
+  width: 100%;
+  align-items: center;
+  flex-wrap: wrap;
 `
 export const Day = styled.TouchableOpacity`
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  border-right-width: 1px;
-  width: 25%;
-  margin-vertical: 10px;
-  border-color: ${(props: any) => props.theme.colors.textSecondary};
-
-  ${(props: any) => props.borderLeftShow && css`
-    border-left-width: 1px;
-  `}
+  align-items: center;
+  padding-top: 10px;
+  border: 1px solid ${(props: any) => props.theme.colors.border};
+  text-transform: capitalize;
+  min-height: 60px;
+  min-width: 60px;
+  border-radius: 8px;
 `
 export const WrapHours = styled.ScrollView`
   border-width: 1px;

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {
 	OrderTypeControl,
 	useLanguage,
@@ -25,13 +25,14 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const theme = useTheme();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
+  const [isTypeChanging, setTypeChanging] = useState(false);
 	const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
 	
 	const items = _orderTypes.map((type) => {
 		return {
 			value: type.value,
-			label: t(type.content, type.content),
-			description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
+			label: type.content,
+			description: type.description
 		}
 	})
 
@@ -40,9 +41,16 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 	const handleChangeOrderTypeCallback = (orderType: number) => {
 		if (!orderState.loading) {
 			handleChangeOrderType(orderType)
+      setTypeChanging(true)
 		}
 	}
 
+  useEffect(() => {
+    if (isTypeChanging && !orderState.loading) {
+      typeSelected === orderState?.options?.type && goToBack()
+    }
+  }, [orderState, typeSelected]);
+
 	return (
 		<Wrapper>
 			<NavBar
@@ -81,11 +89,37 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
 }
 
 export const OrderTypeSelector = (props: any) => {
-
+  const [, t] = useLanguage()
 	const orderTypeProps = {
 		...props,
 		UIComponent: OrderTypeSelectorUI,
-		orderTypes: props.orderType || ORDER_TYPES
+		orderTypes: props.orderTypes || [
+      {
+        value: 1,
+        content: t('DELIVERY', 'Delivery'),
+        description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Lorem ipsum dolor sit amet, consectetur.')
+      },
+      {
+        value: 2,
+        content: t('PICKUP', 'Pickup'),
+        description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Lorem ipsum dolor sit amet, consectetur.')
+      },
+      {
+        value: 3,
+        content: t('EAT_IN', 'Eat in'),
+        description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Lorem ipsum dolor sit amet, consectetur.')
+      },
+      {
+        value: 4,
+        content: t('CURBSIDE', 'Curbside'),
+        description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Lorem ipsum dolor sit amet, consectetur.')
+      },
+      {
+        value: 5,
+        content: t('DRIVE_THRU', 'Drive thru'),
+        description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Lorem ipsum dolor sit amet, consectetur.')
+      }
+    ]
 	}
 
 	return <OrderTypeControl {...orderTypeProps} />