ordering-ui-react-native 0.21.74 → 0.21.75

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 (4) 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/MultiCheckout/index.tsx +41 -2
  4. 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.75",
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/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
  `