ordering-ui-react-native 0.12.35 → 0.12.36

package/package.json

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

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/OrderDetails/index.tsx

@@ -36,7 +36,7 @@ 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';
@@ -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()}>