ordering-ui-react-native 0.23.96 → 0.23.97

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

@@ -1,9 +1,12 @@
 import styled from 'styled-components/native'
 
 export const HelpSubItem = styled.TouchableOpacity`
-  border-bottom-color: #E9ECEF;
+  border-bottom-color: ${(props: any) => props.theme.colors.border};
   border-bottom-width: 1px;
   padding-vertical: 15px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 `
 
 export const LastOrdersContainer = styled.View`

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Dimensions, Platform } from 'react-native'
+import { WebView } from 'react-native-webview'
+import { useLanguage } from 'ordering-components/native'
+
+import { Container } from '../../layouts/Container'
+import { NotFoundSource } from '../NotFoundSource'
+import NavBar from '../NavBar'
+
+const HEIGHT_SCREEN = Dimensions.get('screen').height
+
+export const HelpOptions = (props: any) => {
+  const { item, goToBack } = props
+  const [, t] = useLanguage()
+
+  return (
+    <Container
+      pt={Platform.OS === 'ios' ? 20 : 10}
+      noPadding
+    >
+      <NavBar
+        title={t('HELP', 'Help')}
+        titleAlign={'center'}
+        onActionLeft={goToBack}
+        showCall={false}
+        btnStyle={{ paddingLeft: 0 }}
+      />
+      {!!item?.body && (
+        <WebView
+          originWhitelist={['*']}
+          automaticallyAdjustContentInsets={false}
+          source={{ html: item.body }}
+          style={{ flex: 1, height: HEIGHT_SCREEN }}
+        />
+      )}
+      {!item?.body && (
+        <NotFoundSource
+          simple
+          content={t('NO_CONTENT_TO_SHOW', 'Nothing to show')}
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -5,48 +5,49 @@ import { NotFoundSourceParams } from '../../types'
 import { useTheme } from 'styled-components/native';
 import Foundation from 'react-native-vector-icons/Foundation'
 import {
-	NotFound,
-	NotFoundImage
+  NotFound,
+  NotFoundImage
 } from './styles'
 
 export const NotFoundSource = (props: NotFoundSourceParams) => {
-	const {
-		hideImage,
-		content,
-		btnTitle,
-		btnStyle,
-		conditioned,
-		onClickButton
-	} = props
+  const {
+    hideImage,
+    content,
+    btnTitle,
+    btnStyle,
+    conditioned,
+    onClickButton,
+    simple
+  } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
 
-	return (
-		<NotFound>
-			{!hideImage && (
-				<NotFoundImage>
-					<Foundation
-						name='page-search'
-						color={theme.colors.primary}
-						size={60}
-						style={{ marginBottom: 10 }}
-					/>
-				</NotFoundImage>
-			)}
-			{content && conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
-			{content && !conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
-			{!onClickButton && props.children && (
-				props.children
-			)}
-			{onClickButton && (
-				<View style={{ marginTop: 10, width: '100%' }}>
-					<OButton
-						style={{ width: '100%', height: 50, ...btnStyle }}
-						onClick={() => onClickButton()}
-						text={btnTitle}
-					/>
-				</View>
-			)}
-		</NotFound>
-	)
+  return (
+    <NotFound simple={simple}>
+      {!hideImage && !simple && (
+        <NotFoundImage>
+          <Foundation
+            name='page-search'
+            color={theme.colors.primary}
+            size={60}
+            style={{ marginBottom: 10 }}
+          />
+        </NotFoundImage>
+      )}
+      {content && conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
+      {content && !conditioned && <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>{content}</OText>}
+      {!onClickButton && props.children && (
+        props.children
+      )}
+      {onClickButton && (
+        <View style={{ marginTop: 10, width: '100%' }}>
+          <OButton
+            style={{ width: '100%', height: 50, ...btnStyle }}
+            onClick={() => onClickButton()}
+            text={btnTitle}
+          />
+        </View>
+      )}
+    </NotFound>
+  )
 }

package/themes/original/src/components/NotFoundSource/styles.tsx

@@ -1,14 +1,23 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
 export const NotFound = styled.View`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: auto;
-  margin: 10px auto;
-  padding: 10px;
+  ${(props: any) => props.simple
+    ? css`
+        background-color: ${(props: any) => props.theme.colors?.white};
+        border-radius: 10px;
+        padding: 15px;
+        padding-horizontal: 20px;
+        border: 1px ${(props: any) => props.theme.colors?.border};
+    ` : css`
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: auto;
+      margin: auto auto;
+      padding: 10px;
+    `}
 `
 
 export const NotFoundImage = styled.View`