ordering-ui-react-native 0.12.99 → 0.13.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.99",
+  "version": "0.13.3",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/DeliveryApp.tsx

@@ -25,13 +25,30 @@ import AppContainer from './AppContainer';
 Sentry.init({
   environment: Platform.OS === 'ios' ? 'ios' : 'android',
   dsn: 'https://90197fffe6a1431b8c3eb79e1e36f0ee@o460529.ingest.sentry.io/5722123',
-  release: process.env.npm_package_version ? 'ordering-ui-native@' + process.env.npm_package_version : 'ordering-ui-native@' + '0.0.2',
+  release: process.env.npm_package_version ? 'ordering-ui-native@' + process.env.npm_package_version : 'ordering-ui-native@' + '0.0.4',
   ignoreErrors: [
     'is not defined',
     'is not a function',
     'can\'t find variable',
     'objects are not valid',
-    'element type is invalid'
+    'element type is invalid',
+    'requiring module',
+    'has not been registered',
+    'failed to connect to debugger!',
+    'rendered more hooks than',
+    'rendered fewer hooks than',
+    'should have a queue',
+    'the OS most likely terminated',
+    'Connection timed out',
+    'java.io.EOFException',
+    'Abort',
+    'Segfault',
+    'Failed to allocate a',
+    'Application Not Responding',
+    'connection no longer valid',
+    'IllegalInstruction',
+    'React.Children.only expected to receive a single React element child.',
+    'unrecognized selector sent to instance'
   ],
 });
 

package/src/components/BusinessProductsListing/index.tsx

@@ -191,7 +191,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
           <>
             {!(business?.categories?.length === 0) && (
               <BusinessProductsCategories
-                categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)]}
+                categories={[{ id: null, name: t('ALL', 'All') }, { id: 'featured', name: t('FEATURED', 'Featured') }, ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)]}
                 categorySelected={categorySelected}
                 onClickCategory={handleChangeCategory}
                 featured={featuredProducts}
@@ -203,7 +203,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
                 categories={[
                   { id: null, name: t('ALL', 'All') },
                   { id: 'featured', name: t('FEATURED', 'Featured') },
-                  ...business?.categories.sort((a: any, b: any) => a.rank - b.rank)
+                  ...business?.categories?.sort((a: any, b: any) => a.rank - b.rank)
                 ]}
                 category={categorySelected}
                 categoryState={categoryState}

package/src/components/ReviewProducts/index.tsx

@@ -67,7 +67,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
         <NavBar
           title={t('REVIEW_PRODUCT', 'Review product')}
           titleAlign={'center'}
-          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          onActionLeft={() => onNavigationRedirect('MyOrders')}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
           paddingTop={0}

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

@@ -52,8 +52,8 @@ export const Home = (props: any) => {
 			marginTop: 10
 		},
 		slogan: {
-			height: w - 80,
-			width: w - 80
+			height: w * 0.6,
+			width: w * 0.6
 		},
 		buttons: {
 			marginVertical: 8.5,
@@ -83,7 +83,8 @@ export const Home = (props: any) => {
 
 	const loginProps = {
 		navigation,
-		useLoginByCellphone: false,
+		useLoginByCellphone: true,
+    useLoginByEmail: true,
 		loginButtonText: t('SIGN_IN', 'Sign in'),
 		loginButtonBackground: theme.colors.primary,
 		forgotButtonText: t('FORGOT_YOUR_PASSWORD', 'Forgot your password?'),

package/themes/doordash/src/components/LoginForm/index.tsx

@@ -14,7 +14,8 @@ import {
 } from 'ordering-components/native';
 
 import { FacebookLogin } from '../FacebookLogin';
-import { VerifyPhone } from '../VerifyPhone';
+import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
+import { OModal } from '../../../../../src/components/shared';
 
 import {
 	Container,
@@ -33,7 +34,7 @@ import {
 import { _removeStoreData } from '../../providers/StoreUtil';
 import NavBar from '../NavBar'
 
-import { OText, OButton, OInput, OModal, OIcon } from '../shared';
+import { OText, OButton, OInput, OIcon } from '../shared';
 import { LoginParams } from '../../types';
 import { useTheme } from 'styled-components/native';
 import { useWindowDimensions } from 'react-native';
@@ -65,8 +66,23 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const loginStyle = StyleSheet.create({
 		btnOutline: {
-			backgroundColor: '#FFF',
-			color: theme.colors.primary
+			backgroundColor: 'red',
+			color: theme.colors.primary,
+      // backgroundColor: '#EFEFEF',
+      borderColor: '#EFEFEF',
+      borderRadius: 30,
+      fontSize: 16,
+      paddingVertical: 15,
+      paddingHorizontal: 30,
+      fontWeight: '400',
+      textAlign: 'center',
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      height: 52,
 		},
 		inputStyle: {
 			marginBottom: 25,
@@ -246,7 +262,7 @@ const LoginFormUI = (props: LoginParams) => {
 							{useLoginByEmail && (
 								<Pressable onPress={() => handleChangeTab('email')}>
 									<OTab>
-										<OText size={18} color={loginTab === 'email' ? theme.colors.primary : theme.colors.disabled}>
+										<OText size={16} color={loginTab === 'email' ? theme.colors.primary : theme.colors.disabled}>
 											{t('LOGIN_BY_EMAIL', 'Login by Email')}
 										</OText>
 									</OTab>
@@ -255,7 +271,7 @@ const LoginFormUI = (props: LoginParams) => {
 							{useLoginByCellphone && (
 								<Pressable onPress={() => handleChangeTab('cellphone')}>
 									<OTab>
-										<OText size={18} color={loginTab === 'cellphone' ? theme.colors.primary : theme.colors.disabled}>
+										<OText size={16} color={loginTab === 'cellphone' ? theme.colors.primary : theme.colors.disabled}>
 											{t('LOGIN_BY_PHONE', 'Login by Phone')}
 										</OText>
 									</OTab>
@@ -264,15 +280,10 @@ const LoginFormUI = (props: LoginParams) => {
 						</OTabs>
 					</LoginWith>
 				)}
-				{/* Social login button group */}
-				{configs && Object.keys(configs).length > 0 && 
+				{configs && Object.keys(configs).length > 0 &&
 					(
 						<>
 							<ButtonsWrapper>
-								{/* <OText size={18} mBottom={10} color={theme.colors.disabled}>
-								{t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
-							</OText> */}
-
 								<SocialButtons>
 									<FacebookLogin
 										notificationState={notificationState}
@@ -301,8 +312,48 @@ const LoginFormUI = (props: LoginParams) => {
 										handleSuccessAppleLogin={handleSuccessApple}
 									/>
 								</SocialButtons>
-								<OText style={{ ...theme.labels.normal, textAlign: 'center', marginBottom: 8 } as TextStyle} color={theme.colors.textSecondary}>{t('OR_CONTINUE_WITH_EMAIL', 'or continue with email')}</OText>
+                {loginTab !== 'cellphone' && (
+                  <OText
+                    style={{ ...theme.labels.normal, textAlign: 'center', marginBottom: 8 } as TextStyle}
+                    color={theme.colors.textSecondary}
+                  >
+                    {t('OR_CONTINUE_WITH_EMAIL', 'or continue with email')}
+                  </OText>
+                )}
 							</ButtonsWrapper>
+
+              {useLoginByCellphone &&
+                loginTab === 'cellphone' &&
+                configs && Object.keys(configs).length > 0 &&
+                (configs?.twilio_service_enabled?.value === 'true' ||
+                  configs?.twilio_service_enabled?.value === '1') &&
+                configs?.twilio_module?.value &&
+                (
+                  <>
+                    <OrSeparator>
+                      <LineSeparator />
+                      <OText size={16} mRight={20} mLeft={20}>
+                        {t('OR', 'Or')}
+                      </OText>
+                      <LineSeparator />
+                    </OrSeparator>
+
+                    <ButtonsWrapper mBottom={20}>
+                      <OButton
+                        onClick={handleVerifyCodeClick}
+                        text={t('GET_VERIFY_CODE', 'Get Verify Code')}
+                        bgColor={theme.colors.primary}
+                        borderColor={theme.colors.primary}
+                        textStyle={{ color: 'white', ...theme.labels.middle } as TextStyle}
+                        imgRightSrc={null}
+                        isLoading={isLoadingVerifyModal}
+                        indicatorColor={theme.colors.white}
+                        style={{ marginTop: 0, height: 40, shadowOpacity: 0 }}
+                      />
+                    </ButtonsWrapper>
+                  </>
+                )
+              }
 							<View style={{ height: 1, backgroundColor: theme.colors.border, width: width }} />
 						</>
 					)
@@ -349,19 +400,26 @@ const LoginFormUI = (props: LoginParams) => {
 							</InputWrapper>
 						)}
 						{useLoginByCellphone && loginTab === 'cellphone' && (
-							<View style={{ marginBottom: 25 }}>
-								<PhoneInputNumber
-									data={phoneInputData}
-									handleData={(val: any) => setPhoneInputData(val)}
-									textInputProps={{
-										returnKeyType: 'next',
-										onSubmitEditing: () => inputRef?.current?.focus?.(),
-									}}
-								/>
-							</View>
+              <>
+                <InputWrapper style={{ marginVertical: 20 }}>
+                  <OText style={{ ...loginStyle.inputHead, ...theme.labels.middle, alignSelf: 'center' } as TextStyle}>{t('PHONE', 'Phone')}</OText>
+                  <PhoneInputNumber
+                    wrapStyle={{ marginTop: 0 }}
+                    data={phoneInputData}
+                    handleData={(val: any) => setPhoneInputData(val)}
+                    textInputProps={{
+                      returnKeyType: 'next',
+                      onSubmitEditing: () => inputRef?.current?.focus?.(),
+                      style: { borderWidth: 0, fontSize: 12 }
+                    }}
+                    textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
+                  />
+                </InputWrapper>
+                <View style={{ height: 1, backgroundColor: theme.colors.border, marginHorizontal: -40 }} />
+              </>
 						)}
 						<View style={{ height: 1, backgroundColor: theme.colors.border, width: width, marginStart: -40 }} />
-						<InputWrapper>
+						<InputWrapper style={loginTab === 'cellphone' && { marginVertical: 20 }}>
 							<Pressable onPress={() => inputRef.current?.focus()} style={{...loginStyle.inputHead, justifyContent: 'center', minHeight: 40}}> 
 								<OText style={{ ...theme.labels.middle } as TextStyle}>{t('PASSWORD', 'Password')}</OText>
 							</Pressable>
@@ -400,7 +458,7 @@ const LoginFormUI = (props: LoginParams) => {
 							textStyle={{ color: 'white', ...theme.labels.middle } as TextStyle}
 							imgRightSrc={null}
 							isLoading={formState.loading}
-							style={{ marginTop: 48, height: 40, shadowOpacity: 0 }}
+							style={{ marginTop: 28, height: 40, shadowOpacity: 0 }}
 						/>
 					</FormInput>
 				)}
@@ -413,36 +471,6 @@ const LoginFormUI = (props: LoginParams) => {
 					</Pressable>
 				)}
 
-				{useLoginByCellphone &&
-					loginTab === 'cellphone' &&
-					configs && Object.keys(configs).length > 0 &&
-					(configs?.twilio_service_enabled?.value === 'true' ||
-						configs?.twilio_service_enabled?.value === '1') &&
-					(
-						<>
-							<OrSeparator>
-								<LineSeparator />
-								<OText size={18} mRight={20} mLeft={20}>
-									{t('OR', 'Or')}
-								</OText>
-								<LineSeparator />
-							</OrSeparator>
-
-							<ButtonsWrapper mBottom={20}>
-								<OButton
-									onClick={handleVerifyCodeClick}
-									text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-									borderColor={theme.colors.primary}
-									style={loginStyle.btnOutline}
-									imgRightSrc={null}
-									isLoading={isLoadingVerifyModal}
-									indicatorColor={theme.colors.primary}
-								/>
-							</ButtonsWrapper>
-						</>
-					)
-				}
-
 				{onNavigationRedirect && registerButtonText && (
 					<ButtonsWrapper>
 						<OButton
@@ -456,10 +484,11 @@ const LoginFormUI = (props: LoginParams) => {
 				)}
 			</FormSide>
 			<OModal
-				open={isModalVisible}
-				onClose={() => setIsModalVisible(false)}
-				overScreen
-			>
+        open={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
+        entireModal
+        title={t('VERIFY_PHONE', 'Verify Phone')}
+      >
 				<VerifyPhone
 					phone={phoneInputData.phone}
 					verifyPhoneState={verifyPhoneState}
@@ -467,6 +496,7 @@ const LoginFormUI = (props: LoginParams) => {
 					handleCheckPhoneCode={handleCheckPhoneCode}
 					setCheckPhoneCodeState={setCheckPhoneCodeState}
 					handleVerifyCodeClick={handleVerifyCodeClick}
+          onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
 			<Spinner visible={isFBLoading} />

package/themes/doordash/src/components/LoginForm/styles.tsx

@@ -2,7 +2,6 @@ import styled, { css } from 'styled-components/native';
 
 export const Container = styled.View`
   padding-bottom: 40px;
-  padding-top: 24px;
 `
 
 export const FormSide = styled.View`
@@ -25,6 +24,7 @@ export const OTab = styled.View`
 
 export const LoginWith = styled.View`
   font-size: 14px;
+  padding-bottom: 10px;
 `;
 
 export const FormInput = styled.View`
@@ -56,7 +56,7 @@ export const OrSeparator = styled.View`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 `
 
 export const LineSeparator = styled.View`
@@ -69,10 +69,10 @@ export const SkeletonWrapper = styled.View`
   width: 90%;
 `
 export const InputWrapper = styled.View`
-	flex-direction: row;
-	align-items: flex-start;
-	height: 40px;
-	max-height: 40px;
-	margin-vertical: 6px;
   justify-content: space-between;
+  flex-direction: row;
+  align-items: flex-start;
+	min-height: 40px;
+  max-height: 40px;
+  margin-vertical: 6px;
 `;

package/themes/doordash/src/components/PhoneInputNumber/index.tsx

@@ -84,7 +84,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 	}, [userphoneNumber])
 
 	return (
-		<Wrapper>
+		<Wrapper style={props.wrapStyle}>
 			<PhoneInput
 				ref={phoneInput}
 				defaultValue={userphoneNumber || defaultValue}

package/themes/doordash/src/components/PreviousOrders/index.tsx

@@ -60,7 +60,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
 	}
 
 	const handleClickOrderReview = (order: any) => {
-		onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo } })
+		onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo, products: order?.products } })
 	}
 
 	const handleReorderClick = (id: number) => {

package/themes/doordash/src/components/ProductForm/index.tsx

@@ -8,7 +8,7 @@ import {
 } from 'ordering-components/native'
 import { ProductIngredient } from '../ProductIngredient'
 import { ProductOption } from '../ProductOption'
-import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform } from 'react-native'
+import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform, KeyboardAvoidingView } from 'react-native'
 import {
 	ProductHeader,
 	WrapHeader,
@@ -137,7 +137,11 @@ export const ProductOptionsUI = (props: any) => {
 	const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
 
 	return (
-		<>
+		<KeyboardAvoidingView
+			style={{ flex: 1 }}
+			behavior={Platform.OS ? 'padding' : 'height'}
+			enabled={Platform.OS === 'ios'}
+		>
 			<ScrollView style={styles.mainContainer}>
 				{!error && (
 					<View style={{ paddingBottom: 80 }}>
@@ -286,7 +290,7 @@ export const ProductOptionsUI = (props: any) => {
 										/>
 									</ProductComment>
 									{productCart && !isSoldOut && maxProductQuantity > 0 && (
-										<View style={{ paddingVertical: 4 }}>
+										<View style={{ paddingVertical: 4, marginBottom: 10 }}>
 											<SectionTitle>
 												<OText style={theme.labels.middle as TextStyle}>{t('PREFERENCES', 'Preferences')}</OText>
 											</SectionTitle>
@@ -335,6 +339,7 @@ export const ProductOptionsUI = (props: any) => {
 							textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
 							textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
 							style={{
+								bottom: 5,
 								backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
 								borderWidth: 1, shadowOpacity: 0, height: 40,
 								borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
@@ -361,13 +366,13 @@ export const ProductOptionsUI = (props: any) => {
 								text={isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', 'Sold out') : t('LOGIN_SIGNUP', 'Login / Sign Up')}
 								imgRightSrc=''
 								textStyle={{ color: theme.colors.primary, ...theme.labels.middle }}
-								style={{ height: 40, borderWidth: 1, borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
+								style={{ bottom: 5, marginTop: 2, height: 40, borderWidth: 1, borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
 							/>
 						)}
 					</View>
 				</ProductActions>
 			)}
-		</>
+		</KeyboardAvoidingView>
 	)
 }
 

package/themes/doordash/src/types/index.tsx

@@ -107,6 +107,7 @@ export interface PhoneInputParams {
   countryButtonStyle?: ViewStyle;
   textWrapStyle?: ViewStyle;
   renderDropImage?: any;
+  wrapStyle?: any;
 }
 
 export interface LanguageSelectorParams {

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

@@ -57,6 +57,7 @@ export const Home = (props: any) => {
 	const loginProps = {
 		navigation,
 		useLoginByCellphone: true,
+    useLoginByEmail: true,
 		loginButtonText: t('LOGIN', 'Login'),
 		loginButtonBackground: theme.colors.primary,
 		forgotButtonText: t('FORGOT_YOUR_PASSWORD', 'Forgot your password?'),

package/themes/instacart/src/components/LoginForm/index.tsx

@@ -14,7 +14,8 @@ import {
 } from 'ordering-components/native';
 
 import { FacebookLogin } from '../FacebookLogin';
-import { VerifyPhone } from '../VerifyPhone';
+import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
+import { OModal } from '../../../../../src/components/shared';
 
 import {
 	Container,
@@ -33,7 +34,7 @@ import {
 import { _removeStoreData } from '../../providers/StoreUtil';
 import NavBar from '../NavBar'
 
-import { OText, OButton, OInput, OModal } from '../shared';
+import { OText, OButton, OInput } from '../shared';
 import { LoginParams } from '../../types';
 import { useTheme } from 'styled-components/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -362,24 +363,23 @@ const LoginFormUI = (props: LoginParams) => {
 				</OrSeparator>
 
 				{useLoginByCellphone &&
-					loginTab === 'cellphone' &&
-					configs && Object.keys(configs).length > 0 &&
-					(configs?.twilio_service_enabled?.value === 'true' ||
-						configs?.twilio_service_enabled?.value === '1') &&
+          loginTab === 'cellphone' &&
+          configs && Object.keys(configs).length > 0 &&
+          (configs?.twilio_service_enabled?.value === 'true' ||
+            configs?.twilio_service_enabled?.value === '1') &&
+          configs?.twilio_module?.value &&
 					(
-						<>
-							<ButtonsWrapper mBottom={20}>
-								<OButton
-									onClick={handleVerifyCodeClick}
-									text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-									borderColor={theme.colors.primary}
-									style={loginStyle.btnOutline}
-									imgRightSrc={null}
-									isLoading={isLoadingVerifyModal}
-									indicatorColor={theme.colors.primary}
-								/>
-							</ButtonsWrapper>
-						</>
+            <ButtonsWrapper mBottom={20}>
+              <OButton
+                onClick={handleVerifyCodeClick}
+                text={t('GET_VERIFY_CODE', 'Get Verify Code')}
+                borderColor={theme.colors.primary}
+                style={loginStyle.btnOutline}
+                imgRightSrc={null}
+                isLoading={isLoadingVerifyModal}
+                indicatorColor={theme.colors.primary}
+              />
+            </ButtonsWrapper>
 					)
 				}
 
@@ -417,6 +417,8 @@ const LoginFormUI = (props: LoginParams) => {
 			<OModal
 				open={isModalVisible}
 				onClose={() => setIsModalVisible(false)}
+        entireModal
+        title={t('VERIFY_PHONE', 'Verify Phone')}
 			>
 				<VerifyPhone
 					phone={phoneInputData.phone}
@@ -425,6 +427,7 @@ const LoginFormUI = (props: LoginParams) => {
 					handleCheckPhoneCode={handleCheckPhoneCode}
 					setCheckPhoneCodeState={setCheckPhoneCodeState}
 					handleVerifyCodeClick={handleVerifyCodeClick}
+          onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
 			<Spinner visible={isFBLoading} />

package/themes/kiosk/src/components/BusinessMenu/index.tsx

@@ -56,9 +56,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
     clearTimeout(timerId.current);
     timerId.current = setTimeout(() => {
       setClearCart(true)
-      navigation.reset({
-        routes: [{ name: 'Intro' }],
-      })
+      navigation.navigate('Intro')
     }, 60000*2);
   }, []);
   

package/themes/kiosk/src/components/BusinessProductsListing/index.tsx

@@ -1,14 +1,12 @@
 import React from 'react'
-import { View, StyleSheet } from 'react-native'
+import { View, StyleSheet, ScrollView, TouchableOpacity } from 'react-native'
 import { BusinessAndProductList, useLanguage } from 'ordering-components/native'
-import Carousel from 'react-native-snap-carousel';
-import { BusinessProductsListingParams, Business, Product } from '../../types'
+import { BusinessProductsListingParams, Business } from '../../types'
 import { OCard, OText, OIcon } from '../shared'
 import GridContainer from '../../layouts/GridContainer'
-import PromoCard from '../PromoCard';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
-import { useTheme } from 'styled-components/native';
+import styled, { useTheme } from 'styled-components/native';
 
 const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const {navigation, businessState, resetInactivityTimeout, clearInactivityTimeout, bottomSheetVisibility } = props;
@@ -18,6 +16,27 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
+  const WIDTH_SCREEN = orientationState?.dimensions?.width
+
+  const styles = StyleSheet.create({
+    logo: {
+      width: 500,
+      height: 400,
+      alignSelf: 'center',
+    },
+    soldOut: {
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      width: WIDTH_SCREEN * 0.15,
+      height: 50,
+      justifyContent: 'center',
+      backgroundColor: theme.colors.white,
+      alignItems: 'center',
+      borderRadius: 15,
+      opacity: 0.8,
+    },
+  });
 
   const _categories: any = business?.original?.categories;
   let _promos: any = [];
@@ -39,13 +58,30 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     </View>
   );
 
-  const _renderItem = ({item, index}: {item: Product; index: number}) => {
+  const RenderCategories = ({ item, cardStyle, widthScreen }: any) => {
+    const Category = styled.ImageBackground`
+      position: relative;
+      height: 150px;
+      width: ${(props: any) => props.w * 0.45}px;
+      border-radius: 10px;
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    `
+    const WrapText = styled.View`
+      height: 90px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 10px;
+    `
+
     return (
-      <PromoCard
-        title={item?.name}
-        {...(!!item?.description && {description: item?.description})}
-        image={{uri: item?.images}}
-        isOutOfStock={!item?.inventoried}
+      <TouchableOpacity
+        key={item.id}
+        activeOpacity={1}
         onPress={() => {
           resetInactivityTimeout()
           navigation.navigate('ProductDetails', {
@@ -54,37 +90,71 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
             product: item,
           });
         }}
-      />
-    );
-  };
-
-  let _carousel: Carousel<Product> | null;
+      >
+        <Category
+          style={cardStyle}
+          source={{uri: item.images}}
+          resizeMode="cover"
+          w={widthScreen}
+          borderRadius={16}
+        >
+          {item?.inventoried && (
+            <View style={styles.soldOut}>
+              <OText size={28} color={theme.colors.error}>
+                {t('SOLD_OUT', 'SOLD OUT')}
+              </OText>
+            </View>
+          )}
+          <WrapText>
+            <OText
+              color={theme.colors.white}
+              mLeft={0}
+              size={32}
+              numberOfLines={1}
+              // mBottom={8}
+              style={{...props?.titleStyle}}
+              weight="bold"
+            >
+              {item.name}
+            </OText>
+            {!!item?.description && (
+              <OText
+                color={theme.colors.white}
+                numberOfLines={1}
+                // mBottom={4}
+                size={18}
+                style={{...props?.descriptionStyle}}
+                weight="400"
+              >
+                {item.description}
+              </OText>
+            )}
+          </WrapText>
+        </Category>
+      </TouchableOpacity>
+    )
+  }
 
   const _renderPromos = (): React.ReactElement => (
     <>
       {_renderTitle(t('FEATURED', 'Featured'))}
-      <Carousel
-        keyExtractor={(item: any) => item.id}
-        ref={(c: any) => {
-          _carousel = c;
-        }}
-        data={_promos || []}
-        renderItem={_renderItem}
-        sliderWidth={orientationState?.dimensions?.width}
-        itemWidth={orientationState?.dimensions?.width * 0.4}
-        alwaysBounceHorizontal={false}
-        slideStyle={{
-          width: orientationState?.dimensions?.width * 0.45,
-          marginLeft: 20,
-        }}
-        inactiveSlideScale={1}
-        snapToAlignment="start"
-        activeSlideAlignment="start"
-        inactiveSlideOpacity={1}
-        initialScrollIndex={0}
-        onScrollToIndexFailed={(_: any) => {}}
-        enableMomentum={true}
-      />
+      <View style={{ paddingVertical: 20, marginLeft: 20, width: '100%' }}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          style={{ width: '100%' }}
+        >
+          {_promos.map((category: any) => (
+            <RenderCategories
+              key={category.id}
+              item={category}
+              widthScreen={WIDTH_SCREEN}
+              cardStyle={{ marginRight: 20 }}
+            />
+          ))}
+        </ScrollView>
+      </View>
     </>
   );
 
@@ -148,23 +218,6 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
   );
 };
 
-const styles = StyleSheet.create({
-  logo: {
-    width: 500,
-    height: 400,
-    alignSelf: 'center',
-  },
-  wrapper: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    backgroundColor: 'yellow'
-  },
-});
-
 export const BusinessProductsListing = (props: any) => {
   const businessProductslistingProps = {
     ...props,

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components/native'
 import { OIcon, OButton, OText } from '../shared'
 import { ImageStyle, TextStyle, View, Platform } from 'react-native'
 import { OrderTypeSelector } from '../OrderTypeSelector'
-import { useConfig } from 'ordering-components/native'
+import { useConfig, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View`
@@ -60,6 +60,7 @@ interface Props {
 const NavBar = (props: Props) => {
   const theme = useTheme();
   const [{ configs }] = useConfig();
+  const [, t] = useLanguage();
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || [];
 
   return (
@@ -113,7 +114,13 @@ const NavBar = (props: Props) => {
       </TitleTopWrapper>
 
       {props?.includeOrderTypeSelector && (
-        <View style={{ paddingHorizontal: props.rightComponent ? 4 : 20 }}>
+        <View
+          style={{
+            paddingHorizontal: props.rightComponent ? 4 : 20,
+            flexDirection: 'row'
+          }}
+        >
+          <OText style={{ paddingRight: 5 }}>{t('THIS_ORDER_IS_TO', 'This order is to')}</OText>
           <OrderTypeSelector configTypes={configTypes} />
         </View>
       )}

package/themes/kiosk/src/components/OrderTypeSelector/index.tsx

@@ -85,11 +85,11 @@ export const OrderTypeSelector = (props: any) => {
     orderTypes: props.orderType || [
       {
         value: 2,
-        content: `${t('THIS_ORDER_IS_TO', 'This order is to')} ${t('TAKE_OUT', 'Take out')}`
+        content: t('TAKE_OUT', 'Take out')
       },
       {
         value: 3,
-        content: `${t('THIS_ORDER_IS_TO', 'This order is to')} ${t('EAT_IN', 'Eat in')}`
+        content: t('EAT_IN', 'Eat in')
       },
     ]
   }

package/themes/kiosk/src/components/shared/OCard.tsx

@@ -44,7 +44,7 @@ const OCard = (props: Props): React.ReactElement => {
 			)}
 			<OImage
 				source={props.image}
-				height={Platform.OS === 'ios' ? 250 : 150}
+				height={120}
 				resizeMode="cover"
 				borderRadius={16}
 			/>

package/themes/kiosk/src/types/index.d.ts

@@ -15,6 +15,8 @@ export interface BusinessProductsListingParams {
   resetInactivityTimeout: any;
   clearInactivityTimeout: any;
   bottomSheetVisibility: any;
+  titleStyle: any;
+  descriptionStyle: any;
 }
 
 export interface OrderDetailsParams {

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

@@ -15,7 +15,9 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { FacebookLogin } from '../FacebookLogin';
-import { VerifyPhone } from '../VerifyPhone';
+import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
+import { OModal } from '../../../../../src/components/shared';
+
 
 import {
 	Container,
@@ -34,7 +36,7 @@ import {
 
 import NavBar from '../NavBar';
 
-import { OText, OButton, OInput, OModal, OIcon } from '../shared';
+import { OText, OButton, OInput, OIcon } from '../shared';
 import { LoginParams } from '../../types';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import { GoogleLogin } from '../GoogleLogin';
@@ -406,11 +408,11 @@ const LoginFormUI = (props: LoginParams) => {
 				)}
 
 				{useLoginByCellphone &&
-					loginTab === 'cellphone' &&
-					configs &&
-					Object.keys(configs).length > 0 &&
-					(configs?.twilio_service_enabled?.value === 'true' ||
-						configs?.twilio_service_enabled?.value === '1') && (
+          loginTab === 'cellphone' &&
+          configs && Object.keys(configs).length > 0 &&
+          (configs?.twilio_service_enabled?.value === 'true' ||
+            configs?.twilio_service_enabled?.value === '1') &&
+          configs?.twilio_module?.value && (
 						<>
 							<OrSeparator>
 								<LineSeparator />
@@ -515,7 +517,12 @@ const LoginFormUI = (props: LoginParams) => {
           </ButtonsWrapper>
         )} */}
 			</FormSide>
-			<OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
+			<OModal
+				open={isModalVisible}
+				onClose={() => setIsModalVisible(false)}
+        entireModal
+        title={t('VERIFY_PHONE', 'Verify Phone')}
+			>
 				<VerifyPhone
 					phone={phoneInputData.phone}
 					verifyPhoneState={verifyPhoneState}
@@ -523,6 +530,7 @@ const LoginFormUI = (props: LoginParams) => {
 					handleCheckPhoneCode={handleCheckPhoneCode}
 					setCheckPhoneCodeState={setCheckPhoneCodeState}
 					handleVerifyCodeClick={handleVerifyCodeClick}
+          onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
 			<Spinner visible={isFBLoading} />

package/themes/uber-eats/src/components/LoginForm/index.tsx

@@ -15,7 +15,8 @@ import {
 } from 'ordering-components/native';
 
 import { FacebookLogin } from '../FacebookLogin';
-import { VerifyPhone } from '../VerifyPhone';
+import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
+import { OModal } from '../../../../../src/components/shared';
 
 import {
   Container,
@@ -33,7 +34,7 @@ import {
 import { _removeStoreData } from '../../providers/StoreUtil';
 import NavBar from '../NavBar'
 
-import { OText, OButton, OInput, OModal } from '../shared';
+import { OText, OButton, OInput } from '../shared';
 import { LoginParams } from '../../types';
 import { useTheme } from 'styled-components/native';
 
@@ -363,6 +364,7 @@ const LoginFormUI = (props: LoginParams) => {
           configs && Object.keys(configs).length > 0 &&
           (configs?.twilio_service_enabled?.value === 'true' ||
             configs?.twilio_service_enabled?.value === '1') &&
+          configs?.twilio_module?.value &&
           (
             <>
               <OrSeparator>
@@ -409,6 +411,8 @@ const LoginFormUI = (props: LoginParams) => {
       <OModal
         open={isModalVisible}
         onClose={() => setIsModalVisible(false)}
+        entireModal
+        title={t('VERIFY_PHONE', 'Verify Phone')}
       >
         <VerifyPhone
           phone={phoneInputData.phone}
@@ -417,6 +421,7 @@ const LoginFormUI = (props: LoginParams) => {
           handleCheckPhoneCode={handleCheckPhoneCode}
           setCheckPhoneCodeState={setCheckPhoneCodeState}
           handleVerifyCodeClick={handleVerifyCodeClick}
+          onClose={() => setIsModalVisible(false)}
         />
       </OModal>
       <Spinner visible={isFBLoading} />