ordering-ui-react-native 0.15.56 → 0.15.58-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

@@ -109,8 +109,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 +156,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 +203,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 						saveAddress(data.address);
 						if (isGuestUser) {
 							continueAsGuest();
+							return;
 						}
 						if (!isGuestUser && !auth) {
 							!isFromProductsList
@@ -510,7 +511,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 					onActionLeft={goToBack}
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
-					style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+					style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginRight: 0, marginLeft: 0 }}
 				/>
@@ -600,13 +601,13 @@ const AddressFormUI = (props: AddressFormParams) => {
 								/>
 								{hasEditing ? (
 									<View style={styles.pinIcon}>
-										<GPSButton 
+										<GPSButton
 											apiKey={googleMapsApiKey}
 											handleGPS={(data: any, detail: any) => {
 												handleChangeAddress(data, detail);
 												setValue(data.address);
 												if (googleInput?.current) {
-													googleInput?.current?.setAddressText( data.address );
+													googleInput?.current?.setAddressText(data.address);
 												}
 											}}
 											IconButton={<OIcon src={theme.images.general.pin} width={16} />}

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

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { AddressList as AddressListController, useLanguage, useOrder, useSession } from 'ordering-components/native'
 import { AddressListContainer, AddressItem } from './styles'
-import { Platform, StyleSheet, View } from 'react-native'
+import { Platform, RefreshControl, StyleSheet, View } from 'react-native'
 import { OButton, OText, OAlert, OModal, OIcon } from '../shared'
 import { Container } from '../../layouts/Container'
 import { AddressListParams } from '../../types'
@@ -27,7 +27,8 @@ const AddressListUI = (props: AddressListParams) => {
 		actionStatus,
 		isFromBusinesses,
 		isFromProductsList,
-		afterSignup
+		afterSignup,
+		loadAddresses
 	} = props
 
 	const theme = useTheme();
@@ -35,6 +36,7 @@ const AddressListUI = (props: AddressListParams) => {
 	const [orderState] = useOrder()
 	const [, t] = useLanguage()
 	const [{ auth }] = useSession()
+	const [refreshing] = useState(false);
 
 	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
 
@@ -121,6 +123,12 @@ const AddressListUI = (props: AddressListParams) => {
 		})
 	}
 
+	const handleOnRefresh = () => {
+		if (!addressList.loading) {
+			loadAddresses();
+		}
+	}
+
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 	const onNavigationRedirect = (route: string, params?: any) => navigation.navigate(route, params)
 
@@ -135,22 +143,26 @@ const AddressListUI = (props: AddressListParams) => {
 	}, [])
 
 	return (
-		<Container noPadding>
+		<Container 
+			noPadding
+			refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+		>
+			{isProfile && (
+				<NavBar
+					title={t('SAVED_PLACES', 'My saved places')}
+					titleAlign={'center'}
+					onActionLeft={goToBack}
+					showCall={false}
+					style={{ paddingHorizontal: 40, paddingVertical: Platform.OS === 'ios' ? 0 : 20, marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+				/>
+			)}
 			{(!addressList.loading || (isFromProductsList || isFromBusinesses || isFromProfile || isProfile)) && (
 				<AddressListContainer>
-					{isProfile && (
-						<NavBar
-							title={t('MY_SAVED_PLACES', 'My saved places')}
-							titleAlign={'center'}
-							onActionLeft={() => goToBack()}
-							showCall={false}
-							btnStyle={{ paddingLeft: 0 }}
-							paddingTop={0}
-							isVertical
-							titleWrapStyle={{ paddingHorizontal: 0 }}
-							titleStyle={{ marginLeft: 0, marginRight: 0 }}
-						/>
-					)}
 					{
 						route &&
 						(
@@ -167,12 +179,12 @@ const AddressListUI = (props: AddressListParams) => {
 								showCall={false}
 								btnStyle={{ paddingLeft: 0 }}
 								paddingTop={0}
-								style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+								style={{ marginTop: Platform.OS === 'ios' ? 0 : 40 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>
 						)}
-					{addressList.loading && (
+					{addressList.loading && addressList?.addresses?.length === 0 && (
 						<>
 							{[...Array(5)].map((item, i) => (
 								<Placeholder key={i} style={{ paddingVertical: 20 }} Animation={Fade}>

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, Text, StyleSheet } from 'react-native';
-import { useApi, useSession, useLanguage, useConfig, useToast, ToastType } from 'ordering-components/native';
+import { useApi, useSession, useLanguage, useConfig } from 'ordering-components/native';
 import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
 import uuid from 'react-native-uuid';
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -19,14 +19,13 @@ export const AppleLogin = (props: any) => {
   const [{ auth }] = useSession();
   const [, t] = useLanguage();
   const [{ configs }] = useConfig();
-  const [, {showToast}] = useToast()
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
-    : t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
+    : t('CONTINUE_WITH_APPLE', 'Continue with Apple');
 
   const performAppleLogin = async (code: string) => {
     try {
@@ -34,7 +33,8 @@ export const AppleLogin = (props: any) => {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          code: code
+          code: code,
+          platform: Platform.OS === 'ios' ? 'ios' : 'other'
         })
       })
       const { result, error } = await response.json()
@@ -44,7 +44,7 @@ export const AppleLogin = (props: any) => {
           handleLoading && handleLoading(false)
         }
       } else {
-        showToast(ToastType.Error, `Error login on apple from api Code: ${code}`, 10000)
+        handleErrors && handleErrors(result)
         handleLoading && handleLoading(false)
       }
     } catch (err: any) {
@@ -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 =>
@@ -87,7 +87,6 @@ export const AppleLogin = (props: any) => {
       );
 
       if (identityToken && authorizationCode) {
-        showToast(ToastType.Success, `Apple Authentication Completed, ${email}`)
         performAppleLogin(authorizationCode)
       } else {
         handleErrors && handleErrors('UNABLE_LOGIN_TOKEN', 'Unable to login, no token found')
@@ -157,9 +156,6 @@ export const AppleLogin = (props: any) => {
 
   return (
     <Container>
-      {credentialStateForUser !== -1 && (
-        <Text>{credentialStateForUser}</Text>
-      )}
       {canShowButton() &&
         <AppleButton
           onPress={() => Platform.OS == 'android' ? onAndroidButtonPress() : onIOSButtonPress(updateCredentialStateForUser)}

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
+import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -21,7 +22,8 @@ import {
 	WrapReviews,
 	WrapBusinessInfo,
 	TitleWrapper,
-	RibbonBox
+	RibbonBox,
+	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -44,6 +46,65 @@ export const BusinessBasicInformation = (
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
 
+	const styles = StyleSheet.create({
+		businesInfoheaderStyle: {
+			height: 150,
+		},
+		headerStyle: {
+			height: 260,
+		},
+		businessLogo: {
+			width: 72,
+			height: 72,
+			borderRadius: 7.6,
+			justifyContent: 'flex-start',
+			alignItems: 'flex-start',
+		},
+		businessInfo: {
+			paddingHorizontal: 40,
+			paddingTop: 56,
+		},
+		bullet: {
+			flexDirection: 'row',
+			alignItems: 'center',
+		},
+		metadata: {
+			marginRight: 2,
+		},
+		starIcon: {
+			marginHorizontal: 5,
+		},
+		reviewStyle: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'center'
+		},
+		modalTitleSectionStyle: {
+			position: 'absolute',
+			width: '100%',
+			top: 0,
+			zIndex: 100,
+			left: 40
+		},
+		socialIcon: {
+			borderRadius: 3,
+			borderColor: theme.colors.border,
+			borderWidth: 1,
+			width: 20,
+			height: 20,
+			justifyContent: 'center',
+			alignItems: 'center',
+			marginRight: 5,
+			marginBottom: 7
+		},
+		tiktokIcon: {
+			height: 12,
+			width: 12,
+			margin: 0,
+			padding: 0
+		}
+	});
+
 	const handleClickBusinessInformation = () => {
 		if (!businessInformationObtained) {
 			BusinessInformation = require('../BusinessInformation').BusinessInformation
@@ -73,6 +134,19 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+	const SocialNetWork = (props: any) => {
+		const { socialLink, iconTitle} = props
+
+		return (
+			<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(socialLink)}>
+				<MaterialComIcon
+					name={iconTitle}
+					color={theme.colors.textNormal}
+					size={14}
+				/>
+			</TouchableOpacity>
+		)
+	}
 
 	useEffect(() => {
 		if (businessState?.loading) return
@@ -177,6 +251,65 @@ export const BusinessBasicInformation = (
 						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
 					</View>
 				)}
+				{loading ? (
+					<Placeholder Animation={Fade}>
+						<View style={{ flexDirection: 'row' }}>
+							{[...Array(5).keys()].map(i => (
+								<View style={styles.socialIcon} key={i}>
+									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
+								</View>
+							))}
+						</View>
+					</Placeholder>
+				) : (
+					<SocialListWrapper
+						showsVerticalScrollIndicator={false}
+						showsHorizontalScrollIndicator={false}
+						horizontal
+						contentContainerStyle={{ flex: 1}}
+					>
+						{!!business?.facebook_profile && (
+							<SocialNetWork
+								socialLink={business?.facebook_profile}
+								iconTitle='facebook'
+							/>
+						)}
+						{!!business?.instagram_profile && (
+							<SocialNetWork
+								socialLink={business?.instagram_profile}
+								iconTitle='instagram'
+							/>
+						)}
+						{!!business?.tiktok_profile && (
+							<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+								<View style={styles.tiktokIcon}>
+									<OIcon
+										src={theme.images.general.tiktok}
+										style={{ width: '100%', height: '100%'}}
+									/>
+								</View>
+							</TouchableOpacity>
+						)}
+						{!!business?.pinterest_profile && (
+							<SocialNetWork
+								socialLink={business?.pinterest_profile}
+								iconTitle='pinterest'
+							/>
+						)}
+						{!!business?.whatsapp_number && (
+							<SocialNetWork
+								socialLink={business?.whatsapp_number}
+								iconTitle='whatsapp'
+							/>
+						)}
+						{!!business?.snapchat_profile && (
+							<SocialNetWork
+								socialLink={business?.snapchat_profile}
+								iconTitle='snapchat'
+							/>
+						)}
+					</SocialListWrapper>
+				)}
 				<View>
 					<BusinessInfoItem>
 						{loading && (
@@ -276,45 +409,3 @@ export const BusinessBasicInformation = (
 		</BusinessContainer>
 	);
 };
-
-const styles = StyleSheet.create({
-	businesInfoheaderStyle: {
-		height: 150,
-	},
-	headerStyle: {
-		height: 260,
-	},
-	businessLogo: {
-		width: 72,
-		height: 72,
-		borderRadius: 7.6,
-		justifyContent: 'flex-start',
-		alignItems: 'flex-start',
-	},
-	businessInfo: {
-		paddingHorizontal: 40,
-		paddingTop: 56,
-	},
-	bullet: {
-		flexDirection: 'row',
-		alignItems: 'center',
-	},
-	metadata: {
-		marginRight: 2,
-	},
-	starIcon: {
-		marginHorizontal: 5,
-	},
-	reviewStyle: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	modalTitleSectionStyle: {
-		position: 'absolute',
-		width: '100%',
-		top: 0,
-		zIndex: 100,
-		left: 40
-	},
-});

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

@@ -68,3 +68,7 @@ export const RibbonBox = styled.View`
     border-radius: 50px;
   `}
 `
+
+export const SocialListWrapper = styled.ScrollView`
+  flex-direction: row;
+`