ordering-ui-react-native 0.12.57 → 0.12.61

package/themes/franchises/src/components/AddressForm/styles.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components/native'
-
-export const AddressFormContainer = styled.View`
-    flex: 1;
-    padding: 0px 40px 20px;
-    background-color: ${(props: any) => props.theme.colors.backgroundPage};
-    justify-content: space-between;
-`
-
-export const IconsContainer = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: 20px;
-`
-
-export const AutocompleteInput = styled.View`
-  z-index: 1000;
-`
-
-export const GoogleMapContainer = styled.View`
-  flex: 1;
-`
-
-export const FormInput = styled.View`
-  display: flex;
-  flex-direction: column;
-`

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

@@ -1,338 +0,0 @@
-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 { OButton, OText, OAlert, OModal, OIcon } from '../shared'
-import { Container } from '../../layouts/Container'
-import { AddressListParams } from '../../types'
-import { NotFoundSource } from '../NotFoundSource'
-import NavBar from '../NavBar'
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
-import { TouchableRipple } from 'react-native-paper'
-import { useState } from 'react'
-import { useTheme } from 'styled-components/native';
-
-const AddressListUI = (props: AddressListParams) => {
-
-	const {
-		navigation,
-		route,
-		addressList,
-		isFromProfile,
-		nopadding,
-		handleSetDefault,
-		handleDelete,
-		setAddressList,
-		isGoBack,
-		actionStatus,
-		isFromBusinesses,
-		isFromProductsList,
-		afterSignup
-	} = props
-
-	const theme = useTheme();
-
-	const [orderState] = useOrder()
-	const [, t] = useLanguage()
-	const [{ auth }] = useSession()
-
-	const [isProfile, setIsProfile] = useState(isFromProfile || route?.params?.isFromProfile);
-
-	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_plus
-			case 'office':
-				return theme.images.general.tag_building
-			case 'home':
-				return theme.images.general.tag_home
-			case 'favorite':
-				return theme.images.general.tag_heart
-			default:
-				return theme.images.general.tag_plus
-		}
-	}
-
-	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])
-
-	useEffect(() => {
-		console.log('From profile : ' + isProfile)
-	}, [])
-
-	return (
-		<Container noPadding>
-			{(!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 }}
-						/>
-					)}
-					{
-						route &&
-						(
-							route?.params?.isFromBusinesses ||
-							route?.params?.isFromCheckout ||
-							route?.params?.isFromProductsList
-						) &&
-						!isFromProfile &&
-						(
-							<NavBar
-								title={t('ADDRESS_LIST', 'Address List')}
-								titleAlign={'center'}
-								onActionLeft={() => goToBack()}
-								showCall={false}
-								btnStyle={{ paddingLeft: 0 }}
-								paddingTop={0}
-								style={{ flexDirection: 'column', alignItems: 'flex-start' }}
-								titleWrapStyle={{ paddingHorizontal: 0 }}
-							/>
-						)}
-					{addressList.loading && (
-						<>
-							{[...Array(5)].map((item, i) => (
-								<Placeholder key={i} style={{ paddingVertical: 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)}
-										style={{ borderColor: checkAddress(address) ? theme.colors.primary : theme.colors.border }}
-									>
-										<OIcon src={addressIcon(address?.tag)} width={24} color={checkAddress(address) ? theme.colors.primary : theme.colors.disabled} style={{ marginEnd: 16 }} />
-										<OText style={styles.address} size={12}>{address.address}</OText>
-										<TouchableRipple
-											onPress={() => !afterSignup ? onNavigationRedirect(
-												'AddressForm',
-												{
-													address: address,
-													isEditing: true,
-													addressesList: addressList,
-													onSaveAddress: handleSaveAddress,
-													isSelectedAfterAdd: true,
-													isFromProductsList: isFromProductsList,
-													hasAddressDefault: !!orderState.options?.address?.location
-												}
-											) : 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} style={{ marginHorizontal: 4 }} />
-										</TouchableRipple>
-										<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={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)
-							) && !isProfile && (
-									<OText size={24}>
-										{t('WHERE_DELIVER_NOW', 'Where do we deliver you?')}
-									</OText>
-								)}
-							<OButton
-								text={t('ADD_NEW_ADDRESS', 'Add new Address')}
-								imgRightSrc=''
-								bgColor={theme.colors.white}
-								textStyle={{ color: theme.colors.primary }}
-								style={styles.button}
-								borderColor={theme.colors.primary}
-								onClick={() => !afterSignup ? onNavigationRedirect(
-									'AddressForm',
-									{
-										address: null,
-										onSaveAddress: handleSaveAddress,
-										addressesList: addressList?.addresses,
-										nopadding: true,
-										isSelectedAfterAdd: true,
-										hasAddressDefault: !!orderState.options?.address?.location
-									}) : onNavigationRedirect(
-										'AddressFormInitial',
-										{
-											address: null,
-											onSaveAddress: handleSaveAddress,
-											addressesList: addressList?.addresses,
-											nopadding: true,
-											isSelectedAfterAdd: true,
-											hasAddressDefault: !!orderState.options?.address?.location
-										})}
-							/>
-						</>
-					)}
-					{!isProfile && 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,
-		marginHorizontal: 5
-	},
-	icon: {
-		flex: 0.2
-	},
-	buttonIcon: {
-		width: 20,
-		height: 20,
-		resizeMode: 'contain',
-		left: 20,
-		position: 'absolute',
-	},
-	button: {
-		marginTop: 30,
-		marginBottom: 0,
-		borderRadius: 7.6,
-		borderWidth: 1,
-		shadowOpacity: 0,
-		height: 44,
-	}
-})
-
-export const AddressList = (props: AddressListParams) => {
-	const addressListProps = {
-		...props,
-		UIComponent: AddressListUI
-	}
-	return <AddressListController {...addressListProps} />
-}

package/themes/franchises/src/components/AddressList/styles.tsx

@@ -1,20 +0,0 @@
-import styled from 'styled-components/native'
-
-export const AddressListContainer = styled.View`
-    flex: 1;
-	 paddingLeft: 40px;
-	 paddingRight: 40px;
-	 paddingBottom: 20px;
-`
-
-export const AddressItem = styled.TouchableOpacity`
-    padding-vertical: 20px;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-	 border-bottom-width: 1px;
-`
-
-export const ContainerButtons = styled.View`
-    margin-vertical: 50px
-`

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

@@ -1,149 +0,0 @@
-import React, { useEffect } from 'react';
-import { Platform, Text, StyleSheet } from 'react-native';
-import { useApi, useSession, useLanguage } 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';
-
-import { Container, AppleButton } from './styles';
-
-export const AppleLogin = (props: any) => {
-  const {
-    handleErrors,
-    handleLoading,
-    handleSuccessAppleLogin,
-    notificationState
-  } = props
-
-  const [ordering] = useApi();
-	const [{ auth }] = useSession();
-	const [, t] = useLanguage();
-
-	const buttonText = auth
-		? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
-		: t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
-
-  const performAppleLogin = async (code: string) => {
-    try {
-      const response: any = await fetch(`${ordering.root}/auth/apple`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          code: code
-        })
-      })
-      if (!response.content.error) {
-        if (handleSuccessAppleLogin) {
-          handleSuccessAppleLogin(response.content.result)
-          handleLoading && handleLoading(false)
-        }
-      } else {
-        handleLoading && handleLoading(false)
-        logoutFromApple()
-      }
-    } catch (err: any) {
-      handleLoading && handleLoading(false)
-      handleErrors && handleErrors(err.message)
-    }
-  }
-
-  const logoutFromApple = () => {
-
-  }
-
-  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 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 {
-      if (response.code) {
-        performAppleLogin(response.code)
-      }
-    } catch (err: any) {
-
-    }
-  }
-
-  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
-    return appleAuth.onCredentialRevoked(async () => {
-      console.warn('If this function executes, User Credentials have been Revoked');
-    });
-  }, []);
-
-  const canShowButton = () => {
-    if (Platform.OS === 'ios') return true;
-    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>
-      }
-    </Container>
-  );
-}
-
-const style = StyleSheet.create({
-	fbBtn: {
-		position: 'absolute',
-		left: 0,
-		marginHorizontal: 16
-	},
-	textBtn: {
-		fontSize: 14,
-		color: '#000000'
-	}
-})

package/themes/franchises/src/components/AppleLogin/styles.tsx

@@ -1,21 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View``
-
-export const AppleButton = styled.TouchableOpacity`
-  background-color: #FFFFFF;
-  border-radius: 7.6px;
-  padding: 15px 30px;
-  font-size: 14px;
-  font-weight: 400;
-  text-align: center;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  height: 52px;
-  border-color: black;
-  border-width: 1px;
-`

package/themes/franchises/src/components/BottomWrapper/index.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import { ViewStyle } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import styled from 'styled-components/native'
-
-const Wrapper = styled.View`
-  box-shadow: 0 -1px 3px #00000010;
-  background-color: white;
-  height: 60px;
-  padding-vertical: 20px;
-`
-
-interface Props {
-  style?: ViewStyle,
-  children: any
-}
-
-const BottomWrapper = (props: Props) => {
-  const safeAreaInset = useSafeAreaInsets();
-  return (
-    <Wrapper
-      style={{ paddingBottom: safeAreaInset.bottom || 16, ...props.style }}
-    >
-      { props.children}
-    </Wrapper>
-  )
-}
-
-export default BottomWrapper