ordering-ui-react-native 0.12.84 → 0.12.85

package/package.json

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

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

@@ -244,6 +244,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/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} />

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

@@ -161,6 +161,7 @@ export interface BusinessProductsListingParams {
 	categorySelected: any;
 	handleSearchRedirect: any;
 	errorQuantityProducts?: boolean;
+	isSingleBusiness?: boolean;
 	isFranchiseApp?: boolean;
 	header?: any;
 	logo?: any;
@@ -207,6 +208,7 @@ export interface BusinessProductsListParams {
 	handleClearSearch?: (value: any) => {};
 	isBusinessLoading?: any,
 	errorQuantityProducts?: boolean,
+	isSingleBusiness?: boolean,
 	handleCancelSearch?: () => void
 	categoriesLayout?: any
 	setCategoriesLayout?: any
@@ -227,6 +229,7 @@ export interface BusinessInformationParams {
 export interface BusinessReviewsParams {
 	businessState: { business: any, loading: boolean, error: null };
 	reviewsList: { reviews: any, loading: boolean, error: null };
+	handleChangeSearch: any;
 }
 export interface SearchBarParams {
 	searchValue?: any;