ordering-ui-react-native 0.12.33 → 0.12.37

package/themes/single-business/src/components/BusinessesListing/styles.tsx

@@ -19,22 +19,19 @@ export const Search = styled.View`
 
 export const AddressInput = styled.TouchableOpacity`
   flex-direction: row;
-  background-color: ${(props: any) => props.theme.colors.white};
-  border-radius: 22px;
-  padding-horizontal: 20px;
   align-items: center;
-  width: 100%;
+  justify-content: flex-start;
+  background-color: white;
+  padding-horizontal: 15px;
+  border-radius: 24px;
   height: 44px;
-  max-height: 44px;
+  min-height: 44px;
 `
 
 export const OrderControlContainer = styled.View`
   width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
   z-index: 10;
-  padding-bottom: 20px;
+  padding-top: 20px;
   flex: 1;
 `
 
@@ -53,8 +50,8 @@ export const WrapMomentOption = styled.TouchableOpacity`
 
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
-	height: 370px;
-	padding: 20px 40px;
+	height: 200px;
+	padding: 0px 40px 20px;
 	background-color: transparent;
 `;
 
@@ -65,6 +62,36 @@ export const ListWrapper = styled.View`
 
 export const FeaturedWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	height: 220px;
-	paddingVertical: 30px;
-`;
+	max-height: 220px;
+	paddingVertical: 20px;
+`;
+
+export const TopHeader = styled.View`
+  position: absolute;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  height: 34px;
+  min-height: 34px;
+`
+
+export const DropOptionButton = 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 WrapSearchBar = styled.View`
+  padding: 10px 30px;
+  margin-bottom: 10px;
+  background-color: ${(props: any) => props.theme.colors.white};
+  flex: 1;
+`

package/themes/single-business/src/components/HelpAccountAndPayment/index.tsx

@@ -8,6 +8,7 @@ import { StyleSheet } from 'react-native'
 import {
   Content
 } from './styles'
+import NavBar from '../NavBar'
 
 export const HelpAccountAndPayment = (props: HelpParams) => {
   const {
@@ -37,11 +38,11 @@ export const HelpAccountAndPayment = (props: HelpParams) => {
 
   return (
     <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
+      <NavBar
+        style={{ paddingBottom: 0, marginLeft:-20, backgroundColor: 'transparent' }}
+        btnStyle={{ backgroundColor: 'transparent' }}
+        leftImageStyle={{ tintColor: theme.colors.textThird }}
+        onActionLeft={() => goToBack()}
       />
       <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       <Content>
@@ -65,4 +66,4 @@ export const HelpAccountAndPayment = (props: HelpParams) => {
       </Content>
     </>
   )
-}
+}

package/themes/single-business/src/components/HelpGuide/index.tsx

@@ -7,6 +7,7 @@ import { StyleSheet } from 'react-native'
 import {
   Content
 } from './styles'
+import NavBar from '../NavBar'
 
 export const HelpGuide = (props: HelpParams) => {
   const {
@@ -36,11 +37,11 @@ export const HelpGuide = (props: HelpParams) => {
 
   return (
     <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
+      <NavBar
+        style={{ paddingBottom: 0, marginLeft:-20, backgroundColor: 'transparent' }}
+        btnStyle={{ backgroundColor: 'transparent' }}
+        leftImageStyle={{ tintColor: theme.colors.textThird }}
+        onActionLeft={() => goToBack()}
       />
       <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
@@ -64,4 +65,4 @@ export const HelpGuide = (props: HelpParams) => {
       </Content>
     </>
   )
-}
+}

package/themes/single-business/src/components/HelpOrder/index.tsx

@@ -9,6 +9,7 @@ import { WebView } from 'react-native-webview'
 import {
   Content
 } from './styles'
+import NavBar from '../NavBar'
 
 export const HelpOrder = (props: HelpParams) => {
   const {
@@ -41,11 +42,11 @@ export const HelpOrder = (props: HelpParams) => {
 
   return (
     <>
-      <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
-        imgRightSrc={null}
-        style={styles.btnBackArrow}
-        onClick={() => goToBack()}
+      <NavBar
+        style={{ paddingBottom: 0, marginLeft:-20, backgroundColor: 'transparent' }}
+        btnStyle={{ backgroundColor: 'transparent' }}
+        leftImageStyle={{ tintColor: theme.colors.textThird }}
+        onActionLeft={() => goToBack()}
       />
       <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <Content>
@@ -76,4 +77,4 @@ export const HelpOrder = (props: HelpParams) => {
       </Content>
     </>
   )
-}
+}

package/themes/single-business/src/components/LanguageSelector/index.tsx

@@ -2,6 +2,7 @@ import React 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 { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 
 import RNPickerSelect from 'react-native-picker-select'
 import { Container } from './styles'
@@ -10,83 +11,99 @@ import { OIcon } from '../shared'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
-	const [orderState] = useOrder()
+  const [orderState] = useOrder()
 
-	const theme = useTheme();
+  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 _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 {
+    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 _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)
+  )
 
-	return (
-		<Container>
-			{languagesState?.languages && (
-				<>
-					{iconColor && <OIcon src={theme.images.general.language} color={iconColor} style={{ marginEnd: 14 }} width={16} />}
-					<RNPickerSelect
-						onValueChange={handleChangeLanguage}
-						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>
-	)
+  return (
+    languagesState?.loading && props.allowLoading ? (
+      <Container>
+        <Placeholder style={{ width: 100, paddingTop: 10 }} Animation={Fade}>
+          <PlaceholderLine height={20} style={{ paddingBottom: 0, marginBottom: 0 }} />
+        </Placeholder>
+      </Container>
+    ) : (
+      <Container>
+        {languagesState?.languages ? (
+          <>
+            {iconColor && <OIcon src={theme.images.general.language} color={iconColor} style={{ marginEnd: 14 }} width={16} />}
+            <RNPickerSelect
+              onValueChange={handleChangeLanguage}
+              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}
+            />
+          </>
+        ) : (
+          <View style={{ height: 40 }} />
+        )}
+      </Container>
+    )
+  )
 }
 
 export const LanguageSelector = (props: LanguageSelectorParams) => {
-	const LanguageProps = {
-		...props,
-		UIComponent: LanguageSelectorUI
-	}
+  const LanguageProps = {
+    ...props,
+    UIComponent: LanguageSelectorUI
+  }
 
-	return <LanguageSelectorController {...LanguageProps} />
+  return <LanguageSelectorController {...LanguageProps} />
 }

package/themes/single-business/src/components/LoginForm/index.tsx

@@ -534,7 +534,7 @@ const LoginFormUI = (props: LoginParams) => {
                     handleLoading={(val: boolean) => setIsFBLoading(val)}
                     handleSuccessFacebookLogin={handleSuccessFacebook}
                   />
-                  <GoogleLogin
+                  {/* <GoogleLogin
                     handleErrors={(err: any) => showToast(ToastType.Error, err)}
                     handleLoading={(val: boolean) => setIsFBLoading(val)}
                     handleSuccessFacebookLogin={handleSuccessFacebook}
@@ -543,7 +543,7 @@ const LoginFormUI = (props: LoginParams) => {
                     handleErrors={(err: any) => showToast(ToastType.Error, err)}
                     handleLoading={(val: boolean) => setIsFBLoading(val)}
                     handleSuccessFacebookLogin={handleSuccessFacebook}
-                  />
+                  /> */}
                 </SocialButtons>
               </ButtonsWrapper>
             </>

package/themes/single-business/src/components/OrderDetails/index.tsx

@@ -36,13 +36,14 @@ import {
 	OrderDriver,
 	Map,
 } from './styles';
-import { OButton, OIcon, OModal, OText } from '../shared';
+import { OButton, OIcon, OModal, OText, OLink } from '../shared';
 import { ProductItemAccordion } from '../ProductItemAccordion';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { OrderDetailsParams } from '../../types';
 import { USER_TYPE } from '../../config/constants';
 import { GoogleMap } from '../GoogleMap';
 import { verifyDecimals } from '../../utils';
+import NavBar from '../NavBar';
 
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
 	const {
@@ -375,13 +376,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 			{order && Object.keys(order).length > 0 && (
 				<>
 					<Header>
-						<OButton
-							imgLeftSrc={theme.images.general.arrow_left}
-							imgRightSrc={null}
-							style={styles.btnBackArrow}
-							onClick={() => handleArrowBack()}
-							imgLeftStyle={{ tintColor: theme.colors.disabled, width: 20 }}
-						/>
+            <NavBar
+              style={{ paddingBottom: 0, marginLeft: -20, backgroundColor: 'transparent' }}
+              btnStyle={{ backgroundColor: 'transparent' }}
+              leftImageStyle={{ tintColor: theme.colors.textThird }}
+              onActionLeft={() => handleArrowBack()}
+            />
 						<OrderInfo>
 							<OrderData>
 								<OText
@@ -487,19 +487,19 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
 										{order?.business?.name}
 									</OText>
 									<Icons>
-										<TouchableOpacity
-											onPress={() =>
-												props.navigation.navigate('Business', {
-													store: businessData?.slug,
-												})
-											}
-											style={{ paddingEnd: 5 }}>
-											<OIcon
-												src={theme.images.general.phone}
-												width={16}
-												color={theme.colors.disabled}
-											/>
-										</TouchableOpacity>
+                    {(!!order?.business?.cellphone || !!order?.business?.phone) && (
+                      <View style={{ paddingEnd: 5 }}>
+                        <OLink
+                          url={`tel:${order?.business?.cellphone ?? order?.business?.phone}`}
+                        >
+                          <OIcon
+                            src={theme.images.general.phone}
+                            width={16}
+                            color={theme.colors.disabled}
+                          />
+                        </OLink>
+                      </View>
+                    )}
 										<TouchableOpacity
 											style={{ paddingStart: 5 }}
 											onPress={() => handleOpenMessagesForBusiness()}>