ordering-ui-react-native 0.22.76 → 0.22.77-release

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

@@ -1,27 +1,48 @@
 import React, { useState } from 'react'
-import { useTheme } from 'styled-components/native';
-import { Platform, RefreshControl } from 'react-native'
-import { HelpParams } from '../../types'
+import { Platform, RefreshControl, View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { useTheme } from 'styled-components/native'
 import { useLanguage } from 'ordering-components/native'
+
+import { HelpParams } from '../../types'
+import { CmsContent } from './functions'
+import { HelpSubItem, LastOrdersContainer } from './styles'
+import { Container } from '../../layouts/Container'
+
+import { OText, OIcon } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
-import { OText } from '../shared'
 import { LastOrders } from '../LastOrders'
-import { Container } from '../../layouts/Container'
 
-import {
-  HelpSubItem,
-  LastOrdersContainer
-} from './styles'
+const HelpUI = (props: HelpParams) => {
+  const { cmsState, navigation } = props
+
+  const { items, loading, error, pages } = cmsState
 
-export const Help = (props: HelpParams) => {
-  const {
-    navigation
-  } = props
   const [, t] = useLanguage()
   const theme = useTheme()
-  const [refreshing] = useState(false);
+
+  const [refreshing] = useState(false)
   const [refresh, setRefresh] = useState(false)
 
+  const HelpItem = ({ item }: any) => {
+    const currentItem = pages.find((p: any) => p.id === item.id)
+    return (
+      <HelpSubItem
+        activeOpacity={0.7}
+        onPress={() => onRedirect('HelpOptions', { item: currentItem })}
+      >
+        <OText size={14} style={{ width: '90%' }}>
+          {item.name}
+        </OText>
+        <OIcon
+          width={15}
+          src={theme.images.general.chevron_right}
+        />
+      </HelpSubItem>
+    )
+  }
+
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
@@ -49,22 +70,36 @@ export const Help = (props: HelpParams) => {
         showCall={false}
         btnStyle={{ paddingLeft: 0 }}
       />
-      <HelpSubItem
-        onPress={() => onRedirect('HelpOrder')}
+      <OText
+        size={20}
+        weight={'bold'}
+        style={{ marginBottom: 20 }}
       >
-        <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>
-
+        {t('ALL_THE_THEMES', 'All the themes')}
+      </OText>
+      {!loading && !error && items.map((item: any) => (
+        <HelpItem
+          key={item.id}
+          item={item}
+        />
+      ))}
+      {loading && (
+        <Placeholder Animation={Fade}>
+          <View style={{ flexDirection: 'column' }}>
+            {[...Array(5)].map((_, i) => (
+              <HelpSubItem key={i}>
+                <PlaceholderLine key={i} height={30} width={90} noMargin />
+              </HelpSubItem>
+            ))}
+          </View>
+        </Placeholder>
+      )}
+      {!loading && !!error && (
+        <NotFoundSource
+          simple
+          content={error}
+        />
+      )}
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
         <LastOrders {...props} onRedirect={onRedirect} refresh={refresh} setRefresh={setRefresh} />
@@ -72,3 +107,13 @@ export const Help = (props: HelpParams) => {
     </Container>
   )
 }
+
+export const Help = (props: HelpParams) => {
+  const helpProps = {
+    ...props,
+    UIComponent: HelpUI
+  }
+  return (
+    <CmsContent {...helpProps} />
+  )
+}

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,53 @@
+import React, { useMemo } from 'react'
+import { Dimensions, Platform } from 'react-native'
+import { WebView } from 'react-native-webview'
+import { useLanguage } from 'ordering-components/native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Container } from '../../layouts/Container'
+import { NotFoundSource } from '../NotFoundSource'
+import NavBar from '../NavBar'
+
+export const HelpOptions = (props: any) => {
+  const { item, goToBack } = props
+  const [, t] = useLanguage()
+
+  const insets = useSafeAreaInsets()
+
+  const containerHeight = useMemo(() => {
+    const windowHeight = Dimensions.get('window').height
+    const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 0
+    const navigationBarHeight = Platform.OS === 'android' ? 48 : 0
+    const topPadding = (Platform.OS === 'ios' ? 20 : 10) + 48
+    return windowHeight - bottomPadding - navigationBarHeight - topPadding
+  }, [insets.bottom])
+
+  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: containerHeight }}
+          nestedScrollEnabled
+        />
+      )}
+      {!item?.body && (
+        <NotFoundSource
+          simple
+          content={t('NO_CONTENT_TO_SHOW', 'Nothing to show')}
+        />
+      )}
+    </Container>
+  )
+}

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

@@ -162,4 +162,4 @@ export const HighestRatedBusinesses = (props: any) => {
   };
 
   return <BusinessesListingController {...highestRatedBusinessesProps} />;
-}; 
+};

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

@@ -1,22 +1,48 @@
-import React, { useEffect } from 'react';
-import { useLanguage, useOrder, useConfig } from 'ordering-components/native';
+import React from 'react';
+import { useLanguage, useOrder, useConfig, useSession, useApi, ToastType, useToast } 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, Platform } from 'react-native';
+import uuid from 'react-native-uuid';
 
 export const Home = (props: any) => {
 	const { onNavigationRedirect, businessSlug } = props;
 	const { width, height } = useWindowDimensions();
 	const [, t] = useLanguage();
-	const [orderState] = useOrder();
+	const [orderState, { handleOrderStateLoading, setStateInitialValues }] = useOrder();
 	const [{ configs }] = useConfig()
+	const [, { login }] = useSession()
+	const [ordering] = useApi()
+	const [, { showToast }] = useToast()
 
 	const theme = useTheme();
-	const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
-	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
+
+	const handleCreateGuestUser = async (values: any) => {
+		try {
+			await handleOrderStateLoading(true)
+			const { content: { error, result } } = await ordering.users().save(values)
+			if (!error) {
+				await login({
+					user: result,
+					token: result.session?.access_token
+				})
+			} else {
+				showToast(ToastType.Error, t('ERROR_CREATING_GUEST_USER', 'Error creating guest users'))
+			}
+			await handleOrderStateLoading(false)
+		} catch (err) {
+			await handleOrderStateLoading(false)
+			showToast(ToastType.Error, t('ERROR_CREATING_GUEST_USER', 'Error creating guest users'))
+		}
+	}
+
+	const handleUpdateGuest = async () => {
+		const guestToken = uuid.v4()
+		if (guestToken) await handleCreateGuestUser({ guest_token: guestToken })
+	}
 
 	return (
 		<View style={styles.container}>
@@ -47,6 +73,7 @@ export const Home = (props: any) => {
 					isCircle={false}
 					onClick={() => onNavigationRedirect('Login')}
 					imgRightSrc={null}
+					isDisabled={orderState?.loading}
 				/>
 				<OButton
 					text={t('SIGNUP', 'Signup')}
@@ -56,15 +83,13 @@ export const Home = (props: any) => {
 					textStyle={{ color: 'black' }}
 					onClick={() => onNavigationRedirect('Signup')}
 					imgRightSrc={null}
+					isDisabled={orderState?.loading}
 				/>
 				<TouchableOpacity
+					disabled={orderState?.loading}
 					style={{ ...styles.textLink, marginTop: 12 }}
-					onPress={() =>
-						orderState?.options?.address?.address || isAllowUnaddressOrderType
-							? onNavigationRedirect(!!businessSlug ? 'Business' : 'BusinessList', { isGuestUser: true })
-							: onNavigationRedirect('AddressForm', { isGuestUser: true })
-					}>
-					<OText weight="normal" size={18} color={theme.colors.white}>
+					onPress={() => handleUpdateGuest()}>
+					<OText weight="normal" size={18} color={orderState?.loading ? '#ccc' : theme.colors.white}>
 						{t('CONTINUE_AS_GUEST', 'Continue as guest')}
 					</OText>
 				</TouchableOpacity>

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

@@ -112,7 +112,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 				orders.map((order: any) =>
 					<ItemWrap imageStyle={{ opacity: 0.7 }} source={order.business?.header ? { uri: order.business?.header } : theme.images.dummies.product} key={order.id}>
 						<OText color={theme.colors.white} size={12} lineHeight={18} weight={'600'}>{order?.business?.name}</OText>
-						<OText color={theme.colors.white} size={10} lineHeight={15}>{`${getOrderStatus(order.status)?.value} on ${formatDate(order?.created_at)}`}</OText>
+						<OText color={theme.colors.white} size={10} lineHeight={15}>{`${getOrderStatus(order.status, t)?.value} on ${formatDate(order?.created_at)}`}</OText>
 					</ItemWrap>)
 			)}
 		</>

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

@@ -121,7 +121,7 @@ export const Otp = (props: otpParams) => {
         {!isCheckingCode && (
           <OtpInputs
             ref={inputRef}
-            autofillFromClipboard={false}
+            autofillFromClipboard={true}
             numberOfInputs={pinCount}
             style={loginStyle.container}
             returnKeyType={'done'}