ordering-ui-react-native 0.15.38 → 0.15.40-release

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 { 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}>
@@ -261,6 +273,32 @@ const AddressListUI = (props: AddressListParams) => {
 					)}
 					{!addressList.loading && !addressList.error && (
 						<>
+							{addressList?.addresses?.length === 0 && (
+								<View
+									style={{
+										flexDirection: 'column',
+										paddingHorizontal: 10,
+										paddingTop: 20
+									}}
+								>
+									<OText
+										size={24}
+										lineHeight={36}
+										weight={Platform.OS === 'ios' ? '600' : 'bold'}
+										style={{
+											textAlign: 'center',
+											marginRight: 40,
+											color: theme.colors.textNormal,
+											paddingHorizontal: 0,
+											width: '100%',
+											marginLeft: 0
+										}}
+									>
+										{t('ADDRESS_LIST', 'Address List')}
+									</OText>
+								</View>
+							)}
+
 							<OButton
 								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
 								imgRightSrc=''

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

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Platform, Text, StyleSheet } from 'react-native';
-import { useApi, useSession, useLanguage } 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';
@@ -16,12 +16,16 @@ export const AppleLogin = (props: any) => {
   } = props
 
   const [ordering] = useApi();
-	const [{ auth }] = useSession();
-	const [, t] = useLanguage();
+  const [{ auth }] = useSession();
+  const [, t] = useLanguage();
+  const [{ configs }] = useConfig();
+  const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-	const buttonText = auth
-		? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
-		: t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
+  let user: any = null
+
+  const buttonText = auth
+    ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
+    : t('CONTINUE_WITH_APPLE', 'Continue with Apple');
 
   const performAppleLogin = async (code: string) => {
     try {
@@ -29,17 +33,19 @@ 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'
         })
       })
-      if (!response.content.error) {
+      const { result, error } = await response.json()
+      if (!error) {
         if (handleSuccessAppleLogin) {
-          handleSuccessAppleLogin(response.content.result)
+          handleSuccessAppleLogin(result)
           handleLoading && handleLoading(false)
         }
       } else {
+        handleErrors && handleErrors(result)
         handleLoading && handleLoading(false)
-        logoutFromApple()
       }
     } catch (err: any) {
       handleLoading && handleLoading(false)
@@ -47,66 +53,98 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const logoutFromApple = () => {
-
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
+    if (user === null) {
+      updateCredentialStateForUser('N/A');
+    } else {
+      const credentialState = await appleAuth.getCredentialStateForUser(user);
+      if (credentialState === appleAuth.State.AUTHORIZED) {
+        updateCredentialStateForUser('AUTHORIZED');
+      } else {
+        updateCredentialStateForUser(credentialState);
+      }
+    }
   }
 
-  const onIOSButtonPress = async () => {
-    
-    const appleAuthRequestResponse = await appleAuth.performRequest({
-      requestedOperation: appleAuth.Operation.LOGIN,
-      requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
-    });
-  
-    // get current authentication state for user
-    // /!\ This method must be tested on a real device. On the iOS simulator it always throws an error.
-    const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);
-  
-    // use credentialState response to ensure the user is authenticated
-    if (credentialState === appleAuth.State.AUTHORIZED) {
-      // user is authenticated
-      if (appleAuthRequestResponse.authorizationCode) {
-        performAppleLogin(appleAuthRequestResponse.authorizationCode)
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
+    try {
+      const appleAuthRequestResponse = await appleAuth.performRequest({
+        requestedOperation: appleAuth.Operation.LOGIN,
+        requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
+      });
+
+      const {
+        user: newUser,
+        email,
+        identityToken,
+        authorizationCode
+      } = appleAuthRequestResponse;
+
+      user = newUser;
+
+      fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>
+        updateCredentialStateForUser(`Error: ${error.code}`),
+      );
+
+      if (identityToken && authorizationCode) {
+        performAppleLogin(authorizationCode)
+      } else {
+        handleErrors && handleErrors('UNABLE_LOGIN_TOKEN', 'Unable to login, no token found')
       }
-    }
 
+    } catch (err: any) {
+      handleLoading && handleLoading(false)
+      handleErrors && handleErrors(err.message)
+    }
   }
 
   const onAndroidButtonPress = async () => {
-    // Generate secure, random values for state and nonce
-    const rawNonce: any = uuid.v4();
-    const state: any = uuid.v4();
-
-    // Configure the request
-    appleAuthAndroid.configure({
-      clientId: 'com.example.client-android',
-      // Return URL added to your Apple dev console. We intercept this redirect, but it must still match
-      // the URL you provided to Apple. It can be an empty route on your backend as it's never called.
-      redirectUri: 'https://example.com/auth/callback',
-      responseType: appleAuthAndroid.ResponseType.ALL,
-      scope: appleAuthAndroid.Scope.ALL,
-      // Random nonce value that will be SHA256 hashed before sending to Apple.
-      nonce: rawNonce,
-      state,
-    });
-
-    // Open the browser window for user sign in
-    const response = await appleAuthAndroid.signIn();
-
     try {
+      // Generate secure, random values for state and nonce
+      const rawNonce: any = uuid.v4();
+      const state: any = uuid.v4();
+
+      // Configure the request
+      appleAuthAndroid.configure({
+        // The Service ID you registered with Apple
+        clientId: configs?.apple_login_client_id?.value,
+        // Return URL added to your Apple dev console. We intercept this redirect, but it must still match
+        // the URL you provided to Apple. It can be an empty route on your backend as it's never called.
+        redirectUri: 'https://example.com/auth/callback',
+        responseType: appleAuthAndroid.ResponseType.ALL,
+        scope: appleAuthAndroid.Scope.ALL,
+        // Random nonce value that will be SHA256 hashed before sending to Apple.
+        nonce: rawNonce,
+        state,
+      });
+
+      // Open the browser window for user sign in
+      const response = await appleAuthAndroid.signIn();
       if (response.code) {
         performAppleLogin(response.code)
       }
     } catch (err: any) {
-
+      handleLoading && handleLoading(false)
+      handleErrors && handleErrors(err.message)
     }
+
   }
 
   useEffect(() => {
-    if (Platform.OS == 'android') return;
-    // onCredentialRevoked returns a function that will remove the event listener. useEffect will call this function when the component unmounts
+    if (!appleAuth.isSupported || Platform.OS === 'android') return;
+
+    fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>
+      updateCredentialStateForUser(`Error: ${error.code}`),
+    );
+  }, []);
+
+  useEffect(() => {
+    if (!appleAuth.isSupported || Platform.OS === 'android') return;
+
     return appleAuth.onCredentialRevoked(async () => {
-      console.warn('If this function executes, User Credentials have been Revoked');
+      fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>
+        updateCredentialStateForUser(`Error: ${error.code}`),
+      );
     });
   }, []);
 
@@ -115,35 +153,36 @@ export const AppleLogin = (props: any) => {
     if (Platform.OS === 'android') return appleAuthAndroid.isSupported;
     return false;
   }
+
   return (
     <Container>
-      {canShowButton() && 
-				<AppleButton
-					onPress={() => Platform.OS == 'android' ? onAndroidButtonPress() : onIOSButtonPress()}
-				>
-					<Icon
-						name="apple"
-						size={20}
-						color={'black'}
-						style={style.fbBtn}
-					/>
-					<Text style={style.textBtn}>
-						{buttonText}
-					</Text>
-				</AppleButton>
+      {canShowButton() &&
+        <AppleButton
+          onPress={() => Platform.OS == 'android' ? onAndroidButtonPress() : onIOSButtonPress(updateCredentialStateForUser)}
+        >
+          <Icon
+            name="apple"
+            size={20}
+            color={'black'}
+            style={style.fbBtn}
+          />
+          <Text style={style.textBtn}>
+            {buttonText}
+          </Text>
+        </AppleButton>
       }
     </Container>
   );
 }
 
 const style = StyleSheet.create({
-	fbBtn: {
-		position: 'absolute',
-		left: 0,
-		marginHorizontal: 16
-	},
-	textBtn: {
-		fontSize: 14,
-		color: '#000000'
-	}
-})
+  fbBtn: {
+    position: 'absolute',
+    left: 0,
+    marginHorizontal: 16
+  },
+  textBtn: {
+    fontSize: 14,
+    color: '#000000'
+  }
+})

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

@@ -4,9 +4,7 @@ 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 { BusinessInformation } from '../BusinessInformation';
-import { BusinessReviews } from '../BusinessReviews';
+import { convertHoursToMinutes, shape } from '../../utils';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -22,10 +20,15 @@ import {
 	BusinessInfoItem,
 	WrapReviews,
 	WrapBusinessInfo,
+	TitleWrapper,
+	RibbonBox
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
 
+let BusinessInformation: null | React.ElementType = null
+let BusinessReviews: null | React.ElementType = null
+
 export const BusinessBasicInformation = (
 	props: BusinessBasicInformationParams,
 ) => {
@@ -38,6 +41,25 @@ export const BusinessBasicInformation = (
 	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
 	const [openBusinessInformation, setOpenBusinessInformation] = useState(false);
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
+	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
+	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
+
+	const handleClickBusinessInformation = () => {
+		if (!businessInformationObtained) {
+			BusinessInformation = require('../BusinessInformation').BusinessInformation
+			setBusinessInformationObtained(true)
+		}
+		setOpenBusinessInformation(true)
+	}
+
+	const handleClickBusinessReviews = () => {
+		if (!businessReviewsObtained) {
+			BusinessReviews = require('../BusinessReviews').BusinessReviews
+			setBusinessReviewsObtainedbtained(true)
+		}
+		setOpenBusinessReviews(true)
+	}
+
 	const getBusinessType = () => {
 		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
 		const _types: any = [];
@@ -51,7 +73,7 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
-	
+
 	useEffect(() => {
 		if (businessState?.loading) return
 		let timeout: any = null
@@ -65,16 +87,16 @@ export const BusinessBasicInformation = (
 			})
 		}
 		if (lapse) {
-		  const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
-		  const timeToClose = (to.unix() - currentDate.unix()) * 1000
-		  timeout = setTimeout(() => {
-			navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
-		  }, timeToClose)
+			const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+			const timeToClose = (to.unix() - currentDate.unix()) * 1000
+			timeout = setTimeout(() => {
+				navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
+			}, timeToClose)
 		}
 		return () => {
-		  timeout && clearTimeout(timeout)
+			timeout && clearTimeout(timeout)
 		}
-	  }, [businessState?.business])
+	}, [businessState?.business])
 
 	return (
 		<BusinessContainer>
@@ -90,7 +112,7 @@ export const BusinessBasicInformation = (
 						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
 				}}>
 				{!isBusinessInfoShow && (
-					<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
+					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
 						<OIcon src={theme.images.general.info} width={24} />
 					</WrapBusinessInfo>
 				)}
@@ -121,9 +143,29 @@ export const BusinessBasicInformation = (
 							<PlaceholderLine height={30} width={20} />
 						</Placeholder>
 					) : (
-						<OText size={24} weight={'600'}>
-							{business?.name}
-						</OText>
+						<TitleWrapper>
+							<OText size={24} weight={'600'}>
+								{business?.name}
+							</OText>
+							{business?.ribbon?.enabled && (
+								<RibbonBox
+									bgColor={business?.ribbon?.color}
+									isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+									isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+								>
+									<OText
+										size={10}
+										weight={'400'}
+										color={theme.colors.white}
+										numberOfLines={2}
+										ellipsizeMode='tail'
+										lineHeight={13}
+									>
+										{business?.ribbon?.text}
+									</OText>
+								</RibbonBox>
+							)}
+						</TitleWrapper>
 					)}
 				</BusinessInfoItem>
 				{loading ? (
@@ -181,17 +223,17 @@ export const BusinessBasicInformation = (
 				<WrapReviews>
 					{!isBusinessInfoShow && (
 						<>
-							{ isPreOrder && (
+							{isPreOrder && (
 								<>
-								<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-									<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-										{t('PRE_ORDER', 'Preorder')}
-									</OText>
-								</TouchableOpacity>
-								<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+									<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+										<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+											{t('PRE_ORDER', 'Preorder')}
+										</OText>
+									</TouchableOpacity>
+									<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 								</>
 							)}
-							<TouchableOpacity onPress={() => setOpenBusinessReviews(true)}>
+							<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
 								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
 									{t('REVIEWS', 'Reviews')}
 								</OText>
@@ -200,28 +242,37 @@ export const BusinessBasicInformation = (
 					)}
 				</WrapReviews>
 			</BusinessInfo>
-			<OModal
-				titleSectionStyle={styles.modalTitleSectionStyle}
-				open={openBusinessInformation}
-				onClose={() => setOpenBusinessInformation(false)}
-				isNotDecoration>
-				<BusinessInformation
-					businessState={businessState}
-					business={business}
-				/>
-			</OModal>
-			<OModal
-				entireModal
-				titleSectionStyle={styles.modalTitleSectionStyle}
-				open={openBusinessReviews}
-				onClose={() => setOpenBusinessReviews(false)}
-				isNotDecoration>
-				<BusinessReviews
-					businessState={businessState}
-					businessId={business.id}
-					reviews={business.reviews?.reviews}
-				/>
-			</OModal>
+			{businessInformationObtained ? (
+				<OModal
+					titleSectionStyle={styles.modalTitleSectionStyle}
+					open={openBusinessInformation}
+					onClose={() => setOpenBusinessInformation(false)}
+					isNotDecoration>
+					{BusinessInformation && (
+						<BusinessInformation
+							businessState={businessState}
+							business={business}
+						/>
+					)}
+				</OModal>
+			) : null}
+			{businessReviewsObtained ? (
+				<OModal
+					entireModal
+					titleSectionStyle={styles.modalTitleSectionStyle}
+					open={openBusinessReviews}
+					onClose={() => setOpenBusinessReviews(false)}
+					isNotDecoration
+				>
+					{BusinessReviews && (
+						<BusinessReviews
+							businessState={businessState}
+							businessId={business.id}
+							reviews={business.reviews?.reviews}
+						/>
+					)}
+				</OModal>
+			) : null}
 		</BusinessContainer>
 	);
 };

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 import { Platform } from 'react-native';
 
 export const BusinessContainer = styled.View`
@@ -41,3 +41,30 @@ export const WrapBusinessInfo = styled.TouchableOpacity`
   top: 16px;
   end: 39px;
 `;
+
+export const TitleWrapper = styled.View`
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const RibbonBox = styled.View`
+  margin-left: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 2px 8px;
+  max-width: 180px;
+  align-self: flex-start;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`