ordering-ui-react-native 0.12.56 → 0.12.60

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

@@ -1,56 +0,0 @@
-import React from 'react'
-import { HelpParams } from '../../types'
-import { useLanguage } from 'ordering-components/native'
-import NavBar from '../NavBar'
-import { OText } from '../shared'
-import { LastOrders } from '../LastOrders'
-
-import {
-  HelpSubItem,
-  LastOrdersContainer
-} from './styles'
-
-export const Help = (props: HelpParams) => {
-  const {
-    navigation
-  } = props
-  const [, t] = useLanguage()
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-  const onRedirect = (route: string, params?: any) => {
-    navigation.navigate(route, params)
-  }
-  return (
-    <>
-      <NavBar
-        title={t('HELP', 'Help')}
-        titleAlign={'center'}
-        onActionLeft={goToBack}
-        showCall={false}
-        paddingTop={10}
-        btnStyle={{ paddingLeft: 0 }}
-        isVertical
-      />
-      <HelpSubItem
-        onPress={() => onRedirect('HelpOrder')}
-      >
-        <OText size={14}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
-      </HelpSubItem>
-      <HelpSubItem
-        onPress={() => onRedirect('HelpAccountAndPayment')}      
-      >
-        <OText size={14}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
-      </HelpSubItem>
-      <HelpSubItem
-        onPress={() => onRedirect('HelpGuide')}
-      >
-        <OText size={14}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
-      </HelpSubItem>
-
-      <LastOrdersContainer>
-        <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders onRedirect={onRedirect} />
-      </LastOrdersContainer>
-    </>
-  )
-}

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

@@ -1,11 +0,0 @@
-import styled from 'styled-components/native'
-
-export const HelpSubItem = styled.TouchableOpacity`
-  border-bottom-color: #E9ECEF;
-  border-bottom-width: 1px;
-  padding-vertical: 15px;
-`
-
-export const LastOrdersContainer = styled.View`
-  margin-vertical: 30px;
-`

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

@@ -1,68 +0,0 @@
-import React from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { HelpParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
-
-import {
-  Content
-} from './styles'
-
-export const HelpAccountAndPayment = (props: HelpParams) => {
-  const {
-    navigation
-  } = props
-  const [, t] = useLanguage()
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
-    imageStyle: {
-      width: '100%',
-      height: 300,
-      marginVertical: 20
-    },
-  })
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-
-  return (
-    <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-      />
-      <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
-      <Content>
-        <OText mBottom={20}>
-          -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
-        </OText>
-        <OText mBottom={20}>
-          -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
-        </OText>
-        <OText mBottom={20}>
-          -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
-        </OText>
-        <OText>
-          -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque.
-        </OText>
-        <OIcon
-          src={theme.images.general.help}
-          style={styles.imageStyle}
-          cover
-        />
-      </Content>
-    </>
-  )
-}

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

@@ -1,6 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Content = styled.View`
-  padding-vertical: 20px;
-  margin-bottom: 20px;
-`

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

@@ -1,67 +0,0 @@
-import React from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { HelpParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
-import {
-  Content
-} from './styles'
-
-export const HelpGuide = (props: HelpParams) => {
-  const {
-    navigation
-  } = props
-  const [, t] = useLanguage()
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
-    imageStyle: {
-      width: '100%',
-      height: 120,
-      marginVertical: 20
-    },
-  })
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-
-  return (
-    <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-      />
-      <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
-      <Content>
-        <OText mBottom={15}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
-        </OText>
-        <OText mBottom={15}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
-        </OText>
-        <OText mBottom={15}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
-        </OText>
-        <OText>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit mauris varius faucibus varius condimentum morbi pretium mus. Aliquam bibendum erat venenatis feugiat sed.
-        </OText>
-        <OIcon
-          src={theme.images.general.help}
-          style={styles.imageStyle}
-          cover
-        />
-      </Content>
-    </>
-  )
-}

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

@@ -1,6 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Content = styled.View`
-  padding-vertical: 20px;
-  margin-bottom: 20px;
-`

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

@@ -1,79 +0,0 @@
-import React from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { HelpParams } from '../../types'
-import { OText, OButton, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
-import { WebView } from 'react-native-webview'
-
-import {
-  Content
-} from './styles'
-
-export const HelpOrder = (props: HelpParams) => {
-  const {
-    navigation
-  } = props
-  const [, t] = useLanguage()
-  const theme = useTheme()
-
-  const styles = StyleSheet.create({
-    btnBackArrow: {
-      borderWidth: 0,
-      backgroundColor: theme.colors.white,
-      borderColor: theme.colors.white,
-      shadowColor: theme.colors.white,
-      display: 'flex',
-      justifyContent: 'flex-start',
-      paddingLeft: 0,
-    },
-    imageStyle: {
-      width: '100%',
-      height: 120
-    },
-    videoStyle: {
-      height: 200,
-      marginVertical: 20
-    }
-  })
-
-  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
-
-  return (
-    <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
-      />
-      <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
-      <Content>
-        <OText mBottom={20}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque. Sed tempus et, cursus ultricies nisl nisl, in eros.
-          Velit sollicitudin vestibulum massa porttitor sit sed vestibulum turpis.
-          Id id adipiscing sit bibendum aliquet at suspendisse. Posuere felis nec non pulvinar in.
-        </OText>
-        <OIcon
-          src={theme.images.general.help}
-          style={styles.imageStyle}
-          cover
-        />
-        <OText style={{ marginVertical: 20 }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vel in congue nisl, nisi. Mauris, condimentum auctor sed cras cursus arcu pellentesque. Sed tempus et, cursus ultricies nisl nisl, in eros.
-          Velit sollicitudin vestibulum massa porttitor sit sed vestibulum turpis.
-          Id id adipiscing sit bibendum aliquet at suspendisse. Posuere felis nec non pulvinar in.
-        </OText>
-        <WebView
-          allowsFullscreenVideo
-          allowsInlineMediaPlayback
-          mediaPlaybackRequiresUserAction
-          cacheEnabled={false}
-          cacheMode='LOAD_NO_CACHE'
-          source={{ uri: 'https://www.youtube-nocookie.com/embed/Bi8WLLRzZ1g' }}
-          style={styles.videoStyle}
-        />
-      </Content>
-    </>
-  )
-}

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

@@ -1,6 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Content = styled.View`
-  padding-vertical: 20px;
-  margin-bottom: 20px;
-`

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

@@ -1,102 +0,0 @@
-import React from 'react';
-import { useLanguage, useOrder } from 'ordering-components/native';
-import { useTheme } from 'styled-components/native';
-import { StyleSheet, View } from 'react-native';
-import { OButton, OIcon, OText } from '../shared';
-import { LanguageSelector } from '../LanguageSelector';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import { useWindowDimensions } from 'react-native';
-
-export const Home = (props: any) => {
-	const { onNavigationRedirect, isSingleBusiness, singleBusiness } = props;
-	const { width } = useWindowDimensions();
-	const [, t] = useLanguage();
-	const [orderState] = useOrder();
-
-	const theme = useTheme();
-
-	return (
-		<View style={styles.container}>
-			<View>
-				<LanguageSelector />
-				<OIcon
-					src={theme.images.logos.logotypeInvert}
-					style={{
-						...styles.logo,
-						resizeMode: 'contain',
-						width: width - 80,
-						height: (width - 80) * 0.25,
-					}}
-				/>
-			</View>
-			<View style={styles.wrapperBtn}>
-				<OText color={theme.colors.white} size={40}>
-					{t('WELCOME', 'Welcome!')}
-				</OText>
-				<OText color={theme.colors.white} size={14} style={{ marginBottom: 46 }}>
-					{t('LETS_START_ORDER', "Let's start to order now")}
-				</OText>
-				<OButton
-					text={t('LOGIN', 'Login')}
-					bgColor={theme.colors.primary}
-					borderColor={theme.colors.primary}
-					style={styles.buttons}
-					isCircle={false}
-					textStyle={{ color: 'white' }}
-					onClick={() => onNavigationRedirect('Login')}
-					imgRightSrc={null}
-				/>
-				<OButton
-					text={t('SIGNUP', 'Signup')}
-					bgColor={theme.colors.primaryContrast}
-					borderColor={theme.colors.primaryContrast}
-					style={styles.buttons}
-					onClick={() => onNavigationRedirect('Signup')}
-					imgRightSrc={null}
-				/>
-				<TouchableOpacity
-					style={{ ...styles.textLink, marginTop: 12 }}
-					onPress={() =>
-						orderState?.options?.address?.address
-							? isSingleBusiness ? onNavigationRedirect('Business', { store: singleBusiness }) : onNavigationRedirect('BusinessList', { isGuestUser: true })
-							: onNavigationRedirect('AddressForm', { isGuestUser: true })
-					}>
-					<OText weight="normal" size={18} color={theme.colors.white}>
-						{t('CONTINUE_AS_GUEST', 'Continue as guest')}
-					</OText>
-				</TouchableOpacity>
-			</View>
-		</View>
-	);
-};
-
-const styles = StyleSheet.create({
-	textLink: {
-		flexDirection: 'row',
-		textAlign: 'center',
-		justifyContent: 'center',
-		alignItems: 'center',
-	},
-	container: {
-		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'space-between',
-		paddingHorizontal: 40,
-	},
-	logo: {
-		marginTop: 64,
-	},
-	buttons: {
-		marginVertical: 6,
-		borderRadius: 7.6,
-	},
-	sloganText: {
-		textAlign: 'center',
-	},
-	wrapperBtn: {
-		width: '100%',
-		position: 'absolute',
-		bottom: 0,
-		marginBottom: 20,
-	},
-});

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

@@ -1,18 +0,0 @@
-import styled from 'styled-components/native';
-
-export const Container = styled.View`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-`
-
-export const LogoWrapper = styled.View`
-  align-items: center;
-`;
-
-export const Slogan = styled.View`
-  align-items: center;
-  margin-bottom: 10px;
-`;

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

@@ -1,98 +0,0 @@
-import React, { useCallback } from 'react'
-import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
-import { useTheme } from 'styled-components/native';
-import { Platform, StyleSheet, View } from 'react-native'
-
-import RNPickerSelect from 'react-native-picker-select'
-import { Container } from './styles'
-import { LanguageSelectorParams } from '../../types'
-import { OIcon } from '../shared'
-
-const LanguageSelectorUI = (props: LanguageSelectorParams) => {
-
-	const [orderState] = useOrder()
-
-	const theme = useTheme();
-
-	const _pickerStyle = StyleSheet.create({
-		inputAndroid: {
-			color: theme.colors.white,
-			borderWidth: 1,
-			borderColor: theme.colors.clear,
-			paddingHorizontal: 10,
-			paddingEnd: 24,
-			height: 40,
-			backgroundColor: theme.colors.clear,
-		},
-		inputIOS: {
-			color: theme.colors.white,
-			paddingEnd: 24,
-			height: 40,
-			borderWidth: 1,
-			borderColor: theme.colors.clear,
-			backgroundColor: theme.colors.clear
-		},
-		icon: {
-			width: 10,
-			marginTop: 9,
-			marginEnd: 10
-		},
-		placeholder: {
-			color: theme.colors.secundaryContrast
-		}
-	})
-
-	const {
-		languagesState,
-		currentLanguage,
-		handleChangeLanguage,
-		iconColor,
-		pickerStyle
-	} = props
-
-	const _languages = languagesState?.languages?.map((language: any) => {
-		return {
-			value: language?.code,
-			label: language?.name,
-			inputLabel: language?.name
-		}
-	})
-	_languages && _languages.sort((a: any, b: any) =>
-		(a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
-	)
-
-  const changeLang = useCallback((lang) => {
-		if (lang !== currentLanguage || orderState.loading)	{
-			handleChangeLanguage(lang);
-		}
-	}, []);
-
-	return (
-		<Container>
-			{languagesState?.languages && (
-				<>
-					{iconColor && <OIcon src={theme.images.general.language} color={iconColor} style={{ marginEnd: 14 }} width={16} />}
-					<RNPickerSelect
-						onValueChange={changeLang}
-						items={_languages || []}
-						value={currentLanguage}
-						style={pickerStyle ? pickerStyle : _pickerStyle}
-						useNativeAndroidPickerStyle={false}
-						placeholder={{}}
-						Icon={() => <View style={pickerStyle ? pickerStyle.icon : _pickerStyle.icon}><OIcon src={theme.images.general.arrow_down} color={theme.colors.white} style={{ width: '100%' }} /></View>}
-						disabled={orderState.loading}
-					/>
-				</>
-			)}
-		</Container>
-	)
-}
-
-export const LanguageSelector = (props: LanguageSelectorParams) => {
-	const LanguageProps = {
-		...props,
-		UIComponent: LanguageSelectorUI
-	}
-
-	return <LanguageSelectorController {...LanguageProps} />
-}

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

@@ -1,7 +0,0 @@
-import styled from 'styled-components/native'
-
-export const Container = styled.View`
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
-`