ordering-ui-react-native 0.21.74 → 0.21.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/themes/original/src/components/CartContent/index.tsx +41 -39
  3. package/themes/original/src/components/Checkout/index.tsx +8 -8
  4. package/themes/original/src/components/MultiCheckout/index.tsx +41 -2
  5. package/themes/original/src/components/MultiCheckout/styles.tsx +17 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.21.74",
3
+ "version": "0.21.76",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/original/src/components/CartContent/index.tsx CHANGED
@@ -120,53 +120,55 @@ export const CartContent = (props: any) => {
120
120
  {isMultiCheckout && (
121
121
  <>
122
122
  {!!cartsAvailable.length && (
123
- <ChCartsTotal>
124
- {!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
125
- <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
126
- <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
127
- {t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
128
- </OText>
129
- <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
130
- {parsePrice(totalCartsFee)}
131
- </OText>
132
- </View>
133
- )}
134
- {cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
135
- configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
123
+ <>
124
+ <ChCartsTotal>
125
+ {!!totalCartsFee && configs?.multi_business_checkout_show_combined_delivery_fee?.value === '1' && (
136
126
  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
137
127
  <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
138
- {t('DRIVER_TIP', 'Driver tip')}
128
+ {t('TOTAL_DELIVERY_FEE', 'Total delivery fee')}
139
129
  </OText>
140
130
  <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
141
- {parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
131
+ {parsePrice(totalCartsFee)}
142
132
  </OText>
143
133
  </View>
144
134
  )}
145
- <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
146
- <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
147
- {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
148
- </OText>
149
- <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
150
- </View>
151
- <View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
152
- <OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
153
- {t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
154
- </OText>
155
- </View>
156
- </ChCartsTotal>
135
+ {cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0) > 0 &&
136
+ configs?.multi_business_checkout_show_combined_driver_tip?.value === '1' && (
137
+ <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
138
+ <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
139
+ {t('DRIVER_TIP', 'Driver tip')}
140
+ </OText>
141
+ <OText size={14} lineHeight={24} color={theme.colors.textNormal} weight={'400'}>
142
+ {parsePrice(cartsAvailable.reduce((sum: any, cart: any) => sum + cart?.driver_tip, 0))}
143
+ </OText>
144
+ </View>
145
+ )}
146
+ <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
147
+ <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>
148
+ {t('TOTAL_FOR_ALL_CARTS', 'Total for all Carts')}
149
+ </OText>
150
+ <OText size={16} lineHeight={24} color={theme.colors.textNormal} weight={'500'}>{parsePrice(totalCartsPrice)}</OText>
151
+ </View>
152
+ <View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 20 }}>
153
+ <OText size={14} color={theme.colors.textNormal} weight={'300'} style={{ textAlign: 'center' }}>
154
+ {t('CART_GROUP_MESSAGE_ALERT', 'Discounts may be applied at the time of payment for this group.')}
155
+ </OText>
156
+ </View>
157
+ </ChCartsTotal>
158
+ <CheckoutAction style={{ marginTop: 0 }}>
159
+ <OButton
160
+ text={t('CHECKOUT', 'Checkout')}
161
+ bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
162
+ isDisabled={!cartsAvailable.length}
163
+ borderColor={theme.colors.primary}
164
+ imgRightSrc={null}
165
+ textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
166
+ onClick={() => handleCheckoutRedirect()}
167
+ style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
168
+ />
169
+ </CheckoutAction>
170
+ </>
157
171
  )}
158
- <CheckoutAction style={{ marginTop: 0 }}>
159
- <OButton
160
- text={t('CHECKOUT', 'Checkout')}
161
- bgColor={!cartsAvailable.length ? theme.colors.secundary : theme.colors.primary}
162
- isDisabled={!cartsAvailable.length}
163
- borderColor={theme.colors.primary}
164
- imgRightSrc={null}
165
- textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
166
- onClick={() => handleCheckoutRedirect()}
167
- style={{ width: '100%', flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
168
- />
169
- </CheckoutAction>
170
172
  </>
171
173
  )}
172
174
  </>
package/themes/original/src/components/Checkout/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useState, useEffect, useCallback, useRef } from 'react';
2
- import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler } from 'react-native';
2
+ import { View, StyleSheet, TouchableOpacity, Platform, I18nManager, ScrollView, Keyboard, BackHandler, SafeAreaView } from 'react-native';
3
3
  import { initStripe, useConfirmPayment } from '@stripe/stripe-react-native';
4
4
  import NativeStripeSdk from '@stripe/stripe-react-native/src/NativeStripeSdk'
5
5
  import Picker from 'react-native-country-picker-modal';
@@ -448,9 +448,9 @@ const CheckoutUI = (props: any) => {
448
448
 
449
449
  return (
450
450
  <>
451
- <View style={styles.wrapperNavbar}>
452
- <TopHeader>
453
- <>
451
+ <SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
452
+ <View style={styles.wrapperNavbar}>
453
+ <TopHeader>
454
454
  <TopActions onPress={() => onNavigationRedirect('BottomTab', { screen: 'Cart' }, !props.fromMulti)}>
455
455
  <IconAntDesign
456
456
  name='arrowleft'
@@ -468,10 +468,10 @@ const CheckoutUI = (props: any) => {
468
468
  {t('CHECKOUT', 'Checkout')}
469
469
  </OText>
470
470
  )}
471
- </>
472
- </TopHeader>
473
- </View>
474
- <Container forwardRef={containerRef} noPadding onScroll={handleScroll}>
471
+ </TopHeader>
472
+ </View>
473
+ </SafeAreaView>
474
+ <Container pt={0} forwardRef={containerRef} noPadding onScroll={handleScroll}>
475
475
  <View style={styles.wrapperNavbar}>
476
476
  <NavBar
477
477
  hideArrowLeft
package/themes/original/src/components/MultiCheckout/index.tsx CHANGED
@@ -12,6 +12,7 @@ import {
12
12
  } from 'ordering-components/native'
13
13
  import { View, StyleSheet, Platform, ScrollView } from 'react-native'
14
14
  import { useTheme } from 'styled-components/native';
15
+ import IconAntDesign from 'react-native-vector-icons/AntDesign';
15
16
  import { Container } from '../../layouts/Container';
16
17
  import NavBar from '../NavBar';
17
18
  import { OText, OIcon, OModal, OButton } from '../shared';
@@ -30,6 +31,8 @@ import { SignupForm } from '../SignupForm'
30
31
  import { LoginForm } from '../LoginForm'
31
32
 
32
33
  import {
34
+ TopHeader,
35
+ TopActions,
33
36
  ChContainer,
34
37
  ChSection,
35
38
  ChHeader,
@@ -76,7 +79,11 @@ const MultiCheckoutUI = (props: any) => {
76
79
  paddingLeft: 20,
77
80
  paddingRight: 20
78
81
  },
79
- wrapperNavbar: { paddingHorizontal: 20 },
82
+ wrapperNavbar: {
83
+ paddingHorizontal: 20,
84
+ backgroundColor: theme?.colors?.white,
85
+ borderWidth: 0
86
+ },
80
87
  detailWrapper: {
81
88
  paddingHorizontal: 20,
82
89
  width: '100%'
@@ -136,6 +143,7 @@ const MultiCheckoutUI = (props: any) => {
136
143
  ?.reduce((sum: any, cart: any) => sum + clearAmount((cart?.subtotal + getIncludedTaxes(cart)) * accumulationRateBusiness(cart?.business_id)), 0)
137
144
  ?.toFixed(configs.format_number_decimal_length?.value ?? 2)
138
145
 
146
+ const [showTitle, setShowTitle] = useState(false)
139
147
  const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
140
148
  const [phoneUpdate, setPhoneUpdate] = useState(false);
141
149
  const [userErrors, setUserErrors] = useState<any>([]);
@@ -233,6 +241,10 @@ const MultiCheckoutUI = (props: any) => {
233
241
  if (user) setOpenModal({ ...openModal, login: false })
234
242
  }
235
243
 
244
+ const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
245
+ setShowTitle(contentOffset.y > 30)
246
+ }
247
+
236
248
  useEffect(() => {
237
249
  if (validationFields && validationFields?.fields?.checkout) {
238
250
  checkValidationFields()
@@ -273,15 +285,42 @@ const MultiCheckoutUI = (props: any) => {
273
285
 
274
286
  return (
275
287
  <>
276
- <Container noPadding>
288
+ <View style={styles.wrapperNavbar}>
289
+ <TopHeader>
290
+ <>
291
+ <TopActions onPress={() => navigation?.canGoBack() && navigation.goBack()}>
292
+ <IconAntDesign
293
+ name='arrowleft'
294
+ size={26}
295
+ />
296
+ </TopActions>
297
+ {showTitle && (
298
+ <OText
299
+ size={16}
300
+ style={{ flex: 1, textAlign: 'center', right: 15 }}
301
+ weight={Platform.OS === 'ios' ? '600' : 'bold'}
302
+ numberOfLines={2}
303
+ ellipsizeMode='tail'
304
+ >
305
+ {t('CHECKOUT', 'Checkout')}
306
+ </OText>
307
+ )}
308
+ </>
309
+ </TopHeader>
310
+ </View>
311
+ <Container noPadding onScroll={handleScroll}>
277
312
  <View style={styles.wrapperNavbar}>
278
313
  <NavBar
314
+ hideArrowLeft
279
315
  title={t('CHECKOUT', 'Checkout')}
280
316
  titleAlign={'center'}
281
317
  onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
282
318
  showCall={false}
283
319
  paddingTop={Platform.OS === 'ios' ? 0 : 4}
284
320
  btnStyle={{ paddingLeft: 0 }}
321
+ titleWrapStyle={{ paddingHorizontal: 0 }}
322
+ titleStyle={{ marginRight: 0, marginLeft: 0 }}
323
+ style={{ marginTop: 20 }}
285
324
  />
286
325
  </View>
287
326
  <ChContainer style={styles.pagePadding}>
package/themes/original/src/components/MultiCheckout/styles.tsx CHANGED
@@ -1,5 +1,22 @@
1
1
  import styled from 'styled-components/native'
2
2
 
3
+ export const TopActions = styled.TouchableOpacity`
4
+ height: 60px;
5
+ justify-content: center;
6
+ min-width: 30px;
7
+ padding-right: 15px;
8
+ `;
9
+
10
+ export const TopHeader = styled.View`
11
+ width: 100%;
12
+ flex-direction: row;
13
+ align-items: center;
14
+ justify-content: space-between;
15
+ z-index: 1;
16
+ height: 60px;
17
+ min-height: 60px;
18
+ `
19
+
3
20
  export const ChContainer = styled.View`
4
21
  margin-bottom: 60px;
5
22
  `