ordering-ui-react-native 0.21.46 → 0.21.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.21.46",
+  "version": "0.21.47",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -76,6 +76,7 @@
     "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
+    "react-native-date-picker": "^4.2.13",
     "react-native-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",

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

@@ -515,7 +515,10 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         <View
           style={{
             ...styles.bottomParent,
-            marginBottom: (keyboardState.height === 0) ? isPage ? 0 : 30 : keyboardState.height - (isPage ? 20 : -10)
+            marginBottom: Platform.OS === 'ios'
+              ? 30 : (keyboardState.height === 0)
+                ? isPage ? 0 : 30
+                : keyboardState.height - (isPage ? 20 : -10)
           }}
         >
           <OButton

package/themes/original/index.tsx

@@ -99,6 +99,7 @@ import { Promotions } from './src/components/Promotions'
 import { PageBanner } from './src/components/PageBanner'
 import { MultiCart } from './src/components/MultiCart'
 import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
+import { DatePickerUI } from './src/components/DatePicker'
 
 import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
 
@@ -263,7 +264,7 @@ export {
 	Promotions,
 	PageBanner,
 	MyOrders,
-  MultiCart,
+	MultiCart,
 	ORDER_TYPES,
 	USER_TYPE,
 
@@ -340,5 +341,8 @@ export {
 	_retrieveStoreData,
 	_setStoreData,
 	_removeStoreData,
-	_clearStoreData
+	_clearStoreData,
+
+	// Date Picker
+	DatePickerUI
 }

package/themes/original/src/components/BusinessProductsListing/index.tsx

@@ -570,7 +570,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               />
             </ProfessionalFilterWrapper>
           )}
-          <PageBanner position='app_business_page' navigation={navigation} />
+          {businessState?.business?.id && (
+            <PageBanner position='app_business_page' businessId={businessState?.business?.id} navigation={navigation} />
+          )}
           <View
             style={{
               height: 8,

package/themes/original/src/components/DatePicker/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import DatePicker from 'react-native-date-picker'
+import { DateContainer } from './styles';
+
+export const DatePickerUI = (props: any) => {
+	const {
+		birthdate,
+		handleChangeDate
+	} = props;
+
+	return (
+		<DateContainer>
+			<DatePicker mode="date" date={birthdate ? new Date(birthdate) : new Date()} onDateChange={handleChangeDate} />
+		</DateContainer>
+	);
+};
+

package/themes/original/src/components/DatePicker/styles.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components/native';
+
+export const DateContainer = styled.View`
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  input {
+    border-radius: 20px;
+    width: 140px;
+    outline: none;
+    padding: 10px 15px;
+    border: 1px solid #E9ECEF;
+  }
+
+  .react-datepicker__triangle {
+    transform: translate(40px, 0px) !important;
+  }
+
+`

package/themes/original/src/components/UserFormDetails/index.tsx

@@ -13,6 +13,8 @@ import { OAlert } from '../../../../../src/components/shared'
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
 import { ListItem } from '../UserProfile/styles';
+import moment from 'moment';
+import { DatePickerUI } from '../DatePicker';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -81,6 +83,8 @@ export const UserFormDetailsUI = (props: any) => {
 	const [isValid, setIsValid] = useState(false)
 	const [isChanged, setIsChanged] = useState(false)
 	const [isModalOpen, setIsModalOpen] = useState(false)
+	const [birthdate, setBirthdate] = useState(user?.birthdate ?? null)
+	const [showDatePicker, setShowDatePicker] = useState(false)
 	const [phoneInputData, setPhoneInputData] = useState({
 		error: '',
 		phone: {
@@ -92,6 +96,7 @@ export const UserFormDetailsUI = (props: any) => {
 
 	const isAdmin = user?.level === 0
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
 
 	const handleSuccessSignup = (user: any) => {
 		login({
@@ -206,6 +211,13 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(countryCode, true);
 	}
 
+	const _handleChangeDate = (date: any) => {
+		setBirthdate(date)
+		const _birthdate = moment(date).format('YYYY-MM-DD')
+		handleChangeInput({ target: { name: 'birthdate', value: _birthdate } })
+		setShowDatePicker(false)
+	}
+
 	const onRemoveAccount = () => {
 		setConfirm({
 			open: true,
@@ -268,6 +280,14 @@ export const UserFormDetailsUI = (props: any) => {
 		}
 	}, [phoneInputData, configs?.verification_phone_required?.value, isChanged])
 
+	useEffect(() => {
+		if (!validationFields.loading && birthdate) {
+			setValue('birthdate', formState?.result?.result
+				? formState?.result?.result?.birthdate
+				: formState?.changes?.birthdate ?? (user && user?.birthdate) ?? '')
+		}
+	}, [validationFields, birthdate])
+
 	useEffect(() => {
 		if (!requiredFields || formState?.changes?.length === 0) return
 		const _isValid = requiredFields.every((key: any) => formState?.changes[key])
@@ -359,7 +379,21 @@ export const UserFormDetailsUI = (props: any) => {
 										</React.Fragment>
 									),
 							)}
-
+							{showInputBirthday && (
+								<WrapperPhone>
+									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
+										{t('BIRTHDATE', 'Birthdate')}
+									</OText>
+									<TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ alignSelf: 'flex-start' }}>
+											{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
+										</OText>
+									</TouchableOpacity>
+									{showDatePicker && (
+										<DatePickerUI birthdate={birthdate} handleChangeDate={_handleChangeDate} />
+									)}
+								</WrapperPhone>
+							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
 									<OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>