ordering-ui-react-native 0.31.43-test → 0.33.43-test

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.31.43-test",
+  "version": "0.33.43-test",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -77,6 +77,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/MapView/index.tsx

@@ -132,6 +132,10 @@ const MapViewComponent = (props: MapViewParams) => {
 
   const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
     const markerRef = useRef<any>()
+
+    let coordinateLat = (customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat) ?? initialPosition?.latitude
+    let coordinateLng = (customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng) ?? initialPosition?.longitude
+
     useEffect(() => {
       if (
         markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
@@ -145,8 +149,8 @@ const MapViewComponent = (props: MapViewParams) => {
       <Marker
         key={customer ? marker?.customer?.id : marker?.business?.id}
         coordinate={{
-          latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
-          longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+          latitude: coordinateLat,
+          longitude: coordinateLng
         }}
         onPress={() =>
           setLocationSelected({

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/OrderDetails/index.tsx

@@ -125,6 +125,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const directionTypes = [2, 3, 4, 5]
   const activeStatus = [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23]
   const reorderStatus = [1, 2, 5, 6, 10, 11, 12]
+  const [isPickup, setIsPickup] = useState(order?.delivery_type === 2)
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
   const isGiftCardOrder = !order?.business_id
   const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
@@ -138,6 +139,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
   const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
   const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const progressBarObjt = isPickup ? getOrderStatuPickUp : getOrderStatus
   const walletName: any = {
     cash: {
       name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
@@ -346,7 +348,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     }
   }, [props?.order?.error, props?.order?.loading])
 
-  const progressBarObjt = order?.delivery_type && props.order?.delivery_type === 2 ? getOrderStatuPickUp : getOrderStatus
+
+  useEffect(() => {
+    if (!order?.delivery_type) return
+    setIsPickup(order?.delivery_type === 2)
+  }, [order?.delivery_type])
 
   return (
     <OrderDetailsContainer

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

@@ -139,7 +139,6 @@ export const ProductOptionsUI = (props: any) => {
 			flex: 1,
 			alignItems: 'center',
 			width: '100%',
-			marginLeft: 32
 		},
 		mainSwiper: {
 			height: 258,

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

@@ -14,7 +14,7 @@ import { PhoneInputNumber } from '../PhoneInputNumber';
 import { sortInputFields } from '../../utils';
 import { ListItem } from '../UserProfile/styles';
 import moment from 'moment';
-import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { DatePickerUI } from '../DatePicker';
 
 export const UserFormDetailsUI = (props: any) => {
 	const {
@@ -84,6 +84,7 @@ export const UserFormDetailsUI = (props: any) => {
 	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: {
@@ -215,6 +216,7 @@ export const UserFormDetailsUI = (props: any) => {
 		setBirthdate(date)
 		const _birthdate = moment(date).format('YYYY-MM-DD')
 		handleChangeInput({ target: { name: 'birthdate', value: _birthdate } })
+		setShowDatePicker(false)
 	}
 
 	const onRemoveAccount = () => {
@@ -383,28 +385,14 @@ export const UserFormDetailsUI = (props: any) => {
 									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
 										{t('BIRTHDATE', 'Birthdate')}
 									</OText>
-									<OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ alignSelf: 'flex-start' }}>
-										{birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
-									</OText>
-									<OButton
-										text={t('SELECT_A_DATE', 'Select a Date')}
-										bgColor={theme.colors.primary}
-										textStyle={{ color: theme.colors.white, fontSize: 14 }}
-										borderColor={theme.colors.primary}
-										isDisabled={formState.loading}
-										imgRightSrc={null}
-										style={{ borderRadius: 7.6, shadowOpacity: 0, borderWidth: 1, marginTop: 20, marginBottom: 20 }}
-										onClick={() => setDatePickerVisibility(true)}
-									/>
-									<DateContainer>
-										<DateTimePickerModal
-											isVisible={isDatePickerVisible}
-											mode="date"
-											date={birthdate ? new Date(birthdate) : new Date()}
-											onConfirm={_handleChangeDate}
-											onCancel={() => setDatePickerVisibility(false)}
-										/>
-									</DateContainer>
+									<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) && (