ordering-ui-react-native 0.12.57 → 0.12.61

package/themes/franchises/src/components/shared/OModal.tsx

@@ -1,172 +0,0 @@
-import * as React from 'react';
-import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity } from "react-native";
-import { OIcon } from '.';
-import { useTheme } from 'styled-components/native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-interface Props {
-	open?: boolean;
-	title?: string;
-	children?: any;
-	onAccept?: any;
-	onCancel?: any;
-	onClose?: any;
-	style?: any;
-	acceptText?: string;
-	cancelText?: string;
-	isTransparent?: boolean;
-	hideCloseDefault?: boolean;
-	entireModal?: boolean;
-	customClose?: boolean;
-	titleSectionStyle?: any;
-	isNotDecoration?: boolean;
-	styleCloseButton?: any
-}
-
-const OModal = (props: Props): React.ReactElement => {
-	const {
-		open,
-		title,
-		children,
-		onAccept,
-		onCancel,
-		onClose,
-		acceptText,
-		cancelText,
-		isTransparent,
-		hideCloseDefault,
-		entireModal,
-		customClose,
-		titleSectionStyle,
-		isNotDecoration,
-		style,
-		styleCloseButton
-	} = props
-
-	const theme = useTheme();
-	const { top } = useSafeAreaInsets();
-
-	return (
-		<Modal
-			animationType="slide"
-			transparent={isTransparent}
-			visible={open}
-			onRequestClose={() => onClose()}
-			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
-		>
-			<SafeAreaView style={styles.container}>
-				{!entireModal ? (
-					<View style={styles.centeredView}>
-						<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-							<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
-								<OIcon
-									src={theme.images.general.close}
-									width={16}
-									style={isNotDecoration && (styleCloseButton || styles.cancelBtn)}
-								/>
-							</TouchableOpacity>
-							<Text style={styles.modalText}>{title || ''}</Text>
-						</View>
-						{children}
-					</View>
-				) :
-					<View>
-						{!customClose && (
-							<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-								<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
-									<OIcon
-										src={theme.images.general.close}
-										width={16}
-										style={styleCloseButton || styles.cancelBtn}
-									/>
-								</TouchableOpacity>
-								<Text style={styles.modalText}>{title || ''}</Text>
-							</View>
-						)}
-						{children}
-					</View>
-				}
-			</SafeAreaView>
-		</Modal>
-	);
-};
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-	centeredView: {
-		justifyContent: "center",
-		alignItems: 'flex-start',
-		position: 'relative',
-		width: '100%',
-	},
-	titleSection: {
-		width: '100%',
-		flex: 1,
-		justifyContent: 'space-between',
-		alignItems: 'flex-start',
-		paddingLeft: 40,
-		paddingRight: 40,
-		marginBottom: 40
-	},
-	cancelBtn: {
-		//  position: 'absolute',
-		//  left: 0,
-		//  margin: 15,
-		// zIndex: 10000
-	},
-	modalText: {
-		marginTop: 15,
-		fontSize: 20,
-		lineHeight: 30,
-		fontWeight: '600',
-		textAlign: "center",
-		zIndex: 10
-	},
-	wrapperIcon: {
-		overflow: 'hidden',
-		backgroundColor: 'transparent',
-		width: 35,
-		height: 35,
-		marginStart: -4,
-		marginTop: 12,
-		alignItems: 'center',
-		justifyContent: 'center',
-		zIndex: 99999
-	},
-
-	modalView: {
-		margin: 20,
-		backgroundColor: "white",
-		borderRadius: 20,
-		padding: 35,
-		alignItems: "center",
-		shadowColor: "#000",
-		shadowOffset: {
-			width: 0,
-			height: 2
-		},
-		shadowOpacity: 0.25,
-		shadowRadius: 4,
-		elevation: 5
-	},
-	button: {
-		borderRadius: 20,
-		padding: 10,
-		elevation: 2
-	},
-	buttonOpen: {
-		backgroundColor: "#F194FF",
-	},
-	buttonClose: {
-		backgroundColor: "#2196F3",
-	},
-	textStyle: {
-		color: "white",
-		fontWeight: "bold",
-		textAlign: "center"
-	},
-});
-
-export default OModal;

package/themes/franchises/src/components/shared/OText.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import {TextStyle} from 'react-native';
-import styled, {css} from 'styled-components/native';
-
-const SText = styled.Text`
-  color: ${(props: any) => props.color || 'black'};
-  font-family: 'Poppins-Regular';
-  font-size: ${(props: any) => (props.size ? `${props.size}px` : '14px')};
-  flex-wrap: wrap;
-  margin-bottom: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mBottom ? `${props.mBottom}px` : 0};
-  margin-right: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mRight ? `${props.mRight}px` : 0};
-  margin-left: ${(props: any) =>
-    props.hasBottom ? '10px' : props.mLeft ? `${props.mLeft}px` : 0};
-  ${(props: any) =>
-    props.weight &&
-    css`
-      font-weight: ${props.weight};
-    `};
-  ${(props: any) =>
-    props.isWrap &&
-    css`
-      flex: ${props.weight ? 1 : 0};
-    `};
-`;
-interface Props {
-  color?: string;
-  size?: number;
-  weight?: any;
-  style?: TextStyle;
-  children?: JSX.Element | JSX.Element[] | string;
-  isWrap?: boolean;
-  hasBottom?: boolean;
-  mBottom?: any;
-  space?: any;
-  mRight?: number;
-  mLeft?: number;
-  numberOfLines?: number;
-  ellipsizeMode?: string;
-  lineHeight?: number;
-}
-
-const OText = (props: Props): React.ReactElement => {
-  return (
-    <SText {...props} style={[props.style, {lineHeight: props.lineHeight}]}>
-      {props.children}{props.space && ' '}
-    </SText>
-  );
-};
-
-export default OText;

package/themes/franchises/src/components/shared/OTextarea.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react'
-import styled, { useTheme } from 'styled-components/native'
-
-const Inner = styled.TextInput`
-    height: 150px;
-`
-
-interface Props {
-	lines?: number,
-	value?: string,
-	placeholder?: string
-}
-
-const OTextarea = (props: Props) => {
-
-	const theme = useTheme();
-	const Wrapper = styled.View`
-		padding: 10px;
-		border-radius: 10px;
-		border: 1px solid ${theme.colors.lightGray};
-	`
-	return (
-		<Wrapper>
-			<Inner
-				placeholder={props.placeholder}
-				placeholderTextColor={theme.colors.lightGray}
-				numberOfLines={props.lines}
-				underlineColorAndroid={'transparent'}
-				value={props.value}
-				multiline={true}
-			/>
-		</Wrapper>
-	)
-}
-
-export default OTextarea;

package/themes/franchises/src/components/shared/OToast.tsx

@@ -1,93 +0,0 @@
-import * as React from "react";
-import { Animated, StyleSheet, Text, View } from "react-native";
-import { ToastType, useToast } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-
-const fadeDuration = 300;
-const bottomPosition = 20;
-
-export const Toast: React.FC = () => {
-	const theme = useTheme();
-	// const insets = useSafeAreaInsets();
-	const [, { toastConfig, hideToast }] = useToast();
-	const opacity = React.useRef(new Animated.Value(0)).current;
-
-	const fadeIn = React.useCallback(() => {
-		Animated.timing(opacity, {
-			toValue: 1,
-			duration: fadeDuration,
-			useNativeDriver: true,
-		}).start();
-	}, [opacity]);
-
-	const fadeOut = React.useCallback(() => {
-		Animated.timing(opacity, {
-			toValue: 0,
-			duration: fadeDuration,
-			useNativeDriver: true,
-		}).start(() => {
-			hideToast();
-		});
-	}, [opacity, hideToast]);
-
-	React.useEffect(() => {
-		if (!toastConfig) {
-			return;
-		}
-
-		fadeIn();
-		const timer = setTimeout(fadeOut, toastConfig.duration);
-
-		return () => clearTimeout(timer);
-	}, [toastConfig, fadeIn, fadeOut]);
-
-	if (!toastConfig) {
-		return null;
-	}
-
-	const { type, message } = toastConfig;
-
-	let backgroundColor;
-	switch (type) {
-		case ToastType.Info:
-			backgroundColor = '#6ba4ff';
-			break;
-		case ToastType.Error:
-			backgroundColor = theme.colors.primary;
-			break;
-		case ToastType.Success:
-			backgroundColor = '#73bd24';
-			break;
-	}
-
-	return (
-		<Animated.View
-			style={[
-				styles.container,
-				{ bottom: bottomPosition, opacity },
-			]}
-		>
-			<View style={[styles.toast, { backgroundColor }]}>
-				<Text style={styles.message}>{message}</Text>
-			</View>
-		</Animated.View>
-	);
-};
-
-const styles = StyleSheet.create({
-	container: {
-		alignSelf: "center",
-		position: "absolute",
-		maxWidth: 480,
-		zIndex: 9999999999
-	},
-	toast: {
-		borderRadius: 16,
-		padding: 16,
-	},
-	message: {
-		fontSize: 14,
-		textAlign: "center",
-		color: '#fff',
-	},
-});

package/themes/franchises/src/components/shared/OToggle.tsx

@@ -1,158 +0,0 @@
-import * as React from 'react';
-import {
-    StyleSheet,
-    Text,
-    View,
-    TouchableOpacity,
-    Animated,
-    Platform,
-    TextStyle
-} from "react-native";
-
-interface propTypes {
-    isOn: boolean,
-    label?: string,
-    onColor?: string,
-    offColor?: string,
-    size?: string,
-    labelStyle?: TextStyle,
-    thumbOnStyle?: any,
-    thumbOffStyle?: any,
-    trackOnStyle?: any,
-    trackOffStyle?: any,
-    onToggle: any,
-    icon?: any,
-    disabled?: boolean,
-    animationSpeed?: number,
-    useNativeDriver?: boolean,
-    circleColor?: string,
-};
-
-const OToggleSwitch = (props: propTypes) => {
-
-    const calculateDimensions = (size: string) => {
-        switch (size) {
-            case "small":
-                return {
-                    width: 40,
-                    padding: 10,
-                    circleWidth: 15,
-                    circleHeight: 15,
-                    translateX: 22
-                };
-            case "large":
-                return {
-                    width: 70,
-                    padding: 20,
-                    circleWidth: 30,
-                    circleHeight: 30,
-                    translateX: 38
-                };
-            default:
-                return {
-                    width: 50,
-                    padding: 15,
-                    circleWidth: 25,
-                    circleHeight: 25,
-                    translateX: 30
-                };
-        }
-    }
-
-    const offsetX = new Animated.Value(0);
-    const dimensions = calculateDimensions(props.size || 'medium');
-
-    const createToggleSwitchStyle = () => [
-        {
-            justifyContent: "center",
-            width: dimensions.width,
-            borderRadius: 20,
-            padding: dimensions.padding,
-            backgroundColor: props.isOn ? props.onColor : props.offColor
-        },
-        props.isOn ? props.trackOnStyle : props.trackOffStyle
-    ];
-
-    const createInsideCircleStyle = () => [
-        {
-            alignItems: "center",
-            justifyContent: "center",
-            margin: Platform.OS === "web" ? 0 : 4,
-            left: Platform.OS === "web" ? 4 : 0,
-            position: "absolute",
-            backgroundColor: props.circleColor,
-            transform: [{ translateX: offsetX }],
-            width: dimensions.circleWidth,
-            height: dimensions.circleHeight,
-            borderRadius: dimensions.circleWidth / 2,
-            shadowColor: "#000",
-            shadowOffset: {
-                width: 0,
-                height: 2
-            },
-            shadowOpacity: 0.2,
-            shadowRadius: 2.5,
-            elevation: 1.5
-        },
-        props.isOn ? props.thumbOnStyle : props.thumbOffStyle
-    ];
-
-
-    const { isOn, onToggle, disabled, labelStyle, label, icon } = props;
-
-    const toValue = isOn
-        ? dimensions.width - dimensions.translateX
-        : 0;
-
-    Animated.timing(offsetX, {
-        toValue,
-        duration: props.animationSpeed,
-        useNativeDriver: props.useNativeDriver || false,
-    }).start();
-
-    return (
-        <View style={styles.container}>
-            {label ? (
-                <Text style={[styles.labelStyle, labelStyle]}>{label}</Text>
-            ) : null}
-            <TouchableOpacity
-                style={createToggleSwitchStyle()}
-                activeOpacity={0.8}
-                onPress={() => (disabled ? null : onToggle(!isOn))}
-            >
-                <Animated.View style={createInsideCircleStyle()}>
-                    {icon}
-                </Animated.View>
-            </TouchableOpacity>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        alignItems: "center"
-    },
-    labelStyle: {
-        marginHorizontal: 10
-    }
-});
-
-OToggleSwitch.defaultProps = {
-    isOn: false,
-    onColor: "#4cd137",
-    offColor: "#ecf0f1",
-    size: "medium",
-    labelStyle: {},
-    thumbOnStyle: {},
-    thumbOffStyle: {},
-    trackOnStyle: {},
-    trackOffStyle: {},
-    icon: null,
-    disabled: false,
-    animationSpeed: 300,
-    useNativeDriver: true,
-    circleColor: 'white'
-};
-
-export default OToggleSwitch;

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

@@ -1,29 +0,0 @@
-import OText from './OText'
-import OButton from './OButton'
-import OInput from './OInput'
-import ODropDown from './ODropDown'
-import OIcon from './OIcon'
-import OIconText from './OIconText'
-import OIconButton from './OIconButton'
-import OTextarea from './OTextarea'
-import OToggle from './OToggle'
-import OKeyButton from './OKeyButton'
-import OModal from './OModal'
-import OAlert from './OAlert'
-import OBottomPopup from './OBottomPopup'
-
-export {
-	OText,
-	OButton,
-	OInput,
-	ODropDown,
-	OIcon,
-	OIconText,
-	OIconButton,
-	OTextarea,
-	OToggle,
-	OKeyButton,
-	OAlert,
-  	OModal,
-	OBottomPopup,
-}

package/themes/franchises/src/config/constants.tsx

@@ -1,57 +0,0 @@
-export const USER_TYPE = {
-	BUSINESS: 'business',
-	CUSTOMER: 'customer',
-	DRIVER: 'driver'
-}
-
-export const ORDER_TYPES = [
-	{
-		value: 1,
-		content: 'DELIVERY',
-		description: 'DELIVERY_DESCRIPTION'
-	},
-	{
-		value: 2,
-		content: 'PICKUP',
-		description: 'PICKUP_DESCRIPTION',
-	},
-	{
-		value: 3,
-		content: 'EAT_IN',
-		description: 'EAT_IN_DESCRIPTION',
-	},
-	{
-		value: 4,
-		content: 'CURBSIDE',
-		description: 'CURBSIDE_DESCRIPTION',
-	},
-	{
-		value: 5,
-		content: 'DRIVE_THRU',
-		description: 'DRIVE_THRU_DESCRIPTION',
-	}
-]
-
-export const REVIEW_ORDER_COMMENTS = [
-	{ key: 'IT_WASNT_TASTY', value: 'It wasn\'t tasty' },
-	{ key: 'IT_DOESNT_PACK_WELL', value: 'It doesn\'t pack well' },
-	{ key: 'IT_ISNT_WORTH_WHAT_IT_COASTS', value: 'It isn\'t worth what it coasts' },
-	{ key: 'TO_SLOW', value: 'To slow' },
-	{ key: 'SUSTAINABLE_PACKAGING_WASNT_USED', value: 'Sustainable packaging wasn\'t used' },
-	{ key: 'THEY_DID_NOT_FOLLOW_THE_ORDER_NOTES', value: 'They didn\'t follow the order notes' }
-]
-
-export const REVIEW_PRODUCT_COMMENTS = [
-	{ key: 'IT_WASNT_TASTY', value: 'It wasn\'t tasty'},
-	{ key: 'SMALL_PORTION', value: 'Small portion'},
-	{ key: 'WET_OR_LEAKY', value: 'Wet or leaky'},
-	{ key: 'SLOPPY_PRESENTATION', value: 'Sloppy presentation'},
-	{ key: 'COLD_OR_MELTED', value: 'Cold or melted'}
-]
-
-export const REVIEW_DRIVER_COMMENTS = [
-	{ key: 'FAST_AND_EFFICIENT', value: 'Fast and efficient'},
-	{ key: 'DELIVERY_PERFECT', value: 'Delivery perfect'},
-	{ key: 'EXCELLENT_COMMUNICATION', value: 'Excellent communication'},
-	{ key: 'CORDIAL_SERVICE', value: 'Cordial service'},
-]

package/themes/franchises/src/layouts/Container.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components/native';
-
-const ContainerStyled = styled.ScrollView`
-  flex: 1;
-  padding: ${(props: any) => props.noPadding ? '0' : '0 40px'};
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
-
-const SafeAreaStyled = styled.SafeAreaView`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`;
-
-export const Container = (props: any) => {
-  return (
-    <SafeAreaStyled>
-      <ContainerStyled {...props} ref={props?.forwardRef} keyboardShouldPersistTaps='handled' style={{...props.style}}>
-        {props.children}
-      </ContainerStyled>
-    </SafeAreaStyled>
-  )
-}

package/themes/franchises/src/layouts/SafeAreaContainer.tsx

@@ -1,6 +0,0 @@
-import styled from 'styled-components/native';
-
-export const SafeAreaContainer = styled.SafeAreaView`
-  flex: 1;
-  background-color: ${(props: any) => props.theme.colors.backgroundPage};
-`

package/themes/franchises/src/providers/AlertProvider.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react'
-import AwesomeAlert from 'react-native-awesome-alerts'
-import { getTraduction } from '../utils'
-import { useLanguage } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native'
-interface Props {
-  open: boolean,
-  title: string,
-  content: Array<string>,
-  onClose: () => void,
-  onAccept: () => void
-}
-
-const Alert = (props: Props) => {
-  const {
-    open,
-    title,
-    content,
-    onClose,
-    onAccept,
-  } = props
-
-  const theme = useTheme();
-  const [, t] = useLanguage();
-
-  return (
-    <AwesomeAlert
-      show={open}
-      showProgress={false}
-      title={title}
-      message={getTraduction(content?.[0])}
-      closeOnTouchOutside={true}
-      closeOnHardwareBackPress={false}
-      showConfirmButton={true}
-      confirmText={t('ACCEPT', 'Accept')}
-      confirmButtonColor={theme.colors.primary}
-      onCancelPressed={() => onClose()}
-      onConfirmPressed={() => onAccept()}
-    />
-  )
-}
-
-export default Alert;