ordering-ui-react-native 0.14.81 → 0.14.84

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

@@ -1,332 +1,332 @@
-import React, { useEffect, useState } from 'react'
-import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
-import { AddressListContainer, AddressItem } from './styles'
-import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { useTheme } from 'styled-components/native'
-import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
-import { Container } from '../../layouts/Container'
-import { AddressFormParams, AddressListParams } from '../../types'
-import { NotFoundSource } from '../NotFoundSource'
-import NavBar from '../NavBar'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-
-const AddressListUI = (props: AddressListParams) => {
-
-	const {
-		navigation,
-		route,
-		addressList,
-		isFromProfile,
-		nopadding,
-		handleSetDefault,
-		handleDelete,
-		setAddressList,
-		isGoBack,
-		actionStatus,
-		isFromBusinesses,
-		isFromProductsList,
-		afterSignup,
-		isFromCheckout
-	} = props
-
-	const theme = useTheme();
-
-
-	const [orderState] = useOrder()
-	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
-
-	const onNavigatorRedirect = () => {
-		if (route && (isFromBusinesses || isGoBack)) {
-			isGoBack ? goToBack() : onNavigationRedirect('BottomTab')
-			return
-		}
-		if (route && route?.params?.isFromCheckout) {
-			onNavigationRedirect('CheckoutPage')
-			return
-		}
-		if (route && !route?.params?.isFromCheckout) {
-			onNavigationRedirect('BottomTab')
-		}
-
-	}
-
-	const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
-		(address: any, i: number, self: any) =>
-			i === self.findIndex((obj: any) => (
-				address.address === obj.address &&
-				address.address_notes === obj.address_notes &&
-				address.zipcode === obj.zipcode &&
-				address.internal_number === obj.internal_number
-			)))) || []
-
-	const checkAddress = (address: any) => {
-		if (!orderState?.options?.address) return true
-		const props = ['address', 'address_notes', 'zipcode', 'location', 'internal_number']
-		const values: any = []
-		props.forEach(prop => {
-			if (address[prop]) {
-				if (prop === 'location') {
-					values.push(address[prop].lat === orderState?.options?.address[prop]?.lat &&
-						address[prop].lng === orderState?.options?.address[prop]?.lng)
-				} else {
-					values.push(address[prop] === orderState?.options?.address[prop])
-				}
-			} else {
-				values.push(orderState?.options?.address[prop] === null || orderState?.options?.address[prop] === '')
-			}
-		})
-		return values.every((value: any) => value)
-	}
-
-	const addressIcon = (tag: string) => {
-		switch (tag) {
-			case 'other':
-				return theme.images.general.tag_other
-			case 'office':
-				return theme.images.general.tag_office
-			case 'home':
-				return theme.images.general.tag_home
-			case 'favorite':
-				return theme.images.general.tag_favorite
-			default:
-				return theme.images.general.tag_other
-		}
-	}
-
-	const handleSetAddress = (address: any) => {
-		if (address.id === orderState?.options?.address_id) return
-		handleSetDefault(address)
-	}
-
-	const handleSaveAddress = (address: any) => {
-		let found = false
-		const addresses = addressList.addresses.map((_address: any) => {
-			if (_address?.id === address?.id) {
-				Object.assign(_address, address)
-				found = true
-			} else if (address.default) {
-				_address.default = false
-			}
-			return _address
-		})
-		if (!found) {
-			addresses.push(address)
-		}
-		setAddressList({
-			...addressList,
-			addresses
-		})
-	}
-
-	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
-
-	useEffect(() => {
-		if (orderState.loading && auth && orderState.options.address?.location) {
-			onNavigatorRedirect()
-		}
-	}, [orderState.options.address])
-
-	return (
-		<Container>
-			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile)) && (
-				<AddressListContainer>
-					{isFromProfile && (
-						<OText size={16} lineHeight={21} weight={Platform.OS == 'ios' ? '600' : 'bold'} mBottom={12}>{t('SAVED_PLACES', 'My saved places')}</OText>
-					)}
-					{
-						route &&
-						(
-							route?.params?.isFromBusinesses ||
-							route?.params?.isFromCheckout ||
-							route?.params?.isFromProductsList
-						) &&
-						!isFromProfile &&
-						(
-							<NavBar
-								title={t('ADDRESS_LIST', 'Address List')}
-								titleAlign={'center'}
-								onActionLeft={() => goToBack()}
-								rightImg={null}
-								btnStyle={{ paddingLeft: 0 }}
-								paddingTop={0}
-								style={{ marginHorizontal: -40 }}
-							/>
-						)}
-					{addressList.loading && (
-						<>
-							{[...Array(5)].map((item, i) => (
-								<Placeholder key={i} style={{ padding: 20 }} Animation={Fade}>
-									<View style={{ flexDirection: 'row' }}>
-										<PlaceholderLine width={20} height={60} style={{ marginBottom: 0, marginRight: 15 }} />
-										<Placeholder>
-											<PlaceholderLine width={70} />
-											<PlaceholderLine width={40} />
-											<PlaceholderLine width={70} />
-										</Placeholder>
-									</View>
-								</Placeholder>
-							))}
-						</>
-					)}
-					{
-						!addressList.error &&
-						addressList?.addresses?.length > 0 && (
-							<>
-								{uniqueAddressesList.map((address: any) => (
-									<AddressItem
-										key={address.id}
-										isSelected={checkAddress(address)}
-										onPress={() => handleSetAddress(address)}
-									>
-										<OIcon
-											src={addressIcon(address?.tag)}
-											width={16}
-											color={theme.colors.primary}
-											style={styles.icon}
-										/>
-										<OText style={styles.address}>{address.address}</OText>
-										<TouchableOpacity style={{ marginEnd: 7 }} onPress={() => !afterSignup ? onNavigationRedirect(
-											'AddressForm',
-											{
-												address: address,
-												isEditing: true,
-												addressesList: addressList,
-												onSaveAddress: handleSaveAddress,
-												isSelectedAfterAdd: true,
-												isFromProductsList: isFromProductsList,
-												hasAddressDefault: !!orderState.options?.address?.location,
-												isFromCheckout: isFromCheckout
-											}
-										) : onNavigationRedirect(
-											'AddressFormInitial',
-											{
-												address: address,
-												isEditing: true,
-												addressesList: addressList,
-												onSaveAddress: handleSaveAddress,
-												isSelectedAfterAdd: true,
-												isFromProductsList: isFromProductsList,
-												hasAddressDefault: !!orderState.options?.address?.location
-											})}>
-
-											<OIcon
-												src={theme.images.general.pencil}
-												width={16}
-												color={theme.colors.textPrimary}
-											/>
-										</TouchableOpacity>
-										<OAlert
-											title={t('DELETE_ADDRESS', 'Delete Address')}
-											message={t('QUESTION_DELETE_ADDRESS', 'Are you sure to you wants delete the selected address')}
-											onAccept={() => handleDelete(address)}
-											disabled={checkAddress(address)}
-										>
-											<OIcon
-												src={theme.images.general.trash}
-												width={16}
-												color={!checkAddress(address) ? theme.colors.textPrimary : theme.colors.disabled}
-											/>
-										</OAlert>
-									</AddressItem>
-								))}
-							</>
-						)}
-					{!addressList.loading && addressList.error && (
-						addressList.error.length > 0 && (
-							<NotFoundSource
-								content={
-									addressList.error[0]?.message ||
-									addressList.error[0] ||
-									t('NETWORK_ERROR', 'Network Error, please reload the app')
-								}
-							/>
-						)
-					)}
-					{!addressList.loading && !addressList.error && (
-						<>
-							{!(
-								route && (route?.params?.isFromBusinesses || route?.params?.isFromCheckout)
-							) && !isFromProfile && (
-									<OText size={24}>
-										{t('WHERE_DELIVER_NOW', 'Where do we deliver you?')}
-									</OText>
-								)}
-							<OButton
-								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
-								imgRightSrc=''
-								imgLeftSrc={''}
-								bgColor={theme.colors.white}
-								style={styles.button}
-								textStyle={{ fontSize: 14, fontWeight: Platform.OS == 'ios' ? '600' : 'bold', color: theme.colors.primary }}
-								borderColor={theme.colors.primary}
-								onClick={() => !afterSignup ? onNavigationRedirect(
-									'AddressForm',
-									{
-										address: null,
-										onSaveAddress: handleSaveAddress,
-										addressesList: addressList?.addresses,
-										nopadding: true,
-										isSelectedAfterAdd: true,
-										hasAddressDefault: !!orderState.options?.address?.location,
-										isFromCheckout: isFromCheckout
-									}) : onNavigationRedirect(
-										'AddressFormInitial',
-										{
-											address: null,
-											onSaveAddress: handleSaveAddress,
-											addressesList: addressList?.addresses,
-											nopadding: true,
-											isSelectedAfterAdd: true,
-											hasAddressDefault: !!orderState.options?.address?.location
-										})}
-							/>
-						</>
-					)}
-					{!isFromProfile && addressList?.addresses?.length > 0 && (
-						<OButton
-							text={t('CONTINUE', 'Continue')}
-							style={styles.button}
-							onClick={() => onNavigatorRedirect()}
-							textStyle={{ color: theme.colors.white }}
-						/>
-					)}
-				</AddressListContainer>
-			)}
-		</Container>
-	)
-}
-
-const styles = StyleSheet.create({
-	address: {
-		flex: 1,
-		marginEnd: 10,
-		fontSize: 12,
-		lineHeight: 18,
-	},
-	icon: {
-		marginEnd: 24
-	},
-	buttonIcon: {
-		width: 20,
-		height: 20,
-		resizeMode: 'contain',
-		left: 20,
-		position: 'absolute',
-	},
-	button: {
-		marginVertical: 30,
-		height: 40,
-		borderWidth: 1,
-		shadowOpacity: 0
-	}
-})
-
-export const AddressList = (props: AddressListParams) => {
-	const addressListProps = {
-		...props,
-		UIComponent: AddressListUI
-	}
-	return <AddressListController {...addressListProps} />
-}
+import React, { useEffect, useState } from 'react'
+import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
+import { AddressListContainer, AddressItem } from './styles'
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { useTheme } from 'styled-components/native'
+import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
+import { Container } from '../../layouts/Container'
+import { AddressFormParams, AddressListParams } from '../../types'
+import { NotFoundSource } from '../NotFoundSource'
+import NavBar from '../NavBar'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+
+const AddressListUI = (props: AddressListParams) => {
+
+	const {
+		navigation,
+		route,
+		addressList,
+		isFromProfile,
+		nopadding,
+		handleSetDefault,
+		handleDelete,
+		setAddressList,
+		isGoBack,
+		actionStatus,
+		isFromBusinesses,
+		isFromProductsList,
+		afterSignup,
+		isFromCheckout
+	} = props
+
+	const theme = useTheme();
+
+
+	const [orderState] = useOrder()
+	const [, t] = useLanguage()
+	const [{ auth }] = useSession()
+
+	const onNavigatorRedirect = () => {
+		if (route && (isFromBusinesses || isGoBack)) {
+			isGoBack ? goToBack() : onNavigationRedirect('BottomTab')
+			return
+		}
+		if (route && route?.params?.isFromCheckout) {
+			onNavigationRedirect('CheckoutPage')
+			return
+		}
+		if (route && !route?.params?.isFromCheckout) {
+			onNavigationRedirect('BottomTab')
+		}
+
+	}
+
+	const uniqueAddressesList = (addressList.addresses && addressList.addresses.filter(
+		(address: any, i: number, self: any) =>
+			i === self.findIndex((obj: any) => (
+				address.address === obj.address &&
+				address.address_notes === obj.address_notes &&
+				address.zipcode === obj.zipcode &&
+				address.internal_number === obj.internal_number
+			)))) || []
+
+	const checkAddress = (address: any) => {
+		if (!orderState?.options?.address) return true
+		const props = ['address', 'address_notes', 'zipcode', 'location', 'internal_number']
+		const values: any = []
+		props.forEach(prop => {
+			if (address[prop]) {
+				if (prop === 'location') {
+					values.push(address[prop].lat === orderState?.options?.address[prop]?.lat &&
+						address[prop].lng === orderState?.options?.address[prop]?.lng)
+				} else {
+					values.push(address[prop] === orderState?.options?.address[prop])
+				}
+			} else {
+				values.push(orderState?.options?.address[prop] === null || orderState?.options?.address[prop] === '')
+			}
+		})
+		return values.every((value: any) => value)
+	}
+
+	const addressIcon = (tag: string) => {
+		switch (tag) {
+			case 'other':
+				return theme.images.general.tag_other
+			case 'office':
+				return theme.images.general.tag_office
+			case 'home':
+				return theme.images.general.tag_home
+			case 'favorite':
+				return theme.images.general.tag_favorite
+			default:
+				return theme.images.general.tag_other
+		}
+	}
+
+	const handleSetAddress = (address: any) => {
+		if (address.id === orderState?.options?.address_id) return
+		handleSetDefault(address)
+	}
+
+	const handleSaveAddress = (address: any) => {
+		let found = false
+		const addresses = addressList.addresses.map((_address: any) => {
+			if (_address?.id === address?.id) {
+				Object.assign(_address, address)
+				found = true
+			} else if (address.default) {
+				_address.default = false
+			}
+			return _address
+		})
+		if (!found) {
+			addresses.push(address)
+		}
+		setAddressList({
+			...addressList,
+			addresses
+		})
+	}
+
+	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
+	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
+
+	useEffect(() => {
+		if (orderState.loading && auth && orderState.options.address?.location) {
+			onNavigatorRedirect()
+		}
+	}, [orderState.options.address])
+
+	return (
+		<Container>
+			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile)) && (
+				<AddressListContainer>
+					{isFromProfile && (
+						<OText size={16} lineHeight={21} weight={Platform.OS == 'ios' ? '600' : 'bold'} mBottom={12}>{t('SAVED_PLACES', 'My saved places')}</OText>
+					)}
+					{
+						route &&
+						(
+							route?.params?.isFromBusinesses ||
+							route?.params?.isFromCheckout ||
+							route?.params?.isFromProductsList
+						) &&
+						!isFromProfile &&
+						(
+							<NavBar
+								title={t('ADDRESS_LIST', 'Address List')}
+								titleAlign={'center'}
+								onActionLeft={() => goToBack()}
+								rightImg={null}
+								btnStyle={{ paddingLeft: 0 }}
+								paddingTop={0}
+								style={{ marginHorizontal: -40 }}
+							/>
+						)}
+					{addressList.loading && (
+						<>
+							{[...Array(5)].map((item, i) => (
+								<Placeholder key={i} style={{ padding: 20 }} Animation={Fade}>
+									<View style={{ flexDirection: 'row' }}>
+										<PlaceholderLine width={20} height={60} style={{ marginBottom: 0, marginRight: 15 }} />
+										<Placeholder>
+											<PlaceholderLine width={70} />
+											<PlaceholderLine width={40} />
+											<PlaceholderLine width={70} />
+										</Placeholder>
+									</View>
+								</Placeholder>
+							))}
+						</>
+					)}
+					{
+						!addressList.error &&
+						addressList?.addresses?.length > 0 && (
+							<>
+								{uniqueAddressesList.map((address: any) => (
+									<AddressItem
+										key={address.id}
+										isSelected={checkAddress(address)}
+										onPress={() => handleSetAddress(address)}
+									>
+										<OIcon
+											src={addressIcon(address?.tag)}
+											width={16}
+											color={theme.colors.primary}
+											style={styles.icon}
+										/>
+										<OText style={styles.address}>{address.address}</OText>
+										<TouchableOpacity style={{ marginEnd: 7 }} onPress={() => !afterSignup ? onNavigationRedirect(
+											'AddressForm',
+											{
+												address: address,
+												isEditing: true,
+												addressesList: addressList,
+												onSaveAddress: handleSaveAddress,
+												isSelectedAfterAdd: true,
+												isFromProductsList: isFromProductsList,
+												hasAddressDefault: !!orderState.options?.address?.location,
+												isFromCheckout: isFromCheckout
+											}
+										) : onNavigationRedirect(
+											'AddressFormInitial',
+											{
+												address: address,
+												isEditing: true,
+												addressesList: addressList,
+												onSaveAddress: handleSaveAddress,
+												isSelectedAfterAdd: true,
+												isFromProductsList: isFromProductsList,
+												hasAddressDefault: !!orderState.options?.address?.location
+											})}>
+
+											<OIcon
+												src={theme.images.general.pencil}
+												width={16}
+												color={theme.colors.textPrimary}
+											/>
+										</TouchableOpacity>
+										<OAlert
+											title={t('DELETE_ADDRESS', 'Delete Address')}
+											message={t('QUESTION_DELETE_ADDRESS', 'Are you sure to you wants delete the selected address')}
+											onAccept={() => handleDelete(address)}
+											disabled={checkAddress(address)}
+										>
+											<OIcon
+												src={theme.images.general.trash}
+												width={16}
+												color={!checkAddress(address) ? theme.colors.textPrimary : theme.colors.disabled}
+											/>
+										</OAlert>
+									</AddressItem>
+								))}
+							</>
+						)}
+					{!addressList.loading && addressList.error && (
+						addressList.error.length > 0 && (
+							<NotFoundSource
+								content={
+									addressList.error[0]?.message ||
+									addressList.error[0] ||
+									t('NETWORK_ERROR', 'Network Error, please reload the app')
+								}
+							/>
+						)
+					)}
+					{!addressList.loading && !addressList.error && (
+						<>
+							{!(
+								route && (route?.params?.isFromBusinesses || route?.params?.isFromCheckout)
+							) && !isFromProfile && (
+									<OText size={24}>
+										{t('WHERE_DELIVER_NOW', 'Where do we deliver you?')}
+									</OText>
+								)}
+							<OButton
+								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
+								imgRightSrc=''
+								imgLeftSrc={''}
+								bgColor={theme.colors.white}
+								style={styles.button}
+								textStyle={{ fontSize: 14, fontWeight: Platform.OS == 'ios' ? '600' : 'bold', color: theme.colors.primary }}
+								borderColor={theme.colors.primary}
+								onClick={() => !afterSignup ? onNavigationRedirect(
+									'AddressForm',
+									{
+										address: null,
+										onSaveAddress: handleSaveAddress,
+										addressesList: addressList?.addresses,
+										nopadding: true,
+										isSelectedAfterAdd: true,
+										hasAddressDefault: !!orderState.options?.address?.location,
+										isFromCheckout: isFromCheckout
+									}) : onNavigationRedirect(
+										'AddressFormInitial',
+										{
+											address: null,
+											onSaveAddress: handleSaveAddress,
+											addressesList: addressList?.addresses,
+											nopadding: true,
+											isSelectedAfterAdd: true,
+											hasAddressDefault: !!orderState.options?.address?.location
+										})}
+							/>
+						</>
+					)}
+					{!isFromProfile && addressList?.addresses?.length > 0 && (
+						<OButton
+							text={t('CONTINUE', 'Continue')}
+							style={styles.button}
+							onClick={() => onNavigatorRedirect()}
+							textStyle={{ color: theme.colors.white }}
+						/>
+					)}
+				</AddressListContainer>
+			)}
+		</Container>
+	)
+}
+
+const styles = StyleSheet.create({
+	address: {
+		flex: 1,
+		marginEnd: 10,
+		fontSize: 12,
+		lineHeight: 18,
+	},
+	icon: {
+		marginEnd: 24
+	},
+	buttonIcon: {
+		width: 20,
+		height: 20,
+		resizeMode: 'contain',
+		left: 20,
+		position: 'absolute',
+	},
+	button: {
+		marginVertical: 30,
+		height: 40,
+		borderWidth: 1,
+		shadowOpacity: 0
+	}
+})
+
+export const AddressList = (props: AddressListParams) => {
+	const addressListProps = {
+		...props,
+		UIComponent: AddressListUI
+	}
+	return <AddressListController {...addressListProps} />
+}