ordering-ui-react-native 0.12.56 → 0.12.60

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

@@ -1,89 +0,0 @@
-import { Platform } from 'react-native';
-import styled, { css } from 'styled-components/native';
-
-export const ChContainer = styled.View`
-  margin-bottom: 60px;
-`
-
-export const ChSection = styled.View`
-	padding-top: 30px;
-`
-
-export const ChHeader = styled.View`
-  justify-content: flex-start;
-  flex-direction: row;
-  align-items: center;
-  margin: 0px;
-`
-
-export const ChTotal = styled.View`
-  background-color: ${(props: any) => props.theme.colors.inputDisabled};
-  padding: 10px 20px;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-`
-
-export const ChTotalWrap = styled.View`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`
-
-export const ChAddress = styled.View`
-  width: 100%;
-`
-
-export const ChMoment = styled(ChAddress)`
-  padding: 0 0 20px;
-`
-
-export const CHDropBtnWrapper = styled.TouchableOpacity`
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
-	border-radius: 7.6px;
-	font-size: 12px;
-	max-width: 240px;
-	height: 26px;
-	align-items: center;
-	justify-content: center;
-	padding-horizontal: 8px;
-	flex-direction: row;
-	margin-end: 12px;
-`
-
-export const ChUserDetails = styled.View`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  width: 100%;
-  padding-bottom: 34px;
-`
-
-export const ChBusinessDetails = styled(ChUserDetails)`
-	padding-top: 0;
-`
-
-export const ChPaymethods = styled.View`
-  display: flex;
-  flex-direction: column;
-  padding: 0 0 20px;
-`
-
-export const ChDriverTips = styled(ChPaymethods)``
-
-export const ChCart = styled(ChPaymethods)``
-
-export const ChPlaceOrderBtn = styled.View`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-`
-
-export const ChErrors = styled.View`
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 20px;
-`

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

@@ -1,119 +0,0 @@
-import React, { useEffect } from 'react';
-import { StyleSheet, Alert, Text } from 'react-native';
-import { CouponControl as CouponController, useLanguage } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import {
-	CContainer,
-	CCWrapper,
-	CCButton
-} from './styles';
-
-import { OInput, OButton, OAlert, OText } from '../shared';
-
-const CouponControlUI = (props: any) => {
-	const {
-		couponDefault,
-		couponInput,
-		handleButtonApplyClick,
-		handleRemoveCouponClick,
-		onChangeInputCoupon,
-		confirm,
-		setConfirm
-	} = props
-
-	const [, t] = useLanguage()
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		inputsStyle: {
-			borderColor: theme.colors.border,
-			borderRadius: 7.6,
-			flex: 1,
-			marginRight: 20,
-			height: 44
-		},
-	});
-
-	const handleOnAccept = () => {
-		if (!confirm.error) {
-			handleRemoveCouponClick && handleRemoveCouponClick()
-		}
-		onChangeInputCoupon('')
-	}
-
-	const cleanSetConfirm = () => {
-		setConfirm({ ...confirm, open: false, error: false })
-	}
-
-	useEffect(() => {
-		if (confirm.content) {
-			Alert.alert(
-				t('COUPON_ERROR', 'Coupon Error'),
-				confirm.content[0],
-				[
-					{
-						text: t('CANCEL', 'cancel'),
-						onPress: () => cleanSetConfirm(),
-						style: 'cancel'
-					},
-					{
-						text: t('ACCEPT', 'Accept'),
-						onPress: () => cleanSetConfirm()
-					}
-				],
-				{ cancelable: false }
-			)
-		}
-	}, [confirm])
-
-	return (
-		<CContainer>
-			{couponDefault ? (
-				<OAlert
-					title={t('REMOVE_COUPON', 'Remove Coupon')}
-					message={t('QUESTION_DELETE_COUPON', 'Are you sure that you want to delete the coupon?')}
-					onAccept={() => handleOnAccept()}
-				>
-					<CCButton>
-						<OText
-							size={12}
-							color={theme.colors.white}
-							style={{ textAlign: 'center' }}
-						>
-							{`${t('REMOVE_COUPON', 'Remove Coupon')} ${couponDefault}`}
-						</OText>
-					</CCButton>
-				</OAlert>
-			) : (
-				<CCWrapper>
-					<OInput
-						placeholder={t('DISCOUNT_COUPON', 'Discount coupon')}
-						onChange={(e: any) => onChangeInputCoupon(e)}
-						style={styles.inputsStyle}
-						inputStyle={{ fontSize: 12 }}
-					/>
-					<OButton
-						onClick={() => handleButtonApplyClick()}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white', fontSize: 12 }}
-						imgRightSrc={null}
-						text={t('APPLY', 'Apply')}
-						isDisabled={!couponInput}
-						style={{ borderRadius: 7.6, height: 44, shadowOpacity: 0 }}
-					/>
-				</CCWrapper>
-			)}
-		</CContainer>
-	)
-}
-
-export const CouponControl = (props: any) => {
-	const couponProp = {
-		...props,
-		UIComponent: CouponControlUI
-	}
-	return (
-		<CouponController {...couponProp} />
-	)
-}

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

@@ -1,22 +0,0 @@
-import styled from 'styled-components/native';
-
-export const CContainer = styled.View`
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 5px 0px;
-`
-
-export const CCWrapper = styled.View`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-`
-
-export const CCButton = styled.View`
-  width: 100%;
-  background-color: ${(props: any) => props.theme.colors.backgroundGray};
-  padding: 10px;
-  border-radius: 50px;
-`

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

@@ -1,167 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
-import {
-	DriverTips as DriverTipsController,
-	useUtils,
-	useLanguage,
-	useConfig,
-	useOrder
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { OButton, OInput, OText } from '../shared';
-
-import {
-	DTContainer,
-	DTCard,
-	DTWrapperTips,
-	DTForm,
-	DTLabel,
-	DTWrapperInput
-} from './styles'
-
-const DriverTipsUI = (props: any) => {
-	const {
-		driverTip,
-		driverTipsOptions,
-		optionSelected,
-		isFixedPrice,
-		isDriverTipUseCustom,
-		handlerChangeOption
-	} = props;
-
-	const [{ parsePrice }] = useUtils();
-	const [, t] = useLanguage();
-	const [{ configs }] = useConfig();
-	const [{ options, carts, loading }, orderState] = useOrder();
-
-	const theme = useTheme();
-
-	const style = StyleSheet.create({
-		circle: {
-			borderRadius: 30
-		},
-		inputStyle: {
-			flex: 1,
-			borderWidth: 1,
-			borderColor: theme.colors.border,
-			marginRight: 10,
-			height: 44,
-			borderRadius: 7.6
-		},
-		applyBtn: {
-			borderRadius: 7.6,
-			height: 44,
-			shadowOpacity: 0
-		}
-	})
-
-	const [value, setvalue] = useState(0);
-	const [isChanging, setChange] = useState(false);
-	const [curOpt, setCurOpt] = useState(optionSelected);
-
-	const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
-		? `${configs?.format_number_currency?.value}0`
-		: `0${configs?.format_number_currency?.value}`
-
-	const handleChangeDriverTip = (val: any) => {
-		let tip = parseFloat(val)
-		tip = isNaN(tip) ? 0 : tip
-		setvalue(tip)
-	}
-
-	const handleChangeOpt = (option: any) => {
-		setCurOpt(option);
-		setChange(true);
-		handlerChangeOption(option)
-	}
-
-	useEffect(() => {
-		setChange(false);
-	}, [optionSelected])
-
-	return (
-		<DTContainer>
-			{!isDriverTipUseCustom ? (
-				<>
-					<DTLabel >
-						{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
-					</DTLabel>
-					<DTWrapperTips>
-						{driverTipsOptions.sort((a: any, b: any) => parseInt(a) > parseInt(b)).map((option: any, i: number) => (
-							<TouchableOpacity
-								key={i}
-								onPress={() => handleChangeOpt(option)}
-							>
-								<DTCard
-									style={style.circle}
-									isActive={option === optionSelected}
-								>
-									<OText size={13} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
-										{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
-									</OText>
-									{loading && curOpt === option && isChanging && <ActivityIndicator color={theme.colors.primary} style={{position: 'absolute'}} />}
-								</DTCard>
-							</TouchableOpacity>
-						))}
-					</DTWrapperTips>
-					{!driverTipsOptions.includes(driverTip) && driverTip > 0 && (
-						<OText
-							color={theme.colors.error}
-							size={20}
-							style={{ marginTop: 10, textAlign: 'center' }}
-						>
-							{t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
-						</OText>
-					)}
-				</>
-			) : (
-				<DTForm>
-					<DTLabel>
-						{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
-					</DTLabel>
-					<DTWrapperInput>
-						<OInput
-							placeholder={placeholderCurrency}
-							style={style.inputStyle}
-							onChange={handleChangeDriverTip}
-							autoCapitalize='none'
-							autoCorrect={false}
-						/>
-						<OButton
-							text={t('APPLY_TIP', 'Apply Tip')}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white', fontSize: 14 }}
-							imgRightSrc={null}
-							isDisabled={!(value > 0 && value !== driverTip) || !value}
-							onClick={() => {
-								handlerChangeOption(value)
-								setvalue(0)
-							}}
-							style={style.applyBtn}
-						/>
-					</DTWrapperInput>
-					{parseFloat(driverTip || 0) > 0 && (
-						<OText
-							color={theme.colors.error}
-							size={20}
-							style={{ marginTop: 10, textAlign: 'center' }}
-						>
-							{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}: {parsePrice(driverTip)}
-						</OText>
-					)}
-				</DTForm>
-			)}
-		</DTContainer>
-	)
-}
-
-
-export const DriverTips = (props: any) => {
-	const driverTipsProps = {
-		...props,
-		UIComponent: DriverTipsUI
-	}
-
-	return <DriverTipsController {...driverTipsProps} />
-}

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

@@ -1,63 +0,0 @@
-import styled, { css } from 'styled-components/native'
-
-export const DTContainer = styled.View`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  width: 100%;
-`
-
-export const DTWrapperTips = styled.View`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-`
-
-export const DTCard = styled.View`
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  border: 1px solid ${(props: any) => props.isActive ? props.theme.colors.primary : props.theme.colors.border};
-  text-transform: capitalize;
-  min-height: 48px;
-  min-width: 48px;
-  width: 48px;
-  height: 48px;
-
-  ${(props: any) => props.isActive && css`
-    background-color: ${(props: any) => props.theme.colors.primary};
-  `}
-`
-
-export const DTForm = styled.View`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`
-
-export const DTLabel = styled.Text`
-  font-size: 10px;
-  align-self: flex-start;
-  color: ${(props: any) => props.theme.colors.textSecondary}
-  ${(props: any) => props.theme?.rtl && css`
-    margin-left: 20px;
-    margin-right: 0;
-  `}
-  margin-top: 5px;
-  margin-bottom: 17px;
-`
-
-export const DTWrapperInput = styled.View`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  margin-top: 20px;
-`

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

@@ -1,107 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text } from 'react-native';
-import { AccessToken, LoginManager } from 'react-native-fbsdk';
-import { useLanguage, useSession, useApi } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import Icon from 'react-native-vector-icons/FontAwesome5';
-
-import { Container, FacebookButton } from './styles';
-
-export const FacebookLogin = (props: any) => {
-	const {
-		handleErrors,
-		handleLoading,
-		handleSuccessFacebookLogin
-	} = props
-
-	const [, t] = useLanguage()
-	const [ordering] = useApi()
-	const [{ auth }] = useSession()
-
-	const theme = useTheme();
-
-	const buttonText = auth
-		? t('LOGOUT_WITH_FACEBOOK', 'Logout with Facebook')
-		: t('CONTINUE_WITH_FACEBOOK', 'Continue with Facebook');
-
-	const logoutWithFacebook = () => {
-		LoginManager && LoginManager.logOut();
-	};
-
-	const handleLoginClick = async (accessToken: string) => {
-		try {
-			const response = await ordering.users().authFacebook({ access_token: accessToken })
-			if (!response.content.error) {
-				if (handleSuccessFacebookLogin) {
-					handleSuccessFacebookLogin(response.content.result)
-					handleLoading && handleLoading(false)
-				}
-			} else {
-				handleLoading && handleLoading(false)
-				logoutWithFacebook()
-			}
-		} catch (err) {
-			handleLoading && handleLoading(false)
-			handleErrors && handleErrors(err.message)
-		}
-	}
-
-	const loginWithFacebook = () => {
-		handleLoading && handleLoading(true)
-		LoginManager && LoginManager.logInWithPermissions(['public_profile']).then(
-			(login: any) => {
-				if (login.isCancelled) {
-					const err = t('LOGIN_WITH_FACEBOOK_CANCELLED', 'Login cancelled')
-					handleLoading && handleLoading(false)
-					handleErrors && handleErrors(err)
-				} else {
-					AccessToken.getCurrentAccessToken().then((data: any) => {
-						const accessToken = data.accessToken.toString();
-						handleLoginClick(accessToken)
-					});
-				}
-			},
-			(error: any) => {
-				const err = error
-					? t(error?.replace(/ /g, '_').toUpperCase(), 'Login cancelled')
-					: t('LOGIN_FAIL_WITH_FACEBOOK', 'Login fail with facebook')
-				handleLoading && handleLoading(false)
-				handleErrors && handleErrors(err)
-			},
-		);
-	};
-
-	const onPressButton = auth
-		? logoutWithFacebook
-		: loginWithFacebook;
-
-	return (
-		<Container>
-			<FacebookButton
-				onPress={onPressButton}
-			>
-				<Icon
-					name="facebook"
-					size={16}
-					color={theme.colors.skyBlue}
-					style={style.fbBtn}
-				/>
-				<Text style={style.textBtn}>
-					{buttonText}
-				</Text>
-			</FacebookButton>
-		</Container>
-	);
-}
-
-const style = StyleSheet.create({
-	fbBtn: {
-		position: 'absolute',
-		left: 0,
-		marginHorizontal: 16
-	},
-	textBtn: {
-		fontSize: 14,
-		color: '#000000'
-	}
-})

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

@@ -1,21 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View``
-
-export const FacebookButton = 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/FloatingButton/index.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import {
-	FloatingButton as FloatingButtonController,
-	useLanguage,
-} from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { FloatingButtonParams } from '../../types';
-import { Container, Button } from './styles';
-import { OText } from '../shared';
-import { StyleSheet, Platform } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { View } from 'react-native';
-
-const FloatingButtonUI = (props: FloatingButtonParams) => {
-	const {
-		btnLeftValue,
-		btnRightValue,
-		btnLeftValueShow,
-		btnRightValueShow,
-		btnText,
-		handleButtonClick,
-		disabled,
-		isSecondaryBtn,
-		hasBottom,
-		handleEmpty,
-	} = props;
-
-	const [, t] = useLanguage();
-	const { bottom } = useSafeAreaInsets();
-
-	const theme = useTheme();
-
-	const styles = StyleSheet.create({
-		primaryBtn: {
-			backgroundColor: theme.colors.primary,
-		},
-		secondaryBtn: {
-			backgroundColor: theme.colors.backgroundGray200,
-		},
-		emptyBtn: {
-			height: 44,
-			borderRadius: 7.6,
-			backgroundColor: theme.colors.backgroundGray100,
-			paddingHorizontal: 27,
-		},
-		infoCont: {
-			flexDirection: 'row',
-			alignItems: 'center',
-			justifyContent: 'flex-start',
-		},
-		badge: {
-			alignItems: 'center',
-			justifyContent: 'center',
-			borderRadius: 7.6,
-			minWidth: 30,
-			minHeight: 30,
-			backgroundColor: theme.colors.primaryContrast,
-			paddingHorizontal: 7
-		}
-	});
-
-	return (
-		<Container
-			isIos={Platform.OS === 'ios'}
-			style={{ paddingBottom: hasBottom ? bottom + 12 : 12 }}>
-
-			<View style={styles.infoCont}>
-				<OText color={theme.colors.textNormal} size={16} lineHeight={24} weight={'600'} mRight={20}>
-					{btnRightValueShow ? btnRightValue : ''}
-				</OText>
-				{btnLeftValueShow && (
-					<View style={styles.badge}>
-						<OText color={theme.colors.textNormal} size={14} lineHeight={24}>
-							{btnLeftValueShow ? btnLeftValue : ''}
-						</OText>
-					</View>
-				)}
-			</View>
-			<Button
-				style={[isSecondaryBtn ? styles.secondaryBtn : styles.primaryBtn]}
-				onPress={handleButtonClick}
-				disabled={disabled}
-			>
-				<OText color={isSecondaryBtn ? theme.colors.textSecondary : theme.colors.white} lineHeight={24} size={14} weight={'400'}>
-					{btnText}
-				</OText>
-			</Button>
-
-		</Container>
-	);
-};
-
-export const FloatingButton = (props: FloatingButtonParams) => {
-	const floatingButtonProps = {
-		...props,
-		UIComponent: FloatingButtonUI,
-	};
-
-	return <FloatingButtonController {...floatingButtonProps} />;
-};