ordering-ui-react-native 0.16.9 → 0.16.10-release

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

@@ -1,23 +1,13 @@
 import React from 'react';
-import { useLanguage, useUtils, useConfig } from 'ordering-components/native';
-import { OButton, OIcon, OText } from '../shared';
+import { useConfig } from 'ordering-components/native';
 import {
-	ActiveOrdersContainer,
-	Card,
-	Map,
-	Information,
-	Logo,
-	OrderInformation,
-	BusinessInformation,
-	Price,
-	UnreadMessageCounter,
-	LoadMore
+	ActiveOrdersContainer
 } from './styles';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 
 import { ActiveOrdersParams } from '../../types';
-import moment from 'moment';
 import { useTheme } from 'styled-components/native';
+import { SingleOrderCard } from '../SingleOrderCard';
 
 export const ActiveOrders = (props: ActiveOrdersParams) => {
 	const {
@@ -27,111 +17,27 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 		loadMoreOrders,
 		getOrderStatus,
 		isMessageView,
-		handleClickOrder
+		handleClickOrder,
+		handleUpdateOrderList
 	} = props;
 
 	const theme = useTheme();
 	const [{ configs }] = useConfig();
-	const [, t] = useLanguage();
-	const [{ parseDate, parsePrice, optimizeImage }] = useUtils();
-
-	const formatDate = (date: string, option?: any) => {
-		return option?.utc ? moment.utc(date).format('DD/MM/YY \u2022 h:m a') : moment(date).format('DD/MM/YY \u2022 h:m a');
-	};
-
-	const handleClickCard = (uuid: string) => {
-		if (isMessageView) {
-			handleClickOrder(uuid)
-			return
-		}
-		onNavigationRedirect &&
-			onNavigationRedirect('OrderDetails', { orderId: uuid });
-	};
-
-	const Order = ({ order, index }: { order: any; index: number }) => (
-		<React.Fragment>
-			<Card
-				isMiniCard={configs?.google_maps_api_key?.value}
-				onPress={() => handleClickCard(order?.uuid)}
-				activeOpacity={0.7}>
-				{/* {!!(configs?.google_maps_api_key?.value) && (
-					<Map>
-						<OIcon
-						url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-						height={100}
-						width={320}
-						style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
-						/>
-					</Map>
-				)} */}
-				<Information>
-					{!!order.business?.logo && (
-						<Logo>
-							<OIcon
-								url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-								style={styles.logo}
-							/>
-						</Logo>
-					)}
-					<OrderInformation>
-						<BusinessInformation>
-							<OText size={12} lineHeight={18} weight={600} numberOfLines={1} ellipsizeMode={'tail'}>
-								{order.business?.name}
-							</OText>
-							<View style={styles.orderNumber}>
-								<OText size={10} space color={theme.colors.textSecondary}>
-									{t('ORDER_NO', 'Order No') + '.'}
-								</OText>
-								<OText size={10} color={theme.colors.textSecondary}>
-									{order.id + ` \u2022 `}
-								</OText>
-								<OText size={10} color={theme.colors.textSecondary}>
-									{order?.delivery_datetime_utc
-										? formatDate(order?.delivery_datetime_utc)
-										: formatDate(order?.delivery_datetime, { utc: false })}
-								</OText>
-							</View>
-							{/* {order?.status !== 0 && ( */}
-							<OText
-								color={theme.colors.primary}
-								size={10}
-								lineHeight={15}
-								weight={400}
-								numberOfLines={2}>
-								{getOrderStatus(order.status)?.value}
-							</OText>
-							{/* )} */}
-						</BusinessInformation>
-						{isMessageView ? (
-							<>
-								{order?.unread_count > 0 && (
-									<UnreadMessageCounter>
-										<OText size={12} color={theme.colors.primary} lineHeight={18} >
-											{order?.unread_count}
-										</OText>
-									</UnreadMessageCounter>
-								)}
-							</>
-						) : (
-							<Price>
-								<OText size={12} lineHeight={18}>
-									{parsePrice(order?.summary?.total || order?.total)}
-								</OText>
-							</Price>
-						)}
-
-					</OrderInformation>
-				</Information>
-			</Card >
-		</React.Fragment >
-	);
 
 	return (
 		<>
 			<ActiveOrdersContainer isMiniCards={configs?.google_maps_api_key?.value}>
 				{orders.length > 0 &&
 					orders.map((order: any, index: any) => (
-						<Order key={index} order={order} index={index} />
+						<SingleOrderCard
+							key={index}
+							order={order}
+							handleClickOrder={handleClickOrder}
+							isMessageView={isMessageView}
+							getOrderStatus={getOrderStatus}
+							onNavigationRedirect={onNavigationRedirect}
+							handleUpdateOrderList={handleUpdateOrderList}
+						/>
 					))}
 			</ActiveOrdersContainer>
 			<View
@@ -144,26 +50,3 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
 		</>
 	);
 };
-
-const styles = StyleSheet.create({
-	logo: {
-		borderRadius: 7.6,
-		width: 64,
-		height: 64,
-	},
-	orderNumber: {
-		flexDirection: 'row',
-		marginVertical: 3,
-	},
-	loadOrders: {
-		justifyContent: 'center',
-		alignItems: 'center',
-		minWidth: 230,
-	},
-	loadMoreButton: {
-		width: '100%',
-		marginLeft: 'auto',
-		marginRight: 'auto',
-		borderRadius: 7.6
-	},
-});

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

@@ -3,57 +3,3 @@ import styled from 'styled-components/native'
 export const ActiveOrdersContainer = styled.View`
   margin-bottom: 20px;
 `
-
-export const Card = styled.TouchableOpacity`
-`
-
-export const Map = styled.View`
-  flex: 1;
-  height: 125px;
-  margin-bottom: 10px;
-`
-
-export const Information = styled.View`
-  flex-direction: row;
-  height: 100px;
-  align-items: center;
-  padding-vertical: 5px;
-`
-
-export const Logo = styled.View`
-	border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-`
-
-export const OrderInformation = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-  padding-left: 14px;
-`
-
-export const BusinessInformation = styled.View`
-	flex-basis: 65%;
-`
-
-export const Price = styled.View`
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-left: 10px;
-  width: 30%;
-`
-
-export const UnreadMessageCounter = styled.View`
-  justify-content: center;
-  align-items: center;
-  margin-left: 10px;
-  width: 24px;
-  height: 24px;
-  border-radius: 7.6px;
-  background-color: ${(props: any) => props.theme.colors.primaryContrast};
-`
-export const LoadMore = styled.View`
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 10px;
-`

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

@@ -5,7 +5,6 @@ import {
 	TouchableOpacity,
 	Keyboard,
 	TouchableWithoutFeedback,
-	KeyboardAvoidingView,
 	Platform,
 } from 'react-native';
 import {
@@ -22,7 +21,7 @@ import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import Geocoder from 'react-native-geocoding';
 
-import { OInput, OButton, OText, OModal, OIcon } from '../shared';
+import { OInput, OButton, OModal, OIcon } from '../shared';
 import { AddressFormParams } from '../../types';
 import { getTraduction } from '../../utils';
 import { useTheme } from 'styled-components/native';
@@ -57,9 +56,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 		addressState,
 		addressesList,
 		saveAddress,
-		userCustomerSetup,
 		isGuestUser,
 		isRequiredField,
+		showField,
 		isFromProductsList,
 		hasAddressDefault,
 		afterSignup,
@@ -109,8 +108,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			zIndex: 1002,
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? {  paddingVertical: 0, paddingHorizontal: 40 }
-			: {  paddingVertical: 20, paddingHorizontal: 40 }
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
 	});
 
 	const [, t] = useLanguage();
@@ -156,7 +155,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
 
-	const continueAsGuest = () => navigation.navigate('BusinessList');
+	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const getAddressFormatted = (address: any) => {
@@ -203,6 +202,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 						saveAddress(data.address);
 						if (isGuestUser) {
 							continueAsGuest();
+							return;
 						}
 						if (!isGuestUser && !auth) {
 							!isFromProductsList
@@ -598,33 +598,27 @@ const AddressFormUI = (props: AddressFormParams) => {
 										/>
 									)}
 								/>
-								{hasEditing ? (
-									<View style={styles.pinIcon}>
-										<GPSButton 
-											apiKey={googleMapsApiKey}
-											handleGPS={(data: any, detail: any) => {
-												handleChangeAddress(data, detail);
-												setValue(data.address);
-												if (googleInput?.current) {
-													googleInput?.current?.setAddressText( data.address );
-												}
-											}}
-											IconButton={<OIcon src={theme.images.general.pin} width={16} />}
-										/>
-									</View>
-								) : null}
-							</AutocompleteInput>
 
-							{/* {!isKeyboardShow && (addressState?.address?.location || formState?.changes?.location) && (
-                <TouchableOpacity onPress={handleToggleMap} style={{ marginBottom: 10 }}>
-                  <OText
-                    color={theme.colors.primary}
-                    style={{ textAlign: 'center' }}
-                  >
-                    {t('VIEW_MAP', 'View map to modify the exact location')}
-                  </OText>
-                </TouchableOpacity>
-              )} */}
+								{(
+									(!isEditing && !isGuestUser && !formState.changes?.address) ||
+									(isEditing && !isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined)) ||
+									(isGuestUser && !formState.changes?.address && formState.changes?.address !== undefined) &&
+								(
+										<View style={styles.pinIcon}>
+											<GPSButton
+												apiKey={googleMapsApiKey}
+												handleGPS={(data: any, detail: any) => {
+													handleChangeAddress(data, detail);
+													setValue('address', data.address);
+													if (googleInput?.current) {
+														googleInput?.current?.setAddressText(data.address);
+													}
+												}}
+												IconButton={<OIcon src={theme.images.general.pin} width={16} />}
+											/>
+										</View>
+								)}
+							</AutocompleteInput>
 
 							{(locationChange || formState.changes?.location) && (
 								<View
@@ -648,129 +642,138 @@ const AddressFormUI = (props: AddressFormParams) => {
 							)}
 
 							<View style={{ flexDirection: 'row', flexBasis: '50%' }}>
-								<Controller
-									control={control}
-									name="internal_number"
-									rules={{
-										required:
-											isRequiredField && isRequiredField('internal_number')
-												? t(
-													`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
-													`The field internal number is required`,
-												)
-												: null,
-									}}
-									defaultValue={
-										address?.internal_number ||
-										formState.changes?.internal_number ||
-										addressState?.address?.internal_number ||
-										''
-									}
-									render={() => (
-										<OInput
-											name="internal_number"
-											placeholder={t('INTERNAL_NUMBER', 'Internal number')}
-											onChange={(text: string) => {
-												handleChangeInput(text);
-												setValue('internal_number', text);
-											}}
-											value={
-												address?.internal_number ||
-												formState.changes?.internal_number ||
-												addressState?.address?.internal_number ||
-												''
-											}
-											style={{ ...styles.inputsStyle, marginRight: 24 }}
-											forwardRef={internalNumberRef}
-											returnKeyType="next"
-											onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
-											blurOnSubmit={false}
-										/>
-									)}
-								/>
+								{showField && showField('internal_number') && (
+									<Controller
+										control={control}
+										name="internal_number"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('internal_number')
+													? t(
+														`VALIDATION_ERROR_INTERNAL_NUMBER_REQUIRED`,
+														`The field internal number is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.internal_number ||
+											formState.changes?.internal_number ||
+											addressState?.address?.internal_number ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="internal_number"
+												placeholder={t('INTERNAL_NUMBER', 'Internal number')}
+												onChange={(text: string) => {
+													handleChangeInput(text);
+													setValue('internal_number', text);
+												}}
+												value={
+													address?.internal_number ||
+													formState.changes?.internal_number ||
+													addressState?.address?.internal_number ||
+													''
+												}
+												style={{
+													...styles.inputsStyle,
+													marginRight: showField('internal_number') && showField('zipcode') ? 24 : 0
+												}}
+												forwardRef={internalNumberRef}
+												returnKeyType="next"
+												onSubmitEditing={() => zipCodeRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+
+								{showField && showField('zipcode') && (
+									<Controller
+										control={control}
+										name="zipcode"
+										rules={{
+											required:
+												isRequiredField && isRequiredField('zipcode')
+													? t(
+														`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
+														`The field Zip Code is required`,
+													)
+													: null,
+										}}
+										defaultValue={
+											address?.zipcode ||
+											formState.changes?.zipcode ||
+											addressState.address.zipcode ||
+											''
+										}
+										render={() => (
+											<OInput
+												name="zipcode"
+												placeholder={t('ZIP_CODE', 'Zip code')}
+												onChange={(text: string) => {
+													handleChangeInput(text);
+													setValue('zipcode', text);
+												}}
+												value={
+													address?.zipcode ||
+													formState.changes?.zipcode ||
+													addressState.address.zipcode ||
+													''
+												}
+												style={styles.inputsStyle}
+												forwardRef={zipCodeRef}
+												returnKeyType="next"
+												onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
+												blurOnSubmit={false}
+											/>
+										)}
+									/>
+								)}
+							</View>
 
+							{showField && showField('address_notes') && (
 								<Controller
 									control={control}
-									name="zipcode"
+									name="address_notes"
 									rules={{
 										required:
-											isRequiredField && isRequiredField('zipcode')
+											isRequiredField && isRequiredField('address_notes')
 												? t(
-													`VALIDATION_ERROR_ZIP_CODE_REQUIRED`,
-													`The field Zip Code is required`,
+													`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
+													`The field address notes is required`,
 												)
 												: null,
 									}}
 									defaultValue={
-										address?.zipcode ||
-										formState.changes?.zipcode ||
-										addressState.address.zipcode ||
+										address?.address_notes ||
+										formState.changes?.address_notes ||
+										addressState.address.address_notes ||
 										''
 									}
 									render={() => (
 										<OInput
-											name="zipcode"
-											placeholder={t('ZIP_CODE', 'Zip code')}
-											onChange={(text: string) => {
+											name="address_notes"
+											placeholder={t('ADDRESS_NOTES', 'Address notes')}
+											onChange={(text: any) => {
 												handleChangeInput(text);
-												setValue('zipcode', text);
+												setValue('address_notes', text);
 											}}
 											value={
-												address?.zipcode ||
-												formState.changes?.zipcode ||
-												addressState.address.zipcode ||
+												address?.address_notes ||
+												formState.changes?.address_notes ||
+												addressState.address.address_notes ||
 												''
 											}
-											style={styles.inputsStyle}
-											forwardRef={zipCodeRef}
-											returnKeyType="next"
-											onSubmitEditing={() => addressNotesRef?.current?.focus?.()}
-											blurOnSubmit={false}
+											multiline
+											style={styles.textAreaStyles}
+											returnKeyType="done"
+											forwardRef={addressNotesRef}
+											blurOnSubmit
 										/>
 									)}
 								/>
-							</View>
-
-							<Controller
-								control={control}
-								name="address_notes"
-								rules={{
-									required:
-										isRequiredField && isRequiredField('address_notes')
-											? t(
-												`VALIDATION_ERROR_ADDRESS_NOTES_REQUIRED`,
-												`The field address notes is required`,
-											)
-											: null,
-								}}
-								defaultValue={
-									address?.address_notes ||
-									formState.changes?.address_notes ||
-									addressState.address.address_notes ||
-									''
-								}
-								render={() => (
-									<OInput
-										name="address_notes"
-										placeholder={t('ADDRESS_NOTES', 'Address notes')}
-										onChange={(text: any) => {
-											handleChangeInput(text);
-											setValue('address_notes', text);
-										}}
-										value={
-											address?.address_notes ||
-											formState.changes?.address_notes ||
-											addressState.address.address_notes ||
-											''
-										}
-										multiline
-										style={styles.textAreaStyles}
-										returnKeyType="done"
-										forwardRef={addressNotesRef}
-										blurOnSubmit
-									/>
-								)}
-							/>
+							)}
 						</FormInput>
 						<IconsContainer>
 							{tagsName.map((tag) => (

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

@@ -56,7 +56,7 @@ const AddressListUI = (props: AddressListParams) => {
 	}
 
 	const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
-		(address: any, i: number, self: any) =>
+		(address: any, i: number, self: any) => address.address &&
 			i === self.findIndex((obj: any) => (
 				address.address === obj.address &&
 				address.address_notes === obj.address_notes &&

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

@@ -21,7 +21,7 @@ export const AppleLogin = (props: any) => {
   const [{ configs }] = useConfig();
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
@@ -53,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -66,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -79,7 +79,7 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
+
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>