ordering-ui-react-native 0.19.5-release → 0.19.6-release

package/package.json

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

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler, SafeAreaView } from 'react-native';
 import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
 import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
 import Picker from 'react-native-country-picker-modal';
@@ -448,9 +448,9 @@ const CheckoutUI = (props: any) => {
 
 	return (
 		<>
-			<View style={styles.wrapperNavbar}>
-				<TopHeader>
-					<>
+			<SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
+				<View style={styles.wrapperNavbar}>
+					<TopHeader>
 						<TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
 							<IconAntDesign
 								name='arrowleft'
@@ -468,10 +468,10 @@ const CheckoutUI = (props: any) => {
 								{t('CHECKOUT', 'Checkout')}
 							</OText>
 						)}
-					</>
-				</TopHeader>
-			</View>
-			<Container forwardRef={containerRef} noPadding onScroll={handleScroll}>
+					</TopHeader>
+				</View>
+			</SafeAreaView>
+			<Container pt={0} forwardRef={containerRef} noPadding onScroll={handleScroll}>
 				<View style={styles.wrapperNavbar}>
 					<NavBar
 						hideArrowLeft

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

@@ -10,8 +10,9 @@ import {
   ToastType,
   MultiCheckout as MultiCheckoutController
 } from 'ordering-components/native'
-import { View, StyleSheet, Platform, ScrollView } from 'react-native'
+import { View, StyleSheet, Platform, ScrollView, SafeAreaView } from 'react-native'
 import { useTheme } from 'styled-components/native';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { Container } from '../../layouts/Container';
 import NavBar from '../NavBar';
 import { OText, OIcon, OModal, OButton } from '../shared';
@@ -30,6 +31,8 @@ import { SignupForm } from '../SignupForm'
 import { LoginForm } from '../LoginForm'
 
 import {
+  TopHeader,
+  TopActions,
   ChContainer,
   ChSection,
   ChHeader,
@@ -76,7 +79,11 @@ const MultiCheckoutUI = (props: any) => {
       paddingLeft: 20,
       paddingRight: 20
     },
-    wrapperNavbar: { paddingHorizontal: 20 },
+    wrapperNavbar: {
+      paddingHorizontal: 20,
+      backgroundColor: theme?.colors?.white,
+			borderWidth: 0
+    },
     detailWrapper: {
 			paddingHorizontal: 20,
 			width: '100%'
@@ -136,6 +143,7 @@ const MultiCheckoutUI = (props: any) => {
     ?.reduce((sum: any, cart: any) => sum + clearAmount((cart?.subtotal + getIncludedTaxes(cart)) * accumulationRateBusiness(cart?.business_id)), 0)
     ?.toFixed(configs.format_number_decimal_length?.value ?? 2)
 
+	const [showTitle, setShowTitle] = useState(false)
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [userErrors, setUserErrors] = useState<any>([]);
@@ -233,6 +241,10 @@ const MultiCheckoutUI = (props: any) => {
 		if (user) setOpenModal({ ...openModal, login: false })
 	}
 
+  const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
+		setShowTitle(contentOffset.y > 30)
+	}
+
   useEffect(() => {
     if (validationFields && validationFields?.fields?.checkout) {
       checkValidationFields()
@@ -273,15 +285,44 @@ const MultiCheckoutUI = (props: any) => {
 
   return (
     <>
-      <Container noPadding>
+      <SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
+        <View style={styles.wrapperNavbar}>
+          <TopHeader>
+            <>
+              <TopActions onPress={() => navigation?.canGoBack() && navigation.goBack()}>
+                <IconAntDesign
+                  name='arrowleft'
+                  size={26}
+                />
+              </TopActions>
+              {showTitle && (
+                <OText
+                  size={16}
+                  style={{ flex: 1, textAlign: 'center', right: 15 }}
+                  weight={Platform.OS === 'ios' ? '600' : 'bold'}
+                  numberOfLines={2}
+                  ellipsizeMode='tail'
+                >
+                  {t('CHECKOUT', 'Checkout')}
+                </OText>
+              )}
+            </>
+          </TopHeader>
+        </View>
+      </SafeAreaView>
+      <Container pt={0} noPadding onScroll={handleScroll}>
         <View style={styles.wrapperNavbar}>
           <NavBar
+            hideArrowLeft
             title={t('CHECKOUT', 'Checkout')}
             titleAlign={'center'}
             onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
             showCall={false}
             paddingTop={Platform.OS === 'ios' ? 0 : 4}
             btnStyle={{ paddingLeft: 0 }}
+            titleWrapStyle={{ paddingHorizontal: 0 }}
+						titleStyle={{ marginRight: 0, marginLeft: 0 }}
+						style={{ marginTop: 20 }}
           />
         </View>
         <ChContainer style={styles.pagePadding}>

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

@@ -53,6 +53,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
   const [{ configs }] = useConfig()
 
   const isTaxIncludedOnPrice = orders.every((_order: any) => _order.taxes?.length ? _order.taxes?.every((_tax: any) => _tax.type === 1) : true)
+  const deliveryType = orders.find((order: any) => order.delivery_type)?.delivery_type
   const progressBarStyle = configs.multi_business_checkout_progress_bar_style?.value
   const showBarInOrder = ['group', 'both']
   const showBarInIndividual = ['individual', 'both']
@@ -171,19 +172,23 @@ export const MultiOrdersDetailsUI = (props: any) => {
         ))}
       </Section>
       <Divider />
-      <Section>
-        <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={20}>
-          {t('DELIVERYA_V21', 'Delivery address')}
-        </OText>
-        {loading ? (
-          <PlaceholderLine height={18} noMargin style={{ borderRadius: 2 }} />
-        ) : (
-          <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
-            {customer?.address}
-          </OText>
-        )}
-      </Section>
-      <Divider />
+      {deliveryType === 1 && (
+        <>
+          <Section>
+            <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={20}>
+              {t('DELIVERYA_V21', 'Delivery address')}
+            </OText>
+            {loading ? (
+              <PlaceholderLine height={18} noMargin style={{ borderRadius: 2 }} />
+            ) : (
+              <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
+                {customer?.address}
+              </OText>
+            )}
+          </Section>
+          <Divider />
+        </>
+      )}
       {loading ? (
         <Placeholder Animation={Fade}>
           <PlaceholderLine