ordering-ui-react-native 0.21.8-release → 0.21.9-release

package/package.json

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

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

@@ -1,16 +1,32 @@
 import React from 'react';
 import DatePicker from 'react-native-date-picker'
 import { DateContainer } from './styles';
+import { useLanguage } from 'ordering-components/native';
 
 export const DatePickerUI = (props: any) => {
 	const {
 		birthdate,
-		handleChangeDate
+		onConfirm,
+		onCancel,
+		open,
 	} = props;
 
+	const [, t] = useLanguage();
+
 	return (
 		<DateContainer>
-			<DatePicker mode="date" date={birthdate ? new Date(birthdate) : new Date()} onDateChange={handleChangeDate} />
+			<DatePicker
+				modal
+				mode="date"
+				open={open}
+				title={t('SELECT_A_DATE', 'Select a date')}
+				confirmText={t('CONFIRM', 'Confirm')}
+				cancelText={t('CANCEL', 'Cancel')}
+				date={birthdate ? new Date(birthdate) : new Date()}
+				onConfirm={date => onConfirm(date)}
+				onCancel={onCancel}
+				maximumDate={new Date()}
+			/>
 		</DateContainer>
 	);
 };

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

@@ -5,7 +5,7 @@ import { useTheme } from 'styled-components/native';
 import { useForm, Controller } from 'react-hook-form';
 import { SignupForm } from '../SignupForm'
 
-import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
+import { UDForm, UDLoader, UDWrapper, WrapperPhone, WrapperBirthdate } from './styles';
 
 import { OText, OButton, OInput, OModal, OIcon } from '../shared';
 import { OAlert } from '../../../../../src/components/shared'
@@ -380,19 +380,17 @@ export const UserFormDetailsUI = (props: any) => {
 									),
 							)}
 							{showInputBirthday && (
-								<WrapperPhone>
+								<WrapperBirthdate>
 									<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' }}>
+										<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6, marginBottom: -15 }}>
 											{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
 										</OText>
 									</TouchableOpacity>
-									{showDatePicker && (
-										<DatePickerUI birthdate={birthdate} handleChangeDate={_handleChangeDate} />
-									)}
-								</WrapperPhone>
+									<DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
+								</WrapperBirthdate>
 							)}
 							{!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
 								<WrapperPhone>
@@ -503,9 +501,9 @@ export const UserFormDetailsUI = (props: any) => {
 								: t('CONTINUE', 'Continue'))
 					}
 					bgColor={theme.colors.primary}
-					textStyle={{ 
-						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white, 
-						fontSize: 14 
+					textStyle={{
+						color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
+						fontSize: 14
 					}}
 					borderColor={theme.colors.primary}
 					isDisabled={!user?.guest_id && (formState.loading || !isValid)}

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

@@ -32,3 +32,10 @@ export const WrapperPhone = styled.View`
   border-bottom-width: 1px;
   border-bottom-color: ${(props: any) => props.theme.colors.border};
 `
+
+export const WrapperBirthdate = styled.View`
+  margin-bottom: 25px;
+  width: 100%;
+  border-bottom-width: 1px;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
+`